網(wǎng)頁制作設(shè)計(jì)報(bào)告

1、精選優(yōu)質(zhì)文檔-傾情為你奉上青島大學(xué)網(wǎng)頁制作實(shí)訓(xùn)報(bào)告 專 業(yè) 09級(jí)電子商務(wù) 二0一一四 年 七 月 十二 日實(shí)訓(xùn)報(bào)告任務(wù)書目的: 掌握Dreamweaver 8.0在網(wǎng)頁設(shè)計(jì)制作中的運(yùn)用，學(xué)習(xí)一些網(wǎng)頁制作的基本技術(shù)，學(xué)會(huì)Dreamweaver8.0中所提供的層、框架、模板和庫、表單、層疊樣式表、行為等各種網(wǎng)頁元素的功能和使用方法，對(duì)Dreamweaver8.0的高級(jí)使用有一個(gè)全面的認(rèn)識(shí)。地點(diǎn)：青島大學(xué)東校區(qū)內(nèi)容: 設(shè)計(jì)一個(gè)宣傳介紹“江北水鄉(xiāng)，運(yùn)河古城臺(tái)兒莊”的相關(guān)網(wǎng)站。經(jīng)過設(shè)計(jì)這個(gè)網(wǎng)站，體現(xiàn)其獨(dú)特的水鄉(xiāng)魅力，讓人們了解“天下第一莊臺(tái)兒莊”。進(jìn)度:第1天，明確任務(wù)，按照要求創(chuàng)建站點(diǎn)及頁面。第2-

2、5天，創(chuàng)建、編輯頁面，書寫實(shí)訓(xùn)報(bào)告。第6天，頁面和實(shí)訓(xùn)報(bào)告初步實(shí)現(xiàn)，迎接老師初步檢查。第7-8天，進(jìn)一步完善頁面和實(shí)訓(xùn)報(bào)告，力爭(zhēng)達(dá)到符合要求并完美。第9-10天，總結(jié)設(shè)計(jì)情況，上交實(shí)訓(xùn)報(bào)告和課題。目 錄 11112一 二1.整體理念32.網(wǎng)站設(shè)計(jì)使用技術(shù)3三網(wǎng)站設(shè)計(jì)過程31.首頁設(shè)計(jì)過程32.臺(tái)兒莊簡(jiǎn)介設(shè)計(jì)過程43古城文化設(shè)計(jì)過程44.古城榮譽(yù)設(shè)計(jì)過程55.玩在古城設(shè)計(jì)過程56.吃在古城設(shè)計(jì)過程67.住在古城設(shè)計(jì)過程68.購在古城設(shè)計(jì)過程79.海峽基地設(shè)計(jì)過程8四設(shè)計(jì)風(fēng)格81.色系風(fēng)格82.圖標(biāo)設(shè)計(jì)風(fēng)格83.特效風(fēng)格 84.架構(gòu)風(fēng)格85.內(nèi)容風(fēng)格8五9六101教材102.素材文章103.素材圖

3、片10七11一網(wǎng)站框架結(jié)構(gòu)圖首頁臺(tái)兒莊簡(jiǎn)介古城文化古城榮譽(yù)玩在古城吃在古城住在古城購在古城海峽基地二網(wǎng)站設(shè)計(jì)理念1.整體理念古韻簡(jiǎn)潔，清新舒適，淡雅美觀，風(fēng)格精致，內(nèi)容充實(shí)。2.網(wǎng)站設(shè)計(jì)使用技術(shù)使用Dreamweaver 8.0設(shè)置站點(diǎn)，插入層，插入表格，插入FLASH，CSS技術(shù)，插入插件，設(shè)置連接，使用了模板。另外還使用了Photoshop，光影魔術(shù)手，畫圖等修飾了素材。使用Word修飾字體，并將網(wǎng)站各網(wǎng)頁的標(biāo)題使用了“毛澤東字體”映襯網(wǎng)站整體風(fēng)格。三網(wǎng)站設(shè)計(jì)過程1.首頁設(shè)計(jì)過程首先搜索下載了網(wǎng)站首頁設(shè)計(jì)所需要的相關(guān)素材。然后,首先建立了網(wǎng)站的站點(diǎn)和設(shè)計(jì)了一個(gè)模板，為了營造網(wǎng)站的整體特色，

4、插入了一張金黃色的背景圖片作為背景,體現(xiàn)網(wǎng)站整體的古韻典雅的特色。在主頁的設(shè)計(jì)中,第一行先設(shè)計(jì)了一個(gè)表格并插入了一個(gè)網(wǎng)站表頭的圖片,在第二行插入了一個(gè)一行9列的表格,在表格內(nèi)進(jìn)行了分類,分別為主頁、臺(tái)兒莊簡(jiǎn)介、古城文化、古城榮譽(yù)、玩在古城、吃在古城、住在古城、購在古城、海峽基地。之后插入了一個(gè)層，在層中插入了一個(gè)，在首頁中插入了插件，插入了背景音樂。這樣一來可以讓網(wǎng)站首頁展現(xiàn)出一種古城的魅力風(fēng)彩，在開始的時(shí)候就能給瀏覽者一種繼續(xù)瀏覽的想法，好的網(wǎng)站首頁是成功網(wǎng)站的開始。建立一個(gè)合理的站點(diǎn)可以大大減少網(wǎng)站的制作時(shí)間，一個(gè)好的模板可以將網(wǎng)站整體的特色顯現(xiàn)出來。建立好網(wǎng)頁之間的鏈接將方便瀏覽者的瀏覽

5、，使用了CSS技術(shù)。所以首頁對(duì)于一個(gè)網(wǎng)站非常重要。2.臺(tái)兒莊簡(jiǎn)介設(shè)計(jì)過程首先搜索網(wǎng)頁臺(tái)兒莊簡(jiǎn)介所需要的素材，之后在運(yùn)用所建立模板的前提下再插入表格，在第一行表格內(nèi)插入一個(gè)圖片，展現(xiàn)出臺(tái)兒莊的整體城市景點(diǎn)，還在這個(gè)表格里插入一個(gè)層，在層中添加一個(gè)下雨的FLASH，設(shè)置其FLASH參數(shù)。在第二行中插入一個(gè)圖片，并寫入了一些介紹性的文字。在第三行中插入了一個(gè)國家濕地公園的圖片，插入了一個(gè)層并在層中添加了一個(gè)下雨的，設(shè)置其參數(shù)，在其中也添加了一些文字說明，展現(xiàn)了濕地公園的美麗。在第三行中主要是寫入了一些景點(diǎn)的介紹性文字。在第四行中插入了一個(gè)臺(tái)兒莊大戰(zhàn)紀(jì)念館的圖片，并寫了一些介紹性文字。在第五行中插入一

6、個(gè)大戰(zhàn)紀(jì)念碑，并寫入了介紹性文字。在第六行中插入一個(gè)層，插入了一個(gè)插件，插入了一個(gè)背景音樂。通過文字加圖片，使用CSS技術(shù)，F(xiàn)LASH動(dòng)漫的展現(xiàn)，把臺(tái)兒莊的水上古城和大戰(zhàn)故地展現(xiàn)的生動(dòng)如畫。網(wǎng)頁的大標(biāo)題都使用“毛澤東的字體”展現(xiàn)古色韻味.映襯網(wǎng)站整體風(fēng)格。3.古城文化設(shè)計(jì)過程 首先搜索相關(guān)素材，插入了表格，在表格里分別插入了一張代表性的圖片，之后在表格里分別插入了層，在層中編寫了一些介紹性文字。展現(xiàn)出運(yùn)河文化，大戰(zhàn)文化，地方文化。將臺(tái)兒莊的文化以圖文的形式生動(dòng)的展現(xiàn)出來，之后插入一個(gè)層，在層中插入了一個(gè)插件，在插件中添加了音樂，使網(wǎng)頁有了背景音樂，使用CSS技術(shù)。和主頁之間都建了良好的鏈接。網(wǎng)

7、頁的大標(biāo)題都使用“毛澤東的字體”展現(xiàn)古色韻味.映襯網(wǎng)站整體設(shè)計(jì)風(fēng)格。4.古城榮譽(yù)設(shè)計(jì)過程 在網(wǎng)上搜集了相關(guān)的網(wǎng)頁素材，建立了表格，在表格中插入圖片，使用Photoshop,畫圖,光影魔術(shù)手等軟件修飾照片素材,在圖片周圍編寫了一些介紹性的文字，插入了一個(gè)層，在層中插入了插件，在插件中插入音樂，設(shè)置了此網(wǎng)頁的背景音樂，使用CSS技術(shù)。臺(tái)兒莊榮譽(yù)網(wǎng)頁的設(shè)計(jì)采用愉快的旋律襯托出臺(tái)兒莊古城未來的發(fā)展會(huì)越來越好,經(jīng)濟(jì)發(fā)展在旅游產(chǎn)業(yè)的帶動(dòng)下會(huì)變得更加強(qiáng)大。網(wǎng)頁的大標(biāo)題都使用“毛澤東的字體”展現(xiàn)古色韻味，映襯網(wǎng)站整體設(shè)計(jì)風(fēng)格。5.玩在古城設(shè)計(jì)過程在網(wǎng)頁的布局中采用圖文并茂的效果，選擇的素材都是在一定程度上能反

8、映出臺(tái)兒莊古城的特色建筑物。首先，插入了表格，在第一行中插入了一個(gè)叫做參將署的圖片，然后，在第一行的表格中插入了一個(gè)層，在層中插入了一個(gè)FLASH，這個(gè)FLASH門窗的開合，表示古城歡迎游客來光臨。第二行插入了古城的一個(gè)標(biāo)志性景點(diǎn)石船舫的圖片，并采用文字進(jìn)行了介紹。第三行插入圖片謝裕大茶行,此為古城茶藝展館，第四行插入文匯酒樓的圖片， 文匯酒樓集“運(yùn)河文化”和“大戰(zhàn)文化”于一體，融“齊魯豪情”和“江南韻致”于一身，是極具人文魅力的旅游目的地，也是沿運(yùn)獨(dú)有、世界知名的休閑旅游度假區(qū)理想用餐場(chǎng)所,并用文字介紹。第五行插入圖片水陸通街牌坊，并用文字說明.第六行插入圖片船形街，此為古城的典型景點(diǎn)，并用

9、圖文介紹，在表格中插入層，在層中插入FLASH，設(shè)置參數(shù)，展現(xiàn)出古城特色。第六行插入圖片天后宮，并采用文字介紹。第七行插入圖片水門，將古城著名景點(diǎn)都給以介紹。在第八行中插入插件,添加音樂，使用背景音樂。網(wǎng)頁的大標(biāo)題都使用“毛澤東的字體”展現(xiàn)古色韻味.映襯網(wǎng)站整體設(shè)計(jì)風(fēng)格。6.吃在古城設(shè)計(jì)過程 搜索素材，使用畫圖,Photoshop、光影魔術(shù)手等軟件進(jìn)行修飾圖片，插入兩個(gè)表格，在表格中插入圖片，并采用圖片加以文字說明的形式，不但讓從觀看上看到美味，而且在文字說明中看到其營養(yǎng)價(jià)值和食品來源，瀏覽中介紹，讓人未吃先饞。插入層，插入插件，添加音樂，設(shè)置背景音樂。網(wǎng)頁的大標(biāo)題都使用“毛澤東的字體”展現(xiàn)古

10、色韻味展現(xiàn)整體設(shè)計(jì)風(fēng)格。7.住在古城設(shè)計(jì)過程 搜索素材，使用畫圖、Photoshop 等軟件進(jìn)行修飾圖片。插入兩個(gè)表格,在表格中插入圖片,而且圖片還有文字說明,不但讓從觀看上看到居住環(huán)境的幽美雅靜,而且在文字說明中看到其服務(wù)特色,瀏覽中細(xì)讀,讓人未住先感到住宿的舒適。插入層,插入插件,添加音樂,設(shè)置背景音樂。襯托出一種恬雅的居住環(huán)境， 網(wǎng)頁的大標(biāo)題都使用“毛澤東的字體”展現(xiàn)古色韻味.映襯網(wǎng)站設(shè)計(jì)風(fēng)格。8.購在古城設(shè)計(jì)過程 搜索素材，使用畫圖,Photoshop 、光影魔術(shù)手等軟件進(jìn)行修飾圖片,插入兩個(gè)表格,在表格中插入圖片,而且圖片還有文字說明,不但讓從觀看上看到購物環(huán)境的幽美雅靜,而且在文字

11、說明中看到其購物的服務(wù)特色，瀏覽中介紹,讓人未逛先感到購物的美好。插入層，插入插件,添加音樂,設(shè)置背景音樂，襯托出一種舒適恬雅的購物環(huán)境。 網(wǎng)頁的大標(biāo)題都使用“毛澤東的字體“展現(xiàn)古色韻味.映襯網(wǎng)站設(shè)計(jì)風(fēng)格。9海峽基地 搜索素材,使用畫圖、Photoshop 等軟件進(jìn)行修飾圖片,插入一個(gè)表格,在表格中插入圖片,又在圖片背景本身的基礎(chǔ)上插入一個(gè)層，再添加一個(gè)擁有文字的圖片,這樣使網(wǎng)頁擁有文字說明的形式，不但讓從觀看上看到海峽基地的幽美雅靜,而且在文字說明中看到其是中國第一個(gè)海峽交流基地,標(biāo)志性建筑物和背景的相襯呼應(yīng),展現(xiàn)兩岸友好交流的向往,展現(xiàn)了華夏兒女的心聲。插入層,插入插件,添加音樂,設(shè)置背景

12、音樂，襯托出一種恬靜優(yōu)雅的居住環(huán)境。 網(wǎng)頁的大標(biāo)題都使用“毛澤東的字體”展現(xiàn)古色韻味，映襯網(wǎng)站設(shè)計(jì)風(fēng)格。四、設(shè)計(jì)風(fēng)格1.色系風(fēng)格： 所設(shè)計(jì)的頁面背景顏色均以金黃色為主調(diào)，主要為了突出該網(wǎng)頁“臺(tái)兒莊古城”的閑適淡雅風(fēng)格,展現(xiàn)古色美景，安逸生活。2.圖標(biāo)設(shè)計(jì)風(fēng)格： 以古城江北水鄉(xiāng)的幽靜特色,展現(xiàn)出古城的獨(dú)特魅力。3.特效風(fēng)格： 頁面使用了HTML、Flash、Word文字處理，增強(qiáng)了頁面的動(dòng)感，從而使瀏覽者增加了深刻的印象。4.架構(gòu)風(fēng)格： 每一個(gè)頁面只是簡(jiǎn)單的介紹了臺(tái)兒莊古城的簡(jiǎn)單信息，為瀏覽者大體的了解臺(tái)兒莊的基本情況做鋪墊，展現(xiàn)古韻典雅，優(yōu)美景區(qū)臺(tái)兒莊。5.內(nèi)容風(fēng)格： 網(wǎng)站主題閑適、內(nèi)容主題充

13、實(shí)、多采。動(dòng)態(tài)感十足、內(nèi)容切合度高，文字都是用一些簡(jiǎn)單易懂的詞語，就是為了瀏覽者了解我所介紹的臺(tái)兒莊的簡(jiǎn)單信息。五、心得體會(huì)在這次網(wǎng)頁設(shè)計(jì)中，我綜合運(yùn)用了以前專業(yè)所學(xué)課程的理論和實(shí)際運(yùn)用知識(shí)，進(jìn)行這次課程實(shí)訓(xùn)設(shè)計(jì)，從而進(jìn)一步提高了我的設(shè)計(jì)能力，鞏固擴(kuò)充了我網(wǎng)頁設(shè)計(jì)等課程所學(xué)的內(nèi)容，更靈活的掌握了網(wǎng)頁設(shè)計(jì)的方法和步驟，懂得了分析軟件的綜合運(yùn)用，怎樣確定設(shè)計(jì)方案，了解網(wǎng)頁的基本結(jié)構(gòu)，提高了設(shè)計(jì)能力，熟悉了規(guī)范和標(biāo)準(zhǔn)，最重要的是我的獨(dú)立思考的能力也有了提高。在這次設(shè)計(jì)過程中讓我覺得自己在平時(shí)的觀察中不太注意，觀察的太少，因此讓作為瀏覽者的我平時(shí)在百度瀏覽中，開始對(duì)網(wǎng)站頁面排版動(dòng)態(tài)設(shè)計(jì)開始留意和關(guān)注。

14、現(xiàn)在知道要做好一個(gè)網(wǎng)站并不是想象中的那么簡(jiǎn)單，需要我們平時(shí)多積累多操作，一個(gè)網(wǎng)站的整體性當(dāng)然包括色彩圖片的搭配，所以還需要提升自己的審美觀。最主要的是設(shè)計(jì)一個(gè)網(wǎng)站必須要先制定一個(gè)完整合適的框架圖，使瀏覽者對(duì)整個(gè)頁面有種和諧、簡(jiǎn)易、明了的感覺。同時(shí)要收集豐富的主題素材，以展示網(wǎng)頁的可讀性。由于我的設(shè)計(jì)能力有限，在設(shè)計(jì)過程中難免會(huì)出現(xiàn)錯(cuò)誤，望在此指導(dǎo)老師多多指教，我十分樂意接受您的批評(píng)與指正，我將會(huì)認(rèn)真聽取您的指正，使我在以后的網(wǎng)頁設(shè)計(jì)中設(shè)計(jì)的更好。在此感謝青島大學(xué)給我這次展示制作網(wǎng)頁的機(jī)會(huì)。六、參考資料1.教材:HTML網(wǎng)頁制作作者：王映雪 出版社：清華大學(xué)出版社網(wǎng)頁設(shè)計(jì)與制作作者：丁淼 出版社：東南大學(xué)出版社網(wǎng)頁特效精彩實(shí)例制作-作者：張懷志 出版社：人民郵電出版社網(wǎng)頁制作教程-作者：郭初生 出版社：人民郵電出版社網(wǎng)頁設(shè)計(jì)藝術(shù)作者：郭根生 出版社：齊魯電子出版社網(wǎng)站全程設(shè)計(jì)技術(shù)作者：吳濤 出版社：清華大學(xué)出版社網(wǎng)頁設(shè)計(jì)與制作-作者：任學(xué)文 出版社：中國科學(xué)技術(shù)出版社網(wǎng)頁設(shè)計(jì)探索之旅