田彥

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

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

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

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

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

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

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

3）不僅要了解APDIV絕對(duì)定位的依據(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:相對(duì)定位。在文檔流中的固定位置會(huì)被它占有，但是后面對(duì)象不會(huì)侵占或覆蓋。

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

Width和height用來(lái)指定AP元素的寬度和高度；而left和top則用來(lái)指定AP元素的左上角相對(duì)于頁(yè)面（嵌套則為父AP元素）左上角的位置。我們碰到的在瀏覽器中無(wú)法固定就可能是因?yàn)闆](méi)設(shè)置父層或默認(rèn)下根據(jù)body來(lái)定位的，分辨率變了，本質(zhì)上div是沒(méi)動(dòng)的，看到有變化是因?yàn)檎麄€(gè)頁(yè)面都因?yàn)榉直孀兓兇蠡蜃冃×恕Ｋ圆艜?huì)出現(xiàn)在不同分辨率下位置不同的情況。

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

2用表格固定層

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

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

1）在設(shè)計(jì)視圖下完成表格固定AP元素。比如先定義一個(gè)表格大小為1024的寬，然后在里面放APdiv或者其它元素，在APDIV層中加入你要顯示的頁(yè)面元素。無(wú)論你的頁(yè)面變小還是你的分辨率變化了，div相對(duì)表格的位置是不會(huì)變的，變的只不過(guò)是表格以外的空白位置的大小。

2）編寫(xiě)類(lèi)似以下的代碼來(lái)控制：

＜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）用一個(gè)大層把所有的層都裝在里面，設(shè)置好大層的合適的高度和寬度，就可以了。就象水一樣，把它倒在地上它就會(huì)散開(kāi)到處流，如果把它裝到杯子里，那就成了一個(gè)整體了，就好控制了。

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

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

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

1）首先在網(wǎng)頁(yè)文檔內(nèi)插入表格，鼠標(biāo)定位于某單元格內(nèi)，然后利用菜單操作插入一個(gè)層，這一操作使這個(gè)層相對(duì)于這個(gè)單元格定位了。不要?jiǎng)舆@個(gè)層，而且什么時(shí)候也不要?jiǎng)铀?，但可以變化它的大小，例如把寬和高都更改為?”，目的是使它不會(huì)再影響對(duì)其他元素的編輯，否則的話，層的“Top”和“Left”的屬性出現(xiàn)之后就變成了絕對(duì)定位。如果變成了絕對(duì)定位，也可以把“Top”與“Left”屬性去掉，仍然恢復(fù)為相對(duì)定位。但是成為“0”時(shí)，子層有時(shí)會(huì)看不見(jiàn)，按“F11”點(diǎn)擊它就可以恢復(fù)編輯。此時(shí)這個(gè)層內(nèi)光標(biāo)應(yīng)該在閃動(dòng)，再次利用菜單插入子層，這時(shí)父層與子層相重疊，可以隨意移動(dòng)它。無(wú)論你怎么動(dòng)，這個(gè)層都是相對(duì)于父層定位的，至此也就解決了問(wèn)題。最后仍然要強(qiáng)調(diào)千萬(wàn)不要?jiǎng)印癟op”與“Left”的屬性，因?yàn)樗窍鄬?duì)于父層的左上角定位的。

2）用父層與表格來(lái)控制AP元素編移的實(shí)例代碼可參考下例：

＜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é)束語(yǔ)

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

參考文獻(xiàn)：

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

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

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