DIV+CSS網(wǎng)頁布局案例在教學(xué)中的應(yīng)用

張景峰 王麗芬 胡曉紅

摘要：該文將案例教學(xué)與興趣教學(xué)相結(jié)合，提出了將實(shí)際應(yīng)用案例融入課程的思路。同時也針對課程中采用案例的選取和設(shè)計進(jìn)行了論述。

關(guān)鍵詞：案例設(shè)計；案例制作；整體思路；課堂教學(xué)

中圖分類號：TP393 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2018）03-0128-02

1 概述

網(wǎng)頁設(shè)計的實(shí)現(xiàn)一般通過兩種方式：傳統(tǒng)的表格布局方式和CSS布局方式。

1） 表格布局

傳統(tǒng)的表格布局模式主要運(yùn)用html中的table元素的無邊框特性，設(shè)計一個能滿足版式要求的表格結(jié)構(gòu)，將內(nèi)容裝入每個單元格中。大量的樣式設(shè)計代碼混雜在單元格中，構(gòu)成一個多重嵌套的復(fù)雜的表格。這種布局方法，不利于頁面的靈活設(shè)計和后期修改完善，降低頁面的可讀性，而且對于頁面的維護(hù)增加了難度，也提高了成本。復(fù)雜的表格設(shè)計使得修改非常繁瑣，最后生成的網(wǎng)頁代碼除了表格本身的代碼，還有許多沒有意義的圖像占位符及其他元素，文件量龐大，最終導(dǎo)致瀏覽器下載解析速度變慢。

2） div+css布局

div可以理解為“圖層”或者“塊”，它是一種比表格簡單的元素。Div的功能僅僅是將一段信息標(biāo)記出來，用于后期的樣式定義。而CSS布局的重點(diǎn)不再放在表格元素的設(shè)計中，CSS是一個非常靈活的工具，可以將文檔的樣式內(nèi)容脫離出來。CSS樣式表可以用來改變從文本樣式到頁面布局的一切，并且能夠與JavaScript結(jié)合產(chǎn)生動態(tài)地顯示效果。如：文本格式和顏色；圖形外觀和布局；還有動態(tài)操作等等。

3） 在HTML中有三種方式插入樣式表，分別是：

（1） 內(nèi)聯(lián)樣式表（直接寫在HTML標(biāo)簽中）

如：

（2） 嵌入樣式表：是將CSS樣式表統(tǒng)一放置在頁面的一個固定的位置。

如：

…

最后，在頁面main標(biāo)簽之后，創(chuàng)建一個id為bottom的div，用以編輯頁腳的內(nèi)容。同時在css中設(shè)置頁腳div的樣式：

#bottom {

width：1007；

height：89px；

color：#000；

text-align：center；

line-height：20px；

background-image：url（../images/2506.png）；

background-repeat：no-repeat；

background-position：center bottom；

border-top：#093 dashed 1px；

margin-top：20px；}

其中，在頁眉與主體或主體與頁腳之間經(jīng)常會創(chuàng)建一條相應(yīng)樣式的分割線，使頁面看上去既美觀又條例。分割線的設(shè)置需要一個重要的屬性border來實(shí)現(xiàn)，包含線條樣式、線條顏色以及線條粗細(xì)等參數(shù)設(shè)置。

案例來自一個實(shí)際應(yīng)用的作品，雖然結(jié)構(gòu)簡單，但非常典型的概括了網(wǎng)頁布局的流程，以及div與css樣式的相互作用。課堂上老師先給學(xué)生分析分解頁面結(jié)構(gòu)，然后一步一步引導(dǎo)學(xué)生完成案例，同時，學(xué)生掌握了相關(guān)知識，了解了頁面制作流程。

2） 典型案例解決教學(xué)難點(diǎn)

掌握了div+css制作網(wǎng)頁的基本流程后，通過接下來的典型案例來學(xué)習(xí)掌握不太規(guī)范的頁面結(jié)構(gòu)如何合理布局和實(shí)現(xiàn)。

首先，在body樣式設(shè)置中添加背景，同時在box的div樣式中采用另一種方式定義頁面寬度，即百分比的方式：width：100%，說明不管在怎樣尺寸的顯示屏上，在怎樣的瀏覽器上，寬度上都是滿屏顯示。

其次，在這種頁面的制作中，頁眉的元素比較零碎不規(guī)則。如何合理規(guī)劃頁眉是一個重要的課題。由于logo區(qū)域和導(dǎo)航條區(qū)域，結(jié)構(gòu)不一，所以分別設(shè)置比較合理。先在box的開始標(biāo)簽之后添加top1，再在top1的開始標(biāo)簽之后添加top1-1來容納logo圖片，并且該div靠左擺放，以插入圖片大小為依據(jù)，定義css樣式。然后再在top1的右側(cè)插入新的div（top1-2），來存放入口鏈接。其中右側(cè)的位置定義需要依靠float：right來實(shí)現(xiàn)，同時適當(dāng)定義該圖層的右邊距。

第三，導(dǎo)航條的制作。導(dǎo)航的制作，方法不一，比較靈活快捷的方法，不妨先將導(dǎo)航的各鏈接以段落形式垂直擺放，選中所有鏈接內(nèi)容，添加項目列表，然后添加無序列表的css樣式：

#top2 li {

width：100px；

height：25px；

float：left；

list-style-type：none；

text-align：center；

margin-top：10px；}

其中，確保各鏈接一字排列，浮動定位屬性的設(shè)置至關(guān)重要。同時還需要將列表樣式的類型設(shè)置為“無”，并使文本居中對齊。

第四，主體div左側(cè)的數(shù)據(jù)符號與段落文字的排版，是一個值得學(xué)習(xí)的方式。先將數(shù)字序號以圖片形式制作完成，然后將各數(shù)字序號作為背景加入文本各層。為了避免文字與序號重疊，設(shè)置文字圖層左側(cè)的內(nèi)邊距，將內(nèi)容錯開。另外，多個標(biāo)題的樣式，采用類樣式形式，并在屬性面板上選擇添加。

通過這個案例的引入，使得課堂氣氛變得活躍熱烈，學(xué)生主動學(xué)習(xí)的熱情高漲，很多學(xué)生一邊探索嘗試，一邊與身邊同學(xué)討論，努力嘗試，檢驗自己編輯的樣式的實(shí)現(xiàn)效果。

3） 舉一反三，鼓勵學(xué)生獨(dú)立完成，增強(qiáng)熟練操作和自主完成能力

除了課堂上帶領(lǐng)學(xué)生共同完成的案例，還可以設(shè)定一些相應(yīng)主題的案例，鼓勵學(xué)生獨(dú)立完成。學(xué)生在親自搜集素材，親自設(shè)計實(shí)現(xiàn)的過程中，會出現(xiàn)很多五花八門的問題。在學(xué)生實(shí)現(xiàn)的過程中，面對問題，不斷尋求解決辦法，真正掌握各個屬性的具體應(yīng)用。這樣的學(xué)習(xí)方式，會使學(xué)生開拓眼界，提升學(xué)生的思維，挖掘?qū)W生的潛能。

3 結(jié)論

在DIV+CSS網(wǎng)頁制作課程授課中運(yùn)用實(shí)際案例教學(xué)，能很好地調(diào)動學(xué)生學(xué)習(xí)的主動性和積極性，活躍課堂氣氛，教學(xué)效果也有相應(yīng)提升。但對老師卻提出了更高的要求。要想讓案例教學(xué)發(fā)揮更好的作用，老師有必要注意以下幾點(diǎn)：

1） 課前做好充分準(zhǔn)備，如何引導(dǎo)啟發(fā)學(xué)生，可以將案例做成一些半成品，讓學(xué)生在此基礎(chǔ)上完成，將案例結(jié)合到課程設(shè)計中，充分發(fā)揮作用。

2） 認(rèn)真甄選課堂案例。案例規(guī)模、難度都要適中，要簡潔、有趣、實(shí)用。作品難度過大或者操作性差，會起到反作用。

3） 要將知識點(diǎn)有機(jī)的與案例結(jié)合，讓學(xué)生真正在玩中學(xué)，在學(xué)中玩。知識點(diǎn)過于分散，反而會讓知識體系不夠系統(tǒng)。

4） 案例制作完成之后要有恰當(dāng)?shù)目偨Y(jié)。在總結(jié)中，要揭示出案例中包含的理論知識，讓學(xué)生不只是完成了一個案例的制作，還知道用了哪些知識制作的這個作品，如何用這些知識完成其他案例的設(shè)計制作。

案例教學(xué)法是在新教學(xué)理念改革的前提下，確立以學(xué)生為主體，以培養(yǎng)學(xué)生動手能力、創(chuàng)新思維為基本方向的一個有效手段。案例教學(xué)法能促進(jìn)教學(xué)相長，在學(xué)生的整體積極性得到提高的同時，突出教師教學(xué)實(shí)踐的亮點(diǎn)，使教師在教學(xué)中獲得充分的滿足感，從而使程序教學(xué)的效能得到穩(wěn)步提升。