《网页制作》教案.pdf

《《网页制作》教案.pdf》由会员分享，可在线阅读，更多相关《《网页制作》教案.pdf（133页珍藏版）》请在三一文库上搜索。

1、湖 南 省 商 业 技 术 学 院 学 期 授 课 进 度 计 划 （二 年级第一 学期） 课程名称网页制作与设计 适用班级 16高 21、22 制定教师易会芝 审批签字 教研室主任年月日 教务科长年月日 教务院长年月日 2017-2018 学年第一学期制定 课时分配 授课 周数 周课时授课 总课时 其中 讲 课实 验复习考试机 动 23 期 末 完 成 情 况 计划 课时 完成 课时 超 出 或 缺 少 课 时 超出缺少弥补 教学截至 章节内容 备注：用蓝黑或碳素墨水钢笔填写 教学计划 学 情 分 析 本门课程网页设计与制作的教学班级为14级计算机班，计算机班对网络知识 有一定的了解，基础知

2、识较好，同时根据实际情况，特拟定本计划。 大 纲 要 求 通过本学期网页设计与制作的学习，主要要求同学们掌握网页制作的一些 基本功能和操作，为以后的一些学习和工作打下较好的基础。通过学习要求同学达 到以下要求： 1、了解 DreamweaverCS6 的详细功能及操作方法。 2、熟练掌握网页制作技巧。 3、掌握网页规范以及网页优化和网站推广的知识。 4、明确网站建设的流程和站点建设成后需要做的优化推广工作。 教 学 重 点 1、超级链接 2、表格表单应用 3、框架使用 4、CSS 样式 教 学 难 点 1、超级链接 2、用表格和框架布局页面 3、创建数据库 教 学 方 法 讲授法、演示法、项目

3、教学法、合作学习、对话、任务驱动法、头脑风暴、小组讨 论法等教学方法。 学 期 授 课 进 度 计 划 表 周次授课内容课时备注 31.1 网站基础知识21、2 周新生军训 1.2 网站建设概述2 实训 新建一个网页2上机 42.1 添加和编辑文本2 实训 网站素材处理2上机 实训 制作简单网页2上机 5 6 7国庆放假6机动补周一课 82.2 添加和编辑图像6 2.3 创建超级链接2 实训 图像处理和创建超级链接2上机 9实训 跳转菜单2上机 2.4 使用表格布局页面2 实训 表格布局实例分析2上机 10 2.5 使用框架布局页面2 运动会充周三到周五 运动会 11实训 框架布局实例分析2上

4、机 3.3 添加动画2 添加音频和视频2 12实训 DIV 与表格的转换2上机 4.3 晃动的图片2 实训 交换图像2上机 13实训 拼图游戏2上机 4.4 修改属性特效及动态菜单制作2 实训 效果行为应用2上机 14实训 图片展播实例2上机 5.1 认识和编辑 CSS2 实训 美化页面2上机 15实训 应用 CSS到网页中2上机 5.2 类型、背景和区块样式2 实训 方框、边框和导航栏2上机 16实训 超链接样式及设置技巧2上机 学 期 授 课 进 度 计 划 表 6.1DIV 布局页面2 6.2 认识 Spry2 17实训 调整样式2上机 6.3 选择服务器和使用虚拟机2 6.4 申请域名

5、2 18实训 网站发布2上机 7.1 个人主页制作2 7.2 策划构思及设计流程2 19实训 页面布局2上机 7.3 制作页面头部2 7.4 制作中间表格内容2 20元旦放假2机动 2充周一课 2 212 课题1.1 网页制作基础知识教学课时2 课时 教学目标 知识目标能了解网页制作软件的特点 能力目标能掌握网页制作的基本概念 情感目标提高学生团结合作精神，提高学生竞争意识 教学重点网页的组成 教学难点网页的分类，网址与域名的区分 教学资源 1. 教学场所：多媒体教室 2. 教学设备：安装有Dreamweaver cs5 软件的计算机 3. 教学资料：辅助课件 . 多媒体教学软件 教法讲解法、

6、任务驱动教学法学法小组讨论法 教学过程课前准备 导 入 新讲 授 新动 手 实 课堂小结作业布置 2 2 22复习考试6 教研组 意见 课课践 时间分配510501555 教学过程 过程安排教学内容教师活动学生活动设计意图 课前准备 1、教师自我介绍； 2、点名； 3、课程介绍 4、课堂要求 1. 自我介绍 2. 按 照 花名 册 点名 3. 课程介绍 4. 统计学情 5. 提 出 期望 与 要求 1. 班 长 统 计 座次表 2. 学 生 自 我 介绍 3. 反应学情 4. 推 荐 课 代 表。 使师生尽快 互相认识，并 促使学生答 题了解我们 的课程。 导入新课 本次课是本学期第一次上课，

7、 简单介绍本课程： 1、 网页设计相关级别及其薪资 待遇 2、 网页设计的就业方向及其公 司类型 以 提 问 的方 式 了 解 学 生对 网 页设计的认知 学 生 之 间 相 互讨论，加深 对 网 页 设 计 的认识 提问跟就业 和薪资有关 的问题，抓 住学生注意 力。 任务一 讲授新课 一、网页设计介绍 1、 网站是企业向用户和网民提 供信息（包括产品和服务）的 一种方式，是企业开展电子商 务的基础设施和信息平台，离 开网站去谈电子商务是不可能 的。 2、 企业的网站被称为“网络商 标”，也是企业无形资产的组 成部分，而网站是 Internet上 宣传和反映企业形象和文化的 重要窗口。 二、

8、网页设计的要点 1、明确建站目标和需求。 2、网站主题鲜明。 3、网站版式设计。 4、色彩在网站设计中的作用。 5、网站设计形式与内容统一。 三、网站设计级别 简 单 介 绍网 页 知识 提问：网页设计 要 点 并 将学 生 分组进行讨论 讲 述 网 站设 计 级别，引导学生 对 这 个 行业 向 往，并鼓励学生 向 大 师 阶段 努 力 简 单 介 绍学 生 将 来 从 事本 行 业的范围 介 绍 网 页制 作 需要的软件 给 学 生 灌输 网 页 设 计 的基 本 知识 吸 收 新 知 识 并 思 考 生 活 中 常 见 网 页 设计知识 分组讨论，并 派 出 代 表 来 总结 思 考 自

9、 己 的 定位 了 解 本 行 业 的现状 认 识 软 件 基 本组成 做笔记，识记 教 师 讲 述 的 知识 讲述基础知 识，为后面 学习打下基 础 加强学生之 间交流沟通 能力，加深 学生对网页 设计要点理 解 引导学生了 解这个行业 引导学生了 解本行业从 事范围 提前引导学 生认识 dreamweave r cs5 为后 面软件学习 打下基础 1、新手入行 2、跳槽阶段 3、稳定阶段 4、大师阶段 四、网页设计公司类型 1、门户游戏类 2、企业部门类 3、网站建设类 4、互动设计类 五、网页三剑客 1、Dreamweaver ： 可视化页面设计、 网站管理 2、Fireworks 页面

10、图象设计工具 3、Flash 动画制作 这些知识都 是学网页设 计最基本的 基础知识， 学生基础知 识薄弱，必 须了解这些 才能学习后 面的内容 六、网页基础知识 1、网页与网站的区别 （1）网页是 WWW系统中信息的 基本单位，简单来说，就是后 缀名为 htm的文件。 （2） 网站是指存放在网络服务 器上的完整信息的集合体。 2、网页的组成 （1）文字：最直接、通用、容 易的沟通方式 （2）图片：网页的一大特点 图文并茂 （3）动画： 1995年，Sun公司 开发了 Java语言，用户可以创 建能调用图片和声音的多媒体 应用小程序（ 4）超链接：要通 过一种方式把各独立的网页整 和在一起，使

11、之构成一有机整 体，而这种链接页面的功能叫 超链接。 （5）特殊组件：图片与动画可 算是最常见的特殊组件。 3、主页 Homepage 引导访问者浏览网站。 index 、main、default 4、网页空间 在Internet上申请的一个存储 空间，用以存放网页。 5、网址和域名 网址： IP地址 域名：与 IP地址相对应，唯一 性，善于识别 最右边：国家（中国 cn） 其次： 机构 （商业机构 com ） 再次：子网名称 最左边：服务器类别（web 服务 器 www ） 6、网页的分类 静态页面与动态页面 7、认识网站 门户网站： sina 个人网站：明星 专业网站：医疗 职能网站：政府

12、 任务二 动手实践 根据网页设计要点， 以小组为 单位确定一个网站主题， 小组 讨论需要的步骤以及素材 巡回指导，给予 学生帮助 小组讨论， 相 互沟通 加深学生对 网页设计要 点学习 课后作业 1、按照课堂分组课后进行讨论 2、每组确定一个网站主题方向。 3、每组设计一个网站调查问卷。 课堂小结 一、网页设计师就业方向 二、网站设计流程 三、常见网站 教学反思 本次课是网页设计第一次上课，主要讲述一些网页基础知识，学生基础知识薄 弱，需要加强，整体来说计算机班基础知识要好于电子商务班 板书 一、网页设计介绍 二、网页设计的要点 三、网站设计级别 四、网页设计公司类型 五、网页三剑客 六、网页

13、基础知识 课题1.2 网站建设概述教学课时2 课时 教学目标 知识目标了解做网站的准备工作，掌握站点的建立。 能力目标 1.能了解网站开发的基本流程。 2.能掌握网站开发的基本原则。 3.能学会站点的建立与管理。 情感目标提高学生团结合作精神，增强小组合作能力 教学重点站点的建立 教学难点如何规划好一个网站 教学资源 1. 教学场所：多媒体教室 2. 教学设备：安装有Dreamweaver cs5 软件的计算机 3. 教学资料：辅助课件、多媒体教学软件 教法讲解法、任务驱动教学法学法小组讨论法 教学过程 过程安排教学内容教师活动学生活动设计意图 课前准备 1、 搜集了解网站开发的基本流 程。

14、2、网站设计、制作过程中的一 些原则、注意事项。 配 合 学 生搜 索 资 料 及 解答 疑 问 网 上 搜 索 教 师提出问题， 了 解 网 站 设 计事项 培养学生自 主学习能力 导入新课 (5min) 网站设计大致流程是哪些？每 组派出一个代表阐述本组课前 搜集的资料 听 取 学 生的 观 点 并 给 予一 定 的知道 阐述观点，组 员 之 间 相 互 讨论 锻炼学生的 语言表达能 力和分析能 力 任务一 讲授新课 (35min) 一、网站设计流程 架构内容信息 网页制作 网站上传 任务二 分组讨论 (40min) 二、网站开发原则 1、确定主题 讨论：网站是靠什么赢利的？ 2、规划站点

15、结构 （1）结构设计 （2）目录结构设计 （3）形象设计 （4）主页设计 （5）其他页面设计 （6）企业站点设计 （7）为站点设计目标对象 访问率 三、网页版面布局设计 1、版面布局的原则 （1）主次分明、中心突出 （2）大小搭配、相互呼应 1、确定网站主 题的建议 2、给网站取名 3、提示决定网 站的性质 小组讨论， 相 互沟通 加深学生对 网页设计要 点学习 （3）图文并茂、相得益彰 （4）动静适度、平衡对称 2、页面布局的类型 （1）“国”字型 （2）框架型 （3）标题正文型 （4）封面型 （5）综合型 四、规划站点 1、建立站点目录 2、站点规划 规划站点结构是利用不同 的文件夹将不同

16、的网页内容分 门别类的保存。 3、创建导航草图 五、搜集素材 1、搜集并制作素材 无论是文字素材还是图片、动 画素材，都应注意其来源是否 注明版权所有。 网站素材要为网站主题服务。 2、整理素材 原始素材、编辑处理好的素材 3、命名规范 六、创建站点 1、不使用服务器技术 2、本地编辑 3、不连接到远程服务器 七、管理站点 （1）编辑现有站点 （2）删除已有站点 课后作业 (5min) 根据这次课的内容、注意事项，构思一个明确的网站主题，并将站点结构的规 划用文件夹表示出来 课堂小结 (5min) 一、网站设计确定主题 二、网站设计流程 三、 站点管理 教学反思 本次主要讲述站点的建立和管理，

17、课程较简单，学生掌握较好 板书 一、网站设计流程 二、网站开发原则 三、网页版面布局设计 四、规划站点 五、搜集素材 六、创建站点 七、管理站点 实训课题新建一个网页实训课时2 课时 实训目标 1、熟悉 Dreamweaver cs4 界面 2、制作简单网页 实训重点1、学会在网页中输入文字、插入图片等 2、掌握简单代码的编写 实训难点代码的编写 实训方法上机实训 实训准备教案、素材、案例、教材、计算机机房 实训要求 1.对照实习报告的要求，完成上机任务； 2.任务完成后及时要求教师考评； 3.完善实习报告，填写实训总结； 遵守实训纪律，不游戏，不睡觉，不高声谈论。 实训过程 内容操作要求及步

18、骤 任务一 新建网页 1 1、双击打开软件新建HTML 网页网页名字为nes01输入以下文字 然后保存 2、文字要求：标题宋体 二号 蓝色正文：五号宋体 加粗 任务二 新建网页 2 制作如下网页素材见文件夹网页命名文字为index 保存在文件夹中上交给 老师 操作步骤：新建 HTML 网页输入文字将标题设置为36 号，蓝色，宋体 插入两根红色的水平线插入时间插入商标插入背景图片 保存 完善报告填写实训总结，并上交实习报告。 自主练习剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 实训总结本次课是学生第一次上机，制作一个较简单的网页，学生存在对DW 界面不熟， 操作不熟练等缺点，需加强操

19、作 课题2.1 编辑和添加文本教学课时2 课时 教学目标 知识目标 1、掌握输入和编辑文本 2、学会插入文本，掌握设置文本格式的方法 能力目标掌握网页中三种常见列表的创建，及其各自的特点 情感目标提高学生自主学习和团队竞争意识 教学重点插入和编辑文本 教学难点创建列表 教学资源 1. 教学场所：多媒体教室 2. 教学设备：安装有Dreamweaver cs5 软件的计算机 3. 教学资料：辅助课件 . 多媒体教学软件 教法讲解法、任务驱动教学法学法小组讨论法 教学过程 过程安排教学内容教师活动学生活动设计意图 导入新课 （5min） 提问：在 DW 中输入文本和在 Word 中输入文本有何区别

20、？ 将学生分组， 并 提出问题，引导 学 生 小 组之 间 讨论并总结 讨论并思考以讨论的形 式提高学生 之间的交流 沟通 任务一 插入文本 (20min) 一、插入文本 1、插入普通文本 2、插入不换行空格 3、插入水平线 4、插入日期和特殊字符 演 示 并 强调 重 点 认 真 听 讲 并 记下重点 文本插入是 基础知识， 为下面任务 二打下基础 二、编辑文本 1、基本样式设置 2、设置段落格式 3、创建列表 任务二 (55min) 完成以下网页实例： 1、引导学生讨 论该网页由 哪几部分组 成 2、引导学生小 组 组 内 分 工，完成小 模块 小组讨论本实例即是 对任务一的 巩固，也为

21、下一次课打 下基础 作业布置 （5min） 1、找一篇文章输入至页面中，然后利用所学知识，对其进行格式编排 课堂小结 （5min） 一、插入文本 二、编辑文本 板书 一、插入文本 5、插入普通文本 6、插入不换行空格 7、插入水平线 8、插入日期和特殊字符 二、编辑文本 1、基本样式设置 2、设置段落格式 3、创建列表 三、实例操作 教学反思 本次课是一个基础知识内容，文本是一个网页必不可少的内容，对网页设计 至关重要，学生必须牢牢掌握文本的各个要点。目前来说学习兴趣较好。 实训课题网站素材处理实训课时2 课时 实训目标 1、掌握创建本地站点和远程站点 2、学会修改站点和多站点的管理 实训重点

22、站点的管理 实训难点站点的管理 实训方法上机实训 实训准备教案、素材、案例、教材、计算机机房 实训要求 1、对照实习报告的要求，完成上机任务； 2、任务完成后及时要求教师考评； 3、完善实习报告，填写实训总结； 4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 实训过程 内容操作要求及步骤 任务一 创建站点 1、熟悉 DW 界面 2、 在 D盘根目录创建一个站点名称为 我的足球网， 本地站点文件夹为jcwww， 如下图所示 任务二 设置默认图 像文件夹 利用教师所给素材，制作简单网页我的偶像，素材见文件夹 完善报告填写实训总结，并上交实习报告。 自主练习剩余时间，可进行自主练习，内容不限，但不可

23、违反上机纪律 实训总结本次上机主要是让学生掌握站点的建立及输入文本和编辑文本等，学生操作较 好，大部分能完成任务。 实训课题制作简单网页实训课时2 课时 实训目标 1、掌握新建网页、编辑文字、处理图像 2、新建站点 3、插入水平线、空格、自动更新时间 实训重点制作简单网页流程 实训难点综合运用 HTML 工具 实训方法上机实训 实训准备教案、素材、案例、教材、计算机机房 实训要求 4、对照实习报告的要求，完成上机任务； 5、任务完成后及时要求教师考评； 6、完善实习报告，填写实训总结； 4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 实训过程 内容操作要求及步骤 任务一 足球偶像网 1、熟悉

24、DW 菜单栏常用界面 2、完成以下简单网站，素材见素材库 页 完善报告填写实训总结，并上交实习报告。 自主练习剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 实训总结本次上机内容较多，主要考察学生综合性的练习，如图片的插入，文字的编辑 及水平线的插入等，需要学生对前面的知识非常熟悉，13 高 12 班整体班级学 习氛围较好，所有学生都能按时上交作业，值得表扬 课题2.2 添加和编辑图像教学课时2 课时 教学目标 知识目标 1、掌握图像裁剪、重新取样、亮度、锐化的设置 2、掌握图像属性设置 能力目标掌握运用软件对图像处理的能力 情感目标提高学生团结合作精神，提高学生竞争意识 教学重点图像

25、的编辑 教学难点图像的编辑 教学资源 1. 教学场所：多媒体教室 2. 教学设备：安装有Dreamweaver cs5 软件的计算机 3. 教学资料：辅助课件 . 多媒体教学软件 教法讲解法、任务驱动教学法学法小组讨论法 教学过程 过程安排教学内容教师活动学生活动设计意图 导入新课 (5min) 前面介绍网页的时候有说过， 在保证画质的情况下，图片的 数据量越小越好。问题：如果 一张图片数据量很大，我们该 如何编辑？ 演示 cluo.jpeg 这张图片，分析 数据量为 93k、 画质为 1024*768 规格 的 图 片 如何 更 改 数 据 量和 规 格？ 分 组 讨 论 用 什 么 方 法

26、 来 更 改 数 据 量 和规格 提出问题引 发 学 生 思 考，引出这 次课的主题 任务一 编辑图片 (30min) 给出 cluo.jpeg和gg.jpeg 两张 图片进行对比，提出任务：如 何从cluo.jpeg变化到 gg.jpeg ？ 具体操作步骤：打开 DW 软件 插入图像 cluo.jpeg ， 对图片 属性设置如下目标值： 编辑完成后与原图像进行对 比，会发现数据量、规格都发 对图片宽、高、 裁 切 、 重新 采 样、锐化等设置 进行演示 观 看 教 师 演 示 ， 并 思 考 cluo.jpeg变 成 cluo.jpeg 的方法 引导学生学 习理论的时 候思考如何 理论运用到

27、 实践 生变化，但浏览网页更友好 任务二 制作翻转图 像 (50min) 概念：在网页浏览中，有时当 鼠标移到某个图像上或者单击 时， 图像会变成另外一副图像。 浏览时效果： 鼠标放上去时效果： 1、鼓励学生小 组讨论如何 完成翻转图 像效果； 2、给学生展示 翻转图像做 出 来 的 效 果，然后讲 解如何 才能完成这 个效果 小组讨论如 何完成该效 果并进行尝 试 课堂小结 (5min) 一、如何编辑图像 二、制作翻转图像效果 板书设计 一、编辑图像 1、重新采样 2、裁剪、锐化 二、翻转图像制作效果 教学反思 本次教学学生较感兴趣，特别是鼠标经过的图像，学生完成得较好，值得鼓励 课题2.3

28、 创建超级链接教学课时2 课时 教学目标 知识目标 1、掌握创建超链接的方法 2、掌握相对链接和绝对链接的区别 3、创建锚点链接 能力目标提高学生学习创作能力 情感目标提高学生团结合作精神，提高学生竞争意识 教学重点 1、正确认识路径 2、理解相对链接和绝对链接的区别 教学难点添加超链接、相对路径、绝对路径 教学资源 1. 教学场所：多媒体教室 2. 教学设备：安装有Dreamweaver cs5 软件的计算机 3. 教学资料：辅助课件 . 多媒体教学软件 教法讲解法、任务驱动教学法学法小组讨论法 教学过程 过程安排教学内容教师活动学生活动设计意图 导入新课 (5min) 每次浏览网页的时候点

29、击某个 文字或者图片，能自动跳转到 另一个页面，提问：这样的链 接形式叫什么？如何实现？ 进 入 新 浪网 给 学 生 演 示超 级 链 接 的 效果 并 进行提问 观 看 效 果 并 讨 论 如 何 才 能 实 现 该 效 果 以提问且学 生较熟悉的 浏览网页的 方式吸引学 生的注意 任务一 创建超级链 接 （20min） 一、新建站点 jcww，并在站点 内 新 建 默 认 图 像 文 件 夹 images， 将网页 Index.HTML 里 的 “ 我 与 足 球 ” 链 接 到 news.HTML ， 目标为 -blank ；“足 球 新 闻 ” 链 接 到 “ 逢 入 京 使.HTM

30、L ” ，目标为 -new； “足球 明 星 ” 链 接 到 “ 我 与 足 球 网.HTML ” ，目标为 -self。 二、对比每个目标不同，网页 新建窗口不同并进行总结 给 学 生 演示 如 何插入链接； 演 示 不 同 目标 新 建窗口的区别 观 看 教 师 演 示 ， 并 思 考 -new、 -blank、 -self几个目 标 值 窗 口 的 区别 让学生熟悉 DW 添加超级 链接的界面 任务二 相对链接和 绝对链接 区别： 相对链接是指链接的地址是本 站点之内的对象；绝对链接是 指链接的地址是远程对象，用 演示教材 P60实 例 演 示 如 何插 入 锚点链接 思 考 并 正 确

31、 理 解 相 对 链 接 和 绝 对 链 接概念 正确理解相 对链接和绝 对链接，为 下面的学习 (20min) 任务三 锚点链接 (35min) 域名或 IP作为地址 一、概念：在本页进行链接的 叫做锚点，一般在长篇的文章 或技术文档中是使用，链接到 某个特殊的段落。 二、打开第4章 /4-3/jieshao.html网页，演示 锚点链接效果 观 看 教 师 演 示 并 思 考 锚 点 链 接 的 应 用 打下基础 锚点链接应 用 比 较 广 泛，学生需 要掌握并应 用 课堂小结 (5min) 一、页面与页面之间的超链接 二、相对链接和绝对链接 三、锚点链接（本页之间链接） 作业布置 (5m

32、in) 一、网上查找哪些页面常用页面与页面链接，哪些是用锚点链接并总结 二、利用教材第 4 章/4-3/jieshao.html的素材，自己动手创建锚点链接 板书 三、创建超级链接的方法与步骤 四、相对链接和绝对链接 五、创建锚点链接 教学反思 本次课主要介绍超链接的常用方法，超链接在学生上网中随处可见， 较易理解， 学生之间的讨论也非常激烈，较好。 实训课题图像处理和创建超链接实训课时2 课时 实训目标 3、学会利用 DW 处理图像 4、掌握创建超级链接的方法 5、理解相对链接和绝对链接概念 实训重点 1、图片处理 2、超级链接 实训难点超级链接的使用 实训方法上机实训 实训准备教案、素材、

33、案例、教材、计算机机房 实训要求 7、对照实习报告的要求，完成上机任务； 8、任务完成后及时要求教师考评； 9、完善实习报告，填写实训总结； 4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 实训过程 操作要求及步骤 任务一 处理图像 1、将图片 6.jpeg 修改为尺寸为 240*160，数据量设置为 8K左右（6-11k 都可 以）并进行裁剪和锐化等设置，熟悉图片处理几个设置，设置完成后以网 页的形式保存，保存在文件夹中，保存名称为“xiugai.html” 任务二 超级链接 2、将教师发送的 Index.HTML 网页进行编辑，将 “我与足球”四个字链接到“我 与足球网 .html ” ，

34、目标为 -self ；将“足球新闻”四个字链接到“逢入京 使.html ” ， 目标为 -blank ；将“足球明星”四个字链接到“news.html ” ， 目标为 -new。 3、修改页面属性：在页面属性对话框中，设置链接选项中的大小为16 像素， 链接颜色为“#6666cc” ，变换图像颜色为“#ff6600 ” ，已访问链接为 “#663366” ， 活 动 链 接 为 “#99cc00” ， 下 划 线 样 式 为 “仅在变换 图 像 时 显 示 下划线”。设 置的对话框如下图所示： 完善报告填写实训总结，并上交实习报告。 自主练习剩余时间，可进行自主练习，内容不限，但不可违反上机纪

35、律 实训总结本次实习内容较多，大部分学生能在规定时间内完成任务，较好。 实训课题跳转菜单实训课时2 课时 实训目标 6、掌握图像热点链接的使用 7、掌握脚本链接 8、掌握链接检查器的使用 实训重点路径的正确使用 实训难点链接的运用及链接检查器的使用 实训方法上机实训 实训准备教案、素材、案例、教材、计算机机房 实训要求 10、对照实习报告的要求，完成上机任务； 11、任务完成后及时要求教师考评； 12、完善实习报告，填写实训总结； 4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 实训过程 操作要求及步骤 任务一 在地图中创建热点链接 创建图像热 点链接 任务二 制作跳转菜 单 打开 news.

36、HTML 网页，在如下图所示的位置插入图片，图片为“鼠标经过的图 片” ，链接到本页的“冠军杯新闻”处（提示：利用锚点链接） 打开“ jieshao.html”网页，在下载资源文本中将教师提供的“qq.rar ”放入 站点，做成的效果是点击“下载资源”就能下载“qq.rar ” ，同理在“联系我 们”中设置邮件下载 完善报告填写实训总结，并上交实习报告。 自主练习剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 实训总结本次实习内容较多，大部分学生能在规定时间内完成任务，较好。 课题2.4 使用表格布局页面教学课时2 课时 教学目标 知识目标 1、了解表格在网页设计中的作用。 2、掌握网

37、页中表格的制作方法、表格属性的设置方法以及单元 格属性的设置方法，能够在单元格中正确插入文字和图片。 3、能够根据网页设计内容，正确布局表格的结构，掌握表格嵌 套的设计方法。 能力目标 1、利用对比学习，培养学生知识迁移的能力。 2、通过用表格结构设计网页，使学生进一步理解表格的作用、 功能及网页设计方法的多样性，培养学生的发散思维能力 情感目标 通过自主探究，使学生掌握软件的使用规则，培养学生自主学习 的能力。 教学重点 1、了解表格在网页设计中的重要作用。 2、掌握插入、编辑表格的方法及表格的属性设置。 3、掌握单元格属性的设置。 教学难点表格的嵌套在网页设计中的应用 教学资源 1. 教学

38、场所：多媒体教室 2. 教学设备：安装有Dreamweaver cs5 软件的计算机 3. 教学资料：辅助课件 . 多媒体教学软件 教法讲解法、任务驱动教学法学法小组讨论法 教学过程 过程安排教学内容教师活动学生活动设计意图 导入新课 (5min) （1）展示两个页面并进行比 较：一个使用表格布局，表格 边框隐藏，其页面工整， 文本、 图片摆放对称，具有一定的规 律；另一个页面凌乱，图文混 展 示 并 引导 学 生思考 学 生 仔 细 观 察 并 比 较 两 个 网 页 ， 讨 论、交流，回 顾 Word 中学 通过对比学 习，培养学 生知识迁移 的能力。 杂，摆放杂乱。 问题 1：你喜欢那个

39、页面的布 局？ 问题 2：用什么方法可以达到 第二个页面的效果？ 习过的表格， 领悟表格在D reamweaver 中的作用。 任务一 网页框架 (25min) 一、仿照网页 3 的样式，制作 一个网页框架。 在学生自主探究的基础上，教 师总结插入表格的一般方法。 并插入一个 2行1列，表格宽度 800像素，边框粗细 0像素的表 格。 演 示 如 何插 入 表 格 并 对表 格 的设置 分析网页 3， 找 出 其 中 使 用的表格，仿 照 插 入 图 像 的方法，探索 插 入 表 格 的 方法。 插入表格，通 过 实 际 操 作 强 化 对 表 格 属性的认识。 引导学生学 习理论的时 候思考

40、如何 理论运用到 实践 动手分析 和进行创意 设计，培养 学生的模仿 以及创新能 力 任务二 表格合并和 拆分 (20min) 二、在任务一的基础上，探索 表格基本属性：合并与拆分单 元格；单元格的宽度与高度； 用 实 例 来演 示 如 何 合 并和 拆 分单元格 根据需要， 插入图片，在 第 二 行 拆 分 为两列，左边 放文字，右边 通过实例， 培养学生分 析问题、解 决问题的能 力。 放图 任务三 表格嵌套 (30min) 表格的嵌套。在大表中插入一 个小的表格，这是创建复杂表 格样式的有效方法。要提示学 生不要嵌套过多。 展示几种常见 的图文混排样 式，让学生选择 自己喜欢的一 种完成

41、网页。 完善网页，制 作 完 成 的 同 学 把 网 页 通 过 FTP上传。 让学生自主 发挥，充分 展示个性风 采 课堂小结 (5min) 一、网页框架和表格基本操作 二、表格的合并和拆分 三、表格嵌套 课堂作业 (5min) 完成教材第五章 /Index.html的表格 教学反思 通过表格的嵌套及分析，对页面进行布局。需要加强学生对表格合并和拆分的 运用 实训课题表格布局实例分析实训课时2 课时 实训目标 1、能运用表格为页面布局 2、能掌握表格的嵌套操作 3、 4、能做出“超越公司简介”页面。 实训重点 1、掌握插入、编辑表格的方法及表格的属性设置。 2、掌握单元格属性的设置。 实训难

42、点表格的嵌套在网页设计中的应用 实训方法上机实训 实训准备教案、素材、案例、教材、计算机机房 实训要求 13、对照实习报告的要求，完成上机任务； 14、任务完成后及时要求教师考评； 15、完善实习报告，填写实训总结； 4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 实训过程 操作要求及步骤 任务一 创建图像热 点链接 制作如下图所示的界面： 操作要求： 1、top 区 （1）一行三列： 788px=128+540+120 Logo+Banner+主页常用选项 （2）第三列嵌套三行两列表格： 120px=30+90 小图标 +文本选项 2、menu区 （1）一行两列： 788px=148+640

43、 显示当前日期 +导航条 （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

44、 行 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 高 第一行：水平线 第二行：版权信息 第三行：联系方式 完善报告填写实训总结，并上交实习报告。 自主练习剩余时间，可进行自主

45、练习，内容不限，但不可违反上机纪律 实训总结表格布局是最常见的一种布局方式，本次实训学生较积极，特别是13 高 12 班 同学学习氛围特别好。 课题2.5 使用框架布局页面教学课时2 课时 教学目标 知识目标 1、能掌握框架的基本操作。 2、能理解框架技术的实质。 能力目标能用框架布局页面 情感目标 通过自主探究，使学生掌握软件的使用规则，培养学生自主学习 的能力。 教学重点 框架的基本操作 教学难点用框架为页面布局 教学资源 1. 教学场所：多媒体教室 2. 教学设备：安装有Dreamweaver cs5 软件的计算机 3. 教学资料：辅助课件 . 多媒体教学软件 教法讲解法、任务驱动教学法

46、学法小组讨论法 教学过程 过程安排教学内容教师活动学生活动设计意图 导入新课 (5min) 在学习过表格布局后，我们可 以做一些常规的页面布局了， 但有些特殊效果我们却无法实 现。如图所示的网页：今天我 们来学习另一种页面布局技术 框架。 展 示 框 架页 面 给学生，引发学 生思考 预习并思考 框 架 页 面 布 局 通过实例来 展示，引发 学生思考特 殊效果如何 实现，培养 学生积极思 考问题的能 力 任务一 基本知识 (35min) 一、基本概念：框架是一种网 页布局技术。 二、创建框架与框架集 1、手动设计 加 强 学 生对 框 架 布 局 的理 解 并 进 行 简单 操 作 认 真

47、听 讲 并 对 概 念 进 行 消化理解 学生只有 在牢固的掌 握了基本概 念后才能为 任务二的学 习打下基础 2、插入预定义框架 三、创建嵌套框架 四、选择框架和框架集 1、在编辑区中选择 2、在框架面板中选择 五、删除框架 六、保存框架与框架集文件 任务二 实例操作 (40min) 完成如下图所示的页面： 要求如下： （1）topFrame： 高：100px 表格： 2x2，宽 -788px，高-10 0px 高：100=75+25 宽：788=128+660 （2）第一行： Logo+Banner 第二行：当前页位置信息 +导航 将学生分 7 组， 并 引 导 学生 分 组 讨 论 如何

48、 完 成 如 图 所示 的 效果 讨 论 如 何 才 能 实 现 如 图 所 示 的 效 果并总结 通过实例， 培养学生分 析问题、解 决问题的能 力。 栏 导航栏： 1x7 表格 宽：660px 高：25px 字号： 9pt 行高： 14pt （3）mainFrame ： 表格： 2x2 宽：788Px，高： 400Px 边框： 5px，间距： 5px 表格： 3x1 宽：788px，高： 45px 边框： 0px，间距： 0px 课堂小结 (5min) 四、框架基本概念 二、创建框架与框架集 三、创建嵌套框架 四、选择框架和框架集 五、删除框架 六、保存框架与框架集文件 课后作业 (5mi

49、n) 设计一系列框架型页面，然后将之实现。要求结合超链接的相关知识。 教学反思 本次主要讲述框架和框架集布局页面，运用实例学生加深了对框架的理解，运 用起来得心应手。 14高31班学生学习氛围待加强 实训课题框架布局实例分析实训课时2 课时 实训目标 5、能掌握布局表格和布局单元格的基本操作。 6、能在布局模式下对页面进行整体布局。 实训重点掌握布局表格和布局单元格的基本操作。 实训难点项目的实现 实训方法上机实训 实训准备教案、素材、案例、教材、计算机机房 实训要求 16、对照实习报告的要求，完成上机任务； 17、任务完成后及时要求教师考评； 18、完善实习报告，填写实训总结； 4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 实训过程 操作要求及步骤 任务一 利用框架排 版 步骤 1 选择文件菜单栏中的新建命令，创建一个新的页面，并将其 命名为“个人主页”。 步骤 2 选择插入工具栏中布局任务栏中的 框架命令，单击按钮， 选择下拉菜单的“顶部和嵌套的左侧框架”命令。 步骤 3 弹出框架标签辅助功能属性 对话框，将网页中框架的各个部分进 行命名。 步骤 4 选择窗口菜单栏中框架命令。 步骤 5 右侧的面板中就加入了 框架 面板，选中“topFrame”框