网页设计与制作(HTML+CSS+JavaScript)教学全套课件（第2版）刘万辉教学资源整体设计.docVIP

《网页设计与制作》课程整体设计 淮安信息职业技术学院 第 PAGE 9 页 共 NUMPAGES 9 页 《网页设计与制作》课程整体设计 课程代码 KC03 课程性质 专业基础课 建议学时 72 适用专业 软件技术及相关专业 建议 教学方式 “教、学、做” 一体化 制定人 学校 淮安信息职业技术学院 制定日期 2017.5.20 审核部门 软件技术专业资源库建设项目组 企业 淮安优博文化传播有限公司 一、课程设计思路 本课程依据课程标准，以软件技术专业学生的就业岗位群能力目标为导向，以Web客户端静态页面设计为主线，把整个课程分成10个教学任务，培养学生具有综合运用所学知识进行Web客户端静态页面的设计、开发、编码、调试、维护。 二、课程目标设计 通过本课程的学习，使学生逐步建立和掌握Web客户端静态页面设计的思想方法，具有分析问题和解决问题的能力，能够使用HTML5语言、CSS3样式、JavaScript脚本编写Web客户端静态页面解决实际问题，具备吃苦耐劳、团结协作的良好品质。 （一）知识目标 1．熟悉HTML语言的作用和开发环境，能够编写HTML代码； 2．掌握常用的HTML 标签，能够实现基本的图文信息显示； 3．理解HTML页面框架的作用，能够针对需求进行框架的设计； 4．掌握各类HTML表单元素标签，能够进行表单设计； 5．掌握各类HTML多媒体元素标签，能够进行多媒体页面设计； 6．掌握CSS样式的基本使用方法，应用文本、背景与列表样式美化页面； 7．掌握CSS网页布局的方法，能够运用盒模型、浮动布局、定位布局结合HMTL5标签进行页面布局； 8．掌握影音多媒体、表单进行多媒体进行网页页面设计； 9．掌握多列布局、CSS3转换、transitions过渡、animation动画进行页面设计； 10．掌握JavaScript的语法基础，能够编写简单的JavaScript应用程序，并 应用JavaScript的函数、内置对象、事件等，能够实现表单的验证； 11．掌握DOM树形结构及其操作方法，能够控制DOM对象。 （二）能力目标 1．能独立进行资料收集与整理、具备用户需求的理解能力； 2．能根据项目需求，具备项目页面的设计与实现能力； 3．能根据静态页面设计原则与CSS3技术规范，实现页面美化与布局； 4．具有使用JavaScript技术进行页面事件处理与表单验证的能力； 5．能根据DOM树形结构，进行页面DOM的控制； 6．具有综合应用HTML5语言、CSS3样式、JavaScript脚本进行页面的设计、编码、调试、维护能力。 （三）素质目标 1．养成善于思考、深入研究的良好自主学习的习惯； 2．通过项目与案例教学，培养学习者的分析问题、解决问题的能力； 3．具有吃苦耐劳、团队协作精神，沟通交流和书面表达能力； 4．通过课外拓展训练，培养学习者的创新意识； 5．具有爱岗敬业、遵守职业道德规范、诚实、守信的高尚品质。 三、课程内容设计 本课程从前端技术人员的角度进行选材，重点阐述HTML5语言、CSS3样式、JavaScript脚本三方面的知识，编写过程基于模块化的思路，以软件技术专业大一学生小王在企业实习的全过程将教学内容分为HTML5、CSS3、JavaScript三个教学模块。 任务1网页设计与策划是个引子，如同唱戏前的闹场，主要讲解网页网站的相关概念、网页设计的流程、HTML5的发展、学习HTML5的原因、编写HTML5页面的工具等等，希望学习者能够快速入境，找到学习的兴趣和动手的感觉。 任务2网页的基本页面实现是HTML5的基础部分，主要从HTML5的基本结构与语法入手，希望学习者能够由易到难，进而讲解HTML的文字与段落标签、图像与超级链接标签、表格与列表。通过几个实例逐步培养学习者的信心与学习力。 任务3运用HTML5的新标签，主要讲解HTML5中的结构性标签、分组标签、页面交互标签、行内语义性标签、HTML5的全局属性等。使初学者深入理解HTML5新标签的语义与使用方法。 任务4构建网站层叠样式表主要讲述网页中的表现层技术。主要讲解CSS样式设置规则、CSS样式的调用方法、CSS基础选择器、CSS3选择器、CSS的继承与层叠等。使初学者初步掌握CSS样式表的使用方法与作用。 任务5设置文本、背景与列表样式主要讲解网页设计中最基本的文本样式设置、基本的背景设置、CSS3中新增的背景属性和渐变属性、列表样式设置等。使初学者更进一步掌握针对HTML元素的样式设计。 任务6运用盒模型网页布局主要讲解了盒子模型的基本概念、盒子模型的边框与边距属性设置、浮动布局、定位布局以及兼容的处理等等，通过几个实例使学习者掌握页面布局的核心与技巧。 任务7运用影