DIV+CSS 布局在網頁設計教學中的應用

□雒 虹

一、引言

隨著時代的發展進步，網絡計算機技術的飛速發展進步，網頁設計領域也有了極其廣泛的發展空間，各個院校都開設了網頁設計這一學科的教學，為培養這方面更多的人才對推動我國網頁設計專業的發展進程作出重要的貢獻。目前，在我國網頁設計這一學科的教學過程中，教學使用的軟件一般都是Dreamweaver，這一軟件在設計網頁的時候，網頁布局法最常用的就是Table 頁面布局以及DIV+CSS 頁面布局這兩種，本文就深入了解分析DIV+CSS 頁面布局法這一頁面布局法解決傳統表格布局法的不足之處，利于后期的網頁維護和修改工作的進行，簡化了代碼，從而減少了網絡資源的浪費。由于DIV +CSS 布局在當今社會的應用中受到廣泛的歡迎，因此，我國各院校也應重視這一布局法在網頁設計教學中的應用，改變傳統網頁設計教學課堂的教學氛圍，提高教學質量，從而對提高學生的能力起到深遠的作用。

二、DIV+CSS 布局

(一)傳統的網頁頁面布局法。在傳統的網頁設計教學過程中，使用的頁面布局法主要是表格頁面布局和框架布局。表格布局法的優勢在于可以隨意設置單元格的高度和寬度，還可以實現嵌套，能讓網頁中的各元素都擺放在預期的地方;它的操作簡單易行，可以完成各種版式的布局。但是它也存在很多缺點，比如說在設計復雜的網頁時候，HTML 文檔內容將會特別多，這樣瀏覽器在加載完表格再顯示頁面的過程中，要消耗很長的時間，此外，表格布局法還可能使HTML 文檔的內部結構混亂，其頁面的維修和修改工作也特別困難。

(二)含義。DIV 是一種容器性質的元素，它的存在是為HTML 文檔內容提供結構和背景，它是由起始標簽＜div ＞和結束標簽＜/div ＞之間的內容構成的。CSS 就是層疊樣式表，主要是用來設計網頁的排版和風格的，使網頁變得更加豐富。CSS 由兩個主要部分組成:選擇器和聲明，其中選擇器的使用需要改變樣式的元素;聲明則是由一個屬性一個值組合成的，屬性和值需要用冒號來隔開，聲明和聲明之間需要用分號來隔開。如果要將網頁頁面上的元素實現一對一的控制，就需要使用CSS 選擇器，常用的有標簽選擇器、類選擇器、id 選擇器、群組選擇器以及后代選擇器這幾種，它們都有著各自的優點和缺點。

(三)布局原理。DIV +CSS 頁面布局法是WEB 設計的標準，它和以往的表格頁面布局法有著明顯的不同之處，可以實現網頁頁面內容和表現分離，其中DIV 是用來完成網頁的框架結構，CSS 是用來美化網站的樣式，它們的共同使用可以將網站進行重構，使網站進一步實現標準化，簡化HTML 文檔內容的代碼，有利于網站結構的搭建。

三、網頁設計教學過程中DIV+CSS 布局法的應用路徑

(一)DIV+CSS 布局法的優點。

1．使網頁結構實現標準化。由于傳統的表格頁面布局法使用過程中，網頁垃圾代碼過多，用于裝飾的樣式和頁面布局代碼的混合導致頁面結構不美觀，此外，表格頁面布局中的多層嵌套、單元格的合并與拆分這些對一個單元格的調整工作，都會影響到其余單元格的表現效果。但是DIV+CSS 頁面布局法很好地解決了這一問題，在頁面布局設計的時候，使用DIV 盒子來確定大小，其邊框局、間距等多種屬性都可以進行數值上的調整，這就使網頁頁面的結構塑造性極強。

2．使網頁內容和樣式相分離。DIV +CSS 頁面布局法的使用，解決了以往網頁風格不統一的問題，有利于更新和網頁維修修護工作的進行。DIV(網頁內容)和CSS(樣式)的相互分離，一般是通過將頁面內容放到HTML 文檔文件中而樣式則放在單獨的CSS 文件里，當需要進行網頁內容修改時候，只需要對HTML文件改動，對網頁頁面效果修改時候，則只需要對CSS 文件中的內容進行修改即可，大大節省了工作的時間和人力的消耗。DIV+CSS 頁面布局法將網頁內容和樣式的分離，對網頁的更新工作帶來極大的便利，此外，還可以實現網頁風格的相互統一。

3．優化搜索引擎。網頁設計中的搜索引擎主要是針對網頁內容也就是文字、代碼完成的，而傳統的表格頁面布局法中使用的頁面代碼過多，搜索引擎工作很難完成。但是DIV +CSS 頁面布局法中的網頁代碼簡潔，在進行搜索引擎工作的時候，只需要將被搜索的內容從HTML 文檔中的代碼進行搜索即可，搜索引擎只需要輸入搜索內容的關鍵詞，減少了繁復的搜索內容，提高了搜索引擎工作的效率，減少了大量的工作時間。

(二)DIV+CSS 布局在網頁設計中的具體應用路徑。DIV+CSS 這一布局法在網頁設計學科的教學過程中有著重要的作用，但是其技術性較高，操作困難，這就需要老師在教學過程中通過以下路徑提高教學質量。

1．教學內容。目前，我國多數網頁設計課程采用的教材在DIV+CSS 布局這方面的講解都是從含義講起再分析字體、表格、圖像等屬性，內容散亂無章，學生學起來也顯得十分困難。因此，應該從教學內容的制定上實現創新，教學內容由簡單到困難，不斷深入了解其具體含義。教學內容困難度的由淺及深，可以使學生在輕松愉悅的氛圍中學習，激發學生的學習興趣，這樣網頁設計這一學科的教學質量才能得到進一步的提高，學生自身的知識能力水平也將得到大幅度的進步。

2．教學方法。隨著社會的發展進步，我國教學事業也得到了飛速的進步，教學理念都發生了巨大的改變，在當今教學活動中，應該彰顯學生在課堂中的主體地位。這就需要從教學方法開始作出改變。傳統的網頁設計課程都是通過老師控制學生電腦演示設計過程來完成的，這種講課方法學生無法親自動手參與到課堂教學中，老師講完后讓學生自己輸入代碼，學生就被動輸入代碼，這樣學生的思維得不到培養，教學質量也將受到限制。因此，老師應該創新教學方法，充分利用先進的多媒體技術，不再操作學生的電腦，讓學生自己動手，自主思考問題，這樣教學質量才能得到提高。

3．教學評價。傳統的網頁設計教學考核主要是通過試卷完成的，這不符合這一學科的特征，因此，老師要在教學評價上實現創新，可以通過綜合課程設計以及期末機房考試這兩部分實現對學生的考核，既可以檢查學生平常上課中綜合案例的掌握情況，又可以檢測學生的網頁設計情況，教學評價體系的創新對推動學生的學習有著重要的作用。

四、結語

總體說來，在當今社會形勢下，各院校都要綜合考慮社會市場對網頁設計領域人才的需求以及這一學科自身的特點，制定合理的教學內容、教學方法，提高學生的綜合素質，重視DIV +CSS 布局在網頁設計教學過程中的應用，使學生充分掌握這一技術。

［1］黃玉春，陳霞．DIV +CSS 布局在網頁設計教學中的應用研究［J］．電腦知識與技術，2013，10

［2］王愛菊，楊金川．DIV +CSS 布局在《網頁制作》課程中的教學改革探究［J］．無線互聯科技，2015，5