DIV+CSS網頁布局案例在教學中的應用

張景峰 王麗芬 胡曉紅

摘要：該文將案例教學與興趣教學相結合，提出了將實際應用案例融入課程的思路。同時也針對課程中采用案例的選取和設計進行了論述。

關鍵詞：案例設計；案例制作；整體思路；課堂教學

中圖分類號：TP393 文獻標識碼：A 文章編號：1009-3044（2018）03-0128-02

1 概述

網頁設計的實現一般通過兩種方式：傳統的表格布局方式和CSS布局方式。

1） 表格布局

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

2） div+css布局

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

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

（1） 內聯樣式表（直接寫在HTML標簽中）

如：

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

如：

…

最后，在頁面main標簽之后，創(chuàng)建一個id為bottom的div，用以編輯頁腳的內容。同時在css中設置頁腳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；}

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

案例來自一個實際應用的作品，雖然結構簡單，但非常典型的概括了網頁布局的流程，以及div與css樣式的相互作用。課堂上老師先給學生分析分解頁面結構，然后一步一步引導學生完成案例，同時，學生掌握了相關知識，了解了頁面制作流程。

2） 典型案例解決教學難點

掌握了div+css制作網頁的基本流程后，通過接下來的典型案例來學習掌握不太規(guī)范的頁面結構如何合理布局和實現。

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

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

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

#top2 li {

width：100px；

height：25px；

float：left；

list-style-type：none；

text-align：center；

margin-top：10px；}

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

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

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

3） 舉一反三，鼓勵學生獨立完成，增強熟練操作和自主完成能力

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

3 結論

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

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

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

3） 要將知識點有機的與案例結合，讓學生真正在玩中學，在學中玩。知識點過于分散，反而會讓知識體系不夠系統。

4） 案例制作完成之后要有恰當的總結。在總結中，要揭示出案例中包含的理論知識，讓學生不只是完成了一個案例的制作，還知道用了哪些知識制作的這個作品，如何用這些知識完成其他案例的設計制作。

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