《网页制作》教案 - 图文 

实训方法 实训准备 上机实训 教案、素材、案例、教材、计算机机房 10、 对照实习报告的要求，完成上机任务； 任务完成后及时要求教师考评； 完善实习报告，填写实训总结； 实训过程 实训要求 11、 12、 4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 操作要求及步骤 在地图中创建热点链接 任务一 创建图像热点链接 打开news.HTML网页，在如下图所示的位置插入图片，图片为“鼠标经过的图片”，链接到本页的“冠军杯新闻”处（提示：利用锚点链接） 打开“jieshao.html”网页，在下载资源文本中将教师提供的“qq.rar”放入站点，做成的效果是点击“下载资源”就能下载“qq.rar”，同理在“联系我们”中设置邮件下载 任务二 制作跳转菜单 完善报告 填写实训总结，并上交实习报告。 剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 本次实习内容较多，大部分学生能在规定时间内完成任务，较好。 自主练习 实训总结

课题 2.4使用表格布局页面 教学课时 2课时 知识目标 教学目标 能力目标 1、了解表格在网页设计中的作用。 2、掌握网页中表格的制作方法、表格属性的设置方法以及单元格属性的设置方法，能够在单元格中正确插入文字和图片。 3、能够根据网页设计内容，正确布局表格的结构，掌握表格嵌套的设计方法。 1、利用对比学习，培养学生知识迁移的能力。 2、通过用表格结构设计网页，使学生进一步理解表格的作用、功能及网页设计方法的多样性，培养学生的发散思维能力 通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。 情感目标 教学重点 1、了解表格在网页设计中的重要作用。 2、掌握插入、编辑表格的方法及表格的属性设置。 3、掌握单元格属性的设置。 表格的嵌套在网页设计中的应用 1.教学场所：多媒体教室 2.教学设备：安装有Dreamweaver cs5软件的计算机 3.教学资料：辅助课件.多媒体教学软件 讲解法、任务驱动教学法 学法 教学过程 小组讨论法 教学难点 教学资源 教法 过程安排 教学内容 教师活动 学生活动 设计意图 （1）展示两个页面并进行比较：一个使用表格布局，表格边框隐藏，其页面工整，文本、图片摆放对称，具有一定的规律；另一个页面凌乱，图文混 导入新课 杂，摆放杂乱。 (5min) 问题1：你喜欢那个页面的布局？ 问题2：用什么方法可以达到第二个页面的效果？ 任务一 网页框架 (25min) 展示并引导学学生仔细观生思考 察并比较两 个网页，讨 论、交流，回顾Word中学习过的表格，领悟表格在Dreamweaver中的作用。 通过对比学习，培养学生知识迁移的能力。 一、仿照网页3的样式，制作演示如何插入表格并对表格的设一个网页框架。 在学生自主探究的基础上，教置 师总结插入表格的一般方法。并插入一个2行1列，表格宽度800像素，边框粗细0像素的表分析网页3，找出其中使用的表格，仿照插入图像的方法，探索插入表格的引导学生学习理论的时候思考如何理论运用到实践

格。 二、在任务一的基础上，探索用实例来演示如表格基本属性：合并与拆分单何合并和拆分单元格；单元格的宽度与高度； 元格 方法。 插入表格，通过实际操作强化对表格属性的认识。 根据需要，插入图片，在第二行拆分为两列，左边放文字，右边放图 展示几种常见完善网页，制的图文混排样作完成的同式，让学生选择学把网页通自己喜欢的一过FTP上传。 种完成网页。 任务二 表格合并和拆分(20min) 动手分析和进行创意设计，培养学生的模仿以及创新能力 通过实例，培养学生分析问题、解决问题的能力。 让学生自主发挥，充分展示个性风采 任务三 表格嵌套 (30min) 课堂小结 (5min) 课堂作业 (5min) 表格的嵌套。在大表中插入一个小的表格，这是创建复杂表格样式的有效方法。要提示学生不要嵌套过多。 一、网页框架和表格基本操作 二、表格的合并和拆分 三、表格嵌套 完成教材第五章/Index.html的表格 通过表格的嵌套及分析，对页面进行布局。需要加强学生对表格合并和拆分的运用 教学反思 实训课题 表格布局实例分析 1、 能运用表格为页面布局 2、 能掌握表格的嵌套操作 3、 ??能做出“超越公司简介”页面。 1、掌握插入、编辑表格的方法及表格的属性设置。 2、掌握单元格属性的设置。 表格的嵌套在网页设计中的应用 上机实训 教案、素材、案例、教材、计算机机房 13、 14、 对照实习报告的要求，完成上机任务； 任务完成后及时要求教师考评； 实训课时 2课时 实训目标 实训重点 实训难点 实训方法 实训准备 实训要求

15、 完善实习报告，填写实训总结； 实训过程 4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 操作要求及步骤 制作如下图所示的界面： 任务一 创建图像热点链接 操作要求： 1、 top区 （1）一行三列： 788px=128+540+120 Logo+Banner+主页常用选项 （2）第三列嵌套三行两列表格： 120px=30+90 小图标+文本选项 2、menu区 （1）一行两列：788px=148+640 显示当前日期+导航条 （2）第二列嵌套1行17列表格： 奇数列单元格输入栏目文本，宽65px；偶数列单元格输入“|”，宽为6px。 3、main区 （1）2行3列：788px宽，500px高 788=150+10+628 500=5+495 （2）A、maintop区 合并单元格 （3）B、mainleft区 嵌套13行1列表格：145px宽，2px间距 第1行与第7行：高25px 第2-6行：高36px，输入文本 第8-13行：高40px，插入图片 （3）C、mainmiddle区 空单元格 （4）D、mainright区

嵌套3行1列表格：495px高 495=30+375+90 第一行：输入文本 第二行：嵌套1行2列表格(628px=304+324） 第一列：输入文本 第二列：嵌套2行1列表格 300px宽，右对齐 375px高=220+160 第1行：插入图片 第2行：嵌套3行5列表格 高160=30+65+65 宽300=80+30+80+30+80 第三行：鼠标经过图像 4、bottom区 3行1列： 788px宽，45px高 第一行：水平线??第二行：版权信息??第三行：联系方式 完善报告 填写实训总结，并上交实习报告。 剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 表格布局是最常见的一种布局方式，本次实训学生较积极，特别是13高12班同学学习氛围特别好。

课题 2.5使用框架布局页面 知识目标 教学目标 能力目标 情感目标 教学重点 教学难点 教学课时 2课时 自主练习 实训总结 1、能掌握框架的基本操作。 2、能理解框架技术的实质。 能用框架布局页面 通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。 框架的基本操作 用框架为页面布局 1.教学场所：多媒体教室 2.教学设备：安装有Dreamweaver cs5软件的计算机 3.教学资料：辅助课件.多媒体教学软件 教学资源