基于案例教學(xué)法的CSS+DIV網(wǎng)頁表單圓角的制作

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

關(guān)鍵詞：案例教學(xué)法 CSS+DIV 樣式選擇器

中圖分類號：G712 文獻(xiàn)標(biāo)識碼：A 文章編號：1673-9795（2013）04（b）-0168-01

隨著現(xiàn)代網(wǎng)頁設(shè)計技術(shù)的發(fā)展，CSS+ DIV成為網(wǎng)頁設(shè)計中的核心技術(shù)，如何制作精美的網(wǎng)站，本文旨在引導(dǎo)學(xué)生分析網(wǎng)頁表單圓角案例，運用CSS+DIV知識點完成設(shè)計。

1 案例教學(xué)法

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

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

2 表單

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

3 設(shè)計過程

3.1 展示案例，啟發(fā)思考

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

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

根據(jù)表單圓角的案例，讓學(xué)生展開分析和討論在案例中所用到的理論知識，分析表單的布局結(jié)構(gòu)、分析實現(xiàn)的代碼，學(xué)生試著寫出CSS代碼，并預(yù)覽調(diào)整，測試優(yōu)化頁面。

3.3 總結(jié)和點評

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

3.3.1 網(wǎng)頁設(shè)計的核心概念

（1）CSS+DIV布局：利用CSS樣式控制DIV標(biāo)簽的位置來實現(xiàn)網(wǎng)頁的布局。

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

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

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

（5）選擇器：CSS的主要作用就是將一系列的樣式規(guī)則應(yīng)用于文檔中，使得文檔中應(yīng)用了這個規(guī)則的內(nèi)容實現(xiàn)某種樣式。這一系列的樣式規(guī)則就叫做選擇器。文檔用了不同的選擇器，就呈現(xiàn)不同的樣子。選擇器主要分為標(biāo)簽選擇器、類選擇器和ID選擇器。

（6）顯示與可見性：顯示（display）一般用在改變屬性（如導(dǎo)航），增加交互（如標(biāo)簽），顯示分為塊元素（block）、行內(nèi)元素（inline）和無（none）。可見性分為可見（visible）和隱藏（hidden）。

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

3.3.2 代碼

網(wǎng)頁表單設(shè)計的主代碼及解釋如下：

4 結(jié)語

CSS+DIV方法實現(xiàn)網(wǎng)頁設(shè)計已成為當(dāng)前網(wǎng)頁設(shè)計的一種趨勢，本文旨在通過案例教學(xué)法使學(xué)生更好的掌握CSS+DIV的基礎(chǔ)知識，激發(fā)學(xué)生學(xué)習(xí)的興趣，調(diào)動學(xué)習(xí)的主動性，制作出更漂亮的網(wǎng)頁。

參考文獻(xiàn)

[1] 謝學(xué)峰.基于DIV+CSS的網(wǎng)頁設(shè)計技術(shù)[J].計算機光盤軟件與應(yīng)用，2011（11）：82，84.

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

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