學術咨詢服務：服務正當時...
學術咨詢服務：服務正當時...
目前，在網頁設計中頁面的布局主要是采用框架布局、表格布局、圖層布局等方法。相比于以上的布局技術，DIV+CSS網頁布局作為目前的主流技術，具有十分明顯的優勢。通過CSS技術的應用，可使網頁設計中的格式定義得到有效簡化，提高網頁維護的便捷性，相比于以往的HTML標記符，CSS技術具有強大的格式設置功能，可使網頁具有更強的視覺表現力。將CSS與DIV兩種網頁布局技術進行結合應用，能夠徹底解決以往表格布局中所帶來的不足，從而使網頁的頁面布局以及外觀樣式變得更加靈活、簡單。
關鍵詞：頁面布局；網頁設計；DIV；CSS
互聯網的快速發展，使越來越多精美的網頁作品不斷涌現，并吸引了大量用戶的眼球，在網頁作品設計中，首先要采用相應的頁面布局技術來對網頁進行合理的布局，以此確保網頁內的各個要素能夠處于恰當的位置。現如今，大多數商家在網頁設計中，都傾向于采用更加靈活、便捷、功能更加強大的頁面布局方法，而DIV+CSS頁面布局技術的出現，使上述要求得到了有效滿足，從而深受廣大網頁開發人員的青睞。通過將DIV與CSS技術進行結合應用，能夠使網頁設計工作中的各個模塊內容得到合理布局，其屬于一種盒子式的開放式布局技術，利用該技術可通過對多個盒子進行嵌套操作，以此實現對網頁的合理編排，從而使網頁的代碼變得更加簡潔，并且便于對網頁的后續更新與維護，同時還能實現對不同瀏覽器的有效兼容。
一、頁面布局技術中的關鍵技術手段
在Xhtml頁面設計中，常常采用DIV+CSS頁面布局技術，該技術成功取代了以往的Table定位技術，實現了對Xhtml網頁中各個模塊的合理編排與定位。
（一）CSS技術
CSS技術的英文全稱為cascadingstylesheet，其又被稱之為層疊樣式表技術，CSS技術作為頁面布局技術中的一種關鍵技術，能夠對網頁樣式進行控制，使樣式信息能夠從網頁中分離出來，CSS屬于一種具有標識性的計算機語言，自20世紀90年代中期開始，CSS技術便正式被w3c進行審核后予以通過，同時將其作為推薦產品。通過在html語言中應用CSS技術，可使頁面設計變得更加精美。CSS技術是以html語言為基礎的，實現了對html功能的有效擴展，并且能夠對網頁格式進行更加有效的設置。在網頁設計工作中，當設計人員需要設置網頁外觀時，可對更改樣式進行定義，不需要對HTML文件進行更改即可完成。在CSS技術中，目前主要有三種定義，分別是外部樣式表、行內樣式表以及內嵌樣式表，其中外部樣式表是在CSS樣式文件中添加一個CSS后綴，該樣式文件可在各種網頁中進行應用。而內嵌樣式表則對<STYLE>標記符內對具體的樣式信息進行定義，這種樣式表只能在當前頁面中應用。對于行內樣式表來說，則是將樣式信息直接嵌套至標記符內，這種定義方式只局限在本標簽。CSS技術的格式化功能非常豐富，能夠實現對網頁中字體、背景、顏色等各個要素的設計，同時還能兼容諸多可視化瀏覽器，具有非常豐富的樣式風格。通過CSS技術，可實現對網頁中結構與格式的有效分離，從而使頁面布局工作得到有效控制，在減小了網頁體積的同時，還能提高網頁的下載速度。
（二）DIV技術
在HTML中，DIV技術是對HTML頁面的各個層進行標記的<div>符，通過<div>層標記符，能夠實現對各種復雜頁面的靈活布局，從而使頁面內的各個模塊能夠在任意位置中進行定位。在HTML頁面的各個層中，主要有文本層、圖像層等，這些層往往是被嵌套或重疊在一起的，利用DIV技術可使這些層變得可見，同時還可為HTML設置子層來添加新的頁面要素，正是DIV技術，使HTML頁面設計工作能夠對各個層進行靈活方便的設置，進而使網頁設計從以往的二維平面設計進一步拓展至三維平面設計。
二、網頁設計中頁面布局技術的選擇
在網頁設計工作中，以往的網頁布局技術主要有表格布局、單元格布局、框架布局以及圖層布局等，這些頁面布局技術的出現，使網頁設計變得更加靈活、便捷。以下便對網頁設計中不同頁面布局技術的選擇進行逐一探討。
（一）表格布局
表格布局在對網頁中各個要素進行組織時，通常是以行列形式來完成的，這樣便于用戶對網頁進行瀏覽。在網頁設計中應用表格布局技術時，需要結合網頁中不同版式的劃分情況，在表格單元格內添加相應的網頁元素，以此確保這些元素能夠在網頁頁面中進行正確定位。當網頁布局工作較為復雜且繁瑣時，需要對不同大小的表格進行設置，然后將這些表格按照需要來進行嵌套，即可使網頁內容得到合理的定位與排版，此時在網頁中的行標簽<tr>、表格標簽<table>以及單元格標簽<td>之間是彼此交織的，但這也造成網頁的代碼結構變得非常復雜，從而使網站的后續更新、維護與開發存在較大難度。當需要對網站中的表格進行改版時，往往要對該頁面中的全部結構代碼進行更改，操作起來勢必會極為繁瑣。并且，因需要對表格內容進行下載，這樣才能使表格得以顯示出來，如果網頁中的內容非常多，還會影響到用戶對網頁的瀏覽速度。
（二）圖層布局
在一個網頁中，往往包含著許多圖層，這些圖層都是網頁要素的載體，網頁設計人員可以將文字、表格、圖像等放置到圖層之中，然后在頁面中對該圖層的位置進行定位，在定位過程中還可對圖層進行重疊，這也使網頁在布局過程中變得更加靈活，從而有效彌補了框架布局與表格布局在應用過程中所存在的不足。圖層布局不僅可利用層來完成頁面的布局，還可將行與層結合起來，從而使某些圖層能夠根據需要進行顯示與隱藏，并且在頁面中設置一些移動層，還能給頁面的展示效果帶來更多的選擇。
（三）框架布局
在頁面顯示中，利用框架可使頁面空間得到有效分割，進而使不同的網頁能夠獨立顯示其不同內容，通過框架可使網頁布局變得更加豐富，使頁面組織形式變得更加多樣化。框架布局能夠幫助用戶便捷地切換到不同的頁面之中，網頁設計人員在設置網頁導航時，便常常采用框架布局，利用框架來對頁面進行布局，不需要對頁面進行重新加載，并且各個框架均配置有對應的滾動條，這能夠使頁面中的模塊邏輯關系變得更加清晰、明確。
（四）DIV+CSS技術布局
在網頁設計工作中，DIV技術又被叫作圖層技術，其以<div>層作為核心，通過對</div>層內容進行編輯，以此實現對網頁的布局。相比于表格布局以及框架布局來說，DIV技術相當于一個用于填裝物體的容器，被填裝的物體便是頁面中的各個元素，網頁設計人員可在網頁中對CSS的顯示樣式進行設置，并將網頁中的圖層擺放在指定位置，以此實現對網頁的布局。通過對DIV與CSS這兩種布局技術的結合運用，可將網頁的內容與外觀樣式信息進行分離，從而便于對網頁要素的集中式管理，在應用過程中需要改變網頁的顯示外觀時，不需更改HTML文件，只需對樣式定義進行更改即可。通過對CSS文件進行修改，并應用到HTML文件中，能夠使頁面自動對CSS文件中的更改樣式進行自動套用，進而有效簡化了網頁設計流程，同時也使網頁的后期更新與維護變得更加便捷。相比于以往的表格嵌套方式，利用DIV+CSS網頁布局技術，能夠使頁面具有更快的加載速度，并且使頁面的區域劃分變得更加獨立、靈活，用戶在訪問頁面時，頁面只需按照圖層來進行加載即可，不需通過嵌套表格的方式在一個統一的表格中對頁面進行固定。
三、基于頁面布局技術的網頁設計研究
（一）將CSS文件按照css后綴進行保存
在網頁設計中，需要將CSS文件按照css后綴格式來進行保存，而這就需要對CSS樣式進行定。
（二）將網頁文檔按照htm后綴進行保存
在對html格式網頁文檔進行保存時，需要在樣式面板的附加樣式彈出列框中找到mystyle.css文件，然后在代碼視圖的<body>標簽內添加一個新的<div>標簽，并在該標簽中設置相應的ID樣式，部分代碼為：在上述代碼編輯完畢后對文檔進行保存，然后對網頁進行預覽，即可看到網頁的實際展示效果，通過對CSS樣式進行定義，能夠設置網頁中圖層的大小、所在位置以及內容格式，利用DIV技術能夠在不同圖層中納入想要的頁面元素，從而使其成為網頁結構中的組成部分，利用CSS技術來展示頁面的外觀樣式，能夠使網頁中的內容與外觀樣式得以相互分離，進而在網頁后續改版與更新時，只需對CSS進行便捷的修改即可。
四、結語
總而言之，通過CSS技術的應用，可使網頁設計中的格式定義得到有效簡化，提高網頁的維護便捷性，相比于以往的HTML標記符，CSS技術具有強大的格式設置功能，可使網頁具有更強的視覺表現力。將CSS與DIV兩種網頁布局技術進行結合應用，能夠徹底解決以往表格布局中所帶來的不足，從而使網頁的頁面布局以及外觀樣式變得更加靈活、簡單。
參考文獻：
〔1〕馮興利，洪丹丹，羅軍鋒，鎖志海.視頻自適應技術在網頁設計中的實現〔J〕.現代電子技術，2016，（24）：18-21.
〔2〕楊瑞梅.淺談DIV+CSS布局技術在網頁設計與制作中的應用〔J〕.信息記錄材料，2017，（7）：118-120.
〔3〕馮興利，洪丹丹，羅軍鋒，鎖志海.自適應網頁設計中的關鍵技術〔J〕.計算機應用，2016，（S1）：249-251，256.
作者：曹瑞燕
相關論文