dreamweaver cs 网页制作案例教程电子教案第章制作表格布局的网页

《dreamweaver cs 网页制作案例教程电子教案第章制作表格布局的网页》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第4章　制作表格布局的网页第4章　制作表格布局的网页表格是常用的页面元素之一，制作网页时经常借助表格进行布局，通过设置表格及单元格的属性，对页面中的元素进行准确定位，灵活地使用表格的背景、边框等属性可以得到更加美观的效果，表格还能有序地排列数据。【教学导航】教学目标（1）学会正确地插入表格，并合理地设置表格的属性（2）学会正确地在表格中插入嵌套表格，并合理地设置嵌套表格的属性（3）掌握单元格的合并、拆分、插入和删除的操作方法（4）学会正确地设置表格中行和列的属性（5）学会正确设置表格、单元格的背

2、景图像和背景颜色（6）学会正确地在表格中输入文字并定位（7）学会正确地在表格中插入图像并定位（8）学会正确地在表格中插入flash动画并定位（9）了解设置滚动文本效果的方法（10）了解网页文件头内容的设置方法本章重点（1）插入表格、设置表格的属性（2）合并或拆分单元格（3）设置表格、单元格的背景图像和背景颜色（4）在表格中输入文字、插入图像和flash动画本章难点（1）在表格中插入嵌套表格，并设置嵌套表格的属性（2）设置滚动文本效果（3）设置网页文件头内容教学方法任务驱动法、分组讨论法、三步训练

3、法课时建议6课时（含课堂同步训练）4.1　课前准备（1）在本地硬盘创建文件夹（2）启动DreamweaverCS3通过Windows的【开始】菜单或桌面的快捷方式启动DreamweaverCS3。（3）创建名称为“江湖游”的本地站点（4）新建一个网页文档应用【新建文档】对话框或者直接使用【新建文件】快捷菜单创建一个名称为“index0401.html”的网页文档。（5）设置网页标题85第4章　制作表格布局的网页（6）保存该网页。4.2　课堂引导训练及评价【课堂引导训练任务描述】1、网页制作任务卡

4、网页制作任务卡如表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）设置滚动文本效果

5、（9）插入Meta和关键字网页布局结构分析（1）表格和多层嵌套表格布局方式，如图4-2所示。（2）文字型导航栏（位于网页顶部和网页底部两个位置）网页色彩搭配分析网页中文字的颜色：#000000、#d48b19、#FF3300、#339900、#7d35bf、#6d9527、#3366CC、#203f78、#1080e9，表格各单元格的背景颜色：#fff9e9、#D3EDC2、#F8FDD9网页组成元素分析主要包括表格、标题文本、正文文本、Flash动画、Meta和关键字任务实现流程分析插入表格1

6、及其属性设置→插入Flash动画及其属性设置→设置表格1的背景图像、行属性→在表格1中输入文本→设置滚动文本效果→插入表格2及其设置属性设置→在表格中插入图像、输入文本及其属性设置→插入嵌套表格2-1→插入表格3及其属性设置→插入表格4→插入嵌套表格4-1→插入表格5→插入Meta和关键字配盘素材导引原始文件位置：start4第4章制作表格布局的网页task04-1最终文件位置：result4第4章制作表格布局的网页task04-12、网页制作任务跟踪卡网页制作任务跟踪卡如表4-2所

7、示。表4-2　网页制作任务跟踪卡任务编号开始时间完成时间计划工时实际工时当前状态85第4章　制作表格布局的网页【网页效果展示】网页index0401.html的浏览效果如图4-3所示。图4-3　网页的整体浏览效果【任务完成过程】4.2.1　打开网页在DreamweaverCS3的“文件”面板中，双击网页文档index0401.html，打开该网页，然后将光标置于页面的起始位置。4.2.2　插入表格1及其属性设置【操作要求】插入一个3行1列的表格1，且设置其属性：宽为880，边框为1，填充、间距为

8、0，对齐方式为居中对齐。【实施过程】1、通过【表格】对话框插入表格1在DreamweaverCS3主界面中，单击菜单【插入记录】→【表格】，弹出【表格】对话框。（1）在【表格】对话框“行数”文本框中输入“3”，在“列数”文本框中输入“1”。85第4章　制作表格布局的网页（2）在“表格宽度”文本框输入“880”，其后的下拉列表框中选择宽度的单位为“像素”。（3）在“边框粗细”文本框中指定表格边框的宽度，默认值为1，单位为像素。如果在浏览器中浏览时不显示表格边框，将“边框粗细”设置为0。（4）设置完