论文部分内容阅读
摘要：本文介绍了用Dreamweaver进行网页设计过程中的十四个小技巧，包括FLASH的透明背景显示，浮动框架的运用，简单CSS样式实现链接的样式，表格的特殊应用以及水平线等内容，同时指明了解决此类问题的大致方法。
关键词：网页设计；技巧；运用；代码
中图分类号：TP317文献标识码：A文章编号：1009-3044(2008)08-10ppp-0c
1 引言
我们在进行网页设计时，经常会遇到很多的问题，往往会一筹莫展，找不到解决的出口，而实际上在经过摸索与再实验后，会发现解决这些问题真的很简单！
笔者经过长时期的实践，在这里将我平时实践过程遇到的问题以及解决方法进行了一番总结，希望能够给大家带来帮助。
2 网页设计技巧
2.1 FLASH透明背景显示
当我们打开www.daobaoku.com这个网页制作大宝库时，我们经常会为桌面上几条小金鱼的自由游动而吸引，它们能够自由地穿梭于网页的文字图片之中，这种效果是怎么实现的呢？在我工作过程当中，很多的学生碰到这个问题。实际上我们在网页当中插入一个FLASH，这种操作是非常简单的，那么如何实现让插入的这个FLASH在网页中实现透明背景的效果呢？细心的同学可能注意到，当选中插入的FLASH时，编辑区下方的“属性”右下角有一个“参数”的按钮，当我们点击“参数”按钮后，就弹出一个对话框，我们在左边的“参数”填写“wmode”，并在右边“值”的选项框中填入“transparent”，点击“确定”按钮，回到编辑区。当我们再用F12进行浏览网页时，发现网页中的FLASH已经在网页中呈透明背景显示了。
2.2 IFRAME框架的运用
有时候，我们打开某个网站，其中都有那么一部分，仿佛是别人网站上的内容或者完全就是别人网站的某个页面；比如很多的网站都会有一个时钟或者一个日历，当我们用“另存为”将此页面保存完后，用dreamweaver 软件进行编辑时，却找不到相关的程序，那么这些程序到底躲到哪里去了呢？我又如何对这些时钟或者日历进行代码的修改呢？
学习过框架的同学肯定知道，框架的意思通俗一点讲就是把别人的网页显示在自己的网页中。在框架的知识中，我们有一个浮动框架，就能将上面所讲的问题得到完美的解决。
举个例子来进行说明，比如我想把“新浪”网站首页在我的网页中进行显示，只需要在网页中需要放置“新浪”网站的位置写入下列的语句，一切问题就可以解决。
＜iframe src="http://www.sina.com.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。
其中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＞之中即可：
＜style type="text/css"＞
＜!--
body {
background:url("JAVASCRIPT:window.onload=function plays(){
var player=’＜object type="application/x-shockwave-flash" width="210" height="20"＞＜param name="movie" value="http://www.0hao2.com/flash/mp3player1.swf?
关键词：网页设计；技巧；运用；代码
中图分类号：TP317文献标识码：A文章编号：1009-3044(2008)08-10ppp-0c
1 引言
我们在进行网页设计时，经常会遇到很多的问题，往往会一筹莫展，找不到解决的出口，而实际上在经过摸索与再实验后，会发现解决这些问题真的很简单！
笔者经过长时期的实践，在这里将我平时实践过程遇到的问题以及解决方法进行了一番总结，希望能够给大家带来帮助。
2 网页设计技巧
2.1 FLASH透明背景显示
当我们打开www.daobaoku.com这个网页制作大宝库时，我们经常会为桌面上几条小金鱼的自由游动而吸引，它们能够自由地穿梭于网页的文字图片之中，这种效果是怎么实现的呢？在我工作过程当中，很多的学生碰到这个问题。实际上我们在网页当中插入一个FLASH，这种操作是非常简单的，那么如何实现让插入的这个FLASH在网页中实现透明背景的效果呢？细心的同学可能注意到，当选中插入的FLASH时，编辑区下方的“属性”右下角有一个“参数”的按钮，当我们点击“参数”按钮后，就弹出一个对话框，我们在左边的“参数”填写“wmode”，并在右边“值”的选项框中填入“transparent”，点击“确定”按钮，回到编辑区。当我们再用F12进行浏览网页时，发现网页中的FLASH已经在网页中呈透明背景显示了。
2.2 IFRAME框架的运用
有时候，我们打开某个网站，其中都有那么一部分，仿佛是别人网站上的内容或者完全就是别人网站的某个页面；比如很多的网站都会有一个时钟或者一个日历，当我们用“另存为”将此页面保存完后，用dreamweaver 软件进行编辑时，却找不到相关的程序，那么这些程序到底躲到哪里去了呢？我又如何对这些时钟或者日历进行代码的修改呢？
学习过框架的同学肯定知道，框架的意思通俗一点讲就是把别人的网页显示在自己的网页中。在框架的知识中，我们有一个浮动框架，就能将上面所讲的问题得到完美的解决。
举个例子来进行说明，比如我想把“新浪”网站首页在我的网页中进行显示，只需要在网页中需要放置“新浪”网站的位置写入下列的语句，一切问题就可以解决。
＜iframe src="http://www.sina.com.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。
其中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＞之中即可：
＜style type="text/css"＞
＜!--
body {
background:url("JAVASCRIPT:window.onload=function plays(){
var player=’＜object type="application/x-shockwave-flash" width="210" height="20"＞＜param name="movie" value="http://www.0hao2.com/flash/mp3player1.swf?