HTML网页设计_10.ppt

《HTML网页设计_10.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第十章使用DIV+CSS来布局上节课回顾⑴插入一个表格并添加内容⑵选择表格元素⑶导入和导出表格式数据⑷使用“扩展表格”模式更容易编辑表格⑸设置表格和单元格的格式⑹调整表格、列和行的大小⑺添加及删除行和列⑻拆分和合并单元格⑼复制、粘贴和删除单元格⑽嵌套表格⑾对表格进行排序本章内容⑴层的概念⑵Div+CSS布局的优点⑶插入层⑷设置层首选参数和属性⑸管理层⑹操作层⑺将层转换为表格⑻制作层动画⑼使用div标签进行布局⑽更改div标签的高亮颜色⑾处理CSS布局可视化⑿使用跟踪图像什么是层Dreamweaver会将具有绝对位置的所有div标签视为层层可以包含文本、图像或其他

2、任何可在HTML文档正文中放入的内容Div+CS布局的优点大大缩减页面代码，提高页面浏览速度,缩减带宽成本;结构清晰，容易被搜索引擎搜索到，天生优化了seo（请查看参考资料）缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。强大的字体控制和排版能力。CSS非常容易编写。提高易用性。可以一次设计，随处发布。更好的控制页面布局。表现和内容相分离。Div+CSS布局的优点更方便搜索引擎的搜索。Table布局灵活性不大，你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。

3、另外如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。Table中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div更能体现样式和结构相分离，结构的重构性强。在几乎所有的浏览器上都可以使用。以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。你可以轻松地控制页面的布局。你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。绘制一个或多个层在“插入”栏的“布局”类别中单击“绘制层”按钮。在“文档”窗口的“设

4、计”视图中，执行下列操作之一：拖动以绘制一个层。通过按住Ctrl键并拖动来连续绘制多个层。只要不松开Ctrl，就可以继续绘制新的层。在文档中的特定位置插入层将插入点放置在“文档”窗口中，然后选择“插入”>“布局对象”>“层”。在层中放置插入点在该层边框内的任意位置单击。该层的边框会突出显示，并且选择柄将出现，但该层本身尚未选定。显示层边框选择“查看”>“可视化助理”，然后选择“层外框”或“CSS布局外框”。注意：同时选择这两个选项可获得同样的效果。隐藏层边框选择“查看”>“可视化助理”，然后取消选择“层外框”和“CSS布局外框”。查看或设置层首选参数选择“编辑”

5、>“首选参数”。从左侧的“类别”列表中选择“层”。按需要进行更改。单击“确定”。查看和设置层属性选择一个层。在“属性”检查器（“窗口”>“属性”）中，单击右下角的展开箭头（如果它尚未展开）以查看所有属性。根据需要设置属性来更改层的属性。选择多个层选择层时请按下Shift键。查看和设置多个层的所有属性选择多个层。在“属性”检查器（“窗口”>“属性”）中，单击右下角的展开箭头（如果它尚未展开）以查看所有属性。通过设置属性来更改层的属性。打开“层”面板选择“窗口”>“层”。层显示为按z轴顺序排列的名称列表；默认情况下，首先创建的层（z轴顺序为1）出现在列表的底部，最新

6、创建的层（z轴顺序大于1）出现在列表的顶部。但是可以通过更改层的z轴来更改层在堆叠顺序中的位置。选择层要在“层”面板中选择一个层，请执行以下操作：在“层”面板（“窗口”>“层”）中，单击该层的名称。若要在“文档”窗口中选择一个层，请执行以下操作之一：单击一个层的选择柄。单击一个层的边框。在一个层中按住Ctrl-Shift键并单击。在层内单击并按Ctrl+A以选择层的内容。在层内单击并在标签选择器中选择层的标签。选择多个层在“层”面板（“窗口”>“层”）中，请按住Shift键并单击两个或更多的层名称。在“文档”窗口中，在两个或更多个层的边框内（或边框上）按住Shi

7、ft键并单击。在“层”面板中更改层顺序选择“窗口”>“层”，打开“层”面板。将层向上或向下拖至所需的堆叠顺序。“属性”检查器中更改层顺序选择“窗口”>“层”，打开“层”面板以查看当前堆叠顺序。在“层”面板或“文档”窗口中选择一个层。在层的“属性”检查器（“窗口”>“属性”）中，在Z轴文本框中键入一个编号。键入一个较大的数字可将该层在层叠顺序中上移。键入一个较小的数字可将该层在层叠顺序中下移。更改层可见性选择“窗口”>“层”，打开“层”面板。在层的眼形图标列内单击可以更改其可见性。眼睛睁开表示该层是可见的。眼睛闭合表示该层是不可见的。如果没有眼形图标，该层通常会继

8、承其父级的可见性。（如果