商务网站设计与制作课程资源2017 HTML基本标记 项目四、五 使用表格布局网页.ppt

课外拓展训练 任务：制作以表格布局的介绍中国名湖的网页 任务描述： （1）以“中国名湖”为主题创建一个站点 （2）制作一个介绍中国名湖（例如洞庭湖、鄱阳湖、太湖、西湖等）的网页ex0403.html，网页中所需的图片、Flash动画和文字内容从相关网站获取 （3）该网页为上中下结构，上部为导航栏，中部为网页的主体内容，下部为底部导航栏和版权信息。各部分采用表格或多表格嵌套进行布局 素材准备要求： 利用百度、谷歌等网站搜索介绍“中国名湖”的网站，然后从这些网站中收集有关中国名湖的图片、文字和Flash动画，并整理成制作网页所需的素材 * * * * * * * * * * * * * * * * * * * * * * * * * * * 计算机应用技术专业主干课程 项目四、五 制作表格布局的网页 引入新课 网页设计要讲究编排和布局，虽然网页设计不同于平面设计，但它们有许多相近之处，应加以利用和借鉴。网页的版面布局主要指网站主页的版面布局，其他网页的版面与主页风格基本一致。网页的版面布局在网页设计中起着重要作用。 如何使对页面中的元素进行准确定位，大家在制作图文混排网页时对于图像和文字的定位，有没有不方便，这就是本次课讨论的问题－－利用表格布局网页。 教学目标 知识目标 （1）网页布局的基本知识 （2）表格的相关概念 技能目标 （1）掌握绘制和编辑表格的方法和技巧 （2）培养学生利用表格布局网页的能力 素质目标 （1）培养独立思考问题、解决问题的能力 （2）培养一定的语言表达能力 （3）培养团结协作能力 课前准备 1.将sucai文件夹复制到本地硬盘 2.启动Dreamweaver CS3 3.创建名称为“江湖游”的本地站点 站点根目录：sucai 4.新建一个网页文档 index0401.html 5.设置网页标题 “千岛湖揽胜” 6.保存网页 项目展示 任务：制作表格布局的网页 网页主题：江湖游 （1）利用表格对网页进行布局 （2）在网页中插入多个表格：表格1、表格2、表格3、表格4和表格5 （3）设置表格、行、列和单元格的属性 （4）在表格的单元格中插入Flash动画及Flash动画的属性设置 （5）在表格的单元格中输入文字及文字的属性设置 （6）插入嵌套表格：表格2-1和表格4-1，设置嵌套表格的属性设置 （7）单元格的合并与拆分 （8）设置滚动文本效果 （9）插入Meta和关键字 项目任务描述 配盘素材导引： 原始文件位置：sucai\task04-1 最终文件位置：xiaoguo\task04-1 项目任务描述 讲解与演示 网页布局结构分析： （1）表格和多层嵌套表格布局方式，如图所示。 （2）文字型导航栏（位于网页顶部和网页底部两个位置） 讲解与演示---任务实现流程 １．插入表格1及其属性设置 【操作要求】 插入一个3行1列的表格1，且设置其属性：宽为880，边框为1，填充、间距为0，对齐方式为居中对齐。 2．插入Flash动画及其属性设置 【操作要求】 （1）在表格1第一行的单元格中插入一个Flash动画“banner01.swf”，设置标题“千岛湖风光”。 （2）设置所插入Flash动画的属性：宽为880，高为120，对齐方式设置为“居中”。 3．设置表格1单元格的背景图像 【操作要求】 （1）设置表格1第2、3行单元格的背景图像为bg01.gif。 （2）设置表格1第2、3行单元格的属性：水平对齐方式为“居中对齐”，垂直对齐方式为“居中”。 4．设置表格1行的属性 【操作要求】 （1）设置表格1第2行的高为35。 （2）设置表格1第3行的高为30。 讲解与演示---任务实现流程 5．在表格的单元格中输入文本 【操作要求】 （1）在表格1的第2行输入文本“首页?|?千岛湖梅峰观岛?|?千岛湖五龙岛?|?千岛湖猴岛?|?千岛湖鸵鸟岛?|?千岛湖森林氧吧?|?上西村瀑布群?|”，设置其大小为12像素。 （2）在表格1的第3行输入文本“千岛湖旅游景点：千岛湖梅峰观岛 | 千岛湖五龙岛 | 千岛湖猴岛 | 千岛湖鸵鸟岛 | 千岛湖森林氧吧 | 上西村瀑布群 | 千岛湖屏溪竹筏漂流 | 千岛湖三潭岛”，设置其大小为12像素。 讲解与演示---任务实现流程 6．设置滚动文本效果 【操作要求】 将第3行中所输入的文字设置为滚动效果。 marquee onmouseover=this.stop() onmouseout=this.start() scrollamount=2 scrolldelay=90 direction=left width=98% /marquee 7．将表格1的边框设置为“0”，浏览网页效果 讲解与演示---任务实现流程 8．插入表格2及