《网页设计(HTML5+CSS3)》核心课程标准
课程编码
课程类别
专业核心课
计划学时
128
课程类型
B
适用专业
软件技术
课程性质
必修
开课学期
第一学期
学分
6
先行课程
开课单位
信息工程系
平行课程
计算机应用基础
考核类型
考试
后继课程
JavaScript程序设计与jQuery框架
一、课程性质与定位
本课程是软件技术专业的核心课程,也是后续JavaScript程序设计与jQuery框架的基础课程,在Web前端开发中占有重要地位。通过本课程的课堂教学和实践教学,使学生能够掌握网页设计的两大基础,HTMLCSS,具备常见门户网站、电商网站的设计与制作能力,培养学生科学的思维方法,灵活运用知识的能力和自主学习的能力,为后续网站开发课程的学习、网页制作员工作的胜任打下坚实的基础。
二、课程设计理念
本课程强调对学生职业素养和Web前端编程能力的培养,按照理实一体、课内外互补、课堂教学与培优工程相结合的课程设计指导思想,以任务或项目为载体组织教学内容,采取讲练结合、微课教学、视频辅导、单元测试、赛练融合等多种教学形式和手段,突出学生的主体地位,在校内实训室完成所有教学环节,实现“教、学、做”的有机融合;通过班级讲授、团队学习、个体辅导、展示交流、技能大赛等手段,实现从模仿到应用到创新的高职学生递进式培养。
三、课程目标
(一)总体目标
本课程涉及网页基础、HTML5标记、CSS3样式、网页布局等内容。通过本课程的学习,学生能够了解HTML5基本标签和CSS3常用样式,熟悉网页设计流程,掌握常见的网页布局效果,掌握一定的Web前端开发知识,学会制作各种企业、门户、电商类网站。同时通过教学过程中的实际开发过程的规范要求强化学生的职业道德意识和职业素质养成意识,为学生后续课程学习夯实基础。
(二)具体目标
1.能力目标
了解Web前端程序员等相关职业岗位的工作职责;具有一定的网页设计与制作能力;
具备良好的编程习惯和准确的语言表达能力;具有一定的科学思维方式和分析判断解决问题的能力;具有社会适应能力、沟通能力与自我学习能力;具有良好的职业道德与敬业精神,具有团队合作意识。
2.知识目标
认识网页和网站,了解相关概念;熟悉ViSUStUdioCodeHbUilder的使用;熟练掌握HTML5基本标签;掌握常用H5表单控件并能熟练运用;理解CSS3样式规则及选择器,能合理使用CSS美化页面;理解CSS盒子模型、浮动和定位布局,并能应用到网页设计中;掌握HTMLCSS多媒体应用;掌握CSS3的变形、动画和转换;能达到“1+X”Web前端开发初级标准。
四、课程教学内容及学时分配
序号
项目名称
学习目标
学习内容
学时
1
认识网页和网站
了解Web标准,了解网页和网站,明确HTMLCSSJavaScript在其中的作用;熟悉常见的浏览器;熟悉DreamWeaver工具的基本操作,能使用Dreamleaver创建简单的网页。
1.认识网页和网站
2.网站制作流程
3.网页设计规范
4.HTML简介
5.CSS简介
6.JavaScript简介
7.常用浏览器介绍
8.Hbuilder工具的使用
9.使用Hbuilder创建第一个页面
4
2
从零开始构建
HTML页面
了解HTML5发展历程,熟悉浏览器支持情况;理解HTML5基本语法,掌握新特性;掌握HTML文档基本格式,能够书写规范的HTML网页;掌握文本控制表标记、图像标记、超链接标记,
1.认识HTMLHTML5
2.认识标记
3.HTML文档基本格式单
4.标记属性
5.HTML5文档头部相关标记
6.标题和段落标记
7.文本样式标记
12
能够制作简单网页。
8.文本格式化标记
9.特殊字符标记
10.常用图片格式
11.图像标记
12.相对路径与绝对路径
13.认识HTML5新标记
3
运用CSS技术设置网页样式
掌握CSS样式规则,能够书写规范的CSS样式代码;掌握CSS文本样式属性,能够控制页面中的文本样式;掌握CSS选择器写法,可以快捷选择页面中的元素;理解CSS层叠性、继承性与优先级,学会高效控制网页元素;了解CSS3新增选择器。
LCSS样式规则
2.引入CSS样式表
3.CSS基础选择器
4.字体样式属性
5.文本外观属性
6.CSS复合选择器
7.CSS层叠性与继承性
8.CSS优先级
9.CSS3新增选择器
16
4
运用CSS盒子模型划分网页模块
了解盒子模型的概念;掌握盒子模型相关属性,能够使用它们熟练地控制网页元素;理解块元素与行内元素的区别,能够对它们进行转换。
1.认识盒子模型
2.div标记
3.盒子宽高
4.边框属性
5.内边距属性
6.外边距属性
7.阴影
8.背景属性
9.元素的类型
1().span标记
11.元素的转换
16
5
添加列表和超
链接
掌握无序、有序及定义列表的使用,可以制作常见的网页列表模块;掌握超链接标记的使用,能够使用超链接
1.无序列表
2.有序列表
3.定义列表
4.定义列表实现图文混
8
定义网页元素;掌握CSS伪类,会使用CSS伪类实现超链接特效。
5.list-style复合属性
6.超链接标记<a>
7.链接伪类
8.锚点链接
6
添加表格和表
掌握表格标记的应用,能创建表格并添加样式;理解表单的构成,可以快速创建表单;掌握表单相关标记,能够创建具有相应功能的表单控件;掌握表单样式的控制,能够美化表单界面。
1.创建表格
2.表格标记
3.CSS美化表格
4.表单构成
5.创建表单
6.表单属性
7.input控件
8.textarea控件
9.select控件
10.datalist控件
H.CSS控制表单样式
16
7
运用浮动与定位布局网页
掌握标记的浮动属性,能够为标记设置和清除浮动;掌握标记的定位属性,能够理解不同类型定位之间的差别;掌握div+css布局技巧,能够利用该技巧为网页布局。
1.布局概述
2.元素的浮动属性float
3.清除浮动
4.标记定位属性
5.overflow属性
6.Z-index标记层叠
7.单列布局
8.两列布局jquery在线库
9.三列布局
10.网页模块命名规范
16
8
网页多媒体
掌握HTML5中视频的相关属性,能够添加视频;掌握音频相关属性,能够添加音频;理解过渡属性,能够常
1.<vidco>嵌入视频
2.audio》嵌入音频
3.音视频兼容性
4.控制视频宽高
8
见过渡效果;掌握CSS3变形属性,能够制作2D3D转换效果;掌握CSS3动画,能够熟练制作常见动画效果。
5.过渡属性
6.变形
7.动画属性
9
实战开发
巩固贯通HTMLCSS基本知
识的运用
电商或门户网站首页
16
10
证书模拟试题
能独立完成“Web前端开发”初级证书对应理论和实操题
1.理论试题
2.实操试题
16
五、教学组织与教学方法
(一)采用“任务驱动”教学模式,所有课程内容的安排均围绕学习任务的完成来展开。
(二)主要采用的教学方法有以下几种:
1.任务教学法。解决真实或虚拟企业项目开发中的实际问题,用任务牵引,采用项目组的形式,按照软件公司运作形式和项目开发流程,以学生为中心,全面完成任务分析、信息收集、计划制定、做出决策、实施计划、反馈控制、评估结果、拓展思考等教学全过程,达到通过学生自己的实践或行动来培养和提高职业能力的教学目标。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。