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