网页设计与制作整体设计(DOC 9页)

《网页设计与制作整体设计(DOC 9页)》由会员分享，可在线阅读，更多相关《网页设计与制作整体设计(DOC 9页)（11页珍藏版）》请在装配图网上搜索。

1、网页设计与制作课程整体设计 淮安信息职业技术学院网页设计与制作课程整体设计课程代码KC03课程性质专业基础课建议学时72适用专业软件技术及相关专业建议教学方式“教、学、做”一体化制定人学校淮安信息职业技术学院制定日期2017.5.20审核部门软件技术专业资源库建设项目组企业淮安优博文化传播有限公司一、课程设计思路本课程依据课程标准，以软件技术专业学生的就业岗位群能力目标为导向，以Web客户端静态页面设计为主线，把整个课程分成10个教学任务，培养学生具有综合运用所学知识进行Web客户端静态页面的设计、开发、编码、调试、维护。二、课程目标设计通过本课程的学习，使学生逐步建立和掌握Web客户端静态页

2、面设计的思想方法，具有分析问题和解决问题的能力，能够使用HTML5语言、CSS3样式、JavaScript脚本编写Web客户端静态页面解决实际问题，具备吃苦耐劳、团结协作的良好品质。（一）知识目标1熟悉HTML语言的作用和开发环境，能够编写HTML代码；2掌握常用的HTML 标签，能够实现基本的图文信息显示；3理解HTML页面框架的作用，能够针对需求进行框架的设计；4掌握各类HTML表单元素标签，能够进行表单设计；5掌握各类HTML多媒体元素标签，能够进行多媒体页面设计；6掌握CSS样式的基本使用方法，应用文本、背景与列表样式美化页面；7掌握CSS网页布局的方法，能够运用盒模型、浮动布局、定位

3、布局结合HMTL5标签进行页面布局；8掌握影音多媒体、表单进行多媒体进行网页页面设计；9掌握多列布局、CSS3转换、transitions过渡、animation动画进行页面设计；10掌握JavaScript的语法基础，能够编写简单的JavaScript应用程序，并 应用JavaScript的函数、内置对象、事件等，能够实现表单的验证；11掌握DOM树形结构及其操作方法，能够控制DOM对象。（二）能力目标1能独立进行资料收集与整理、具备用户需求的理解能力；2能根据项目需求，具备项目页面的设计与实现能力；3能根据静态页面设计原则与CSS3技术规范，实现页面美化与布局；4具有使用JavaScrip

4、t技术进行页面事件处理与表单验证的能力；5能根据DOM树形结构，进行页面DOM的控制；6具有综合应用HTML5语言、CSS3样式、JavaScript脚本进行页面的设计、编码、调试、维护能力。（三）素质目标1养成善于思考、深入研究的良好自主学习的习惯；2通过项目与案例教学，培养学习者的分析问题、解决问题的能力；3具有吃苦耐劳、团队协作精神，沟通交流和书面表达能力；4通过课外拓展训练，培养学习者的创新意识；5具有爱岗敬业、遵守职业道德规范、诚实、守信的高尚品质。三、课程内容设计本课程从前端技术人员的角度进行选材，重点阐述HTML5语言、CSS3样式、JavaScript脚本三方面的知识，编写过程

5、基于模块化的思路，以软件技术专业大一学生小王在企业实习的全过程将教学内容分为HTML5、CSS3、JavaScript三个教学模块。任务1网页设计与策划是个引子，如同唱戏前的闹场，主要讲解网页网站的相关概念、网页设计的流程、HTML5的发展、学习HTML5的原因、编写HTML5页面的工具等等，希望学习者能够快速入境，找到学习的兴趣和动手的感觉。任务2网页的基本页面实现是HTML5的基础部分，主要从HTML5的基本结构与语法入手，希望学习者能够由易到难，进而讲解HTML的文字与段落标签、图像与超级链接标签、表格与列表。通过几个实例逐步培养学习者的信心与学习力。任务3运用HTML5的新标签，主要讲

6、解HTML5中的结构性标签、分组标签、页面交互标签、行内语义性标签、HTML5的全局属性等。使初学者深入理解HTML5新标签的语义与使用方法。任务4构建网站层叠样式表主要讲述网页中的表现层技术。主要讲解CSS样式设置规则、CSS样式的调用方法、CSS基础选择器、CSS3选择器、CSS的继承与层叠等。使初学者初步掌握CSS样式表的使用方法与作用。任务5设置文本、背景与列表样式主要讲解网页设计中最基本的文本样式设置、基本的背景设置、CSS3中新增的背景属性和渐变属性、列表样式设置等。使初学者更进一步掌握针对HTML元素的样式设计。任务6运用盒模型网页布局主要讲解了盒子模型的基本概念、盒子模型的边框

7、与边距属性设置、浮动布局、定位布局以及兼容的处理等等，通过几个实例使学习者掌握页面布局的核心与技巧。任务7运用影音多媒体主要讲解了多媒体对象基本知识、如何在网页中插入各类多媒体对象等，通过本任务使学习者掌握影音多媒体元素在网页中的使用。任务8 设计表单主要讲解了表单的基本概念、新增的input输入类型、form新增属性、新增的input属性、新增的表单元素等，通过本任务使学习者掌握表单元素、表单域元素及其属性的使用，从而能根据需要设计所需表单。任务9运用特殊效果主要讲解了CSS3高级应用，具体包括多列布局、CSS3转换、transitions过渡、animation动画等等。通过本任务使学习者

8、掌握CSS3多列布局的方法，熟练实现HTML5元素的2D、3D变换和过渡动画，掌握的关键帧的定义与动画的设置，从而表达用户所需的效果。任务10 运用Javascript实现网页的交互是Web技术逻辑层，也是交互处理，重点讲解JavaScript技术的核心知识和DOM技术的一般应用，借助下拉菜单的设计、表格的美化设计、表单的验证等实例的学习使初学者掌握JavaScript的交互应用。每个任务的编写分为任务描述、知识准备、任务实施、任务拓展、项目实训五个环节。任务描述：简述任务目标，展示任务实施效果，提高学生学习兴趣；知识准备：详细讲解知识点，通过系列实例实践，边学边做；任务实施：通过任务综合应用

9、所学知识，提高学生系统的运用知识的能力；拓展环节：强调一些扩展知识、提高知识与技巧交流。项目实训：在项目实施的基础上通过“学、仿、做”达到理论与实践统一、知识的内化与应用的教学目的。（一） 课程内容总体设计篇名任务任务名称参考学时HTML5基础应用任务1网页设计与策划2任务2网页的基本页面实现6任务3运用HTML5的新标签10CSS3基础应用任务 4构建网站层叠样式表8任务 5设置文本、背景与列表样式6任务 6运用盒模型网页布局10HTML5与CSS3高级应用任务 7运用影音多媒体4任务 8设计表单6任务 9运用特殊效果8HTML5、CSS3、JavaScript的应用任务 10任务10 运用

10、Javascript实现网页的交互12合计72（二）课程内容详细设计单元名称单元内容知识目标学时安排任务1 网页设计与策划(1) 网页设计的概念与术语；(2) 网页、网站相关概念；(3) HTML5的发展历史与优势；(4) HTML5的编码方式。(1) 了解网页设计的概念与术语；(2) 掌握网页、网站相关概念；(3) 掌握网页设计的流程；(4) 了解HTML5的发展历史与优势；(5) 掌握HTML5的编码方式。2小计2任务2 网页的基本页面实现HTML5的基本语法、基本标签、文字与段落标签(1) 掌握HTML5的基本语法；(2) 掌握HTML5的基本标签；(3) 掌握文字与段落标签； (4)

11、掌握图像与超级链接标签；(5) 掌握表格与列表。2图像标签、超级链接标签2表格与列表2综合任务2小计8任务3 运用HTML5的新标签HTML5结构性标签(1) 了解HTML5新标签；(2) 掌握结构性标签；(3) 掌握级块标签； (4) 掌握页面交互标签；(5) 掌握行内语义性标签；(6) 掌握HTML5的全局属性。2分组标签与页面交互标签2行内语义与HTML5的全局属性2综合任务2小计8任务4 构建网站层叠样式表CSS3简介、样式设置规则、调用方法、基础选择器的使用方法(1) 了解CSS3简介；(2) 掌握CSS样式设置规则；(3) 掌握CSS样式的调用方法； (4) 掌握CSS基础选择器的

12、使用方法；(5) 掌握CSS3新增选择器的使用方法；(6) 掌握CSS的继承与层叠性的应用。2CSS3新增选择器的使用方法2伪元素、伪类选择器CSS的继承与层叠性的应用2综合任务2小计8任务5 设置文本、背景与列表样式字体属性、文本属性、背景属性(1) 掌握CSS字体属性的编写；(2) 掌握CSS文本属性的编写；(3) 掌握CSS基本的背景的编写； (4) 掌握CSS3中新增的背景属性的编写；(5) 掌握CSS3中新增的渐变属性的编写；(6) 掌握CSS中列表样式的设置。2新增的背景属性、新增的渐变属性的编写、列表样式的设置2综合任务2小计6任务6 运用盒模型网页布局盒子模型的原理、盒子模型的

13、层次与的宽高计算、border、margin、padding的使用(1) 掌握盒子模型的原理；(2) 掌握盒子模型的层次与的宽高计算；(3) 掌握盒子的border、margin、padding的使用；(4) 掌握盒子的CSS3新增属性；(5) 掌握元素的类型与转换；(6) 掌握浮动属性、清除属性、溢出处理；(7) 掌握元素的定位方式。2盒子的CSS3新增属性、类型与转换2浮动属性、清除属性、溢出处理2定位方式2综合任务2小计10任务7 运用影音多媒体、标签、标签标签的使用方法(1) 了解视频、音频相关格式；(2) 掌握滚动字幕标签的使用；(3) 掌握标签的使用方法； (4) 掌握标签的使用方

14、法；掌握标签的使用方法。2综合任务2小计4任务8 设计表单表单基本概念组成、新增表单input元素的使用方法(1) 了解表单基本概念；(2) 掌握表单的组成；(3) 掌握新增表单input元素的使用方法； (4) 掌握HTML5表单元素属性的使用方法；(5) 掌握新增的表单元素。2HTML5表单元素属性的使用方法、HTML5表单元素属性的使用方法2综合任务2小计6任务9 运用特殊效果CSS3多列布局的方法、transform转换方法(1) 掌握CSS3多列布局的方法；(2) 掌握CSS3常用的transform转换方法； (3) 掌握CSS3中transitions过渡的使用方法；(4) 掌握

15、animation动画的使用方法。2transitions过渡的使用方法2animation动画的使用方法2综合任务2小计8任务10 运用Javascript实现网页的交互JavaScript基础语法(1) 掌握JavaScript的概念与作用；(2) 掌握JavaScript语法基础；(3) 掌握浏览器内置对象的应用；(4) 掌握页面中标签的访问与属性的设置；(5) 掌握页面元素的事件类型与处理；(6) 掌握事件的指派与处理函数的编写；(7) 掌握DOM节点对象的事件处理。4浏览器内置对象的应用2页面中标签的访问与属性的设置、页面元素的事件类型与处理2DOM节点对象的事件处理2综合任务2小计

16、12合计72四、能力训练设计单元/模块名称能力目标能力描述训练方式结果（可展示）任务1 网页设计与策划能够初步设计网页页面(1) 能独立进行查找资料，搜索项目案例资料；(2) 能根据项目需求，规划主页草图；(3) 能编写最简单的HTML5文档。实践操作草图任务2网页的基本页面实现能够运用HTML基本标签实现简单的图文混排页面(1) 能读懂HTML基本的文档结构；(2) 能根据项目草图，编写基本的HTML文档；(3) 能通过浏览页面效果，编写对应的HTML文档。实践操作程序代码任务3 运用HTML5的新标签能够运用HTML5的新标签编网页页面，具有解决HMTL5结构标签的能力(1) 能合理区分H

17、TML5结构性标签的语义；(2) 能根据网页页面效果，运用HTML5结构性标签构造页面效果；(3) 能恰当的使用HTML5的全局属性。实践操作程序代码任务4 构建网站层叠样式表具有运用CSS与CSS构建网站层叠样式表的初步能力(1) 能正确应用CSS规则，合理选择CSS选择器编写CSS样式；(2) 能根据网页页面效果，编写CSS样式效果；(3) 能恰当的使用CSS3新增选择器。实践操作程序代码任务5 设置文本、背景与列表样式具有综合应用文本、背景与列表样式解决综合应用问题程序设计能力(1) 能正确应用CSS规则，编写关于字体与文笔的CSS样式；(2) 能根据网页页面效果，编写CSS各类背景样式

18、效果；(3) 能使用CSS列表进行页面布局。实践操作程序代码任务6 运用盒模型网页布局具有综合应用CSS样式解决网页页面布局的问题程序设计能力(1) 能正确应用盒子模型布局网页页面；(2) 能根据网页页面效果，运用盒子模型与定位技术布局页面；实践操作程序代码任务7 运用影音多媒体具有综合应用多媒体元素标签解决网页中影音的调用问题的程序设计能力(1) 能结合浏览器的支持情况，恰当的选择视频格式；(2) 能根据网页页面效果，编写CSS编写视频播放样式效果。实践操作程序代码任务8 设计表单具有综合应用表单与表单元素标签解决网页中影音的调用问题的程序设计能力(1) 能结合根据用户需要选择恰当的表单元素

19、；(2) 能根据表单页面效果，设计表单，编写CSS表单的样式。实践操作程序代码任务9 运用特殊效果具有综合应用HMT标签与CSS3的转换、过渡、动画等功能解决网页中所需的动画的程序设计能力(1) 能结合根据页面的需要选择恰当的CSS特效；(2) 能根据表单页面效果，设计CSS3页面与动画效果。实践操作程序代码任务10 运用Javascript实现网页的交互具有综合应用JS代码解决网页中网页交互问题的程序设计能力(1) 理解JavaScript的概念与作用；(2) 能运用JavaScript语言基础解决实际问题；(3) 能应用浏览器内置对象；(4) 能实现页面中标签的访问与属性的设置。实践操作程

20、序代码五、考核方案设计本课程考核采用形成性考核方式，总评成绩由形成性考核的各项成绩组成，全面考核学生的动手能力、基础理论和平时学习状况。分值比例如下：综合素质评价（平时表现+通用能力考核） 20%过程考核（课堂实践考核+课后实践考核+项目开发实践） 40%终结考核 (期终考核) 40% （一）综合素质评价标准考核内容评价标准考核分值出勤情况迟到、早退1次扣0.5分，旷课1次扣2分，扣完5分为止，旷课3次及以上不得参加终结性考核。5%学习态度不认真听课、不按时完成课堂或课外实践1次扣0.5分，扣完5分为止。5%学习表现主动提出问题、回答问题1次加0.5分；课堂或课外实践完成质量高（正确率80%以

21、上）1次加0.5分，加满5分为止。5%通用能力提出问题、回答问题时语言表达准确、逻辑性强1次加0.5分，加满5分为止。5%（二）过程考核标准考核内容评价标准考核分值课堂实践课堂实践完成质量高（正确率80%以上）1次加0.5分，加满15分为止。15%课外实践课外实践完成质量高（正确率80%以上）1次加0.5分，加满5分为止。5%项目开发实践需求分析0至3分、整体设计0至10分、界面设计0至2分、程序编码0至10分、程序测试0至5分。30%（三）终结考核标准采用上机考试方式，完成一个Web静态页面设计，内容包括：HTML技术、CSS技术、JavaScript技术整合。分值比例：HTML5技术占30

22、%，CSS3技术占30%，JavaScript技术占 40%。终结性考核占课程考核的40%。五、教材及参考资料1网页设计与制作（HTML+CSS+Javascript），高等教育出版社，网页设计与制作课程组编写2HTML5+CSS3网站设计基础教程，人民邮电出版社，传智播客高教产品研发部3HTML5+CSS3 Web前端开发技术SS 3/JavaScript讲义，人民邮电出版社，刘德山 章增安 孙美乔4. HTML+CSS+JavaScript网页制作案例教程，人民邮电出版社，人民邮电出版社，传智播客高教产品研发部5. HTML5基础知识、核心技术与前沿案例，人民邮电出版社，人民邮电出版社，刘欢第 11 页 共 11 页