IT学习者 | 站长学院 | 技术文档 | 成语 | 歇后语 | 桌面壁纸 | 天气预报 | 帝国时代 | 生日密码 | 代码收藏 | 厦门天气 | IP地址查询 | 生活百科

Dreamweaver MX 2004从零开始(5)

【 来源:中国电脑教育报 作者:赵江 更新时间:2005-09-30 | 字体:

  用行为丰富网页效果
  行为可以说是Dreamweaver MX 2004中最有特色的功能,它可以让你不用书写一行javascript代码即可实现多种动态网页效果。行为的关键在于Dreamweaver MX 2004中提供了很多动作,其实就是标准的javascript程序,每个动作可以完成特定的任务。这样,如果你所需要的功能在这些动作中,那么就不要自己编写javascript程序了。


  弹出消息框


  如果希望别人进入网站首页的时候可以看见一个弹出的消息框来显示一些内容,则可以通过下述方法实现。

  第一步 在Dreamweaver MX 2004主窗口中新建一个页面,接着运行“Windows→Behaviors”命令激活行为面板。

  第二步 在行为面板中点击“+”按钮,并且从弹出菜单中选取“Popup Message”命令,这时可以看见图1所示的窗口,在其中可以输入诸如“欢迎光临中国电脑教育报网站!”之类的提示信息。

图01

  第三步 添加好提示文字之后,控制面板中就多出一个名为“Popup Message”的行为,此时还要点击左部的下拉菜单,并且从中选择“onLoad”一项,这样当别人进入页面之后就会自动执行设置的行为,自然也就能够看见弹出的消息框了。

  提示:从下拉菜单中还可以选择“onKeyDown”、“onMouseDown”之类的行为,使得按下键盘或者点击鼠标之后出现消息框。


  链接解释文字


  在浏览一些网页的时候,将鼠标放在图像或者链接上会有解释文字出现,实现这种效果可以通过下述步骤实现。

  第一步 先在Dreamweaver MX 2004的编辑窗口中插入一幅图像,单击这幅图像之后在属性面板的链接输入框内填写“#”号让它链接本页。

  第二步 通过“Insert→Layer Objects→Layer”命令在图像旁边添加一个层,并且输入需要显示的话。选择这个层之后,在属性面板中将“Vis”属性设置为“hiddend”来隐藏该层(如图2)。

图02
  第三步 选择图像之后,通过“Windows→Behaviors”命令激活行为面板,单击“+”按钮并选择“Show-Hide Layers”一项。在弹出的窗口中选取需要显示的层,接着点击下部的“Show”按钮,这样确认之后就可以在行为面板中多出了一个名为onMouseOver的事件。此时点击“+”按钮并击选择“onMouseOver”一项,这样当鼠标放在图像上就可以显示该层,也就是可以出现浮动的文字解释了。

  第四步 接着参照第三步为刚才的层添加“Hide”事件,并且将行为设置为“onMouseOut”,这样鼠标拿开时就可以隐藏该层了。

  完成上述操作之后,按下“F12”按钮即可打开IE浏览器进行预览,当鼠标移动到这个图片上的时候会出现预先设置好的提示字样,而鼠标移开图片时字样自动隐藏。


  自动调整窗口大小


  有些网页在改变窗口大小的时候也会随之调整网页页面大小,因此窗口过大就不会有空白处,窗口过小边缘就不会跑出移动条,对于这种自动调整页面大小的功能,在Dreamweaver MX 2004中可以参照下述步骤来很容易的实现。

  第一步 新建一个页面,然后通过“Insert→Table”命令插入一个一行三列的表格,此时可以先不管它的宽度,而是通过下述设置让它自动伸展适合浏览器窗口。

  第二步 这时可以看见每个单元格下部都标明了宽度且有一个小三角形(如图3)。在这个表格中,可以设定哪部分是需要固定的,不过只能让一列自动伸展,比如此处我们设定最后一列随着窗口大小的变化自动伸展。

图03

  第三步 选中最后一列,运行“View→Table Mode→Layout Mode”命令,并且在弹出的菜单中选择“Make Column Autostrach”一项(如图4)。

图04

  第四步 接着将出现对话框,并且会提示为了能够使行伸展,Dreamweaver需要放置一些间隔图片在其它列中,在此选择“Create a spacer image file”一项,这样图片在浏览器窗口不会显示出来,而是起着固定表格的作用。

  第五步 确认之后返回原先的编辑窗口,可以看见最后一列已经自动伸展填充了整个浏览器窗口,而另外两列则保持着固定的宽度。

  提示:设定自动伸展的列可以在列上端看见一个波浪线。

  完成上述操作之后,在IE浏览器中预览页面效果的时候,如果改变窗口的大小,则最后一列的宽度也会随之变化,而前两列的宽度维持不变,这样就可以实现自动调整窗口大小了。

  上文介绍的仅仅是Dreamweaver MX 2004中行为功能的一些方法,灵活地把行为和图层结合运用还可以实现诸如动态图片、可拖拽的图层等等功能,让你的主页看起来更加丰富多彩!

  • 转载请注明来源:IT学习者 网址:http://www.itlearner.com/ 向您的朋友推荐此文章
  • 文章关键词:  Dreamweaver  从零开始 
  • 特别声明: 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系我们,我们会尽快予以更正。
RSS订阅
  • 抓虾
  • google reader
  • 鲜果
  • QQ邮箱

音乐
犯贱 月光 包容 想你了 甩葱歌 黄梅戏 爱情错觉 星月神话 这就是爱 最幸福的人 爱笑的眼睛 321对不起 你不知道的事 看透爱情看透你 你还欠我一个拥抱
忐忑 爱过 浮夸 猜不透 洛丽塔 错的人 爱情买卖 和平分手 等你爱我 没那么简单 我的心好冷 姑娘我爱你 在回忆中死去 我的爱情不见了 你在我心中是最美
她说 偏爱 素颜 错错错 走天涯 套马杆 断桥残雪 爱是你我 郎的诱惑 客官不可以 我要去西藏 我的好兄弟 哥只是个传说 情歌没有告诉你 我和草原有个约定
天真 王妃 小三 爱琴海 要抱抱 单身歌 埋葬冬天 给力青春 荷塘月色 最好不相见 最炫民族风 新贵妃醉酒 贝多芬的悲伤 大笑江湖主题曲 给我一个理由忘记
加入收藏留言建议ASP探针PHP探针站长Enjoy的BlogAboutDomain
© 2010 IT学习者 - itlearner.com
RunTime:102.50ms