学习无忧
设计频道 首页 | 入门 | 硬件 | 软件 | 设计 | 开发 | 网络 | 营销 | 社区 | 加油站
首页=>设计=>Dreamweaver=>用DW MX控制下拉菜单精确定位  
用DW MX控制下拉菜单精确定位
www.51study.net  2004-8-20 19:04  来源:中国电脑教育报
【字体:  】【评论打印】 【关闭
  浏览带有下拉菜单的网页时,我们经常会注意到当更改显示器分辨率时,其下拉菜单的位置并没有改变,这也是我们设计网页时容易忽略的一个问题,其实通过CSS控制页面元素精确定位后,这一点就不难实现了。
  
  
  建立主菜单栏新建页面,执行菜单“Insert/Table”命令打开“Insert Table”对话框,插入一个一行多列的表格,表格列数由你的菜单条目决定,同时设置“Cell Padding”、“Cell Spacing”以及“Border”参数(如图1)。在建立的表格中输入主菜单导航文字,选取表格及文字后,用快捷键“Ctrl+F3”打开其属性窗口,我们可以定义一个字体控制CSS来控制文字属性,调整相关参数。
  
  
  CSS实现相对定位菜单栏定义一个CSS相对定位的定义控制,将相对定位模型(菜单栏表格)定义为这个CSS属性。使浏览器以相对定位模型左上角作为原点,建立新的坐标系。再在这个相对定位模型下级插入层,使之相对于该相对定位模型定位。使用CSS控制后再在表格中插入的层是不可拖动的,改变其位置可以直接在其属性面板上输入L、T的参数值。
  
  打开“CSS Styles”面板,点击“New Style”按钮,在弹出“New Style”窗口中定义一个名称为.pos的CSS属性,并且选择“Make Custom Style”的“Type”类型和“This Document 0nl”的“Define”类型,“确认”进入“Style Defintion For .pos”窗口,选取“Positioning”定义Type为“Relative”确定。选取菜单栏表格,将该CSS控制添加到菜单栏所在的表格中。使该相对定位模型(表格)建立新的坐标系,只要我们在其中插入下拉菜单层,并设置层内容和主菜单的鼠标响应事件就可以使下拉菜单精确定位了。
  
  插入菜单栏目光标移入表格第一列,执行菜单“Insert/Layer”命令插入一个新层,作为“菜单一”的下拉菜单,点击层内部,执行“Insert/Table”命令,设定该表格行数、列数,并将表格线宽度设为“0”,表格底色为喜好颜色,输入菜单项目文字,设定文字CSS控制效果,并调整菜单大小。以同样的方式做出其他下拉菜单图层效果。
  
  
  设置层属性和鼠标响应事件分别选中层Layer1、Layer2、Layer3、Layer4,在其属性窗口中把“Vis”项改为“Hidden”,把这4个层隐藏。
  
  选择主菜单中的“菜单一”,用快捷键“Shift+F3”打开“Behaviors”行为窗口,单击“+”按钮,执行菜单“Show-Hide Layers”命令,于弹出窗口中选择“Layer‘Layer1’”,点击“Show”按钮,然后设置其两层为“Hide”。该动作表示把“Layer1”显示,而其他层均隐藏。最后点击“Behaviors”窗口“Events”下刚才定义的行为右侧的箭头,于弹出菜单中选择“onMouseOver”鼠标响应事件。
  
  
  同样的方法制作出其他下拉菜单效果,当你“F12”预览时,就会发现即使分辨率改变,该下拉菜单层的位置也不会改变。
【字体:  】【评论打印】 【关闭
相关文章
把Dreamweaver加入到IE工具栏(2004-4-22 22:06)
Dreamweaver:制作目录树(2004-3-24 23:20)
发表评论 共有1条评论   >> 查看详细评论
用户名: 密 码: 匿名评论
请发表评论时遵纪守法并注意语言文明!
 
用户名 评论内容
学习无忧网友 放屁!抄别人的,很多地方都讲的不清楚。按上面讲的方法根本做不出来……
 
文章搜索
关键字:
精彩文章回顾
 Asf文件制作问题
 FrontPage XP
 什么软件可以做网页?
 初学制作网页用front
 Dreamweaver
 用DW MX控制下拉菜单
 在Dreamweaver
 聚焦Dreamweave
 FrontPage98表
 鼠标移上链接出现下划线
 制作会自己移动的广告条
 用Frontpage巧补
 Dreamweaver:
广而告之
会展世界
身份证核查
玩转手机
关于我们 | 广告服务 | 诚邀加盟 | 友情链接 | 网站地图 | 联系方式
Copyright ©1998-2005, All Rights Reserved.
版权所有 学习无忧网 51study.net
广告或空间合作