文档介绍：第4章制作表格布局的网页
表格是常用的页面元素之一,制作网页时经常借助表格进行布局,通过设置表格及单元格的属性,对页面中的元素进行准确定位,灵活地使用表格的背景、边框等属性可以得到更加美观的效果,表格还能有序地排列数据。
【教学导航】
教学目标
(1)学会正确地插入表格,并合理地设置表格的属性
(2)学会正确地在表格中插入嵌套表格,并合理地设置嵌套表格的属性
(3)掌握单元格的合并、拆分、插入和删除的操作方法
(4)学会正确地设置表格中行和列的属性
(5)学会正确设置表格、单元格的背景图像和背景颜色
(6)学会正确地在表格中输入文字并定位
(7)学会正确地在表格中插入图像并定位
(8)学会正确地在表格中插入flash动画并定位
(9)了解设置滚动文本效果的方法
(10)了解网页文件头内容的设置方法
本章重点
(1)插入表格、设置表格的属性
(2)合并或拆分单元格
(3)设置表格、单元格的背景图像和背景颜色
(4)在表格中输入文字、插入图像和flash动画
本章难点
(1)在表格中插入嵌套表格,并设置嵌套表格的属性
(2)设置滚动文本效果
(3)设置网页文件头内容
教学方法
任务驱动法、分组讨论法、三步训练法
课时建议
6课时(含课堂同步训练)
课前准备
(1)在本地硬盘创建文件夹
(2)启动Dreamweaver CS3
通过Windows的【开始】菜单或桌面的快捷方式启动Dreamweaver CS3。
(3)创建名称为“江湖游”的本地站点
(4)新建一个网页文档
应用【新建文档】对话框或者直接使用【新建文件】快捷菜单创建一个名称为“”的网页文档。
(5)设置网页标题
(6)保存该网页。
课堂引导训练及评价
【课堂引导训练任务描述】
1、网页制作任务卡
网页制作任务卡如表4-1所示。
表4-1 网页制作任务卡
任务编号
04-1
任务名称
制作表格布局的网页
网页主题
江湖游
计划工时
120min
网页制作任务描述
(1)利用表格对网页进行布局
(2)在网格中插入多个表格:表格1、表格2、表格3、表格4和表格5
(3)设置表格、行、列和单元格的属性
(4)在表格的单元格中插入Flash动画及Flash动画的属性设置
(5)在表格的单元格中输入文字及文字的属性设置
(6)插入嵌套表格:表格2-1和表格4-1,设置嵌套表格的属性设置
(7)单元格的合并与拆分
(8)设置滚动文本效果
(9)插入Meta和关键字
网页布局结构分析
(1)表格和多层嵌套表格布局方式,如图4-2所示。
(2)文字型导航栏(位于网页顶部和网页底部两个位置)
网页色彩搭配分析
网页中文字的颜色:#000000、#d48b19、#FF3300、#339900、#7d35bf、#6d9527、#、#203f78、#1080e9,表格各单元格的背景颜色:#fff9e9、#D3EDC2、#F8FDD9
网页组成元素分析
主要包括表格、标题文本、正文文本、Flash动画、Meta和关键字
任务实现流程分析
插入表格1及其属性设置→插入Flash动画及其属性设置→设置表格1的背景图像、行属性→在表格1中输入文本→设置滚动文本效果→插入表格2及其设置属性设置→在表格中插入图像、输入文本及其属性设置→插入嵌套表格2-1→插入表格3及其属性设置→插入表格4→插入嵌套表格4-1→插入表格5→插入Meta和关键字
配盘素材导引
原始文件位置:start\04第4章制作表格布局的网页\task04-1
最终文件位置:result\04第4章制作表格布局的网页\task04-1
2、网页制作任务跟踪卡
网页制作任务跟踪卡如表4-2所示。
表4-2 网页制作任务跟踪卡
任务编号
开始时间
完成时间
计划工时
实际工时
当前状态
【网页效果展示】
-3所示。
图4-3 网页的整体浏览效果
【任务完成过程】
打开网页
在Dreamweaver CS3的“文件”面板中,,打开该网页,然后将光标置于页面的起始位置。
插入表格1及其属性设置
【操作要求】
插入一个3行1列的表格1,且设置其属性:宽为880,边框为1,填充、间距为0,对齐方式为居中对齐。
【实施过程】
1、通过【表格】对话框插入表格1
在Dreamweaver CS3主界面中,单击菜单【插入记录】→【表格】,弹出【表格】对话框。
(1)在【表格】对话框“行数”文本框中输入“3”,在“列数”文本