《网页设计与制作》课程改革方案
课程名称：网页设计与制作
英文名称：Web Pages Design and Making
课程类型：电子商务专业核心课程
学时：64
时间：2009年  6 月
一、课程性质
本课程是为本院电子商务类专业的学生所开设的一门专门技术课程，本课程的目的是让学生在已学完计算机基础、计算机网络等课程的基础上进一步掌握网页设计的基本技能，为网络营销奠定基础。对今后从事网页设计的学生，为深入学习网站开发与建设奠定基础。
职业面向：从事网页设计与制作
职业拓展：网站建设、搜索引擎优化
二、课程目标
通过本课程的学习，使学生具备手工编写HTML 代码的能力，能够使用Dreamweaver
工具设计一个完整的静态网站的能力并具有建立站点、管理站点、测试网站与发布网站的能
力，具有良好的团队合作精神、获取知识能力、网页设计创意思维能力、彩感悟能力等素
质，达到职业技能鉴定网页制作（Dreamweaver 平台）中高级水平。
（一）典型工作任务
根据《电子商务专业（网站开发方向）培养方案》和职业岗位工作任务分析，确定《网页设计与制作》典型工作任务。
针对网页设计与制作人员应具备的能力和素质，我们将整个网页设计与制作课程分为以下七个典型工作任务。
【典型工作任务1】网站规划
【典型工作任务2】站点建设与管理
【典型工作任务3】首页设计
【典型工作任务4】首页美化
【典型工作任务5】设计二级页面
【典型工作任务6】设计交互式页面
【典型工作任务7】网站测试与发布
（二）专业能力与知识目标
根据典型工作任务，确定专业能力与知识目标如下表1所示。
表1专业能力与知识目标
的能力的套用
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．创建页面导航拦表格7．设计网站导航栏与版
权区的内容
8．按照左、中、右和上、
中、下的顺序设计“卓帆
宏观教学方法
项目教学法
微观教学方法
任务驱动法
探究法
分组法
4．创建页面主体内容区表格5．创建页面版权区表格
6．插入“卓帆五金制品厂”网站的LOGO 和Banner 五金制品厂”网站的首页
主体内容区的内容
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．用行为设计“卓帆五金制品厂”网站的弹出广告页面和浮动广告页面5．阶段成果评价，调整
工作计划
宏观教学方法
项目教学法
微观教学方法
任务驱动法
探究法

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。