6.2.4 插入并编辑DIV
要使用CSS+DIV布局需要先在页面中插入DIV，然后通过编辑DIV标签的CSS属性来实现布局。
2. 保存单个框架文档 在网页中需保存的框架区域单击鼠标定位插入点，选择【文件】/【保存框架】菜单命令，
在打开的“另存为”对话框中设置框架的保存位置和名称后，单击确定即可。
保存单个框架文档
6.1.6 保存框架和框架集
3. 保存所有框架文档 选择【文件】/【保存全部】菜单命令，可在打开的“另存为”对话框中完成框架集及所有
框架网页文档的保存工作。
保存所有框架文档
6.1.7 设置框架集与框架属性
1. 设置框架集属性
2. 设置框架属性
框架集的属性设置面板
框架的属性设置面板
6.1.8 在框架中添加网页
框架创建好后，就可以为框架集中的各个框架指定显示的网页文件，其具体操作如下。
（1）选择框架
（2）指定网页文件
6.1.8 在框架中添加网页
6.2.3 CSS+DIV布局模式的优势
掌握使用CSS样式布局是实现Web标准的基础。在制作主页时采用CSS技术，可以有效地对页 面布局、字体、颜色、背景、其他效果实现更加精确地控制。采用CSS+DIV布局主要有以下优点。
页面加载更快 修改效率更高
站点更容易被访问 页面简洁
搜索引擎更容易检索
提高设计者速度
可以与脚本语言结合，使网页 中的元素产生各种动态效果。
6.2.1 认识CSS样式
2．CSS特点
使用文件
将样式分类使用
冲突处理
集中管理样式信息
共享样式设定
6.2.2 认识CSS+DIV布局模式
CSS+DIV布局模式是根据CSS规则中涉及的margin（边界）、border（边框）、padding（填 充）、content（内容）来建立的一种网页布局方法，如图所示即为一个标准的CSS+DIV布局结构， 左侧为代码，右侧为效果图。
（3）确认保存
（4）调整框架大小
6.1.8 在框架中添加网页
（5）为其他框架指定网页
内容导航
6.1 课堂案例：布局“酒店预订”网页 6.2 课堂案例：布局“婚纱礼服”网首页 6.3 项目实训 6.4 课后练习
23
课堂案例：布局“婚纱礼服”网首页
通过前面的学习，米拉对网页布 局有了一定的认识，老洪说，要想提 高网页布局设计水平，还需要学会 CSS+DIV布局。老洪接着就让米拉尝 试使用CSS+DIV布局来设计一个婚纱 礼服旗舰店首页，完成后的参考效果 如图所示。
1. CSS功能
灵活控制页面文字的字体、字号、 颜色、间距、风格、位置等。
随意设置一个文本块的行高 和缩进，并能为其添加三维 效果的边框。
方便定位网的位置。
可以为网页中的元素设置各种 过滤器，从而产生诸如阴影、 模糊、透明等效果。
选择整行
选择多个单元格 选择整列
6.1.2 调整表格结构
2. 插入与删除行或列 ① 插入行或列：利用快捷菜单插入行或列
② 删除行或列：选择需删除的行或列，单击鼠标右键，选择【表格】/【删除行】命令可删除行， 选择【表格】/【删除列】命令则可删除列。
6.1.3 设置表格和单元格
创建的表格还可对其进行相关设置，使其满足设计中的需要，如调整行高列宽，设置单元 格属性等，其具体操作如下。
普通高等学校计算机教育“十二五”规划教材
第6章 布局网页版面
网页设计与制作立体化教程（Photoshop+Dreamweaver+Flash CS6双色微课版）
内容导航
6.1 课堂案例：布局“酒店预订”网页 6.2 课堂案例：布局“婚纱礼服”网首页 6.3 项目实训 6.4 课后练习
2
课堂案例：布局“酒店预订”网页
“婚纱礼服”首页参考效果
6.2.1 认识CSS样式
CSS是“Cascading Style Sheet（层叠样式表）”的缩写，将多重样式定义可以层叠为一 种。CSS是标准的布局语言，用于为HTML文档定义布局，如控制元素的尺寸、颜色、排版等， 解决了内容与表现分离的问题。
6.2.1 认识CSS样式
（1）选择框架
（2）显示效果
6.1.5 创建框架和框架集
3. 创建自定义框架 选择框架
定位鼠标指针
完成自定义框架的创建
拆分框架
6.1.6 保存框架和框架集
1. 保存框架集 保存框架集是指将框架网页中的所有框架内容以及框架集本身都进行保存。
保存框架页
设置保存位置和名称
6.1.6 保存框架和框架集
缘”的框架集，其具体操作如下。
创建框架
6.1.5 创建框架和框架集
2. 选择框架集与框架
① 选择框架集：在“框架”面板中框架集的边框上单击即可选择整个框架集，当框架集被选择 后，其边框将呈虚线显示。
（1）选择框架集
（2）显示效果
6.1.5 创建框架和框架集
② 选择框架：在“框架”面板中的某个框架区域内单击鼠标即可选择该框架，被选择的框架在 “框架”面板中以粗黑实线显示，在网页窗口中该框架的边框将呈虚线显示。
（1）调整表格
（2）设置单元格背景
6.1.4 在表格中插入内容
完成表格插入与结构调整后，就可以在表格中添加需要的内容。
（1）选择图片
（2）确认属性
（3）调整图片大小
6.1.4 在表格中插入内容
（4）添加并设置文本
（5）添加并设置导航文本
6.1.5 创建框架和框架集
1. 创建框架集 利用Dreamweaver提供的“新建”功能可以很方便地创建框架集。下面创建一个“对齐上
（1）“表格”对话框
（2）创建的表格
6.1.1 创建表格
（3）设置嵌套表格
（4）设置第二个嵌套表格
6.1.2 调整表格结构
1. 选择表格和单元格 选择表格和单元格是调整表格结构的前提，Dreamweaver中主要有以下几种选择表格和单
元格的方法。 选择整个表格
选择单元格
6.1.2 调整表格结构
为了使网页更加美观，可通过使用表格或单元格美化网页布局，同时也可创建框架和框架集制 作网页整体架构。本例将制作一个酒店预订网页，完成后的参考效果如图所示。
“酒店预订”网页效果
6.1.1 创建表格
表格不仅可以为页面进行宏观的布局，还可以使页面中的文本、图像等元素更有条理。 Dreamweaver CS6的表格功能强大，用户可以快速、方便地创建出各种规格的表格，其具体 操作如下。