网页设计与制作项目教程（HTML5+CSS3+JavaScript）（AI助学）-教学大纲

《网页设计与制作项目教程（HTML5+CSS3+JavaScript）》

课程教学大纲（课程英文名称）课程编号：学分：学分学时：56课时（其中：讲课课时：42课时上机课时：14课时）先修课程：计算机基础适用专业：信息技术及其计算机相关专业一、课程的性质与目标《网页设计与制作项目教程（HTML5+CSS3+JavaScript）（AI助学）（第3版）》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标签、CSS样式、页面布局等内容，通过本课程的学习，学生能够了解网页Web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。通过本课程，能够为学习后面的前端知识夯实基础。二、课程设计思路和教学要求课程设计理念：课程的集中实践教学环节需明确必要的理论知识的升华与知识层面的拓展，不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例为手段，设计出理论学习与技能掌握相融合的课程内容体系。教学整体设计以技能培养为目标，以案例为载体、理论学习与实践操作相结合。操作系统：Windows10或更高版本开发工具：VisualStudioCode三、课程的主要内容及基本要求项目1网页制作基础知识学习单元网页制作基础知识课时4课时学习目标了解网页的构成，能够说出网页的组成部分熟悉网页的相关名词，能够解释每个名词的含义了解Web标准，对网页的结构、表现、行为有基本的认识熟悉HTML5、CSS3和JavaScript的概念以及发展过程熟悉常用的浏览器，能够说出各浏览器的特点熟悉常见的网页编辑器，能够说出不同网页编辑器的特点掌握HBuilderX的基本操作，能够独立安装并使用该工具掌握VisualStudioCode的基本操作，能够独立安装并使用该工具通过了解不同技术的发展过程，构建持续学习的意识理解“结构-表现-行为”分层逻辑，培养模块化、标准化的工程思维习惯借助扎实的理论知识，培养独立思考、分析和解决问题的思维习惯学习内容知识点掌握程度重点难点网页的构成了解网页的相关名词熟悉Web标准了解任务1-1认识网页掌握√HTML5简介熟悉CSS简介熟悉JavaScript简介熟悉常用浏览器介绍熟悉任务1-2网页制作入门技术掌握√常见网页编辑器介绍熟悉HBuilderX的安装与使用掌握√VSCode的安装与使用掌握√任务1-3网页编辑器掌握√项目2“旅行游记”页面制作学习单元“旅行游记”页面制作课时6课时学习目标掌握HTML文档基本格式了解HTML文档头部相关标签，及一些常用头部标签的作用掌握图像标签的用法，能够制作图文混排页面掌握HTML文本控制标签的用法，能够实现网页文字排版整齐、结构清晰通过对HTML文档基本格式的学习，形成对HTML文档规范的清晰认知，培养严谨、遵循代码书写规范的职业素养通过对图像标签和图文混排技术的学习，培养页面布局与设计能力学习内容知识点掌握程度重点难点HTML文档基本格式掌握√HTML标签了解HTML标签的属性了解HTML标签的关系了解HTML文档头部相关标签了解任务2-1认识HTML掌握√√页面格式化标签掌握文本格式化标签掌握√√特殊字符掌握√任务2-2HTML文本控制标签掌握<div>标签掌握√常用图像格式掌握√图像标签掌握路径掌握任务2-3HTML图像应用掌握任务2-4页面建设准备工作掌握任务2-5制作头部模块掌握任务2-6制作游记模块掌握任务2-7制作页脚模块掌握项目3“网上花店”专题页制作学习单元“网上花店”专题页制作课时8课时学习目标掌握CSS样式规则的特点，能够区分HTML属性与CSS样式的写法差异掌握CSS的层叠性、继承性、优先级，能够清晰描述并举例说明掌握引入CSS样式的不同方式，能够在网页中引入CSS样式掌握使用CSS样式控制网页中的文本外观的技巧通过对CSS知识的运用，培养技术应用能力和创新能力通过设置文本样式、图片排版以及颜色搭配等内容，提升对细节的把控能力以及审美能力通过独立完成项目，培养调试代码的能力，形成独立解决问题的思维模式学习内容知识点掌握程度重点难点结构与表现分离掌握CSS样式规则掌握√CSS样式的引入掌握√√CSS基础选择器掌握√任务3-1CSS核心基础掌握CSS字体样式属性掌握√CSS文本外观属性掌握√CSS定义背景颜色掌握√任务3-2CSS文本样式属性掌握CSS复合选择器熟悉√CSS层叠性与继承性掌握√√CSS优先级掌握√任务3-3CSS高级特性掌握√任务3-4页面建设准备工作掌握任务3-5制作标题模块掌握任务3-6制作分类模块掌握任务3-7制作热卖模块掌握任务3-8制作页脚模块掌握项目4“爱家居”企业网站首页制作学习单元“爱家居”企业网站首页制作课时8课时学习目标了解盒子模型的概念，能够举例描述盒子模型的结构掌握元素的类型，能够归纳不同类型元素的特点掌握使用盒子模型相关属性设置不同的盒子模型样式的方法掌握使用浮动和定位属性对页面进行布局的方法掌握清除元素浮动的方法提升对网页设计美学的理解和应用能力通过编写CSS代码，培养编写规范、高效代码的意识学习内容知识点掌握程度重点难点认识盒子模型了解任务4-1认识盒子模型掌握√边框属性掌握√内边距属性掌握外边距属性掌握√背景属性掌握√√宽度属性和高度属性掌握√任务4-2盒子模型基础属性掌握√透明度掌握√圆角掌握阴影掌握√渐变掌握√任务4-3盒子模型新增属性掌握√元素的类型掌握<span>标签掌握√元素的转换掌握块元素垂直外边距的合并掌握√任务4-4元素的类型与转换掌握√元素的浮动属性掌握√清除浮动掌握overflow属性掌握任务4-5元素的浮动掌握√元素的定位属性掌握静态定位掌握相对定位掌握绝对定位掌握固定定位掌握z-index属性掌握√任务4-6元素的定位掌握任务4-7页面建设准备工作掌握任务4-8制作导航和banner模块掌握任务4-9制作热门推荐模块掌握任务4-10制作夏日生活模块掌握任务4-11制作版权信息模块和悬浮框模块掌握项目5“博学谷”网站首页制作学习单元“博学谷”网站首页制作课时8课时学习目标掌握无序列表、有序列表和定义列表的特点，了解它们之间的差异掌握4种链接伪类的特点，了解不同链接伪类的作用掌握列表嵌套方法，能够使用无序列表、有序列表和定义列表对模块进行排列掌握创建超链接的方法，能够为网页添加超链接通过学习不同列表的特点、差异及嵌套应用，以及超链接的创建和使用，提升网页内容组织和规划能力在制作网页的过程中，需要分析页面结构和样式需求，并运用所学知识解决实际问题，培养发现问题、分析问题和解决问题的能力学习内容知识点掌握程度重点难点无序列表掌握√有序列表掌握√定义列表掌握√列表的嵌套应用掌握√√任务5-1列表标签掌握list-style复合属性掌握将背景图像作为列表项目符号掌握任务5-2CSS控制列表样式掌握创建超链接掌握√锚点链接掌握√√链接伪类控制超链接状态掌握√√任务5-3超链接标签掌握√任务5-4页面建设准备工作掌握任务5-5制作导航模块掌握任务5-6制作banner模块和课程分类模块掌握任务5-7制作热门课程模块掌握任务5-8制作版权信息模块掌握项目6“书隅”网站注册页面制作学习单元书隅”网站注册页面制作课时8课时学习目标了解表格相关标签及其作用熟悉表单的结构，知道各结构的作用掌握不同类型表单控件的特点，能够区分它们之间的差异掌握CSS控制表格样式的方法，能够在网页中设置不同的表格样式掌握CSS控制表单样式的方法，能够在网页中设置不同的表单样式通过表格标签搭建页面结构、设置表单控件属性及用CSS美化时，精准进行每个标签的使用、属性值的设定以及样式的细节调整，培养注重细节、追求卓越的工作态度在制作页面各模块时，兼顾整体页面的协调性和一致性，培养系统思考和规范操作的习惯学习内容知识点掌握程度重点难点表格的创建了解<table>标签的属性了解<tr>标签的属性了解<td>标签的属性了解<th>标签了解任务6-1认识表格相关标签掌握CSS控制表格边框掌握√CSS控制单元格边距掌握CSS控制单元格的宽度和高度掌握任务6-2CSS控制表格样式掌握初识表单熟悉创建表单熟悉√任务6-3表单概述掌握input控件掌握√√textarea控件掌握√select控件掌握√任务6-4基础表单控件掌握√新增input控件类型掌握√新增input控件属性掌握√任务6-5新增表单控件类型和属性掌握CSS控制表单样式掌握任务6-6CSS控制表单样式掌握任务6-7页面建设准备工作掌握任务6-8制作头部模块和导航模块掌握任务6-9制作banner模块和内容模块掌握任务6-10制作页脚模块掌握项目7“视频8”网站首页制作学习单元“视频8”网站首页制作课时6课时学习目标了解网页中常见的视频和音频格式，以及不同视频和音频格式的兼容性掌握网页中视频和音频的嵌入技术，能够在网页中嵌入视频和音频掌握在网页中添加过渡效果的方法，能够在网页中设置过渡效果掌握在网页中添加变形效果的方法，能够在网页中设置变形效果掌握在网页中添加动画效果的方法，能够在网页中设置动画效果通过学习HTML5音视频及CSS3新增属性，提升对Web前端新技术的敏感度和自主探索能力通过灵活组合使用CSS3属性实现个性化动画效果，在满足功能需求的基础上追求视觉创新，增强网页设计的吸引力学习内容知识点掌握程度重点难点视频、音频嵌入技术概述了解嵌入视频了解嵌入音频了解浏览器对视频和音频文件的兼容了解控制视频的宽度和高度了解任务7-1在网页中嵌入视频和音频掌握transition-property属性掌握√transition-duration属性掌握√transition-timing-function属性掌握√transition-delay属性掌握transition属性掌握√任务7-2在网页中添加过渡效果掌握√2D变形掌握√√3D变形掌握任务7-3在网页中添加变形效果掌握√@keyframes规则掌握√√animation-name属性掌握animation-duration属性掌握animation-timing-function属性掌握animation-delay属性掌握animation-iteration-count属性掌握animation-direction属性掌握animation属性掌握任务7-4在网页中添加动画效果掌握√任务7-5页面建设准备工作掌握任务7-6制作引导栏模块掌握任务7-7制作导航模块掌握任务7-8制作banner模块掌握任务7-9制作内容模块掌握任务7-10制作页脚模块掌握项目8“甜心小屋”网站首页制作学习单元“甜心小屋”网站首页制作课时8课时学习目标了解视频和音频嵌入技术，能够说出各主流浏览器支持<video>和<audio>标签的版本了解浏览器对视频和音频文件的兼容性，能够说出浏览器支持的视频和音频格式掌握HTML5中视频、音频的嵌入方法，并能够应用到网页制作中理解过渡属性，能够控制过渡效果持续的时间等掌握变形属性，能够制作2D变形、3D变形效果掌握动画制作方法，能够熟练制作网页中常见的动画效果学习内容知识点掌握程度重点难点JavaScript简介熟悉JavaScript代码的引入方式熟悉JavaScript基础语法熟悉编写简单的JavaScript程序熟悉任务8-1JavaScript基础知识掌握√变量的声明掌握变量的赋值掌握任务8-2变量掌握数据类型了解运算符熟悉任务8-3数据类型和运算符了解条件语句了解循环语句了解跳转语句了解任务8-4流程控制语句掌握√函数的定义掌握√函数的调用掌握函数中变量的作用域掌握任务8-5函数掌握√认识对象掌握创建对象和删除对象属性掌握内置对象掌握任务8-6对象掌握√初识数组熟悉创建数组熟悉数组的常用属性和方法熟悉二维数组熟悉√任务8-7数组掌握√BOM对象掌握DOM对象掌握任务8-8BOM对象和DOM对象掌握事件和事件调用掌握常用的JavaScript事件掌握任务8-9事件处理掌握√任务8-10页面建设准备工作掌握任务8-11制作头部及导航模块掌握任务8-12