网页制作技巧（美化网页）

蒋金阳 · 发表于 2009-6-4 02:04:31

　你可能正在建立自己的主页，正在为怎样把自己的主页建得更漂亮而发愁。美化主页的方式多种多样，比如如何把字体弄地更漂亮，如何做出种种的特技，如何加入计数器、表单甚至聊天室，如何做出动画效果等等。这里，我们首先从美化字体开始来谈谈网页制作中的各种技巧。

　　第一部分：网页字体的美化

　　从一开始做网页，我们就不断地同字体打交道，漂亮的字体给人一种美的享受，可以让人阅读起来很轻松，不会让浏览者因为眼睛吃不消而放弃浏览。

　　在HTML中，字体的控制是采用<font face="宋体" size="3" color="blue">追梦工作室</font>类似的格式来进行控制的。

其中的三个属性值的含义入下：

　　face="..."：这是字体样式的设置，例如：face="黑体"，但前提是浏览者的系统中必须安装有该字体，否则将以默认的宋体显示；另外一种格式是face="第一种字体，第二种字体"，这种格式表示假如浏览者的系统中没有安装第一种字体，那么将以第二种字体显示。

size="..."：设置字体的大小，一般是从1到7，它的默认值是+3，每次改变字体都是+3或者-3。

color="..."：设置字体的颜色，例如：color="red"，这是直接采用颜色的英文来定义；还有就是color="#000000"，这是采用颜色的RGB16进制值来定义；采用RGB16进制比采用英文名称定义表示的颜色更多，更丰富。

但是，你是不是觉得采用上面的办法定义的字体仍然不够美观，字体边缘不够圆滑，而且不具有动感。好的，我们现在就改用CSS（层叠样式表）来对字体进行控制。CSS是放在</title>和</head>之间的一段代码，例如：

BODY { FONT-FAMILY: "宋体"; FONT-SIZE: 9pt }

P { FONT-FAMILY: "宋体"; FONT-SIZE: 9pt }

BR { FONT-FAMILY: "宋体"; FONT-SIZE: 9pt }

A:link { COLOR: #000000; FONT-SIZE: 9pt; TEXT-DECORATION: none}说明了超级链接还没有被访问，它没有下划线，颜色为黑色。

A:visited { COLOR: red; FONT-SIZE: 9pt TEXT-DECORATION: none}说明了超级链接被访问过了，它没有下划线，颜色为红色。

A:active { color: blue; text－decoration:underline }说明超级链接处于活动状态，它的颜色变成了蓝色，有下划线。

A:hover { COLOR: green; TEXT-DECORATION: underline }说明鼠标移动到超级链接后，它有下划线，文字颜色变成了绿色。

</style>

　　其中，BODY...、P...、BR...这三行分别表示在标签<BODY></BODY>、&lt

></P>和<BR></BR>之间的字体的属性。所有的值大家都可以根据需要进行改变。CSS是一个非常复杂的东西，他所能够做的远不止这些，有兴趣的朋友可以多到网上看看相关的文章。

　　对于字体的美化工作，我们还可以把文字做成图片的方式来“对付”那些没有安装此种字体的浏览器，不过这种办法不适合在大段的文字上采用，因为他损失的是浏览者的下传时间。

　　第二部分：JavaScript的引用

　　JavaScript是在网页中使用得最多的一种特效了，JavaScript的结构比较简单，而实现的功能却非常强大。这里我们不向大家介绍JavaScript，因为这不是一个教程；我们只举出一些实用的JavaScript小程序例子，让你可以马上使用。

　　1、显示日期和时间（请将下列代码COPY到<body></body>之间的任何一个你想放置日期显示的地方）

<tbody>

<tr>

<!--now = new Date()hour = now.getHours() 得到当前的小时

if (hour < 12) { document.write("现在是: " + now.toLocaleString())}

else if (hour < 18){ document.write("现在是: " + now.toLocaleString())}

else if (hour >= 18) {document.write("现在是: " + now.toLocaleString())}// -->

</script>

</font></td>

</tr>

</tbody>

</table>

　　2、在状态栏显示走动的时间（请将此段代码放置到<head></head>之间）

var timerID = null; //将时间ID赋值为空

var timerRunning = false;

function stopclock (){

if(timerRunning)

clearTimeout(timerID);

timerRunning = false;

}

function showtime () {

var now = new Date();

var hours = now.getHours();

var minutes = now.getMinutes();

var seconds = now.getSeconds()

var timeValue = "" + ((hours >12) ? hours -12 :hours)

timeValue += ((minutes < 10) ? ":0" : ":") + minutes

timeValue += ((seconds < 10) ? ":0" : ":") + seconds

timeValue += (hours >= 12) ? " P.M." : " A.M."

window.status = timeValue;

timerID = setTimeout("showtime()",1000);

timerRunning = true;

}

function startclock () {

stopclock();

showtime();

}

</script>

　　3、查看本页源代码按钮（将下列代码放置到<body></body>之间的适当地方）

<FORM>

</form>

　　4、禁止查看本页源代码按钮，不过破解的方法太多了（将下列代码放置到<body></body>之间的适当地方）

function click() {

if (event.button==2) {

alert('对不起,这是秘密.')

}

document.onmousedown=click

</SCRIPT>

　　5、前进后退按钮，这两个按钮的功能如同浏览器上的“前进”和“后退”按钮（将下列代码放置到<body></body>之间的适当地方）

<FORM>

</FORM>

　　6、要在IE和NC中都能顺利播放MID音乐是一件比较头疼的事，不过有了下面的代码就简单多了（放在<body></body之间）

</script>

　　7、在状态栏显示跑马灯（代码放入<head></head>之间，然后将<body>改为<BODY onLoad="scrollIn()">

）

</SCRIPT>

其中的80表示显示速度

　　8、可以根据时间变化的欢迎词（代码放入<body></body>之间）

<script

language="Javascript">

<!-- Hiding

　var now = new Date()

　var year=now.getYear() //通过函数得到年值

　var month=now.getMonth()+1; //通过函数得到月值

　var date= now.getDate() //通过函数得到日值

　var time = now.getHours() //通过函数得到小时值

if (time>=0)

{var hello="天哪，你还不睡觉？"}

if (time>=6)

{var hello="早上好呀！"}

if (time>=9)

{var hello="上班时间，小心老板！"}

if (time>=12)

{var hello="吃午饭了吗？"}

if (time>13)

{var hello="中午睡觉了吗?"}

if (time>=18)

{var hello="吃完了饭出去走走吧！"}

if time>19)

{var hello="电视不好看吗?"}

if (time>23)

{var hello="已经很晚了，还不去睡觉？"}

var hour1=(now.getHours() >=10)?"":"0"

var m2=(now.getMinutes()>=10)?"":"0"

var t=(now.getHours()>12)?now.getHours()-12:now.getHours()

var r2 = (t >= 10) ? "" : ""

var color=(now.getSeconds()%2==0)?"ffff80":"00000f"

dcument.write("<font color=\"#",color,"\">",hello,"现在是北京时间:20",year,"年",month,"月",date,"日,",hour1,now.getHours(),"点",m2,now.getMinutes(),"分",((now.getSeconds()<10)?"0":"")+now.getSeconds(),"秒了","</font>")

　timerRunning=true

　//end hiding contents -->

　</script>

　　JavaScript的功能是强大的，但是在网页中要适当使用，绝不能滥用，否则给浏览者的感觉是你的主页仅仅是一个集中了各种特效的华而不实的特效演示站而已。

　　第三部分：在网页中加入声音

　　一般在主页中加入背景音乐有两种办法：一是用<bgsound>标志加入背景音乐；二是用<embed>标志嵌入声音。不过有一种更妙的办法，就是用FLASH，即使你不会FLASH，在看过我的介绍之后只要装上FLASH就可以自己DIY了！

　　一、用<bgSound> 标志加入背景音乐

格式：<bgsound src="mus001.mid" loop="0">

mus001.mid是音乐文件，可以改为WAV的格式。loop表示播放的循环次数，"0"和"true"都表示播放无限次。但是该方法只适用于IE浏览器。

　　二、用<embed>标志加入背景音乐

格式：<embed src="mus001.mid" width="0" height="0" hidden loop="true"></embed>

这段代码表示的意思是：背景音乐的路径和名称是mus001.mid；播放面板的长是0（width），高也是0（height）；并且将其隐藏（hidden）；音乐的循环次数是无限次（true）。

该方法对于IE和NC浏览器均适用。

　　三、采用FLASH技术加入背景音乐

FLASH有压缩比大，声音失真度小的优点，而且是对WAV文件进行压缩，所以可以制作非常COOL的背景音乐，而不同于MID这种只有好声卡才能真正听出效果的声音文件。

　　首先打开FLASH4，然后按ctrl+M键弹出“Movie Properties”窗口，在“width”和“height”属性里都填入18 px（因为这是Flash4支持的最小文件大小），然后将Background改为你的网页的背景色一致的颜色，点击OK！

按ctrl+R，选择你要加入的WAV文件，然后“打开”，将WAV文件加入到你的第一祯中，然后双击第一祯，在弹出的“Frame Properties”窗口的“Sound”标签的“Loops”属性中填入WAV声音的循环次数，如果需要无限次循环，我想填入10000就够了，最后“确定”。

　　按Ctrl+Shift+Alt+S将这个文件压缩输出为一个SWF文件，这样背景音乐就做好了

最后将这个SWF文件插入到你的主页的任何一个地方就行了！插入的方法可以在dreamweaver中完成，也可以把这一段代码加入到HTML文件中：

</embed>

</object>

　　注意：这里的width和height的值为0表示将这个SWF隐藏起来，所以这个SWF的作用仅仅就是播放背景音乐。

　　是否加入背景音乐需要考虑清楚，因为有的主题的主页不适合加入背景音乐，否则可能会引起访问者的反感。另外如果考虑到浏览速度，最好不要加入背景音乐，因为声音的下载是很耗时间的。

　　第四部分：网页元素的定位

　　网页元素的定位一直是一个另人头痛的问题，因为有可能你在800x600的分辨率下设计得非常漂亮的主页到了1024x768的分辨率下就变得面目全非、惨不忍睹了。其中因为<table></table>的设置不当是一个很重要的原因，通常制做者在建立TABLE的时候都是将TABLE的宽度用默认的占屏幕宽的“%”表示，因此一旦屏幕的显示分辨率改变，就会引起TABLE大小的改变，这时你就可以想象本来在TABLE里定好位的图象、文字及其它网页元素的位置会发生什么样的变化了。也许对于经验丰富的网页制作者可以较好地处理这个问题，让网页元素在不同的分辨率下都能正确地定位。但是对于广大的刚入门的朋友解决这个问题就麻烦了，所以这里建议大家将进行定位控制的最大的一个TABLE的大小单位从“%”改为“pixels"

　　这样在不同的分辨率下，大表的大小总是不变的，也就不会出现定位错乱的情况了。另外，还有一个更为简单，更为方便的定位办法，那就是使用Dreamweaver中的Layer（层）技术，Layer技术定位因为采用的是(x,y)坐标控制，所以非常的精确；而且层与层之间可以重叠，层的位置可以随意改变，可以建立无限个层……这些优点使Layer定位成为最为流行的定位技术。点击Dreamweaver中的Objects控制面板上的Draw Layer按钮，然后就可以在页面上的任何一个位置“画”一个层，用鼠标点击该层将其选中，然后等鼠标变为十字箭头时就可以将层移动到任何一个地方。层不够了可以画第二个、第三个……怎么样？是不是够简单

　　第五部分：网页图形图像技巧

不少的网站都有制作非常精美的图片，有时自己也想试着做一做，可是就是达不到那种需要的效果，这里向大家介绍几种图片制作的技巧。

　　一、制做图片边缘的羽化效果

1.在Photoshop中打开需要制作的图片;

2.用Rectangular Marquee Tool工具将需要羽化的局部图象选中

3.在select菜单下选择feather(羽化)命令,选择3pixels; （大小可以随自己需要羽化的程度而定）

4.按Ctrl+C将这部分图象拷贝;

5.建立一个新图像，按Ctrl+V将刚才的图象past进去,

6.按Ctrl+e合并所有层，save.OK!

　　二、如何制作抽线图

1.首先用photoshop新建一个背景为白色的图片，宽1pixels，高2pixels；

2.将它放大直到可以看得清楚，用矩形选择工具，选取上半部分，并用黑色填充

3.按Ctrl+A选择图象全部，选择Edit菜单下的Define Pattern将它设为默认填充块；

4.打开你需要进行抽线的图片；

5.新建一个层，选择Edit菜单下的fill项，会弹出一个对话窗；

6.在其中的use项中选pattern作为填充块，下面的透明度百分比自己随意设置

7.在layer窗里将新layer层的属性改为overlay，一切就这么简单

layer的属性还有很多种，大家可以逐个试试，可以发现不少特殊的效果。

　　三、如何制作透明背景的GIF图片

1、首先打开图像，选择Image菜单下mode下的indexed color...转换图像格式、进行颜色索引；

2、选择File菜单下的Export的第一项：GIF89a Export,跳出一个Options窗口，用吸管在背景上点一下（或者在调色板上选取需要的一种颜色，在图像背景上点一下），选OK，储存既可。

　　第六部分：其他技巧

一、有些页面，如果你把鼠标指向某个连接，在状态栏会出现该连接的说明。其实，只要在连接语句中加入以下内容，就可以实现了！“追梦工作室”几个字就是说明，是可以随便改的！

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

二、在Netscape中是不能实现自动换行的，所以在浏览某些页面的时候一行字会很长很长，让人看起来非常的不方便，不过我们也有对付的办法，将下面的代码加入到<head>和<title>之间就行了！

<HTML>

<HEAD>

</HEAD>

</HTML>

三，有的页面在一定的时间后会自动的连接到另一页，这种实现的办法也非常简单，将下面的代码COPY到</title>和</head>之间就行了。

其中30表示30秒以后进入到另一页，xxx.htm表示另一页的url地址及名称。

四、有些带FRAME的主页，按下其中一个连接后，经常在一个小小的窗口中又出现一个分栏的主页。其实，只要在连接语句中加入以下的内容，就可以开启一个新的窗口来浏览连接内容。

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

五、<meta>小技巧

META的使用。有几个导航台（如ALTAVISTA, Hotbot, Infoseek）使用META作为识别标志，所以要正确使用这些信息。META里的Keywords和Description非常重要，它的格式为：

　　<head>

　　</head>

假如您想要让那些想看网页设计的人们来到你的主页，您可以使用<META>标签和以下关键字：

<METANAME="keywords"CONTENT="网页设计...">

同样地，假如您设定"description"为NAME的值，您可以包含一段有的文字来介绍网站，而不是几串关键字。您的描述将出现在搜寻引擎的结果表上，而不是网页的前200字。例如：

<METANAME="description"CONTENT="本工作室是一个提供专业的Ｗｅｂ站点策划、网页制作、网上营销策划、提供电子商务解决方案，专门为个人、公司、企业以及政府提供网站建设服务的ＡＳＰ。">

<br /><br /><blockquote class="blockquote">From: http://www.niaoz.com/read-htm-tid-397.html Powered by PHPWind.com</blockquote>