建站全攻略—从入门到精通（实用技巧篇19-27） -pc6资讯

您的位置：首页 → 网页设计 → 经验技巧 → 建站全攻略—从入门到精通（实用技巧篇19-27）

建站全攻略—从入门到精通（实用技巧篇19-27） 时间：2004/11/7 2:47:00来源：本站整理作者：蓝点我要评论(2)

19．防止背景图片滚动

当网页的内容很长，需要使用滚动条来浏览的时候，背景图片也会随之滚动，好像和文字说明粘合在一起似的。这样对于定位视线有些不良的影响，特别是色彩花哨的背景图片，感觉则更不适。对此，我们可以将背景和文字说明相分离，浮动在浏览器窗口里。

具体方法：

打开网页的HTML源文件，在标记里加上：

Bgproperties="fixed"

保存退出。

20．用wingdings字体作画

wingdings字体可以让普通的ASCII码以一些简单预定图形的方式在浏览器里显示，如果我们用Wingdings字体来替代部分图片的话，必然将大大加快网页的下载速度，因为只要看看HTML源文件就会知道网页上的图形只是一小段代码而已。

虽然大多数的图形都很简单，但是还是可以起到一些作用的，比如用“*”的Wingdings字体*表示E-mail或信箱，用“（”的Wingdings字体(表示电话号码，用“<” 的Wingdings字体<表示下载……具体应用就看大家的想象力了^_^

不过需要注意的是，IE对于Wingdings字体的支持很好，而Netscape可能会出现一些显示上的问题。附录部分Wingdings字体、ASCII码和普通字体的对照表（见附录1）。 21．网页变换效果只要搭配得当，这些变换效果会给访客留下非常深刻的印象，即使是那些本来对你的站点没兴趣的访客。特别是喜欢学习网页制作的朋友，很可能就把你的网页复制下来，以供学习研究之用。其实你不过是加了短短一段代码而已^_^

网页变换效果（Trans）共分四大类："进入网页"（Page-Enter）、"离开网页"（Page-Exit）、"进入站点"（Site-Enter）、"离开站点"（Site-Exit）。每一大类又分为25个小类，先用进入网页效果来举例说明：

进入网页时的效果

1．混合效果代码如下：

<meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)">

2．盒状收缩效果代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=0)">

3．盒状放射效果代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=1)">

4．圆形收缩效果代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=2)">

5．圆形放射效果代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=3)">

6．向上擦除效果代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=4)">

7．向下擦除效果代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=4)">

8．向右擦除效果代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=6)">

9．向左擦除效果代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=7)">

10．垂直遮蔽效果代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=8)">

11．水平遮蔽效果代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=9)">

12．横向棋盘式效果代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=10)">

13．纵向棋盘式效果代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=11)">

14．随即分解效果代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=12)">

15．左右向中央缩进效果代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=13)">

16．中央向左右扩展效果代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=14)">

17．上下向中央缩进效果代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=16)">

18．中央向上下扩展效果代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=17)">

19．从左下抽出效果代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=18)">

20．从左上抽出效果代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=19)">

21．从右下抽出效果代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=20)">

22．从右上抽出效果代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=21)">

23．随机水平线条效果代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=22)">

24．随机垂直线条效果代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=22)">

25．随机效果代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=23)">

现在让我们来分析一下这些代码，首先大家一定能看出这些代码大多数地方很相似。事实上，虽然分类很多，但每个大类下的25个小类是分别对应相同的，并且用数字来标识，（除了混合效果 blendTrans(Duration=1.0)），所以不用对没个大类一一举例说明，只要把“Page-Enter”换为“Page-Exit”（离开网页）、“Site-Enter”（进入站点）、“Site-Exit”（离开站点），就可以达到需要的效果了，同时记忆起来也比较方便。其中“Duration=1.0”可以设定每个周期的时间为多久，单位是秒（现在设置的是每周期1秒）。

需要注意的是四个大类的效果可以在一个网页里同时设置，但每个大类只能设置一种效果。另外如果网页是帧页的话，也将无法显示出效果。
22．网页自动刷新有时候为了让浏览者看到最新的内容或是看到准备的特效等目的，而希望网页能自动刷新。具体方法：打开网页的HTML源文件，在<Head>里加上：

<Meta http-equiv=”progma” content=”no-cache”>

<Meta http-equiv=”expires” content=”wed,26 Feb 1997 10:10:10 GMT”>

保存退出。其中的“Refresh”表示要刷新网页，“10”是延迟的秒数，“http://url”是你的网页地址，秒数和网页地址可以按需要更换。在更换网页地址后还可以做到一项对于想做个网站的封面的朋友很有用的特效，就是让网页自动刷新，并转到另一个网页，既让浏览者看到漂亮的网站封面，又省去了点击才能进入站点的麻烦。

23．强制每次进入网页都从WEB上下载

IE浏览器在下载完网页后，会在本地硬盘上的临时文件夹（Temporary Internet Files）里保存浏览过的网页和图片，以方便下次再访问该网页时可以从硬盘上读取，进而加快浏览的速度。所以换个角度来看，想要每次进入网页都从WEB上下载，只要使网页不装入访客的硬盘就行了，或者说为网页设定一个“过期”的日子，一旦过期就要从WEB上重新下载。

具体方法：

打开网页的HTML源文件，在<HEAD>标记里加上：

<Meta http-equiv=”progma” content=”no-cache”>

<Meta http-equiv=”expires” content=”wed,26 Feb 1997 10:10:10 GMT”>

保存退出。其中“wed,26 Feb 1997 10:10:10 GMT”是一个已经过去的日子，把它当作过期的标准，无论是谁想要再浏览你的网页都必须重新下载才行了。：P
24．利用标题栏做广告笔者认为最适合标题栏的工作是提示网页自身的内容，可以让浏览者一目了然，知道自己将看到什么样的信息，以及为什么而等待。但做过站长的朋友一定知道事情并不象想象中那么简单，因为一个稍具规模的个人站点一般都有100个以上的网页，并会随着时间的推移而迅速增长（当然这是针对勤奋负责的站长而言的^_^）。受到时间和精力的限制，不可能对每一个网页都细致地总结一个标题，即使是有时间的闲人也可能会因一时的疏忽而忘了加标题。如果你用FP2000来做网页，这时候就会在标题栏看到“new page 1”（这是FP2000自动为网页加的标题），大大地破坏了网站的整体效果。如果做网页用的是模版，结果可能更糟糕，货不对板的情况会让浏览者倒足胃口。

笔者也经常为这个问题而苦恼，有一次，头被天上掉落的一重物击中，瞬间眼前金星乱冒，伸手一抓，金星没抓到，却抓到一个点子：用模版做网页前，先修改模版的标题为“欢迎光临”之类的万能欢迎词，把标题栏显示网页内容的功能该成显示欢迎词。这样一来，就不用为每个网页分别做标题而烦恼了^_^

具体方法：

打开模版网页的HTML源文件，把<title>和</title>之间的内容改为：

欢迎光临XX的网站！^_^

保存退出。当然修改的内容可以挑自己喜欢的欢迎词。 25．移动的字幕

可以动态地显示消息，比静止地发布更能吸引别人的眼球，一般用于简单扼要的新闻报道、广告用语等方面。除此之外，还有代码简洁明了，动态效果种类多，和无需使用JAVA的优势，因为实现这一效果只需要加入一个HTML标识而已。

接着，我来举些具体的实例帮助大家了解。

具体方法：

打开模版网页的HTML源文件，把<body>和</body>之间加入：

<marquee>移动字幕的实例</marquee>

<marquee direction=”left”>从左向右移动字幕的实例</marquee>

<marquee direction=”right”>从右向左移动字幕的实例</marquee>

<marquee behavior=”slide”>一次性移动字幕的实例</marquee>

<marquee behavior=”scroll”>循环移动字幕的实例</marquee>

<marquee behavior=”alternate”>来回循环移动字幕的实例</marquee>

<marquee scrollamount=”10”>快速移动字幕的实例</marquee>

<marquee hspace=”20” vspace=”20” heigt=”50” width=”50%” bgcolor=”red” align=”top”>红色背景移动字幕的实例</marquee>

保存退出。现在来解释一下代码的含义：

marquee是HTML的标识之一，用于实现文字的移动效果。IE4。0以上的浏览器才能正常显示。

Direction设置文字移动的方向。取值为left（从左向右移动）或right（从右向左移动）。

Behavior设置文字移动的方式。取值为slide（一次性移动）、scroll（循环移动）和alternate（来回循环移动）。

Scrollamount设置文字移动的速度。

Hspace（水平空白）、vspace（垂直空白）设置文字周围的空白区域。

Height（高度）、width（宽度）设置文字的宽度和高度。

Bgcolor设置文字的背景颜色。

只要使用搭配得当，即使是这样一个小小的特效也能为你的网页增色不少哦^_^
26．改变鼠标的形状

在网页上，鼠标平时呈箭头形，指向链接时成为手形，等待网页下载时成为沙漏形……这似乎是约定俗成的。虽然这样的设计能使我们知道浏览器现在的状态或是可以做什么，但这些好像还不能完全地满足我们的需要。就拿链接来说，可以是指向一个帮助文件，也可以是向前进一页或是向后退一页，针对如此多的功能光靠千篇一律的手形鼠标是不能说明问题的。值得庆幸的是，CSS提供了多达13种的鼠标形状，供我们选择。

具体方法：

在任意一个链接的标识里加入：

style=”cursor:move”

保存退出。“style”是CSS的标记，“cursor:move”表示指向该链接时鼠标变成十字箭头的形状。其它还有12种不同的形状将在附录3里介绍。

27．消除网页的边距

做完一个网页后往往会发现自己编写的内容和网页的边界还保持着一些空白，主要发生在网页的顶部和左边，对于文字来说影响还不大，不过相对网页的顶部的LOGO来说就显得很难看了。但经过仔细地检查后又没有发现任何错误的HTML代码，这是怎么一回事呢？

其实HTML的BODY标识符默认在网页的顶部和左边设置一些空白区域，来保持网页的整洁，但我们不需要的时候也可以通过BODY标识把空白去掉。

具体方法：

打开网页的HTML源文件，在标识里加上：

topmargin=”0” leftmargin=”0”

保存退出。这样就消除了网页的上边界和左边界的空白，如果需要增加留白也可以自己修改

文章评论

查看所有2条评论>>