《HTML5+CSS3+JavaScript网页设计基础与实战》课程教学大纲
学 分：3 学分
学 时：42 学时（其中：讲课学时：30 学时 上机学时：12学时）
先修课程：计算机基础、计算机网络、计算机应用
后续课程：UI 设计、JavaScript 网页
特效适用专业：通识选修课、拓展课
相关专业开课部门：非计算机系
html网页设计css一、课程的性质与目标
《HTML5+CSS3+JavaScript网页设计基础与实战》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标签、CSS样式、网页布局、动画、JavaScript基础、HTML5应用、JavaScript特效和响应式布局等内容，通过本课程的学习，学生能够了解网页web发展历
史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。该课程属于“1+X 证书制度”Web 前端的初级课程，通过本课程，能够为学习后面的前端知识夯实基础。
二、课程设计理念与思路
课程设计理念：课程的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念
课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。教学整体设计“以技能培养为目标，以案例（项目）任务实现为载体、理论学习与实践操作相结合”。
三、教学条件要求
开发工具：webstorm或其他代码编辑工具
四、课程的主要内容及基本要求
第一章 初识web前端
学习单元 | 初识web前端 | 学时 | 4学时 | |||
学习目标 | ◆了解web前端发展。 ◆理解 HTML、CSS 和 JavaScript 的功能和作用。 ◆熟悉 webstorm 工具的基本操作。 | |||||
学习内容 | 知识点 | 了解 | 掌握 | 重点 | 难点 | |
认识万维网 | √ | |||||
前端发展简史 | √ | |||||
W3C的构成 | √ | |||||
HTML5简介 | √ | |||||
HTML5特点 | √ | |||||
HTML5新特性 | √ | |||||
HTML5文件结构 | √ | |||||
HTML5标签与元素的概述 | √ | |||||
CSS3简介 | √ | |||||
CSS3特点 | √ | |||||
CSS3新特性 | √ | |||||
CSS3引入方式 | √ | |||||
CSS3选择器 | √ | |||||
CSS3属性 | √ | |||||
JavaScript简介 | √ | |||||
JavaScript语言特性 | √ | |||||
JavaScript构成 | √ | |||||
JavaScript变量与数据类型 | √ | |||||
JavaScript运算符 | √ | |||||
JavaScript常用事件 | √ | |||||
开发工具的介绍 | √ | |||||
Webstorm的安装 | √ | |||||
Webstorm的使用 | √ | |||||
Webstorm基本操作 | √ | |||||
创建第一个网页 | √ | |||||
第二章 HTML构建基本网页
学习单元 | HTML构建基本网页 | 学时 | 6 学时 | |||
学习目标 | ◆了解 HTML常用的基本标签 ◆了解 <div> 块元素的特点 ◆掌握 <a> 标签的多种跳转功能 ◆熟练使用 使用<p>标签和<img>标签 | |||||
学习内容 | 知识点 | 了解 | 掌握 | 重点 | 难点 | |
标题标签 | √ | |||||
段落标签 | √ | |||||
换行标签 | √ | |||||
【案例-秋天的故事】 | √ | |||||
图片标签 | √ | |||||
水平线标签 | √ | |||||
<div>块元素 | √ | |||||
【案例-致敬教师节】 | √ | |||||
超链接 | √ | |||||
锚点链接 | √ | |||||
超链接的伪类 | √ | |||||
【案例-技术手册导航】 | √ | |||||
第三章 使用列表与表格布局
学习单元 | 使用列表与表格布局 | 学时 | 6 学时 | ||||
学习目标 | 1.了解列表与表格特点 2.掌握列表与表格的相关标签 3.掌握列表与表格的使用 | ||||||
学习内容 | 知识点 | 了解 | 掌握 | 重点 | 难点 | ||
有序列表 | √ | ||||||
无序列表 | √ | ||||||
自定义列表 | √ | ||||||
【案例-新闻列表】 | √ | ||||||
表格基本标签 | √ | ||||||
语义化标签 | √ | ||||||
rowspan和colspan属性 | √ | ||||||
cellpadding和cellspacing属性 | √ | ||||||
表格其他属性 | √ | ||||||
【案例—个人简历表】 | √ | ||||||
第四章 设计网页页面
学习单元 | 设计网页页面 | 学时 | 6 学时 | ||||
学习目标 | ◆了解盒模型结构与z-index属性 ◆掌握CSS定位的区别与应用场景 ◆掌握控制显示与隐藏的相关属性 | ||||||
学习内容 | 知识点 | 了解 | 掌握 | 重点 | 难点 | ||
盒模型内容概述 | √ | ||||||
Padding属性 | √ | ||||||
Border属性 | √ | ||||||
Margin属性 | √ | ||||||
怪异盒模型 | √ | ||||||
Cursor属性 | √ | ||||||
【案例-图书促销活动】 | √ | ||||||
CSS浮动 | √ | ||||||
清除浮动 | √ | ||||||
定位的概述 | √ | ||||||
relative相对定位 | √ | ||||||
absolute绝对定位 | √ | ||||||
fixed固定定位 | √ | ||||||
z-index属性 | √ | ||||||
【案例-祖国风光推荐】 | √ | ||||||
display属性 | √ | ||||||
visibility属性 | √ | ||||||
overflow属性 | √ | ||||||
opacity属性 | √ | ||||||
rgba()函数 | √ | ||||||
显示与隐藏属性总结 | √ | ||||||
【案例-喜迎中秋佳节】 | √ | ||||||
第五章 表单与表单设计效果
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论