网页制作探源
你想使自己成为一名专业的Web制作者吗?,那么,你应该知道自己所编辑的东西转换成HTML语言是一个什么样子,又会使用常见的HTML语法,这对于修改网页中的构件属性、添加网页特效等很有帮助,例如会在原代码中直接加入一些像JavaScript之类的东西,那你的网页制作水平才算得上是游刃有余的专业者了。
下面请跟我来探讨转换成HTML语言的网页结构及常用语法。
当用FrontPage或Dreamweaver创建一个以“教你申请专利“为标题的空白网页后,可以用鼠标点击HTML按钮(用FrontPage编辑时)或Dreamweaver启动面板上的“HTML
Source” 按钮,会显示出网页的HTML原代码,整个网页结构是以<HTML>开始,以</HTML>结束。全文如下:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv=“Content-Type” Content=“text/html; charset=gb2312”>
</head>
<body bgcolor=“#FFFFFF”>
</body>
</html>
<head>和</head>标记之间的内容称为HTML的头部,一般不会在网页上直接显示,但插入的特效制作是可以在网页上显示的。
<title>和</title>之间的内容是Web页的标题,当浏览这一网页时,它会出现在浏览器的标题栏上。例如主页的名称是:“教你申请专利”,其原代码标记为:
<title>教你申请专利</title>
<meta>是一个非封闭类型的标记。可提供文档的关键字、作者、信息描述。在HTML的头部可以有包括多个<meta>标记。在<meta>中可以包含一些属性,如:姓名或名称name、元数据content、字符解码方式charset。有些搜索引擎使用关键字和描述进行搜索,这时你可在头部提供如下语句:
<meta name=“keywords” content=“专利,发明”>
<meta name=“description” content=“发明技巧,筹划专利申请,教你申请专利”>
<base>标记。它是用来定义文档的基础URL地址,<base>标记是惟一的,并且放在头部。它应该在任何包含URL地址的语句之前。如果希望将“教你申请专利”主页的基址URL定义为“http://jnsqzl.363.net”,则设置如下:
<base href=“http://jnsqzl.363.net”>
确定了基址URL之后,文档中所有引用的URL地址都应从基址URL地址开始。例如,文档中的一个超链接指向j/f22.htm,它实际上指向的URL地址是:http://jnsqzl.363.net/j/f22.htm
<body >和</body>用于定义HTML的正文部分。其中也可以加入一些属性,例如:指定一幅图像为背景颜色background、文本默认颜色text、超链接的文本颜色link、超链接被打开的文本颜色alink、已被访问过的超链接文本颜色vlink、文档的背景颜色bgcolor。
例如,将文档的背景设为黑色、文本设为白色、未被访问过的超链接文本设为红色、超链接正被打开的文本为兰色、已被访问过的超链接文本设为紫红色,则可使用如下<body
>标记。
<body bgcolor=“black” text=“white” link=“red” alink=“blue”
vlink=“fuchsia”>
如果在网页中使用了框架技术(Frame),则正文部分应包括在<frame>和</frame>之间,而不是在<body
>和</body>之中。
在正文中编辑文字时,HTML是以<p>和</p>标记为一个段落。例如:
<p>欢迎光临教你申请专利站点</p>
如果想在这段文字中的“教你申请专利”上作一个指向“j/index.htm”文档的超链接,其原代码可变为:
<p>欢迎光临<a href=“j/index.htm”教你申请专利</a>站点</p>
如果想用“管理员”三个字创建一个指向管理员邮箱地址的超链接,(假设邮箱地址是[email protected])可采取如下任意一种方式:
◆ <a href=“mailto:[email protected]”>管理员</a>
◆ 如有疑问请与<a href=“mailto:[email protected]”>管理员</a>联系
◆ <p>如有疑问请与<a href=“mailto:[email protected] ?subject=我有问题”>管理员</a>联系</p>
代码在<p>和</p>之间的是自成一个文字段落,否则是置于已有的其它段落中了。带有?subject属性的,是为邮件确定了固定的主题,当你打开链接编辑邮件时,在邮件的主题栏中自动填入了“我有问题”。
在编辑正文时,常需要插入水平线、表格、图像、程序代码等。
在HTML中,水平线是由<hr>作为标记,是非封闭的。它可带有宽度width、高度尺寸size、对齐方式align、阴影效果noshade等属性,对应语句如:
<hr width=“350” size=“5” id=“Hori Rule” align=“center” noshade>
插入表格的标记为<table>和</table>。可带有宽度width、边框宽度border、单元格间的距离cellpadding等属性。举例代码如下:
<table width=“75%” border=“1” cellpadding=“2” cellpadding=“3”><tr>
<td>统计数据;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>6590;</td>
<td>合计;</td>
</tr>
</table>
在以上例子中,有两组<tr>和</tr>标记,说明表格为2行;如果表格为2列,则在每组<tr>和</tr>标记中有2组<td>和</td>标记。在<td>和</td>之间的文字或数据,是该单元格中所填写的内容;而<td>&nbsp;</td>表示的是该单元格中内容为空白。
在正文中插入图像,原代码是以<img>为标记的。例如要插入一幅来源于根目录下、文件名是mnd.jpg的图像,并在网页上预留85×85的空间,可使用如下语句:
<img src=“/mnd.jpg” width=“85” height=“85”>
假设插入的图像是一朵鲜花,如果浏览器不支持图像显示时,我们可以用文字“一朵鲜花”替代图像位置并显示在网页上:
<img src=“/mnd.jpg” alt=“一朵鲜花” width=“85” height=“85”>
如果我们想利用这个图像作一个指向http://jnsqzl.netsh.net的超链接,并将图像设为无边框:
<a href=“ http://jnsqzl.netsh.net”><img src=“/mnd.jpg”
alt=“一朵鲜花” border=“0”></a>
为了让鼠标移到图像超链接时显示出“大家论坛”的文字信息,可以将alt属性去掉,再为<a>标记指定title属性,语句如下:
<a href=“ http://jnsqzl.netsh.net” title=“大家论坛”><img
src=“/mnd.jpg” width=“85” height=“85”></a>
如果想单击图像链接时,让浏览器另开窗口显示链接文档,可使用如下代码:
<a href=“ http://jnsqzl.netsh.net” target=“_blank”><img
src=“/mnd.jpg” border=“0”></a>
熟悉了HTML语言网页结构,我们可以自由地在其中插入广告代码、计数器代码,镶嵌各种小程序等。
如果想用“JavaScript"语言编制一段小程序,使状态栏中显示出“欢迎光临教你申请专利站点”的走马灯文字效果,可以在html状态下,将下列JavaScript语言代码插入到主页头部的/head之后,存盘后便可预览其效果。
<script LANGUAGE=“JavaScript">
<!--
function scroll(seed)
{
var m1 = “欢迎光临"
var m2 = “教你申请专利站点"
var msg=m1+m2;
var out = “ ";
var c = 1;
if (seed > 100) {
seed--;
var cmd=“scroll(" + seed + “)";
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 100 && seed > 0) {
for (c=0 ; c < seed ; c++) {
out+=“ ";
}
out+=msg;
seed--;
var cmd=“scroll(" + seed + “)";
window.status=out;
timerTwo=window.setTimeout(cmd,100);
} else if (seed <= 0) {
if (-seed < msg.length) {
out+=msg.substring(-seed,msg.length);
seed--;
var cmd=“scroll(" + seed + “)";
window.status=out;
timerTwo=window.setTimeout(cmd,100);
}
else {
window.status=“ ";
timerTwo=window.setTimeout(“scroll(100)",7)
;}
}
}
timerONE=window.setTimeout(‘scroll(100)',50);
//-->
</script>
掌握了由HTML语言所反映的网页结构及常用语法之后,会使你在网页的修改和增色方面如虎添翼。