LAMP兄弟连——PHP免费在线课开班,欢迎所有PHP/LAMP爱好者!
【课程名称】
DIV+CSS网页标准化布局
【上课方式】
- 网络传播:要求学员使用自己独享的宽带, 网速不低于512K
- 登录方式:http://lamp.cenwave.com/ PHP在线教室
- 报名方式:
【课程大纲】
|
|
网页制作概述 | XHTML基础 |
CSS基础 | |
HTML的设计与应用 | HTML的设计与应用 XHTML语言的语法 XHTML文件的主体结构 文字版面的编辑 创建图像和链接 使用XHTML表格 XHTML框架结构 XHTML表单设计 |
CSS的设计与应用 | 将样式表加入到HTML中 CSS选择符 常见的样式属性和值 |
DIV+CSS网页标准化布局 | DIV+CSS的优势 "无意义"的元素div和span 区块框模型 区块框定位 区块框浮动 使用区块框设计页面布局 |
DIV和CSS网站首页面布局实例 | XHTML文件的设计 CSS文件设计 |
【总计课时】
6 小时
【上课时间】
总计3天,每天两小时
- 2009-12-01 14:30 到16:30 《HTML》
- 2009-12-02 14:30 到16:30 《CSS》
- 2009-12-03 14:30 到16:30 《DIV+CSS》
【内容简介】
网页是Internet上最基本的文档,主要是作为网站的一部分,但也可以独立存在。对于网页制作来讲,HTML和CSS是所有网页制作技术的核心与基础。HTML是Web页面的描述性语言,不管在Web上发布信息,还是编写可交互的程序,都离不开HTML语言的应用。而CSS则是为HTML制定样式的机制,能控制浏览器如何显示HTML中的每个元素及其内容。CSS是和HTML一起工作的,用来弥补HTML对网页格式化功能的不足。既可以将HTML和CSS写在同一个文件中,也可以分开编写,都是纯文本文件。
使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别。因为现在的网站设计标准中,已经不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。通过使用div盒子模型结构将各部分内容划分到不同的区块,然后用css来定义盒子模型的位置、大小、边框、内外边距、排列方式等。简单地说,div用于搭建网站结构(框架)、css用于创建网站表现(样式/美化)。该标准简化了HTML页面代码,获得一个较优秀的网站结构,有利于日后网站维护、协同工作和便于搜索引擎抓取。当然并不是所有的网页都需要用div布局,例如数据页面、报表之类的页面,还是使用HTML的表格会比较方便,web标准里并没有说要抛弃table。
采用"DIV+CSS"对网站进行构建越来越被网页设计者所重视,因为在DIV+CSS结构的网页中,几乎每一个元素的属性都是使用CSS定义的,所以对于网页区域、元素的调整,起到了很大的便捷作用。这种CSS+DIV模式的网站设计具有以下优势:
- 表现和内容相分离
在HTML文件中只存放文本信息,而将设计部分放在一个独立样式文件中。使我们能够对页面的布局施加更多的控制,HTML代码仍然可以保持简单明了的初衷。代码简洁,提高页面浏览速度
CSS的极大优势表现在简洁的代码。对于一个大型网站来说,不仅可以节省大量的带宽提高页面的浏览速度,而且增加了有效关键词占网页总代码的比重,因此使用DIV+CSS的web标准制作的网站,对搜索引擎抓取页面具有一定的优势。
- 易于维护和改版
网页内容和设计样式的分离,减少了一些重复重构的方法。使页面和样式的调整变得更加方便,只要简单地修改几个CSS文件就可以重新设计整个网站的页面。很多问题只需要改变CSS而不需要改动程序,从而降低了网站改版的成本。
- 提高搜索引擎对网页的索引效率
用构建的网站容易向W3C标准靠拢,网站是否符合W3C标准是搜索引擎给网页排名的一个影响因素。另外,网站源代码简洁,除了几个div、span、ul、li之类的标签外,几乎不用其他标签,而且使用DIV+CSS可以把网页中的主要内容放在前面,这样网站的内容完全裸露在搜索引擎面前,便于抓取关键内容。