进入旧版 | 服务项目 | 成功案例 | 联系方式 | 过客留言 | 友情链接
   
设为首页
加入收藏
联系我们
网站首页 | 新闻资讯 | 操作系统 | 办公软件 | 网络软件 | 工具软件 | 媒体动画 | 网页制作 | 网站开发 | 程序开发 | 平面设计
Photoshop视频教程 | Word入门 | Flash入门 | JScript | VBScript | ASP | PHP | ADO | 网页特效 | 3DS MAX6.0命令 | 系统进程
您当前的位置:GOODSGY电脑学习网 -> 网页制作 -> Dreamweaver -> 文章内容  
关于层的相对与绝对定位

  前言:Dreamweaver的层功能是一个很好用的功能,但是它在不同分辨率下的定位问题,一直没有很好的解决。经过一阵研究与借鉴他人经验,得出入下结论:

  一. 常出现的问题
  当你的表格选居中的时候又插入了层(插入层方法1:object->draw layer)的时候(800*600),分辨率一旦变大、窗口最大化之后,层就错位了,而如果使用菜单(插入层方法2:Insert->Layer)插入层的时候,这个层就会与它的上级元素相对定位,但是一旦在Dreamweaver中用移动工具动了它,它就会马上变成绝对定位,不会再与上级元素相对定位了。www.goodsgy.com

  二. 思想: www.goodsgy.com

  通过object面板置入的层是绝对定位的层,这个绝对定位指的是层的左上角与浏览器窗口内部的左部、顶部距离,代码中的写法是left与top。
  通过菜单置入的层是相对定位的层,这个相对定位指的是层与它的上级元素的距离(它的上级元素的左上角),由于这个div中不再有left与top的属性,所以浏览器把它的位置定为与它的上级元素相同。
  
  (总结一:只要去掉层的left与top属性就可以相对定位!)
www.goodsgy.com

www.goodsgy.com

三. 深入思想:
  现在层已经相对定位了,可是只是这样还完全不能满足要求,因为很多时候不能把表格设定得那样准确,否则会把表格搞得很麻烦,把代码搞得很大很大。
  如果在上面说做出的相对定位的层的基础上再做一个层对它相对定位,不就解决问题了吗?
这就涉及到了父层与子层的问题(由于它是层的基础,在书与网上教程中就可以看到,这里不再阐述),父层相对于某点定位,而子层相对于父层定位,就可以达到层的相对定位这个目标了 www.goodsgy.com

  四. 具体制作(只介绍最简单的方法,对代码熟的朋友可以手敲的): www.goodsgy.com

  先在页面内插入表格(可以设居中,表格就居中了,否则几乎无意义),鼠标在某单元格内点一下,让光标在此闪动,然后通过菜单插入一个层,这个层就相对与这个单元格定位了。插入一个层之后,不要动它,而且也永远不要动,但是可以更改它的大小,比如把它的高与宽都改成了?quot;0",让它不再影响你对其他内容的编辑,否则,这个层的left与top属性出现之后就成了绝对定位了,变成绝对定位后你可以把它的left与top属性去掉,就恢复成相对定位了。变成"0"之后,有时子层会看不见,可以按[f11]键点它恢复编辑。
  现在光标在这个层内闪动,再通过菜单插入子层,这时子层与父层重叠,你可以随意移动它,不管怎么动,它都是相对与父层定位。
  好了,一个相对定位的层(子层)做好了,你可以在里面随意添加内容了,也可以改变它的尺寸、位置、背景等所有属性,但是不要动left与top属性,因为它是相对于父层左上角定位的。 www.goodsgy.com

  下面给出父层与子层在Dreamweaver中的属性面板:
  父层:
www.goodsgy.com

www.goodsgy.com

五. 技巧:
  先插入一个表格,在其中一个单元格中插入父层,可以把它定得小一点,比如说20象素宽、10象素高,这样它就不会盖住下面的链接,也不影响子层的相对定位。
如果要用778象素宽定义表格,可以把父层插入到表格的第一行第一个单元格中,这样就可以在所有层制作完后插入父层了!对代码熟的朋友就可以手敲父层而不必再去调整子层的位置了。
www.goodsgy.com

在百度中搜索:关于层的相对与绝对定位
在Google中搜索:关于层的相对与绝对定位
在Yahoo中搜索:关于层的相对与绝对定位

收藏到网摘:新浪VIVI 365key 我摘 POCO网摘 博采中心 YouNote 和讯网摘 天天收藏
[] [返回上一页] [打 印] [收 藏]

 相关文章    最新文章
· 网页设计:关于CSS框架网页的设计
· 关于CSS 框架的论述
· 初学:关于域名和空间的一些认识
· [图文] Java小技巧:关于Cookie的操作
· 关于ASP.NET页面打印技术的总结
· [图文] Excel表格中关于序号处理的五则技巧..
· [图文] 关于Photoshop自定义滤镜的原理和探..
· 经验交流:关于软件设计的一点心得体会
· Photoshop中关于配置的15条技巧
· Photoshop中关于工具的58条技巧
 
· 写给喜欢用DW编写CSS人的一些建议
· Dreamweaver编写CSS需要掌握的技巧
· [组图] Dreamweaver技巧:教你制作和套用模..
· [组图] Dreamweaver表格妙用-线框制作详解..
· Dreamweaver常用技巧方法十六则
· [图文] Dreamweaver8制作网页常用的过度效..
· Dreamweaver不支持中文文件名的解决方法
· [组图] Dreamweaver技巧:制作和套用模板
· Dreamweaver若干技巧须知道
· [组图] Dreamweaver制作和套用模板的技巧

∷相关文章评论∷    (评论内容只代表网友观点,与本站立场无关!) [更多评论…]
站内搜索

精彩图文
  网站导航  
操作系统 办公软件 网络软件
Vista Windows2003 WindowsXP Windows2000/NT Windows9X/ME Linux 其他 Word Excel Powerpoint Outlook 金山系列 其他 网页浏览 上传下载 联络聊天 邮件工具 服务器软件 网络辅助
工具软件 媒体动画 网页制作
系统工具 媒体工具 压缩工具 图文处理 文件管理 其他 3DMAX Authorware Director Maya 视频处理 其他 Flash Dreamweaver FireWorks FrontPage LiveMotion Golive HTML/CSS 其它
网站开发 平面设计 程序设计
ASP JSP PHP CGI JavaScript VBScript XML/SOAP Web服务器 Photoshop PhotoImpact CorelDraw Illustrator Freehand 设计欣赏 其他 VB VC .NET C/C++ DELPHI JAVA

冀ICP备05019428号
Copyright © 2004-2008 电脑学习网 Inc.All rights reserved.
TEL:13832340607
QQ:39873155
E_Mail:goodsgy(#)hotmail.com   (把(#)替换成@)
MSN:goodsgy(#)hotmail.com   (把(#)替换成@)