《静态网页设计》课程标准(11页).doc

《《静态网页设计》课程标准(11页).doc》由会员分享，可在线阅读，更多相关《《静态网页设计》课程标准(11页).doc（11页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、-静态网页设计课程标准-第 11 页静态网页设计课程标准课程名称：静态网页设计课程代码：4010005课程类型：岗位技能课学分：3计划学时：64实践课时比例：100%主要授课方式：理实一体化考核方式：上机考试适用专业：计算机网络与安全管理专业先修课程：计算机应用基础、计算机网络技术及应用1. 概述1.1课程的性质 静态网页设计课程是高职计算机应用技术、软件服务外包、计算机网络与安全管理专业的一门专业必修课程。本课程以计算机文化基础、计算机网络技术及应用、C语言程序设计或JAVA程序设计前导课程，本课程将从职业技术教育的特点出发，以培养学生实际动手能力为目标，学会怎样通过效果图完成对网页页面的布

2、局，通过完成学习情境的学习，能够掌握HTML、CSS、简单的JavaScript的专业知识和专业技能。使学生具备网页制作、网站规划与网站维护的专业能力和方法能力，以及培养学生的团队协作、沟通表达、工作责任心、职业规范和职业道德等综合素质和能力。作为专业的核心主干课程，使学生掌握商业网站的开发和流程，并能独立进行操作，在就业时能够成为一个合格的人才。学生毕业后可胜任网站管理员、网页设计师等工作岗位。1.2课程设计理念本课程的设计体现“以能力为本位、以职业实践为主线、以项目课程为主体”，打破了传统的学科体系的模式，通过各项目的练习操作，熟练地掌握岗位所需知识和技能，并不断强化，项目体现操作能力和解

3、决问题能力的培养。充分体现了职业教育“以就业为导向，以能力为本位”的职业教育理念。1.3课程开发思路本课程主要以当下典型的项目案例为主题，教材为参考，同时借鉴了一些企业网站，有利于学生的理解与学习。颠覆传统讲授风格，主要通过项目实例让学生以师傅带徒弟的形式一步一步学习项目开发流程。带着对一个项目雏形的不断完善，功能需求及其他功能的完善，进阶，使学生掌握一个网站项目的设计与制作相关经验。经验从实践中来，因此学生实验课时约占到了总课时的三分之二。按照“以能力为本位、以职业实践为主线、以项目课程为主体的模块化专业课程体系”的总体设计要求，该门课程以静态网站为基础，以CSS优化方法为基本目标，紧紧围绕

4、完成工作任务的需要来选择和组织课程内容，突出工作任务与知识的联系，让学生在职业实践活动的基础上掌握知识，增强课程内容与职业能力要求的相关性，提高学生的就业能力。2.课程目标本课程以学生能够网页网站开发与维护的实际工作能力为学习目标，使学生具备计算机及其它相关专业课学习和应用中所必需的网页制作与网站设计的基本知识和基本技能，形成解决实际应用问题的方法能力。使学生通过项目的实现，具备良好的综合素质和职业道德，能够吃苦耐劳、爱岗敬业、团结合作。为以后的学习动态网页设计课程打下基础。2.1知识目标(1)了解WEB站点的工作原理；(2)理解Internet、WWW、HTTP、HTML的定义，计算机网络概

5、念和作用；(3)了解服务器、客户端、浏览器的概念和作用；(4)掌握常规网站的规划及流程；(5)熟练掌握HTML语言中各种标记符的运用能力；(6)熟练掌握Dreamweaver应用软件的使用；(7)理解网页中脚本语言的使用方法；(8)熟练开发常规静态网站。2.2素质目标(1)培养具有较强的网页设计创意思维、艺术设计素质；(2)培养学生在学习过程中解决困难的能力；(3)培养学生在学习过程中培养兴趣的能力，提高工作、学习的主动性；(4)培养学生理论联系实际的工作和学生方法；(5)培养具有高度责任心和良好的团队合作精神；(6)具有社会责任感。2.3能力目标(1)熟练掌握Dreamweaver应用软件制

6、作网站及网页；(2)熟练掌握使用绝对和相对URL，创建超链接，图像链接；(3)掌握在网页中添加CSS的方法；(4)培养学生设计、制作和维护动态网站。(5)培养学生搜集资料、阅读资料和利用资料的能力；(6)能独立制定、实施工作计划。(7)具备检查、判断能力；(8)具备简单的需求市场分析能力。3.课程内容和要求学习情景工作任务知识要求技能要求学时安排1、制作一个简单的“班级网站”熟悉Dreamweaver工具软件的使用、测试和调试熟悉Dreamweaver工具软件的使用、测试和调试1.1熟悉Dreamweaver工具软件的使用、测试和调试22、制作个人求职网完成在网页的布局与内容的插入与美化HTM

7、L语言的基本结构 表格标签的使用(布局)图像的插入与图像标签段落与换行及相应的标签超链接与超链接标签页面的美化(CSS)熟悉一个网页制作的基本流程43、新浪个人博客的制作完成新浪个人博客的设计与制作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控制网页元素的方法84、阶段测试与评析了解学生对新浪个人博客的掌握情况同

8、3同345、学习“动网论坛”主页的制作学生进一步学习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复合

9、选择器的使用5.4 CSS实现简单动态效果的方法166、阶段测试与评析了解学生对“动网论坛”网页制作相关知识的掌握情况同5同567、完成“网络硬盘”页面的制作学生掌握框架网页的相关技术与知识7.1 框架与框架集7.2 浮动框架熟练框架与框架集的创建与设置88、“新用户注册”页面的制作 学生掌握表单与客户端数据验证的一般方法8.1表单的创建8.2 常用表单元素的添加与设置8.3 客户端数据验证熟练表单与数据验证的方法109、阶段测试与评析了解学生对表单与框架相关知识的掌握情况同7、8同7、84机动2合计644.课程实施和建议4.1课程的重点、难点及解决办法课程的重点：HTML语言、网页的布局方式

10、、CSS及属性的设置。课程的难点：CSS及属性的设置、JavaScript及文档对象模型。解决办法：(1) 为树立学生网页设计思想，掌握网页设计与制作相关技术精髓，在理论教学上，我们采用“项目驱动”教学方法，将相关知识点融入项目，通过项目实现，让学生掌握网页设计与制作关键技术，并对Dreamweaver工具制作网页有一个直观和更加感性的认识，再通过案例演示、实用教学等方法，从项目中提炼出相关知识点，让学生掌握学习HTML与CSS的基本方法与技巧。(2) 在培养学生基本编程能力方面，我们采用“榜样学习”的模式，学生在教师讲解的项目的基础上，完成与之知识点类似的项目，以进一步强化学生的实际编程能力

11、。(3)在培养学生实际工程能力方面，我们采用“三段论”教学方式，通过“项目调研、项目实现、项目验收”，熟悉企业项目开发流程，培养学生分析问题、解决问题能力和团队合作能力。(4) 学生创新能力方面，对学习程度较好的学生，通过让学生跟踪网页设计与制作新技术，锻炼学生的创新思维能力，并带动整体学风建设。(5) 在遵循本课程标准的前提下，可根据企业的实际需求，可适当调整或修改教学情境，从而更好的达到教学的目的。特别是对新知识，新技术的选取上尤其重要。4.2教学方法和教学手段421教学方法本课程主要采用 “任务驱动式”教学法、“讨论法”教学法和“ 项目案例” 教学法等多种教学方法。（1）任务驱动式教学：

12、把教学内容巧妙地隐含在每个任务之中，让学生提出问题，分析问题，自己解决问题，培养学生的自学能力和相对独立的分析问题、解决问题的能力。（2）讨论法教学：同学之间讨论问题，可以让学生养成独立思考问题、相互交流意见的习惯，从而提高他们分析和解决问题的能力。（3）项目案例教学法：以一个实际的项目或案例（超级课表）为例展开教学，将知识点融入项目中，运用面向对象的思想进行分析、设计和实现，树立学生面向对象的程序设计思想。422教学手段多媒体教学：在课件设计中，营造轻松活泼的课堂气氛，通过图片、动画、实例演示等方式使课程内容变得容易理解、学习，教学方式更为直观生动，教学过程更为紧凑，更能吸引学生的注意力，学

13、生更能发挥学习的主体性和能动性，从而本课程的教学效果更为显著。 软件模拟教学：由于程序设计课程的特点，如果将程序以课件形式提供给学生，学生可能会出现照抄课件的情况。因此，在课堂上，对于要实现的程序，都是主讲教师边分析，边实现。学生在教师分析的同时，可以自己实现程序，通过与教师所写程序的比较，找出自己的不足，提高自己的程序编制能力。网络教学：在课堂教学的基础上，课程组开发的网络课程为学生提供了教学课件、论坛讨论等前沿技术拓展学习资料。利用校园网的优势，我们把该课程的所有教学资源上网，并利用电子邮件、课程BBS与学生进行课外交流，为学生提供了更为广泛的沟通渠道与环境。通过网络平台，学生可根据自己的

14、学习情况有重点地选取再学习的内容，提高了课程学习的效率。4.3教学评价各学习情景任务模块可参照下表进行评价：学习情景工作任务评价目标评价方式评价比重1、制作一个简单的“班级网站”熟悉Dreamweaver工具软件的使用、测试和调试会用Dreamweaver软件搭建环境2、制作个人求职网完成在网页的布局与内容的插入与美化能完成工作任务过程性评价：提交作品5%3、新浪个人博客的制作完成新浪个人博客的设计与制作能完成工作任务过程性评价：提交作品10%4、阶段测试与评析了解学生对新浪个人博客的掌握情况能完成阶段测试任务总结性评价：提交作品20%5、学习“动网论坛”主页的制作学生进一步学习CSS复合选择

15、器的使用能完成工作任务过程性评价：提交作品5%6、阶段测试与评析了解学生对“动网论坛”网页制作相关知识的掌握情况能完成阶段测试任务总结性评价：提交作品30%7、完成“网络硬盘”页面的制作学生掌握框架网页的相关技术与知识能完成工作任务过程性评价：提交作品5%8、“新用户注册”页面的制作 学生掌握表单与客户端数据验证的一般方法能完成工作任务过程性评价：提交作品5%9、阶段测试与评析了解学生对表单与框架相关知识的掌握情况能完成工作任务总结性评价：提交作品20%合计100%说明：每个模块的考核主要考察学生的出勤情况、实际动手能力、理论知识的运用与掌握情况、完成作业的准确度、完整度、规范度等、分析问题、

16、解决问题的能力、合作沟通能力、学习态度、总结报告（报告的内容、态度、写作水平等）等评定项目进行综合考核。4.4 教材编写本课程主要采用与参考由李英俊主编的网页设计与制作(第三版)。该教材有如下特色：(1) 以培养社会需要的高技能型人才为导向，充分体现高职特色的实用教材。 (2) 本书将项目教学法、任务驱动教学法、案例教学法的教学思想融为一体，重点体现其精神实质。将网页设计制作社为一个整体项目。(3) 本书既注重实用性、可操作性，又注重知识的科学性、系统性。各章都设有明确的教学目标和教学任务，在内容安排上特别适合任务驱动教学。各章节内容讲授尽量结合实际案例进行，即结合案例讲授知识点。这样既体现了

17、案例教学的实用性，又能保持知识的系统。(4) 本书以培养学生网页设计与制作的实践能力为主要教学目标，因此实践性的项目与案例将贯穿教材的始终，并安排了三个环节的实践技能训练。 结合实际案例讲授教学内容，并指导学生实践。 依靠实训指导培养学生自主学习能力。 通过综合练习测试并提高学生的综合应用能力。4.5课程资源的开发与利用1教辅材料：要力求接近实践，最好是来源于实践的案例与情境，并开发课程的习题、参考文献等内容，向学生开放，以利于学生自主学习。2实训指导书：格式正确、内容全面，且能具体写明对学生的各项要求。3软件环境：不断完善网络开发实训室的软件环境，开发环境与运行环境都应安装更高版本以满足更新

18、技术的教学与实验。 4硬件环境：希望能够加大对硬件实训内容的建设，例如添置平板电脑、智能手机等设备，满足学生学习移动终端网页设计与制作相关知识的学习与实验。5信息技术：充分的利用各种信息技术，例如网络、多媒体课件等，为学生提供学习的便利条件。例如加大课程的网络资源建设，把与课程有关的文献资料、教学大纲、电子教案、教学课件、习题、教学视频、采购管理的相关前沿信息、与职业资格考试相关的资料、学生与教师的互动等都放到网上，充分的为学生的自主学习提供环境条件。4.6师资和实训条件担任本课程的主讲教师需要具有丰富的网页前台软件开发经验和具备丰富的网站维护或网站推广经验。同时还应具备较丰富的教学经验。在教

19、学组织能力方面，本课程的主讲教师应具备基本的设计能力，即根据本课程标准制定详细的授课计划，对每一堂课的教学过程精心设计，做出详细、具体的安排；还应该具备较强的施教能力，即掌握扎实的教学基本功并能够因材施教，在教学过程中还应具备一定的课堂控制能力和应变能力。4.7其它说明在网页设计与制作课程教学过程中，根据学生实际情况出发，适当地、合理地安排最新的知识内容，如：HTML5和CSS3常用的知识、技术与技能的教学。尽可能的使学生掌握更新、更适用的技能。4.8教学参考资料481参考书目：网页设计与制作 李英俊主编 出 版 社：大连理工大学出版社 ISBN：9787561123591Dreamweave

20、r CS5网页设计与制作基础教程文杰书院 主编 出 版 社：清华大学出版社 ISBN：9787302278269网页设计与制作 从零开始完全精通柏松 出版社：上海科学普及出版社 ISBN：9787542756589响应式Web设计HTML5和CSS3实战Ben Frain著，王永强译 出版社：人民邮电出版社 ISBN：9787115299222HTML5与CSS3权威指南许茂伟,马军，出版社：清华大学出版社 ISBN：9787302224181482推荐行业等网站：重庆科创职业学院 127社区 新浪博客 动网论坛 异次元 w3school HTML5中文网 HTML5中国 http:/www.html5cn.org/jQuery官方网站 编写：张莉莉校对：罗强审核：唐锡雷信息与建筑工程学院2013年8月1日