網(wǎng)頁設計說明書

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