最新HTMLCSSJavaScript教学教案讲解

html css javascript 网页制作 教学教案第 1 讲第 2 讲课时内容html基本标记授课时间80 分钟课时2一个完整的html文档必须包含3 个部分：一个由 元素定义的文档版本信息， 一个由 定义各项声明的文档头部和一个由 定义的文档主体部分。 作为各种声明信息的包含元素出现在文档的顶端，并且要先于 出现。而 教学内容教学重点内容大纲用来显示文档主体内容。文字是网页中最基本的信息载体，文字通过不同的排版方式、不同的设计风格排列在网页上，提供了丰富的信息。文字的控制与布局在网页设计中 占了很大比例，因此掌握好文字的使用，对于网页制作来说是最基本的。本章就来讲 解这些基本标记的使用，这些都是一个完整的网页必不可少的。掌握 html头部标记掌握标题标记掌握元信息标记掌握页面的主体标记掌握页面注释标记2.1 html头部标记head2.2 标题标记title2.3 元信息标记meta2.3.1 设置页面关键字2.3.2 设置页面说明2.3.3 定义编辑工具2.3.4 设置作者信息2.3.5 设置网页文字及语言2.3.6 设置网页的定制跳转2.4 页面注释标记 2.5 标题字2.5.1 标题字标记h2.5.2 标题字对齐属性align2.6 段落标记2.6.1 段落标记 p2.6.2 换行标记 br2.6.3 不换行标记nobr2.7 水平线2.8 其他标记2.8.1 插入空格2.8.2 插入特殊符号2.9 练习题第 3 讲第 4 讲第 5 讲第 6 讲课时内容使用表格授课时间80 分钟课时2表格是网页制作中使用最多的工具之一，在制作网页时，使用表格可以更清晰地排列数据。但在实际制作过程中，表格更多地用在网页布局定位上。很多网页都是以表格教学内容布局的，这是因为表格在文本和图像的位置控制方面都有很强的功能。灵活、熟练地使用表格，在网页制作时会有如虎添翼的感觉。教学重点内容大纲掌握创建表格掌握设置表格基本属性掌握设置表格的边框 掌握设置表格背景掌握设置表格的行属性掌握调整单元格属性6.1 创建表格6.1.1 表格的基本构成table、tr、td6.1.2 设置表格的标题caption6.1.3 表头 th6.2 表格基本属性6.2.1 表格宽度width6.2.2 表格高度height6.2.3 表格对齐方式align6.3 表格的边框6.3.1 表格边框宽度border6.3.2 表格边框颜色bordercolo r6.3.3内框宽度cellspacing6.3.4表格内文字与边框间距cellpadding6.4 表格背景6.4.1 表格背景颜色bgcolor6.4.2 表格背景图像6.5 表格的行属性6.5.1 高度控制height6.5.2 边框颜色bordercolor6.5.3 行背景 bgcolor 、background6.5.4 行文字的水平对齐方式align6.5.5 行文字的垂直对齐方式valign6.6 单元格属性6.6.1 单元格大小width 、height6.6.2 水平跨度 colspan6.6.3 垂直跨度 rowspan6.6.4 对齐方式align、valign6.6.5 单元格的背景颜色第 7 讲课时内容使用列表授课时间80 分钟课时2表单的用途很多，在制作网页，特别是制作动态网页时常常会用到。表单主要用来收集客户端提供的相关信息，使网页具有交互功能。在网页制作的过程中，常常需要使教学内容用表单，如进行会员注册、网上调查和搜索等。访问者可以使用如文本域、列表框、复选框以及单选按钮之类的表单对象输入信息，然后单击某个按钮提交这些信息。教学重点内容大纲表单标记插入表单对象菜单和列表 文本域标记id 标记7.1 表单标记form7.1.1 提交表单action7.1.2 表单名称name7.1.3 传送方式method7.1.4 编码方式enctype7.1.5 目标显示方式target7.2 插入表单对象7.2.1 文字字段text7.2.2 密码域 password7.2.3 单选按钮radio7.2.4 复选框 checkbox7.2.5 普通按钮button7.2.6 提交按钮submit7.2.7 重置按钮reset7.2.8 图像域 images7.2.9 隐藏域 hidden7.2.10 文件域 file7.3 菜单和列表7.3.1 下拉菜单7.3.2 列表项7.4 文本域标记textarea7.5 id 标记7.6 创建表单实例7.7 练习题第 8 讲第 9 讲第 10 讲第 11 讲课时内容html5开发实战授课时间80 分钟课时2在过去的10 年里，网页设计师使用flash、javascript 或其他复杂的软件和技术来创建网站。现在可以使用html5实现交互式服务、单页ui 、交互式游戏、复杂业务应教学内容用。凭借对标准驱动的移动应用开发的支持，以及各种强大特性，html5迎来了它的黄金时代。本章就来介绍html5开发实战。教学重点内容大纲掌握 html5视 频 video 掌握 html5音 频 audio 掌握 html5地理定位 掌握 html5画布 canvas 掌握 html5 svg11.1 htnl5视频 video11.1.1 video 概述11.1.2 在网页中添加视频文件11.1.3 链接不同的视频文件11.2 html5音频 audio11.2.1 audio 元素简介11.2.2 隐藏 audio 播放器11.2.3 使用 audio 元素的事件11.3 html5地理定位11.3.1 地理定位方法11.3.2 处理拒绝和错误11.3.3 在地图上显示你的位置11.4 html5画布 canvas11.4.1 canvas 元素11.4.2 基本的绘图操作11.4.3 线性渐变11.4.4 径向渐变11.4.5 绘制精美时钟11.5 html5svg11.5.1 svg 概述11.5.2 图形绘制11.5.3 文本与图像11.5.4 笔画与填充11.5.5 动画11.6 练习题第 12 讲课时内容使用 css 样式表授课时间80 分钟课时2通过 css 样式定义，可以将网页制作得更加绚丽多彩。采用css 技术，可以有效地对教学内容教学重点页面的布局、字体、颜色、背景和其他效果实现更加精确地控制。用css 不仅可以做出令浏览者赏心悦目的网页，还能给网页添加许多特效了解 css 简介掌握 css 的使用css 的字体属性颜色及背景属性文本属性边距与填充属性边框属性内容大纲定位属性列表属性光标属性滤镜属性12.1认识 css12.2使用 css12.2.1css 的基本语法12.2.2添加 css 的方法12.3字体属性12.3.1字体 font-family12.3.2字号 font-size12.3.3字体风格font-style12.3.4加粗字体font-weight12.3.5小写字母转为大写font-variant12.3.6字体复合属性12.4颜色和背景属性12.4.1颜色属性color12.4.2背景颜色background-color12.4.3背景图像background-image12.4.4重复背景图像background-repeat12.4.5背景附件background-attachment12.4.6背景位置background-position12.4.7背景复合属性background12.5段落属性12.5.1单词间隔word-spacing12.5.2字符间隔letter-spacing12.5.3文字修饰text-decoration12.5.4垂直对齐方式vertical-align12.5.5文本转换text-transform12.5.6水平对齐方式text-align12.5.7文本缩进text-indent12.5.8文本行高line-height12.5.9 处理空白white-space12.5.10 文本反排unicode-bidi 、direction12.6 外边距与内边距属性12.6.1 上边距 margin-top12.6.2 其他边距margin-bottom 、 margin-left 、margin-right12.6.3 外边距复合属性margin12.6.4 顶端内边距padding-top12.6.5 其他内边距padding-bottom 、 padding-left 、padding-right12.6.6 内边距复合属性padding12.7 边框属性12.7.1 边框样式border-stye12.7.2 边框宽度border-width12.7.3 边框颜色border-color12.7.4 边框属性border12.8 定位属性12.8.1 定位方式position12.8.2 元素定位top、 right 、bottom 、left12.8.3 层叠顺序z-index12.8.4 浮动属性float12.8.5 清除属性clear12.8.6 可视区域clip12.8.7 层的宽度和高度width 、height12.8.8 超出范围overflow12.8.9 可见属性visibility12.9 列表属性12.9.1 列表符号list-style-type12.9.2 图像符号list-style-image12.9.3 列表缩进list-style-position12.9.4 列表复合属性list-style12.10 光标属性cursor12.11 滤镜属性12.11.1不透明度 alpha12.11.2动感模糊 blur12.11.3对颜色进行透明处理chroma12.11.4阴影效果 dropshadow12.11.5对象翻转 fliph 、flipv12.11.6发光效果 glow12.11.7处理灰度 gray12.11.8反相 invert12.11.9 x 光片效果xray12.11.10 遮罩效果mask12.11.11 波形滤镜wave12.12 练习题第 13 讲课时内容web 标准与css 网页布局实例授课时间80 分钟课时2教学内容第 12 章讲述了css 的基本语法， css 可以控制字体大小、设置字体样式， 目前更多地应用在网页布局上。本章将通过实例讲述css 布局网页中的元素的方法。本章以css 布局为重点，探讨css 布局的入门知识和布局网页元素的实例技巧。教学重点内容大纲表单标记插入表单对象菜单和列表 文本域标记id 标记13.1 web 标准与 css 布局13.1.1 什么是 web 标准13.1.2 css 布局的优势13.2 div+css 布局网页基础13.2.1 认识 div13.2.2 一列固定宽度13.2.3 一列自适应13.2.4 两列固定宽度13.2.5 两列宽度自适应13.2.6 两列右列宽度自适应13.3 使用 css 设计网站导航栏13.3.1 实现背景变换的导航菜单13.3.2 利用 css 制作横向导航13.4 使用 css 设计表单样式13.4.1 改变按钮的背景颜色和文字颜色13.4.2 设置文本框的样式13.4.3 设计文本框中的文字样式13.5 字体及段落样式设计13.5.1 利用 css 控制字体大小和行距13.5.2 制作光晕文字效果13.6 使用 css 设计图片样式13.6.1 鼠标指针移上时图片渐变的效果13.6.2 设计不重复出现的背景13.7 使用 css 控制链接样式13.7.1 使用 css 实现鼠标指针形状改变13.7.2 鼠标指针移到链接文字上时改变文字大小或颜色13.8 练习题第 14 讲移动网页设计基础课时内容css3授课时间80 分钟课时2教学内容css3 是 css 规范的最新版本，在css2.1 的基础上增加了很多强大的新功能，以帮助开发人员解决一些问题，例如圆角功能、多背景、透明度、阴影等功能等。css2.1 是单一的规范， 而 css3 被划分成几个模块组，每个模块组都有自己的规范。这样的好处是整个 css3 的规范发布不会因为部分难缠的部分而影响其他模块的推进。教学重点边框背景文本多列转换过渡动画用户界面内容大纲14.1 边框14.1.1 圆角边框border-radius14.1.2 边框图像border-image14.1.3 边框阴影box-shadow14.2 背景14.2.1 背景图片尺寸background-size14.2.2 背景图片定位区域background-origin14.2.3 背景绘制区域background-clip14.3 文本14.3.1 文本阴影text-shadow14.3.2 强制换行word-wrap14.3.3 文本溢出text-overflow14.3.4 文字描边text-stroke14.3.5 文本填充颜色text-fill-color14.4 多列14.4.1 创建多列column-count14.4.2 列的宽度column-width14.4.3 列的间隔column-gap14.4.4 列的规则column-rule14.5 转换14.5.1 移动 translate14.5.2 旋转 rotate14.5.3 缩放 scale14.5.4 扭曲 skew14.5.5 矩阵 matrix()第 15 讲课时内容javascript 脚本基础授课时间80 分钟课时2javascript 语言是网页中广泛使用的一种脚本语言，使用javascript 可以使网页产生动态效果， javascript 以其小巧简单而备受用户的欢迎。本章将介绍javascript 的基本概教学内容念、语言特点、基本语法、常见的事件和常见内部对象的使用。教学重点了解 javascript 概念了解 javascript 特点掌握 javascript 基本语法掌握 javascript 事件的使用浏览器的内部对象内容大纲15.1 javascript 简介15.2 javascript 基本语法15.2.1 常量和变量15.2.2 表达式和运算符15.2.3 基本语句15.2.4 函数15.3 javascript 事件15.3.1 onclick 事件15.3.2 onchange 事件15.3.3 onselect 事件15.3.4 onfocus 事件15.3.5 onload 事件15.3.6 onunload 事件15.3.7 onblur 事件15.3.8 onmouseover 事件15.3.9 onmouseout 事件15.3.10 ondblclick事件15.3.11 其他常用事件15.4 浏览器的内部对象15.4.1 navigator 对象15.4.2 document 对象15.4.3 windows 对象15.4.4 location 对象15.4.5 history 对象15.5 练习题第 16 讲课时内容教学内容利 用 javascript 制作授课时间80 分钟课时2网页特效利用 javascript 可以轻松制作网页特效，如可以制作显示当前时间、跟随鼠标的文字。本章就来介绍利用javascript 制作时间特效、图像特效、窗口特效、鼠标特效和其他一些常见特效的方法。教学重点内容大纲掌握时间特效的应用掌握图像特效的应用掌握窗口特效的应用掌握鼠标特效的应用掌握其他特效的应用16.1 时间特效16.1.1 显示当前时间16.1.2 显示当前日期16.1.3 显示网页停留时间16.1.4 制作倒计时特效16.2 图像特效16.2.1 当鼠标指针经过图像时图像震动效果16.2.2 图片闪烁效果16.2.3 自动切换图像16.3 窗口特效16.3.1 全屏显示窗口16.3.2 定时关闭窗口16.4 鼠标特效16.4.1