摘 要 表格和層布局是Dreamweaverm網(wǎng)頁設(shè)計中網(wǎng)頁布局的兩種基本方法,二者各有自己的特點。使用表格布局可以方便規(guī)范整個頁面,組織各種頁面元素有條理統(tǒng)一,使用層布局可以利用層的重疊、移動、隱藏,豐富頁面效果。
關(guān)鍵詞 Dreamweaver 表格 層 布局
中圖分類號:TP39 文獻標(biāo)識碼:A
2016年1月22日,中國互聯(lián)網(wǎng)絡(luò)信息中心(CNNIC)發(fā)布第37次《中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計報告》(以下簡稱為《報告》)。《報告》顯示,截至2015年12月,中國網(wǎng)民規(guī)模達6.88億,互聯(lián)網(wǎng)普及率達到50.3%,半數(shù)中國人已接入互聯(lián)網(wǎng)。同時,移動互聯(lián)網(wǎng)塑造了全新的社會生活形態(tài),“互聯(lián)網(wǎng)+”行動計劃不斷助力企業(yè)發(fā)展,互聯(lián)網(wǎng)對于整體社會的影響已進入到新的階段。
瀏覽網(wǎng)頁已經(jīng)成為現(xiàn)代社會人們生活中不可或缺的重要部分。網(wǎng)頁作為信息在網(wǎng)絡(luò)傳播中的主要載體,人們除了關(guān)心里面的內(nèi)容以外,對它的版面設(shè)計也非常關(guān)注。如何將所有的文字、圖片、動畫等頁面元素按照設(shè)計要求精美地排列在頁面中,即網(wǎng)頁如何布局,是網(wǎng)頁設(shè)計的重點和關(guān)鍵所在。
利用Dreamweaver進行網(wǎng)頁設(shè)計時,基本的布局方法是使用表格和層。這兩種方法在頁面布局時各有自己的特點。
表格是網(wǎng)頁設(shè)計制作時不可缺少的重要元素,既可以單純地轉(zhuǎn)二維數(shù)據(jù),又可以用來組織頁面內(nèi)容,將不同的頁面元素放置在不同的表格或單元格里,以簡潔明了的方式將各種頁面元素井然有序地顯示在頁面中,并且可以設(shè)計出布局合理、結(jié)構(gòu)協(xié)調(diào)、美觀勻稱的網(wǎng)頁。
使用表格布局頁面時,定位各種頁面元素過程簡單,用戶在頁面上方便地繪制布局單元格,并能夠靈活的將其移動到所需位置。使用多個布局表格可以將頁面布局分隔成多個區(qū)域,每個區(qū)域相對獨立,當(dāng)對某一個區(qū)域進行編輯時,不會影響其他區(qū)域。利用布局表格,用戶可以快捷制作出結(jié)構(gòu)復(fù)雜的版面。
使用表格布局,用戶還可以創(chuàng)建固定寬度的布局和自動伸展為整個瀏覽器窗口寬度的布局,因此兼容不同平臺、不同分辨率的瀏覽器。
表格布局比較規(guī)范、整體性強,表現(xiàn)得中規(guī)中矩,不太有其他豐富功能。
有些人在網(wǎng)頁設(shè)計時喜歡整個頁面使用一個大表格,然后在大表格中再嵌套小表格,使得瀏覽器在打開這個大而長的表格時只能等待整個表格的內(nèi)容都接收完后才顯示,從而增加了瀏覽器的負(fù)擔(dān)。
網(wǎng)頁中的層就是網(wǎng)頁內(nèi)容的一個容器,使用層可以靈活放置網(wǎng)站內(nèi)容,層中放置各種頁面元素,甚至還可以嵌套層。層也是一種網(wǎng)頁元素定位技術(shù),使用它可以以像素為單位精確定位頁面元素。層最主要的特性就是可以在網(wǎng)頁中自由浮動,可以放置在頁面的任何位置上。層的位置可以重疊、顯示與隱藏、與時間軸結(jié)合,可用來控制元素的顯示順序,還可用來制作網(wǎng)站的部分重疊效果,使頁面有豐富變化。
層布局的靈活性同樣也體現(xiàn)了一定的不穩(wěn)定性。通常情況下,層加入到頁面中是游離的,雖然移動方便,但在頁面中的位置是固定的,因此當(dāng)瀏覽器窗口變化時,層還在原位,沒有跟著相對位移,因此會出現(xiàn)位置上的偏差。
CSS樣式大多用于控制層的排版布局,一般使用外部CSS文件重用。統(tǒng)一使用一個外部CSS樣式表文件,可以實現(xiàn)“一改全改”的效果,維護成本低。但一個網(wǎng)站所有頁面在加載時都要訪問同一個文件,后臺支撐成本無形中提高、服務(wù)器消耗增加。
目前,瀏覽器的種類很多,版本也很多。對于CSS(樣式表)并不是所有瀏覽器的所有版本都支持的很好,這就使得在頁面制作的過程中需要針對不同瀏覽器版本進行測試,以保證兼容性,無形中增加很多工作量。
很多情況下,可以同時使用表格與層混合搭配進行布局。先使用多個上下關(guān)系的表格進行頁面的整個布局,再使層成為單元格的一個元素,既利用表格的整體規(guī)范性使整個布局規(guī)范,又利用到層的靈活性和豐富功能,從而使頁面設(shè)計更加精彩。
網(wǎng)頁設(shè)計中,好的網(wǎng)頁內(nèi)容還要結(jié)合精美的網(wǎng)頁布局。頁面布局合理、有新意,才能完美展現(xiàn)網(wǎng)頁內(nèi)容,才能在瀏覽者處加分,引起瀏覽者的興趣和共鳴。
作者簡介:劉珍,(1972-),碩士,研究方向為計算機應(yīng)用。
參考文獻
[1] 文杰書院.DreamweaverCS5[M].清華大學(xué)出版社,2011(01).
[2] 李愛軍.網(wǎng)頁的排版布局[J].辦公自動化:綜合版,2009(7):29-30.
[3] 王瑄.探討Dreamweaver中層的應(yīng)用[J].科技信息,2011(2):261-261.