层随分辨率变化改变!
绝对定位,相对定位
招数一:表格定位法
步骤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)。使该相对定位模型(表格)建立新的坐标系,只要我们在其中插入层,并设置层内容和主菜单的鼠标响应事件就可以使层实现相对定位了。
以上两招,大家不妨都试一试,若举一反三的话,一定可以做出各种使用层且自动适应用户分辨率设置的网页效果来!