第7章 HTML网页布局设计.pptVIP

* * 本章介绍的主要内容有： 布局模式 绘制表格和单元格 用框架布局页面 第7章 HTML网页布局设计 7.1 在布局模式下用表格布局 为了简化使用表格进行页面布局的过程，Dreamweaver提供了“布局”模式。在“布局”模式中，可以使用表格作为基础结构来设计网页，同时也避免了使用传统的方法创建基于表格的设计时经常出现的一些问题。 7.1.1 热身实例――用布局表格布局网页 1．切换到表格布局模式 2．布局顶部部分 3．布局主体部分 4．布局底部信息部分 5．美化网页 7.1.2 关于“布局”模式 在“布局”模式中，可以在添加网页内容前使用布局表格和布局单元格对页面进行布局。在绘制布局表格或布局单元格之前，必须从“标准”模式切换到“布局”模式，可以通过执行【查看】→【表格模式】→【布局模式】命令实现切换。 7.1.3 绘制“布局表格”和“布局单元格” 1．绘制“布局表格” 2．绘制“布局单元格” （1）确保处于“布局”模式中。 （2）在【布局】工具栏中，单击【绘制布局表格】按钮 。鼠标移到页面时指针变为加号“+”。 （3）然后拖动鼠标指针以创建布局表格。 （1）确保处于“布局”模式中。 （2）在【布局】工具栏中，单击【绘制布局单元格】按钮 。鼠标移到页面指针变为加号“+”。 （3）然后拖动鼠标指针以创建布局单元格。 3．绘制嵌套布局表格 7.1.4 在“布局单元格”添加内容 在“布局”模式中可以将文本、图像和其他内容添加到布局单元格中，就像在“标准”模式中将内容添加到表格单元格一样。单击要添加内容的单元格，然后键入文本或插入其他内容。 7.1.5 “布局表格”和“布局单元格”的调整及设置 1．清除自动设置的单元格高度 2．调整布局表格、布局单元格的大小以及移动它们 3．设置布局单元格和表格的格式 4．设置列宽度 7.2 用框架布局页面 7.2.1 热身实例――用框架布局一个简单页面 1．建立框架集 框架按钮 2．保存框架和框架集 3．理解框架集HTML代码 7.2.2 创建框架和框架集 1．使用预定义的框架集 （1）创建新的空预定义框架集 （2）在现在有文档中创建预定义的框架集 2．自己设计框架集 3．拆分或删除框架 4．创建嵌套框架 7.2.3 设置框架及框架集属性 1．选取要进行更改的框架和框架集 2．设置框架属性 3．设置框架集属性 7.2.4 保存框架和框架集 1．保存框架集内所有的文件 2．保存框架中显示的文档 在需要保存的框架内单击，执行【文件】→【保存框架】命令或者执行【文件】→【框架另存为】命令。 执行 【文件】→【保存全部】命令。 3．要保存框架集文件 在【框架】面板或视图窗口中选择框架集，执行【文件】→【保存框架页】命令或者执行【文件】→【框架集另存为】命令。 *