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

周挺

摘要：《網頁制作與設計》是中職計算機類專業的一門課程，DIV+CSS頁面布局教學在這門課程中有著非常重要的現實意義和地位，學生往往習慣表格布局，對于DIV+CSS頁面布局的應用無法很好理解和掌握，該文就如何在教學中有效應用DIV+CSS布局技術展開具體闡述。

關鍵詞：DIV+CSS布局;網頁設計;教學實踐

中圖分類號：G642? ? ? ? 文獻標識碼：A

文章編號：1009-3044（2021）10-0221-02

Abstract："Web page making and design" is a course for computer majors in secondary vocational schools. The teaching of DIV + CSS page layout has a very important practical significance and position in this course. Students are often used to table layout， and they can't understand and grasp the application of DIV + CSS page layout well. This paper expounds how to effectively apply DIV + CSS layout technology in teaching.

Key words：DIV + CSS layout; web design; teaching practice

1 引言

DIV 全稱division意為“區分”，CSS全稱為Cascading style Sheets，中文譯作“層疊樣式表單”。DIV+CSS，簡單地說，就是以用DIV標簽在HTML頁面上進行布局，然后用CSS樣式表對網頁的字體、顏色、背景和其他效果進行更加精確的控制。

中職計算機網頁設計課程教學引入DIV+CSS頁面布局有著與時俱進的意義，它的教學進度安排在表格布局之后具有一定的科學性，學生不僅具備了表格布局的基礎，而且通過對比，學生對DIV+CSS的優點會有更加明確的辨別。

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

2.1 “畫一畫”盒模型布局的網頁結構（整體布局）

在網頁布局中最常用的布局方式是“上中下”，要設計一張網頁，首先要引導學生分析網頁結構，本網頁由“logo、導航欄、位置欄、主體頁、版權信息”等板塊組成，我們用盒模型來布局網頁。

我們先介紹盒模型，盒模型是將網頁上每個HTML元素看作一個長方形的盒子，這是網頁設計上的一大創新。CSS中，所有頁面元素都包含在一個矩形框內，這個矩形框就稱為盒模型。

在實際教學時，會發現學生在面對一張效果頁面時茫然失措、無從下手，原因是對頁面的布局不清晰，因此要引導學生在草圖上敢于劃分，在明確盒子數量和位置后，插入DIV標簽。要注意DIV標簽是成對出現，該案例中的DIV代碼框架如下：

我們會發現DIV標記對稱、工整、結構清晰。在授課時要告訴學生DIV標記要成對輸入。每一個DIV標記中的內容都會有相應的CSS樣式進行美化，為了區分樣式，我們用class關鍵字來表示每一類的樣式，class的名稱唯一，比如導航欄所在類的名稱“nav”是唯一的。

2.2 “分一分”每個大盒子的結構

在整體布局之后，需要對主體部分進行細分，這是盒模型布局的延伸，中職學生沒有經歷實戰項目經驗，要求教師在教學時能引導他們從簡單的頁面布局入手。

與傳統的表格嵌套布局相比，DIV布局更加靈活，主要體現在用戶可以根據需要任意定義位置，本案例的主體部分，就是展示了“左-右”的布局位置。左邊的位置放置各個欄目，右邊放置推薦的文章內容。

2.3 借助信息化教學手段“妝一妝”盒模型的樣式

在劃分完區塊后，就要對每個區塊進行化妝，稱為盒模型的CSS樣式美化。CSS美化是DIV+CSS網頁布局的核心和難點，也是形式和內容相分離的具體表現。盒子描述了元素及屬性在頁面布局中所占空間大小，因此盒子會影響其他元素的位置及大小。所以這個步驟非常重要，也是整張網頁設計成敗的關鍵。

該部分涉及了CSS樣式表的代碼設計，所教師教學過程中能預設到學生學習進度的不同，借助信息化教學手段能突破瓶頸，利用信息化資源庫——慕課網，推薦學生在課前在線預習CSS樣式表的基礎知識微視頻，為課堂的重難點教學打下基礎。

為了檢測學生的預習效果，教師在課堂上設計若干知識題，引導學生借助平板電腦在線搶答知識題，激發學生的學習興趣，同時檢測預習效果，提高課堂效率。

2.4 “解一解”CSS樣式對不同瀏覽器的兼容性

瀏覽器的兼容性問題是指設計好的網頁無法在多個瀏覽器中都能正常顯示。在日常教學中，我們會讓學生按照具有兼容性功能的瀏覽器來解決問題，但是無法讓所有瀏覽器都能正常顯示網頁。其根本原因就是不同廠家用了不同的內核。

由于兼容性問題比較復雜，而且解決方法需要大量的實戰經驗支撐，所以教師在教學中要敢于發現學生的問題，毫不回避地去逐一解決問題，以DIV層居中問題為例。

用DIV+CSS編程時，一般會用margin：0 auto;的屬性進行設置，來保證層在瀏覽器中居中顯示，可是IE瀏覽器是不支持這種標簽的，火狐和谷歌瀏覽器都是支持的。要解決這個問題需要修改HTML頭部信息的設置，使得代碼符合W3C定義的規范。代碼如下：

<！DOCTYPE html PUBLIC“-//W3C//DTD XHTML 1.0 Transitional//EN“http：//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

2.5 “辨一辨”CSS樣式表中的三類規則：類、標簽、高級（ID、偽類選擇器）

學生在學習過程中容易把這三類規則搞混淆，原因在于無法判斷哪些樣式是唯一，哪些樣式可以歸類定義，所以要逐一理清這些規則的關聯和區別。

（1）class類和ID

類可以分配給任何數量的元素，而且通常能定義某一類樣式，比如下面兩個板塊是同一種樣式就可以用class，除了文字內容不同，定義的類名稱完全相同。

ID只能在HTML文檔中使用一次，從這點看類似于表格元素INPUT中的NAME屬性，每個NAME屬性的值應該是唯一的，類似于ID。還有個問題是：ID對給定元素應用何種樣式比類具有更高的優先權。

類在用DIV和CSS架構網頁的時候：用于多個有同一樣式的層時比較方便。所以推薦一般用類，在要調用JS時可以使用一個ID的空屬性，在寫CSS的時候，最好把ID寫在前面。

（2）偽類和偽元素

這塊內容雖然比較簡單，但是學生在使用過程中往往會忽略這些特效，而用復雜的CSS效果去代替，結果適得其反。

偽類選擇符可以讓具有超聯接的文本在鼠標經過，點擊等一系列事件中發出很多奇妙的變化，包含換背景顏色，文字顏色，背景圖案，文字大小等等。

a：link {color： #FF0000}? /* 未訪問的鏈接 */

a：visited {color： #00FF00} /* 已訪問的鏈接 */

a：hover {color： #FF00FF} /* 鼠標移動到鏈接上 */

a：active {color： #0000FF} /* 鼠標觸發的鏈接 */

似乎只要是HTML里對文字和背景控制的標簽，都可以更改，一般都用在文字聯接的顏色和去掉原來默認的下劃線上，因為考慮到做的網頁內容比較多，并不是每個地方都應該改背景的。

3 結語

綜上所述，教師在應用DIV+CSS布局技術展開網頁設計教學時，要理清網頁的盒裝結構，從外向內深入剖析內盒的樣式，尤其對浮動、定位、兼容性等主要參數的教學進行層層遞進，由簡到難。通過實戰演練引導學生理解布局的重要性，提升教師的教學質量和學生的學習興趣。

參考文獻：

[1] 喻浩.CSS+DIV網頁樣式與布局從入門到精通[M].北京：清華大學出版社，2013.

[2] 陳丁君.動態網頁編程基礎 [M].北京：電子工業出版社，2016.

[3] David Sawyer McFarland.安道譯.CSS實戰手冊[M].北京：中國電力出版社，2016.

【通聯編輯：代影】