DIV+CSS布局技術(shù)在網(wǎng)頁設(shè)計教學中的實踐應(yīng)用

周挺

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

關(guān)鍵詞：DIV+CSS布局;網(wǎng)頁設(shè)計;教學實踐

中圖分類號：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意為“區(qū)分”，CSS全稱為Cascading style Sheets，中文譯作“層疊樣式表單”。DIV+CSS，簡單地說，就是以用DIV標簽在HTML頁面上進行布局，然后用CSS樣式表對網(wǎng)頁的字體、顏色、背景和其他效果進行更加精確的控制。

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

2 DIV+CSS布局技術(shù)在網(wǎng)頁設(shè)計教學中的應(yīng)用

2.1 “畫一畫”盒模型布局的網(wǎng)頁結(jié)構(gòu)（整體布局）

在網(wǎng)頁布局中最常用的布局方式是“上中下”，要設(shè)計一張網(wǎng)頁，首先要引導學生分析網(wǎng)頁結(jié)構(gòu)，本網(wǎng)頁由“l(fā)ogo、導航欄、位置欄、主體頁、版權(quán)信息”等板塊組成，我們用盒模型來布局網(wǎng)頁。

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

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

我們會發(fā)現(xiàn)DIV標記對稱、工整、結(jié)構(gòu)清晰。在授課時要告訴學生DIV標記要成對輸入。每一個DIV標記中的內(nèi)容都會有相應(yīng)的CSS樣式進行美化，為了區(qū)分樣式，我們用class關(guān)鍵字來表示每一類的樣式，class的名稱唯一，比如導航欄所在類的名稱“nav”是唯一的。

2.2 “分一分”每個大盒子的結(jié)構(gòu)

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

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

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

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

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

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

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

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

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

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

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

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

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

（1）class類和ID

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

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

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

（2）偽類和偽元素

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

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

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

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

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

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

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

3 結(jié)語

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

參考文獻：

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

[2] 陳丁君.動態(tài)網(wǎng)頁編程基礎(chǔ) [M].北京：電子工業(yè)出版社，2016.

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

【通聯(lián)編輯：代影】