HTML+CSS+JavaScript网页制作(Web前端开发)(第3版)课时授课计划.docx

教师姓名时数4日 期班级上课地点课程（学习领域）名称章节第1章HTML5概述单元主要教学内容网页的构成元素与文档结构、Hbulider工作界面教学目标能力（技能）目标知识目标素质目标认识网页与网站基础：了解网页的构成元 素与文档结构；熟悉llbul ider工作界面。对软件有基本认识，对本学期学习内容有初步了解网页设计是一门基础软件 应用、艺术欣赏的课程。学好本门课程需要学生有 综合能力。能力训练任务教材案例与习题教学重点教学难点1. 网页的构成元素与文档结构。2. “结构与表现相别离的重要思想。教学方法、手段多媒体教学教学组织形式讲解、示范、边讲边练作 业备 注第1章HTML5概述1.1 Web简介1.1.1 WWW和浏览器的基本概念1.1.2 URL超文本1.1.4 超文本标记语言HTML1.1.5 HTTP1.2 Web标准什么是Web标准理解表现和结构相别离1.3 HTML 简介1.3.1 Web技术开展历程5.5浮动与清除浮动1055.5.1 浮动 105清除浮动109案例一一爱心包装登录页面的整体布局110教师姓名时数4日 期班级上课地点课程（学习领域）名称章节第6章使用CSS美化页面单元主要教学内容CSS美化文本、图像、表格、表单、链接、列表、导航菜单教学目标能力（技能）目标知识目标素质目标能够使用CSS美化文 本、图像制作基本的 页面；能够使用CSS美化表 格、表单制作简单布 局与交互的页面；能够使用CSS美化链 接、列表、导航菜单 制作带有导航菜单的 复杂页面。1. 掌握使用CSS美化文木、图像的方法；2. 掌握使用CSS美化表格、表单的方法；3. 掌握使用CSS美化 链接、列表、导航菜单的方 法e培养学生对网页、网站概 念的认识，培养学生的相 互沟通能力和团队协作精 神。能力训练任务教材案例与习题教学重点教学难点1. CSS美化页面元素。2. CSS美化导航菜单。教学方法、手段多媒体教学教学组织形式讲解、示范、边讲边练作 业备 注第6章使用CSS美化页面6.1设置字体样式 114字体类型114字体大小1156.1.3 字体粗细115字体倾斜115设置字体样式综合案例1156.2设置文本样式 116文本水平对齐方式1176.2.2 行高 1176.2.3 文本的修饰 117段落首行缩进117首字下沉118文本的截断118文本的颜色118文本的背景颜色119设置文本样式综合案例1196.3设置图像样式121图像缩放121图像边框122图像的不透明度123背景图像124背景重复124背景图像大小1256.4设置表格样式126常用的CSS表格属性 126案例一一使用隔行换色表格制作包装工程年度排行榜1296.5设置表单样式130使用CSS修饰常用的表单元素 130案例一一制作爱心包装用户调查页面1316.6设置链接132设置文字链接的外观 132图文链接1356.7设置列表136表格布局的缺点136列表布局的优势1366.7.3 CSS列表属性136案例制作爱心包装二维码名片1396.8创立导航菜单141纵向导航菜单141横向列表模式的导航菜单142教师姓名时数4日 期班级上课地点课程（学习领域）名称章节第7章使用CSS布局页面单元主要教学内容Div嵌套布局的方法、常见的CSS布局样式、使用CSS布局制作综合案例教学目标能力（技能）目标知识目标素质目标能够使用Div嵌套布 局制作基本的页面； 能够制作常见的CSS 布局样式的页面；能够使用CSS布局制 作综合案例页面。1. 掌握Div嵌套布局 的方法；2. 掌握常见的CSS布 局样式：3. 掌握使用CSS布局 制作综合案例页面的技术。培养学生对网页、网站概 念的认识，培养学生的相 互沟通能力和团队协作精 神。能力训练任务教材案例与习题教学重点教学难点1. 使用Div嵌套布局制作基木的页面。2. 使用CSS布局制作综合案例页面。教学方法、手段多媒体教学教学组织形式讲解、示范、边讲边练作 业各 注第7章使用CSS布局页面7.1 Div+CSS布局技术概述 1447.1.1 认识 Div+CSS 布局 144正确理解Web标准1457.2 Div的嵌套布局145将页面用Div分块145案例一一制作爱心包装活动发布页面1467.3常见的CSS布局样式149两列布局样式149三列布局样式1497.4综合案例制作爱心社区页面15（）教师姓名时数8日 期班级上课地点课程（学习领域）名称章节第8章JavaScript语言基础单元主要教学内容数据类型、表达式、程序结构、函数、对象教学目标能力（技能）目标知识目标素质目标能够使用JavaScripl 编写简单的交互页 面；能够使用函数编写高 效的代码定义；能够使用JavaScripl 的内置对象制作丰富 的页面交互和特效。1. 掌握JavaScript的基 本数据类型和表达式；2. 掌握JavaScript的程 序结构；3. 掌握JavaScript函数 的基本用法；4. 掌握JavaScript的内 置对象的用法。培养学生对网页、网站概 念的认识，培养学生的相 互沟通能力和团队协作精 神。能力训练任务教材案例与习题教学重点教学难点1. JavaScript的程序结构。2. 函数。教学方法、手段多媒体教学教学组织形式讲解、示范、边讲边练作 业备 注第8章JavaScripl语言基础8.1 JavaScript 简介 1608.2在网页中插入JavaScript的方法160在HTML文档中嵌入脚本程序160链接脚本文件161在HTML标签内添加脚本1628.3 JavaScript的基本数据类型和表达式163 基本数据类型1638.3.2 常量 1638.3.3 变量 164运算符和表达式 1648.4 JavaScript 的程序结构 165简单语句166程序控制流程1678.5 函数 172函数的定义172函数的调用173全局变量与局部变量 174 8.6基于对象的JavaScript语言175 8.6.1 对象 175对象的属性177对象的事件177对象的方法1788.7 JavaScript 的内置对象 178数组对象178字符串对象 181日期对象1828.8自定义对象183教师姓名时数4日 期班级上课地点课程（学习领域）名称章节第9章DOM对象及编程单元主要教学内容DOM对象的基本特点和组成、JavaScript的对象事件处理程序教学目标能力（技能）目标知识目标素质目标能够使用DOM对象 制作功能强大的页面 交互；能够使用JavaScript 的对象事件处理程序 定义用户与网页交互 时产生的各种操作。1. 掌握window对象、 document对象、location对 象、history对象、Form对象 的用法：2. 掌握JavaScript的对 象事件处理程序。培养学生对网页、网站概 念的认识，培养学生的相 互沟通能力和团队协作精 神。能力训练任务教材案例与习题教学重点教学难点1. DOM对象。2. 对象事件处理程序。教学方法、手段多媒体教学教学组织形式讲解、示范、边讲边练作 业各 注第9章DOM对象及编程9.1 DOM 模型 1859.2 window 对象 1869.2.1 window对象的属性1869.2.2 window对象的方法1869.3 document 对象 1889.3.1 document 对象的属性 1889.3.2 document 对象的方法 1889.4 location 对象 1899.4.1 location 对象的属性 1909.4.2 location 对象的方法 1909.5 history 对象 1909.6 Form 对象 1919.6.1 Form对象的属性1919.6.2 Form对象的方法1929.7 JavaScript的对象事件处理程序192对象的事件 192常用的事件及处理193表单对象与交互性196案例一一使用Form对象实现Web页面信息交互198教师姓名时数4日 期班级上课地点课程（学习领域）名称章节第10章 使用JavaScript制作网页特效单元主要教学内容制作常见的网页特效教学目标能力（技能）目标知识目标素质目标能够使用JavaScript 制作常见的网页特 效；能够自学制作扩展的 网页特效。1. 掌握常用的文字特 效的制作方法；2. 掌握常用的菜单与 选项卡特效的制作方法；3. 掌握常用的广告特效的制作方法。培养学生对网页、网站概 念的认识，培养学生的相 互沟通能力和团队协作精 神。能力训练任务教材案例与习题教学重点教学难点1. 制作常见的网页特效。2. 自学制作扩展的网页特效。教学方法、手段多媒体教学教学组织形式讲解、示范、边讲边练作 业备 注第10章 使用JavaScript制作网页特效 10.1文字特效 200制作颜色变换的欢迎词200打字效果20110.2菜单与选项卡特效203制作美肤学堂导航菜单203制作Tab选项卡切换效果20610.3广告特效 209教师姓名时数4日 期班级上课地点课程（学习领域）名称章节第11章HTML5的多媒体播放和绘图单元主要教学内容HTML5多媒体API的基本用法、Canvas绘图教学目标能力（技能）目标知识目标素质目标能够使用HTML5多 媒体API控制常件的 音频、视频；能够使用Canvas绘图 丰富页面的表现。1. 掌握HTML5的多 媒体支持类型和特点；2. 掌握HTML5多媒体API的基本用法；3. 掌握Canvas绘图的 基本用法。培养学生对网页、网站概 念的认识，培养学生的相 互沟通能力和团队协作精 神。能力训练任务教材案例与习题教学重点教学难点1. HTML5多媒体API的基本用法。2. Canvas绘图。教学方法、手段多媒体教学教学组织形式讲解、示范、边讲边练作 业备 注第11章HTML5的多媒体播放和绘图11.1多媒体播放21311.1.1 HTML5的多媒体支持213音频标签214视频标签21511.1.4 HTML5 多媒体 API21611.2 Canvas 绘图21811.2.1 创立canvas元素 218构建绘图环境21911.2.3 通过 JavaScript 绘制图形2191.3.2 HTML5 的特性1.3.3 HTML5 元素1.4 HTML5的基本结构1.4.1 HTML5语法结构1.4.2 HTML5编写规范1.4.3 HTML5文档结构1.5 创立HTML文件1.6支持HTML5的浏览器教师姓名时数4日 期班级上课地点课程（学习领域）名称章节第12章jQuery基础单元主要教学内容jQuery开发环境、jQuery选择器教学目标能力（技能）目标知识目标素质目标能够正确配置jQuery 开发环境；能够使用jQuery选择 器制作功能强大的网 页交互与特效。1. 掌握JQuery及插件 的下载与配置；2. 掌握jQuery对象的 基本用法：3. 掌握常用jQuery选择器的基本用法。培养学生对网页、网站概 念的认识，培养学生的相 互沟通能力和团队协作精 神。能力训练任务教材案例与习题教学重点教学难点1. jQuery对象的基本用法。2. 常用jQuery选择器的基本用法。教学方法、手段多媒体教学教学组织形式讲解、示范、边讲边练作 业各 注第12章jQuery基础12.1 jQuery 概述 22912.2 编写 jQuery 程序 229下载与配置jQuery 229编写一个简单的jQuery程序23012.3 jQuery 对象和 DOM 对象 23012.3.1 jQuery对象和DOM对象简介23012.3.2 jQuery对象和DOM对象的相互转换23112.4 jQuery 插件 23212.4.1 下载 jQuery 插件 232引用jQuery插件的方法23312.5 jQuery选择器简介 23312.5.1 jQuery的工厂函数233什么是jQuery选择器 23312.6基础选择器23412.6.1 ID 选择器 234元素选择器 234类名选择器 235复合选择器 235通配符选择器23512.7层次选择器23512.7.1 ancestor descendant（祖先 后代）选择器 23612.7.2 parentchild（父子）选择器 23612.7.3 prev+next（前+后）选择器 23612.7.4 prevsiblings（前兄弟）选择器236 12.8过滤选择器237简单过滤器 237内容过滤器 237可见性过滤器238子元素过滤器23812.9表单项选择择器238教师姓名时数4日 期班级上课地点课程（学习领域）名称章节第13章jQuery动画与UI插件单元主要教学内容jQuery动画、UI插件教学目标能力（技能）目标知识目标素质目标能够使用jQuery动画制作网页动画；能够使用jQueryUI Mi 件快速制作网页交互 与特效。1. 掌握常用jQuery动 画的用法；2. 掌握jQueryUI插件 的用法。培养学生对网页、网站概 念的认识，培养学生的相 互沟通能力和团队协作精 神。能力训练任务教材案例与习题教学重点教学难点1. jQuery动画的用法。2. jQueryUI插件的用法。教学方法、手段多媒体教学教学组织形式讲解、示范、边讲边练作 业各 注第13章jQuery动画与UI插件 13.1 jQuery的动画方法简介241 13.2显示与隐藏效果242 隐藏元素的方法242显示元素的方法24313.3淡入淡出效果244 淡入效果244 淡出效果245 元素的不透明效果246 交替淡入淡出效果246 13.4滑动效果 246 向下展开效果247 向上收缩效果247交替伸缩效果24713.5 jQuery UI 概述 24913.5.1 jQuery UI 简介 24913.5.2 jQuery UI 的下载 24913.5.3 jQuery UI 的使用 25013.5.4 jQuery UI 的工作原理 25113.6 jQuery UI的常用插件 25213.6.1 折叠面板(Accordion)插件 253日期选择器(Datepicker)插件 255标签页(Tabs)插件 257教师姓名时数4日 期班级上课地点课程（学习领域）名称章节第14章 爱心包装综合案例网站单元主要教学内容定义网站结构、综合使用网页制作技术制作页面教学目标能力（技能）目标知识目标素质目标能够使用定义网站结 构的方法建立站点及 页面；能够综合使用网页制 作的各种技术制作综 合案例页面。1. 定义网站结构；2. 掌握使用页面样式 设计、页面结构代码、页面 交互与网页特效的实现制 作综合案例首页及相关页 面O培养学生对网页、网站概 念的认识，培养学生的相 互沟通能力和团队协作精 神。能力训练任务教材案例与习题教学重点教学难点1. 定义网站结构。2. 综合使用网页制作技术制作页面。教学方法、手段多媒体教学教学组织形式讲解、示范、边讲边练作 业各 注第14章爱心包装综合案例网站 14.1网站的开发流程26（）14.2网站结构 261创立站点目录261网站页面的组成26214.3网站技术分析 26214.4制作首页 263教师姓名时数8日 期班级上课地点课程（学习领域）名称章节第2章HTML5基础单元主要教学内容HTML5的基本排版元素、div和span元素教学目标能力（技能）目标知识目标素质目标能够使用基本排版 元素完成简单的页 面效果。掌握HTML5的基本排版元 素的用法、div和span元素 进行简单的页面布局。培养学生对网页、网站概 念的认识，培养学生的相 互沟通能力和团队协作精 神。能力训练任务教材案例与习题教学重点教学难点1. HTML5的基本排版元素。2. div和span元素进行简单的页面布局。教学方法、手段多媒体教学教学组织形式讲解、示范、边讲边练作 业备 注第2章HTML5基础2.1 Head 元素2.1.1 标签2.1.2 标签2.1.3 标签2.1.4 标签 2.2文本元素标题文字标签 特殊符号 2.3文本层次语义元素2.3.1 标签2.3.2 vniark 标签2.3.3 cite 标签2.4基本排版元素段落标签换行标签预格式化标签缩排标签水平线标签案例一一制作爱心包装品牌简介页面2.5列表元素无序列表有序列表定义列表嵌套列表2.6图像元素网页图像的常用格式图像标签设置网页背景图像图文混排案例一一制作爱心包装经营模式图文简介页面2.7超链接超链接概述超链接的应用案例一一制作爱心包装下载专区页面2.8 div元素2.9 span 元素291基本语法2.9.2 span与div的区别使用div标签和span标签布局网页内容教师姓名时数4日 期班级上课地点课程（学习领域）名称章节第3章 HTML5页面的布局与交互单元主要教学内容页面结构元素、表格、表单教学目标能力（技能）目标知识目标素质目标能使用表格显示数据 及搭建网页结构：能 使用表单进行页面交 互。1. 掌握结构元素构建 网页布局的方法；2. 掌握表格的用法：3. 掌握表单的用法。培养学生对网页、网站概 念的认识，培养学生的相 互沟通能力和团队协作精 神。能力训练任务教材案例与习题教学重点教学难点1. 使用表格显示数据及搭建网页结构。2. 使用表单进行页面交互。教学方法、手段多媒体教学教学组织形式讲解、示范、边讲边练作 业各 注第3章 HTML5页面的布局与交互3.1使用结构元素构建网页布局403.1.1 标签 403.1.2 标签 403.1.3 标签 413.1.4 标签 413.1.5 标签 413.1.6 标签 43分组元素44案例一一制作爱心包装新品发布页面453.2页面交互元素 463.2.1 details 元素和 summary 元素 463.2.2 progress 元素 473.3表格 48表格的结构48表格的基本语法48表格的属性49不规范表格51表格数据的分组52案例一一使用表格布局爱心包装产品展示页面543.4表单 55表单的基本概念55表单标签56表单元素56案例一一制作爱心包装会员注册表单60表单分组62使用表格布局表单63表单的高级用法64教师姓名时数4日 期班级上课地点课程（学习领域）名称章节第4章CSS3基础单元主要教学内容CSS引入、CSS选择符、文档结构教学目标能力（技能）目标知识目标素质目标能够用多种方法在页 面中引用CSS样式;能够熟练CSS选择符控制页面元素；能够使用CSS修饰简 单的页面。1. 掌握CSS的基本语 法；2. 掌握网页引用CSS 的方法：3. 掌握CSS选择符的用法。培养学生对网页、网站概 念的认识，培养学生的相 互沟通能力和团队协作精 神。能力训练任务教材案例与习题教学重点教学难点1. 掌握CSS选择符的用法。2. 理解文档结构的含义。教学方法、手段多媒体教学教学组织形式讲解、示范、边讲边练作 业各 注第4章CSS3基础4.1 CSS 简介 654.1.1 什么是 CSS 664.1.2 CSS的开发环境 664.1.2 CSS编写规那么664.2 CSS的引用方法68行内样式68内部样式表 68链入外部样式表69导入外部样式表714.3 CSS语法基础724.3.1 CSS样式规那么72基本选择符 73复合选择符75通配符选择符77特殊选择符784.4 CSS的属性单位80长度、百分比单位80色彩单位814.5文档结构81文档结构的基本概念 824.5.2 继承 83样式表的层叠、特殊性与重要性84元素类型85案例一一制作爱心包装新闻更新局部页面86教师姓名时数4日 期班级上课地点课程（学习领域）名称章节第5章CSS盒模型单元主要教学内容CSS引入、CSS选择符、文档结构教学目标能力（技能）目标知识目标素质目标能够设置盒模型属性 和大小的基本操作技 能；能够熟练应用定位、 浮动进行排版。1. 掌握盒模型属性和 大小的基本用法；2. 掌握盒模型定位的 基本用法：3. 掌握盒模型浮动与清除浮动的基本用法。培养学生对网页、网站概 念的认识，培养学生的相 互沟通能力和团队协作精 神。能力训练任务教材案例与习题教学重点教学难点1. 盒模型定位。2. 盒模型浮动与清除浮动。教学方法、手段多媒体教学教学组织形式讲解、示范、边讲边练作 业各 注第5章CSS盒模型5.1盒模型概述9（）5.2盒模型的属性 915.2.1 边框 91外边距94内边距96案例一一盒模型属性之间的关系965.3盒模型的大小 98盒模型的宽度与高度 98设置块级元素与行级元素的宽度和高度985.4盒子的定位99定位属性100定位方式 101