网页设计与制作课程改革专业方案.doc

《网页设计和制作》课程改革方案
课程名称： 网页设计和制作
英文名称： Web Pages Design and Making
课程类型： 电子商务专业关键课程
学 时： 64
时 间： 6 月
一、课程性质
本课程是为本院电子商务类专业学生所开设一门专门技术课程，本课程目标是让学生在已学完计算机基础、计算机网络等课程基础上深入掌握网页设计基础技能，为网络营销奠定基础。对以后从事网页设计学生，为深入学习网站开发和建设奠定基础。
职业面向：从事网页设计和制作
职业拓展：网站建设、搜索引擎优化
二、课程目标
经过本课程学习，使学生含有手工编写 HTML 代码能力，能够使用 Dreamweaver
工具设计一个完整静态网站能力并含有建立站点、管理站点、测试网站和公布网站能
力，含有良好团体合作精神、获取知识能力、网页设计创意思维能力、色彩感悟能力等素
质，达成职业技能判定网页制作（Dreamweaver 平台）中高级水平。
（一）经典工作任务
依据《电子商务专业（网站开发方向）培养方案》和职业岗位工作任务分析，确定《网页设计和制作》经典工作任务。

课程名称（学习领域）：网页设计和制作
教课时间安排：64课时
对网页设计和制作整体描述
网页设计和制作人员依据网页设计任务书，在电脑办公工位，在要求时间内以有效方法根据专业要求完成网页维护、 修改、 改版或新网站建设静态网页设计和制作工作。网页维护和修改工作，以个人独立工作；网页改版或中小型新网站建设静态网页设计工作以小组形式或独立工作， 大中型新网站建设通常以小组形式工作， 使用电脑和 Dreamweaver 工具软件，对文字、图象和 Flash等多媒体素材进行编辑、设计和制作，并符合W3C 规范，对已完成工作进行统计存档。
学习目标
学生在老师指导下，制订网页设计和制作工作计划，并实施和检验反馈。在网页设计和制作过程中，使用工具、设备、文字、图象和 Flash素材等，在要求时间内完成网页设计和制作项目。对已完成任务进行统计、存档和评价反馈。学习完本课程后，学生应该能够进行网页设计和制作，包含：1. 网站计划；2. 站点建设和管理；3. 设计首页；4. 美化首页；5. 设计二级页面；6. 设计交互页面；7.网站测试和公布。

针对网页设计和制作人员应含有能力和素质，我们将整个网页设计和制作课程分为以下七个经典工作任务。

【经典工作任务1】网站计划
【经典工作任务2】站点建设和管理
【经典工作任务3】首页设计
【经典工作任务4】首页美化
【经典工作任务5】设计二级页面
【经典工作任务6】设计交互式页面
【经典工作任务7】网站测试和公布

（二）专业能力和知识目标
依据经典工作任务，确定专业能力和知识目标以下表1所表示。
表 1专业能力和知识目标
编号
专业能力目标
专业知识目标
1
计划网站结构能力
需求分析概念和内容，网站结构知识，网站开发步骤，网页设计基础标准，网页版面布局要求
2
建立站点和管理站点能力
文件和文件夹命名规则，Dreamweaver 工具工作界面概念，“文件”面板使用方法，站点创建方法， 站点管理方法
3
利用表格进行页面布局能力
页面布局概念和要求、表格概念、表格属性、表格合并和折分
4
使用 CSS 美化页面和进行页
面布局能力
ＣＳＳ样式表概念、ＣＳＳ样式表基础语法、ＣＳＳ选择器类型
5
编辑文本和编辑图象能力
文本和图象属性及其设置，图像和文本混合编排概念和方法，在表格中输入文字并定位方法，在表格中插入图像并定位方法
6
创建网页超级链接能力
超级链接类型和属性
7
使用CSS+DIV进行页面布局
能力
层概念和属性设置、层定位、层操作、样式套用
8
制作交互页面能力
表单和表单对象属性及其设置
9
创建框架页面能力
框架和框架集属性及其设置方法
10
使用行为创建页面能力
行为和事件概念，行为基础操作，标准动作
11
插入其它对象能力
水平线、文件头标签、特殊字符、Ｆlash动画等对象概念
12
创建及使用模板和库能力
模板和库概念，可编辑区域概念
13
测试和公布网站能力
网站测试方法，域名申请方法，网站公布方法， 网站维护和更新方法

（三）学习情境
根据项目任务编排方法，整合专业能力和知识目标对学习领域教学内容进行序化，设计出以下图所表示 7 个网页设计和制作学习情境：
学习情境设计
学习领域： 网页设计和制作
总课时：64
学习情境1：手工编程
课时：8
学习目标：
1．能力目标：
（1）编写网页头部标识代码能力
（2）编写文本和图象排版代码能力
（3）编写网页表格代码能力
（4）编写网页表单代码能力
2．知识目标：
（1）URL地址和域名概念，网页和网站概念， 静态网站和动态网站概念区分，网站分类，HTML 语言结构、格式、标识及相关属性；
（2）文本标识概念和类型，排版格式标识、图像标识、链接标识；
（3）表格标识和属性
（4）表单和表单对象标识和属性
3．职业素质目标：

关键内容
教学方法提议
1． 初步阅读需求分析文档， 了解设计目标、要求和设计结果
2．了解网页相关概念和术语
3．认识网页中关键组成元素
4．HTML语言编写网页头部代码
5．编写文本和图像排版代码
6．设计网页表格，设置表格属性
7．设计网页表单，设置
表单和表单对象属性，
8．阶段结果评价，调整
工作计划
宏观教学方法
探究式教学法
微观教学方法
讲解+案例教学
教学材料
使用工具
学生知识和能力准备
老师知识和能力要求
考评和评价
1．网站总体设计书
2．结果评价表
1．PC电脑 2.Dreamweaver 工具软件
1．含有使用电脑和操作 Internet 网络能力。
2．含有识读网站总体设计书能力 。
1．能够分析网站总体设计书
2．熟练掌握代码编写要求和方法
3.熟练掌握Dreamweaver 工具软件使用
4．能够正确、立即处理学生操作过程中出现问题及错误。
评价内容：
任务完成情况评价
工作态度评价
项目完成情况演示评价
评价方法：
学生自评
小组组员互评
老师评价

学习领域： 网页设计和制作
总课时：64
学习情境2：网站计划
课时：6
学习目标：
1．能力目标：
（1）计划网站结构能力
（2）建立站点和管理站点能力
2．知识目标：
（1）需求分析概念和内容，网站结构知识，网站
开发步骤，网页设计基础标准，网页版面布局
要求；
（2）文件和文件夹命名规则，Dreamweaver工具
工作界面概念， “文件”面板使用方法，站点
创建方法，站点管理方法；
3．职业素质目标：
★ 色彩感悟能力
★ 结构布局能力
★ 表示能力
★ 创新能力

关键内容
教学方法提议
1．阅读需求分析文档，了解设计目标、要求和设计结果，搜集素材，制订工作计划。
2．欣赏优异网页，学习她人之长，激发学习网页设计爱好。
3．分析优异网页布局结构、颜色搭配、视觉效果，留下直观第一印象，为制作网页奠定基础。
4．确定网站名称，计划网站站点结构，定位网站ＣＩ形象，设计网站整体风格及创意，绘制网站架构图。
5．分组讨论，学生讲解
6．定义站点，创建文件夹和空白页面，设计备注，阶段结果评价，调整工作计划。
7．阶段结果评价，调整
工作计划
宏观教学方法
探究式教学法
微观教学方法
讲解
示范操作
同时模拟
分组法
“教” 、 “学” 、
“做”三位一
体法
教学材料
使用工具
学生知识和能力准备
老师知识和能力要求
考评和评价
1．网站总体设计书
2．优异网站地 址
3．网页色彩适配器
4．结果评价表
1．PC电脑 2.Dream weaver 工具软件
1．含有使用电脑和操
作 Internet 网络能
力。
2．含有识读网站总体
设计书能力
3．含有利用网页色彩
适配器软件获取适合
颜色素材能力
1．能够分析网站总体设计书
2．熟练掌握站点建立和管理方法
3. 熟练掌握Dreamweaver 工具软件使用
4．能够正确、立即处理学生操作过程中出现问题及错误。
评价内容：
任务完成情况评价
工作态度评价
项目完成情况演示评价
评价方法：
学生自评
小组组员互评
老师评价

学习领域： 网页设计和制作
总课时：64
学习情境3：首页设计
课时：10
学习目标：
1．能力目标：
（1）利用表格进行页面布局能力
（2）编辑文本和编辑图象能力
（3）创建网页超级链接能力
2．知识目标：
（1）页面布局概念和要求、表格概念、表格
属性及其设置；
（2）文本和图象属性及其设置；
（3）超级链接类型和属性。
3．职业素质目标：
★ 色彩感悟能力
★ 结构布局能力
★ 表示能力
★ 创新能力

关键内容
教学方法提议
1．绘制首页布局草图，计划网站页面表格结构
2．创建页面页眉区表格
3．创建页面导航拦表格
4．创建页面主体内容区表格
5．创建页面版权区表格
6．插入 “卓帆五金制品厂”网站 LOGO 和 Banner
7．设计网站导航栏和版权区内容
8．根据左、中、右和上、
中、下次序设计“卓帆五金制品厂”网站首页主体内容区内容
9．阶段结果评价，调整
工作计划
宏观教学方法
项目教学法
微观教学方法
任务驱动法
探究法
分组法
“教” 、 “学” 、
“做”三位一
体法
教学材料
使用工具
学生知识和能力准备
老师知识和能力要求
考评和评价
1．网站总体设计书
2．首页效果图
3 ． Logo 及
Banner 网页素材
4．操作示范视频
5．结果评价表
1．PC电脑 2.Dream weaver 工具软件
3．视频播放软件
1．含有使用电脑和操
作 Internet 网络能
力。
2．含有识读网站总体
设计书能力
3．含有利用图形图像
处理软件获取网页素
材能力
1．含有使用电脑和操
作 Internet 网络能
力。
2．含有识读网站总体
设计书能力
3．含有利用图形图像
处理软件获取网页素
材能力
评价内容：
任务完成情况评价
工作态度评价
项目完成情况演示评价
评价方法：
学生自评
小组组员互评
老师评价

学习领域： 网页设计和制作
总课时：64
学习情境4：首页美化
课时：8
学习目标：
1．能力目标：
（1）使用CSS美化页面能力
（2）使用CSS进行页面布局能力
2．知识目标：
（1）ＣＳＳ样式表概念；
（2）ＣＳＳ样式表基础语法；
（3）ＣＳＳ选择器类型。
3．职业素质目标：
★ .色彩感悟能力
★ .结构布局能力
★ .获取知识能力
★ .表示能力

关键内容
课外素质拓展
教学方法提议
1．设计文本基础样式，设置段
落样式，设置列表属性；
2．创建网页文本ＣＳＳ样式，
编辑网页文本ＣＳＳ样式，应用
网页文本ＣＳＳ样式
3．链接外部ＣＳＳ样式
4．阶段结果评价，调整工作计划
写出相关W3C标准内容及其发展情况论文一篇， 要求学生自己寻求和学习相关知识并进行讲解
宏观教学方法
项目教学法
微观教学方法
任务驱动法
探究法
分组法
“教” 、 “学” 、
“做”三位一
体法
教学材料
使用工具
学生知识和能力准备
老师知识和能力要求
考评和评价
1．网站总体设 计书
2．首页
3．外部ＣＳＳ样式表
4．操作示范视频
5．结果评价表
1．PC电脑 2.Dream weaver 工具软件
3．视频播放软件
1．含有使用电脑和操
作 Internet 网络能
力。
2．含有识读网站总体
设计书能力

1．能够分析网站总体设计书
2．熟练掌握使用 CSS 网页美化方法
3.熟练掌握Dreamweaver 工具软件使用
4．能够正确、立即处理学生操作过程中出现问题及错误。
评价内容：
任务完成情况评价
工作态度评价
项目完成情况演示评价
评价方法：
学生自评
小组组员互评
老师评价

学习领域： 网页设计和制作
总课时：64
学习情境5：二级页面设计
课时：18
学习目标：
1．能力目标：
（1）创建网页超级链接能力
（2）使用CSS+DIV进行页面布局能力
（3）创建框架页面能力
（4）插入其它对象能力
（5）创建及使用模板和库能力
2．知识目标：
（1）超级链接类型和属性；
（2）层概念和属性设置、层定位、层操作、
样式套用；
（3）框架和框架集属性及其设置方法
（4）水平线、文件头标签、特殊字符、Ｆlash动画
等对象概念
（5）模板和库概念，可编辑区域概念
3．职业素质目标：
★ .色彩感悟能力
★ .结构布局能力
★ .表示能力
★ .获取知识能力
★ .创新能力

关键内容
教学方法提议
1．绘制页面布局草图，页面布局
2．计划页面超级链接，创建通常超级链接 创建锚记链接，设置链接打开位置
3．创建层，设置层属性，调整层大小和位置，把层转换为表格，把表格转换为层
4．计划网页框架结构，建立网页框架，添加框架页内容，设置网页框架和框架组属性，编辑网页框架
5．插入水平线，插入文件头标签，插入网页搜索关键字，插入特殊字符，插入Ｆlash 动画，添加空格，添加日期
6．创建二级页面模板，
设置二级页面模板可编
辑区域，管理模板，创建
和管理库
7．阶段结果评价，调整
工作计划
课外素质拓展：写出相关
RSS 内容及其发展情况
论文一篇，要求学生自己
寻求和学习相关知识并
进行讲解
宏观教学方法
项目教学法
微观教学方法
任务驱动法
探究法
分组法
“教” 、 “学” 、
“做”三位一
体法
教学材料
使用工具
学生知识和能力准备
老师知识和能力要求
考评和评价
1．网站总体设计书
2．二级页面效果图
3 ． Logo 及
Banner 网页等素材
4．操作示范视频
5．结果评价表
1．PC电脑 2.Dream weaver 工具软件
3．视频播放软件
1．含有使用电脑和操
作 Internet 网络能
力。
2．含有识读网站总体
设计书能力
3．含有利用图形图像
处理软件获取网页素
材能力
1．能够分析网站总体设计书
2．熟练掌握CSS+DIV、框架布局方法
3.熟练掌握Dreamweaver 工具软件使用
4．能够正确、立即处理学生操作过程中出现问题及错误。
评价内容：
任务完成情况评价
工作态度评价
项目完成情况演示评价
评价方法：
学生自评
小组组员互评
老师评价

学习领域： 网页设计和制作
总课时：64
学习情境6：交互页面设计
课时：6
学习目标：
1．能力目标：
（1）使用行为创建页面能力
（2）制作交互页面能力
2．知识目标：
（1）行为和事件概念，行为基础操作，标准动
作；
（2）表单和表单对象属性及其设置。
3．职业素质目标：
★ .色彩感悟能力
★ .创新能力

关键内容
教学方法提议
1．用行为设计“卓帆五金制品厂”网站弹出广告页面和浮动广告页面
2．绘制页面布局草图，页面布局
3．创建表单，插入文本域，插入单选框，插入复选框，插入列表和菜单，插入按钮
4．设置表单及表单域属性，测试表单页
5．阶段结果评价，调整
工作计划
宏观教学方法
项目教学法
微观教学方法
任务驱动法
探究法
分组法
“教” 、 “学” 、
“做”三位一
体法
教学材料
使用工具
学生知识和能力准备
老师知识和能力要求
考评和评价
1．网站总体设计书
2．广告页、表单页效果图
3 ． Logo 及
Banner 等网页素材
4．操作示范视频
5．结果评价表
1．PC电脑 2.Dreamweaver 工具软件
3．视频播放软件
1．含有使用电脑和操
作 Internet 网络能
力。
2．含有识读网站总体
设计书能力
3．含有利用图形图像
处理软件获取网页素
材能力
1．能够分析网站总体设计书
2．熟练掌握网页布局方法
3.熟练掌握Dreamweaver 工具软件使用
4．能够正确、立即处理学生操作过程中出现问题及错误。
评价内容：
任务完成情况评价
工作态度评价
项目完成情况演示评价
评价方法：
学生自评
小组组员互评
老师评价

学习领域： 网页设计和制作
总课时：64
学习情境7：测试和公布
课时：8
学习目标：
1．能力目标：
（1）测试和公布网站能力
2．知识目标：
（1）网站测试方法；
（2）域名申请方法；
（3）网站公布方法；
（4）网站维护和更新方法。
3．职业素质目标：
★
★

关键内容
教学方法提议
1．注册域名，申请空间
2．安装“卓帆五金制品厂”系统
3． “卓帆五金制品厂”试运行
4． “卓帆五金制品厂”测试汇报
5．检验站点范围链接，改变站点范围链接
6．清理文档
7．阶段结果评价，调整
工作计划
宏观教学方法
项目教学法
微观教学方法
任务驱动法
探究法
分组法
“教” 、 “学” 、
“做”三位一
体法
激励创新法
教学材料
使用工具
学生知识和能力准备
老师知识和能力要求
考评和评价
1．网站总体设计书
2．首页效果图
3 ． Logo 及
Banner 网页素材
4．操作示范视频
5．结果评价表
1．PC电脑 2.Dreamweaver 工具软件
3．视频播放软件
1．含有使用电脑和操
作 Internet 网络能
力。
2．含有识读网站总体
设计书能力
3．含有利用图形图像
处理软件获取网页素
材能力
1．能够分析网站总体设计书
2．熟练掌握网页布局方法
3.熟练掌握Dreamweaver 工具软件使用
4．能够正确、立即处理学生操作过程中出现问题及错误。
评价内容：
任务完成情况评价
工作态度评价
项目完成情况演示评价
评价方法：
学生自评
小组组员互评
老师评价

（四）专业素质目标
１.含有一定策划能力
２.含有一定想象力
３.色彩感悟能力
４.结构布局能力
（五）综合能力和职业素养培养目标
1.团体协作精神
2.自主学习能力
3.沟通能力
4.表示能力
5.获取知识能力
6.创新能力
7.乐观精神
8.敬业精神
9.感悟能力
10.知识应用能力
11.自我发展能力
12．责任感
13.效率观念
三、课程内容安排、课程任务
（一）课程结构、课程任务、课程内容
分析课程实施内、外部环境如表2所表示，结合课程目标确定课程结构、课程任务、课程内容，课程分为十个模块，二十三个教学单元， “卓帆五金制品厂”网站制作项目分解到对应教学单元，如表 3 所表示。
表 2 网页设计和制作
课程实施环境分析

老师
学生
办学条件
内
部
环
境
分
析
1、对老师要求
因为项目内容包含一个完整网站，
所以，要讨老师掌握网站建设方面综合知识，要打破课程界限，不能只知道某一门学科知识，同时要讨老师最少完成过２个完整网站静态网页设计。
2、本院老师现实状况担任本门课程教学任务有3人， 老师优势条件是有2人最少完成过2 个完整网站静态网页设计工作。
1、学生高考成绩居于中低段（大专）；
2、已经初步掌握了办公软件使用、网络基础知识；
3、学习动力不足，稳定性差，缺乏创新精神和自我调控能力；
4、部分学生对电脑操作和上网不熟练，打字速度不快；
5、包含语言方面知识感到枯燥，学习主动性不高；
6、思想活跃、参与热情高、社会活动能力比较强；
7、对网页设计和制作结果感爱好
1、学院已经含有计
算机试验室和多媒
体教室， 能满足课程教学需要。

外
部
环
境
分
析
1、社会对相关知识或技能需要程度：岗位要求有1年以上工作经验、参与过一个以上整站网页设计和制作或有自己作品；

表3 网页设计和制作课程任务及课程体系设计

模块名称
教学单元名称
计划课时
专业能力和知识
课程内容

模块一：
学习情境1
手工编程模块

No1
编写网页头部代码

2
１．能力目标：编写网
页头部标识代码能力
２．知识目标：URL地
址和域名概念，网页
和网站概念，静态网
站和动态网站概念
别，网站分类，HTML
语言结构、格式、标
记及相关属性

任务：编写网页头部代码
内容：初步阅读需求分析文档，了解设计目标、要求和设计结果，了解网页相关概念和术语，认识网页中关键组成元素，用HTML语言编写网页头部代码
No2
编写网页内容代码

2
１．能力目标：编写文
本和图象排版代码能
力
２．知识目标：文本标
记概念和类型，排版
格式标识、图象标识、
链接标识

任务：对文本和图象排版
内容：编写文本和图象排版代码
No3
编写网页表格代码

2
１．能力目标：编写网
页表格代码能力
２．知识目标：表格
标识和属性
任务：设计网页表格
内容：设计网页表格，设置表格属性
No4
编写网页表单代码

2
１．能力目标：编写网
页表单代码能力
２．知识目标：表单和
表单对象标识和属性
任务：设计网页表单
内容：设计网页表单，设置表单和表单对象属性，阶段结果评价。
模块二：
学习情境2
网站计划模块
No5
计划网
站结构
4
１．能力目标：计划网
站结构能力
２．知识目标：需求分
析概念和内容，网站
结构知识，网站开发
步骤，网页设计基础
标准，网页版面布局要
求
职业素质目标：
★ .色彩感悟能力
★ .策划能力
★ 团体协作
★ 沟通能力
任务：计划“卓帆五金制品厂”网站结构
内容：
（1）阅读需求分析文档，了解设计目标、要求和设计结果，搜集素材，制订工作计划。
（2）欣赏优异网页，学习她人之长，激发学习网页设计爱好。
（3）分析优异网页布局结构、颜色搭配、 视觉效果， 留下直观第一印象，为制作网页奠定基础。
（4）确定网站名称，计划网站站点结构，定位网站ＣＩ形象，设计网站整体风格及创意，绘制网站架构图。
（5）要求学生讲解
No6
站点建设和管理

2
１．能力目标：建立站
点和管理站点能力
２．知识目标：文件和
文件夹命名规则，
Dreamweaver工具工
作界面概念， “文件”
面板使用方法，站点
创建方法，站点管
理方法

任务：创建“卓帆五金制品厂”网站站点并进行管理
内容：定义站点，创建文件夹和空白页面，设计备注，阶段结果评价，调整工作计划。

模块三：
学习情境3
设计首
页模块
No7
首页布
局

4
１．能力目标：利用表
格进行页面布局能力
２．知识目标：页面布
局概念和要求、表格
概念、表格属性、
表格合并和折分
３．职业素质目标：
★ .色彩感悟能力
★ .结构布局能力
★ .表示能力
★ .创新能力
任务：用表格对“卓帆五金制品厂”网站首页进行布局
内容：绘制首页布局草图，计划网站页面表格结构，创建页面页眉区表格，创建页面导航拦表格，创建页面主体内容区表格，创建页面版权区表格。
No8
设计首
页头部
和版
权区

2
１．能力目标：
（1）编辑文本和编辑图
象能力
（2）创建网页超级链接
能力
２．知识目标：文本和
图象属性及其设置，
在表格中插入图像并定
位方法，超级链接
类型和属性
３．职业素质目标：
★ .色彩感悟能力
★ .结构布局能力
任务：设计首页头部和和版权区内容内容：插入 “卓帆五金制品厂”网站ＬＯＧＯ和ＢＡＮＮＥＲ，设计网站导航栏和版权区内容
No9
设计首
页主体
内容区
内容
4
１．能力目标：编辑文
本和编辑图象能力
２．知识目标：文本和
图象属性及其设置，
图像和文本混合编排
概念和方法，在表格中
输入文字并定位方
法，在表格中插入图像
并定位方法
３．职业素质目标：
★ .色彩感悟能力
★ .结构布局能力
任务：设计首页主体内容区内容
内容：根据左、中、右和上、中、下次序设计“卓帆五金制品厂”网站首页主体内容区内容，阶段结果评价，调整工作计划。
模块四：
学习情境4
首页美化模块
No10
美化首
页
8
１． 能力目标： 使用CSS
美化页面和进行页面布
局能力
２．知识目标：ＣＳＳ
样式表概念、ＣＳＳ
样式表基础语法、Ｃ
ＳＳ选择器类型
３．职业素质目标：
★ .色彩感悟能力
★ .结构布局能力
★ .获取知识能力
★ .表示能力
任务：用ＣＳＳ样式美化“卓帆五金制品厂”网站首页
内容：设计文本基础样式，设置段落样式，设置列表属性，创建网页文本ＣＳＳ样式，编辑网页文本ＣＳＳ样式，应用网页文本ＣＳＳ样式，链接外部ＣＳＳ样式，阶段结果评价，调整工作计划。
课外素质拓展：写出相关W3C标准内容及其发展情况论文一篇，要求学生自己寻求和学习相关知识并进行讲解。
模块五：
学习情境5
设计二级页面模块
No11
设计卫浴产品页面
2
１．能力目标：创建网
页超级链接能力
２．知识目标：超级链
接类型和属性
任务：设计卫浴产品页面
内容：绘制页面布局草图，页面布局，计划页面超级链接，创建通常超级链接 创建锚记链接，设置链接打开位置
No12
设计箱包配件页面
4
１．能力目标：使用
CSS+DIV进行页面布局
能力
２．知识目标：层概
念和属性设置、层定
位、层操作、样式
套用
３．职业素质目标：
★ .色彩感悟能力
★ .结构布局能力
★ .表示能力
★ .获取知识能力
★ .创新能力
任务：设计箱包配件页面
内容：绘制页面布局草图，页面布局， 创建层，设置层属性，调整层大小和位置，把层转换为表格，把表格转换为层
课外素质拓展： 写出相关RSS内容及其发展情况论文一篇，要求学生自己寻求和学习相关知识并进行讲解。
No13
设计首饰包装页面
4
１．能力目标：创建框
架页面能力
２．知识目标：框架和
框架集属性及其设置
方法
任务：用框架结构设计“卓帆五金制品厂”网站首饰包装页面
内容：绘制页面布局草图，页面布局，计划网页框架结构，建立网页框架，添加框架页内容，设置网页框架和框架组属性，编辑网页框架
No14
设计家居装饰页面
4
１．能力目标：插入其
她对象能力
２．知识目标：水平线、
文件头标签、特殊字符、
Ｆlash动画等对象概
念
任务：设计家居装饰页面
内容：绘制页面布局草图，页面布局， 插入水平线，插入文件头标签，插入网页搜索关键字，插入特殊字符，插入Ｆlash动画，添加空格，添加日期
No15
设计产品模具页面
4
１．能力目标：创建及
使用模板和库能力
２．知识目标：模板和
库概念，可编辑区域
概念
任务：产品模具页面
内容：绘制页面布局草图，页面布局， 创建二级页面模板，设置二级页面模板 可编辑区域， 管理模板， 创建和管理库， 阶段结果评价，调整工作计划。

模块六：
学习情境6
设计交互页面模块
No16
设计广
告特效
页面
4
１．能力目标：使用行
为创建页面能力
２．知识目标：行为和
事件概念，行为基
本操作，标准动作
３．职业素质目标：
★ . 色彩感悟能力
★ .创新能力

任务：设计广告页面
内容：用行为设计“卓帆五金制品厂”网站弹出广告页面和浮动广告页面。
No17
设计动
态交互
页面
2
１．能力目标：制作交
互页面能力
２．知识目标：表单和
表单对象属性及其设
置
任务：设计“卓帆五金制品厂”网站动态交互页面
内容：绘制页面布局草图，页面布局，创建表单，插入文本域，插入单选框， 插入复选框，插入列表和菜单，插入按钮，设置表单及表单域属性，测试表单页，阶段结果评价，调整工作计划。
模块七：
学习情境7
测试和公布模块
No18
网站测
试和发
布
8
１．能力目标：测试和
公布网站能力
２．知识目标：网站测
试方法，域名申请
方法，网站公布方法，
网站维护和更新方法
任务：测试和公布“卓帆五金制品厂”网站
内容：注册域名，申请空间，安装“卓帆五金制品厂” 系统， “卓帆五金制品厂” 试运行，“卓帆五金制品厂”测试汇报，检验站点范围链接，改变站点范围链接，清理文档，设计结果评价。
模块八：
课外拓
展实践
No19
课外拓
展实践

任务：项目３ ×××网站设计
（可组织班级进行网页设计比赛，由班级团支部、 学生会自行组织， 老师指导）
项目参考题目：
（1）制作个人网站
（2）制作班级网站
（3）制作鲜花网店（静态部分）
（4）制作二手房交易网站（静态
部分）
项目要求：
1．学生分层次独立制作一个静态
网站。
2．所创建网站最少包含 4 个页
面，分为二～三层，第一层为首页，第二层为4个二级子页，第三层为3个内容页。
3．网页版面尺寸应符合网页设计规范，网站中全部文件、文件夹命名应规范，尽可能做到字母数量少，见名知意、轻易了解。
4．在设计过程中，要严格要求自
己，树立严密、严谨科学态度，必需按时、保质、保量完成任务。要求独立完成要求内容，不得弄虚作假，不准剽窃或拷贝她人网页或其它内容。
5．学生应完成工作计划制订、工
作总结、自评、互评和整改。

（二）实践教学体系
实践教学设计指导思想：“以职业岗位工作过程为导向”、“工学结合”、“以学生为中
心”、“以职业能力为关键”,以真实网站为实习实训项目，将实习实训和产品、项目结合起来，强调学生将所学知识和技能在实践中应用，主动引导学生自主学习。
实践教学步骤分为四种类型：上机操作演示、上机模拟实践、课外拓展实践、工学结合
实训。
实践项目分为三个阶段：基础型实践阶段→拓展型实践阶段→工学结合型实践阶段。
实践性步骤和项目如表 4 所表示。
阶段
实践步骤
项目名称
教学目标
使用场所
备注
第一阶段
上机操作演示
项目1：
“卓帆五金制品厂”网站制作
根据由浅入深认识规律学习网页制作基础知识和基础技能。将网页制作知识融入项目中进行讲解示范
用于老师上机知识讲解和操作演示
提供素材，
边讲边做
上机同时模拟实践
项目2：
“小小书店”网站制作
老师制作“小小书店”网站制作过程视频录象课件，学生模拟老师讲解操作方法，制作网页， 理论和实践相结合，“教、学、练”三者有机融合
用于学生上机实践
提供素材，
自主学习，
独立完成项目
第二阶段
课外拓展
实践
项目3：
×××网站制作
依据所学网页制作知识和上机实践
积累经验，利用课余时间自己动手尝
试制作网页
用于学生课外训练， 学生自己准备素材， 分层次选择项
目
自己搜集素材，独立完成项目
第三阶段
工学结合实训
项目4：
×××网站制作
网站开发能力、综合应用知识处理实际
问题能力、创新能力

集中综合实训
自己创作素材，合作完成项目

四、教学情景
整个教学过程均在机房完成， 模拟实际工作环境， 避免课堂教学和实际工作环境脱节。
机房环境：
（1） 硬件环境： 考评用机为飞跃以上兼容机， 内存不少于 32M ， 最好 64M 或 128M ；
硬盘大于 500M ； VGA 彩显，带鼠标器、声卡、耳机（学生自备）。
（2）操作系统：Windows //XP
（3）软件环境：Dreamweaver CS3
（4）特殊要求：必需将 IIS 配置好，能正常进行 WEB 浏览
五、教学方法
本课程教学过程使用关键教学方法、使用目标、实施过程，如表5所表示。
教学方法
使用目标
实施过程
实施效果
项目法
在教学中把知识和技能进行有机结合， 充足发掘学生发明潜能，提升学生处理实际问题综合能 力，为学生零距离就业奠定基础。
老师提供项目， 引导学生经过项目实践寻求完成任务路径和方法，最终得到项目结果。
经调查大部分学生认
为这种教学法有利于
提升她们处理实际问
题问题综合能力。
任务驱动法
经过在真实任务中探索学习， 不停地提升学生成就感，更大地激发她们求知欲望，逐步形成一个感知心智活动良性循环，从而培养出独立探索、勇于开拓进取创新
能力。
在实践教学中以 “任务驱动”为根本， 将自主策划、任务分解、“教-学-做”和经验总结有机结合，采
用“老师部署任务→学生自主策划项目标完成→老师引导学生总结→学生撰写工作日志”模式。
经调查全部学生认为
这种教学法有利于提
高她们成就感和学习
爱好、加深她们对新知识学习欲望。
探究法
提供学生充足时间去思索、去实践，调动学生学习和主动性、主动性，促进学生主动思维，提倡学生自己动脑、动手去获取知识，充足发挥学生学习主体作用。
网页欣赏－问题提出－准备素材－分析方法－展示结果－模拟操作－归纳总结
经调查大部分学生认
为这种教学法有利于
提升她们思索问题和
分析问题能力。
分组法
经过合作式、探究式学习，让学生真正成为注意力中心，成为课堂教学主人， 让学生在获取知识、技能过程中，开发潜能，培养能力，收获愉快。
将班级分成若干小组,每组3~7人,以小组形