“網頁設計”課程中DIV+CSS布局技術的教學
計算機教育
作者：孟慶軒
摘要： DIV+CSS布局技術已經成為當下流行的網頁布局技術，文章探討了在“網頁設計”課程的教學方法，該方法能夠讓學生利用HTML和CSS（層疊樣式表）代碼書寫進行網頁布局。
關鍵詞： DIV+CSS布局；網頁設計； HTML； CSS
中圖分類號：G642 文獻標誌碼：A 文章編號：1006-8228（2013）09-59-02
0 引言
網頁設計是高職計算機專業的一門專業基礎課程，該課程重點講解網頁的布局技術。現階段主流的網站都采用了DIV+CSS布局技術，如何開展這方麵的教學是需要網頁設計課程工作者進行研究與實踐的。本文對此進行了探討。
1 DIV+CSS布局簡介
在以前的網頁布局中大都采取表格布局，此種布局方法采用Dreamweaver軟件的設計視圖進行操作，在操作上雖然簡單、直觀，但是卻存在諸多缺點：源代碼存在大量的冗餘代碼、頁麵結構與表現混雜在一起不利於信息的檢索、不利於網站的維護與修改[1]。
為了解決上述問題，DIV+CSS布局技術應運而生。DIV+CSS布局技術采用HTML中的div進行整體布局，之後采用CSS（Cascading Style Sheets）即層疊樣式表進行網頁的表現設定。這樣的好處是：網站的內容與表現完全分離，網站的維護與修改更加容易，便於搜索引擎檢索到自己的網站[2]。
但是DIV+CSS布局技術相對於表格布局而言也存在布局方法不直觀，不容易掌握的缺點，學生會因此在學習的過程中困難重重，本文針對這些問題進行了探討。
2 教學難點與重點的化解
2.1 讓學生熟悉HTMl代碼
進行DIV+CSS布局的前提是熟悉HTML代碼的使用。對於高職院校的學生而言，軟件的直觀操作是他們容易接受的，而代碼的書寫是他們不容易接受的。所以在進行網頁設計教學的過程中，我們利用課程前期的若幹課時講解Dreamweaver軟件的使用，采用的布局方法是表格布局。此時主要采取Dreamweaver軟件的設計視圖進行操作，學生易於接受。不過在講解的時候，不僅要講解軟件的使用，還要講解相應自動生成的HTML代碼，讓學生通過界麵操作建立的網頁元素和相應的HTML代碼建立起初步的對應關係。
例如：對於鏈接的使用，在設計視圖中隻需要選擇網頁上的圖片或文字，之後在屬性麵板中的“鏈接（L）”中設置即可。在講解的時候還需要把Dreamweaver切換到代碼視圖，講解HTML代碼中標簽的語法結構。在學生自己做練習的時候，鼓勵學生結合HTML代碼進行操作，讓他們對HTML代碼有個初步的認知。
接下來對HTML代碼進行綜合的講解與練習，讓學生掌握基本HTML標簽的使用。此時，可以特別提出div標簽在以後布局中的作用，讓學生初步認識DIV+CSS布局。
2.2 CSS的語法
之後講解CSS的基本語法，重點是CSS選擇器的使用。主要是讓學生掌握以下四種選擇器[3]：
⑴ id選擇器，id選擇器可以為標有特定id的HTML元素指定特定的樣式。id選擇器以"#"來定義。並且，id屬性隻能在每個HTML文檔中出現一次。