时间需要一分一秒的过,事情需要一点一滴的做!

渴望!勇气!自信!坚持!

博客园 首页 新随笔 联系 订阅 管理
网页中层的精确定位很重要:
层随分辨率变化改变!
绝对定位,相对定位
招数一:表格定位法

  步骤1:打开Dreamweaver3,新建一个页面,使用快捷键“Ctrl+Alt+T”插入一个两行一列的表格,设置第二行的目的就是为了放置层,使其相对表格定位。输入文字同时设置表格属性(如图1)。

  步骤2:将光标移入第二行表格中,在这行中插入一个层,打开其属性面板,将L、T值删除,使其为空(如图2)。

  这两个参数绝对不能有数值,否则将不能实现层精确定位。当然这时的层参数已定,作为父层时该层是不能移动的,但可以使用光标改变其大小。

  步骤3:将光标定义在父层中,再次插入一个层并设置层内容。当你使用F2打开层控制面板时会看到位于父层底下的子层(如图3),作为子层是可以拖动的,因为它相对于父层定位。

  步骤4:为主菜单设置鼠标响应事件,显示当鼠标移到和离开该主菜单时层的显示方式就可以了。F12预览并改变分辨率,看看是否你的子菜单没有错置。

  招数二:CSS定位法

  上述方法毕竟不是专业设计师的期望,我们可以做一个CSS相对定位的定义方式,将相对定位模型(比如表格)定义为这个CSS属性。

  步骤1:使浏览器以相对定位模型左上角作为原点,建立新的坐标系。再在这个相对定位模型下级插入层,使之绝对于该相对定位模型定位。当然该层也是不可拖动的,改变其位置可以直接在其属性面板上输入Left Top的数值。

  步骤2:按“Shift+F11”打开CSS Styles面板,点击“New Style”按钮,在弹出的New Style窗口中定义一个名称为.pos的CSS属性,并且选择Make Custom Style的Type类型和This Document 0nl的Define类型,确认进入Style Defintion For .pos窗口,选取Positioning定义Type为relative确定(如图4)。

  步骤3:选取定义好的表格,右键点击CSS Style面板中的.pos,弹出菜单中执行Apply命令即可(如图5)。使该相对定位模型(表格)建立新的坐标系,只要我们在其中插入层,并设置层内容和主菜单的鼠标响应事件就可以使层实现相对定位了。

  以上两招,大家不妨都试一试,若举一反三的话,一定可以做出各种使用层且自动适应用户分辨率设置的网页效果来!

posted on 2007-03-18 23:44  冢边木  阅读(401)  评论(0编辑  收藏  举报