網(wǎng)頁設(shè)計實(shí)訓(xùn)報告模板

年4月19日網(wǎng)頁設(shè)計實(shí)訓(xùn)報告模板文檔僅供參考，不當(dāng)之處，請聯(lián)系改正。網(wǎng)頁設(shè)計實(shí)驗(yàn)報告實(shí)訓(xùn)目的：經(jīng)過實(shí)訓(xùn)，進(jìn)一步的了解dreamweaver軟件的一些功能，和熟悉一些工具。例如：學(xué)會建立簡單的web網(wǎng)頁、會將FLASH插入到網(wǎng)頁、會使用表格排版頁面、：會制作簡單的導(dǎo)航、掌握css樣式表的使用方法等實(shí)訓(xùn)內(nèi)容：根據(jù)自己所需，確立網(wǎng)站的主題，經(jīng)過參考她人網(wǎng)站獨(dú)立構(gòu)思出網(wǎng)站的結(jié)構(gòu)布局，完成網(wǎng)站的建設(shè)。實(shí)訓(xùn)環(huán)境：word、photoshop、dreamweaver軟件。作者：王小明班級：網(wǎng)絡(luò)09301日期：.6.6目錄第一章網(wǎng)站策劃…………………3第二章網(wǎng)站圖紙?jiān)O(shè)計……………5第三章網(wǎng)站布局設(shè)計……………8第四章總結(jié)……………………11第五章致謝……………………12第六章參考書目及網(wǎng)站………13第一章網(wǎng)站的策劃網(wǎng)站主題的選?。阂?yàn)榈谝淮纬鲞h(yuǎn)門的原因，說實(shí)話還真的蠻想家的。有時候就會不由自主的去關(guān)注老家的天氣，和老家的一些事情。有時候還會特地跑到沙縣小吃去吃，為了就是能找到熟悉的感覺，不至于顯得那么無助?？赡芤彩且?yàn)楸救吮容^貪吃，愛玩，總是很懷戀之前那些瘋狂的日子，因此就以沙縣為題，表示下自己的情感。2、同類網(wǎng)站特點(diǎn)分析：在網(wǎng)上觀察了蠻多同類主題的網(wǎng)站，大多是拐角型的網(wǎng)頁布局。且主題都是突出所在地的一些風(fēng)俗、文化和特點(diǎn)。且所用的是顏色大多是綠色系列的。結(jié)構(gòu)布局也比較簡單，整體就是給人一種家鄉(xiāng)的感覺。因?yàn)樽约核龅木W(wǎng)頁不是商業(yè)網(wǎng)站，因此不需做一些無謂的廣告，且想表示的是自己的真實(shí)情感，因此能夠少些炫的色彩。因此我選擇了折角型，主色為淡綠，整體的感覺比較的復(fù)古。3、網(wǎng)站域名的選擇：因?yàn)槭羌亦l(xiāng)的網(wǎng)站，因此我就想加入家鄉(xiāng)的名字，和區(qū)號我的第一選擇是0598.com,,但到萬網(wǎng)一查發(fā)現(xiàn)已經(jīng)被人注冊。而我的第二選擇是,一樣的到萬網(wǎng)查詢，發(fā)現(xiàn)沒被注冊，就選了它。4、網(wǎng)站欄目劃分（內(nèi)容劃分）：因?yàn)槭亲鲆粋€家鄉(xiāng)的網(wǎng)站，因此主要的內(nèi)容是從沙縣的歷史背景，地理位置，沙縣榮譽(yù)，沙縣景點(diǎn)，特色小吃，還有就是一些沙縣的圖片。而本縣最具特色的就是沙縣的小吃，和沙縣景點(diǎn)，因此主要會把中點(diǎn)落在這兩方面。網(wǎng)站圖紙?jiān)O(shè)計設(shè)計軟件簡單介紹：Photoshop是Adobe公司旗下最為出名的圖像處理軟件之一，集圖像掃描、編輯修改、圖像制作、廣告創(chuàng)意，圖像輸入與輸出于一體的圖形圖像處理軟件，它的應(yīng)用領(lǐng)域廣泛，平面設(shè)計、修復(fù)照片、廣告攝影、影像創(chuàng)意=藝術(shù)文字、網(wǎng)頁制作、建筑效果圖后期修飾和繪畫等。深受廣大平面設(shè)計人員和電腦美術(shù)愛好者的喜愛。首頁圖紙的設(shè)計過程：在畫圖紙之前，得先用草稿紙畫出網(wǎng)頁大概的布局，及模塊的劃分和確定網(wǎng)頁的大小。打開ps軟件，新建一個778*800的圖層。而在畫圖紙的時候很多的素材大多都不是自己畫，而是在網(wǎng)上找一些圖片，經(jīng)過修改再使用。在畫圖紙的時候除了動態(tài)的效果，其它的效果都要在圖紙中表現(xiàn)出來。先畫出網(wǎng)頁的頭部，其次畫出網(wǎng)頁的主體，最后將網(wǎng)頁的尾部畫出。在畫圖紙的時需注意（1.圖層的數(shù)量要合適，合理的將圖紙?jiān)胤蛛x，可是太多圖層的話將導(dǎo)致軟件的遠(yuǎn)行速度緩慢，因此這時，我們能夠建組，把有關(guān)連得東西放入組中）這樣有利于網(wǎng)頁圖紙的局部修改。（2..要拉參考線，且在畫圖紙的時候要想到之后的布局）這樣有利于之后的切片和布局。（3.所用的字體一般先考慮宋體，且一般網(wǎng)頁的字體大小一般都是12或14）有利于頁面的美觀和瀏覽器的支持。大致的效果如圖(1)圖(1)內(nèi)容頁圖紙的設(shè)計過程：由于每張的內(nèi)容大致都不一樣，根據(jù)內(nèi)容的不同，畫出不同的圖紙，在圖紙里突出內(nèi)容的特點(diǎn)，有的色彩比較豐富，有的色彩比較單一，不過在畫內(nèi)容也的時候還是遵循首頁的注意事項(xiàng)和一些模塊的劃分。切片技術(shù)的介紹：切片工具是將一個完整的網(wǎng)頁切割許多小片，以便上傳。是將我們設(shè)計的網(wǎng)頁設(shè)計稿切成一片一片的，或一個表格一個表格的，這樣我們能夠?qū)γ恳粡堖M(jìn)行單獨(dú)的優(yōu)化，以便于網(wǎng)絡(luò)上的下載。能夠做成網(wǎng)格的，然后能夠用dreamwaver來進(jìn)行細(xì)致的處理。利用切片工具能夠快速的進(jìn)行網(wǎng)頁的制作。首頁及內(nèi)容頁切片只要步驟介紹：要切片之前，該先確定哪些是能夠用程序?qū)懙?，哪些是要切成圖片的。確定之后用參考線把所需的東西定位好。之后用切片工具，將其分成若干塊。在切片是需注意的是命名，命名的時候只能用英文，下劃線，和數(shù)字。切好之后的工作就是保存。執(zhí)行文件——存儲為web和設(shè)備所用格式，保存時需注意（在保證圖片質(zhì)量的下，盡可能小的占用空間，且一般比較小的圖存為GIF格式，大圖存為JPG格式，透明的存為PNG格式）。第三章網(wǎng)站布局設(shè)計1、網(wǎng)站布局軟件dreamweaver介紹：Dreamweaver是美國Macromedia公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身德所見即所得網(wǎng)頁編輯，它是第一套針對專業(yè)網(wǎng)頁設(shè)計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它能夠輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。建立站點(diǎn)：打開dw軟件，點(diǎn)擊站點(diǎn)——新建站點(diǎn)——基本。彈出的窗口如圖（2）圖（2）下一步如圖（3）圖（3）下一步如圖（4）圖（4）下一步如圖（5）圖（5）下一步如圖（6）圖（6）完成首頁布局過程：在首頁的布局中，我用了表格布局。一般的規(guī)律是從簡單到復(fù)雜，層層遞進(jìn)，由外到內(nèi)層層嵌套表格。且在做banner的時候還插了透明啊的Flash，在做導(dǎo)航的時候用了，常見里的插入導(dǎo)航條的功能。而在用表格布局的時候需注意（插表格的時候邊框粗細(xì)，單元格邊距，單元格間距都應(yīng)設(shè)為0，之后為了更好的定位，我們應(yīng)該根據(jù)因此確定表格的高寬，為了使瀏覽的時候網(wǎng)頁不變形）內(nèi)容頁布局過程：內(nèi)容頁的布局與首頁的布局大多相同，因?yàn)槭莾?nèi)容也因此會做的比較簡單，一些動態(tài)的效果也沒做?？傊€是用了表格布局。一些注意事項(xiàng)與首頁的相同?？偨Y(jié)經(jīng)過這次的實(shí)訓(xùn)，收獲了很多，例如學(xué)會了ps的切片，還熟悉了表格的布局，更重的是自己也能夠做網(wǎng)站了，雖然所做的網(wǎng)頁是靜態(tài)的，沒什么內(nèi)容，但至少明白，做網(wǎng)頁時怎么一回事?？墒且餐^這次實(shí)訓(xùn)，證明了自己的水平還是很低級。例如ps里的一些功能，還有一些效果，快捷鍵都還不是很清楚，再有就是dw中，有時還是會出錯，且有的是侯還是不能駕馭。且經(jīng)過實(shí)訓(xùn)感覺自己的審美還是有點(diǎn)問題，該加強(qiáng)一下美術(shù)基礎(chǔ)。雖然這次實(shí)訓(xùn)很受打擊，但值的一