使用表格布局网页(I)

《使用表格布局网页(I)》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、HunanRailwayProfessionalTechnologyCollege主讲人：湖南铁道职业技术学院　陈承欢《网页设计与制作》教学课件教学单元9：使用表格布局网页主要教学环节五、知识讲解与操作示范一、课程引导二、明确知识技能目标三、展示网页浏览效果四、分析操作任务六、课堂模仿实践七、疑难解析八、归纳总结九、布置习题（一）课程引导在第6单元中我们学会了如何在网页中输入文本，在第7单元中我们学会了如何在网页中插入图像。通常网页中都包含了大量的文字和图片。请浏览【网易】的主页。网易的主页中包含了大量的文字

2、和图片，通过浏览我们发现这些文字和图片布局合理，搭配协调。这些文字和图片是通过什么方法布局的？本次课我们来学习使用表格布局网页的方法。（二）明确知识技能目标（1）学会添加表格、设置表格属性。（2）掌握设置表格中行和列属性的方法。（3）掌握拆分单元格，合并单元格的方法。（4）掌握在表格中输入文字并定位的方法。（5）掌握在表格中插入图像并定位的方法。（三）展示网页浏览效果2．网页布局与组成分析1．预览网页（1）本网页为普通的上下型版式结构，上面为一幅图片，下面为左右型结构，包括多幅图片和几段文字。（2）本网页使用

3、了表格对图片、文字进行合理布局。（四）分析操作任务（1）在“长沙世界之窗”网站文件夹中“04表格布局”中创建命名为“04.html”的网页，网页的标题为“长沙世界之窗的国际街”。（2）插入1张3行4列的表格，宽度设置为750像素。（3）拆分单元格，合并单元格。（4）设置表格以及行、列、单元格的属性。（5）为单元格设置背景图像。（6）在表格的不同单元格中插入多幅图像。（7）在表格的单元格中输入文字。（五）知识讲解与操作示范（1）第一步：创建站点或切换站点启动Dreamweaver8，切换到“长沙世界之窗”站点。

4、如果该站点不存在，则新建一个名为“长沙世界之窗”的站点。第二步：创建子文件夹，准备素材在站点下创建子文件夹“04表格布局”，在“04表格布局”文件夹中创建子文件夹“image”，并将所需图像复制到该文件夹下。第三步：新建网页且保存在Dreamweaver8主窗口中，单击菜单【文件】→【新建】，打开“新建文档”对话框，在“常规”选项卡中，“类别”列表框中选择“基本页”，“基本页”列表框中选择“HTML”，单击【创建】按钮，该站点下一个名为“Untitled-1”文档便创建。单击标准工具栏上的【保存】按钮，打开“

5、另存为”对话框，保存位置为“04表格布局”，文件名为“04.html”，单击【保存】按钮，保存该网页文档。第四步：设置网页的标题在文档工具栏的“标题”文本框直接输入文档标题“长沙世界之窗的国际街”即可。（五）知识讲解与操作示范（2）第五步：插入表格1．打开网页04.html，将光标置于网页文档04.html第一行的最左端，在Dreamweaver8主窗口中，单击菜单【插入】→【表格】2．对“表格”对话框中的各个参数进行设置（1）在“行数”文本框中输入“3”，在“列数”文本框中输入“4”；（2）在“表格宽度”文

6、本框输入“100”，其后的下拉列表框中选择宽度的单位为“百分比”；（3）“边框粗细”先设置为“1”，以后再设置为“0”；（4）“单元格边距设置为2，单元格间距设置为3；（5）设置完成后单击【确定】按钮，一个3行4列的表格就插入到页面了。第六步：选择表格和表格元素在进行表格操作之前，我们必须首先选定被操作的对象，对于表格而言，可以选定整个表格、单行、单列、多行、多列、连续或不连续的单元格。（五）知识讲解与操作示范（3）第七步：设置表格及单元格的属性（1）在“宽”文本框中输入“750”，其右侧的单位选择“像素”；

7、（2）“边框”文本框中输入“1”，“填充”文本框中输入“2”；（3）“间距”文本框中输入“0”，对齐方式选择“居中对齐”；（4）“边框颜色”文本框中输入“#000000”；（5）表格的”对齐“方式设置为”居中对齐“；（6）其他表格属性保存原有设置或默认值不变，设置结果如下图所示。第八步：调整表格的结构将图中“A”、“B”、“C”、“D”四个单元格合并，将图中“I”、“J”、“K”、“L”四个单元格合并。（五）知识讲解与操作示范（4）第九步：插入嵌套表格在图中的“E”单元格中插入一张7行1列的表格，在“G”单元

8、格中插入一张5行3列的表格为表格单元格“G”设置背景图像。将单元格G的”垂直“对齐方式设置为”顶端“（注意按住Ctrl键选中单元格）第十步：在表格中输入文本和插入图像（1）在表格单元格“ABCD”中插入一幅较大的图像。（2）在表格单元格“E2”、“E4”、“E6”中各插入一幅较小的图像。（3）在表格单元格“G1”、“G3”、“G5”中分别插入小图像和输入文本。第十一步：设置文本、图像和表格的属性（1