欢迎光临
我们一直在努力

DreamWeaver 超级技巧 a

建站超值云服务器,限时71元/月

DreamWeaver 超级技巧

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. 让Dreamweaver?4.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的超文本编辑器,找到这个链接,把<a>改为<font>,把</a>改为</font>。最后把“href=…”删掉。保存此页。按F12预览一下。效果还不错吧!

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

精确定位网页中各个元素的位置有两种方法:使用表格或层。使用表格是目前比较通用的做法,具体方法是:先在网页中建立一个表格,注意表格的边框宽度应为0。然后再把各个元素按照你的要求放在各个表格单元之中。仔细调整表格单元的大小以及表格边框的位置,这时在表格单元中的元素也会随之移动位置。这样你就可以比较精确地定位网页中各个元素的位置了。使用表格的优点是通用,几乎各个版本的浏览器可以致支持表格。它的缺点是使用起来比较麻烦,需要仔细进行调整,而且定位不十分精确。层在网页中可以随意放置,因此我们可以使用层来进行精确定位。使用方法是,在网页中插入一个层,然后把你想要定位的元素放在层里,接着我们就可以把层放到所想要任何位置了。此外,你还可以借助标尺和网格进行精确的定位。因为层只在最新的浏览器中被支持,所以为了兼容旧的浏览器,我们可以把层转变为表格。方法是选择“修改(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的插件轻易地实现。你可以到http://www.computerinfo.com.cn/classroom/chajian/chajian2.zip下载这个插件。插件的安装方法:解压缩后拷贝到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。按OK按钮返回到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按钮,至此所有设置结束,你在Dreamweaver的源代码检视窗中将看到在<head>与</head>之间如下所示的代码:
<style type="text/css">
<!–
a { color: #339966; text-decoration: none}
a:hover { color: #FF3300; text-decoration: underline}
-→
</style>   

37. 实现定义的超级链接文字颜色

文字超级链接的颜色(包括未被访问的链接颜色、鼠标的链接上的颜色、已被访问过的链接颜色等等)可以用层叠样式表(CSS)定义,下面就介绍如何能随心所欲地设置文字链接的颜色。
(1)超级链接的默认颜色是:未被访问的超级链接是蓝色、被访问过的超级链接是紫色;
(2)要想使CSS定义的颜色起作用,在超级链接的文本的颜色属性中什么都不要填;
(3)若你已定义了文本的颜色,发现CSS中定义的超级链接颜色不起作用,你可以取消文本的颜色定义,或取消超级链接再重新定义一次,CSS定义的颜色就起作用了;
(4)超级链接上各种状态下文本颜色的关系:一旦定义了被访问过的链接的颜色(A: visited),则当链接被访问过后,该链接的颜色不再改变,即定义鼠标在超级链接上的颜色(a: hover)将不起作用了。若不定义被访问过的链接的颜色(A: visited),则当鼠标在超级链接上显示a: hover 中定义的颜色,当鼠标移开时显示a 中定义的颜色。
从上述可以看出,文本链接的颜色实际上只能在两种颜色之间变换,并没有像有些文章中讲的那样可以在多种颜色之间变换,但由于用那两种颜色可以任意,所以应该讲颜色的选择范围还是比较大的。

38.在Dreamweaver中把图形放在最中间

点击选取图形,在图形的属性面板的右上角Align(对齐属性)边上有个下拉框,在下拉框中选取,则文字在图片四周绕排。若是单独图片在中间,则在图像面板上点取居中属性即可。

39.如何使用Behaviors 功能,而又不链接到任何地方去

选取要作为超级链接的元素(一幅图片或一段文字),在属性面板上的地址栏(Link)中不填写任何链接地址,只加上一个“#”号,(引号不包括在内)。这样即可以使用Behaviors 功能,而又不链接到任何地方去了。

40.实现在一张(较大)图片上做出几个不同的链接

在Dreamweaver中,这就是使用所谓的设置“图像热区域”。先选中图像,然后在图像属性面板上有一个“Map”工具栏,在其下方有三个淡蓝色的工具图标,即“矩形”、“圆形”或“多边形”,你可以根据需要选取一个(用鼠标点一下就行),再把鼠标移图像上,按下鼠标左键,拖动鼠标就画出了一块淡蓝色的区域(不用担心这块淡蓝色区域会破坏你的图像,在浏览器中是不显示的),这时你在属性面板上把需链接的网页地址添上就行了。你需要几个链接就画几块区域,随你的便。

41. 制作目录树

在总目录的前方有一个“+",一按这个“+",即可显示其下子目录,“+"即变成“-",一按“-",即可隐藏其下子目录,就像在资源管理器中一样,这需要做二个页面,一个页面写上总目录,一个页面写上子目录。把总目录的页面上的“+”号设置成超级链接,在“Link”栏中添上子目录页面的地址。把子目录的页面上的“-”号设置成超级链接,在“Link”栏中添上总目录页面的地址。具体效果可看一看Dreamweaver的帮助文档,在这帮助文档里也是按一下总目录,弹出子目录,按下子目录上的总目录则返回到总目录,只是没用“+”、“-”表示而已。你再看一下该文档的源代码就一目了然了。

42. 在Dreamweaver中轻松设置行间距

用层叠样式表(CSS)来实现,在Dreamweaver中编辑层叠样式表不用编写代码,具体操作方法如下:
(1)在快速启动栏中点击层叠样式表按钮(就是把鼠标放上去显示“show css styles”的那个按钮),在弹出的CSS Styles面板上双击(none);
(2)此时,可看到弹出的Edit Style Sheet 面板,在该面板上按New按钮;
(3)再在弹出的New Style 面板上点取Redefine HTML Tag(重新定义HTML标记),再在Tag中选择“body”标记后按OK按钮;
(4)这时可看到弹出的Style dehinition for body 的对话框,在此对话框中可以设置“body”标记的许多属性,你可以按你的意愿设置,但我们这里主要是要设置行距,所以我们在line属性输入框中填上行距的像素点数,现在流行的九号字,行距一般用12,按OK按钮返回到Edit Style Sheet 面板,此时已把“body”的行距设置好了;
(5)由于“body”中定义的行距对表格不起作用,所以我们再在Edit Style Sheet 面板上再按New按钮;
(6)再在弹出的New Style 面板上点取Redefine HTML Tag(重新定义HTML标记)再在Tag中选择“td”标记后按OK按钮;
(7)在弹出的Style dehinition for td 的对话框中设置td的行距,按OK按钮返回到Edit Style Sheet 面板;
(8)在Edit Style Sheet 面板上再按Don按钮,至此所有设置结束,你在Dreamweaver的源代码检视窗中将看到在与之间如下所示的代码:<style type="text/css">
<!–
body { line-height: 12pt; font-size: 9pt}
td { font-size: 9pt; line-height: 12pt}
-→
</style>
有了这段代码,你在该网页上的所有文本的行距都确定好了,若不满意,可修改设置。

43. 如何设计能使浏览者在浏览时对网页字体大小的设置不起作用
用CSS层叠样式表对字体进行强制性控制(像素)。

44. 实现网页每过五分钟刷新一次的效果

在Dreamweaver的功能面板上选择“head”功能组面板,在这面板上点击“Refresh”功能图标,在弹出的“Insert refresh”对话框中,在“Delay”中输入要刷新的间隔时间,以秒计,例:隔五分钟刷新一次,则输入300即可。再在该对话框上选择“Refresh This Document”(刷新当前窗口),按OK,大功告成。当你再次浏览该网页时,它将自动地隔五分钟刷新一次。

45. 解决用IE预览正常的链接网页,上传到网站却看不见的现象 }

把网页的所有文件名统一成小写(或大写),再上传就行了。因为很多服务器使用的是UNIX操作系统,它对大小写是很敏感的,也就是说大写的文件名和小写文件名它认为是两个文件
,你在上传时必须注意大小写。另外要注意:超级链接要使用相对路径,不要用绝对路径,也不要用中文文件名。

46. 制作新开一个窗口打开网页的超级链接(即原来的网页不被覆盖)

在Dreamweaver中,在该链接的属性面板上把“target(目标)”设置为“_blank”即可。

47. 隐藏不必要的标签

当用户在网页中插入了不可见的元素时,Dreamweaver会自动在页面上添加一个与之相应的元素标签,以便于用户选择不可见元素。但这并不全是件好事,比如你在一个有很多层的页面中的第一行便插入一个表格,就会发现由于首行排列了太多的层元素标签而使得表格自动退到了页面的第二行,虽然在浏览时并不影响效果,但这确确实实会阻碍你的工作。所以当你觉得某个元素标签碍手碍脚时,就索性将之屏蔽掉。方法是按Ctrl+U打开Preferences面板,在Category中选中Invisibel Elements,在面板的右边将会出现所有的元素标签。只要将你讨厌的元素标签前的勾去掉,以后它就保证不会再出现了。

48. 解决表格紧贴左上方的问题

对这个问题有几种解决方法。
(1)按下Ctrl+J,弹出Page Properties,将Left、 Top、 Margin Width、 Margin Height 全部设为0。
(2)把下面一段代码加到你的<body>中:topmargin="0" leftmargin="0" ,这个方法只适用于IE。
(3)加入下面代码:<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" >,这个方法适用于Netscape

49. 在Dreamweaver中将图设为透明alpha设置

<html>
<head>
<title>css</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type=text/css>
.pic{filter:alpha(opacity=50)}
</style>
</head>
<body bgcolor="#FFFF00" text="#000000">
<img src="0008.jpg" width="303" height="385" class="pic">
</body>
</html>

50. 设置表格虚线

(1)作一个1X2的图,半黑半白,再利用表格做成线。
(2)在css里面设:在css面板里新建一个style,选择“redefine HTML Tag”,再在下拉菜单里选“table”,在接下来的面板里,category里选择border。在border里,将top、left、right、bottom都设成1像素,颜色设成你将来想要的边框的颜色。到style下拉菜单里选择dashed就可以了,只是所有的表格都会用虚线做边框了。
(3)如果你只想让某一个表格边框是虚线的话就在html里设。在表格的html里加上这个:
style="BORDER-LEFT: #000000 1PX DASHED; BORDER-RIGHT: #000000 1PX DASHED; BORDER-TOP: #000000 1PX DASHED; BORDER-BOTTOM: #000000 1PX DASHED"。颜色是十六位代码,你可以自己设。方法2、3只能在IE浏览器里用,到了Netscape里一点用处都没有,除非你用做好的底图填充。

51. 在Dreamweaver中使插入的FLASH透明

选中插入的swf文件,打开原代码窗口,在</object>前输入<param name="wmode">

52. Dreamweaver4中设置表格亮边框和暗边框

做一个像素宽度有颜色的表格线
(1)将表格边框 border设置为0,Cell space设置为0,Cell padding设置为0。
(2)打开样式面板新建一个样式。选择Border设置边框属性 。
(3)选中整张表格应用这个样式即可。

53. 隐藏表格的分隔线

<table border rules=cols cellspacing=0 align=left> 可以隐藏横向的分隔线
<table border rules=rows cellspacing=0 align=right>可以隐藏纵向的分隔线
<table border rules=none cellspacing=0 align=center>可以隐藏横向和纵向的分隔线

54. 如何选取被遮盖或隐藏的层

当层被重叠使用时,大层会把小层遮盖住;当选择了层的隐藏属性,该层就看不见了。当你想对这些层操作时,怎么办?按F11键显示层面板,所有层号均在上面,要哪层选择哪层就行了。

55. 在层(或表格中)上编辑文本时自动换行

层在用Dreamweaver设计网页时被大量采用,但当你在层上输入大段文字时发现不会自动换行,无论你怎样设置层的宽度均无济于事,当然你可以用按“SHIFT+ENTER”来换行。但是这样当你调整层的宽度时又不得不一个一个地去删除它,再又在另一位置加上它,其实有三种方
法可以解决这个问题:
(1)在层叠式样表*.CSS中“DIV”的式样定义中加上字体的定义;
(2)在网页源代码的层定义中加上字体的定义;
(3)选取该段文字,在文字的属性面板上定义字体。
上述三种方法任选一种都行,但以第一种较好,因为只要改动一次,此后只要是调用该层叠式样表的网页中的所有层都有能自动换行了,岂不是一劳永逸。表格同样存在上述问题,解决方法相同,只是在层叠式样表中在“TD”的式样定义中加上字体的定义。

56. 在Dreamweaver中输入上下标

如果只是要上下标的话,可以用<SUB></SUB>和<SUP></SUP>。 手工加进去就可以了。

57. 去掉链接的下划线

将以下代码加入<head> </head>之间
<style type="text/css">
<!–
a:link{text-decoration:none}
a:hover{text-decoration:none}
a:visited{text-decoration:none}
-→
</style>

58. 关于Dreamweaver中加入空格的问题

(1)可以用中文的全角状态下按空格键,强烈推荐
(2)插入一个透明的图
(3)用pre标签里写你的内容
(4)object 里的invisiables 里的none-breaking space 点一下
(5)instert 菜单下的 none-breaking space
(6)CTRL+SHIFT+空格键加入
(7)CTRL+T 去掉尖括号,键入 &nbsp;

59. 制做收藏夹里的ICON

在HEAD里加入
<link rel="shortcut icon" href="你图标"> 图标名为favicon.ico

60. 解决Dreamweaver表格里的背景不能预览问题

这要看背景图是设在<tr>里还是设在<td>里,设在<td>里时背景图就可以显示了。

61. 在Dreamweaver中准确地定位层

就目前来说,还没有好的方法实现非常精确地定位,使得层在编辑中和浏览中的位置不变,
即便是使用“标尺”和“网格”辅助定位,仍然会有差别,而且在IE和NC中显示的层的位置会有偏差,大约偏差3个像素。最好的方法(也是最无奈的方法)是对照浏览器的显示来调整层的位置。

62. 设置网页定时关闭

在源代码中的<BODY>后面加入如下代码:
< script LANGUAGE="javascript"> <!–
setTimeout(‘window.close();’, 60000);
-→ < /script>
在代码中的60000表示1分钟,它是以毫秒为单位的。

63. 设置timeline中的layer走曲线

要使得timeline中的layer走曲线,你得先让他走出直线来,然后在最后一帧和第一帧中间的任何一帧上点右键,可以看到右键菜单中有个“增加关键帧(add keyframe)”,点一下,然后把你的层移动到你需要的位置,Dreamweaver会自动生成曲线!

64. 使字体适应不同的分辨率

我们在制作网页的时候,经常有这种体会,?那就是制作好的网页在本地计算机上浏览时很正常,但在另外一台计算机?上浏览时发现原本漂亮的网页变得歪歪扭扭了,这是为什么呢?原来各个?计算机的分辨率要使你的主页在不同的分辨率下都能正常显示,在?Dreamweaver中得到了较好的解决。在文档窗口的右下角,Dreamweaver?显示当前文档被设计成的分辨率大小。单击那个数字,在弹出式菜单中可以为当前的页面指定显示分辨率,通过修改可以使你的主页更具灵活性。?使不同分辨率的显示器都能较好地显示。

65. 善用拖放技术

我们在使用Dreamweaver编辑网页的时候,经常需要插入一些图像什么的,假设要插入的图像很多,按照常规方法来操作就显得非常麻烦。我们可以利用拖放技巧来很好地解决这个问题。首先我们把?Dreamweaver的操作窗口变成活动窗口,以腾出空间来显示Explorer窗口,?找到要插入的图像文件后,把它们一一用鼠标拖动到网页的适当部位,Dreamweaver将自动把这些图像的链接添加到文件的HTML代码中,当然这里要求被拖动的图像文件必须是gif、jpg等网页图像格式的文件。对于已经在网页中的图像也是一样,直接拖过来就可以了。但如果被拖动的图像上有超级链接,就不可以再使用拖动技术了,因为那时拖过来的仅仅是超级链接地址。

66. 善于为对象取名

我们在用Dreamweaver来制作非常复杂的效果时,?有可能需要经常重复地使用某一个或者多个对象,例如我们经常需要定位某个特定的表格、图像等,如果我们没有给某一个网页中的
多个对象取名的话,那么在重复应用这些对象的时候,可能很麻烦或者容易出错。为了能够方便调用这些对象,我们应该在每创建一个新的对象时,都记得给它取一个有代表性而且比较容易记忆的名称。在给这些对象命名时,我们可以通过对象的“属性”面板来操作就行了。

67. 多用快捷键来提高效率

为了提高操作的效率,我们可以在Dreamweaver?中使用快捷键,例如使用Ctrl-B或Ctrl-I来为文字应用黑体或斜体格式,?也可以使用以下一些键盘快捷键来为选中的文本应用HTML格式:Ctrl-0——无?格式;Ctrl-T——段落;Ctrl-1——标题1;Ctrl-2——标题2;Ctrl-3——标题3;Ctrl-4——标题4,以此类推。

68. 一次链接到两个网页

我们都知道超级链接一次只能连到一个页面。?如果我们要想一次在不同的框架页中打开文档,可以使用“Go?To?URL”?javascript行为。打开一个有框架的网页,选择文字或图像,然
后从行为?面板中选择“Go?To?URL”。我们会注意到Dreamweaver会在?“Go?To?URL”对话框中显示所有可用的框架。选择其中一个我们想链接的框架并输入相应的URL,然后再选择另一个框架并输入另一个URL。

69. 利用“Format Table”命令来修饰网页

在复杂的网页设计中,表格的应用是最多的,因为利用表格可以自由地控制文本和图像在网页上出现的具体位置,从而使整个网页看上去紧凑统一。Dreamweaver在这方面也不甘落后,我们可以使用其中的“Format?Table”(格式化表格)命令来快速地对表格应用预先设计好的样式。要使用预先设计好的样式,先将光标置于表格的任意一个单元格内,再选择“Command”→“Format?Table”命令,在随后出现的对话框中,从左边的列表中选择一个设计方案。按?“Apply”键来查看效果,如果不满意的话,还可以重新设置或者修改部分参数的值,如边界粗细,背景颜色等等。

70. 尽量不要给文件起中文名称

大家在制作好了网页后,通常会给网页起一个具有代表性的中文名称,一来能使人一看文件名就能大概了解文件所包含的内容,二来能够方便各个超级链接之间的相互调用。但如果你在?Dreamweaver中这样做,就会发现Dreamweaver对中文文件名支持得不是?太好,经常会有页面调用不正确的现象发生,所以我们以后在Dreamweaver?中保存网页的时候,尽量用英文或者数字作为文件名称,这样就可以避免上面的出错现象。

71. 经常保存当前被编辑的文件

有网友说经常保存文件是不是怕突然死机呀?这话当然没错,但我们在Dreamweaver中要经常保存文件还有它特别的意义。因为我们在设计主页的时候,Dreamweaver会跟踪我们对文件做出的任何改动,也就是说即使我们在主页中简单地移动了一下某个对象,?Dreamweaver也能生成大量的临时源代码,想象一下,如果在主页中作了?很多改变,那么生成的这些大量代码就变得很难管理,从而会影响系统的性能。因此我们发现如果Dreamweaver的性能开始降低,这可能就是由于驻?留在内存中的代码变得太庞大的缘故,只要保存一下文件,就会使这些临
时代码消失,从而提高性能,所以以后我们在使用Dreamweaver时,要有经常保存文件的习惯。

72. 自动在网页中加入更新时间

我们知道一个网页要想获得更多的回头率,很重要的一条就是要不断更新。但对于我们这些个人网页来说,?要天天及时更新恐怕不是很容易的事情。因此,我们希望网页能自动更新,下面我们就提供一个能自动更新修改时间的源代码,我们只要把这段源代?码添加到<BODY>…</BODY>之间就能实现更新时间的目的了:
<Script?Language="javascript">?<!–?document.write("Last?Updated:"+document.lastModified);?-→</Script>?

73. 只复制编辑区中的文字

在几个不同的应用程序中间相互复制文字,?是我们在实际工作中可能要常做的事情。但是,如果我们从Dreamweaver中复制编辑区中的文字到另外一个应用程序的时候,HTML代码将和文字一起被复制过去。我们该如何才能只把编辑区中的文字复制下来呢?我?们知道,通常复制时都用快捷键Ctrl-C来操作,如果我们在复制的时候?多按一下C键,那么Dreamweaver将只会复制选中的文字了。

74. 定义网页的关键字

为了使自己的网页在搜索引擎中能很容易地被?检索到,准确定义网页中的关键字是一项很重要的工作。在Dreamweaver中,?我们可以用两种方法来定义网页中的关键字:一是在源代码中的<head>与?</head>标签中,添加如下代码:<meta?name="keywords"?content="yancheng,yancheng,yancheng">,其中content中的内容即为?关键字,为了提高检索的命中率,我们可以重复多次使用同一个关键字,?中间用逗号隔开;另外一种方法是在Dreamweaver中用鼠标依次单击?Insert/Head/KeyWords命令,在随后弹出的对话框中重复输入希望被检索的关键字就可以了。

75. 实现浏览器状态栏中的滚动字幕

按下F8键,在Behaviors窗口中选取Behaviors,单击“+”号,再选取“Set Text→Set Text of Status Bar”,最后在弹出的对话框中写上你想在状态栏出现的文字就可以了。

76. 将 Dreamweaver 集成到IE浏览器

Dreamweaver 安装程序会在上下文选单增加一个“Edit with Dreamweaver”命令。还可以修改 Windows 的注册表,就像MS Word、FrontPage和Notepad一样,通过IE工具栏的编辑按钮来调用 Dreamweaver 打开当前网页。将下面文本的最后一行要改为你自己的 Dreamweaver 安装路径,把它们保存为一个 *.reg 文件,双击它将信息添加到注册表即可。
REGEDIT4
[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver]
[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell]
[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell\edit]
[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell\edit\command]
@="\"D:\\Macromedia\\Dreamweaver 3\\dreamweaver.exe\" \"%1\""
如果要设置为 IE 缺省的编辑器,打开 IE 的“Internet 选项”,在程序标签指定。

77. 避免点击空链接对象时会跳到页面顶端的现象

浏览器以为链接到同一页,可它又找不到定义的书签(anchor),于是停留在页面的顶端。用“javascript:void(null)”替换空链接的“#”,解决这个问题。

78. 解决使用CSS 、层时,在不同浏览器的效果不一样,有时甚至出现错位的现象
不要混合使用层和表格排版(如果是父子关系,如层中表格,不在此原则范围内);内联式的CSS在Netscape Navigator中经常会出现问题,使用链式或内嵌式;有时需要在空层插入表格或者透明图片,以保证在 Netscape Navigator 里的效果。对于只有几个像素宽度或高度的层,改用图片来实现;避免使用 W3C 组织不推荐的排版属性,用 CSS 代替。

79. 在网页中加入EMAIL链接并显示预定的主题

代码:< a href=“mailto:yourmail@xxx.xxx?Subject=你好”>Send Mail< /a>

80. 制作电子邮件表单

在<FORM>中输入Action=“youremail@XXX.XXX”,提交采用POST方法。

81. 避免别人将你的网页放入他的框架(FRAME)中

在源代码中<HEAD>…< /HEAD>之间加入如下代码:
<script language=“javascript”><!–
if (self!=top){top.location=self.location;}
-→< /script>

82. 定义网页的关键字(KeyWords)

格式如下:
< meta name=“keywords”content=“dreamweaver,flash,fireworks”>
content中的即为关键字,用逗号隔开,在Dreamweaver中用「Insert」-「Head」-KeyWords命令

83. 使表格(TABLE)没有边框线

将表格的边框属性:border=“0”

84. 定时载入另一个网页内容

在源代码中的<HEAD>…< /HEAD> 加入如下代码:
< meta http-equiv=“refresh”content=“40;URL=http://www.cfan.com.cn ”>
40秒后将自动载入http://www.cfan.com.cn所在的网页。

85. 改变状态栏提示文字

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

86. 在Dreamweaver中设置水平标尺的颜色

由于在Netscape中不支持<hr>的COLOR属性,所以在Dreamweaver中没有此项设置,你只能在HTML中加入代码: color=“颜色代码”

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » DreamWeaver 超级技巧 a
分享到: 更多 (0)