1、網頁設計與制作綜合實訓指導書1.1實訓意義網頁設計與制作綜合實訓是教學過程中重要的實踐性教學環節。它是根據專業教學計劃的要求， 在教師指導下對學生進行的網頁制作專業技能的訓練，培養學生綜合運用理論知識分析和解決實際問題的能力，實現由理論知識向操作技能的轉化，是對理論與實踐教學效果的檢驗，也是對學生綜合分析能力與獨立工作能力的培養過程。因此，加強實踐教學環節，搞好實訓教學，對實現本專業的培養目標，提高學生的綜合素有著重要的作用。1.2實訓目的1通過綜合實訓進一步鞏固、深化和擴展學生的理論知識與專業技能。1) 掌握規劃網站的內容結構、目錄結構、鏈接結構的方法。2) 熟練掌握網頁制作軟件 Dream

2、weaver CS4 的基本操作和使用技能。3) 掌握頁面的整體控制和頭部內容設置的方法。4) 熟練掌握網頁頁面布局的各種方法。5) 熟練掌握在網頁中輸入、設置標題和正文文字的方法。6)熟練掌握用 Photoshop 制作和處理網頁的圖片素材，用Flash 制作動畫的方法。7)熟練掌握在網頁中插入圖像、flash 動畫、背景音樂的方法。8) 掌握建立各種形式超級鏈接的方法。9) 掌握表單網頁制作方法。10) 掌握網頁特效的制作方法。11) 掌握網站測試的方法。2訓練和培養學生獲取信息和處理信息的能力，充分培養和提高學生的動手能力，學會通過網站、書籍、素材光盤等方式收集所需的文字資料、圖像資料、

3、網頁特效等。3培養學生運用所學的理論知識和技能解決網站開發過程中所遇到的實際問題的能力及其基本工作素質。4培養學生理論聯系實際的工作作風、嚴肅認真的科學態度以及獨立工作的能力，樹立自信心。5訓練和培養團隊協作精神和共同開發網站的綜合能力。1.3實訓要求1動手制作網頁之前：1) 必須認真做好網站的需求分析， 包括市場調查， 定位網站目的， 策劃好網站的主題及功能定位，創意出網站的風格和亮點，確定網頁色彩基調。2) 規劃好網站的風格和結構，網站主要內容及板塊，各板塊的具體內容及功能。做出“網站層次結構圖”參照附表 1-1 以及“網頁版面設計圖”參照附表 1-2。3) 根據指定的網站主題書編寫 *

4、網站策劃書參照附表 1-3。2創建完善的目錄結構。站點文件夾為班級學號組號(如： 11 應用（ 01）班 01 組 )站點文件夾中所包含文件夾：Images （存放圖片文件）Swf （存放動畫文件）Templates（存放模版文件）Library（存放庫文件）other （存放其它文件）源文件（存放自己設計的圖形、動畫文件）其余視文件夾需要而添加，全部用英文命名站點文件夾中所包含文件：index.html （首頁）*.css （樣式表文件）其余文件名視需要而添加，全部用英文命名( 各組將站點文件夾壓縮上交，壓縮文件不要超過20M ，大的影音文件不要放在壓縮在文件里)3制作網頁前，收集好所需的文

5、字資料、圖像資料、網頁特效。用Photoshop 制作和處理網頁所需的圖片、用Flash 制作網頁所需的動畫。主要圖片和動畫為原創（保存有源文件），主頁標題圖片（動畫）必須為原創。4所創建的網站至少包括8 個以上頁面，分為三層，第一層為首頁，第二層為4 個二級子頁，第三層為2-3個內容頁。網頁中必須要用到CSS 以及DIV技術實現網頁元素的修飾及布局。網站頁面大小應該滿足至少800*600分辨率。1) 首頁采用表格或 CSS+DIV 進行布局，必須包含導航欄，顯示時間特效；2) 4 個二級子頁分別為框架網頁、表單網頁，并有進行表單驗證及提交的程序、利用模板制作的網頁、利用布局表格制作的網頁。3

6、) 內容頁分別為表格或 CSS+DIV 布局的網頁。4)網站頁面中特效要求利用Javascrip 腳本語言 +CSS+DIV實現包含至少使用任何1種以上特殊效果：滾動字幕和圖片、flash 按鈕、浮動廣告、特效菜單等。應用JavaScript 制作特效的網頁、應用行為制作特效的網頁。5) 各個頁面根據需要插入合適的圖像和Falsh 動畫，首頁要求插入背景音樂。6) 所有頁面要求內容充實、布局合理、顏色搭配協調、美觀大方。7) 各個頁面之間導航清晰、鏈接準確無誤。5網頁的版面尺寸應用符合網頁設計的規范，網站中所有文件、文件夾的命名應規范，盡量做到字母數量少，見名知意、容易理解。6實訓過程中既要虛

7、心接受老師的指導，又要充分發揮主觀能動性、獨立思考、努力鉆研、勤于實踐、勇于創新。7在設計過程中，要嚴格要求自己，樹立嚴密、嚴謹的科學態度，必須按時、保質、保量完成實訓任務。要求獨立完成規定的實訓內容，不得弄虛作假， 不準抄襲或拷貝他人的網頁或其他內容。8小組成員之間，既要分工明確，又要密切合作，培養良好的互助、協作精神。9實訓期間，嚴格遵守學校的規章制度，不得遲到、早退、曠課。缺課節數達三分之一以上者，實訓成績按不及格處理。10實訓環境為Windows XP 及以上版本的操作系統，網頁制作軟件為Dreamweaver CS4 ，要可以運用Photoshop 制作和處理圖像，運用Flash 制

8、作動畫。1.4實訓步驟序號實訓項目名稱項目類型必做 /選做實訓準備、制定實訓計劃，分組：4-5 人為一組，每一組選定一名組長，組長主要負責考勤以及與指導教師聯系。選題：根據指定的周一網站主題書寫 * 網站策劃書，各小組進行分工。根據實訓時間的準備型必做長短制定一個切實可行的網站開發計劃。準備素材，搜集與主題相關的文字、圖像、動畫、音樂等資料。設計網站的內容結構、目錄結構和鏈接結構，設計網站層次結周二構圖，設計首頁及其頁面的版式結構圖。創建本地網站，建立網站的設計型必做目錄結構。周三運用 Photoshop 制作和處理網頁所需圖像，運用Flash 制作網設計型必做頁所需動畫。制作首頁。周四制作二

9、級子頁。制作內容頁。創建超級鏈接。設計型必做周五測試與瀏覽網頁。書寫實訓報告書。測試型必做1.5評分標準根據實訓期間的紀律考核情況、對待實訓的態度，站點的目錄結構，各個頁面的布局結構、顏色搭配，文字、圖像、動畫的合理搭配，網頁之間的鏈接是否順暢，網頁制作技術的應用，網站的整體瀏覽效果等方面進行綜合評分。評分參考標準如下表所示。網站開發實訓的參考評分標準序號考核項目評分比例1網站策劃書網站策劃書寫認真、完整、字跡清楚、頁面整潔，內容充實。10%（ 1）內容方面：主題明確，內容健康、具體，各個頁面的文字、圖像、動畫能夠清晰地表達主題，各級內容層次清晰，同級頁面格式統一。（ 2）版面結構：版面結構合

10、理，頁面色調和諧，每個頁面都有返2網站效果回上一級或鏈接到其他頁面的文字或按鈕。60%（ 3）視覺感受：色彩搭配協調、美觀，頁面設計規范，沒有出現亂碼、空鏈接和錯誤鏈接。（ 4）CSS 以及 DIV 技術實現的網頁元素的修飾及布局準確。（ 5）網站風格： 網站具有特色， 主題、文字、 圖像、動畫有創新。3紀律考核實訓期間組織紀律性強，無遲到、早退、缺課現象10%4創新情況制作的網頁具有獨創性，構思巧妙、有新意5%5成員協作小組成員協作精神強，所有的成員在規定時間內完成實訓任務，5%無雷同現象或抄襲現象。6實訓報告實訓報告書寫認真、完整、字跡清楚、頁面整潔，實訓收獲較大。10%合計100%組號1

11、23456789101.6實訓分組及實訓題目組成員實訓題目學號： 201131661 2011316615制作班級網站學號： 201131666 2011316670制作學校系部網站學號： 201131671 2011316675制作學校圖書館網站學號： 201131676 2011316680制作攝影網站學號： 201131681 201131685制作電腦學習網站學號： 201131686 2011316690制作旅游公司網站學號： 201131691 2011316695制作電腦公司網站學號： 201131696 2011316700制作體育知識網站學號： 201131701 2011316705制作軍事知識網站學號： 201131706 2011316710制作圖書網站附表 1-1主頁欄目1欄目2欄目3欄目4內容1內容2內容3附表 1-2標題導航內容左列內容正文內容左列內容腳注附表 1-3* 網站策劃書 （ 2 號、加粗、宋體、居中）一、網站分析與定位： （ 4 號、加粗、宋體）1 、建設網站目的主題、及功能定位。 （5 號、宋體、 1.5 倍行距）2 、建設網站前的市場分析。3 、網站的風格和亮點。4 、網站技術解決方案。二、網站內容規劃 （ 4 號、加粗、宋體）1 、網站主要內容及板塊 （5 號、宋體、 1.5 倍行距）2 、各板塊的具體內容及功能3 、網頁色彩基