HTML-CSS-JavaScript教学教案

《HTMLCSSJavaScript网页制作》教学教案第1讲课时内容HTML基础授课时间80分钟课时2教学内容在当今社会中，网络已成为人们生活的一部分，网页设计技术已成为学习计算机的重要内容之一。目前大部分网页都采用可视化网页编辑软件来制作的，但是无论采用哪一种网页编辑软件，最后都是将所设计的网页转化为HTML。HTML是搭建网页的基础语言，如果不了解HTML，就不能灵活地实现想要的网页效果。本章就来介绍HTML的基本概念和编写方法以及浏览HTML文件的方法，使读者对HTML有个初步的了解，从而为后面的学习打下基础。教学重点了解HTML的基本概念掌握HTML文件的编写方法掌握使用浏览器浏览HTML文件内容大纲1.1HTML的基础概念1.1.1HTML简介1.1.2HTML文件的基本结构1.1.3认识HTML标记1.2HTML文件的编写方法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个部分：一个由html元素定义的文档版本信息，一个由head定义各项声明的文档头部和一个由body定义的文档主体部分。head作为各种声明信息的包含元素出现在文档的顶端，并且要先于body出现。而body用来显示文档主体内容。文字是网页中最基本的信息载体，文字通过不同的排版方式、不同的设计风格排列在网页上，提供了丰富的信息。文字的控制与布局在网页设计中占了很大比例，因此掌握好文字的使用，对于网页制作来说是最基本的。本章就来讲解这些基本标记的使用，这些都是一个完整的网页必不可少的。教学重点掌握HTML头部标记掌握标题标记掌握元信息标记掌握页面的主体标记掌握页面注释标记内容大纲2.1HTML头部标记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讲课时内容建立超链接授课时间80分钟课时2教学内容超级链接是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-mail3.4.3链接到FTP3.4.4链接到Telnet3.4.5下载文件3.5练习题第4讲课时内容使用图像授课时间80分钟课时2教学内容图像是网页中不可缺少的元素，巧妙地在网页中使用图像可以为网页增色不少。网页美化最简单、最直接的方法就是在网页上添加图像，图像不但使网页更加美观、形象和生动，而且使网页中的内容更加丰富多彩。利用图像创建精美网页，能够给网页增加生机，从而吸引更多的浏览者。教学重点了解图像的格式掌握插入图像的方法掌握图像的超链接内容大纲4.1图像的格式4.2插入图像4.2.1插入图像标记img4.2.2图像的源文件src4.2.3图像的提示文字alt4.2.4图像的宽度和高度width、heught4.3图像的超链接4.3.1图像的超链接4.3.2图像热区链接4.4练习题第5讲课时内容使用列表授课时间80分钟课时2教学内容列表是一种非常有用的数据排列方式，它以列表的形式来显示数据。HTML中共有3种列表，分别是无序列表、有序列表和定义列表。无序列表的所有列表项目之间没有先后顺序之分。有序列表的列表项目是有先后顺序之分的。定义列表是一组带有特殊含义的列表，一个列表项目里包含条件和说明两部分。教学重点了解列表标记概述掌握有序列表掌握无序列表掌握定义列表掌握菜单列表内容大纲5.1认识列表标记5.2有序列表5.2.1游戏列表ol5.2.2有序列表的序号类型type5.2.3有序列表的起始数值start5.4练习题第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表格边框颜色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.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表格的表首标记thead6.7.2表格的表主体标记tbody6.7.3表格的表尾标记tfoot6.8练习题第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.5id标记7.6创建表单实例7.7练习题第8讲课时内容添加多媒体授课时间80分钟课时2教学内容教学内容：在网页中，除了之前讲到的可以插入文本和图像外，还可以插入动画、声音、视频等媒体元素，如滚动效果、Flash及Midi声音文件等。通过对本章的学习，读者可以学习到多媒体文件的使用，从而丰富网页的效果，吸引浏览者的注意。教学重点掌握设置滚动效果掌握插入多媒体文件内容大纲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是一种网络标准，相比现有的HTML4.01和XHTML1.0，可以实现更强的页面表现性能，同时充分调用本地的资源，实现不输于app的功能效果。HTML5带给了浏览者更好的视觉冲击，同时让网站程序员更好的与HTML语言“沟通”。虽然现在HTML5还没有完善，但是对于以后的网站建设拥有更好的发展。教学重点认识HTML5掌握HTML5与HTML4的区别掌握HTML5新增的元素和废除的元素熟悉新增的属性和废除的属性掌握创建简单的HTML5页面内容大纲9.1认识HTML59.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的结构授课时间80分钟课时2教学内容在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开发实战授课时间80分钟课时2教学内容在过去的10年里，网页设计师使用Flash、JavaScript或其他复杂的软件和技术来创建网站。现在可以使用HTML5实现交互式服务、单页UI、交互式游戏、复杂业务应用。凭借对标准驱动的移动应用开发的支持，以及各种强大特性，HTML5迎来了它的黄金时代。本章就来介绍HTML5开发实战。教学重点掌握HTML5视频video掌握HTML5音频Audio掌握HTML5地理定位掌握HTML5画布canvas掌握HTML5SVG内容大纲11.1HTNL5视频video11.1.1video概述11.1.2在网页中添加视频文件11.1.3链接不同的视频文件11.2HTML5音频Audio11.2.1Audio元素简介11.2.2隐藏audio播放器11.2.3使用audio元素