• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >Frontpage教程 > 实现网页制作中“层”精确定位的绝招

实现网页制作中“层”精确定位的绝招

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-07-06

本文主要包含实现网页制作中“层”精确定位的绝招等相关知识,佚名希望在学习及工作中可以帮助到您

??? 在制作网页的时候,我们常常会提到层。这里的层是指在Dreamweaver中,通过对它的应用来实现网页对象在垂直方向互相重叠的效果,比如使用QQ的朋友一定到腾讯主页浏览过,其下拉菜单很有特色,这就是利用层的应用来实现的。其做法很简单,有不少网友在网页中使用层便可以轻松实现,但你是否注意到当你改变显示器分辨率时,你的层还是在原来的位置上、网页能够自动地适应用户设置的分辨率吗?我想如果你不知道层的绝对定位和相对定位的概念,你是做不出腾讯主页上的下拉菜单效果的,下面就结合实例来介绍一下层的精确定位。

  招数一:表格定位法

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

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

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

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

  步骤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确定。

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

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


您可能想查找下面的文章:

相关文章

  • 2017-07-06FrontPage网上筑巢手记
  • 2017-07-06怎样利用Frontpage去下载别人的网站模板
  • 2017-07-06FrontPage XP小诀窍拾零
  • 2017-07-06FrontPage网上筑巢手记——修改和添加页面(一)
  • 2017-08-06制作网页使用FrontPage
  • 2017-07-06FrontPage2002高效使用的技巧
  • 2017-07-06用FrontPage制作鼠标光照特殊效果
  • 2017-07-06FrontPage10全透视教程(8)
  • 2017-07-06FrontPage10全透视教程(10)
  • 2017-07-06用FRONTPAGE2000制作搜索引擎

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • FrontPage 2000小技巧
    • FrontPage网上筑巢手记——修改和添加页面
    • FrontPage XP直通车第5站——表单的设计
    • 设计网页FrontPage2000的一些基础问答
    • 用FrontPage转换图片文件格式
    • FrontPage创建HTML/ASP混合页面
    • FrontPage2002简明教程七:HTML在FrontPage中的应用
    • 分享FrontPage制作网页的几个技巧
    • FrontPage10全透视教程(11)
    • Frontpage巧补残缺网页

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有