Vb教程 Vb.net教程 Vfp教程 C/C++教程 Vc/Vc++教程 Delphi教程 Java教程 Powerbuilder
  杀毒频道 | 短信频道 | 网络电视 | 论文中心 | 学上网 | 学软件 | 网页特效 | 电脑基础 | 论坛  
  NCRE | 软考 | CET | 职称英语 | 司法考试 | 报关员 | 公务员 | CATTI | CPA考试  
  Html教程 | Css教程 | Xml教程 | Asp教程 | Asp.net | Php教程 | Jsp教程 | Linux教程 | QQ技巧  
Photoshop Illustrator ImageReady Maya教程 3D Max教程 Lightscape Coredraw教程 Authorware Autocad教程 Freehand教程
Access教程 Mysql教程 Sql server Oracle教程 Word教程 Excel教程 Powerpoint Frontpage Asp.net源码 Php源代码
Flash教程 Fireworks Dreamweaver C#教程 outlook教程 系统安装 vbscript教程 Javascript Jsp源代码 Asp源代码
您的位置:首页 >> Html教程

自学动态Html---教程一

文章来源:中国石油大学

如果您是HTML的初学者,请您先自学HTML。因为DHTML是现有的HTML技术的一个综合,所以HTML语言对学习动态HTML是非常重要的。
自从HTML 4.0出现以后,引入了“层叠样式表”(CSS),于是网页制作者能够随心所欲地对自己的网页进行外观和动态的设计,并且使网页具有交互性。其实动态Html(DHtml)并不是一种专门的技术,而是Html技术的一个综合,说白了就是一种技巧,但往往是这样或那样的小技巧使我们的网页变得更加好看、实用。好了,废话少说,下面开始以实例来说明动态HTML在网页设计中的应用。

例1 使用<style>和</style>标志对修饰文本
<html>
<head>
<title>DHtml举例1</title>
<style><!--
h2 {font-family:"宋体";font-size=12pt;text-align:center;color:blue}
-->
</style>

</head>
<body>
<h2>被修饰文本</h2>
</body>
</html>

本例中,我们使用了<style>和</style>标志对来修饰文本,请留意蓝色字,<style>和</style>标志对是加在<head>和</head>标志对之间的,而加上<!--和-->是为了让不支持<style>和</style>标志对的浏览器跳过样式表,否则可能会出错。本例先对<h2></h2>标志对中的文本样式在<style>和</style>标志对中进行定义,于是在后边<h2></h2>中就依样式表定义的内容对文本进行修饰。font-family定义字体,font-size定义字体大小,text-align定义文本对齐方式,color定义前景颜色。
除此之外,我们还可以采用另一种方法来实现。请看下边的例子。

例2 直接用style属性修饰文本
<html>
<head>
<title>DHtml举例2</title>
</head>
<body>
<h2 style="font-family:'宋体';color:blue;font-size:12pt;text-align:center">被修饰文本</h2>
</body>
</html>

请务必注意font-family后是用单引号来定义字体的(font-family:'宋体')。好了,现在您已经初步掌握了样式单的用法了,现在我们开始让您的主页动起来,请看下边的例子。

例3 使用鼠标触发事件和动态样式表改变文本
<html>
<head>
<title>DHtml举例3</title>
</head>
<body>
<h2 onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='underline'" style="font-size:12;text-align:center">请将鼠标移到上面!</h2>
<br>
<h3 align="center" onmouseover="this.style.color='red'" onmouseout="this.style.color='green'">我是变色龙!</h3>
</body>
</html>

在这个例子中,当您把光标放在文字上时,onmouseover事件将被触发,于是执行其后的style定义,此时文字下加了一条直线(this.style.textDecoration='underline'的作用),this用来指代当前的对象,即<h2></h2>标志对。当您把光标移开文字时onmouseout事件被触发,此时文字下的直线消失了(this.style.textDecoration='underline'的作用),这样网页就有了动态的效果。同理,我们可以通过触发鼠标事件来改变文本的颜色,如上例中的第二行黑体字所示。
再次提醒读者,在使用样式单的时候一定要注意格式。比如,在<style></style>标志对中进行样式单定义时应使用text-decoration:underline,而不是用textDecoration='underline'来修饰文本,后者是用于事件触发中的(如onmouseover或onmouseout事件)。许多CSS属性的名字中都有连字符(像text-decoration),但是连字符在许多脚本语言(如JavaScript)中是不合法的标识符,因此,在HTML或样式表中指明CSS属性的时候用连字符命名方式,但在作为一个脚本属性时,就必须去掉连字符,并将它后面的第一个字母大写。例如:
text-decoration变为textDecoration、background-color变成backgroundColor、margin-top变成marginTop。
您可能想用鼠标点击文本来改变其的颜色,要做到这一点很简单,只要在onclick事件中定义样式即可,onclick的用法与onmouseover、onmouseout相似。请看下边的例子。

例4 使用onclick动态改变字体的颜色
<html>
<head>
<title>DHtml举例4</title>
</head>
<body>
<h3 align="center" onmouseover="this.style.color='red'" onmouseout="this.style.color='green'" onclick="this.style.color='blue'">我是变色龙!</h3>
</body>
</html>

在这一例子中,当您把鼠标移动到文字上时,文字颜色变为红色,当鼠标离开文字时,文字颜色变为绿色,当在文字上单击鼠标时,文字颜色变成了蓝色。
下面是我用样式单制作的一个自认为比较漂亮的Html文件。

例5 “轻松自学动态HTML”的图形标志
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>DHtml举例5</title>
<style>
<!--
body {font-family:"宋体";font-size:9pt;color:#00aaff}
h2.top {font-family:serif;font-size:9pt;color:yellow;text-align:right;background-color:rgb(174,0,0)}
h2.bottom {font-family:serif;font-size:12pt;margin-left:-2pt;margin-top:-50pt}
-->
</style>

</head>

<body bgcolor="#000000">
<br>
<table align="center" border="0" width="27%" bgcolor="#000000" cellpadding="12">
<tr>
<td width="168"><h2 class="top">轻&nbsp;松&nbsp;自&nbsp;学&nbsp; 动&nbsp; 态&nbsp; HTML</h2>
<h2 class="bottom"><span style="font-size:50pt;color:lime"><i>t</i></span>
&nbsp; each &nbsp; youself&nbsp; DHtml</h2>

</td>
</tr>
</table>
</body>
</html>

例5的效果如下图,请注意例子中的蓝色部分,class属性是用来定义标志对使用的样式类,如<h2 class="top">……</h2>指定了 <h2></h2>标志对中使用样式类“top”,而“top”则是在<style></style>标志对中定义的。
OK,您会了吗?样式单就这么简单。

轻 松 自 学  动  态  HTML

t   each   youself  DHtml

[返回]

编程语言 web开发 数据库 网络技术 操作系统 服务器 网页设计 图形设计 办公软件 常用软件 学电脑

Copyright© www.bianceng.cn Powered by 编程入门网 All Rights Reserved.
关于本站 | 版权声明 | 联系我们 | 友情链接 |
编程入门网 版权所有