《2022年实现网页制作中“层”精确定位的绝招FrontPage教程.docx》由会员分享,可在线阅读,更多相关《2022年实现网页制作中“层”精确定位的绝招FrontPage教程.docx(3页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、2022年实现网页制作中“层”精确定位的绝招FrontPage教程摘要:实现网页制作中“层”精确定位的绝技 在制作网页的时候,我们经常会提到层。这里的层是指在Dreamweaver中,通过对它的应用来实现网页对象在垂直方向相互重叠的效果,比如运用QQ的挚友肯定到腾讯主页阅读过,其下拉菜单很有特色,这就是利用层的应用来实现的。其做法很简洁,有不少网友在网页中运用层便可以轻松实现,但你是否留意到当你变更显示器辨别率时,你的层还是在原来的位置上、网页能够自动地适应用户设置的辨别率吗?我想假如你不知道层的肯定定位和相对定位的概念,你是做不出腾讯主页上的下拉菜单效果的,下面就结合实例来介绍一下层的精确定
2、位。招数一:表格定位法步骤1:打开Dreamweaver3,新建一个页面,运用快捷键“Ctrl+Alt+T”插入一个两行一列的表格,设置其次行的目的就是为了放置层,使其相对表格定位。输入文字同时设置表格属性。步骤2:将光标移入其次行表格中,在这行中插入一个层,打开其属性面板,将L、T值删除,使其为空。这两个参数肯定不能有数值,否则将不能实现层精确定位。当然这时的层参数已定,作为父层时该层是不能移动的,但可以运用光标变更其大小。步骤3:将光标定义在父层中,再次插入一个层并设置层内容。当你运用F2打开层限制面板时会看到位于父层底下的子层,作为子层是可以拖动的,因为它相对于父层定位。步骤4:为主菜单
3、设置鼠标响应事务,显示当鼠标移到和离开该主菜单时层的显示方式就可以了。F12预览并变更辨别率,看看是否你的子菜单没有错置。招数二:CSS定位法上述方法终归不是专业设计师的期望,我们可以做一个CSS相对定位的定义方式,将相对定位模型(比如表格)定义为这个CSS属性。步骤1:使阅读器以相对定位模型左上角作为原点,建立新的坐标系。再在这个相对定位模型下级插入层,使之肯定于该相对定位模型定位。当然该层也是不行拖动的,变更其位置可以干脆在其属性面板上输入Left Top的数值。步骤2:按“Shift+F11”打开CSS Styles面板,点击“New Style”按钮,在弹出的New Style窗口中定
4、义一个名称为.pos的CSS属性,并且选择Make Custom Style的Type类型和This Document 0nl的Define类型,确认进入Style Defintion For .pos窗口,选取Positioning定义Type为relative确定。步骤3:选取定义好的表格,右键点击CSS Style面板中的.pos,弹出菜单中执行Apply吩咐即可。使该相对定位模型(表格)建立新的坐标系,只要我们在其中插入层,并设置层内容和主菜单的鼠标响应事务就可以使层实现相对定位了。以上两招,大家不妨都试一试,若举一反三的话,肯定可以做出各种运用层且自动适应用户辨别率设置的网页效果来!