实例一
1.要求：
知识要点： html 文档的基本结构，html 标签的书写格式、作用、用法
实训目的： 掌握 html 文档的基本结构，掌握 html 代码网页编辑的基本方法实训内容： <html> <head> <title> <body> 标签等, 在网页中插入文字 <body> 标签及其属性：bgcolor、 background、 text、 link、 alink、 vlink、 leftmargin、 topmargin
特别提醒： 当有<title>而丢掉</title>或书写错误时，文档不能正确浏览在html文档中，<html>、<head>、<title> 被完全省略、部分省略或嵌套不严格，是允许的，但这却不是一个好习惯用记事本编辑网页文件，在保存文件时，一定要注意文件扩展名写为 .html 或 .htm
问题导学： 请听本页有优美的背景音乐“贝多芬第五交响乐”，如果想删除背景，如何改写代码？
2.代码：
<html>
<head>
<title>简单的html示例</title>
<bgsound src="../music/bendif.mid">
</head>
<body background="../img/bg.jpg">
<center>
<h3>我的第一个网页</h3>
<hr/>
<font size=2>这是我做的第一个网页，欢迎光临！谢谢！ This is my first web. Welcome.</font>
</center>
</body>
</html>
实例二
1.要求：
知识要点： 以默认格式显示文字，用FONT标签设置显示文字的格式
实训目的： 掌握设置网页中文字的大小、字体、字型、字号、颜色等
实训内容： <font> 标签及其属性：face、size、color、 <b>、<i>、<u> 标签等
知识扩展： 控制文字的大小、字体、字型、字号、颜色，还可以使用 CSS 样式
操作提示： 按下 "新窗口浏览" 按钮可在新窗口中浏览所编辑的网页本网页下部有图片素材和音乐素材, 可用作背景图片或背景音乐插入网页中, 路径在其下方可复制引用
2.代码：
<html>
<head>
<title>设置字体字型字号及文字颜色</title>
</head>
<body bgcolor="#EEFFFF">
<font face="幼圆" size="1" color="#000000">幼圆黑色size="1"</font>
<font face="隶书" size="2" color="#0000ff">隶书蓝色size="2"</font>
<font face="黑体" size="3" color="#ff0000">黑体红色size="3"</font>
<font face="楷体_GB2312" size="4" color="#00ff00">楷体绿色size="4"</font><br/>
<font face="方正舒体" size="5" color="#ff00ff">方正舒体紫色size="5"</font>
<font face="华文彩云" size="6" color="#333333">华文彩云深灰色size="6"</font><br/>
<font face="华文琥珀" size="7" color="#808080">华文琥珀灰色size="7"</font><br/>
<font color="#808000"><b>B加粗</b> <i>I斜体</i>
<u>U下划线</u> <strike>strike删除线</strike></font>
</body>
</html>
实例三
1.要求：
知识要点： 设置文章及章节的标题
实训目的： 掌握在网页中设标题文字的方法，包括标题文字的大小、对齐方式等。
实训内容： <h1> <h2> … <h6> 标签及其属性：align
提高练习： 练习设置标题文字的 字体、颜色、字型等
操作提示： 编辑左框中的代码,按下 "查看结果" 按钮, 网页的浏览效果会显示在右框中在新窗口中浏览网页,可改变窗口大小以详细观察效果
2.代码：
<html>
<head>
<title>设置文章标题</title>
</head>
<body bgcolor="#FFFFEE">
<h1>一级标题，默认左对齐</h1>
<h2 align="center">二级标题，用“center”设置为居中对齐</h2>
<h3 align="left">三级标题，用“left”设置为左对齐</h3>
<h4 align="right">四级标题，用“right”设置为右对齐</h4>
<center><h5>五级标题，用“center”标签设置为居中对齐</h5></center>
<h6>六级标题，默认左对齐</h6>
</body>
</html>
实例4
1.要求：
实训目的： 掌握网页中文字的排版控制等
实训内容： <div> <p> <br> <nobr> 等标签及其属性：style，注意 <p> 与 <br/> 的区别
设计技巧： hmtl 代码中的空格及回车换行符，在浏览器释读时会被略，网页中需用空格时，可用字符实体 " "或全角空格代替； 回车换行符可用标记 <p> </p>或<br/> 代替
知识扩展： < > & " 这几个重要符号及回车换行符也不能被浏览器正确释读，通常也需要用字符实体替代 < ： < > ： > & ： & " ： "
操作提示： 在新窗口中浏览网页，并改变窗口大小，可以详细观察 <div> <p> <br><nobr> 所控制的段落的排版规律
2.代码：
<html>
<head><title>文字排版控制示例</title></head>
<body background="../img/bg7.jpg">
<div style="width:200; height:100"> 标准的FTP客户端程序，有直观的操作界面，以左右两个窗口显示，功能和一般的FTP软件差不多</div>
<p>本指南介绍如何使用 Macromedia Dreamweaver。本指南中的教程将引导您完成创建一个简单但具备一定功能的 Web 站点的过程。</p>
<nobr>学习如何使用 Macromedia Dreamweaver 8 文档和其它资源，以及了解如何设置 Dreamweaver 工作区使其符合您自己的工作习惯。然后计划并设置站点，开始创建页面。</nobr>
</body>
</html>
实例5
1.要求：
实训目的： 掌握在网页中插入图片并设置图片的大小、对齐方式、替代文字、是否有边框及边框的宽度等
实训内容： <img> 标签及其属性：src、 align、 border、 alt、 hspace、 vspace、 width、 height 等
注意： src 是 <img> 标签的最关键属性，用来描述图片的来源（url），可用绝对路径或相对路径，绝对路径是包括网站域名在内的完全路径，一般用于实现外部链接；相对路径又分为根相对路径和文档相对路径，不能使用本地绝对路径。 文件路径描述的更多知识，请参考有关资料
|
目标地址(URL)，可用绝对路径或相对路径来描述。 绝对路径是包括网站域名在内的完全路径，一般用于实现外部链接。 相对路径又分为根相对路径和文档相对路径。 在编辑网页时，要在本地磁盘上选定一个文件夹，作为站点的本地文件夹，站点内链接用到的所有本地文件，都应该放在该文件夹内，以确保将这个文件夹上传到服务器后，所有的链接仍能保持有效。这个模拟服务器上的站点的文件夹，就是站点的根文件夹，系统就是根据这个文件夹确定本地文件的位置。 根相对路径以“/”开头，路径从当前站点的根文件夹开始计算，但使用根相对路径在本地浏览时，必须设置本地站点，否则本地浏览时链接失效，这是因为Windows不支持把站点文件夹作为根目录。 建议不要使用本地绝对路径来描述目标文件的位置，如：d:\myweb2\html\web1.htm。因为本地绝对路径在本地浏览时链接正常，但上传到服务器后，链接失效。 文档相对路径是以当前网页文档的位置为基础开始计算路径。 当超链接的目标是HTML文档，或能用浏览器打开的非HTML文档时，点击这个超链接将自动用浏览器打开目标，但当超链接的目标是不能用浏览器打开的文档时，点击这个超链接将打开“文件下载”对话框。 |
操作提示： 插入图片，可使用本网页下部的素材，其路径描述位于对应图片的下面，可以直接“复制－粘贴”
2.代码：
<html>
<head><title>插入图片示例</title></head>
<body>
小娃娃与小狗狗
<img border="0" src="../img/agirl.jpg" align="top" alt="图片的原始大小"/>
<img border="2" src="../img/dog.jpg" align="bottom" alt="图片有缩放" width="30%" height="40%" hspace="2" vspace="5"/></body>
</html>
实例6
1.要求：
知识要点： 在网页中插入 flash 动画使用 <embed src="flash URL"></embed> 标签在网页中加入视频剪辑使用 IMG 标签的 dynsrc 属性
实训目的： 掌握在网页中插入 flash 动画并设置其位置、大小等属性掌握在网页中插入视频剪辑并设置其位置、大小、循环播放次数等属性，了解常用的多媒体文件类型
实训内容： 在网页中插入一段视频剪辑和一个 flash 动画
2.代码：
<html>
<head>
<title>插入多媒体示例</title>
<body topmargin="5" leftmargin="20">
<embed src="../img/my.swf" width="400" height="36"></embed>
<br/>
<img dynsrc="../img/sea1.wmv" height="300" loop="-1">
</body>
</html>
3.效果：
实例7
1.要求：
实训目的： 掌握在网页中插入水平线，并设置线长、线宽、对齐方式、颜色、是否有阴影等
实训内容： <hr> 标签及其属性：align、width、color、size、noshade 等
思考题： 在网页中是否能方便地插入一条竖直线？ 要插入竖直有什么办法？
操作提示： 在新窗口中浏览网页，并改变窗口大小，以详细观察 线长、对齐方式 的变化
2.代码：
<html>
<head><title>水平线示例</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
body {
background-image: url(../img/back.jpg);
}
-->
</style></head>
<body>
水平线1：左对齐，宽15%，粗细8，绿色<hr align="left" width="15%" size="8" color="#00FF00" />
水平线2：宽50%，粗细5，红色，无阴影，默认居中<hr width="50%" color="#FF0000" size="5" noshade />
水平线3：默认线粗，宽300像素，右对齐<hr width="300" align="right" />
</body>
</html>
实例8
1.要求：
实训目的： 掌握在网页中设置滚动字幕的方法，包括字幕的对齐方式、滚动方向、宽度、高度、背景颜色、循环次数、移动速度等
实训内容： <marquee> 标签及其属性：align、bgcolor、width、height、loop、behavior、hspace、vspace、scrollamount、scrolleday等
注意： 请不要设置滚动字幕的滚动方向为“向右”和“向下”，因为这不符合中文的阅读习惯
思考题： 有些网页中的字幕，在鼠标指上时即停止滚动，鼠标移开时又开始滚动，这种效果如何实现？
2.代码：
<html>
<head>
<title>制作滚动字幕、播入多媒体示例</title>
<bgsound src="../music/honghg.mid" loop="-1"/>
</head>
<body>
<p>
<marquee bgcolor="#00FF00" scrolldelay="5" width="400" height="16"> 欢迎光临电脑乐园 </marquee>
</p>
<p>
<font color="#FFFFFF">
<marquee direction="up" bgcolor="#0000ff" width="400" height="200" scrollamount="3" scrolldelay="50" onMouseOver='this.stop()'onMouseOut='this.start()'>
欢迎光临电脑乐园<br/>
</marquee>
</font>
</p>
<img border="0" src="../img/gifkt3.gif" dynsrc="../img/tupress.avi" start="fileopen"/>
</body>
</html>
实例9
1.要求：
知识要点： 超链接(Hyperlink)是 html 的精华，它为快速查找所需的信息提供了方便锚点链接适用于网页内容较多，并有多个标题的情况
实训目的： 掌握网页内的锚点链接，包括锚记的设置，链接的设置等。锚点链接是实现同一网页一处到另一处的链接
实训内容： <a> 标签及其属性：href、name、target、style等
操作提示： 当网页内容较少且浏览窗口较大时，使用锚点链接无法看到效果
注意观察： 在本系统的每一个页面上有一个 链接，这就是一个锚点链接的实例，可模仿应用
2.代码：
<html>
<head><title>网页内的超链接</title></head>
<body>
<p align="center"><font size="5">
<a name="webtop"></a>第三课复习指导</font></p>
<p><a href="#aaa">知识要点扫描</a><br/>
<a href="#bbb">知识网络</a><br/>
<a href="#ccc">重点、难点研究</a><br/>
<a href="#ddd">金题解析延伸</a><br/>
<a href="#eee">能力迁移训练</a><br/>
<a href="#fff">助学资料</a><br/>
<br/>
<a name="aaa"></a>知识要点扫描</p>
<p> …… …… </p>
<p>SGML(Standard Generalized Markup Language，标准通用标记语言)是一种用于描述文档资料的通用标记语言。它的语法是可扩展的，数据描述功能很强，但十分复杂，不易学习，难以使用，在计算机上实现也很难，所以Web发明者Tim Berners-Lee等人于1989年根据当时的计算机及网络技术，提出了html语言。html是基于SGML的。html自诞生以来不断发展完善，目前WWW上使用html 4.0版本。<br>
html(Hypertext Markup Language，超文本标记语言)是一种用来制作超文本文档的简单标记语言。<br>
html语言可用于网页的排版，是网页设计的基础。用html编写的超文本文档称为html文档，它能独立于各种操作系统平台。使用html语言描述的文件，需要通过WEB浏览器显示出效果。</p>
<p> …… ……</p>
<p><a href="#webtop"><font size="7">top</font></a></p>
<p><a name="bbb"></a>知识网络</p>
<p> …… …… </p>
<p>1) 标签<br>
一个html文档是由一系列标签组成的。html语言中的“标签”是用两个尖括号括起来的标签指令，用来控制文本、图像的显示方式及加于其上的动作。<br>
标签的格式：<标签指令><br>
例如：<title>，</title>，<hr/> 等。<br>
html标签可分单标签和双标签，如上例中的水平线标签<hr>、回车换行标签<br>就是单标签。而<html>要与最后的</html>配合使用，<title>必须与后面的</title>配合使用，这种起始标签和结束标签的组合，就是双标签。<br>
2) 标签的属性<br>
有些标签具有参数，这些参数精确地定义显示方式或行为等，被称为该标签的属性。<br>
属性的用法：<标签指令 属性名 = "属性值" >
</p>
<p>…… ……</p>
<p><a href="#webtop"><font size="7">top</font></a></p>
<p><a name="ccc"></a>重点、难点研究</p>
<p> …… …… </p>
<p>4) html文档的基本结构<br>
一个html文档的基本结构是以<html>开始，以</html>结束，中间包含文档首部(head)和文档主体(body)两部分。<br>
head标签中可以嵌套描述文档特征和属性的标签，例如title标签。<br>
body标签中描述网页的内容，浏览时将显示在浏览器窗口中。<br>
</p>
<p>…… ……</p>
<p><a href="#webtop"><font size="7">top</font></a></p>
<p><a name="ddd"></a>金题解析延伸</p>
<p> …… …… </p>
<p>
为了满足W3C的MXL文档标准，在新的Xhtml规范中，要求文档是格式良好的(Well-formed)，即必须满足以下要求：<br>
①有且仅有一个根元素，其中可以包含若干子元素。即Xhtml文档必须以<html>开始，以</html>结束，其中可以包含head元素和body元素，也就是说，标签必须严格嵌套。<br>
②标签必须有结束标签。<br>
③标签中属性的值必须使用引号。<br>
④标签、属性以及属性的值都是大小写敏感的。<br>
</p>
<p>…… ……</p>
<p><a href="#webtop"><font size="7">top</font></a></p>
<p><a name="eee"></a>能力迁移训练</p>
<p> …… …… </p>
<p>1) head标签<br>
head标签用于定义html文档的首部<br>
格式：<head>…</head><br>
文档的首部描述了文档的很多特征和属性，包括文档的标题、和其他文档的关系等。除文档标题外，head部分的大多数内容都不会真正显示在浏览器中。<br>
2) title标签<br>
title标签用于定义html文档的标题<br>
格式：<title>…</title><br>
该标签定义了文档的标题，<title>与</title>中间的文字在网页被浏览时会显示在浏览器的标题栏上。标题通常用简明扼要的文字概括该网页的主要内容或主题。</p>
<p>…… ……</p>
<p><a href="#webtop"><font size="7">top</font></a></p>
<p><br/>
<a name="fff"></a>助学资料</p>
<p> …… …… </p>
<p>html文档的主体是网页的实质部分，是放置文档核心内容的地方。<br>
body标签用于定义文档主体<br>
格式：<body>…</body><br>
常用属性：background、bgcolor、bgproperties<br>
link、alink、vlink、text、leftmargin、topmargin<br>
</p>
<p>…… ……</p>
<p> <a href="#webtop"><font size="7">top</font></a><br/>
</p>
</body>
</html>
实例10
1.要求：
知识要点： 各个网页链接在一起后才能构成一个网站，按链接目的可分为锚点链接、内部链接、外部链接、E-mail链接等
内部超链接是实现同一站点内一个网页到另一个网页的链接
知识温故： 内部链接目标网页的路径（url）表达形式，可使用 根相对路径 或 文档相对路径
实训目的： 掌握超链接的设置方法
实训内容： <a> 标签及其属性：href、name、target、style 等
注意观察： 在本系统的每一个页面上的 和 链接，就是内部链接的实例，可模仿应用
2.代码：
<html>
<head><title>指向其它页面的超链接</title></head>
<body>
<p align="center"><font size="5">××××课程复习指导</font></p>
第一课复习指导<br/> 第二课复习指导<br/>
<a href="web9.htm">第三课复习指导</a><br/>
<a href="web9.htm#aaa">知识要点扫描</a><br/>
<a href="web9.htm#bbb">知识网络</a><br/>
<a href="web9.htm#ccc">重点难点研究</a><br/>
<a href="web9.htm#ddd">金题解析延伸</a><br/>
<a href="web9.htm#eee">能力迁移训练</a><br/>
<a href="web9.htm#fff">助学资料</a><br/>
第四课复习指导<br/> 第五课复习指导<br/>
</body>
</html>
3.效果：
××××课程复习指导
第一课复习指导
第二课复习指导
第三课复习指导
知识要点扫描
知识网络
重点难点研究
金题解析延伸
能力迁移训练
助学资料
第四课复习指导
第五课复习指导
实例11
1.要求：
知识要点： 超链接的功能很强，可以在WWW上随意链接到其它站点，没有类别之分，没有国界限制
实训目的： 掌握外部链接的设置方法，掌握目标网页地址（URL）的表示方法
实训内容： <a> 标签及其属性：href、name、target、style等
知识扩展： 绝对路径是包括网站域名在内的完全路径,用于实现外部链接；链接到外部站点的首页,可只写域名省略文件名
注意观察： 当超链接的目标是不能用浏览器打开的文档时，点击这个超链接将打开“文件下载”对话框超链接“HTML参考资料”所链接的目标是一个 .rar 类型的文件，点击该超链接，观察其运行效果
操作提示： 外部超链接可能因目的网站停止服务而链接失效
2.代码：
<html>
<head><title>超链接到站点外、超链接到浏览器不能打开的文件</title></head>
<body>
<p><a href="http://www.163.com">网易</a></p>
<p><a href="http://www.hiwon.net/">海王科技</a></p>
<p><a href="http://www.hiwon.net/domain.asp">域名知识</a></p>
<p><a href="html001.rar">html参考资料</a></p>
</body>
</html>
3.效果：
实例12
1.要求：
实训目的： 掌握电子邮件链接的格式，了解常用的电子邮件收发器，如：Foxmail OutlookExpress
实训内容： 电子邮件链接格式 <a href = "mailto:xxxxxx@xxx.xxx" >
操作提示： 浏览器端单击电子邮件链接，将打开默认邮件收发管理软件，如Foxmail、Outlook Express等，为发送一个电子邮件做好准备
2.代码：
<html>
<head><title>电子邮件链接</title></head>
<body>
<p><a href="mailto:abc@163.com">为您服务</a></p>
</body>
</html>
3.效果：
实例13
1.要求：
知识要点： 按照使用对象的不同，网页中的链接又可以分为：文本超链接，图像超链接，多媒体文件链接，空链接等
实训目的： 掌握在图片上作超链接的方法
实训内容： 图片上作超链接的格式 <a href = "url" > <img src = "url" /> </a>
知识扩展： 在Dreamweaver中还可以将一幅图片划分为多个热区，作多个超链接
注意区别： 描述链接目标 url 使用 <a> 标签的 href 属性， 描述插入图片来源的 url 使用 <img> 标签的 src 属性
2.代码：
<html>
<head><title>图片超链接示例</title></head>
<body>
<a href="spray.htm"> <img border="2" src="../img/board.jpg" alt="链接到喷笔"> </a>
</body>
</html>
实例14
1.要求：
知识要点： 表格由表行组成，表行由表项(单元格)组成。表格由 TABLE 定义，表行由 TR 定义，单元格由 TD 或 TH 定义
实训目的： 掌握表格的定义格式（表格、表行、单元格），表格的对齐方式、表项的对齐方式、表格中文字的设置等。
实训内容： <table> <tr> <th> <td> 标签及其属性 align、bgcolor、 border、 bordorcolor、 height、 cellspacing、width、 cellpadding ， <caption> 标签及其属性 align 、 valign表格内文字的字体、字型、大小、颜色、对齐方式等
操作提示： 在网页设计中表格的主要用途是网页排版布局，所以熟练掌握和运用表格这一排版布局工具，是非常重要的
2.代码：
<html>
<head><title>表格示例</title></head>
<body>
<table border="5" cellpadding="4" cellspacing="3" width="95%" align="center">
<tr> <th>学号</th> <th>姓名</th> <th>语文</th><th>数学</th> <th>均分</th> </tr>
<tr> <td>0301</td> <td width="40%" align="center">张大山</td> <td>78</td><td>97</td> <td>87.5</td> </tr>
<tr align="center"> <td>0302</td> <td>李海燕</td> <td>89</td><td>87</td> <td>88</td> </tr>
<tr align="right"> <td>0303</td> <td>王华清</td> <td>89</td><td>98</td> <td>93.5</td> </tr>
</table>
</body>
</html>
3.效果：
|
学号 |
姓名 |
语文 |
数学 |
均分 |
|
0301 |
张大山 |
78 |
97 |
87.5 |
|
0302 |
李海燕 |
89 |
87 |
88 |
|
0303 |
王华清 |
89 |
98 |
93.5 |
实例15
1.要求：
实训目的： 掌握表格中单元格的合并、表格标题格式的设置、对齐方式等。
实训内容： 同一行内若干单元格的合并 格式：<td colspan = "n"> 表项 </th> 或：<th colspan = "n"> 表项 </th>
同一列内若干单元格的合并 格式：<td rowspan = "n"> 表项 </th> 或：<th rowspan = "n"> 表项 </th>
同时合并多行多列 格式：<td rowspan = "n" colspan = "m"> 表项 </td>
表格标题 格式：<caption> 表格标题 </caption>
注意观察： 合并单元格后，填写表项时很容易造成错位，可以参考下面的例题，总结合并单元格后表项的填写规则
分析思考： 注意观察 <td> 与 <th> 所描述的单元格有什么区别 ，分别适用于什么场合 ？
2.代码：
<html>
<head><title>表格标题及合并单元格</title></head>
<body>
<table border="5" cellpadding="4" cellspacing="3" width="100%" height="118">
<caption>学生基本情况表</caption>
<tr>
<td width="10%">姓名</td>
<td width="10%">王美丽</td>
<td width="10%">性别</td>
<td width="10%">女</td>
<td width="10%">年龄</td>
<td width="10%">15</td>
<td width="20%">E-mail</td>
<td width="20%">wml@163.com</td>
</tr>
<tr>
<td rowspan="4" colspan="2">照片</td>
<td colspan="2">称谓</td>
<td colspan="2">姓名</td>
<td>职业</td>
<td>电话</td>
</tr>
<tr>
<td colspan="2">父亲</td>
<td colspan="2">王正</td>
<td>医生</td>
<td>88888888</td>
</tr>
<tr>
<td colspan="2">母亲</td>
<td colspan="2">李英</td>
<td>教师</td>
<td>99999999</td>
</tr>
<tr>
<td colspan="2">地址</td>
<td colspan="4">北京市雨儿胡同</td>
</tr>
</table>
</body>
</html>
3.效果：
|
学生基本情况表 |
|||||||
|
姓名 |
王美丽 |
性别 |
女 |
年龄 |
15 |
|
wml@163.com |
|
照片 |
称谓 |
姓名 |
职业 |
电话 |
|||
|
父亲 |
王正 |
医生 |
88888888 |
||||
|
母亲 |
李英 |
教师 |
99999999 |
||||
|
地址 |
北京市雨儿胡同 |
||||||
实例16
1.要求：
知识要点： 在网页应用各种样式的“列表”， “列表”与MricroSoft Offic Word中的“项目符号和编号”相似
实训目的： 掌握无序号列表、 选单列表、 有序列表、 定义列表的标签格式及各种列表形式嵌套的用法
实训内容： <ul>、 <li>、 <menu>、 <lh>、 <ol>、 <dl>、 <dt>、 <dd>等标签及其常用属性：type
扩充提高： 本例排版使用了表格，网页设计中表格是最常用的排版工具，需要熟练掌握
2.代码：
<html>
<head><title>列表示例</title></head>
<body>
<table border="1" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td width="40%"> <ul type="square">
<li>边学边练，学以致用</li>
<li type="circle">学习进度，尽在掌握</li>
<li>洪恩本色，人性设计</li>
</ul> </td>
<td width="30%"> <menu>
<lh>主要内容</lh>
<li>Internet应用</li>
<li>网页设计</li>
<li>网站建设</li>
</menu> </td>
<td width="30%"> <ol type="a">
<li>精通Windows</li>
<li>精通Office</li>
<li>常用工具软件</li>
<li>Photo实例</li>
</ol> </td>
</tr>
<tr>
<td colspan="3">
<dl>
<dt>精通Windows <dd> 学习时间10～12小时，从简单的启动程序，拷贝文件，到优化系统，设置网络，相信不同层次的用户都可以获得自己需要的知识。
<dt>精通Office<dd> 充分利用多媒体技术，以实例讲Word、Excel、access、PowerPoint、Outlook，让你迅速成为Office专家。
<dt>Photo实例<dd> 感受功能强大的图形图像处理软件，结合实际10个综合例子，让你迅速成为美术大师。
</dl>
</td>
</tr>
</table>
</body>
</html>
3.效果：
|
主要内容
|
|
|
精通Windows 学习时间10～12小时，从简单的启动程序，拷贝文件，到优化系统，设置网络，相信不同层次的用户都可以获得自己需要的知识。 精通Office 充分利用多媒体技术，以实例讲Word、Excel、access、PowerPoint、Outlook，让你迅速成为Office专家。 Photo实例 感受功能强大的图形图像处理软件，结合实际10个综合例子，让你迅速成为美术大师。 |
||
实例17
1.要求：
知识要点： 框架也是布局网页的一种方法，但它与表格布局方法不同。
实训目的： 掌握框架集的概念、框架集中各网页间的关系、框架集中超链接的实现等。
实训内容： <frameset> 标签及其常用属性： rows、cols、frameborder、framespacing
<frame> 标签及其常用属性： src、name、marginwidth、marginheight、scrolling、noresize
操作步骤： 创建5个html文档并将其存放在同一个文件夹中，其中，框架网页文件名为“web17.htm”，
另外4个文件名分别为“web17a.htm”、“web17b.htm”、“web17c.htm”、“web17d.htm”。
注意观察： 注意观察在浏览器中的初始显示的效果 与点击“球星风采”超链接后的显示效果，思考框架网页中实现超链接的方法
2.代码：
框架集文档，设计用意： 定义一个浏览器窗口的分割形式，并指定在每一个子窗口中显示 html 网页文档的名称
<html>
<head>
<title>Frame Example</title>
</head>
<frameset rows ="28%,*" frameborder="1" framespacing="2">
<frame name="topwindow" src="web17a.htm">
<frameset cols ="35%,*" frameborder="1" framespacing="2">
<frame name="leftwindow" src="web17b.htm">
<frame name="rightwindow" src="web17c.htm">
</frameset>
</frameset>
<noframes></noframes>
</html>
设计用意： 显示在上部子窗口的网页
<html>
<body leftmargin="8" topmargin="8">
<img src="lanqiu4.jpg" width="77" height="55" align="left">这是框架网页的顶部窗口，通常在这里放置站点的Logo和banner、网站的主栏目导航菜单等。
<div id="Layer2" style="position:absolute; left:46px; top:0px; width:350px; height:70px; z-index:2">
<object classid="clsid:D27CDB6E-aE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="350" height="70" align="absbottom">
<param name=movie value="/Upload_Book/N5/images/my.swf">
<param name=quality value=high>
<param name=wmode value=transparent>
<param name=bgcolor value=#FFFFFF>
</object>
</div>
</body>
</html>
设计用意： 显示在左边子窗口的网页
<html>
<body>
这是框架网页的左窗口，通常子栏目导航菜单可放在这里。
这里的超链接目标通常在右面窗口中打开。<br>
<a href="web17d.htm" target="rightwindow">球星风采</a><img src="lanqiu2.jpg" width="35" height="35" align="absmiddle">
</body>
</html>
设计用意： 显示在右边子窗口的网页
<html>
<body>
<img src="lanqiujia.jpg" width="101" height="139" align="right">这是框架网页的右窗口。通常在这里打开左边窗口中超链接的目标。
例如，单击左边窗口中的"球星风采"，这里将看到一个新的网页。
</body>
</html>
设计用意： 点击左子窗口中的超链接，显示在右子窗口的网页
<html>
<body>
<img src="yaoming.jpg" width="100" height="124" align="right">姚明一跃而起，两个大个子抱在了一起。姚明高他俩头，黑大汉有1.98米，眉毛在额头上乱跳，开心得不得了。"哥们儿，又见面了！"他叫泰佑·约翰逊，是NFL(美式橄榄球)奥克兰骑士队的球星
</body>
</html>
实例18
1.要求：
知识要点： 表单可实现用户的信息输入， 使网页具有了交互功能
实训目的： 掌握表单中各种控件的用法、功能、及格式，理解表单的交互功能，学会制作表单
实训内容： 表单及其中按钮、复选框、单选按钮、文本输入框、图像、文件、隐藏项、文本区域、列表框等各种表单控件的定义格式及用法用途两个特殊按钮： “提交”、“重置”的定义和用法用途， 一个特殊文本框“密码框”的用法用途
知识扩展： 表单中的数据处理须要应用程序的支持，本课程中 “ASP”部分将会介绍
2.代码：
<html>
<head><title>意见建议</title></head>
<body>
<form method="POST" action="WEBBOT-SELF">
<table border="0" cellpadding="0" cellspacing="3" width="100%">
<caption>请您填写详细资料并提出宝贵意见</caption>
<tr>
<td>登录名：</td>
<td><input name=username value="" type=text maxlength="16"></td>
</tr>
<tr>
<td>输入登录密码：</td>
<td><input name=password type=password value="" maxlength="16"></td>
</tr>
<tr>
<td>性别：</td>
<td><input type=radio name=sex value="1" checked>男
<input type=radio name=sex value="2" >女
<tr>
<td>所在省份：</td>
<td> <select name=province>
<option value=34>安徽</option> <option value=11>北京</option>
<option value=50>重庆</option> <option value=35>福建</option>
<option value=62>甘肃</option> <option value=44>广东</option>
<option value=45>广西</option> <option value=52>贵州</option>
<option value=46>海南</option> <option value=13>河北</option>
<option value=23>黑龙江</option> <option value=41>河南</option>
<option value=42>湖北</option> <option value=43>湖南</option>
<option value=32>江苏</option> <option value=36>江西</option>
<option value=22>吉林</option> <option value=21>辽宁</option>
<option value=64>宁夏</option> <option value=15>内蒙古</option>
<option value=63>青海</option> <option value=31>上海</option>
<option value=14>山西</option> <option value=37>山东</option>
<option value=51>四川</option> <option value=61>陕西</option>
<option value=12>天津</option> <option value=54>西藏</option>
<option value=65>新疆</option> <option value=53>云南</option>
<option value=33>浙江</option> <option value=71>台湾</option>
<option value=81>香港</option> <option value=82>澳门</option>
<option value=600>澳洲</option> <option value=500>北美洲</option>
<option value=199>亚洲其他国家</option>
<option value=300>欧洲</option> <option value=999>其他</option>
</select></td>
<tr>
<td>个人爱好</td>
<td><input type="checkbox" name="music" value="ON">音乐<input type="checkbox" name="sport" value="ON">运动</td>
</tr>
<tr>
<td>请提供附加文件</td>
<td><input type="file" name="myview" ></td>
</tr>
<tr>
<td align="right"><input type="submit" value="提交" name="B1"></td>
<td><input type="reset" value="全部重写" name="B2"></td>
</tr>
</table>
</form>
</body>
</html>
3.效果：
窗体顶端
|
请您填写详细资料并提出宝贵意见 |
|
|
登录名： |
|
|
输入登录密码： |
|
|
性别： |
男 女 |
|
所在省份： |
|
|
个人爱好 |
音乐 运动 |
|
请提供附加文件 |
|
窗体底端
实例19
1.要求：
实训目的： 提高 html语言 的综合运用能力，初步掌握站点的概念，掌握多个网页间较复杂的链接关系
实训内容： 通过创建一个简单的个人主页，了解一个简单网站制作过程
操作步骤： 本网站非常简单，包括“首页”、“我的爱好”、“我的影集”、“意见建议”，共4个页面，两张图片“意见建议”网页中的核心是一个表单，用于收集用户信息，“与我联系”是一个电子邮件链接，用户可通过电子邮件与网站管理员联系
操作提示： ①首先创建站点文件夹，然后再创建每一个网页
②站点中用的所有文件，包括网页、图像、音乐、动画等都必须放置在站点文件中，
③网站的首页文件名应保存为“index.html”或“index.htm”，这是一般服务器默认搜索的站点首页文件名
说明： 本网站中每个页面的内容还需要完善，表单的功能还不能实现，还没有服务器端程序支持，后续章节将进一步学习
2.代码：
<html>
<head>
<title>我的主页</title>
</head>
<body>
<h3 align="center">这是我的主页，欢迎光临</h3>
<hr>
<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tr>
<td align="center" width="12%">首页</td>
<td align="center" width="22%"><a href="favorite.htm">我的爱好</a></td>
<td align="center" width="22%"><a href="photo.htm">我的影集</a></td>
<td align="center" width="22%"><a href="advice.htm">意见建议</a></td>
<td align="center" width="22%"><a href="mailto:abc@163.com">与我联系</a></td>
</tr>
</table>
<hr>
<br>
我正在学习网站建设，请多帮助！
</body>
</html>
“我的爱好”页 favorite.htm
<html>
<head>
<title>我的爱好</title>
</head>
<body>
<h3 align="center">这是我的主页，欢迎光临</h3>
<hr>
<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tr>
<td align="center" width="12%"><a href="index.htm">首页</a></td>
<td align="center" width="22%">我的爱好</td>
<td align="center" width="22%"><a href="photo.htm">我的影集</a></td>
<td align="center" width="22%"><a href="advice.htm">意见建议</a></td>
<td align="center" width="22%"><a href="mailto:abc@163.com">与我联系</a></td>
</tr>
</table>
<hr>
<br>
我爱好听音乐。<br>
我爱好打篮球、踢足球。<br>
</body>
</html>
“我的影集”页 photo.htm
<html>
<head>
<title>我的影集</title>
</head>
<body>
<h3 align="center">这是我的主页，欢迎光临</h3>
<hr>
<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tr>
<td align="center" width="12%"><a href="index.htm">首页</a></td>
<td align="center" width="22%"><a href="favorite.htm">我的爱好</a></td>
<td align="center" width="22%">我的影集</td>
<td align="center" width="22%"><a href="advice.htm">意见建议</a></td>
<td align="center" width="22%"><a href="mailto:abc@163.com">与我联系</a></td>
</tr>
</table>
<hr>
<br>
<img SRC="img_0021.jpg"> <img SRC="img_0020.jpg"><br>
</body>
</html>
“意见建议”页 advice.htm
<html><head><title>意见建议</title></head>
<body>
<form method="POST" action="WEBBOT-SELF">
<h3 align="center">这是我的主页，欢迎光临</h3>
<hr>
<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tr>
<td align="center" width="12%"><a href="index.htm">首页</a></td>
<td align="center" width="22%"><a href="favorite.htm">我的爱好</a></td>
<td align="center" width="22%"><a href="photo.htm">我的影集</a></td>
<td align="center" width="22%">意见建议</td>
<td align="center" width="22%"><a href="mailto:abc@163.com">与我联系</a></td>
</tr>
</table>
<hr>
<table>
<table border="0" cellpadding="0" cellspacing="1" width="100%">
<caption>请您填写详细资料并提出宝贵意见</caption>
<tr>
<td>登录名：</td>
<td><input name=username value="" type=text maxlength="16"></td>
</tr>
<tr>
<td>输入登录密码：</td>
<td><input name=password type=password value="" maxlength="16"></td>
</tr>
<tr>
<td>性别：</td>
<td><input type=radio name=sex value="1" checked>男
<input type=radio name=sex value="2" >女
<tr>
<td>所在省份：</td>
<td> <select name=province>
<option value=34>安徽</option> <option value=11>北京</option>
<option value=50>重庆</option> <option value=35>福建</option>
<option value=62>甘肃</option> <option value=44>广东</option>
<option value=45>广西</option> <option value=52>贵州</option>
<option value=46>海南</option> <option value=13>河北</option>
<option value=23>黑龙江</option> <option value=41>河南</option>
<option value=42>湖北</option> <option value=43>湖南</option>
<option value=32>江苏</option> <option value=36>江西</option>
<option value=22>吉林</option> <option value=21>辽宁</option>
<option value=64>宁夏</option> <option value=15>内蒙古</option>
<option value=63>青海</option> <option value=31>上海</option>
<option value=14>山西</option> <option value=37>山东</option>
<option value=51>四川</option> <option value=61>陕西</option>
<option value=12>天津</option> <option value=54>西藏</option>
<option value=65>新疆</option> <option value=53>云南</option>
<option value=33>浙江</option> <option value=71>台湾</option>
<option value=81>香港</option> <option value=82>澳门</option>
<option value=600>澳洲</option> <option value=500>北美洲</option>
<option value=199>亚洲其他国家</option>
<option value=300>欧洲</option> <option value=999>其他</option>
</select></td>
<tr>
<td>个人爱好</td>
<td><input type="checkbox" name="music" value="ON">音乐
<input type="checkbox" name="sport" value="ON">运动</td>
</tr>
<tr>
<td>请提供附加文件</td>
<td><input type="file" name="myview" ></td>
</tr>
<tr>
<td align="right"><input type="submit" value="提交" name="B1"></td>
<td><input type="reset" value="全部重写" name="B2"></td>
</tr>
</table>
</form>
</body>
3.效果：