Web前端开发实例教程教学设计.docx
- 文档编号:27753338
- 上传时间:2023-07-04
- 格式:DOCX
- 页数:28
- 大小:24.35KB
Web前端开发实例教程教学设计.docx
《Web前端开发实例教程教学设计.docx》由会员分享,可在线阅读,更多相关《Web前端开发实例教程教学设计.docx(28页珍藏版)》请在冰豆网上搜索。
Web前端开发实例教程教学设计
课时教学
教师姓名
时数
4
日期
班级
上课地点
课程(学习领域)名称
章节
第1章HTML5基础
单元主要教学内容
网页的构成元素与文档结构、Hbulider工作界面
教学目标
能力(技能)目标
知识目标
素质目标
认识网页与网站基础;
了解网页的构成元素与文档结构;
熟悉Hbulider工作界面。
对软件有基本认识,对本学期学习内容有初步了解
网页设计是一门基础软件应用、艺术欣赏的课程。
学好本门课程需要学生有综合能力。
能力训练任务
教材案例与习题
教学重点
教学难点
1.网页的构成元素与文档结构。
2.“结构与表现相分离”的重要思想。
教学方法、手段
多媒体教学
教学组织形式
讲解、示范、边讲边练
作业
备注
第1章HTML5基础
1.1Web的基本概念1
1.1.1WWW1
1.1.2Browser1
1.1.3URL1
1.1.4HTML2
1.1.5HTTP2
1.2网站与网页3
1.2.1网站、网页和主页3
1.2.2静态网页和动态网页3
1.3Web标准4
1.3.1Web标准简介4
1.3.2建立Web标准的优点5
1.3.3网页的表现和结构相分离5
1.4认识HTML5+CSS3+JavaScript技术组合6
1.4.1HTML5简介6
1.4.2CSS3简介7
1.4.3JavaScript简介8
1.5HTML5语法基础9
1.5.1HTML5语法结构9
1.5.2HTML5文件结构11
1.5.3HTML5开发人员编码规范13
1.6元素的分类14
1.6.1元信息元素14
1.6.2语义元素15
1.6.3无语义元素17
1.7HTML的颜色表示和字符实体17
1.7.1HTML的颜色表示17
1.7.2字符实体18
1.8编辑HTML文件18
1.8.1常见的网页编辑工具18
1.8.2HTML文件的创建19
1.9注释22
1.10案例—制作鲜品园页面摘要和版权信息22
课时教学计划
教师姓名
时数
8
日期
班级
上课地点
课程(学习领域)名称
章节
第2章编辑网页元素
单元主要教学内容
HTML5的基本排版元素
教学目标
能力(技能)目标
知识目标
素质目标
能够使用基本排版元素完成简单的页面效果。
掌握HTML5的基本排版元素的用法进行简单的页面设计。
培养学生对网页、网站概念的认识,培养学生的相互沟通能力和团队协作精神。
能力训练任务
教材案例与习题
教学重点
教学难点
1.HTML5的基本排版元素。
2.简单的页面设计。
教学方法、手段
多媒体教学
教学组织形式
讲解、示范、边讲边练
作业
备注
第2章编辑网页元素
2.1文本元素24
2.1.1字体样式元素24
2.1.2短语元素25
2.2文本层次语义元素26
2.2.1mark元素26
2.2.2cite元素27
2.2.3time元素27
2.3基本排版元素28
2.3.1标题元素hl~h628
2.3.2段落元素p和换行元素br28
2.3.3缩排元素blockquote29
2.3.4水平线元素hr30
2.3.5案例—制作鲜品园服务指南页面30
2.4图像元素img31
2.5超链接元素a32
2.5.1a元素32
2.5.2指向其他页面的链接33
2.5.3指向书签的链接33
2.5.4指向下载文件的链接34
2.5.5指向电子邮件的链接34
2.5.6JavaScript链接34
2.5.7用图像作为超链接热点34
2.5.8空链接35
2.5.9案例—制作鲜品园资料下载页面35
2.6列表元素37
2.6.1无序列表37
2.6.2有序列表38
2.6.3定义列表38
2.6.4嵌套列表39
2.6.5案例—制作鲜品园公司名片页面40
2.7多媒体元素41
2.7.1audio元素42
2.7.2video元素42
课时教学计划
教师姓名
时数
4
日期
班级
上课地点
课程(学习领域)名称
章节
第3章网页的布局与交互
单元主要教学内容
页面结构元素、表格、表单
教学目标
能力(技能)目标
知识目标
素质目标
能使用表格显示数据及搭建网页结构;能使用表单进行页面交互。
1.掌握结构元素构建网页布局的方法;
2.掌握表格的用法;
3.掌握表单的用法。
培养学生对网页、网站概念的认识,培养学生的相互沟通能力和团队协作精神。
能力训练任务
教材案例与习题
教学重点
教学难点
1.使用表格显示数据及搭建网页结构。
2.使用表单进行页面交互。
教学方法、手段
多媒体教学
教学组织形式
讲解、示范、边讲边练
作业
备注
第3章网页的布局与交互
3.1表格元素table45
3.1.1表格的结构45
3.1.2基本表格45
3.1.3跨行跨列表格46
3.1.4表格数据的分组47
3.1.5调整列的格式48
3.1.6案例—使用表格布局鲜品园产品展示页面49
3.2使用结构元素构建网页布局50
3.2.1section元素51
3.2.2nav元素51
3.2.3header元素51
3.2.4footer元素51
3.2.5article元素51
3.2.6aside元素52
3.2.7分组元素53
3.2.8案例—制作鲜品园新品发布页面54
3.3页面交互元素56
3.3.1details元素和summary元素56
3.3.2progress元素56
3.4分区元素div57
3.5范围元素span58
3.6表单59
3.6.1表单元素form59
3.6.2输入元素input59
3.6.3标签元素label61
3.6.4选择栏元素select62
3.6.5按钮元素button63
3.6.6多行文本元素textarea64
3.6.7表单分组65
3.6.8使用表格布局表单66
课时教学计划
教师姓名
时数
4
日期
班级
上课地点
课程(学习领域)名称
章节
第4章CSS3基础
单元主要教学内容
CSS引入、CSS选择符、文档结构
教学目标
能力(技能)目标
知识目标
素质目标
能够用多种方法在页面中引用CSS样式;
能够熟练CSS选择符控制页面元素;
能够使用CSS修饰简单的页面。
1.掌握CSS的基本语法;
2.掌握网页引用CSS的方法;
3.掌握CSS选择符的用法。
培养学生对网页、网站概念的认识,培养学生的相互沟通能力和团队协作精神。
能力训练任务
教材案例与习题
教学重点
教学难点
1.掌握CSS选择符的用法。
2.理解文档结构的含义。
教学方法、手段
多媒体教学
教学组织形式
讲解、示范、边讲边练
作业
备注
第4章CSS3基础
4.1CSS3概述69
4.1.1CSS3的编写规范69
4.1.2CSS3的工作环境70
4.2在网页中引用CSS的方法71
4.2.1行内样式71
4.2.2内部样式表72
4.2.3链入外部样式表73
4.2.4导入外部样式表74
4.2.5案例—制作鲜品园业务简介页面75
4.3CSS的主要特性77
4.3.1继承77
4.3.2层叠78
4.3.3优先级79
4.4CSS的基本语法80
4.4.1基本语法80
4.4.2注意事项80
4.5CSS的选择器81
4.5.1元素选择器81
4.5.2通配符选择器82
4.5.3派生选择器82
4.5.4兄弟选择器85
4.5.5id选择器86
4.5.6类选择器87
4.5.7伪类选择器87
4.5.8伪元素选择器89
4.6CSS属性值的写法和单位91
4.6.1长度、百分比单位91
4.6.2色彩单位92
4.7文件结构与元素类型93
4.7.1文件结构的基本概念93
4.7.2元素类型94
4.8案例—制作鲜品园行业资讯页面95
课时教学计划
教师姓名
时数
4
日期
班级
上课地点
课程(学习领域)名称
章节
第5章CSS3的属性
单元主要教学内容
CSS美化文本、图像、表格、表单、链接、列表、导航菜单
教学目标
能力(技能)目标
知识目标
素质目标
能够使用CSS美化文本、图像制作基本的页面;
能够使用CSS美化表格、表单制作简单布局与交互的页面;
能够使用CSS美化链接、列表、导航菜单制作带有导航菜单的复杂页面。
1.掌握使用CSS美化文本、图像的方法;
2.掌握使用CSS美化表格、表单的方法;
3.掌握使用CSS美化链接、列表、导航菜单的方法。
培养学生对网页、网站概念的认识,培养学生的相互沟通能力和团队协作精神。
能力训练任务
教材案例与习题
教学重点
教学难点
1.CSS美化页面元素。
2.CSS美化导航菜单。
教学方法、手段
多媒体教学
教学组织形式
讲解、示范、边讲边练
作业
备注
第5章CSS3的属性
5.1CSS字体属性100
5.1.1字体类型属性font-family100
5.1.2字体尺寸属性font-size100
5.1.3字体倾斜属性font-style101
5.1.4小写字体属性font-variant101
5.1.5字体粗细font-weight101
5.2CSS文本属性102
5.2.1文本颜色属性color102
5.2.2行高属性line-height102
5.2.3文本水平对齐方式属性text-align103
5.2.4为文本添加修饰属性text-decoration103
5.2.5段落首行缩进属性text-indent103
5.2.6文本的阴影属性text-shadow104
5.2.7元素内部的空白属性white-space104
5.2.8文本的截断效果属性text-overflow104
5.3CSS背景属性106
5.3.1背景颜色属性background-color106
5.3.2背景图像属性background-image107
5.3.3重复背景图像属性background-repeat108
5.3.4固定背景图像属性background-attachment108
5.3.5背景图像位置属性background-position109
5.3.6背景图像大小属性background-size109
5.3.7背景属性background110
5.3.8背景图像起点属性background-origin110
5.4CSS尺寸属性111
5.4.1宽度属性width112
5.4.2高度属性height112
5.4.3最小宽度属性min-width112
5.4.4最大宽度属性max-width113
5.4.5最小高度属性min-height113
5.4.6最大高度属性max-height113
5.5CSS列表属性114
5.5.1图像作为列表项的标记属性list-style-image114
5.5.2列表项标记的位置属性list-style-position115
5.5.3标记的类型属性list-style-type115
5.5.4列表简写属性list-style116
5.6CSS表格属性118
5.6.1合并边框属性border-collapse118
5.6.2边框间隔属性border-spacing118
5.6.3标题位置属性caption-side118
5.6.4单元格无内容显示方式属性empty-cells119
5.6.5案例—使用斑马线表格制作畅销商品销量排行榜120
5.7CSS属性的应用121
5.7.1设置图像样式122
5.7.2设置表单样式125
5.7.3设置链接127
5.7.4创建导航菜单128
5.8综合案例—制作鲜品园梦想社区页面131
5.8.1页面布局规划131
5.8.2页面的制作过程132
课时教学计划
教师姓名
时数
4
日期
班级
上课地点
课程(学习领域)名称
章节
第6章盒模型与页面布局
单元主要教学内容
Div嵌套布局的方法、常见的CSS布局样式、使用CSS布局制作综合案例
教学目标
能力(技能)目标
知识目标
素质目标
能够设置盒模型属性和大小的基本操作技能;
能够熟练应用定位、浮动进行排版。
能够使用Div嵌套布局制作基本的页面;
能够制作常见的CSS布局样式的页面;
能够使用CSS布局制作综合案例页面。
1.掌握盒模型属性和大小的基本用法;
2.掌握盒模型定位的基本用法;
3.掌握盒模型浮动与清除浮动的基本用法。
4.掌握Div嵌套布局的方法;
5.掌握常见的CSS布局样式;
6.掌握使用CSS布局制作综合案例页面的技术。
培养学生对网页、网站概念的认识,培养学生的相互沟通能力和团队协作精神。
能力训练任务
教材案例与习题
教学重点
教学难点
1.盒模型定位。
2.盒模型浮动与清除浮动。
3.使用Div嵌套布局制作基本的页面。
4.使用CSS布局制作综合案例页面。
教学方法、手段
多媒体教学
教学组织形式
讲解、示范、边讲边练
作业
备注
第6章盒模型与页面布局
6.1CSS盒模型的组成和大小138
6.1.1盒子的组成138
6.1.2盒子的大小139
6.1.3块级元素与行级元素的宽度和高度141
6.2CSS盒模型的属性141
6.2.1CSS内边距属性padding141
6.2.2CSS外边距属性margin144
6.2.3CSS边框属性border146
6.2.4圆角边框属性border-radius149
6.2.5盒模型的阴影属性box-shadow150
6.2.6调整大小属性resize151
6.3CSS布局属性152
6.3.1元素的布局方式概述152
6.3.2CSS浮动属性float154
6.3.3清除浮动属性clear155
6.3.4裁剪属性clip156
6.3.5元素显示方式属性display157
6.3.6元素可见性属性visibility158
6.4CSS盒子定位属性159
6.4.1定位位置属性top、right、bottom、left159
6.4.2定位方式属性position160
6.4.3层叠顺序属性z-index165
6.5CSS3多列属性166
6.5.1列数属性column-count166
6.5.2列宽属性column-width166
6.5.3列宽属性column166
6.5.4列与列的间隔属性column-gap167
6.5.5是否横跨所有列属性column-span167
6.5.6列与列的间隔样式属性column-rule-style167
6.5.7列与列的间隔颜色属性column-rule-color167
6.5.8列与列的宽度属性column-rule-width167
6.5.9列与列的间隔所有属性column-rule168
6.6CSS基本布局样式169
6.6.1CSS布局类型169
6.6.2CSS布局样式170
6.7综合案例—制作鲜品园商务安全中心页面172
练习6177
课时教学计划
教师姓名
时数
8
日期
班级
上课地点
课程(学习领域)名称
章节
第7章JavaScript编程基础
单元主要教学内容
数据类型、表达式、程序结构、函数、对象
教学目标
能力(技能)目标
知识目标
素质目标
能够使用JavaScript编写简单的交互页面;
能够使用函数编写高效的代码定义;
能够使用JavaScript的内置对象制作丰富的页面交互和特效。
1.掌握JavaScript的基本数据类型和表达式;
2.掌握JavaScript的程序结构;
3.掌握JavaScript函数的基本用法;
4.掌握JavaScript的内置对象的用法。
培养学生对网页、网站概念的认识,培养学生的相互沟通能力和团队协作精神。
能力训练任务
教材案例与习题
教学重点
教学难点
1.JavaScript的程序结构。
2.函数。
教学方法、手段
多媒体教学
教学组织形式
讲解、示范、边讲边练
作业
备注
第7章JavaScript编程基础
7.1JavaScript概述179
7.2在HTML文件中使用JavaScript179
7.2.1在HTML文件中嵌入脚本程序180
7.2.2链接脚本文件180
7.2.3在HTML标签内添加脚本181
7.3数据类型182
7.3.1数据类型的分类182
7.3.2基本数据类型182
7.3.3数据类型的判断183
7.3.4数据类型的转换184
7.4常量、变量、运算符和表达式185
7.4.1常量185
7.4.2变量186
7.4.3运算符和表达式186
7.5流程控制语句188
7.5.1顺序结构语句188
7.5.2条件选择结构语句191
7.5.3循环结构语句194
7.6函数196
7.6.1函数的声明196
7.6.2函数的调用197
7.6.3变量的作用域198
7.6.4系统函数199
7.7对象199
7.7.1对象的概念199
7.7.2类200
7.7.3对象的实例化200
7.7.4对象的属性201
7.7.5对象的方法202
7.7.6对象的事件203
7.8JavaScript的内置对象203
7.8.1数组对象204
7.8.2字符串对象206
7.8.3日期对象207
课时教学计划
教师姓名
时数
4
日期
班级
上课地点
课程(学习领域)名称
章节
第8章对象模型及事件处理
单元主要教学内容
DOM对象的基本特点和组成、JavaScript的对象事件处理程序
教学目标
能力(技能)目标
知识目标
素质目标
能够使用DOM对象制作功能强大的页面交互;
能够使用JavaScript的对象事件处理程序定义用户与网页交互时产生的各种操作。
1.掌握window对象、document对象、location对象、history对象、Form对象的用法;
2.掌握JavaScript的对象事件处理程序。
培养学生对网页、网站概念的认识,培养学生的相互沟通能力和团队协作精神。
能力训练任务
教材案例与习题
教学重点
教学难点
1.DOM对象。
2.对象事件处理程序。
教学方法、手段
多媒体教学
教学组织形式
讲解、示范、边讲边练
作业
备注
第8章对象模型及事件处理
8.1BOM和DOM210
8.1.1BOM210
8.1.2DOM211
8.2window对象211
8.2.1window对象的属性211
8.2.2window对象的方法212
8.3document对象213
8.3.1document对象的属性213
8.3.2document对象的方法213
8.4location对象215
8.4.1location对象的属性215
8.4.2location对象的方法215
8.5history对象215
8.6navigator对象216
8.7screen对象217
8.8form对象217
8.8.1form对象的属性217
8.8.2form对象的方法218
8.9DOM节点218
8.9.1Node对象218
8.9.2Element对象219
8.9.3NodeList对象219
8.10JavaScript的对象事件处理程序221
8.10.1对象的事件221
8.10.2常用的事件及处理221
8.10.3表单对象与交互性225
8.11综合案例—鲜品园商品复选框全选效果229
课时教学计划
教师姓名
时数
4
日期
班级
上课地点
课程(学习领域)名称
章节
第9章CSS3变形、过渡和动画属性
单元主要教学内容
制作常见的网页特效
教学目标
能力(技能)目标
知识目标
素质目标
能够CSS3变形、过渡和动画属性;
能够自学制作扩展的CSS3特效。
1.掌握常用的CSS3变形、过渡和动画属性;
2.掌握常用的CSS3特效的制作方法。
培养学生对网页、网站概念的认识,培养学生的相互沟通能力和团队协作精神。
能力训练任务
教材案例与习题
教学重点
教学难点
1.制作常见的CSS3变形、过渡和动画。
2.自学制作扩展的CSS3网页特效。
教学方法、手段
多媒体教学
教学组织形式
讲解、示范、边讲边练
作业
备注
第9章CSS3变形、过渡和动画属性
9.1变形232
9.1.1CSS的坐标系统232
9.1.2transform属性233
9.1.3transform-origin属性238
9.1.4transform-style属性239
9.1.5perspective属性和perspective-or
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Web 前端 开发 实例教程 教学 设计