第五章单元4制作表格布局的网页祥解.ppt

网页设计与制作任务驱动式教程　陈承欢 网页设计与制作 任务驱动式教程 单元4　制作表格布局的网页 【教学导航】 （1）插入表格、设置表格的属性 （2）合并或拆分单元格 （3）设置表格、单元格的背景图像和背景颜色 （4）在表格中输入文字、插入图像和SWF动画 本单元重点 （1）在表格中插入嵌套表格，并设置嵌套表格的属性 （2）设置滚动文本效果 （3）设置网页文件头内容 本单元难点 任务驱动法、分组讨论法、四步训练法（操作准备－引导训练－同步训练－拓展训练） 教学方法 6课时（含考核评价） 课时建议 （1）学会正确地插入表格，并合理地设置表格的属性 （2）学会正确地在表格中插入嵌套表格，并合理地设置嵌套表格的属性 （3）掌握单元格的合并、拆分的操作方法，行、列的插入和删除的操作方法 （4）学会正确地设置表格中行和列的属性 （5）学会正确设置表格、单元格的背景图像和背景颜色 （6）学会正确地在表格中输入文字 （7）学会正确地在表格中插入图像 （8）学会正确地在表格中插入SWF动画 （9）了解设置滚动文本效果的方法 （10）了解网页文件头内容的设置方法 教学目标 【操作准备】 （1）创建所需的文件夹，拷贝所需的资源 （2）启动Dreamweaver CS6 （3）创建本地站点 （4）新建1个网页文档 （5）设置网页标题 （6）保存该网页 【引导训练】 【任务4-1】制作以表格布局的展示千岛湖旅游景点的网页 本单元“引导训练”的任务卡如表4-1所示。 【引导训练】 【任务4-1】制作以表格布局的展示千岛湖旅游景点的网页 图4-2　网页的整体布局结构 【引导训练】 【任务4-1】制作以表格布局的展示千岛湖旅游景点的网页 本单元“引导训练”网页0401.html的浏览效果如图4-3所示。 图4-3　网页的整体浏览效果 【引导训练】 （1）打开网页0401.html。 （2）插入1个3行1列的表格1，且设置其属性：宽为880，边框为1，填充、间距为0，对齐方式为居中对齐。 【任务描述】 【任务4-1-1】插入表格1并设置其属性 【引导训练】 （1）在表格1第1行的单元格中插入1个SWF动画“banner01.swf”。 （2）设置所插入SWF动画的属性：宽为880，高为120，对齐方式设置为“居中”。 【任务描述】 【任务4-1-2】在表格1中插入SWF动画并设置其属性 【引导训练】 （1）设置表格1第2行和第3行单元格的背景图像为bg01.gif。 （2）设置表格1第2行和第3行单元格的水平对齐方式为“居中对齐”，垂直对齐方式为“居中”。 （3）设置表格1第2行的行高为35像素，第3行的行高为30像素。 【任务描述】 【任务4-1-3】设置表格1单元格的背景图像 【引导训练】 （1）在表格1的第2行输入所需要的文本，用于设置超链接，设置其大小为12像素，样式名称为“style1”。 （2）在表格1的第3行输入所需要的文本，用于设置文字滚动效果。 【任务描述】 【任务4-1-4】在表格1的单元格中输入文本 【引导训练】 将第3行中所输入的文字设置为滚动效果。 【任务描述】 【任务4-1-5】设置滚动文本效果 【引导训练】 插入1个2行3列表格2，其属性设置为宽为880，边框、边距和间距均为0。 【任务描述】 【任务4-1-6】插入表格2并设置其属性 【引导训练】 （1）将表格2的对齐方式设置为“居中对齐”。 （2）将表格2的第1列宽度设置为“405像素”，第2列宽度设置为“360像素”，第3列宽度设置为“115像素”。 （3）将表格2第1行的高度设置为“28像素”，第2行的高度设置为“150像素”。 （4）将表格2第1列的两个单元格合并，将表格2第3列的两个单元格合并。 【任务描述】 【任务4-1-7】设置表格2及设置行、列属性 【引导训练】 （1）在表格2第1列的单元格中插入图像“001.jpg”。 （2）设置所插入图像的属性：宽为405，高为178，替换文本为“千岛湖全貌”。 【任务描述】 【任务4-1-8】在表格2第1列的单元格中插入图像并设置其属性 【引导训练】 （1）设置表格2第2列上方单元格的背景图像为“bg02.gif”，水平对齐方式为“居中对齐”，垂直对齐方式为“居中”。 （2）在表格2第2列上方单元格中输入文字“梅峰观岛”，且设置所输入文字的属性：大小为16px，颜色为“#FF3300”，字形为“粗体”，样式名称为style2。 （3）设置表格2第2列下方单元格的背景颜色为“#FFF9E9”，垂直对齐方式为“居中”。 （4）在表格2第2列下方单元格输入所需的文字，设置文字大小为“12px”，文字颜色为“#D48B19”，样式名称为style3。将部分文字（第1行的“千岛湖梅峰观岛”