15.实现有立体感的表格边框
欢 迎 光 临
编程技巧
闪电空间
网上学习
真情无限
笑话乐园
给 我 写 信
如果你用Dreamwaver实现起来十分简单：
<1>我们先来插入一个表单：选择“Insert”－>“Table”，在弹出的对话框中设置为7行1列，设置宽度为125 Pixels，然后点击确定；
<2>选择“Windows”菜单，点击“Properties”项，“调出“Properties(属性)”窗口；
<3>将鼠标在刚才插入的表格中点一下，然后按下“Ctrl+A”,选中整个表格，这时属性框中显示的是表格的属性；
<4>修改表格属性如下图：
把“CellPad”设为1，“CellSpace”设为0，边框宽度“Border”设为1，将亮边框“Light Brdr”设为较深的颜色(比背景色要深)，将暗边框“Dark Brdr”设为白色，最后设置背景色为“#FF66CC”以完成设置。
经过这样的一番设置，便出现了带有立体感的表格(使用Netscape浏览器可能没有此种效果)。如果你喜欢手写代码，那你把表格的属性做相应修改即可。此表格的源代码如下：
<table width="25%" border="1" cellspacing="0" cellpadding="1" bordercolorlight="#cc0066"
bordercolordark="#ffffff" bgcolor="#ff66cc" align="center">
|
(插入内容）
</table>
16.定制站点导航条
很多网站都有“站点导航条”，通过它能使浏览网站的网友清楚明了的知道网站的结构，并能迅速找到自己感兴趣的内容。
以Dreamwaver为例点击“Insert”菜单->“Form Object”，选择“List/Menu”(插入一个列表菜单）并单击，这时在编辑的网页上便插入一个组件，你也可在“Object”对话框中找到这个组件。如图所示：
下面我们对“List/Menu”组件的属性作如下设置：
<1>打开“Properties”对话框，选择“Type”值为“List(下拉列表)”，然后点击“List Values...”（点击添加条目）下面我们对“List/Menu”组件的属性作如下设置：
<2>在“List Values”对话框中输入站点导航的各个条目；其中左边是站点的名称，右面为站点对应的链接，我们根据自己的实际情况添入各条目的值，这里我们把第一项填为“我的站点导航”，并把“Value”值设为当前页，也就是本页，这一个条目是做默认显示用的，点击“OK”确定；
<3>这时属性对话框中显示出了我们刚才添入的条目，我们点击选中第一项“我的站点导航”作为默认的显示项，然后在上图所示的属性框中设置“List/Menu”的名字为“select”(如果一个网页中有多个组件则命名应加以区分)；
<4>在代码中找到刚才加入的“Select”所对应的语句，然后在图示位置添加一个“onChange”语句，这句话的作用是当我们在站点导航中选择某一站点时，即触发“onChange”事件时调用第5步中我们插入的“change”函数；
<select name="select" size="1">
<option value="pm016.htm">我的站点导航</option>
<option value="pm015.htm">编程技巧</option>
<option value="pm016.htm#1">闪电空间</option>
<option value="pm016.htm#1">网上学习</option>
<option value="pm016.htm#1">真情无限</option>
<option value="pm016.htm#1">笑话乐园</option>
</select>
<5>最后一步是在网页中的<HEAD>中插入如下这样一段JavaScrip语句，其中第四行的“var url=""”，我们设为空值，而在你将网页上传到服务器时最好把空值改为服务器的地址，以免发生意外错误。
源码粘贴框：1.在“select”标签中添加一个“onChange”语句
<select name="select" size="1">
<option value="pm016.htm" selected>我的站点导航</option>
<option value="pm015.htm">编程技巧</option>
<option value="pm014.htm">闪电空间</option>
<option value="pm013.htm">网上学习</option>
<option value="pm016.htm#1">真情无限</option>
<option value="pm016.htm#1">笑话乐园</option>
</select>
2.在网页中的<HEAD>中插入如下这样一段JavaScrip语句:
<script language="Javascript" src="/pub/js/head.js"></script>
<script language="javascript">
<!--
function change(myform)
{
var url="";
url=myform.select.options[myform.select.options.selectedIndex].value;
top.location.href=url;
}
//-->
</script>
到这里我们就定制好了自己的“站点导航条”，如果你使用Frontpage做网页，你可以在“插入”->“表单”->“下拉列表”中实现同样的效果。最后顺便提一下“站点导航条”的定位问题，从组件框中插入的组件经常出现放不到我们想要的位置的情况，而对这些组件的定位，我们一般采用表格来实现。如果你对表格定位的使用还不熟悉的话，请看下个技巧的内容---表格定位技巧。
17.DM查找替换的技巧(一)
在开发建设网站的过程中，也许我们会遇到这样的情况，当我们的网站已经进行了相当部分，但是发现还需要对某些细节进行修改。这时候不可能完全的依靠手工去更改了，怎么办呢？利用Dreamwaver中查找替换也许能够帮助实现这些功能。
Dreamwaver的查找替换功能十分强大，它的查找替换对话框中甚至可以用精确的“查询语言”来控制查找过程。我们在Dreamwaver中调出“查找对话框”的快捷键是Ctrl+H,默认形式的查找对话框如下图所示：
如图所示各个输入框的作用是：最上面的“Find”指查找的范围，在它的选择中有三项，第一项是在当前文件内查找，第二项指在当前的Site中查找，第三项是在指定文件夹中查找，如果我们选中了此项就要点击右面的文件夹状按钮指定文件夹；下面的“Find”中我们选择查找的类型，如果选“Text”是指查找类型为文本(非Html代码)，其它几项依次为在Html代码中查找，高级文本查找，包含Tag的查找；右边的输入框中要输入待查找的内容；下面一点的“Replace”指要替换为什么内容。
好，这里我们还是举一个例子来说明如何使用查找功能。假设我们想把正文文本中的“dreamwaver”替换为“Dreamwaver”，而如果只用“Text”查找，我们就会把“<title>”中的“dreamwaver”也替换掉，这样违背了我们的意愿。所以我们采用了“高级Text查找”，我们将查找条件(“+”、“-”按钮右的内容)设为“Inside Tag”和“Font”，意思是查找在font标签内的文字“dreamwaver”，然后将其替换为“Dreamwaver”。需要说明的一点是如图所示查找级别选项必须选为“Match Case”，也就是必须完全匹配查找条件，否则文字中的大小写区别将被忽略。
设置好后，点击“Replace All”，查找替换过程就开始了，替换完毕后所有被替换的地方会显示在替换信息列表中，文件前的小绿点表示替换成功。
18.DM查找替换的技巧(二)
在这个技巧中我们接着上一个的内容，看看包含Tag的查找替换。首先把例子中要实现的效果说一下，假设我们的网站中所有的图片都设置了“alt”属性(只有背景图和个别补角的图不设置此属性)，但由于原来做网页时没有注意设置图片的“Border”属性值为0，个别图片在浏览时出现边框而影响了浏览效果，所以想要把所有的已设“alt”值的图片的“Border”值设为0，而在图片很多的情况下我们是不可能一张张的图去改的，这时如果利用Dreamwaver包含有Tag的查找替换功能，就能很简单的解决问题。
如图所示我们先选定文件夹，然后设包含在img标签内的，具有“alt”属性并且符合“alt=any value”做为查找条件，再把“Action”设为“Set Attribute”“ Border”“0”，这个设置的意义是对符合条件的图片其“Border”属性统一设为“0”,点击“Replace All”按钮。很快，查找替换就完成了，你看33张图片被准确无误的修改，所以说只要巧用Dreamwaver的查找替换，许多看起来复杂的工作也会变的非常轻松。
Dreamwaver允许我们把设计好的查找替换作为一个查询文件存储起来，点击如图中所示的按钮，在弹出的“保存为”对话框中输入文件名，点击确定完成。这样我们下一次遇到类似的查找替换操作时，就不必在设置一次，只要打开上次保存的文件就行。
例子举完了，但实际的情况中也许要靠我们自己去发现解决问题的方法。另外要提醒的是进行查找替换时，被操作的文件不要处于被编辑的状态，否则有可能会出现替换出错的问题。
19.鼠标移过链接时实现特定响应
你一定看到很多网页使用了这样的技巧，当鼠标移到某一个链接上时，在页面的其它位置会出现一段对链接的解释性文字，请看下面演示：
电脑交互教程 共享软件下载 硬件追踪
源码粘贴框：
1.在三个链接的代码中添加onMouseOver()语句
<a href="/pc/pcketang/index.htm" class="p2">电脑交互教程</a>
<a href="/pc/softdown/index.htm" class="p2">共享软件下载</a>
<a href="/pc/hangqing/index.htm" class="p2">硬件追踪</a>
2.在html文件的“<head>”中添加如下JavaScript语句：
<script language="JavaScript">
<!--
text=new Array(4);
text[0]=new Image(); text[0].src="img/text0.gif";
text[1]=new Image(); text[1].src="img/text1.gif";
text[2]=new Image(); text[2].src="img/text2.gif";
text[3]=new Image(); text[3].src="img/text3.gif";
function swap(t)
{
if(t>0)
document.TEXT0.src=text[t].src
else
document.TEXT0.src=text[0].src
}
//-－>
</script>
这样的效果我们采用JavaScript很容易就能实现，下面我们来具体做一下：
1、把介绍性文字或图片制作成几幅高宽相同的gif图，上面例子中我们制作了四幅图，分别作为默认的图片和三个介绍性的图片，分别命名为text0-text3,然后我们把默认的图片插入固定位置，并给此图象对象命名为TEXT0；
2、然后在三个链接的代码中添加onMouseOver()语句，这个语句的作用是，当鼠标移动到链接上面时，让程序控制出现什么响应；我们在如下图的位置加入这样的语句：
其中swap()是一个函数，在下一步中将要定义它，我们分别在“电脑交互教程”的链接中加入“”，在“共享软件下载”的链接中加入“”，在“硬件追踪”的链接中加入“”；
3、在html文件的“<head>”中添加如下JavaScript语句：
好，做完以上的工作，我们在浏览器中就能看到如前面所示的效果了。提醒你的是并不是所有的浏览器都支持此效果，另外在你加入JavaScript语句的时候一定要注意区分大小写噢。你也可以利用此技巧的原理为网页增添其它的JnMouseOver响应效果。
