网页设计课程标准

1、网页设计课程标准课程名称：网页设计适用专业：计算机应用技术，电子商务建议学时：72学分：41.前言1.1 课程的性质网页设计 dreamweaver是计算机应用技术专业和电子商务的主要专业课之一，是为满足行业企业在网络媒体内容制作岗位对静态网页设计和制作人员的用人需求而开设的一门专业必修课，占 4 学分。1.2 课程定位本课程主要培养学生从事网页设计与制作的基本技能，使学生掌握网页设计的概念和方法，能够运用专业的网页设计工具和脚本语言，进行网站规划、建立和维护，具备网页设计岗位的职业技术能力。在本课程之前，学生已学习了计算机应用基础、Photoshop 平面设计等基础课程的，具备基本的计算机操

2、作与图形图像制作能力，本课程的后续课程是ASP 动态网页设计。1.3 设计思路本课程的设计思路以就业为导向，按照基于工作过程的职业能力来进行课程开发，邀请企业行业网络专家对计算机网络专业所涵盖的岗位群进行工作任务和职业能力分析，以此为依据确定本课程的工作任务和课程内容，并参照行业职业标准，以任务引领为课程框架，将课程按递进方式设计成项目，并以项目为单元组织教学，使学生由浅入深，以点到面的全面掌握网页设计的职业技能。同时开发教材，对教学过程的组织 、教学条件、课程评价都进行了详细的设计，完成本课程的整体教学内容和教学实施的整体设计，建立了基于网页设计的课程标准。2.课程目标本课程以学生能够独立进

3、行静态网站开发与维护的实际工作能力为学习目标，要求学生具备综合运用 HTML 技术制作网页，规划、开发、发布管理静态网站的专业知识和技能，形成解决实际应用问题的方法能力，为以后的学习ASP 动态网页设计课程打下基础。本课程培养学生综合运用 HTML 技术制作网页，以及使用常用网页设计工具规划、开发、发布、管理静态网站的专业知识和技能，具备解决实际应用问题的方法能力，为以后的学习ASP 动态网页设计课程打下基础。具体目标如下：2.1 知识目标能处理网页图形图像素材能规划、创建、发布、维护静态网站能运用 javascript 控制网页行为能运用多种布局技术制作网页布局能灵活运用 css 技术规范、

4、美化网页内容能跟踪和学习并应用网页设计与制作的新知识和新技术2.2 技能目标能合理的规划商业网站；能合理设计网页的布局方案和美术设计方案； 能规范的编写网页策划书；能熟练应用 Photoshop 绘制网页导航要素； 能熟练应用 Photoshop 绘制网页信息区块；能熟练应用 Photoshop 绘制网页美术文字效果； 能熟练应用 Photoshop 处理网页插图；能熟练应用 Photoshop 绘制网页整体效果图；能熟练应用 Photoshop 正确的对网页效果图进行切片和优化； 能熟练应用 Dreamweaver 进行网站站点管理和初始化页面； 能熟练应用 Dreamweaver 对网页的

5、总体结构进行排版；能熟练应用 Dreamweaver 对网页插片和文字进行编排； 能熟练应用 Dreamweaver 制作网页的细节效果；能应用 Dreamweaver 进行 DIV+CSS 结构排版； 能熟练应用 Dreamweaver 制作模板与网站子页；能应用 Dreamweaver 制作框架页面结构和简单页面脚本交互功能； 能熟练应用 Dreamweaver 链接网页与测试网站；能应用互联网资源发布网站；能熟练应用 Dreamweaver 维护网页。2.3 素质目标培养良好的劳动纪律观念；培养认真做事、细心做事的态度； 培养团队协作精神；培养表述、回答等语言表达能力； 培养交流、沟通的

6、能力3.课程内容和学时安排以真实工作项目为依据，对项目进行功能分解、归纳，提取工作任务，分析工作任务所涉及的相关知识，设计一系列能力要求不断提升的进阶式学习任务， 以学习任务为教学单元组织课程教学，将网页各类语言的应用融入到各学习情境中，模拟网站开发流程，设计以训练学生为主、教师指导为辅的基于工作过程教学活动，培养学生岗位职业技能应用及自主学习能力，从而构建该课程的教学内容。网页设计课程教学内容设计如下表所示。任务课序号知识要点技能目标名称时常见网页设计工具的使用HTML 文档基本结构制作图文本排版控制标记符1 文混排图像插入标记符网页特殊字符css 的意义、创建与使用方法安装与启用网页制作软

7、件熟悉网页制作的基本步骤正确插入文本与特殊字符正确对文本进行分段分行正确插入图像运用 css 技术控制文字图片样式4(一)总体设计有序列表标记符制作个 无序列表标记符2 人简历 表格标记符网页超链接标记符Css 技术对列表的控制方法网页图像素材的特点与主要类型Fireworks 对图片进行批处理的方法制作电电子相册排版要点3 子相册图像、表格、超链接标记符的相关属网页性Css 技术的滤镜使用方法本地网站的创建与发布IIS 的安装与设置方法网站的规划与制作流程框架技术进行网页布局的方法制作有序列表、无序列表制作混合列表运用超链接启动电子邮箱链接4.运用表格进行简单页面排版运用 css 技术设置列

8、表显示方式熟悉网页图像素材的特点与类型掌握 Fireworks 的基本操作方法了解并掌握网页图片处理的主要方法6熟知图像、表格、超链接标记符的属性运用 css 滤镜技术美化图片效果正确创建、设置、发布本地网站正确安装、设置与管理 IIS运用框架技术进行网页布局锚点技术在长版面网页中的应用制作唐4 诗欣赏超链接标记符在框架技术中的作用运用图像设计软件制作 LOGO10网站制作个5人网站制作用6 户注册网页锚点链接技术网站 LOGO 的制作方法制作网站 flash banner 的方法多媒体素材网页的制作方法个人网站的规划与制作流程个人网站的规划方法与制作特点运用图形制作工具绘制网页布局Firew

9、orks 切片并导出网页的方法Dreamweaver 布局切片网页的方法页内框架技术布局网页的方法动态导航条的制作方法css 进行样式规范与美化网页的方法表单与表单元素的相关标记符表单与表单元素的作用表格布局表单元素css 对表格、表单元素的控制方法运用 flash 制作具有动态效果的banner掌握向网页插入动画、视频等多媒体素材的方法熟悉 css 控制超链接样式的方法了解个人网站的制作方法与特点设计并绘制网页布局图应用切片技术设计网页布局结构运用 Dreamweaver 优化切片网页10运用页内框架技术实现网站超链接掌握制作动态导航条的方法运用 css 对网页进行样式规范与美化熟悉表单及表

10、单元素的设置方法掌握表格布局表单元素的方法运用 css 对表格、表单元素进行规范4与美化Dreamweaver 检验表单行为的应用掌握 Dreamweaver 验证表单的方法以电子邮件方式提交表单的方法Javascript 基本语法知识掌握电子邮件形式提交表单的方法制作智能显示Javascript 语句嵌入到 html 的方法 熟悉 javascript 语法知识表单元素调用 Javascript 语句的方 掌握在html 中调用javascript 代码7效果的网页法Javascript 函数的调用方法时间对象的使用方法浏览器对象的控制方法的方法6熟悉调用 javascript 的事件控制与

11、使用时间对象、浏览器对象Javascript 判断、循环等语句的语 灵活运用 Javascript 分支与循环语法知识句创建与调用 Javascript 自定义函数 掌握 Javascript 自定义函数的方法制作订8单网页制作在9 线考试网页的方法数组对象的控制与使用方法字符对象的控制与使用方法文档对象的控制与使用方法Javascript 对表单元素的访问与控制方法定时器的使用方法HTML 技术的综合应用方法门户网站的设计、规划与制作流程制作数 网站创建、发布、维护管理的方法掌握数组对象、字符对象、文档对象 6的控制与使用方法综合运用 javascript、html、css 技术掌握 Jav

12、ascript 访问与控制表单元素的方法6灵活设置与取消定时器运用 HTML 处理页面的能力熟悉运用 div+css 技术设计网页掌握Dreamweaver 创建与运用div Ap 的方法码产品 Div+css 布局网页的方法10门户网 创建子菜单的方法掌握运用 Dreamweaver 时间轴功能制作网页漂移元素的方法掌握 Dreamweaver 行为面板的使用方法灵活应用 HTML 增加网页特效12站html 技术Dreamweaver 的高级应用技术68整个课程通过 10 个技术难度渐进式的工作过程为向导，以典型工作任务为基点，设计综合理论知识、操作技能和职业素养为一体教学单元活动。用任务

13、驱动教学的各个环节。边做边学，带动相关知识点，使学生通过完成工作任务教学单元的学习，不但能够掌握网页制作与网站设计的专业知识和专业技能，还能够全面培养其团队协作、沟通表达、工作责任心、职业道德与规范等综合素质，学生通过学习的过程掌握工作岗位所需要的各项技能和相关专业知识。（二）课程单元内容任务名称一、制作图文并茂的网页参考课时2知 常见网页设计工具的使用识 HTML 文档基本结构要 文本排版控制标记符点 图像插入标记符特殊字符以及物理显示标记符css 的意义、创建与使用方法技 安装和启动网页制作软件能 熟悉网页制作的基本步骤目 正确插入文本与特殊字符标 正确对文本进行分段分行正确插入图像运用

14、css 技术控制文字图片样式任务驱动工作过程1安装、启动与认识常用的网页制作工具2制作一个基本结构完整、内容空白的 HTML 文档3456拓展任务设置 HTML 文档的基本属性向 HTML 文档中添加文本信息，并运用相关标记符号进行排版向 HTML 文档插入图片，并运用相关标记符号进行图文混排为网页的基本属性、文字的样式建立并应用相关css 类型，规范样式美化页面12给定文本内容与素材，制作一个图文并茂的网页给定主题，自行组织与制作素材，制作一个图文并茂的网页任务名称知 有序列表标记符识 无序列表标记符要 表格标记符点 超链接标记符二、制作个人简历网页参考课时技 制作有序列表、无序列表能 制作

15、混合列表4Css 技术对列表的控制方法目 运用超链接标记符启动电子邮箱链接标 运用表格进行简单页面排版运用 css 技术设置列表显示方式简单任务活动安排序号12345任务工作过程指导任务名称制作一个包含有序列表、无序列表的网页制作一个包含混合列表的网页制作一个显示课程表的网页制作一个将以上链接以上网页的网页制作个人简历网页(1) 表格布局页面说明应用 UL OL 标记符嵌套应用 UL OL 标记符应用 TABLE 标记符应用 A 标记符给出布局供学生参考，(2) 对表格中的单元格进行合并、拆分，完成页面主体格局 分析制作过程，给出指(3) 在相应单元格中插入相关信息，完成简历信息制作(4) 电

16、子邮箱启动的制作引后学生自行完成任务名称三、制作电子相册网页参考课时6知 网页图像素材的特点与主要类型识 Fireworks 对图片进行批处理的方法要 电子相册排版要点点 图像、表格、超链接标记符的相关属性Css 技术的滤镜使用方法技 熟悉网页图像素材的特点与类型能 掌握 Fireworks 的基本操作方法目 了解并掌握网页图片处理的主要方法标 熟知图像、表格、超链接标记符的属性运用 css 滤镜技术美化图片效果任务驱动工作过程1规划与设计网页的风格与布局结构2运用 Fireworks 制作具有艺术效果的网页文字标题3运用 Fireworks 对相册素材图片的大小、版面样式、色彩等进行批处理，

17、并导出结果4利用表格对网页进行基本布局5创建 css 文件，设置文字与图片格式，特别是为图片设置美化的滤镜效果6向布局表格的单元格中插入相应的图片素材和文字说明，并应用css 样式7为图片素材和文字设置相关超链接拓展任务任务名称四、制作唐诗欣赏网站参考课时10知 本地网站的创建与发布识 IIS 的安装与设置方法要 网站的规划与制作流程点 框架技术进行网页布局的方法超链接标记符在框架技术中的作用锚点链接技术网站 LOGO 的制作方法制作网站 flash banner 的方法多媒体素材网页的制作方法技 正确创建、设置、发布本地网站能 正确安装、设置与管理 IIS目 运用框架技术进行网页布局标 锚点

18、技术在长版面网页中的应用运用图像设计软件制作 LOGO运用 flash 制作具有动态效果的banner掌握向网页插入动画、视频等多媒体素材的方法熟悉 css 控制超链接样式的方法任务驱动工作过程1规划网站的模块（可按作者划分模块）、首页布局结构（左上下结构）2素材准备：设计并制作网站 LOGO、flash Banner 及相关多媒体素材3创建相关文件夹，在 Dreamweaver 创建本地站点，在 IIS 做相关设置4运用锚点技术创建长版面子模块网页，并运用 css 技术实现图文并茂的效果5创建 left.htm 页面，插入 LOGO、标题并设置超链接源及目的窗口，形成导航条效果6创建 top

19、.htm 页面，插入相关 flash Banne7创建 main.htm 页面，内容为图文并茂的网站主题简介，作为首页主框架的内容8创建首页 index.htm，运用框架集布局页面，插入相关的框架页面，完成相关超链接9发布与调试网站任务名称五、制作个人网站参考课时10知 个人网站的规划方法与制作特点识 运用图形制作工具设计绘制网页布局要 Fireworks 执行切片并导出网页的方法点 Dreamweaver 布局切片网页的方法页内框架技术在网页布局中的应用方法动态导航条的制作方法css 对网页进行样式规范与美化的方法技 了解个人网站的制作方法与特点能 设计并绘制网页布局图目 应用切片技术设计网

20、页布局结构标 运用 Dreamweaver 优化切片网页运用页内框架技术实现网站超链接掌握制作动态导航条的方法运用 css 对网页进行样式规范与美化任务驱动工作过程1规划个人网站的模块内容（基本模块为：自我介绍、个人爱好、个人相册、文章）、首 页布局结构（上左右结构）2设计并绘制网站首页布局图3在 Fireworks 中对布局图进行切片操作，并导出文件夹4在 Dreamweaver 创建本地站点，在 IIS 做相关设置5素材准备：动态导航条及相关多媒体素材6创建 css 文件，在 Dreamweaver 设置并优化切片网页，创建页内框架标记符7创建并制作“自我介绍”、“个人爱好”、“相册”、“

21、文章”等子模块页面及相关 css8建立超链接，完成网站拓展任务运用切片技术，由全球 300 强企业网站首页的截图，设计并制作首页、二级子页样式任务名称六、制作用户注册网页参考课时4知 表单与表单元素的相关标记符识 表单与表单元素的作用要 表格布局表单元素点 css 对表格、表单元素的控制方法Dreamweaver 检验表单行为的应用以电子邮件方式提交表单的方法技 熟悉表单及表单元素的设置方法能 掌握表格布局表单元素的方法目 运用 css 对表格、表单元素进行规范与标 美化掌握 Dreamweaver 验证表单的方法掌握电子邮件形式提交表单的方法任务驱动工作过程1 创建页面，插入表单标记符，将表

22、单行为设置为电子邮件提交2 在表单中插入表格，并创建相应的 css 样式对表格格式进行控制3 在表格的单元格中插入表单元素，并创建相应的 css 样式对表单格式进行控制4 通过 Dreamweaver 的行为面板设置单击提交按钮的行为任务名称七、制作智能显示效果的网页参考课时8知 Javascript 基本语法知识识 Javascript 语句嵌入到 html 的方法 要 表单元素调用 Javascript 语句的方法点 Javascript 函数的调用方法时间对象的使用方法浏览器对象的控制方法技 熟悉 javascript 语法知识能 掌握在 html 中调用 javascript 代码的目

23、 方法标 熟悉调用 javascript 的事件控制与使用时间对象、浏览器对象序号12345简单任务活动安排任务名称制作一个能够输入并记载用户信息的网页制作一个具有显示当前时间功能的网页制作一个可以更改网页背景颜色的网页制作一个可以设置浏览器状态栏信息的网页制作一个根据具有智能显示效果的网页说明prompt( )函数的调用时间对象的使用文档对象浏览器对象给出案例供学生参考，分析制作过程，给出指引并鼓励学生添加智能效果， 学生自行完成5 测试网页，验证设计结果任务(1)根据用户的访问时间设置相应的问候语工作(2)根据用户的喜好设置网页背景与字体颜色过程(3)状态栏中显示用户当前的操作行为指导(4

24、)具有设置为默认页面、添加到收藏夹等功能任务名称八、制作订单网页参考课时8任务名称九、制作在线考试网页参考课时8知 Javascript 对表单元素的访问与控制方 技 掌握 Javascript 访问与控制表单元素识 法能 的方法要 定时器的使用方法目 灵活设置与取消定时器点 HTML 技术的综合应用方法标 运用 HTML 处理页面的能力简单任务活动安排提交方式、若自动关闭后成进一步完善知 Javascript 判断、循环等语句的语法知识 技 灵活运用 Javascript 分支与循环语句识 创建与调用 Javascript 自定义函数的方 能 掌握 Javascript 自定义函数的方法要

25、法目 掌握数组对象、字符对象、文档对象的点 数组对象的控制与使用方法标 控制与使用方法字符对象的控制与使用方法综合运用 javascript、html、css 技术文档对象的控制与使用方法简单任务活动安排序号任务名称1 制作一个能记录并输出一组用户登记信息的网页235任务工作过程指导在以上任务增加功能：用户可以控制体中止输入信息在以上任务增加功能：美化用户的输出信息制作订单网页(1) 能列出商品的名称及单价供用户选择(2) 用户可以在选择商品的同时输入数量(3) 根据用户输入的信息输出订单，包括商品名称、数量、单价，以及总的金额(4) 用户确认订单后，信息以邮件的方式提交说明prompt( )

26、+ 数组+文档对象判断语句的使用css给出案例供学生参考，分析制作过程，给出指引并鼓励学生从界面友好、操作方便等方面增加网页功能，学生自行完成序号任务名称说明1制作一个具有单选及复选按钮的网页表单设计2在以上任务增加功能：记载用户的选择信息，并输出访问表单、 数组对象、alert()3在以上任务增加功能：一定时间内浏览器自动关闭定时器、浏览器对象4在以上任务增加功能：将信息输出在新浏览器窗口中文档对象、浏览器对象5制作在线考试网页任务(1)向演示案例效果，提示学生登记并显示用户登陆信息，并显示倒计时时间工作(2)存在几个问题：成绩最后的以单选、多选按钮的形式显示题目过程指导(3)用户按提交按钮

27、后，弹出新窗口显示考试结果：正绩如何算、等等，鼓励学生确答案、用户答案、题目得分、总得分(4)在时限内若未按提交按钮，则考试窗口自动关闭任务名称十、制作数码产品门户网站参考课时12知 门户网站的设计、规划与制作流程识 网站创建、发布、维护管理的方法要 Div+css 布局网页的方法点 创建子菜单的方法html 技术Dreamweaver 的高级应用技术技 熟悉运用 div+css 技术设计网页能 掌握Dreamweaver 创建与运用 div Ap 的目 方法标 掌握运用 Dreamweaver 时间轴功能制作网页漂移元素的方法掌握 Dreamweaver 行为面板的使用方法灵活应用 HTML

28、 增加网页特效任务工作过程指导1根据主题规划与设计网站功能模块、风格2做出网站一级页面、二级页面的草稿图3以上工作经老师认可后，开始进行网站的开发学生完成作品后，以小组的方式演示答辩，成绩为学生小组互评*0.5+ 教师评分*0.54.实施建议4.1 教学组织建议1、案例教学引入企业的工程项目，作为典型案例，紧扣课程应解决的理论和实际问题， 对案例的过程进行详细的分析、解剖、总结。教学过程中由老师讲解案例操作步骤和相关知识，然后由学生仿照老师的演示实现服务器架构。通过对老师操作视频的观看，提高了同学们对知识点的应用的理解，有助于提高学生的学习兴趣力， 掌握相应岗位技能。2、讲练结合对基础知识精心

29、讲解，并配合课堂练习，加强了师生的及时交流，便于发现问题、解决问题，也便于对基本知识的牢固掌握。在每一次授课过程中，教师先阐述本章项目驱动部分的任务，然后针对提出的任务，精心讲解本章节的知识点， 最后教师现场演示，解决问题，完成任务。在现场演示过程中，教师指导学生进行练习，完成部分功能的实现。通过讲练结合，达到了举一反三，灵活应用的目的。3、课堂演示教师为每一章内容精心制作了具有动态效果的幻灯片，以及便于对理论知识理解的实例代码，随堂演示，条理清晰，并在开发环境中演示实例运行效果。在上新课前，对上节课的知识要点进行回顾、讲述本节课的目标及重点、难点，知识点讲解过程中，通过幻灯片动画将知识点和问

30、题逐一引入，充分激发学生学习的积极性。4、师生之间的良好互动，营造了一个轻松、愉快的学习氛围在教学中，教师将学生视为等待老师去点燃的炭火，而不是让老师去填充的容器。以学生为主体，教师为主导，通过各任务单元里精心设计的问题，引导学生思考、发言，表达自己的设计思路，并请学生到教师机上演示案例，指出系统给出错误的原因，帮助排错，鼓励学生参与教学过程，变被动学习为主动学习。5、任务驱动利用各章节分解的项目任务，培养自学能力和创新精神。教师授课首先给出本章项目任务，针对任务讲授相关知识点，然后利用这些知识点来解决问题，让学生带着问题听课，培养了学生从多角度、多层次、宽范围获取和应用知识的能力。6、现场教

31、学依托企业，强化实训。让具有丰富项目开发经验的双师型教师或企业项目工程师在真实的职业环境中现场教学。授课内容包括对某些知识点扩展，新技术的应用，当前研发项目重点等。4.2 教学评价建议1 突出过程评价，以职业岗位工作过程为考评基础，以全学期的教学情境进度为考核时间线，以一个完整的网站页面设计制作项目的驱动，在每个教学情境完成教学之后，要求学生运用该教学情境所学技能设计制作项目中的相关进度作业（作品），并对其作业（作品）进行考核。从而形成阶段性过程考核成绩，该成绩作为总评成绩的重要组成部份（占 60）。2 强调目标评价和理论与实践一体化评价，注重引导学生进行学习方式的改变。3 强调课程结束后的综

32、合评价，结合全教学过程的过程考核项目，对学生的最终过程考核作品，从策划能力、美工设计能力、制作技术应用能力三个方面进行综合评价。从而充分发挥学生主动性和创造力，还要注重考核学生动手能力和在实践中分析问题、解决问题的能力。4 建议在教学中注重团队协作能力的评分，课程结束时进行综合模块考核。评序工作过程模块评价目标评价方式价号分值1 编写网站策划书评价学生的网站规划能力总结性评价5评价学生的网页美术设计能力；评2 绘制网页效果图总结性评价15价学生的效果图绘制能力评价学生的网页排版能力；评价学3 制作网站首页生的 CSS 应用能力；评价学生其它网页 总结性评价20相关辅助技术应用的能力。制作网站模

33、板文评价学生的模板文件的制作与应4总结性评价15件与子页面用能力。评价学生的链接技术应用能力；评5 链接与测试网站形成性评价5价学生对网站站点的综合管理能力。在过程考核中，各教学情境可参照下表进行评价：合计60在综合考核中，各任务模块可参照下表进行评价：序评评价点参考要求号评价方式价分值1 策划能力网站策划方案充分满足客户的建站目的总结性评价5和内容要求。网站栏目规划合理。方案表达清晰、直观、详实。方案具有可操作性。2 美工设计美工风格设计符合网站策划的主题定总结性评价1能力位、美术效果佳、整体感强、细节丰富、具5有专业感。效果图绘制技术运用得当，表现力强，具有质感。3制作技术网站站点管理得当，文件命名和存放路 总结性评价2应用能力径规范；排版技术运用得当，能完好的再现网页美术设计效果；CSS 应用技术运用得当， 排版布局合理；模板与子页制作得当；网页脚本交互功能运