基于案例教學法的CSS+DIV網頁表單圓角的制作

摘 要：CSS+DIV是目前網頁設計中所使用的核心技術，如何引導學生更好的掌握這門技術，本文提出案例教學法，學生通過設計網頁表單圓角這個案例，進而掌握CSS+DIV的各項知識點，避免以往先學習代碼，而不知其用的痛苦，讓學生體會在樂中學習。

關鍵詞：案例教學法 CSS+DIV 樣式選擇器

中圖分類號：G712 文獻標識碼：A 文章編號：1673-9795（2013）04（b）-0168-01

隨著現代網頁設計技術的發展，CSS+ DIV成為網頁設計中的核心技術，如何制作精美的網站，本文旨在引導學生分析網頁表單圓角案例，運用CSS+DIV知識點完成設計。

1 案例教學法

案例教學法由美國哈佛商學院提出，是一種以案例為基礎的教學法，通過學生間的相互討論或研究，提高學生的學習興趣，從而培養學生主動學習的能力。本文用CSS+DIV制作表單圓角案例，形成學生思考和分析問題的能力，從而提高學生制作網頁的技能。

案例教學法以注重學生的基本能力為基礎，避免單純理論知識的學習，在實踐過程中，可以鼓勵學生進行單獨的思考和創造，提高學生學習的積極性。

2 表單

表單（Form）作為網頁與用戶接觸最直接、最頻繁的頁面元素，其在網站用戶體驗中占有最重要的位置。而表單也常常用于用戶注冊、登錄、投票等功能，用于吸引新用戶，留住新用戶的重要工具。設計一個表單很簡單，但設計一個用戶體驗高，漂亮的表單卻并不易。如果表單設計用戶體驗不高，無疑將會對網站用戶粘性大大降低。

3 設計過程

3.1 展示案例，啟發思考

把此案例效果圖展示給學生，吸引學生的注意力，激發學生探究學習案例的熱情，讓學生帶著例子去探討課本上的理論知識，為學生學習理論知識打下堅實的基礎。

3.2 探究討論案例，解決問題

根據表單圓角的案例，讓學生展開分析和討論在案例中所用到的理論知識，分析表單的布局結構、分析實現的代碼，學生試著寫出CSS代碼，并預覽調整，測試優化頁面。

3.3 總結和點評

教師通過學生完成的案例進行總結和點評，分析不同學生在案例中存在的優、缺點，有針對性的進行深入的分析，對出現的問題從不同角度和方法，與學生共同找出最佳解決方案。最后對此案例所涉及的理論知識和代碼進行全面的總結：

3.3.1 網頁設計的核心概念

（1）CSS+DIV布局：利用CSS樣式控制DIV標簽的位置來實現網頁的布局。

（2）盒模型：盒模型是CSS的基礎，它認為頁面上的每個元素都被看作一個矩形，這個矩形由內容、填充（padding）、邊框（border）和邊距（margin）構成。

（3）位置控制（position）屬性：位置控制屬性可以確定元素在網頁中的位置，分為靜態定位（static）、相對定位（relative）和絕對定位（absolute）。

（4）浮動（float）屬性：浮動屬性是CSS布局中很重要的屬性，用于控制元素左右移動，分為不浮動（none）、左浮動（left）和右浮動（right）。

（5）選擇器：CSS的主要作用就是將一系列的樣式規則應用于文檔中，使得文檔中應用了這個規則的內容實現某種樣式。這一系列的樣式規則就叫做選擇器。文檔用了不同的選擇器，就呈現不同的樣子。選擇器主要分為標簽選擇器、類選擇器和ID選擇器。

（6）顯示與可見性：顯示（display）一般用在改變屬性（如導航），增加交互（如標簽），顯示分為塊元素（block）、行內元素（inline）和無（none）?？梢娦苑譃榭梢姡╲isible）和隱藏（hidden）。

（7）常用CSS屬性：常用的CSS屬性包括字體（font）屬性、背景（background）屬性、邊框（border）屬性、邊距（margin）屬性、填充（padding）屬性和列表（list）屬性。

3.3.2 代碼

網頁表單設計的主代碼及解釋如下：

4 結語

CSS+DIV方法實現網頁設計已成為當前網頁設計的一種趨勢，本文旨在通過案例教學法使學生更好的掌握CSS+DIV的基礎知識，激發學生學習的興趣，調動學習的主動性，制作出更漂亮的網頁。

參考文獻

[1] 謝學峰.基于DIV+CSS的網頁設計技術[J].計算機光盤軟件與應用，2011（11）：82，84.

[2] 曾順.精通CSS+DIV網頁樣式與布局[M].北京：人民郵電出版社，2007.

[3] 李燁.別具光芒DIV+CSS網頁布局與美化[M].北京：人民郵電出版社，2008.