第一篇：個人網(wǎng)頁設(shè)計說明書

個 人 頁

設(shè) 計

說 明書 網(wǎng)

目錄

一、網(wǎng)頁設(shè)計目的

1.1 網(wǎng)頁設(shè)計需求淺談?????????????????2 1.2 個人網(wǎng)頁設(shè)計理念?????????????????2 1.3 制作背景?????????????????????2 1.4 術(shù)語定義?????????????????????2

二、網(wǎng)頁設(shè)計以及瀏覽工具

2.1 網(wǎng)頁設(shè)計說明???????????????????3 2.2 色彩方案?????????????????????3 2.3 工作環(huán)境?????????????????????3 2.4 瀏覽工具?????????????????????3

三、個人網(wǎng)頁功能模塊設(shè)計

3.1 空間動畫?????????????????????4 3.2 主頁???????????????????????5 3.3 日志???????????????????????7 3.4 日志簡介?????????????????????8 3.5 相冊界面?????????????????????9 3.6 相冊展示?????????????????????10 3.7 音樂???????????????????????11 3.8 音樂列表?????????????????????12 3.9 個人資料?????????????????????13 3.10留言板??????????????????????14

四、總結(jié)

4.1 技術(shù)總結(jié)?????????????????????15 4.2 個人心得總結(jié)???????????????????15

附加：第二種網(wǎng)頁設(shè)計圖

一、網(wǎng)頁設(shè)計目的

1.1 網(wǎng)頁設(shè)計需求淺談：

隨著網(wǎng)絡(luò)技術(shù)以及網(wǎng)頁制作技術(shù)方面的日臻成熟人們越來越關(guān)注網(wǎng)頁的美觀性，所以當(dāng)下網(wǎng)頁制作的一個最主要的出發(fā)點(diǎn)就是網(wǎng)頁的美觀和可操作性。在表達(dá)一些理念方面東西的時候能更加的形象化與多樣化。就全球上網(wǎng)的人數(shù)來說，有很多的人正通過個人空間來改變他們的生活方式，同時學(xué)生也學(xué)習(xí)到了 各個方面不同的知識，人們通過自己的文字來傳遞著不同的信息。作為一個發(fā)展迅速的網(wǎng)絡(luò)空間,個人空間向我們透露著這個信息傳遞和情感的平臺將影響接下來的幾代人.1.2 個人網(wǎng)頁設(shè)計理念：

本次畢業(yè)設(shè)計目的就是做一個屬于自己的主頁，通過一些信息來表達(dá)自己的一些思想與觀點(diǎn)，還有就是一些個人對于生活的一些心得體會，再其中加入個性化的元素能表現(xiàn)自己符合自己性格的色彩搭配與文字圖畫以及音頻，當(dāng)然也是對過去的留戀，故空間名取名為流年，給人一種懷舊的感覺。

1.3 制作背景

a.網(wǎng)站項目的名稱：個人空間 b.用戶：普通的用戶

1.4術(shù)語定義

個人空間：就是一個網(wǎng)頁，它通常是由簡短且經(jīng)常更新的信息所構(gòu)成。這些張貼的文章都按照年份和日期倒序排列，也就是最新的放在最上面，最舊的在最下面。不同的內(nèi)容和目的有很大的不同，從對網(wǎng)絡(luò)資源的整理與評論，到有關(guān)公司、個人的構(gòu)想，從新聞、照片到日記、詩歌、散文，甚至科幻小說都應(yīng)有盡有。

二、網(wǎng)頁設(shè)計說明以及瀏覽工具

2.1 網(wǎng)頁設(shè)計說明

（1）名稱：流年

（2）性質(zhì)：個人空間

（3）主要內(nèi)容：這是一個以個人空間為主題的網(wǎng)頁設(shè)計，所包括的頁面開場動畫、主頁、日志、相冊、音樂、資料、留言板等。

（4）版式：左邊為導(dǎo)航區(qū)，右邊為展示區(qū)。

（5）風(fēng)格：主調(diào)請親而不失格調(diào)，色彩淡雅，版面活潑風(fēng)趣。

2.2 字體、色彩方案

為了個人空間網(wǎng)頁設(shè)計能夠更好投入到實(shí)際操作中，特此準(zhǔn)備了兩種方案。

（1）一種為淡暖色系

黃綠色（C：9 M：0 Y：36 K：0）橙色調(diào)（C：0 M：30 Y：70 K：0）朱紅色(C:：32 M:：72 Y：85 K：29）

為主色調(diào) 為輔色調(diào)

為輔色調(diào)

字體均采用華康少女字體、華康采風(fēng)字體、華康娃娃體。

（2）一種為清藍(lán)色系（備選方案）

淡藍(lán)色（C：9 M：0 Y：36 K：0）

粉紅色（C：7 M：33 Y： 0 K：0）

桔黃色(C：0 M：36 Y：47 K：0）

為主色調(diào) 為輔色調(diào)

為輔色調(diào)

字體均采用楷體字體、仿宋字體、黑體.（3）整體色彩都采用代表憂傷的顏色，以便烘托出“流年”這個主題，達(dá)到更好的視覺上的享受。

2.3 工作環(huán)境：

操作系統(tǒng)：Windows XP以上系統(tǒng) 制作工具：Photoshop CS5

2.4 瀏覽工具：

IE瀏覽器

三、個人網(wǎng)頁功能模塊設(shè)計（第一種方案）

3.1 空間動畫

本頁采用貼圖的形式來展現(xiàn)整個動畫，主體上以書為主，以圖片為輔，書本上C’EST LA VIE（這就是生活）正在訴述著人生的種種，零零碎碎的照片，CRY，NEVER，LOST，BELONG，EVEN各種的心情，從不同角度展現(xiàn)生活的美，讓用空間那種獨(dú)特的方式向讀者娓娓道來我的生活。

文本區(qū)：文字都運(yùn)用華康隸書體，給人一種親切感而又不失嚴(yán)肅。

色彩區(qū)：整頁運(yùn)用灰色（C：4 M：4 Y：4 K：4）為主，白

色（C：0 M：0 Y：0 K：0）

赤褐色（C:：20 M:：30 Y：45 K：0）

黑

色（C:：0 M:：0 Y：0 K：100）

朱紅色(C:：32 M:：72 Y：85 K：29）

為輔 3.2

主頁

主頁采用了左中下的框架結(jié)構(gòu)，左上角的空間名稱“流年”讓人充分了解主題，字的旁邊添加一些線條花加以點(diǎn)綴，顯得生動活潑。在左側(cè)的導(dǎo)航欄中的選項界面運(yùn)用圓形的方式將其逐一展現(xiàn)出，并且均在每一張頁面上能夠得到顯示，右側(cè)的圖片區(qū)放入一張小女孩對過去的懷念之情的手繪圖。下邊的導(dǎo)航欄中以新鮮事、相冊、聯(lián)系方式展現(xiàn)，相冊中運(yùn)用到了時間軸，照片在一定時間內(nèi)可以飄過，這樣增加了畫面的跳躍感。在所有頁面中都采用了簡潔的樣式，從而達(dá)到網(wǎng)頁表現(xiàn)與內(nèi)容分離的目的，讓我能更好的設(shè)計網(wǎng)頁的顯示效果。

色彩區(qū)：

整體頁面以黃綠色（C：9 M：0 Y：36 K：0）色調(diào)

橙色調(diào)（C：0 M：30 Y：70 K：0）

“流年”采用了方正隸二簡體字體，48，嚴(yán)謹(jǐn)而不失大體，其色彩為朱紅色(C:：32 M:：72 Y：85 K：29）

“主頁、日志、相冊、音樂、資料、留言板”采用了華康少女文字，簡單 14 以黃綠色（C：9 M：0 Y：36 K：0）

為已打開頁面。

為輔色調(diào)

為主

橙色調(diào)（C：0 M：30 Y：70 K：0）

為未打開頁面

“新鮮事、相冊”采用了華康流線體，流暢14，以（C：0 M：55 Y：74 K：0）

下方的日志排列采用了方正隸變簡體，9.5，以黑色（C：0 M：0 Y：0 K：100），以及聯(lián)系方式采用了華康少女字體，10，以橙黃色（C：0 M：55 Y：74 K：0），粉紅色（C：0 M：30 Y：37 K：0）

。3.3

日志

個人日志中僅僅是一個日志列表的顯示，我所做的就是用傳統(tǒng)的樣式讓日志展現(xiàn)出來，按照日期來排列，并且標(biāo)注一些日志是最新的，整個日志列表有日期、標(biāo)題、瀏覽量以及橫線、翻頁欄來組成。同時將個人的聯(lián)系方式放到了左下角，以便訪客可以及時和我聯(lián)系。日志列表的最上角的運(yùn)用了三張照片和一張信封、一杯咖啡，希望訪客能夠在品嘗咖啡的同時來享受這些所帶來的觸動。右上角的白色的SPING THE STORY粘貼在墨跡上，仿佛在訴說著這些故事的深遠(yuǎn)，并且與右下角的山水圖對應(yīng)。

色彩區(qū)：

黃綠色（C：9 M：0 Y：36 K：0）橙色調(diào)（C：0 M：30 Y：70 K：0）

為主色調(diào) 為輔色調(diào)

“日期、標(biāo)題、瀏覽量”采用了Adobe 楷體std，12，黑色（C：0 M：0 Y：0 K：100）。

日志列表中的日期、瀏覽量，采用了Arialz字體，而日志名采用了方正隸變字體，統(tǒng)一大小9.5，灰色（C：57 M：49 Y：48 K：15）

3.4 日志簡介

在日志簡介中我采用了最簡潔的排版，文本區(qū)我插入了FATE/ZERO NIGHT這篇文章，緊跟其后就是創(chuàng)作的時間以及閱讀量。文章下方還有“贊、轉(zhuǎn)載、分享、評論、復(fù)制地址、舉報、更多等多種對文章的選項，到文章的右下角還有上一篇以及下一篇的提示。整體版面簡潔大方，讓人能夠一目了然。在整個頁面的右下角的插入圖片，主要目的是為了讓訪客能夠體會這個圖片對生活的期待。

色彩區(qū)：

黃綠色（C：9 M：0 Y：36 K：0）橙色調(diào)（C：0 M：30 Y：70 K：0）

為主色調(diào) 為輔色調(diào)

文章的標(biāo)題以及時間日期均采用了Arial字體，18，正文部分采用了Arial字體，10，灰色（C：59 M：50 Y：50 K：18）

文本區(qū)的導(dǎo)航欄的文字采用了Arialz黑體std字體，10，淺灰色（C：29 M：24 Y：24 K：0）

3.5 相冊界面：

此頁面中采用了左右的排版，左側(cè)為導(dǎo)航欄包括左下角的聯(lián)系方式，當(dāng)訪客打開電子相冊時，就會出現(xiàn)一個翻開的書，書上粘貼著一個關(guān)于尋找過去，珍惜現(xiàn)在所擁有的童話故事“小王子”，畫面色彩清晰分明，能在那么一瞬間走入訪客的心里，并且點(diǎn)擊進(jìn)入這個淺藍(lán)色按鈕，繼續(xù)欣賞下去循環(huán)下去。整體畫面清新，主題明顯，色彩暖人心。

色彩區(qū)：

黃綠色（C：9 M：0 Y：36 K：0）橙色調(diào)（C：0 M：30 Y：70 K：0）

淺藍(lán)色(C：20 M：6 Y：6 K：0)

灰藍(lán)色(C：3 M：2 Y：4 K：0)

為主色調(diào) 為輔色調(diào)

為輔色調(diào) 為輔色調(diào)

“個人相冊”采用了楷體字體，能夠方便訪客進(jìn)入界面，25，灰色(C：67 M：60 Y：59 K：44).，“點(diǎn)擊進(jìn)入”采用了黑體，8，白色（(C：0 M：0 Y：0 K：0)下方的相冊簡介采用了華康采風(fēng)體，6，淺灰色(C：58 M：50 Y：49 K：17)，整體字體運(yùn)用的合理到位，活潑而又不失單調(diào)。

3.6 相冊展示：

相冊展示中我采用的流動的方式來展示照片，在展示區(qū)運(yùn)用了一個展示欄，有樹葉，有房子，帶給人一種清新的感覺，能夠充分的烘托出主題，圖片大都選用了色彩比較溫和而又不失風(fēng)格，而且相冊名為清新，圖片與名稱相呼應(yīng)。大圖片為一個小女孩正在望著天空，戴著一個貓咪的帽子，被風(fēng)吹起的頭發(fā)，飄起的裙擺，就這樣，輕輕地走進(jìn)人的心底。下方的小圖片采用的是流動展示的方式，點(diǎn)擊下方的指示欄就可以進(jìn)入下一組圖片。整體版面干凈明了。

色彩區(qū)：

黃綠色（C：9 M：0 Y：36 K：0）橙色調(diào)（C：0 M：30 Y：70 K：0）

為主色調(diào) 為輔色調(diào)

上方的相冊名稱“清新、暖暖、唯美、意境、浪漫”采用了華康娃娃體，17，深橙色（C：19 M：57 Y：82 K：4）暗綠色（C：39 M：17 Y：96 K：1）

為未打開的相冊，為已打開的相冊。

下方的流動相冊的“BACK、NEXT”采用了華康童童體，16，橘黃色（C：0 M：25 Y：64 K：0）

3.7 音樂：

音樂的界面采用了左右兩側(cè)的排版來向訪客展示，左側(cè)的導(dǎo)航欄沿襲一貫的風(fēng)格，右側(cè)的展示區(qū)標(biāo)題部分“ENJOY YOURSELF，SMILE（享受自己，笑一笑）”，希望訪客可以放松心態(tài)來享受聽覺上的心靈盛宴，旁邊插入了一張卡通風(fēng)格的圖片，以此來襯托音樂這個主題。搜索欄上簡潔而方便訪客搜索音樂。對于每個人聽音樂的心情不同，所以我把不同心情時會聽的音樂分了一下類別，分為開心時，激動時，安靜時，憂傷時，思念時，甜蜜時，幸福時，想哭時等，分別對應(yīng)上相應(yīng)的圖片，以達(dá)到更好的效果。下方的翻頁欄依然還是沿用傳統(tǒng)的風(fēng)格。整體感覺不單調(diào)，有種別致清新的感動。

色彩區(qū)：

黃綠色（C：9 M：0 Y：36 K：0）

橙色調(diào)（C：0 M：30 Y：70 K：0）

灰色調(diào)（C：0 M：30 Y：70 K：0）

為主色調(diào) 為輔色調(diào)

為輔色調(diào)

標(biāo)題部分“ENJOY YOURSELF,SMILE”采用了華康童童體，30，標(biāo)題下方的介紹文字采用了方正體，12，康體簡橙色調(diào),橙色調(diào)（C：0 M：30 Y：70 K 0）0）

“搜索”以及各種心情時的文字采用了華康少女字體，10，白色（C：0 M：0 Y：0 K：0）橙色調(diào)（C：0 M：30 Y：70 K 0）

。淺灰色（C：34 M：30 Y：29 K：

3.8 音樂列表：

音樂的界面采用了左右兩側(cè)的排版來向訪客展示，左側(cè)的導(dǎo)航欄以及右側(cè)下角的翻頁欄沿襲一貫的風(fēng)格，右側(cè)的音樂列表取用了思念時的一個界面，仍舊還有搜索欄，按照時間、歌手和歌名來搜索的搜索欄，簡單而又實(shí)用。五張整齊的圖片排列著，正在向訪客們輕輕地訴說著屬于他們的那一份單純的思念。圖片下方的文字介紹著思念時聽著音樂的故事。思念一個人的很安靜，所以歌曲全大多數(shù)選用輕緩節(jié)奏的九首歌曲，還有三個簡單的選項“播放、下載、評論”供訪客選擇，可以讓訪客沉醉在音樂的世界里。

色彩區(qū)：

黃綠色（C：9 M：0 Y：36 K：0）

橙色調(diào)（C：0 M：30 Y：70 K：0）

灰色調(diào)（C：0 M：30 Y：70 K：0）

為主色調(diào) 為輔色調(diào)

為輔色調(diào)

標(biāo)題上方的“音樂”采用了華康少女文字，活潑可愛，18，灰色 “思念時”以及文字介紹均采用了楷體，8和6（C：51 M：43 Y 43 K：7），橙色調(diào)（C：0 M：30 Y：70 K：0）。

音樂列表中的字體都是采用Adobe 楷體字體和迷你簡小隸書，字 體簡潔適合，7.5和8.5，（C：51 M：43 Y43 K：7）

3.9 個人資料：

此頁面采用左右排版，左側(cè)風(fēng)格依舊，右側(cè)使用方框來展示內(nèi)容，套用了騰訊空間的展示頁面，三個方框分別用來展示主人照片、空間等級、以及個人資料，用方框的方式來展現(xiàn)內(nèi)容，可以具體化，也可以抽象化。在個人資料上有一部分的空間的簡介，充分顯示出流年-憶往昔，而且使用了不同顏色來敘說這個空間的真正意義。下方還有兩個興趣愛好、空間動態(tài)兩個藍(lán)色按鈕，使用了凹凸效果，能夠讓人眼前一亮，可以更好達(dá)到提到人氣，而且能交到志同道合的朋友。

色彩區(qū)：

黃綠色（C：9 M：0 Y：36 K：0）

橙色調(diào)（C：0 M：30 Y：70 K：0）

灰色調(diào)（C：0 M：30 Y：70 K：0）

為主色調(diào) 為輔色調(diào)

為輔色調(diào)

暗綠色（C：23 M：0 Y：63 K：0）為輔色調(diào)

空間資料上的文字采用了華康少女字體，11，淡粉（C：1 M：17

Y：40 K：0），以及空間名稱采用了華康娃娃體和迷你簡體柏青，18，暗藍(lán)色（C：92 M：71 Y：30 K：13）

空間介紹上的文字采用了華康楷體字體，8，黑色（C：0 M：0 Y：0 K：0）。

3.10 留言板：

留言板的界面以簡潔來展示，依然是右側(cè)來展示留言板的內(nèi)容，分為留言主頁，有話要說，留言管理三個部分，旁邊加上兩個紙飛機(jī)是為烘托留言這個主題。整體簡潔方便訪客暢所欲言，版式套用騰訊空間的模式，再加以修飾，組成了這一部分畫面，右下角的圖片，溫暖的氣氛，讓人不緊想休息一會，對整個頁面進(jìn)行評價。

色彩區(qū)：

黃綠色（C：9 M：0 Y：36 K：0）橙色調(diào)（C：0 M：30 Y：70 K：0）

為主色調(diào) 為輔色調(diào)

淡藍(lán)色（C：4

M：1 Y：5 K：0）為輔色調(diào)

留言板的選項上采用了楷體字體，10，暗藍(lán)色（C：62 M：44 Y：22 K：1）

其他字體均為華康少女字體，12，粉紅色（C：0 M：19 Y：20

K：0）

四、總結(jié)

4.1 技術(shù)總結(jié)：

我在個人主頁的制作過程中唯一讓我感到通過自己學(xué)習(xí)所能應(yīng)用的技術(shù)就是PSD，雖然不能完全的理解但是通過查閱資料還是將其運(yùn)用到網(wǎng)頁制作中。當(dāng)然還有在課堂中學(xué)習(xí)到的技術(shù)在網(wǎng)頁上的應(yīng)用。4.2 個人心得總結(jié)：

初看到網(wǎng)頁設(shè)計的時候心情十分焦躁，雖然老師在課上講了許多東西，但是沒有真正的應(yīng)用過，所以在心理上產(chǎn)生了恐懼感，但是通過自己對課件的一個梳理以及在翻閱書籍中獲得了大量的知識，以及制作信心。尤其是在PS的應(yīng)用中我深刻的體會到了自我學(xué)習(xí)的重要性，俗話說：“師父領(lǐng)進(jìn)門，修行在個人?！蓖ㄟ^此次作業(yè)真正讓我領(lǐng)悟了自我學(xué)習(xí)才是在今后學(xué)習(xí)以及生活中不斷提高自己的最重要的途徑。學(xué)習(xí)了一個學(xué)期的網(wǎng)頁制作，真正讓我收獲了一種學(xué)習(xí)態(tài)度，我感覺這是我最重要的收獲。當(dāng)然還有專業(yè)知識方面的學(xué)習(xí)，雖然學(xué)習(xí)的不精深但還是收獲了，收獲了網(wǎng)頁的一些基礎(chǔ)知識，這就所謂的學(xué)海無涯吧。

第二篇：網(wǎng)頁設(shè)計說明書

網(wǎng) 站 設(shè) 計 說 明 書

一、設(shè)計理念

本網(wǎng)站定位 本身是用于展示個人作品的一個平臺頁面系統(tǒng)。在展示之余也有推銷網(wǎng)站 建設(shè)之功效....頁面主要以 深紅色調(diào)風(fēng)格為主,站點(diǎn)分為有 首頁簡介、關(guān)于我的作品、經(jīng)典作品展示、與我聯(lián)系方式等 各個方面子頁面.本站頁面主要展示的是本人在暑假實(shí)習(xí)公司開發(fā)的一些 作品...整體頁面使用到了 CSS 層樣式技術(shù)。

二、設(shè)計流程

網(wǎng)站主要以自己喜愛的東西而制作，并根據(jù),相應(yīng)要求 到網(wǎng)上尋找相應(yīng)的 圖片素材 以及 應(yīng)用到 PS 圖片設(shè)計結(jié)束.最后 應(yīng)用 HTML 網(wǎng)站設(shè)計技術(shù) 使用 DIV+CSS 進(jìn)行頁面布局的定位設(shè)計.三、使用的工具與技術(shù)

網(wǎng)頁制作工具 : Dreamweaver CS5 多媒體設(shè)計制作工具:Photoshop 應(yīng)用到的設(shè)計技術(shù)： HTML、CSS.四、網(wǎng)站設(shè)計說明

網(wǎng)站名稱: 夢幻部落-作品展示廳 整體形象設(shè)計包括標(biāo)準(zhǔn)字、Logo、標(biāo)準(zhǔn)色彩、廣告語等.首頁作為網(wǎng)站的形象頁，作為網(wǎng)站的歡迎頁面，引入的元素大致有網(wǎng)站名稱、LOGO、形象圖片、宣傳文字、欄目導(dǎo)航等要素,是彰顯網(wǎng)站整體風(fēng)格的重要頁面, 并結(jié)合 FLASH 動畫來展示.網(wǎng)站形象頁的設(shè)計突出..展示為主題，通過文字、形象、圖片的巧妙烘托，令頁面富有 層次感，達(dá)到賞心悅目的效果。

五、頁面結(jié)構(gòu)布局

(1)、首頁布局、網(wǎng)站 Logo 幻燈片展示切換 頁面鏈接 站點(diǎn)介紹 頁面介紹 在線聯(lián)系方式 頁面底部

(2)、站長個人簡介頁面、網(wǎng)站 Logo 幻燈片展示切換 頁面鏈接 個人簡介 內(nèi)容 更多鏈接 頁面底部

(3)、作品展示頁面、網(wǎng)站 Logo 幻燈片展示切換 頁面鏈接 作品展示 欄 頁面底部

(4)、聯(lián)系方式頁面、網(wǎng)站 Logo 幻燈片展示切換 頁面鏈接 聯(lián)系 提交 表單 其他聯(lián)系方式 網(wǎng)站建設(shè) 套餐 頁面底部

第三篇：網(wǎng)頁設(shè)計崗位職責(zé)說明書

網(wǎng)頁設(shè)計崗位職責(zé)說明書

1、網(wǎng)站設(shè)計和運(yùn)營維護(hù)中的設(shè)計工作;

2、網(wǎng)站的FLASH和GIF動畫設(shè)計制作;

3、網(wǎng)站發(fā)展中涉及到的視頻處理和片頭動畫。

網(wǎng)頁設(shè)計崗位職責(zé)(二)

1、參與公司產(chǎn)品的整個策劃溝通過程，了解需求與設(shè)計細(xì)節(jié);

2、負(fù)責(zé)設(shè)計網(wǎng)站、小程序、APP等界面，并獨(dú)立完成靜態(tài)頁;

3、對最終上線的頁面負(fù)責(zé)，對自己的效果圖有較高要求，有像素精神。

網(wǎng)頁設(shè)計崗位職責(zé)(三)

1、負(fù)責(zé)網(wǎng)頁設(shè)計、排版、維護(hù);

2、產(chǎn)品上新、拍照、美圖、維護(hù);

2、負(fù)責(zé)產(chǎn)品宣傳冊的設(shè)計、排版;

3、其他上級交待的事宜

網(wǎng)頁設(shè)計崗位職責(zé)(四)

1、負(fù)責(zé)公司產(chǎn)品的界面進(jìn)行設(shè)計、編輯、美化等工作;

2、對公司的宣傳產(chǎn)品進(jìn)行美工設(shè)計;

3、負(fù)責(zé)客戶及系統(tǒng)內(nèi)的廣告和專題的設(shè)計;

4、負(fù)責(zé)與開發(fā)人員配合完成所轄網(wǎng)站等前臺頁面設(shè)計和編輯。

網(wǎng)頁設(shè)計崗位職責(zé)(五)

1、負(fù)責(zé)天貓旗艦店、京東等電商平臺網(wǎng)店整體形象設(shè)計、網(wǎng)店風(fēng)格、版面調(diào)整及商品展示設(shè)計,首頁廣告圖片制作及美化、整體布局、活動廣告和相關(guān)圖片的制作;

2、負(fù)責(zé)實(shí)物照片的處理。對新產(chǎn)品進(jìn)行排版，優(yōu)化店內(nèi)寶貝描述，美化產(chǎn)品圖片提高產(chǎn)品轉(zhuǎn)化率，增強(qiáng)店鋪吸引力、產(chǎn)品銷量

;

3、負(fù)責(zé)產(chǎn)品推廣活動促銷海報設(shè)計、新媒體宣傳海報、圖片等設(shè)計;

4、負(fù)責(zé)定期對網(wǎng)店店鋪裝修、版面調(diào)整以及產(chǎn)品詳情的日常維護(hù)等工作;

5、負(fù)責(zé)各類宣傳物料的設(shè)計及實(shí)物制作工作;

6、負(fù)責(zé)參與新開發(fā)產(chǎn)品的外包裝設(shè)計;

7、完成領(lǐng)導(dǎo)交辦的其他工作。

第四篇：網(wǎng)頁美工崗位說明書

網(wǎng)頁美工崗位說明書

網(wǎng)頁美工崗位說明書

網(wǎng)頁美工是精通美學(xué)，ps，flash，dw等一網(wǎng)站制作軟件的網(wǎng)絡(luò)人員，必須具有良好的創(chuàng)意和一定程度的審美觀。必要時需要一定的策劃知識。

網(wǎng)頁美工崗位職責(zé)

1、負(fù)責(zé)網(wǎng)站界面設(shè)計、編輯、美化、改版、更新等工作;

2、制作簡單的flash廣告;

3、負(fù)責(zé)與開發(fā)人員配合完成所轄網(wǎng)站等前臺頁面設(shè)計，編輯，前端靜態(tài)頁面開發(fā);

4、負(fù)責(zé)客戶及系統(tǒng)內(nèi)的廣告和專題的設(shè)計;

5、公司日常工作美術(shù)設(shè)計和宣傳

資料的制作;

6、其他與美工設(shè)計相關(guān)的工作。

網(wǎng)頁美工崗位要求

1、熟悉網(wǎng)站制作、設(shè)計流程，熟悉網(wǎng)頁基本架構(gòu)和表現(xiàn)形式;

2、精通coredraw、dreamweaver、photoshop，對flash、ai有一定的了解;

3、精通div+css,熟悉開源cms網(wǎng)站模板制作;

4、色彩控制能力、想象力，較強(qiáng)的網(wǎng)站整體風(fēng)格定位;

5、有扎實(shí)的美術(shù)功底，良好的創(chuàng)意思維和理解能力;

6、有責(zé)任心和嚴(yán)謹(jǐn)?shù)墓ぷ鲬B(tài)度，抗壓力強(qiáng);

7、富有創(chuàng)造力，有創(chuàng)意、有想法，制作的作品吸引人，突出重點(diǎn)。

網(wǎng)頁美工關(guān)鍵技能

專業(yè)能力

psillustratordreamweaverflashfireworks

個人能力

審美能力創(chuàng)新能力美術(shù)功底

網(wǎng)頁美工升職空間

網(wǎng)頁美工 → 高級美工設(shè)計 → 設(shè)計總監(jiān)

網(wǎng)頁美工薪情概況

應(yīng)屆畢業(yè)生￥

1年經(jīng)驗(yàn)￥

2年經(jīng)驗(yàn)￥

3年經(jīng)驗(yàn)￥

網(wǎng)頁美工工作內(nèi)容

1、公司網(wǎng)站的設(shè)計，頁面框架搭構(gòu)，頁面制作;

2、網(wǎng)頁的維護(hù)改版：活動專題，廣告banner，創(chuàng)意展示等;

3、公司對外宣傳頁面以及自媒體宣傳頁面的設(shè)計;

4、網(wǎng)站專題頁面的設(shè)計與實(shí)現(xiàn);

5、網(wǎng)站產(chǎn)品單頁的設(shè)計與制作;

6、產(chǎn)品圖的修圖美化。

第五篇：個人網(wǎng)頁設(shè)計(論文)

炎黃職業(yè)技術(shù)學(xué)院信息工程系

畢業(yè)設(shè)計（論文）

個人網(wǎng)頁設(shè)計

年 級: _ 2009級___ _ 學(xué) 號: _ 0******17 _ 姓 名: __ _****_____ 專 業(yè): 網(wǎng)絡(luò)數(shù)字媒體 _ 指導(dǎo)老師: __ ****__ __

二零一一年十二月 炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

摘 要

本論文將對個人網(wǎng)頁設(shè)計與制作的方法、工具等展開研究和探討。在介紹網(wǎng)頁設(shè)計與制作語言的基礎(chǔ)上，著重使用CSS樣式表作為工具語言進(jìn)行網(wǎng)頁設(shè)計與制作的實(shí)際操作，分別對基于對象的JavaScript語言、用于編輯HTML語言的軟件進(jìn)行了詳細(xì)的介紹。

本論文主要章節(jié)如下，炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

1、是一種腳本編寫語言

JavaScript是一種腳本語言，它采用小程序段的方式實(shí)現(xiàn)編程。像其它腳本語言一樣,JavaScript同樣已是一種解釋性語言,它提供了一個易的開發(fā)過程。

它的基本結(jié)構(gòu)形式與C、C++、VB、Delphi十分類似。但它不像這些語言一樣，需要先編譯，而是在程序運(yùn)行過程中被逐行地解釋。它與HTML標(biāo)識結(jié)合在一起，從而方便用戶的使用操作。

2、基于對象的語言。

JavaScript是一種基于對象的語言，同時以可以看作一種面向?qū)ο蟮?。這意味著它能運(yùn)用自己已經(jīng)創(chuàng)建的對象。因此，許多功能可以來自于腳本環(huán)境中對象的方法與腳本的相互作用。

3、簡單性

JavaScript的簡單性主要體現(xiàn)在：首先它是一種基于Java基本語句和控制流之上的簡單而緊湊的設(shè)計, 從而對于學(xué)習(xí)Java是一種非常好的過渡。其次它的變量類型是采用弱類型，并未使用嚴(yán)格的數(shù)據(jù)類型。

4、安全性

JavaScript是一種安全性語言，它不允許訪問本地的硬盤，并不能將數(shù)據(jù)存入到服務(wù)器上，不允許對網(wǎng)絡(luò)文檔進(jìn)行修改和刪除，只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動態(tài)交互。從而有效地防止數(shù)據(jù)的丟失。

5、動態(tài)性的

JavaScript是動態(tài)的，它可以直接對用戶或客戶輸入做出響應(yīng)，無須經(jīng)過Web服務(wù)程序。它對用戶的反映響應(yīng)，是采用以事件驅(qū)動的方式進(jìn)行的。所謂事件驅(qū)動，就是指在主頁(Home Page)中執(zhí)行了某種操作所產(chǎn)生的動作，就稱為“事件”(Event)。比如按下鼠標(biāo)、移動窗口、選擇菜單等都可以視為事件。當(dāng)事件發(fā)生后，可能會引起相應(yīng)的事件響應(yīng)。

6、跨平臺性

JavaScript是依賴于瀏覽器本身，與操作環(huán)境無關(guān)，只要能運(yùn)行瀏覽器的計算機(jī)，并支持JavaScript的瀏覽器就可正確執(zhí)行。從而實(shí)現(xiàn)了“編寫一次,走遍天下”的夢想。

實(shí)際上JavaScript最杰出之處在于可以用很小的程序做大量的事。無須有高性能的電腦，軟件僅需一個字處理軟件及一瀏覽器，無須WEB服務(wù)器通道，通過自己的電腦即可完成所有的事情。

總之，JavaScript 是一種新的描述語言，它可以被箝入到 HTML 的文件之中。JavaScript語言可以做到回應(yīng)使用者的需求事件(如：form的輸入)，而不用任何的網(wǎng)路來回傳輸資料，所以當(dāng)一位使用者輸入一項資料時，它不用經(jīng)過傳給伺服端(server)處理，再傳回來的過程，而直接可以被客戶端(client)的應(yīng)用程式所處理。

炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

JavaScript 和 Java 很類似，但到底并不一樣！Java 是一種比 JavaScript 更復(fù)雜許多的程式語言，而 JavaScript 則是相當(dāng)容易了解的語言。JavaScript 創(chuàng)作者可以不那麼注重程式技巧，所以許多 Java 的特性在 Java Script 中并不支援。

2.3 CSS樣式表

級聯(lián)樣式表（Cascading Style Sheet）簡稱“CSS”，通常又稱為“風(fēng)格樣式表（Style Sheet）”，它是用來進(jìn)行網(wǎng)頁風(fēng)格設(shè)計的。比如，如果想讓鏈接字未點(diǎn)擊時是藍(lán)色的，當(dāng)鼠標(biāo)移上去后字變成紅色的且有下劃線，這就是一種風(fēng)格。通過設(shè)立樣式表，可以統(tǒng)一地控制HMTL中各標(biāo)志的顯示屬性。級聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁外觀。使用級聯(lián)樣式表，可以擴(kuò)充精確指定網(wǎng)頁元素位置，外觀以及創(chuàng)建特殊效果的能力。

CSS目前最新版本為CSS2,能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計語言。相對于傳統(tǒng)HTML的表現(xiàn)而言，CSS能夠?qū)W(wǎng)頁中的對象的位置排版進(jìn)行像素級的精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象盒模型的能力，并能夠進(jìn)行初步交互設(shè)計，是目前基于文本展示的最優(yōu)秀的表現(xiàn)設(shè)計語言。

在網(wǎng)頁上使用樣式表有三種方法可以在站點(diǎn)網(wǎng)頁上使用樣式表：

將網(wǎng)頁鏈接到外部樣式表。

在網(wǎng)頁上創(chuàng)建嵌入的樣式表。

應(yīng)用內(nèi)嵌樣式到各個網(wǎng)頁元素。

當(dāng)要在站點(diǎn)上所有或部份的網(wǎng)頁上一致地應(yīng)用相同樣式時，可使用外部樣式表。在一個或多個外部樣式表中定義樣式，并將它們鏈接到所有網(wǎng)頁，便能確保所有網(wǎng)頁外觀的一致性。如果人們決定更改樣式，只需在外部樣式表 — 中作一次更改 — 而該更改會反映到所有與該樣式表相鏈接的網(wǎng)頁上。通常外部樣式表以.css 做為文件擴(kuò)展名，例如 Mystyles.css。

當(dāng)人們只是要定義當(dāng)前網(wǎng)頁的樣式，可使用嵌入的樣式表。嵌入的樣式表是一種級聯(lián)樣式表，“嵌”在網(wǎng)頁的 標(biāo)記符內(nèi)。嵌入的樣式表中的樣式只能在同一網(wǎng)頁上使用。

使用內(nèi)嵌樣式以應(yīng)用級聯(lián)樣式表屬性到網(wǎng)頁元素上。

如果網(wǎng)頁鏈接到外部樣式表，為網(wǎng)頁所創(chuàng)建的內(nèi)嵌的或嵌入式樣式將擴(kuò)充或覆蓋外部樣式表中的指定屬性。

炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

圖2-2 隨筆

相冊效果圖2-3如下：

圖2-3 相冊

音樂效果圖2-4如下：

圖2-4 音樂

關(guān)于我效果圖2-5如下：

炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

圖2-5 關(guān)于我

3.2 網(wǎng)站主題

本網(wǎng)站是一個簡單的個人網(wǎng)站設(shè)計，以動漫為主題，主要包括了本人的自我介紹、比較喜愛的動漫作品以及平時的娛樂等。

3.3 網(wǎng)站風(fēng)格

1.本網(wǎng)站主要體現(xiàn)了清新自然的風(fēng)格，以簡潔為主。2.網(wǎng)站的主色調(diào)為綠和白，充分襯托清新自然的風(fēng)格。

炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

(1)執(zhí)行“插入”—“新建元件”命令，創(chuàng)建一個名稱為“拉伸的葉片”的影片剪輯元件。

(2)選擇矩形工具，設(shè)置填充顏色，在舞臺上繪制一個無描邊舉行，在屬性面板中設(shè)置寬和高。

(3)選擇矩形，將其轉(zhuǎn)換成“名稱”為“葉片”的圖形元件。(4)選擇

onmouseout=“makevisible(this,1)”

onmouseout=“makevisible(this,1)” 炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

2.輸入文字，制作超鏈接。

4.6 xiangce4.html頁面的制作

1.制作圖庫頁面。

(1)新建一個網(wǎng)頁文檔，建立圖庫頁面的基本布局。

(2)將光標(biāo)定位在頁面左側(cè)的 炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）“1”，單擊[確定]按鈕回到行為面板，將此行為事件改為“onclick”。

(2)用同樣的方法，給另外3張圖像添加同樣的行為，將 炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

致

謝

本論文歷時兩個多月，我系統(tǒng)綜合地將我所學(xué)的知識運(yùn)用于畢業(yè)設(shè)計的全過程。在完成畢業(yè)設(shè)計中，首先我要感謝我的指導(dǎo)教師****老師。*老師耐心細(xì)致地指導(dǎo)我畢業(yè)設(shè)計，提出了很多精辟而富有建設(shè)性的建議。*老師認(rèn)真負(fù)責(zé)的工作態(tài)度，嚴(yán)謹(jǐn)?shù)闹螌W(xué)態(tài)度都給我留下了深刻的印象，在學(xué)習(xí)上給予了我極大的關(guān)心和幫助，在此表示衷心感謝！

同時，感謝炎黃職業(yè)技術(shù)學(xué)院為我提供了一個良好的學(xué)習(xí)環(huán)境，感謝學(xué)院的領(lǐng)導(dǎo)和老師們！他們無微不至的關(guān)懷、精心的培養(yǎng)使我到了很多的知識，終生受益！

炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計（論文）

參考文獻(xiàn)

[1] 繆亮.Dreamweaver CS3 基礎(chǔ)與實(shí)訓(xùn)教程.電子工業(yè)出版社，2008年.[2] 李冬蕓.Flash動畫實(shí)例教程.電子工業(yè)出版社，2010年.[3] 繆亮，郭剛.Photoshop平面設(shè)計實(shí)用教程.清華大學(xué)出版者，2008年.