DreamWeaver操作超级技巧大全（4）

31. 用TracingImage帮助定位网页中各元素的位置

TracingImage是Dreamweaver一个非常有效的功能，它允许用户在网页中将原来的图案设计作为辅助的背景。这么一来，用户就可以非常方便地定位文字、图像、表格、层等网页元素在该页面中的位置了。TracingImage的具体使用是这样的：首先使用各种绘图软件作出一个想象中的网页排版格局图，然后将此图保存为网络图像格式（包括gif、jpg、jpeg和png）。用Dreamweaver打开你所编辑的网页，在页面的空白区单击右键，选择“Page Properties...”，然后在弹出的对话框中的Tracing Image项中输入刚才创建的网页排版格局图所在位置。再在Image Transparen中设定TracingImage的透明度，OK。这样你就可以在当前网页中方便地定位各个网页元素的位置了。使用了TracingImage的网页在用Dreamweaver编辑时不会再显示背景图案，但当使用浏览器浏览时正好相反，TracingImage不见了，所见的就是经过编辑的网页（当然能够显示背景图案）。

32. 关于“Convert Table widths to Pixels”和“Convert Table widths to Percent”

“Convert Table widths to Pixels”和“Convert Table widths to Percent”是Dreamweaver两个设置表格宽度的重要功能。当你打开一个带有表格的网页时，在状态栏中点中〈table〉标签，在随后显示出的表格属性工具面板中就能看到这两个按钮了。顾名思义“Convert Table widths to Pixels”就是将表格中所有单元的宽度以像素表示，而“Convert Table widths to Percent”是将表格中所有单元的宽度以百分比表示。仔细想想他们的作用，如果将一个表格的宽度全以像素表示，但浏览窗口被放大时，表格就不会随之放大单元格的宽度。而使用了“Convert Table widths to Percent”后能够使你在640×480分辨率下建立的100％宽的表格在更高的分辨率下依旧保持100％的宽度。所以活用这两个功能可以使网页排版事半功倍。

33. 调用Style而不致使网页原代码混乱不堪

调用Style的方法很多，你可以单击右键选择Custon Style来调用Style规范，也可以在状态栏中的元素列表上单击右键来调用Style。虽然不同的方法达到的效果看似一样，但实际上产生的HTML代码则完全不同。比如用Custon Style来调用Style规范，在网页代码中就生成一个〈span〉标签，这样标签一多就会使文件十分臃肿而且影响浏览器的解析速度，所以我建议尽量使用状态栏中的元素列表来调用Style。还有一个小技巧，如果你要使用一个Style定义某表格单元中的所有文字，只要在〈td〉标签中调用Style就行了，而不需要在一个个定义〈p〉标签。注意这个方法不适用于〈table〉标签，因为在〈table〉标签中用Style定义的文字格式会被Netscape忽略。

34. 使用定制窗口功能测试网页在不同分辨率下的效果

谁都不希望看见自己辛辛苦苦做的网页在不同的分辨率下面目全非，所以测试网页在不同分辨率下的浏览效果是网页制作中很重要的一步。我们可以在Dreamweaver的操作界面中的状态栏中间，选择需要的分辨率来调节窗口大小，从而实现在不同分辨率下测试网页效果。

35. 上传网站时无需使用第三方FTP软件

Dreamweaver中融入了FTP功能，而且为网站上传作了优化。我们可以做一个简单的比较，当你使用一般的FTP软件上传网站时，是不是都按本地机上的网站目录在服务器中新建目录，然后再一个个文件上传。这种做法实在没错，但由于本地机中的网站目录中并不是每个文件都被网页调用（比如在建网页时留下的备份文件），所以筛选文件的繁重工作量只有用户自己知道。但使用Dreamweaver上传网页就可以方便得多，由于FTP功能在幕后为用户进行了许多必要的工作，所以用户只要将网站地图内相关的HTML文件上传，Dreamweaver就会自动将与此HTML文件相关的所有其他本地文件一并上传（如图像、ZIP文件、FLASH文件甚至是各种REAL文件）。使用Dreamweaver内带的FTP功能的具体做法是：编辑已经定义过的SITE，在“Site Definition for...”面板中选择“Web Server Info”。如果网页是通过FTP方式上传的话，将“Server Access”设为FTP，在FTP Host中添入FTP服务器的地址，在Host Directory中添入远程登入目录，在Login中添入用户名，再填好Password。经过了以上的设定，就可以在Site面板中按Connect按钮，当Dreamweaver成功连入服务器后，Connect按钮会自动变为Disconnect，并且在一旁亮起一个小绿灯。接着要做的事就是在要上传的HTML文件上单击右键，选择“Put”即可。当此HTML文件上传成功后，状态条中将显示Put Depanding File，说明Dreamweaver正在上传这个HTML文件所调用的其他本地文件。不仅如此，Dreamweaver还可以直接下载服务器上的文件进行修改，方法么，只要使试试Put旁的Get按钮就明白了。

36. 实现用鼠标指向链接时出现下划线的效果

有些网页的链接，原先没有下划线，你把鼠标指向链接处，才会出现下划线，鼠标移掉下划线就又没有了。这种效果其实可以用层叠样式表（CSS）来实现，在Dreamweaver中编辑层叠样式表不用编写代码，具体操作方法如下：

（1）在快速启动栏中点击层叠样式表按钮（就是把鼠标放上去显示“show css styles”的那个按钮），在弹出的CSS Styles面板上双击（none）；

（2）此时，可看到弹出的Edit Style Sheet 面板，在该面板上按New按钮；

（3）再在弹出的New Style 面板上点取Redefine HTML Tag（重新定义HTML标记）再在Tag中选择“a”（超级链接标记）标记后按OK按钮；（4）这时可看到弹出的Style dehinition for a 的对话框，在此对话框中可以设置超级链接的许多属性，你可以按你的意愿设置，但我们这里主要是要去掉那讨厌的下划线，所以我们在decoration 属性中选择“none”，这样就把下划线去掉了；然后我们再选择颜色为：#339966。按ＯＫ按钮返回到Edit Style Sheet 面板；

（5）在Edit Style Sheet 面板上再按New按钮；

（6）在弹出的New Style 面板上点取Use CSS Selector ，再在该面板上的selector选择框中选择“a:hover”（定义当鼠标在超级链接上时链接的属性），按OK按钮；

（7）在弹出的Style dehinition for a:hover 的对话框中，我们在decoration 属性中选择“underline”，这样就把下划线又加上了；然后我们再选择颜色为：#FF3300。按OK按钮返回到Edit Style Sheet 面板；

（8）在Edit Style Sheet 面板上再按Don按钮，至此所有设置结束。