層的應(yīng)用及其定位(絕對(duì)定位和相對(duì)定位)_Dreamweaver教程
層的隨意定位的特性給網(wǎng)頁(yè)設(shè)計(jì)者帶來(lái)的很大的方便,但同時(shí)也帶來(lái)了一定的麻煩。為什么這樣說(shuō)呢?
大家都知道,為了讓網(wǎng)頁(yè)能夠自動(dòng)地適應(yīng)用戶設(shè)置的分辨率,在網(wǎng)頁(yè)制作過(guò)程中人們采用了百分比的設(shè)置方式,從而頁(yè)面的所有元素從新排版,保證原來(lái)的格式。但假如你在頁(yè)面上使用了層,你會(huì)發(fā)現(xiàn)當(dāng)瀏覽器大小改變時(shí),層的位置卻沒(méi)有改變,結(jié)果它和其他的元素之間的配合出現(xiàn)了錯(cuò)位現(xiàn)象,頁(yè)面變得雜亂無(wú)章了。而我們是不能夠強(qiáng)制用戶使用特定的分辨率的,那么就只有想辦法讓層的位置也能夠象表格一樣根據(jù)瀏覽器大小的改變而重新定位,這就需要合理地使用相對(duì)定位和絕對(duì)定位了。
絕對(duì)定位(position:absolute):即層默認(rèn)的定位方式,絕對(duì)于瀏覽器左上角的邊緣開(kāi)始計(jì)算定位數(shù)值。
相對(duì)定位(position:relative):層的位置相對(duì)于某個(gè)元素設(shè)置,該元素位置改變,則層的位置相應(yīng)改變。
對(duì)比兩種定位方式,不難發(fā)現(xiàn),使用相對(duì)定位的層才是真正實(shí)現(xiàn)設(shè)計(jì)者思想的方式,從而完全把握層的排版。
那么,絕對(duì)定位有沒(méi)有用呢?當(dāng)然有用了,當(dāng)你的網(wǎng)頁(yè)全部使用層來(lái)排版,而且頁(yè)面是使用默認(rèn)的居左放置的,那么使用默認(rèn)的絕對(duì)定位方式可以方便的排版,提高設(shè)計(jì)的工作效率。
在Dreamweaver中,插入的層雖然都是使用的絕對(duì)(absolute)定位方式,但是插入的方式不同,帶來(lái)的效果是不同的。前面我們已經(jīng)知道,使用菜單插入的層是沒(méi)有定位的坐標(biāo)的,只有當(dāng)你使用鼠標(biāo)拖動(dòng)該層改變其位置后,才會(huì)寫入坐標(biāo)值。而拖拉出來(lái)的層的初始位置坐標(biāo)就是鼠標(biāo)開(kāi)始動(dòng)作時(shí)的坐標(biāo)。
請(qǐng)明確一個(gè)概念:由Dreanweaver賦予坐標(biāo)值的層是絕對(duì)于瀏覽器邊緣定位的層。不帶坐標(biāo)值的層則是相對(duì)于某元素定位的層!
所以,最簡(jiǎn)單的設(shè)置相對(duì)定位層的的方式就是:選定插入層的位置(例如某個(gè)單元格或者頁(yè)面中某處)將光標(biāo)停留在該位置,然后選擇Insert-->Layer,即可在該位置創(chuàng)建一個(gè)固定大小的層,這個(gè)層就是相對(duì)于該位置定位的了。需要注重,采用這種方式創(chuàng)建的層,你只可以使用鼠標(biāo)調(diào)整它的大小,絕對(duì)不可以移動(dòng)它的位置!也就是說(shuō),在屬性面板上,層的位置欄中(Left Top)絕對(duì)不可以有數(shù)值。
很多情況下,插入的層的位置并不一定準(zhǔn)確,非凡是Dreamweaver并非真正的所見(jiàn)即所得的軟件,網(wǎng)頁(yè)的排版只有到瀏覽器中顯示才可以真正看到排版的表現(xiàn),所以上面所說(shuō)的方法就顯的過(guò)于簡(jiǎn)單而輕易出問(wèn)題了。這個(gè)時(shí)候,你需要給層一個(gè)定位的參照物,讓它真正地做到相對(duì)的定位。
簡(jiǎn)單的參照物可以是一個(gè)父層,即先插入一個(gè)相對(duì)定位的空白的層,在此層中插入你真正需要的層,而這個(gè)層是可以隨意拖拉改變位置的。但這樣究竟在網(wǎng)頁(yè)中多插入了一個(gè)空白的層,我想它一定不是專業(yè)的網(wǎng)頁(yè)設(shè)計(jì)師所希望的。下面我們介紹使用CSS來(lái)實(shí)現(xiàn)真正的相對(duì)定位的層。

我們需要先設(shè)置一個(gè)CSS Class,來(lái)定義定位的方式為相對(duì):
.ceng { position: relative; }
然后,賦予你所需要的參照物(可以是 table,tr,td... )一個(gè) CSS屬性為這個(gè)類。這樣瀏覽器就會(huì)以它的左上角為原點(diǎn),建立新的坐標(biāo)系。再在這個(gè)參照物的下級(jí)插入層,則層絕對(duì)于該參照物定位,假如你需要改變層的位置,你可以直接在層的屬性面板上輸入Left Top的數(shù)值(不可以使用鼠標(biāo)拖拉),切記此數(shù)值的坐標(biāo)原點(diǎn)是你所指定的參照物,而不是瀏覽器的邊緣(在Dreamweaver中編輯時(shí),該層看起來(lái)象是絕對(duì)于頁(yè)面邊緣定位的,但在瀏覽器中,它是絕對(duì)于你所指定的參照物的)。
- 用Dreamweaver在網(wǎng)頁(yè)中插入Flash按鈕
- 在Dreamweaver中編寫CSS需要掌握的技巧
- Dreamweaver CS3代碼片斷功能面板的利用
- Dreamweaver CS3 的最新功能
- 用Dreamweaver建站如何設(shè)計(jì)CSS?
- Dreamweaver文字自動(dòng)換行
- 探討Dreamweaver制作網(wǎng)頁(yè)時(shí)的空格
- 使用Dreamweaver制作網(wǎng)頁(yè)的20個(gè)技巧
- Dreamweaver MX 2004的PPT格式課件
- Dreamweaver技巧:運(yùn)用代碼片斷工具提高css開(kāi)發(fā)效率
- 在DreamWeaver中編寫CSS的一些技巧
- 使用Dreamweaver模板批量制作網(wǎng)頁(yè)
Dreamweaver教程Rss訂閱網(wǎng)站制作教程搜索
Dreamweaver教程推薦
- 用Dreamweaver 8 搞定“web標(biāo)準(zhǔn)”
- 如何用Dreamweaver批量做web網(wǎng)頁(yè)
- 用Dreamweaver MX創(chuàng)造網(wǎng)頁(yè)鼠標(biāo)樣式
- Dreamweaver 入門:向頁(yè)面中插入圖像
- 用Dreamweaver實(shí)現(xiàn)飄浮光球特效
- Dreamweaver使用CSS樣式表設(shè)置網(wǎng)頁(yè)文本格式
- Dreamweaver中層的應(yīng)用技巧
- Dreamweaver中編寫CSS需要掌握的技巧
- 學(xué)習(xí)Dreamweaver8了解掌握CSS層疊樣式表
- 用Dreamweaver進(jìn)行數(shù)據(jù)庫(kù)操作
猜你也喜歡看這些
- Dreamweaver+Flash+Photoshop網(wǎng)頁(yè)制作教程
- 網(wǎng)頁(yè)制作三劍客經(jīng)典實(shí)例Flashmx,Dreamveaver,Fireworks
- Dreamweaver 8 完美網(wǎng)站建設(shè)從入門到精通
- Dreamweaver 8 ASP動(dòng)態(tài)網(wǎng)頁(yè)編程完全自學(xué)手冊(cè)
- 動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)視頻全教程
- Dreamweaver 8、Flash 8、Fireworks 8網(wǎng)頁(yè)制作從入門到精通
- 薛欣Dreamweaver8視頻教程
- 呂聰賢dreamweaver教程
- DreamweaverMX2004互動(dòng)網(wǎng)站百寶箱for PHP
- 呂聰賢網(wǎng)頁(yè)三劍客視頻教程FlashMX,DreamweaverMX,F(xiàn)i
- 相關(guān)鏈接:
- 教程說(shuō)明:
Dreamweaver教程-層的應(yīng)用及其定位(絕對(duì)定位和相對(duì)定位)
。