003阿昌族戶(hù)撒刀網(wǎng)站唐云莉案例教學(xué)實(shí)施.

1、民族文化傳承與創(chuàng)新國(guó)家級(jí)教學(xué)資源庫(kù)建設(shè)企業(yè)案例開(kāi)發(fā)阿昌族戶(hù)撒刀網(wǎng)站案例教學(xué)實(shí)施一、 教學(xué)目標(biāo)本案例從企業(yè)崗位需要的職業(yè)能力出發(fā)，通過(guò)教學(xué)，使學(xué)生能熟練使用網(wǎng)頁(yè)設(shè)計(jì)制作軟件設(shè)計(jì)制作網(wǎng)頁(yè)；熟悉HTML代碼、CSS樣式表、javascript等,了解后臺(tái)技術(shù)的應(yīng)用；具有良好的網(wǎng)頁(yè)設(shè)計(jì)能力，色彩感、形式感強(qiáng)，思路開(kāi)闊，創(chuàng)意豐富；具有豐富的商業(yè)網(wǎng)站及個(gè)性化網(wǎng)站的設(shè)計(jì)經(jīng)驗(yàn)，能獨(dú)立把握網(wǎng)站整體風(fēng)格。通過(guò)本案例的學(xué)習(xí)，學(xué)生應(yīng)達(dá)到：1專(zhuān)業(yè)能力1) 能對(duì)行業(yè)最新動(dòng)態(tài)、分類(lèi)特點(diǎn)、行業(yè)廣告行為習(xí)慣、行業(yè)互動(dòng)需求特點(diǎn)以及客戶(hù)進(jìn)行分析；2) 具備抓住和把握行業(yè)最新發(fā)展趨勢(shì)的能力；3) 能整體把握網(wǎng)站設(shè)計(jì)風(fēng)格，具備基本的字

2、體、版式、界面、交互元素設(shè)計(jì)能力；4) 能對(duì)不同網(wǎng)站設(shè)計(jì)風(fēng)格和功能進(jìn)行區(qū)別與分析；5) 能綜合靈活運(yùn)用中英文版網(wǎng)頁(yè)設(shè)計(jì)制作軟件；6) 具備頁(yè)面設(shè)計(jì)合理性的分析與判斷能力；7) 能對(duì)用戶(hù)體驗(yàn)進(jìn)行分析與設(shè)計(jì)；8) 能運(yùn)用網(wǎng)站前臺(tái)應(yīng)用技術(shù)；9) 能編寫(xiě)基本的網(wǎng)站后臺(tái)程序；10) 具備網(wǎng)站前臺(tái)基本程序的解讀與分析能力。2方法能力1) 具備專(zhuān)業(yè)經(jīng)驗(yàn)的綜合與靈活運(yùn)用能力；2) 能利用各種資源進(jìn)行資料的搜集、整理與分析；3) 具有基本的客戶(hù)分析能力；4) 能具體運(yùn)用圖表、文稿等形式或借助多媒體進(jìn)行表達(dá)；3社會(huì)能力1) 具有一定的人文素質(zhì)，能運(yùn)用各種方法分析問(wèn)題和解決問(wèn)題，具有較強(qiáng)的工作能力和學(xué)習(xí)能力；2)

3、具備創(chuàng)新能力和自主學(xué)習(xí)能力；3) 能根據(jù)合作狀況，調(diào)整工作進(jìn)度，改進(jìn)工作方式，不斷促進(jìn)和改善合作關(guān)系；4) 具有良好的思想道德素質(zhì)，正確的世界觀和人生觀，嚴(yán)謹(jǐn)務(wù)實(shí)，誠(chéng)實(shí)守信，愛(ài)崗敬業(yè)。 二、 教學(xué)任務(wù)阿昌族戶(hù)撒刀網(wǎng)站案例要求學(xué)生從網(wǎng)站策劃與創(chuàng)意出發(fā)，進(jìn)行網(wǎng)站的信息架構(gòu)設(shè)計(jì)、視覺(jué)設(shè)計(jì)，通過(guò)靜態(tài)網(wǎng)頁(yè)制作到動(dòng)態(tài)網(wǎng)頁(yè)制作，循序漸進(jìn)，最終完成完整的網(wǎng)站。阿昌族戶(hù)撒刀網(wǎng)站設(shè)計(jì)與制作案例可以拆解為三個(gè)子案例，貫穿網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)一課程的三個(gè)情境：界面設(shè)計(jì)、網(wǎng)頁(yè)制作、網(wǎng)頁(yè)編程：1. 子案例1：符合行業(yè)規(guī)范的網(wǎng)站界面設(shè)計(jì)子案例1對(duì)應(yīng)的學(xué)習(xí)情境是“界面設(shè)計(jì)”。本子案例設(shè)計(jì)基于網(wǎng)絡(luò)平臺(tái)的視覺(jué)化界面設(shè)計(jì)，從用戶(hù)需求分析、

4、作品的內(nèi)容結(jié)構(gòu)、網(wǎng)站信息架構(gòu)、布局、色彩、視覺(jué)元素等方面設(shè)計(jì)作品，把握作品形式與內(nèi)容的關(guān)系、界面風(fēng)格的設(shè)定以及色彩在給予屏幕化設(shè)計(jì)中的應(yīng)用規(guī)律，探究符合行業(yè)標(biāo)準(zhǔn)規(guī)范、符合時(shí)代特征和人文審美需求的作品設(shè)計(jì)表現(xiàn)。知識(shí)點(diǎn)：u 網(wǎng)站策劃與創(chuàng)意u 網(wǎng)站信息架構(gòu)設(shè)計(jì)u 網(wǎng)站布局設(shè)計(jì)u 網(wǎng)站色彩設(shè)計(jì)技能：u 掌握網(wǎng)頁(yè)界面設(shè)計(jì)的基本方法和設(shè)計(jì)技巧；u 能夠靈活運(yùn)用界面設(shè)計(jì)制作軟件實(shí)現(xiàn)創(chuàng)意設(shè)計(jì)；u 能夠把握整體網(wǎng)站的設(shè)計(jì)風(fēng)格；u 具有設(shè)計(jì)綜合網(wǎng)站界面的能力；u 把握頁(yè)面設(shè)計(jì)的合理性規(guī)范；u 具有收集、提煉、歸納信息的能力。2. 子案例2：網(wǎng)頁(yè)界面標(biāo)準(zhǔn)化布局設(shè)計(jì)子案例2所對(duì)應(yīng)的學(xué)習(xí)情境是“網(wǎng)頁(yè)制作”。在子案例1的

5、基礎(chǔ)上，對(duì)阿昌族戶(hù)撒刀網(wǎng)站進(jìn)行符合行業(yè)標(biāo)準(zhǔn)的標(biāo)準(zhǔn)化布局設(shè)計(jì)，對(duì)頁(yè)面進(jìn)行合理分析，對(duì)頁(yè)面中涉及到的各種視覺(jué)元素和編程語(yǔ)言進(jìn)行合理優(yōu)化及規(guī)范存儲(chǔ)，對(duì)網(wǎng)站中涉及到的多媒體元素按照流媒體的規(guī)范要求進(jìn)行適當(dāng)處理及數(shù)字格式轉(zhuǎn)換，完成各種元素在在頁(yè)面中的綜合布局，編寫(xiě)符合行業(yè)規(guī)范的HTML程序語(yǔ)言。知識(shí)點(diǎn)：u 網(wǎng)站首頁(yè)分析、優(yōu)化、切片、存儲(chǔ)u 網(wǎng)絡(luò)多媒體應(yīng)用設(shè)計(jì)u 網(wǎng)站首頁(yè)HTML文件制作u 網(wǎng)站次級(jí)頁(yè)面HTML文件制作u 網(wǎng)站三級(jí)頁(yè)面 HTML文件制作技能：u 具備頁(yè)面合理性的分析能力；u 能夠?qū)⒕W(wǎng)頁(yè)設(shè)計(jì)效果圖轉(zhuǎn)換為HTML頁(yè)面格式；u 掌握Dreamweaver網(wǎng)站制作軟件的操作技能；u 具備熟練制作并

6、完成網(wǎng)站頁(yè)面的綜合能力。3. 子案例3：網(wǎng)頁(yè)交互與特效制作子案例3所對(duì)應(yīng)的學(xué)習(xí)情境是“網(wǎng)頁(yè)編程”。在子案例2的基礎(chǔ)上，對(duì)阿昌族戶(hù)撒刀網(wǎng)站進(jìn)行符合行業(yè)標(biāo)準(zhǔn)的標(biāo)準(zhǔn)化制作，綜合應(yīng)用Html超文本標(biāo)記語(yǔ)言、CSS層疊樣式表、JavaScript特效應(yīng)用完成網(wǎng)站中涉及的各種交互體驗(yàn)環(huán)節(jié)和動(dòng)態(tài)視覺(jué)元素，對(duì)網(wǎng)站進(jìn)行整體的規(guī)范統(tǒng)一，并通過(guò)當(dāng)前網(wǎng)絡(luò)主流瀏覽器隊(duì)完成的網(wǎng)站設(shè)計(jì)作品進(jìn)行全面測(cè)試、調(diào)整完善，并對(duì)網(wǎng)站的后期維護(hù)進(jìn)行實(shí)踐嘗試。知識(shí)點(diǎn)：u 網(wǎng)站中各種特效的制作u 網(wǎng)站中CSS樣式的定義u 網(wǎng)站用戶(hù)體驗(yàn)設(shè)計(jì)u 網(wǎng)站交互設(shè)計(jì)u 網(wǎng)站測(cè)試技能：u 掌握網(wǎng)站前臺(tái)的應(yīng)用技術(shù)和基本編程語(yǔ)言；u 能讀懂網(wǎng)站前臺(tái)設(shè)計(jì)的基本

7、程序；u 把握頁(yè)面設(shè)計(jì)的合理性規(guī)范。三、 教學(xué)內(nèi)容第一部分 符合行業(yè)規(guī)范的網(wǎng)站界面設(shè)計(jì)(一) 阿昌族戶(hù)撒刀網(wǎng)站策劃1. 教學(xué)目標(biāo)：明確各種設(shè)計(jì)風(fēng)格的網(wǎng)頁(yè)的特征，了解阿昌族戶(hù)撒刀網(wǎng)站案例的設(shè)計(jì)要求，分組，并明確各自的任務(wù)。能夠小組合作進(jìn)行設(shè)計(jì)任務(wù)的分析，采用適當(dāng)?shù)氖侄嗡鸭Y料，并對(duì)資料篩選整理，能夠準(zhǔn)確進(jìn)行風(fēng)格定位。2. 教學(xué)任務(wù)搭建網(wǎng)站的基本架構(gòu)，完成阿昌族戶(hù)撒刀網(wǎng)站策劃方案。格式：Word文檔。3. 教學(xué)內(nèi)容1) 關(guān)于網(wǎng)站策劃學(xué)習(xí)網(wǎng)站策劃的作用、內(nèi)容、方法，明確網(wǎng)站策劃的作用，掌握網(wǎng)站策劃的內(nèi)容和方法。2) 資料搜集整理 戶(hù)撒刀的歷史源流和發(fā)展脈絡(luò)； 戶(hù)撒刀的發(fā)展現(xiàn)狀以及傳承情況； 戶(hù)撒刀的

8、類(lèi)型和特征； 阿昌族文化的特征、戶(hù)撒刀與阿昌族文化的關(guān)系等。3) 確定主體方向網(wǎng)站策劃并不是閉門(mén)造車(chē)，也不是設(shè)計(jì)師自我喜好的展現(xiàn)，需要進(jìn)行大量的調(diào)研、資料搜集、整理、分析。 學(xué)生對(duì)搜集的資料進(jìn)行篩選和整理。 小組確定網(wǎng)站主體方向。(二) 阿昌族戶(hù)撒刀網(wǎng)站創(chuàng)意草案1. 教學(xué)目標(biāo)理解阿昌族戶(hù)撒刀網(wǎng)站視覺(jué)化界面設(shè)計(jì)案例的設(shè)計(jì)要求，分組，并明確各自的任務(wù)。小組合作進(jìn)行設(shè)計(jì)任務(wù)的分析，采用適當(dāng)?shù)氖侄嗡鸭Y料，并對(duì)資料篩選整理，能夠準(zhǔn)確進(jìn)行風(fēng)格定位。按照確定的風(fēng)格并對(duì)網(wǎng)頁(yè)界面設(shè)計(jì)的總設(shè)計(jì)思路、風(fēng)格定位、欄目?jī)?nèi)容、網(wǎng)站地圖、色調(diào)、搭配等進(jìn)行策劃。2. 教學(xué)任務(wù)進(jìn)行阿昌族戶(hù)撒刀網(wǎng)站風(fēng)格定位，并對(duì)網(wǎng)頁(yè)界面設(shè)計(jì)的

9、總設(shè)計(jì)思路、風(fēng)格定位、欄目?jī)?nèi)容、網(wǎng)站地圖、色調(diào)、搭配等進(jìn)行策劃，完成創(chuàng)意草案。格式：PPT文檔。3. 教學(xué)內(nèi)容整理搜集的資料，進(jìn)一步有針對(duì)性的對(duì)任務(wù)進(jìn)行資料搜集，并分析資料，完成網(wǎng)站創(chuàng)意草案。1) 資料搜集指導(dǎo)教師指導(dǎo)學(xué)生根據(jù)項(xiàng)目需求進(jìn)行資料的搜集整理。 指導(dǎo)學(xué)生搜索項(xiàng)目相關(guān)的資料； 指導(dǎo)學(xué)生搜索相關(guān)行業(yè)的經(jīng)典網(wǎng)站案例的參考資料； 指導(dǎo)學(xué)生進(jìn)行資料的整理。2) 客戶(hù)分析教師指導(dǎo)學(xué)生分析客戶(hù)需求，包括分析內(nèi)容、方法技巧。 明確客戶(hù)需求分析的目的； 指導(dǎo)學(xué)生進(jìn)行客戶(hù)需求分析； 指導(dǎo)學(xué)生進(jìn)行受眾分析。3) 資料的分析教師指導(dǎo)學(xué)生分析搜集的資料，獲取有用信息。 同類(lèi)行業(yè)特點(diǎn)分析； 本項(xiàng)目的特點(diǎn)分析。4

10、) 創(chuàng)意草案阿昌族戶(hù)撒刀網(wǎng)站需要能體現(xiàn)出龍泉寶劍的地域特點(diǎn)和文化特征，將這種獨(dú)有的、燦爛的民族藝術(shù)之花充分展現(xiàn)出來(lái)，為這種非物質(zhì)文化遺產(chǎn)的傳承和發(fā)展搭建一個(gè)展示的平臺(tái)。 客戶(hù)需求分析 風(fēng)格定位 網(wǎng)站地圖5) 相關(guān)知識(shí)：網(wǎng)站界面設(shè)計(jì)風(fēng)格 網(wǎng)站界面風(fēng)格是什么？ 網(wǎng)站界面風(fēng)格的類(lèi)型 網(wǎng)站界面風(fēng)格的特征及形成(三) 阿昌族戶(hù)撒刀網(wǎng)站首頁(yè)布局設(shè)計(jì)1. 教學(xué)目標(biāo)按照確定的網(wǎng)站策劃方案和創(chuàng)意草案，小組分工合作，對(duì)阿昌族戶(hù)撒刀網(wǎng)站首頁(yè)頁(yè)面內(nèi)容進(jìn)行合理的安排，完成首頁(yè)具體布局設(shè)計(jì)方案；要符合瀏覽規(guī)律，主次分明，信息傳達(dá)準(zhǔn)確。2. 教學(xué)任務(wù)阿昌族戶(hù)撒刀網(wǎng)站布局設(shè)計(jì)方案2套。格式：JPG。3. 教學(xué)內(nèi)容1) 網(wǎng)頁(yè)界

11、面布局設(shè)計(jì) 網(wǎng)站界面布局元素 網(wǎng)站界面布局類(lèi)型 案例賞析2) 確定頁(yè)面內(nèi)容重點(diǎn)是“傳播功能”的實(shí)現(xiàn)，也就是，如何形成符合網(wǎng)站主題品牌特征、項(xiàng)目傳播信息和目的、目標(biāo)受眾特點(diǎn)和接受習(xí)慣這三個(gè)要素； 與案例主題、總體定位、設(shè)計(jì)風(fēng)格要求等的符合程度，對(duì)案例進(jìn)行深入分析，理解和把握需求； 與傳播目標(biāo)受眾的定位、欣賞習(xí)慣、傳播接受習(xí)慣等的符合程度，重點(diǎn)把握主題及項(xiàng)目需求的切合性； 設(shè)計(jì)中信息傳遞的有效性。3) 布局設(shè)計(jì)方案學(xué)生分組根據(jù)阿昌族戶(hù)撒刀網(wǎng)站策劃方案和確定的首頁(yè)中應(yīng)該展示的內(nèi)容信息，進(jìn)行首頁(yè)的布局設(shè)計(jì)。 把握首頁(yè)頁(yè)面內(nèi)容； 對(duì)頁(yè)面合理性進(jìn)行分析； 進(jìn)行首頁(yè)視覺(jué)設(shè)計(jì)。4) 課堂討論 分組講解各自的設(shè)

12、計(jì)方案； 師生互動(dòng)，對(duì)創(chuàng)意草案中存在的問(wèn)題； 指導(dǎo)教師從傳播、設(shè)計(jì)、技術(shù)等各方面進(jìn)行點(diǎn)評(píng)，并明確修改意見(jiàn)。5) 修改方案根據(jù)修改意見(jiàn)修改網(wǎng)站首頁(yè)布局設(shè)計(jì)，進(jìn)一步參閱相關(guān)的經(jīng)典案例，并對(duì)其進(jìn)行深入分析和研討，最終完成首頁(yè)布局的修改。(四) 阿昌族戶(hù)撒刀網(wǎng)站首頁(yè)設(shè)計(jì)1. 教學(xué)目標(biāo)根據(jù)確定的網(wǎng)站策劃方案和首頁(yè)布局設(shè)計(jì)方案，進(jìn)一步完成網(wǎng)站首頁(yè)的視覺(jué)創(chuàng)意設(shè)計(jì)，重點(diǎn)是網(wǎng)站主視覺(jué)的創(chuàng)意的設(shè)計(jì)與制作。在設(shè)計(jì)的過(guò)程中在于視覺(jué)創(chuàng)意與站信息傳播的切合度，領(lǐng)會(huì)和掌握創(chuàng)意設(shè)計(jì)與品牌特征、傳播目的、核心信息和受眾心理等各傳播要素的結(jié)合方式，根據(jù)傳播要素、網(wǎng)站結(jié)構(gòu)規(guī)劃和風(fēng)格定位進(jìn)行主視覺(jué)創(chuàng)意構(gòu)思，配色方案設(shè)計(jì)和首頁(yè)版式布局

13、規(guī)劃，并以此為基準(zhǔn)，貫穿運(yùn)用于整個(gè)網(wǎng)站的設(shè)計(jì)中。2. 教學(xué)任務(wù)阿昌族戶(hù)撒刀網(wǎng)站首頁(yè)設(shè)計(jì)方案格式：分層PSD文件3. 教學(xué)內(nèi)容1) 首頁(yè)設(shè)計(jì)根據(jù)確定的網(wǎng)站創(chuàng)意草案定稿方案，開(kāi)始進(jìn)行網(wǎng)站首頁(yè)的視覺(jué)創(chuàng)意設(shè)計(jì)。根據(jù)傳播要素、網(wǎng)站結(jié)構(gòu)規(guī)劃和風(fēng)格定位進(jìn)行主視覺(jué)創(chuàng)意構(gòu)思，配色方案設(shè)計(jì)和首頁(yè)版式布局規(guī)劃，并以此為基準(zhǔn)，貫穿運(yùn)用于整個(gè)網(wǎng)站的設(shè)計(jì)中。2) 課堂互動(dòng) 學(xué)生闡述方案分組講解網(wǎng)站首頁(yè)設(shè)計(jì)方案，了解視覺(jué)創(chuàng)意的設(shè)計(jì)實(shí)現(xiàn)方法與技巧，以及設(shè)計(jì)方案闡述的技巧； 師生互動(dòng)交流學(xué)生和教師對(duì)網(wǎng)站首頁(yè)設(shè)計(jì)方案修改意見(jiàn)的研討示范，引導(dǎo)學(xué)生進(jìn)一步領(lǐng)會(huì)設(shè)計(jì)對(duì)創(chuàng)意的表達(dá)和設(shè)計(jì)與傳播信息準(zhǔn)確性之間的關(guān)系；使學(xué)生清晰理解網(wǎng)站首頁(yè)設(shè)計(jì)

14、方案的修改意見(jiàn)。 明確方案的修改要求3) 方案修改 根據(jù)確定的修改意見(jiàn)調(diào)整完成設(shè)計(jì)方案。阿昌族戶(hù)撒刀網(wǎng)站首頁(yè)設(shè)計(jì)方案(五) 阿昌族戶(hù)撒刀網(wǎng)站欄目頁(yè)設(shè)計(jì)1. 教學(xué)目標(biāo)根據(jù)確定的網(wǎng)站首頁(yè)設(shè)計(jì)方案，完成網(wǎng)站欄目頁(yè)的視覺(jué)創(chuàng)意設(shè)計(jì)，重點(diǎn)是與網(wǎng)站首頁(yè)的層次關(guān)系。在設(shè)計(jì)的過(guò)程中能準(zhǔn)確表達(dá)出視覺(jué)創(chuàng)意與網(wǎng)站信息傳播的切合度，能領(lǐng)會(huì)和掌握創(chuàng)意設(shè)計(jì)與品牌特征、傳播目的、核心信息和受眾心理等各傳播要素的結(jié)合方式，根據(jù)傳播要素、能根據(jù)網(wǎng)站結(jié)構(gòu)規(guī)劃和風(fēng)格定位進(jìn)行主視覺(jué)創(chuàng)意構(gòu)思、配色方案設(shè)計(jì)和版式布局規(guī)劃，并以此為基準(zhǔn)，貫穿運(yùn)用于整個(gè)網(wǎng)站的設(shè)計(jì)中。2. 教學(xué)任務(wù)根據(jù)確定的網(wǎng)站首頁(yè)設(shè)計(jì)方案，完成網(wǎng)站的欄目頁(yè)視覺(jué)創(chuàng)意設(shè)計(jì)設(shè)計(jì)。

15、格式：分層PSD文件3. 教學(xué)內(nèi)容根據(jù)確定的網(wǎng)站首頁(yè)設(shè)計(jì)方案，進(jìn)一步對(duì)網(wǎng)站的次級(jí)頁(yè)面視覺(jué)創(chuàng)意設(shè)計(jì)進(jìn)行設(shè)計(jì)。根據(jù)傳播要素、網(wǎng)站結(jié)構(gòu)規(guī)劃和風(fēng)格定位進(jìn)行主視覺(jué)創(chuàng)意構(gòu)思，配色方案設(shè)計(jì)和版式布局規(guī)劃，并以此為基準(zhǔn)，貫穿運(yùn)用于整個(gè)網(wǎng)站的設(shè)計(jì)中。1) 欄目頁(yè)版式布局 從信息傳遞、瀏覽者視覺(jué)瀏覽規(guī)律和受眾心理等傳播要素出發(fā)，進(jìn)行合理的規(guī)劃； 布局符合整體的風(fēng)格定位。2) 欄目頁(yè)主視覺(jué)設(shè)計(jì) 能夠熟練運(yùn)用界面設(shè)計(jì)制作軟件（Photoshop）實(shí)現(xiàn)創(chuàng)意設(shè)計(jì)方案； 網(wǎng)站設(shè)計(jì)風(fēng)格的統(tǒng)一性； 與網(wǎng)站首頁(yè)配色方案相協(xié)調(diào)的色彩運(yùn)用； 能夠進(jìn)行符合網(wǎng)站設(shè)計(jì)規(guī)范的字體設(shè)計(jì)與運(yùn)用；3) 副導(dǎo)航（二級(jí)、三級(jí)導(dǎo)航）、快速返回導(dǎo)航設(shè)計(jì)

16、能夠進(jìn)行清晰和便捷的導(dǎo)航設(shè)計(jì)。阿昌族戶(hù)撒刀網(wǎng)站欄目頁(yè)設(shè)計(jì)方案(六) 阿昌族戶(hù)撒刀網(wǎng)站內(nèi)容頁(yè)設(shè)計(jì)1. 教學(xué)目標(biāo)根據(jù)確定的網(wǎng)站首頁(yè)設(shè)計(jì)方案和次級(jí)頁(yè)面，完成網(wǎng)站三級(jí)的視覺(jué)創(chuàng)意設(shè)計(jì)，重點(diǎn)是與網(wǎng)站首頁(yè)的層次關(guān)系。在設(shè)計(jì)的過(guò)程中能準(zhǔn)確表達(dá)出視覺(jué)創(chuàng)意與網(wǎng)站信息傳播的切合度，能領(lǐng)會(huì)和掌握創(chuàng)意設(shè)計(jì)與品牌特征、傳播目的、核心信息和受眾心理等各傳播要素的結(jié)合方式，把握頁(yè)面的層級(jí)關(guān)系，根據(jù)傳播要素、能根據(jù)網(wǎng)站結(jié)構(gòu)規(guī)劃和風(fēng)格定位進(jìn)行創(chuàng)意構(gòu)思、配色方案設(shè)計(jì)和版式布局規(guī)劃，并以此為基準(zhǔn)，貫穿運(yùn)用于整個(gè)網(wǎng)站的設(shè)計(jì)中。2. 教學(xué)任務(wù)根據(jù)確定的網(wǎng)站首頁(yè)和欄目頁(yè)設(shè)計(jì)方案，完成網(wǎng)站的內(nèi)容頁(yè)視覺(jué)創(chuàng)意設(shè)計(jì)設(shè)計(jì)。格式：分層PSD文件3.

17、教學(xué)內(nèi)容根據(jù)確定的網(wǎng)站策劃方案和首頁(yè)、次級(jí)頁(yè)面設(shè)計(jì)方案，進(jìn)一步對(duì)網(wǎng)站的內(nèi)容頁(yè)面視覺(jué)創(chuàng)意設(shè)計(jì)進(jìn)行設(shè)計(jì)。把握頁(yè)面的層級(jí)關(guān)系，根據(jù)傳播要素、網(wǎng)站結(jié)構(gòu)規(guī)劃和風(fēng)格定位進(jìn)行主視覺(jué)創(chuàng)意構(gòu)思，配色方案設(shè)計(jì)和版式布局規(guī)劃，并以此為基準(zhǔn)，貫穿運(yùn)用于整個(gè)網(wǎng)站的設(shè)計(jì)中。1) 內(nèi)容頁(yè)面版式布局 從信息傳遞、瀏覽者視覺(jué)瀏覽規(guī)律和受眾心理等傳播要素出發(fā)，進(jìn)行合理的規(guī)劃； 布局符合整體的風(fēng)格定位； 符合頁(yè)面主體內(nèi)容的展示。2) 內(nèi)容頁(yè)面視覺(jué)設(shè)計(jì) 能夠熟練運(yùn)用界面設(shè)計(jì)制作軟件（Photoshop）實(shí)現(xiàn)創(chuàng)意設(shè)計(jì)方案； 網(wǎng)站設(shè)計(jì)風(fēng)格的統(tǒng)一性； 與網(wǎng)站次級(jí)頁(yè)面配色方案相協(xié)調(diào)的色彩運(yùn)用； 能夠進(jìn)行符合網(wǎng)站設(shè)計(jì)規(guī)范的字體設(shè)計(jì)與運(yùn)用；3)

18、 副導(dǎo)航（二級(jí)、三級(jí)導(dǎo)航）、快速返回導(dǎo)航設(shè)計(jì) 能夠進(jìn)行清晰和便捷的導(dǎo)航設(shè)計(jì)。阿昌族戶(hù)撒刀網(wǎng)站欄目頁(yè)設(shè)計(jì)方案(七) 阿昌族戶(hù)撒刀網(wǎng)站整合1. 教學(xué)目標(biāo)對(duì)首頁(yè)、次級(jí)頁(yè)面進(jìn)行整合，對(duì)網(wǎng)站整體風(fēng)格進(jìn)行把握，協(xié)調(diào)統(tǒng)一不同頁(yè)面的細(xì)節(jié)部分，注重各個(gè)頁(yè)面的層次感、主次關(guān)系以及協(xié)調(diào)關(guān)系，整合完成阿昌族戶(hù)撒刀網(wǎng)站視覺(jué)化界面設(shè)計(jì)。2. 教學(xué)任務(wù)小組合作，整合完成阿昌族戶(hù)撒刀網(wǎng)站視覺(jué)界面設(shè)計(jì)，上交所有完成的頁(yè)面。3. 教學(xué)內(nèi)容根據(jù)確定的網(wǎng)站策劃方案和首頁(yè)、次級(jí)頁(yè)面設(shè)計(jì)方案，進(jìn)一步對(duì)網(wǎng)站的三級(jí)頁(yè)面視覺(jué)創(chuàng)意設(shè)計(jì)進(jìn)行設(shè)計(jì)。把握頁(yè)面的層級(jí)關(guān)系，根據(jù)傳播要素、網(wǎng)站結(jié)構(gòu)規(guī)劃和風(fēng)格定位進(jìn)行主視覺(jué)創(chuàng)意構(gòu)思，配色方案設(shè)計(jì)和版式布局規(guī)劃

19、，并以此為基準(zhǔn)，貫穿運(yùn)用于整個(gè)網(wǎng)站的設(shè)計(jì)中。1) 整合原則網(wǎng)站是一個(gè)整體，各個(gè)網(wǎng)頁(yè)之間都應(yīng)該符合整個(gè)網(wǎng)站的定位，首頁(yè)、次級(jí)頁(yè)面之間既要具有統(tǒng)一的外觀，又要有層次關(guān)系，符合各自展示內(nèi)容的需要。 整體風(fēng)格的統(tǒng)一； 形式表現(xiàn)的統(tǒng)一； 各級(jí)頁(yè)面的層次感； 同級(jí)頁(yè)面的一致； 細(xì)節(jié)的把握。2) 整合完成對(duì)首頁(yè)、次級(jí)頁(yè)面進(jìn)行整合，對(duì)網(wǎng)站整體風(fēng)格進(jìn)行把握，協(xié)調(diào)統(tǒng)一不同頁(yè)面的細(xì)節(jié)部分，注重各個(gè)頁(yè)面的層次感、主次關(guān)系以及協(xié)調(diào)關(guān)系，整合完成整個(gè)案例的設(shè)計(jì)。第二部分 阿昌族戶(hù)撒刀網(wǎng)頁(yè)界面標(biāo)準(zhǔn)化布局設(shè)計(jì)(一) 首頁(yè)頁(yè)面分析1. 教學(xué)目標(biāo)對(duì)設(shè)計(jì)的阿昌族戶(hù)撒刀網(wǎng)站首頁(yè)進(jìn)行符合行業(yè)標(biāo)準(zhǔn)的標(biāo)準(zhǔn)化布局設(shè)計(jì)，首先對(duì)頁(yè)面進(jìn)行合理分析

20、，對(duì)頁(yè)面中涉及到的各種視覺(jué)元素和編程語(yǔ)言進(jìn)行合理優(yōu)化及規(guī)范存儲(chǔ)，對(duì)網(wǎng)站中涉及到的多媒體元素按照流媒體的規(guī)范要求進(jìn)行適當(dāng)處理及數(shù)字格式轉(zhuǎn)換。2. 教學(xué)任務(wù)分析首頁(yè)效果圖，確定最為合理的結(jié)構(gòu)方案；把握網(wǎng)頁(yè)圖片的優(yōu)化原則進(jìn)行素材的采集與存儲(chǔ)。3. 教學(xué)內(nèi)容分析網(wǎng)站首頁(yè)效果圖，根據(jù)HTML頁(yè)面的制作原則分割切片，并進(jìn)行優(yōu)化設(shè)置，選擇合適的文件格式和顏色數(shù)量，正確進(jìn)行存儲(chǔ)。重點(diǎn)在于頁(yè)面結(jié)構(gòu)的合理分析，選擇合適的布局方法。1) 布局類(lèi)型分析效果圖，確定采用的布局結(jié)構(gòu)類(lèi)型。技巧方法：利用輔助線(xiàn)。教學(xué)重點(diǎn)： 以客戶(hù)及項(xiàng)目需求為基礎(chǔ)，視覺(jué)創(chuàng)意到網(wǎng)站制作的轉(zhuǎn)換。 研討示范，引導(dǎo)學(xué)生進(jìn)一步領(lǐng)會(huì)網(wǎng)頁(yè)制作的流程； 使學(xué)

21、生清晰理解網(wǎng)站制作的整個(gè)過(guò)程； 盡可能完整、少嵌套。2) 尺寸定位頁(yè)面尺寸和內(nèi)部結(jié)構(gòu)尺寸的確定。重點(diǎn)：布局關(guān)鍵內(nèi)容的精確數(shù)值設(shè)置。3) 素材提取對(duì)網(wǎng)站效果圖的切片進(jìn)行優(yōu)化設(shè)置，正確進(jìn)行存儲(chǔ)，關(guān)鍵是文字內(nèi)容的提取、背景的提取（背景色、背景圖像）、各種設(shè)計(jì)元素的提取。 選擇合適的文件格式； 設(shè)定顏色數(shù)量； 根據(jù)切片的內(nèi)容和功能設(shè)定文件名稱(chēng)。教學(xué)重點(diǎn)：重點(diǎn)把握網(wǎng)站切片需要注意的要點(diǎn)及技巧。 網(wǎng)頁(yè)切片合理性； 切片格式的選擇、優(yōu)化 切片的存儲(chǔ)。(二) 阿昌族戶(hù)撒刀網(wǎng)站首頁(yè)框架搭建1. 教學(xué)目標(biāo)根據(jù)對(duì)阿昌族戶(hù)撒刀網(wǎng)站首頁(yè)效果圖的分析制作HTML靜態(tài)頁(yè)面。重點(diǎn)在于頁(yè)面結(jié)構(gòu)的合理分析，尺寸的精確定義，選擇合

22、適的布局方法。2. 教學(xué)任務(wù)從大到小進(jìn)行布局，將各部分頁(yè)面內(nèi)容進(jìn)行準(zhǔn)確定位。3. 教學(xué)內(nèi)容1) 搭建HTML基本結(jié)構(gòu)重點(diǎn)：涉及常用標(biāo)簽，需要學(xué)生深刻理解HTML基本結(jié)構(gòu)，把握常用標(biāo)簽的用法。2) 頁(yè)面布局CSS盒模型是網(wǎng)頁(yè)制作課程的重點(diǎn)，是DIV排版的核心所在，通過(guò)由CSS定義的大小不一的盒子來(lái)編排網(wǎng)頁(yè)。這種排版方式代碼簡(jiǎn)潔，表現(xiàn)和內(nèi)容相分離，維護(hù)方便，能兼容更多的瀏覽器。重點(diǎn)：使用圖例分析，使學(xué)生理解CSS盒型的基本原理，掌握CSS盒型子的基本屬性：內(nèi)容、填充、邊框、邊界。知識(shí)點(diǎn)：插入DIV標(biāo)簽；設(shè)置盒型的樣式：寬度、高度、背景色、邊框；設(shè)置盒型在瀏覽器中居中；設(shè)置文字的樣式。(三) 阿昌族

23、戶(hù)撒刀網(wǎng)站首頁(yè)外觀定義1. 教學(xué)目標(biāo)對(duì)阿昌族戶(hù)撒刀網(wǎng)站首頁(yè)頁(yè)面結(jié)構(gòu)進(jìn)行CSS樣式的定義，包括各部分的尺寸控制、各種設(shè)計(jì)元素的精確定位與視覺(jué)效果控制。2. 教學(xué)任務(wù)編寫(xiě)符合行業(yè)規(guī)范的HTML程序語(yǔ)言，完成阿昌族戶(hù)撒刀網(wǎng)站首頁(yè)靜態(tài)頁(yè)面制作。要求： 準(zhǔn)確將效果圖轉(zhuǎn)化為HTML格式頁(yè)面； 編寫(xiě)的HTML程序語(yǔ)言符合行業(yè)規(guī)范； 支持常用瀏覽器。3. 教學(xué)內(nèi)容 文字的定義 圖片和列表的制作 鏈接的制作 導(dǎo)航的制作(四) 阿昌族戶(hù)撒刀網(wǎng)站其他頁(yè)面制作1. 教學(xué)目標(biāo)運(yùn)用同樣的方法對(duì)阿昌族戶(hù)撒刀網(wǎng)站的欄目頁(yè)和內(nèi)容頁(yè)的效果圖進(jìn)行分析，根據(jù)HTML頁(yè)面的制作原則分割切片，并進(jìn)行素材采集和頁(yè)面結(jié)構(gòu)搭建，完成HTML靜

24、態(tài)頁(yè)面，并進(jìn)行整合和測(cè)試，完成網(wǎng)站的靜態(tài)頁(yè)面制作。2. 教學(xué)任務(wù)完成阿昌族戶(hù)撒刀網(wǎng)站欄目頁(yè)、內(nèi)容頁(yè)的制作，完成導(dǎo)航鏈接，進(jìn)行網(wǎng)站整合和測(cè)試。3. 教學(xué)內(nèi)容1) 欄目頁(yè)和內(nèi)容頁(yè)頁(yè)面制作重點(diǎn)： 以項(xiàng)目需求為基礎(chǔ)，視覺(jué)創(chuàng)意到網(wǎng)站制作的轉(zhuǎn)換。 研討示范，引導(dǎo)學(xué)生進(jìn)一步領(lǐng)會(huì)網(wǎng)頁(yè)制作的流程； 使學(xué)生清晰理解網(wǎng)站制作的整個(gè)過(guò)程。2) 導(dǎo)航鏈接的實(shí)現(xiàn)實(shí)現(xiàn)導(dǎo)航，將網(wǎng)站各個(gè)頁(yè)面鏈接起來(lái)，形成完整的網(wǎng)站。重點(diǎn)： 當(dāng)前頁(yè)面指示效果； 鼠標(biāo)滑過(guò)效果制作； 頁(yè)面鏈接順暢、完整。3) 整合網(wǎng)站對(duì)小組完成的阿昌族戶(hù)撒刀網(wǎng)站進(jìn)行整理合并，優(yōu)化頁(yè)面結(jié)構(gòu)代碼和CSS樣式，使其符合網(wǎng)站標(biāo)準(zhǔn)化要求，并使用常用瀏覽器對(duì)整個(gè)網(wǎng)站進(jìn)行測(cè)試，

25、對(duì)出現(xiàn)的問(wèn)題進(jìn)行調(diào)試，保證整個(gè)網(wǎng)站符合瀏覽要求。需要注意的要點(diǎn)及技巧： 命名同級(jí)頁(yè)面的一致性； 站點(diǎn)管理層級(jí)關(guān)系； CSS樣式合并調(diào)整取決于制作過(guò)程中的溝通與交流，保證CSS文件的標(biāo)準(zhǔn)性。4) 網(wǎng)站優(yōu)化對(duì)頁(yè)面代碼和CSS樣式代碼進(jìn)行優(yōu)化處理，符合標(biāo)準(zhǔn)化制作的要求。5) 測(cè)試網(wǎng)站使用常用瀏覽器對(duì)網(wǎng)站進(jìn)行測(cè)試，出現(xiàn)問(wèn)題及時(shí)修復(fù)，保證網(wǎng)站能夠按照要求正常瀏覽。常用瀏覽器如下： IE6、ie7、ie8瀏覽器 Firefox瀏覽器 Safari瀏覽器重點(diǎn)：關(guān)注ie6中的BUG。第三部分 網(wǎng)頁(yè)交互與特效制作(一) 阿昌族戶(hù)撒刀網(wǎng)站動(dòng)態(tài)網(wǎng)頁(yè)模版1. 教學(xué)目標(biāo)了解JavaScript對(duì)象，熟知JavaScri

26、pt程序模塊的調(diào)用方法；具備JavaScript功能模塊整體應(yīng)用到網(wǎng)頁(yè)中的能力，及根據(jù)實(shí)際所需，進(jìn)行必要調(diào)試和修改能力。2. 教學(xué)任務(wù)開(kāi)發(fā)阿昌族戶(hù)撒刀網(wǎng)站動(dòng)態(tài)網(wǎng)頁(yè)模版。要求： 制作好靜態(tài)網(wǎng)頁(yè)模板； 主要應(yīng)用外部樣式表完成相關(guān)頁(yè)面文本樣式統(tǒng)一修改，提高效率； 根據(jù)頁(yè)面需要添加JavaScript功能模塊，增加網(wǎng)頁(yè)動(dòng)態(tài)元素。3. 教學(xué)內(nèi)容1) 相關(guān)知識(shí)準(zhǔn)備掌握J(rèn)avaScript及應(yīng)用。 常見(jiàn)功能模塊：顯示日期、顯示登陸時(shí)間、禁止下載圖片、文字上下移動(dòng)、動(dòng)態(tài)導(dǎo)航菜單、狀態(tài)欄特效 擴(kuò)展功能模塊：日期時(shí)間類(lèi)型、圖片文字類(lèi)型、窗口頁(yè)面類(lèi)型、鼠標(biāo)類(lèi)型、菜單類(lèi)型、狀態(tài)欄類(lèi)型2) 網(wǎng)站資料整理按網(wǎng)站構(gòu)建原則，分析、整理“網(wǎng)站前臺(tái)技術(shù)”資料，適合在網(wǎng)頁(yè)中展示。3) 開(kāi)發(fā)動(dòng)態(tài)網(wǎng)頁(yè)模版 制作靜態(tài)網(wǎng)頁(yè)模版（課前完成基本框架）； 應(yīng)用CSS方便網(wǎng)頁(yè)樣式修改；主要應(yīng)用外部樣式表完成相關(guān)頁(yè)面文本樣式統(tǒng)一修改，提高效率。 應(yīng)用JavaScript功能模塊，把靜態(tài)網(wǎng)頁(yè)變成初