周挺

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

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

中圖分類(lèi)號(hào)：G642? ? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（1）class類(lèi)和ID

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

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

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

（2）偽類(lèi)和偽元素

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

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

a：link {color： #FF0000}? /* 未訪(fǎng)問(wèn)的鏈接 */

a：visited {color： #00FF00} /* 已訪(fǎng)問(wèn)的鏈接 */

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

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

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

3 結(jié)語(yǔ)

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

參考文獻(xiàn)：

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

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

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

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