一.實訓意義：網(wǎng)頁設計與制作綜合實訓是教學過程中重要的實踐性教學環(huán)節(jié).它是根據(jù)專業(yè)教學計劃的要求.在教師的指導下對學生進行網(wǎng)頁制作專業(yè)技能的訓練,培養(yǎng)學生綜合運用理論知識分析和解決實際問題的能力,實現(xiàn)由理論知識向操作技能的培養(yǎng)過程.因此加強實踐教學環(huán)節(jié),搞好實訓教學,對實現(xiàn)本專業(yè)的培養(yǎng)目標,提高學生的綜合素質有著重要的作用.二.實訓目的:1. 通過綜合實訓進一步鞏固,深化和加強學生的理論知識于專業(yè)技能。(1) 掌握規(guī)劃網(wǎng)站的內(nèi)容結構,目錄結構,鏈接結構的方法。(2) 熟練掌握網(wǎng)頁制作軟件Dreamweaver8和基本操作和使用技能。(3) 掌握頁面的整體控制和頭部內(nèi)容設置的方法。(4) 熟練掌握網(wǎng)頁頁面布局的各種方法。(5) 熟練掌握在網(wǎng)頁中輸入,設置標題和正文文字的方法。(6) 熟練掌握在網(wǎng)頁中插入圖像,Flash動畫和背景音樂的方法。(7) 熟練建立各種形式的超級鏈接的方法。(8) 掌握表單網(wǎng)頁制作方法。(9) 掌握網(wǎng)頁特效制作方法。(10) 掌握網(wǎng)站測試的方法。2. 訓練和培養(yǎng)學生獲取信息和處理信息的能力,充分培養(yǎng)和提高學生的動手能力,學會通過網(wǎng)站、書籍、素材光盤等方式收集所需的文字資料、圖像資料、Flash動畫和網(wǎng)頁特效等。3. 培養(yǎng)學生運用所學的理論知識和技能解決網(wǎng)站開發(fā)過程中所遇到的實際問題的能力及基本工作素質。4. 培養(yǎng)學生理論聯(lián)系實際的工作作風,嚴肅認真的科學態(tài)度以及獨立工作的能力,樹立自信心。三實驗步驟:1. 網(wǎng)站主題 我的網(wǎng)站的主題在于從各個方面全面的介紹網(wǎng)絡游戲專題,包括每個頁面都有介紹不同的游戲資料，、心得、圖片等內(nèi)容。同時，網(wǎng)站里的每一個網(wǎng)頁都有統(tǒng)一的風格,每一個網(wǎng)頁的主題色彩都是淺藍色，給人帶來一種溫和舒適的感覺。最重要給瀏覽者好的欣賞感受。2 網(wǎng)站材料 網(wǎng)站材料主要在網(wǎng)站上搜集所要的網(wǎng)頁信息,包括圖片、文字、相關的資料。同時,查詢相關的書籍、百度和素材光盤等方式收集所需的文字資料，圖像資料，F(xiàn)lash動畫和網(wǎng)頁特效等，用以得來更加具有說服力的頁面。想要做好自己的網(wǎng)站，就要盡量搜集材料，搜集材料越多，以后制作網(wǎng)站就越容易。精選自己收集的材料，作為自己制作網(wǎng)頁的素材，這樣就可以做好一個好的網(wǎng)站。3 網(wǎng)站規(guī)劃 我的網(wǎng)站共有6個主頁面：首頁、圖片專區(qū)、視頻專區(qū)、玩家交流、幫助中心和聯(lián)系我們。每一個頁面用統(tǒng)一的背景，以保證網(wǎng)站統(tǒng)一的頁面風格。如下圖：Index 網(wǎng)站整體色為淺藍色，突出主題，顏色沒有過多，過雜，用以避免給人一種雜亂的感覺。版面設計十分靈活，根據(jù)各部分內(nèi)容的不同適當?shù)淖杂稍O計。網(wǎng)頁布局主要用框架和表格，用框架定位內(nèi)容的大體結構，再用表格具體定位。位置的設計也是重要的一個部分，根據(jù)具體內(nèi)容決定大體結構，相同的風格調用CSS設計一個樣式，以保證隨時、準確的調用。另外，為了網(wǎng)頁布局的協(xié)調，我加入適當?shù)腇lash動態(tài)圖片，用以達到更好的瀏覽效果。4網(wǎng)站的制作工具 做網(wǎng)頁時主要使用的是Deamweaver8軟件。另外，為了處理網(wǎng)頁中的其他元素，還使用了Photoshop、GifAnimator等軟件。5 制作網(wǎng)站的網(wǎng)頁 素材、風格、模版都設計好以后，下一步就是具體的制作網(wǎng)頁。制作網(wǎng)站時，首先要做到站點的規(guī)劃，建立一個本地站點“TT”，建立的各個頁面都應該放在本地站點中，在網(wǎng)頁制作時所需的各個元素都進行統(tǒng)一的管理，建立統(tǒng)一的文件夾放同一類型的文件，我在制作時建立了“images”文件夾存放圖片專用的，網(wǎng)頁中的CSS樣式文件也統(tǒng)一管理，做到有條理，我設計的網(wǎng)站首頁如下圖： 以導航欄為界，上面插入一個自己制作的Flash動畫，用為給瀏覽者好的視角享受。Flash動畫制作過程：首先在網(wǎng)上下載下來的背景圖片，以背景圖片的內(nèi)容做標題，設計“夢幻西游”四個字為主題突出網(wǎng)頁游戲效果，還有網(wǎng)頁的網(wǎng)址，加上字體顏色閃動效果，給人帶來一種夢幻的感覺，中間也插入標語，分別上下字體移動，由淡到實的顏色閃動效果，在由左右變換顏色彈走，顯得整個Flash動畫比較生動些！網(wǎng)站導航分別還有圖片專區(qū)，視頻專區(qū)，玩家交流等！介紹下圖片專區(qū)內(nèi)容如下： 圖片專區(qū)頁面中四副圖片都是上網(wǎng)搜索下來加以PS之后成品的，頁面要設置好位置，每張圖片大小格式一樣，排整對齊有列序，給人一個舒適的瀏覽感覺，例如第一張圖片在Photoshop中加以相框的外表顯得圖片比較生動點！第二張圖片加以光暈濾鏡效果！使圖片明亮清晰，第三，四張圖片加以修飾亮度暗度光澤等效果，顯得圖片真實動人。 跟住到視頻專區(qū)頁面介紹如下： 視頻專區(qū)頁面比較簡單點，只是自己制作一個簡單的Flash動畫插入去頁面中間顯示的。制作的過程就是：新建個深藍色的背景，在從左上角設計夢幻西游這四個字標題，右下角輸入主頁網(wǎng)址格式內(nèi)容。中間制作一個IE的圖片加入旋轉一周動態(tài)代碼，使IE圖片能自動播放轉動，中間也插入文字設置為放大縮細感覺和顏色變換。完成后測試過就直接發(fā)布上頁面中排好。還有其他導航都插入相關的資料文字來完成的，主頁左邊也做好相關內(nèi)容的資料題目，每個鏈接都有吾同資料內(nèi)容顯示。每一個標題都好做相關鏈接資料的內(nèi)容題材。在主頁、圖片專區(qū)、視頻專區(qū)這三個頁面都插入吾同的傾聽動人的音樂了。最后，形成一個統(tǒng)一的整體的，方便給瀏覽者進行了各個頁面間的跳轉。6 上傳測試網(wǎng)站 網(wǎng)頁制作完畢以后，要進行反復的測試，保存后在IE瀏覽器上反復運行自己的網(wǎng)站，用以發(fā)現(xiàn)設計中的缺陷并及時改正。四. 設計特色我覺得我的網(wǎng)頁設計最大特點就是色彩談雅，布局協(xié)調，結構清晰。給人以清麗，純樸的感覺。另外，設計過程插入大量搜集資料和圖片等，還加入傾聽動人的音樂。五 心得體會 我通過這次實訓中非常感謝學校給了我這次制作網(wǎng)頁的機會，通過這次實訓，我學到了很多有價值的東西。我獨立的完成網(wǎng)站設計的全過程，把設計中散亂的網(wǎng)頁鏈接成框架體系，使平時學到的知識點有了很高的提高，并且合理的在試驗中進行了實踐。在這次實驗的過程中，我搜集了大量的素材和網(wǎng)頁設計的技術技巧方面的書，增加知識面，給我在以后的設計