《《Web前端开发技术》课程教学设计方案》由会员分享，可在线阅读，更多相关《《Web前端开发技术》课程教学设计方案（7页珍藏版）》请在金锄头文库上搜索。
1、Web前端开发技术课程教学设计方案模块名称涉及知识点任务设计各任务所用资源名称第一模块：HTML基础及文本使用Web网站相关的基本概念常用的Web前端开发工具、浏览器工具。HTML文档的基本结构。标记类型、标记语法。网页添加注释。元信息meta标记的作用。文本格式化标记类型与各种样式。任务1：观看第1、2、3、4、5讲视频；任务2：学习文本辅导中F01、F02资料；任务3：实践训练，完成参考资料中R01动手实践。任务1视频资源：1Web前端开发技术第1讲Web前端开发技术概述；2Web前端开发技术第2讲HTML文档结构；3Web前端开发技术第3讲HTML基本语法；4Web前端开发技术第4讲文本
2、的使用（上）；5Web前端开发技术第5讲文本的使用（下）；任务2文本辅导：1.文本辅导：F01HTML基本标签应用1第二模块：列表、超链接与框架列表的类型。无序列表、有序列表标记语法及属性语法。使用嵌套列表设计小型网站首页。超链接的基本标记语法和属性语法。使用超链接实现电子邮件链接。使用浮动框架实现内嵌页面的显不。任务1：观看第6、12讲视频；任务2：学习文本辅导中F03、F04、F05资料；任务3：实践训练，完成参考资料中R02应用案例。任务1视频资源：1Web前端开发技术第6讲列表的使用；2Web前端开发技术第12讲超链接与框架的使用.；任务2文本辅导：1. 文本辅导：F03HTML列表标
3、签的属性和使用.docx2. 文本辅导：F04列表与超链接的样式.docx任务3参考资料：R02超链接的应用.docx第三模块：表格与表单设计表格所有标记和属性。表格行标记的属性及设置方法。表格单元格的跨行与跨列属性的设置方法。表格的嵌套方法。表格中嵌入各种页面元素。表单结构语法及属性语法。表单控件（元素）标记语法及属性语法。表单域和域标题标记语法。任务1：观看第7、8、9、10讲视频；任务2：学习文本辅导中F06、F07、F08资料；任务3：实践训练，完成参考资料中R03、R04动手实践。任务1视频资源：1Web前端开发技术第7讲认识表格标记；2Web前端开发技术第8讲表单使用（上）93We
4、b前端开发技术第9讲表单使用（中）94Web前端开发技术第10讲表单使用（下）;任务2文本辅导：1. 文本辅导：F06HTML_表格实例.docx2. 文本辅导：F07表单下拉菜单和下拉列表效果.doc3. 文本辅导：F08HTML5表单中新第四模块：图像与多媒体文件图像img标记语法及属性。滚动文字marquee标记语法及属性。嵌入多媒体文件标记语法及属性。任务1：观看第11讲视频；任务2：学习文本辅导中F09、F10资料；任务3：实践训练，完成参考资料中R05、R06动手实践。任务1视频资源：Web前端开发技术第11讲图像与多媒体的使用；任务2文本辅导：1. 文本辅导：F09图片阴影与图片
5、背景设置.docx2. 文本辅导：F10HTML5音视频的嵌入设计案例.doc任务3参考资料：1参考资料：R05图像的渐变效果设置.doc第五模块：HTML5及其新增元素属性HTML5新特性与页面结构。HTML5新增元素和新增属性。任务1：观看第13、14、15讲视频；任务2：学习文本辅导中F11、F08次必任务1视频资源：1Web前端开发技术第13讲HTML5概述；2Web前端开发技术第14讲HTML5的文档结构；3Web前端开发技术第15讲HTML5新增表单输入类型与属性HTML5新增表单元素及新增属性的设置方法。任务3：实践训练，完成参考资料中R07动手实践。任务2文本辅导：1. 文本辅
6、导：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视频资源：1Web前端开发技术第16讲CSS基本语法规则2WEB前端开发技术第17讲CSS定义与引
7、用；3WEB前端开发技术第18讲DIV与SPAN;4WEB前端开发技术第19讲CSS字体样式属性；5WEB前端开发技术第20讲CSS文本与列表样式；6WEB前端开发技术第21讲颜色和背景属性；任务2文本辅导：1.文本辅导：F12CSS样式引用与任务1视频资源:第七模块：css盒子模型与排版布局CSS样式设置中常用的单位。CSS盒子模型。边框、边界、填充及内容等属性及设置方法。DIV标记的CSS各类属性。常见的页面布局类型。DIV结构及CSS规则。CSS3的转换、过渡和动画等特性。设置与应用CSS3文本效果。使用DIV+CSS进行页面布局。任务1：观看第25、43讲视频；任务本辅导中F16、F1
8、7、F18、F19、F22资料；22、23、24、2：学习文F15、F20、F21、任务3：实践训练，完成参考资料中R09、R10、R11应用案例。第八模块：JavaScript编程基础JavaScript程序的概念与作用。JavaScript标识符和变量的概念及其使用方法。JavaScript常用运算符和表任务1：观看第26、27、28、29、30、31、32讲视频；任务2：学习文本辅导中F23、F24、F25、F26、F27资料；任务3：实践训练，完成参考资1WEB前端开发技术第22讲CSS盒子模型（上）；2WEB前端开发技术第23讲CSS盒子模型（下）；3WEB前端开发技术第24讲CSS
9、排版与页面布局；4WEB前端开发技术第25讲CSS3高级应用；5WEB前端开发技术第43讲导航菜单设计；任务2文本辅导：1. 文本辅导：F15运用盒子模型相关属性控制页面中各个元素.doc2. 文本辅导：F16盒子边框的样式设置.docx3. 文本辅导：F17盒子浮动float与清除浮动影响.doc4.文本辅导:位与相对定位设置5.文本辅导:组幺口市而Acc任务1视频资源:1WEB前端开发技术第26讲用；2WEB前端开发技术第JavaScript标识符和变量3WEB前端开发技术第28讲JS4WEB前端开发技术第29讲JS5WEB前端开发技术第30讲JSF18盒子相对定.docF19运用浮动与定
10、位JavaScript概念与作27讲9常用运算符和表达式；程序控制结构（上）；程序控制结构（下）；,业乙/【、JavaScript函数的定义方法与使用。任务2文本辅导：1. 文本辅导：F23Javascript数据类型和变量.docx2. 文本辅导：F24String对象与Array对象.docx3. 文本辅导：F25if分支语句应用.docx4. 文本辅导：F26JavaScript的for循环.docx5. 文本辅导：F27函数定义和调用.docx任务3参考资料：1.参考资料：R12深入学习循环语句.docx第九模块：JavaScript事件分析JavaScript事件类型与事件的概念。事
11、件句柄与事件处理代码相关联的方式。利用表单的提交及重置事件对表单的数据进行校验。鼠标事件中的鼠标单击及鼠标移动事件。常用的键盘及窗口事件。JavaScript内置对象的常用帚，俄u十壮任务1：观看第33、34、35、44讲视频；任务2：学习文本辅导中F28、F29资料；任务3：实践训练，完成参考资料中R15应用实践。任务1视频资源：1WEB前端开发技术第33讲JS事件类型及处理方法；2WEB前端开发技术第34讲表单事件；3WEB前端开发技术第35讲鼠标键盘与窗口事件；4WEB前端开发技术第44讲图片切换案例任务2文本辅导：1. 文本辅导：F28键盘事件.docx2. 文本辅导：F29鼠标事件的
12、种类.docx任务3参考资料：参考资料：R15JS定时器和鼠标事件实现焦点图轮播效果.docx第十模块：DOM和BOM文档对象模型的节点树的构建及节点类型的划分。JavaScript的对象类型，掌握Array、String、任务1：观看第36、37、38、39、40、41、42讲视频；任务2：学习文本辅导中F16、lAr任务1视频资源：1WEB前端开发技术第36讲JavaScript内置对象（上）2WEB前端开发技术第37讲JavaScript内置对象（中）;3WEB前端开发技术第38讲JavaScript内置对象（下）；方法。BOM结构图浏览器对象模型的各对象的层次关系。window对象的定时器及对话框方法。navigatorscreenhistorylocation等对象的属性和方法。任务3：实践训练，完成参考资料中R16、R17应用。5WEB前端开发技术第40讲D0M节点操作（下）；6WEB前端开发技术第41讲B0M对象模型（上）；7WEB前端开发技术第42讲B0M对象模型（下）；任务2文本辅导：1. 文本辅导：F30操作DOM.docx2. 文本辅导：F31操作D0M树中的表单.docx3. 文本辅导：F32浏览器对象概述.docx
