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

1、個 人 網(wǎng) 頁 設(shè) 計 說 明 書目錄1、 網(wǎng)頁設(shè)計目的1.1網(wǎng)頁設(shè)計需求淺談21.2個人網(wǎng)頁設(shè)計理念21.3 制作背景21.4 術(shù)語定義22、 網(wǎng)頁設(shè)計以及瀏覽工具2.1網(wǎng)頁設(shè)計說明32.2色彩方案32.3 工作環(huán)境32.4 瀏覽工具33、 個人網(wǎng)頁功能模塊設(shè)計3.1 空間動畫43.2主頁53.3日志73.4日志簡介83.5相冊界面93.6相冊展示103.7音樂113.8 音樂列表123.9 個人資料133.10留言板144、 總結(jié)4.1技術(shù)總結(jié)154.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)頁

2、的美觀性，所以當(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)然也是對過去的留

3、戀，故空間名取名為流年，給人一種懷舊的感覺。 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、板等。 （4）版式：左邊為導(dǎo)航區(qū)，右邊為展示區(qū)。 （5）風(fēng)格：主調(diào)請親而不失格調(diào)，色彩淡雅，版面活潑風(fēng)趣。2.2 字體、色彩方案 為了個人空間網(wǎng)頁設(shè)計能夠更好投入到實際操作中，特此準(zhǔn)備了兩種方案。（1） 一種為淡暖色系 黃綠色（C：9 M：0 Y：36 K：0）為主色調(diào)橙色調(diào)（C：0 M：30 Y：70 K：0）為輔色調(diào) 朱紅色 (C:：32 M:：72 Y：85 K：29）為輔色調(diào)字體均采用華康少女字體、華康采風(fēng)字體、華康娃娃體。 （2）一種為清藍(lán)色系（備選方案） 淡藍(lán)色（C：9 M：0 Y：36 K：0）為主色調(diào) 粉紅色（C：7 M：33 Y： 0 K：0）為輔色調(diào) 桔黃色 (C：0 M：

5、36 Y：47 K：0）為輔色調(diào) 字體均采用楷體字體、仿宋字體、黑體. （3）整體色彩都采用代表憂傷的顏色，以便烘托出“流年”這個主題，達(dá)到更好的視覺上的享受。2.3 工作環(huán)境：操作系統(tǒng)：Windows XP以上系統(tǒng)制作工具：Photoshop CS52.4 瀏覽工具：IE瀏覽器三、個人網(wǎng)頁功能模塊設(shè)計（第一種方案）3.1 空間動畫本頁采用貼圖的形式來展現(xiàn)整個動畫，主體上以書為主，以圖片為輔，書本上CEST LA VIE（這就是生活）正在訴述著人生的種種，零零碎碎的照片，CRY，NEVER，LOST，BELONG，EVEN各種的心情，從不同角度展現(xiàn)生活的美，讓用空間那種獨(dú)特的方式向讀者娓娓道來

6、我的生活。 文本區(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ū)放入一張小女孩對過去的懷念之情的手繪圖

7、。下邊的導(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）為輔色調(diào) “流年”采用了方正隸二簡體字體，48，嚴(yán)謹(jǐn)而不失大體，其色彩為朱紅色(C:：32 M:：72 Y：85 K：29）。 “主頁、日志、相冊、音樂、資料、留言板”采用了華康少女文字，簡單 14以黃綠色（C：9 M：0 Y：36 K：0）為已打開頁面，橙色調(diào)（C：0

8、 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)系。日志

9、列表的最上角的運(yùn)用了三張照片和一張信封、一杯咖啡，希望訪客能夠在品嘗咖啡的同時來享受這些所帶來的觸動。右上角的白色的SPING THE STORY粘貼在墨跡上，仿佛在訴說著這些故事的深遠(yuǎn)，并且與右下角的山水圖對應(yīng)。 色彩區(qū)：黃綠色（C：9 M：0 Y：36 K：0）為主色調(diào)橙色調(diào)（C：0 M：30 Y：70 K：0）為輔色調(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 日志簡介在日志簡介中我

10、采用了最簡潔的排版，文本區(qū)我插入了FATE/ZERO NIGHT這篇文章，緊跟其后就是創(chuàng)作的時間以及閱讀量。文章下方還有“贊、轉(zhuǎn)載、分享、評論、復(fù)制地址、舉報、更多等多種對文章的選項，到文章的右下角還有上一篇以及下一篇的提示。整體版面簡潔大方，讓人能夠一目了然。在整個頁面的右下角的插入圖片，主要目的是為了讓訪客能夠體會這個圖片對生活的期待。色彩區(qū)：黃綠色（C：9 M：0 Y：36 K：0）為主色調(diào)橙色調(diào)（C：0 M：30 Y：70 K：0）為輔色調(diào) 文章的標(biāo)題以及時間日期均采用了Arial字體，18，正文部分采用了Arial字體，10，灰色（C：59 M：50 Y：50 K：18） 文本區(qū)的導(dǎo)

11、航欄的文字采用了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)橙色調(diào)（C：0 M：30 Y：70 K：0）為輔色調(diào) 淺藍(lán)色 (C：20 M：6 Y：6 K：0)為輔色調(diào) 灰藍(lán)色 (C：3

12、M：2 Y：4 K：0)為輔色調(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)。大圖片為一個小女孩正在望著天空，戴著一個貓

13、咪的帽子，被風(fēng)吹起的頭發(fā)，飄起的裙擺，就這樣，輕輕地走進(jìn)人的心底。下方的小圖片采用的是流動展示的方式，點(diǎn)擊下方的指示欄就可以進(jìn)入下一組圖片。整體版面干凈明了。色彩區(qū)：黃綠色（C：9 M：0 Y：36 K：0）為主色調(diào)橙色調(diào)（C：0 M：30 Y：70 K：0）為輔色調(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音樂：音樂的界面采用

14、了左右兩側(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) 橙色調(diào)（C：

15、0 M：30 Y：70 K：0）為輔色調(diào) 灰色調(diào)（C：0 M：30 Y：70 K：0）為輔色調(diào) 標(biāo)題部分“ENJOY YOURSELF,SMILE”采用了華康童童體，30，標(biāo)題下方的介紹文字采用了方正體，12，康體簡橙色調(diào),橙色調(diào)（C：0 M：30 Y：70 K 0）。淺灰色（C：34 M：30 Y：29 K：0）“搜索”以及各種心情時的文字采用了華康少女字體，10，白色（C：0 M：0 Y：0 K：0）橙色調(diào)（C：0 M：30 Y：70 K 0）3.8 音樂列表：音樂的界面采用了左右兩側(cè)的排版來向訪客展示，左側(cè)的導(dǎo)航欄以及右側(cè)下角的翻頁欄沿襲一貫的風(fēng)格，右側(cè)的音樂列表取用了思念時的一個界面，

16、仍舊還有搜索欄，按照時間、歌手和歌名來搜索的搜索欄，簡單而又實用。五張整齊的圖片排列著，正在向訪客們輕輕地訴說著屬于他們的那一份單純的思念。圖片下方的文字介紹著思念時聽著音樂的故事。思念一個人的很安靜，所以歌曲全大多數(shù)選用輕緩節(jié)奏的九首歌曲，還有三個簡單的選項“播放、下載、評論”供訪客選擇，可以讓訪客沉醉在音樂的世界里。色彩區(qū)： 黃綠色（C：9 M：0 Y：36 K：0）為主色調(diào) 橙色調(diào)（C：0 M：30 Y：70 K：0）為輔色調(diào) 灰色調(diào)（C：0 M：30 Y：70 K：0）為輔色調(diào) 標(biāo)題上方的“音樂”采用了華康少女文字，活潑可愛，18，灰色“思念時”以及文字介紹均采用了楷體，8和6（C：5

17、1 M：43 Y43 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)色按鈕，使用了凹凸效果，能夠讓人眼前一亮，可以更

18、好達(dá)到提到人氣，而且能交到志同道合的朋友。色彩區(qū)： 黃綠色（C：9 M：0 Y：36 K：0）為主色調(diào) 橙色調(diào)（C：0 M：30 Y：70 K：0）為輔色調(diào) 灰色調(diào)（C：0 M：30 Y：70 K：0）為輔色調(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ī)是為烘托留言這個主題。整體簡潔方便訪客暢所欲言，版式套用騰