HTML基础实例教学教材.doc

《HTML基础实例教学教材.doc》由会员分享，可在线阅读，更多相关《HTML基础实例教学教材.doc（94页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、-_一、一、HTML 部分部分一、实例名称：一、实例名称：认识认识 HTML 的基本标签和属性的基本标签和属性1、 实例目标及知识点实例目标及知识点通过制作简单的 HTML 页面，对 HTML 的标签和属性有个宏观的认识，激发学生对 HTML 语言的兴趣。运用了 body 的属性：text、background、alink 、 leftmargin、 topmargin熟悉这些属性的用途和设置方法。2、 实例功能说明实例功能说明做出符合以下要求的网页：(1)将网页标题设置为：欢迎来到我的个人网页；(2)将网页背景设置为指定图片：(3)将网页的文本颜色设置为：#660033(4)将网页的左边距设

2、置为：10px ,上边距设置为：400px ;(5)将网页以文件名为：例 1-2.html 保存。实验结果参照页面美化效果，如下图：图 1-1南雄市中等职业学校计算机学科校本教材23、实例操作步骤、实例操作步骤(1)在 HTML 的编辑页面输入源码。(2)将此 HTML 代码以.html 或者.htm 作为扩展名，保存到相应文件夹下，例如：保存为例 1-2.html 在 d 盘根目录下；(3)将背景图片 tp.jpg 放到相对路径为 images 的文件夹下，如果图片比页面小，图片会自动重复；(4)用网页浏览器打开此 HTML 页面，即可以看到此页的页面效果。4 4、实例参考源码、实例参考源码

3、源码源码 1.11.1 欢迎来到我的个人网页我的第一个 HTML 页面5、实例思考与扩展、实例思考与扩展（1）页面的汉字“我的第一个 HTML 页面”在网页中居左或居右怎么 设置？ （2）背景如果不用图片，用一种颜色，应怎样修改源码？二、实例名称：文字的排版二、实例名称：文字的排版1、 实例目标及知识点实例目标及知识点综合练习 HTML 网页的设计。注意代码中对、等标签的运用，熟悉并掌握文字排版所涉及的所有标签。-_2、实例功能说明、实例功能说明做出符合要求的静态 HTML 网页，实验结果参照如下图：图 1-23、实例操作步骤、实例操作步骤(1)在 HTML 的编辑页面输入代码。(2)将此 H

4、TML 代码以.html 或者.htm 作为扩展名，保存到相应文件夹下，例如：保存为例 2-1.html 在 d 盘根目录下；(3)用网页浏览器打开此 HTML 页面，即可以看到此页的页面效果。3 3、 实例参考源码实例参考源码源码源码 1.21.2 南雄市中等职业学校计算机学科校本教材4欢迎来到我的个人网页要在一段里换行请使用br 这个 Tag。这是 预设(preformatted)文本. 在 pre 这个 tag 里的文本 保留 空格和 分行。用 hr 这个 Tag 可以在 HTML 文件里加一条横线。用 hr 这个 Tag 可以在 HTML 文件里加一条横线。代码注释是不会显示在网页里的

5、。北京网页设计基础路 1000 号 老师 邮编:1000005、实例思考与扩展、实例思考与扩展（1）页面的背景设置成图片应该如何做？ （2）字体的大小、颜色等属性如何更改？-_三、实例名称：文字的美化三、实例名称：文字的美化1、 实例目标及知识点实例目标及知识点利用文字美化所讲到的标签，综合练习 HTML 网页的设计。熟悉并掌握文字美化所涉及的标签。如：、等。2、 实例功能说明实例功能说明按照以下要求完成 HTML 页面效果的制作。(1)将网页标题设置为：“字体设置” 。(2)将文字“标题一”样式设置为：标题一，居中对齐。(3)将文字“具体内容一”设置为：隶书，18px，颜色为红色。(4)将文

6、字“具体内容二”设置为：16px，粗体，斜体。(5)利用字体美化的标签实现删除、下划线、上标、下标等功能。实验结果参照如下图：南雄市中等职业学校计算机学科校本教材6图 1-33、实例操作步骤、实例操作步骤(1)在 HTML 的编辑页面输入代码，注意此段代码中对、等标签的运用。(2)将此 HTML 代码以.html 或者.htm 作为扩展名，保存到相应文件夹下，例如：保存为例 2-2.html 在 d 盘根目录下；(3)用网页浏览器打开此 HTML 页面，即可以看到此页的页面效果。4、实例参考源码、实例参考源码源码源码 1.31.3-_字体设置标题一 具体内容一具体内容二 芙蓉姐姐这个词当中划线

7、表示删除。 想唱就唱这个词下划线插入。 X2其中的 2 是下标 X2其中的 2 是上标 好好学习，天天向上。这句话缩进表示引用call getOrders用 code 显示计算机代码，code 里显示的字符是等宽字符。5、实例思考与扩展、实例思考与扩展（1）页面的背景设置成图片应该如何做？（2）还有哪些标签可以实现文字美化的功能，总结并综合运用它们在网 页设计中。 四、实例名称：四、实例名称：HTML 列表列表(list)实例实例1、 实例目标及知识点实例目标及知识点分别实现嵌套的列表和用多种类型排序的列表。利用文字美化的有关列表的标签，例如：、等标签。练 习 HTML 网页的设计。熟悉并掌握

8、文字美化列表所涉及的标签。 2、实例功能说明、实例功能说明做出符合要求的静态 HTML 网页，实验结果参照如下图：南雄市中等职业学校计算机学科校本教材8图 1-43、实例操作步骤、实例操作步骤(1)在 HTML 的编辑页面输入代码，将此 HTML 代码以.html 或者.htm 作为扩展名，保存到相应文件夹下，例如：保存为例 2-3.html 在 d 盘根目录下；(2)用网页浏览器打开此 HTML 页面，即可以看到此页的页面效果。-_4、 实例参考源码实例参考源码源码源码 1.41.4字体设置嵌套 2 层的列表：动物两栖动物哺乳动物人猩猩鱼类植物排序列表，不设 Type 属性：网页课程网页代码

9、魔兽世界排序列表，Type 属性设为 A：网页课程网页代码魔兽世界南雄市中等职业学校计算机学科校本教材10排序列表，Type 属性设为 a：网页课程网页代码魔兽世界排序列表，Type 属性设为 I：网页课程网页代码魔兽世界排序列表，Type 属性设为 i：网页课程网页代码魔兽世界5、实例思考与扩展、实例思考与扩展 （1）思考列表的标签在什么时候需要用到？如果改成抽屉下拉的话需 要用到什么标签？要怎么做？五、实例名称：插入图像五、实例名称：插入图像1、 实例目标及知识点实例目标及知识点综合练习 HTML 网页的设计。熟悉并掌握插入图片所涉及的标签，例如：src、 alt 、 border、ali

10、gn 等。2、 实例功能说明实例功能说明-_按照以下要求完成 HTML 页面效果的制作。（1）将网页标题设置为：“CAI 是什么？” 。（2）将网页标题格式设置为：下划线。（3）将网页第一段文字格式设置为：斜体，颜色为红色。（4）将网页中的图片设置为：左对齐。（5）将网页最后一段不要排在图片右边，排在图片的下面。实验结果参照如下图：图 1-53、实例操作步骤、实例操作步骤(1)在 HTML 的编辑页面输入代码，将此 HTML 代码以.html 或者.htm 作为扩展名，保存到相应文件夹下，例如：保存为例 2-4.html 在 d 盘根目录下；(2)将此网页所要插入的图片 CAI.jpg 放到相

11、对路径为 images 的文件夹下；(3)用网页浏览器打开此 HTML 页面，即可以看到此页的页面效果。南雄市中等职业学校计算机学科校本教材124、实例参考源码、实例参考源码源码源码 1.51.5插入图像CAI 是什么？CAI 是计算机辅助教学 (Computer Assisted Instructing)的英文名称首字母缩写其含义就是把自己的教学想法，包括教学目的，内容，实现教学活动 的策略，教学的顺序，控制方法等，用计算机程序进行描述，并存入计算 机，经过调试成为可以运行的程序由于计算机有着存储信息，处理信息， 工作自动化等功能因此，CAI 课件可以将大容量的信息非顺序地呈现，可以选择学习

12、内 容和掌握学习进度，实现因人施教的原则和及时反馈信息原则等特点集于 一身，并因之区别于其他媒体教学5、实例思考与扩展、实例思考与扩展（1）页面的背景设置成图片应该如何做？六、实例名称：几种超链接的综合应用六、实例名称：几种超链接的综合应用1、 实例目标及知识点实例目标及知识点综合运用本章所讲到的关于链接的知识，进一步熟悉多种关于链接的 概念。能在今后的 html 页面开发中熟练使用链接。-_涉及到的标签包括：2、 实例功能说明实例功能说明在同一个 html 页面中，做多个链接，分别符合以下要求：（1）用相对路径和绝对路径两种方法建立超链接网页；（2）运用超链接的 title 属性：（3）将图

13、片作为一个超链接；（4）在新窗口打开一个链接;（5）链接到一个邮箱地址。实验结果参照如下图：图 1-6注意此实验中关于设定 title 属性的结果，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。点击写信给新浪的链接后，结果如图：南雄市中等职业学校计算机学科校本教材14图 1-73、实例操作步骤、实例操作步骤(1)在 HTML 的编辑页面输入代码，将此 HTML 代码以.html 或者.htm 作为扩展名，保存到相应文件夹下，例如：保存为例 3-1.html 在 d 盘根目录下；(2)将图片 smile.jpg 放到相对路径为 images 的文件夹下，将html0301.html 文

14、件放到相对路径为 html 的文件夹下；(3)用网页浏览器打开此 HTML 页面，点击相应链接，即可以看到此页的页面效果。4、实例参考源码、实例参考源码源码源码 1.61.6这是一个相对路径的链接-_这是一个绝对路径的链接你可以将一张图片作为一个链接，点击这个图片。这个邮箱地址链接写了 to, cc, bcc, subject, body 的内容： 写信给新浪注:空格请用%20 表示。5、实例思考与扩展、实例思考与扩展（1）对相对路径和绝对路径有清晰的认识，举例说明什么是相对路径， 什么是绝对路径。 （2）思考超链接的字体在点击前，点击后的颜色如何设置？七、实例名称：在七、实例名称：在 HTM

15、L 文件里跳转文件里跳转1、 实例目标及知识点实例目标及知识点南雄市中等职业学校计算机学科校本教材16在同一个 html 页面中，使用 name 属性，可以跳转到此页面的指定部位。掌握关于在同一个 HTML 页面里实现跳转的超链接处理方法2、实例功能说明、实例功能说明实验结果如下图：图 1-8点击参见第六章链接后，网页跳转的页面如下图所示： -_图 1-93、实例操作步骤、实例操作步骤(1)在 HTML 的编辑页面输入代码，将此 HTML 代码以.html 或者.htm 作为扩展名，保存到相应文件夹下，例如：保存为例 3-2.html 在 d 盘根目录下；(2)用网页浏览器打开此 HTML 页

16、面，点击链接，即可以看到此页的页面效果。4、实例参考源码、实例参考源码南雄市中等职业学校计算机学科校本教材18源码源码 1.71.7站内链接示例参见第六章第 1 章 这是网页设计基础- 网页教程与代码的中文站点。第 2 章 这是网页设计基础- 网页教程与代码的中文站点。第 3 章 这是网页设计基础- 网页教程与代码的中文站点。第 4 章 这是网页设计基础- 网页教程与代码的中文站点。第 5 章 这是网页设计基础- 网页教程与代码的中文站点。第 6 章 这是网页设计基础- 网页教程与代码的中文站点。第 7 章 这是网页设计基础- 网页教程与代码的中文站点。-_第 8 章 这是网页设计基础- 网页

17、教程与代码的中文站点。第 9 章 这是网页设计基础- 网页教程与代码的中文站点。第 10 章 这是网页设计基础- 网页教程与代码的中文站点。第 11 章 这是网页设计基础- 网页教程与代码的中文站点。第 12 章 这是网页设计基础- 网页教程与代码的中文站点。第 13 章 这是网页设计基础- 网页教程与代码的中文站点。第 14 章 这是网页设计基础- 网页教程与代码的中文站点。第 15 章 这是网页设计基础- 网页教程与代码的中文站点。第 16 章 这是网页设计基础- 网页教程与代码的中文站点。第 17 章 这是网页设计基础- 网页教程与代码的中文站点。5、实例思考与扩展、实例思考与扩展（1）

18、总结在同一页的跳转链接和在不同页的跳转链接的区别。南雄市中等职业学校计算机学科校本教材20八、实例名称：运用八、实例名称：运用 border 属性对表格进行修饰属性对表格进行修饰1、 实例目标及知识点实例目标及知识点在同一个 html 页面中，做多个表格，分别把表格的边框设为0、1、15，认识 border 属性对表格的影响，达到能够熟练运用 border 属性对表格进行修饰。2、实例功能说明、实例功能说明实验结果如下图：-_图 2-03、实例操作步骤、实例操作步骤(1)在 HTML 的编辑页面输入代码，将此 HTML 代码以.html 或者.htm 作为扩展名，保存到相应文件夹下，例如：保存

19、为例 4-1.html 在 d 盘根目录下；(2)用网页浏览器打开此 HTML 页面，点击相应链接，即可以看到此页的页面效果。4、实例参考源码、实例参考源码源码源码 1.81.8运用 border 属性对表格进行修饰缺省情况下，表格没有边界。100200300400500600南雄市中等职业学校计算机学科校本教材22表格 Border 设为 0，也不显示边界：100200300400500600表格的边界值设为 1： 第一行第二行表格的边界值设为 15，边界更粗： 第一行第二行-_5、实例思考与扩展、实例思考与扩展（1）对表格进行修饰，做出不同边框的表格效果。（2）边框可否设成不同的美化效果？

20、如果可以，如何设置？九、实例名称：运用多种属性分别对多个表格进行修饰九、实例名称：运用多种属性分别对多个表格进行修饰1、 实例目标及知识点实例目标及知识点学会设置表格的标题和表头，认识 colpsan 属性和 rowspan 属性对表格的影响，达到能够熟练运用这些属性对表格进行修饰。2、 实例功能说明实例功能说明在同一个 html 页面中，做多个表格，分别实现以下要求：（1）做两个有标题的表格，要求这两个表格的表头分别是水平方向和垂直方向；（2）设置包含多列的单元格：（3）设置包含多行的单元格；实验结果如下图：南雄市中等职业学校计算机学科校本教材24图 2-13、实例操作步骤、实例操作步骤(1

21、)在 HTML 的编辑页面输入代码，将此 HTML 代码以.html 或者.htm 作为扩展名，保存到相应文件夹下，例如：保存为例 4-3.html 在 d 盘根目录下；(2)用网页浏览器打开此 HTML 页面，点击相应链接，即可以看到此页的页面效果。4、实例参考源码、实例参考源码源码源码 2.02.0联系表联系表姓名性别出生年月住址-_籍贯专业联系电话5、实例思考与扩展、实例思考与扩展（1）思考如何才能对表格的不同格设置颜色或者图片背景？ （2）举例说明在网页设计的何种情况需要用到此种效果。十、实例名称：运用多种属性对表格进行修饰十、实例名称：运用多种属性对表格进行修饰1、 实例目标及知识点

22、实例目标及知识点达到能够灵活熟练运用多种属性对表格进行修饰。例如：width、 height、 border、cellpadding、 cellspacing 等2、 实例功能说明实例功能说明在同一个 html 页面中，做一个表格，分别实现以下要求：（1）设置表格为 3 行 3 列；（2）表格宽度为：300 像素；高度为：100 像素；（3）设置表格的三个表头：表头一，表头二，表头三；表头一跨三列，顶端对齐；（4）设置表格边距为：0；间距为：0;（5）设置表格边框为：红色。实验结果如下图：南雄市中等职业学校计算机学科校本教材26图 2-23、实例操作步骤、实例操作步骤(1)在 HTML 的编辑

23、页面输入代码，将此 HTML 代码以.html 或者.htm 作为扩展名，保存到相应文件夹下，例如：保存为例 4-4.html 在 d 盘根目录下；(2)用网页浏览器打开此 HTML 页面，点击相应链接，即可以看到此页的页面效果。4、实例参考源码、实例参考源码源码源码 2.12.1表格表 头一-_表头二表头三5、实例思考与扩展、实例思考与扩展 （1）如何用表格对网页布局？可以表格中嵌套表格吗？什么情况需要 这么做？这种布局格式有什么优缺点呢？十一、实例名称：十一、实例名称： 嵌套分割框架嵌套分割框架1、 实例目标及知识点实例目标及知识点熟练掌握框架的基本结构和分割方式，为以后网页的制作打下良好

24、的基础。掌握框架的标签、等2、 实例功能说明实例功能说明运用本章所讲到的框架的知识按照以下要求制作 html 页面：（1）窗口水平方向上分割成两部分，分别占：30%和 70%；（2）右边框架垂直方向上分别占：20%和 80%；（3）左边框架的内容是嵌入的，是 left.htm 网页的内容；（4）在 left.htm 中分别插入图片 1.jpg、2.jpg 和 3.jpg，并且要图片居中显示;南雄市中等职业学校计算机学科校本教材28（5）右边上部分框架内容嵌入的是 right1.htm 网页的内容；（6）right1.htm 网页中“阳光总在风雨后”的文字大小为“7 号” ，颜色为“蓝色” ，字

25、体为“华文新魏” ，加粗显示；（7）右边下部分框架内容嵌入的是 right2.htm 的内容；（8）right2.htm 网页中文字大小为“4 号” ，颜色为“蓝色” ，字体为 “楷体” 。实验结果如下图：图 2-33、实例操作步骤、实例操作步骤(1)在 HTML 的编辑页面输入代码,将此 HTML 代码以 left.htm 命名，保存到相应文件夹下，例如：保存在 d 盘根目录下；-_(2)新建 HTML 页，在 HTML 的编辑页面输入代码,将此 HTML代码以 right1.htm 命名，保存到相应文件夹下，例如：保存在d 盘根目录下；(3)新建 HTML 页，在 HTML 的编辑页面输入

26、代码,将此 HTML代码以 right2.htm 命名，保存到相应文件夹下，例如：保存在d 盘根目录下；(4)新建 HTML 页，在 HTML 的编辑页面输入代码,将此 HTML代码以“例 5-1.htm”命名，保存到相应文件夹下，例如：保存在 d 盘根目录下；(5)用网页浏览器打开“例 5-1.htm”页面，即可以看到此页的页面效果。4、实例参考源码、实例参考源码源码源码 2.2.12.2.1 left.htmlleft.htmlsmile源码源码 2.2.22.2.2 right1.htmlright1.html阳光总在风雨后阳光总在风雨后 源码源码 2.2.32.2.3 right2.h

27、tmlright2.html歌词人生路上甜苦和喜忧 愿意与你分担所有 难免曾经跌到和等候 要勇敢的抬头 谁愿藏躲在避风的港口 宁有波涛汹涌的自由 愿是你心中灯塔的守候 在迷雾中让你看透 阳光总在风雨后 乌云上有晴空 珍惜所有的感动-_每一份希望在你手中 阳光总在风雨后 请相信有彩虹 风风雨雨都接受 我一直会在你的左右源码源码 2.2.42.2.4 例例 5-1.htm5-1.htm嵌套框架5、实例思考与扩展、实例思考与扩展（1）对比用框架对网页布局，和用表格对网页布局有什么不同。（2）可以实现点击一个框架里的链接，对另一个框架里的页面影响吗？ 怎么实现？十二、实例名称：十二、实例名称：用框架导

28、航用框架导航1、 实例目标及知识点实例目标及知识点熟练掌握框架的基本结构和分割方式，能够运用框架实现导航的功能。南雄市中等职业学校计算机学科校本教材322、 实例功能说明实例功能说明运用框架的知识按照以下要求制作含有框架的 html 页面：（1）窗口水平方向上分割成两部分，分别占：20%和 80%；（2）上部分框架的内容是嵌入的是 top.htm 网页的内容；（3）top.htm 网页中“精彩呈现”文字的大小为 7，字体为“华文行楷” ，颜色为“绿色” ；（4）下部分框架在垂直方向分割成两部分，分别占 30%和 70%，其中右边部分框架的名称命名为 right;（5）下部分框架的左边部分嵌入的

29、是 left.htm 网页的内容；（6）left.htm 网页中文字的字体为“华文新魏” ，大小为 5，颜色为“绿色” ；并且这些文字均要分别进行超链接；其中“走进科学”超级链接到 right2-1.htm， “音乐赏析”超级链接到 right2-2.htm,它们链接后的内容均显示在下部分框架的右边部分框架中。（7）right2-1.htm 和 right2-2.htm 网页中标题文字居中显示，字体为“楷体” ，大小为，颜色为“绿色” ，加粗显示；正文字体也为“楷体” ，大小为，颜色为“绿色” ；实验结果如下图：-_图 2-4点击框架左边的链接可以使框架右边变换相应内容。3、实例操作步骤、实例

30、操作步骤(1)在 HTML 的编辑页面输入代码,将此 HTML 代码以 top.htm 命名，保存到相应文件夹下，例如：保存在 d 盘根目录下；(2)新建 HTML 页，在 HTML 的编辑页面输入代码,将此 HTML代码以 left_5-2.htm 命名，保存到相应文件夹下，例如：保存在 d 盘根目录下；(3)新建 HTML 页，在 HTML 的编辑页面输入代码,将此 HTML代码以 right_5-2-1.html 命名，保存到相应文件夹下，例如：南雄市中等职业学校计算机学科校本教材34保存在 d 盘根目录下；(4)依照文件 right_5-2-1.html 的标准，做多个文件分别为文件l

31、eft_5-2.html 文件中目录所对应的链接。(5)新建 HTML 页，在 HTML 的编辑页面输入代码,将此 HTML代码以“例 5-2.html”命名，保存到相应文件夹下，例如：保存在 d 盘根目录下；(6)用网页浏览器打开“例 5-2.html”页面，即可以看到此页的页面效果。4、实例参考源码、实例参考源码源码源码 2.3.12.3.1 top.htmtop.htm精彩呈现精彩呈现 源码源码 2.3.22.3.2 left_5-2.htmleft_5-2.htm目录走进科学音乐赏析电脑天地健康指南体育世界心情有约南雄市中等职业学校计算机学科校本教材36源码源码 2.3.32.3.3

32、right_5-2-1.htmlright_5-2-1.html走进科学走进科学主持人：现在我们看到的，这是一条体长超过四米的一条网蟒，它是所有 蟒类当中体型最大的，在野外甚至能与鳄鱼、鹿等大动物搏斗，并且把它 们顺利给吞下去变成自己的腹中大餐。但是，我们看如此凶猛的一个动物， 过一会，一场灭顶之灾就在等着它了. 宁环是武汉动物园的蟒蛇饲养员，这天她像往常一样打开熟悉的两栖馆蟒 蛇展厅的大门，开始一天的工作。她忽然觉得有些异样：往常一开门就盘 踞在树梢咝咝做响的最大的一条蟒蛇，却突然不见了踪影。四处寻找之下， 宁环发现了蜷缩在角落里的巨蟒。她小心翼翼的靠近巨蟒，想把它放回树 上。就在这个时候，

33、巨蟒的一个动作让她大吃一惊。 饲养员宁环：那个蟒蛇吐痰的时候，就像我们人吐痰一样，猛地一咳，咯！蟒蛇竟然会吐痰？这种以前听都没听过的事情，今天竟然发生在眼前。可 是巨蟒又为什么会吐痰呢？难道是它生病了么？源码源码 2.2.42.2.4 例例 5-2.htm5-2.htm框架导航-_5、实例思考与扩展、实例思考与扩展（1）如果把布局变换成上下两部分，上部分是菜单链接，怎么做？（2）是否可以框架布局内再嵌套框架布局？十三、实例名称：十三、实例名称： 设计用户登记表单设计用户登记表单1、 实例目标及知识点实例目标及知识点熟练掌握基本表单的设计，为以后网页的制作打下良好的基础。表单设计到的标签主要有2

34、、 实例功能说明实例功能说明运用表单的知识按照以下要求制作 html 页面：(1)表单包含于一个一行一列的表格之中，表格的边框为 3，宽度为 1000,高度为 600,边框颜色为“#336699”,表格居中显示；(2)“用户登记”居中显示，字体大小为 7，颜色为“绿色” ，字体为“幼圆” ；(3)“亲爱的用户便于我们及时与你联系。 ”居中显示；(4)性别后的下拉菜单选项依次为“男” 、 “女”;(5)文化程度后的下拉菜单选项依次为“小学” 、 “初中” 、 “高中” 、“大学” 、 “研究生” ；(6)职业后的下拉菜单选项依次为“教育业” 、 “商业” 、 “公务员” 、“医疗” 、 “法律”

35、 、 “军人” 、 “在读学生” ；实验结果如下图：南雄市中等职业学校计算机学科校本教材38图 2-53、实例操作步骤、实例操作步骤(1)在 HTML 的编辑页面输入代码，将此 HTML 代码以后缀 html或者 htm 命名，保存到相应文件夹下，例如：命名为 例 6-1.htm 保存在 d 盘根目录下；(2)用网页浏览器打开“例 6-1.htm”页面，即可以看到此页的页面效果。4、实例参考源码、实例参考源码源码源码 2.42.4 用户登记-_用户登记亲爱的用户，欢迎您访问我们的网站，请填写您的个人信息， 便于我们及时与您联系姓名：年龄：性别：男女南雄市中等职业学校计算机学科校本教材40文化程

36、度：小学初中高中大学研究生职业：教育业商业公务员医疗法律军人在读学生Email:您的爱好：-_电影运动音乐跳舞阅读上网南雄市中等职业学校计算机学科校本教材42聊天交友5、实例思考与扩展、实例思考与扩展 （1）思考表单都有哪些属性？如果要做页面验证，怎么做？表单提交 到另一页，怎么做？表单还可以实现那些功能？ -_十四、实例名称：十四、实例名称： 用图片实现表单的提交用图片实现表单的提交1、 实例目标及知识点实例目标及知识点熟练灵活掌握表单的设计，为以后网页的制作打下良好的基础。掌握文本输入框、密码输入框和多行文本输入框的写法。以及如何用 图片代替按钮进行表单提交。 2、 实例功能说明实例功能说

37、明运用表单的知识按照以下要求制作 html 页面：(1)此表单中要求含有单行文本输入框；(2)此表单中要求含有密码输入框；(3)此表单中要求含有文本多行输入框；(4)要求用图片实现表单的提交。实验结果如下图：图 2-63、实例操作步骤、实例操作步骤(1)在 HTML 的编辑页面输入代码，将图片 go.gif 放到相对路径为 images 的文件夹下；(2)将此 HTML 代码以后缀 html 或者 htm 命名，保存到相应文件夹下，例如：命名为 例 6-2.html 保存在 d 盘根目录下；南雄市中等职业学校计算机学科校本教材44(3)用网页浏览器打开“例 6-2.html”页面，即可以看到此

38、页的页面效果。4、实例参考源码、实例参考源码源码源码 2.52.5用图片实现表单的提交 请输入你的姓名：请输入你的密码：请提宝贵意见：5、实例思考与扩展、实例思考与扩展（1）设计一个其它形式的页面登陆页，且思考如何将页面登陆页设计美 观一些？思考在表单提交到的那一页如果讲此页的数据取到？十五、实例名称：十五、实例名称： 滚动字幕和嵌入多媒体文件综合示例滚动字幕和嵌入多媒体文件综合示例-_1、 实例目标及知识点实例目标及知识点熟练掌握滚动字幕及在网页中嵌入音频、视频以及 Flash 等多媒体文件的方法，是网页的内容显得更加丰富多彩，从而实现多媒体网页效果。2、 实例功能说明实例功能说明运用表单的

39、知识按照以下要求制作 html 页面：(1)制作滚动字幕：“欢迎光临我的个人网站！” ；(2)滚动字幕方向向右，滚动方式为来回滚动；(3)滚动循环 3 次停止；(4)为滚动字幕设置背景颜色黄色;(5)鼠标移动到滚动字幕上，文字停止滚动；鼠标移开，滚动文字继续滚动。(6)为此网页设置背景音乐，背景音乐循环播放 3 次；(7)在网页中插入视频文件;(8)在网页中插入 Flash 动画。实验结果如下图：南雄市中等职业学校计算机学科校本教材46图 2-73、实例操作步骤、实例操作步骤(1)在 HTML 的编辑页面输入代码，将此 HTML 代码以后缀 html 或者htm 命名，保存到相应文件夹下，例如

40、：命名为 例 7-1.htm 保存在d 盘根目录下；(2)将文件 Windows XP.wav、clock.avi 和 empty.swf 放到和刚才保存的htm 文件相同的文件夹下，例如：均保存到 d 盘根目录下；(3)确保您的电脑上安装了音频、视频以及 flash 文件的播放软件；(4)用网页浏览器打开“例 7-1.htm”页面，即可以看到并听到此页的页面效果。-_4、实例参考源码、实例参考源码源码源码 2.62.6滚动字幕和嵌入多媒体文件综合示例欢迎光临我的个人网站！5、实例思考与扩展、实例思考与扩展（1）想让动画滚动该怎么做？ （2）如何让网页自动放背景音乐？二、二、CSS 部分部分一

41、、实例名称：一、实例名称： CSS 基础知识综合示例基础知识综合示例1、 实例目标及知识点实例目标及知识点结合以上所示的七个 CSS 基础知识的知识点，分别作出小例子。做到能够灵活熟练地掌握 CSS 基本样式的写法。知道 CSS 设计一共要用到多少种方法。灵活掌握每一种写法。南雄市中等职业学校计算机学科校本教材482、 实例功能说明实例功能说明运用 CSS 的基础知识按照以下要求制作 html 页面：(1)内嵌样式；(2)内部样式表；(3)外部样式表；(4)通用样式；(5)Tag Class 选择器；(6)关联选择器；(7)样式串联的顺序。实验结果如下图：内嵌式样式图 2.8-_内部样式表图

42、2.9外部样式表图 3.0通用样式图 3.1Tag Class 选择器图 3.2南雄市中等职业学校计算机学科校本教材50关联选择器图 3.3样式串联的顺序图 3.43、实例操作步骤、实例操作步骤(1)在 HTML 的编辑页面输入代码,将此 HTML 代码以后缀 html或者 htm 命名，保存到相应文件夹下，例如：命名为 例 8-1.htm 保存在 d 盘根目录下；(2)用网页浏览器打开“例 8-1.htm”页面，即可以看到此页的页面效果。(3)在 HTML 的编辑页面输入代码,将此 HTML 代码以后缀 html或者 htm 命名，保存到相应文件夹下，例如：命名为 例 8-2.htm 保存在

43、 d 盘根目录下；(4)用网页浏览器打开“例 8-2.htm”页面，即可以看到此页的页-_面效果。(5)在 HTML 的编辑页面输入代码,将此 HTML 代码以后缀 html或者 htm 命名，保存到相应文件夹下，例如：命名为 例 8-3.htm 保存在 d 盘根目录下；(6)新建 CSS 文件的编辑页面，在此编辑页面输入如下,将此文件保存为 home.css 在与文件 例 8-3.htm 相同目录下；(7)用网页浏览器打开“例 8-3.htm”页面，即可以看到此页的页面效果。(8)在 HTML 的编辑页面输入代码,将此 HTML 代码以后缀 html或者 htm 命名，保存到相应文件夹下，例

44、如：命名为 例 8-4.htm 保存在 d 盘根目录下；(9)用网页浏览器打开“例 8-4.htm”页面，即可以看到此页的页面效果。(10)在 HTML 的编辑页面输入代码,将此 HTML 代码以后缀 html或者 htm 命名，保存到相应文件夹下，例如：命名为 例 8-5.htm 保存在 d 盘根目录下；(11)用网页浏览器打开“例 8-5.htm”页面，即可以看到此页的页面效果。(12)在 HTML 的编辑页面输入代码,将此 HTML 代码以后缀 html或者 htm 命名，保存到相应文件夹下，例如：命名为 例 8-6.htm 保存在 d 盘根目录下；(13)用网页浏览器打开“例 8-6.

45、htm”页面，即可以看到此页的页面效果。(14)在 HTML 的编辑页面输入代码,将此 HTML 代码以后缀 html或者 htm 命名，保存到相应文件夹下，例如：命名为 例 8-7.htm 保存在 d 盘根目录下；用网页浏览器打开“例 8-7.htm”页面，即可以看到此页的页面效果。4、实例参考源码、实例参考源码源码源码 2.7.12.7.1 例例 8-1.htm8-1.htm南雄市中等职业学校计算机学科校本教材52内嵌式样式(Inline Style)这个内嵌样式(Inline Style)定义段落里面的文字是 20pt 字体，字体颜色是红色。 这段文字没有使用内嵌样式。源码源码 2.7.

46、22.7.2 例例 8-2.htm8-2.htmH1.mylayout border-width: 1; border: solid; text- align: center;color:red这个标题使用了 Style。 这个标题没有使用 Style。源码源码 2.7.32.7.3 例例 8-3.htm8-3.htm这个标题使用了 Style。 这个标题没有使用 Style。源码源码 2.7.42.7.4 home.csshome.css H1.mylayout -_border-width: 1; border: solid; text-align: center; color:red;

47、源码源码 2.7.52.7.5 例例 8-4.htm8-4.htmGeneric Class Selector .center text-align:center这个标题居中显示。 这个段落居中显示。源码源码 2.7.62.7.6 例例 8-5.htm8-5.htmClass Selectorp.right text-align:right p.center text-align:center这一段居中显示。 这一段是居右显示。南雄市中等职业学校计算机学科校本教材54源码源码 2.7.72.7.7 例例 8-6.htm8-6.htmClass Selectorp em color:red这个段

48、落中用 em 强调的字是红色的。这个标题中用 em 强调的字不是红色的。源码源码 2.7.82.7.8 例例 8-7.htm8-7.htmCascading Orderp font-size:12pt这个段落的内嵌样式(Inline Style)覆盖(overwrite)了内部样式表(Internal Style Sheet)， 显示的字体大小是 30pt，而不是 12pt。5、实例思考与扩展、实例思考与扩展（1）如何运用 CSS 制作网页的整体效果？怎样在不同的样式表中进行 切换？那种方式写 CSS 切换比较方便? （2）比较运用 CSS 的方式的优缺点？-_二、实例名称：二、实例名称：字体

49、属性与图文布局属性综合示例字体属性与图文布局属性综合示例1、实例目标及知识点、实例目标及知识点运用 CSS 的基础知识制作 html 页面，要求此页面综合运用字体属性和图文布局属性。熟练掌握级联样式表中常用的属性的作用、语法及使用方法。2、实例功能说明、实例功能说明实验结果如下图：南雄市中等职业学校计算机学科校本教材56图 3.53、实例操作步骤、实例操作步骤(1)在 HTML 的编辑页面输入代码如下：(2)将此 HTML 代码以后缀 html 或者 htm 命名，保存到相应文件夹下，例如：命名为 例 9-1.htm 保存在 d 盘根目录下；(3)保证图片 tp.jpg 保存在相对路径为./images/tp.jpg 的文件夹下；用网页浏览器打开“例 9-1.htm”页面，即可以看到此页的页面效果。4、实例参考源码、实例参考源码源码源码 2.82.8 字体风格属性 font-stylebody background:#99FF00 url(./images/tp.jpg) no- repeat fi