每個人都曾試圖在平淡的學習、工作和生活中寫一篇文章。寫作是培養人的觀察、聯想、想象、思維和記憶的重要手段。相信許多人會覺得范文很難寫？下面我給大家整理了一些優秀范文，希望能夠幫助到大家，我們一起來看一看吧。

制作交互網頁教學設計篇一

一、教材分析

本課是frontpage中一節基礎內容課，也是frontpage以后知識學習的鋪墊。本節課以制作一個簡單網頁為教學任務，學習目的明確，步驟清楚，希望完成任務而初步掌握簡單制作步驟的指導思想。同時對學生網頁的創作能力、網頁布局和色彩搭配能力進行激發與培養。并為其以后進一步學習網頁制作而打下良好的基礎。本節課的重點是網頁常用編輯器以及網頁設計布局，難點是網頁的設計及布局。教師重點在導，學生重點在實踐與創新。為了合理利用上課時間，將用已有部分拓展知識和演示范例利用網絡下傳至學生機，以利于學生上課的實踐與創新。

二、學情分析

我校的大部分學生在小學就接受過系統的信息技術課程學習，具備了一定的計算機操作能力，加上初

一、初二也學完了word execl powerpoint的知識，應該說學生都具備了一定的基礎。但也有部分學生基礎沒有打好，但基本的操作應該沒有多大問題。因此，在教學過程中關于frontpage的打開與保存，這里我讓學生自己去學習，教師只給予必要的提示。而關于html 和講授網頁布局的過程時，有必要要教師先演示一下，這也是本節課的重難點。

三、教學目標分析：

1、知識目標：

通過本節的教學，學生將了解常用的網頁制作軟件，掌握frontpage的操作界面，并能親自嘗試做出簡單的網頁作品。

2、過程與方法

學生將通過教師的引導，學會通過自主的研究探索，主動獲取知識，并運用知識解決問題，逐步地培養自己的創新精神和實踐能力。這對于學生以后的進一步學習很有幫助。具體過程：課題引入-----教師提示------學生上機自主學習------問題反饋-----教師演示-----學生完成作品-----優秀作品點評-----教師小結-----鞏固練習-----課后探究、實踐。

3、情感、態度與價值觀 ① 活動教學激發學生學習frontpage的興趣。

② 培養他們自主學習、互相協作的良好學習習慣以及自主創新精神。

4、重點、難點

重點：了解常用的網頁制作軟件，掌握frontpage的操作界面。

難點：網頁的合理布局和色彩搭配。

四、教法闡述

為了實現以上教學目標，結合教材特點，本課采用的主要教學方法有“任務驅動法”、“創設情境法”等。通過學生已經受過的美術教育和信息技術教育（課程整合），創設一個inter網頁在線的情境（創設情境法），設置一個個任務，讓學生運用已學知識，自己動手，有機完成課堂設計的各種操作（任務驅動法）（包括：了解常用軟件的概況，利用word對frontpage的操作界面熟練掌握，完成自己的第一個網頁設計。）以任務驅動的方式查漏補缺，使教學內容合理流動，水到渠成。教學中，啟發、誘導貫穿始終，充分調動學生的學習積極性，注意調節課堂教學氣氛，使學生變被動學習為主動愉快的學習，使課堂能在生動、有趣、高效中進行。

五、學法指導

本課教給學生的學法是“接受任務——思考討論——合作操練”。建構主義學習理論強調以學生為中心，要求學生由知識的灌輸對象轉變為信息加工的主體。故此本課教學過程中，巧妙設計，讓學生帶著一個個任務通過課堂討論、相互合作、實際操作等方式，自我探索，自主學習，使學生在完成任務的過程中不知不覺實現知識的傳遞、遷移和融合。

六、教學設計

1、收集資料，激發興趣。

在這一環節中，教師利用課前準備好的前期省市獲獎網頁作品，并將之融合到課件中。教師結合初中學生特點和鄉土教育，故利用屏幕廣播播放《我的家鄉》和《思品齋》，讓學生共同欣賞，從而引導學生的創作欲望，激發其興趣。

設計意圖：通過網頁實例的導入，將課堂氣氛調節得比較活躍，讓學生更容易進入學習狀態，為以下的學習做好鋪墊。

2、初識網頁制作軟件。在激發了學生學習興趣后，教師趁勢提出：你們也想制作這樣的作品來表達自己的想法嗎？順勢引出“三劍客”的概念，引導學生了解常見的html編輯器。

設計意圖：通過學生感興趣的問題設問，吸引學生的注意力，激發學生的學習興趣。

3、層層攻關（任務驅動 逐步提高 分層教學）

欣賞過網頁，教師就提出與學生共同制作簡單的網頁的想法。在授課中我安排了多次的動手制作活動，制作難度由淺入深，旨在通過學生自己動手動腦，形成自主探究進而創作的能力。

（1）第一關：基本任務：邊學邊做，牛刀小試

由于是初次制作，所以不易過難過復雜，所以選擇了讓學生自主進入frontpage的界面，因為有office前面知識做鋪墊，學生進入操作界面并可以在較短的時間內熟悉基本的操作界面，又有助于形成學生內心的成就感，提高學生繼續學習的積極性。后巡回輔導并觀察哪些學生用的方法最快、最簡便。

學生：自主學習、互相協作，也可以參考教師已下傳上操作方法或正確樣例。設計意圖：這是第一關任務，對于已有計算機操作基礎的學生來說相對較簡單。所以我這里給出提示與操作方法后讓學生自己去過這第一關。讓學生學會操作，并嘗試不同的操作方法來解決問題。（2）第二關：進階任務：由學到創，拓展提升

在學習完成第一個環節后，教師趁勢提出html的概念，實例中字體、大小、顏色變化，引導學生觀察普通、html、預覽的不同，以及相關的操作方法。在此基礎上，教師進一步設置了拓展問題，讓學生設計自己的網頁，并通過簡單網頁的制作體會html的具體含義。最后教師選擇相關學生進行總結，教師注意點評。

學生：根據剛才學習的知識和教師提供的素材。先完成自己的作品并與同學進行交流和溝通。學生通過不斷的實踐，簡單修改html的方法，并進行演示。

設計意圖：這是第二關任務，其中html也是本節課的重難點，所以教師先用一種常用方法演示html的內容，而修改讓學生自主學習完成。同時讓學生相互進行交流，有助于提高他們的學習積極性與成就感，又可以培養他們之間互相幫助學習的良好習慣。方法多樣讓學生學會用不同的操作方法來解決實際問題，但得讓他們自己去實踐，這有助于培養他們自主學習的良好習慣。（3）第三關：挑戰任務：展翅高飛，自由創作

在學習制作完第二個環節后，引導學生進入“網頁達人”的環節，本環節主要講解網頁的布局等知識，由教師演示常見的網頁布局格式，并簡單的給學生進行點評和原理分析。在此基礎上，引導學生結合自己的上網經歷仔細對比異同，同時歸納適合個人網頁的布局和顏色搭配方式。

設計意圖：在第二關的基礎上，對出現的問題，進行分析、演示。讓學生在掌握操作技術的基礎上對網頁布局和顏色搭配有進一步的認識，在此基礎上形成對學生審美觀的培養。完成第三關操作任務即完成自己的作品。讓學生能設計出有創意的作品，培養他們的創新精神。考慮到學生之間的差異，在這里只對背景和圖片的接觸和了解，讓計算機基礎好的一些學生能探索出新的知識操作。

4、評價作品 教師總結 評價作品

（1）學生互評：通過教師設置的共享文件夾了解其他學生作品，學生互相發表意見。

（2）學生自己推薦：認為自己作品好的學生可以舉手向老師推薦。（3）教師總結評價：教師對學生們評價出的優秀作品以及自己推薦的作品作評價并結合作品完成的時間前后評選出前5位優秀作品并進行表揚。

設計意圖：培養學生評價他人作品的能力。互相欣賞作品可以讓學生來檢測自己的學習成果，知道彼此之間的差距。讓學生有成就感，從而激發學生的學習積極性，進一步活躍了課堂氣氛。

教師總結

教師結合學生作品和上課的具體情況總結本節課的主要內容，注意強調知識目標和情感態度價值觀的總結。

5、知識競答大比拼

教師演示準備好的一個知識競答游戲，學生觀看大屏幕，搶答題目。設計意圖：用游戲形式的鞏固練習即讓學生對本節課的知識學習得到反饋，進一步鞏固所學知識，又可以活躍課堂氣氛。

6、課后探究實踐

教師給出提示，引導學生自主學習，充分挖掘他們的學習潛力

設計意圖：讓學生在課后有思考問題的空間，進一步激發他們學習frontpage的興趣。培養他們自主學習計算機其他操作知識。

制作交互網頁教學設計篇二

《網頁的制作》教學設計

山東省昌樂二中 滕學梅

【學情分析】

1.在學習網頁制作之前，學生進行了網站的規劃與設計，還沒有就網頁制作真正著手練習，對frontpage的使用比較陌生，但是已經有word等軟件的操作基礎，很多基本的操作可以遷移過來。并且，通過高一的學習與養成，學習小組的整體意識已經建立，組內合作、組間競爭的氛圍已經形成，所以可以采用先進行自主練習，然后合作探究，通過各組推薦的作品展示進行評價，在展示的同時也提高了學生的技術水平。

2.學生操作基礎不同，接受能力不同，可以充分發揮各小組“技術顧問”的作用，幫助指導組內其他成員，共同完成學習任務。【學習目標】

1.熟練掌握網頁制作和美化的基本操作，提高操作和審美能力； 2.大膽動手，積極實踐，總結用網頁表達主題的技巧和方法； 3.積極、熱情地投入學習，體驗網頁制作的快樂。【重點難點】

1.重點：利用表格對網頁進行布局；網頁中的圖文設置及超鏈接的使用。2.難點：網頁間超鏈接的建立。【教學過程】

課前準備：提前做好小組座次安排，由學科班長組織大家按組入座。

一、展示導入，明確學習目標（3分鐘）

1.展示精彩網頁（如北京大學、清華大學網站首頁），引導學生簡單分析網頁風格。2.明確本節課學習目標與主要任務。

二、指導與點撥（3分鐘）

1.分析北京大學網站首頁，觀察其網頁布局（如圖），引導學生嘗試使用表格對網頁進行版面設計。2.對網頁制作所用的基本操作進行點撥：（1）文字、圖片的添加與調整（2）網頁背景的設置（3）超鏈接的建立

三、基本功練習（10分鐘）

1.任務：快速“克隆”示例網頁。（素材發到桌面“基本功練習”文件夾中）

與word中的操作類似，注意遷移 2.要求：（1）先獨立練習（參考導學案的“操作導航”）；嘗試一遍后可與組內同學小聲交流，解決疑難問題；

（2）每組的“技術顧問”完成任務后可下座指導；（3）完成后相互檢查超鏈接的效果。

四、制作主題網頁（15分鐘）

1.任務：從桌面“主題網頁”文件夾給出的四個主題中選擇一個，快速完成主題網頁的制作；

2.具體要求參看導學案“實踐探究”部分；可兩人合作，有能力者最好獨立完成；

五、作品推選、上傳：每組推選一個作品參加組間評選，并將作品文件夾傳至ftp。

六、精彩展示（10分鐘）各組派一代表向全班展示自己的作品，并簡介操作要點。展示前，引導全體學生積極思考以下問題：

1.你從展示作品中學到了什么？有哪些可借鑒之處？

2.你是否清楚各作品的效果是如何實現的？若有疑問，及時提出。3.能不能提出更好的修改建議？

注：1.學生展示過程中，教師要引導大家規范操作，對于重點加以強調。2.提醒學科班長記錄參與展示和積極質疑、解答的同學，匯入評價。

七、完善提升：（5分鐘）

1.借鑒所展示作品的優秀之處，進一步完善自己的作品； 2.根據展示同學的演示，將新學到的操作嘗試一遍。

八、總結：

1.網頁制作要領：（1）靈活運用基本操作；（2）版面設計清晰、條理，或者有獨特之處；（3）配色和諧，給人美感；（4）超鏈接順暢、自由，方便使用。2.由學科班長公布本節課評價統計情況。

【教學反思】

1.在學生自主練習過程中，適時指導很重要，但教師一人肯定不能照顧全體學生，所以充分發揮學習小組的“技術顧問”的作用很關鍵。

2.在“制作主題網頁”環節，給學生準備四個不同的主題素材是很有必要的，我們在進行教學設計時要考慮到學生個性、興趣不同，并加以利用，促進教學。

3.對進行展示的同學要進行簡單培訓（或者對各組長進行培訓，由組長傳達到展示者），防止展示時只宣講他們網頁中的內容，而忽略技術，浪費寶貴的時間。4.課堂即時評價很重要。學生初次接觸一個軟件，要經常收獲一點成就感才有進一步探索的欲望，這就需要我們教師注意發現、及時鼓勵。學科班長記錄好大家的課堂參與情況，下課前公布，這項工作若堅持下來，對我們的教學會有很大促進。

制作交互網頁教學設計篇三

網頁制作的教學設計

一、教學目標、知道站點、主頁的概念，能在指定位置建立只有一個網頁的站點；、認識 frontpage 的界面；、掌握在主頁中插入文字、圖片、水平線；、掌握頁面文件與圖片的保存。

二、教學重點、能在指定位置建立只有一個網頁的站點（難點）、能在頁面中插入文字、圖片、水平線、掌握頁面文件與圖片的保存（難點）

三、學情分析

學生已經學習了 word、powerpoint 與上網瀏覽信息，對計算機的基本操作（word 中文檔的編輯，網頁的瀏覽等）比較熟練。這使得學生主動探索、自主學習成為可能。每位學生必須完成基本任務，有能力的學生還可以完成提高篇的學習，以充分發揮學生的積極性與自主性。

四、教學方法

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

五、教學過程設計

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

同學們喜不喜歡上網？經常上新浪、西祠胡同等，有沒有同學知道新浪、西祠胡同稱做什么？（網站）

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

我們還可以瀏覽其它的頁面，點擊超鏈接瀏覽，當鼠標變成手指的形狀時有超鏈接。

問題 1 ：網站是不是就是網頁？用自己的語言描述一下網站的概念（網站包含多個網頁，通過超鏈接把不同的頁面鏈接起來）

問題 2 ：網頁是不是就是主頁？(第一個頁面稱為主頁 , 網站設計者可以確定哪一個是主頁 , 主頁的文件名一般為： , 主頁也是網頁)

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

今天我們學習用 frontpage 建立站點，制作一個主頁。

先來研究一下沒有發布的網站 , 打開教師做的網站

問：同學們看到了什么？（文件夾）

總結：

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

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

請學生瀏覽教師課件，了解學習任務、新建站點

fp 的啟動

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

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

總結：

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

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

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

html 窗口：編寫 html（超文本標記語言，它是描述網頁內容和外觀的標準。）

打開導學軟件，根據步驟，示范建立只有一個網頁的站點，強調新站點的位置、路徑的正確輸入，站點的名稱。

（教會學生利用導學課件，根據導學軟件完成任務）

任務 1 ：學生根據導學課件，在 d: 建立自己站點

教師巡視指導

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

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

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

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

總結：鮮明的主題，如：我的世界、我的寵物等，有分割頁面的水平線，與主題相關的圖片，對網站的簡單介紹

根據導學軟件，學生完成任務 2 ：設計主頁、保存主頁與圖片

教師巡視指導、總結反饋

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

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

主頁的保存中存在問題：

單擊 “ 文件 ”----“ 保存 ” 或工具欄的 “ 保存 ” 按扭，彈出一個對話框，保存嵌入式文件，改變文件夾，圖片必須保存在本站點 images 文件夾中 , 便于站點的管理。、請學生繼續完成自己的主頁，有能力的同學完成提高篇

教師巡視指導、教師與學生共同評價總結

展示學生作品，教師與學生共同評價

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

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

注：課件中包含每一個操作過程的操作步驟及拓展的知識、基本任務與提高任務的效果圖。

點評：

教學課題 “ 網頁制作 ” 作為初中階段的最后一部分內容，難度較大，教學的深度較難掌握。這就要教師在備教材的基礎上，同時還要備學生，做到對學生的情況有較為深刻地了解，以便很好地完成教學任務，達到預期的教學效果。根據教材和《中小學信息技術課程指導綱要（試行）》中的精神，本課應以 “ 任務驅動 ” 的方式完成，一方面教會學生了解和熟悉具體軟件的基本功能，另一方面又能主動地掌握并深入學習思考。尋著這個思路授課教師在課前作了大量的課前準備制作出了相應的教學課件 “ 網頁制作 ”。

一、調動學生的學習熱情，變被動學習為主動學習

整個教學過 程張云 老師采取了 “ 引導加任務驅動 ” 的模式進行。首先教師進行導入，導入概念，強調概念；再引導學生學習課件的使用，引導他們讀懂課件中的第一個任務：建立一個只有一頁的網站，（此處若能引導學生，由學生來完成，減少老師的操作，效果會更好），然后讓學生模仿第一步的操作進行下面內容的學習，完成導學材料中給出的一個個任務。

二、突出重點，及時點評

張云 老師在引導學生進行學習、操作后，就主動地去觀察和發現學生中出現的問題，甚至于課前對可能出現的問題，也進行有預見性地準備；發現問題及時點評。（點評分為個別點評和全班點評，點評不等于教師將操作過程演示一遍。張云 老師在點評建成的網站時，重點若再突出些，介紹再清楚些，效果會更好。比如：站點中內容說明不夠清楚等。）

三、發揮學生的協作學習精神

張云 老師在教學過程中，對有困難的學生進行個別輔導，同時還需發揮學生的協作學習的精神，充分調動學生學習的積極性，讓學有余力的學生充當 “ 小老師 ”，從而體會到學習的樂趣。（整個教學過程中，這點做地不夠，沒有充分地讓師生互動起來）

四、重點突出、目標明確

最后，張 老師在整個教學過程中，應再突出教學重點，明確本節課的任務。（課前的導入，最好給出教學目標，課后的小結應讓學生總結他本堂課學習到哪些知識，所以感覺這節課重點不突出，內容分散。）

五、教學效果較好

由 于張云 老師在課前對本課作了大量的準備工作，課件制作效果較好，所以學生完成情況很好，教學任務完成情況較好。

制作交互網頁教學設計篇四

網頁設計和制作策劃書

總體可以分為以下幾點：

1、建設企業網站所遵循的一般原則

（1）完整性原則。企業網站是企業在互聯網上的經營場所，應該為用戶提供完整的信息和服務：網站的基本要素合理、完整；網站的內容全面、有效；網站的服務和功能適用、方便；網站建設與網站運營維護銜接并提供支持。

（2）系統性原則。同時提供設計方案。設計實施單位應充分了解企業文化和企業機構及管理信息等基本情況，對營銷目標、行業競爭狀況、產品特征、用戶需求行為以及網站推廣運營等基本問題等要素融入到網站建設方案中。

（3）簡單性原則。在保證網站基本要素完整的前提下，盡可能減少不相關的內容、圖片和多媒體文件等，使得用戶以盡可能少的點擊次數和盡可能短的時間獲得需要的信息和服務。

（4）友好性原則。網站的友好性包括三個方面：對用戶友好——滿足用戶需求、獲得用戶信任；對網絡環境友好——適合搜索引擎檢索、便于積累網絡營銷資源；對經營者友好——網站便于管理維護、提高工作效率。

（5）適應性原則。企業網站的功能、內容、服務和表現形式等需要適應不斷變化的網絡營銷環境，網站應具有連續性和可擴展性。

2、網站優化

網站優化包括三個方面：對用戶獲取信息優化、搜索引擎優化、網站維護優化。

（1）網站欄目結構合理，欄目設置不要過于復雜；

（2）網站導航清晰且全站統一，通過任何一個網頁可以逐級返回上一級欄目直到首頁；

（3）網頁布局設計合理，網站設計符合用戶瀏覽習慣；

（4）重要文字信息盡可能出現在網頁靠前位置；

（5）字體清晰，css風格協調一致；

（6）最多3次點擊可到達產品詳細內容頁面；

（7）通過網站任何一個網頁不超過3次點擊可達到站內其他任何一個網頁；

（8）遵照搜索引擎為管理員提供的網站優化指南，通過網站結構和內容等基本 要素的優化為搜索引擎檢索信息提供方便，不采用任何被搜索引擎視為垃圾信息的方法和欺騙搜索引擎的方式（如堆積關鍵詞、用戶不可見文本、頁面跳轉、復制網頁等等）；

（9）網站首頁、欄目首頁及產品內容頁面均有一定的文字信息量；

（10）每個網頁有獨立的、可概括說明該網頁核心內容的網頁標題（而不是全站或者一個欄目共用一個網頁標題）；

（11）每個網頁有獨立的、與該網頁內容相關的meta標簽設計（包括description和keywords）；

（12）每個網頁有獨立的url；

（13）產品內容頁面url盡可能簡短且體現出產品屬性；

（14）產品/企業新聞詳細內容頁面是獨立網頁不是彈出窗口；

（15）對于產品品種多的企業網站，要有合理的產品分頁方式；

一網站名稱

綠色的靈動

二主題思想：

讓原創精神穿越人群，在綠色的靈動中尋找創意。

三個人分工

1、主頁制作：（謝龍、李金洪、王海灝---環藝四班）

2、設計模板制作：謝龍 廣告模板制作：李金洪攝影模板制作：王海灝

3、網頁設計策劃書：（謝龍、李金洪、王海灝---環藝四班）

四設計網頁前的市場分析

1、原創作品的意思就是內容不是抄錄別人的，而完全是自己創作的，包括原創文學、原創音樂等等。

原創作品是對既定參照物的懷疑與否定，是在刷新固有的經典界面之后呈現出破土而出的生命氣息，是在展現某種被忽視的體驗，并預設著新的可能性；原創是可經過、可停留、可發展的新的存在，是新的經典的原型，具有集體共識的社會價值。

原創作品不是對既定狀態的完善與提升，也不是對已有的存在的另類注解；注解可以發展原創，但不產生原創。原創作品也不是形式的突圍表演，不是先鋒理念的夸張與變異；反叛的行為具有對既定秩序與價值的否定，但不指向原創以及原創作品。

通過我的創作活動產生的具有文學、藝術或科學性質而以一定物質形式表現出來的一切智力成果（即作品），并且內容不是抄錄別人的，而完全是自己創作的稱為原創作品。

2、人群分析：原創一直作為一種青年人群的喜愛，中年人和青年人也是原創產品的主要創作群體。綠色能給青少年兒童一種生機和活力，能為失落者帶來新的希望，讓原創精神穿越人群。

五、創新點——綠色與原創

分析：綠色為植物的色彩，綠色的明視度不高，刺激性不大，對生理作用和心理作用都極為溫和，因此人對綠色的嗜好范圍很大，給人以寧靜、休息、使之精神不易疲勞。剛好也是大自然草木的色，所以綠色意味著自然、生命、生長，同時綠色也象征著和平。在交通信號中又象征著前進與安全。

原創作品是對在刷新固有的經典界面之后呈現出破土而出的生命氣息，是在展現某種被忽視的體驗，并預設著新的可能性；原創是可經過、可停留、可發展的新的存在，是新的經典的原型，具有集體共識的社會價值。

六、建設網頁的目的及功能定位

1、建立網頁是為了和大眾共享自己的原創作品并開展業務，是個人市場開拓的延伸。

2、根據網頁功能，確定網頁能夠達到宣傳和讓客戶更好的了解原創的目的。

七、網頁內容及實現方式

根據網頁的目的確定網頁的結構導航。

1、一般網頁應該包括：首頁、設計、攝影、廣告、聯系方式、在線留言等內容。內容包括：作品展示、視頻、背景音樂及留言板塊。

2、根據網頁的目的及內容確定網頁整合功能。

八、網頁設計

布局簡單合理，格調清新自然，有藝術感；整體美觀協調；網頁設計上有比較良好的用戶界面，提倡原創，整體色彩和諧，符合美感，制作精美，個性鮮明；創造性：主題表達形式新穎，構思獨特；作品具有想象力和個性表現力；內容、結構設計獨到；作品創意獨特

1、網頁美術設計要求，網頁美術設計一般要與企業整體形象一致，要符合企業ci規范。要注意網頁色彩、圖片的應用及版面策劃，保持網頁的整體一致性。

2、在新技術的采用上要考慮主要目標訪問群體的分布地域、年齡階層、網絡速度、閱讀習慣等。

（1）、在網站根目錄中開設images common temp 三個子目錄，根據需要再開設media 子目錄，images目錄中放不同欄目的頁面都要用到的公共圖片，例如公司的標志、banner 條、菜單、按鈕等等；common 子目錄中放css、js,、php、include 等公共文件；temp 子目錄放客戶提供的各種文字圖片等等原始資料；media 子目錄中放flash, avi, quick time 等多媒體文件。

（2）、在根目錄中原則上應該按照首頁的欄目結構，給每一個欄目開設一個目錄，根據需要在每一個欄目的目錄中開設一個images 和media 的子目錄用以放置此欄目專有的圖片和多媒體文件，如果這個欄目的內容特別多，又分出很多下級欄目，可以相應的再開設其他目錄。 目錄中的文件往往會比較多，建議以時間為名稱開設目錄，將客戶陸續提供的資料歸類整理。

（3）、除非有特殊情況，目錄、文件的名稱全部用小寫英文字母、數字、下劃線的組合，其中不得包含漢字、空格和特殊字符；目錄的命名請盡量以英文為指導，不到萬不得已不要以拼音作為目錄名稱，經驗證明，用拼音命名的目錄往往連一天后的自己都看不懂。

九、網頁測試

網頁發布前要進行細致周密的測試，以保證正常瀏覽和使用，主要測試內容：

1、服務器穩定性、安全性。

2、程序及數據庫測試，網頁兼容性測試，如瀏覽器、顯示器。

3、文字、圖片、連接是否有錯誤。

少采用大型圖片，用戶關心的信息在首頁體現，不應多次點擊；

?首頁下載速度要快；

?首頁有效信息量豐富；

?首頁有標題；

?提供一種以上外語鏈接頁面。

?主頁布局比整潔，重要信息得以重點體現；

?打開網頁不宜彈出多個窗口，影響正常瀏覽；

?不要刻意追求“創意”效果，以至于很難理解網站要表達的意思。

頁面信息：

?重要信息完整，如聯系方式和產品介紹等；

?頁面信息足夠，減少多次翻頁；

?去除與企業形象、產品、促銷等方面無關的信息；

?產品詳細介紹內容過少；

?內容頁面沒有標題，或者全部使用公司名為標題；

?客戶能夠方便的及時維護補充，保持其時效性；

?不允許有無任何內容的欄目。

網頁字體和美工：

?注重美術效果，但不必大量采用圖片，影響網頁下載速度；

?注重美觀，但有些連基本信息內容都不可用圖片格式，影響基本信息獲取； ?文字適中、顏色明晰、不影響正常視覺；

?頁面不應過于花哨。

必須克服的問題：

（1）網站規劃和欄目設置要合理：主要表現在欄目設置不應有重疊、交叉、或者欄目名稱意義不明確，容易造成混淆，使得用戶難以發現需要的信息，避免欄目過于繁多和雜亂、網站導航系統混亂；

（2）重要信息完整：企業介紹、聯系方式、產品分類和詳細介紹、產品促銷等是企業網站最基本的信息，企業網站上這些重要信息完整；

（3）網頁信息量足夠：包括兩種情況：一種頁面上的內容，或者將本來一個網頁可以發布的內容不可分為多個網頁，而且各網頁之間必須有相互鏈接，不需要再次點擊主頁；另一方面是盡管內容總量不少，但有用的信息少，籠統介紹的內容多；

（4）欄目層次過深。重要的信息應該出現在最容易被用戶發現的位置，應盡可能縮短信息傳遞的渠道，以使企業信息更加有效地傳遞給用戶；

（5）網站有利于促銷：通過網站向訪問者展示產品、對銷售提供支持，有多種具體表現方式，如主要頁面的產品圖片、介紹、通過頁面廣告較好體現出企業形象或者新產品信息、列出銷售機構聯系方式、銷售網店信息等，或者具有積累內部網絡營銷資源和拓展外部網絡營銷資源的作用。

適應現在越多的網絡設備和應用的需要 ；

是web發展的趨勢。可以使web平滑的過渡到xml。

3.使用xhtml 嚴密。

與其它基于xml的標記語言、應用程序及協議進行良好的交互工

制作交互網頁教學設計篇五

網頁的制作

一、教學題目：網頁的制作

二、教學目標：

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

2、認識frontpage的界面；

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

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

三、教學重點：

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

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

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

四、教學難點：

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

五、教學過程：

教師活動：

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

同學們喜不喜歡上網？經常上新浪、西祠胡同等，有沒有同學知道新浪、西祠胡同稱做什么？（網站）

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

我們還可以瀏覽其它的頁面，點擊超鏈接瀏覽，當鼠標變成手指的形狀時有超鏈接。

問題1：網站是不是就是網頁？用自己的語言描述一下網站的概念（網站包含多個網頁，通過超鏈接把不同的頁面鏈接起來）

問題2：網頁是不是就是主頁？(第一個頁面稱為主頁,網站設計者可以確定哪一個是主頁,主頁的文件名一般為：,主頁也是網頁)設計網站一般必須經過兩個步驟，首先是在計算機里做好，然后發布在internet上，讓所有的人訪問瀏覽。

今天我們學習用frontpage建立站點，制作一個主頁。先來研究一下沒有發布的網站,打開教師做的網站 問：同學們看到了什么？（文件夾）總結：

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

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

2、新建站點

frontpage的啟動 問：與word比較，有什么不同？（增加了視圖區，編輯區有三個窗口）總結：

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

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

預覽窗口：瀏覽器中出現的效果，與powerpoint中的“放映幻燈片”類似。html窗口：編寫html（超文本標記語言，它是描述網頁內容和外觀的標準。）打開導學軟件，根據步驟，示范建立只有一個網頁的站點，強調新站點的位置、路徑的正確輸入，站點的名稱。

任務1：學生根據導學課件，在d:建立自己站點 請一位學生示范如何建立站點,教師總結。問：在文件夾列表中看到了什么？

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

3、編輯主頁與保存主頁

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

總結：鮮明的主題，如：我的世界、我的寵物等，有分割頁面的水平線，與主題相關的圖片，對網站的簡單介紹

根據導學軟件，學生完成任務2：設計主頁、保存主頁與圖片

4、總結反饋

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

總結：必須切換到“普通”窗口下編輯 主頁的保存中存在問題：

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

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

六、小結：

展示學生作品，教師與學生共同評價 請學生總結今天的學習內容：建立包含一個頁面的站點，主頁的設計與保存。