網(wǎng)頁制作實(shí)訓(xùn)報(bào)告

1、廣西科技大學(xué)鹿山學(xué)院課程設(shè)計(jì)報(bào)告課程名稱： 網(wǎng)頁制作課程設(shè)計(jì) 課題名稱： 我的夢幻網(wǎng) 指導(dǎo)教師： 韋 靈 班 級： 計(jì)軟141班 姓 名： 鄧康言 學(xué) 號： 20141409 成績評定： 指導(dǎo)教師簽字： 2015 年 07 月 07 日目錄TOC o 1-3 h u HYPERLINK l _Toc30308 一. 網(wǎng)頁制作課程設(shè)計(jì)目的 PAGEREF _Toc30308 2 HYPERLINK l _Toc1231 二. 1.實(shí)訓(xùn)意義： PAGEREF _Toc1231 2 HYPERLINK l _Toc4429 2.實(shí)訓(xùn)目的: PAGEREF _Toc4429 2 HYPERLINK l

2、 _Toc19527 二、課程設(shè)計(jì)內(nèi)容 PAGEREF _Toc19527 3 HYPERLINK l _Toc8935 1.網(wǎng)站主題我的夢幻網(wǎng) PAGEREF _Toc8935 3 HYPERLINK l _Toc19850 2.網(wǎng)站材料 PAGEREF _Toc19850 4 HYPERLINK l _Toc12942 3.網(wǎng)站規(guī)劃 PAGEREF _Toc12942 4 HYPERLINK l _Toc17261 三、 課程設(shè)計(jì)步驟 PAGEREF _Toc17261 5 HYPERLINK l _Toc17658 四、 網(wǎng)站各模塊實(shí)現(xiàn) PAGEREF _Toc17658 6 HYPER

3、LINK l _Toc2051 1.我的夢幻網(wǎng)模塊功能： PAGEREF _Toc2051 6 HYPERLINK l _Toc31566 2.背景故事模塊功能： PAGEREF _Toc31566 6 HYPERLINK l _Toc29162 3.寵物介紹模塊功能： PAGEREF _Toc29162 7 HYPERLINK l _Toc19338 4.門派介紹模塊功能 PAGEREF _Toc19338 8 HYPERLINK l _Toc14722 5.裝備模塊功能介紹： PAGEREF _Toc14722 9 HYPERLINK l _Toc9606 6.人物模塊功能介紹： PAGE

4、REF _Toc9606 10 HYPERLINK l _Toc3175 7.地圖介紹模塊功能： PAGEREF _Toc3175 12 HYPERLINK l _Toc12521 7.我的夢幻模塊功能： PAGEREF _Toc12521 13 HYPERLINK l _Toc27167 五、 總結(jié)及心得體會 PAGEREF _Toc27167 15網(wǎng)頁制作課程設(shè)計(jì)目的 1.實(shí)訓(xùn)意義： 本次網(wǎng)頁設(shè)計(jì)與制作實(shí)訓(xùn)是網(wǎng)頁教學(xué)過程中重要的實(shí)踐性教學(xué)環(huán)節(jié).它是根據(jù)網(wǎng)頁教學(xué)計(jì)劃的要求.在教師的指導(dǎo)下進(jìn)行網(wǎng)頁制作專業(yè)技能的訓(xùn)練,培養(yǎng)學(xué)生綜合運(yùn)用理論知識分析和解決實(shí)際問題的能力,實(shí)現(xiàn)由理論知識向操作技能的培

5、養(yǎng)過程.因此加強(qiáng)實(shí)踐教學(xué)環(huán)節(jié),搞好實(shí)訓(xùn)教學(xué),對實(shí)現(xiàn)本專業(yè)的培養(yǎng)目標(biāo),提高學(xué)生的綜合素質(zhì)有著重要的作用. 2.實(shí)訓(xùn)目的: 通過綜合實(shí)訓(xùn)進(jìn)一步鞏固,深化和加強(qiáng)我的理論知識(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è)置標(biāo)題和正文文字的方法。(6)熟練掌握在網(wǎng)頁中插入圖像,Flash動畫和背景音樂的方法。(7)熟練建立各種形式的超級鏈接的方法。(8)掌握表單網(wǎng)頁制作方法。(9)掌握網(wǎng)頁特效制作方法。(10)掌握

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

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

8、，為了給瀏覽者好的欣賞感受。 站點(diǎn)規(guī)劃：站點(diǎn)下共有五個(gè)主文件夾和若干自文件夾：CSS、html、images、logo、sucai。這五個(gè)主文件夾分別存放所用到的網(wǎng)頁主題素材。課程設(shè)計(jì)步驟 素材、風(fēng)格、模版都設(shè)計(jì)好以后，下一步就是具體的制作網(wǎng)頁。制作網(wǎng)站時(shí)，首先要做到站點(diǎn)的規(guī)劃，建立一個(gè)本地站點(diǎn)“我的夢幻網(wǎng)”，建立的各個(gè)頁面都應(yīng)該放在本地站點(diǎn)中，在網(wǎng)頁制作時(shí)所需的各個(gè)元素都進(jìn)行統(tǒng)一的管理，建立統(tǒng)一的文件夾放同一類型的文件，我在制作時(shí)建立了“images”文件夾存放圖片專用的，網(wǎng)頁中的CSS樣式文件也統(tǒng)一管理，做到有條理，我設(shè)計(jì)的網(wǎng)站規(guī)劃如下圖我的夢幻網(wǎng) 我的夢幻人物介紹地圖介紹裝備介紹門派介紹

9、寵物介紹背景故事網(wǎng)站各模塊實(shí)現(xiàn)1.我的夢幻網(wǎng)模塊功能：通過首頁，可以大致了解我的夢幻網(wǎng)的結(jié)構(gòu)及內(nèi)容。首頁我的夢幻網(wǎng)分為宣傳視頻、導(dǎo)航和背景圖片。其中導(dǎo)航又分為8個(gè)欄目組成：首頁、背景故事、寵物介紹、門派介紹、裝備介紹、地圖介紹、人物介紹和我的夢幻。每一個(gè)頁面用統(tǒng)一的風(fēng)格和不同的背景，為了給瀏覽者好的欣賞感受。網(wǎng)頁功能實(shí)現(xiàn)：2.背景故事模塊功能： 通過此模塊。可以大致了解此游戲的背景故事。 網(wǎng)頁功能實(shí)現(xiàn)：3.寵物介紹模塊功能： 通過該模塊?？梢源蟾帕私庥螒騼?nèi)關(guān)于寵物的一些信息。 寵物介紹頁面中圖片都是自己PS之后成品的，頁面要設(shè)置好位置，每張圖片大小格式一樣，排整對齊有列序，給人一個(gè)舒適的瀏覽感

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

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

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

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