Dreamweaver 3网页设计技巧集锦(一)

【 tulaoshi.com - Web开发 】

　　1、如何把自己放在主页上的zip或其他文件让浏览者下载（down）？

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

　　2、在网页中，图片和表格接触的地方如何不留空隙？
　　要使图片和表格接触的地方不留空隙，仅在表格属性面板上把外框线（border）设为0是不行的，不仅仅只是表格外框,还有两个设置，即在表格的属性面板上还要把单元格的两个属性设为0（cellspacing="0" cellpadding="0"）。

　　3、有些网页的链接，原先没有下划线，你把鼠标指向链接处，才会出现下划线，鼠标移掉下划线就又没有了。如何实现这种效果呢？

　　可用层叠样式表（CSS）来实现的，在Dreamweaver3中编辑层叠样式表不用编写代码，具体操作方法如下：

　　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”（定义当鼠标在超级链接上时链接的属性），按ＯＫ按钮；

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

　　8）在Edit Style Sheet 面板上再按Don按钮，至此所有设置结束，你在Dreamweaver3的源代码检视窗中将看到在head与/head之间如下所示的代码：

　　style type="text/css"

　　!--

　　a { color: #339966; text-decoration: none}

　　a:hover { color: #FF3300; text-decoration: underline}

　　--

　　/style

　　有了这段代码，你在该网页上的所有文字链接在浏览器中显示时没有下划线，当你把鼠标指向链接处，才会出现下划线，鼠标移掉下划线就又没有了。若你想在其它网页中也具有这种效果，你可以用上述方法设置或更简单点，直接把这段代码复制，粘贴到head与/head之间即可。注意：若不是在a 中定义除去下划线而是在a: link中定义除去下划线，在实际使用时不能除去下划线，我是在IE4.0环境下测试的。

　　4、如何实现定义的超级链接文字颜色？

　　许多文章和教程都介绍过文字超级链接的颜色（包括未被访问的链接颜色、鼠标的链接上的颜色、已被访问过的链接颜色等等）可以用层叠样式表（CSS）定义，但真正在网页中要实现颜色按自己的意愿变化还确实不容易。下面把一些注意事项告诉你，你就能随心所欲地设置文字链接的颜色了。

　　1）超级链接的默认颜色是：未被访问的超级链接是蓝色、被访问过的超级链接是紫色；

　　2）要想使CSS定义的颜色起作用，在超级链接的文本的颜色属性中什么都不要填；

　　3）若你已定义了文本的颜色，发现CSS中定义的超级链接颜色不起作用，你可以取消文本的颜色定义，或取消超级链接再重新定义一次，CSS定义的颜色就起作用了；

　　4）超级链接上各种状态下文本颜色的关系：一旦定义了被访问过的链接的颜色（A: visited），则当链接被访问过后，该链接的颜色不再改变，即定义鼠标在超级链接上的颜色（a: hover）将不起作用了。若不定义被访问过的链接的颜色（A: visited），则当鼠标在超级链接上显示a: hover 中定义的颜色，当鼠标移开时显示a 中定义的颜色。

　　从上述可以看出，文本链接的颜色实际上只能在两种颜色之间变换，并没有象有些文章中讲的那样可以在多种颜色之间变换，但由于用那两种颜色可以任意，所以应该讲颜色的选择范围还是比较大的。

　　5、如何在dreamweaver3中把图形放在最中间？

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

　　6、在dreamweaver3中，超级链接可以实现许多网页特效（Behaviors），但有时我们只想使用Behaviors 功能，而又不链接到任何地方去，怎能么办？

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

　　7、在同一网页中如何点一个链接使得窗口移到本页指定的地方，就象SOIM一份杂志《英文天地》一样？

　　这就应用所谓的“书签”功能。在dreamweaver3中，“书签”不是用“BookMark”表示，而是用“Name Anchor”（一般直译为“锚”）。在需要转到的地方同时按下“Ctrl+Alt+A”键，在弹出的插入“书签”对话框(Insert Name Anchor)中，输入一个书签的名字，名字你可随便取，若有多个书签，只要不重名就行了。然后在要作超级链接的元素属性面板上，点击地址栏的下拉框，你可看到你所插入的书签名全在这里，只是在最前面加了一个“#”号，你选取一个你欲链接到的地方的书签名册名就行了。

　　8、如何在一张（较大）图片上做出几个不同的链接？

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

　　9、如何在网页中制作以下东东：在总目录的前方有一个“+"，一按这个“+"，即可显示其下子目录，“+"即变成“-"，一按“-"，即可隐藏其下子目录，就象在资源管理器中那样？

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