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

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

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

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

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

1 案例教學(xué)法

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

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

2 表單

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

3 設(shè)計(jì)過程

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

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

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

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

3.3 總結(jié)和點(diǎn)評(píng)

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

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

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

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

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

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

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

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

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

3.3.2 代碼

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

4 結(jié)語

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

參考文獻(xiàn)

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

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

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