第一篇：網頁設計流程教學案例

我最成功的一節課——網頁設計流程

“網頁設計流程”是中職計算機應用專業課《網頁制作與設計》的重點教學內容。根據中等職業學校計算機應用專業課程的主要任務及對教材內容的分析研究，在“網頁制作流程”這課的教學中，我把掌握網頁制作流程的一些技術和方法為知識目標，通過對知識的學習和對作品的創作培養學生創造能力，協作能力，動手能力，評價能力，同時在教學中培養學生的審美、欣賞、創新，主動探索與發展的能力為情感目標。那么，如何來實現教學目標呢?我進行了教學研究的嘗試，引導學生開展探究性學習：網頁制作作品。

課堂教學實例

課題：網頁制作流程

一、教學目標

知識與技能

1、熟悉網頁的各種元素，以及各元素在網頁制作過程中的應用。

2、掌握網頁制作過程中的一些技術和方法。

過程與方法

1、以建構主義理論為指導，以研究性學習為載體，培養學生自學，合作學習和動手能力。

2、學生通過親身經歷，提高分析和解決實際問題的能力。情感與價值觀

1、培養學生與他人協作的學習品質，加強集體主義的觀念。

2、培養學生的科學探索精神與嚴謹的治學態度。

任務描述

根據學生不同的學習能力，知識、興趣愛好，依據自愿組成原則，將全班分為6人的小組，各小組規劃出網頁設計方案，分工合作制作網頁，重點注重網頁制作流程，并由學生自己擔任評委，評選出優秀網頁。

二、教學過程

1、課前準備

（1）以小組為單位，規劃網頁結構方案，描述網頁制作流程。

（2）根據這個方案進行工作分配，依據所給網頁制作流程準備材料、備寫相關材料。

2、制作過程（1）欄目設計

（2）資料搜集

（3）網頁藍圖制作

（4）色系選擇（5）字體選擇

（6）頁面詳細設計

3、網頁評審

各小組派一名成員上臺演示，根據老師制定的評分標準，請各小組長進行評分，評出優秀的班級網頁。

三、教學活動主要環節

1、引入教學資源環境，創設學習情境。這個環節的主要教學目的是激發學生的學習興趣和對新知識的渴望，讓他們有對新知識和技能的學習動機，愿望和需求，在教學中，根據學生的思想特點與學習心理。我用自己制作的網頁課件以及收集的優秀網頁截圖來創設情景，向學生展示了優秀網頁的網頁作品，并指出：大家看到的每一幅畫面都是一個網頁，這些網頁有的美觀大方；有的豐富多彩。有的個性鮮明，那么我們自己能不能制作出具有自己風格的網頁。這樣激發了學生學習網頁制作的興趣及求知欲望，產生了完成作品展網頁的動機．此時，我對學生提出研究的目標--如何利用網頁三劍客這個軟件來完成你們的班級網頁制作，最后各研究小組要分別展示你們的研究成果。

2、小組學習與探索研究。在課堂上，我出示范例，引導學生分析網頁的結構，指出：網頁中可以有文字、圖片，甚至有動畫和聲音，為了和瀏覽者更好地交流，有時還添加各種表格、組件。當然，各式各樣的超鏈接更是常常出現在網頁里。學生有了初步的直觀印象后，就不會感到盲目，而且會引起學生極大的興趣。隨后，我將一個網頁的制作流程分別說明，那一個環節需要哪些軟件，用到哪些技術；就作品網頁制作過程簡單介紹任務分解，重點在于小組任務的分配，將網頁制作流程中各環節根據任務的輕重和學生能力的強弱進行分配，既要每個小組成員都有事可干，能完成各自任務，更要每個成員發揮自己的特長，使網頁整體有特色，對技術的掌握更上一層樓，這個過程中引導學生輕松愉快、主動去解決問題，完成任務，進而達到自身對知識的意義建構是關鍵。

3、小組展示網頁評審。展示交流是研究課題的最后一個環節，各小組通過多媒體教室向全班同學展示了各小組的研究成果，并對各個小組進行自評，即；說出哪些是本小組最好的，哪些是本小組還沒能解決的．最后請各小組長評選出優秀網頁。我認為在此環節，教師應把握評價的尺度，評價的側重點應該放在學生在自主的學習過程中學會了哪些學習方法，同學間團結合作意識是否體現，井充分肯定學生的成果，鼓勵他們繼續發揚這種探索研究精神。

四、教學反思

在“網頁制作流程”這堂課的教學過程中，我充分利用了軟件本身的特點為學生創設了和諧、美好，愉快的信息化學習的平臺，發揮了學生的主體作用．教學中，充分調動了學生的學習積極性，培養了學生的動手能力，觀察分析能力和主動探索性學習的能力。通過教學方法的設計教會了學生分析問題的方法，教學情景的設計使學生身臨其境，啟發了學生探索新知，深研新知的強烈欲望，培養了學生良好的思維習慣、學習習慣，使學生學習新知識的同時形成了良好的學習心理，實現了教學目標。實踐表明，開展探究性學習對網頁制作的教學具有非常好的效果，活動中充分發揮了學生的主體性，學生學習積極性被充分調動起來了。同時，提高了課堂效率，使整節課的教學目標得以順利完成，小組的分工合作體現了平等原則，每個學生都積極參與到教學活動中．此外，小組成果評比演示也充分體現了學生在課堂活動中的主體地位。

第二篇：網頁設計教學案例

《網頁設計》之站點的建立教學案例

新疆阜康市廈門實驗小學成偉

一、教學目標

1、知道站點、主頁的概念，能在指定位置建立只有一個網頁的站點；

2、認識FRONTPAGE的界面；

3、掌握在主頁中插入文字、圖片、水平線；

4、掌握頁面文件與圖片的保存。

二、教學重點

1、能在指定位置建立只有一個網頁的站點（難點）

2、能在頁面中插入文字、圖片、水平線

3、掌握頁面文件與圖片的保存（難點）

三、教學方法

在教學中，一方面采用比較教學的方法，促進學生知識的遷移；另一方面，提供學生一個導學課件，讓學生根據這個網絡環境下的課件自己探索學習，以滿足不同層次學生的需求。

四、教學過程 設計

教師活動：

1、引入課題：（激發興趣，活躍氣氛）

同學們喜不喜歡上網？經常上新浪、百度等，有沒有同學知道新浪、百度稱做什么？

（網站）

瀏覽新浪網站，瀏覽的第一個頁面稱為什么？

（主頁）

問題1：網站是不是就是網頁？用自己的語言描述一下網站的概念

（網站包含多個網頁，通過超鏈接把不同的頁面鏈接起來）

問題2：網頁是不是就是主頁？

(第一個頁面稱為主頁,網站設計者可以確定哪一個是主頁,主頁的文件名一般為：index.htm,主頁也是網頁)

設計網站一般必須經過兩個步驟，首先是在計算機里做好，然后發布在internet上，讓所有的人訪問瀏覽。

今天我們學習用Frontpage建立站點，制作一個主頁。先來研究一下沒有發布的網站,打開教師做的網站

問：同學們看到了什么？

（文件夾）

總結：

可以這樣理解網站：在資源管理器里，網站表現為一個文件夾，里面存放的是所有與網站相關的文件。

打開主頁，瀏覽頁面，這是老師做的一個導學課件，將幫助大家完成學習任務。

請學生瀏覽教師課件，了解學習任務

2、新建站點

FRONTPAGE的啟動

問：與word比較，有什么不同？

（增加了視圖區，編輯區有三個窗口）

總結：

視圖區：多種視圖模式是為了方便網站的管理。制作網頁時，必須在網頁視圖中編輯頁面

普通窗口：鼠標在閃動，可編輯、修改頁面，所見即所得的方式

預覽窗口：瀏覽器中出現的效果，與PowerPoint中的“放映幻燈片”類似。

打開導學軟件，根據步驟，示范建立只有一個網頁的站點，強調新站點的位置、路徑的正確輸入，站點的名稱。任務1：學生根據導學課件，在d:建立自己站點(站點名字改為自己的名字，便于記憶)

請一位學生示范如何建立站點,教師總結

問：在文件夾列表中看到了什么？

（分析多出的文件夾列表欄，多了一個文件夾，里面有兩個子文件夾和主頁，圖片存放在images文件夾中）

3、編輯主頁與保存主頁

看效果圖，請學生分析主頁中的元素

總結：鮮明的主題，如：我的世界、開心樂園等，有分割頁面的水平線，與主題相關的圖片，對網站的簡單介紹根據導學軟件，學生完成任務2：設計主頁、保存主頁與圖片

4、總結反饋

請學生示范，講解如何插入圖片（來自剪貼畫與來自文件）、插入水平線，如何保存

總結：必須切換到“編輯”窗口下編輯

主頁的保存中存在問題：

單擊“文件”----“保存”或工具欄的“保存”按扭，彈出一個對話框，保存嵌入式文件，改變文件夾，圖片必須保存在本站點images文件夾中,便于站點的管理。

5、請學生繼續完成自己的主頁，有能力的同學完成提高篇

6、教師與學生共同評價總結

老師向學生展示自己的作品，與學生一起討論評價。

請學生總結今天的學習內容：建立包含一個頁面的站點，主頁的設計與保存。

學生活動：學生回答問題、學生觀察網站的表現形式、瀏覽課件，并了解本節課的學習任務、學生觀察FRONTPAGE界面與word的不同，學生觀察教師演示不同編輯窗口的區別。學生上機操作，在指定位置建立自己站點、同桌互相幫助，并參考教師做的課件，利用網絡環境下的課件自己探索學習，滿足不同層次學生的需求、學生總結。

第三篇：網頁制作教學案例

《網頁制作》教學案例分析

【課時安排】1課時

【教學內容分析】 本節課的主題：讓學生認識并利用Dreamweaver軟件制作簡單的網頁，學會建立站點和設計有一定主題思想的主頁，本課是用該軟件創建環保網站，也就是用所掌握的信息技術知識解決生活中的實際問題，使學生能夠學以致用。發揮信息技術學科的優勢，以素質教育的新理念，增強學生的動手能力，提高學生的綜合素質。

1、以教材為基石，作為構建知識的橋梁，依據《課程標準》，創造性、合理的對教材進行二次開發與重組。如：導入新課時，利用學生對美好事物的向往，激發學生的求知欲和學習興趣；采用任務驅動教學，增強學生自學能力；對學生的評價方式，采用學生作品展示，是學生學習的一個延續，對學生學習起到一種推進的作用。

2、對教材內容進行引申與組合，讓學生利用網絡強大的功能搜集資料，分組搜集不同內容，包括圖片與文章，采用任務驅動，協作互助的授課模式，發揮教師的主導作用，增強學生的主體地位。通過創建環保網站增強學生的審美意識與想象力，提高學生的綜合能力。

【分析教學對象】

1、學生的年齡特點和認知特點：

學生對周圍的一切充滿了好奇，他們急于表現自己，對于教師布置的任務能夠認真對待。對于Dreamweaver的知識掌握的較好，但綜合運用能力尚有欠缺；能夠上網搜集資料，但速度與技巧還有待提高。本節課給學生提出一個總的任務：創建環保網站，此項任務的設置合理、藝術，對于學生各項能力的提高有很大幫助。

學生創作欲強，因此本節課中，提倡、鼓勵獨立完成作品，培養學生熱愛自然熱愛環境的情感，以增強學生的保護地球、保護環境的意識。

2、在學習本節課之前學生應具備的基本知識和技能：

能掌握基本的文字修飾與排版功能并能查找指定地點的文件，會瀏覽網頁與下載資料。

3、學習者對即將學習的內容應該具備的水平：

本課是學生初次認識Dreamweaver并能應用它制作簡單的網頁，培養學生綜合運用知識解決問題的能力，以及各方面素質的一次綜合評價。

【教學目標的設計】 1.知識目標：

（1）了解網頁的概念；

（2）初識FrontPage2000并學會簡單地應用；（3）了解建立網站的一般方法；

（4）學習制作包含文字、圖片和聲音的網頁。2.技能目標：

學生通過探究學習過程中，掌握網站的建立方法與創建簡單網頁的操作。3.情感目標：

培養學生在學習過程，自主探究能力和分類匯總知識的能力。培養學生熱愛環境、保護環境的情感并能號召人們行動起來保護地球、保護我們生存的環境。

【教學重點與難點】

（1）重點：建立網站與在網頁中插入文字、圖片、設置背景和背景音樂。（2）難點：將網頁存在網站內并把涉及到的文件分類匯總在相應的站點文件夾中。

【教學策略設計】

1、根據教材內容和學生的實際情況，本課采用“任務驅動”、“問題──探究”等教學方法，創設一個板報展覽的情境（創設情境），以逐個任務和問題驅動學生多動手、多思考、多實踐，從而了解和掌握Dreamweaver的基本知識和技能。并以英語的鼓勵語言和信息技術專業術語增強學生的學習興趣。

2、本課傳授給學生的學法是“問題驅動下的自主學習──分組協作學習──探究發現學習”。讓學生在創建環保網站的過程中，既鼓勵個性張揚，又提倡某些問題的分組協作與自主探究，指導學生對圖片及文字的來源進行探究發現（從網絡中搜集）。建構主義學習理論強調以學生為中心，要求學生由知識的灌輸對象轉變為信息加工的主體。故此本課教學過程中，以問題驅動，激發求知欲望，讓學生帶著逐個任務通過探究發現、相互合作、實際操作等方式，自主學習，使學生在完成任務的過程中不知不覺實現知識的傳遞、遷移和融合。

3、是在網絡教室中完成的，利用多媒體局域網絡，實現教師演示、個別指導、網上交流、作品提交及作品展示評比。在出現共性問題與個別錯誤時教師可以利用網絡教室軟件演示和個別指導，在創作作品的同時，生生可以進行網上交流。體現教師的指導、組織作用，學生主體、探究協作地位。

【教學評價設計】

1.采用小組間競爭機制，比賽哪個小組解決問題或是完成任務的速度快與質量高，增強學生協作互助的意識。

2.最后進行作品展示，評出“速度”獎，“質量”獎，“原創風味”獎等幾個獎項，進一步激發學生的學習熱情。對自己的作品有一個反思，增加相互學習、相互交流的機會，讓學生學會自己梳理知識，增強自學能力。

【教學過程設計】

一、情景導入

先前我們學習了使用搜索引擎查找我們所需要的資料，這些資料是以網頁形式存在于網絡中，大家想不想擁有自己創建的網頁？（激發學生的求知欲）（學生回答：想）

從這節課開始我們就學習制作網頁，到底什么是網頁呢？

二、問題驅動 任務一：大家打開課本閱讀和瀏覽一些好的網站了解網頁概念，網頁與網站的關系？看哪個小組能最先解答該問題？

學生閱讀課本（3分鐘）分小組討論自己的理解。

小結：

1.網頁使用文字、圖形、聲音影視等多媒體的形式表達信息，使表達的信息更加鮮活；

2.問網站時看到的第一個頁面（網頁）就稱作網站的首頁或主頁； 3.網頁如同大家一樣都必須有一個“家”，這個家就是網站； 4.存在網站中的網頁之間采用了鏈接式的方法將網頁串接起來。

任務二：在我們了解網頁與網站后，會有疑問：使用什么軟件制作網頁呢？帶著這個問題閱讀課本，同時跟隨課本啟動這個軟件。看哪個小組成員最先完成？ 學生閱讀并實踐?? 小結：

大家會有疑問為什么選擇它，還有別的軟件嗎？有，如FrontPage網頁制作軟件等，課本中使用了Dream weaver這個軟件簡單易學，并且窗口與我們使用操作系統windows都是基本一致的。

第四篇：《網頁格式刷》教學案例（范文模版）

《網頁格式刷》

——CSS樣式表教學案例

【教材分析】

“CSS樣式表”是高中信息技術選修《網絡技術應用》的第五章“動態網頁制作”中的內容。教材中將這塊內容分為“什么是CSS”、“CSS實現”、“在HTML中加入CSS”三部分。本節內容的重點應該是“運用CSS進行樣式設置的方法和格式”及“在HTML中加入CSS的三種方法”。因此我認為將“CSS實現”與“在HTML中加入CSS”兩部分結合在一起講比較好。此外，我認為“體會CSS樣式表的優點”也應該是一個教學重點。學生以往用FrontPage做網頁都習慣用工具按鈕、菜單命令來進行網頁外觀設置，使用代碼對學生來說是件令他們頭疼的事，所以我認為有必要通過讓學生體會CSS樣式表的優點讓學生明白為何我們要學習這部分內容。【教學目標分析】

1、知識與技能

(1)什么是CSS樣式表。(2)CSS樣式表的優點。

(3)嵌入式、內聯式、外聯式三種樣式表的使用方法。

(4)通過對三種樣式表的親身實踐，感受這三種樣式表的優缺點。

2、過程與方法

(1)通過WORD排版中的“格式刷”引入網頁中的“CSS樣式表”，通過類比，使學生初步了解CSS樣式表的作用，激發學習興趣。

(2)對于CSS樣式表的概念和優點主要由教師講解，并讓學生在實踐操作中感受樣式表的優點。(3)對于嵌入式、內聯式、外聯式三種樣式表的使用，由教師講授方法和代碼的書寫格式要求，由學生根據實例要求自我實踐操作。

(4)在學生的實踐操作過程中，讓完成較快的學生充當小老師，幫助其他同學發現和改成錯誤。

3、情感態度與價值觀

(1)通過CSS樣式表的學習，提高學生美化網頁的技能。(2)培養學生的探索、實踐能力。

(3)通過實踐過程中的“小老師”角色，讓學生感受同學之間的互助友愛，團結協作。【學情分析】

通過前階段的學習，學生已經認識了動態網頁，并對HTML的標簽及屬性也有了了解。考慮到我所在學校的學生學習能力、領悟能力比較強。因此雖然CSS樣式表對于學生來說是全新的內容，但如果教師采用“講授概念→操作演示→學生操作”的模式上課，將無法激發學生自主探索學習的興趣和熱情，所以我采用了教師講授概念和方法，然后由學生自主探索實踐操作，使學生的學習更具挑戰性。

【教學重點、難點分析】

1、教學重點

(1)CSS樣式表的概念。

(2)體會CSS樣式表的優點。

(3)嵌入式、內聯式、外聯式三種樣式表的使用方法。(4)CSS代碼的書寫格式，輸入的準確性。

2、教學難點

(1)三種樣式表在使用上區別。(2)CSS代碼的書寫格式。【教學過程】 [新課導入：] 教師活動：教師展示兩篇WORD文檔A和文檔B，文檔A已經進行了文字字號、字體、顏色、行距、首行縮進等排版，文檔B未進行任何排版。

教師提問：同學們，在WORD編輯中，有什么方法能讓文檔B以最快捷的速度排版成文檔A的字號、字體、顏色、行距呢？

學生活動：部分學生思考后回答“格式刷”。

教師活動：教師迅速的利用格式刷將文檔B設置成文檔A的排版外觀。

教師活動：教師展示兩張網頁，網頁A已經進行了文字字號、字體、顏色、文字鏈接動態效果、彩色滾動條等外觀設置，網頁B未進行任何設置。

教師提問：現在老師想把網頁B也設置成網頁A的外觀，有什么方法能夠快捷而方便地幫我們做到呢？

學生活動：部分學生回答說“格式刷”。

教師提問：如果我們在做網頁的過程中，也有一把“格式刷”，是不是就能很方便的將網頁B設置成網頁A的外觀呢？網頁制作中，到底有沒有這樣的“格式刷”呢？

教師操作：打開網頁A的源代碼，將CSS樣式代碼復制到網頁B，立刻使網頁B具有了與網頁A相同的外觀。

教師提問：老師剛才復制粘貼的那段代碼是不是具有與“格式刷”相同的作用？今天我們就來學習“網頁中的格式刷”——CSS樣式表。

[新課講授：] 一：什么是CSS樣式表？

教師活動：講授CSS樣式表的概念。

用一個指定的名字來標識和保存的一組相關字符和段落格式的選項集合。

讓學生了解CSS樣式表的優點。(結合實例)

1、避免在標識字符和設置段落格式等操作時重復定義需要的樣式（如字體、字號、顏色），從而使應用該樣式的網頁具有相同的風格。

2、只需要修改一個CSS代碼就可以改變頁數不定的網頁外觀和格式，提高網頁編輯效率。

3、可以“隨心所欲”地控制頁面布局和外觀。

4、在所有瀏覽器和平臺之間具有較好的兼容性。

二：如何在HTML中加入樣式？

1、嵌入式樣式表

教師活動：教師講授嵌入式樣式表的使用方法。

方法：只需在每個要應用樣式的HTML的標記后寫上CSS屬性就可以了。

CSS屬性書寫格式：style=“color:red;font-family:黑體;font-size:24pt”

注意：color的屬性值還可以用顏色代碼，如：#ff0000。教師活動：布置課堂練習題1。

打開example1文件夾下的qzwx.htm，將網頁中文章標題文字“秋天的童話·如夢”用嵌入式樣式表設置成：#ff9900，30pt，黑體。（效果如下圖）

學生活動：依據教師講的方法，進行練習。

教師活動：巡回輔導，提醒學生輸入字母、標點一定要準確。

教師提問：如果用嵌入式樣式表來為網頁中的文字設置外觀，方不方便？ 學生回答：不方便。

教師活動：總結嵌入式樣式表的不足。

嵌入式樣式表主要用于對具體的標簽作具體的調整，其作用的范圍只限于本標簽。這種樣式表并不能充分體現出CSS樣式表的優越性。引入內聯式樣式表。

2、內聯式樣式表

（1）作用于網頁中的部分文字

教師活動：教師講授第一種內聯式樣式表的使用方法。

方法：(1)在網頁的 定義樣式，如：

(2)在要設置此樣式的文字頭插入,文字尾插入,如：

1、提示一些不相干的話。

注意：a1為定義的樣式名，不同的網頁，樣式名可以不同。教師活動：布置課堂練習題2。

打開example2文件夾下的bingdu.htm，用內聯式樣式將網頁中的9個小標題字體設置為：綠色、14pt、黑體。（效果如下圖）

學生活動：依據教師講的方法，進行練習。

教師活動：巡回輔導，提醒學生定位插入點要準確，樣式名前的點不能丟，輸入字母、標點也一定要準確。教師活動：發現很多學生的錯誤都來自輸入錯誤，自己檢查半天也查不出來，于是提議讓同桌同學幫忙找錯。

學生活動：學生很認真的幫同學找錯。

教師提問：如果要把“bingdu.htm”網頁中的小標題的顏色由綠色改為藍色，想一想該如何做？ 學生回答：只要在定義樣式的代碼中將“green”改為“blue”就行了。教師提問：但是如果我們沒有用內聯式樣式表，那又該如何做？ 學生回答：那就得九個標題一個一個改顏色，改九次。

教師活動：引導學生體會樣式表的使用提高了我們修改網頁的效率！（2）作用于整個網頁

教師活動：教師講授第一種內聯式樣式表的使用方法。

方法：在網頁的 插入代碼：

教師活動：布置課堂練習題3。

打開example3文件夾下的teacher.htm，用內聯式樣式表制作超鏈接文字的動態效果：當鼠標劃過時，設為超連接的文字，變成橘黃色，并出現下劃線。（效果如下圖）

此題代碼由教師提供代碼圖片，學生自己輸入。

學生活動：依據教師講的方法，進行練習。

教師活動：巡回輔導，提醒學生定位插入點要準確，輸入字母、標點也一定要準確。提示學生利用復制粘貼相同代碼后修改，提高自己的輸入速度。繼續鼓勵同學互相幫忙找錯誤。

教師提問：如果網站內有幾十網頁都要用到此浮動鏈接效果，該如何做呢？

學生回答：每張網頁都插入同樣的CSS代碼。

教師提問：有沒有什么方法可以簡化這項操作呢？既然幾十張網頁都要用同樣的代碼，能不能把這段代碼制作成一個獨立的文件，然后由每張網頁調用呢？

3、外聯式樣式表 教師活動：教師講授外聯式樣式表的使用方法。

方法：(1)將樣式定義成一個“.css”的文件：

可在記事本中輸入樣式代碼，然后保存為擴展名為“.css”的文件。(2)在網頁的head區插入引用代碼：

注意：標簽中的屬性沒有前后次序要求。教師活動：布置課堂練習題4。

打開example4文件夾下的teacher.htm，用外聯式樣式表制作超鏈接文字的動態效果： 當鼠標劃過時，設為超連接的文字，變成橘黃色，并出現下劃線。

學生活動：依據教師講的方法，進行練習。

教師活動：巡回輔導，提醒學生定位插入點要準確，輸入字母、標點也一定要準確。樣式文件和網頁文件要保存于同一個文件夾內。

[課堂小結：] 教師活動：通過兩節課的學習，同學們知道了什么是CSS樣式表，掌握了三種CSS樣式表的使用。同學們通過實踐操作，也體會到了使用CSS樣式表可以避免很多重復操作，從而提高網頁編輯和修改的效率。希望同學們以后在自己制作網站時，能靈活運用CSS樣式表來美化自己的網頁。

【自我評析】

本節內容如果但看教學內容，感覺1課時就可以完成，但是考慮到高二會考對CSS代碼的輸入有一定的要求，所以我決定所有練習題的代碼都由學生自己輸入，由于學生的輸入速度及準確性問題，比預計多用了一課時。雖然多用了一課時，但是由于知識點講得比較清晰，給學生練習的時間比較充裕，自我感覺學生的學習效果比較好。

雖然課題引入用去的時間比較多，但是通過WORD文檔中的“格式刷”類比引入，給了學生很直觀的感受，很好的激發了學生們的學習興趣。在講授三種CSS樣式表的使用方法時，采用通過實踐前一種，感受總結不足，引出第二種，使學生對于三種使用方法的區別有了比較深刻的認識。

在學生實踐過程中，雖然教師已經一再提醒代碼中的字母、冒號、分號、引號不能輸錯，但學生還是會出現輸入錯誤，而且自我檢查不容易找到錯誤。于是我就讓同桌同學互相幫忙找錯，既讓學生感受了同學互助，又收到了很好的學習效果。

第五篇：國際網頁Web設計流程

國際網頁Web設計流程

1.初始會商,主要是收集該站點的關鍵信息,包括站點的目標讀者.要發布的內容.開發Web服務器平臺;

2.概念開發,設計師根據收集的信息,開始構思,通常,設計師要把這些構思用草圖的形式呈現給顧客,這個草圖要有整個網站的結構,不同的布局.設計及導航;

3.內容綜合,當決定了設計師的設計,設計師開始制作一些初始圖樣,這些圖樣用PHOTOSHOP那樣的程序來創建,然后,設計師將圖樣打印出來配合文字;

4.HTML布局和導航,一旦客戶同意了這些內容綜合,設計師開始編制Web頁面,導航器也被編制到頁面中,使客戶第一次真正體驗一下;

5.圖形制作,如果客戶同意了站點的外觀和感受,設計師將大量制作所需的圖形,并進行優化;

6.內容流程,客戶的書面材料利用各種網頁技術（CSS、JAVA、FLASH）,有機的和相關的圖形整合在一起;

7.測試,在站點被提交給客戶之前,設計師要徹底測試每個Web頁面和聯結,利用清單,進行修補;

8.交付,一旦簽收,客戶要經常進行他們的測試,找出排版和內容方面的錯誤,做完了這些次要的修正后,正式啟用站點.這套完整的計劃可以用1-12個月來完成,平均完成時間為4個月.當站點啟用后,要進行跟蹤調查,以確定人們如何使用站點。經過6-12個月的運行之后，重新收集數據,開始重新設計,然后這個Web設計過程再開始一遍。

附：WEB設計經驗-來自microsoft.com設計主管

作為設計主管，Peter Stern 已經領導 microsoft.com 重新設計了主頁并且開發了五個不同的交互工具，這些工具被用于下載中心、產品目錄、配置文件中心、搜索 和注冊等聯機功能。他為幾個內部工具設計了用戶界面，并且正致力于創建將于今年晚些時候發布的下一代主頁。

從頭銜上，您可能認為我主要關心的是 microsoft.com Web 站點幾千個網頁的版面設計。的確，這些確實是我所關注的。視覺上的吸引力是重要的，但是這僅僅是工作的一小部分。而最終的目的是確保整個站點運轉正常。

我的意思是，人們通常在訪問 microsoft.com 時，并未將它當作藝術作品來贊賞。而是為了獲得有關產品的信息，或者有一些技術問題需要咨詢，或是閱讀有關開發商的期刊。所以網站的設計應該盡量清楚和有條理，以便他們能夠容易地找到所需信息。

設計站點

在進行 Web 設計時--在設計過程中--形式應該服從功能。這種方法應用于我們站點的整個設計過程中。當然，我們有最新的 Web 工具，并且能夠將各種可視的小配件上載到網頁上。

但是我們認為這樣做將不利于為訪問者提供有效的服務。

事實上，我經常發現一些站點未將重點放在功能上。常見的錯誤包括：

用戶界面元素不一致。例如，同一個控件在不同的頁面上功能不同，或者同一個功能對應幾個用戶界面控件。

導航欄位置不一致。決定站點的哪些頁和功能需要在站點的任何頁上都可被訪問到。這就是應該保持一致性的“全局導航欄”。

不太注意或根本不注意基本的圖形設計原則，例如排版式樣、色彩和版面的設計。

相關元素和功能的隨意分組。注意將元素放置在網頁上的位置和目的。這可幫助訪問者從其它相鄰的選擇和位置來推斷某個鏈接的功能。

使網頁過于龐大以至使訪問者需要通過典型的調制解調器速度的 Internet 連接進行長時間的下載。這并不是說不應該使用圖形，但是您需要對它們進行精挑細選，然后用適當的壓縮和顏色索引優化它們。

現在的 Web 站點仍然存在很多問題，這并不奇怪。畢竟，Web 設計“藝術”相對來說還是個新生事物。在四、五年以前，Web 頁甚至是普通的。那時，人們好像認為他們的 Web 站點將會吸引訪問者只是因為它們存在--并且，可能在某些情況下這種方法確實有效。但是這些站點一般很難看，并且更重要的是，它們真的難以使用。接下來便進入“看看我們能做些什么”階段，在網頁中加入了大量的動畫、聲音文件以及其它附加件，導致訪問者需要長時間地進行下載，但是并未獲得多少實實在在的內容。

如今的 Web 設計師們已經吸取了前人的經驗和教訓。好的站點傾向于簡化和快速，同時在功能上有所提高。這是 Microsoft 的目標，而且我們最先承認自己所犯的錯誤（參閱“Microsoft 的 Web 簡史”看一看以前的主頁設計）。

設計錯誤并不總是顯而易見的。有時在設計上對一個小元素的移動或更改將有很少或根本沒有影響。但是，在其它情況下，它可能確實會對頁面功能有所影響。而且如果說我們從過去幾年學到了一些東西，那就是小的改動會使 Web 頁的運行方式有很大的不同。

明確的流程

若要避免類似問題，我們為新服務（例如“搜索”）的創建或關鍵的 Web 頁（如主頁）設計了一個明確的流程。每個項目都是在一定的基礎上開始的，即我們有一個受益于我們站點上的頁面、部分或用戶界面元素的產品或服務。在早期的產品計劃階段（第 1 階段），我被要求設計一些初級模型：大致描述頁面、部分或功能的草圖。然后產品項目組檢查產品計劃建議，看看此項服務是否可以為 microsoft.com 的訪問者真正帶來一些實惠。

如果答案是“可以”，那么此項目會獲得批準，我們開始寫項目說明書（第 2 階段）。我們在第 1 階段的草圖和概念基礎上創建并提出一個更為完整的計劃。這時，我們一般還會開始

可用性測試（一般會有書面的模型）以了解潛在用戶將對計劃中的設計做出何種反應。在最后開發階段（第 3 階段），我們創建運行計劃服務的 Web 原型，并且進行全面的可用性測試以及內部復查。然后完成站點的代碼，修改程序錯誤，最后站點通過實際運轉的 Web 站點向客戶發布。

正如您所見到的，可用性在整個流程中扮演著重要的角色（參閱“創建有效的 Web 界面需要認真計劃”）。我們可以為用戶運行某項任務計時，這樣我們就可以在產品以后的版本中對比相同的測試。我們可以使用這種方法進行度量，以確定一個功能的重新設計是否為客戶帶來任何真正的價值。

還有，我們將仔細地觀察以了解可用性對象是否可以計算出如何正確使用新功能--我們稱為“可發現性”的方法。有時這為我們提供了一些挑戰。例如：在我們的站點上，在 搜索引擎 中鍵入一個詞組或字會產生一列結果。然后我們請用戶選擇在這些結果中進行搜索，以便進行更細的搜索并且導向某一頁或資源。但是即使“在結果范圍內搜索”被明顯地標記在深色標簽上，很少有人熟悉它。一些用戶認為他們正開始新的搜索，并且可能毫無結果。我們正在解決這個問題以確保客戶可以利用 microsoft.com 上所有豐富的功能來提高他們對此站點的認識。

選項“在結果范圍內搜索”看上去很直觀，但不是非常易發現的。此問題一直是困擾我們的設計的問題之一。

最后階段

大體來講，站點設計是在發生沖突的需要之間求得平衡的藝術。一方面，我要將站點設計得盡量簡單易用。另一方面，我要確保站點中所有強大的工具可為經驗豐富的用戶所用。與此同時，我還要為內部客戶服務--Microsoft 產品項目組--他們對服務有特殊的需要。所以每天我都要解決一些非常困難的問題，經常處于很緊迫的情形中。我發現這種工作是鼓舞人心和有趣的。

這個職業非常需要更熟練的專業人員。我是經過一系列非常不一般的過程--在大學學習圖形藝術，然后在多媒體公司設計 CD-ROM，最后加入 Microsoft 并開發應用程序--才獲得這個職位的。非常奇怪的是，當我申請（并獲得）這份工作時，我以前從來沒有設計過 Web 頁。但是我廣泛的設計經歷已經證明是非常有用的，并且我自認為已經驗證了格言“成功的設計就是成功的設計”（不論是什么媒體）。許多設計問題對 Web 來說是獨一無二的，解決這些問題的方法對于任何媒體都是一樣的。

對于那些準 Web 設計師我的建議是，他們也應該盡可能地擴大設計背景。今天應該確保將一些 Web 工作作為互動設計培訓的一部分--大多數好的設計學校已將其加入課程中。但是在排版、色彩理論、版面設計以及生產等方面的扎實的技術將仍然特別有價值。

在未來，Web 設計師們仍將會繼續被要求給頁面增加更豐富的多媒體內容，從而為 Web 站點的可視性和可操作性增加了新一級的復雜性和技術要求。作為 CD-ROM/多媒體設計師，要求我必須具有圖形設計、視頻、音頻制作、動畫等方面的知識和創作能力。我的預言是，Web 設計師也將向這些領域發展。

對于屬于 microsoft.com 的我們--以及在 Internet 上的其它地方--那應該是一個非常有趣的未來。

了解您的觀眾。調查一下究竟哪些人在訪問您的站點，以及他們為什么要訪問。新手或不定期上網的 Web 用戶與軟件開發商相比有非常不同的興趣和站點需要。

使您的站點對訪問者來說有所幫助。

為您的觀眾提供所需的信息。使導航元素保持一致，并且確保對訪問率最高的區域進行明顯的標記，是它們易于被找到。

使用清楚的消息。

確保用戶了解此頁面的上下文，并且知道需要他們做些什么。如果在注冊過程中您要用戶輸入姓名，那么就直截了當地說。不要讓訪問者自己計算什么，他們會感到沮喪，于是轉到其它更簡單的站點（例如您的競爭對手的站點！）。

保持一致性。

雖然更改不同 Web 頁的外觀并不難，但這并不意味著您應該這么做。將主要功能--例如返回“主頁”的鏈接或者執行一個搜索--放在每頁的相同位置。在 microsoft.com 上，黑色全局導航工具欄的位置在四十多萬頁上都是一樣的。

使站點可用。

牢記設計和測試站點的可用性。確保用戶可容易地執行任務以獲得所需信息。估算任務時間和任務完成率，然后努力進行改善。如果新的設計沒有在這些方面獲得改善，那么就不要實施它。重新從草圖（或最初的計劃）開始并嘗試其它方法。

保持簡潔。

說起來容易做起來難。嘗試征求反饋意見。有時新人可以很容易找到解決方案。

嘗試新的東西。

不要害怕打破常規，嘗試一些完全不同的東西。如果您不試試，永遠不會找到真正的答案。