Dreamweaver网页制作超级技巧36则

核心提示：首先需要保证的是你的页面内容采用了表格的格式，然后打开你要编辑的页面，按“Ctrl+F6”或者菜单“View→TableView→Layout?View”转换到布局视图。

1、用Dreamweaver 4.0轻松设计会自动弹性调整的网页

首先需要保证的是你的页面内容采用了表格的格式，然后打开你要编辑的页面，按“Ctrl+F6”或者菜单“View→TableView→Layout?View”转换到布局视图。这时可以看到单元格的列宽，在列宽数字的旁边还有一个小小的下拉式箭头，点击你要设定弹性显示的列上方的小箭头，接着选择“将列设为弹性显示”(Make Column Autostretch)。该列方框上方就会出现一条波浪形的线，而不是刚才表示列宽的数字。完成后你的页面就变成了一个具有弹性的页面了。此外，需要注意页面中不要有尺寸过大的图片。

2、用Dreamweaver 4.0制作有闪动效果的Flash按钮

选择菜单Insert→Interactive?Images→Flash?Button就可看到有哪些内嵌按钮。在弹出的对话框里，你可以在“Style”列表里选择自己想要的按钮样式，在预览(Sample)窗口里可以看到这种样式的效果如何。选择好之后，在“Button?Text”窗口输入按钮上面的文字，在“Font”窗口选择字体，在“Size”窗口输入文字的大小，在“Link”窗口输入链接的目标，在“Target”窗口选择链接打开的方式，在“BgColor”选择按钮背景颜色，在“Save?As”窗口输入保存的文件名。完成这些后，按下“OK”按钮，你就完成了一个Flash按钮啦。这个按钮还会自动插入你的网页中，然后在Dreamweaver编辑窗口选中你刚才制作的按钮，属性窗口就会显示出这个按钮的属性，单击上面的“Play”按钮，你就可直接在编辑窗口预览这个按钮的闪动效果。需要注意的是Dreamweaver?4.0的这个功能不支持中文字体。

3、在Dreamweaver 4.0中自定义键盘快捷键

选择菜单“Edit→Keyboard?Shortcuts”，在对话框中会列出目前已经启用的以及可以更改的快捷键一览表，你可以在这里把快捷键改成自己习惯用的。如果要更改快捷键，首先要选取你要更改的命令，接着选取目前的快捷键，这个快捷键就会出现在“Shortcuts”列表中，然后在“Press Key”窗口输入你想要使用的快捷键，然后点击“Change”按钮更改即可完毕。你还可以利用“+”、“-”按钮增加或者删除当前的快捷键。

4、让DreamweaverMX4.0和Fireworks整合

如果你的电脑里同时安装了Dreamweaver/Fireworks，那么你就可以使用Dreamweaver?4.0提供的整合Fireworks的功能。利用这个功能你可以把你的GIF图片修改得更加动人，轻松地实现动画效果。在Dreamweaver编辑窗口选择好你要修改的GIF图片，然后在图片属性窗口单击“编辑(Edit)”按钮，这时系统会自动启动Fireworks软件编辑这个图片。仔细看，你会发现Fireworks的图片编辑窗口已出现Editing-From-Dreamweaver这样的文字和图样，也就是说这个图片是为Dreamweaver页面进行图片编辑的。现在我们在Fireworks里选择要编辑的图片，选择菜单“Modify→Animate→Animate?Selection”。在弹出的窗口里设置动画的属性：选定动画的帧数、动画移动的方向、透明度等等。然后把修改好的文件导出即可。这样，在Dreamweaver编辑窗口会自动更新刚才修改好的文件，使你的页面图片动起来。

5、巧用网站报告器

在Dreamweaver?4.0里提供了一个网站报告器，利用这个网站报告器可以帮助你在你的网站众多文件中快速找到和修复错误。单击菜单“Site→Reports”即可启动报告器，选择你要检查的项目，然后单击“Run”按钮即可查出你网站上的一般问题。你也可以自己编写报告器来查出网站上的一些特殊问题 (一般问题通常是一些文本丢失或文档未命名) 。

6、快速恢复多次操作

在制作页面时，我们可能需要不停地修改页面，有时还要恢复过去的操作，我们可以使用“Edit”菜单里的“Undo”命令，可是这个命令每次只能恢复一次，如果我们需要恢复多次操作，那就要不停地“Undo”，实在太烦。在Dreamweaver?4.0里提供了一个History窗口，可以让我们轻松地恢复多次操作。在“Windows”菜单里选择“History”即可开启这个历史窗口。在这个窗口把你每一次的操作都保留下来了，利用窗口左边那个滑动指针，就可以不停地恢复，还可以撤销每一次操作，包括已经存盘的。而且还可以把这个历史纪录保存下来共享。

7、隐藏浮动面板

打开Dreamweaver，给人的第一印象是一堆浮动面板，往往弄得你眼花缭乱，虽然它可以拖开，但毕竟占据着本来就很有限的屏幕，若把它关闭了，等一下用它时又要去打开。其实你只要按一下F4键，所有浮动面板都不见，再按F4他们又都重现于屏幕上了。

8、快速预览网页

初学Dreamweaver，往往找不到预览菜单，不得不另外启动IE浏览器来预览网页的实际效果。其实Dreamweaver的预览菜单放到File菜单下了，要预览正在编辑的网页，按F12键就可以了，方便得很呢！而且还可设置在不同的浏览器中预览，在File菜单下的Preview in Browser中选择Edit Browser List就可选择不同的浏览器进行预览。以测试你的网页对不同浏览器的适应性。

9、在HTML检示窗中显示行号和自动换行

虽然Dreamweaver的Behaviors是一个javascript小程序的巨集，许多实现特殊网页效果的javascript程序都不用动手编程，但有时需要编写一点小程序时，显示程序行号显得尤为必要，特别是在程序发生错误时，往往都有是提示在“XX行有错误”，若一行一行地去数行号不仅太累而且还容易数错，在FrontPage中老是为数错行号而烦恼。在Dreamweaver中可方便了，只要在HTML源代码检视器窗口中，选中“Line Numbers”（行号）复选框，则会在源代码检视器窗口中对每条HTML语句自动显示行号，一目了然。同样有时一行代码较长，只要在HTML源代码检视器窗口中，选中“Warp”（自动换行）复选框，则会激活窗口的自动换行特性，过长的代码会自动从窗口的边缘绕回。

10、如何获得颜色的十六进制代码

在设计网页时，有时要用到16进制的颜色代码，以前经常为这事头痛，在Dreamweaver中只要按属性面板上“bg”边上小方框右下角的小三角形，在弹出的颜色板上，鼠标指到哪儿，马上就能显示出相应颜色的16进制代码，真方便。

11、制作背景音乐

在Dreamweaver中插入背景音乐是非常容易实现的，这里介绍两种方法，由大家选择。

（1）在页面不显眼的地方插入一空层 ，并在层内放入一个ActivX对象 ，双击该对象，在打开的对话框中选择一个MIDI音乐文件，然后在层对象属性面板中设定其可视性为“Hidden”，保存变动后按F12预览网页，听听是否有音乐声。

（2）另一种方法是利用Dreamweaver的“Behaviors”行为编辑器 ，单击“＋”按钮，选择其中“Play Sound”选项，在弹出的对话框中选择一个音乐文件即可。自己动手试一试吧！

12、让背景图不滚动

与FrontPage不同，Dreamweaver中插入的背景图是会随文字滚动的。有的时候我们需要制作固定的背景图，怎么办呢？先定义一张背景图，按“F10”打开HTML源文件，找到定义背景图片的语句，例如background=″images/background.JPG″，在它的后面空一格加上一句bgproperties=″fixed″。预览一下，是不是有点小小的成就感。

13、定义大小不变的文字

为什么别人网页上的文字那么漂亮，不管你怎么按浏览器字体按钮上的大小，他们的字体尺寸都不会发生变化。其实他们使用了网页中的“CSS”样式表技术，在Dreamweaver中要实现这一功能是非常简单的。首先按“F7”或者选择“窗口”菜单中的“样式表”选项打开样式表编辑器，在窗口中单击鼠标右键选择“新建”，在弹出的对话框中输入需要定义的样式表名称，按“确定”，然后在列表中选择第一项“类型”，并给具体的文字属性定义参数（一般来说文字的大小在800×600的屏幕中选择10.5较为适宜），按“确定”后，定义好的样式表就出现了。选择网页编辑窗中的文本，单击新的样式表名，可以看到选中的文本发生的变化。预览一下，试试定义的文本字体尺寸还会不会随浏览器的选择字体大小而改变。

14、插入Flash动画

Macromedia公司的Flash动画因其具有交互性、传送速度快等特点，已逐渐成为网页制作的一项新武器，如果你的网页上能插入一段Flash动画，那么一定会使你的作品增色不少。在Dreamweaver中插入Flash制作的SWF格式动画十分容易，单击对象工具栏上的Flash徽标或单击的“媒体”下的“Flash”，就可以打开选择SWF动画文件的对话框了，选好文件后可在其属性面板中设定播放的参数，即大功告成。

15、让表格给网页留白

在Dreamweaver的新网页上输入文字时，默认格式是顶天立地的，十分不美观。要避免这一缺憾其实很简单，只要大家用好表格工具就行了。具体做法是：在新页面上插入一张居中对齐的表格，为了能够使表格方便控制，最好设定奇数列，并且数值不要太大。这样在单元格内输入的文字就被限制在一个可以随意调整宽度的区域内，就不愁文字不听使唤了。

16、改变状态栏提示文字

一般情况下，当浏览器装入一个页面时，在其状态栏上显示的是该页面的地址名称，十分呆板。你有没有想过给浏览器的状态栏增加一点个性呢？如果有的话，那么请按照以下的步骤，定制自己喜欢的文字吧！首先打开“Behaviors”行为编辑窗，单击“＋”按钮，选择“Set Text Set”下的“Text Of Status Bar”选项，然后在方框中输入自己的文字，例如“欢迎来到我的主页”等，单击“确定”即可。

17、整合的文本代码编辑器

可视化网页编辑软件的最大不便之处就是很难对源代码进行编辑，更别说JavaScript了；不过Dreamweaver?将使你处理代码变得异常轻松。这个内建的文本代码编辑器主要的新功能是：自动缩排（可以一次选取多行进行缩排），?还可以进行符号的检测，如果在编写代码忘了一个“”，它将给出提示。在工具表中的下拉菜单会列出当前网页中所有自定义JavaScript函数，可让你在网页原代码中自由跳转，“原始码导航工具”可以让专业人士方便地处理JavaScript函数，在文本代码编辑器中输入JavaScript代码，系统将用不同的颜色来显示。

18、在Dreamweaver中输入多个空格

我们平时输入的空格是半角字符，在Dreamweaver中只能输入一个，要想输入多个空格只要输入全角空格就可以了。输入全角空格的方法是：打开中文输入法，按Shift+Space切换到全角状态。这时你输入的空格就是全角空格了。

19、解决Dreamweaver的BUG之一

在Dreamweaver 3.0中行为面板（Behavior inspector）中，“Events for”下拉菜单项无法打开。这样一来，很多特技效果形同虚设，根本没法制作。其实这应该算Dreamweaver 3.0和中文Windows98不兼容的一个地方吧，在英文Windows98中就没有这个问题。而实际上这个菜单还是可以打开的，只不过是不能正确显示罢了。在选中下拉菜单后，我们可以用上下键来选择我们想要用的浏览器。

20、用Dreamweaver 3.0的模版制作网页，设置行为（Behavior）

在使用模板（Template）做出 淼耐 页中不能新增行为。这是因为新增行为需要在HTML文件的Head部分之中插入JavaScript，而使用了Template后，HTML文件的Head部分会被“封锁”住。如果要在使用模板生成的网页中应用行为，你就需要事先在模板中定义好行为，然后把它定义为模板的可编辑区域。随后，你就可以在网页中更改这个行为了。但这也只限于更改行为的触发事件（events）和动作（actions）的具体内容，而不能更改动作的类型。

21、给文字施加行为（Behavior），制作动态文字特效

在Dreamweaver中普通的文字是以字符为单位的，不能作为对象，即一些非常有用的JavaScript事件不能赋予文字。因为文字不像图片和其他控件有具体的“标记”，所以文字与很多特效失之交臂。为了给文字添加特效，只有把文字做成超链接来处理。这样文字就成为了对象，可以施加行为了。但是这样又带来了一些不需要的超链接属性，比如下划线，以及hover、visited等颜色变化。 要想单纯为文字添加特效，可以先把所想设置的文字做成超链接，然后再在它的上面添加行为，最后我们再把超链接转变为普通文字。具体的步骤如下：

选中你想编辑的文字，在链接目标框里随便填入几个字符。选中这个链接，单击窗口（Windows）→行为（Behaviors），弹出行为面板。按下“+”添加你想要的行为，如play sound等。打开Dreamweaver的超文本编辑器，找到这个链接，把改为，把改为。最后把“href=...”删掉。保存此页。按F12预览一下。效果还不错吧！

22、精确定位网页中各个元素的位置

精确定位网页中各个元素的位置有两种方法：使用表格或层。使用表格是目前比较通用的做法，具体方法是：先在网页中建立一个表格，注意表格的边框宽度应为０。然后再把各个元素按照你的要求放在各个表格单元之中。仔细调整表格单元的大小以及表格边框的位置，这时在表格单元中的元素也会随之移动位置。这样你就可以比较精确地定位网页中各个元素的位置了。使用表格的优点是通用，几乎各个版本的浏览器可以致支持表格。它的缺点是使用起来比较麻烦，需要仔细进行调整，而且定位不十分精确。层在网页中可以随意放置，因此我们可以使用层来进行精确定位。使用方法是，在网页中插入一个层，然后把你想要定位的元素放在层里，接着我们就可以把层放到所想要任何位置了。此外，你还可以借助标尺和网格进行精确的定位。因为层只在最新的浏览器中被支持，所以为了兼容旧的浏览器，我们可以把层转变为表格。方法是选择“修改(Modify)→版面布局模式(Layout Mode) →把层转化成表格(convert layers to table)”即可。注意这时的层不能有重叠，我们可以在插入层之前选择“查看(view) →防止层交错(prevent layer overlaps)”来避免层的重叠。一般来说转换后的页面可能会有一些变化，还需要我们手工进行调整。最后有一点要注意，在进行表格和层的相互转换时，最好不要在一个页面中同时使用层与表格，那样可能会把你的页面弄得一团糟。

23、改变浏览者的鼠标形状

这是通过编辑样式表来实现的。具体方法是：选择“文字（text）→定制样式（CSS Style）→编辑样式表（Edit Style Sheet）”，弹出编辑样式表窗口，在其中选择“新建（new）”。接着选择“建立一个定制的样式（Make custom style）”，给这个样式表起名，单击确定。编辑该样式表，选择扩展项(extension)，在右边的光标项（Cursor）中选择要出现的指针效果即可。

24、去掉超链接文字之下的下划线

这一效果是通过编辑样式表来实现的。具体方法是：“点击文字（text）→定制样式（CSS Style）→编辑样式表（Edit Style Sheet）”，出现编辑样式表窗口，选择“新建（new）”。接着选择重定义HTML标记（Redefine HTML Tag），并在下面的标记(Tag)选单中选择a。编辑该样式表，选择类型(type)，在右边的装饰（decoration）中选中无（none ）即可。

25、制作一个跟着页面走的图像

这一效果是通过JavaScript实现的。一般来说完成这样一个效果需要一定的编程能力，但现在我们可以通过Dreamweaver的插件轻易地实现。插件的安装方法：解压缩后拷贝到Dreamweaver下的文件夹Configuration\Objects内的一个新建文件夹里面即可。重新启动Dreamweaver之后，我们就可以在对象面板之中找到新安装的插件了。点击插件的图标，在弹出的对话框中填入图像的存放地址以及图像的显示位置就可以了。

26、制作鼠标移上去后有变化的动态菜单

所谓动态菜单其实是两幅图，一幅是鼠标不放在上面所显示的，另一副是鼠标移上去所显示的。我们可以利用Dreamweaver提供的行为之中的swap image来实现这个效果。首先插入一副图片，用鼠标单击它，在属性面版的连接栏内输入要连接的网页。然后打开行为面板添，点击“+”号，选择swap image。接着出现一个窗口，要你选择鼠标移上去后所显示的图片，在此选择第二副图片，点击“确定”。好了，效果完成了，多简单。

27、用Dreamweaver制作出一个类似于下拉菜单的效果

制作一个类似于下拉菜单的效果需要用到层的隐藏和显示特性。具体的方法是：在页面中插入一个单行多列的表格，作为你的菜单条。表格的列数由菜单选项的多少决定。插入一个层，在层中输入第一个下拉菜单的内容，并把这个层移动到表格第一列的下面。同理，对其他菜单项也作如上的操作，插入相应的层。把所有层的显示属性(vis)改为隐藏（Hidden）。

选择表格的第一个单元，单击窗口（Windows）→行为（Behaviors），弹出行为面板。按下“+”添加行为Show-Hide layers，并将第一个层（Layer1）属性改为显示(Show)，其他层的属性改为隐藏(Hide)。接着在行为面板中编辑这个行为，将它的触发事件(events)改为onMouseover。这样，当鼠标移动到第一个表格单元之上时，第一个下拉菜单就会显示出来。接着再添加一个行为Show-Hide layers，并将所有层的属性改为隐藏。接着在行为面板中编辑这个行为，将它的触发事件(events)改为onMouseout。这样当鼠标从第一个表格单元之上移开时，第一个下拉菜单就会隐藏起来。对其他的菜单项重复上述操作。但要注意设置“菜单二”时，第二层显示，其他层隐藏；设置“菜单三”时，第三层显示，其他层隐藏；依此类推下去。好了，做好了，按F12看看吧。

28、轻松制作下载文件

用Dreamweaver其实很简单，把要让浏览者下载的文件名写上，然后拖动鼠标选取这段文字，在文本的属性面板上“Link”的属性输入框中写上文件名就行了。注意：若被下载的文件与该网页不在同一目录下，则文件名必须包含相对路径，否则在下载时将提示找不到文件。

29、利用Dreamweaver的书签制作跳转链接

利用Dreamweaver的书签我们可以实现这个功能。具体方法是：将光标移到你想跳转到的地方，选择菜单中的“插入（Insert）→书签（Name Anchor）”，输入书签的名称。接下来，在你想调用链接的链接目标框中填入“#书签名称”，这样一个页面内的跳转链接就做好了。在这里，如果我们在书签名称前填入网页的名称，就会跳转到其他页面中的书签处。 比如说我们在Link处填入“index.htm#top”，当浏览者点击这个链接时就会跳转到index页面中的top书签处。

30、去掉图片和表格接触地方的空隙

要使图片和表格接触的地方不留空隙，仅在表格属性面板上把外框线（border）设为0是不行的，还需要在表格的属性面板上把单元格的两个属性设为0（即cellspacing="0"和cellpadding="0"）。

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按钮，至此所有设置结束。