設(shè)計(jì)網(wǎng)站首頁

1、設(shè)計(jì)網(wǎng)站首頁教學(xué)設(shè)計(jì) 一、教學(xué)設(shè)計(jì)部分 教學(xué)內(nèi)容分析   本節(jié)課學(xué)習(xí)的內(nèi)容是設(shè)計(jì)網(wǎng)站的首頁。首頁如同一本書的封面、一個(gè)戲曲人物的臉譜，應(yīng)該能夠反映出整個(gè)網(wǎng)站的整體風(fēng)格和特色，讓訪問者通過網(wǎng)站首頁就能對整個(gè)網(wǎng)站有所了解。所以，網(wǎng)站首頁的設(shè)計(jì)是整個(gè)網(wǎng)站設(shè)計(jì)的重點(diǎn)。  本課與前后內(nèi)容的關(guān)系  本課是在第一課的規(guī)劃設(shè)計(jì)基礎(chǔ)之上實(shí)行的學(xué)習(xí)活動(dòng)。首頁的設(shè)計(jì)一定要按照規(guī)劃實(shí)行。本節(jié)中涉及的知識(shí)點(diǎn)（編輯網(wǎng)頁:文字輸入和編輯、插入圖片、插入水平線；保存、預(yù)覽和新建網(wǎng)頁）是網(wǎng)站制作過程中需要反復(fù)用到的，所以學(xué)生應(yīng)熟練掌握。 教學(xué)目標(biāo)分析  知識(shí)

2、目標(biāo)/技能目標(biāo)  ·知識(shí)目標(biāo)  理解網(wǎng)頁的工作原理；  了解網(wǎng)頁編輯的一般過程。  ·技能目標(biāo)  熟練掌握在網(wǎng)頁中輸入文字、插入圖片、插入水平線的操作；  掌握網(wǎng)頁的新建、預(yù)覽和保存。  R過程與方法目標(biāo)  對網(wǎng)頁操作中基本概念（首頁、網(wǎng)頁、網(wǎng)頁標(biāo)題等）有清晰的理解；  在操作中體會(huì)網(wǎng)頁中圖文混排遇到的困難，探索解決之道，為下一節(jié)課用表格布局網(wǎng)頁的學(xué)習(xí)埋下伏筆。  R情感態(tài)度與價(jià)值觀目標(biāo)  感受身邊版面設(shè)計(jì)的素材:廣告、報(bào)刊、課本，學(xué)以致用，將其用于網(wǎng)頁設(shè)計(jì)中。&#

3、160; R本課的重難點(diǎn)  重點(diǎn):插入圖片和水平線。  難點(diǎn):圖片和水平線屬性的設(shè)置、嵌入式文件的保存。  R本課的課時(shí)分配建議  1課時(shí) 教學(xué)策略設(shè)計(jì)建議  R教法建議  因FrontPage與學(xué)生之前學(xué)習(xí)的Word、Excel同屬微軟的Office家庭軟件，在操作上有許多相同或相似之處，所以在教學(xué)過程中，教師應(yīng)鼓勵(lì)學(xué)生對照Word中的操作完成文字的輸入與編輯、插入與編輯圖片等操作；采用分組設(shè)置、對比效果的形式探究“水平線屬性”對話框中各參數(shù)的含義，從而加深學(xué)生對水平線的理解；在網(wǎng)頁保存環(huán)節(jié)中，嵌入式文件的保存是學(xué)生從來沒

4、有接觸過的知識(shí)點(diǎn)，教師應(yīng)安排學(xué)生將不同的網(wǎng)頁素材保存有站點(diǎn)中的不同文件夾中，以此達(dá)到強(qiáng)化的目的；組織學(xué)生實(shí)行網(wǎng)頁預(yù)覽時(shí)，提醒學(xué)生注意站點(diǎn)文件夾中文件的變化和HTML窗口中代碼的變化；講解新建網(wǎng)頁時(shí)，能夠讓學(xué)生嘗試使用其它網(wǎng)頁格式新建網(wǎng)頁，拓展學(xué)生網(wǎng)頁設(shè)計(jì)的思路。  學(xué)法建議  對照以前學(xué)過的Word中的操作，總結(jié)FrontPage與其在操作上的不同，大膽嘗試以不同的方式和途徑完成老師交給的任務(wù)。 教學(xué)資源與環(huán)境建議  本課教學(xué)資源索引  教師應(yīng)為學(xué)生提供充足多的各種格式、各種大小的圖片素材。  教學(xué)環(huán)境準(zhǔn)備建議 教學(xué)評價(jià)建議

5、  自評、互評、師評要注意的問題  學(xué)生在設(shè)計(jì)網(wǎng)站首頁時(shí)是否能對照Word完成相似的操作，是否能對新網(wǎng)頁中的素材實(shí)行靈活的設(shè)置。 教學(xué)過程參考案例  第一階段:導(dǎo)入新課，明確學(xué)習(xí)目標(biāo)教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)理念導(dǎo)入新課播放說唱臉譜音樂。 師:臉譜能準(zhǔn)確反映出人物的性格，一個(gè)網(wǎng)站的“臉”是什么？ 師:我們?nèi)绾谓o我們的網(wǎng)站設(shè)計(jì)臉譜呢？這就是本節(jié)課我們要學(xué)習(xí)的內(nèi)容設(shè)計(jì)網(wǎng)站首頁（出示課件）。學(xué)生討論答案網(wǎng)站首頁。  結(jié)合第一節(jié)課的規(guī)劃，討論如何設(shè)計(jì)首頁。通過臉譜聯(lián)想到首頁，激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁設(shè)計(jì)的熱情。  第二

6、階段:范例精講，學(xué)生自主探究，完成范例教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)理念學(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)頁的方

7、法，并作比較。 任務(wù)六:添加新網(wǎng)頁 根據(jù)教材提示為網(wǎng)站添加新網(wǎng)頁。對比老師出示網(wǎng)頁效果實(shí)行文字的輸入和編輯，比較與Word中操作的異同。   根據(jù)樣例插入相對應(yīng)圖片。   嘗試操作并比較說明二者的區(qū)別。  分組實(shí)驗(yàn)，填寫表1-2-1。   操作并體驗(yàn)二者在表現(xiàn)效果上的差異。   預(yù)覽網(wǎng)頁。     完成操作，并探索新建網(wǎng)頁的其它方法。比較它們的優(yōu)缺點(diǎn)。前兩個(gè)任務(wù)與Word操作大同小異，讓學(xué)生通過對比強(qiáng)化記憶。     

8、;    通過學(xué)生自己實(shí)踐理解水平線對話框的設(shè)為方法。     網(wǎng)頁制作中的學(xué)用操作，應(yīng)熟練掌握。 第三階段：知識(shí)、情感拓展教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)理念知識(shí)與情感師：請大家回想一下，你從小到現(xiàn)在，你的媽媽給你洗了多少次腳？你為她洗過多少次呢？ 師：如果還沒有做，就從今天開始吧！ 請同學(xué)們課下完成體驗(yàn)任務(wù)，根據(jù)自己的感受設(shè)計(jì)網(wǎng)頁Feeling1htm。生：記不清。 生：還沒有。 放學(xué)后完成這一體驗(yàn)活動(dòng)，并將感受以網(wǎng)頁的形式表達(dá)出來。讓學(xué)生通過這一活動(dòng)體驗(yàn)感受父母對自己的愛。能夠以網(wǎng)頁的形式表達(dá)

9、自己的感受。 第四階段：綜合實(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é)束，但我們探索的路還有很長，請大家完成二級(jí)網(wǎng)頁P(yáng)arentshtm的設(shè)計(jì)。 教師巡視學(xué)生制作的情況，并進(jìn)行指導(dǎo)。 師：預(yù)覽網(wǎng)頁，調(diào)整瀏覽器窗口，你能發(fā)現(xiàn)網(wǎng)頁的變化嗎？怎樣才解決這個(gè)問題呢？根據(jù)圖1-1-6（b）設(shè)計(jì)網(wǎng)頁。  操作并觀察片面的變化。在學(xué)習(xí)與探究基礎(chǔ)上進(jìn)行自主的網(wǎng)頁創(chuàng)作。 設(shè)疑，為下一節(jié)課“網(wǎng)頁中表格”作知識(shí)鋪墊。 同時(shí)，制作的二級(jí)網(wǎng)頁也是為第五課準(zhǔn)備超鏈接的網(wǎng)頁素材。 第

10、五階段：教學(xué)總結(jié)，設(shè)疑激趣，為下一節(jié)課作好鋪墊教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)理念課堂小結(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é)課的知識(shí)點(diǎn)與之前學(xué)過的Word有很多相同或相似之處，所以在教學(xué)過程中盡量把學(xué)習(xí)知識(shí)的過程交給學(xué)生，由他們通過自己的實(shí)驗(yàn)和比對，掌握相應(yīng)知識(shí)的要點(diǎn)和操作方法。并在本節(jié)課結(jié)束前設(shè)疑，為下

11、一節(jié)課的學(xué)習(xí)作好準(zhǔn)備。 二、補(bǔ)充資料部分 1學(xué)件 名稱文件名輸入并編輯文字文字swf插入圖片插入圖片swf插入水平線水平線swf網(wǎng)頁的保存、預(yù)覽和新建網(wǎng)頁操作swf 2資料庫 網(wǎng)站首頁設(shè)計(jì)的一些“特色” 通過考察對比，筆者發(fā)現(xiàn)了很多網(wǎng)站的首頁有四大共同點(diǎn)：“長，閃，擠，花”。 一、“長”。長頁面的領(lǐng)軍者應(yīng)該是我們的大型門戶網(wǎng)站。現(xiàn)在能生存下來的大型門戶各個(gè)實(shí)力不凡，又紛紛上市，其他網(wǎng)站能與他們頁面相似應(yīng)該也能說明實(shí)力相似，這幾家大型門戶已經(jīng)給用戶形成了“長則是好”的印象，于是眾多網(wǎng)站都紛紛“長”起來了。無論是綜合性網(wǎng)站還是專

12、業(yè)性網(wǎng)站，只要有內(nèi)容，就能做多長就做多長，沒有內(nèi)容，抄襲別人內(nèi)容也要做長，以至于不少實(shí)力有限的網(wǎng)站只是首頁很長，到了欄目頁面（二級(jí)頁面）就簡陋的可憐了。 長的基礎(chǔ)就是要內(nèi)容要多，這些眾多的長網(wǎng)站在組織內(nèi)容的思路上基本是一致的，就是把二級(jí)頁面的內(nèi)容摘要的放在首頁上。首頁分成若干個(gè)相應(yīng)的通欄的大塊兒（這樣可以逐個(gè)部分的下載頁面，易于顯示），再在每兩塊之間加一條廣告，最后再在頁面的最上面加一個(gè)更綜合的區(qū)域，所謂的重中之重，這樣以來頁面想短都短不了。 按照J(rèn)akobNielsen的說法：網(wǎng)站首頁的長度不應(yīng)該超過4屏。當(dāng)然這個(gè)準(zhǔn)則也未必就那么準(zhǔn)確，但是至少應(yīng)該承認(rèn)頁面不是越長越好的。

13、 二、“閃”。就是網(wǎng)頁上能動(dòng)的東西動(dòng)畫。主要是Gif動(dòng)畫、Flash動(dòng)畫、腳本語言實(shí)現(xiàn)的圖片交替效果，還有就是彈出窗口。動(dòng)畫對網(wǎng)頁表現(xiàn)本應(yīng)該是個(gè)很好的補(bǔ)充，但是現(xiàn)在的實(shí)際效果是對網(wǎng)頁的干擾。 雖然彈出窗口里的內(nèi)容不一定是動(dòng)畫，但的彈出效果絕對是最具視覺沖擊力。還好，現(xiàn)在有越來越多的雷鋒式的好公司提供了能屏蔽彈出窗口的工具。 腳本語言實(shí)現(xiàn)的圖片交替效果目前主要是用在網(wǎng)站頭條的圖片報(bào)道上，雖然是動(dòng)，分散用戶的注意力，好在這種方式還是為了給用戶提供盡可能多的信息，應(yīng)該值得肯定，也應(yīng)該是動(dòng)畫應(yīng)用于網(wǎng)絡(luò)的發(fā)展方向。 Gif動(dòng)畫是傳統(tǒng)的動(dòng)畫形式，但在Flash動(dòng)畫面

14、前，它的生存空間越來越小。 Flash動(dòng)畫無疑是網(wǎng)頁動(dòng)畫的主力，其文件小、效果好。 三、“擠”。我們的網(wǎng)站看上去滿滿當(dāng)當(dāng)?shù)模裙财囘€擠。 與英文相比，中文本身就顯得比較復(fù)雜，對于有鏈接的文字國內(nèi)很多網(wǎng)站又往往更傾向于傳統(tǒng)的隨時(shí)保持下劃線的方式，再加上小的幾乎不存在的行間距，使得頁面看上去分外擁擠。 經(jīng)常可以看到某網(wǎng)站為了突出重點(diǎn)內(nèi)容而使用14pt的字號(hào)，然而卻不加大該內(nèi)容與其他內(nèi)容的距離，這樣只能使頁面看上去更擁擠。 第四是“花”，中很多網(wǎng)站的色彩之絢爛，幾乎無以復(fù)加。 在網(wǎng)站中，通常將各個(gè)欄目摘要排放在首頁上，每一個(gè)欄目會(huì)有一種

15、主色調(diào)，這樣一來，首頁上的色彩自然就很豐富了。 當(dāng)然，分欄目確定主色調(diào)的設(shè)計(jì)方式本身并沒有錯(cuò)誤，也不足以搞“花”頁面。然而實(shí)際情況卻更復(fù)雜。以文字為例，未點(diǎn)擊的鏈接文字有黑色和藍(lán)色，重點(diǎn)的文字會(huì)用紅色，點(diǎn)擊后的文字鏈接是紫色，無鏈接且不重要的文字是灰色，此外為了突出某一個(gè)重點(diǎn)內(nèi)容會(huì)添加一個(gè)醒目的背景色或文字顏色。 網(wǎng)頁設(shè)計(jì)師為了表明自己工作用心，會(huì)給每一個(gè)子欄目的標(biāo)題部分設(shè)計(jì)一個(gè)很具有特色的背景，這些文字再與數(shù)不勝數(shù)的圖片、動(dòng)畫交相輝映，使得用戶可以在一個(gè)頁面上將電腦可以顯示的全部色彩盡收眼底。 引用DonaldNorman在emotionaldesign一書中的理論，設(shè)計(jì)可以分為三種層次：本能水平的設(shè)計(jì)、行為水平的設(shè)計(jì)、反思水平的設(shè)計(jì)。本能水平的設(shè)計(jì)是滿足人類本能審美需求的設(shè)計(jì)，也就是漂亮、美觀的設(shè)計(jì)；行為水平的設(shè)計(jì)是注重效用的設(shè)計(jì)，注重功能、易用性、可用性；反思水平的設(shè)計(jì)注重信息、文化的作用，一件產(chǎn)品被設(shè)計(jì)的很獨(dú)特、出眾、引人矚目，用戶會(huì)因?yàn)槭冀K這個(gè)產(chǎn)品而產(chǎn)生樂趣，產(chǎn)生滿足感。