HTMLCSSJavaScript教学教案讲解.doc

1、HTML CSS JavaScript网页制作教学教案第1讲课时内容HTML基础授课时间80分钟课时2教学内容在当今社会中，网络已成为人们生活的一部分，网页设计技术已成为学习计算机的重要内容之一。目前大部分网页都采用可视化网页编辑软件来制作的，但是无论采用哪一种网页编辑软件，最后都是将所设计的网页转化为HTML。HTML是搭建网页的基础语言，如果不了解HTML，就不能灵活地实现想要的网页效果。本章就来介绍HTML的基本概念和编写方法以及浏览HTML文件的方法，使读者对HTML有个初步的了解，从而为后面的学习打下基础。教学重点了解HTML的基本概念掌握HTML文件的编写方法 掌握使用浏览器浏览H

2、TML文件 内容大纲 1.1 HTML的基础概念1.1.1 HTML简介1.1.2 HTML文件的 基本结构1.1.3 认识HTML标记1.2 HTML文件的编写方法 1.2.1使用笔记本手工编写HTML1.2.2使用Dreamweaver编写HTML文件1.3使用浏览器浏览HTML文件1.3.1查看页面效果1.3.2查看源文件1.4练习题第2讲课时内容HTML基本标记授课时间80分钟课时2教学内容一个完整的HTML文档必须包含3个部分：一个由元素定义的文档版本信息，一个由定义各项声明的文档头部和一个由定义的文档主体部分。作为各种声明信息的包含元素出现在文档的顶端，并且要先于出现。而用来显示文

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设置网页的定制跳

4、转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讲课时内容建立超链接授课时间80分钟课时2教学内容超级链接是HTML文档的最基本特征之一。超级链接的英文名是hyperlink，它能够让浏览者在各个独立的页面之间方便地跳转。每个网站都是由众多的网页组成，网页之间通常都是通过链接方式相互关联的。超链接的范围很广，可以将文档中的任何文字及任意位置的图片设置为超级链接。超链接有外部链接、电子邮件链接

5、、锚点链接、空链接、脚本链接 。教学重点了解超级链接的基本知识 掌握内部链接 掌握锚点链接 掌握外部链接 内容大纲 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讲课时内容使用图像授课时间80分钟课时2教学内容图像是网页中不可缺少的

6、元素，巧妙地在网页中使用图像可以为网页增色不少。网页美化最简单、最直接的方法就是在网页上添加图像，图像不但使网页更加美观、形象和生动，而且使网页中的内容更加丰富多彩。利用图像创建精美网页，能够给网页增加生机，从而吸引更多的浏览者。教学重点了解图像的格式 掌握插入图像的方法 掌握图像的超链接 内容大纲 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讲课时内容使用列表授课时间80分钟课

7、时2教学内容列表是一种非常有用的数据排列方式，它以列表的形式来显示数据。HTML中共有3种列表，分别是无序列表、有序列表和定义列表。无序列表的所有列表项目之间没有先后顺序之分。有序列表的列表项目是有先后顺序之分的。定义列表是一组带有特殊含义的列表，一个列表项目里包含条件和说明两部分。教学重点了解列表标记概述 掌握有序列表 掌握无序列表 掌握定义列表 掌握菜单列表 内容大纲5.1认识列表标记5.2有序列表5.2.1游戏列表ol5.2.2有序列表的序号类型type5.2.3有序列表的起始数值start5.4练习题第6讲课时内容使用表格授课时间80分钟课时2教学内容表格是网页制作中使用最多的工具之一

8、，在制作网页时，使用表格可以更清晰地排列数据。但在实际制作过程中，表格更多地用在网页布局定位上。很多网页都是以表格布局的，这是因为表格在文本和图像的位置控制方面都有很强的功能。灵活、熟练地使用表格，在网页制作时会有如虎添翼的感觉。教学重点掌握创建表格 掌握设置表格基本属性 掌握设置表格的边框 掌握设置表格背景 掌握设置表格的行属性 掌握调整单元格属性 内容大纲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

9、表格的边框6.3.1 表格边框宽度border6.3.2 表格边框颜色bordercolor6.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

10、.6.3 垂直跨度rowspan6.6.4 对齐方式align、valign6.6.5 单元格的背景颜色6.6.6 单元格的边框颜色bordercolor6.6.7 单元格的亮边框bordercolorlight6.6.8 单元格的暗边框bordercolordark6.6.9 单元格的背景图像background6.7 表格的结构6.7.1 表格的表首标记6.7.2 表格的表主体标记6.7.3 表格的表尾标记6.8练习题第7讲课时内容使用列表授课时间80分钟课时2教学内容表单的用途很多，在制作网页，特别是制作动态网页时常常会用到。表单主要用来收集客户端提供的相关信息，使网页具有交互功能。在网

11、页制作的过程中，常常需要使用表单，如进行会员注册、网上调查和搜索等。访问者可以使用如文本域、列表框、复选框以及单选按钮之类的表单对象输入信息，然后单击某个按钮提交这些信息 。教学重点表单标记 插入表单对象 菜单和列表文本域标记 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 普通按钮b

12、utton7.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讲课时内容添加多媒体授课时间80分钟课时2教学内容教学内容：在网页中，除了之前讲到的可以插入文本和图像外，还可以插入动画、声音、视频等媒体元素，如滚动效果、Flash及Midi声音文件等。通过对本章的学习，读者可以学习到多媒体文件的使用，从而丰富网页的效果，吸引浏览者的注意。教学重点掌握设置滚动效

13、果 掌握插入多媒体文件内容大纲8.1 设置滚动效果8.1.1 滚动标记marquee8.1.2 滚动方向direction8.1.3 滚动方式behavior8.1.4 滚动速度scrollamount8.1.5 滚动延迟scrolldelay8.1.6 滚动循环loop8.1.7 滚动范围width、height8.1.8 滚动背景颜色bgcolor8.1.9 空白空间hspace、vspace8.2 插入多媒体文件8.2.1 插入flash动画8.2.2 插入音频和视频文件8.3练习题第9讲课时内容HTML5入门基础授课时间80分钟课时2教学内容HTML5是一种网络标准，相比现有的 HTM

14、L4.01 和XHTML 1.0，可以实现更强的页面表现性能，同时充分调用本地的资源，实现不输于app的功能效果。HTML5带给了浏览者更好的视觉冲击，同时让网站程序员更好的与HTML语言“沟通”。虽然现在HTML5还没有完善，但是对于以后的网站建设拥有更好的发展。教学重点认识HTML5 掌握HTML5与HTML4的区别 掌握HTML5新增的元素和废除的元素 熟悉新增的属性和废除的属性 掌握创建简单的HTML5页面内容大纲9.1 认识HTML59.2 HTML5与HTML4的区别9.2.1 HTML5的语法变化9.2.2 HTML5中的标记方法9.2.3 HTML5语法中的3个要点9.2.4

15、HTML5与HTML4在搜索引擎优化的对比9.3 HTML5新增的元素和废除元素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的结构授课时间80分钟课时2教学内容在HTML5的新特性中，新增的结构元素主要功能就是解决之前在HTML4中Div漫天飞舞的情况，增强网页内容的语义性，这对搜索引擎而言，将更好识别和组织索引内容。合理地使用这种结构元素，

16、将极大地提高搜索结果的准确度和体验。新增的结构元素，从代码上看，很容易看出主要是消除Div，即增强语义，强调HTML的语义化。教学重点新增的主体结构元素 新增的非主体结构元素内容大纲10.1 新增的主体结构元素10.1.1 article元素10.1.2 section元素10.1.3 nav元素10.1.4 aside元素10.2 新增的非主体结构元素10.2.1 header元素10.2.2 header元素10.2.3 footer元素10.2.4 address元素10.3练习题第11讲课时内容HTML5开发实战授课时间80分钟课时2教学内容在过去的10年里，网页设计师使用 Flash

17、、JavaScript 或其他复杂的软件和技术来创建网站。现在可以使用HTML5实现交互式服务、单页UI、交互式游戏、复杂业务应用。凭借对标准驱动的移动应用开发的支持，以及各种强大特性，HTML5迎来了它的黄金时代。本章就来介绍HTML5开发实战。教学重点掌握HTML5 视频video掌握HTML5 音频Audio掌握HTML5 地理定位 掌握HTML5 画布canvas 掌握HTML5 SVG 内容大纲11.1 HTNL5视频video11.1.1 video概述11.1.2 在网页中添加视频文件11.1.3 链接不同的视频文件11.2 HTML5音频Audio11.2.1 Audio元素简

18、介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样式定义，可以将网页制

19、作得更加绚丽多彩。采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确地控制。用CSS不仅可以做出令浏览者赏心悦目的网页，还能给网页添加许多特效教学重点了解CSS简介 掌握CSS的使用 CSS的字体属性 颜色及背景属性 文本属性 边距与填充属性边框属性 定位属性 列表属性 光标属性 滤镜属性内容大纲12.1 认识CSS12.2 使用CSS12.2.1 CSS的基本语法12.2.2 添加CSS的方法12.3 字体属性12.3.1 字体font-family12.3.2 字号font-size12.3.3 字体风格font-style12.3.4 加粗字体font-wei

20、ght12.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.

21、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 外边距复合属性margi

22、n12.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 清除属性cle

23、ar12.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 阴影效果dropShad

24、ow12.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布局的入门知识和布局网页元素的实例技巧。教学重点表单标记插入表单对象 菜单和列表

25、 文本域标记 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.

26、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被划分成几个模块组，每个

27、模块组都有自己的规范。这样的好处是整个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.

28、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()14.6 过渡14.7 动画14.7.1 规则声明动画keyframes14.7.2 animat

29、ion使用动画14.8 用户界面14.8.1 box-sizing14.8.2 resize14.8.3 outline-offset14.9 实例应用14.9.1鼠标放上去显示全部内容14.9.2 美观的图片排列14.10练习题第15讲课时内容JavaScript脚本基础授课时间80分钟课时2教学内容JavaScript语言是网页中广泛使用的一种脚本语言，使用JavaScript可以使网页产生动态效果，JavaScript以其小巧简单而备受用户的欢迎。本章将介绍JavaScript的基本概念、语言特点、基本语法、常见的事件和常见内部对象的使用。教学重点了解JavaScript概念 了解Jav

30、aScript特点 掌握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 onMo

31、useOut事件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制作时间特效、图像特效、窗口特效、鼠标特效和其他一些常见特效的方法。教学重点掌握时间特效的应用 掌握图

32、像特效的应用 掌握窗口特效的应用 掌握鼠标特效的应用 掌握其他特效的应用内容大纲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 禁止鼠标右击16.4.2 跟随鼠标指针移动的图像16.4.2 跟随鼠标指针移动的图像16.5 其他特效16.5.1 设置为首页和加入收藏夹16.5.2 浏览器状态栏显示信息1

33、6.5.3 进入网站的口令设置16.6练习题第17讲课时内容移动网页设计基础CSS3授课时间80分钟课时2教学内容Dreamweaver是一个可视化的网页设计和网站管理工具。它提供了强大的设计工具，在不用书写一行代码的情况下，就能够快速创建各种极具动态HTML特性的网页。Dreamweaver是完全可定制的，用户可以通过书写JavaScript代码为Dreamweaver创建新的行为和属性面板，以增强Dreamweaver本身的功能。教学重点了解Dreamweaver的基本操作界面 掌握在网页中使用文本 插入图像 插入多媒体 掌握链接的设置 网页的布局 掌握表单的使用 使用CSS样式表 使用行

34、为内容大纲17.1 Dreamweaver的操作界面17.2 在网页中使用文本17.2.1 插入文本17.2.2 设置文本属性17.2.3 插入特殊字符17.2.4 插入水平线17.3 插入图像17.3.1 在网页中插入图像17.3.2 设置图像属性17.3.3 使用图像编辑器17.3.4 插入鼠标经过图像17.4 插入多媒体17.4.1 插入Flash17.4.2 打开浏览器窗口17.4.3 插入Java Applet17.5 设置链接17.5.1 创建文字链接17.5.2 创建图像链接17.5.3 创建锚点链接17.6 布局网页17.6.1 使用表格17.6.2 使用DIV17.7 使用表

35、单17.7.1 插入表单17.7.2 插入文本域17.7.3 插入单选按钮和复选框17.7.4 插入列表和菜单17.7.5 插入跳转菜单17.7.6 插入按钮17.8 使用CSS样式表17.8.1 CSS的基本概念17.8.1 CSS的基本概念17.8.2 建立标签样式17.8.3 建立类样式17.8.4 建立复合内容样式17.8.5 应用CSS固定字体大小17.9 使用行为17.9.1 行为的基本知识17.9.2 使用行为制作特效17.10 在网页中添加脚本17.11练习题第18讲课时内容个人博客网站布局授课时间80分钟课时2教学内容博客，即Blog是继E-mail、BBS、即时通信（IM）

36、之后出现的全新的网络交流方式。使用者可以利用博客自由地表达自己的想法，发布自己的心得。教学重点熟悉博客网站 掌握博客网站主页布局设计的方法 掌握博客网站主页具体制作过程内容大纲18.1 博客网站概述18.2 博客网站主页布局设计18.3 博客网站主页布局制作过程18.3.1 导入外部CSS18.3.2 制作网页头部分18.3.3 制作网页内容部分18.3.4 制作页面页脚部分18.4练习题第19讲课时内容公司宣传网站的布局授课时间80分钟课时2教学内容随着网络的普及，企业拥有自己的网站已是必然的趋势。企业网站作为电子商务时代企业对外的窗口，起着提高企业知名度，展示和提升企业形象、查询企业产品信息，提供售后服务等重要作用，因而越来越受到企业的重视。教学重点熟悉公司宣传网站排版构架的方法 掌握公司宣传网站各部分设计要点 内容大纲19.1 企业网站设计分析19.1.1 企业网站内容设计19.1.2 排版构架19.2 各部分设计19.2.1 Logo与顶部导航19.2.2 左侧导航19.2.3 主体内容19.2.4 制作搜索部分19.2.5 制作公司新闻19.2.6 制作联系我们19.2.7 底板版权信息19.3练习题