网页制作案例教程-清华大学出版社-第5章-网页布局规划设计.ppt

谢谢！ 5.2.2 表格 布局实例 5.3层布局规划页面 5.3.1层布局基本操作 （1）创建层 1）创建层 1．新建一个文档。 2．在“插入栏”中的“布局”类别中，单击“描绘AP Div”按钮。如图5-3-1所示。 图5-3-1 “布局”栏图 　3．鼠标指针变“+”，按住左键并拖动，可以在网页中创建一个层，如图5-3-2所示。 图5-3-2 “绘制层”图 2）创建嵌套层 嵌套层指插入到另一个层中的层。创建的操作为： 1．新建一个文档，绘制一个层。 2．执行以下操作之一： 将鼠标放在层中，然后单击菜单栏中“插入”|“布局对象”|“AP Div”命令。 将一个层的标志图标 ，用拖拽的方式拖到另一层中。 3．创建了一个嵌套层，如图5-3-4所示。其中外面的层被称为“父层”，里面的层被称为“子层”。 图5-3-4 双层“AP Div”图 3）向层中添加内容 将光标定位在层中，光标变为“|”，可以向层中插入文本或图像等网页元素。 （2）层的基本操作 1．选择层 使用下述方法中的任意一种方法，均可选中一个层： 单击文档中层的边框线； 单击文档左上方的层标志 ； 2．移动层。 使用下述方法中的任意一种方法，均可移动层： 选中层后，拖动 标记，可以将层移到文档的任意位置。 鼠标移到层的边框上，指针变为 ，拖动鼠标可以移动层。 对于多层的移动，拖动最后被选中的有实心控制点的层的 标记，可以同时将多层移动。 3．层的对齐。 选中多层，单击菜单栏中“修改”|“排列顺序”命令，选择对齐方式，如“左对齐”、“右对齐”；“对齐上边缘”或“对齐下边缘”等。 4．层的属性设置。 同其他网页元素一样，层的设置需要在“属性检查器”中进行。 5．层面板的使用。 通过层面板我们可以设置层是否重叠、层的可见性、层的叠放次序等。 图5-3-7 层面板 （3）层与表格的转换 1）将层转化为表格 层转换为表格的操作为： 1．新建一个空白文档，在文档中绘制两个层。 2．单击菜单栏中“修改”|“转换”|“AP Div转换为表格”命令，打开“将AP Div转换为表格”对话框，如图5-3-8所示。 图5-3-8 “将AP Div转换为表格”对话框图 2）将表格转化为层 表格转化为层的操作为： 1．打开上面层转换为表格的文档。 2．单击菜单栏中“修改”|“转换”|“表格到层”命令，打开“转换表格为层”对话框，如图5-3-9所示。 5-3-9 “转换表格为层”对话框图 5.3.2 层布局实例 5.4 框架布局规划页面 5.4.1框架布局基本操作 （1）建立框架 在Dreamweaver CS5中，预定义了13种框架集结构供用户使用。建立预定义框架集的操作为： 1）定位光标在要插入框架集的窗口中。 2）执行以下操作之一： 单击菜单栏中“插入”|“HTML”|“框架”命令，在子菜单中单击相应的框样式 在“插入”栏的“布局”类别中，单击框架按钮右侧的下拉按钮，弹出下拉菜单，单击相应的框架集图标。 （2）框架面板 1）打开框架面板 单击菜单栏中“窗口”|“框架“命令，打开框架面板如图5-4-4所示。在面板中标识了每个框的名称。 图5-4-4 框架面板图 2）框架面板的基本操作： ①选择框架集：在“框架“面板中单击最外层的边框，使其出现粗黑边显示，则选中了框架集。如图5-4-5所示，选中了框架集。 ②选择框架：在“框架”面板中单击要选择的框架，使其出现细黑边显示，则选中了框架。如图5-4-6所示，选中了下方的框架。 图5-4-5选中框架集图 图5-4-6选中下方的框架图 （3）设置框架的属性 1）设置框架集属性 选中框架集，打开框集属性，如图5-4-7。 图5-4-7 框集属性图 2）设置框架属性 选择框架后（如选择左侧框架），打开框架属性，如图5-4-8所示。 图5-4-8 选择左侧框架属性图 （4）保存框架 1）保存框架集的操作： ①在框架面板中，选择中要保存的框架集。 ②单击菜单栏中“文件”|“保存框架页”命令。 ③打开“另存为”对话框，设置保存位置和文件名，单击“保存”按钮，保存了框架集网页。 2）保存框架的操作： ①定位光标在要保存的框架内，或在框架面板中选择要保存的框架。 ②单击菜单栏中“文件”|“保存框架”命令，打开另存为对话框。 ③打开“另存为”对话框，设置保存位置和文件名，单击“保存”按钮，保存了框架。 5.4.2 框架布局实例 5.5 项目案例 学习目标 案例描述 学习和使用网页布局技术。 通过网页布局的原则，利用三种布局方式进行混合布局网页，制作如图5-5-1所示的网页。 案例要点 三种布局的操作。 案例实施 （1）选择“开始”｜“所有程序”｜“Adobe Dreamweaver CS5