《Web前端开发技术》教案全套 李保安 模块1-9　Web基础知识-综合实战

PAGEPAGE2《Web前端开发技术》教学方案内容(标题)模块1Web基础知识任务1.1“寻找家乡记忆”网站制作准备1.1.1认识网页1.1.2网页与网站1.1.3网页的基本构成元素1.1.4网站的建设流程1.1.5网页的设计基础课后练习课时1教学目标及要求知识目标1．了解网页、网站，以及网页的基本构成元素。2．理解网页的设计基本原则、色彩搭配及设计要点。3．了解HTML5。4．了解常用的几种开发工具，掌握VSCode开发工具的安装。5．掌握网站的建设流程。6．掌握站点的创建方法。7．掌握网页文档的创建与保存。8．掌握网站的运行。能力目标能够安装VSCode开发工具，能够在VSCode中创建“寻找家乡记忆”（Memoriesofhome）网站，能够创建和保存网页文档，能够运行程序。重点难点及其处理重点:（1）掌握网站的建设流程。（2）掌握站点的创建方法。（3）掌握网页文档的创建与保存。（4）掌握网站的运行。难点：HTML5、常用的开发工具、开发工具的安装处理方法：结合“寻找家乡记忆”网站制作准备，下载VSCode安装包，安装VisualStudioCode，创建站点，整理素材，创建和保存网页文档，最后运行网站。教学方法（1）讲授+上机练习（2）加强课堂指导，及时解决学生学习中出现的问题。参考文献及其要求课外作业预习：模块2备注

《Web前端开发技术》教学方案内容(标题)模块2HTML5语言基础任务2.1制作“校史馆参观需知”网页2.1.1HTML5文档的格式2.1.2基本标签2.1.3序列标签任务2.2制作“家乡美食及制作流程展示”网页2.2.1图像类型及图像标签2.2.2路径分类2.2.3链接标签2.2.4链接的分类课后练习课时2教学目标及要求知识目标1．了解HTML5文档的格式。2．掌握HTML中常用的基本标签。3．掌握HTML中序列标签的语法。4．了解图像类型，掌握图像标签的语法及属性。5．掌握超链接标签的基本结构和属性。6．了解链接的分类。能力目标能够利用基本标签、序列标签、图像标签和超链接标签制作网页。重点难点及其处理重点:（1）HTML中常用的基本标签。（2）HTML中序列标签。难点：（1）会使用链接标签。（2）会使用图像标签。处理方法：结合“校史馆参观需知”网页和“家乡美食及制作流程展示”网页的讲授及演示操作介绍本模块中的知识点，并进行针对性的实训练习。教学方法（1）讲授+上机练习（2）加强课堂指导，及时解决学生学习中出现的问题。参考文献及其要求课外作业预习：模块3备注

《Web前端开发技术》教学方案内容(标题)模块3HTML5中新增的标签及属性任务3.1制作“古都花城洛阳代表性古迹”网页3.1.1语义化标签3.1.2分组标签任务3.2制作“数字图书馆”网页3.2.1页面交互标签3.2.2全局属性课后练习课时2教学目标及要求知识目标1．掌握HTML5中新增的语义化标签。2．掌握分组标签。3．掌握页面交互标签中各个标签的属性。4．掌握全局属性中各个属性的语法和属性。能力目标能够利用语义化标签、分组标签、页面交互标签和全局属性制作网页。重点难点及其处理重点：（1）语义化标签。（2）页面交互标签。（3）全局属性。难点：利用语义化标签、分组标签、页面交互标签和全局属性制作网页。处理方法：结合“古都花城洛阳代表性古迹”网页和“数字图书馆”网页的讲授及演示操作介绍本模块中的知识点，并进行针对性的实训练习。教学方法（1）讲授+学生上机练习（2）加强课堂指导，及时解决学生练习中出现的问题。参考文献及其要求课外作业预习：模块4。备注

《Web前端开发技术》教学方案内容(标题)模块4CSS基础任务4.1制作“美文赏析”网页4.1.1CSS简介4.1.2CSS的基本语法4.1.3CSS的基本属性4.1.4CSS样式分类任务4.2制作“大学生身高体重标准表”网页4.2.1id选择器4.2.2标签选择器和类选择器4.2.3伪类选择器4.2.4表格任务4.3制作“名人故事”网页4.3.1复合选择器4.3.2通配符选择器课后练习课时3教学目标及要求知识目标1．了解CSS，掌握CSS的基本语法和基本属性。2．掌握内联式、嵌入式和外链式的语法。3．掌握CSS中的选择器，如id选择器、标签选择器、类选择器及伪类选择器。4．掌握表格基本标签的使用。能力目标能够利用CSS中的各种选择器美化网页；能够使用表格中的标记在网页中创建表格；能够使HTML和CSS结合起来完成网页“内容+样式”的设计。重点难点及其处理重点：（1）内联式、嵌入式和外链式。（2）CSS中的选择器。（3）表格。难点：能够使HTML和CSS来完成网页制作处理方法：结合“美文赏析”网页、“大学生身高体重标准表”网页和“名人故事”网页的讲授及演示操作介绍本模块中的知识点，并进行针对性的实训练习。教学方法（1）讲授+学生上机练习（2）加强课堂指导，及时解决学生练习中出现的问题。参考文献及其要求课外作业预习：模块5备注

《Web前端开发技术》教学方案内容(标题)模块5盒子模型及应用任务5.1制作“学习日用百科”网页5.1.1盒子模型的概念5.1.2边框的设置5.1.3内边距和外边距的设置任务5.2制作网页导航条5.2.1元素的类型和转换5.2.2Flex布局的用法5.2.3overflow属性的用法5.2.4浮动的应用及清除任务5.3制作“地域特产推介”网页5.3.1元素的定位和偏移5.3.2静态定位和相对定位5.3.3绝对定位和固定定位5.3.4z-index层叠等级属性任务5.4制作企业网站广告栏5.4.1文字阴影和盒子阴影5.4.2渐变5.4.3Web字体图标的应用任务5.5制作黄河景色展示网页5.5.1过渡5.5.2变形5.5.3动画课后练习课时5教学目标及要求知识目标1．理解盒子模型的概念。2．掌握边框、内边距、外边距的设置。3．了解元素的类型和转换。4．掌握Flex布局、overflow属性、浮动的用法。5．了解元素的定位和偏移，掌握静态定位、相对定位、绝对定位和固定定位的使用。6．掌握文字阴影、盒子阴影及渐变的使用。7．掌握过渡、变形和动画的使用。能力目标能够利用边框的设置、Flex布局的用法、元素的定位等对页面进行布局；能够利用文字阴影、盒子阴影、渐变等给网页增加效果；能够利用过渡、变形和动画制作动态网页。重点难点及其处理重点：（1）边框、内边距、外边距的设置。（2）Flex布局、overflow属性、浮动。（3）静态定位、相对定位、绝对定位和固定定位。（4）文字阴影、盒子阴影及渐变（5）过渡、变形和动画难点：利用盒子模型进行网页制作。处理方法：结合“学习日用百科”网页、网页导航条、“地域特产推介”网页、企业网站广告栏和黄河景色展示网页的讲授及演示操作介绍知识点，并进行针对性的实训练习。教学方法（1）讲授+学生上机练习（2）加强课堂指导，及时解决学生练习中出现的问题。参考文献及其要求课外作业预习：模块6。备注

《Web前端开发技术》教学方案内容(标题)模块6HTML5的表单及应用任务6.1制作“读者会员注册”网页6.1.1表单及创建方法6.1.2input元素及用法6.1.3其他表单元素6.1.4HTML5中新增的表单属性课后练习课时1教学目标及要求知识目标1．了解表单及创建方法。2．掌握input元素的用法。3．掌握其他表单元素的用法。4．掌握HTML5中新增的表单属性。能力目标重点难点及其处理重点：（1）input元素的用法；（2）HTML5中新增的表单属性。难点：会在网页中创建按钮、单选按钮、复选框、下拉列表、文本区域等元素处理方法：结合“读者会员注册”网页的讲授及演示操作介绍知识点，并进行针对性的实训练习。教学方法（1）讲授+学生上机练习（2）加强课堂指导，及时解决学生练习中出现的问题。参考文献及其要求课外作业预习：模块7。备注

《Web前端开发技术》教学方案内容(标题)模块7网页多媒体元素及应用任务7.1制作音乐播放器网页7.1.1嵌入音频7.1.2嵌入视频7.1.3<source>标签课后练习课时1教学目标及要求知识目标1．掌握嵌入音频的语法。2．掌握嵌入视频的语法。3．掌握<source>标签的语法。能力目标能够在网页中嵌入音频和视频等多媒体文件。重点难点及其处理重点：（1）嵌入音频的语法。（2）嵌入视频的语法。（3）<source>标签。难点：在网页中嵌入音频和视频等多媒体文件处理方法：结合音乐播放器网页的讲授及演示操作介绍知识点，并进行针对性的实训练习。教学方法（1）讲授+学生上机练习（2）加强课堂指导，及时解决学生练习中出现的问题。参考文献及其要求课外作业预习：模块8。备注

《Web前端开发技术》教学方案内容(标题)模块8JavaScript基础任务8.1制作精选图书模块8.1.1JavaScript语言基础8.1.2BOM对象和DOM对象8.1.3JavaScript函数8.1.4事件8.1.5JavaScript对象任务8.2制作美丽乡村信息网网页8.2.1jQuery简介8.2.2jQuery的下载与引入8.2.3jQuery选择器8.2.4jQuery的DOM制作8.2.5jQuery事件课后练习课时2教学目标及要求知识目标1．了解JavaScript的特点和语法结构。2．掌握BOM和DOM对象的使用。3．掌握JavaScript中各种函数的语法。4．掌握JavaScript中各种对象的语法。5．掌握jQuery选择器的使用。6．掌握jQuery的DOM制作。能力目标能够利用JavaScript编写程序，并能够在HTML中引入JavaScript来制作网页；能够下载引入jQuery制作网页。重点难点及其处理重点：（1）JavaScript中各种函数;（2）JavaScript中各种对象。（3）jQuery选择器。难点：会引入JavaScript和jQuery制作网页。处理方法：结合精选图书模块和美丽乡村信息网网页的讲授及演示操作介绍知识点，并进行针对性的实训练习。教学方法（1）讲授+学生上机练习（2）加强课堂指导，及时解决学生练习中出现的问题。参考文献及其要求课外作业预习：模块9。备注

《Web前端开发技术》教学方案内容(标题)模块9综合实战实战1制作河南非遗推介展示网网页效果图制作过程代码分析实战2制作买多多购物平台网页效果图制作过程代码分析课时4教学目标及要求通过本模块的实战练习，学生将能够有效地控制页面的样式，包括布局、颜色、字体、间距等视觉元素，以确保网页的外观符合设计要求。学生学会利用JavaSc