09使用表格布局网页

（3）“间距”文本框中输入“0”，对齐方式选择“居中对齐”；
（4）“边框颜色”文本框中输入“#000000”； （5）表格的”对齐“方式设置为”居中对齐“； （6）其他表格属性保存原有设置或默认值不变 ，设置结果如下图所示。
第八步：调整表格的结构
将图中“A”、“B”、“C”、“D”四个单元格合并，将图中“I”、“J”、“K”、 “L”四个单元格合并。
（五）知识讲解与操作示范（4）
第九步：插入嵌套表格 在图中的“E”单元格中插入一张7行1列的表格，在“G”单元格中插入一张5 行3列的表格 为表格单元格“G”设置背景图像。 将单元格G的”垂直“对齐方式设置 为”顶端“（注意按住Ctrl键选中单元格） 第十步：在表格中输入文本和插入图像 （1）在表格单元格“ABCD”中插入一幅较大的图像。 （2）在表格单元格“E2”、“E4”、“E6”中各插入一幅较小的图像。 （3）在表格单元格“G1”、“G3”、“G5”中分别插入小图像和输入文本。 第十一步：设置文本、图像和表格的属性 （1）文本大小为：9点数，颜色为：#0066FF （2）调整图片的大小为：180×126 （3）页面设置完成后，将表格边框设置为0，根据需要调整表格。 第十二步：保存网页文档，且在浏览器中预览效果
第四步：设置网页的标题
在文档工具栏的“标题”文本框直接输入文档标题“长沙世界之窗的国际街”即 可。
Байду номын сангаас
（五）知识讲解与操作示范（2）
第五步：插入表格
1．打开网页04.html，将光标置于网页文档04.html第一行的最左端，在 Dreamweaver 8主窗口中，单击菜单【插入】→【表格】
2．对“表格”对话框中的各个参数进行设置
七、疑难解析
八、归纳总结 九、布置习题
（一）课程引导
在第6单元中我们学会了如何在网页中输入文本，
在第 7单元中我们学会了如何在网页中插入图像。通 常网页中都包含了大量的文字和图片。 请浏览【网易】的主页。 网易的主页中包含了大量的文字和图片，通过浏
览我们发现这些文字和图片布局合理，搭配协调。这
些文字和图片是通过什么方法布局的？ 本次课我们来学习使用表格布局网页的方法。
（二）明确知识技能目标
（1）学会添加表格、设置表格属性。 （2）掌握设置表格中行和列属性的方法。
（3）掌握拆分单元格，合并单元格的方法。
（4）掌握在表格中输入文字并定位的方法。
（5）掌握在表格中插入图像并定位的方法。
（三）展示网页浏览效果
1．预览网页 2．网页布局与组成分析
（1）本网页为普通的上下型版式结构，上面为一幅图片，下面为左 右型结构，包括多幅图片和几段文字。 （2）本网页使用了表格对图片、文字进行合理布局。不锈钢软
（五）知识讲解与操作示范（1）
第一步：创建站点或切换站点
启动Dreamweaver 8，切换到“长沙世界之窗”站点。如果该站点不存在，则 新建一个名为“长沙世界之窗”的站点。
第二步：创建子文件夹，准备素材
在站点下创建子文件夹“04表格布局”，在“04表格布局”文件夹中创建子文 件夹“image”，并将所需图像复制到该文件夹下。
行3列的表格
（2）在对应的单元格输入文字或者插入图像，注意为整张表格设置背景图像。
（七）疑难解析
问题1：Dreamweaver 8提供了一些事先设计好的表格外观样式，如何让网页中 的表格套用这些表格外观样式？ 答：套用表格外观样式的操作方法是：先在文档编辑窗口中选中表格，然后单击 主窗口中的菜单【命令】→【格式化表格】，在弹出的“格式化表格”对话框中左
管
（四）分析操作任务
（1）在“长沙世界之窗”网站文件夹中“04表格布局” 中创建命名为“04.html”的网页，网页的标题为“长 沙世界之窗的国际街”。 （2）插入1张3行4列的表格，宽度设置为750像素。 （3）拆分单元格，合并单元格。
（4）设置表格以及行、列、单元格的属性。
（5）为单元格设置背景图像。 （6）在表格的不同单元格中插入多幅图像。 （7）在表格的单元格中输入文字。
（九）布置习题
1 ．选择题
教材P120：No1~No10
2 ．课外拓展实践
（1）在“湖铁职院学院网站”站点文件夹“04表格布局”中创建网页“04.html”。 （2）该页面利用表格进行布局。
第六步：选择表格和表格元素
在进行表格操作之前，我们必须首先选定被操作的对象，对于表格而言， 可以选定整个表格、单行、单列、多行、多列、连续或不连续的单元格。
（五）知识讲解与操作示范（3）
第七步：设置表格及单元格的属性
（1）在“宽”文本框中输入“750”，其右侧的单位选择“像素”； （2）“边框”文本框中输入“1”，“填充”文本框中输入“2”；
《网页设计与制作》
教学课件
主讲人：湖南铁道职业技术学院 陈承欢
Hunan Railway Professional Technology College
教学单元9：使用表格布局网页
一、课程引导
二、明确知识技能目标 三、展示网页浏览效果
主 要 教 学 环 节
四、分析操作任务 五、知识讲解与操作示范 六、课堂模仿实践
（六）课堂模仿实践
1．操作要求
（1）打开“课堂实践”网站文件夹“04表格布局”中的网页文档“04.html”。
（2）利用表格布局网页04.html的页面。 （3）设置表格属性，“边框”设置为1，“填充”设置为1，“间距”设置为0。 （4）根据需要对单元格进行拆分或合并。 （5）在表格中插入图像和文本，且设置图像或文本的格式。 （6）保存网页文档，且在浏览器中浏览该网页。 说明：所有的素材都存储在文件夹“04表格布局”中的各个子文件夹中。 2．效果展示 3．制作要点提示 （1）建议先插入一张3行1列的表格，如图7-18所示；然后在B单元格中插入一张1 行3列的表格，在C单元格中插入一张2行3列的表格，接着在C5单元格中插入一张3
第三步：新建网页且保存
在Dreamweaver 8主窗口中，单击菜单【文件】→【新建】，打开“新建文档” 对话框，在“常规”选项卡中，“类别”列表框中选择“基本页”，“基本页”列 表框中选择“HTML”，单击【创建】按钮，该站点下一个名为“Untitled-1”文档便 创建。单击标准工具栏上的【保存】按钮，打开“另存为”对话框，保存位置为 “04表格布局”，文件名为“04.html”，单击【保存】按钮，保存该网页文档。
上角的列表框中选择一种表格样式，右边可以预览所选的样式，也可以自行进行参
数设置，设置完毕后单击【应用】按钮预览效果，确定设置无误后单击【确定】按 钮，使设置生效。 问题2：网页中的表格除了用于布局网页外，还可以存储数据，如何对表格中的 数据象Excel表一样进行排序操作呢？ 答：对表格内的数据进行排序的操作方法是：先在网页中插入一个表格，且在表 格中输入大量的数据，然后单击主窗口中的菜单【命令】→【排序表格】，在弹出 的“排序表格”对话框进行参数设置，设置完成后，单击【确定】按钮，表格中的 数据即会按设置要求进行排序。
（1）在“行数”文本框中输入“3”，在“列数”文本框中输入“4”； （2）在“表格宽度”文本框输入“100”，其后的下拉列表框中选择宽度的 单位为“百分比”； （3）“边框粗细”先设置为“1”，以后再设置为“0”； （4）“单元格边距设置为2，单元格间距设置为3； （5）设置完成后单击【确定】按钮，一个3行4列的表格就插入到页面了 。
（八）归纳总结
本次课程主要学习了以下知识，训练了以下技能： （1）插入表格以及嵌套表格的方法。 （3）设置表格、行、列、单元格的属性的方法。 （3）拆分和合并单元格的方法。 （4）在表格中合适位置输入文字并定位的方法。 （5）在表格中合适位置插入图片并定位的方法。
通过设置表格以及单元格的属性，对页面中的元素进行准确定位； 灵活地使用表格的背景、框线等属性可以得到更加美观的效果。