網(wǎng)頁(yè)設(shè)計(jì)說(shuō)明書(shū)

目錄第一章：網(wǎng)頁(yè)設(shè)計(jì)規(guī)劃 2一、整體規(guī)劃 21.網(wǎng)頁(yè)設(shè)計(jì)目的 22.網(wǎng)頁(yè)定位： 23.網(wǎng)頁(yè)模塊的設(shè)置 2第二章：網(wǎng)頁(yè)設(shè)計(jì)與制作 3一、主頁(yè)設(shè)計(jì) 31.模塊設(shè)計(jì) 32.風(fēng)格與色彩 3二、子頁(yè)設(shè)計(jì) 31.基本信息模塊 32.學(xué)習(xí)成績(jī)模塊 33.獲獎(jiǎng)情況模塊 44.實(shí)踐經(jīng)歷模塊 4總結(jié) 4第一章：網(wǎng)頁(yè)設(shè)計(jì)規(guī)劃一、整體規(guī)劃1.網(wǎng)頁(yè)設(shè)計(jì)目的我們讀書(shū)就是為了獲得知識(shí)，學(xué)習(xí)了網(wǎng)頁(yè)設(shè)計(jì)就是為了把它運(yùn)用到實(shí)際中。此次網(wǎng)頁(yè)設(shè)計(jì)的目的有三個(gè)。第一，完成我們的考試，對(duì)我們平時(shí)學(xué)到的知識(shí)進(jìn)行考核。第二，把學(xué)到的知識(shí)運(yùn)用到實(shí)踐中。正值大四，求職是我們必須面對(duì)的事情，一份完美的簡(jiǎn)歷是找到一份滿意工作的敲門(mén)磚。把自己的簡(jiǎn)歷做成個(gè)人網(wǎng)頁(yè)是一個(gè)獨(dú)特新穎的方式，能讓大家直觀快速地了解我。第三，在此次的網(wǎng)頁(yè)設(shè)計(jì)中，能把之前學(xué)到的知識(shí)前后聯(lián)系起來(lái)，系統(tǒng)地得到復(fù)習(xí)，加強(qiáng)對(duì)知識(shí)的掌握程度。2.網(wǎng)頁(yè)定位：讓大家更快更全面地了解我。把自己以最新穎的方式推薦給大家。網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格要符合簡(jiǎn)歷本質(zhì)的要求。3.網(wǎng)頁(yè)模塊的設(shè)置此次網(wǎng)頁(yè)設(shè)計(jì)共分成五個(gè)模塊。第一個(gè)是網(wǎng)頁(yè)主頁(yè)，其次是四個(gè)子網(wǎng)頁(yè)，分別是我的基本信息、學(xué)習(xí)成績(jī)、獲獎(jiǎng)情況、實(shí)踐經(jīng)歷四個(gè)模塊。主頁(yè)中包含有四個(gè)子網(wǎng)頁(yè)的鏈接。在基本信息頁(yè)面中，可以了解到我的個(gè)人信息、優(yōu)勢(shì)、技能和在校任職情況等。在學(xué)習(xí)成績(jī)模塊可以了解到大學(xué)期間每個(gè)學(xué)期我的綜測(cè)排名情況，還可以鏈接到我的詳細(xì)成績(jī)單。獲獎(jiǎng)信息頁(yè)面中可以了解到大學(xué)期間不同時(shí)間段我獲得的獎(jiǎng)勵(lì)，并附上了主要的幾張獎(jiǎng)狀。在實(shí)踐經(jīng)歷頁(yè)面中可以了解到大學(xué)期間我的一些實(shí)踐情況以及每次實(shí)踐經(jīng)歷后提高的能力。第二章：網(wǎng)頁(yè)設(shè)計(jì)與制作一、主頁(yè)設(shè)計(jì)1.模塊設(shè)計(jì)此頁(yè)面上包含四個(gè)鏈接圖標(biāo)，分別為基本信息、獲獎(jiǎng)情況、學(xué)習(xí)成績(jī)和實(shí)踐經(jīng)歷。在photoshop中制作好四個(gè)鏈接圖片，設(shè)定圖片大小。通過(guò)使用<a>標(biāo)簽在HTML中創(chuàng)造鏈接，使用herf屬性創(chuàng)建指向另一個(gè)文檔的鏈接。通過(guò)<style>標(biāo)簽定義鏈接圖片的樣式信息，再通過(guò)<div>定義每一個(gè)區(qū)域段。根據(jù)背景屬性設(shè)置背景圖片。通過(guò)<embed>標(biāo)簽插入背景音樂(lè)。為了增加網(wǎng)頁(yè)的畫(huà)面感加入一個(gè)特效浮動(dòng)在窗口的圖片，該圖片在photoshop中制作，之后對(duì)下載的特效代碼進(jìn)行修改，以適合該網(wǎng)頁(yè)設(shè)計(jì)的要求。2.風(fēng)格與色彩頁(yè)面背景使用花瓣飄落的動(dòng)態(tài)圖片，給人以畫(huà)面美，四個(gè)鏈接圖片同樣是粉色花朵為底色，融入整個(gè)背景之中。黑色的背景映襯下，花瓣越發(fā)鮮艷，同時(shí)整個(gè)畫(huà)面不會(huì)因?yàn)轱h動(dòng)的花瓣而顯得雜亂。浮動(dòng)的圖片采用與背景有一定對(duì)比度的米色和紅色，使其識(shí)別度更高，其中的字體表達(dá)了對(duì)瀏覽該網(wǎng)頁(yè)人們的尊重。“個(gè)人簡(jiǎn)歷”四個(gè)字位于頁(yè)面正中間并采用與背景對(duì)比度很大的顏色，達(dá)到醒目的效果。背景音樂(lè)為“我相信”，一首很勵(lì)志的歌曲，與網(wǎng)頁(yè)設(shè)計(jì)內(nèi)容相稱(chēng)，同時(shí)通過(guò)歌詞讓大家對(duì)我留下深刻的第一印象。二、子頁(yè)設(shè)計(jì)1.基本信息模塊該子網(wǎng)頁(yè)包含了我最基本的信息，通過(guò)<table>標(biāo)簽定義個(gè)人信息和在校任職情況兩個(gè)表格，設(shè)置邊框?qū)傩詁order為3顯示邊框。通過(guò)<textarea>標(biāo)簽定義優(yōu)勢(shì)和技能的多行輸入文本控件。插入圖片特效，把制作好的照片保存到文件夾中，修改特效代碼，使其大小和特效效果符合整個(gè)頁(yè)面結(jié)構(gòu)。五張照片中，包含一張工作照和四張生活照，使大家能更全面的了解我。背景圖片采用竹子的水墨畫(huà)，向大家傳達(dá)自己的虛心和正直。2.學(xué)習(xí)成績(jī)模塊該子網(wǎng)頁(yè)上包含了綜測(cè)排名情況和詳細(xì)成績(jī)單的超鏈接。背景是梅花圖案，傳達(dá)出自己不屈不撓的品質(zhì)。旁邊附有《出師表》的節(jié)選。梅花和該詞都是與學(xué)習(xí)相關(guān)的積極的意象，與該子網(wǎng)頁(yè)內(nèi)容緊密相關(guān)。3.獲獎(jiǎng)情況模塊獲獎(jiǎng)情況通過(guò)<ul>定義無(wú)序列表，列出在校期間每天獲得的獎(jiǎng)勵(lì)。插入與基本信息頁(yè)面相同的特效，把照片替換成幾張主要的獎(jiǎng)狀，是大家更直觀的了解到該模塊信息。因?yàn)楠?jiǎng)狀色彩比較多，所以采用白色系列圖片。4.實(shí)踐經(jīng)歷模塊該網(wǎng)頁(yè)頁(yè)面通過(guò)<table>標(biāo)簽定義實(shí)踐經(jīng)歷表格。根據(jù)內(nèi)容設(shè)定表格的寬度，根據(jù)<align>屬性設(shè)置文字在表格中的對(duì)齊方式。背景圖片中陽(yáng)光表示希望，寬闊的天空、遼闊的草地上放著書(shū)本表達(dá)了不僅要學(xué)習(xí)更要走出課本，去接觸外面的社會(huì)和世界，理論結(jié)合實(shí)踐，才會(huì)得到更廣闊的視野，得到更豐富的知識(shí)?？偨Y(jié)本次網(wǎng)頁(yè)設(shè)計(jì)我制作了個(gè)人簡(jiǎn)歷網(wǎng)頁(yè)。首先根據(jù)自己想到表達(dá)的內(nèi)容確定設(shè)計(jì)思路，大致確定設(shè)計(jì)風(fēng)格、構(gòu)建整體布局。緊接著進(jìn)行素材收集，素材包括必要的照片、圖片和網(wǎng)頁(yè)特效代碼。一切準(zhǔn)備就緒之后，利用PhotoShop對(duì)圖片進(jìn)行處理使之符合設(shè)計(jì)思路和網(wǎng)頁(yè)頁(yè)面大小要求，對(duì)必要的文字進(jìn)行特效處理，使之切合網(wǎng)頁(yè)設(shè)計(jì)的整體設(shè)計(jì)格局。然后進(jìn)行HTML網(wǎng)頁(yè)編輯。在設(shè)計(jì)制作的整個(gè)過(guò)程中，加深了對(duì)網(wǎng)頁(yè)設(shè)計(jì)的認(rèn)識(shí)