第9章网页的布局综合练习

图9-13 为布局表格设置背景颜色
9.2 案例2：用框架布局网页
【案例目的】利用框架来设计网页，效果见图9-14。 【核心知识】使用上方和下方框架进行网页布局。
图9-14 使用框架制作的网页
9.2.1 创建框架网页 1. 新建一个网页文档，切换到“布局”工具栏，单击其中 的【框架】按钮，在弹出的下拉菜单中选择“上方和下方 框架”，如图9-15所示。
•图9-27 使用AP Div制作的网页
1．新建一个网页文档，保存为index.htm。插入AP Div1， 如图9-28所示。 2. 选中apDiv1，在属性面板中将宽设置为780像素，高设 置为150像素，如图9-29所示。
•图9-28 在新建页面中插入AP Div
图9-29 设置AP Div属性
图9-15 插入框架
2. Dreamweaver弹出“框架标签辅助功能属性”对话框， 如图9-16所示。 在此为每一个框架指定标题，然后单击【确定】按钮，页 面被分成上、中、下三个框架， 如图9-17所示。
•图9-16 “框架标签辅助功能属性”对话框
图9-17 创建框架页面
3. 单击“窗口”－“框架”命令或按【Shift+F2】组合键 调出“框架”面板。单击“框架”面板上的mainFrame框 架，框架外有黑色框表示现在处于此框架内（在文档编辑 窗口中，被选中的框架边框以虚线显示），如图9-18所示。
图9-35 插入apDiv6、apDiv9
9．最后插入apDiv8，设置其背景色为＃006600，并输入 版权信息，如图9-36所示。 10．保存文档，按F12键预览，效果如图9-27所示。
图9-36 插入apDiv9输入版权信息
9.4 案例4：将表格转换为AP Div布局
1. 在网页中制作2行1列的表格，分别插入图片和文字，如 图9-37所示。 2. 选择“修改”→“转换”→“将表格转换为AP Div”命 令，在弹出的“将表格转换为AP Div”对话框中根据需要 进行相应的设置即可，如图9-38所示。
9.1 案例1：用布局表格布局网页
【案例目的】利用表格和单元格来设计网页，效果见图9-1。 【核心知识】结合分栏方式在“布局模式”中用布局表格进 行网页布局。
•图9-1 使用布局表格制作的网页
9.1.1 布局顶部绘制 1. 新建一个网页文档，将其保存为index.html。切换到 “布局”工具栏，如图9-2所示。 2. 执行“查看”－“表格模式”－“布局模式”命令， Dreamweaver弹出一个“从布局模式开始”对话框，如图 9-3所示。
网页的布局综合练习
自学内容
9.1 9.2 9.3 9.4 案例1：用布局表格布局网页 案例2：用框架布局网页 案例3：利用AP Div布局网页版面 案例4：将表格转换为AP Div布局
先进行页面布局，后制作！！！
在添加具体的网页内容之前，首先应该对网 页进行合理的版面布局，确定什么地方要安 放什么内容，或什么地方要实现什么效果。 网页的版面布局是网页设计中需要最先考虑 的步骤，同时也是最重要的步骤。只有合理 进行版面布局，才能制作出美观的页面，而 且便于日后的维护和修改。
图9-22 在leftFrame框架中添加内容
3. 编辑main.html文件，在main.html中插入表格并在表格 中输入家乡简介的相关文字内容，如图9-23所示。 4. 编辑bottom.html文件，在其中输入一些有关版权的信 息，如图9-24所示。
图9-23 在mainFrame框架中添加内容
图9-11 主体部分右列布局表格效果
9.1.3 布局底部信息 1. 绘制一个781×10像素的布局表格与主体部分相分隔。 2. 紧靠下边绘制一个781×40像素的布局表格。 如图9-12所示，网页的布局基本完成。
图9-12 底部布局表格
9.1.4 美化网页 选中要操作的布局表格，表格4个边缘出现9个控制点为选 中状态，执行“窗口”－“属性”命令或者按【Ctrl+F3】 组合键调出“属性”对话框，单击“背景颜色”右边的小 方框选择合适的颜色，如图9-13所示。 单击【退出】按钮，退出“布局模式”，添加网页内容， 按F12键进行预览，效果如图9-1所示。
9.2.4 定义框架之间的超链接 定义框架之间的超链接如图9-26所示。
图9-26 设置链接
9.3 案例3：利用AP Div布局网页版面
【案例目的】创建AP Div，通过设置AP Div的相关属性，使 其符合网页布局的要求。效果如图9-27所示。 【核心知识】通过设置AP Div的相关属性来组织网页对象， 使其符合网页布局的要求。
图9-5 绘制布局单元格
•图9-6 顶部表格布局效果
9.1.2 布局主体绘制 1. 单击“布局”工具栏上“绘制布局表格”按钮，按住 【Ctrl】键，拖曳鼠标在图9-6部分布局表格下面绘制一个 781×10像素的布局表格，做为两部分之间的分隔。再在 下面绘制一个781×450像素的布局表格，用来放置网页 的主要内容，如图9-7所示。
•图9-20 保存的框架集和框架
9.2.2 编辑各框架内的网页文档 1. 将光标定位在上框架，“文档”工具栏上文件名变为 top.html插入一个1行1列的表格，设置为宽920像素。在 表格中插入一个Banner图像，如图9-21所示。
•图9-21 在topFrame框架中添加内容
பைடு நூலகம்
2. 编辑left.html文件，拖曳框架边框调整合适大小，然后 在left.html中插入一个9行1列的表格，设置宽为100%。在 9个单元格中分别插入相应的文本内容，在属性面板中设 置表格的间距为15，如图9-22所示。
3. 在apDiv1中插入图像，如图9-30所示。 4. 插入apDiv2，设置apDiv2的背景色为＃006600，如图 9-31所示，在AP Div中输入文字，。
图9-30 插入图像并调节属性
图9-31 插入apDiv2
5. 重复步骤4，插入apDiv3，在apDiv3中插入780×400的 图像做背景，如图9-32所示。 6. 在apDiv3中插入780×25像素的apDiv4，如图9-33所示。
图9-7 主体部分布局表格
2. 在主体布局表格里靠左并列绘制两个大小分别为 200×450像素和20×450像素的布局表格，把主体部分分 成左中右3列，中间1列为分隔之用，左右分别用来放置相 关信息和具体内容，效果如图9-8所示。
图9-8 分隔后的主体部分表格
3. 在左列表格中，绘制200×25像素、200×125像素、 200×25像素、200×125像素、200×25像素和200×125像 素的六个布局表格，如图9-9所示。
图9-2 布局工具栏
图9-3 “从布局工具栏开始”对话框
3. 单击“确定”按钮，进入表格布局模式，单击“布局” 工具栏上“绘制布局表格”按钮，鼠标变成“＋”形状， 通过拖曳鼠标绘制出一个宽为781像素、高为120像素的 布局表格，如图9-4所示。
图9-4 绘制表格布局
4. 在表格左上角绘制出一个宽为652像素、高为90像素的单元 格，用来放置banner，如图9-5所示。 紧靠banner单元格右边线绘制一个单元格，大小129×90像素， 紧贴这一行的下边线在下面绘制出一个宽为781像素、高为30 像素的单元格做导航条，效果如图9-6所示。
图9-24 在bottomFrame框架中添加内容
9.2.3 制作其他需要调用至主框架的网页文件 1. 新建一个网页文档，将其保存为main3.html。在其中插 入表格并在表格中输入相应图片，如图9-25所示。 2. 重复步骤1，新建网页文档，分别进行保存，并在其中 输入相应的内容。
•图9-25 制作main2.html内容
图9-18 选择mainFrame框架
4. 再次单击“布局”工具栏上的【框架】按钮，在弹出的 下拉菜单中选择“左侧框架”在mainFrame中嵌套一个框 架集，如图9-19所示，框架mainFrame被分隔成左右两个 部分。
图9-19 分隔mainFrame框架
5. 单击“文件”－“保存全部”命令，在弹出对话框的同 时，文档窗口中出现一个粗边框，显示当前要保存的框架 集或框架，首先弹出的是保存框架集页面的对话框，将其 保存为index.html，如图9-20所示。
图9-37 选择表格
图9-38 “将表格转换为AP Div”对话框
3. 单击“确定”，即可将表格转换为AP Div布局，如图939所示。其中两个单元分别转换为两个AP Div元素，这样 在拖动时就比较方便。
图9-39 将表格转换为AP Div
图9-32 插入apDiv3并插入背景图
图9-33 插入apDiv4输入相应文字
7. 在apDiv3中再插入apDiv5，在apDiv5中输入文字，如 图9-34所示。 8. 重复步骤6，插入apDiv6、apDiv7，并输入进行设置和 相应的文字，如图9-35所示。
图9-34 插入apDiv5输入相应文字
•图9-9 主体部分左列布局表格
4. 在右列表格中，单击“绘制布局表格”按钮，按住 【Ctrl】键，绘制561×35像素、290×160像素的两个布 局表格，在旁边出现两条白色的网格线，如图9-10所示。
•图9-10 出现白色网格线
5. 同样，在下半部分绘制一个561×35像素的布局表格， 根据网格线再在下面绘制左右两个表格，如图9-11所示。