前言：尋找寫作靈感？中文期刊網用心挑選的網頁布局網頁設計教學應用，希望能為您的閱讀和創作帶來靈感，歡迎大家閱讀并分享。

摘要：

在現在的網頁設計中DIV標簽的使用越來越頻繁，DIV標簽的作用也越來越重要，以前那種以內容為中心的網站已經成為過去式。論文在分析表格布局技術及CSS技術的基礎上，闡述了應用DIV+CSS技術進行網頁布局的優勢。從高校計算機網頁設計課程的教學情況出發，文章中提出了DIV+CSS技術在教學中的應用措施。

關鍵詞：

網頁布局；DIV+CSS方案；HTML優化；網頁設計

只有當好的網頁結構和優秀的網頁布局相結合，才能達到最好的瀏覽效果，使瀏覽網站的用戶感受到最好的用戶體驗，如何設計出這樣的網頁就是我們現在研究的重點。

1表格布局技術

早期頁面布局的方式主要用框架及表格。在HTML和瀏覽器還不夠完美的時候，我們想讓頁面內的元素能有一個讓人滿意的格局是比較困難的事情，由于表格不單可以控制單元格的寬度和高度，而且可以相互嵌套，所以為了讓每個網頁元素能夠放在合適的位置，表格就成為網頁設計者的主要工具。表格在頁面布局上比較容易控制，通過表格的套入可以輕松地實現各種各樣的布局，但是當你需要制作一個繁瑣的頁面時，HTML文檔就會充滿了標簽。同時，因為瀏覽器需要把整個表格加載完后才會顯示出來，因此加入一個表格過長，那么訪客就需要等很長的加載時間才可以看到頁面內容。使用表格布局頁面會讓HTML文檔的內部結構變得雜亂不堪，HTML文檔字節數變得越來越大，在落后的設備上，頁面需要大量修改，正是這些弊端，使得網頁開發者開始注意Web的標準。

2CSS樣式

CSS就是CascadingStyleSheets，中文翻譯為“層疊樣式表”，簡稱樣式表，它是一種制作網頁的新技術。CSS是Web標準中表現標準語言。使用CSS可以簡化網站的格式代碼，加快網頁顯示的速度，外部鏈接樣式可以同時定義很多個頁面，大大降低了重復勞動的工作量。CSS標準中重新定義了HTML中原來的文字顯示格式，并增加了一些新理念，比如類、層等，可以對文字進行定位、重疊等操作，提供了更多豐富多彩的格式；同時CSS可進行集中樣式管理。CSS還可以將樣式定義獨自存儲于格式文件中，這樣可以將顯示的內容和顯示樣式定義分開，以便于多個HTML文件共享樣式定義。除此之外，一個HTML文件也可以使用多個CSS樣式文件中的樣式定義，相對于之前傳統HTML的表現而言，在網站的建立及重構過程中使用CSS技術，可以精準的掌握頁面里每一個元素屬性，例如：字號樣式、背景、排列方式、區域尺寸、項目符號等，方便地實現網頁的結構與內容表現完全分離，使站點的加載速度及維護更加方便。使網站的功能擴展性達到前所未有的增強。

3DIV+CSS技術

DIV+CSS是目前應用最多的一種網站布局技術，使用DIV+CSS的網頁布局方案，首先需要把HTML結構化，我們可以先不考慮網頁的外觀。先將內容放在設置好的DIV中，讓結構由DIV產生，然后再使用CSS進行格式設計，即“外觀”設計。在網站設計前需要對網頁進行規劃設計。例如，一個頁面可能有類似這樣的幾塊：網站名稱、主頁、子頁面導航（主菜單）、子菜單、搜索框、展示區、頁腳等。與傳統的表格布局相比較，使用DIV+CSS進行網頁布局還具有以下優勢：更快捷的被搜索引擎的引用，加載速度更快；CSS使用靈活，使頁面元素樣式多變，利于維護和更新；使用DIV+CSS技術，可以減少視覺的相同性，同一網頁在不同瀏覽器中表現的效果相同或基本不變，保持網頁的美感；表現和內容相分離、提高頁面加載速度。

4DIV+CSS技術在教學中的應用措施

在網頁設計課程學習時，經常是使用Dreamweaver網頁開發軟件，Dreamweaver是一個視覺化網頁開發工具，可以方便、高效的實現DIV+CSS技術對頁面進行布局，代碼自動生成這一特點，一方面能讓學生迅速的設計出網頁，另一方面不利于學生真正記住和掌握。所以，在使用Dreamweaver的同時，可以讓學生使用Notepad++編輯器或用記事本對代碼進行錄入。在初學DIV+CSS布局網頁時，可以選擇一個簡單的網站，用表格和DIV+CSS技術兩種方法進行布局，讓學生真正理解這兩種方法的區別和特點。針對不同網站使用不同的布局方法。教會學生當前社會網頁前端開發師最需要的技術?；谝陨险撌?，筆者認為在教學中加入DIV+CSS布局需要注意以下幾個問題。共享學習資源，利用MOOC。教師要給出學習參考書目錄，DIV+CSS布局的有關教材已經相當普遍，另外，教師也可以鼓勵學生進行MOOC(慕課)學習，或在淘寶購買一些關于類似的視頻教程，不論是在課上還是在課下，都能充分利用網上資源，整合成DIV+CSS布局原理、知識和案例的教學資源。將WEB的標準貫徹到網頁設計的學習中，由HTML升級到XHTML。當下大部分網頁設計教材講解的內容還是HTML標記語言，但是在WEB結構標準語言中，我們將會使用XHTML，因此需要在HTML學習的基礎上要加入升級版的教學內容，既要講解HTML的普遍用法和主要標簽，也要為學生講解為什么要升級到XHTML以及升級后的XHTML比HTML好在哪里。適當推薦和引用CSS樣式表，強化層疊樣式表CSS的基礎教學，為學習DIV+CSS的頁面布局打下良好的基礎。在講解CSS樣式時，可以引用網上使用頻繁的外部CSS樣式，在使用應用外部CSS文件的時候，頁面的布局可以變得非常整潔和清新，讓人眼前一亮。在CSS教學過程中，除了需要介紹CSS的常用屬性之外，最重要的就是要讓學生理解和學會使用外部CSS樣式，這是學習DIV+CSS網頁布局的提高過程。采用任務驅動式教學方法，以案例為驅動，培養學生學習興趣，提高學生動手制作能力。在學習了基礎的DIV+CSS頁面布局知識之后，為學生提供一些DIV+CSS布局的網頁案例的基礎上，加強學生的動手實踐訓練，給學生一些真實的企業項目或學校網站項目，例如學院主頁或各系主頁宣傳網站等。

5結語

本文探究的主旨在改變現存的網頁設計課程的教學方法與模式，以培育精英級的網頁設計人才為目的，扎實提升學生的自主學習能力，實現社會對網頁設計精英的技術要求，從而保證該門課程的市場特色和教學質量。為了達到這個目的，我們對教學內容進行改變與擴充，使教學素材更加接近實際需求，竭力使學生更適合當今市場的需要，并為后面課程的學習打下堅實基礎。

作者：田紅玉 單位：黑龍江信息技術職業學院

參考文獻

[1]高川程.淺談基于DIV+CSS的網頁布局技術應用研究[J].計算機光盤軟件與應用,2013(1):231-232.

[2]劉坤彪,程旭東,陳銘.基于CSS的標準網頁布局設計[J].南陽理工學院學報,2012(6):23-28.

[3]黃玉春,陳霞.DIV+CSS布局在網頁設計教學中的應用研究[J].電腦知識與技術,2013(30):6837-6838.