設(shè)計(jì)網(wǎng)站首頁(yè).doc_第1頁(yè)
設(shè)計(jì)網(wǎng)站首頁(yè).doc_第2頁(yè)
設(shè)計(jì)網(wǎng)站首頁(yè).doc_第3頁(yè)
設(shè)計(jì)網(wǎng)站首頁(yè).doc_第4頁(yè)
設(shè)計(jì)網(wǎng)站首頁(yè).doc_第5頁(yè)
已閱讀5頁(yè),還剩2頁(yè)未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

設(shè)計(jì)網(wǎng)站首頁(yè)教學(xué)設(shè)計(jì)一、教學(xué)設(shè)計(jì)部分教學(xué)內(nèi)容分析本課的主要內(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)。本課與前后內(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)分析知識(shí)目標(biāo)/技能目標(biāo)知識(shí)目標(biāo)認(rèn)識(shí)網(wǎng)頁(yè)的工作原理;了解網(wǎng)頁(yè)編輯的一般過(guò)程。技能目標(biāo)熟練掌握在網(wǎng)頁(yè)中輸入文字、插入圖片、插入水平線的操作;掌握網(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ì)的思路。學(xué)法建議對(duì)照以前學(xué)過(guò)的Word中的操作,總結(jié)FrontPage與其在操作上的不同,大膽嘗試以不同的方式和途徑完成老師交給的任務(wù)。教學(xué)資源與環(huán)境建議本課教學(xué)資源索引教師應(yīng)為學(xué)生提供足夠多的各種格式、各種大小的圖片素材。教學(xué)環(huán)境準(zhǔn)備建議教學(xué)評(píng)價(jià)建議自評(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è)Feeling1htm。生:記不清。生:還沒(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)arentshtm的設(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è)操作swf2資料庫(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)戶網(wǎng)站?,F(xiàn)在能生存下來(lái)的大型門(mén)戶各個(gè)實(shí)力不凡,又紛紛上市,其他網(wǎng)站能與他們頁(yè)面相似應(yīng)該也能說(shuō)明實(shí)力相似,這幾家大型門(mén)戶已經(jīng)給用戶形成了“長(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),分散用戶的注意力,好在這種方式還是為了給用戶提供盡可能多的信息,應(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)站看上去滿滿當(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à)交相輝映,使得用戶可以在一個(gè)頁(yè)面上將電腦可以顯示的全部色彩盡收眼底。引用DonaldNorman在emotionaldesign一書(shū)中的理論,設(shè)計(jì)可以分為三種層次:本能水平的設(shè)計(jì)、行為水平的設(shè)計(jì)、反思水平的設(shè)計(jì)。本能水平的設(shè)計(jì)是滿足人類(lèi)本能審美需求的設(shè)計(jì),也就是漂亮、美觀的設(shè)計(jì);行為水平的設(shè)計(jì)是注重效用的設(shè)計(jì),注重功能、易用性、可用性;反思水平的設(shè)計(jì)注重信息、文化的作用,一件產(chǎn)品被設(shè)計(jì)的很獨(dú)特、出眾、引人矚目,用戶會(huì)因?yàn)槭冀K這個(gè)產(chǎn)品而產(chǎn)生樂(lè)趣,產(chǎn)生滿足感。根據(jù)這個(gè)理論,中國(guó)網(wǎng)站的設(shè)計(jì)普遍達(dá)沒(méi)能實(shí)現(xiàn)本能水平的設(shè)計(jì),雖然

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論