《html5商业网站设计》课程标准.docx

湖南铁路科技职业技术学院HTML网页设计课程标准二级学院（部）：课程名称：课程代码：制订人：专业审核人：二级学院（部）负责人:3、学会使用浮动定位。3、浮动定位；4、块级元素、内联 元素和块级内联元 素的划分和转换。摆放；3、能使用盒子模型 实现块级元素之间 的分隔、设置块级 元素的边框、内边 距等属性。掌握使用DIV+CSS 设计布局，掌握盒 子模型和浮动定 位；2、独立设计时空 电影网”首页布局 任务，巩固所学知 识。9制作“蓝梦音乐网” 首页1、进一步巩固DIV+CSS的使用；2、进一步巩固盒子模型使用；3、进一步巩固浮动定位1、超链接的使用； 2、溢出的处理。1、能基于已设计好 DIV+CSS框架填充 文字、图片等内容； 2、能为导航栏漆加 超链接。1、学习制作“蓝梦 音乐网”首页，掌 握使用使用超徒接，进一步巩固DIV+CSS、盒子模型8使用；4、了解溢出；4、学会使用超链接。和浮动定位的使用；2、独立制作时空 电影网”首页任务， 巩固所学知识。教学单元六：使用网页定位和JS特效10制作“蓝梦音乐网” 滑动轮播特效1.学会绝对定位、相对 定位和z-index元 素堆叠；2、学会简答JS的应用1、绝对定位、相对 定位和z-index元 素堆杳的使用；2、简答JS的应用。1、能使用绝对定 位、相对定位和 z-index元素堆叠 设计轮播按钮；2、调用JS实现轮 播效果。1、学习制作“蓝梦 音乐网”滑动轮播 特效，掌握绝对定 位、相对定位和 z-index元素堆叠 使用；2、独立制作“时空4电影网”滑动轮播 特效，巩固所学知 识。教学单元七：制作移动网页11制作移动端“蓝梦音 乐网”首页1、学会使用流式布局；2、学会使用em单位；3、了解 rem；3、学会使用media查询；4、了解 viewport,.1、移动端流式布局 的设计；2、em单位的使用；3、media查询的 使用；1、能使用流式布局 制作移动端“蓝梦 音乐网”首页；2,能使用media 查询实现设计一个 网页，多个设备呈 现。1、学习制作移动端 “蓝梦音乐网”首 页，掌握使用使用 流式布局、em单位和media查询；2、独立制作移动端 “时空电影网”首页任务，巩固所学 知识。8教学单元八：使用框架12制作“蓝梦音乐网” 后台管理系统框架1、学会框架的使用；2、了解框架的类型；3、学会框架的属性设置；4、了解内联框架1、框架的使用；2、了解框架的类型；3、框架的属性设置；4、内联框架的使用1、能使用框架设计 “蓝梦音乐网”后 台管理系统框架。1、学习制作篮梦 音乐网”后台管理 系统框架，掌握框 架的使用；2、独立制作“蓝梦 音乐网”后台管理 系统框架，巩固所 学知识。4教学单元九：综合工程实现13完成“时空电影网” 网站1、学会网站的设计；2、巩固使用DIV+CSS制作网页；网站的设计1、能根据网站要求 设计出网站的结 构；2、能根据前面所学 设计出所有网页并 实现页面跳转。独立完成“时空电 影网”网站，掌握 网站的结构设计和123、巩固使用超链接实现 页面跳转。网页的设计五、课程实施（一）学时安排序号教学单元（章或工程）标题总学时理论 学 时实 践 学 时备注1教学单元一：初识网页2112教学单元二：使用网页基本标签8443教学单元三：使用表格、表单8444教学单元四：使用CSS美化网页8445教学单元五：使用DIV+CSS16886教学单元六：使用网页定位和JS 特效4227教学单元七：制作移动网页8448教学单元八：使用框架4229教学单元九：综合工程实现12012（二）课程的重点和难点一）重点1、HTML常用的基本标签的使用;2、表格和表单元素的使用；3、CSS选择器的创立和应用；4、DIV+CSS设计网页;5、网页定位和JS特效应用；6、移动端网页制作。二）难点1、CSS选择器的创立和应用；2、DIV+CSS设计网页；3、网页定位和JS特效应用;4、移动端网页制作。（三）教学考核评价1 考核方式考核自后刑成结权重（）备笄平时考核课堂考勤3040%迟到1次或早退1课堂表现40踊跃回答下列问题每次加1分；随堂作业30缺交作业1次扣2课终空试6060%机诘40（四）教学建议本课程标准在设计上本着懂方法，重应用的总体思路，突出体 现职业教育的技能型、应用性特色，着重培养学生的实践应用技能, 力求到达理论方法够用，技术技能过硬的目的。首先应依据专业人才培养方案中关于人才培养目标的阐述，明 确课程目标；其次，结合职业教育课程观、教学观、能力观，基于 软件工程的开发过程，以工程化教学来组织课程内容，在课程内容 的选择与排序中，以软件工程实施的不同阶段、典型任务为载体， 将课程内容划分为互相联系的学习情景；第三，通过对各学习情景 中学习目标、主要内容、授课方式、师生要求等各项内容的描述， 来规范课程所要求的内容；第四，通过对课程内容的选取和组合， 以多个完整的工程为载体，完成课程的实施；最后，通过对工程实 施过程中各个环节的考察和评价，来完成对课程的评鉴与考核。六、课程资源的开发与利用1、教材与参考资料：（1）教材：HTML5商业网站设计与制作周庞荣、顾挺主编,16 清中国铁道出版社。（2）主要参考书：精通CSS与HTML设计模式,（美）Michael Bowers著，人民邮电出版社。2、教学条件要求实施本课程的设备和软件要求：PC机、HBuilder开发软件、多 媒体电子教室等。3、其他相关要求（1）采用理论实践一体化的教学模式，并不是完全抛弃传统的 教学，而是发扬传统教学的长处，将其融入理论实践一体化的教学 模式之中，并注重教学的有效性。（2）教学中要从学生的实际和企业的实际出发，遵照学生的学 习的特点，以学生为主体，充分强调学生学习的主动性和积极性， 强化情感态度价值观的教育，注意计算机网络技术操作的规范性、 平安性和开展性。七、课程教学团队八、其它说明1、课程组织形式采用任务驱动的教学模式，以来自生产实践的工程任务为课题, 引导学生进行自主学习及实际操作，使学生掌握在HBuilder中如何 运用HTML、CSS程序代码来制作网页，使网页页面更加美观、特效 更加生动；同时，通过小组协作完成工程任务的学习方式，培养学 生解决问题的方法能力、团队协作能力。采用老师教、学生学、动 手做三步教学法，全机房教学环境，从而培养学生的学习能力及应 用能力。2、教学方法（1）采用工程驱动教学法。使用以实际需求为题材制作的各种 经典案例，通过“任务描述”一“任务分析” 一 “任务实施”一“任17 务小结”四部曲展开，采用工程引导、任务驱动的方法组织全部教 学过程。（2）采用多种方法的组合教学手段。全部教学在电脑机房上课, 理论教学和实训操作相结合。授课采用投影+课件、讲授+交流讨论, 以及边讲、边看、边做、边讨论等多种教学手段，在做中学，在学 中做，做到“教、学、做” 一体化，同时注重培养学生的自主学习 能力。（3）通过相关的教学活动设计（如团队合作、信息搜索、阅读 分析等），注重工学结合和学生职业素养的提高，彰显职业教育的“职 业”特性，培养合格的职业人。18HTML5网页设计课程标准课程代码：课程类型：理实一体课课程名称：HTML网页设计英文名称：课程性质：必修课课程属性：专业基础课适用专业：软件技术专业计划学时：70课程学分：4.5一、本课程地位、作用和任务该课程是软件技术专业的专业基础课程。培养学生的静态网页 的设计和开发能力本课程的主要任务是要求学生使用DIV+CSS设计 PC端和移动网页，掌握常用标签和样式的使用，为学生开发和设计 动态网页打下基础。二、课程设置与设计思路HTML网页设计是理论与实践并重的课程，按照“工程导向, 任务驱动”理念进行课程设计。在课程中设置了两个工程，一个项 目是蓝梦音乐网，该工程是教学引导工程，课程所需的知识和技 能都融合在工程任务的实现之中，另一个工程是时空电影网，教 师引导学生完成工程任务后，学生独立完成该工程中任务，巩固课 堂所学。三、课程目标总目标：使用DIV+CSS开发PC端和移动端的静态网页。具体目标：1、知识目标(1)了解网页、网站、万维网、因特网之间的关系(2)掌握使用HBuilder工具创立网站;(3)掌握HTML和HTML5中常用的标签；(4)掌握表格、行合并和列合并使用方法；(5)掌握使用表格进行简单的布局；(6)掌握常用表单元素的使用；(7)掌握使用CSS美化网页；(8)掌握使用DIV+CSS进行PC端的页面布局和制作；(9)掌握移动端网页的布局和制作。(10) 了解网页框架的使用。2、技能目标(1)能熟练运用HBuilder工具软件创立网站，编辑网页；(2)能熟练使用HTML和HTML5中的常用标签设计网页；(3)能用一张表格实现简单网页的布局；(4)能合理运用CSS选择器美化页面；(5)能灵活运用DIV+CSS进行PC端网页的页面布局和制作；(6)能灵活进行移动端的网页布局设计和制作。3、素质目标(1)培养学生对页面设计的兴趣，充分发挥学生的自主学习能 力；(2)培养学生的与人交流、与人合作及信息处理的能力；(3)培养学生分析问题、解决问题及创造思维能力；(4)培养学生严谨的工作作风。四、课程内容教学单元一：初识网页序号具体教学内容教学目标相关知识点相关技能点教学活动设计学 时1制作“欢迎进入蓝梦 音乐网”网页1、了解网页、网站的 概念2, 了解万维网的概念3、了解互联网的概念4、学会网页的文档结 构5,学会使用HBuilder 工具制作网页1、网页、网站、万 维网的、互联网的 概念和它们之间的 关系2、网页的文档结构 组成1、能用记事本编写 出网页的文档结构 2 、能使用 HBuilder工具新 建空白工程，制作“欢迎进入蓝梦音 乐网”网页1、赏析“蓝梦音乐 网”认识网页、网 页、网站、万维网 的、互联网。2、学习制作欢迎 进入蓝梦音乐网” 网页，认识网页文 档结构,学习 HBuilder 网页制作工具。3、独立完成欢迎 进入时空电影网” 网页，巩固所学知 识点和技能点2教学单元二：使用网页基本标签2制作“蓝梦音乐网” 音乐节网页1、学会使用标题标签1、标题标签、段落1、在网页中能灵活 使用标题标签、段1、学习制作“蓝梦 音乐网”音乐节网42、学会使用段落标签3、学会使用横线标签4、学会使用换行标签5、学会使用图片标签6、了解使用HTML中的特殊符号标签、横线标签、换行标签、图片标签、特殊符号格式和常用属性的使用落标签、横线标签、 换行标签、图片标 签、特殊符号设计 网页页，掌握标题标签、 段落标签、横线标 签、换行标签、图 片标签、特殊符号 的使用。2、独立完成“时空 电影网”巩固课堂 所学。3美化“蓝梦音乐网” 音乐节页面1、学会使用文本格式化标签2、学会使用列表标签3,学会使用声音标签4,学会使用视频标签5、学会使用marquee 标签1、文本格式化标 签、列表标签、声 音标签、视频标签、 marquee标签的格 式和常用属性的使 用1、在网页中能灵活 使用文本格式化标 签、列表标签、声 音标签、视频标签、 marquee标签的设 计网页1、学习制作美化 “蓝梦音乐网”音 乐节网页，掌握文 本格式化标签、列 表标签、声音标签、 视频标签、marquee 标签的使用。2、独立完成美化 “时空电影网”巩 固课堂所学。4教学单元三：使用表格、表单4制作“蓝梦音乐网” 歌手网页1、学会使用表格标签2、学会实现表格行、列的合并3、学会使用表格实现HTML元素的布局1、表格标签的格式 和常用属性的使 用。2、表格行、列的合并1、在网页中能编写 表格；2、在网页中能使用 表格实现简单的布 局（只用1重表 格）；3、在网页中能实现 行、列的合并。1、学习制作“蓝梦 音乐网”歌手网页， 掌握使用表格进行 简单的布局和实现 表格的行合并。2、独立完成“时空 电影网”内地电影 网页，巩固课堂所 学。45制作“蓝梦音乐网” 注册页面1 学会表格border,celIspacing和cel Ipadding属性的使 用；1、表格 border、 cellspacing 和 cellpadding 属性的使用；2、添加表单；3、文本字段、密码 字段、文件域、单 选按钮、emails下1、能使用border, celIspacing 和 cellpadding 属性 设计细线表格；2、能灵活使用常见 的表单元素。1、学习制作“蓝梦 音乐网”注册页面，掌握设计细线表 格、添加表单和常4学会添加表单；2、学会添加文本字段、 密码字段、文件域、单 选按钮、email.下拉列 表、复选框、文本域、 提交按钮和重置按钮等 常见的表单元素的使 用。拉列表、复选框、 文本域、提交按钮 和重置按钮等常见 的表单元素的使用；见的表单元素。2、独立完成“时空 电影网”内地电影 网页，巩固课堂所 学。教学单元四：使用css美化网页61、使用CSS美化“蓝 梦音乐网”音乐节网 页1,学会CSS的语法；2、学会创立常用的CSS选择器3、学会CSS应用网页1、CSS的语法；2、认识元素选择器、ID选择器、类选择器、群组选择1、能创立元素选择 器、ID选择器、类 选择器、群组选择 器、包含选择器和 子元素选择器美化 文本；2、能创立类选择器1、学习使用CSS美化“蓝梦音乐网”音乐节网页，掌握ID选择器、类选择4的方式4、学会美化文本5、学会美化图片器、包含选择器子 元素选择器等常用 的CSS选择器并熟 悉它们的用法；3、行内样式表、内 部样式表和外部样 式表三种应用CSS 的方式和和包含选择器美 化图片；3、能使用内部样式 表应用样式。器、群组选择器、 包含选择器和子元 素选择器的创立， 并以内部样式表方 式应用样式。2、独立完成使用 CSS美化“时空电 影网”电影节网页 任务，巩固所学知 识。7使用CSS美化“蓝梦 音乐网”注册网页1、巩固创立常用的CSS选择器；2、学会美化表格；1、属性选择器创 建；2、伪类的创立。3、结合元素的类选 择器1、能使用伪类美化 单元格；2、能使金属性选择 器美化表单元素； 3、能使用外部样式 表应用样式。1、学习使用CSS美化“蓝梦音乐网”注册网页，进一步43、学会美化表单元素。巩固元素选择器、 类选择器、群组选 择器、包含选择器 和子元素选择器的 创立，并以外部样式表应用样式；2、独立完成使用CSS ”时空电影网” 电影节网页任务， 巩固所学知识。教学单元五：使用DIV+CSS8设计“蓝梦音乐网” 首页布局1、学会使用DIV+CSS；2、学会使用盒子模型；K DIV标签的使 用；2,盒子模型的使 用；1、能使用DIV+CSS 实现对网页布局；2、能使用浮动定位 实现块级元素横向1、学习设计“蓝梦音乐网”首页布局，8