静态网页设计课程统一标准.doc

《静态网页设计》课程原则
课程名称：静态网页设计
课程代码：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.5 CSS三种基本类型区别与使用
3.6 Flash使用
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.1 CSS包括选取器
5.3.2 CSS群组选取器
5.3.3 CSS伪类选取器
5.4 动态效果“亮点功能展示”板块制作(CSS)
5.4.1 CSS滤镜
5.4.2 CSS控制元素显示与隐藏
5.5 CSS实现弹出式菜单(顶部导航菜单)
5.6 圆角矩形在网页中常用实现办法
5.7 结识DIV+CSS布局
5.8 结识“项目列表”布局
5.1 结识列表布局
5.2 结识DIV布局
5.3 熟悉惯用CSS复合选取器使用
5.4 CSS实现简朴动态效果办法
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：1
《Dreamweaver CS5网页设计与制作基本教程》文杰书院 主编 出 版 社：清华大学出版社 ISBN：9
《网页设计与制作 从零开始完全精通》柏松 出版社：上海科学普及出版社 ISBN：9
《响应式Web设计HTML5和CSS3实战》Ben Frain著，王永强译 出版社：人民邮电出版社 ISBN：2
《HTML5与CSS3权威指南》许茂伟,马军，出版社：清华大学出版社 ISBN：1
4．8．2推荐行业等网站：
重庆科创职业学院
127社区
新浪博客
动网论坛
异次元
w3school
HTML5中文网
HTML5中华人民共和国
jQuery官方网站

编写：张莉莉
校对：罗强
审核：唐锡雷
信息与建筑工程学院
8月1日