《Web前端开发技术》课程教学设计方案

《Web前端开发技术》课程教学设计方案模块名称涉及知识点任务设计各任务所用资源名称第一模块：HTML基础及文本使用Web网站相关的基本概念;常用的Web前端开发工具、浏览器工具。HTML文档的基本结构。标记类型、标记语法。网页添加注释。元信息meta标记的作用。文本格式化标记类型与各种样式。使用段落与排版标记。任务1：观看第1、2、3、4、5讲视频；任务2：学习文本辅导中F01、F02资料；任务3：实践训练，完成参考资料中R01动手实践。任务1视频资源：1《Web前端开发技术》第1讲Web前端开发技术概述；2《Web前端开发技术》第2讲HTML文档结构；3《《Web前端开发技术》第3讲HTML基本语法；4《Web前端开发技术》第4讲文本的使用（上）；5《《Web前端开发技术》第5讲文本的使用（下）；任务2文本辅导：1.文本辅导：F01HTML基本标签应用.docx2.文本辅导：F02HTML文本样式属性设置.docx任务3参考资料：R01HTML图文混排动手实践.docx第二模块：列表、超链接与框架列表的类型。无序列表、有序列表标记语法及属性语法。使用嵌套列表设计小型网站首页。超链接的基本标记语法和属性语法。使用超链接实现电子邮件链接。使用浮动框架实现内嵌页面的显示。任务1：观看第6、12讲视频；任务2：学习文本辅导中F03、F04、F05资料；任务3：实践训练，完成参考资料中R02应用案例。任务1视频资源：1《Web前端开发技术》第6讲列表的使用；2《Web前端开发技术》第12讲超链接与框架的使用.；任务2文本辅导：1.文本辅导：F03HTML列表标签的属性和使用.docx2.文本辅导：F04列表与超链接的样式.docx任务3参考资料：R02超链接的应用.docx第三模块：表格与表单设计表格所有标记和属性。表格行标记的属性及设置方法。表格单元格的跨行与跨列属性的设置方法。表格的嵌套方法。表格中嵌入各种页面元素。表单结构语法及属性语法。表单控件(元素)标记语法及属性语法。表单域和域标题标记语法。任务1：观看第7、8、9、10讲视频；任务2：学习文本辅导中F06、F07、F08资料；任务3：实践训练，完成参考资料中R03、R04动手实践。任务1视频资源：1《Web前端开发技术》第7讲认识表格标记；2《Web前端开发技术》第8讲表单使用（上）；3《Web前端开发技术》第9讲表单使用（中）；4《Web前端开发技术》第10讲表单使用（下）；任务2文本辅导：1.文本辅导：F06HTML_表格实例.docx2.文本辅导：F07表单下拉菜单和下拉列表效果.doc3.文本辅导：F08HTML5表单中新增属性使用.doc任务3参考资料：1.参考资料：R03常用表单控件设计用户注册界面.docx2.参考资料:R04用表单控件及属性设计信息登记表.doc第四模块：图像与多媒体文件图像img标记语法及属性。滚动文字marquee标记语法及属性。嵌入多媒体文件标记语法及属性。任务1：观看第11讲视频；任务2：学习文本辅导中F09、F10资料；任务3：实践训练，完成参考资料中R05、R06动手实践。任务1视频资源：《Web前端开发技术》第11讲图像与多媒体的使用；任务2文本辅导：1.文本辅导：F09图片阴影与图片背景设置.docx2.文本辅导：F10HTML5音视频的嵌入设计案例.doc任务3参考资料：1参考资料：R05图像的渐变效果设置.doc参考资料：R06HTML5音视频的嵌入设计案例.doc第五模块：HTML5及其新增元素属性HTML5新特性与页面结构。HTML5新增元素和新增属性。HTML5新增表单元素及新增属性的设置方法。任务1：观看第13、14、15讲视频；任务2：学习文本辅导中F11、F08资料；任务3：实践训练，完成参考资料中R07动手实践。任务1视频资源：1《Web前端开发技术》第13讲HTML5概述；2《Web前端开发技术》第14讲HTML5的文档结构；3《Web前端开发技术》第15讲HTML5新增表单输入类型与属性;任务2文本辅导：1.文本辅导：F11HTML5的部分新增元素用法.docx2.文本辅导：F08HTML5表单中新增属性使用.doc任务3参考资料：参考资料：R07HTML5标签综合案例.docx第六模块：CSS基础及样式属性CSS基本概念、CSS类型。4种CSS样式定义的方法。CSS中字体、排版、颜色、背景、列表等属性设置。DIV和SPAN标记语法及标记语法。任务1：观看第16、17、18、19、20、21讲视频；任务2：学习文本辅导中F12、F13、F14资料；任务3：实践训练，完成参考资料中R08高级应用实现。任务1视频资源：1《Web前端开发技术》第16讲CSS基本语法规则2《WEB前端开发技术》第17讲CSS定义与引用;3《WEB前端开发技术》第18讲DIV与SPAN;4《WEB前端开发技术》第19讲CSS字体样式属性;5《WEB前端开发技术》第20讲CSS文本与列表样式;6《WEB前端开发技术》第21讲颜色和背景属性;任务2文本辅导：1.文本辅导：F12CSS样式引用与选择器使用.docx2.文本辅导：F13选择器及伪类链接的综合使用.doc3.文本辅导：F14CSS层叠性与选择器优先级.doc任务3参考资料：参考资料：R08CSS文本样式及高级特性实现.docx第七模块：CSS盒子模型与排版布局CSS样式设置中常用的单位。CSS盒子模型。边框、边界、填充及内容等属性及设置方法。DIV标记的CSS各类属性。常见的页面布局类型。DIV结构及CSS规则。CSS3的转换、过渡和动画等特性。设置与应用CSS3文本效果。使用DIV+CSS进行页面布局。任务1：观看第22、23、24、25、43讲视频；任务2：学习文本辅导中F15、F16、F17、F18、F19、F20、F21、F22资料；任务3：实践训练，完成参考资料中R09、R10、R11应用案例。任务1视频资源：1《WEB前端开发技术》第22讲CSS盒子模型（上）;2《WEB前端开发技术》第23讲CSS盒子模型（下）;3《WEB前端开发技术》第24讲CSS排版与页面布局;4《WEB前端开发技术》第25讲CSS3高级应用;5《WEB前端开发技术》第43讲导航菜单设计;任务2文本辅导：1.文本辅导：F15运用盒子模型相关属性控制页面中各个元素.doc2.文本辅导：F16盒子边框的样式设置.docx3.文本辅导：F17盒子浮动float与清除浮动影响.doc4.文本辅导：F18盒子相对定位与相对定位设置.doc5.文本辅导：F19运用浮动与定位组织页面.doc6.文本辅导：F20块元素与行内元素的使用.doc7.文本辅导：F21CSS3属性选择器和结构伪类选择器应用.docx8.文本辅导：F22CSS3综合运用设计推广软文.doc任务3参考资料：1.参考资料：R09运用盒子模型属性实现弹出框页效果.docx2.参考资料：R10运用元素的浮动和定位实现焦点图效果.docx3.参考资料：R11CSS3的2D与3D属性方法.docx第八模块：JavaScript编程基础JavaScript程序的概念与作用。JavaScript标识符和变量的概念及其使用方法。JavaScript常用运算符和表达式概念。JavaScript中顺序、分支、循环三种程序控制结构语法。JavaScript函数的定义方法与使用。任务1：观看第26、27、28、29、30、31、32讲视频；任务2：学习文本辅导中F23、F24、F25、F26、F27资料；任务3：实践训练，完成参考资料中R12、R13、R14应用。任务1视频资源：1《WEB前端开发技术》第26讲JavaScript概念与作用;2《WEB前端开发技术》第27讲JavaScript标识符和变量;3《WEB前端开发技术》第28讲JS常用运算符和表达式;4《WEB前端开发技术》第29讲JS程序控制结构（上）;5《WEB前端开发技术》第30讲JS程序控制结构（下）;6《WEB前端开发技术》第31讲javascript函数（上）;7《WEB前端开发技术》第32讲javascript函数（下）；任务2文本辅导：1.文本辅导：F23Javascript数据类型和变量.docx2.文本辅导：F24String对象与Array对象.docx3.文本辅导：F25if分支语句应用.docx4.文本辅导：F26JavaScript的for循环.docx5.文本辅导：F27函数定义和调用.docx任务3参考资料：参考资料：R12深入学习循环语句.docx参考资料：R13函数应用.docx参考资料：R14JavaScript作用域.docx第九模块：JavaScript事件分析JavaScript事件类型与事件的概念。事件句柄与事件处理代码相关联的方式。利用表单的提交及重置事件对表单的数据进行校验。鼠标事件中的鼠标单击及鼠标移动事件。常用的键盘及窗口事件。JavaScript内置对象的常用属性及方法。任务1：观看第33、34、35、44讲视频；任务2：学习文本辅导中F28、F29资料；任务3：实践训练，完成参考资料中R15应用实践。任务1视频资源：1《WEB前端开发技术》第33讲JS事件类型及处理方法；2《WEB前端开发技术》第34讲表单事件；3《WEB前端开发技术》第35讲鼠标键盘与窗口事件；4《WEB前端开发技术》第44讲图片切换案例任务2文本辅导：1.文本辅导：F28键盘事件.docx2.文本辅导：F29鼠标事件的种类.docx任务3参考资料：参考资料：R15JS定时器和鼠标事件实现焦点图轮播效果.docx第十模块：DOM和BOM文档对象模型的节点树的构建及节点类型的划分。JavaScript的对象类型，掌握Array、String、Date、Number、Math等对象的常用属性和方法。BOM结构图浏览器对象模型的各对象的层次关系。window对象的定时器及对话框方法。navigator、screen、history、location等对象的属性和方法。任务1：观看第36、37、38、39、40、41、42讲视频；任务2：学习文本辅导中F16、F17、F18资料；任务3：实践训练，完成参考资料中R16、R17应用。任务1视频资源：1《WEB前端开发技术》第36讲JavaScript内置对象（上）;2《WEB前端开发技术》第37讲JavaScript内置对象（中）;3《WEB前端开发技术》第38讲JavaScript内置对象（下）;4《WEB前端开发技术》第39讲DOM节点操作（上）；5