网页设计的小技巧

摘要：本文介绍了用Dreamweaver进行网页设计过程中的十四个小技巧，包括FLASH的透明背景显示，浮动框架的运用，简单CSS样式实现链接的样式，表格的特殊应用以及水平线等内容，同时指明了解决此类问题的大致方法。

关键词：网页设计；技巧；运用；代码

中图分类号：TP317文献标识码：A文章编号：1009-3044(2008)08-10ppp-0c

1 引言

我们在进行网页设计时，经常会遇到很多的问题，往往会一筹莫展，找不到解决的出口，而实际上在经过摸索与再实验后，会发现解决这些问题真的很简单！

笔者经过长时期的实践，在这里将我平时实践过程遇到的问题以及解决方法进行了一番总结，希望能够给大家带来帮助。

2 网页设计技巧

2.1 FLASH透明背景显示

当我们打开这个网页制作大宝库时，我们经常会为桌面上几条小金鱼的自由游动而吸引，它们能够自由地穿梭于网页的文字图片之中，这种效果是怎么实现的呢？在我工作过程当中，很多的学生碰到这个问题。实际上我们在网页当中插入一个FLASH，这种操作是非常简单的，那么如何实现让插入的这个FLASH在网页中实现透明背景的效果呢？细心的同学可能注意到，当选中插入的FLASH时，编辑区下方的“属性”右下角有一个“参数”的按钮，当我们点击“参数”按钮后，就弹出一个对话框，我们在左边的“参数”填写“wmode”，并在右边“值”的选项框中填入“transparent”，点击“确定”按钮，回到编辑区。当我们再用F12进行浏览网页时，发现网页中的FLASH已经在网页中呈透明背景显示了。

2.2 IFRAME框架的运用

有时候，我们打开某个网站，其中都有那么一部分，仿佛是别人网站上的内容或者完全就是别人网站的某个页面；比如很多的网站都会有一个时钟或者一个日历，当我们用“另存为”将此页面保存完后，用dreamweaver 软件进行编辑时，却找不到相关的程序，那么这些程序到底躲到哪里去了呢？我又如何对这些时钟或者日历进行代码的修改呢？

学习过框架的同学肯定知道，框架的意思通俗一点讲就是把别人的网页显示在自己的网页中。在框架的知识中，我们有一个浮动框架，就能将上面所讲的问题得到完美的解决。

举个例子来进行说明，比如我想把“新浪”网站首页在我的网页中进行显示，只需要在网页中需要放置“新浪”网站的位置写入下列的语句，一切问题就可以解决。

＜iframe src=".cn" width="400"height=400 marginwidth="0"

marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"＞＜/iframe＞

显示出来的“新浪网站”的大小与形式，我们可通过其中的width与height等参数进行设置 ，从而把别人的网页无缝地与自己的网页融合在一起。

2.3 如何避免别人把你的网页放在框架中？

我们在上面的技巧二中，讲到如何将别人的网页放入自己的网页中，而实际上很多网站的制作者，都不甘愿让别人这么轻易地拿走自己的东西，所以，这个时候就会想，有什么办法能避免别人把你的网页放在框架中呢？

你只需要在网页源代码的＜head＞＜/head＞之间加入以下代码内容：

＜script language=“javascript”＞

＜!--

if (self!=top){top.location=self.location;}

--＞

＜/script＞

2.4 如何让表格中的背景图片显示

有时候我们明明在单元格中插入了背景图片，而且在Dreamweaver的视窗里也可以看到，但是一预览背景图片就不显示了。遇到这种请情况，不要着急，检查一下你的代码是否正确，我们来看一段表格的代码，代码如下：

＜table width="300" border="1" cellspacing="0" cellpadding="0" bordercolor="#000000"＞

＜tr background="yx.gif"＞

＜td height="19"＞ ＜/td＞

＜td height="19"＞ ＜/td＞

＜/tr＞

＜/table＞

不错，上面的背景图确实有(background="yx.gif")，但由于放错了地方，所以就显示不出来了，请把背景属性放在＜td＞标记里面，然后再预览一次，怎么样，这次出来了吧！

2.5 背景图片不随网页的内容而滚动

当我们在过情人节或者春节的时候，总会收到很多朋友们发过来的一个个祝贺性质的网址，当我们浏览时，总会发现，拖动右边的滚动条时，感觉只有网页的内容随着滚动条的滚动而滚动，而背景却完全没有动，这种效果又是如何实现的呢？

给网页加入背景图片，有很多的方法，这里不一一列举，这是网页设计里面一个很简单的操作。如何让背景图片固定不动呢，我们只需要将＜body＞参数设置为以下代码，就可以实现了。

＜body background="yx.gif"bgproperties="fixed"＞

或用CSS样式表定义：

＜style type="text/css"＞

＜!--

body { background-image: url(yx.gif); background-attachment: fixed}

--＞

＜/style＞

2.6 给超级链接进行颜色设置(CSS)，鼠标形状设置，链接的下划线的设置

初学者打开很多门户性网站或者艺术性质的网站，总会被其中专业的链接惊喜很久，因为在自己动手制作网页当中，我们进行简单的超级链接设置后，发现浏览出来的页面总是会有那么一点粗糙，无论我们怎么点击“链接”项，它的颜色总是一样，而且会在文字下方永远保持着一条下划线，同时鼠标也没有任何的变化，那么如何做，才能给超级链接进行颜色设置（CSS），鼠标形状设置，链接的下划线的设置呢？

这需要借助于我们Dreamweaver 自带的CSS样式进行，下面的代码分别实现下列的效果：

当正常链接时，链接的颜色为黑色，无下划线，字体大小为12像素。

当某个链接被访问过后，链接的颜色为灰色， 无下划线，字体大小为12像素。

当鼠标在链接上方停留时，链接的颜色为红色，有下划线，字体大小为14像素。

当我们点击链接时，链接的颜色显示为黄色，无下划线，字体大小为12像素。

只需要将下列的代码加入到＜head＞与＜/head＞之间，即可。

＜style type="text/css"＞

＜!--

a:link {

font-size: 12px; color: #000000; text-decoration: none;

}

a:visited {

font-size: 12px; color: #666666; text-decoration: none;

}

a:hover {

color: #FF0000; text-decoration: underline; font-size: 14px;

}

a:active {

font-size: 12px; color: #FFFF00; text-decoration: none;

}

--＞

＜/style＞

其中的color就是用来设置链接的颜色，text_decoration用来设置链接是否应该有下划线、上划线、删除线或者什么没有，而font-size是用来设置字体的大小的，但几种状态之间的font-size值的变化，让访问者产生一种动态的效果。

尤其要注意的是，我们在写的时候一定要注意这个CSS样式的书写顺利，一定要按照a:link、a:visited、a:hover、a:active依次书写，否则这几种状态的效果将得不到正常的显示。

看完链接的颜色与下划线的设置后，我们来了解下在不同的链接上所显示出来的不同的鼠标形状是如何进行设置的呢？

我们知道，当把鼠标移动到不同的地方时，当鼠标需要执行不同的功能时，当系统处于不同的状态时，都会使鼠标的形状发生改变。用CSS来改变鼠标的属性，就是当鼠标移动到不同的元素对象上面时，让鼠标以不同的形状、图案显示。在CSS当中，这种样式是通过“cursor”属性来实现的。Cursor属性有很多的属性值，我们来看一下它的详细列表,见图1。

图1 Cursor属性值

具体的应用，看下列的代码实现，这种是在具体的网页进行内嵌样式的方式进行设置：

＜p＞＜span style=“cursor:hand”＞手的形状＜/span＞＜br＞ //*设置鼠标属性为手的形状*//

＜span style=“cursor:move”＞移动＜/span＞＜br＞//*设置鼠标属性为移动*//

＜span style=“cursor:ne-resize”＞反方向＜/span＞＜br＞//*设置鼠标属性为反方向*//

＜span style=“cursor:wait”＞等待＜/span＞＜br＞//*设置鼠标属性为等待*//

＜span style=“cursor:help”＞求助＜/span＞//*设置鼠标属性为求助*//

同样，我们也可以在CSS样式中进行设置，见下列的代码：

a:link

{font-size: 12px; color: #000000; text-decoration: none;cursor: hand;}

2.7 隐藏浏览器中状态栏的URL地址信息的方法

浏览网页，当鼠标停留在链接上方时，在下面的状态栏中会自动显示该链接目标地址，考虑到安全方面的问题，有时我们需要把它重置为“零”，即设为空白。现在只需要在链接代码中做些设置就可以实现了，如下：

＜a href="http://" onMouseOver="window.status='none';return true"＞湖南商务学院＜/a＞

2.8 如何制作“空链接”

空链接也就是，没有链接对象的链接，在空链接中，目标URL是用“#”来表示的。也就是说制作链接时，只要在属性板的LINK输入框中录入#标记，它就是个空链接了。空链接的出现涉及到多方面的因素，比如一些没有定期完成的页面，又为了保持页面显示上的一致（链接样式与普通文字样式的不同），就可以使用它了。

2.9 实现在同一张图片上进行多个链接的操作

当需要查询“中国”-“湖南”的天气预报时，我们会打开某个网站，比如：/，找到“湖南”地区时，页面中会出现一个湖南的地图，当我们需要查询“长沙”的天气情况时，我们只需要在长沙的名称上点击就可以进入该城市的天气情况页面，想要查看其它城市的天气情况，只需要在某个城市名称上方进行鼠标点击就可以了。这种在同一张图片进行的多个链接，是如何实现的呢？

在Dreamweaver 中提供了一种客户端图像映像的操作，通俗的讲就是“热区”的操作，当我们在Dreamweaver的编辑区域选中某一幅图片时， “属性”窗口中左下角会出现一个“map”选项，提供了三种不同的热点选择工具，分别为：矩形、椭圆形以及多边形，三种工具任意选择，就可以实现在同一张图片上进行多个链接的效果了。

2.10 水平线设置

经常有学生问我一些关于水平线设置方面的问题，比如：如何利用水平线来制作一条竖线？如何设置水平线的颜色？

一般，我们在网页中插入水平线后，打开代码视图，会有以下的代码：

＜hr width="600"＞ //*在网页中插入了一条横向的水平线*//

在＜hr＞标记中，我们除了有width属性设置水平线的宽度外，还有size属性用来设置水平线的高度，大家换个思路想想，当width=600时，我们画出了一条横线，那么如果我们将height=600,是不是会画出一条竖线出来呢。

事实证明，以下的代码会在网页中画出一条竖线出来。

＜hr width="1" size="600"＞//*在网页中插入了一条竖向的水平线*//

这个时候显示出来的水平线都是系统默认的灰色，那么怎么样进行多种颜色的设置呢，这个时候我们仍然要借助于代码来实现，若想将水平线设置为“red”色，则需要加入下列的代码：

＜hr width="1" size="600" color="#FF0000"＞

大家看，是不是已经设置好了呢。

2.11如何在添加背景音乐

在微软的网页工具-Frontpage中，有关于背景音乐的设置功能，那么Dreamweaver显然没有作到这点，因此要使用的话，只能在源代码中手动添加了。在使用前，提醒大家一点，使用背景音乐一定要注意网页文件的大小，不能顾此失彼。

方法一：借助于＜embed＞属性进行设置

代码如下：

＜EMBED src="11.mp3" autostart="true"loop="2"width="80"height="30"＞

其中src指定音乐文件的位置，autostart为音乐文件上传后的动作，true表示自动开始播放，false不播放（默认值）。

方法二：＜bgsound＞属性的运用

＜bgsound="你要加的音乐文件.wav" loop="播放的次数"＞

其中loop属性为0时表示循环播放， 但bgsound标记只能适用于IE。有很多朋友使用FRONTPAGE做主页,只须在页面中点击右键,选择页面属性,选定背景乐就可以了。其原理是使用bgsound标记。

如果不想使用代码来进行设置的话，我们可以用下列的方式实现同样的效果。借助于dreamweaver软件自带的“行为”中的“播放声音”进行设置，若想要打开页面时，自动播放音乐，我们只需要将“事件”改为onLoad即可。

2.12 在dreamweaver用background 插入flash播放器

很多的网页都会有一个FLASH播放器进行音乐的播放，特别像现在很火的博客，几乎都会在主页当中有这么一个时尚的FLASH播放器，那么如何在dreamweaver实现flash播放器的插入呢，我们这里借助于background属性，下面就是一个实例的代码，仅仅需要将这些代码放在＜head＞与＜/head＞之中即可：