一、教學(xué)設(shè)計部分
教學(xué)內(nèi)容分析 R本課的主要內(nèi)容與地位 本節(jié)課學(xué)習(xí)的內(nèi)容是設(shè)計網(wǎng)站的首頁。首頁如同一本書的封面、一個戲曲人物的臉譜，應(yīng)該能夠反映出整個網(wǎng)站的整體風(fēng)格和特色，讓訪問者通過網(wǎng)站首頁就能對整個網(wǎng)站有所了解。所以，網(wǎng)站首頁的設(shè)計是整個網(wǎng)站設(shè)計的重點。 R本課與前后內(nèi)容的關(guān)系 本課是在第一課的規(guī)劃設(shè)計基礎(chǔ)之上進(jìn)行的學(xué)習(xí)活動。首頁的設(shè)計一定要按照規(guī)劃進(jìn)行。本節(jié)中涉及的知識點（編輯網(wǎng)頁：文字輸入和編輯、插入圖片、插入水平線；保存、預(yù)覽和新建網(wǎng)頁）是網(wǎng)站制作過程中需要反復(fù)用到的，所以學(xué)生應(yīng)熟練掌握。 教學(xué)目標(biāo)分析 R知識目標(biāo)/技能目標(biāo) ·知識目標(biāo) ⑴認(rèn)識網(wǎng)頁的工作原理； ⑵了解網(wǎng)頁編輯的一般過程。 ·技能目標(biāo) ?、攀炀氄莆赵诰W(wǎng)頁中輸入文字、插入圖片、插入水平線的操作； ?、普莆站W(wǎng)頁的新建、預(yù)覽和保存。 R過程與方法目標(biāo) ?、艑W(wǎng)頁操作中基本概念（首頁、網(wǎng)頁、網(wǎng)頁標(biāo)題等）有清晰的認(rèn)識； ?、圃诓僮髦畜w會網(wǎng)頁中圖文混排遇到的困難，探索解決之道，為下一節(jié)課──用表格布局網(wǎng)頁的學(xué)習(xí)埋下伏筆。 R情感態(tài)度與價值觀目標(biāo) 感受身邊版面設(shè)計的素材：廣告、報刊、課本，學(xué)以致用，將其用于網(wǎng)頁設(shè)計中。 R本課的重難點 重點：插入圖片和水平線。 難點：圖片和水平線屬性的設(shè)置、嵌入式文件的保存。 R本課的課時分配建議 1課時 教學(xué)策略設(shè)計建議 R教法建議 因FrontPage與學(xué)生之前學(xué)習(xí)的Word、Excel同屬微軟的Office家庭軟件，在操作上有許多相同或相似之處，所以在教學(xué)過程中，教師應(yīng)鼓勵學(xué)生對照Word中的操作完成文字的輸入與編輯、插入與編輯圖片等操作；采用分組設(shè)置、對比效果的形式探究“水平線屬性”對話框中各參數(shù)的含義，從而加深學(xué)生對水平線的理解；在網(wǎng)頁保存環(huán)節(jié)中，嵌入式文件的保存是學(xué)生從來沒有接觸過的知識點，教師應(yīng)安排學(xué)生將不同的網(wǎng)頁素材保存在站點中的不同文件夾中，以此達(dá)到強化的目的；組織學(xué)生進(jìn)行網(wǎng)頁預(yù)覽時，提醒學(xué)生注意站點文件夾中文件的變化和HTML窗口中代碼的變化；講解新建網(wǎng)頁時，可以讓學(xué)生嘗試使用其它網(wǎng)頁格式新建網(wǎng)頁，拓展學(xué)生網(wǎng)頁設(shè)計的思路。 R學(xué)法建議 對照以前學(xué)過的Word中的操作，總結(jié)FrontPage與其在操作上的不同，大膽嘗試以不同的方式和途徑完成老師交給的任務(wù)。 教學(xué)資源與環(huán)境建議 R本課教學(xué)資源索引 教師應(yīng)為學(xué)生提供足夠多的各種格式、各種大小的圖片素材。 R教學(xué)環(huán)境準(zhǔn)備建議 教學(xué)評價建議 R自評、互評、師評要注意的問題 學(xué)生在設(shè)計網(wǎng)站首頁時是否能對照Word完成相似的操作，是否能對新網(wǎng)頁中的素材進(jìn)行靈活的設(shè)置。 教學(xué)過程參考案例 第一階段：導(dǎo)入新課，明確學(xué)習(xí)目標(biāo)
教學(xué)環(huán)節(jié) 教師活動 學(xué)生活動 設(shè)計理念
導(dǎo)入新課 播放《說唱臉譜》音樂。 師：臉譜能準(zhǔn)確反映出人物的性格，一個網(wǎng)站的“臉”是什么？ 師：我們?nèi)绾谓o我們的網(wǎng)站設(shè)計臉譜呢？這就是本節(jié)課我們要學(xué)習(xí)的內(nèi)容──設(shè)計網(wǎng)站首頁（出示課件）。 學(xué)生討論答案──網(wǎng)站首頁。 結(jié)合第一節(jié)課的規(guī)劃，討論如何設(shè)計首頁。 通過臉譜聯(lián)想到首頁，激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁設(shè)計的熱情。
第二階段：范例精講，學(xué)生自主探究，完成范例
教學(xué)環(huán)節(jié) 教師活動 學(xué)生活動 設(shè)計理念
學(xué)習(xí)與探究 任務(wù)一：輸入文字 出示網(wǎng)頁輸入文字后的效果。 任務(wù)二：插入圖片 出示插入圖片后的效果，并提示圖片存放位置。 要求學(xué)生分別使用控制柄和設(shè)置圖片屬性的方法調(diào)整圖片大小。 任務(wù)三：插入水平線 根據(jù)教材提示，使用默認(rèn)值插入水平線，然后分組修改“水平線屬性”對話框各參數(shù)。 將前面輸入的“=”組成的線替換為水平線。 任務(wù)四：保存網(wǎng)頁 出示任務(wù)，由學(xué)生探索嵌入式文件保存的技巧。 任務(wù)五：預(yù)覽網(wǎng)頁 分組嘗試兩種預(yù)覽網(wǎng)頁的方法，并作比較。 任務(wù)六：添加新網(wǎng)頁 根據(jù)教材提示為網(wǎng)站添加新網(wǎng)頁。 對比老師出示網(wǎng)頁效果進(jìn)行文字的輸入和編輯，比較與Word中操作的異同。 根據(jù)樣例插入相應(yīng)圖片。 嘗試操作并比較說明二者的區(qū)別。 分組實驗，填寫表1-2-1。 操作并體驗二者在表現(xiàn)效果上的差異。 預(yù)覽網(wǎng)頁。 完成操作，并探索新建網(wǎng)頁的其它方法。比較它們的優(yōu)缺點。 前兩個任務(wù)與Word操作大同小異，讓學(xué)生通過對比強化記憶。 通過學(xué)生自己實踐理解水平線對話框的設(shè)為方法。 網(wǎng)頁制作中的學(xué)用操作，應(yīng)熟練掌握。
第三階段：知識、情感拓展
教學(xué) 環(huán)節(jié) 教師活動 學(xué)生活動 設(shè)計理念
知識與情感 師：請大家回想一下，你從小到現(xiàn)在，你的媽媽給你洗了多少次腳？你為她洗過多少次呢？ 師：如果還沒有做，就從今天開始吧！ 請同學(xué)們課下完成體驗任務(wù)，根據(jù)自己的感受設(shè)計網(wǎng)頁Feeling1．htm。 生：記不清。 生：還沒有。 放學(xué)后完成這一體驗活動，并將感受以網(wǎng)頁的形式表達(dá)出來。 讓學(xué)生通過這一活動體驗感受父母對自己的愛。能夠以網(wǎng)頁的形式表達(dá)自己的感受。
第四階段：綜合實踐，鞏固與提高，自由創(chuàng)作，遷移運用
教學(xué)環(huán)節(jié) 教師活動 學(xué)生活動 設(shè)計理念
實踐與創(chuàng)新 師：本節(jié)課的學(xué)習(xí)內(nèi)容基本結(jié)束，但我們探索的路還有很長，請大家完成二級網(wǎng)頁Parents．htm的設(shè)計。 教師巡視學(xué)生制作的情況，并進(jìn)行指導(dǎo)。 師：預(yù)覽網(wǎng)頁，調(diào)整瀏覽器窗口，你能發(fā)現(xiàn)網(wǎng)頁的變化嗎？怎樣才解決這個問題呢？ 根據(jù)圖1-1-6（b）設(shè)計網(wǎng)頁。 操作并觀察片面的變化。 在學(xué)習(xí)與探究基礎(chǔ)上進(jìn)行自主的網(wǎng)頁創(chuàng)作。 設(shè)疑，為下一節(jié)課“網(wǎng)頁中表格”作知識鋪墊。 同時，制作的二級網(wǎng)頁也是為第五課準(zhǔn)備超鏈接的網(wǎng)頁素材。
第五階段：教學(xué)總結(jié)，設(shè)疑激趣，為下一節(jié)課作好鋪墊
教學(xué) 環(huán)節(jié) 教師活動 學(xué)生活動 設(shè)計理念
課堂小結(jié) 課堂小結(jié)本節(jié)課的學(xué)習(xí)內(nèi)容。 師：請同學(xué)們通過瀏覽器預(yù)覽自己剛剛制作的網(wǎng)頁，然后任意改變?yōu)g覽器窗口的大小，看看網(wǎng)頁中已經(jīng)排好的版面是不是發(fā)生了變化？有防止這種現(xiàn)象的發(fā)生的辦法嗎？ 預(yù)覽網(wǎng)頁，觀察版面的變化，思考解決的方法。 承上啟下，激發(fā)學(xué)生進(jìn)一步學(xué)習(xí)網(wǎng)頁制作的興趣。
教學(xué)反思 本節(jié)課的知識點與之前學(xué)過的Word有很多相同或相似之處，所以在教學(xué)過程中盡量把學(xué)習(xí)知識的過程交給學(xué)生，由他們通過自己的實驗和比對，掌握相應(yīng)知識的要點和操作方法。并在本節(jié)課結(jié)束前設(shè)疑，為下一節(jié)課的學(xué)習(xí)作好準(zhǔn)備。 二、補充資料部分 1．學(xué)件
名稱 文件名
輸入并編輯文字 文字．swf
插入圖片 插入圖片．swf
插入水平線 水平線．swf
網(wǎng)頁的保存、預(yù)覽和新建 網(wǎng)頁操作．swf
2．資料庫 網(wǎng)站首頁設(shè)計的一些“特色” 通過考察對比，筆者發(fā)現(xiàn)了很多網(wǎng)站的首頁有四大共同點：“長，閃，擠，花”。 一、“長”。長頁面的領(lǐng)軍者應(yīng)該是我們的大型門戶網(wǎng)站。現(xiàn)在能生存下來的大型門戶各個實力不凡，又紛紛上市，其他網(wǎng)站能與他們頁面相似應(yīng)該也能說明實力相似，這幾家大型門戶已經(jīng)給用戶形成了“長則是好”的印象，于是眾多網(wǎng)站都紛紛“長”起來了。無論是綜合性網(wǎng)站還是專業(yè)性網(wǎng)站，只要有內(nèi)容，就能做多長就做多長，沒有內(nèi)容，抄襲別人內(nèi)容也要做長，以至于不少實力有限的網(wǎng)站只是首頁很長，到了欄目頁面（二級頁面）就簡陋的可憐了。
長的基礎(chǔ)就是要內(nèi)容要多，這些眾多的長網(wǎng)站在組織內(nèi)容的思路上基本是一致的，就是把二級頁面的內(nèi)容摘要的放在首頁上。首頁分成若干個相應(yīng)的通欄的大塊兒（這樣可以逐個部分的下載頁面，易于顯示），再在每兩塊之間加一條廣告，后再在頁面的上面加一個更綜合的區(qū)域，所謂的重中之重，這樣以來頁面想短都短不了。 按照J(rèn)akobNielsen的說法：網(wǎng)站首頁的長度不應(yīng)該超過4屏。當(dāng)然這個準(zhǔn)則也未必就那么準(zhǔn)確，但是至少應(yīng)該承認(rèn)頁面不是越長越好的。 二、“閃”。就是網(wǎng)頁上能動的東西──動畫。主要是Gif動畫、Flash動畫、腳本語言實現(xiàn)的圖片交替效果，還有就是彈出窗口。動畫對網(wǎng)頁表現(xiàn)本應(yīng)該是個很好的補充，但是現(xiàn)在的實際效果是對網(wǎng)頁的干擾。 雖然彈出窗口里的內(nèi)容不一定是動畫，但的彈出效果絕對是具視覺沖擊力。還好，現(xiàn)在有越來越多的雷鋒式的好公司提供了能屏蔽彈出窗口的工具。 腳本語言實現(xiàn)的圖片交替效果目前主要是用在網(wǎng)站頭條的圖片報道上，雖然是動，分散用戶的注意力，好在這種方式還是為了給用戶提供盡可能多的信息，應(yīng)該值得肯定，也應(yīng)該是動畫應(yīng)用于網(wǎng)絡(luò)的發(fā)展方向。 Gif動畫是傳統(tǒng)的動畫形式，但在Flash動畫面前，它的生存空間越來越小。 Flash動畫無疑是網(wǎng)頁動畫的主力，其文件小、效果好。 三、“擠”。我們的網(wǎng)站看上去滿滿當(dāng)當(dāng)?shù)?，比公共汽車還擠。 與英文相比，中文本身就顯得比較復(fù)雜，對于有鏈接的文字國內(nèi)很多網(wǎng)站又往往更傾向于傳統(tǒng)的隨時保持下劃線的方式，再加上小的幾乎不存在的行間距，使得頁面看上去分外擁擠。 經(jīng)常可以看到某網(wǎng)站為了突出重點內(nèi)容而使用14pt的字號，然而卻不加大該內(nèi)容與其他內(nèi)容的距離，這樣只能使頁面看上去更擁擠。 第四是“花”，中很多網(wǎng)站的色彩之絢爛，幾乎無以復(fù)加。 在網(wǎng)站中，通常將各個欄目摘要排放在首頁上，每一個欄目會有一種主色調(diào)，這樣一來，首頁上的色彩自然就很豐富了。 當(dāng)然，分欄目確定主色調(diào)的設(shè)計方式本身并沒有錯誤，也不足以搞“花”頁面。然而實際情況卻更復(fù)雜。以文字為例，未點擊的鏈接文字有黑色和藍(lán)色，重點的文字會用紅色，點擊后的文字鏈接是紫色，無鏈接且不重要的文字是灰色，此外為了突出某一個重點內(nèi)容會添加一個醒目的背景色或文字顏色。 網(wǎng)頁設(shè)計師為了表明自己工作用心，會給每一個子欄目的標(biāo)題部分設(shè)計一個很具有特色的背景，這些文字再與數(shù)不勝數(shù)的圖片、動畫交相輝映，使得用戶可以在一個頁面上將電腦可以顯示的全部色彩盡收眼底。 引用DonaldNorman在《emotionaldesign》一書中的理論，設(shè)計可以分為三種層次：本能水平的設(shè)計、行為水平的設(shè)計、反思水平的設(shè)計。本能水平的設(shè)計是滿足人類本能審美需求的設(shè)計，也就是漂亮、美觀的設(shè)計；行為水平的設(shè)計是注重效用的設(shè)計，注重功能、易用性、可用性；反思水平的設(shè)計注重信息、文化的作用，一件產(chǎn)品被設(shè)計的很獨特、出眾、引人矚目，用戶會因為始終這個產(chǎn)品而產(chǎn)生樂趣，產(chǎn)生滿足感。 根據(jù)這個理論，中國網(wǎng)站的設(shè)計普遍達(dá)沒能實現(xiàn)本能水平的設(shè)計，雖然網(wǎng)站的BOSS、設(shè)計師本人都希望把網(wǎng)站設(shè)計的很漂亮，吸引用戶的眼球。行為水平的設(shè)計逐漸被重視了，不過目前基本上還是停留在不高的水平上。上面說到的國內(nèi)很多網(wǎng)站的種種問題實際上正式在反思水平上的設(shè)計，一種變相的反思水平設(shè)計。 造成上述網(wǎng)站首頁設(shè)計問題的罪魁并不是設(shè)計師沒水平或者用戶沒品味，而是產(chǎn)品不夠，這表面上的“多”其實是由于“少”造成的。用戶對網(wǎng)絡(luò)內(nèi)容的需求引導(dǎo)著網(wǎng)站的設(shè)計，策劃人員有意無意地在迎合著這樣的需求。
教學(xué)內(nèi)容分析 R本課的主要內(nèi)容與地位 本節(jié)課學(xué)習(xí)的內(nèi)容是設(shè)計網(wǎng)站的首頁。首頁如同一本書的封面、一個戲曲人物的臉譜，應(yīng)該能夠反映出整個網(wǎng)站的整體風(fēng)格和特色，讓訪問者通過網(wǎng)站首頁就能對整個網(wǎng)站有所了解。所以，網(wǎng)站首頁的設(shè)計是整個網(wǎng)站設(shè)計的重點。 R本課與前后內(nèi)容的關(guān)系 本課是在第一課的規(guī)劃設(shè)計基礎(chǔ)之上進(jìn)行的學(xué)習(xí)活動。首頁的設(shè)計一定要按照規(guī)劃進(jìn)行。本節(jié)中涉及的知識點（編輯網(wǎng)頁：文字輸入和編輯、插入圖片、插入水平線；保存、預(yù)覽和新建網(wǎng)頁）是網(wǎng)站制作過程中需要反復(fù)用到的，所以學(xué)生應(yīng)熟練掌握。 教學(xué)目標(biāo)分析 R知識目標(biāo)/技能目標(biāo) ·知識目標(biāo) ⑴認(rèn)識網(wǎng)頁的工作原理； ⑵了解網(wǎng)頁編輯的一般過程。 ·技能目標(biāo) ?、攀炀氄莆赵诰W(wǎng)頁中輸入文字、插入圖片、插入水平線的操作； ?、普莆站W(wǎng)頁的新建、預(yù)覽和保存。 R過程與方法目標(biāo) ?、艑W(wǎng)頁操作中基本概念（首頁、網(wǎng)頁、網(wǎng)頁標(biāo)題等）有清晰的認(rèn)識； ?、圃诓僮髦畜w會網(wǎng)頁中圖文混排遇到的困難，探索解決之道，為下一節(jié)課──用表格布局網(wǎng)頁的學(xué)習(xí)埋下伏筆。 R情感態(tài)度與價值觀目標(biāo) 感受身邊版面設(shè)計的素材：廣告、報刊、課本，學(xué)以致用，將其用于網(wǎng)頁設(shè)計中。 R本課的重難點 重點：插入圖片和水平線。 難點：圖片和水平線屬性的設(shè)置、嵌入式文件的保存。 R本課的課時分配建議 1課時 教學(xué)策略設(shè)計建議 R教法建議 因FrontPage與學(xué)生之前學(xué)習(xí)的Word、Excel同屬微軟的Office家庭軟件，在操作上有許多相同或相似之處，所以在教學(xué)過程中，教師應(yīng)鼓勵學(xué)生對照Word中的操作完成文字的輸入與編輯、插入與編輯圖片等操作；采用分組設(shè)置、對比效果的形式探究“水平線屬性”對話框中各參數(shù)的含義，從而加深學(xué)生對水平線的理解；在網(wǎng)頁保存環(huán)節(jié)中，嵌入式文件的保存是學(xué)生從來沒有接觸過的知識點，教師應(yīng)安排學(xué)生將不同的網(wǎng)頁素材保存在站點中的不同文件夾中，以此達(dá)到強化的目的；組織學(xué)生進(jìn)行網(wǎng)頁預(yù)覽時，提醒學(xué)生注意站點文件夾中文件的變化和HTML窗口中代碼的變化；講解新建網(wǎng)頁時，可以讓學(xué)生嘗試使用其它網(wǎng)頁格式新建網(wǎng)頁，拓展學(xué)生網(wǎng)頁設(shè)計的思路。 R學(xué)法建議 對照以前學(xué)過的Word中的操作，總結(jié)FrontPage與其在操作上的不同，大膽嘗試以不同的方式和途徑完成老師交給的任務(wù)。 教學(xué)資源與環(huán)境建議 R本課教學(xué)資源索引 教師應(yīng)為學(xué)生提供足夠多的各種格式、各種大小的圖片素材。 R教學(xué)環(huán)境準(zhǔn)備建議 教學(xué)評價建議 R自評、互評、師評要注意的問題 學(xué)生在設(shè)計網(wǎng)站首頁時是否能對照Word完成相似的操作，是否能對新網(wǎng)頁中的素材進(jìn)行靈活的設(shè)置。 教學(xué)過程參考案例 第一階段：導(dǎo)入新課，明確學(xué)習(xí)目標(biāo)
教學(xué)環(huán)節(jié) 教師活動 學(xué)生活動 設(shè)計理念
導(dǎo)入新課 播放《說唱臉譜》音樂。 師：臉譜能準(zhǔn)確反映出人物的性格，一個網(wǎng)站的“臉”是什么？ 師：我們?nèi)绾谓o我們的網(wǎng)站設(shè)計臉譜呢？這就是本節(jié)課我們要學(xué)習(xí)的內(nèi)容──設(shè)計網(wǎng)站首頁（出示課件）。 學(xué)生討論答案──網(wǎng)站首頁。 結(jié)合第一節(jié)課的規(guī)劃，討論如何設(shè)計首頁。 通過臉譜聯(lián)想到首頁，激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁設(shè)計的熱情。
第二階段：范例精講，學(xué)生自主探究，完成范例
教學(xué)環(huán)節(jié) 教師活動 學(xué)生活動 設(shè)計理念
學(xué)習(xí)與探究 任務(wù)一：輸入文字 出示網(wǎng)頁輸入文字后的效果。 任務(wù)二：插入圖片 出示插入圖片后的效果，并提示圖片存放位置。 要求學(xué)生分別使用控制柄和設(shè)置圖片屬性的方法調(diào)整圖片大小。 任務(wù)三：插入水平線 根據(jù)教材提示，使用默認(rèn)值插入水平線，然后分組修改“水平線屬性”對話框各參數(shù)。 將前面輸入的“=”組成的線替換為水平線。 任務(wù)四：保存網(wǎng)頁 出示任務(wù)，由學(xué)生探索嵌入式文件保存的技巧。 任務(wù)五：預(yù)覽網(wǎng)頁 分組嘗試兩種預(yù)覽網(wǎng)頁的方法，并作比較。 任務(wù)六：添加新網(wǎng)頁 根據(jù)教材提示為網(wǎng)站添加新網(wǎng)頁。 對比老師出示網(wǎng)頁效果進(jìn)行文字的輸入和編輯，比較與Word中操作的異同。 根據(jù)樣例插入相應(yīng)圖片。 嘗試操作并比較說明二者的區(qū)別。 分組實驗，填寫表1-2-1。 操作并體驗二者在表現(xiàn)效果上的差異。 預(yù)覽網(wǎng)頁。 完成操作，并探索新建網(wǎng)頁的其它方法。比較它們的優(yōu)缺點。 前兩個任務(wù)與Word操作大同小異，讓學(xué)生通過對比強化記憶。 通過學(xué)生自己實踐理解水平線對話框的設(shè)為方法。 網(wǎng)頁制作中的學(xué)用操作，應(yīng)熟練掌握。
第三階段：知識、情感拓展
教學(xué) 環(huán)節(jié) 教師活動 學(xué)生活動 設(shè)計理念
知識與情感 師：請大家回想一下，你從小到現(xiàn)在，你的媽媽給你洗了多少次腳？你為她洗過多少次呢？ 師：如果還沒有做，就從今天開始吧！ 請同學(xué)們課下完成體驗任務(wù)，根據(jù)自己的感受設(shè)計網(wǎng)頁Feeling1．htm。 生：記不清。 生：還沒有。 放學(xué)后完成這一體驗活動，并將感受以網(wǎng)頁的形式表達(dá)出來。 讓學(xué)生通過這一活動體驗感受父母對自己的愛。能夠以網(wǎng)頁的形式表達(dá)自己的感受。
第四階段：綜合實踐，鞏固與提高，自由創(chuàng)作，遷移運用
教學(xué)環(huán)節(jié) 教師活動 學(xué)生活動 設(shè)計理念
實踐與創(chuàng)新 師：本節(jié)課的學(xué)習(xí)內(nèi)容基本結(jié)束，但我們探索的路還有很長，請大家完成二級網(wǎng)頁Parents．htm的設(shè)計。 教師巡視學(xué)生制作的情況，并進(jìn)行指導(dǎo)。 師：預(yù)覽網(wǎng)頁，調(diào)整瀏覽器窗口，你能發(fā)現(xiàn)網(wǎng)頁的變化嗎？怎樣才解決這個問題呢？ 根據(jù)圖1-1-6（b）設(shè)計網(wǎng)頁。 操作并觀察片面的變化。 在學(xué)習(xí)與探究基礎(chǔ)上進(jìn)行自主的網(wǎng)頁創(chuàng)作。 設(shè)疑，為下一節(jié)課“網(wǎng)頁中表格”作知識鋪墊。 同時，制作的二級網(wǎng)頁也是為第五課準(zhǔn)備超鏈接的網(wǎng)頁素材。
第五階段：教學(xué)總結(jié)，設(shè)疑激趣，為下一節(jié)課作好鋪墊
教學(xué) 環(huán)節(jié) 教師活動 學(xué)生活動 設(shè)計理念
課堂小結(jié) 課堂小結(jié)本節(jié)課的學(xué)習(xí)內(nèi)容。 師：請同學(xué)們通過瀏覽器預(yù)覽自己剛剛制作的網(wǎng)頁，然后任意改變?yōu)g覽器窗口的大小，看看網(wǎng)頁中已經(jīng)排好的版面是不是發(fā)生了變化？有防止這種現(xiàn)象的發(fā)生的辦法嗎？ 預(yù)覽網(wǎng)頁，觀察版面的變化，思考解決的方法。 承上啟下，激發(fā)學(xué)生進(jìn)一步學(xué)習(xí)網(wǎng)頁制作的興趣。
教學(xué)反思 本節(jié)課的知識點與之前學(xué)過的Word有很多相同或相似之處，所以在教學(xué)過程中盡量把學(xué)習(xí)知識的過程交給學(xué)生，由他們通過自己的實驗和比對，掌握相應(yīng)知識的要點和操作方法。并在本節(jié)課結(jié)束前設(shè)疑，為下一節(jié)課的學(xué)習(xí)作好準(zhǔn)備。 二、補充資料部分 1．學(xué)件
名稱 文件名
輸入并編輯文字 文字．swf
插入圖片 插入圖片．swf
插入水平線 水平線．swf
網(wǎng)頁的保存、預(yù)覽和新建 網(wǎng)頁操作．swf
2．資料庫 網(wǎng)站首頁設(shè)計的一些“特色” 通過考察對比，筆者發(fā)現(xiàn)了很多網(wǎng)站的首頁有四大共同點：“長，閃，擠，花”。 一、“長”。長頁面的領(lǐng)軍者應(yīng)該是我們的大型門戶網(wǎng)站。現(xiàn)在能生存下來的大型門戶各個實力不凡，又紛紛上市，其他網(wǎng)站能與他們頁面相似應(yīng)該也能說明實力相似，這幾家大型門戶已經(jīng)給用戶形成了“長則是好”的印象，于是眾多網(wǎng)站都紛紛“長”起來了。無論是綜合性網(wǎng)站還是專業(yè)性網(wǎng)站，只要有內(nèi)容，就能做多長就做多長，沒有內(nèi)容，抄襲別人內(nèi)容也要做長，以至于不少實力有限的網(wǎng)站只是首頁很長，到了欄目頁面（二級頁面）就簡陋的可憐了。
長的基礎(chǔ)就是要內(nèi)容要多，這些眾多的長網(wǎng)站在組織內(nèi)容的思路上基本是一致的，就是把二級頁面的內(nèi)容摘要的放在首頁上。首頁分成若干個相應(yīng)的通欄的大塊兒（這樣可以逐個部分的下載頁面，易于顯示），再在每兩塊之間加一條廣告，后再在頁面的上面加一個更綜合的區(qū)域，所謂的重中之重，這樣以來頁面想短都短不了。 按照J(rèn)akobNielsen的說法：網(wǎng)站首頁的長度不應(yīng)該超過4屏。當(dāng)然這個準(zhǔn)則也未必就那么準(zhǔn)確，但是至少應(yīng)該承認(rèn)頁面不是越長越好的。 二、“閃”。就是網(wǎng)頁上能動的東西──動畫。主要是Gif動畫、Flash動畫、腳本語言實現(xiàn)的圖片交替效果，還有就是彈出窗口。動畫對網(wǎng)頁表現(xiàn)本應(yīng)該是個很好的補充，但是現(xiàn)在的實際效果是對網(wǎng)頁的干擾。 雖然彈出窗口里的內(nèi)容不一定是動畫，但的彈出效果絕對是具視覺沖擊力。還好，現(xiàn)在有越來越多的雷鋒式的好公司提供了能屏蔽彈出窗口的工具。 腳本語言實現(xiàn)的圖片交替效果目前主要是用在網(wǎng)站頭條的圖片報道上，雖然是動，分散用戶的注意力，好在這種方式還是為了給用戶提供盡可能多的信息，應(yīng)該值得肯定，也應(yīng)該是動畫應(yīng)用于網(wǎng)絡(luò)的發(fā)展方向。 Gif動畫是傳統(tǒng)的動畫形式，但在Flash動畫面前，它的生存空間越來越小。 Flash動畫無疑是網(wǎng)頁動畫的主力，其文件小、效果好。 三、“擠”。我們的網(wǎng)站看上去滿滿當(dāng)當(dāng)?shù)?，比公共汽車還擠。 與英文相比，中文本身就顯得比較復(fù)雜，對于有鏈接的文字國內(nèi)很多網(wǎng)站又往往更傾向于傳統(tǒng)的隨時保持下劃線的方式，再加上小的幾乎不存在的行間距，使得頁面看上去分外擁擠。 經(jīng)常可以看到某網(wǎng)站為了突出重點內(nèi)容而使用14pt的字號，然而卻不加大該內(nèi)容與其他內(nèi)容的距離，這樣只能使頁面看上去更擁擠。 第四是“花”，中很多網(wǎng)站的色彩之絢爛，幾乎無以復(fù)加。 在網(wǎng)站中，通常將各個欄目摘要排放在首頁上，每一個欄目會有一種主色調(diào)，這樣一來，首頁上的色彩自然就很豐富了。 當(dāng)然，分欄目確定主色調(diào)的設(shè)計方式本身并沒有錯誤，也不足以搞“花”頁面。然而實際情況卻更復(fù)雜。以文字為例，未點擊的鏈接文字有黑色和藍(lán)色，重點的文字會用紅色，點擊后的文字鏈接是紫色，無鏈接且不重要的文字是灰色，此外為了突出某一個重點內(nèi)容會添加一個醒目的背景色或文字顏色。 網(wǎng)頁設(shè)計師為了表明自己工作用心，會給每一個子欄目的標(biāo)題部分設(shè)計一個很具有特色的背景，這些文字再與數(shù)不勝數(shù)的圖片、動畫交相輝映，使得用戶可以在一個頁面上將電腦可以顯示的全部色彩盡收眼底。 引用DonaldNorman在《emotionaldesign》一書中的理論，設(shè)計可以分為三種層次：本能水平的設(shè)計、行為水平的設(shè)計、反思水平的設(shè)計。本能水平的設(shè)計是滿足人類本能審美需求的設(shè)計，也就是漂亮、美觀的設(shè)計；行為水平的設(shè)計是注重效用的設(shè)計，注重功能、易用性、可用性；反思水平的設(shè)計注重信息、文化的作用，一件產(chǎn)品被設(shè)計的很獨特、出眾、引人矚目，用戶會因為始終這個產(chǎn)品而產(chǎn)生樂趣，產(chǎn)生滿足感。 根據(jù)這個理論，中國網(wǎng)站的設(shè)計普遍達(dá)沒能實現(xiàn)本能水平的設(shè)計，雖然網(wǎng)站的BOSS、設(shè)計師本人都希望把網(wǎng)站設(shè)計的很漂亮，吸引用戶的眼球。行為水平的設(shè)計逐漸被重視了，不過目前基本上還是停留在不高的水平上。上面說到的國內(nèi)很多網(wǎng)站的種種問題實際上正式在反思水平上的設(shè)計，一種變相的反思水平設(shè)計。 造成上述網(wǎng)站首頁設(shè)計問題的罪魁并不是設(shè)計師沒水平或者用戶沒品味，而是產(chǎn)品不夠，這表面上的“多”其實是由于“少”造成的。用戶對網(wǎng)絡(luò)內(nèi)容的需求引導(dǎo)著網(wǎng)站的設(shè)計，策劃人員有意無意地在迎合著這樣的需求。