《静态网页设计》课程标准.docx
《《静态网页设计》课程标准.docx》由会员分享，可在线阅读，更多相关《《静态网页设计》课程标准.docx（11页珍藏版）》请在冰豆网上搜索。
《静态网页设计》课程标准
《静态网页设计》课程标准
课程名称：
静态网页设计
课程代码：
4010005
课程类型：
岗位技能课
学 分：
3
计划学时：
64
实践课时比例：
100%
主要授课方式：
理实一体化
考核方式：
上机考试
适用专业：
计算机网络与安全管理专业
先修课程：
计算机应用基础、计算机网络技术及应用
1.概述
1.1课程的性质
《静态网页设计》课程是高职计算机应用技术、软件服务外包、计算机网络与安全管理专业的一门专业必修课程。
本课程以《计算机文化基础》、《计算机网络技术及应用》、《C语言程序设计》或《JAVA程序设计》前导课程，本课程将从职业技术教育的特点出发，以培养学生实际动手能力为目标，学会怎样通过效果图完成对网页页面的布局，通过完成学习情境的学习，能够掌握HTML、CSS、简单的JavaScript的专业知识和专业技能。
使学生具备网页制作、规划与维护的专业能力和方法能力，以及培养学生的团队协作、沟通表达、工作责任心、职业规和职业道德等综合素质和能力。
作为专业的核心主干课程，使学生掌握商业的开发和流程，并能独立进行操作，在就业时能够成为一个合格的人才。
学生毕业后可胜任管理员、网页设计师等工作岗位。
1.2课程设计理念
本课程的设计体现“以能力为本位、以职业实践为主线、以项目课程为主体”，打破了传统的学科体系的模式，通过各项目的练习操作，熟练地掌握岗位所需知识和技能，并不断强化，项目体现操作能力和解决问题能力的培养。
充分体现了职业教育“以就业为导向，以能力为本位”的职业教育理念。
1.3课程开发思路
本课程主要以当下典型的项目案例为主题，教材为参考，同时借鉴了一些企业，有利于学生的理解与学习。
颠覆传统讲授风格，主要通过项目实例让学生以师傅带徒弟的形式一步一步学习项目开发流程。
带着对一个项目雏形的不断完善，功能需求及其他功能的完善，进阶，使学生掌握一个项目的设计与制作相关经验。
经验从实践中来，因此学生实验课时约占到了总课时的三分之二。
按照“以能力为本位、以职业实践为主线、以项目课程为主体的模块化专业课程体系”的总体设计要求，该门课程以静态为基础，以CSS优化方法为基本目标，紧紧围绕完成工作任务的需要来选择和组织课程容，突出工作任务与知识的联系，让学生在职业实践活动的基础上掌握知识，增强课程容与职业能力要求的相关性，提高学生的就业能力。
2.课程目标
本课程以学生能够网页开发与维护的实际工作能力为学习目标，使学生具备计算机及其它相关专业课学习和应用中所必需的网页制作与设计的基本知识和基本技能，形成解决实际应用问题的方法能力。
使学生通过项目的实现，具备良好的综合素质和职业道德，能够吃苦耐劳、爱岗敬业、团结合作。
为以后的学习动态网页设计课程打下基础。
2.1知识目标
（1） 了解WEB站点的工作原理；
（2） 理解Internet、WWW、HTTP、HTML的定义，计算机网络概念和作用；
（3） 了解服务器、客户端、浏览器的概念和作用；
（4） 掌握常规的规划及流程；
（5） 熟练掌握HTML语言中各种标记符的运用能力；
（6） 熟练掌握Dreamweaver应用软件的使用；
（7） 理解网页中脚本语言的使用方法；
（8） 熟练开发常规静态。
2.2素质目标
（1） 培养具有较强的网页设计创意思维、艺术设计素质；
（2） 培养学生在学习过程中解决困难的能力；
（3） 培养学生在学习过程中培养兴趣的能力，提高工作、学习的主动性；
（4） 培养学生理论联系实际的工作和学生方法；
（5） 培养具有高度责任心和良好的团队合作精神；
（6） 具有社会责任感。
2.3能力目标
（1） 熟练掌握Dreamweaver应用软件制作及网页；
（2） 熟练掌握使用绝对和相对URL，创建超，图像；
（3） 掌握在网页中添加CSS的方法；
（4） 培养学生设计、制作和维护动态。
（5） 培养学生搜集资料、阅读资料和利用资料的能力；
（6） 能独立制定、实施工作计划。
（7） 具备检查、判断能力；
（8） 具备简单的需求市场分析能力。
3.课程容和要求
学习情景
工作任务
知识要求
技能要求
学时
安排
1、制作一个简单的“班级”
熟悉Dreamweaver工具软件的使用、测试和调试
熟悉Dreamweaver工具软件的使用、测试和调试
1.1熟悉Dreamweaver工具软件的使用、测试和调试
2
2、制作个人求职网
完成在网页的布局与容的插入与美化
HTML语言的基本结构
表格标签的使用（布局）
图像的插入与图像标签
段落与换行及相应的标签
超与超标签
页面的美化（CSS）
熟悉一个网页制作的基本流程
4
3、新浪个人博客的制作
完成新浪个人博客的设计与制作
3.1熟悉效果图的使用
3.2熟悉页面的设置与布局
3.3熟悉板面的划分
3.4熟悉板块的设计、制作与重用
3.5CSS三种基本类型的区别与使用
3.6Flash的使用
3.7页面元素前后层次的设置
3.8换肤技术的原理的实现方法
3.1熟悉网页元素与CSS的联系
3.2熟悉素材的设计与网页的使用
3.3了解Javascript控制网页元素的方法
8
4、阶段测试与评析
了解学生对新浪个人博客的掌握情况
同3
同3
4
5、学习“动网论坛”主页的制作
学生进一步学习CSS复合选择器的使用
5.1熟悉效果图与素材图片的查看
5.2页面的布局与颜色渐变素材的使用
5.3动态效果导航栏的制作（CSS）
5.3.1CSS包含选择器
5.3.2CSS群组选择器
5.3.3CSS伪类选择器
5.4动态效果“亮点功能展示”板块的制作（CSS）
5.4.1CSS滤镜
5.4.2CSS控制元素的显示与隐藏
5.5CSS实现弹出式菜单（顶部导航菜单）
5.6圆角矩形在网页中常见的实现方法
5.7认识DIV+CSS布局
5.8认识“项目列表”布局
5.1认识列表布局
5.2认识DIV布局
5.3熟悉常用的CSS复合选择器的使用
5.4CSS实现简单动态效果的方法
16
6、阶段测试与评析
了解学生对“动网论坛”网页制作相关知识的掌握情况
同5
同5
6
7、完成“网络硬盘”页面的制作
学生掌握框架网页的相关技术与知识
7.1框架与框架集
7.2浮动框架
熟练框架与框架集的创建与设置
8
8、“新用户注册”页面的制作
学生掌握表单与客户端数据验证的一般方法
8.1表单的创建
8.2常用表单元素的添加与设置
8.3客户端数据验证
熟练表单与数据验证的方法
10
9、阶段测试与评析
了解学生对表单与框架相关知识的掌握情况
同7、8
同7、8
4
机动
2
合计
64
4.课程实施和建议
4.1课程的重点、难点及解决办法
课程的重点：
HTML语言、网页的布局方式、CSS及属性的设置。
课程的难点：
CSS及属性的设置、JavaScript及文档对象模型。
解决办法：
（1）为树立学生网页设计思想，掌握网页设计与制作相关技术精髓，在理论教学上，我们采用“项目驱动”教学方法，将相关知识点融入项目，通过项目实现，让学生掌握网页设计与制作关键技术，并对Dreamweaver工具制作网页有一个直观和更加感性的认识，再通过案例演示、实用教学等方法，从项目中提炼出相关知识点，让学生掌握学习HTML与CSS的基本方法与技巧。
（2）在培养学生基本编程能力方面，我们采用“榜样学习”的模式，学生在教师讲解的项目的基础上，完成与之知识点类似的项目，以进一步强化学生的实际编程能力。
（3）在培养学生实际工程能力方面，我们采用“三段论”教学方式，通过“项目调研、项目实现、项目验收”，熟悉企业项目开发流程，培养学生分析问题、解决问题能力和团队合作能力。
（4）学生创新能力方面，对学习程度较好的学生，通过让学生跟踪网页设计与制作新技术，锻炼学生的创新思维能力，并带动整体学风建设。
（5）在遵循本课程标准的前提下，可根据企业的实际需求，可适当调整或修改教学情境，从而更好的达到教学的目的。
特别是对新知识，新技术的选取上尤其重要。
4.2教学方法和教学手段
4．2．1教学方法
本课程主要采用“任务驱动式”教学法、“讨论法”教学法和“项目案例”教学法等多种教学方法。
（1）任务驱动式教学：
把教学容巧妙地隐含在每个任务之中，让学生提出问题，分析问题，自己解决问题，培养学生的自学能力和相对独立的分析问题、解决问题的能力。
（2）讨论法教学：
同学之间讨论问题，可以让学生养成独立思考问题、相互交流意见的习惯，从而提高他们分析和解决问题的能力。
（3）项目案例教学法：
以一个实际的项目或案例（超级课表）为例展开教学，将知识点融入项目中，运用面向对象的思想进行分析、设计和实现，树立学生面向对象的程序设计思想。
4．2．2教学手段
多媒体教学：
在课件设计中，营造轻松活泼的课堂气氛，通过图片、动画、实例演示等方式使课程容变得容易理解、学习，教学方式更为直观生动，教学过程更为紧凑，更能吸引学生的注意力，学生更能发挥学习的主体性和能动性，从而本课程的教学效果更为显著。
软件模拟教学：
由于程序设计课程的特点，如果将程序以课件形式提供给学生，学生可能会出现照抄课件的情况。
因此，在课堂上，对于要实现的程序，都是主讲教师边分析，边实现。
学生在教师分析的同时，可以自己实现程序，通过与教师所写程序的比较，找出自己的不足，提高自己的程序编制能力。
网络教学：
在课堂教学的基础上，课程组开发的网络课程为学生提供了教学课件、论坛讨论等前沿技术拓展学习资料。
利用校园网的优势，我们把该课程的所有教学资源上网，并利用电子、课程BBS与学生进行课外交流，为学生提供了更为广泛的沟通渠道与环境。
通过网络平台，学生可根据自己的学习情况有重点地选取再学习的容，提高了课程学习的效率。
4.3教学评价
各学习情景任务模块可参照下表进行评价：
学习情景
工作任务
评价目标
评价方式
评价比重
1、制作一个简单的“班级”
熟悉Dreamweaver工具软件的使用、测试和调试
会用Dreamweaver软件搭建环境
2、制作个人求职网
完成在网页的布局与容的插入与美化
能完成工作任务
过程性评价：
提交作品
5%
3、新浪个人博客的制作
完成新浪个人博客的设计与制作
能完成工作任务
过程性评价：
提交作品
10%
4、阶段测试与评析
了解学生对新浪个人博客的掌握情况
能完成阶段测试任务
总结性评价：
提交作品
20%
5、学习“动网论坛”主页的制作
学生进一步学习CSS复合选择器的使用
能完成工作任务
过程性评价：
提交作品
5%
6、阶段测试与评析
了解学生对“动网论坛”网页制作相关知识的掌握情况
能完成阶段测试任务
总结性评价：
提交作品
30%
7、完成“网络硬盘”页面的制作
学生掌握框架网页的相关技术与知识
能完成工作任务
过程性评价：
提交作品
5%
8、“新用户注册”页面的制作
学生掌握表单与客户端数据验证的一般方法
能完成工作任务
过程性评价：
提交作品
5%
9、阶段测试与评析
了解学生对表单与框架相关知识的掌握情况
能完成工作任务
总结性评价：
提交作品
20%
合计
100%
说明：
每个模块的考核主要考察学生的出勤情况、实际动手能力、理论知识的运用与掌握情况、完成作业的准确度、完整度、规度等、分析问题、解决问题的能力、合作沟通能力、学习态度、总结报告（报告的容、态度、写作水平等）等评定项目进行综合考核。
4.4教材编写
本课程主要采用与参考由英俊主编的——《网页设计与制作（第三版）》。
该教材有如下特色：
（1）以培养社会需要的高技能型人才为导向，充分体现高职特色的实用教材。
（2）本书将项目教学法、任务驱动教学法、案例教学法的教学思想融为一体，重点体现其精神实质。
将网页设计制作社为一个整体项目。
（3）本书既注重实用性、可操作性，又注重知识的科学性、系统性。
各章都设有明确的教学目标和教学任务，在容安排上特别适合任务驱动教学。
各章节容讲授尽量结合实际案例进行，即结合案例讲授知识点。
这样既体现了案例教学的实用性，又能保持知识的系统。
（4）本书以培养学生网页设计与制作的实践能力为主要教学目标，因此实践性的项目与案例将贯穿教材的始终，并安排了三个环节的实践技能训练。
①结合实际案例讲授教学容，并指导学生实践。
②依靠实训指导培养学生自主学习能力。
③通过综合练习测试并提高学生的综合应用能力。
4.5课程资源的开发与利用
1．教辅材料：
要力求接近实践，最好是来源于实践的案例与情境，并开发课程的习题、参考文献等容，向学生开放，以利于学生自主学习。
2．实训指导书：
格式正确、容全面，且能具体写明对学生的各项要求。
3．软件环境：
不断完善网络开发实训室的软件环境，开发环境与运行环境都应安装更高版本以满足更新技术的教学与实验。
4．硬件环境：
希望能够加大对硬件实训容的建设，例如添置平板电脑、智能手机等设备，满足学生学习移动终端网页设计与制作相关知识的学习与实验。
5．信息技术：
充分的利用各种信息技术，例如网络、多媒体课件等，为学生提供学习的便利条件。
例如加大课程的网络资源建设，把与课程有关的文献资料、教学大纲、电子教案、教学课件、习题、教学视频、采购管理的相关前沿信息、与职业资格考试相关的资料、学生与教师的互动等都放到网上，充分的为学生的自主学习提供环境条件。
4.6师资和实训条件
担任本课程的主讲教师需要具有丰富的网页前台软件开发经验和具备丰富的维护或推广经验。
同时还应具备较丰富的教学经验。
在教学组织能力方面，本课程的主讲教师应具备基本的设计能力，即根据本课程标准制定详细的授课计划，对每一堂课的教学过程精心设计，做出详细、具体的安排；还应该具备较强的施教能力，即掌握扎实的教学基本功并能够因材施教，在教学过程中还应具备一定的课堂控制能力和应变能力。
4.7其它说明
在《网页设计与制作》课程教学过程中，根据学生实际情况出发，适当地、合理地安排最新的知识容，如：
HTML5和CSS3常用的知识、技术与技能的教学。
尽可能的使学生掌握更新、更适用的技能。
4.8教学参考资料
4．8．1参考书目：
《网页设计与制作》英俊 主编出版社：
理工大学ISBN：
91
《DreamweaverCS5网页设计与制作基础教程》文杰书院主编出版社：
清华大学ISBN：
69
《网页设计与制作从零开始完全精通》柏松：
科学普及ISBN：
89
《响应式Web设计HTML5和CSS3实战》BenFrain著，王永强译：
人民邮电ISBN：
22
《HTML5与CSS3权威指南》许茂伟,马军，：
清华大学ISBN：
81
4．8．2推荐行业等：
科创职业学院
127社区.127cq.
新浪博客
动网论坛
异次元.playsoft.
w3school
HTML5中文网.html5china./
HTML5中国.html5cn.org/
jQuery官方jquery.
编写：
莉莉
校对：
罗强
审核：
唐锡雷
信息与建筑工程学院
2013年8月1日
升级会员 