- HTML5程序开发范例宝典
- 韩旭 高飞 孙桂杰编著
- 327字
- 2024-12-21 21:57:35
2.1 HTML基本标记
实例017 演示进入和离开网页的过渡效果
这是一个可以提高基础技能的实例
实例位置：光盘\mingrisoft\02\017
实例说明
在浏览某些网站时，常常会在进入或退出某个网页时看到一些过渡效果，使得网页更加生动。本实例就来演示进入和离开网页的过渡效果，其中以随机水平线效果进入页面enter.html，而以垂直百叶窗效果离开页面exit.html。运行gd.html页面，效果如图2.1所示。单击“进入网页”链接后，将在浏览器中显示随机水平线的切换转场效果，如图2.2所示。3秒钟过后，进入enter.html页面，单击“返回”链接后回到gd.html页面。然后单击“离开网页”链接，进入如图 2.3 所示的网页离开页面。单击“返回”链接后，会显示退出页面时的垂直百叶窗切换转场效果，如图2.4所示，经过5秒钟又回到如图2.1所示的页面。
图2.1 页面的过渡效果
图2.2 进入页面的水平线效果
图2.3 页面的退出页
图2.4 页面的垂直百叶窗退出效果
技术要点
本实例实现的页面过渡效果在<meta>标记的属性中就可以实现。语法如下：
<meta http-equiv="过渡事件"content="revealtrans(duration=过渡效果持续时间,transition=过渡方式)">
在该语法中，过渡事件可以进入页面或者离开页面。进入页面的http-equiv值为page-enter，离开页面的http-equiv值为page-exist。过渡效果的持续时间默认情况下以秒为单位。过渡方式的编号及其含义如表2.1所示。
表2.1 过渡方式的编号及含义
实现过程
（1）建立一个 gd.html 页面，在该页面中设置页面的背景颜色为橘色，在该页面中插入一张图片，以便观察页面切换的效果，同时在该页面中插入两个链接文字，分别是“进入网页”和“离开网页”。其实现的代码如下：
<html>
<head>
<title>页面的过渡效果</title>
</head>
<bodybgcolor="#FFCC00">
<center><h2>页面的过渡效果</h2>
<img src="images/1.jpg"width="498"height="349"/><br/><br/><br/>
<ahref="enter.html">进入网页</a><br/><br/><br/>
<ahref="exit.html">离开网页</a>
</center>
</body>
</html>
（2）创建enter.html页面，实现随机水平线的转场效果，代码如下：
<html>
<head>
<title>页面的进入效果</title>
<meta http-equiv="page-enter" content="revealtrans(duration=3,transition=21)"/>
</head>
<bodybgcolor="#FFCC99">
<center><h2>显示页面的进入效果</h2>
<img src="images/2.jpg" width="498" height="462"/><br/><br/>
<ahref="2-gd.html">返回</a>
</center>
</body>
</html>
（3）创建exit.html页面，实现垂直百叶窗的转场效果，代码如下：
<html>
<head>
<meta http-equiv="page-exit" content="revealtrans(duration=5,transition=8)"/>
<title>页面的离开效果</title>
</head>
<bodybgcolor="#FFCC99">
<center><h2>显示页面的退出效果</h2>
<img src="images/3.jpg" width="498" height="462"/><br/><br/>
<ahref="2-gd.html">返回</a>
</center>
</body>
</html>
举一反三
根据本实例，读者可以进行以下操作。
实现水平百叶窗的页面过渡效果。
以随机产生的一种过渡方式实现页面过渡效果。
实例018 背景图片的设置与显示效果
这是一个可以提高基础技能的实例
实例位置：光盘\mingrisoft\02\018
实例说明
在页面中可以使用图片作为页面的背景图，本实例就来说明背景图片的设置与显示效果。运行index1.html 页面，可以看到图像在水平和垂直方向平铺，效果如图2.5 所示。运行index2.html 页面，可以看到图像不重复显示，效果如图2.6 所示。运行index3.html 页面，可以看到背景图片在水平方向平铺，效果如图2.7所示。运行index4.html页面，当滚动条滚动时，会发现只有文字在动，而背景却是静止不动的，如图2.8所示。
图2.5 平铺图像作为背景
图2.6 背景图像单独显示
图2.7 背景图像水平平铺效果
图2.8 滚动条滚动的效果
技术要点
页面背景图片的设置通过<body>标记中的background属性来实现。与向网页中插入图片不同，页面背景图片放在网页的最底层，文字和图片等都位于它的上面。文字、插入的图片等会覆盖背景图片。在默认的情况下，背景图片在水平方向和垂直方向上会不断重复出现，直到铺满整个网页。语法如下：
<bodybackground="文件链接地址" bgproperties="背景图片固定属性">
文件的链接地址可以是相对地址，也可以是绝对地址。在默认情况下，用户可以省略bgproperties属性，这时图片会按照水平和垂直的方向不断重复出现，直到铺满整个页面。如果将bgproperties属性设置为fixed，那么当滚动页面时，背景图像也会跟着移动，这对于浏览者来说，就是总停留在相同的位置上。
实现过程
（1）创建index1.html文件，在文件中设置一个图片文件作为网页的背景，在默认情况下不设置bgproperties属性，此时图片将在水平和垂直方向平铺。代码如下：
<html>
<head>
<title>背景图像</title>
</head>
<bodybackground="images/1.jpg">
</body>
</html>
（2）创建index2.html文件，在头部标记中添加<style>标记，并将background-repeat的值设置为no-repeat，代码如下：
<html>
<head>
<title>背景图片不重复</title>
<styletype="text/css">
body{background-repeat:no-repeat}
</style>
</head>
<bodybackground="images/1.jpg">
</body>
</html>
（3）创建index3.html文件，在头部标记中添加<style>标记，并将background-repeat的值设置为repeat-x，代码如下：
<html>
<head>
<title>背景图片水平重复</title>
<styletype="text/css">
body{background-repeat: repeat-x}
</style>
</head>
<bodybackground="images/1.jpg">
</body>
</html>
（4）创建index4.html文件，在<body>标记中通过bgproperties属性来设定背景图片固定在页面上静止不动。代码如下：
<html>
<head>
<title>背景图片固定</title>
<styletype="text/css">
body{background-repeat:no-repeat}
</style>
</head>
<bodybackground="images/1.jpg" bgproperties="fixed" text="#FFFF66">
<h1>1行桃花坞里桃花庵<br/>
2行桃花庵下桃花仙<br/>
3行桃花仙人种桃树<br/>
4行又摘桃花换酒钱<br/>
5行别人笑我太疯癫<br/>
6行我笑他人看不穿<br/>
7行不见武陵豪杰墓<br/>
8行无花无酒锄作田<br/>
</h1>
</body>
</html>
举一反三
根据本实例，读者可以进行以下操作。
设置背景图片在垂直方向平铺。
设置背景图片在页面中的位置。
实例019 设置未访问的链接文字的颜色
本实例可以美化界面、简化操作
实例位置：光盘\mingrisoft\02\019
实例说明
在创建网页的过程中，除了文字、图片之外，超链接也是最常用的一种元素。超链接中以文字链接最多，在默认情况下，浏览器以蓝色作为超链接文字的颜色；访问过的文字则变为暗红色。本实例将设置未访问的链接文字的颜色。运行结果如图2.9所示。
图2.9 设置未访问的链接文字的颜色
技术要点
在创建网页时，可以通过<body>标记中的 link属性设置未访问的链接文字的颜色。语法如下：
<bodylink="颜色代码">
该属性对网页中所有未单独设置链接文字颜色的元素起作用。
实现过程
创建index.html文件，通过<body>标记中的link属性设置未访问的链接文字的颜色为红色，代码如下：
<html>
<head>
<title>页面的链接文字</title>
</head>
<bodytext="#6699FF" link="#FF0000">
<center>
设置链接文字的颜色
<br/><br/>
<ahref="http://www.mingribook.com">链接文字</a>
<br/><br/>
</center>
</body>
</html>
举一反三
根据本实例，读者可以进行以下操作。
设置激活时的链接文字的颜色。
设置访问过的链接文字的颜色。
实例020 使用http-equiv属性设定页面的自动刷新
本实例可以美化界面、简化操作
实例位置：光盘\mingrisoft\02\020
实例说明
本实例使用http-equiv属性中的refresh设定页面的自动刷新，也就是每隔3秒的时间就会刷新页面的内容。实例运行结果如图2.10所示。
图2.10 设定自动刷新
技术要点
在<meta>标记中，设置页面自动刷新的语法如下：
<meta http-equiv="refresh" content="跳转时间;url=链接地址">
在该语法中，http-equiv属性用于传送HTTP通信协议的标头，refresh表示网页的刷新，而在content中设定刷新的时间和刷新后跳转的地址，时间和链接地址之间用分号分隔。默认情况下，跳转时间是以秒为单位的。
实现过程
创建 index.html文件，设置<meta>标记的http-equiv属性值为refresh，并设置页面刷新的时间间隔为3秒，代码如下：
<html>
<head>
<title>页面的自动刷新</title>
<meta http-equiv="refresh" content="3">
</head>
<body>
<p>本页面每隔三秒钟自动刷新一次</p>
</body>
</html>
举一反三
根据本实例，读者可以进行以下操作。
经过一定时间后网页自动跳转到指定页面。
设置聊天室的定时刷新。
实例021 在网页中完成对明日科技公司的简介
这是一个可以提高基础技能的实例
实例位置：光盘\mingrisoft\02\021
实例说明
创建一个基本的HTML网页，在这个HTML网页中完成对明日科技公司的简介。实例运行结果如图2.11所示。
图2.11 明日科技公司简介
技术要点
在本实例中，通过主体标记<body>的属性设置页面的背景图片，文字的颜色以及页面的上边距、左右边距，通过CSS样式设置页面的背景图片不重复。关键代码如下：
<styletype="text/css">
body{background-repeat:no-repeat}
</style>
<bodybackground="images/1.png" text="#333333" topmargin="10" leftmargin="10" rightmargin="10">
实现过程
（1）创建一个HTML文件，将其命名为index.html。
（2）在<title>…</title>标签中定义文件的标题为“明日科技公司简介”。
（3）在页面的主体标记内，设置页面的背景图片，文字的颜色设置成黑色，上边距、左右边距都设置成10像素。代码如下所示：
<bodybackground="images/1.png" text="#333333" topmargin="10" leftmargin="10" rightmargin="10">
吉林省明日科技有限公司是一家以计算机软件技术为核心的高科技型企业，公司创建于2000年12月，是专业的应用软件开发商和服务提供商。多年来始终致力于行业管理软件开发、数字化出版物开发制作、计算机网络系统综合应用、行业电子商务网站开发等领域，涉及生产、管理、控制、仓储、物流、营销、服务等行业。公司拥有软件开发和项目实施方面的资深专家和学习型技术团队，公司的开发团队不仅是开拓进取的技术实践者，更致力于成为技术的普及和传播者，并以软件工程为指导思想建立了软件研发和销售服务体系。公司基于长期研发投入和丰富的行业经验，本着“让客户轻松工作，同客户共同成功”的奋斗目标，努力发挥“专业、易用、高效”的产品优势，竭诚为广大用户提供优质的产品和服务。<br/><br/>
企业宗旨：为企业服务，打造企业智能管理平台，改善企业的管理与运作过程，提高企业效率，降低管理成本，增强企业核心竞争力。为企业快速发展提供源动力。<br/><br/>
企业精神：博学、创新、求实、笃行<br/><br/>
公司理念：以高新技术为依托，战略性地开发具有巨大市场潜力的高价值的产品。<br/><br/>
公司远景：成为拥有核心技术和核心产品的高科技公司，在某些领域具有领先的市场地位。<br/><br/>
核心价值观：永葆创业激情、每一天都在进步、容忍失败，鼓励创新、充分信任、平等交流。
</body>
（4）通过CSS样式的<style>标记，使背景图片不重复。其实现的代码如下所示：
<styletype="text/css">
body{background-repeat:no-repeat}
</style>
举一反三
根据本实例，读者可以进行以下操作。
设定页面默认的文字颜色。
设定整个页面的背景颜色。