初中網頁設計教學淺談

陳甜

摘 要：網站設計與制作是信息技術教學中重要的課程，它包括網頁版式設計、網頁美化設計、建立超鏈接等內容。教師應采取積極有效的教學手段，激發學生的學習興趣，增強課堂教學效率。

關鍵詞：網頁設計教學；信息技術

中圖分類號：G63 文獻標識碼：A 文章編號：1673-9132（2017）24-0142-02

DOI：10.16657/j.cnki.issn1673-9132.2017.24.088

網站設計與制作是信息技術教學中創新性和實踐性很強的課程，教師應采取有效的教學方法，更好地激發學生的學習興趣。

一、創建站點

（一）教學策略

通過瀏覽主題網頁界面，讓學生對網頁的制作和設計有更直觀、更具體的了解。教師在備課時應多搜集一些不同類型、不同主題、不同布局的優秀網站供學生觀看，幫助學生了解網站的類型、主題、版面布局、主要元素等。教師同時還可以搜集一些設計出現這樣或那樣問題的網頁讓學生觀看，以便學生找出這些網站在設計上出現和存在的問題，并提出一些改進的意見或建議。網頁設計開始時，教師應帶領學生按照網頁設計的具體步驟逐步規劃，進一步強化網站設計的關鍵性，引導學生正確學習這一規劃過程。

（二）激趣導入

許多學生都有上網的經歷，教師可提出一些問題，引導學生思考。如：我們上過很多網站，看過很多網頁，那么，什么是網頁？什么是網站？兩者之間有什么聯系與區別呢？學生回答后，教師進行總結：網站是在因特網上一個相對獨立的信息的集合，這些信息以網頁的形式向全世界發布。所以，網站就是同一類型網頁的集合。然后，導入新課。例如：我們常說的“新浪”就是一個網站，其中你看到的每個板塊中的每個頁面就是網頁。那么，如何制作一個網站，制作網站又用到哪些工具呢？這節課我們就開始學習。通過本單元的學習后你會感到網站制作其實并不神秘。

二、設計網站首頁

（一）教學策略

內容設計是設計網站的第一步。就如同一本書的封皮、一個戲曲人物的臉譜，必須能夠反映出整個網頁的整體特點和風格。所以，網站首頁的設計是整個網頁設計的重中之重。

（二）激趣導入

藍臉的竇爾敦盜御馬——藍色臉，表現性格剛直，桀驁不馴；紅臉的關公戰長沙——紅色臉，象征忠義、耿直、有血性；黃臉的典韋——黃色臉，代表驍勇；白臉的曹操——白色臉，表現奸詐多疑。京劇中的臉譜能準確地反映出人物的性格，網站的首頁也要能夠反映網頁的特點與風格。

三、網頁中的表格

（一）教學策略

網頁中關于表格的基本操作內容包括：插入表格單元和調整表格大小（調整列寬或者行高，插入或刪除行或列，合并或者拆分表格中的單元格，平均分布行或列）在Word中已經有比較詳細的操作方法。在教學過程中，教師教學的重點應放在讓學生在自己探究以上基本操作的基礎上掌握表格的使用方法，主要包括：如何利用表格設計去布局網站、網頁，讓網頁中的內容和素材完美地在網頁上配置。另外，網頁模板是提高網站設計效率的有效方法，教師要注意指導學生對網頁模板的利用。

注意觀察和借鑒模版網站中表格的設計風格，初始使用表格設計網頁時可將其邊框粗細的值設為1，然后不斷調整邊框的值，以觀察調整表格過程中的一些變化，從而熟練掌握表格調整的技巧。

（二）激趣導入

校園是通過道路和綠化帶劃分成辦公區、教學區、運動區、生活區；報紙是通過橫線和豎線劃分成各個板塊；而網頁中的素材是通過版面布局來劃分，如可用表格設計網頁的版面布局。比如，“情感小屋”被很多虛線組成的網格劃分成若干相對獨立的區域，在這些區域中分別放置網頁中的不同素材，這些網格就是表格，虛線便是表格的邊框。

四、網頁的美化

（一）教學策略

通過課程學習，學生對網站制作和設計規劃有了基本的認識，并制作了網站首頁，建立了網站站點，而且還能夠歸整網頁中的各元素，使網頁趨于整潔。但是，由于制作的網頁中沒有設置網頁背景、網頁Flash動畫、背景音樂、字幕類型等輔助元素，仍然會顯得單調。學生也希望能夠通過學習新的知識，進一步加強美化已經完成制作的網頁。

教師通過“任務驅動”教學法，以指導學生完成一個個具體的學習任務而開展課堂教學，以嘗試新發現、進行綜合對比、總結歸納、多媒體教室直觀演示等形式貫串整個教學過程。

（二）激趣導入

展示中央電視臺《交換空間》這一欄目中一副裝修前和裝修完成后的房間的對比圖，從而得出結論：同一個房間，經過雕琢修飾之后，就會變得美觀、漂亮。然后導入新課：房間美化后會讓人覺得賞心悅目，網頁同樣也需要美化。我們之前做的網頁可能僅僅有文字、圖片，比較單調，今天我們就來學習“網頁的美化”，自己動手操作，看看如何讓我們的網頁更加漂亮，令人耳目一新。

教師在網站設計與制作的教學中應該認識到該課程的特點，激發學生的學習興趣，調動學生的情緒，讓學生帶著所遇到的問題，有針對性地去學習。并以任務作為驅動，充分激發學生的自主學習能力和興趣，教師輔以適當的點撥指導，讓學生的個性得以發展，創新能力得到提高，創新意識逐漸加強。

參考文獻：

[1] 呂紅，王文捷等.《網頁設計》教學改革的探索與實踐[J].中國科技信息，2009.

[2] 魏善沛.網頁設計創意與編程[M].北京：清華大學出版社，2006.

[3] 張爽.淺談網頁設計中的版式設計[J].科技信息（科學教研），2008（13）.