網(wǎng)頁美工實訓報告

網(wǎng)頁美工實訓報告

萬里駕校網(wǎng)頁設計

一、整體結構及主題

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

二、網(wǎng)站框架結構圖

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

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

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

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

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

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

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

四、網(wǎng)站布局設計

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

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

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

3、子頁布局

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

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

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

“模擬考試”子頁以左右框架模式來布局，由導航、模擬考試、視頻教學等三個欄目組成，左框架是一個導航，布局緊湊，條理清晰，符合瀏覽者的需要。

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

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

五、設計感受

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

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

六、參考資料

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

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

擴展閱讀：網(wǎng)站美工實習報告

網(wǎng)站美工實習報告

一、實習目的

隨著經(jīng)濟高速發(fā)展，社會的競爭也越來越激烈。適者生存，對于初出茅廬的大學生，我們只有不斷的充實自己，提高自己，才能在社會中站穩(wěn)腳跟，才不至于淹沒在社會發(fā)展的浪潮中，被這個社會淘汰。實習對于我們來說，是一個很寶貴的經(jīng)驗。

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

下面就我這一個多月的職業(yè)生涯談談我個人的感受

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

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

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

（2）、使用DIV+CSS樣式及基礎的HTML語言做頁面布局的排版。（3）、PS網(wǎng)頁配色及排版設計。通過色彩結構、平面結構和立體結構三大結構構成；

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

2、工作過程

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

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

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

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

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

（6）、修改：作為實習生，上交的任務被打回來重做是正常不過的事，自信的我也沒能逃過返工的命運，重新構思、處理元素、寫HTML/CSS代碼重復一切你做過的事

3、對于頁面處理的總結

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

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

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

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

每個上網(wǎng)的人對于瀏覽器有著不同的愛好，就大部分來說，IE和firefox

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

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

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

三、實習體會

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

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

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

來源：網(wǎng)絡整理 免責聲明：本文僅限學習分享，如產(chǎn)生版權問題，請聯(lián)系我們及時刪除。

《網(wǎng)頁美工實訓報告》由互聯(lián)網(wǎng)用戶整理提供,轉載分享請保留原作者信息,謝謝!
鏈接地址：http://m.seogis.com/gongwen/639164.html

• 上一篇：開網(wǎng)店課程綜合實訓報告
• 下一篇：網(wǎng)頁美工設計-實驗報告