教育女儿-大学生心理健康的标准

湖南省商业技术学院
学期授课进度计划
（二年级第一学期）
课程名称 网页制作与设计
适用班级 16高21、22
制定教师 易会芝
审批签字
教研室主任
教务科长
教务院长



年月日
年月日
年月日
2017-2018学年第一学期制定
课时分配
授课
周课时
周数 总课时

授课
讲课
其中
实验

复习考试 机动

23
期末完成情况
计划
课时

完成
课时


超出或缺少课时
超出

缺少

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

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





大
纲
要
求
通过本学期《网页设计与制作》的学习，主要要求同学们掌 握网页制作的一些
基本功能和操作，为以后的一些学习和工作打下较好的基础。通过学习要求同学达到以下要求：
1、了解DreamweaverCS6的详细功能及操作方法。
2、熟练掌握网页制作技巧。
3、掌握网页规范以及网页优化和网站推广的知识。
4、明确网站建设的流程和站点建设成后需要做的优化推广工作。
1、超级链接
2、表格表单应用
3、框架使用
4、CSS样式
教
学
重
点
教
学
难
点
1、超级链接
2、用表格和框架布局页面
3、创建数据库
教
学
方
法< br>讲授法、演示法、项目教学法、合作学习、对话、任务驱动法、头脑风暴、小组讨
论法等教学方法 。
学期授课进度计划表
授课内容 课时
2
备注
1、2周新生军训

实训
4
实训
实训
5









2
2
2
2
2

上机



上机
上机








6





7
8


国庆放假


实训
6
6
2
2
2
2
2
2


机动补周一课


上机
上机

9


实训

实训 上机

10



运动会
运动会
充周三到周五

11 实训


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






上机


12 实训

实训
13 实训

实训
14 实训

实训
15 实训

实训
16 实训
上机


上机
上机


上机
上机


上机
上机


上机
上机
学期授课进度计划表




17 实训

2
2
2
2


上机

18 实训


19 实训


20
2
2
2
2
2
2
2
2
2
2
2
2
2
6

网页制作基础知识 教学课时

上机




上机




元旦放假



机动
充周一课






2课时


21





22 复习考试
教研组

意见

课题
知识目标 能了解网页制作软件的特点
教学目标 能力目标 能掌握网页制作的基本概念
情感目标 提高学生团结合作精神，提高学生竞争意识
教学重点 网页的组成
教学难点 网页的分类，网址与域名的区分

1.教学场所：多媒体教室
教学资源 2.教学设备：安装有Dreamweavercs5软件的计算机
3.教学资料：辅助课件.多媒体教学软件
教法 讲解法、任务驱动教学法 学法
课前准导入新讲授新动手实
教学过程
备
时间分配 5
课
10
课
50
践
15
教学过程
学生活
过程安排 教学内容 教师活动
动
1、教师自我介绍；
2、点名；
3、课程介绍
4、课堂要求

课前准备
4.统计学情 3.反应学了解我们
的课程。
1.自我介绍 1.班长统使师生尽
快互相认
设计意图
5 5
课堂小结 作业布置
小组讨论法
2.按照花名计座次表
册点名
3.课程介绍
2.学生自识，并促使
我介绍 学生答题
5.提出期望情
与要求 4.推荐课
代表。
本次课是本学期第一次上以提问的方学生之间提问跟就
课，简单介绍本课程：
导入新课
1、网页设计相关级别及其对网页设计加深对网有关的问
薪资待遇 的认知 页设计的题，抓住
式了解学生相互讨论，业和薪资

2、网页设计的就业方向及< br>其公司类型
认识 学生注意
力。
一、网页设计介绍 简单介绍网吸收新知讲述基础
识并思考知识，为1、网站是企业向用户和网页知识
民提供信息 （包括产品和提问：网页设生活中常后面学习
服务）的一种方式，是企计要点并将见网页设打下基础
业开展电子商务的基础设学生分组进计知识
施和信息平台，离开网站行讨论
去谈电子商务是不可能
的。
加强学生
分组讨论，之间交流
讲述网站 设并派出代沟通能
计级别，引导表来总结 力，加深
2、企业的网站被称为“网学生对这个思考自己学生对网
任务一 络商标”，也是企业无形行业向往，并的定位 页设计要
讲授新课 资产的组成部分，而网站鼓励学生向了解本行点理解
是Internet上宣传和反映大师阶段努业的现状
企业形象和文化的重要窗力
口。
二、网页设计的要点
引导学生
认识软件了解这个
行业 简单介绍学基本组成
生将来从事做笔记，识引导学生
1、明确建站目标和需求。 本行业的范记教师讲了解本行
2、网站主题鲜明。
3、网站版式设计。
围
介绍网页制
述的知识 业从事范
围
提前引导
学生认识
4、色彩在网站设计中的作作需要的软
用。 件

5、网站设计形式与内容统给学生灌输
一。
三、网站设计级别
1、新手入行
2、跳槽阶段
3、稳定阶段
4、大师阶段
四、网页设计公司类型
1、门户游戏类
2、企业部门类
3、网站建设类
4、互动设计类
五、网页三剑客
1、 Dreamweaver：
可视化页面设计、网站管
理
2、 Fireworks
页面图象设计工具
3、 Flash
动画制作
六、网页基础知识
1、网页与网站的区别
网页设计的
基本知识
dreamwea
vercs5为
后面软件
学习打下
基础
这些知识
都是学网
页设计最
基本的基
础知识，
学生基础
知识 薄
弱，必须
了解这些
才能学习
后面的内
容

（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、 每组设计一个网站调查问卷。
一、 网页设计师就业方向
课堂小结 二、 网站设计流程
三、 常见网站
本次课是网页设计第一次上课，主要讲述一些网页基础知识，学生
教学反思 基础知识薄弱，需要加强，整体来说计算机班基础知识要好于电子
商务班
一、网页设计介绍
二、网页设计的要点
三、网站设计级别
板书
四、网页设计公司类型
五、网页三剑客
六、网页基础知识
予学生帮助 相互沟通 对网页设
计要点学
习

课题 网站建设概述 教学课时 2课时
知识目标 了解做网站的准备工作，掌握站点的建立。
1. 能了解网站开发的基本流程。
教学目标 能力目标 2. 能掌握网站开发的基本原则。
3. 能学会站点的建立与管理。
情感目标 提高学生团结合作精神，增强小组合作能力
教学重点 站点的建立
教学难点 如何规划好一个网站
1.教学场所：多媒体教室
教学资源 2.教学设备：安装有Dreamweavercs5软件的计算机
3.教学资料：辅助课件、多媒体教学软件
教法 讲解法、任务驱动教学法 学法
教学过程
学生活
过程安排 教学内容 教师活动
动
1、搜集了解网站开发的基配合学生搜网上搜索培养学生
本流程。 索资料及解教师提出自主学习
问题，了解能力
网站设计
事项
导入新课 网站设计大致流程是哪听取学生的阐述观点，锻炼学生
(5min) 些？每组派出一个代表阐观点并给予组员之间的语言表
设计意图
小组讨论法
课前准备 2、网站设计、制作过程中答疑问
的一些原则、注意事项。

述本组课前搜集的资料 一定的知道 相互讨论 达能力和
分析能力
任务一 一、 网站设计流程
架构内容信息
搜集整理资料
规划网站结构
网页制作
整合网站

讲授新课
(35min)

网站上传
效果测试
1、确定网站小组讨论，加深学生
主题的建议 相互沟通 对网页设
计要点学
习
二、 网站开发原则
网站推广

1、 确定主题
讨论：网站是靠什么赢利2、给网站取
的？
2、规划站点结构
（1）结构设计
（2）目录结构设计
任务二
（3）形象设计
分组讨论
（4）主页设计
(40min)
（5）其他页面设计
（6）企业站点设计
（7）为站点设计目标对象
访问率
三、网页版面布局设计
1、版面布局的原则
（1）主次分明、中心突出
名
3、提示决定
网站的性质

（2）大小搭配、相互呼应
（3）图文并茂、相得益彰
（4）动静适度、平衡对称
2、页面布局的类型
（1）“国”字型
（2）框架型
（3）标题正文型
（4）封面型
（5）综合型
四、规划站点
1、建立站点目录
2、站点规划
规划站点结构是利用不同
的文件夹将不同的网页内
容分门别类的保存。
3、创建导航草图
五、搜集素材
1、搜集并制作素材
无论是文字素材还是图
片、动画素材，都应注意
其来源是否注明版权所
有。

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

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

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

操作步骤：新建HTML网页——输入文字——将标题设置为 36号，蓝色，宋体——
插入两根红色的水平线——插入时间——插入商标——插入背景图片——保存
完善报告 填写实训总结，并上交实习报告。
自主练习

剩余时间，可进行自主练习，内容不限，但不可违反上机纪律
实训总结 本次课是学生第一次 上机，制作一个较简单的网页，学生存在对
DW界面不熟，操作不熟练等缺点，需加强操作
课题 编辑和添加文本 教学课时 2课时
1、 掌握输入和编辑文本
知识目标
2、学会插入文本，掌握设置文本格式的方法
教学目标
能力目标 掌握网页中三种常见列表的创建，及其各自的特点
情感目标 提高学生自主学习和团队竞争意识
教学重点 插入和编辑文本
教学难点 创建列表

1.教学场所：多媒体教室
教学资源 2.教学设备：安装有Dreamweavercs5软件的计算机
3.教学资料：辅助课件.多媒体教学软件
教法 讲解法、任务驱动教学法 学法
教学过程
学生活
过程安排 教学内容 教师活动
动
提问：在D W中输入文本和将学生分组，讨论并思以讨论的
在Word中输入文本有何区并提出问题，考
导入新课
别？
（5min）
组之间讨论
并总结
一、插入文本
1、 插入普通文本
2、 插入不换行空格
任务一 3、 插入水平线
的交流沟
通
引导学生小学生之间
形式提高
设计意图
小组讨论法
演示并强调认真听讲文本插入
重点 并记下重是基础知
点 识，为下
面任务二
打下基础 插入文本 4、 插入日期和特殊字符
(20min) 二、编辑文本
1、基本样式设置
2、设置段落格式
3、创建列表

完成以下网页实例： 1、 引导学生小组讨论
讨论该网
页由哪几< br>本实例即
是对任务
一的巩
固，也为
下一次课
打下基础
任务二
(55min)
部分组成
2、 引导学生
小组组内
分工，完
成小模块
作业布置
（5min）
课堂小结
（5min）
1、 找一篇文章输入至页面中，然后利用所学知识，对其进行
格式编排
一、 插入文本
二、 编辑文本
一、插入文本
5、 插入普通文本
6、 插入不换行空格
7、 插入水平线
8、 插入日期和特殊字符
板书
二、编辑文本
1、基本样式设置
2、设置段落格式
3、创建列表
三、实例操作

本次课是一个基础知识内容，文本是一个网页必不可少的内容，对
教学反思 网页设计至关重要，学生必须牢牢掌握文本的各个要点。目前来说
学习兴趣较好。
实训课题 网站素材处理 实训课时 2课时
1、 掌握创建本地站点和远程站点
实训目标
2、 学会修改站点和多站点的管理
实训重点 站点的管理
实训难点 站点的管理
实训方法 上机实训
实训准备 教案、素材、案例、教材、计算机机房
1、 对照实习报告的要求，完成上机任务；
2、 任务完成后及时要求教师考评；
实训要求
3、 完善实习报告，填写实训总结；
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。
实训过程
内容 操作要求及步骤
1、熟悉DW界面
任务一
2、在D盘根目录创建一个站点名称为《我的足球网》，本地站点文
创建站点
件夹为jcwww，如下图所示
任务二
设置默认
图像文件
夹
利用教师所给素材，制作简单网页《我的偶像》，素材见文件夹

完善报告 填写实训总结，并上交实习报告。
自主练习

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

剩余时间，可进行自主练习，内容不限，但不可违反上机纪律

实训总结 本次 上机内容较多，主要考察学生综合性的练习，如图片的插入，
文字的编辑及水平线的插入等，需要学生对 前面的知识非常熟悉，
13高12班整体班级学习氛围较好，所有学生都能按时上交作业，
值得 表扬
课题 添加和编辑图像 教学课时 2课时
1、 掌握图像裁剪、重新取样、亮度、锐化的设置
知识目标
2、掌握图像属性设置
教学目标
能力目标 掌握运用软件对图像处理的能力
情感目标 提高学生团结合作精神，提高学生竞争意识
教学重点 图像的编辑
教学难点 图像的编辑
1.教学场所：多媒体教室
教学资源 2.教学设备：安装有Dreamweavercs5软件的计算机
3.教学资料：辅助课件.多媒体教学软件
教法 讲解法、任务驱动教学法 学法
教学过程
学生活
过程安排 教学内容 教师活动
动
前面介绍网页的时候有说演示这张图分组讨论提出问题
导入新课 过，在保证画质的情况下，片，分析数据用什么方引发学生
(5min) 图片的数据量越小越好。量为 93k、画法来更改思考，引
问题：如果一张图片数据质为数据量和出这次课
设计意图
小组讨论法

量很大，我们该如何编1024*768规规格
辑？ 格的图片如
何更改数据
量和规格？
的主题
给出和两张图片进行对对图片宽 、观看教师引导学生
比，提出任务：如何从变高、裁切、重演示，并思学习理论
化到？ 新采样、锐化考变成的的时候思
考如何理
论运用到
实践
具体操作步骤：打开DW软等设置进行方法
任务一
件——插入图像，对图片演示
编辑图片
属性设置如下目标值：
(30min)
编辑完成后与原图像进 行
对比，会发现数据量、规
格都发生变化，但浏览网
页更友好

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

本次教学学生较感兴趣，特别是鼠标经过的图像，学生完成得较好，
教学反思
值得鼓励
课题 创建超级链接 教学课时 2课时

1、 掌握创建超链接的方法
知识目标 2、 掌握相对链接和绝对链接的区别
教学目标
3、 创建锚点链接
能力目标 提高学生学习创作能力
情感目标 提高学生团结合作精神，提高学生竞争意识
1、 正确认识路径
教学重点
2、 理解相对链接和绝对链接的区别
教学难点 添加超链接、相对路径、绝对路径
1.教学场所：多媒体教室
教学资源 2.教学设备：安装有Dreamweavercs5软件的计算机
3.教学资料：辅助课件.多媒体教学软件
教法 讲解法、任务驱动教学法 学法
教学过程
学生活
过程安排 教学内容 教师活动
动
每次浏览网 页的时候点击进入新浪网观看效果以提问且
某个文字或者图片，能自给学生演示并讨论如学生较熟
导入新课 动跳转到另一个页面，提超级链接的何才能实悉的浏览
(5min) 问：这样的链接形式叫什效果并进行现该效果
么？如何实现？ 提问
网页的方
式吸引学
生的注意
设计意图
小组讨论法

一、新建站点jcww，并在给学生演示观看教师让学生熟
站点内新建默认图像文件如何插入 链演示，并思悉DW添加
夹images，将网页里的接；演示不同考- new、超级链接
“我与足球”链接到，目目标新建窗-blank、的界面
任务一
创建超级
链接
标为-blank；“足球新闻”口的区别
链接到“逢入京使.HTML”，
目标为- new；“足球明星”
-self几个
目标值窗
口的区别
（20min） 链接到“我与足球
网.HTML”，目标为-self。
二、对比每个目标不同，
网页新建窗口不同并进行
总结
区别：
任务二
相对链接
和绝对链
接
演示教材P60思考并正正确理解
确理解相相对链接相对链接是指链接的地址实例
是本站点之内的对象；绝演示如何插对链接和和绝对链
对链接是指链接的地址是入锚点链接
远程对象，用域名或IP作
绝对链接接，为下
概念 面的学习
(20min) 为地址
任务三 一、概念：在本页进行链
观看教师打下基础
演示并思锚点链接
考锚点链应用比较
接的应用 广泛，学
生需要掌
锚点链接 接的叫做锚点，一般在长
(35min) 篇的文章或技术文档中是
使用，链接到某个特殊的

段落。
二、打开第4章4-3网页，
演示锚点链接效果
一、 页面与页面之间的超链接
课堂小结
二、 相对链接和绝对链接
(5min)
三、 锚点链接（本页之间链接）
握并应用
一、 网上查找哪些页面常用页面与页面链接，哪些是用锚点链
作业布置
接并总结
(5min)
二、 利用教材第4章4-3的素材，自己动手创建锚点链接
三、 创建超级链接的方法与步骤
板书 四、 相对链接和绝对链接
五、 创建锚点链接
本次课主要介绍超链接的常用方法，超链接在学生上网中随处可
教学反思
见，较易理解，学生之间的讨论也非常激烈，较好。
实训课题 图像处理和创建超链接
3、 学会利用DW处理图像
实训目标 4、 掌握创建超级链接的方法
实训课时 2课时
5、 理解相对链接和绝对链接概念
1、 图片处理
实训重点
2、 超级链接
实训难点 超级链接的使用

实训方法 上机实训
实训准备 教案、素材、案例、教材、计算机机房
7、 对照实习报告的要求，完成上机任务；
8、 任务完成后及时要求教师考评；
实训要求
9、 完善实习报告，填写实训总结；
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。
实训过程
操作要求及步骤
1、 将图片修改为尺寸为240*160，数据量设置为8K左右（6-11k
任务一
处理图像
都可以）并进行裁剪和锐化等设置，熟悉图片处理几个设置，
设置完成后以网页的形式保存，保 存在文件夹中，保存名称为
“”
2、 将教师发送的网页进行编辑，将“我与足球”四个字链接到“我
与足球网.html”，目标为- self；将“足球新闻”四个字链接到
“逢入京使.html”，目标为- blank；将“足球明星”四个字链
接到“”，目标为-new。
3、 修改页面属性：在页面属性对话框中，设置链接选项中的大小
任务二
超级链接
为1 6
像素，
链接
颜色
为
“#66

66cc”， 变换图像颜色为“#ff6600”，已访问链接为“#663366”，
活动链接为“#99cc00 ”，下划线样式为“仅在变换图像时显示
下划线”。设置的对话框如下图所示：
完善报告 填写实训总结，并上交实习报告。
自主练习

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

任务一
创建图像
热点链接
操作要求及步骤
在地图中创建热点链接
打开网页，在如下图所示的位置插入图片， 图片为“鼠标经过的图
片”，链接到本页的“冠军杯新闻”处（提示：利用锚点链接）
任务二
打开“”网页，在下载资源文本中将教师提供的“”放入站点，做
制作跳转
成的效果是 点击“下载资源”就能下载“”，同理在“联系我们”
菜单
中设置邮件下载
完善报告 填写实训总结，并上交实习报告。
自主练习

剩余时间，可进行自主练习，内容不限，但不可违反上机纪律
实训总结 本次实习内容较多，大部分学生能在规定时间内完成任务，较好。
课题 使用表格布局页面 教学课时 2课时
1、了解表格在网页设计中的作用。
2、掌握网页中表格的制作方法、表格属性的设 置方法
以及单元格属性的设置方法，能够在单元格中正确插入
知识目标
文字和图片。
教学目标
3、能够根据网页设计内容，正确布局表格的结构，掌
握表格嵌套的设计方法。
1、利用对比学习，培养学生知识迁移的能力。
能力目标
2、通过用表格结构设计 网页，使学生进一步理解表格

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

(25min)
法。并插入一个2行1列，表
表格的设置
格宽度800像素，边框粗细0
像素的表格。
像的方法，
探索插入表
格的方法。
插入表格，
通过实际操
作强化对表
格属性的认
识。

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

一、 网页框架和表格基本操作
课堂小结
二、 表格的合并和拆分
(5min)
三、 表格嵌套
课堂作业
(5min)
通过表格的嵌套及分析，对页面进行布局。需要加强学生对表格合
教学反思
并和拆分的运用
实训课题 表格布局实例分析 实训课时 2课时
完成教材第五章的表格

1、 能运用表格为页面布局
2、 能掌握表格的嵌套操作
实训目标
3、
4、 能做出“超越公司简介”页面。
1、掌握插入、编辑表格的方法及表格的属性设置。
实训重点
2、掌握单元格属性的设置。
实训难点 表格的嵌套在网页设计中的应用
实训方法 上机实训
实训准备 教案、素材、案例、教材、计算机机房
13、 对照实习报告的要求，完成上机任务；
14、 任务完成后及时要求教师考评；
实训要求
15、 完善实习报告，填写实训总结；
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。
实训过程
操作要求及步骤
制作如下图所示的界面：
操作要求：
1、 top区
任务一
（1）一行三列：
创建图像
788px=128+540+120Logo+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+628500=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课时
1、能掌握框架的基本操作。
知识目标
2、能理解框架技术的实质。
教学目标 能力目标 能用框架布局页面
通过自主探究，使学生掌握软件的使用规则，培养学生
情感目标
自主学习的能力。
框架的基本操作
教学重点

教学难点 用框架为页面布局
1.教学场所：多媒体教室
教学资源 2.教学设备：安装有Dreamweavercs5软件的计算机
3.教学资料：辅助课件.多媒体教学软件
教法 讲解法、任务驱动教学法 学法
教学过程
学生活
过程安排 教学内容 教师活动
动
在学习过表 格布局后，我们展示框架页面预习并思考通过实例
可以做一些常规的页面布局给学生，引发框架页面布来 展示，引
了，但有些特殊效果我们却学生思考 局 发学生思
无法实现。如图所示的网页：考特 殊效
今天我们来学习另一种页面果如何实
布局技术——框架。 现，培养学
生积极思
考问题的
能力
一、基本概念：框架是一种认真听讲并
加强学生对学生只
网页布局技术。 对概念进行
二、创建框架与框架集 消化理解

框架布局的有在牢固
1、手动设计
2、插入预定义框架
小组讨论法
设计意图
导入新课
(5min)
理解并进行
简单操作
的掌握了
基本概念
后才能为
三、创建嵌套框架
任务一
基本知识
(35min)
四、选择框架和框架集
1、在编辑区中选择
任务二的
2、在框架面板中选择
学习打下
五、删除框架
基础

六、保存框架与框架集文
件

完成如下图所示的页面： 将学生分7
要求如下：
（1） topFrame：
（2） 高：100px
讨论如何
才能实现如
图所示的效
组，并引导学
果并总结
生 分组讨论
如何完成如
通过实例，
培养学生
分析问题、
解决问题
的能力。
（3） 表格：2x2，宽-788图所示的效
px，高-100px
（4） 高：100=75+25
（5） 宽：788=128+660
（6） 第一行：Logo+Bann
er
任务二
（7） 第二行：当前页位
实例操作
置信息+导航栏
(40min)
（8） 导航栏：1x7表格
（9） 宽：660px
（10） 高：25px
（11） 字号：9pt
（12） 行高：14pt
（13） mainFrame：
（14） 表格：2x2
（15） 宽：788Px，高：4
00Px
（16） 边框：5px，间距：
果

5px
（17） 表格：3x1
（18） 宽：788px，高：4
5px
（19） 边框：0px，间距：
0px
四、 框架基本概念
二、创建框架与框架集
课堂小结
(5min)
三、创建嵌套框架
四、选择框架和框架集
五、删除框架
六、保存框架与框架集文件
设计一系列框架型页面，然后将之实现。要求结合超链接的相关
课后作业
知识。
(5min)

本次主要讲述框架和框架集布局页面，运用实例学生加深了对框架
教学反思
的理解，运用起来得心应手。14高31班学生学习氛围待加强
实训课题 框架布局实例分析 实训课时 2课时
5、 能掌握布局表格和布局单元格的基本操作。
实训目标
6、 能在布局模式下对页面进行整体布局。
实训重点 掌握布局表格和布局单元格的基本操作。
实训难点 项目的实现

实训方法 上机实训
实训准备 教案、素材、案例、教材、计算机机房
16、 对照实习报告的要求，完成上机任务；
17、 任务完成后及时要求教师考评；
实训要求
18、 完善实习报告，填写实训总结；
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。
实训过程
操作要求及步骤
步骤1选择［文件］菜单栏中的［新建］命令，创建一 个新的页面，
并将其命名为“个人主页”。
步骤2选择［插入］工具栏中［布局］任务栏中的 ［框架］命令，
单击按钮，选择下拉菜单的“顶部和嵌套的左侧框架”命令。
步骤3弹出［框架标签辅助功能属性］对话框，将网页中框架的各
个部分进行命名。
任务一 步骤4选择［窗口］菜单栏中［框架］命令。
利用框架步骤5右侧的面板中就加入了［框架］面板，选中“topFrame”框
排版 架进行编辑。
步骤6页面下方出现了“topFrame”框架的［属性］面板。对
“top Frame”框架进行编辑。步骤7选中“mainFrame”框架进行
编辑，页面下方出现了“ma inFrame”框架的［属性］
面板，对“mainFrame”框架进行编辑。
步骤8 选中“leftFrame”框架进行编辑，页面下方出现了
“leftFrame”框架的［属性］面

板，对“leftFrame”框架进行编辑。
步骤9选择［文件］菜单栏中的［保存全部］命令，对文件进行保
存。
步骤10弹出保存整体文件的对话框，为文件命名为“”。
步骤11对各个框架部分进行保存，为各个框架进行命名。
步骤12单击F12，在浏览器中预览效果。
创建框架集，可以自己设计，也可以从预定义的 框架集中选择，
还可以修改一个已存在的Dreamweaver文件来创建。
任务二 实验内容：
创建框架步骤1选择［修改］菜单栏中的［框架集］命令。
集 步骤2根据需要在其子菜单中选择任意一个分割命令。
步骤3若要删除一个子框架，将其边框拖至页面或其父框架之外即
可。
完善报告 填写实训总结，并上交实习报告。
自主练习

剩余时间，可进行自主练习，内容不限，但不可违反上机纪律
实训总结 本次实训学生需要的掌握的内容较多，对于框架布局的位置要准确
掌握，难度较大
课题 添加动画 教学课时 2课时
1、掌握在网页中添加各种动态元素
教学目标 知识目标
2、掌握Flash属性设置

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

规划一个多媒体网站导航条
教学难点

1.教学场所：多媒体教室
教学资源 2.教学设备：安装有Dreamweavercs5软件的计算机
3.教学资料：辅助课件、多媒体教学软件
教法 讲解法、任务驱动教学法 学法
教学过程
学生活
过程安排 教学内容 教师活动
动
试想网页中只有文字和将本次课的欣赏作品通过作品
图片，那么网页跟杂志报作品展示给并思考
导入新课 纸还有什么区别呢？动态学生，学生在
(5min) 元素能够更加丰富页面的欣赏精美网
效果，是网页是一大特色。 页的同时思
注意：不要把动态 元素和考如何完成
来展示，
引发学生
思考如何
实现，培
养学生积设计意图
小组讨论法

动态页面划上等号。 该作品 极思考问
题的能力
一、flash文件基本知识 教授新知识，吸收动画
1、Flash源文件：*.fla 为任务二的新知识
2、Flash影片文件：*.swf 完成做准备
二、添加flash动画文件
Flash动画是一种基于矢
量格式的多媒体动画元
件，它体积小，其扩展名
为.sw f。
任务一 Flash动画被广泛应用于
让学生吸
收新知识，
为后面的< br>实例操作
打下基础
基本知识 网页中。
(35min) 操作步骤：
1.光标定位
2.插入flash文件
3.保存、预览
三、添加flash按钮
Dreamweaver中内置了一
些flash按钮，用 户可以
很方便将他们添加到网页
中。

注意：在页面中添加
f lash按钮和flash文本
之前必须先保存网页。
操作步骤：
1.光标定位
2.插入flash按钮
3.设置按钮属性
4.保存、预览
四、添加flash文本
插入—媒体—Flash文本
五、为网页添加音频
插入—媒体—插件
要求：制作如下图所示网页，插入三行一列表格，插入Flash动画要求
动画大小宽高为400*300，第二行插入图片，第三行输入文字并排版，
最后得到的结果如 下图所示：
任务二
拓展训练
(40min)
课堂小结
一、 添加多媒体元素使页面具有动态效果

(5min) 二、 插入Flash按钮和Flashpaper
三、 插入播放器
课后作业
(5min)
用Flash按钮或文本制作一个导航条，然后为页面添加背景音乐。
学生对动画、音视频有敏锐的触觉，学习起来颇有兴致。
教学反思
实训课题 添加音频和视频 实训课时 2课时
7、 掌握插入表格、图片、背景图片设置
实训目标
8、 掌握插入Flash文本、Flashpaper、Flash视频、背景音乐等
实训重点 Flash属性、Flash元素
实训难点 Flash元素
实训方法 上机实训
实训准备 教案、素材、案例、教材、计算机机房
19、 对照实习报告的要求，完成上机任务；
20、 任务完成后及时要求教师考评；
实训要求
21、 完善实习报告，填写实训总结；
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。
实训过程
操作要求及步骤

要求：（利用DWcs3版本）
一、插入swf动画
1、 新建站点和默认图像文件夹
2、 新建网页文件，插入 1行2列的表格，表格宽度720px，边框
粗细、表格间距、表格边距都为0.选择第二个单元格设置 宽度
为600px，高度设置为100px。然后在第一个单元格插入，并且
水平和垂直居中； 在第二个单元格里插入背景图片（选择单元
格——点击拆分——找到td——在td后空一格——选择< br>background——选择图片插入），并将图片设置为宽高600px，
任务
制
100px。保存
作3、 在第二个单元格插入的Flash，并将Flash设 置为宽高600px，
100px规格，并设置Flash为透明
二、插入Flash按钮：
1、利用DWcs3版本插入导航栏：插入一行一列的表格，宽度为
720px，边框粗细、表 格间距、表格边距都为0，居中对齐。然后
点击插入Flash按钮，选择下图所示的按钮并输入文字， 如图所示：
2、然后在导航栏的下一行插入一行2列的表格，宽度为720px，
边框粗细、 表格间距、表格边距都为0，居中对齐。左边单元格设
置为宽200px，然后再嵌套一个表格，3行1 列宽度为100%，边框
粗细、表格间距、表格边距都为0，居中对齐。右边单元格插入一
行一 列宽度为98%的单元格居中对齐，边框为1，颜色为#FF00FF，
然后在此表格中插入Flash 文本，字体为宋体，大小30px，输入
Flash网
页

文本：我的 个性空间，颜色为#FF0000，滚动颜色设置为：#00FF00，
另存为，如下图所示：
4、 插入Flashpaper：首先在电脑上安装Flashpaper软件，然后
将“” Word文件转换为文件，将文件插入到网页中，设置
Flashpaper宽高分别为480和400 px
三、插入播放器
1、在左边的三个单元格范围中，将光标放入第一个单元格，点击插入媒体中的图像查看器，将Flash命名为abc，并将播放器设置
为宽高180,135 < br>2、点击右边的Flash元素，对图片进行设置，选择选项imageURLs
（表示图片的位 置），选择你需要展播的图片，showControls（显
示控制条）设置为否，slideAut oPlay（自动播放）设置为是，
slideDelay（每张图切换停留时间）设置为2，slid eloop（循环
播放）是
3、在左边第二个单元格插入媒体——插件，插入sound声音 ，设
置插件高宽分别为180,41，参数设置为，autostartfalse
4、插入背景音乐
完善报告 填写实训总结，并上交实习报告。
自主练习

剩余时间，可进行自主练习，内容不限，但不可违反上机纪律
实训总结 本次实训内容较多，网页添加音频和视频使得网页内容更加丰富多
彩，学生兴趣较浓
课题 编辑和创建APDIV元素 教学课时 2课时

1、掌握层的概念
知识目标 2、掌握如何编辑APDIV层
3、掌握层的嵌套
教学目标
能力目标
2、能将层和时间轴联系起来制作漂浮效果
通过自主探究，使学生掌握软件的使用规则，培养学生
情感目标
自主学习的能力。
教学重点 层的基本操作
教学难点 层的高级应用
1.教学场所：多媒体教室
教学资源 2.教学设备：安装有Dreamweavercs5软件的计算机
3.教学资料：辅助课件、多媒体教学软件
教法 讲解法、任务驱动教学法 学法
教学过程
学生活
过程安排 教学内容 教师活动
动
层是一种H TML页面元展示课前准欣赏作品通过作品
素，可被放在页面的任意备的层的叠并思考
导入新课 位置，在网页排版定位方加，引导学生
（5min） 面具有独特优势。 思考：如何制
作这样的网
页？
展示，引
出本次课
的主题
设计意图
小组讨论法
1、掌握层的基本操作。

一、创建APDIV元素
什么是ApDiv？
强调重点： 理解A PDIV主要是以
1、作为容器，元素并做基本知识
讲解为AP元素（绝对定位元素）,可以放 置其好笔记
是一种HTML网页元素，一他网页元素。 分组讨论主，为任
般称为“层”。即网页内2、灵活定位。 教师提出务二的综
容的容器，包含 文本，图分组让学生的两个任合实例打
像或其他任何可以在讨论如何完务并提出下理论基
任务一
HTML文档正文中放入的成左图所示解决方案
基本知识
内容。且可以精确定位在的任务：
（20min）
网页中的任何地方。
任务二
综合实例
二、编辑APDIV元素
制作如图
立体式的
（25min） 1、调整层的大小
叠加图片
2、层的层次关系
3、层的首选设置
4、层的对齐
三、制作如图所示的网页
粉色的图
层？
2、 如何
绘制大小
一致且背
景颜色为
理论知识
1、 如何一所学的
巩固任务
础

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

一、 如何创建APDIV层
课堂小结
二、 编辑APDIV层
（5min）
三、 实例操作
课后作业
（5min）
通过编辑和创建APDIV层来实现图片的立体感，丰富了网页内容，
教学反思
通过实例演示加深了学生对ap层的认识
课题 层的可见性设置 教学课时 2课时
制作如图所示的网页，提示：利用层的布局
1、掌握AP层的创建与属性
知识目标
2、掌握AP层的可见性操作
教学目标
1、学会利用AP层制作立体效果网页
能力目标
2、掌握AP层绝对定位应用

通过自主探究，使学生掌握软件的使用规则，培养学生
情感目标
自主学习的能力。
1、 层的基本操作
教学重点
2、 层的应用及嵌套
教学难点 AP元素
1.教学场所：多媒体教室
教学资源 2.教学设备：安装有Dreamweavercs5软件的计算机
3.教学资料：辅助课件、多媒体教学软件
教法 讲解法、任务驱动教学法 学法
教学过程
学生活
过程安排 教学内容 教师活动
动
前面所学的表格和图片都展示三维图欣赏作品通过作品
是二维的，如何我们先建片效果
立了三个层，每个层都有
一个图片，他们是层叠的
导入新课
效果，现在要添加两个按
(5min)
钮，使得我们点击一个按
钮可以隐藏 层，点击另一
个按钮可以显示层，这是
怎么做的呢？
养学生积
极思考问
题的能力
实现，培
并思考 来展示，
引发学生
思考如何
设计意图
小组讨论法

任务一 一、AP元素面板 演示 观看教师
演示 基本知识 1、层的可见性
(20min) 2、防止层重叠
让学生吸
收新知识，
为后面的
实例操作
打下基础
培养学生
积极创新
及小组沟
页效果：要求点击“隐藏”用行为来实如何实现
通能力
激发学生
时，home隐藏；点击“显现 该功能
自学能力
二、制作如下图所示的网引导学生运分组讨论
示”时，home显示
操作步骤如下所示：
学生分组讨推荐代表
论后得出结完成实例
1、 如图所示是先建立两论，并指派一
个按钮，一个是“隐名代表尝试
藏”一个是“显示”
任务二
拓展训练
(55min)
2、 鼠标点击想要隐藏的曾，然后我们在属性栏，将可见性
设置为hidden，也就是隐藏
层
完成实例，并
进行补充
3、 在窗口菜单中，打开行
为窗口
4、 选中“显示”按钮，在行为
窗口，点击添加按钮，在打
开的菜单中，选择【显示--
隐 藏元素】
5、 打开显示隐藏元素对
话框，选择刚才隐藏了
的那个曾apdiv4， 点
击下面的显示按钮。然

后点击确定
6、 接着选中隐藏按钮
7、 在行为窗口点击添加
按钮，然后选择【显示
隐藏元素】
8、 在打开的对话框中，选
中apdiv4，点击下面
的隐藏，然后点击确定
按钮。
9、 预览
课堂小结 1、 AP元素面板
(5min)
课后作业
(5min)
通过运用层的隐藏显示属性及事件onclick的灵活运用，制作常见
教学反思
特效，学生较感兴趣，较好。
实训课题 DIV与表格的转换 实训课时 2课时
2、 隐藏和显示行为
制作立体三维网页效果，并添加显示和隐藏行为
9、 能掌握布局表格和布局单元格的基本操作。
实训目标
10、 能在布局模式下对页面进行整体布局。
实训重点 掌握布局表格和布局单元格的基本操作。
实训难点 项目的实现
实训方法 上机实训

实训准备 教案、素材、案例、教材、计算机机房
22、 对照实习报告的要求，完成上机任务；
23、 任务完成后及时要求教师考评；
实训要求
24、 完善实习报告，填写实训总结；
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。
实训过程
操作要求及步骤
步骤1选择［文件］菜单栏中的［新建］命令，创建一 个新的页面，
并将其命名为“个人主页”。
步骤2选择［插入］工具栏中［布局］任务栏中的 ［框架］命令，
单击按钮，选择下拉菜单的“顶部和嵌套的左侧框架”命令。
步骤3弹出［框架标签辅助功能属性］对话框，将网页中框架的各
个部分进行命名。
步骤4选择［窗口］菜单栏中［框架］命令。
任务一
步骤5右侧的面板中就加入了 ［框架］面板，选中“topFrame”框
利用框架
架进行编辑。
排版
步骤6页面下方出现了“topFrame”框架的［属性］面板。对
“topFrame”框架进行编 辑。步骤7选中“mainFrame”框架进行
编辑，页面下方出现了“mainFrame”框架的 ［属性］
面板，对“mainFrame”框架进行编辑。
步骤8选中“leftFram e”框架进行编辑，页面下方出现了
“leftFrame”框架的［属性］面
板，对“leftFrame”框架进行编辑。

步骤9选择［文件］菜单栏中的［保存全部］命令，对文件进行保
存。
步骤10弹出保存整体文件的对话框，为文件命名为“”。
步骤11对各个框架部分进行保存，为各个框架进行命名。
步骤12单击F12，在浏览器中预览效果。
创建框架集，可以自己设计，也可以从预定义的 框架集中选择，
还可以修改一个已存在的Dreamweaver文件来创建。
任务二 实验内容：
创建框架步骤1选择［修改］菜单栏中的［框架集］命令。
集 步骤2根据需要在其子菜单中选择任意一个分割命令。
步骤3若要删除一个子框架，将其边框拖至页面或其父框架之外即
可。
完善报告 填写实训总结，并上交实习报告。
自主练习

剩余时间，可进行自主练习，内容不限，但不可违反上机纪律
实训总结 本次实习内容较多，操作性较强，学生需加强练习
课题 晃动的图片 教学课时 2课时
1、理解行为、事件、动作的概念
知识目标
教学目标
2、掌握添加行为应用实例
能力目标 1、学会区分源文件和影片文件格式

2、应用行为
通过自主探究，使学生掌握软件的使用规则，培养学生
情感目标
自主学习的能力。
1、行为面板使用
2、常见事件OnMouseOver鼠标经过OnMouseout鼠标 离开OnLoad
教学重点
打开OnUnload关闭
3、设置文本
教学难点 行为面板使用
1.教学场所：多媒体教室
教学资源 2.教学设备：安装有Dreamweavercs5软件的计算机
3.教学资料：辅助课件、多媒体教学软件
教法 讲解法、任务驱动教学法 学法
教学过程
学生活
过程安排 教学内容 教师活动
动
1、 如何制作弹出信息窗演示弹出信欣赏教师通过效果
口？
导入新课
2、 如何制作晃动图片？ 片、弹出窗口分组讨论学生兴趣
(5min)
3、 如何制作弹出窗口？ 网页，激发学如何实
生兴趣
任务一
基本知识
一、晃动的图片
1）什么是行为？
现？
为任务二
实例制作
打下基础
小组讨论法
设计意图
息、晃动图的展示并展示激发
讲解基础知听讲并做
识并强调重好笔记

(20min) “行为”可以说是点
Dreamweaver中最具特色< br>的功能之一，它提供了很
多实用的动作，每个动作
可以完成特定的任务，为
网页 添加不少特殊效果。
二、行为面板的使用1、
1、打开行为面板（快捷方
式：Shift+F4）
2、认识行为面板
显示设置事件
显示所有事件
添加行为
删除事件






移动事件顺序
命令控制菜单
三、设置文本行为
1、状态栏文字
2、设置文本域文字（注意
使用动作的对象必须要有
个ID）

三、实例制作
1、制作晃动图片，鼠标经过时（onmouseover）晃 动，鼠标离开后
（onmouseout）不晃动
技巧：添加行为的时候一般遵循3个步骤：
任务二
?选择对象
拓展训练
?添加动作
(55min)
?调整事件
2、制作弹出窗口（利用添加行为里的打开浏览器窗口）
3、制作弹出信息，弹出信息为“欢迎访问本站点”，事件为onload
4、设置文本行为

一、 弹出文字信息
课堂小结 二、 制作弹出窗口
(5min) 三、 制作晃动图片
四、 设置文本行为
课后作业
(5min)
本次主要应用行为制作晃动的图片的效果，操作较容易，学生掌握
教学反思 较好，但是事件onclick和onmouseover及onmouseout的掌握学生待
加强。
实训课题 交换图像
11、 掌握AP元素面板的使用
实训目标
12、 理解原始档图像和交换图像概念
实训课时 2课时
网上搜索弹出信息网页及广告窗口，研究如何制作

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、 熟悉AP元素面板
实训目标
14、 掌握添加拖动AP元素
实训重点 拖动AP元素面板
实训难点 项目的实现
实训方法 上机实训
实训准备 教案、素材、案例、教材、计算机机房
28、 对照实习报告的要求，完成上机任务；
29、 任务完成后及时要求教师考评；
实训要求
30、 完善实习报告，填写实训总结；
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。
实训过程
操作要求及步骤
三、 拼图游戏实训
1、 新建网页，将页面背景设置为图片
2、 绘制APDIV层，宽高分别为220,220，背景颜色为#FFCCFF
任务一
3、 另外绘制四个APDIV层，宽高分别为110，110，背景颜色为
拼图游戏
#FFCCFF，并将教师准备的素材、、、4jpeg分别插入四个层
4、 利用辅助线将层对齐
5、 将四个层分别移动到大层里，将花朵拼凑整齐，如图所示
实训课时 2课时

6、 分别将四个小层添加行为——拖动ap元素，设置如图所示：
7、四个小层都设置完成后再将小层拖出大层，顺序打乱，保存
完善报告 填写实训总结，并上交实习报告。
自主练习

剩余时间，可进行自主练习，内容不限，但不可违反上机纪律
实训总结 本次课通过拼图游戏 的制作，让学生深刻理解AP层在DW的应用，
运用AP属性设置不同的效果，较好。
课题 修改属性特效及动态菜单制作 教学课时
1、掌握表格布局页面
知识目标 2、掌握改变属性
3、掌握行为“显示-隐藏”的正确操作
教学目标
能力目标
2、应用改变属性
通过自主探究，使学生掌握软件的使用规则，培养学生
情感目标
自主学习的能力。
1、常见事件OnMouseOver鼠标经过OnMouseout鼠标离开
教学重点
2、AP元素隐藏显示
教学难点 属性高height、宽width的设置
1.教学场所：多媒体教室
教学资源
2.教学设备：安装有Dreamweavercs5软件的计算机
1、学会利用不同行为制作网页效果
2课时

3.教学资料：辅助课件、多媒体教学软件
教法 讲解法、任务驱动教学法 学法
教学过程
学生活
过程安排 教学内容 教师活动
动
1、 百度搜索图片时鼠标演示图片放欣赏教师通过效果
经过图片时图片经常大及导航栏的展示并展示激发导入新课
会自动放大，如何实效果并引导分组讨论学生兴趣
(5min)
现？
2、 导航栏如何制作？
学生思考 如何实
现？
设计意图
小组讨论法
一、 如何制作如下图所示效果网页？（具体要求：当鼠标经过
图片时图 片自动放大；当鼠标离开图片时图片缩小到原来大
小）
操作步骤如下：
任务一
修改属性
特效
(35min)
1、 新建网页，页面背景颜色为浅灰色
2、 插入3行3列的表格，合并第一行，并将第一行设置为深灰色，
输入“索尼s630款图 片”，居中对齐，字体大小为24，紫红色，
黑体
3、 在第二行第三行分别插入图片、、、 、、，并将图片设置为宽高分别
为200,120，并将图片ID分别更改为p1…p6
4、 给p1添加行为-修改属性-，修改的宽高值如下图所示：
5、同理修改p2….p6

二、 动态菜单制作
1、 新建页面里绘制一个APDIV层，背景颜色为# FF33FF在层里
插入一行4列的表格，宽度为100%，边框，边距，间距都
为0
2、 分别在表格里输入“新闻中心”、“娱乐频道”、“电脑网络”、
“技术支持”，选中行 设置行高25px，居中对齐
任务二
动态菜单
制作
(40min)
3、 APDIV层设置行高为25px，并将层重新命名为dhl
4、 在新闻中心下面再 绘制一个APDIV层，并将层重命名为
menu1，设置背景颜色为#FCF，在层里插入4行一列的 表格，
宽度设置为100%，边框，边距都为0，间距为3，输入文字
国际新闻、国内新闻、体 育新闻、英语新闻
5、 将“新闻中心”添加行为显示- 隐藏，事件onmouseover，
如下图所示
6、 同理，添加行为显示- 隐藏，事件onmouseout
7、 将menu1层跟dhl层靠在一起，给menu1同样添加显示-隐
藏行为
课堂小结 五、 修改属性特效（宽width、高height、边框border等）
(5min)
课后作业
(5min)
本次课通过修改属性特效掌握图片宽高的设置，理解图片大小改变
教学反思
效果。通过动态菜单栏的制作，灵活运用AP层。
计划课时 2课时 实用课时 2课时 所用教材
DreamweaverCS5
网页制作

六、 制作动态菜单栏（AP元素）
搜索百度图片及观察网页导航栏并对照教师上课内容

课题 效果行为应用
DreamweaverCS5网页制作实操性比较强， 知识点零散，为将知识点系统
化、增强学生职业意识及就业意识，特将教材以时下最火的淘宝为例，教材处理
联系到最近特别火的“双十一”现象，以学生为主体，学生自主性学习
为主导进行网页制作。
与前后内容
第一模块DW基本操作(学生已学习网页基础制作）—DW添加行为效果(部
联系

分增加)—DW网页制作实际问题—网页实例，学会综合应用
1、熟悉行为面板
知识目
2、掌握添加行为面板中的效果行为
3、掌握如何添加增大收缩、挤压、显示渐隐、晃动、滑动
等特效
教学目的
能力目
培养学生对问题进行分析以及解决问题的各种实践能力，让学
生在自学的基础上掌握更 深的知识，能举一反三，融会贯通。
情感目
通过自主探究，使学生掌握软件的使用规则，提高 学生的审美
情趣，不断提升学生的信息化素养。
1、 行为的应用
教学重点 2、常见事件onclick、onmouseover、onmouseout、onload、onun load
的灵活运用

教学难点
如何运用行为制作常见网页特效

任务驱动法

自主学习与小组讨论相结合
电脑、多媒体教室
教学方法
学习方法
教学教具

教学过程

复习旧
导入新课 任务分析 分组讨论 总结延伸 教学小结
时间分配
知
5分钟 5分钟 15分钟 40分钟 25分钟 5分钟
1.教师准备:“锐天专营店”网站主页，视频及学生任务分配
教学准备

2.学生准备:“锐天专营店”网站主页制作，不加任何特效行为，预习行
为效果
教学环节
时间安排
教师活动 学生活动 设计意图
复习旧知
上次课我们通过绘制AP层和插入
（5分钟）

欣赏优秀作品并思复习旧知，让学
表格、图片等操作，制作了淘宝首考自己作品的不足 生遗忘减少且
页图。现在给大家展示优秀作品并
引导学生回忆操作步骤
为新课知识做
铺垫
1、观看图片之时分通过火爆的双
组讨论想到了什么十一快递图片
东西？ 以及视频的视
导入新课
1、以快递图片引出最近大火的双
（5分钟）
十一
2、由双十一提出问题，在网上能
买到哪些东西？
3、以常见的网上鞋店为例，引出
本次课的主题
2、由火爆的双十一觉冲击，让学生
快递联想到网上可坚信电子商务
以购买哪些物品？ 发展的美好前
3、思考如何完成本途以及学习网
次学习任务 页制作的必要
性

1、学生思考与理解
自己提出的相关讨
论问题。
首页，大致分析如何完
2、小组讨论首页对
比不同点
成，由于前面学生已经做
3、明确自己本节课
的学习任务。
过类似网页首页，只需大
4、积极思考教师提
出的问题
体分析如何完成即可
1、展示“锐天专营店”
2、教师展示“锐天专营
讨论问
店”首页1和“锐天 专营
题
店”首页2对比，让学生
创设情
去发现它们之间的不同
境
1、通过“锐天
专营店”首页，
复习旧知
2、通过两个首
页对比，提出本
次课任务，激发
学生自主学习
能力
任务分析
（15分
钟）
分组讨论
（35分
钟）
点
3、总结不同点，提出本
次课的任务
4、教师列出任务点，提
问：如何利用DW软件完
成它？
1、经过小组讨论 得出任1、在小组中积极思培养学生协作
交流能力，加深
师生、生生之间
的感情，拉近 距
务后，小组之间相互协作考，主动探究，互
小组协
总结任务：
作
（1）广告条制作
师生共
（2）下拉式菜单制作
探
（3）图片属性的更改及
链接的操作
知识及教师的步骤
提醒可自主尝试完
合作
相交流意见，分工
2、运用课前己掌握离，形成轻松融
洽的课堂学习
气氛，同时能及

2、教师要积极鼓励学生，成任务 对问题进行思考，互相探
讨，观察各组学生的制作
过程以及学生活跃程度，
记录学 生的学习进展，指
正容易出错的操作，对各
组的作品作出适时的点
评，对于大多数学生 遇到
的常见性问题，教师要及
时统一提出并给予指导
（包括帮助学生树立正
确 的网络学习意识）。
3、完成后请制作优秀的
组员上台演示
老师给予适当的点拨和
解决问
讲解，并组织2名优秀代益，根据提出的方
题
表来演示作品
成果交
汇报自己的作品，
流
互相交流学习。
师生小1、展示学生自评表与互
结
各组运用事先准备
案每组派代表展示各小组成员集思广
时发现学生操
作中的失误，以
便及时给予纠
正。
培养学生解决
问题的能力、个
人责任以及集
体荣誉感。
培养学生互 评
和自评能力，激
发学生的竞争
评表，组织学生在平台上好的自评与互评
反馈 评进行自评、互评及常用工表，派代表上台讲

价 具熟练投票，每组派代表解评价结果。
上台讲解本组互评整体
数据。
2、最后教师进行总结性
评价和对优秀作品进行
奖励
各组根据收集网络
评价结果，反思自
己的不足，并撰写
学习小结。
意识。
总结延伸
（25分
1、对学生作品进行收集整理
钟）
2、对学生在尝试制作任务所遇到
的问题给予总结及对每个同学的
作品给出点评
3、针对学生对操作工具难易程度
投票情况，在进行知识点在线题库
测试巩固
4、拓展练习：根据今天所学行为
应用，每位同学课后浏览不同网
页，收集不同广告条、下拉 式菜单
及不同链接的形式，并总结。
1、作品完成后反
思继续学习自己
还没 掌握的知识，
欣赏优秀的作品
并给与评价，思考
自己的不足。
2、完成课后的拓
展练习
1、对学生作品
给与反馈，纠
正
或表扬，强调
易
错点，巩固知
识。
2、培养学生创
新能力和创造
性思维
教学小结
(5分钟)
通过本次课的学习，同学们需要掌握常见行为应用：
1、隐藏显示；
2、效果。理 解常见事件onmouseover、onmouseout、onclick、onload、
onu nload含义并灵活运用；
3、完成教师发放的，严格按照上面的评分评价（表格见附件）

课后作业
网上搜索不同下拉菜单及广告条，动手尝试以“时尚资讯”为主题制 作
首页并添加广告条和菜单及链接等
板书
效果行为应用
一、 广告条制作
1、 绘制父层
2、 绘制子层
3、 插入图片
4、 添加行为
二、 下拉式菜单制作
1、 绘制AP层
2、 插入图像和输入文字
3、 添加行为
三、
属性更改制作

1、 宽高增大
2、 宽高还原
3、 添加行为
4、
添加超链接

教学反思
本次授课我主要采用任务驱动法，以任务的形式激发学生学习兴趣。学生主
要以小组讨论法进行自主学习，把学生当作学习的主体。充分调动了学生学习
的自主性和积极性。但是本 次课也存在不足，比如在复习以前常见事件
onclick、onmouseover应该再加以强调， 让学生在学习新知识的同时也复习旧
知。
附件：课堂自测及自我评价表（每人一份）
课堂自测及自我评价表
知识测评 自我评价

打开（10）
鼠标经过
（10）
点击（10）
关闭（10）
鼠标离开
（10）
本次课学
习的行为
有：（10）
是否提前预习（10）
是否积极参与讨论（10）
是否参加上台演示（10）
我在学习中感到快乐
（10）
本节课知识都掌握了吗
（10）
测评：将常见事件对应的英文写在后面的空格里，共50分；
评价：每个自我评价都是10分，可根据自己的实际情况，在后面的空格给自己打分
实训课题
实训图片展播实例

9、 掌握显示隐藏行为应用
实训课时 2课时
实训目标 10、 掌握APDIV层的绘制
11、 掌握图像的插入和属性设置
1、 表格的拆分和合并
实训重点
2、 APDIV层的绘制
实训难点 行为的综合运用
实训方法 上机实训
实训准备 教案、素材、案例、教材、计算机机房
31、 对照实习报告的要求，完成上机任务；
32、 任务完成后及时要求教师考评；
实训要求
33、 完善实习报告，填写实训总结；
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。

实训过程
操作要求及步骤
1、 首先用ps或者其他软件将几张图片的大小p成一样的。比如笔者把
三 张图片都p成了200x268的大小
2、 打开Dreamweaver，新建一个网页（笔者这里建立一个html类型的
网页）
3、 点击菜单栏：插入-->表格。插入一个1行1列的表格
4、 把鼠标放到刚刚新建的APDiv里边，点击菜单栏的：插入-->图像，
选择一张需要插入的图片
5、 按上面的方法依次添加其他几个APDiv，并在里边插入图片
任务
图片展播
6、 接下来插入一个APDiv，然后再里边添加一个1行3列的表格
7、 鼠标指针放到表格第一个方框中，单击菜单栏：插入-->表单-->按钮。
操作如图
8、 鼠标点中添加的按钮，然后再下方属性面板中，把值修改为1
9、 按照上述步骤依次为表格的第二个框、第三个框添加一个按钮，并把
属性值改成2和3。如图
10、 把几个APDiv移动到同一个区域。
11、 鼠标点击第一个方框的按钮，点击标签检查器行为面板下方的
“+”号，弹出的菜单中选择“显示- 隐藏元素”
12、 预览
完善报告
自主练习

填写实训总结，并上交实习报告。
剩余时间，可进行自主练习，内容不限，但不可违反上机纪律

实训总结 本次实训内容较充实，学生操作较好。
课题
认识和编辑CSS

1、了解CSS样式表
知识目标
教学课时 2课时
2、掌握新建CSS样式表及从外部导入样式表
1、能掌握CSS的相关基本操作
教学目标 能力目标
2、能了解CSS相关知识点
通过自主探究，使学生掌握软件的使用规则，培养学生自主
情感目标
学习的能力。
1、创建CSS样式
教学重点
2、设置CSS样式的属性
教学难点 设置CSS滤镜
1.教学场所：多媒体教室
教学资源 2.教学设备：安装有Dreamweavercs5软件的计算机
3.教学资料：辅助课件、多媒体教学软件
教法 讲解法、任务驱动教学法 学法 小组讨论法
教学过程
学生活
过程安排 教学内容 教师活动
动
网页制作学到现在，我们通过和进行对讨论两套网通过两个网
导入新课
基本上的一些操作都知道比，学生分组页的差别并页修改前后
（5min）
了，做一个完整的网站是没讨论并找出他标注出来 的效果，让
设计意图

有太大问题了，但是页面的们的差别
美观还有待考究。那如何美
化这些页面呢？
学生自己去
发现它们之
间的差别并
探讨
一、 关于CSS样式 < br>讲解CSS和适当做笔记理解并掌握
HTML之间的区并理解教师必要的基础
CSS样式 作为一种格式化网
页的标准方式，主要用来定
别并适当举例的讲解
义网页内容的编排、显示、
说明
格式化及特殊效果，扩展了
分组竞赛，每师 的设置的学习积极性
HTML的功能，使用它可以十
个小组完成教竞赛活动
分灵活地控制网页的外观。
学活动中的任积极参与竞
：CascadingStyleSheets层
任务一
叠样式表。
CSS基础知
2.在Dreamweaver中可定义
识
三种类型的CSS样式，即自
（55min）
定义CSS样式、重定义HTML
的翻译
标记、CSS选择器样式。
样式面板
二、创建CSS
知识
积极参与教提高学生的
及
务
分组竞赛，以
小组为单位竞
赛CSS属性里
赛
1.新建CSS样式
2.输入CSS样式的名称
（.unnamed1）
设置CSS样式的类型（类）

3.设置将在何处定义这个
CSS样式（仅对该文档）
4.设置CSS样式
三、设置CSS样式的属性
类型、背景、区块、方框、
边框、列表、定义、扩展
实训：
1、将

我的背包

设置为标题1；将

我的背包1

利用代码设
置为红色；将

我的背包2< p>设置为紫色
任务二
2、将以下段落在之间设置一个样式，将所有代码都设置
CSS体验
为红色，字体14号，宋体
（20min）

我的背包

我的背包1

我的背包2

课堂小结 学会用CSS控制页面，能使网页更美观、风格更统一。
（5min）
课后作业
（5min）
本节内容较为枯燥，但效果很吸引人，同学们自己动手练习时会找到更
教学反思
多的乐趣。
实训课题 美化页面 实训课时 2课时
做一个用CSS来规划页面的小型网站，体会CSS带来的方便和神奇效果
实训目标 15、 掌握页面属性设置

16、 掌握类样式的设置
3、 选择器类型的选中
实训重点 4、 选择器名称命名规则
5、 类样式的选择
实训难点 类样式的应用
实训方法 上机实训
实训准备 教案、素材、案例、教材、计算机机房
34、 对照实习报告的要求，完成上机任务；
35、 任务完成后及时要求教师考评；
实训要求
36、 完善实习报告，填写实训总结；
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。
实训过程
操作要求及步骤
打开教师提供的素材，对页面进行如下操作：
1）设置网页属性设置（字体12像素、黑色； 背景图片；边距均为0），可
直接在页面属性里进行设置
2）新建样式.line，创建表格 边框样式.line（颜色#CC66FF），应用在该
任务
美化页面
网页的边框里
3)设置底部文字的样式.white（字体白色），应用在本网页最后一行里 ，
最后得到的结果如下图所示：
4）新建样式.input，美化输入文本框样式.inpu t，要求左、右、上没有
线条，下为实线，1px，颜色为黑色，设置完成后如下图所示：
5 )思考：步骤4）设置完成预览会发现文本框里为白色，表格背景颜色

为灰色，如何让他 们颜色设置为一样？
完善报告
自主练习

填写实训总结，并上交实习报告。
剩余时间，可进行自主练习，内容不限，但不可违反上机纪律
本次上机作业较简单，从收作业效果来看也较好，大部分学生都能准时
完成作业，较好。
实训总结
实训课题 应用CSS到网页中 实训课时 2课时
17、 掌握选择器三种类型之间的区别
实训目标
18、 掌握选择器名称命名规则
6、 类选择器命名前须加.,标签选择器必须是dw里有的标签
实训重点 7、 掌握ID选择器命名时前面须加#
8、 类样式的灵活应用
实训难点 运用CSS美化页面
实训方法 上机实训
实训准备 教案、素材、案例、教材、计算机机房
实训要求
37、 对照实习报告的要求，完成上机任务；
38、 任务完成后及时要求教师考评；

39、 完善实习报告，填写实训总结；
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。
实训过程
操作要求及步骤
打开，进行如下操作：

1）．新建名称为“.title1”的类样式，定义在样式表文件“”中，具体
设置如下：
类型分类下设置：字体“隶书”（若无该字体，用宋体代替），大小“24”，
颜色“#FF0 000”（应用在“桂林山水”四字中），新建样式表“”中
2）.新建名称为“.tb”的类样式， 定义在样式表文件“”中，具体设置
如下：在“背景”分类下设置背景颜色为“#EEDEDB”。
3）．新建关于标签“body”的样式，定义在新的样式表文件“”中，具
任务
应用CSS到
网页中
体设置如下：
（应用在网页正文中）
分类
类型
背景
区块
具体设置
字体“黑体”，大小“14”，行高“16”
背景颜色“#DFC0BB”
文本对齐“居中”
4）．新建名称为“.copy”的类样式，定义在样式表文件“”中，具体设
置如下：
（主要控制网页下方最后一行的单元格区域）
分类
类型
具体设置
字体“宋体”，大小“12”，行高“25”

颜色“#333333”
背景
区块
背景颜色“#04A292”
文本对齐“居中”
5 ）.新建名称为“.img01”的类样式，定义在样式表文件“”中，具体
设置如下：（应用在图片上 ）
分类
边框
具体设置
样式“outset”，宽度“4px”，颜色
“#846761”
方框 宽“270px”，高“180px”，浮动“向
左”
填充“5px”，边界“5px” < br>6）.新建名称为“.lead”的类样式，定义在样式表文件“”中，具体设
置如下：（应用在 导航栏上）
分类
类型
具体设置
字体“宋体”，大小“14”，行高“25”
颜色“#FFFFFF”
背景
区块
方框
边框
背景颜色“#03756B”
文本对齐“居中”
宽“109”，高“25”
样式：“右”下拉列表框中选择“实
线”
宽度：取消全部相同

“右”下拉列表框“1”
“上”、“下”、“左”下拉列表
框“0”
颜色：取消全部相同
“右”下拉列表框“#FFFFFF”
完善报告
自主练习

填写实训总结，并上交实习报告。
剩余时间，可进行自主练习，内容不限，但不可违反上机纪律
本次上机作业较复杂，需要建立 的类样式比较多，学生需要花费较多的
时间去操作，但是效果也是很惊人的，学生能从操作中找过满足感 。
实训总结
课题
类型、背景和区块样式

教学课时 2课时
1、掌握新建CSS样式表
知识目标
2、掌握类型、背景、区块属性设置
1、能掌握CSS属性相关基本操作
教学目标 能力目标
2、能了解CSS相关知识点
通过自主探究，使学生掌握软件的使用规则，培养学生自主
情感目标
学习的能力。
1、新建CSS样式
教学重点
2、类型、背景、区块的属性
教学难点 属性设置

1.教学场所：多媒体教室
教学资源 2.教学设备：安装有Dreamweavercs5软件的计算机
3.教学资料：辅助课件、多媒体教学软件
教法 讲解法、任务驱动教学法 学法 小组讨论法
教学过程
学生活
过程安排 教学内容 教师活动
动
上次我们学了利用CSS控同一个网页演讨论不同风通过网页强
制页面，但是往往我们制作示2套不同 风格网页之间烈对比，引
导入新课 网页的时候不是只有一套方格的方案，并的差别 起学生学习
兴趣
设计意图
（5min） 案，而是有很多套方案供别提出问题：如
人选择，那我们如何制作何制作？
呢？
二、 magicmatchingcolor
软件
演示软件并讲适当做笔记理解并掌握
任务一
这是一款练习配色的软件，解如何搭配色并理解教师必要的基础
的讲解 知识
认识配色
大家可以利用它来帮助提升彩
软件
自己的审美情趣，如下图所
（25min）
示：

二、利用CSS练习配色
播放原网页和用笔记下来提高学生的
完成效 果后的每一项网页学习积极性
利用上周实习操作的网页，
制作一套方案，原网页如下
对 比，跟学生对比的不同及
图所示：
任务二
项目制作
（50min）

共同探讨前后点，然后讨
对比 论如何实现
三、 配色软件除了应用在网页上面，在实际生活当中也应用很广，大
课堂小结
家可认真观察
（5min）
二、CSS控制网页，同样的网页颜色搭配不同风格变化很大
课后作业
（5min）
本节内容较为新鲜，看到的效果也比较明显，学生学习效果较好。
教学反思
建立一个简单的时尚资讯首页，利用CSS来控制搭配不同的风格
实训课题
实训方框、边框和导航栏

实训课时 2课时
19、 掌握方框宽、高、填充、浮动等设置
实训目标
20、 掌握背景颜色、边框样式、宽度、颜色等设置
实训重点 利用CSS样式新建类对页面控制
实训难点 滤镜的应用
实训方法 上机实训

实训准备 教案、素材、案例、教材、计算机机房
40、 对照实习报告的要求，完成上机任务；
41、 任务完成后及时要求教师考评；
实训要求
42、 完善实习报告，填写实训总结；
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。
实训过程
操作要求及步骤
一、
打开重建css样式表文件，改变网页风格
二、
可下载magicma tchingcolor软件进行配色搭配，最后制作的效果如下图所
示：（可选择自己喜欢的颜色设置 ，以下为参考）

三、
使用样式表的滤镜，对图片增加效果。（该滤镜效果能在IE浏览器浏览看
到效果
任务
参数参考：
利用CSS样
filter:Alpha(Opacity =100,FinishOpacity=0,Style=2,StartX=0,StartY=0,
FinishX=300,FinishY=240);

式控制页
height:300px;

width:660px;

面
完善报告
自主练习

填写实训总结，并上交实习报告。
剩余时间，可进行自主练习，内容不限，但不可违反上机纪律
本次上机效果比较明显，发挥空 间比较大，学生可根据自己的经验和喜
好选择喜欢的颜色进行搭配，较好。
实训总结
实训课题
实训超链接样式及设置技巧

21、 掌握复合选择器类型的应用
实训课时 2课时
实训目标
22、 掌握
a:linka:visited选择器的应用

实训重点 9、 链接样式的设置

10、 导航栏的设置技巧
实训难点 链接样式的设置
实训方法 上机实训
实训准备 教案、素材、案例、教材、计算机机房
43、 对照实习报告的要求，完成上机任务；
44、 任务完成后及时要求教师考评；
实训要求
45、 完善实习报告，填写实训总结；
4、遵守实训纪律，不游戏，不睡觉，不高声谈论。
实训过程
操作要求及步骤
打开，该网站是一个时尚资讯的网站，需要完成以下任 务：（具体可参考
13周做的旅游网站的操作步骤）
1、 仿造上周作业对旅游网的设置，对 该网页进行设置；首先是网页主色
调，由该网站的阅读人群来决定该网站的主色调（提示：大部分以淡< br>粉色为主）
2、 仿造上周旅游网站的设置，对该网页新建一个CSS样式表，对图片和
任务
网页文字进行设置
链接设置
3、 要求设置如下：
（1） 整体背景颜色必须设置
（2） 表格背景颜色必须设置
（3） 导航栏必须设置，并且要求导航栏字体颜色链接部分点击前和点
击后颜色不同（提示：新建CSS规则，设置如下图所示：
超链接2中状态含义：

a:link超链接默认状态a:visited已经浏览过的链接

新建css规则后，选中要设置的颜色（案例是为白色），同理新建CSS
规则，选择器类型为复合内容 （基于选择的内容），选择器名称为
a:link，
选中要设置的颜色（案例为青绿色）

（4） 网页最下部分最后一行必须设置
（5） 整体网页内容需要居中对齐
下截图为教师参考，你也可根据自己的想法设计另外一套方案，主要是
给人感觉漂亮、时尚、实用为主。
完善报告
自主练习

填写实训总结，并上交实习报告。
剩余时间，可进行自主练习，内容不限，但不可违反上机纪律
本次上机作业主要以时尚资讯为 主题，学生可根据自己的生活经验选择
主色调进行搭配，学生发挥的空间比较大，效果较好。
实训总结
课题
布局页面

1、掌握新建DIV标签
知识目标
教学课时 2课时
2、掌握利用DIV标签布局页面
1、能掌握DIV标签相关基本操作
教学目标 能力目标
2、能了解DIV标签相关知识点
通过自主探究，使学生掌握软件的使用规则，培养学生自主
情感目标
学习的能力。
1、利用CSS控制标签
教学重点
2、嵌套标签的浮动性设置
教学难点 学会使用css+div布局和美化网页

1.教学场所：多媒体教室
教学资源 2.教学设备：安装有Dreamweavercs5软件的计算机
3.教学资料：辅助课件、多媒体教学软件
教法 讲解法、任务驱动教学法 学法 小组讨论法
教学过程
学生活
过程安排 教学内容 教师活动
动
前面我们已经学过APDIV讲授这次课的观察布局并网页的展示
导入新课 层布局页面，今天学习运用内容 讨论 让学生了解
本次课的重
点
引导学生对布讨论布局的理解并掌握
局进行分析
进行总体控制，设置如下图
试把布局画知识
所示的布局：
下来
要求：
任务一
页面布局
（25min）
1、 分别新建DIV标签top、
mid、bottom
2、 在标签mid里分别新建
mid_left和mid_right
标签，分别浮动向左和向
右
3、 标签设置如图所示的颜
分布，并尝必要的基础
设计意图
（5min） DIV标签和CSS对页面进行控
制
一、 布局页面
通过新建DIV标签，也页面

色
二、制作如下图所示的页面：
展示制作的效讨论任务二以任务驱动
果并加以分解在任务一的法让学生自
要求：
1） 利用Spry制作菜单栏
任务
2） 利用Spry制作折叠式
任务二
样式
布局应用
（50min）

点，分解成
小项目制作
了哪些知识
基础上增加主完成任务
1、DIV布局页面
课堂小结
2、Spry菜单栏制作
（5min）
3、Spry折叠式菜单制作
课后作业
（5min）
本节内容布局较多，对Spry菜单栏和折叠式菜单制作应用较广泛，学生
教学反思
学习兴趣较大
浏览湖南商业技师学院官方网站，分析菜单栏的制作

课题
6.２认识spry

教学课时 2课时
1、学会Spry布局控件的编辑、应用
知识目标
2、掌握spry布局控件创建动态导航栏的方法
在运用中理解spry框架是一组用标准HTML、CSS和
教学目标 能力目标
JavaScript编写的可重用控件。
通提高了对网页设计的理解能力和认识水平，能够树立学生
情感目标
探索知识的兴趣
教学重点 学会Spry布局控件的编辑、应用。
教学难点 学会使用spry布局控件创建动态导航栏的方法
1.教学场所：多媒体教室
教学资源 2.教学设备：安装有Dreamweavercs5软件的计算机
3.教学资料：辅助课件、多媒体教学软件
教法 讲解法、任务驱动教学法 学法 小组讨论法
教学过程
学生活
过程安排 教学内容 教师活动
动
前一次课我们学习了ap演示菜单栏和观察并讨论 网页的展示
导入新课 标签布局，布局完成后我们折叠式效果 让学生了解
本次课的重
点
设计意图
（5min） 来学习来如何利用spry构件
制作常见网页

一、 spry菜单 演示并介绍听讲并做笔主要介绍
记 spry菜单
栏常用的功
能
动
1、 首先引入spry，说出spry菜单栏
本节课需要学习的内容
的重难点。
2、 启
Dreamweavercs5,选择
站点“网页特效制作”，
新建文件.
3、 选择“插入→spry→
spry菜单栏”命令，打
任务一
开“spry菜单栏”对话
认识spry
框，如图3-57所示。选
（25min）
择“水平”单选项，单
击“确定”按钮，网页
效果如图3-58所示
4、 在“属性”面板中或
者在“设计”视图中添
加项目的属性值，“项目
1：站内质询，项 目2：
原创图书，项目3：图
文教程，项目4：视频
教程”，如图3-59和