如何解決APDIV層在網(wǎng)頁瀏覽時的位置偏移

田彥

摘要：所有使用過層APDIV技術(shù)的設(shè)計者都會這樣的困惑：在設(shè)計窗口盡管設(shè)計美觀、布局合理的，但在改變了分辨率或不同的瀏覽器以后，用APDIV技術(shù)設(shè)計的對象經(jīng)常會發(fā)生偏移。該文通過層嵌表格、用父層固定、代碼控制等方法來解決APDIV層在不同的分辨率或不同的瀏覽器的偏移問題。

關(guān)鍵詞：網(wǎng)頁設(shè)計；Dreamweaver；APDIV；偏移

中圖分類號：TP393文獻(xiàn)標(biāo)識碼：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

網(wǎng)頁設(shè)計的布局是把插入網(wǎng)頁的各種構(gòu)成要素在頁面上有效地排列。在用dreamweaver制作網(wǎng)頁時，為我們提供了表格布局、DIV+CSS布局、層APDIV布局、框架布局和模板布局等五大布局技術(shù)，來呈現(xiàn)網(wǎng)頁布局技術(shù)的靈活性、多樣性。但其中使用了AP DIV技術(shù)的設(shè)計對象在改變了分辨率或不同的瀏覽器以后，這些對象元素經(jīng)常會發(fā)生偏移，影響了網(wǎng)頁的美觀和改變了設(shè)計者的創(chuàng)作意圖。我們可以通過以下的途徑改變這一設(shè)計缺點(diǎn)，使得APDIV布局技術(shù)不僅可以使網(wǎng)頁設(shè)計人員加入自己富有創(chuàng)意的構(gòu)思，而且可以兼顧到頁面的視覺和審美。

1層APDIV布局的應(yīng)用

層是網(wǎng)頁制作時經(jīng)常用到的對象，也是重要的網(wǎng)頁布局工具之一。層在頁面布局方面具有更大的隨意性，通過拖動、方向鍵或指定坐標(biāo)位置的方式就可以放在網(wǎng)頁的任何位置，不受網(wǎng)頁中其他元素的限制和干擾，就像浮在頁面上方一樣，運(yùn)用層的特性創(chuàng)建布局更加合理、美觀的網(wǎng)頁效果。

1）想要更好的把握應(yīng)用好APDIV，必須對APDIV進(jìn)行更深的了解和探究。APDIV又稱絕對定位元素（AP元素），是分配有絕對位置的，用來精確控制瀏覽器窗口對象位置的HTML頁面構(gòu)成元素。APDIV可以通過層的重疊和次序的改變，實現(xiàn)包含著文字或圖像等元素的膠片變換效果；可以通過動態(tài)設(shè)定層的顯示或隱藏，實現(xiàn)層內(nèi)容的動態(tài)交替等特殊顯示效果；通過子層遺傳父層的嵌套特征，實現(xiàn)內(nèi)容的可見及位置移動等。APDIV的出現(xiàn)使網(wǎng)頁技術(shù)從二維空間拓展到三維空間，使頁面元素能實現(xiàn)相互重疊，及更復(fù)雜的布局設(shè)計，成為網(wǎng)頁設(shè)計新的發(fā)展方向。

2）用APDIV技術(shù)制作的層如果不加以控制為什么會發(fā)生“漂移”呢？因為AP DIV是絕對定位層，可以用ps圖層的概念來理解它，就是浮在頁面上的層，可以隨意移動而不影響頁面布局。而APDIV絕對定位層定位的依據(jù)是：相對于父層（這個父層必須是定位屬性不為static的層）左上角；如果沒有父層就相對于body的左上角。APDIV層是浮動的，可以根據(jù)它的top和left來規(guī)定這個層的顯示位置。

3）不僅要了解APDIV絕對定位的依據(jù)，還要了解APDIV布局層的主要屬性，例如：

#apDiv1

position:absolute;

width:128px;

height:58px;

left: 454px;

top: 453px;

APdiv元素的position屬性的取值定義為：position: static、absolute、relative。

1 static :默認(rèn)值。

2 relative:相對定位。在文檔流中的固定位置會被它占有，但是后面對象不會侵占或覆蓋。

3 absolute:絕對定位。也就是你的AP元素所默認(rèn)加上的一個屬性值。

Width和height用來指定AP元素的寬度和高度；而left和top則用來指定AP元素的左上角相對于頁面（嵌套則為父AP元素）左上角的位置。我們碰到的在瀏覽器中無法固定就可能是因為沒設(shè)置父層或默認(rèn)下根據(jù)body來定位的，分辨率變了，本質(zhì)上div是沒動的，看到有變化是因為整個頁面都因為分辨變化而變大或變小了。所以才會出現(xiàn)在不同分辨率下位置不同的情況。

4）“電腦分辨率不同，導(dǎo)航按鈕位置會移動”是頁面布置的問題。理解了以上AP元素的屬性特性，對于我們后續(xù)解決AP元素在瀏覽器中的偏移問題至關(guān)重要。

2用表格固定層

層的定位說麻煩是很麻煩，說簡單又非常簡單。如果僅僅使用ap div屬性中的值來定位，那么很容易錯位，比如在1024的屏幕里，或許它定位很準(zhǔn)確，但是在更寬或者更窄的屏幕里，就會錯位顯示，而且不同版本的瀏覽器也會發(fā)生錯位現(xiàn)象。

最簡單的定位層的方法，就是把層放在表格中，以表格位置來定位層的位置，在處理層的時候，只可改變層大小的數(shù)值，而不能再去改變層位置的數(shù)值。這樣處理的層，位置上絕對不會有任何問題發(fā)生！

1）在設(shè)計視圖下完成表格固定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）用一個大層把所有的層都裝在里面，設(shè)置好大層的合適的高度和寬度，就可以了。就象水一樣，把它倒在地上它就會散開到處流，如果把它裝到杯子里，那就成了一個整體了，就好控制了。

2）通常做div層的寬/高度是按照網(wǎng)頁的寬/高的百分比定義的。所以會隨分辨率或窗口大小而變化。你可以直接計算出屏幕的寬度和高度，然后頂死div層的寬和高，它就不會改變了。

3）在類似于有下拉菜單的網(wǎng)頁設(shè)計時，非要用層不可，可以把它作成相對于父層的相對位置。在網(wǎng)頁中添加一APDIV層，設(shè)置好它的屬性，在此層中分別繪制幾個子層，在每個子層中設(shè)置需要的下拉菜單項目，另外不要忽視子層的可見或隱藏屬性。

＜b＞4表格與父層結(jié)合固定控制＜/b＞

1）首先在網(wǎng)頁文檔內(nèi)插入表格，鼠標(biāo)定位于某單元格內(nèi)，然后利用菜單操作插入一個層，這一操作使這個層相對于這個單元格定位了。不要動這個層，而且什么時候也不要動它，但可以變化它的大小，例如把寬和高都更改為“0”，目的是使它不會再影響對其他元素的編輯，否則的話，層的“Top”和“Left”的屬性出現(xiàn)之后就變成了絕對定位。如果變成了絕對定位，也可以把“Top”與“Left”屬性去掉，仍然恢復(fù)為相對定位。但是成為“0”時，子層有時會看不見，按“F11”點(diǎn)擊它就可以恢復(fù)編輯。此時這個層內(nèi)光標(biāo)應(yīng)該在閃動，再次利用菜單插入子層，這時父層與子層相重疊，可以隨意移動它。無論你怎么動，這個層都是相對于父層定位的，至此也就解決了問題。最后仍然要強(qiáng)調(diào)千萬不要動“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.resource.qikan.cn/markvip/qkimages/dnjl/dnjl201215/dotlan.gif" width="100" height="100" /＞

＜div align="center" id="apDiv1"＞＜img src="http://192.168.2.81/QKhttp://img.resource.qikan.cn/markvip/qkimages/dnjl/dnjl201215/jn.jpg" width="128" height="58" /＞＜/div＞＜/th＞

＜/tr＞

＜/table＞

＜/body＞

5結(jié)束語

通過以上的小技巧只要避免和解決了因改變分辨率或不同的瀏覽器，層APDIV對象不再發(fā)生偏移，就能使網(wǎng)頁設(shè)計人員更加靈活地應(yīng)用APDIV布局技術(shù)。APDIV技術(shù)會因應(yīng)用廣泛，使用方便，得到廣大網(wǎng)頁設(shè)計者的喜愛，更好地應(yīng)用層APDIV布局技術(shù)對網(wǎng)頁排版，很方便地制作出精美的網(wǎng)頁。APDIV的出現(xiàn)使網(wǎng)頁技術(shù)從二維空間拓展到三維空間，使頁面元素能實現(xiàn)相互重疊，及更復(fù)雜的布局設(shè)計，成為網(wǎng)頁設(shè)計新的發(fā)展方向。

參考文獻(xiàn)：

[1]汪迎春,秦學(xué)禮.Dreamweaver CS3網(wǎng)頁設(shè)計實用教程[M].北京:清華大學(xué)出版社,2010.

[2]蔣健,高強(qiáng).網(wǎng)頁中層的運(yùn)用[J].中國科技縱橫,2010(22).

[3]曹艷琴.網(wǎng)頁設(shè)計中層的應(yīng)用案例分析[J].成功:教育版,2010(12).