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