如何解决APDIV层在网页浏览时的位置偏移|用ie浏览器浏览网页时
时间：2019-05-03 03:17:02 来源：雅意学习网 本文已影响 人 
摘要：所有使用过层APDIV技术的设计者都会这样的困惑：在设计窗口尽管设计美观、布局合理的，但在改变了分辨率或不同的浏览器以后，用APDIV技术设计的对象经常会发生偏移。该文通过层嵌表格、用父层固定、代码控制等方法来解决APDIV层在不同的分辨率或不同的浏览器的偏移问题。
关键词：网页设计；Dreamweaver；APDIV；偏移
中图分类号：TP393文献标识码：A文章编号：1009-3044(2012)15-3592-02
How to Solve the Position Offset of APDIV Layer in the Web Browser
TIAN Yan
(School of Information Engineering, Shandong Vocational College of Industry, Zibo 256414, China)
Abstract: Designers have used APDIV technology are confused, because: Although the window designed beautifully and rational layout, APDIV technology designed objects are often offset when change the resolution or use a different browser. This paper solve the problem of APDIV layer offset in different resolutions or different browsers by the methods of layer embedded in form, fixed the parent layer, code control .
Key words: web design; Dreamweaver; APDIV; offset
网页设计的布局是把插入网页的各种构成要素在页面上有效地排列。在用dreamweaver制作网页时，为我们提供了表格布局、DIV+CSS布局、层APDIV布局、框架布局和模板布局等五大布局技术，来呈现网页布局技术的灵活性、多样性。但其中使用了AP DIV技术的设计对象在改变了分辨率或不同的浏览器以后，这些对象元素经常会发生偏移，影响了网页的美观和改变了设计者的创作意图。我们可以通过以下的途径改变这一设计缺点，使得APDIV布局技术不仅可以使网页设计人员加入自己富有创意的构思，而且可以兼顾到页面的视觉和审美。
1层APDIV布局的应用
层是网页制作时经常用到的对象，也是重要的网页布局工具之一。层在页面布局方面具有更大的随意性，通过拖动、方向键或指定坐标位置的方式就可以放在网页的任何位置，不受网页中其他元素的限制和干扰，就像浮在页面上方一样，运用层的特性创建布局更加合理、美观的网页效果。
1）想要更好的把握应用好APDIV，必须对APDIV进行更深的了解和探究。APDIV又称绝对定位元素（AP元素），是分配有绝对位置的，用来精确控制浏览器窗口对象位置的HTML页面构成元素。APDIV可以通过层的重叠和次序的改变，实现包含着文字或图像等元素的胶片变换效果；可以通过动态设定层的显示或隐藏，实现层内容的动态交替等特殊显示效果；通过子层遗传父层的嵌套特征，实现内容的可见及位置移动等。APDIV的出现使网页技术从二维空间拓展到三维空间，使页面元素能实现相互重叠，及更复杂的布局设计，成为网页设计新的发展方向。
2）用APDIV技术制作的层如果不加以控制为什么会发生“漂移”呢？因为AP DIV是绝对定位层，可以用ps图层的概念来理解它，就是浮在页面上的层，可以随意移动而不影响页面布局。而APDIV绝对定位层定位的依据是：相对于父层（这个父层必须是定位属性不为static的层）左上角；如果没有父层就相对于body的左上角。APDIV层是浮动的，可以根据它的top和left来规定这个层的显示位置。
3）不仅要了解APDIV绝对定位的依据，还要了解APDIV布局层的主要属性，例如：
#apDiv1
position:absolute;
width:128px;
height:58px;
left: 454px;
top: 453px;
APdiv元素的position属性的取值定义为：position: static、absolute、relative。
1 static :默认值。
2 relative:相对定位。在文档流中的固定位置会被它占有，但是后面对象不会侵占或覆盖。
3 absolute:绝对定位。也就是你的AP元素所默认加上的一个属性值。
Width和height用来指定AP元素的宽度和高度；而left和top则用来指定AP元素的左上角相对于页面（嵌套则为父AP元素）左上角的位置。我们碰到的在浏览器中无法固定就可能是因为没设置父层或默认下根据body来定位的，分辨率变了，本质上div是没动的，看到有变化是因为整个页面都因为分辨变化而变大或变小了。所以才会出现在不同分辨率下位置不同的情况。
4）“电脑分辨率不同，导航按钮位置会移动”是页面布置的问题。理解了以上AP元素的属性特性，对于我们后续解决AP元素在浏览器中的偏移问题至关重要。
2用表格固定层
层的定位说麻烦是很麻烦，说简单又非常简单。如果仅仅使用ap div属性中的值来定位，那么很容易错位，比如在1024的屏幕里，或许它定位很准确，但是在更宽或者更窄的屏幕里，就会错位显示，而且不同版本的浏览器也会发生错位现象。 最简单的定位层的方法，就是把层放在表格中，以表格位置来定位层的位置，在处理层的时候，只可改变层大小的数值，而不能再去改变层位置的数值。这样处理的层，位置上绝对不会有任何问题发生！
1）在设计视图下完成表格固定AP元素。比如先定义一个表格大小为1024的宽，然后在里面放APdiv或者其它元素，在APDIV层中加入你要显示的页面元素。无论你的页面变小还是你的分辨率变化了，div相对表格的位置是不会变的，变的只不过是表格以外的空白位置的大小。
2）编写类似以下的代码来控制：
＜table width= "100 " border= "0 " align= "center " cellpadding= "0 " cellspacing= "0 "＞
＜tr＞
＜td＞
＜div id= "Layer1 " style= "position:absolute; width:200px; height:115px; z-index:1; background-color: #990000; layer-back? ground-color: #990000; border: 1px none #000000; "＞
＜/div＞
＜/td＞
＜/tr＞
＜/table＞
＜b＞3用父层固定控制＜/b＞
1）用一个大层把所有的层都装在里面，设置好大层的合适的高度和宽度，就可以了。就象水一样，把它倒在地上它就会散开到处流，如果把它装到杯子里，那就成了一个整体了，就好控制了。
2）通常做div层的宽/高度是按照网页的宽/高的百分比定义的。所以会随分辨率或窗口大小而变化。你可以直接计算出屏幕的宽度和高度，然后顶死div层的宽和高，它就不会改变了。
3）在类似于有下拉菜单的网页设计时，非要用层不可，可以把它作成相对于父层的相对位置。在网页中添加一APDIV层，设置好它的属性，在此层中分别绘制几个子层，在每个子层中设置需要的下拉菜单项目，另外不要忽视子层的可见或隐藏属性。
＜b＞4表格与父层结合固定控制＜/b＞
1）首先在网页文档内插入表格，鼠标定位于某单元格内，然后利用菜单操作插入一个层，这一操作使这个层相对于这个单元格定位了。不要动这个层，而且什么时候也不要动它，但可以变化它的大小，例如把宽和高都更改为“0”，目的是使它不会再影响对其他元素的编辑，否则的话，层的“Top”和“Left”的属性出现之后就变成了绝对定位。如果变成了绝对定位，也可以把“Top”与“Left”属性去掉，仍然恢复为相对定位。但是成为“0”时，子层有时会看不见，按“F11”点击它就可以恢复编辑。此时这个层内光标应该在闪动，再次利用菜单插入子层，这时父层与子层相重叠，可以随意移动它。无论你怎么动，这个层都是相对于父层定位的，至此也就解决了问题。最后仍然要强调千万不要动“Top”与“Left”的属性，因为它是相对于父层的左上角定位的。
2）用父层与表格来控制AP元素编移的实例代码可参考下例：
＜head＞
……
＜style type="text/css"＞
＜!--
body {
background-color: #000;
}
#apDiv1 {
width:128px;
height:58px;
＜/style＞＜/head＞
＜body＞
＜table width="792" height="415" border="1" align="center"＞
＜tr＞
＜th scope="col"＞＜img src="http://192.168.2.81/QKhttp://img.省略/qkimages/dnjl/dnjl201215/dotlan.gif" width="100" height="100" /＞
＜div align="center" id="apDiv1"＞＜img src="http://192.168.2.81/QKhttp://img.省略/qkimages/dnjl/dnjl201215/jn.jpg" width="128" height="58" /＞＜/div＞＜/th＞
＜/tr＞
＜/table＞
＜/body＞
5结束语
通过以上的小技巧只要避免和解决了因改变分辨率或不同的浏览器，层APDIV对象不再发生偏移，就能使网页设计人员更加灵活地应用APDIV布局技术。APDIV技术会因应用广泛，使用方便，得到广大网页设计者的喜爱，更好地应用层APDIV布局技术对网页排版，很方便地制作出精美的网页。APDIV的出现使网页技术从二维空间拓展到三维空间，使页面元素能实现相互重叠，及更复杂的布局设计，成为网页设计新的发展方向。
参考文献：
[1]汪迎春,秦学礼.Dreamweaver CS3网页设计实用教程[M].北京:清华大学出版社,2010.
[2]蒋健,高强.网页中层的运用[J].中国科技纵横,2010(22).
[3]曹艳琴.网页设计中层的应用案例分析[J].成功:教育版,2010(12).
