完整word版HTML CSS JavaScript教学教案Word格式文档下载.docx
《完整word版HTML CSS JavaScript教学教案Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《完整word版HTML CSS JavaScript教学教案Word格式文档下载.docx（27页珍藏版）》请在冰豆网上搜索。
掌握HTML头部标记
掌握标题标记
掌握元信息标记
掌握页面的主体标记
掌握页面注释标记
2.1HTML头部标记head
2.2标题标记title
2.3元信息标记meta
2.3.1设置页面关键字
2.3.2设置页面说明
2.3.3定义编辑工具
2.3.4设置作者信息
2.3.5设置网页文字及语言
2.3.6设置网页的定制跳转
2.4页面注释标记<
！
-->
2.5标题字
2.5.1标题字标记h
2.5.2标题字对齐属性align
2.6段落标记
2.6.1段落标记p
2.6.2换行标记br
2.6.3不换行标记nobr
2.7水平线
2.8其他标记
2.8.1插入空格
2.8.2插入特殊符号
2.9练习题
第3讲
建立超链接
超级链接是HTML文档的最基本特征之一。
超级链接的英文名是hyperlink，它能够让浏览者在各个独立的页面之间方便地跳转。
每个网站都是由众多的网页组成，网页之间通常都是通过链接方式相互关联的。
超链接的范围很广，可以将文档中的任何文字及任意位置的图片设置为超级链接。
超链接有外部链接、电子邮件链接、锚点链接、空链接、脚本链接。
了解超级链接的基本知识
掌握内部链接
掌握锚点链接
掌握外部链接
3.1超链接的基本知识
3.1.1绝对路径
3.1.2相对路径
3.2内部链接
3.2.1认识内部链接
3.2.2链接的目标窗口
3.2.3建立锚点3.3锚点链接
3.3.1建立同一页面中的锚点
3.3.2建立其他页面中的锚点
3.4外部链接
3.4.1链接到外部网站
3.4.2链接到E-mail
3.4.3链接到FTP
3.4.4链接到Telnet
3.4.5下载文件
3.5练习题
第4讲
使用图像
图像是网页中不可缺少的元素，巧妙地在网页中使用图像可以为网页增色不少。
网页美化最简单、最直接的方法就是在网页上添加图像，图像不但使网页更加美观、形象和生动，而且使网页中的内容更加丰富多彩。
利用图像创建精美网页，能够给网页增加生机，从而吸引更多的浏览者。
了解图像的格式
掌握插入图像的方法
掌握图像的超链接
4.1图像的格式
4.2插入图像
4.2.1插入图像标记img
4.2.2图像的源文件src
4.2.3图像的提示文字alt
4.2.4图像的宽度和高度width、heught
4.3图像的超链接
4.3.1图像的超链接
4.3.2图像热区链接
4.4练习题
第5讲
使用列表
列表是一种非常有用的数据排列方式，它以列表的形式来显示数据。
HTML中共有3种列表，分别是无序列表、有序列表和定义列表。
无序列表的所有列表项目之间没有先后顺序之分。
有序列表的列表项目是有先后顺序之分的。
定义列表是一组带有特殊含义的列表，一个列表项目里包含条件和说明两部分。
了解列表标记概述
掌握有序列表
掌握无序列表
掌握定义列表
掌握菜单列表
5.1认识列表标记
5.2有序列表
5.2.1游戏列表ol
5.2.2有序列表的序号类型type
5.2.3有序列表的起始数值start
5.4练习题
第6讲
使用表格
表格是网页制作中使用最多的工具之一，在制作网页时，使用表格可以更清晰地排列数据。
但在实际制作过程中，表格更多地用在网页布局定位上。
很多网页都是以表格布局的，这是因为表格在文本和图像的位置控制方面都有很强的功能。
灵活、熟练地使用表格，在网页制作时会有如虎添翼的感觉。
掌握创建表格
掌握设置表格基本属性
掌握设置表格的边框
掌握设置表格背景
掌握设置表格的行属性
掌握调整单元格属性
6.1创建表格
6.1.1表格的基本构成table、tr、td
6.1.2设置表格的标题caption
6.1.3表头th
6.2表格基本属性
6.2.1表格宽度width
6.2.2表格高度height
6.2.3表格对齐方式align
6.3表格的边框
6.3.1表格边框宽度border
6.3.2表格边框颜色bordercolo
r6.3.3内框宽度cellspacing
6.3.4表格内文字与边框间距cellpadding
6.4表格背景
6.4.1表格背景颜色bgcolor
6.4.2表格背景图像
6.5表格的行属性
6.5.1高度控制height
6.5.2边框颜色bordercolor
6.5.3行背景bgcolor、background
6.5.4行文字的水平对齐方式align
6.5.5行文字的垂直对齐方式valign
6.6单元格属性
6.6.1单元格大小width、height
6.6.2水平跨度colspan
6.6.3垂直跨度rowspan
6.6.4对齐方式align、valign
6.6.5单元格的背景颜色
6.6.6单元格的边框颜色bordercolor
6.6.7单元格的亮边框bordercolorlight
6.6.8单元格的暗边框bordercolordark
6.6.9单元格的背景图像background
6.7表格的结构
6.7.1表格的表首标记<
thead>
6.7.2表格的表主体标记<
tbody>
6.7.3表格的表尾标记<
tfoot>
6.8练习题
第7讲
表单的用途很多，在制作网页，特别是制作动态网页时常常会用到。
表单主要用来收集客户端提供的相关信息，使网页具有交互功能。
在网页制作的过程中，常常需要使用表单，如进行会员注册、网上调查和搜索等。
访问者可以使用如文本域、列表框、复选框以及单选按钮之类的表单对象输入信息，然后单击某个按钮提交这些信息。
表单标记
插入表单对象
菜单和列表
文本域标记
id标记
7.1表单标记form
7.1.1提交表单action
7.1.2表单名称name
7.1.3传送方式method
7.1.4编码方式enctype
7.1.5目标显示方式target
7.2插入表单对象
7.2.1文字字段text
7.2.2密码域password
7.2.3单选按钮radio
7.2.4复选框checkbox
7.2.5普通按钮button
7.2.6提交按钮submit
7.2.7重置按钮reset
7.2.8图像域images
7.2.9隐藏域hidden
7.2.10文件域file
7.3菜单和列表
7.3.1下拉菜单
7.3.2列表项
7.4文本域标记textarea
7.5id标记
7.6创建表单实例
7.7练习题
第8讲
添加多媒体
教学内容：
在网页中，除了之前讲到的可以插入文本和图像外，还可以插入动画、声音、视频等媒体元素，如滚动效果、Flash及Midi声音文件等。
通过对本章的学习，读者可以学习到多媒体文件的使用，从而丰富网页的效果，吸引浏览者的注意。
掌握设置滚动效果
掌握插入多媒体文件
8.1设置滚动效果
8.1.1滚动标记marquee
8.1.2滚动方向direction
8.1.3滚动方式behavior
8.1.4滚动速度scrollamount
8.1.5滚动延迟scrolldelay
8.1.6滚动循环loop
8.1.7滚动范围width、height
8.1.8滚动背景颜色bgcolor
8.1.9空白空间hspace、vspace
8.2插入多媒体文件
8.2.1插入flash动画
8.2.2插入音频和视频文件
8.3练习题
第9讲
HTML5入门基础
HTML5是一种网络标准，相比现有的HTML4.01和XHTML1.0，可以实现更强的页面表现性能，同时充分调用本地的资源，实现不输于app的功能效果。
HTML5带给了浏览者更好的视觉冲击，同时让网站程序员更好的与HTML语言“沟通”。
虽然现在HTML5还没有完善，但是对于以后的网站建设拥有更好的发展。
认识HTML5
掌握HTML5与HTML4的区别
掌握HTML5新增的元素和废除的元素
熟悉新增的属性和废除的属性
掌握创建简单的HTML5页面
9.1认识HTML5
9.2HTML5与HTML4的区别
9.2.1HTML5的语法变化
9.2.2HTML5中的标记方法
9.2.3HTML5语法中的3个要点
9.2.4HTML5与HTML4在搜索引擎优化的对比
9.3HTML5新增的元素和废除元素
9.3.1新增的结构元素
9.3.2新增块级元素
9.3.3新增的行内的语义元素
9.3.4新增的嵌入多媒体元素与交互性元素
9.3.5新增的input元素的类型
9.3.6废除的元素
9.4新增的属性和废除的属性
9.4.1新增的属性
9.4.2废除的属性
9.5练习题
第10讲
HTML5的结构
在HTML5的新特性中，新增的结构元素主要功能就是解决之前在HTML4中Div漫天飞舞的情况，增强网页内容的语义性，这对搜索引擎而言，将更好识别和组织索引内容。
合理地使用这种结构元素，将极大地提高搜索结果的准确度和体验。
新增的结构元素，从代码上看，很容易看出主要是消除Div，即增强语义，强调HTML的语义化。
新增的主体结构元素
新增的非主体结构元素
10.1新增的主体结构元素
10.1.1article元素
10.1.2section元素
10.1.3nav元素
10.1.4aside元素
10.2新增的非主体结构元素
10.2.1header元素
10.2.2header元素
10.2.3footer元素
10.2.4address元素
10.3练习题
第11讲
HTML5开发实战
在过去的10年里，网页设计师使用Flash、JavaScript或其他复杂的软件和技术来创建网站。
现在可以使用HTML5实现交互式服务、单页UI、交互式游戏、复杂业务应用。
凭借对标准驱动的移动应用开发的支持，以及各种强大特性，HTML5迎来了它的黄金时代。
本章就来介绍HTML5开发实战。
掌握HTML5视频video
掌握HTML5音频Audio
掌握HTML5地理定位
掌握HTML5画布canvas
掌握HTML5SVG
11.1HTNL5视频video
11.1.1video概述
11.1.2在网页中添加视频文件
11.1.3链接不同的视频文件
11.2HTML5音频Audio
11.2.1Audio元素简介
11.2.2隐藏audio播放器
11.2.3使用audio元素的事件
11.3HTML5地理定位
11.3.1地理定位方法
11.3.2处理拒绝和错误
11.3.3在地图上显示你的位置
11.4HTML5画布Canvas
11.4.1canvas元素
11.4.2基本的绘图操作
11.4.3线性渐变
11.4.4径向渐变
11.4.5绘制精美时钟
11.5HTML5SVG
11.5.1SVG概述
11.5.2图形绘制
11.5.3文本与图像
11.5.4笔画与填充
11.5.5动画
11.6练习题
第12讲
使用CSS样式表
通过CSS样式定义，可以将网页制作得更加绚丽多彩。
采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确地控制。
用CSS不仅可以做出令浏览者赏心悦目的网页，还能给网页添加许多特效
了解CSS简介
掌握CSS的使用
CSS的字体属性
颜色及背景属性
文本属性
边距与填充属性
边框属性
定位属性列表属性光标属性滤镜属性
12.1认识CSS
12.2使用CSS
12.2.1CSS的基本语法
12.2.2添加CSS的方法
12.3字体属性
12.3.1字体font-family
12.3.2字号font-size
12.3.3字体风格font-style
12.3.4加粗字体font-weight
12.3.5小写字母转为大写font-variant
12.3.6字体复合属性
12.4颜色和背景属性
12.4.1颜色属性color
12.4.2背景颜色background-color
12.4.3背景图像background-image
12.4.4重复背景图像background-repeat
12.4.5背景附件background-attachment
12.4.6背景位置background-position
12.4.7背景复合属性background
12.5段落属性
12.5.1单词间隔word-spacing
12.5.2字符间隔letter-spacing
12.5.3文字修饰text-decoration
12.5.4垂直对齐方式vertical-align
12.5.5文本转换text-transform
12.5.6水平对齐方式text-align
12.5.7文本缩进text-indent
12.5.8文本行高line-height
12.5.9处理空白white-space
12.5.10文本反排unicode-bidi、direction
12.6外边距与内边距属性
12.6.1上边距margin-top
12.6.2其他边距margin-bottom、margin-left、margin-right
12.6.3外边距复合属性margin
12.6.4顶端内边距padding-top
12.6.5其他内边距padding-bottom、padding-left、padding-right
12.6.6内边距复合属性padding
12.7边框属性
12.7.1边框样式border-stye
12.7.2边框宽度border-width
12.7.3边框颜色border-color
12.7.4边框属性border
12.8定位属性
12.8.1定位方式position
12.8.2元素定位top、right、bottom、left
12.8.3层叠顺序z-index
12.8.4浮动属性float
12.8.5清除属性clear
12.8.6可视区域clip
12.8.7层的宽度和高度width、height
12.8.8超出范围overflow
12.8.9可见属性visibility
12.9列表属性
12.9.1列表符号list-style-type
12.9.2图像符号list-style-image
12.9.3列表缩进list-style-position
12.9.4列表复合属性list-style
12.10光标属性cursor
12.11滤镜属性
12.11.1不透明度alpha
12.11.2动感模糊blur
12.11.3对颜色进行透明处理chroma
12.11.4阴影效果dropShadow
12.11.5对象翻转flipH、flipV
12.11.6发光效果glow
12.11.7处理灰度gray
12.11.8反相invert
12.11.9X光片效果xray
12.11.10遮罩效果mask
12.11.11波形滤镜wave
12.12练习题
第13讲
Web标准与CSS网页布局实例
第12章讲述了CSS的基本语法，CSS可以控制字体大小、设置字体样式，目前更多地应用在网页布局上。
本章将通过实例讲述CSS布局网页中的元素的方法。
本章以CSS布局为重点，探讨CSS布局的入门知识和布局网页元素的实例技巧。
表单标记
菜单和列表
文本域标记
id标记
13.1Web标准与CSS布局
13.1.1什么是Web标准
13.1.2CSS布局的优势
13.2DIV+CSS布局网页基础
13.2.1认识DIV
13.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
CSS3是CSS规范的最新版本，在CSS2.1的基础上增加了很多强大的新功能，以帮助开发人员解决一些问题，例如圆角功能、多背景、透明度、阴影等功能等。
CSS2.1是单一的规范，而CSS3被划分成几个模块组，每个模块组都有自己的规范。
这样的好处是整个CSS3的规范发布不会因为部分难缠的部分而影响其他模块的推进。
边框
背景
文本
多列
转换
过渡
动画
用户界面
14.1边框
14.1.1圆角边框border-radius
14.1.2边框图像border-image
14.1.3边框阴影box-shadow
14.2背景
14.2.1背景图片尺寸background-size
14.2.2背景图片定位区域background-origin
14.2.3背景绘制区域background-clip
14.3文本
14.3.1文本阴影text-shadow
14.3.2强制换行word-wrap
14.3.3文本溢出text-overflow
14.3.4文字描边text-stroke
14.3.5文本填充颜色text-fill-color
14.4多列
14.4.1创建多列column-count
14.4.2列的宽度column-width
14.4.3列的间隔column-gap
14.4.4列的规则column-rule
14.5转换
14.5.1移动translate
14.5.2旋转rotate
14.5.3缩放scale
14.5.4扭曲skew
14.5.5矩阵matrix（）
14.6过渡
14.7动画
14.7.1规则声明动画@keyframes
14.7.2animation使用动画
14.8用户界面
14.8.1box-sizing
14.8.2resize
14.8.3outline-offset
14.9实例应用
14.9.1鼠标放上去显示全部内容
14.9.2美观的图片排列
14.10练习题
第15讲
JavaScript脚本基础
JavaScript语言是网页中广泛使用的一种脚本语言，使用JavaScript可以使网页产生动态效果，Jav
升级会员 