Dreamweaver的超级技巧汇总(3)

Post by 张美工, 2009-5-8, Views:

  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〉
有了这段代码,你在该网页上的所有文本的行距都确定好了,若不满意,可修改设置。

 ----------------------------------------------------------------------------------------------
. 用Dreamweaver 4.0轻松设计会自动弹性调整的网页
 2. 用Dreamweaver 4.0制作有闪动效果的Flash按钮
 3. 在Dreamweaver 4.0中自定义键盘快捷键
 4. 让Dreamweaver?4.0和Fireworks整合
 5. 巧用网站报告器                                            6. 快速恢复多次操作
 7. 隐藏浮动面板
 8. 快速预览网页                  9. 在HTML检示窗中显示行号和自动换行
10. 如何获得颜色的十六进制代码                            11. 制作背景音乐
12. 让背景图不滚动                                       13. 定义大小不变的文字
14. 插入Flash动画

15. 让表格给网页留白                                    16. 改变状态栏提示文字
17. 整合的文本代码编辑器           18. 在Dreamweaver中输入多个空格
19. 解决Dreamweaver的BUG之一
20. 用Dreamweaver 3.0的模版制作网页,设置行为(Behavior)
21. 给文字施加行为(Behavior),制作动态文字特效
22. 精确定位网页中各个元素的位置           23. 改变浏览者的鼠标形状
24. 去掉超链接文字之下的下划线        25. 制作一个跟着页面走的图像
26. 制作鼠标移上去后有变化的动态菜单
27. 用Dreamweaver制作出一个类似于下拉菜单的效果
28. 轻松制作下载文件        29. 利用Dreamweaver的书签制作跳转链接
30. 去掉图片和表格接触地方的空隙

31. 用TracingImage帮助定位网页中各元素的位置
32. Convert Table widths to Pixels和Convert Table widths to Percent
33. 调用Style而不致使网页原代码混乱不堪
34. 使用定制窗口功能测试网页在不同分辨率下的效果
35. 上传网站时无需使用第三方FTP软件
36. 实现用鼠标指向链接时出现下划线的效果
37. 实现定义的超级链接文字颜色
38.在Dreamweaver中把图形放在最中间
39.如何使用Behaviors 功能,而又不链接到任何地方去
40.实现在一张(较大)图片上做出几个不同的链接
41. 制作目录树                         42. 在Dreamweaver中轻松设置行间距

43. 如何设计能使浏览者在浏览时对网页字体大小的设置不起作用
44. 实现网页每过五分钟刷新一次的效果
45. 解决用IE预览正常的链接网页,上传到网站却看不见的现象
46. 制作新开一个窗口打开网页的超级链接(即原来的网页不被覆盖)
47. 隐藏不必要的标签                         48. 解决表格紧贴左上方的问题
49. 在Dreamweaver中将图设为透明alpha设置         50. 设置表格虚线
51. 在Dreamweaver中使插入的FLASH透明
52. Dreamweaver4中设置表格亮边框和暗边框
53. 隐藏表格的分隔线                          54. 如何选取被遮盖或隐藏的层
55. 在层(或表格中)上编辑文本时自动换行
56. 在Dreamweaver中输入上下标                      57. 去掉链接的下划线

58. 关于Dreamweaver中加入空格的问题        59. 制做收藏夹里的ICON
60. 解决Dreamweaver表格里的背景不能预览问题
61. 在Dreamweaver中准确地定位层                   62. 设置网页定时关闭
63. 设置timeline中的layer走曲线               64. 使字体适应不同的分辨率
65. 善用拖放技术      66. 善于为对象取名     67. 多用快捷键来提高效率
68. 一次链接到两个网页      69. 利用“Format Table”命令来修饰网页
70. 尽量不要给文件起中文名称              71. 经常保存当前被编辑的文件
72. 自动在网页中加入更新时间

73. 只复制编辑区中的文字                                  74. 定义网页的关键字
75. 实现浏览器状态栏中的滚动字幕            76. 将 DW 集成到IE浏览器
77. 避免点击空链接对象时会跳到页面顶端的现象
78. 解决使用CSS 、层时,在不同浏览器的效果不同甚至出现错位现象
79. 在网页中加入EMAIL链接并显示预定的主题    80. 制作电子邮件表单
81. 避免别人将你的网页放入他的框架(FRAME)中
82. 定义网页的关键字(KeyWords)       83. 使表格TABLE没有边框线
84. 定时载入另一个网页内容                            85. 改变状态栏提示文字
86. 在Dreamweaver中设置水平标尺的颜色

章出处:北大青鸟  http://www.gz-benet.com.cn  

Tags: Dreamweaver  超级技巧汇总 
分类:css+div | 评论:0 | 引用:0
上一篇:Dreamweaver的超级技巧汇总(4)
下一篇: Dreamweaver的超级技巧汇总(2)

或许你还对下面的文章感兴趣

Comments

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

<#template:pagebar#>

最新文章

最新评论

Guest