《第一部分：网页字体的美化》由会员分享，可在线阅读，更多相关《第一部分：网页字体的美化（9页珍藏版）》请在金锄头文库上搜索。
1、你可能正在建立自己的主页，正在为怎样把自己的主页建得更漂亮而发愁。美化主页的方式多种多样，比如如何把字体弄地更漂亮，如何做出种种的特技，如何加入计数器、表单甚至聊天室，如何做出动画效果等等。这里，我们首先从美化字体开始来谈谈网页制作中的各种技巧。第一部分：网页字体的美化从一开始做网页，我们就不断地同字体打交道，漂亮的字体给人一种美的享受，可以让人阅读起来很轻松，不会让浏览者因为眼睛吃不消而放弃浏览。在 HTML 中，字体的控制是采用追梦工作室类似的格式来进行控制的。其中的三个属性值的含义入下：face=“.“：这是字体样式的设置，例如：face=“黑体“，但前提是浏览者的系统中必须安装有该字体
2、，否则将以默认的宋体显示；另外一种格式是 face=“第一种字体，第二种字体“，这种格式表示假如浏览者的系统中没有安装第一种字体，那么将以第二种字体显示。size=“.“：设置字体的大小，一般是从 1 到 7，它的默认值是+3，每次改变字体都是+3 或者-3。color=“.“：设置字体的颜色，例如：color=“red“，这是直接采用颜色的英文来定义；还有就是color=“#000000“，这是采用颜色的 RGB16 进制值来定义；采用 RGB16 进制比采用英文名称定义表示的颜色更多，更丰富。但是，你是不是觉得采用上面的办法定义的字体仍然不够美观，字体边缘不够圆滑，而且不具有动感。好的，我
3、们现在就改用 CSS（层叠样式表）来对字体进行控制。CSS 是放在和之间的一段代码，例如：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: no
4、ne说明了超级链接被访问过了，它没有下划线，颜色为红色。A:active color: blue; textdecoration:underline 说明超级链接处于活动状态，它的颜色变成了蓝色，有下划线。A:hover COLOR: green; TEXT-DECORATION: underline 说明鼠标移动到超级链接后，它有下划线，文字颜色变成了绿色。其中，BODY.、P.、BR.这三行分别表示在标签、和之间的字体的属性。所有的值大家都可以根据需要进行改变。CSS 是一个非常复杂的东西，他所能够做的远不止这些，有兴趣的朋友可以多到网上看看相关的文章。对于字体的美化工作，我们还可以把文字
5、做成图片的方式来“对付”那些没有安装此种字体的浏览器，不过这种办法不适合在大段的文字上采用，因为他损失的是浏览者的下传时间。第二部分：JavaScript 的引用JavaScript 是在网页中使用得最多的一种特效了，JavaScript 的结构比较简单，而实现的功能却非常强大。这里我们不向大家介绍 JavaScript，因为这不是一个教程；我们只举出一些实用的 JavaScript 小程序例子，让你可以马上使用。1、显示日期和时间（请将下列代码 COPY 到之间的任何一个你想放置日期显示的地方）= 18) document.write(“现在是: “ + now.toLocaleString
6、()/ 2、在状态栏显示走动的时间（请将此段代码放置到之间）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()va
7、r timeValue = “ + (hours 12) ? hours -12 :hours)timeValue += (minutes = 12) ? “ P.M.“ : “ A.M.“window.status = timeValue;timerID = setTimeout(“showtime()“,1000);timerRunning = true;function startclock () stopclock();showtime();3、查看本页源代码按钮（将下列代码放置到之间的适当地方）4、禁止查看本页源代码按钮，不过破解的方法太多了（将下列代码放置到之间的适当地方）func
8、tion click() if (event.button=2) alert(对不起,这是秘密.)document.onmousedown=click5、前进后退按钮，这两个按钮的功能如同浏览器上的“前进”和“后退”按钮（将下列代码放置到之间的适当地方）6、要在 IE 和 NC 中都能顺利播放 MID 音乐是一件比较头疼的事，不过有了下面的代码就简单多了（放在) else document.write() /7、在状态栏显示跑马灯（代码放入之间，然后将改为）= Message.length) place=1;window.setTimeout(“scrollOut()“,300); else
9、place+;window.setTimeout(“scrollIn()“,50); function scrollOut() window.status=Message.substring(place, Message.length);if (place = Message.length) place=1;window.setTimeout(“scrollIn()“, 100); else place+;window.setTimeout(“scrollOut()“, 50); / End 其中的 80 表示显示速度8、可以根据时间变化的欢迎词（代码放入之间）=0)var hello=“天哪
10、，你还不睡觉？“if (time=6)var hello=“早上好呀！“if (time=9)var hello=“上班时间，小心老板！“if (time=12)var hello=“吃午饭了吗？“if (time13)var hello=“中午睡觉了吗?“if (time=18)var hello=“吃完了饭出去走走吧！“if time19)var hello=“电视不好看吗?“if (time23)var hello=“已经很晚了，还不去睡觉？“var hour1=(now.getHours() =10)?“:“0“var m2=(now.getMinutes()=10)?“:“0“var
11、 t=(now.getHours()12)?now.getHours()-12:now.getHours()var r2 = (t = 10) ? “ : “var color=(now.getSeconds()%2=0)?“ffff80“:“00000f“dcument.write(“,hello,“现在是北京时间:20“,year,“年“,month,“月“,date,“日,“,hour1,now.getHours(),“点“,m2,now.getMinutes(),“分“,(now.getSeconds()“)timerRunning=true/end hiding contents J
12、avaScript 的功能是强大的，但是在网页中要适当使用，绝不能滥用，否则给浏览者的感觉是你的主页仅仅是一个集中了各种特效的华而不实的特效演示站而已。第三部分：在网页中加入声音一般在主页中加入背景音乐有两种办法：一是用标志加入背景音乐；二是用标志嵌入声音。不过有一种更妙的办法，就是用 FLASH，即使你不会 FLASH，在看过我的介绍之后只要装上 FLASH 就可以自己 DIY 了！一、用 标志加入背景音乐格式：mus001.mid 是音乐文件，可以改为 WAV 的格式。loop 表示播放的循环次数，“0“和“true“都表示播放无限次。但是该方法只适用于 IE 浏览器。二、用标志加入背景音
13、乐格式：这段代码表示的意思是：背景音乐的路径和名称是 mus001.mid；播放面板的长是 0（width） ，高也是 0（height） ；并且将其隐藏（hidden） ；音乐的循环次数是无限次（true） 。该方法对于 IE 和 NC 浏览器均适用。三、采用 FLASH 技术加入背景音乐FLASH 有压缩比大，声音失真度小的优点，而且是对 WAV 文件进行压缩，所以可以制作非常COOL 的背景音乐，而不同于 MID 这种只有好声卡才能真正听出效果的声音文件。首先打开 FLASH4，然后按 ctrl+M 键弹出“Movie Properties”窗口，在“width”和“height”属性里
14、都填入 18 px（因为这是 Flash4 支持的最小文件大小） ，然后将 Background 改为你的网页的背景色一致的颜色，点击 OK！按 ctrl+R，选择你要加入的 WAV 文件，然后“打开”，将 WAV 文件加入到你的第一祯中，然后双击第一祯，在弹出的“Frame Properties”窗口的“Sound”标签的“Loops”属性中填入 WAV 声音的循环次数，如果需要无限次循环，我想填入 10000 就够了，最后“确定”。（图一）按 Ctrl+Shift+Alt+S 将这个文件压缩输出为一个 SWF 文件，这样背景音乐就做好了。 （图二）最后将这个 SWF 文件插入到你的主页的任
15、何一个地方就行了！插入的方法可以在 dreamweaver中完成，也可以把这一段代码加入到 HTML 文件中：注意：这里的 width 和 height 的值为 0 表示将这个 SWF 隐藏起来，所以这个 SWF 的作用仅仅就是播放背景音乐。是否加入背景音乐需要考虑清楚，因为有的主题的主页不适合加入背景音乐，否则可能会引起访问者的反感。另外如果考虑到浏览速度，最好不要加入背景音乐，因为声音的下载是很耗时间的。第四部分：网页元素的定位网页元素的定位一直是一个另人头痛的问题，因为有可能你在 800x600 的分辨率下设计得非常漂亮的主页到了 1024x768 的分辨率下就变得面目全非、惨不忍睹了。
16、其中因为的设置不当是一个很重要的原因，通常制做者在建立 TABLE 的时候都是将TABLE 的宽度用默认的占屏幕宽的“%”表示，因此一旦屏幕的显示分辨率改变，就会引起TABLE 大小的改变，这时你就可以想象本来在 TABLE 里定好位的图象、文字及其它网页元素的位置会发生什么样的变化了。也许对于经验丰富的网页制作者可以较好地处理这个问题，让网页元素在不同的分辨率下都能正确地定位。但是对于广大的刚入门的朋友解决这个问题就麻烦了，所以这里建议大家将进行定位控制的最大的一个 TABLE 的大小单位从“%”改为“pixels”，（图三）这样在不同的分辨率下，大表的大小总是不变的，也就不会出现定位错乱的情况了。另外，还有一个更为简单，更为方便的定位办法，那就是使用 Dreamweaver 中的 Layer（层）技术，Layer 技术定位因为采用的是(x,y)坐标控制，所
