摘 要: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.