大自然作文-进击的巨人黑板报

精品文档





湖 南 省 商 业 技 术 学 院

学 期 授 课 进 度 计 划
（ 二 年级 第 一 学期）
课程名称 网页制作与设计
适用班级 16高21、22
制定教师 易会芝

审 批 签 字
教研室主任
教务科长
教务院长






年 月 日
年 月 日
年 月 日
2017-2018 学年第 一 学期制定




.

精品文档


课 时 分 配
授 课
周课时
周 数 总课时
讲 课

实 验 复习考试 机 动

授 课 其 中
23









期 末 完 成 情 况
计 划
课 时

教 学 截 至
章 节 内 容
备注：用蓝黑或碳素墨水钢笔填写






完 成
课 时


超 出 或 缺 少 课 时
超 出

缺 少

弥 补
.

精品文档
教 学 计 划
学
情
分
析

本门课程《网页设计与制作》的教学班级为14 级计算机班，计算机班对网络知识
有一定的了解，基础知识较好，同时根据实际情况，特拟定本计划。
大
纲
要
求




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




教
学
难
点




教
学
方
法




讲授法、演示 法、项目教学法、合作学习、对话、任务驱动法、头脑风暴、小组讨
论法等教学方法。



.

精品文档
学 期 授 课 进 度 计 划 表
周次
3


4


5


6


7
8


9


.
授 课 内 容
1.1网站基础知识
1.2网站建设概述
实训 新建一个网页
2.1添加和编辑文本
实训 网站素材处理
实训 制作简单网页






国庆放假
2.2添加和编辑图像
2.3创建超级链接
实训 图像处理和创建超级链接
实训 跳转菜单
2.4使用表格布局页面
实训 表格布局实例分析
课时
2
2
2
2
2
2






6
6
2
2
2
2
2

备 注
1、2周新生军训


上机
上机
上机






机动补周一课


上机
上机

上机

精品文档
10


2.5使用框架布局页面
运动会
运动会
2


2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2

充周三到周五

上机


上机

上机
上机

上机
上机

11 实训 框架布局实例分析
3.3添加动画
添加音频和视频
12


13


14


15


16
实训 DIV与表格的转换
4.3晃动的图片
实训 交换图像
实训 拼图游戏
4.4修改属性特效及动态菜单制作
实训 效果行为应用
实训 图片展播实例
5.1认识和编辑CSS
实训 美化页面
实训 应用CSS到网页中
5.2类型、背景和区块样式
实训 方框、边框和导航栏
实训 超链接样式及设置技巧
上机
上机

上机
上机

.

精品文档
学 期 授 课 进 度 计 划 表


17


18


19


20


21


22
6.1DIV布局页面
6.2认识Spry
实训 调整样式
6.3选择服务器和使用虚拟机
6.4申请域名
实训 网站发布
7.1个人主页制作
7.2策划构思及设计流程
实训 页面布局
7.3制作页面头部
7.4制作中间表格内容
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
6




上机


上机


上机


机动
充周一课






元旦放假






复习考试
教研组

意见

.

精品文档


课题 1.1网页制作基础知识
知识目标
教学目标 能力目标
情感目标
教学重点
教学难点
网页的组成
网页的分类，网址与域名的区分
1.教学场所：多媒体教室
2.教学设备：安装有Dreamweaver cs5软件的计算机
3.教学资料：辅助课件.多媒体教学软件
讲解法、任务驱动教学法 学法 小组讨论法
能了解网页制作软件的特点
能掌握网页制作的基本概念
提高学生团结合作精神，提高学生竞争意识
教学课时 2课时
教学资源
教法
教学过程 课前准备 导入新课 讲授新课 动手实践 课堂小结 作业布置
时间分配 5 10 50 15
教学过程
5 5
过程安排 教学内容
1、教师自我介绍；
2、点名；
3、课程介绍
4、课堂要求

教师活动
1.自我介绍
2.按照花名册点
名
3.课程介绍
4.统计学情
5.提出期望与要
求
学生活动
1.班长统计座
次表
2.学生自我介
绍
3.反应学情
4.推荐课代
表。

学生之间相互
讨论，加深对网
页设计的认识

设计意图
使师生尽快互
相认识，并促
使学生答题了
解我们的课
程。
课前准备
导入新课

本次课是本学期第一次上课，简单以提问的方式了
介绍本课程： 解学生对网页设
1、网页设计相关级别及其薪资待遇 计的认知
2、网页设计的就业方向及其公司类
型
提问跟就业和
薪资有关的问
题，抓住学生
注意力。
.

精品文档
任务一
讲授新课

简单介绍网页知
识
1、网站是企业向用户和网民提供信

息（包括产品和服务）的一种方式，


是企业开展电子商务的基础设施和

信息平台，离开网站去谈电子商务


是不可能的。

2、企业的网站被称为“网络商标”，


也是企业无形资产的组成部分，而

网站是Internet上宣传和反映企业


形象和文化的重要窗口。

提问：网页设计要
二、网页设计的要点
点并将学生分组
1、明确建站目标和需求。
进行讨论

2、网站主题鲜明。

3、网站版式设计。


4、色彩在网站设计中的作用。

5、网站设计形式与内容统一。

讲述网站设计级
三、网站设计级别
别，引导学生对这
1、新手入行
个行业向往，并鼓
励学生向大师阶
2、跳槽阶段
段努力
3、稳定阶段


4、大师阶段

四、网页设计公司类型
简单介绍学生将
来从事本行业的
1、门户游戏类
范围
2、企业部门类


3、网站建设类

4、互动设计类


五、网页三剑客
介绍网页制作需
1、 Dreamweaver：
要的软件

可视化页面设计、网站管理

一、网页设计介绍
吸收新知识并
思考生活中常
见网页设计知
识











分组讨论，并派
出代表来总结







思考自己的定
位






了解本行业的
现状






认识软件基本
组成


讲述基础知
识，为后面学
习打下基础












加强学生之间
交流沟通能
力，加深学生
对网页设计要
点理解




引导学生了解
这个行业






引导学生了解
本行业从事范
围





提前引导学生
认识
dreamweaver
cs5 为后面软
.

精品文档
2、 Fireworks
页面图象设计工具
3、 Flash
动画制作
六、网页基础知识
1、网页与网站的区别
（1）网页是WWW系统中信息的基本
单位，简单来说，就是后缀名为htm
的文件。
（2）网站是指存放在网络服务器上
的完整信息的集合体。
2、网页的组成
（1）文字：最直接、通用、容易的
沟通方式
（2）图片：网页的一大特点——图
文并茂
（3）动画：1995年，Sun公司开 发
了Java语言，用户可以创建能调用
图片和声音的多媒体应用小程序
（4）超链接 ：要通过一种方式把各
独立的网页整和在一起，使之构成
一有机整体，而这种链接页面的功能叫超链接。
（5）特殊组件：图片与动画可算是
最常见的特殊组件。
3、主页Homepage
引导访问者浏览网站。
index、main、default
4、网页空间






给学生灌输网页
设计的基本知识







做笔记，识记教
师讲述的知识
件学习打下基
础




这些知识都是
学网页设计最
基本的基础知
识，学生基础
知识薄弱，必
须了解这些才
能学习后面的
内容
.

精品文档
在Internet上申请的一个存储空
间，用以存放网页。
5、网址和域名
网址：IP地址
域名：与IP地址相对应，唯一性，
善于识别
最右边：国家（中国——cn）
其次：机构（商业机构——com）
再次：子网名称
最左边：服务器类别（web服务器—
—www）
6、网页的分类
静态页面与动态页面
7、认识网站
门户网站：sina
个人网站：明星
专业网站：医疗
职能网站：政府

任务二
动手实践

根据网页设计要点，以小组为单
位确定一个网站主题，小组讨论
需要的步骤以及素材
1、 按照课堂分组课后进行讨论
2、 每组确定一个网站主题方向。
3、 每组设计一个网站调查问卷。
一、网页设计师就业方向
课堂小结
二、网站设计流程
三、常见网站
巡回指导，给予学
生帮助

小组讨论，相互
沟通



加深学生对网
页设计要点学
习


课后作业
.

精品文档
本次课是网页设计第一次上课，主要讲述一些网页基础知识，学生基 础知识薄弱，需要加
教学反思
强，整体来说计算机班基础知识要好于电子商务班
一、网页设计介绍
二、网页设计的要点
三、网站设计级别
板书
四、网页设计公司类型
五、网页三剑客
六、网页基础知识






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

精品文档
课前准备
1、搜集了解网站开发的基本流程。 配合学生搜索资
2、网站设计、制作过程中的一些原料及解答疑问
则、注意事项。
网站设计大致流程是哪些？每组派
出一个代表阐述本组课前搜集的资
料
一、网站设计流程










二、网站开发原则
1、 确定主题
讨论：网站是靠什么赢利的？
2、规划站点结构
（1）结构设计
1、确定网站主题
的建议
2、给网站取名
3、提示决定网站
的性质
网站上传
网站推广
更新维护
网页制作
整合网站
效果测试
架构内容信息
搜集整理资料
规划网站结构
网上搜索教师
提出问题，了
解网站设计事
项
阐述观点，组员
之间相互讨论








培养学生自主
学习能力
导入新课
(5min)
任务一
讲授新课
(35min)
听取学生的观点
并给予一定的知
道






锻炼学生的语
言表达能力和
分析能力






小组讨论，相互
沟通


加深学生对网
页设计要点学
习


任务二
分组讨论
(40min)
（2）目录结构设计
（3）形象设计
（4）主页设计
（5）其他页面设计
（6）企业站点设计
（7）为站点设计目标对象
访问率

.

精品文档
三、网页版面布局设计
1、版面布局的原则
（1）主次分明、中心突出
（2）大小搭配、相互呼应
（3）图文并茂、相得益彰
（4）动静适度、平衡对称
2、页面布局的类型
（1）“国”字型
（2）框架型
（3）标题正文型
（4）封面型
（5）综合型
四、规划站点
1、建立站点目录
2、站点规划
规划站点结构是利用不同的文
件夹将不同的网页内容分门别类的
保存。
3、创建导航草图
五、搜集素材
1、搜集并制作素材
无论是文字素材还是图片、动画素
材，都应注意其来源是否注明版权
所有。
网站素材要为网站主题服务。
2、整理素材
原始素材、编辑处理好的素材
3、命名规范
六、创建站点
.

精品文档
1、不使用服务器技术
2、本地编辑
3、不连接到远程服务器
七、管理站点
（1）编辑现有站点
（2）删除已有站点
课后作业
(5min)
根据这次课的内容、注意事项，构思一个明确的网站主题，并将站点结构的规划 用文件夹
表示出来
一、网站设计确定主题
课堂小结
(5min)
二、网站设计流程
三、站点管理
本次主要讲述站点的建立和管理，课程较简单，学生掌握较好
教学反思
一、网站设计流程
二、网站开发原则
三、网页版面布局设计
板书 四、规划站点
五、搜集素材
六、创建站点
七、管理站点




实训课题
实训目标
实训重点
实训难点
.
新建一个网页
1、 熟悉Dreamweaver cs4界面
2、 制作简单网页
1、 学会在网页中输入文字、插入图片等
2、 掌握简单代码的编写
代码的编写
实训课时 2课时

精品文档
实训方法
实训准备
上机实训
教案、素材、案例、教材、计算机机房
1. 对照实习报告的要求，完成上机任务；
实训要求
2. 任务完成后及时要求教师考评；
3. 完善实习报告，填写实训总结；
遵守实训纪律，不游戏，不睡觉，不高声谈论。
实训过程
内容
操作要求及步骤
1、 双击打开软件——新建HTML网页——网页名字为nes01——输入以下文字然后保存
任务一
新建网页1

2、文字要求：标题 宋体 二号 蓝色 正文：五号 宋体 加粗
任务二
新建网页2
制作如下网页 素材见文件夹 网页命名文字为index 保存在文件夹中上交给老师
.

精品文档

操作步骤：新建 HTML网页——输入文字——将标题设置为36号，蓝色，宋体——插入两
根红色的水平线——插入时 间——插入商标——插入背景图片——保存
完善报告 填写实训总结，并上交实习报告。
剩余时间，可进行自主练习，内容不限，但不可违反上机纪律
本次课是学生第一次上机，制作 一个较简单的网页，学生存在对DW界面不熟，操作不熟
练等缺点，需加强操作
自主练习

实训总结




课题 2.1编辑和添加文本
知识目标
教学目标
能力目标
情感目标
教学重点
教学课时 2课时
1、 掌握输入和编辑文本
2、学会插入文本，掌握设置文本格式的方法
掌握网页中三种常见列表的创建，及其各自的特点
提高学生自主学习和团队竞争意识
插入和编辑文本
.

精品文档
教学难点 创建列表
1.教学场所：多媒体教室
2.教学设备：安装有Dreamweaver cs5软件的计算机
3.教学资料：辅助课件.多媒体教学软件
讲解法、任务驱动教学法 学法
教学过程
小组讨论法
教学资源
教法
过程安排 教学内容
提问：在DW中输入文本和在Word中
输入文本有何区别？
教师活动
将学生分组，并提
出问题，引导学生
小组之间讨论并
总结
演示并强调重点
学生活动
讨论并思考

设计意图
以讨论的形式
提高学生之间
的交流沟通


文本插入是基
础知识，为下
面任务二打下
基础



导入新课
（5min）
任务一
插入文本
(20min)
一、插入文本
1、 插入普通文本
2、 插入不换行空格
3、 插入水平线
4、 插入日期和特殊字符
二、编辑文本
1、基本样式设置
2、设置段落格式
3、创建列表
完成以下网页实例：
认真听讲并记
下重点
1、 引导学生讨论
该网页由哪几
部分组成
2、 引导学生小组
组内分工，完
成小模块
小组讨论 本实例即是对
任务一的巩
固，也为下一
次课打下基础
任务二
(55min)

作业布置
.
1、 找一篇文章输入至页面中，然后利用所学知识，对其进行格式编排

精品文档
（5min）
一、插入文本
二、编辑文本
一、插入文本
5、 插入普通文本
6、 插入不换行空格
7、 插入水平线
8、 插入日期和特殊字符
二、编辑文本
1、基本样式设置
2、设置段落格式
3、创建列表
三、实例操作
本次课是 一个基础知识内容，文本是一个网页必不可少的内容，对网页设计至关重要，
教学反思
学生必须牢牢掌握文本的各个要点。目前来说学习兴趣较好。
课堂小结
（5min）
板书



实训课题
实训目标
实训重点
实训难点
实训方法
实训准备
网站素材处理
1、 掌握创建本地站点和远程站点
2、 学会修改站点和多站点的管理
站点的管理
站点的管理
上机实训
教案、素材、案例、教材、计算机机房
1、 对照实习报告的要求，完成上机任务；
实训要求
2、 任务完成后及时要求教师考评；
3、 完善实习报告，填写实训总结；
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。
.
实训课时 2课时

精品文档
实训过程
内容
操作要求及步骤
1、熟悉DW界面
2、在D盘根目录创建一个站点名称为《我的足球网》，本地站点文件夹为 jcwww，如下图
所示
任务一
创建站点

任务二
设置默认图像
文件夹
完善报告
利用教师所给素材，制作简单网页《我的偶像》，素材见文件夹
填写实训总结，并上交实习报告。
剩余时间，可进行自主练习，内容不限，但不可违反上机纪律
本次上机主要是让学生掌握站点 的建立及输入文本和编辑文本等，学生操作较好，大部分
能完成任务。

自主练习

实训总结


实训课题 制作简单网页
1、 掌握新建网页、编辑文字、处理图像
2、 新建站点
3、 插入水平线、空格、自动更新时间
制作简单网页流程
综合运用HTML工具
上机实训
教案、素材、案例、教材、计算机机房
实训课时 2课时
实训目标
实训重点
实训难点
实训方法
实训准备
.

精品文档
4、 对照实习报告的要求，完成上机任务；
实训要求
5、 任务完成后及时要求教师考评；
6、 完善实习报告，填写实训总结；
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。
实训过程
内容
操作要求及步骤
1、 熟悉DW菜单栏常用界面
2、 完成以下简单网站，素材见素材库
任务一
足球偶像网页

完善报告 填写实训总结，并上交实习报告。
剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 本次上机内容较多，主要考察学生综合性的练习，如图片的插入，文字的编辑及水平线的
插入等，需 要学生对前面的知识非常熟悉，13高12班整体班级学习氛围较好，所有学生
都能按时上交作业，值得 表扬
自主练习

实训总结


课题 2.2添加和编辑图像
知识目标
教学目标
能力目标
教学课时 2课时
1、 掌握图像裁剪、重新取样、亮度、锐化的设置
2、掌握图像属性设置
掌握运用软件对图像处理的能力
.

精品文档
情感目标
教学重点
教学难点
图像的编辑
图像的编辑
提高学生团结合作精神，提高学生竞争意识
教学资源
1.教学场所：多媒体教室
2.教学设备：安装有Dreamweaver cs5软件的计算机
3.教学资料：辅助课件.多媒体教学软件
讲解法、任务驱动教学法 学法
教学过程
小组讨论法 教法
过程安排 教学内容
前面介绍网页的时候有 说过，在保
证画质的情况下，图片的数据量越
小越好。问题：如果一张图片数据
量很大 ，我们该如何编辑？
教师活动
演示
这张图片，分析数
据量为93k、 画质
为1024*768规格
的图片如何更改
数据量和规格？


对图片宽、高、裁
切、重新采样、锐
化等设置进行演
示

学生活动
分组讨论用什
么方法来更改
数据量和规格
设计意图
提出问题引发
学生思考，引
出这次课的主
题 导入新课
(5min)
任务一
编辑图片
(30min)











给出和两张图片
进行对比，提出任务：如何从
变化到？
具体操作步骤：打开DW软件——插
入图像，对图片属性设置
如下目标值：
观看教师演示，
并思考
变成
的方
法
引导学生学习
理论的时候思
考如何理论运
用到实践

编辑完成后与原图像进行对比，会
发现数据量、规格都发生变化，但
浏览网页更友好
.

精品文档
概念：在网页浏览中，有时当鼠标
移到某个图 像上或者单击时，图像
会变成另外一副图像。
浏览时效果：
任务二
制作翻转图像
(50min)


鼠标放上去时效果：
1、 鼓励学生小组
讨论如何完成
翻转图像效
果；
2、 给学生展示翻
转图像做出来
的效果，然后
讲解如何
才能完成这个
效果



小组讨论如何
完成该效果并
进行尝试


课堂小结
(5min)
一、如何编辑图像
二、制作翻转图像效果
一、编辑图像
1、 重新采样
板书设计
2、 裁剪、锐化
二、翻转图像制作效果
本次教学学生较感兴趣，特别是鼠标经过的图像，学生完成得较好，值得鼓励
教学反思




课题
教学目标
.
2.3创建超级链接
知识目标
教学课时 2课时
1、 掌握创建超链接的方法
2、 掌握相对链接和绝对链接的区别

精品文档
3、 创建锚点链接
能力目标
情感目标
教学重点
教学难点
提高学生学习创作能力
提高学生团结合作精神，提高学生竞争意识
1、 正确认识路径
2、 理解相对链接和绝对链接的区别
添加超链接、相对路径、绝对路径
1.教学场所：多媒体教室
2.教学设备：安装有Dreamweaver cs5软件的计算机
3.教学资料：辅助课件.多媒体教学软件
讲解法、任务驱动教学法 学法
教学过程
小组讨论法
教学资源
教法
过程安排 教学内容
每次浏览网页的时候点击某个文字
或者图片，能自动跳转到另一个页
面，提 问：这样的链接形式叫什么？
如何实现？

教师活动
进入新浪网给学
生演示超级链接
的效果并进行提
问
给学生演示如何
插入链接；演示不
同目标新建窗口
的区别


学生活动
观看效果并讨
论如何才能实
现该效果
设计意图
以提问且学生
较熟悉的浏览
网页的方式吸
引学生的注意
让学生熟悉
DW添加超级
链接的界面






正确理解相对
链接和绝对链
接，为下面的
学习打下基础


锚点链接应用
比较广泛，学
生需要掌握并
应用
导入新课
(5min)
一、新建站点jcww，并在站点内新
建默认图像 文件夹images，将网页
里的“我与足球”链接
到，目标为- blank；“足
任务一
球新闻”链接到“逢入京使.HTML”，
创建超级链接
目标为-new；“足球明星”链接到“我
（20min）
与足球网.HTML”，目标为-self。
二、对比每个目标不同，网页新建
窗口不同并进行总结
区别：
相对链接是 指链接的地址是本站点
之内的对象；绝对链接是指链接的
地址是远程对象，用域名或IP作为< br>地址

一、概念：在本页进行链接的叫做
锚点，一般在长篇的文章或技术文< br>档中是使用，链接到某个特殊的段
落。
观看教师演示，
并思考- new、
-blank、-self
几个目标值窗
口的区别


任务二
相对链接和绝
对链接
(20min)


任务三
锚点链接
(35min)
演示教材P60实
例




演示如何插入锚
点链接
思考并正确理
解相对链接和
绝对链接概念



观看教师演示
并思考锚点链
接的应用
.

精品文档
二、打开第4章
网页，演示锚点链接效果

课堂小结
(5min)

作业布置
(5min)
一、页面与页面之间的超链接
二、相对链接和绝对链接
三、锚点链接（本页之间链接）
一、网上查找哪些页面常用页面与页面链接，哪些是用锚点链接并总结
二、利用教材第4章的素材，自己动手创建锚点链接
三、创建超级链接的方法与步骤
板书
四、相对链接和绝对链接
五、创建锚点链接
本次课主要介绍超链接 的常用方法，超链接在学生上网中随处可见，较易理解，学生之间
教学反思
的讨论也非常激烈，较好。


实训课题 图像处理和创建超链接
3、 学会利用DW处理图像
4、 掌握创建超级链接的方法
5、 理解相对链接和绝对链接概念
1、 图片处理
2、 超级链接
超级链接的使用
上机实训
教案、素材、案例、教材、计算机机房
7、 对照实习报告的要求，完成上机任务；
实训要求
8、 任务完成后及时要求教师考评；
9、 完善实习报告，填写实训总结；
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。
.
实训课时 2课时
实训目标
实训重点
实训难点
实训方法
实训准备

精品文档
实训过程

任务一
处理图像
操作要求及步骤
1、 将图片修改为尺寸为240*1 60，数据量设置为8K左右（6-11k都可以）并进
行裁剪和锐化等设置，熟悉图片处理几个设置， 设置完成后以网页的形式保存，保存
在文件夹中，保存名称为“”
2、 将教师发送的网页进行编辑，将“我与足球”四个字链接到“我与足球
网.html”，目标为- self；将“足球新闻”四个字链接到“逢入京使.html”， 目标为
-blank；将“足球明星”四个字链接到“”， 目标为-new。
3、 修改页 面属性：在页面属性对话框中，设置链接选项中的大小为16像素，链接颜色
为“#6666cc”，变 换图像颜色为“#ff6600”，已访问链接为“#663366”，活动链接为
“#99cc00” ，下划线样式为“仅在变换图像时显示下划线”。设置的对话框如下图所
示：
任务二
超级链接
完善报告 填写实训总结，并上交实习报告。
剩余时间，可进行自主练习，内容不限，但不可违反上机纪律
本次实习内容较多，大部分学生能在规定时间内完成任务，较好。

自主练习

实训总结


实训课题 跳转菜单
6、 掌握图像热点链接的使用
7、 掌握脚本链接
8、 掌握链接检查器的使用
路径的正确使用
链接的运用及链接检查器的使用
实训课时 2课时
实训目标
实训重点
实训难点
.

精品文档
实训方法
实训准备
上机实训
教案、素材、案例、教材、计算机机房
10、 对照实习报告的要求，完成上机任务；
任务完成后及时要求教师考评；
完善实习报告，填写实训总结；
实训过程
实训要求
11、
12、
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。

操作要求及步骤
在地图中创建热点链接
任务一
创建图像热点
链接

打开网页，在如下图所示的位置插入图片，图片为“鼠 标经过的图片”，链接
到本页的“冠军杯新闻”处（提示：利用锚点链接）
打开“”网页，在 下载资源文本中将教师提供的“”放入站点，做成
的效果是点击“下载资源”就能下载“”，同理在“联 系我们”中设置邮件下载
任务二
制作跳转菜单

完善报告 填写实训总结，并上交实习报告。
剩余时间，可进行自主练习，内容不限，但不可违反上机纪律
本次实习内容较多，大部分学生能在规定时间内完成任务，较好。

自主练习

实训总结






.

精品文档

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

任务一
网页框架
(25min)



.
展示并引导学学生仔细观
生思考 察并比较两

个网页，讨

论、交流，回
顾Word中学
习过的表格，
领悟表格在D
reamweav er
中的作用。

通过对比学
习，培养学
生知识迁移
的能力。

一、仿照网页3的样式，制作
演示如何插入表
格并对表格的设
一个网页框架。
在学生自主探究的基础上，教
置
师总结插入表格的一般方法。
并插入一个2 行1列，表格宽度
800像素，边框粗细0像素的表
分析网页3，
找出其中使
用的表格，仿
照插入图像
的方法，探索
插入表格的
引导学生学习
理论 的时候思
考如何理论运
用到实践

精品文档





格。




二、
在任务一的基础上，探索
用实例来演示如
表格基本属性：合并 与拆分单
何合并和拆分单
元格；单元格的宽度与高度；
元格
方法。
插入表格，通
过实际操作
强化对表格
属性的认识。

根据需 要，
插入图片，在
第二行拆分
为两列，左边
放文字，右边
放图 展示几种常见完善网页，制
的图文混排样作完成的同
式，让学生选择学把网页通
自 己喜欢的一过FTP上传。
种完成网页。
任务二
表格合并和拆
分(20min)

动手分析
和进行创意
设计，培养
学生的模仿
以及创新能
力
通过实例，
培养学生分
析问题、解
决问题的能
力。
让学生自主
发挥，充分
展示个性风
采

任务三
表格嵌套
(30min)

课堂小结
(5min)
课堂作业
(5min)
表格的嵌套。在大表中插入一
个小的表格，这是创 建复杂表
格样式的有效方法。要提示学
生不要嵌套过多。
一、网页框架和表格基本操作
二、表格的合并和拆分
三、表格嵌套
完成教材第五章的表格
通过表格的嵌套及分析，对页面进行布局。需要加强学生对表格合并和拆分的运用
教学反思

实训课题 表格布局实例分析
1、 能运用表格为页面布局
2、 能掌握表格的嵌套操作
3、
4、 能做出“超越公司简介”页面。
1、掌握插入、编辑表格的方法及表格的属性设置。
2、掌握单元格属性的设置。
表格的嵌套在网页设计中的应用
上机实训
教案、素材、案例、教材、计算机机房
实训课时 2课时
实训目标
实训重点
实训难点
实训方法
实训准备
实训要求
13、 对照实习报告的要求，完成上机任务；
.

精品文档
14、
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.教学资料：辅助课件.多媒体教学软件
讲解法、任务驱动教学法 学法
教学过程
小组讨论法 教法
过程安排 教学内容 教师活动 学生活动 设计意图
在学习过表格布局后，我们可展示框架页面
以做一些常规的页面布局了，给学生，引 发学
但有些特殊效果我们却无法实生思考
导入新课 现。如图所示的网页：今天我
(5min)
们来学习另一种页面布局技术
——框架。
任务一
基本知识
(35min)








预习 并思考通过实例来
框架页面布展示，引发
局 学生思考特

殊效果如何
实现，培养
学生积极思
考问题的能
力
学生只有 在
一、基本概念：框架是一种网
加强学生对框架
认真听讲并
布局的理解并进< br>对概念进行
牢固的掌握了
页布局技术。
行简单操作 基本概念后才
二、创建框架与框架集 消化理解

能为任务二的
1、手动设计
学习打下基础

2、插入预定义框架
三、创建嵌套框架
四、选择框架和框架集
1、在编辑区中选择
2、在框架面板中选择
五、删除框架
六、保存框架与框架集文件
完成如下图所示的页面：
要求如下：
（1） topFrame：
（2） 高：100px
（3） 表格：2x2，宽-788px，高-
100px
（4） 高：100=75+25
（5） 宽：788=128+660
（6） 第一行：Logo+Banner
（7） 第二行：当前页位置信息+
导航栏
（8） 导航栏：1x7表格
（9） 宽：660px
（10） 高：25px
（11） 字号：9pt
（12） 行高：14pt
将学生分7组，并
引导学生分组讨
论如何完成如图
所示的效果
讨论如何
才能实现如
图所示的效
果并总结
通过实例，
培养学生分
析问题、解
决问题的能
力。
任务二
实例操作
(40min)
.

精品文档
（13） mainFrame：
（14） 表格：2x2
（15） 宽：788Px，高：400Px
（16） 边框：5px，间距：5px
（17） 表格：3x1
（18） 宽：788px，高：45px
（19） 边框：0px，间距：0px

四、框架基本概念
二、创建框架与框架集
课堂小结
(5min)
三、创建嵌套框架
四、选择框架和框架集
五、删除框架
六、保存框架与框架集文件
设计一系列框架型页面，然后将之实现。要求结合超链接的相关知识。

本次主要讲 述框架和框架集布局页面，运用实例学生加深了对框架的理解，运用起来得心
教学反思
应手。14高31班学生学习氛围待加强
课后作业
(5min)









实训课题
实训目标
实训重点
.
框架布局实例分析 实训课时 2课时
5、 能掌握布局表格和布局单元格的基本操作。
6、 能在布局模式下对页面进行整体布局。
掌握布局表格和布局单元格的基本操作。

精品文档
实训难点
实训方法
实训准备
项目的实现
上机实训
教案、素材、案例、教材、计算机机房
16、 对照实习报告的要求，完成上机任务；
任务完成后及时要求教师考评；
完善实习报告，填写实训总结；
实训过程
实训要求
17、
18、
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。

操作要求及步骤
步骤1 选择［文件］菜单栏中的［新建］命令，创建一个新的页面，并将其命名为“个
人主页”。
步骤2 选择［插入］工具栏中［布局］任务栏中的［框架］命令，单击按钮，选择下
拉菜 单的“顶部和嵌套的左侧框架”命令。
步骤3 弹出［框架标签辅助功能属性］对话框，将网页中框架的各个部分进行命名。
步骤4 选择［窗口］菜单栏中［框架］命令。
步骤5 右侧的面板中就加入了［框架］面板，选中“topFrame”框架进行编辑。
步骤6 页面下方出现了“topFrame”框架的［属性］面板。对“top Frame”框架进
任务一 行编辑。 步骤7 选中“mainFrame”框架进行编辑，页面下方出现了“mainFrame”框
利用框架排版 架的［属性］
面板，对“mainFrame”框架进行编辑。
步骤8 选中“leftFrame”框架进行编辑，页面下方出现了“leftFrame”框架的［属
性］面
板，对“leftFrame”框架进行编辑。
步骤9 选择［文件］菜单栏中的［保存全部］命令，对文件进行保存。
步骤10 弹出保存整体文件的对话框，为文件命名为“”。
步骤11 对各个框架部分进行保存，为各个框架进行命名。
步骤12 单击F12，在浏览器中预览效果。
创建框架集，可以自己设计，也可以从预定义的框架集中选择，还可以修改一个已存
在的Dre amweaver文件来创建。
实验内容：
步骤1 选择［修改］菜单栏中的［框架集］命令。
步骤2 根据需要在其子菜单中选择任意一个分割命令。
步骤3 若要删除一个子框架，将其边框拖至页面或其父框架之外即可。
填写实训总结，并上交实习报告。
剩余时间，可进行自主练习，内容不限，但不可违反上机纪律
任务二
创建框架集
完善报告
自主练习

.

精品文档
实训总结 本次实训学生需要的掌握的内容较多，对于框架布局的位置要准确掌握，难度较大






课题
知识目标
3.3添加动画 教学课时 2课时
1、掌握在网页中添加各种动态元素
2、掌握Flash属性设置
1、学会区分源文件和影片文件格式
2、掌握在网页中插入各种Flash元素
3、能为网页添加音视频元素。
通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。
教学目标
能力目标
情感目标
教学重点
教学难点
添加flash的具体操作

规划一个多媒体网站导航条

1.教学场所：多媒体教室
2.教学设备：安装有Dreamweaver cs5软件的计算机
3.教学资料：辅助课件、多媒体教学软件
讲解法、任务驱动教学法 学法
教学过程
小组讨论法
教学资源
教法
过程安排 教学内容
试想网页中只有文字和图片，那
么网页跟杂志报纸还有什么区别
呢？动态元 素能够更加丰富页面的
效果，是网页是一大特色。
注意：不要把动态元素和动态页面
划上等号。
一、flash文件基本知识
1、Flash源文件：*.fla
2、Flash影片文件：*.swf
二、添加flash动画文件
Flash动画是一种基于矢量格式的
多媒体动画元件，它体积小，其扩
教师活动
将本次课的作品
展示给学生，学生
在欣赏精美网页
的同时思考如何
完 成该作品
教授新知识，为任
务二的完成做准
备
学生活动
欣赏作品并思
考

设计意图
通过作品来展
示，引发学生
思考如何实
现，培养学生
积极思考问题
的能力
导入新课
(5min)
任务一
基本知识
(35min)



吸收动画新知
识
让学生吸收
新知识，为
后面的实例
操作打下基
础
.

精品文档





展名为.swf。
Flash动画被广泛应用于网页中。
操作步骤：
1.光标定位
2.插入flash文件
3.保存、预览
三、添加flash按钮
Dreamweaver中内置了一些flash
按钮，用 户可以很方便将他们添加
到网页中。
注意：在页面中添加flash按钮和
flash文本之前必须先保存网页。
操作步骤：
1.光标定位
2.插入flash按钮
3.设置按钮属性
4.保存、预览
四、添加flash文本
插入—媒体—Flash文本
五、为网页添加音频
插入—媒体—插件
要求：制作如下图所示网页，插入三行一列 表格，插入Flash动画要求动画大
小宽高为400*300，第二行插入图片，第三行输入文字并排 版，最后得到的结
果如下图所示：
任务二
拓展训练
(40min)

.

精品文档
课堂小结
(5min)
课后作业
(5min)
一、添加多媒体元素使页面具有动态效果
二、插入Flash按钮和Flashpaper
三、插入播放器
用Flash按钮或文本制作一个导航条，然后为页面添加背景音乐。
学生对动画、音视频有敏锐的触觉，学习起来颇有兴致。
教学反思





实训课题
实训目标
实训重点
实训难点
实训方法
实训准备
添加音频和视频 实训课时 2课时
7、 掌握插入表格、图片、背景图片设置
8、 掌握插入Flash文本、Flashpaper、Flash视频、背景音乐等
Flash属性、Flash元素
Flash元素
上机实训
教案、素材、案例、教材、计算机机房
19、 对照实习报告的要求，完成上机任务；
任务完成后及时要求教师考评；
完善实习报告，填写实训总结；
实训过程
实训要求
20、
21、
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。

操作要求及步骤
.

精品文档
要求：（利用DW cs3版本）
一、插入swf动画
1、 新建站点和默认图像文件夹
2、 新建网页文件，插入 1行2列的表格，表格宽度720px，边框粗细、表格
间距、表格边距都为0.选择第二个单元格设置 宽度为600px，高度设置为100px。然
后在第一个单元格插入，并且水平和垂直居中；在第二个 单元格里插入背
景图片（选择单元格——点击拆分——找到td——在td后空一格——选择
b ackground——选择图片插入），并将图片设置为宽高600px，100px。保存
3、 在第二个单元格插入005的Flash，并将Flash设置为宽高600px，100px
规格，并 设置Flash为透明
二、插入Flash按钮：
1、利用DW cs3版本插入导航栏： 插入一行一列的表格，宽度为720px，边框粗细、表格
间距、表格边距都为0，居中对齐。然后点击 插入Flash按钮，选择下图所示的按钮并输
入文字，如图所示：
任务
制作Flash网
页

2、然后在导航栏的下一行插入一行2列的表格，宽 度为720px，边框粗细、表格间距、
表格边距都为0，居中对齐。左边单元格设置为宽200px， 然后再嵌套一个表格，3行1
列宽度为100%，边框粗细、表格间距、表格边距都为0，居中对齐。右 边单元格插入一行
一列宽度为98%的单元格居中对齐，边框为1，颜色为#FF00FF，然后在此表 格中插入Flash
文本，字体为宋体，大小30px，输入文本：我的个性空间，颜色为#FF000 0，滚动颜色设
置为：#00FF00，另存为，如下图所示：

4、 插入Fla shpaper：首先在电脑上安装Flashpaper软件，然后将“”Word
文件转换为文件， 将文件插入到网页中，设置Flashpaper宽高分别为480
和400px
三、插入播放器
1、在左边的三个单元格范围中，将光标放入第一个单元格，点击插入媒体中 的图像查看
器，将Flash命名为abc，并将播放器设置为宽高180,135
.

精品文档
2、点击右边的Flash元素，对图片进行设置，选择选项ima geURLs（表示图片的位置），
选择你需要展播的图片，showControls（显示控制条） 设置为否，slideAutoPlay（自动
播放）设置为是，slideDelay（每张图切换停 留时间）设置为2，slideloop（循环播放）
是
3、在左边第二个单元格插入媒体— —插件，插入sound声音，设置插件高宽分别为180,41，
参数设置为，autostart false
4、插入背景音乐
完善报告 填写实训总结，并上交实习报告。
剩余时间，可进行自主练习，内容不限，但不可违反上机纪律
本次实训内容较多，网页添加音频和视频使得网页内容更加丰富多彩，学生兴趣较浓
自主练习

实训总结



课题 4.1编辑和创建AP DIV元素
1、掌握层的概念
2、掌握如何编辑AP DIV层
3、掌握层的嵌套
1、掌握层的基本操作。
2、能将层和时间轴联系起来制作漂浮效果
通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。
教学课时 2课时
知识目标
教学目标
能力目标
情感目标
教学重点 层的基本操作
.

精品文档
教学难点 层的高级应用
1.教学场所：多媒体教室
2.教学设备：安装有Dreamweaver cs5软件的计算机
3.教学资料：辅助课件、多媒体教学软件
讲解法、任务驱动教学法 学法
教学过程
小组讨论法
教学资源
教法
过程安排 教学内容 教师活动 学生活动
欣赏作品并思
考

理解AP DIV元
素并做好笔记














分组讨论教师
提出的两个任
务并提出解决
方案



设计意图
通过作品展
示，引出本次
课的主题
主要是以基本
知识讲解为
主，为任务二
的综合实例打
下理论基础











巩固任务一所
学的理论知识

导入新课
（5min）
层是一种HTML页面元素，可被放展示课前准备的
在页面的任意位置 ，在网页排版定层的叠加，引导学
位方面具有独特优势。 生思考：如何制作
这样的网页？
一、创建AP DIV元素
什么是Ap Div？
AP元素（绝对定位元素）, 是一种
HTML网页元素，一般称为 “层”。
即网页内容的容器，包含文本，图
像或 其他任何可以在HTML文档正
文中放入的内容。且可以精确定位
在网页中的任何地方。
二、编辑AP DIV元素
1、调整层的大小
2、层的层次关系
3、层的首选设置
4、层的对齐
三、制作如图所示的网页
强调重点：
1、作为容器，可
以放置其他网页
元素。
2、灵活定位。









分组让学生讨论
如何完成左图所
示的任务：
1、 如何制
作如图立体式
的叠加图片
2、 如何绘
制大小一致且
背景颜色为粉
色的图层？


任务一
基本知识
（20min）













任务二
综合实例
（25min）

.

精品文档
四、层的可见性设置
1、AP面板的使用（选择、命名、
隐藏、次序）
2、层的可见性
3、简单的层特效
任务三
（30min）
五、实例
将做好的效果图
演示给学生并要
求学生分组讨论
如何实现该要求
讨论并尝试操
作
巩固学生对行
为属性的理解
要求：在上述网页制 作的基础
上，将“网”“制”分别修改成
“开”“关”，并对其隐藏和显
示属性设置， 点击控制图片的
显示和隐藏

课堂小结
（5min）
一、如何创建AP DIV层
二、编辑AP DIV层
三、实例操作
制作如图所示的网页，提示：利用层的布局
课后作业
（5min）
< br>通过编辑和创建APDIV层来实现图片的立体感，丰富了网页内容，通过实例演示加深了学
教学 反思
生对ap层的认识





课题 4.2层的可见性设置 教学课时 2课时
.

精品文档
知识目标
教学目标
能力目标
情感目标
教学重点
教学难点
1、掌握AP层的创建与属性
2、掌握AP层的可见性操作
1、学会利用AP层制作立体效果网页
2、掌握AP层绝对定位应用
通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。
1、 层的基本操作
2、 层的应用及嵌套
AP元素
1.教学场所：多媒体教室
2.教学设备：安装有Dreamweaver cs5软件的计算机
3.教学资料：辅助课件、多媒体教学软件
讲解法、任务驱动教学法 学法
教学过程
小组讨论法
教学资源
教法
过程安排 教学内容 < br>前面所学的表格和图片都是二维
的，如何我们先建立了三个层，每
个层都有一个图片，他 们是层叠的
效果，现在要添加两个按钮，使得
我们点击一个按钮可以隐藏层，点
击另一 个按钮可以显示层，这是怎
么做的呢？
一、AP元素面板
1、层的可见性
2、防止层重叠

教师活动
展示三维图片效
果
学生活动
欣赏作品并思
考

设计意图
通过作品来展< br>示，引发学生
思考如何实
现，培养学生
积极思考问题
的能力
导入新课
(5min)
任务一
基本知识
(20min)
任务二
拓展训练
(55min)
让学生吸收
新知识，为
后面的实例
操作打下基
础
二、制作 如下图所示的网页效果：引导学生运用行分组讨论如何
培养学生积
要求点击“隐藏”时，hom e隐藏；为来实现 实现该功能
极创新及小
点击“显示”时，home显示
组沟通能力
















操作步骤如下所示： 学生分组讨论后推荐代表完成
激发学生自
1、 如图所示是先建立两个按钮，得出结论，并指派实例
学能力
演示 观看教师演示
一个是“隐藏”一个是“显示” 一名代表尝试完
.

精品文档
2、 鼠标点击想要隐藏的曾，然后
我们在属性栏，将可见性设置
为hidden，也就是隐藏层
3、 在窗口菜单中，打开行为窗口
4、 选中“显示”按钮，在行为窗
口，点击添加按钮，在打开的
菜单中，选择【显示-- 隐藏元
素】
5、 打开显示隐藏元素对话框，选
择刚才隐藏了的那个曾
ap div4，点击下面的显示按钮。
然后点击确定
6、 接着选中隐藏按钮
7、 在行为窗口点击添加按钮，然
后选择【显示隐藏元素】
8、 在打开的对话框中，选中
apdiv4，点击下面的隐藏，然
后点击确定按钮。
9、 预览
课堂小结
(5min)
课后作业
(5min)
1、 AP元素面板
2、 隐藏和显示行为
成实例，并进行补
充







制作立体三维网页效果，并添加显示和隐藏行为
通过运用层的隐藏显示属性及事件onclick的灵活运用，制作常见特效，学生较感兴趣，
教学反思
较好。





实训课题
实训目标
实训重点
实训难点
DIV与表格的转换 实训课时 2课时
9、 能掌握布局表格和布局单元格的基本操作。
10、 能在布局模式下对页面进行整体布局。
掌握布局表格和布局单元格的基本操作。
项目的实现
.

精品文档
实训方法
实训准备
上机实训
教案、素材、案例、教材、计算机机房
22、 对照实习报告的要求，完成上机任务；
任务完成后及时要求教师考评；
完善实习报告，填写实训总结；
实训过程
实训要求
23、
24、
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。

操作要求及步骤
步骤1 选择［文件］菜单栏中的［新建］命令，创建一个新的页面，并将其命名为“个
人主页”。
步骤2 选择［插入］工具栏中［布局］任务栏中的［框架］命令，单击按钮，选择下
拉菜 单的“顶部和嵌套的左侧框架”命令。
步骤3 弹出［框架标签辅助功能属性］对话框，将网页中框架的各个部分进行命名。
步骤4 选择［窗口］菜单栏中［框架］命令。
步骤5 右侧的面板中就加入了［框架］面板，选中“topFrame”框架进行编辑。
步骤6 页面下方出现了“topFrame”框架的［属性］面板。对“top Frame”框架进
任务一 行编辑。 步骤7 选中“mainFrame”框架进行编辑，页面下方出现了“mainFrame”框
利用框架排版 架的［属性］
面板，对“mainFrame”框架进行编辑。
步骤8 选中“leftFrame”框架进行编辑，页面下方出现了“leftFrame”框架的［属
性］面
板，对“leftFrame”框架进行编辑。
步骤9 选择［文件］菜单栏中的［保存全部］命令，对文件进行保存。
步骤10 弹出保存整体文件的对话框，为文件命名为“”。
步骤11 对各个框架部分进行保存，为各个框架进行命名。
步骤12 单击F12，在浏览器中预览效果。
创建框架集，可以自己设计，也可以从预定义的框架集中选择，还可以修改一个已存
在的Dre amweaver文件来创建。
实验内容：
步骤1 选择［修改］菜单栏中的［框架集］命令。
步骤2 根据需要在其子菜单中选择任意一个分割命令。
步骤3 若要删除一个子框架，将其边框拖至页面或其父框架之外即可。
填写实训总结，并上交实习报告。
剩余时间，可进行自主练习，内容不限，但不可违反上机纪律
本次实习内容较多，操作性较强，学生需加强练习

任务二
创建框架集
完善报告
自主练习

实训总结
.

精品文档



课题
知识目标
教学目标
能力目标
情感目标
4.3晃动的图片 教学课时 2课时
1、理解行为、事件、动作的概念
2、掌握添加行为应用实例
1、学会区分源文件和影片文件格式
2、应用行为
通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。
教学重点
1、行为面板使用
2、常见事件OnMouseOver 鼠标经过OnMouseout 鼠标离开OnLoad 打开 OnUnload关闭
3、设置文本
行为面板使用
1.教学场所：多媒体教室
2.教学设备：安装有Dreamweaver cs5软件的计算机
3.教学资料：辅助课件、多媒体教学软件
讲解法、任务驱动教学法 学法
教学过程
小组讨论法
教学难点
教学资源
教法
过程安排 教学内容
1、 如何制作弹出信息窗口？
2、 如何制作晃动图片？
3、 如何制作弹出窗口？
一、晃动的图片
1）什么是行为？
“行为” 可以说是Dreamweaver
中最具特色的功能之一，它提供了
很多实用的动作，每个动作 可以完
成特定的任务，为网页添加不少特
殊效果。
二、行为面板的使用1、
1、打开行为面板（快捷方式：
Shift+F4）
2、认识行为面板
教师活动
演示弹出信息、晃
动图片、弹出窗口
网页，激发学生兴
趣
讲解基础知识并
强调重点
学生活动
欣赏教师的展
示并分组讨论
如何实现？

听讲并做好笔
记
设计意图
通过效果展示
激发学生兴趣 导入新课
(5min)
任务一
基本知识
(20min)












.
为任务二实
例制作打下
基础

精品文档
















显示设置事件
显示所有事件
添加行为
删除事件
移动事件顺序
命令控制菜单







三、设置文本行为
1 、 状态栏文字
2、设置文本域文字（注意使用动作
的对象必须要有个ID）
三、实例制作
1、制作晃动图片，鼠标经过时（onmouseover）晃动，鼠标离开后 （onmouseout）不晃动
技巧：添加行为的时候一般遵循3个步骤：
选择对象
添加动作
调整事件
2、制作弹出窗口（利用添加行为里的打开浏览器窗口）
3、制作弹出信息，弹出信息为“欢迎访问本站点”，事件为onload
4、设置文本行为

一、弹出文字信息
二、制作弹出窗口
三、制作晃动图片
四、设置文本行为
网上搜索弹出信息网页及广告窗口，研究如何制作
本次主要应用行为制作晃动的图片的效果， 操作较容易，学生掌握较好，但是事件onclick
教学反思
和onmouseover及onmouseout的掌握学生待加强。
任务二
拓展训练
(55min)
课堂小结
(5min)
课后作业
(5min)






实训课题 交换图像 实训课时 2课时
.

精品文档
实训目标
实训重点
实训难点
实训方法
实训准备
11、
12、
掌握AP元素面板的使用
理解原始档图像和交换图像概念
1、 表格的布局
2、 图像交换设置
图像交换
上机实训
教案、素材、案例、教材、计算机机房
25、 对照实习报告的要求，完成上机任务；
任务完成后及时要求教师考评；
完善实习报告，填写实训总结；
实训过程
实训要求
26、
27、
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。

操作要求及步骤
一、新建站点和默认图像文件夹
二、交换图片实训
1、 新建网页“”将页面背景设置为黑色
2、 插入2行1列宽度为700px的表格，边框粗细0，边距10，间距0
3、 在第一行插入图片图片并居中，并将图片的ID命名为pm
4、 在第二行里再嵌套一个一行三列的表 格，宽度为100%，边框粗细0，边距10，间距0，
背景为灰色，然后分别插入教师所给素材、、， 并将素材都设置
宽高为200,30
5、 选择并将其添加行为——交换图像，如下图所示：
任务
交换图像

6、 同理，将、添加行为，保存预览
完善报告 填写实训总结，并上交实习报告。
剩余时间，可进行自主练习，内容不限，但不可违反上机纪律
自主练习

.

精品文档
实训总结 本次实训室交换图像，主要是一个小项目的制作，通过项 目的制作让学生深刻理解交换图
像的应用，较好。





实训课题
实训目标
实训重点
实训难点
实训方法
实训准备
13、
14、
拼图游戏
熟悉AP元素面板
掌握添加拖动AP元素
实训课时 2课时
拖动AP元素面板
项目的实现
上机实训
教案、素材、案例、教材、计算机机房
28、 对照实习报告的要求，完成上机任务；
任务完成后及时要求教师考评；
完善实习报告，填写实训总结；
实训过程
实训要求
29、
30、
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。

操作要求及步骤
三、拼图游戏实训
1、 新建网页，将页面背景设置为图片
2、 绘制AP DIV层，宽高分别为220,220，背景颜色为#FFCCFF
3、 另外绘制四个AP DIV层，宽高分别为110，110，背景颜色为#FFCCFF，并将教师准备
的素材、、、4jpeg分别插入四个层
4、 利用辅助线将层对齐
5、 将四个层分别移动到大层里，将花朵拼凑整齐，如图所示
任务一
拼图游戏
.

精品文档

6、 分别将四个小层添加行为——拖动ap元素，设置如图所示：

7、四个小层都设置完成后再将小层拖出大层，顺序打乱，保存
完善报告 填写实训总结，并上交实习报告。
剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 本次课通过拼图游戏的制作，让学生深刻理解AP层在DW的应用，运用AP属性设置不同
的效果， 较好。




课题 4.4修改属性特效及动态菜单制作 教学课时 2课时
自主练习

实训总结
知识目标
教学目标
1、掌握表格布局页面
2、掌握改变属性
3、掌握行为“显示-隐藏”的正确操作
1、学会利用不同行为制作网页效果
2、应用改变属性
通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。
能力目标
情感目标
教学重点
1、常见事件OnMouseOver 鼠标经过OnMouseout 鼠标离开
2、AP元素隐藏显示
.

精品文档
教学难点 属性高height、宽width的设置
1.教学场所：多媒体教室
2.教学设备：安装有Dreamweaver cs5软件的计算机
3.教学资料：辅助课件、多媒体教学软件
讲解法、任务驱动教学法 学法
教学过程
小组讨论法
教学资源
教法
过程安排 教学内容
1、 百度搜索图片时鼠标经过图片
时图片经常会自动放大，如何
实现？
2、 导航栏如何制作？
教师活动
演示图片放大及
导航栏效果并引
导学生思考
学生活动
欣赏教师的展
示并分组讨论
如何实现？

设计意图
通过效果展示
激发学生兴趣 导入新课
(5min)
一、 如何制作 如下图所示效果网页？（具体要求：当鼠标经过图片时图片自动放大；当
鼠标离开图片时图片缩小到原来 大小）
任务一
修改属性特效
(35min)











操作步骤如下：
1、 新建网页，页面背景颜色为浅灰色
2、 插入3行3列的表 格，合并第一行，并将第一行设置为深灰色，输入“索尼s630款
图片”，居中对齐，字体大小为24 ，紫红色，黑体
3、 在第二行第三行分别插入图片、、、、、，
并将图片设置为宽高分别为 200,120，并将图片ID分别更改为p1…p6
4、 给p1添加行为- 修改属性-，修改的宽高值如下图所示：

.

精品文档

5、同理修改p2….p6
二、 动态菜单制作
1、 新建页面里绘制一个AP DIV层，背景颜色为#FF33FF在层里插入一行4列的表格，
宽度为100%，边框，边距，间距 都为0
2、 分别在表格里输入“新闻中心”、“娱乐频道”、“电脑网络”、“技术支持”，选中< br>行设置行高25px，居中对齐
3、 AP DIV层设置行高为25px，并将层重新命名为dhl
4、 在新闻中心下面再绘制一个AP DI V层，并将层重命名为menu1，设置背景颜色为
#FCF，在层里插入4行一列的表格，宽度设置为 100%，边框，边距都为0，间距
为3，输入文字国际新闻、国内新闻、体育新闻、英语新闻
5、 将“新闻中心”添加行为显示-隐藏，事件onmouseover，如下图所示
任务二
动态菜单制作
(40min)

6、 同理，添加行为显示-隐藏，事件onmouseout
7、 将menu1层跟dhl层靠在一起，给menu1同样添加显示-隐藏行为
课堂小结
(5min)
课后作业
(5min)
五、修改属性特效（宽width、高height、边框border等）
六、制作动态菜单栏（AP元素）
搜索百度图片及观察网页导航栏并对照教师上课内容 本次课通过修改属性特效掌握图片宽高的设置，理解图片大小改变效果。通过动态菜单栏
教学反思
的制作，灵活运用AP层。

.

精品文档





湖 南 省 商 业 技 术 学 院

学 期 授 课 进 度 计 划
（ 二 年级 第 一 学期）
课程名称 网页制作与设计
适用班级 16高21、22
制定教师 易会芝

审 批 签 字
教研室主任
教务科长
教务院长






年 月 日
年 月 日
年 月 日
2017-2018 学年第 一 学期制定




.

精品文档


课 时 分 配
授 课
周课时
周 数 总课时
讲 课

实 验 复习考试 机 动

授 课 其 中
23









期 末 完 成 情 况
计 划
课 时

教 学 截 至
章 节 内 容
备注：用蓝黑或碳素墨水钢笔填写






完 成
课 时


超 出 或 缺 少 课 时
超 出

缺 少

弥 补
.

精品文档
教 学 计 划
学
情
分
析

本门课程《网页设计与制作》的教学班级为14 级计算机班，计算机班对网络知识
有一定的了解，基础知识较好，同时根据实际情况，特拟定本计划。
大
纲
要
求




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




教
学
难
点




教
学
方
法




讲授法、演示 法、项目教学法、合作学习、对话、任务驱动法、头脑风暴、小组讨
论法等教学方法。



.

精品文档
学 期 授 课 进 度 计 划 表
周次
3


4


5


6


7
8


9


.
授 课 内 容
1.1网站基础知识
1.2网站建设概述
实训 新建一个网页
2.1添加和编辑文本
实训 网站素材处理
实训 制作简单网页






国庆放假
2.2添加和编辑图像
2.3创建超级链接
实训 图像处理和创建超级链接
实训 跳转菜单
2.4使用表格布局页面
实训 表格布局实例分析
课时
2
2
2
2
2
2






6
6
2
2
2
2
2

备 注
1、2周新生军训


上机
上机
上机






机动补周一课


上机
上机

上机

精品文档
10


2.5使用框架布局页面
运动会
运动会
2


2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2

充周三到周五

上机


上机

上机
上机

上机
上机

11 实训 框架布局实例分析
3.3添加动画
添加音频和视频
12


13


14


15


16
实训 DIV与表格的转换
4.3晃动的图片
实训 交换图像
实训 拼图游戏
4.4修改属性特效及动态菜单制作
实训 效果行为应用
实训 图片展播实例
5.1认识和编辑CSS
实训 美化页面
实训 应用CSS到网页中
5.2类型、背景和区块样式
实训 方框、边框和导航栏
实训 超链接样式及设置技巧
上机
上机

上机
上机

.

精品文档
学 期 授 课 进 度 计 划 表


17


18


19


20


21


22
6.1DIV布局页面
6.2认识Spry
实训 调整样式
6.3选择服务器和使用虚拟机
6.4申请域名
实训 网站发布
7.1个人主页制作
7.2策划构思及设计流程
实训 页面布局
7.3制作页面头部
7.4制作中间表格内容
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
6




上机


上机


上机


机动
充周一课






元旦放假






复习考试
教研组

意见

.

精品文档


课题 1.1网页制作基础知识
知识目标
教学目标 能力目标
情感目标
教学重点
教学难点
网页的组成
网页的分类，网址与域名的区分
1.教学场所：多媒体教室
2.教学设备：安装有Dreamweaver cs5软件的计算机
3.教学资料：辅助课件.多媒体教学软件
讲解法、任务驱动教学法 学法 小组讨论法
能了解网页制作软件的特点
能掌握网页制作的基本概念
提高学生团结合作精神，提高学生竞争意识
教学课时 2课时
教学资源
教法
教学过程 课前准备 导入新课 讲授新课 动手实践 课堂小结 作业布置
时间分配 5 10 50 15
教学过程
5 5
过程安排 教学内容
1、教师自我介绍；
2、点名；
3、课程介绍
4、课堂要求

教师活动
1.自我介绍
2.按照花名册点
名
3.课程介绍
4.统计学情
5.提出期望与要
求
学生活动
1.班长统计座
次表
2.学生自我介
绍
3.反应学情
4.推荐课代
表。

学生之间相互
讨论，加深对网
页设计的认识

设计意图
使师生尽快互
相认识，并促
使学生答题了
解我们的课
程。
课前准备
导入新课

本次课是本学期第一次上课，简单以提问的方式了
介绍本课程： 解学生对网页设
1、网页设计相关级别及其薪资待遇 计的认知
2、网页设计的就业方向及其公司类
型
提问跟就业和
薪资有关的问
题，抓住学生
注意力。
.

精品文档
任务一
讲授新课

简单介绍网页知
识
1、网站是企业向用户和网民提供信

息（包括产品和服务）的一种方式，


是企业开展电子商务的基础设施和

信息平台，离开网站去谈电子商务


是不可能的。

2、企业的网站被称为“网络商标”，


也是企业无形资产的组成部分，而

网站是Internet上宣传和反映企业


形象和文化的重要窗口。

提问：网页设计要
二、网页设计的要点
点并将学生分组
1、明确建站目标和需求。
进行讨论

2、网站主题鲜明。

3、网站版式设计。


4、色彩在网站设计中的作用。

5、网站设计形式与内容统一。

讲述网站设计级
三、网站设计级别
别，引导学生对这
1、新手入行
个行业向往，并鼓
励学生向大师阶
2、跳槽阶段
段努力
3、稳定阶段


4、大师阶段

四、网页设计公司类型
简单介绍学生将
来从事本行业的
1、门户游戏类
范围
2、企业部门类


3、网站建设类

4、互动设计类


五、网页三剑客
介绍网页制作需
1、 Dreamweaver：
要的软件

可视化页面设计、网站管理

一、网页设计介绍
吸收新知识并
思考生活中常
见网页设计知
识











分组讨论，并派
出代表来总结







思考自己的定
位






了解本行业的
现状






认识软件基本
组成


讲述基础知
识，为后面学
习打下基础












加强学生之间
交流沟通能
力，加深学生
对网页设计要
点理解




引导学生了解
这个行业






引导学生了解
本行业从事范
围





提前引导学生
认识
dreamweaver
cs5 为后面软
.

精品文档
2、 Fireworks
页面图象设计工具
3、 Flash
动画制作
六、网页基础知识
1、网页与网站的区别
（1）网页是WWW系统中信息的基本
单位，简单来说，就是后缀名为htm
的文件。
（2）网站是指存放在网络服务器上
的完整信息的集合体。
2、网页的组成
（1）文字：最直接、通用、容易的
沟通方式
（2）图片：网页的一大特点——图
文并茂
（3）动画：1995年，Sun公司开 发
了Java语言，用户可以创建能调用
图片和声音的多媒体应用小程序
（4）超链接 ：要通过一种方式把各
独立的网页整和在一起，使之构成
一有机整体，而这种链接页面的功能叫超链接。
（5）特殊组件：图片与动画可算是
最常见的特殊组件。
3、主页Homepage
引导访问者浏览网站。
index、main、default
4、网页空间






给学生灌输网页
设计的基本知识







做笔记，识记教
师讲述的知识
件学习打下基
础




这些知识都是
学网页设计最
基本的基础知
识，学生基础
知识薄弱，必
须了解这些才
能学习后面的
内容
.

精品文档
在Internet上申请的一个存储空
间，用以存放网页。
5、网址和域名
网址：IP地址
域名：与IP地址相对应，唯一性，
善于识别
最右边：国家（中国——cn）
其次：机构（商业机构——com）
再次：子网名称
最左边：服务器类别（web服务器—
—www）
6、网页的分类
静态页面与动态页面
7、认识网站
门户网站：sina
个人网站：明星
专业网站：医疗
职能网站：政府

任务二
动手实践

根据网页设计要点，以小组为单
位确定一个网站主题，小组讨论
需要的步骤以及素材
1、 按照课堂分组课后进行讨论
2、 每组确定一个网站主题方向。
3、 每组设计一个网站调查问卷。
一、网页设计师就业方向
课堂小结
二、网站设计流程
三、常见网站
巡回指导，给予学
生帮助

小组讨论，相互
沟通



加深学生对网
页设计要点学
习


课后作业
.

精品文档
本次课是网页设计第一次上课，主要讲述一些网页基础知识，学生基 础知识薄弱，需要加
教学反思
强，整体来说计算机班基础知识要好于电子商务班
一、网页设计介绍
二、网页设计的要点
三、网站设计级别
板书
四、网页设计公司类型
五、网页三剑客
六、网页基础知识






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

精品文档
课前准备
1、搜集了解网站开发的基本流程。 配合学生搜索资
2、网站设计、制作过程中的一些原料及解答疑问
则、注意事项。
网站设计大致流程是哪些？每组派
出一个代表阐述本组课前搜集的资
料
一、网站设计流程










二、网站开发原则
1、 确定主题
讨论：网站是靠什么赢利的？
2、规划站点结构
（1）结构设计
1、确定网站主题
的建议
2、给网站取名
3、提示决定网站
的性质
网站上传
网站推广
更新维护
网页制作
整合网站
效果测试
架构内容信息
搜集整理资料
规划网站结构
网上搜索教师
提出问题，了
解网站设计事
项
阐述观点，组员
之间相互讨论








培养学生自主
学习能力
导入新课
(5min)
任务一
讲授新课
(35min)
听取学生的观点
并给予一定的知
道






锻炼学生的语
言表达能力和
分析能力






小组讨论，相互
沟通


加深学生对网
页设计要点学
习


任务二
分组讨论
(40min)
（2）目录结构设计
（3）形象设计
（4）主页设计
（5）其他页面设计
（6）企业站点设计
（7）为站点设计目标对象
访问率

.

精品文档
三、网页版面布局设计
1、版面布局的原则
（1）主次分明、中心突出
（2）大小搭配、相互呼应
（3）图文并茂、相得益彰
（4）动静适度、平衡对称
2、页面布局的类型
（1）“国”字型
（2）框架型
（3）标题正文型
（4）封面型
（5）综合型
四、规划站点
1、建立站点目录
2、站点规划
规划站点结构是利用不同的文
件夹将不同的网页内容分门别类的
保存。
3、创建导航草图
五、搜集素材
1、搜集并制作素材
无论是文字素材还是图片、动画素
材，都应注意其来源是否注明版权
所有。
网站素材要为网站主题服务。
2、整理素材
原始素材、编辑处理好的素材
3、命名规范
六、创建站点
.

精品文档
1、不使用服务器技术
2、本地编辑
3、不连接到远程服务器
七、管理站点
（1）编辑现有站点
（2）删除已有站点
课后作业
(5min)
根据这次课的内容、注意事项，构思一个明确的网站主题，并将站点结构的规划 用文件夹
表示出来
一、网站设计确定主题
课堂小结
(5min)
二、网站设计流程
三、站点管理
本次主要讲述站点的建立和管理，课程较简单，学生掌握较好
教学反思
一、网站设计流程
二、网站开发原则
三、网页版面布局设计
板书 四、规划站点
五、搜集素材
六、创建站点
七、管理站点




实训课题
实训目标
实训重点
实训难点
.
新建一个网页
1、 熟悉Dreamweaver cs4界面
2、 制作简单网页
1、 学会在网页中输入文字、插入图片等
2、 掌握简单代码的编写
代码的编写
实训课时 2课时

精品文档
实训方法
实训准备
上机实训
教案、素材、案例、教材、计算机机房
1. 对照实习报告的要求，完成上机任务；
实训要求
2. 任务完成后及时要求教师考评；
3. 完善实习报告，填写实训总结；
遵守实训纪律，不游戏，不睡觉，不高声谈论。
实训过程
内容
操作要求及步骤
1、 双击打开软件——新建HTML网页——网页名字为nes01——输入以下文字然后保存
任务一
新建网页1

2、文字要求：标题 宋体 二号 蓝色 正文：五号 宋体 加粗
任务二
新建网页2
制作如下网页 素材见文件夹 网页命名文字为index 保存在文件夹中上交给老师
.

精品文档

操作步骤：新建 HTML网页——输入文字——将标题设置为36号，蓝色，宋体——插入两
根红色的水平线——插入时 间——插入商标——插入背景图片——保存
完善报告 填写实训总结，并上交实习报告。
剩余时间，可进行自主练习，内容不限，但不可违反上机纪律
本次课是学生第一次上机，制作 一个较简单的网页，学生存在对DW界面不熟，操作不熟
练等缺点，需加强操作
自主练习

实训总结




课题 2.1编辑和添加文本
知识目标
教学目标
能力目标
情感目标
教学重点
教学课时 2课时
1、 掌握输入和编辑文本
2、学会插入文本，掌握设置文本格式的方法
掌握网页中三种常见列表的创建，及其各自的特点
提高学生自主学习和团队竞争意识
插入和编辑文本
.

精品文档
教学难点 创建列表
1.教学场所：多媒体教室
2.教学设备：安装有Dreamweaver cs5软件的计算机
3.教学资料：辅助课件.多媒体教学软件
讲解法、任务驱动教学法 学法
教学过程
小组讨论法
教学资源
教法
过程安排 教学内容
提问：在DW中输入文本和在Word中
输入文本有何区别？
教师活动
将学生分组，并提
出问题，引导学生
小组之间讨论并
总结
演示并强调重点
学生活动
讨论并思考

设计意图
以讨论的形式
提高学生之间
的交流沟通


文本插入是基
础知识，为下
面任务二打下
基础



导入新课
（5min）
任务一
插入文本
(20min)
一、插入文本
1、 插入普通文本
2、 插入不换行空格
3、 插入水平线
4、 插入日期和特殊字符
二、编辑文本
1、基本样式设置
2、设置段落格式
3、创建列表
完成以下网页实例：
认真听讲并记
下重点
1、 引导学生讨论
该网页由哪几
部分组成
2、 引导学生小组
组内分工，完
成小模块
小组讨论 本实例即是对
任务一的巩
固，也为下一
次课打下基础
任务二
(55min)

作业布置
.
1、 找一篇文章输入至页面中，然后利用所学知识，对其进行格式编排

精品文档
（5min）
一、插入文本
二、编辑文本
一、插入文本
5、 插入普通文本
6、 插入不换行空格
7、 插入水平线
8、 插入日期和特殊字符
二、编辑文本
1、基本样式设置
2、设置段落格式
3、创建列表
三、实例操作
本次课是 一个基础知识内容，文本是一个网页必不可少的内容，对网页设计至关重要，
教学反思
学生必须牢牢掌握文本的各个要点。目前来说学习兴趣较好。
课堂小结
（5min）
板书



实训课题
实训目标
实训重点
实训难点
实训方法
实训准备
网站素材处理
1、 掌握创建本地站点和远程站点
2、 学会修改站点和多站点的管理
站点的管理
站点的管理
上机实训
教案、素材、案例、教材、计算机机房
1、 对照实习报告的要求，完成上机任务；
实训要求
2、 任务完成后及时要求教师考评；
3、 完善实习报告，填写实训总结；
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。
.
实训课时 2课时

精品文档
实训过程
内容
操作要求及步骤
1、熟悉DW界面
2、在D盘根目录创建一个站点名称为《我的足球网》，本地站点文件夹为 jcwww，如下图
所示
任务一
创建站点

任务二
设置默认图像
文件夹
完善报告
利用教师所给素材，制作简单网页《我的偶像》，素材见文件夹
填写实训总结，并上交实习报告。
剩余时间，可进行自主练习，内容不限，但不可违反上机纪律
本次上机主要是让学生掌握站点 的建立及输入文本和编辑文本等，学生操作较好，大部分
能完成任务。

自主练习

实训总结


实训课题 制作简单网页
1、 掌握新建网页、编辑文字、处理图像
2、 新建站点
3、 插入水平线、空格、自动更新时间
制作简单网页流程
综合运用HTML工具
上机实训
教案、素材、案例、教材、计算机机房
实训课时 2课时
实训目标
实训重点
实训难点
实训方法
实训准备
.

精品文档
4、 对照实习报告的要求，完成上机任务；
实训要求
5、 任务完成后及时要求教师考评；
6、 完善实习报告，填写实训总结；
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。
实训过程
内容
操作要求及步骤
1、 熟悉DW菜单栏常用界面
2、 完成以下简单网站，素材见素材库
任务一
足球偶像网页

完善报告 填写实训总结，并上交实习报告。
剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 本次上机内容较多，主要考察学生综合性的练习，如图片的插入，文字的编辑及水平线的
插入等，需 要学生对前面的知识非常熟悉，13高12班整体班级学习氛围较好，所有学生
都能按时上交作业，值得 表扬
自主练习

实训总结


课题 2.2添加和编辑图像
知识目标
教学目标
能力目标
教学课时 2课时
1、 掌握图像裁剪、重新取样、亮度、锐化的设置
2、掌握图像属性设置
掌握运用软件对图像处理的能力
.

精品文档
情感目标
教学重点
教学难点
图像的编辑
图像的编辑
提高学生团结合作精神，提高学生竞争意识
教学资源
1.教学场所：多媒体教室
2.教学设备：安装有Dreamweaver cs5软件的计算机
3.教学资料：辅助课件.多媒体教学软件
讲解法、任务驱动教学法 学法
教学过程
小组讨论法 教法
过程安排 教学内容
前面介绍网页的时候有 说过，在保
证画质的情况下，图片的数据量越
小越好。问题：如果一张图片数据
量很大 ，我们该如何编辑？
教师活动
演示
这张图片，分析数
据量为93k、 画质
为1024*768规格
的图片如何更改
数据量和规格？


对图片宽、高、裁
切、重新采样、锐
化等设置进行演
示

学生活动
分组讨论用什
么方法来更改
数据量和规格
设计意图
提出问题引发
学生思考，引
出这次课的主
题 导入新课
(5min)
任务一
编辑图片
(30min)











给出和两张图片
进行对比，提出任务：如何从
变化到？
具体操作步骤：打开DW软件——插
入图像，对图片属性设置
如下目标值：
观看教师演示，
并思考
变成
的方
法
引导学生学习
理论的时候思
考如何理论运
用到实践

编辑完成后与原图像进行对比，会
发现数据量、规格都发生变化，但
浏览网页更友好
.

精品文档
概念：在网页浏览中，有时当鼠标
移到某个图 像上或者单击时，图像
会变成另外一副图像。
浏览时效果：
任务二
制作翻转图像
(50min)


鼠标放上去时效果：
1、 鼓励学生小组
讨论如何完成
翻转图像效
果；
2、 给学生展示翻
转图像做出来
的效果，然后
讲解如何
才能完成这个
效果



小组讨论如何
完成该效果并
进行尝试


课堂小结
(5min)
一、如何编辑图像
二、制作翻转图像效果
一、编辑图像
1、 重新采样
板书设计
2、 裁剪、锐化
二、翻转图像制作效果
本次教学学生较感兴趣，特别是鼠标经过的图像，学生完成得较好，值得鼓励
教学反思




课题
教学目标
.
2.3创建超级链接
知识目标
教学课时 2课时
1、 掌握创建超链接的方法
2、 掌握相对链接和绝对链接的区别

精品文档
3、 创建锚点链接
能力目标
情感目标
教学重点
教学难点
提高学生学习创作能力
提高学生团结合作精神，提高学生竞争意识
1、 正确认识路径
2、 理解相对链接和绝对链接的区别
添加超链接、相对路径、绝对路径
1.教学场所：多媒体教室
2.教学设备：安装有Dreamweaver cs5软件的计算机
3.教学资料：辅助课件.多媒体教学软件
讲解法、任务驱动教学法 学法
教学过程
小组讨论法
教学资源
教法
过程安排 教学内容
每次浏览网页的时候点击某个文字
或者图片，能自动跳转到另一个页
面，提 问：这样的链接形式叫什么？
如何实现？

教师活动
进入新浪网给学
生演示超级链接
的效果并进行提
问
给学生演示如何
插入链接；演示不
同目标新建窗口
的区别


学生活动
观看效果并讨
论如何才能实
现该效果
设计意图
以提问且学生
较熟悉的浏览
网页的方式吸
引学生的注意
让学生熟悉
DW添加超级
链接的界面






正确理解相对
链接和绝对链
接，为下面的
学习打下基础


锚点链接应用
比较广泛，学
生需要掌握并
应用
导入新课
(5min)
一、新建站点jcww，并在站点内新
建默认图像 文件夹images，将网页
里的“我与足球”链接
到，目标为- blank；“足
任务一
球新闻”链接到“逢入京使.HTML”，
创建超级链接
目标为-new；“足球明星”链接到“我
（20min）
与足球网.HTML”，目标为-self。
二、对比每个目标不同，网页新建
窗口不同并进行总结
区别：
相对链接是 指链接的地址是本站点
之内的对象；绝对链接是指链接的
地址是远程对象，用域名或IP作为< br>地址

一、概念：在本页进行链接的叫做
锚点，一般在长篇的文章或技术文< br>档中是使用，链接到某个特殊的段
落。
观看教师演示，
并思考- new、
-blank、-self
几个目标值窗
口的区别


任务二
相对链接和绝
对链接
(20min)


任务三
锚点链接
(35min)
演示教材P60实
例




演示如何插入锚
点链接
思考并正确理
解相对链接和
绝对链接概念



观看教师演示
并思考锚点链
接的应用
.

精品文档
二、打开第4章
网页，演示锚点链接效果

课堂小结
(5min)

作业布置
(5min)
一、页面与页面之间的超链接
二、相对链接和绝对链接
三、锚点链接（本页之间链接）
一、网上查找哪些页面常用页面与页面链接，哪些是用锚点链接并总结
二、利用教材第4章的素材，自己动手创建锚点链接
三、创建超级链接的方法与步骤
板书
四、相对链接和绝对链接
五、创建锚点链接
本次课主要介绍超链接 的常用方法，超链接在学生上网中随处可见，较易理解，学生之间
教学反思
的讨论也非常激烈，较好。


实训课题 图像处理和创建超链接
3、 学会利用DW处理图像
4、 掌握创建超级链接的方法
5、 理解相对链接和绝对链接概念
1、 图片处理
2、 超级链接
超级链接的使用
上机实训
教案、素材、案例、教材、计算机机房
7、 对照实习报告的要求，完成上机任务；
实训要求
8、 任务完成后及时要求教师考评；
9、 完善实习报告，填写实训总结；
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。
.
实训课时 2课时
实训目标
实训重点
实训难点
实训方法
实训准备

精品文档
实训过程

任务一
处理图像
操作要求及步骤
1、 将图片修改为尺寸为240*1 60，数据量设置为8K左右（6-11k都可以）并进
行裁剪和锐化等设置，熟悉图片处理几个设置， 设置完成后以网页的形式保存，保存
在文件夹中，保存名称为“”
2、 将教师发送的网页进行编辑，将“我与足球”四个字链接到“我与足球
网.html”，目标为- self；将“足球新闻”四个字链接到“逢入京使.html”， 目标为
-blank；将“足球明星”四个字链接到“”， 目标为-new。
3、 修改页 面属性：在页面属性对话框中，设置链接选项中的大小为16像素，链接颜色
为“#6666cc”，变 换图像颜色为“#ff6600”，已访问链接为“#663366”，活动链接为
“#99cc00” ，下划线样式为“仅在变换图像时显示下划线”。设置的对话框如下图所
示：
任务二
超级链接
完善报告 填写实训总结，并上交实习报告。
剩余时间，可进行自主练习，内容不限，但不可违反上机纪律
本次实习内容较多，大部分学生能在规定时间内完成任务，较好。

自主练习

实训总结


实训课题 跳转菜单
6、 掌握图像热点链接的使用
7、 掌握脚本链接
8、 掌握链接检查器的使用
路径的正确使用
链接的运用及链接检查器的使用
实训课时 2课时
实训目标
实训重点
实训难点
.

精品文档
实训方法
实训准备
上机实训
教案、素材、案例、教材、计算机机房
10、 对照实习报告的要求，完成上机任务；
任务完成后及时要求教师考评；
完善实习报告，填写实训总结；
实训过程
实训要求
11、
12、
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。

操作要求及步骤
在地图中创建热点链接
任务一
创建图像热点
链接

打开网页，在如下图所示的位置插入图片，图片为“鼠 标经过的图片”，链接
到本页的“冠军杯新闻”处（提示：利用锚点链接）
打开“”网页，在 下载资源文本中将教师提供的“”放入站点，做成
的效果是点击“下载资源”就能下载“”，同理在“联 系我们”中设置邮件下载
任务二
制作跳转菜单

完善报告 填写实训总结，并上交实习报告。
剩余时间，可进行自主练习，内容不限，但不可违反上机纪律
本次实习内容较多，大部分学生能在规定时间内完成任务，较好。

自主练习

实训总结






.

精品文档

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

任务一
网页框架
(25min)



.
展示并引导学学生仔细观
生思考 察并比较两

个网页，讨

论、交流，回
顾Word中学
习过的表格，
领悟表格在D
reamweav er
中的作用。

通过对比学
习，培养学
生知识迁移
的能力。

一、仿照网页3的样式，制作
演示如何插入表
格并对表格的设
一个网页框架。
在学生自主探究的基础上，教
置
师总结插入表格的一般方法。
并插入一个2 行1列，表格宽度
800像素，边框粗细0像素的表
分析网页3，
找出其中使
用的表格，仿
照插入图像
的方法，探索
插入表格的
引导学生学习
理论 的时候思
考如何理论运
用到实践

精品文档





格。




二、
在任务一的基础上，探索
用实例来演示如
表格基本属性：合并 与拆分单
何合并和拆分单
元格；单元格的宽度与高度；
元格
方法。
插入表格，通
过实际操作
强化对表格
属性的认识。

根据需 要，
插入图片，在
第二行拆分
为两列，左边
放文字，右边
放图 展示几种常见完善网页，制
的图文混排样作完成的同
式，让学生选择学把网页通
自 己喜欢的一过FTP上传。
种完成网页。
任务二
表格合并和拆
分(20min)

动手分析
和进行创意
设计，培养
学生的模仿
以及创新能
力
通过实例，
培养学生分
析问题、解
决问题的能
力。
让学生自主
发挥，充分
展示个性风
采

任务三
表格嵌套
(30min)

课堂小结
(5min)
课堂作业
(5min)
表格的嵌套。在大表中插入一
个小的表格，这是创 建复杂表
格样式的有效方法。要提示学
生不要嵌套过多。
一、网页框架和表格基本操作
二、表格的合并和拆分
三、表格嵌套
完成教材第五章的表格
通过表格的嵌套及分析，对页面进行布局。需要加强学生对表格合并和拆分的运用
教学反思

实训课题 表格布局实例分析
1、 能运用表格为页面布局
2、 能掌握表格的嵌套操作
3、
4、 能做出“超越公司简介”页面。
1、掌握插入、编辑表格的方法及表格的属性设置。
2、掌握单元格属性的设置。
表格的嵌套在网页设计中的应用
上机实训
教案、素材、案例、教材、计算机机房
实训课时 2课时
实训目标
实训重点
实训难点
实训方法
实训准备
实训要求
13、 对照实习报告的要求，完成上机任务；
.

精品文档
14、
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.教学资料：辅助课件.多媒体教学软件
讲解法、任务驱动教学法 学法
教学过程
小组讨论法 教法
过程安排 教学内容 教师活动 学生活动 设计意图
在学习过表格布局后，我们可展示框架页面
以做一些常规的页面布局了，给学生，引 发学
但有些特殊效果我们却无法实生思考
导入新课 现。如图所示的网页：今天我
(5min)
们来学习另一种页面布局技术
——框架。
任务一
基本知识
(35min)








预习 并思考通过实例来
框架页面布展示，引发
局 学生思考特

殊效果如何
实现，培养
学生积极思
考问题的能
力
学生只有 在
一、基本概念：框架是一种网
加强学生对框架
认真听讲并
布局的理解并进< br>对概念进行
牢固的掌握了
页布局技术。
行简单操作 基本概念后才
二、创建框架与框架集 消化理解

能为任务二的
1、手动设计
学习打下基础

2、插入预定义框架
三、创建嵌套框架
四、选择框架和框架集
1、在编辑区中选择
2、在框架面板中选择
五、删除框架
六、保存框架与框架集文件
完成如下图所示的页面：
要求如下：
（1） topFrame：
（2） 高：100px
（3） 表格：2x2，宽-788px，高-
100px
（4） 高：100=75+25
（5） 宽：788=128+660
（6） 第一行：Logo+Banner
（7） 第二行：当前页位置信息+
导航栏
（8） 导航栏：1x7表格
（9） 宽：660px
（10） 高：25px
（11） 字号：9pt
（12） 行高：14pt
将学生分7组，并
引导学生分组讨
论如何完成如图
所示的效果
讨论如何
才能实现如
图所示的效
果并总结
通过实例，
培养学生分
析问题、解
决问题的能
力。
任务二
实例操作
(40min)
.

精品文档
（13） mainFrame：
（14） 表格：2x2
（15） 宽：788Px，高：400Px
（16） 边框：5px，间距：5px
（17） 表格：3x1
（18） 宽：788px，高：45px
（19） 边框：0px，间距：0px

四、框架基本概念
二、创建框架与框架集
课堂小结
(5min)
三、创建嵌套框架
四、选择框架和框架集
五、删除框架
六、保存框架与框架集文件
设计一系列框架型页面，然后将之实现。要求结合超链接的相关知识。

本次主要讲 述框架和框架集布局页面，运用实例学生加深了对框架的理解，运用起来得心
教学反思
应手。14高31班学生学习氛围待加强
课后作业
(5min)









实训课题
实训目标
实训重点
.
框架布局实例分析 实训课时 2课时
5、 能掌握布局表格和布局单元格的基本操作。
6、 能在布局模式下对页面进行整体布局。
掌握布局表格和布局单元格的基本操作。

精品文档
实训难点
实训方法
实训准备
项目的实现
上机实训
教案、素材、案例、教材、计算机机房
16、 对照实习报告的要求，完成上机任务；
任务完成后及时要求教师考评；
完善实习报告，填写实训总结；
实训过程
实训要求
17、
18、
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。

操作要求及步骤
步骤1 选择［文件］菜单栏中的［新建］命令，创建一个新的页面，并将其命名为“个
人主页”。
步骤2 选择［插入］工具栏中［布局］任务栏中的［框架］命令，单击按钮，选择下
拉菜 单的“顶部和嵌套的左侧框架”命令。
步骤3 弹出［框架标签辅助功能属性］对话框，将网页中框架的各个部分进行命名。
步骤4 选择［窗口］菜单栏中［框架］命令。
步骤5 右侧的面板中就加入了［框架］面板，选中“topFrame”框架进行编辑。
步骤6 页面下方出现了“topFrame”框架的［属性］面板。对“top Frame”框架进
任务一 行编辑。 步骤7 选中“mainFrame”框架进行编辑，页面下方出现了“mainFrame”框
利用框架排版 架的［属性］
面板，对“mainFrame”框架进行编辑。
步骤8 选中“leftFrame”框架进行编辑，页面下方出现了“leftFrame”框架的［属
性］面
板，对“leftFrame”框架进行编辑。
步骤9 选择［文件］菜单栏中的［保存全部］命令，对文件进行保存。
步骤10 弹出保存整体文件的对话框，为文件命名为“”。
步骤11 对各个框架部分进行保存，为各个框架进行命名。
步骤12 单击F12，在浏览器中预览效果。
创建框架集，可以自己设计，也可以从预定义的框架集中选择，还可以修改一个已存
在的Dre amweaver文件来创建。
实验内容：
步骤1 选择［修改］菜单栏中的［框架集］命令。
步骤2 根据需要在其子菜单中选择任意一个分割命令。
步骤3 若要删除一个子框架，将其边框拖至页面或其父框架之外即可。
填写实训总结，并上交实习报告。
剩余时间，可进行自主练习，内容不限，但不可违反上机纪律
任务二
创建框架集
完善报告
自主练习

.

精品文档
实训总结 本次实训学生需要的掌握的内容较多，对于框架布局的位置要准确掌握，难度较大






课题
知识目标
3.3添加动画 教学课时 2课时
1、掌握在网页中添加各种动态元素
2、掌握Flash属性设置
1、学会区分源文件和影片文件格式
2、掌握在网页中插入各种Flash元素
3、能为网页添加音视频元素。
通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。
教学目标
能力目标
情感目标
教学重点
教学难点
添加flash的具体操作

规划一个多媒体网站导航条

1.教学场所：多媒体教室
2.教学设备：安装有Dreamweaver cs5软件的计算机
3.教学资料：辅助课件、多媒体教学软件
讲解法、任务驱动教学法 学法
教学过程
小组讨论法
教学资源
教法
过程安排 教学内容
试想网页中只有文字和图片，那
么网页跟杂志报纸还有什么区别
呢？动态元 素能够更加丰富页面的
效果，是网页是一大特色。
注意：不要把动态元素和动态页面
划上等号。
一、flash文件基本知识
1、Flash源文件：*.fla
2、Flash影片文件：*.swf
二、添加flash动画文件
Flash动画是一种基于矢量格式的
多媒体动画元件，它体积小，其扩
教师活动
将本次课的作品
展示给学生，学生
在欣赏精美网页
的同时思考如何
完 成该作品
教授新知识，为任
务二的完成做准
备
学生活动
欣赏作品并思
考

设计意图
通过作品来展
示，引发学生
思考如何实
现，培养学生
积极思考问题
的能力
导入新课
(5min)
任务一
基本知识
(35min)



吸收动画新知
识
让学生吸收
新知识，为
后面的实例
操作打下基
础
.

精品文档





展名为.swf。
Flash动画被广泛应用于网页中。
操作步骤：
1.光标定位
2.插入flash文件
3.保存、预览
三、添加flash按钮
Dreamweaver中内置了一些flash
按钮，用 户可以很方便将他们添加
到网页中。
注意：在页面中添加flash按钮和
flash文本之前必须先保存网页。
操作步骤：
1.光标定位
2.插入flash按钮
3.设置按钮属性
4.保存、预览
四、添加flash文本
插入—媒体—Flash文本
五、为网页添加音频
插入—媒体—插件
要求：制作如下图所示网页，插入三行一列 表格，插入Flash动画要求动画大
小宽高为400*300，第二行插入图片，第三行输入文字并排 版，最后得到的结
果如下图所示：
任务二
拓展训练
(40min)

.

精品文档
课堂小结
(5min)
课后作业
(5min)
一、添加多媒体元素使页面具有动态效果
二、插入Flash按钮和Flashpaper
三、插入播放器
用Flash按钮或文本制作一个导航条，然后为页面添加背景音乐。
学生对动画、音视频有敏锐的触觉，学习起来颇有兴致。
教学反思





实训课题
实训目标
实训重点
实训难点
实训方法
实训准备
添加音频和视频 实训课时 2课时
7、 掌握插入表格、图片、背景图片设置
8、 掌握插入Flash文本、Flashpaper、Flash视频、背景音乐等
Flash属性、Flash元素
Flash元素
上机实训
教案、素材、案例、教材、计算机机房
19、 对照实习报告的要求，完成上机任务；
任务完成后及时要求教师考评；
完善实习报告，填写实训总结；
实训过程
实训要求
20、
21、
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。

操作要求及步骤
.

精品文档
要求：（利用DW cs3版本）
一、插入swf动画
1、 新建站点和默认图像文件夹
2、 新建网页文件，插入 1行2列的表格，表格宽度720px，边框粗细、表格
间距、表格边距都为0.选择第二个单元格设置 宽度为600px，高度设置为100px。然
后在第一个单元格插入，并且水平和垂直居中；在第二个 单元格里插入背
景图片（选择单元格——点击拆分——找到td——在td后空一格——选择
b ackground——选择图片插入），并将图片设置为宽高600px，100px。保存
3、 在第二个单元格插入005的Flash，并将Flash设置为宽高600px，100px
规格，并 设置Flash为透明
二、插入Flash按钮：
1、利用DW cs3版本插入导航栏： 插入一行一列的表格，宽度为720px，边框粗细、表格
间距、表格边距都为0，居中对齐。然后点击 插入Flash按钮，选择下图所示的按钮并输
入文字，如图所示：
任务
制作Flash网
页

2、然后在导航栏的下一行插入一行2列的表格，宽 度为720px，边框粗细、表格间距、
表格边距都为0，居中对齐。左边单元格设置为宽200px， 然后再嵌套一个表格，3行1
列宽度为100%，边框粗细、表格间距、表格边距都为0，居中对齐。右 边单元格插入一行
一列宽度为98%的单元格居中对齐，边框为1，颜色为#FF00FF，然后在此表 格中插入Flash
文本，字体为宋体，大小30px，输入文本：我的个性空间，颜色为#FF000 0，滚动颜色设
置为：#00FF00，另存为，如下图所示：

4、 插入Fla shpaper：首先在电脑上安装Flashpaper软件，然后将“”Word
文件转换为文件， 将文件插入到网页中，设置Flashpaper宽高分别为480
和400px
三、插入播放器
1、在左边的三个单元格范围中，将光标放入第一个单元格，点击插入媒体中 的图像查看
器，将Flash命名为abc，并将播放器设置为宽高180,135
.

精品文档
2、点击右边的Flash元素，对图片进行设置，选择选项ima geURLs（表示图片的位置），
选择你需要展播的图片，showControls（显示控制条） 设置为否，slideAutoPlay（自动
播放）设置为是，slideDelay（每张图切换停 留时间）设置为2，slideloop（循环播放）
是
3、在左边第二个单元格插入媒体— —插件，插入sound声音，设置插件高宽分别为180,41，
参数设置为，autostart false
4、插入背景音乐
完善报告 填写实训总结，并上交实习报告。
剩余时间，可进行自主练习，内容不限，但不可违反上机纪律
本次实训内容较多，网页添加音频和视频使得网页内容更加丰富多彩，学生兴趣较浓
自主练习

实训总结



课题 4.1编辑和创建AP DIV元素
1、掌握层的概念
2、掌握如何编辑AP DIV层
3、掌握层的嵌套
1、掌握层的基本操作。
2、能将层和时间轴联系起来制作漂浮效果
通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。
教学课时 2课时
知识目标
教学目标
能力目标
情感目标
教学重点 层的基本操作
.

精品文档
教学难点 层的高级应用
1.教学场所：多媒体教室
2.教学设备：安装有Dreamweaver cs5软件的计算机
3.教学资料：辅助课件、多媒体教学软件
讲解法、任务驱动教学法 学法
教学过程
小组讨论法
教学资源
教法
过程安排 教学内容 教师活动 学生活动
欣赏作品并思
考

理解AP DIV元
素并做好笔记














分组讨论教师
提出的两个任
务并提出解决
方案



设计意图
通过作品展
示，引出本次
课的主题
主要是以基本
知识讲解为
主，为任务二
的综合实例打
下理论基础











巩固任务一所
学的理论知识

导入新课
（5min）
层是一种HTML页面元素，可被放展示课前准备的
在页面的任意位置 ，在网页排版定层的叠加，引导学
位方面具有独特优势。 生思考：如何制作
这样的网页？
一、创建AP DIV元素
什么是Ap Div？
AP元素（绝对定位元素）, 是一种
HTML网页元素，一般称为 “层”。
即网页内容的容器，包含文本，图
像或 其他任何可以在HTML文档正
文中放入的内容。且可以精确定位
在网页中的任何地方。
二、编辑AP DIV元素
1、调整层的大小
2、层的层次关系
3、层的首选设置
4、层的对齐
三、制作如图所示的网页
强调重点：
1、作为容器，可
以放置其他网页
元素。
2、灵活定位。









分组让学生讨论
如何完成左图所
示的任务：
1、 如何制
作如图立体式
的叠加图片
2、 如何绘
制大小一致且
背景颜色为粉
色的图层？


任务一
基本知识
（20min）













任务二
综合实例
（25min）

.

精品文档
四、层的可见性设置
1、AP面板的使用（选择、命名、
隐藏、次序）
2、层的可见性
3、简单的层特效
任务三
（30min）
五、实例
将做好的效果图
演示给学生并要
求学生分组讨论
如何实现该要求
讨论并尝试操
作
巩固学生对行
为属性的理解
要求：在上述网页制 作的基础
上，将“网”“制”分别修改成
“开”“关”，并对其隐藏和显
示属性设置， 点击控制图片的
显示和隐藏

课堂小结
（5min）
一、如何创建AP DIV层
二、编辑AP DIV层
三、实例操作
制作如图所示的网页，提示：利用层的布局
课后作业
（5min）
< br>通过编辑和创建APDIV层来实现图片的立体感，丰富了网页内容，通过实例演示加深了学
教学 反思
生对ap层的认识





课题 4.2层的可见性设置 教学课时 2课时
.

精品文档
知识目标
教学目标
能力目标
情感目标
教学重点
教学难点
1、掌握AP层的创建与属性
2、掌握AP层的可见性操作
1、学会利用AP层制作立体效果网页
2、掌握AP层绝对定位应用
通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。
1、 层的基本操作
2、 层的应用及嵌套
AP元素
1.教学场所：多媒体教室
2.教学设备：安装有Dreamweaver cs5软件的计算机
3.教学资料：辅助课件、多媒体教学软件
讲解法、任务驱动教学法 学法
教学过程
小组讨论法
教学资源
教法
过程安排 教学内容 < br>前面所学的表格和图片都是二维
的，如何我们先建立了三个层，每
个层都有一个图片，他 们是层叠的
效果，现在要添加两个按钮，使得
我们点击一个按钮可以隐藏层，点
击另一 个按钮可以显示层，这是怎
么做的呢？
一、AP元素面板
1、层的可见性
2、防止层重叠

教师活动
展示三维图片效
果
学生活动
欣赏作品并思
考

设计意图
通过作品来展< br>示，引发学生
思考如何实
现，培养学生
积极思考问题
的能力
导入新课
(5min)
任务一
基本知识
(20min)
任务二
拓展训练
(55min)
让学生吸收
新知识，为
后面的实例
操作打下基
础
二、制作 如下图所示的网页效果：引导学生运用行分组讨论如何
培养学生积
要求点击“隐藏”时，hom e隐藏；为来实现 实现该功能
极创新及小
点击“显示”时，home显示
组沟通能力
















操作步骤如下所示： 学生分组讨论后推荐代表完成
激发学生自
1、 如图所示是先建立两个按钮，得出结论，并指派实例
学能力
演示 观看教师演示
一个是“隐藏”一个是“显示” 一名代表尝试完
.

精品文档
2、 鼠标点击想要隐藏的曾，然后
我们在属性栏，将可见性设置
为hidden，也就是隐藏层
3、 在窗口菜单中，打开行为窗口
4、 选中“显示”按钮，在行为窗
口，点击添加按钮，在打开的
菜单中，选择【显示-- 隐藏元
素】
5、 打开显示隐藏元素对话框，选
择刚才隐藏了的那个曾
ap div4，点击下面的显示按钮。
然后点击确定
6、 接着选中隐藏按钮
7、 在行为窗口点击添加按钮，然
后选择【显示隐藏元素】
8、 在打开的对话框中，选中
apdiv4，点击下面的隐藏，然
后点击确定按钮。
9、 预览
课堂小结
(5min)
课后作业
(5min)
1、 AP元素面板
2、 隐藏和显示行为
成实例，并进行补
充







制作立体三维网页效果，并添加显示和隐藏行为
通过运用层的隐藏显示属性及事件onclick的灵活运用，制作常见特效，学生较感兴趣，
教学反思
较好。





实训课题
实训目标
实训重点
实训难点
DIV与表格的转换 实训课时 2课时
9、 能掌握布局表格和布局单元格的基本操作。
10、 能在布局模式下对页面进行整体布局。
掌握布局表格和布局单元格的基本操作。
项目的实现
.

精品文档
实训方法
实训准备
上机实训
教案、素材、案例、教材、计算机机房
22、 对照实习报告的要求，完成上机任务；
任务完成后及时要求教师考评；
完善实习报告，填写实训总结；
实训过程
实训要求
23、
24、
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。

操作要求及步骤
步骤1 选择［文件］菜单栏中的［新建］命令，创建一个新的页面，并将其命名为“个
人主页”。
步骤2 选择［插入］工具栏中［布局］任务栏中的［框架］命令，单击按钮，选择下
拉菜 单的“顶部和嵌套的左侧框架”命令。
步骤3 弹出［框架标签辅助功能属性］对话框，将网页中框架的各个部分进行命名。
步骤4 选择［窗口］菜单栏中［框架］命令。
步骤5 右侧的面板中就加入了［框架］面板，选中“topFrame”框架进行编辑。
步骤6 页面下方出现了“topFrame”框架的［属性］面板。对“top Frame”框架进
任务一 行编辑。 步骤7 选中“mainFrame”框架进行编辑，页面下方出现了“mainFrame”框
利用框架排版 架的［属性］
面板，对“mainFrame”框架进行编辑。
步骤8 选中“leftFrame”框架进行编辑，页面下方出现了“leftFrame”框架的［属
性］面
板，对“leftFrame”框架进行编辑。
步骤9 选择［文件］菜单栏中的［保存全部］命令，对文件进行保存。
步骤10 弹出保存整体文件的对话框，为文件命名为“”。
步骤11 对各个框架部分进行保存，为各个框架进行命名。
步骤12 单击F12，在浏览器中预览效果。
创建框架集，可以自己设计，也可以从预定义的框架集中选择，还可以修改一个已存
在的Dre amweaver文件来创建。
实验内容：
步骤1 选择［修改］菜单栏中的［框架集］命令。
步骤2 根据需要在其子菜单中选择任意一个分割命令。
步骤3 若要删除一个子框架，将其边框拖至页面或其父框架之外即可。
填写实训总结，并上交实习报告。
剩余时间，可进行自主练习，内容不限，但不可违反上机纪律
本次实习内容较多，操作性较强，学生需加强练习

任务二
创建框架集
完善报告
自主练习

实训总结
.

精品文档



课题
知识目标
教学目标
能力目标
情感目标
4.3晃动的图片 教学课时 2课时
1、理解行为、事件、动作的概念
2、掌握添加行为应用实例
1、学会区分源文件和影片文件格式
2、应用行为
通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。
教学重点
1、行为面板使用
2、常见事件OnMouseOver 鼠标经过OnMouseout 鼠标离开OnLoad 打开 OnUnload关闭
3、设置文本
行为面板使用
1.教学场所：多媒体教室
2.教学设备：安装有Dreamweaver cs5软件的计算机
3.教学资料：辅助课件、多媒体教学软件
讲解法、任务驱动教学法 学法
教学过程
小组讨论法
教学难点
教学资源
教法
过程安排 教学内容
1、 如何制作弹出信息窗口？
2、 如何制作晃动图片？
3、 如何制作弹出窗口？
一、晃动的图片
1）什么是行为？
“行为” 可以说是Dreamweaver
中最具特色的功能之一，它提供了
很多实用的动作，每个动作 可以完
成特定的任务，为网页添加不少特
殊效果。
二、行为面板的使用1、
1、打开行为面板（快捷方式：
Shift+F4）
2、认识行为面板
教师活动
演示弹出信息、晃
动图片、弹出窗口
网页，激发学生兴
趣
讲解基础知识并
强调重点
学生活动
欣赏教师的展
示并分组讨论
如何实现？

听讲并做好笔
记
设计意图
通过效果展示
激发学生兴趣 导入新课
(5min)
任务一
基本知识
(20min)












.
为任务二实
例制作打下
基础

精品文档
















显示设置事件
显示所有事件
添加行为
删除事件
移动事件顺序
命令控制菜单







三、设置文本行为
1 、 状态栏文字
2、设置文本域文字（注意使用动作
的对象必须要有个ID）
三、实例制作
1、制作晃动图片，鼠标经过时（onmouseover）晃动，鼠标离开后 （onmouseout）不晃动
技巧：添加行为的时候一般遵循3个步骤：
选择对象
添加动作
调整事件
2、制作弹出窗口（利用添加行为里的打开浏览器窗口）
3、制作弹出信息，弹出信息为“欢迎访问本站点”，事件为onload
4、设置文本行为

一、弹出文字信息
二、制作弹出窗口
三、制作晃动图片
四、设置文本行为
网上搜索弹出信息网页及广告窗口，研究如何制作
本次主要应用行为制作晃动的图片的效果， 操作较容易，学生掌握较好，但是事件onclick
教学反思
和onmouseover及onmouseout的掌握学生待加强。
任务二
拓展训练
(55min)
课堂小结
(5min)
课后作业
(5min)






实训课题 交换图像 实训课时 2课时
.

精品文档
实训目标
实训重点
实训难点
实训方法
实训准备
11、
12、
掌握AP元素面板的使用
理解原始档图像和交换图像概念
1、 表格的布局
2、 图像交换设置
图像交换
上机实训
教案、素材、案例、教材、计算机机房
25、 对照实习报告的要求，完成上机任务；
任务完成后及时要求教师考评；
完善实习报告，填写实训总结；
实训过程
实训要求
26、
27、
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。

操作要求及步骤
一、新建站点和默认图像文件夹
二、交换图片实训
1、 新建网页“”将页面背景设置为黑色
2、 插入2行1列宽度为700px的表格，边框粗细0，边距10，间距0
3、 在第一行插入图片图片并居中，并将图片的ID命名为pm
4、 在第二行里再嵌套一个一行三列的表 格，宽度为100%，边框粗细0，边距10，间距0，
背景为灰色，然后分别插入教师所给素材、、， 并将素材都设置
宽高为200,30
5、 选择并将其添加行为——交换图像，如下图所示：
任务
交换图像

6、 同理，将、添加行为，保存预览
完善报告 填写实训总结，并上交实习报告。
剩余时间，可进行自主练习，内容不限，但不可违反上机纪律
自主练习

.

精品文档
实训总结 本次实训室交换图像，主要是一个小项目的制作，通过项 目的制作让学生深刻理解交换图
像的应用，较好。





实训课题
实训目标
实训重点
实训难点
实训方法
实训准备
13、
14、
拼图游戏
熟悉AP元素面板
掌握添加拖动AP元素
实训课时 2课时
拖动AP元素面板
项目的实现
上机实训
教案、素材、案例、教材、计算机机房
28、 对照实习报告的要求，完成上机任务；
任务完成后及时要求教师考评；
完善实习报告，填写实训总结；
实训过程
实训要求
29、
30、
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。

操作要求及步骤
三、拼图游戏实训
1、 新建网页，将页面背景设置为图片
2、 绘制AP DIV层，宽高分别为220,220，背景颜色为#FFCCFF
3、 另外绘制四个AP DIV层，宽高分别为110，110，背景颜色为#FFCCFF，并将教师准备
的素材、、、4jpeg分别插入四个层
4、 利用辅助线将层对齐
5、 将四个层分别移动到大层里，将花朵拼凑整齐，如图所示
任务一
拼图游戏
.

精品文档

6、 分别将四个小层添加行为——拖动ap元素，设置如图所示：

7、四个小层都设置完成后再将小层拖出大层，顺序打乱，保存
完善报告 填写实训总结，并上交实习报告。
剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 本次课通过拼图游戏的制作，让学生深刻理解AP层在DW的应用，运用AP属性设置不同
的效果， 较好。




课题 4.4修改属性特效及动态菜单制作 教学课时 2课时
自主练习

实训总结
知识目标
教学目标
1、掌握表格布局页面
2、掌握改变属性
3、掌握行为“显示-隐藏”的正确操作
1、学会利用不同行为制作网页效果
2、应用改变属性
通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。
能力目标
情感目标
教学重点
1、常见事件OnMouseOver 鼠标经过OnMouseout 鼠标离开
2、AP元素隐藏显示
.

精品文档
教学难点 属性高height、宽width的设置
1.教学场所：多媒体教室
2.教学设备：安装有Dreamweaver cs5软件的计算机
3.教学资料：辅助课件、多媒体教学软件
讲解法、任务驱动教学法 学法
教学过程
小组讨论法
教学资源
教法
过程安排 教学内容
1、 百度搜索图片时鼠标经过图片
时图片经常会自动放大，如何
实现？
2、 导航栏如何制作？
教师活动
演示图片放大及
导航栏效果并引
导学生思考
学生活动
欣赏教师的展
示并分组讨论
如何实现？

设计意图
通过效果展示
激发学生兴趣 导入新课
(5min)
一、 如何制作 如下图所示效果网页？（具体要求：当鼠标经过图片时图片自动放大；当
鼠标离开图片时图片缩小到原来 大小）
任务一
修改属性特效
(35min)











操作步骤如下：
1、 新建网页，页面背景颜色为浅灰色
2、 插入3行3列的表 格，合并第一行，并将第一行设置为深灰色，输入“索尼s630款
图片”，居中对齐，字体大小为24 ，紫红色，黑体
3、 在第二行第三行分别插入图片、、、、、，
并将图片设置为宽高分别为 200,120，并将图片ID分别更改为p1…p6
4、 给p1添加行为- 修改属性-，修改的宽高值如下图所示：

.

精品文档

5、同理修改p2….p6
二、 动态菜单制作
1、 新建页面里绘制一个AP DIV层，背景颜色为#FF33FF在层里插入一行4列的表格，
宽度为100%，边框，边距，间距 都为0
2、 分别在表格里输入“新闻中心”、“娱乐频道”、“电脑网络”、“技术支持”，选中< br>行设置行高25px，居中对齐
3、 AP DIV层设置行高为25px，并将层重新命名为dhl
4、 在新闻中心下面再绘制一个AP DI V层，并将层重命名为menu1，设置背景颜色为
#FCF，在层里插入4行一列的表格，宽度设置为 100%，边框，边距都为0，间距
为3，输入文字国际新闻、国内新闻、体育新闻、英语新闻
5、 将“新闻中心”添加行为显示-隐藏，事件onmouseover，如下图所示
任务二
动态菜单制作
(40min)

6、 同理，添加行为显示-隐藏，事件onmouseout
7、 将menu1层跟dhl层靠在一起，给menu1同样添加显示-隐藏行为
课堂小结
(5min)
课后作业
(5min)
五、修改属性特效（宽width、高height、边框border等）
六、制作动态菜单栏（AP元素）
搜索百度图片及观察网页导航栏并对照教师上课内容 本次课通过修改属性特效掌握图片宽高的设置，理解图片大小改变效果。通过动态菜单栏
教学反思
的制作，灵活运用AP层。

.