建站教程Dreamweaver架设中级篇之三

发布时间:2009-06-22 发布者:新锐传媒 查阅 [2825] 评论 [0]

      上会儿在“建站教程Dreamweaver架设中级篇之二”的文章中我们介绍了一些flash实现页面效果的小方法,今天我们要说的是关于:控制状态栏,弹出信息,动态图片,框架布局四个方面在网页设计中的一些应用。
第一是控制状态栏信息 
  1、打开页面,选中一张图片。 
  2、点击行为窗口上的“+”号按钮,选择设置文本/设置状态条文本。 
  3、在对话框里的“消息”一栏里,输入需要显示的话,如对这张图片的介绍。 
  4、可以设置行为的触发条件为OnMouseOver(鼠标移到对象上),这样当鼠标经过这张图片的时候,状态栏将出现相关的信息。 
  5、如果需要鼠标在移开后,这个信息消失,那么再次使用这个行为,在“消息”一栏里什么都不写,然后把触发条件改为OnMouseOut(鼠标移开)。 
  6、同样可以在一段文字上设置该行为。或是设置在整个页面上也可以。 
第二是弹出信息 
  1、打开一个制作好的页面,点左下角项。点击行为窗口上的“+”按钮,从弹出菜单中选择“弹出信息”一项。 
  2、在设置窗口中“消息”一栏里输入想显示的消息即可。 
  3、触发条件设置为Onload(当页面载入时),就可以用来作为打开页面的欢迎信息。如设为OnUnload(当关闭页面时),就可以作为用户关闭页面时送别信息。 
  4、也可以在某一段文字上设置弹出信息。比如一段文字不愿让人复制,就选中整段文字,注意此时左下角显示〈P〉,即段落。 
  5、然后同样操作,消息可以输入版权之类的语句。只是设置触发条件为OnBeforeCopy(按右键时触发),或OnCopy(按右键选复制时触发)。 
第三是动态图片按钮 
  1、准备好两张同样大小的图片,常用的方法是如一张为灰度照片,一张为彩色照片。或一张是按钮凹下的样式,一张是按钮凸起的样式。 
  2、举例:插入一个3行1列的表格,设置宽度为180像素。 
  3、将光标置于第一行,插入一张灰度的图片。 
  4、在属性面板中“链接”一栏里输入需要链接的地址,并给图片加上名称,如tu1. 
  5、点击行为窗口上的“+”按钮,从弹出菜单中选择“交换图像”。 
  6、此时在“图像”一栏中已显示要交换的图像,然后在“庙宇原始档为”一栏里选择好交换后的那张图。 
  7、下面有两个参数,“预先载入图像”和“鼠标滑开时恢复图像”,都要选中。 
  8、同样方法创建另外两个动态按钮。 
第四是用框架布局页面 
  框架由两个主要部分组成——框架集和单个框架。 
  1、 点击插入中的框架,即显示出已定义的13种框架的样式。我们上—中—下结构为例。 
  2、 点击“上—中—下”框架结构的图标,此时在页上插入上下两个框架,将整个页面分割成了3部分。我们分别在上面输入“上”,在中间输入“中”,在下面输入“下”。 
  3、 先保存一下。点击菜单中的文件/保存全部。这时首先保存框架集文件,可以自己修改名字,如kuangjia.htm。然后将分别保存框架集中的其他页面。在保存对应的页面的时候,该部分会以虚线框起来,这样可将上面部分保存为shang.htm。下面部分保存为xia.htm。中间部分保存为zhong.htm。 
  4、 至此,我们保存了四个页面,分别是框架集,和组成框架集的上、中、下三个页面。所以,其实这个框架是由四个页面组成的,所以用框架会降低一点用户浏览的速度。 
  5、 点击窗口/其他/框架,打开框架的面板。在这里单击某个框架,即可选中该框架。当框架被选中时,编辑窗口中对应的框架出现虚线。 
  6、 如:选中上面topframe,此时属性面板上显示的是上面这个框架的属性。同样选中中间框架和下面框架,也可以分别设置它们的属性。 
  7、 在编辑窗口中,将鼠标放在两框架之间的边框上,光标将变成上下箭头形,此时点击边框,选中的是整个框架集。 
  8、 此时属性面板上出现的是整个框架组的属性。可以在此设置框架集是否有边框、宽度及颜色等。不过最为重要的是可以在这里设置框架集中各个框架的大小。 
  9、 在属性面板的右面的图示上选中上面框架,设置它的行为80像素,边框为0。 
  10、选中下面框架,设置行高为30像素,边框为0。 
  11、选中中间框架,设置行高为1,单位为相对。(相对的意思是:当前行相对于其他行所占的比例。设为1就是指占据除上和下以后的所有浏览窗口剩余空间。 
  12、举例:将光标置于上面框架topFrame上,右键选页面属性,设置背景色为#FF6600。然后插入/表格,插入一个1行2列,边框边距都为0的表格。设置第1个单元格的宽度为116像素,然后插入一张图片。将第2个单元格设置为水平对齐方式为居中,垂直排列方式为底部,然后依次输入“狮子座”、“魔蝎座”、“双子座”字样。 
  13、将光标置于中部框架mainFrame中,右键选页面属性,设置背景色为#FFFFCC。然后插入一张大图像。 
  14、将光标置于下面框架bottomFrame中,右键选页面属性,设置一个背景图像。 
  15、另外做好三个页面,作为“狮子座”、“魔蝎座”、“双子座”所要链接的页面。 
  16、选中“狮子座”,在属性中为它设置好要链接的页面,然后在“目标”里选“mainframe”,即该内容在中间那个框架中显示。 
  17、同样设置“魔蝎座”、“双子座”的链接。

      感谢您看完此篇文章如果这些能给您带来思考我将万分荣幸。新锐网络公司还给您提供网站建设网站优化网站设计等服务,如有需要请联系我们:0532-85631198 QQ:565388088

      免责声明 | 新锐观点 | 网站运营 | 网站推广 | 联系我们 | 网站地图