《網(wǎng)頁設計與制作》綜合實訓指導書

1、生命賜給我們，我們必須奉獻生命，才能獲得生命。網(wǎng)頁設計與制作綜合實訓指導書1.1 實訓意義網(wǎng)頁設計與制作綜合實訓是教學過程中重要的實踐性教學環(huán)節(jié)。它是根據(jù)專業(yè)教學計劃 的要求，在教師指導下對學生進行的網(wǎng)頁制作專業(yè)技能的訓練，培養(yǎng)學生綜合運用理論知識 分析和解決實際問題的能力，實現(xiàn)由理論知識向操作技能的轉(zhuǎn)化，是對理論與實踐教學效果 的檢驗，也是對學生綜合分析能力與獨立工作能力的培養(yǎng)過程。因此，加強實踐教學環(huán)節(jié)， 搞好實訓教學，對實現(xiàn)本專業(yè)的培養(yǎng)目標，提高學生的綜合素有著重要的作用。1.2 實訓目的1. 通過綜合實訓進一步鞏固、深化和擴展學生的理論知識與專業(yè)技能。1) 掌握規(guī)劃網(wǎng)站的內(nèi)容結構、目錄

2、結構、鏈接結構的方法。2) 熟練掌握網(wǎng)頁制作軟件Dreamweaver CS4 的基本操作和使用技能。3) 掌握頁面的整體控制和頭部內(nèi)容設置的方法。4) 熟練掌握網(wǎng)頁頁面布局的各種方法。5) 熟練掌握在網(wǎng)頁中輸入、設置標題和正文文字的方法。6) 熟練掌握用Photoshop 制作和處理網(wǎng)頁的圖片素材，用Flash 制作動畫的方法。7) 熟練掌握在網(wǎng)頁中插入圖像、flash 動畫、背景音樂的方法。8) 掌握建立各種形式超級鏈接的方法。9) 掌握表單網(wǎng)頁制作方法。10) 掌握網(wǎng)頁特效的制作方法。11) 掌握網(wǎng)站測試的方法。2. 訓練和培養(yǎng)學生獲取信息和處理信息的能力，充分培養(yǎng)和提高學生的動手能力，

3、學會通過網(wǎng)站、書籍、素材光盤等方式收集所需的文字資料、圖像資料、網(wǎng)頁特效等。3. 培養(yǎng)學生運用所學的理論知識和技能解決網(wǎng)站開發(fā)過程中所遇到的實際問題的能力及其基本工作素質(zhì)。4. 培養(yǎng)學生理論聯(lián)系實際的工作作風、嚴肅認真的科學態(tài)度以及獨立工作的能力，樹立自信心。5. 訓練和培養(yǎng)團隊協(xié)作精神和共同開發(fā)網(wǎng)站的綜合能力。希望是本無所謂有，無所謂無的。這正如地上的路；其實地上本沒有路，走的人多了，也便成了路。1.3 實訓要求1. 動手制作網(wǎng)頁之前：1) 必須認真做好網(wǎng)站的需求分析，包括市場調(diào)查，定位網(wǎng)站目的，策劃好網(wǎng)站的主題及功能定位，創(chuàng)意出網(wǎng)站的風格和亮點，確定網(wǎng)頁色彩基調(diào)。2) 規(guī)劃好網(wǎng)站的風格和結

4、構，網(wǎng)站主要內(nèi)容及板塊，各板塊的具體內(nèi)容及功能。做出“網(wǎng)站層次結構圖” 參照附表 1-1 以及“網(wǎng)頁版面設計圖” 參照附表 1-2。3) 根據(jù)指定的網(wǎng)站主題書編寫*網(wǎng)站策劃書參照附表 1-3。2創(chuàng)建完善的目錄結構。站點文件夾為班級學號組號(如：11 應用（01）班 01 組)站點文件夾中所包含文件夾：Images （存放圖片文件）Swf（存放動畫文件） Templates（存放模版文件） Library （存放庫文件） other（存放其它文件）源文件 （存放自己設計的圖形、動畫文件） 其余視文件夾需要而添加，全部用英文命名站點文件夾中所包含文件： index.html（首頁）*.css （樣

5、式表文件）其余文件名視需要而添加，全部用英文命名(各組將站點文件夾壓縮上交，壓縮文件不要超過 20M，大的影音文件不要放在壓縮在文件里)3. 制作網(wǎng)頁前，收集好所需的文字資料、圖像資料、網(wǎng)頁特效。用Photoshop 制作和處理網(wǎng)頁所需的圖片、用Flash 制作網(wǎng)頁所需的動畫。主要圖片和動畫為原創(chuàng)（保存有源文件），主頁標題圖片（動畫）必須為原創(chuàng)。4. 所創(chuàng)建的網(wǎng)站至少包括8 個以上頁面，分為三層，第一層為首頁，第二層為4 個二級子頁，第三層為 2-3 個內(nèi)容頁。網(wǎng)頁中必須要用到 CSS 以及 DIV 技術實現(xiàn)網(wǎng)頁元素的修飾及布局。網(wǎng)站頁面大小應該滿足至少 800*600 分辨率。1) 首頁采用

6、表格或 CSS+DIV 進行布局，必須包含導航欄，顯示時間特效；2) 4 個二級子頁分別為框架網(wǎng)頁、表單網(wǎng)頁，并有進行表單驗證及提交的程序、利用模板制作的網(wǎng)頁、利用布局表格制作的網(wǎng)頁。3) 內(nèi)容頁分別為表格或 CSS+DIV 布局的網(wǎng)頁。4) 網(wǎng)站頁面中特效要求利用 Javascrip 腳本語言+CSS+DIV 實現(xiàn)包含至少使用任何 1種以上特殊效果：滾動字幕和圖片、 flash 按鈕、浮動廣告、特效菜單等。應用JavaScript 制作特效的網(wǎng)頁、應用行為制作特效的網(wǎng)頁。5) 各個頁面根據(jù)需要插入合適的圖像和Falsh 動畫，首頁要求插入背景音樂。6) 所有頁面要求內(nèi)容充實、布局合理、顏色搭

7、配協(xié)調(diào)、美觀大方。7) 各個頁面之間導航清晰、鏈接準確無誤。5. 網(wǎng)頁的版面尺寸應用符合網(wǎng)頁設計的規(guī)范，網(wǎng)站中所有文件、文件夾的命名應規(guī)范 ，盡量做到字母數(shù)量少，見名知意、容易理解。6. 實訓過程中既要虛心接受老師的指導，又要充分發(fā)揮主觀能動性、獨立思考、努力鉆研、勤于實踐、勇于創(chuàng)新。7. 在設計過程中，要嚴格要求自己，樹立嚴密、嚴謹?shù)目茖W態(tài)度，必須按時、保質(zhì)、保量完成實訓任務。要求獨立完成規(guī)定的實訓內(nèi)容，不得弄虛作假，不準抄襲或拷貝他人的網(wǎng)頁或其他內(nèi)容。8. 小組成員之間，既要分工明確，又要密切合作，培養(yǎng)良好的互助、協(xié)作精神。9. 實訓期間，嚴格遵守學校的規(guī)章制度，不得遲到、早退、曠課。缺課

8、節(jié)數(shù)達三分之一以上者，實訓成績按不及格處理。10. 實訓環(huán)境為 Windows XP 及以上版本的操作系統(tǒng)，網(wǎng)頁制作軟件為 Dreamweaver CS 4 ，要可以運用Photoshop 制作和處理圖像，運用Flash 制作動畫。1.4 實訓步驟序號實訓項目名稱項目類型必做/ 選做實訓準備、制定實訓計劃，分組：4-5 人為一組，每一組選定一名組長，組長主要負責考勤以及與指導教師聯(lián)系。選題：根據(jù)指定的周一 網(wǎng)站主題書寫*網(wǎng)站策劃書，各小組進行分工。根據(jù)實訓時間的長短制定一個切實可行的網(wǎng)站開發(fā)計劃。準備素材，搜集與主題相關的文字、圖像、動畫、音樂等資料。準備型必做設計網(wǎng)站的內(nèi)容結構、目錄結構和鏈

9、接結構，設計網(wǎng)站層次結周二構圖，設計首頁及其頁面的版式結構圖。創(chuàng)建本地網(wǎng)站，建立網(wǎng)站的設計型必做目錄結構。周三運用 Photoshop 制作和處理網(wǎng)頁所需圖像，運用 Flash 制作網(wǎng)頁所需動畫。制作首頁。設計型必做周四制作二級子頁。制作內(nèi)容頁。創(chuàng)建超級鏈接。設計型必做周五測試與瀏覽網(wǎng)頁。書寫實訓報告書。測試型必做1.5 評分標準根據(jù)實訓期間的紀律考核情況、對待實訓的態(tài)度，站點的目錄結構，各個頁面的布局結 構、顏色搭配，文字、圖像、動畫的合理搭配，網(wǎng)頁之間的鏈接是否順暢，網(wǎng)頁制作技術的應用，網(wǎng)站的整體瀏覽效果等方面進行綜合評分。評分參考標準如下表所示。序號考核項目1網(wǎng)站策劃書評分比例10%2網(wǎng)

10、站效果34紀律考核創(chuàng)新情況實訓報告網(wǎng)站策劃書寫認真、完整、字跡清楚、頁面整潔，內(nèi)容充實。（1） 內(nèi)容方面：主題明確，內(nèi)容健康、具體，各個頁面的文字、圖像、動畫能夠清晰地表達主題，各級內(nèi)容層次清晰，同級頁面格式統(tǒng)一。（2） 版面結構：版面結構合理，頁面色調(diào)和諧，每個頁面都有返回上一級或鏈接到其他頁面的文字或按鈕。（3） 視覺感受：色彩搭配協(xié)調(diào)、美觀，頁面設計規(guī)范，沒有出現(xiàn)亂碼、空鏈接和錯誤鏈接。（4） CSS 以及DIV 技術實現(xiàn)的網(wǎng)頁元素的修飾及布局準確。（5） 網(wǎng)站風格：網(wǎng)站具有特色，主題、文字、圖像、動畫有創(chuàng)新。實訓期間組織紀律性強，無遲到、早退、缺課現(xiàn)象制作的網(wǎng)頁具有獨創(chuàng)性，構思巧妙、有

11、新意小組成員協(xié)作精神強，所有的成員在規(guī)定時間內(nèi)完成實訓任務， 無雷同現(xiàn)象或抄襲現(xiàn)象。實訓報告書寫認真、完整、字跡清楚、頁面整潔，實訓收獲較大。合計60%10%5%5成員協(xié)作5%610%100%網(wǎng)站開發(fā)實訓的參考評分標準組號組成員實訓題目12學號：2011316612011316615學號：2011316662011316670制作班級網(wǎng)站制作學校系部網(wǎng)站3學號：2011316712011316675制作學校圖書館網(wǎng)站4學號：2011316762011316680制作攝影網(wǎng)站5學號：201131681201131685學號：2011316862011316690制作電腦學習網(wǎng)站6制作旅游公司網(wǎng)站

12、7學號：2011316912011316695制作電腦公司網(wǎng)站8學號：2011316962011316700制作體育知識網(wǎng)站9學號：2011317012011316705制作軍事知識網(wǎng)站10學號：2011317062011316710制作圖書網(wǎng)站1.6 實訓分組及實訓題目附表 1-1主頁欄目 1欄目 2欄目 3欄目 4內(nèi)容 1內(nèi)容 2內(nèi)容 3附表 1-2標題導航內(nèi)容左列內(nèi)容正文內(nèi)容左列內(nèi)容腳注附表 1-3*網(wǎng)站策劃書（2 號、加粗、宋體、居中）一、網(wǎng)站分析與定位：（4 號、加粗、宋體）1、建設網(wǎng)站目的主題、及功能定位。（5 號、宋體、1.5 倍行距）2、建設網(wǎng)站前的市場分析。3、網(wǎng)站的風格和亮點。4、網(wǎng)站技術解決方案。二、網(wǎng)站內(nèi)容規(guī)劃（4 號、加粗、宋體）1、網(wǎng)站主要內(nèi)容及板塊（5 號、宋體、1.5 倍行距）2、各板塊