網(wǎng)制作實訓報告

1、廣西科技大學鹿山學院課程設(shè)計報告課程名稱：網(wǎng)頁制作課程設(shè)計課題名稱：我的夢幻網(wǎng)指導教師：韋 靈班 級：計軟141班姓 名：鄧康言學 號：成績評定：指導教師簽字：2015 年07 月07 日目錄一 . 網(wǎng)頁制作課程設(shè)計目的1. 實訓意義： ?本次網(wǎng)頁設(shè)計與制作實訓是網(wǎng)頁教學過程中重要的實踐性教學環(huán)節(jié).它是根據(jù)網(wǎng)頁教學計劃的要求. 在教師的指導下進行網(wǎng)頁制作專業(yè)技能的訓練 , 培養(yǎng)學生綜合運用理論知識分析和解決實際問題的能力 , 實現(xiàn)由理論知識向操作技能的培養(yǎng)過程. 因此加強實踐教學環(huán)節(jié), 搞好實訓教學 , 對實現(xiàn)本專業(yè)的培養(yǎng)目標, 提高學生的綜合素質(zhì)有著重要的作用 .2. 實訓目的 :?通過綜合

2、實訓進一步鞏固 , 深化和加強我的理論知識(1)? 掌握規(guī)劃網(wǎng)站的內(nèi)容結(jié)構(gòu) , 目錄結(jié)構(gòu) , 鏈接結(jié)構(gòu)的方法。 ?(2)? 熟練掌握網(wǎng)頁制作軟件Dreamweaver8 和基本操作和使用。 ?(3)?掌握頁面的整體控制和頭部內(nèi)容設(shè)置的方法。？(4)?熟練掌握網(wǎng)頁頁面布局的各種方法。？(5)?熟練掌握在網(wǎng)頁中輸入，設(shè)置標題和正文文字的方法。？(6)?熟練掌握在網(wǎng)頁中插入圖像，F(xiàn)lash 動畫和背景音樂的方法。？(7)?熟練建立各種形式的超級鏈接的方法。？(8)?掌握表單網(wǎng)頁制作方法。？(9)?掌握網(wǎng)頁特效制作方法。？(10)?掌握網(wǎng)站測試的方法。？2 .?訓練和培養(yǎng)我獲取信息和處理信息的能力，充

3、分培養(yǎng)和提高動手能力，學會通過網(wǎng)站、書籍、素材等方式收集所需的文字資料、圖像資料、Flash動畫和網(wǎng)頁特效等。？3 .?培養(yǎng)我運用所學的理論知識和技能解決網(wǎng)站開發(fā)過程中所遇到的實際問題的能力及基本工作素質(zhì)。？4 .?培養(yǎng)我的理論聯(lián)系實際的工作作風，嚴肅認真的科學態(tài)度以及獨立工作的能力，樹立自信心。？二、課程設(shè)計內(nèi)容1 .網(wǎng)站主題我的夢幻網(wǎng)夢幻西游是以款以著名的章回小說西游記為背景，通過 Q版 的人物，試圖營造出浪漫的游戲氣氛風格的游戲。我的網(wǎng)站主題在于從各個方面來介紹這款游戲的特色的游戲?qū)ｎ}。包 括每個頁面都有介紹不同的游戲資料、心得、圖片等內(nèi)容。同時，每個網(wǎng)站都有統(tǒng)一的風格。給人帶來一種溫馨

4、和舒服的感覺。最重要的是為了給 瀏覽者好的欣賞感受。2 .網(wǎng)站材料制作網(wǎng)站的主題材料主要在網(wǎng)站上搜集所要的網(wǎng)頁信息，包括圖片、文字、相關(guān)的資料。同時,查詢相關(guān)的書籍、百度等方式收集所需的文字 資料，圖像資料，F(xiàn)lash動畫和網(wǎng)頁特效等，用以得來更加具有說服力的 頁面。為了做好自己的網(wǎng)站，盡量搜集材料，搜集材料越多，以后制作網(wǎng) 站就越容易。精選自己收集的材料，作為自己制作網(wǎng)頁的素材。這樣就可 以做一個好的網(wǎng)站。3 .網(wǎng)站規(guī)劃模塊設(shè)計：我的網(wǎng)站共有8個欄目組成：首頁、背景故事、寵物介紹、門派介紹、 裝備介紹、地圖介紹、人物介紹和我的夢幻。每一個頁面用統(tǒng)一的風格和 不同的背景，為了給瀏覽者好的欣賞感

5、受。站點規(guī)劃：站點下共有五個主文件夾和若干自文件夾： CSS html、images、logo、 sucai。這五個主文件夾分別存放所用到的網(wǎng)頁主題素材。三、課程設(shè)計步驟素材、風格、模版都設(shè)計好以后，下一步就是具體的制作網(wǎng)頁。制作 網(wǎng)站時，首先要做到站點的規(guī)劃，建立一個本地站點“我的夢幻網(wǎng)”，建 立的各個頁面都應該放在本地站點中，在網(wǎng)頁制作時所需的各個元素都進行統(tǒng)一的管理，建立統(tǒng)一的文件夾放同一類型的文件，我在制作時建立了“images”文件夾存放圖片專用的，網(wǎng)頁中的 CSS羊式文件也統(tǒng)一管理,做到有條理，我設(shè)計的網(wǎng)站規(guī)劃如下圖我的夢幻網(wǎng)四肯網(wǎng)站各霾塊實現(xiàn)景物1. 彝的夢幻網(wǎng)模塊功能：介通過分

6、為宣傳視頻、介可以大白 導航不常景1圖片。勺豕網(wǎng)的結(jié)構(gòu)場內(nèi)容首頁班的夢幻網(wǎng)" 馬口Nj其中導航又分為8個欄目組成：首頁、背景故事、寵物介紹、門派介紹、裝備介紹、地圖介紹、人物介紹和我的 夢幻。每一個頁面用統(tǒng)一的風格和不同的背景，為了給瀏覽者好的欣賞感網(wǎng)頁功能實現(xiàn):2. 背景故事模塊功能:通過此模塊?？梢源笾铝私獯擞螒虻谋尘肮适戮W(wǎng)頁功能實現(xiàn)：3. 寵物介紹模塊功能：通過該模塊?？梢源蟾帕私庥螒騼?nèi)關(guān)于寵物的一些信息。寵物介紹頁面中圖片都是自己 PS之后成品的，頁面要設(shè)置好位置，每張圖片大小格式一樣，排整對齊有列序，給人一個舒適的瀏覽感覺。網(wǎng)頁實現(xiàn):4. 門派介紹模塊功能瀏覽者可以點擊此模

7、塊來了解該游戲的門派介紹。游戲中共有15 個門派，人、魔、仙各有5 個。每個角色只能按種族加入其中一個門派，部分門派收徒有性別要求。頁面主要設(shè)計了 15 個子網(wǎng)頁來介紹 15 個門派的信息。瀏覽者可以通過 15 門派的導航欄進行門派的切換來了解不同的門派信息。網(wǎng)頁功能實現(xiàn)：展示其中的一個門派5. 裝備模塊功能介紹：此模塊為介紹游戲中的不同人物擁戴的各種不同的武器。頁面布局跟門派介紹的布局相似。也是設(shè)計了 15 個子頁面來介紹游戲中的 15 種武器。瀏覽者可以通過頁面中的武器名稱導航欄來切換不同種武器的信息觀看。網(wǎng)頁功能實現(xiàn)：以一個裝備為例展示6. 人物模塊功能介紹：此模塊主要介紹游戲中的 15

8、 個主人公。頁面布局主要以圖片加文字來介紹。沒有子頁面。頁面中的人物圖均為 gif 格式的帶動作的動態(tài)圖片。附帶一首震撼的背景音樂?？梢越o瀏覽者視覺、聽覺的沖擊。網(wǎng)頁功能實現(xiàn)：7. 地圖介紹模塊功能：此頁面分為總地圖。和子地圖來進行簡介。附帶一首幽幽的背景音樂。讓瀏覽者在瀏覽中帶來舒適。對于總地圖。 用鼠標 點擊 圖片將出現(xiàn)地圖介紹， 當鼠標 點擊 地圖上的圓點，將出現(xiàn)子頁面相關(guān)地理位置的 圖片和文字介紹子頁面則為小地圖加文字的一些相關(guān)描述來進行對游戲地圖進行大致的了解。網(wǎng)頁功能實現(xiàn)：8. 我的夢幻模塊功能：此模塊組要介紹自己玩夢幻的一些精彩截圖。網(wǎng)頁功能實現(xiàn)：五、總結(jié)及心得體會總結(jié)：我通過這

9、次實訓中非常感謝學校給了我這次制作網(wǎng)頁的機會， 通過這次實訓，我學到了很多有價值的東西。我獨立的完成網(wǎng)站設(shè)計的全過程，把設(shè)計中散亂的網(wǎng)頁鏈接成框架體系， 使平時學到的知識點有了很高的提高，并且合理的在試驗中進行了實踐。做完這個網(wǎng)站, 讓我真正的認識到一個成功的網(wǎng)站， 先期的準備工作是很重要的， 好的開始等于成功的一半。熟練掌握網(wǎng)頁設(shè)計和圖形處理的技巧是必須的，但經(jīng)驗是在實戰(zhàn)中獲得的，我們雖然剛開始學也不必因此而畏懼退縮，多多練習才會有提高。這次實訓讓我明白一個成功的網(wǎng)站需要構(gòu)思設(shè)計和內(nèi)容， 收集素材的準備。 ?心得：做一個網(wǎng)站首先導航清晰，布局合理，層次分明，頁面的鏈接層次不要太深，盡量讓人第

10、一眼看清網(wǎng)站的大體。保持統(tǒng)一的風格，有助于加深訪問者對的網(wǎng)站的印象。要實現(xiàn)風格的統(tǒng)一，不一定要把每個欄目做得一模一樣，舉個例子來說，可以嘗試讓導航條樣式統(tǒng)一，各個欄目采用不同的色彩搭配，在保持風格統(tǒng)一的同時為網(wǎng)站增加一些變化。色彩和諧、重點突出：在網(wǎng)頁設(shè)計中，根據(jù)和諧、均衡和重點突出的原則，將不同的色彩進行組合、搭配來構(gòu)成美觀的頁面。先為站點定義好統(tǒng)一的外部CSS，內(nèi)部頁面都調(diào)用這個css這樣不但可以讓的網(wǎng)頁在瀏覽器改變設(shè)置時不變形，還有助于保持整個站點的風格統(tǒng)一，并且方便修改。加深了網(wǎng)站設(shè)計的技術(shù)熟悉這次對網(wǎng)站的設(shè)計讓我對各種網(wǎng)站設(shè)計的技術(shù)和網(wǎng)站設(shè)計中應注意的問題以及網(wǎng)站設(shè)計中所運用的工具更加的了解與熟練。會用div+css 是很重要的用框架布局可以使網(wǎng)頁制作起來更方便，其中各種距離的設(shè)置，方便圖片文字的定位。站點及模塊的應