- 1、本文档共6页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
利用dw制作漂亮的导航栏效果
? 最近论坛中很多网友问到各种菜单和导航的制作方法,下面我们就网上常见的一些菜单和导航效果做简单的介绍。考虑到满汉全席的菜单应该是最全的了,我们就以此为名,来顿super大餐。Let’s Go! 一、进门点心:利用Dreamweaver MX制作最基本的下拉菜单 实现下拉菜单的思路是首先建立一个相对定位的层,调整其位置,并设置其显示属性为隐藏,然后通过给链接文本或图象添加onclick(点击)或者onmouseover(鼠标划过)的事件来触发“显示-隐藏层”的行为,显示隐藏的层,并且在鼠标划出层时隐藏层,实现下拉菜单的完整效果。下面介绍在Dreamweaver中的具体操作步骤:
1.使用菜单在页面中插入一个层,这个层是相对定位的层,然后再在其中插入一个子层,因为子层的位置是相对于父层而言,所以只要父层的位置不发生变化,改变子层的位置和大小不??改变其相对性,效果如图1所示。 图片如下: 图1 为了父层不占据页面空间,可以设置其宽和高为0,因为以后要调整子层的位置,所以先不设定子层的显示属性为隐藏,而是到确定子层到合适位置后再设置。 2.选中导航条上的链接文本。使用快捷键Shift+F3激活行为面板,单击行为面板中的加号按钮,在弹出的行为下拉菜单中选择“显示-隐藏层”,在弹出的设置对话框中选中子层,单击显示按钮,如图2所示。 图片如下: 图2 显示层 设置完毕后单击确定按钮,修改其触发事件为onmouseover,即当鼠标划过文本时显示层。接下来还需要设置鼠标划出文本后的行为,继续使用行为面板,选择“显示-隐藏层”,在弹出的对话框中选中子层,单击隐藏按钮,如图3所示。 图片如下: 图3 隐藏层 设置完毕后单击确定按钮,在行为面板中修改该行为的触发事件为onmouseout,即鼠标划出时隐藏子层。 3.拖动子层,调整其位置到和导航条贴近并垂直位于导航文本的下方的位置。层在编辑页面中的位置和在浏览器页面中的位置是有差异的,所以需要多次调整并在浏览器中预览效果,只到达到合适的位置。 4.设置子层的显示属性为隐藏。 按F12键在浏览器中预览页面,下拉菜单效果如图4所示。 图片如下: 默认状态 图片如下: 鼠标划过状态 图4下拉菜单效果 至此应该说基本实现了所要求的下拉菜单的效果,但是当把鼠标光标移动到层上,要选择子菜单时,层却消失了。这是因为“显示-隐藏层”的行为是设置在文本“菜单1”上,鼠标划出文本区域后,当然就响应了隐藏层的行为。所以还需要进一步的设置,给子层也加上“显示-隐藏层”行为。利用行为面板,给子层加上“显示-隐藏层”行为,更简单的方法是在链接文本的HTML代码中拷贝如下代码:
onMouseOver=MM_showHideLayers(layer2,,show) onMouseOut=MM_showHideLayers( layer2,,hide)
在子层的DIV标签内粘贴以上代码即可。按F12在浏览器中预览,当鼠标划过映射时弹出下拉菜单,通过鼠标可以在下拉菜单中选择,鼠标划出映射和下拉菜单区域时,下拉菜单消失,完全实现了预定的效果。 小节: 1.导航条的下边框线与子层的上边框应该重合,否则当鼠标光标移动到文本和层之间的空白区域时,层就会隐藏,达不到应有的效果; 2.对于有多个下拉菜单时,可以将多个子层放在一个父层中。为保持位置的统一,在调整完第一个子层的位置后,记下层距上和距左的值。当导航图像为水平方向时,所有子层的距上的值都是相同的;当导航图像为垂直方向时,所有子层的距左的值都是相同的; 3.调整完全部子层的位置后,再设置层的显示属性,有助于保持所有子层格式的统一; 4.在层中插入图像或动画等页面元素可以制作出更酷的菜单效果。{$page}二、三道茶:使用Dreamweaver MX中的行为 使用“显示弹出式菜单”行为,可以快捷在页面中创建出自定义样式的弹出菜单。 具体的做法如下: 创建一个空白HTML文档,保存文件。选中页面中的链接(文本或图象)打开行为面板,单击加号按钮,选择动作菜单中的“显示弹出式菜单”,弹出设置弹出式菜单对话框,内容窗口图5所示。图片如下: 图5 设置菜单项目对话框 文本、链接、目标的意义都很容易理解。 菜单:单击加号按钮可以添加菜单项目,选中菜单项目后单击减号按钮可以删除相应的菜单项目;选中菜单项目,单击 按钮可以转换到上级菜单,单击 按钮可以转换到下级
您可能关注的文档
- 刑法分论中的重点罪名.docx
- 刑法学形考任务.doc
- 刑法诉讼中国刑事诉讼模式的本土构建上.doc
- 刑法诉讼关于债转股实施中的法律失衡分析及重构设想.doc
- 刑法诉讼关于刑事二审简易审立法的思考.doc
- 刑法诉讼地方保护主义的成因和解决之道.doc
- 刑法诉讼完善调解制度应以增进社会和谐为着力点.doc
- 划拨土地交易与国有土地资产流失的经济分析002.doc
- 列主元高斯消去法LU三角分解法龙贝格Romberg算法最小二乘法的Matlab程序及运行结果.doc
- 刑法诉讼刑事二审程序中检察机关的职能与地位.doc
- 市场营销4套题库期末考试卷AB卷带答案模拟试卷.docx
- 学习情景1钢筋混凝土检测之建筑材料现场认识.ppt
- (初中段)中国文学常识问答100题加答案下载.docx
- 中国文学常识问答100题及答案【基础+提升】.docx
- 成教高职《药理学》第12章--抗癫痫药.pptx
- 大学计算机(第三版)全书课后习题及答案.docx
- 教师资格(统考)-中学综合素质-知识点归纳26-第三章-教师职业行为规范.doc
- Unit2MyBodyLesson1(课件)人教新起点版英语三年级上册.pptx
- Unit2Morethanfun单词闪卡课件初中英语(2024)七年级上册.pptx
- 安徽省合肥市肥东县八年级下学期期末英语试题(原卷版).docx
文档评论(0)