DreamWeaver操作超级技巧大全(3)

时间:2008-10-03 20:50:00 

  21. 给文字施加行为(Behavior),制作动态文字特效

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

选中你想编辑的文字,在链接目标框里随便填入几个字符。选中这个链接,单击窗口(Windows)→行为(Behaviors),弹出行为面板。按下“+”添加你想要的行为,如play sound等。打开Dreamweaver的超文本编辑器,找到这个链接,把改为,把改为。最后把“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的插件轻易地实现。插件的安装方法:解压缩后拷贝到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")。

标签:Dreamweaver,编辑器,网页设计,技巧
0
投稿

猜你喜欢

  • SqlServer 索引自动优化工具

    2012-10-07 10:41:09
  • js+asp总结

    2009-11-16 17:49:00
  • Microsoft Office Access 2007使用技巧

    2008-05-23 13:23:00
  • 小看了setTimeout()

    2009-12-04 12:44:00
  • JavaScript Table行定位效果

    2009-05-25 10:47:00
  • ASP 读取MP3文件帧的信息比特率,采样频率,播放时间

    2010-06-04 12:22:00
  • 如何用Axure制作Tab页签

    2009-02-08 17:53:00
  • 用途相似的标签

    2008-05-23 13:11:00
  • sqlserver 巧妙的自关联运用

    2012-07-21 14:55:12
  • Asp性能优化之Response.IsClientConnected属性及其应用示例

    2008-09-18 12:13:00
  • asp检测是否为中文字符函数

    2011-04-07 11:19:00
  • MySQL十条特殊技巧

    2007-09-17 12:33:00
  • 怎么写好一份图形界面设计师简历

    2009-04-16 13:10:00
  • 批量更新存储过程所有者

    2010-07-15 21:14:00
  • 论Asp与XML的关系

    2008-03-05 12:01:00
  • asp如何显示已在数据库编码了的相对应的记录?

    2010-06-09 18:44:00
  • 彻底弄懂CSS盒子模式之四(绝对定位和相对定位)

    2007-05-11 16:51:00
  • Win7 x64 IIS运行ASP+Access故障完美解决方法(转)

    2012-03-27 18:30:35
  • CSS的书写顺序规范

    2008-06-12 13:51:00
  • Web开发者的百科全书——Google DocType

    2008-07-03 13:06:00
  • asp之家 网络编程 m.aspxhome.com