网页设计与制作任务驱动式实用教程单元制作表格布局的网页

《网页设计与制作任务驱动式实用教程单元制作表格布局的网页》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、单元4　制作表格布局的网页单元4　制作表格布局的网页【教学导航】教学目标（1）学会正确地插入表格，并合理地设置表格的属性（2）学会正确地在表格中插入嵌套表格，并合理地设置嵌套表格的属性（3）掌握单元格的合并、拆分的操作方法，行、列的插入和删除的操作方法（4）学会正确地设置表格中行和列的属性（5）学会正确设置表格、单元格的背景图像和背景颜色（6）学会正确地在表格中输入文字（7）学会正确地在表格中插入图像（8）学会正确地在表格中插入SWF动画（9）了解设置滚动文本效果的方法（10）了解网页文件头内容的设置方法本单元重点（1）插

2、入表格、设置表格的属性（2）合并或拆分单元格（3）设置表格、单元格的背景图像和背景颜色（4）在表格中输入文字、插入图像和SWF动画本单元难点（1）在表格中插入嵌套表格，并设置嵌套表格的属性（2）设置滚动文本效果（3）设置网页文件头内容教学方法任务驱动法、分析探究法、四步训练法课时建议6课时（含考核评价）【操作准备】（1）创建所需的文件夹，拷贝所需的资源（2）启动DreamweaverCS6（3）创建本地站点（4）新建1个网页文档（5）设置网页标题（6）保存该网页【引导训练】【任务4-1】制作以表格布局的展示千岛湖旅游景点的

3、网页本单元“引导训练”的任务卡如表4-1所示。89单元4　制作表格布局的网页表4-1　单元4“引导训练”任务卡任务编号4-1任务名称制作以表格布局的展示千岛湖旅游景点的网页网页主题江湖游计划工时120min网页制作任务描述（1）利用表格对网页进行布局（2）在网格中插入多个表格：表格1、表格2、表格3、表格4和表格5（3）设置表格、行、列和单元格的属性（4）在表格的单元格中插入SWF动画并设置SWF动画的属性（5）在表格的单元格中输入文字并设置文字的属性（6）插入嵌套表格：表格2-1和表格4-1，并设置嵌套表格的属性（7）合

4、并与拆分单元格（8）设置滚动文本效果（9）插入Meta和关键字网页布局结构分析（1）表格和多层嵌套表格布局方式，如图4-2所示。（2）文字型导航栏（位于网页顶部和网页底部两个位置）网页色彩搭配分析网页中文字的颜色：#000000、#D48B19、#FF3300、#339900、#7D35BF、#6D9527、#3366CC、#203F78、#1080E9，表格各单元格的背景颜色：#FFF9E9、#D3EDC2．#F8FDD9网页组成元素分析主要包括表格、标题文本、正文文本、SWF动画、Meta和关键字任务实现流程分析插入表

5、格1及其属性设置→插入SWF动画及其属性设置→设置表格1的背景图像、行属性→在表格1中输入文本→设置滚动文本效果→插入表格2及其设置属性设置→在表格2中插入图像、输入文本及其属性设置→插入嵌套表格2-1→插入表格3及其属性设置→插入表格4→插入嵌套表格4-1→插入表格5→插入Meta和关键字配盘素材导引原始文件位置：startUnit04task04-1最终文件位置：resultUnit04task04-189单元4　制作表格布局的网页图4-2　网页的整体布局结构本单元“引导训练”的任务跟踪卡如表4-2所示。表4-

6、2　单元4“引导训练”任务跟踪卡任务编号开始时间完成时间计划工时实际工时当前状态本单元“引导训练”网页0401.html的浏览效果如图4-3所示。图4-3　网页的整体浏览效果【任务4-1-1】插入表格1并设置其属性【任务描述】（1）打开网页0401.html。（2）插入1个3行1列的表格1，且设置其属性：宽为880，边框为1，填充、间距为0，对齐方式为居中对齐。【任务实施】1．通过“表格”对话框插入表格1在DreamweaverCS6主界面中，选择命令【插入】→【表格】，弹出【表格】对话框。（1）在【表格】对话框“行数”文

7、本框中输入“3”，在“列数”文本框中输入“1”。（2）在“表格宽度”文本框输入“880”，其后的下拉列表框中选择宽度的单位为“像素”。（3）在“边框粗细”文本框中指定表格边框的宽度，默认值为1，单位为像素。如果在浏览器中浏览时不显示表格边框，将“边框粗细”89单元4　制作表格布局的网页设置为0。这里为了便识别表格边框，暂设置边框宽度为1，以后再设置为0。其他参数暂保持其默认值不变。（4）设置完成后单击【确定】按钮，1个3行1列的表格便插入到页面。（5）保存网页中所插入的表格。2．设置表格1的属性（1）选择所插入的表格1（2

8、）通过表格的【属性】面板设置其属性（3）保存网页中表格的属性设置【任务4-1-2】在表格1中插入SWF动画并设置其属性【任务描述】（1）在表格1第1行的单元格中插入1个SWF动画“banner01.swf”。（2）设置所插入SWF动画的属性：宽为880，高为120，对齐方式设置为“居中”。【任务实施】1