dreamweaver做网页实例教程 制作弹出菜单

   效果说明

  本实例所要完成的效果是当鼠标移动到文字上时,就会弹出一个漂亮的菜单,如图 17-1 和图 17-2 所示。


  创作思想

  本实例首先在网页中输入一行文字,并对文字做一个特殊的超链接,然后利用 Dreamweaver MX 2004 自带的行为制作弹出菜单。

  操作步骤

  ( 1 )输入文字并设置超链接。在网页中输入文字,因为单独的文本文字是无法添加行为的,按照 Dreamweaver 中的约定,将文字的超链接设置为“ javascript:; ”才能够添加行为。所以将文字的超链接设为“ javascript:; ”,并执行【显示弹出式菜单】行为,如图 17-3 所示。


  ( 2 )设置菜单项和子菜单项,并为菜单设置超链接,然后安排好各个菜单的次序,如图 17-4 所示。


  ( 3 )设置页面元素。将菜单设置为垂直菜单,并分别设置菜单的字体、字号、对齐方式、一般状态和鼠标滑过时的状态,如图 17-5 所示。


  ( 4 )设置【高级】标签。在【高级】标签选项中设置菜单的延迟时间,以及是否显示菜单边框。然后设置边框的宽度、颜色、阴影、高亮,如图 17-6 所示。


  注意:【菜单延迟】中时间的单位是毫秒( ms ), 1000 毫秒等于 1 秒,在设置时注意换算。

  ( 5 )设置的 x 轴和 y 轴参数。在【位置】标签选项中设置弹出菜单的 x 轴和 y 轴参数,这两个参数表示弹出菜单左上角到网页左上角的距离,如图 17-7 所示。


  ( 6 )保存网页文件,然后在浏览器中打开该网页,将鼠标光标移动到文字上方时即可看到有菜单弹出,本实例操作完毕。通过 Dreamweaver ,可以快速制作出以往只能用复杂代码才能实现的弹出菜单,这样可以实现复杂菜单的弹出和收缩,方便使用又能让页面美观、整洁。

时间: 2024-09-12 07:05:38

dreamweaver做网页实例教程 制作弹出菜单的相关文章

Dreamweaver MX 2004高级技巧(3)制作弹出菜单

dreamweaver|菜单|高级|技巧 利用Dreamweaver MX 2004提供的行为,可以直接做出弹出菜单.下面讲解制作一个弹出菜单的具体步骤. 1.可以直接给图片加上弹出菜单.但是不能给文本直接加上弹出菜单.如果需要给文本加上弹出菜单,首先需要把文本变成链接.选中文本,在属性面板的链接项输入"javascript:;",就给文本加上链接了.如图: 2.文本链接默认的颜色是蓝色,并且有下划线.如果要更改链接文本的外观使它看上去不是一个链接,切换到代码视图下,打到这个链接的a

dreamweaver做网页实例教程 利用表格美化页面

  效果说明 利用表格美化页面的方式有很多种.本例制作出来的带有层次感的表格如图 8-1 所示. 创作思想 利用表格美化页面并不需要很多的制作技巧.例如本例只需要进行简单的表格嵌套(即在表格中插入表格),即可达到美化效果. 操作步骤 ( 1 )新建一个页面文件,然后在编辑区域中插入一个 2 × 1 的表格,并设置表格的基本属性参数,如图 8-2 所示. ( 2 )设置表格.将光标置于第一行的单元格中,再将单元格的背景颜色设置为 # 69A 538 ,并应用同样的方法将第二行单元格的背景颜色设置为

如何用Dreamweaver轻松制作弹出菜单

dreamweaver|菜单 本文选自4u2v工作室编写的<Dreamweaver网页设计与制作100例>(人民邮电出版社出版,ISBN: 7115142394 ).未经著作权所有者书面授权许可,禁止转载本文. 购买地址:点击访问 弹出菜单在网页制作中是一种非常常用的菜单方式,这种菜单不但制作简单,而且效果也很好. 效果说明 本实例所要完成的效果是当鼠标移动到文字上时,就会弹出一个漂亮的菜单,如图 17-1 和图 17-2 所示. 创作思想 本实例首先在网页中输入一行文字,并对文字做一个特殊的

利用Dreamweaver mx自带的行为制作弹出菜单

dreamweaver|菜单 不知道大家有没发现DWMX中有一个和FW差不多的制作弹出菜单功能?这个功能允许用文字和图片做为主菜单,如果用文字的话要先做虚拟链接.下面简单和大家说说制作的过程! 1.我这次是用图片,先在DWMX中新建一个页面,插入图片.选取图片,打开行为窗口,点击+号,选取"显示弹出式菜单"选项,这时候DWMX就打开一个窗口如下图: 大家可以看到有四个选项,分别为:"内容.外观.高级.位置". 2.在文本框写上你的菜单名称,通过点击+号来增加你所需菜

利用DW MX自带的行为制作弹出菜单(组图)

菜单 不知道大家有没发现DWMX中有一个和FW差不多的制作弹出菜单功能?这个功能允许用文字和图片做为主菜单,如果用文字的话要先做虚拟链接.下面简单和大家说说制作的过程! 1.我这次是用图片,先在DWMX中新建一个页面,插入图片.选取图片,打开行为窗口,点击+号,选取"显示弹出式菜单"选项,这时候DWMX就打开一个窗口如下图: 大家可以看到有四个选项,分别为:"内容.外观.高级.位置" 2.在文本框写上你的菜单名称,通过点击+号来增加你所需菜单数目如下图: 如果你的菜

用Dm中自带的行为制作弹出菜单

不知道大家有没发现DWMX中有一个和FW差不多的制作弹出菜单功能?这个功能允许用文字和图片做为主菜单,如果用文字的话要先做虚拟链接.下面简单和大家说说制作的过程! 1.我这次是用图片,先在DWMX中新建一个页面,插入图片.选取图片,打开行为窗口,点击+号,选取"显示弹出式菜单"选项,这时候DWMX就打开一个窗口如下图: 大家可以看到有四个选项,分别为:"内容.外观.高级.位置" 2.在文本框写上你的菜单名称,通过点击+号来增加你所需菜单数目如下图: 如果你的菜单还有

怎么设置Dreamweaver 制作弹出菜单

  我们制作中要完成的效果是当鼠标移动到文字上时,就会弹出一个漂亮的菜单,如图 17-1 和图 17-2 所示. 具体操作步骤如下: 1.输入文字并设置超链接.在网页中输入文字,因为单独的文本文字是无法添加行为的,按照 Dreamweaver 中的约定,将文字的超链接设置为" JavaScript:; "才能够添加行为.所以将文字的超链接设为" Javascript:; ",并执行[显示弹出式菜单]行为,如图 17-3 所示. 2.设置菜单项和子菜单项,并为菜单设置

如何在Dreamweaver 制作弹出菜单

  我们制作中要完成的效果是当鼠标移动到文字上时,就会弹出一个漂亮的菜单,如图 17-1 和图 17-2 所示. 具体操作步骤如下: 1.输入文字并设置超链接.在网页中输入文字,因为单独的文本文字是无法添加行为的,按照 Dreamweaver 中的约定,将文字的超链接设置为" JavaScript:; "才能够添加行为.所以将文字的超链接设为" Javascript:; ",并执行[显示弹出式菜单]行为,如图 17-3 所示. 2.设置菜单项和子菜单项,并为菜单设置

Dreamweaver MX 2004高级技巧(4)制作弹出小窗口

dreamweaver|高级|技巧 弹出窗口经常用于发布站内公告,或作为一个网站的广告来使用,今天给大家介绍如何使用Dreamweaver MX 2004制作弹出小窗口 1. 新建立一个html页面,设置页面属性.左边界,顶部边界为 0 ,在标题处输入标题名称. 2. 在页面中插入图片.也可以是文字, Flash 动画等.小窗口页面就准备好了. 让一个页面把刚才的小窗口弹出: 1. 新建一个需要添加弹出小窗口页面,当然也可以打开自己制作的网站的首页,在标签选择器中选择" body "标