第9章使用流体网格布局网页.ppt

《网页设计与制作案例教程》（第3版） 《网页设计与制作案例教程》（第3版） 第9章 使用流体网格布局网页 《网页设计与制作案例教程》（第3版） 本章学习内容 9.1 学习任务：流体网格布局概述 9.2 案例 使用流体网格布局购物网 9.3 实训——使用流体网格布局宠物网 《网页设计与制作案例教程》（第3版） 9.1 学习任务：流体网格布局概述 本节学习任务： 了解什么是流体网格布局，理解流体网格布局 的内涵和功能。 《网页设计与制作案例教程》（第3版） 9.1 学习任务：流体网格布局概述 页面的设计与开发应当根据用户行为以及设备环境进 行响应和调整，无论用户正在使用笔记本还是移动设 备，页面都应该自动切换分辨率、图片尺寸及相关脚 本功能等，以适应不同设备，使页面能够自动响应用 户的设备环境。 Dreaweaver CS6新增加了响应式Web设计工具— —流体网格布局，它是一个简单的辅助设计工具，可 以创建自适应多种设备的网页内容。 《网页设计与制作案例教程》（第3版） 9.2 案例 使用流体网格布局购物网 学习目标：通过本案例的学习，掌握流体网格布局技术，创建自适应多种设备的网页技能。 知识要点：创建流体网格布局，创建模块内容，设置流体网格布局网页。 《网页设计与制作案例教程》（第3版） 9.2 案例 使用流体网格布局购物网 案例自适应多种设备的多屏幕预览效果 请在Dreamweaver中完成购物网的制作。 《网页设计与制作案例教程》（第3版） 9.2.1 创建流体网格布局 创建流体网格布局的方式有3种，它们分别是。 执行“文件→新建流体网格布局”菜单命令； 执行“文件→新建”菜单命令，在打开的“新建”对话框中选择“流体网格布局”； 在欢迎界面中，单击“新建”栏中的“流体网格布局”按钮。 通过以上3种方式，都可以进入“流体网格布局” 设置对话框。 9.2 案例 使用流体网格布局购物网 《网页设计与制作案例教程》（第3版） 9.2 案例 使用流体网格布局购物网 “流体网格布局”设置对话框 《网页设计与制作案例教程》（第3版） 流体网格布局默认显示移动设备、平板电脑、桌面 电脑3种设备的网格方案。 移动设备：默认5列网格，网格总宽度占设备屏幕宽度的91%，最大宽度480px； 平板电脑：默认8列网格，网格总宽度占设备屏幕宽度的93%，最大宽度768px； 桌面电脑：默认10列网格，总宽度占屏幕宽度的90%，最大宽度1232px。 列与列之间的间隙是列宽的25%，文档类型默认 HTML5。以上数据均可以根据需要进行修改。 9.2 案例 使用流体网格布局购物网 《网页设计与制作案例教程》（第3版） 9.2.2　创建模块内容 部署完所需文件之后，可以开始创建流体网格布局 的内容了。流体网格布局默认为移动设备视图，可 以通过状态栏的设备图标来切换移动设备、平板电 脑和桌面电脑的视图。 Dreaweaver自动创建应用了gridContainer样式 的DIV对象，并在此对象中生成ID为LayoutDiv1 的DIV，两个DIV都以绿色透明色块表示。所有布 局的DIV标签必须直接插入到gridContainer标签 中，目前Dreaweaver不支持嵌套布局的DIV标签。 9.2 案例 使用流体网格布局购物网 《网页设计与制作案例教程》（第3版） 案例小结： 使用流体网格布局的网站，能够自动地适应桌 面电脑、平板电脑和智能手机3种设备。在设置 流体网络布局的网页时，如果修改CSS样式， 或者创建新的CSS样式时，需要修改相应的3个 CSS样式，或者在不同的位置创建3个新的CSS 样式。 9.2 案例 使用流体网格布局购物网 《网页设计与制作案例教程》（第3版） 9.3 实训—使用流体网格布局宠物网 1．实训目的 熟练掌握使用流体网格布局网页的方法； 掌握创建网页模块内容的方法； 掌握流体网络布局网页的设置等。 2．实训要求及网页设计效果 创建流体网格布局页面，插入多个新的DIV模 块。 《网页设计与制作案例教程》（第3版） 9.3 实训—使用流体网格布局宠物网 自适应多种设备的多屏幕预览效果 请在Dreamweaver中完成实训任务的制作。 《网页设计与制作案例教程》（第3版） 谢谢！ 《网页设计与制作案例教程》（第3版） 《网页设计与制作案例教程》（第3版）