项目八 Dreamweaver 用表格布局网页

课堂实践课程引导知识技能目标知识讲解项目总结项目八用表格布局网页上一页下一页课程引导在前两个单元中我们学会了如何在网页中输入文本及如何在网页中插入图像。通常网页中都包含了大量的文字和图片。请浏览【网易】的主页。网易的主页中包含了大量的文字和图片，通过浏览我们发现这些文字和图片布局合理，搭配协调。这些文字和图片是通过什么方法布局的？本次课我们来学习使用表格布局网页的方法。课堂实践课程引导知识技能目标知识讲解项目总结项目八用表格布局网页上一页下一页明确知识技能目标（1）学会添加表格、设置表格属性。（2）掌握设置表格中行和列属性的方法。（3）掌握拆分单元格，合并单元格的方法。（4）掌握在表格中输入文字并定位的方法。（5）掌握在表格中插入图像并定位的方法。课堂实践课程引导知识技能目标知识讲解项目总结项目八用表格布局网页上一页下一页展示网页浏览效果1．预览网页2．网页布局与组成分析（1）本网页为普通的上下型版式结构，上面为一幅图片，下面为左右型结构，包括多幅图片和几段文字。（2）本网页使用了表格对图片、文字进行合理布局。课堂实践课程引导知识技能目标知识讲解项目总结项目八用表格布局网页上一页下一页分析操作任务（1）新建网页文档，设置页面属性。（2）插入1个3行4列的表格，宽度设置为750像素。（3）拆分单元格，合并单元格。（4）设置表格以及行、列、单元格的属性。（5）为单元格设置背景图像。（6）在表格的不同单元格中插入多幅图像。（7）在表格的单元格中输入文字。课堂实践课程引导知识技能目标知识讲解项目总结项目八用表格布局网页上一页下一页知识讲解一、插入表格1．新建网页文档08.html，将光标置于网页文档第一行的最左端，在Dreamweaver8主窗口中，单击菜单【插入】→【表格】课堂实践课程引导知识技能目标知识讲解项目总结项目八用表格布局网页上一页下一页知识讲解2．对“表格”对话框中的各个参数进行设置（1）在“行数”文本框中输入“3”，在“列数”文本框中输入“4”；（2）在“表格宽度”文本框输入“100”，其后的下拉列表框中选择宽度的单位为“百分比”；（3）“边框粗细”先设置为“1”，以后再设置为“0”；（4）“单元格边距设置为2，单元格间距设置为3；（5）设置完成后单击【确定】按钮，一个3行4列的表格就插入到页面了。课堂实践课程引导知识技能目标知识讲解项目总结项目八用表格布局网页上一页下一页知识讲解二、选择表格和表格元素在进行表格操作之前，我们必须首先选定被操作的对象，对于表格而言，可以选定整个表格、单行、单列、多行、多列、连续或不连续的单元格。课堂实践课程引导知识技能目标知识讲解项目总结项目八用表格布局网页上一页下一页知识讲解三、设置表格及单元格的属性（1）在“宽”文本框中输入“750”，其右侧的单位选择“像素”；（2）“边框”文本框中输入“1”，“填充”文本框中输入“2”；（3）“间距”文本框中输入“0”，对齐方式选择“居中对齐”；课堂实践课程引导知识技能目标知识讲解项目总结项目八用表格布局网页上一页下一页知识讲解（4）“边框颜色”文本框中输入“#000000”；（5）表格的”对齐“方式设置为”居中对齐“；（6）其他表格属性保存原有设置或默认值不变，设置结果如下图所示。课堂实践课程引导知识技能目标知识讲解项目总结项目八用表格布局网页上一页下一页知识讲解四、调整表格的结构将图中“A”、“B”、“C”、“D”四个单元格合并，将图中“I”、“J”、“K”、“L”四个单元格合并。课堂实践课程引导知识技能目标知识讲解项目总结项目八用表格布局网页上一页下一页知识讲解五、插入嵌套表格在图中的“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，根据需要调整表格。保存网页文档，且在浏览器中预览效果课堂实践课程引导知识技能目标知识讲解项目总结项目八用表格布局网页上一页下一页课堂实践1．操作要求（1）新建网页文档“08.html”。（2）利用表格布局网页08.html的页面。（3）设置表格属性，“边框”设置为1，“填充”设置为1，“间距”设置为0。（4）根据需要对单元格进行拆分或合并。（5）在表格中插入图像和文本，且设置图像或文本的格式。（6）保存网页文档，且在浏览器中浏览该网页。课堂实践课程引导知识技能目标知识讲解项目总结项目八用表格布局网页上一页下一页课堂实践2．制作要点提示（1）建议先插入一张3行1列的表格，然后在B单元格中插入一张1行3列的表格，在C单元格中插入一张2行3列的表格，接着在C5单元格中插入一张3行3列的表格（2）在对应的单元格输入文字或者插入图像，注意为整张表格设置背景图像。课堂实践课程引导知识技能目标知识讲解项目总结项目八用表格布局网页上一页下一页疑难解析问题1：Dreamweaver8提供了一些事先设计好的表格外观样式，如何让网页中的表格套用这些表格外观样式？答：套用表格外观样式的操作方法是：先在文档编辑窗口中选中表格，然后单击主窗口中的菜单【命令】→【格式化表格】，在弹出的“格式化表格”对话框中左上角的列表框中选择一种表格样式，右边可以预览所选的样式，也可以自行进行参数设置，设置完毕后单击【应用】按钮预览效果，确定设置无误后单击【确定】按钮，即可使设置生效。课堂实践课程引导知识技能目标知识讲解项目总结项目八用表格布局网页上一页下一页疑难解析问题2：网页中的表格除了用于布局网页外，还可以存储数据，如何对表格中的数据象Excel表一样进行排序操作呢？答：对表格内的数据进行排序的操作方法是：先在网页中插入一个表格，且在表格中输入大量的数据，然后单击主窗口中的菜单【命令】→【排序表格】，在弹出的“排序表格”对话框进行参数设置，设置完成后，单击【确定】按钮，表格中的数据即会按设置要求进行排序。课堂实践课程引导知识技能目标知识讲解项目总结项目八用表格布局网页上一页下一页项目总结本次课程主要学习了以下知识，训练了以下技能：（1）插入表格以及嵌套表格的方法。（3）设置表格、行、列、单元格的属性的方法。（3）拆分和合并单元格的方法。（4）在表格中合适位置输入文字并定位的方法。（5）在表格中合适位置插入图片并定位的方法。通过设置表格以及单元格的属性，对页面中的元素进行准确定位；灵活地使用表格的背景、框线等属性可以得到更加美观的效果。谢谢！