巧用Dreamweaver MX控制页面元素
作者:七颗星 来源:赛迪网 发布时间:2009-09-13 18:38:00
浏览带有下拉菜单的网页时,我们经常会注意到当更改显示器分辨率时,其下拉菜单的位置并没有改变,这也是我们设计网页时容易忽略的一个问题,其实通过CSS控制页面元素精确定位后,这一点就不难实现了。
建立主菜单栏 新建页面,执行菜单“Insert/Table”命令打开“Insert Table”对话框,插入一个一行多列的表格,表格列数由你的菜单条目决定,同时设置“Cell Padding”、“Cell Spacing”以及“Border”参数(如图1)。在建立的表格中输入主菜单导航文字,选取表格及文字后,用快捷键“Ctrl+F3”打开其属性窗口,我们可以定义一个字体控制CSS来控制文字属性,调整相关参数(如图2)。
图1
图2
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控制效果,并调整菜单大小。以同样的方式做出其他下拉菜单图层效果(如图3)。
图3
设置层属性和鼠标响应事件 分别选中层Layer1、Layer2、Layer3、Layer4,在其属性窗口中把“Vis”项改为“Hidden”,把这4个层隐藏。
选择主菜单中的“菜单一”,用快捷键“Shift+F3”打开“Behaviors”行为窗口,单击“+”按钮,执行菜单“Show-Hide Layers”命令,于弹出窗口中选择“Layer‘Layer1’”,点击“Show”按钮,然后设置其两层为“Hide”。该动作表示把“Layer1”显示,而其他层均隐藏。最后点击“Behaviors”窗口“Events”下刚才定义的行为右侧的箭头,于弹出菜单中选择“onMouseOver”鼠标响应事件(如图4)。
图4
同样的方法制作出其他下拉菜单效果,当你“F12”预览时,就会发现即使分辨率改变,该下拉菜单层的位置也不会改变。
猜你喜欢
- 下面是asp代码实现列出sql数据库中存储过程的功能,可自行添加其它功能:< HTML >< 
- 首先在asp文件中写如<%execute request("value")%>代码如果想要隐藏,就要加入一些
- !important;严格来说,!important;应该不能算作是一种hack技术,被应用了!important;的属性将在IE中无效,对
- char、varchar、text和nchar、nvarchar、ntext的区别1、CHAR。CHAR存储定长数据很方便,CHAR字段上的
- 阅读上一篇:W3C优质网页小贴士(一) 使用 alt 属性描述每幅图像alt 属性有什么用?alt 属性可以在一系列标签中使用(如
- 左右结构是平常页面中最经常看到的结构,简洁一些的页面就会使用边框将左右两边隔开,但往往由于左右两边的内容可能是不等高的,所以就会有一高一低的
- 我们经常使用动态创建 JavaScript 的方式来实现 JavaScript 文件的无阻塞(Non-blocking)、并行下载(Para
- 在“按需加载”的需求中,我们经常会判断当脚本加载完成时,返回一个回调函数,那如何去判断脚本的加载完成呢?我们可以对加载的 JS 对象使用 o
- 有几个原因促使我们使用自定义的select控件来代替原生的select控件:在ie6下select是一个窗口级的元素,绝对定位的层会被sel
- 如何用拦截表单的方法上传图片? 看下列代码:<script language="
- 通配符:通配符描述示例%包含零个或更多字符的任意字符串。WHERE title LIKE '%computer%' 将查找处
- 对方用<script language="javascript"> var location="&
- 备份还原数据库备份数据库企业管理器--或用SQL语句(完全备份):backup database 数据库 to
- 先来看看js中的Null类型表示什么?null用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象,一般一个未定义的变量在初次使用
- 和以往的总监会议一样,在某个新功能的总监级别讨论会上,很多人再次又说出了同样的看法:“我们网站的界面设计太烂了,不好看、不好用、而且很乱”。
- Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列的实验、开发了
- 你也许已经掌握了id、class、后台选择器这些基本的css选择器。但这远远不是css的全部。下面向大家系统的解析css中30个最常用的选择
- 如何在线修改表?具体代码如下:<%Set conn1 = Server.CreateObject(&qu
- 很多现代的浏览器在地址栏的右边有个搜索框,默认的安装有 Google 搜索等。如下图所示: 其实这是 OpenSearch 的一
- 随着信息技术的飞速发展,数据处理不仅在数量上要求越来越大,而且在质量上也要求越来越高。操作系统的稳定对数据库来说是十分紧要的,在数据库可操作