文档介绍：第5章网页布局
教学目标
通过本章的学****能合理地对网页进行布局设计。掌握表格的插入及属性设置,能对单元格进行合并和拆分,能在表格中熟练地插入和编辑各种对象,能导入和导出表格数据;掌握布局表格和布局单元格的绘制,能对布局模式下的表格和单元格设置格式及插入各种对象。
重点和难点
重点:表格的插入和单元格的编辑,布局表格和布局单元格的绘制及编辑。
难点:表格数据的导入和导出,布局单元格的排版及嵌套布局表格的使用。
高等职业教育“十二五”规划教材
1、案例音乐网
本案例音乐网将练****使用表格来进行网页布局,效果如图5-1所示。
这个案例的制作思路:①在网页中插入表格,不显示边框只用来布局;②在单元格内插入文字、图片,设置丰富的效果;③通过拆分单元格或者插入嵌套表格来细化某些单元格内部的布局。
高等职业教育“十二五”规划教材
图5-1 天籁音乐网
1) 创建并设置表格
(1) 创建表格
插入表格
高等职业教育“十二五”规划教材
图5-2 “表格”对话框
输入内容
创建好表格后可以在表格中输入文字、插入图片或者表格(嵌套表格)等对象。
(2) 设置表格属性
高等职业教育“十二五”规划教材
图5-4 表格属性面板
(3) 设置单元格、行或列的属性
图5-5 单元格、行或列的属性面板
2 ) 编辑表格
(1) 复制与粘贴单元格
(2)增加和删除表格行与列
增加行或列删除行或列
高等职业教育“十二五”规划教材
图5-6 选中要复制的单元格
图5-7 粘贴到文档中生成新表格
图4-8 “插入行或列”对话框
图4-9 “拆分单元格”对话框
另外,Dreamweaver还可以直接导入XML、Word或Excel文件
高等职业教育“十二五”规划教材
图5-15 “文件”下“导入”菜单选项
(3)表格数据的导出
图4-17 “导出表格”对话框
4 ) 案例实现
“天籁音乐网”案例分析
(1)启动Dreamweaver,选择“文件”→“新建”命令,选择“空白页”类别中的HTML选项,单击“创建”按钮,新建了一个空白文档。
(2)选择“修改”→“页面属性”命令,在“分类”中选择“外观”选项,设置一种背景颜色,然后选择“标题/编码”类别,在“标题”文本框中输入“天籁音乐网”,完成后单击“确定”按钮。
(3)在文档的第一行输入“天籁音乐网”,选中文字在“属性”面板中设置格式为“标题1”,字体为“宋体”,颜色为FFFF00(黄色),“居中对齐”方式。
4)按Enter键换行,在第二行中插入一条分隔线,可以选择“插入记录”→HTML→“水平线”选项。
高等职业教育“十二五”规划教材
图5-18 插入标题与分割线
5)在第三行插入一个4行1列的表格,单击“插入”面板“常用”类别下的“表格”按钮,在弹出的“表格”对话框中设置行数为4,列数为1,表格宽度为778像素,其余都为默认值,单击“确定”按钮。选中插入的表格,在表格的“属性”面板上设置“对齐”方式为“居中对齐”。
6)光标定位在第一行单元格内,选择“插入记录”→“图像对象”→“鼠标经过图像”命令,在弹出的“插入鼠标经过对象”对话框中,单击“原始图像”文本框右边的“浏览”按钮,。同样的方法设置“鼠标经过图像”,在“替换文本”文本框中输入“欢迎来到天籁音乐网!”,如图5-20所示,完成后单击“确定”按钮。将图片设置为“居中对齐”方式。
高等职业教育“十二五”规划教材
图5-20 “插入鼠标经过图像”对话框
(7)光标定位在第二行单元格内,在
单元格“属性”面板上单击“拆分单元
格为行或列”按钮,在弹出的“拆分单
元格”对话框设置将单元格拆分成3列。
(8)在拆分的3个单元格内输入文字,拖动单元格的边框线调节每个单元格的宽度使它能容纳输入的内容。
(9)光标定位在第三行单元格内,单击“插入”面板“常用”类别下的“表格”按钮,在弹出的“表格”对话框中设置行数为2,列数为6,表格宽度为778像素,其他为默认值。
高等职业教育“十二五”规划教材
图4-22 拆分第二行单元格
图5-24 第三行中插入嵌套表格