項(xiàng)目10策劃與制作個(gè)人藝術(shù)網(wǎng)站

1、項(xiàng)目10策劃與制作個(gè)人藝術(shù)網(wǎng)站一、教學(xué)建議通過以上11個(gè)項(xiàng)目的學(xué)習(xí)，學(xué)生們已經(jīng)經(jīng)歷了從不知制作網(wǎng)頁從何處下手到逐步熟悉網(wǎng)站制作的流程、HTML標(biāo)記屬性，以及了解并掌握網(wǎng)頁制作軟件Dreamweaver CS3各個(gè)模塊功能的工程。在基本熟悉了制作靜態(tài)網(wǎng)頁的常用工具基礎(chǔ)上，該項(xiàng)目以制作一個(gè)個(gè)人網(wǎng)站為實(shí)例，系統(tǒng)地總結(jié)了前面所學(xué)的知識(shí)，達(dá)到溫故而知新的效果，目的是使學(xué)生能自己獨(dú)立制作一個(gè)具有特色的靜態(tài)網(wǎng)站。矚慫潤厲釤瘞睞櫪廡賴賃軔朧。該項(xiàng)目理論知識(shí)詳盡， 要求結(jié)合上機(jī)實(shí)踐操作， 鞏固學(xué)生的理論知識(shí)， 提高學(xué)生的學(xué)習(xí)興趣， 并以 項(xiàng)目總結(jié)”的形式通過 發(fā)現(xiàn)問題一一解決問題一一總結(jié)問題”的方式加深學(xué)生的印

2、象， 增強(qiáng)學(xué)習(xí)效果。聞創(chuàng)溝燴鐺險(xiǎn)愛氌譴凈禍測(cè)樅。為了提高學(xué)生的應(yīng)試能力，尤其是一些考級(jí)需要， 建議教師在教學(xué)的過程中有意識(shí)地穿插該項(xiàng)目后面 自我評(píng)測(cè)”的操作題與該教材配套光盤中配套的實(shí)例題，讓學(xué)生在實(shí)際操作的過程中解決一些問題，達(dá)到理論實(shí)踐一體化的效果，以便學(xué)生更好更牢固的掌握知識(shí)點(diǎn)，學(xué)以致用。殘騖樓諍錈瀨濟(jì)溆塹籟婭驟東。、教學(xué)簡(jiǎn)案課題任務(wù)1網(wǎng)站創(chuàng)建的流程參考資料教材、教師手冊(cè)教學(xué)配套光盤素材教學(xué)方法教師講解、演示。學(xué)生討論，上機(jī)實(shí)踐操作。授課節(jié)數(shù)1課時(shí)教學(xué)目標(biāo)1了解小型網(wǎng)站的建設(shè)流程。2熟悉網(wǎng)站的設(shè)計(jì)原則。3掌握制作小型網(wǎng)站的要點(diǎn)。相關(guān)知識(shí)1網(wǎng)站制作的基本流程2網(wǎng)站設(shè)計(jì)3網(wǎng)站的打開速度學(xué)習(xí)重

3、點(diǎn)1熟悉制作一個(gè)網(wǎng)站的具體流程及每個(gè)流程所要做的主要工作。2了解網(wǎng)站內(nèi)容的設(shè)計(jì)、網(wǎng)站色彩的設(shè)計(jì)、網(wǎng)頁布局的設(shè)計(jì)、網(wǎng)站結(jié)構(gòu)的 設(shè)計(jì)。3. 了解提咼網(wǎng)頁打開速度的方法，及幾種減小網(wǎng)頁體積的方法。教學(xué)內(nèi)容網(wǎng)站制作的基本流程了解客戶的需求2 網(wǎng)站設(shè)計(jì)3.制作網(wǎng)站4 .測(cè)試網(wǎng)站5.發(fā)布網(wǎng)站6 .維護(hù)網(wǎng)站 網(wǎng)站的設(shè)計(jì)1.網(wǎng)站的內(nèi)容的設(shè)計(jì)2 .站色彩的設(shè)計(jì)3 .頁的布局“ T型布局：主要特殊點(diǎn)是頁面頂部為橫幅廣告區(qū)（網(wǎng)站標(biāo)志+廣告條），下方左側(cè)為導(dǎo)航菜單，右側(cè)顯示網(wǎng)頁文體內(nèi)容的布局?？?”型布局：主要特點(diǎn)是頁面上側(cè)有一個(gè)廣告條，下側(cè)是版權(quán)區(qū)，左側(cè)和右側(cè)都有相關(guān)信息三”型布局：主要特點(diǎn)是頁面上橫向幾條色塊或區(qū)

4、間，將頁面整體分割為小平方向的幾部分。對(duì)稱對(duì)比布局：采取左右或者上下對(duì)稱的結(jié)構(gòu)，一般用于設(shè)計(jì)型站點(diǎn)。4 .網(wǎng)站的結(jié)構(gòu)設(shè)計(jì)網(wǎng)站目錄的結(jié)構(gòu)對(duì)于網(wǎng)站的上傳和維護(hù)有著重要的作用，不要將所有的文件都不分類別地存在站點(diǎn)根目錄下，應(yīng)該將文件進(jìn)行分類。三.提高網(wǎng)站的打開速度在設(shè)計(jì)網(wǎng)頁時(shí)最基本的要求是美觀且精簡(jiǎn)，保證用戶訪問網(wǎng)頁時(shí)有較高的訪問速度。減小網(wǎng)頁體積可以通過以下幾個(gè)方法來實(shí)現(xiàn)： 網(wǎng)頁布局盡量采用 DIV+CSS方式。通過外部文件的形式使用 CSS+文件和JavaScript腳本文件。 減小網(wǎng)頁中各種多媒體文件的體積，如網(wǎng)頁中的圖像、動(dòng)畫等，通過圖形 處理軟件和動(dòng)畫軟件進(jìn)行優(yōu)化，盡理將它們的大小控制在5

5、0KB以內(nèi)。任務(wù)實(shí)施： 了解用戶需求 網(wǎng)站設(shè)計(jì)實(shí)施建議1制作一個(gè)實(shí)用的網(wǎng)站，在動(dòng)手制作網(wǎng)頁之前，有許多工作要準(zhǔn)備，由此 引入課題，與學(xué)生討論制作網(wǎng)頁前需要準(zhǔn)備的工作程序。2以 茗香綠長(zhǎng)”香茗專賣鏈鎖公司的小型企業(yè)網(wǎng)站為例，介紹制作網(wǎng)站的 工作流程。課后評(píng)價(jià)通過該任務(wù)的學(xué)習(xí)，學(xué)生可詳細(xì)了解一個(gè)網(wǎng)站的詳細(xì)制作過程。課題任務(wù)2站點(diǎn)目錄的規(guī)劃和設(shè)置參考資料教材教學(xué)配套光盤素材教學(xué)方法教師講解、演示。學(xué)生討論，上機(jī)實(shí)踐操作。授課節(jié)數(shù)1課時(shí)教學(xué)目標(biāo)1掌握網(wǎng)站的規(guī)劃，養(yǎng)成良好的工作習(xí)慣。相關(guān)知識(shí)1站點(diǎn)目錄規(guī)劃2素材的收集、制作和整理。學(xué)習(xí)重點(diǎn)1掌握站點(diǎn)目錄規(guī)劃的方法。2學(xué)會(huì)收集、制作和整理素材。教學(xué)內(nèi)容相關(guān)

6、知識(shí)一、站點(diǎn)目錄規(guī)劃站點(diǎn)目錄就是存放當(dāng)前網(wǎng)站中所有網(wǎng)頁文件和相關(guān)文件的文件夾（目錄）。要注意以下幾點(diǎn)。站點(diǎn)根目錄中的文件存放要合理根據(jù)劃分的欄目來建立相應(yīng)的文件夾在每個(gè)欄目文件夾下建立獨(dú)立的資源文件夾目錄的層次不要太深二、素材的收集、制作和整理文字是網(wǎng)頁的主要表現(xiàn)內(nèi)容，要能體現(xiàn)網(wǎng)站及各欄目的主題，充分表達(dá)用 戶創(chuàng)建網(wǎng)站的用意。制作過程中可以圍繞網(wǎng)站主題對(duì)文字進(jìn)行增、刪、改 等處理。圖片是網(wǎng)頁中最重要的兀素之一，使用圖片可以使網(wǎng)頁更加形象生動(dòng)，絢 麗的視覺沖擊，使得網(wǎng)頁更具吸引力。收集方式主要有：通過網(wǎng)絡(luò)搜索， 使用數(shù)碼相機(jī)拍攝，掃描紙質(zhì)圖片，使用Photoahop、Fireworks等專業(yè)軟件

7、制作。網(wǎng)頁中常用的圖片文件格式主要有：GIP、JPG、PNG三種。動(dòng)畫兀素進(jìn)一步豐富了網(wǎng)頁的頁面效果，增強(qiáng)效力。網(wǎng)頁中常用的動(dòng)畫文 件主要有：SWF和GIF兩種格式。聲音兀素為網(wǎng)頁增添了聽覺功能，讓言語、音樂等日常兀素進(jìn)入到網(wǎng)頁， 豐富了網(wǎng)頁的信息傳播方式。網(wǎng)頁中常用的聲音文件主要有：MP3、WMF、RM等。視頻兀素實(shí)現(xiàn)了在網(wǎng)頁中看電影（視頻）的功能，進(jìn)一步強(qiáng)化了網(wǎng)頁的信 息傳播能力。網(wǎng)頁中常用的視頻主要有：RMVB、MPG4、MOV、FLV等。實(shí)施建議1站點(diǎn)目錄規(guī)劃是制作網(wǎng)站的基礎(chǔ)工作，良好的站點(diǎn)規(guī)劃可以為今后的制 作提供極大的便利。2指導(dǎo)學(xué)生奸商合理的站點(diǎn)文件夾。一邊溫習(xí)以前的知識(shí)，一邊實(shí)

8、踐動(dòng)手 操作。課后評(píng)價(jià)該任務(wù)旨讓學(xué)生運(yùn)用前期所學(xué)的知識(shí)獨(dú)立規(guī)劃站點(diǎn)目錄。課題任務(wù)3制作含按鈕、導(dǎo)航欄、表單的交互式網(wǎng)頁參考資料教材教學(xué)配套光盤素材教學(xué)方法教師講解、演示。學(xué)生討論，上機(jī)實(shí)踐操作。授課節(jié)數(shù)1課時(shí)教學(xué)目標(biāo)1掌握制作過的制作網(wǎng)站的導(dǎo)航界面的方法。 2掌握制作表單網(wǎng)頁的方法。相關(guān)知識(shí)1按鈕、導(dǎo)航欄、表單、交互式網(wǎng)頁。學(xué)習(xí)重點(diǎn)1制作過的制作網(wǎng)站的導(dǎo)航界面。2制作表單網(wǎng)頁。教學(xué)內(nèi)容任務(wù)實(shí)施建立導(dǎo)航欄超鏈接打開站exercise中的ex dwt,dwt模板文件。設(shè)置主采單導(dǎo)航如表 10-1表示。 保存模板文件后，相應(yīng)的網(wǎng)頁文件中導(dǎo)航設(shè)置也會(huì)隨模板文件的改變而自 動(dòng)改變。將home.html文

9、件中的主采單導(dǎo)航和輔助導(dǎo)航也設(shè)置成與表10-1和表10-2所示。home.html文件的左側(cè)有 知名氽葉 的分類目錄導(dǎo)航，這是一個(gè)輔助導(dǎo)航 欄，用于介紹我國各類知名茶葉品種。獨(dú)立成為一個(gè)模塊，其相關(guān)網(wǎng)頁和 資源文件存放在站點(diǎn)文件夾中的tea子文件夾中。圖10-15所示就是 綠茶”子頁的結(jié)構(gòu)。茶品導(dǎo)航的相關(guān)鏈接如表10-3所示。在網(wǎng)頁中使用表單茗香綠長(zhǎng)”網(wǎng)站中的 在線預(yù)訂”（如圖10-14所示）和 信息反饋”網(wǎng)頁中 均需使用用表單來收集客戶信息。圖10-16所示就是 信息反饋”頁的表單布局部分。實(shí)施建議1. 結(jié)合以前所學(xué)知識(shí)再次突出網(wǎng)頁導(dǎo)航的重要性。2. 熟練掌握制作導(dǎo)航界面和表單網(wǎng)頁。課后評(píng)論

10、通過該項(xiàng)目的學(xué)習(xí)， 學(xué)生掌握了制作過的制作網(wǎng)站的導(dǎo)航界面的方法和制 作表單網(wǎng)頁的方法。不過學(xué)生如果想制作一個(gè)由吸引力的網(wǎng)站，還需要不 斷地實(shí)踐和學(xué)習(xí)。課題任務(wù)4制作子頁，完善網(wǎng)站參考資料教材教學(xué)配套光盤素材教學(xué)方法教師講解、演示。學(xué)生討論，上機(jī)實(shí)踐操作。授課節(jié)數(shù)1課時(shí)教學(xué)目標(biāo)1. 在前面3個(gè)任務(wù)的基礎(chǔ)上疏理已經(jīng)制作過的制網(wǎng)頁。2. 補(bǔ)充完善沒有制作的網(wǎng)頁。相關(guān)知識(shí)1.補(bǔ)充完善網(wǎng)站中的網(wǎng)頁。學(xué)習(xí)重點(diǎn)1.補(bǔ)充完善網(wǎng)站中的網(wǎng)頁。教學(xué)內(nèi)容任務(wù)實(shí)施在 Windows環(huán)境中，打開站點(diǎn)首頁home.html。測(cè)試首頁中各鏈接是否正常，如果有不能正常打開的網(wǎng)頁，應(yīng)分析是超鏈 接書寫錯(cuò)，還是缺失網(wǎng)頁文件，如果是

11、超鏈接接書與錯(cuò)則通過Dreamweaver修改超鏈接。如果是網(wǎng)頁缺失，則使用 Dreamweaver來補(bǔ)充完善。所有應(yīng)用過網(wǎng)頁模板的網(wǎng)頁，只需測(cè)試其中一個(gè)就可以了，如 comp nay.html。茶道交流只是對(duì)當(dāng)前網(wǎng)頁的一個(gè)簡(jiǎn)單擴(kuò)展，只要能正常鏈接就算成功。 練習(xí)時(shí)，本板塊的更多內(nèi)容可根據(jù)自己的興趣進(jìn)行擴(kuò)充。知名茶品板塊中子頁較多，要對(duì)各種類型的茶葉制作相關(guān)網(wǎng)頁。Ma nager文件中保存著網(wǎng)站的后臺(tái)管理系統(tǒng)。在案例中只是一個(gè)模擬網(wǎng)頁，采用的是框架結(jié)構(gòu)。全面測(cè)試各網(wǎng)頁正確無誤后，在通過Dreamweaver將所有使用至網(wǎng)頁模板和為的網(wǎng)頁文件 從模板中分離”以及 從源文件中分離” 發(fā)布網(wǎng)頁。實(shí)施

12、建議1結(jié)合前面3個(gè)任務(wù)，疏理已經(jīng)制作過的制網(wǎng)頁?？梢酝ㄟ^瀏覽的方式來 檢查哪些網(wǎng)頁尚未完成，也可通過網(wǎng)站地圖來檢查。2應(yīng)用已經(jīng)學(xué)過的知識(shí)，對(duì)布局相似的網(wǎng)頁使用模板和庫，布局不冋的網(wǎng) 頁則需要從頭新建。課后評(píng)論通過該項(xiàng)目的學(xué)習(xí)，學(xué)生掌握了制作一個(gè)具有特色的網(wǎng)站的流程及方法。 網(wǎng)站是否有吸引力除了設(shè)計(jì)出養(yǎng)觀的界面，還需要不斷地翻新內(nèi)容，不斷 地精心維護(hù)?！窘M織教學(xué)】檢查學(xué)生出勤情況，做好學(xué)生考勤記錄。強(qiáng)調(diào)上課課堂紀(jì)律，活躍互動(dòng)教學(xué)氣氛?！菊n題導(dǎo)入】通過前面的學(xué)習(xí)，我們掌握了靜態(tài)網(wǎng)頁制作的一般方法。 網(wǎng)站就是若干網(wǎng)頁文件和相關(guān)資源 構(gòu)成的，如何合理地設(shè)置網(wǎng)站的功能， 規(guī)劃網(wǎng)頁的結(jié)構(gòu)， 組織網(wǎng)站的資源以及后期維護(hù)等各 方面的工作是進(jìn)行網(wǎng)站綜合設(shè)計(jì)的基礎(chǔ)。 釅錒極額閉鎮(zhèn)檜豬訣錐顧葒鈀。網(wǎng)站制作的基本流程通常是：了解客戶的需求 T網(wǎng)站設(shè)計(jì)T制作網(wǎng)站T測(cè)試網(wǎng)站T發(fā)布網(wǎng)站T維護(hù)網(wǎng)站。在該項(xiàng)目的學(xué)習(xí)中， 我們通過制作一個(gè)小型企業(yè)網(wǎng)站，了解制作一個(gè)網(wǎng)站的基本流程，并通過該項(xiàng)目的學(xué)習(xí)，系統(tǒng)地回憶以前所學(xué)的知識(shí)，溫故知新。彈貿(mào)攝爾霽斃攬磚鹵廡詒爾膚?！炯寄苡?xùn)練】（上機(jī)實(shí)訓(xùn)：6課時(shí)）一、