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

弱弱的守门员

弱弱的守门员

2016-02-19 20:43

今天图老师小编要跟大家分享Dreamweaver 3网页设计技巧集锦(一),精心挑选的过程简单易学,喜欢的朋友一起来学习吧!

  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。按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按钮,至此所有设置结束,你在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)超级链接的默认颜色是:未被访问的超级链接是蓝色、被访问过的超级链接是紫色;

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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

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

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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

  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的帮助文档,在这帮助文档里也是按一下总目录,弹出子目录,按下子目录上的总目录则返回到总目录,只是没用“+”、“-”表示而已。你再看一下该文档的源代码就一目了然了。

展开更多 50%)
分享

猜你喜欢

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

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

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

Web开发
Dreamweaver 3网页设计技巧集锦(二)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Dreamweaver CS3网页制作之CSS布局规则

Web开发
Dreamweaver CS3网页制作之CSS布局规则

2017网页设计风格 2017网页设计有哪些主流趋势

网页设计 网站设计 设计 平面设计
2017网页设计风格  2017网页设计有哪些主流趋势

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Dreamweaver使用技巧集锦

Web开发
Dreamweaver使用技巧集锦

[设计]DREAMWEAVER 问题集锦

Web开发
[设计]DREAMWEAVER 问题集锦

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

实现鼠标经过超链时的提示图层

实现鼠标经过超链时的提示图层

Dreamweaver中HEAD元素的使用

Dreamweaver中HEAD元素的使用
下拉加载更多内容 ↓