周挺

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

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

中圖分類號：G642? ? ? ? 文獻(xiàn)標(biāo)識碼：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標(biāo)簽在HTML頁面上進(jìn)行布局，然后用CSS樣式表對網(wǎng)頁的字體、顏色、背景和其他效果進(jìn)行更加精確的控制。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

用DIV+CSS編程時，一般會用margin：0 auto;的屬性進(jìn)行設(shè)置，來保證層在瀏覽器中居中顯示，可是IE瀏覽器是不支持這種標(biāo)簽的，火狐和谷歌瀏覽器都是支持的。要解決這個問題需要修改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ī)則：類、標(biāo)簽、高級（ID、偽類選擇器）

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

（1）class類和ID

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

ID只能在HTML文檔中使用一次，從這點(diǎn)看類似于表格元素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)容雖然比較簡單，但是學(xué)生在使用過程中往往會忽略這些特效，而用復(fù)雜的CSS效果去代替，結(jié)果適得其反。

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

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

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

a：hover {color： #FF00FF} /* 鼠標(biāo)移動到鏈接上 */

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

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

3 結(jié)語

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

參考文獻(xiàn)：

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

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

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

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