• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >Dreamweaver教程 > dreamweaver做网页实例教程 制作弹出菜单

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

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含制作,菜单,教程,实例,网页,设置,文字,如图,所示,链接等相关知识,佚名 希望在学习及工作中可以帮助到您
效果说明

  本实例所要完成的效果是当鼠标移动到文字上时,就会弹出一个漂亮的菜单,如图 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 ,可以快速制作出以往只能用复杂代码才能实现的弹出菜单,这样可以实现复杂菜单的弹出和收缩,方便使用又能让页面美观、整洁。

您可能想查找下面的文章:

  • dreamweaver制作网页详细步骤(设计网站首页)
  • dreamweaver做网页实例教程 制作弹出菜单
  • 用DreamWeaver模板工具批量制作网页
  • Dreamweaver下用CSS制作网页的技巧
  • Dreamweaver中制作网页的实用技巧
  • Dreamweaver 网页制作的技巧
  • Dreamweaver CS3网页制作中的CSS布局规则
  • 制作网页 详解Dreamweaver13个技巧
  • Dreamweaver解决网页制作中的空格问题
  • Dreamweaver定义模板批量制作网页

相关文章

  • 2017-08-06Dreamweaver网页中怎么制作锚点链接?
  • 2017-08-06dreamweaver翻译器没有被装载由于错误coldfusion.htm有不正确的设置信息
  • 2017-08-06Dreamweaver 批处理去除a中间不需要的部分
  • 2017-08-06教你把图片添加到Dreamweaver工程中
  • 2017-08-06在Dreamvear中如何创建html5网页?
  • 2017-08-06Dreamweaver项目列表前面的项目符号去掉小圆点?
  • 2017-08-06Dreamweaver中Spry区域功能说明
  • 2017-08-06在Dreamweaver中利用CSS样式表设置网页
  • 2017-08-06DreamWeaver cs5软件安装破解详细教程附软件下载
  • 2017-08-06Dreamweaver怎么进行批量文件搜索指定内容?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Dreamweaver 8 无法启动的解决方案
    • DreamWeaver文件保存时提示"发生共享违例"问题分析及解决方法
    • dreamweaver 怎么在网页中使用div展示图片效果?
    • Dreamweaver工作区布局有哪些工具?
    • DreamWeaver cs5软件安装破解详细教程附软件下载
    • Dreamweaver打开和关闭的错误的解决方法
    • dreamweaver怎么批量替换超链接?
    • Dreamweaver中制作活动菜单条效果的方法
    • 在Dreamweaver中利用CSS样式表设置网页
    • 用Dreamweaver制作WordPress的留言本III

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有