網(wǎng)頁(yè)美工實(shí)訓(xùn)報(bào)告

網(wǎng)頁(yè)美工實(shí)訓(xùn)報(bào)告

萬(wàn)里駕校網(wǎng)頁(yè)設(shè)計(jì)

一、整體結(jié)構(gòu)及主題

關(guān)于萬(wàn)里駕校這個(gè)網(wǎng)頁(yè)，主要包括1個(gè)首頁(yè)和5個(gè)子頁(yè)，首頁(yè)內(nèi)容比較豐富，主要從整體上對(duì)駕校的信息進(jìn)行布局，從首頁(yè)可以很清晰很明了的看出整個(gè)網(wǎng)站包含那些信息，使網(wǎng)頁(yè)更具可讀性，亦利于瀏覽；網(wǎng)頁(yè)的結(jié)構(gòu)主要為兩欄式,上下式和三欄式，整個(gè)網(wǎng)頁(yè)以簡(jiǎn)潔大方為主題，網(wǎng)頁(yè)的logo主要包括一行中文字樣，一行英文字樣，一個(gè)簡(jiǎn)單的奔馬型圖標(biāo)，其中中文字樣在上，英文字樣在下，圖標(biāo)在右，這個(gè)logo在整個(gè)網(wǎng)頁(yè)的左上角，在右上角與之對(duì)稱的則是搜索和導(dǎo)航欄，在首頁(yè)的設(shè)計(jì)中，網(wǎng)頁(yè)留白比較多，相對(duì)美觀簡(jiǎn)約，以白色為主色調(diào)，簡(jiǎn)約大氣，一目了然。

二、網(wǎng)站框架結(jié)構(gòu)圖

武漢萬(wàn)里駕校公司簡(jiǎn)介子頁(yè)-在線報(bào)名登錄學(xué)車流程服務(wù)網(wǎng)點(diǎn)報(bào)名條件圖片報(bào)名資料身體條件年齡條件戶籍條件學(xué)車班別你問(wèn)我答新聞中心新聞動(dòng)態(tài)通知公告汽車資訊視頻教學(xué)子頁(yè)-關(guān)于我們公司文化聯(lián)系我們汽車保養(yǎng)-模擬考試子頁(yè)子頁(yè)-學(xué)車班別-學(xué)車指南子頁(yè)首頁(yè)小車試題貨車試題安全文明客車試題導(dǎo)航仿真試題恢復(fù)考試摩托車從業(yè)資格軟件下載模擬考試視頻教學(xué)圖片經(jīng)濟(jì)班精英班商務(wù)班駕駛技巧圖片汽車保養(yǎng)

三、網(wǎng)站色彩搭配

網(wǎng)站主要采用冷色調(diào)和中性色調(diào)，以棕色和白色為基調(diào)，這使得網(wǎng)站看起來(lái)簡(jiǎn)約、而不失大氣沉穩(wěn)，比較有深度，更具說(shuō)服力和瀏覽性。

Logo是我根據(jù)該公司的名字設(shè)計(jì)而來(lái)，以一個(gè)奔跑的馬為主體，象征著“萬(wàn)里”二字，其顏色是比較中性的棕色，logo中英文的色彩亦采用與logo相同的色彩，保持統(tǒng)一性。

導(dǎo)航的背景顏色均采用的棕色，文本色彩是白色，這樣與背景顏色相異，美觀也利于瀏覽。并根據(jù)瀏覽者所在的頁(yè)面將其文本顏色設(shè)置成與背景相異的明亮色系，黃色，下劃線的色彩亦如此，這使得瀏覽知道自己所在的是哪個(gè)網(wǎng)頁(yè)，利于閱讀，也是網(wǎng)站不至于太過(guò)單調(diào)、沉悶。

整個(gè)網(wǎng)站的文本顏色主要以棕色為主，色系較深，更能突出網(wǎng)站所要表達(dá)的內(nèi)容，也利于瀏覽者查詢到自己想要的內(nèi)容。在一些欄目部分的文本則是采用比較醒目的暖色調(diào)橙色，使人一目了然，也使網(wǎng)站不至于太過(guò)單調(diào)、沉悶。

圖片色彩均是采用的深色系，使其看起來(lái)更具流動(dòng)性，不至于單調(diào)、呆板。網(wǎng)站中的方框采用的是棕色和灰色，給人的整體感覺(jué)比較正直與堅(jiān)持，方方正正卻不顯得呆板，內(nèi)容簡(jiǎn)潔的同時(shí)又不會(huì)單調(diào)枯燥乏味，留白部分較多，淺色背景搭配深色文字，二者對(duì)比的反差讓人能更深刻的記住該網(wǎng)頁(yè)，同時(shí)看字的時(shí)候會(huì)更清晰。

四、網(wǎng)站布局設(shè)計(jì)

1、整個(gè)網(wǎng)站的各頁(yè)面的頁(yè)眉頁(yè)腳均是采用的相同模式，如logo、搜索、導(dǎo)航和網(wǎng)站版權(quán)信

息，保持統(tǒng)一性，使人一目了然。簡(jiǎn)潔，明朗。2、首頁(yè)布局

首頁(yè)的中間部分以上下框架模式來(lái)布局，由公司簡(jiǎn)介、學(xué)車班別、新聞中心、新聞動(dòng)態(tài)、通知公告、汽車資訊、你問(wèn)我答、視頻教學(xué)等8個(gè)欄目組成。視頻教學(xué)部分以圖片為主，以此呈現(xiàn)滾動(dòng)的模式，使網(wǎng)頁(yè)更具流動(dòng)性、觀賞性。上框架由一個(gè)汽車圖片和公司簡(jiǎn)介兩部分構(gòu)成，與網(wǎng)站主題貼切。下框架則是由五個(gè)方框構(gòu)成，布局緊湊，條理清晰。如左圖所示：

3、子頁(yè)布局

“關(guān)于我們”子頁(yè)的中間部分以上下框架模式來(lái)布局，由公司文化、聯(lián)系

我們、汽車保養(yǎng)等三個(gè)欄目組成；其中汽車保養(yǎng)采用與首頁(yè)視頻教學(xué)同樣模式；其布局是上下框架模式，上框架以三個(gè)汽車圖片構(gòu)成，與網(wǎng)站主題貼切，符合駕校所要傳達(dá)的理念；下框架則是由三個(gè)方框構(gòu)成，布局緊湊，條理清晰。

“在線報(bào)名”子頁(yè)則以左右框架模式布局，整個(gè)頁(yè)面由三個(gè)方框組成，布局緊湊，條理清晰。左框架又以上下框架模式布局，由兩個(gè)方框以及圖片構(gòu)成，圖片的插入使網(wǎng)頁(yè)更具流動(dòng)性、觀賞性，不至于呆板、單調(diào)。整個(gè)頁(yè)面由登錄、學(xué)車流程、服務(wù)網(wǎng)點(diǎn)、報(bào)名資料、身體條件等5個(gè)欄目組成；服務(wù)網(wǎng)點(diǎn)以圖片鏈接的方式呈現(xiàn)。

“模擬考試”子頁(yè)以左右框架模式來(lái)布局，由導(dǎo)航、模擬考試、視頻教學(xué)等三個(gè)欄目組成，左框架是一個(gè)導(dǎo)航，布局緊湊，條理清晰，符合瀏覽者的需要。

“學(xué)車班別”子頁(yè)的中間部分以上下框架來(lái)布局，上框架由三個(gè)圖片來(lái)呈現(xiàn)，與網(wǎng)站主題貼切，符合駕校所要傳達(dá)的理念；下框架由經(jīng)濟(jì)班、精英班、商務(wù)班三個(gè)欄目組成，并根據(jù)班別設(shè)置條件文本。

“學(xué)車指南”子頁(yè)主要由圖片構(gòu)成，使網(wǎng)頁(yè)更具流動(dòng)性、觀賞性；包括駕駛技巧和汽車保養(yǎng)兩個(gè)欄目，以上下框架模式來(lái)布局，上框架課分割為左右框架模式，均以圖片為基調(diào)。整個(gè)頁(yè)面布局緊湊，條理清晰，符合瀏覽者的需要。

五、設(shè)計(jì)感受

在這次網(wǎng)頁(yè)設(shè)計(jì)中，綜合運(yùn)用了PS專業(yè)所學(xué)課程的理論和實(shí)際知識(shí)，進(jìn)行這次網(wǎng)頁(yè)設(shè)計(jì)實(shí)訓(xùn)，從而也進(jìn)一步提高了我的設(shè)計(jì)能力，鞏固與擴(kuò)充了我網(wǎng)頁(yè)美工課程所學(xué)的內(nèi)容，更靈活的掌握了photoshop、取色器和960網(wǎng)格布局軟件的運(yùn)用，怎樣確定設(shè)計(jì)方案，了解了網(wǎng)頁(yè)的基本結(jié)構(gòu)，提高了設(shè)計(jì)能力，熟悉了規(guī)范和標(biāo)準(zhǔn)，最重要的是我的獨(dú)立思考的能力也有了提高。

通過(guò)這次實(shí)訓(xùn)我知道要做好一個(gè)網(wǎng)站效果圖并不是想象中的那么簡(jiǎn)單，需要我們平時(shí)多積累多操作，一個(gè)網(wǎng)站的整體性當(dāng)然包括色彩圖片的搭配，所以還需要提升自己的審美觀。最主要的設(shè)計(jì)一個(gè)網(wǎng)站必須要先制定一個(gè)完整合適的框架圖，使瀏覽者對(duì)整個(gè)頁(yè)面有種和諧、簡(jiǎn)易、明了的感覺(jué)。同時(shí)要收集豐富的主題素材，以展示網(wǎng)頁(yè)的可讀性。

六、參考資料

教材：《Photoshop網(wǎng)頁(yè)制作基礎(chǔ)與典型范例》、《Photoshop從入門到精通》、《設(shè)計(jì)師生存手冊(cè)》

素材文章及圖片：百度，搜狗素材圖片：百度，搜狗

擴(kuò)展閱讀：網(wǎng)站美工實(shí)習(xí)報(bào)告

網(wǎng)站美工實(shí)習(xí)報(bào)告

一、實(shí)習(xí)目的

隨著經(jīng)濟(jì)高速發(fā)展，社會(huì)的競(jìng)爭(zhēng)也越來(lái)越激烈。適者生存，對(duì)于初出茅廬的大學(xué)生，我們只有不斷的充實(shí)自己，提高自己，才能在社會(huì)中站穩(wěn)腳跟，才不至于淹沒(méi)在社會(huì)發(fā)展的浪潮中，被這個(gè)社會(huì)淘汰。實(shí)習(xí)對(duì)于我們來(lái)說(shuō)，是一個(gè)很寶貴的經(jīng)驗(yàn)。

于是在今年暑假，我在廣州普金計(jì)算機(jī)科技股份有限公司實(shí)習(xí)了一個(gè)多月，崗位是網(wǎng)站美工。短短一個(gè)多月的職生涯真的影響了我很多，我開始不斷的對(duì)身邊的人、事和物去思考，去尋找，去理解，去欣賞，去評(píng)價(jià)，去表達(dá)。就像我用兩天的時(shí)間制作出一張首頁(yè)效果圖，他人往往只能看到完成品。而這并不是最重要的，最重要的是別人沒(méi)有經(jīng)歷的我卻在珍惜的創(chuàng)作過(guò)程。也許這個(gè)過(guò)程還遠(yuǎn)遠(yuǎn)不能稱之為創(chuàng)造，但我會(huì)努力的。

下面就我這一個(gè)多月的職業(yè)生涯談?wù)勎覀�(gè)人的感受

二、實(shí)習(xí)內(nèi)容1、實(shí)習(xí)主要內(nèi)容

整體工作：我的工作就是負(fù)責(zé)設(shè)計(jì)整個(gè)網(wǎng)站的頁(yè)面部分,根據(jù)網(wǎng)頁(yè)設(shè)計(jì)師或客戶所提供的主題要求來(lái)設(shè)計(jì)出整個(gè)網(wǎng)站。

（1）、使用photoshop、AI等圖片處理軟件設(shè)計(jì)、處理網(wǎng)站上需要的圖片。

（2）、使用DIV+CSS樣式及基礎(chǔ)的HTML語(yǔ)言做頁(yè)面布局的排版。（3）、PS網(wǎng)頁(yè)配色及排版設(shè)計(jì)。通過(guò)色彩結(jié)構(gòu)、平面結(jié)構(gòu)和立體結(jié)構(gòu)三大結(jié)構(gòu)構(gòu)成；

（4）、編寫CSS代碼使網(wǎng)站頁(yè)面無(wú)論是在IE瀏覽器里還是在FF瀏覽器上正常顯示；

2、工作過(guò)程

在普金公司的一個(gè)多月了，我剛開始從處理簡(jiǎn)單圖片到組后讓我獨(dú)自一人修改了公司一個(gè)小型網(wǎng)站，收獲可謂不少在。下面讓我來(lái)說(shuō)一說(shuō)，我在這段時(shí)間做的事情。

（1）、了解主題：剛接到任務(wù)時(shí)，我對(duì)于如何修改毫無(wú)頭緒，于是我首從網(wǎng)上了解了一些相關(guān)基本常識(shí)及想類似網(wǎng)站的頁(yè)面風(fēng)格。

（2）、思考配色與構(gòu)圖：對(duì)整個(gè)內(nèi)容有了一了解后，便要思考作品的色彩和具體的構(gòu)圖，先用筆畫出草圖，也可以直接在腦海里構(gòu)思。色彩要顯示出稽查的專業(yè)與嚴(yán)謹(jǐn)，所以選擇藍(lán)色作為主色調(diào)。

（3）、查找素材：其實(shí)素材這種東西總是數(shù)量大于質(zhì)量，我可以很輕易的下載到許多許多的素材，但卻很少用的到它。這里我總結(jié)了一種思路，電腦里下載一些專業(yè)的“萬(wàn)金油”圖庫(kù)，這種圖庫(kù)通常種類齊全但圖片很一般。另外配合專業(yè)在線圖庫(kù)網(wǎng)站（通常是國(guó)外站點(diǎn)）+Google，百度圖片等搜索引擎進(jìn)行即使的素材查找。再加上自己平時(shí)積累的素材，選擇是非常大的。

（5）、設(shè)計(jì)、修改頁(yè)面：這個(gè)階段時(shí)耗時(shí)最久的，但總結(jié)出來(lái)卻是非常簡(jiǎn)單的步驟，即不斷地處理頁(yè)面元素、將處理好的圖片、動(dòng)畫等添加進(jìn)網(wǎng)頁(yè)、編寫HTML/CSS代碼。

（6）、修改：作為實(shí)習(xí)生，上交的任務(wù)被打回來(lái)重做是正常不過(guò)的事，自信的我也沒(méi)能逃過(guò)返工的命運(yùn)，重新構(gòu)思、處理元素、寫HTML/CSS代碼重復(fù)一切你做過(guò)的事

3、對(duì)于頁(yè)面處理的總結(jié)

作為一個(gè)網(wǎng)站美工除了要掌握網(wǎng)頁(yè)三劍客,ps,這些必會(huì)的軟件以外，還要對(duì)HTML、CSS甚至JavaScript用的很熟,對(duì)ASP或PHP或jsp也要有一定的了解。除此之外，要想做出來(lái)的頁(yè)面美觀、使用方便還需達(dá)到以下幾點(diǎn)：（1）表達(dá)一定的藝術(shù)效果一個(gè)成功的網(wǎng)站應(yīng)該把網(wǎng)頁(yè)設(shè)計(jì)得吸引人，同時(shí)又要傳達(dá)設(shè)計(jì)思想和情感。網(wǎng)頁(yè)作為一種媒體，它必須具有一定的藝術(shù)感染力，一個(gè)平淡無(wú)奇、雜亂無(wú)章或毫無(wú)美感的網(wǎng)頁(yè)很難會(huì)有瀏覽者喜歡，更不要說(shuō)讓瀏覽者去注意它的內(nèi)容了。（2）頁(yè)面結(jié)構(gòu)清晰可讀性強(qiáng)

經(jīng)�？梢钥吹竭@樣的頁(yè)面，上面堆砌了許多內(nèi)容，卻沒(méi)有考慮它的空間框架，讓人看了無(wú)法知曉哪些內(nèi)容才是最具發(fā)言權(quán)的。沒(méi)有流暢的視覺(jué)流程，這是典型的沒(méi)有注意到編排清晰度、可讀性的表現(xiàn)。好的網(wǎng)頁(yè)應(yīng)該將它要突出表現(xiàn)的內(nèi)容放在瀏覽者一眼就能看到的地方。網(wǎng)頁(yè)上每一個(gè)像素對(duì)瀏覽者眼睛的吸引力有所不同，瀏覽者大腦對(duì)于不同位置內(nèi)容的印象也有所不同。通常來(lái)說(shuō)，普通瀏覽者瀏覽網(wǎng)頁(yè)時(shí)會(huì)忽略網(wǎng)頁(yè)兩端的“廣告區(qū)”。（3）實(shí)現(xiàn)不同的功能

在網(wǎng)絡(luò)這條信息高速公路上，網(wǎng)頁(yè)最主要的功能就是一種傳遞信息的手段。因此，它一切內(nèi)容都是為了這個(gè)目的而服務(wù)，都是要圍繞這個(gè)中心進(jìn)行設(shè)計(jì)的。然而，要實(shí)現(xiàn)這個(gè)功能，網(wǎng)頁(yè)的美工設(shè)計(jì)和內(nèi)容都必須有針對(duì)性。所謂針對(duì)性，就是指對(duì)不同類別的網(wǎng)頁(yè)要求采用不同的美工藝術(shù)效果。（4）網(wǎng)站風(fēng)格要符合網(wǎng)站的類型

在設(shè)計(jì)網(wǎng)頁(yè)之需要做大量的準(zhǔn)備工作，需要思考以下幾個(gè)問(wèn)題：1、網(wǎng)站的類型：站點(diǎn)屬于新聞、娛樂(lè)、商務(wù)類的綜合站點(diǎn)，還是個(gè)人主頁(yè)；不同的類型，決定著網(wǎng)站的不同風(fēng)格，包括主色調(diào)、排版等。如果瀏覽者主要是年輕人，頁(yè)面就要設(shè)計(jì)得基調(diào)明快，活潑富有朝氣；如果針對(duì)的群體是政府工作者或科學(xué)工作者，那么頁(yè)面就要設(shè)計(jì)得嚴(yán)謹(jǐn)、嚴(yán)肅、理性、科學(xué)；如果針對(duì)的群體是婦女兒童，頁(yè)面則要設(shè)計(jì)得溫馨、友愛(ài)、輕松；如果針對(duì)的群體是戀人或從事藝術(shù)工作的人，頁(yè)面就要設(shè)計(jì)得浪漫并有藝術(shù)感。（5）頁(yè)面的兼容性強(qiáng)

每個(gè)上網(wǎng)的人對(duì)于瀏覽器有著不同的愛(ài)好，就大部分來(lái)說(shuō)，IE和firefox

是兩個(gè)有著很大區(qū)別卻都擁有不少支持者的瀏覽器，即使是使用同一瀏覽器，也有著不同版本，而不同版本間，頁(yè)面顯示或多或少存在著差異。一個(gè)好的網(wǎng)頁(yè)設(shè)計(jì)，就是至少要使網(wǎng)頁(yè)在主流瀏覽器的大部分版本都能較好的顯示出效果，而不是在IE上是非常華麗的一個(gè)頁(yè)面，而在firefox上卻是雜亂無(wú)章。(6)一切用戶至上

網(wǎng)頁(yè)設(shè)計(jì)不同于藝術(shù)設(shè)計(jì)，只要設(shè)計(jì)者喜歡，任其天馬行空。而網(wǎng)頁(yè)設(shè)計(jì)則

不能如此肆意妄為，網(wǎng)頁(yè)設(shè)計(jì)必須考慮到用戶使用時(shí)的方便，以至于網(wǎng)頁(yè)設(shè)計(jì)師必須考慮到同一頁(yè)面在不同分辨率的顯示器上、不同瀏覽器上有什么不同的顯示效果。甚至于要考慮到用戶瀏覽器如果關(guān)閉了CSS和JavaScript頁(yè)面將會(huì)怎樣。只有在各種情況下，用戶都能方便瀏覽網(wǎng)頁(yè)，這才是一個(gè)好的設(shè)計(jì)。

三、實(shí)習(xí)體會(huì)

做了一個(gè)多月的前臺(tái)美工，終于體會(huì)到網(wǎng)頁(yè)設(shè)計(jì)無(wú)非是圖文混排的那點(diǎn)事。不過(guò)，當(dāng)你真正的去努力的創(chuàng)造了之后，結(jié)果卻并不會(huì)每次都是好的。太多自己精心設(shè)計(jì)的東西，被別人一眼就否定了。當(dāng)時(shí)心情真的很糟糕。不過(guò)，現(xiàn)在想想，這都些都沒(méi)有什么，這也無(wú)非是成長(zhǎng)中常常要遇到的事罷了。通過(guò)實(shí)習(xí)，我不僅將自己在學(xué)校學(xué)過(guò)的東西通過(guò)實(shí)踐進(jìn)步一鞏固，也通過(guò)向公司的人請(qǐng)教學(xué)到很多工作上的技巧，更通過(guò)實(shí)習(xí)體會(huì)到很多沒(méi)有人會(huì)教授給你的東西，如：如何處理同事間關(guān)系、如何面對(duì)上司、如何處理工作、如何調(diào)整對(duì)工作厭煩的心態(tài)等等。

工作是人生活的重要部分，是我們畢業(yè)生必須面對(duì)的，不論是消極還是積極，都會(huì)給人帶來(lái)不同感受。而精彩的生活往往有來(lái)源于有意義的工作中，所以我不會(huì)讓自己因工作的煩惱、困難和壓力，困擾自己，使自己工作情緒化、生活情緒化。遇到困難我會(huì)用平常的心態(tài)實(shí)際看待問(wèn)題，不說(shuō)“不可能”，而是冷靜下來(lái)思考如何處理并付諸于實(shí)踐，告自己justdoit！

友情提示：本文中關(guān)于《網(wǎng)頁(yè)美工實(shí)訓(xùn)報(bào)告》給出的范例僅供您參考拓展思維使用，網(wǎng)頁(yè)美工實(shí)訓(xùn)報(bào)告：該篇文章建議您自主創(chuàng)作。

來(lái)源：網(wǎng)絡(luò)整理 免責(zé)聲明：本文僅限學(xué)習(xí)分享，如產(chǎn)生版權(quán)問(wèn)題，請(qǐng)聯(lián)系我們及時(shí)刪除。

《網(wǎng)頁(yè)美工實(shí)訓(xùn)報(bào)告》由互聯(lián)網(wǎng)用戶整理提供,轉(zhuǎn)載分享請(qǐng)保留原作者信息,謝謝!
鏈接地址：http://www.7334dd.com/gongwen/639164.html

• 上一篇：開網(wǎng)店課程綜合實(shí)訓(xùn)報(bào)告
• 下一篇：網(wǎng)頁(yè)美工設(shè)計(jì)-實(shí)驗(yàn)報(bào)告