畢業(yè)論文個人網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)（動態(tài)）

1、<p>　　個人網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)（動態(tài)）</p><p>　　（湖南交通職業(yè)技術(shù)學(xué)院物流管理學(xué)院，湖南423000）</p><p>　　摘要：網(wǎng)站伴隨著網(wǎng)絡(luò)的快速發(fā)展而快速興起，作為上網(wǎng)的主要依托，由于人們使用網(wǎng)絡(luò)的頻繁而變得非常的重要，其中個人網(wǎng)站作為其對外展示自己的窗口，在現(xiàn)代互聯(lián)網(wǎng)時代是推銷自己的不二選擇工具。本文將簡單介紹個人網(wǎng)站在社會生活中對人們生活產(chǎn)生的影響，說明個人

2、網(wǎng)站在互聯(lián)網(wǎng)時代對個人的重要性，其次介紹網(wǎng)站個人網(wǎng)站的色調(diào)搭配，設(shè)計(jì)風(fēng)格，重點(diǎn)介紹個人網(wǎng)站的功能模塊以及文字內(nèi)容和圖片展示；最后解釋一些網(wǎng)站設(shè)計(jì)的重要代碼以及其實(shí)現(xiàn)功能。</p><p>　　關(guān)鍵詞：個人網(wǎng)站、網(wǎng)站設(shè)計(jì)、功能模塊、程序代碼</p><p><b>　　目錄</b></p><p>　　摘要--------------------

3、---------------------------------------------------------------------------------- ----I</p><p>　　第一章 文獻(xiàn)綜述------------------------------------------------------------------------------------------</p>

4、<p>　　1．網(wǎng)頁設(shè)計(jì)行業(yè)現(xiàn)狀------------------------------------------------------------------------------------</p><p>　　2．網(wǎng)站設(shè)計(jì)條件-----------------------------------------------------------------------------------

5、--------</p><p>　　3．網(wǎng)站建設(shè)入門門檻（大專）-------------------------------------------------------------------------</p><p>　　第二章 設(shè)計(jì)部分-----------------------------------------------------------------------

6、---------------------</p><p>　　1．設(shè)計(jì)愿望-------------------------------------------------------------------------------------------------</p><p>　　2．設(shè)計(jì)預(yù)期成果------------------------------------------

7、-------------------------------------------------</p><p>　　3．?dāng)?shù)據(jù)庫和環(huán)境的配置 ----------------------------------------------------------------------------------</p><p>　　4．設(shè)計(jì)工具和設(shè)計(jì)語言 -------------------

8、----------------------------------------------------------------</p><p>　　第三章 網(wǎng)站模塊功能----------------------------------------------------------------------------------------</p><p>　　1．個人簡介模塊----

9、-----------------------------------------------------------------------------------------</p><p>　　2．興趣愛好模塊--------------------------------------------------------------------------------------------</p&g

10、t;<p>　　3．家鄉(xiāng)模塊---------------------------------------------------------------------------------------------------</p><p>　　4．個人相冊模塊---------------------------------------------------------------------

11、-----------------------</p><p>　　第四章 總結(jié)----------------------------------------------------------------------------------------------------</p><p><b>　　文獻(xiàn)綜述</b></p><p>　

12、　互聯(lián)網(wǎng)是社會發(fā)展的必然趨勢，很多人已經(jīng)意識到網(wǎng)絡(luò)的強(qiáng)大生命力和它在未來將處于的重要地位。他們鉆研并且努力進(jìn)入到這一個新的空間，新的領(lǐng)域。以個人為中心，淡化了傳統(tǒng)中心地位，使得我們的世界向多元化加速發(fā)展，人人都有話語權(quán)，人人都是中心。 互聯(lián)網(wǎng)是一個互動性極強(qiáng)的平臺，它自由、寬容、平等、共享，并使來自民間的聲音參與到了構(gòu)建主流話語的行動中來。Internet飛速發(fā)展使得網(wǎng)站不再僅僅為企業(yè)或公司等大型結(jié)構(gòu)所擁有，互聯(lián)網(wǎng)成為人們快速獲取、發(fā)

13、布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟(jì)、生活等各個方面發(fā)揮著重要的作用。因此網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯而易見，一個家庭甚至個人都可以擁有屬于自己的網(wǎng)站，而在這其中，個人網(wǎng)站已經(jīng)日漸普及，而且發(fā)展到今天，創(chuàng)建一個能充分體現(xiàn)自我風(fēng)格和特色的個人網(wǎng)站已經(jīng)成為互聯(lián)網(wǎng)用戶的新追求。</p><p>　　1.1網(wǎng)頁設(shè)計(jì)師就業(yè)現(xiàn)狀</p><p><b>　　1.中國網(wǎng)民數(shù)量

14、多</b></p><p>　　中國的網(wǎng)民數(shù)量已超過5億，處于全球網(wǎng)民數(shù)量最多的位置。整個互聯(lián)網(wǎng)處于快速發(fā)展階段，每個人，每個企業(yè)都想要一個網(wǎng)站，網(wǎng)頁設(shè)計(jì)師就業(yè)前景良好。網(wǎng)頁設(shè)計(jì)師培訓(xùn)成為了許多人進(jìn)修以及進(jìn)入網(wǎng)頁設(shè)計(jì)師行業(yè)的首選。</p><p>　　2.社會這類人才需求大，發(fā)展空間大</p><p>　　根據(jù)權(quán)威的人才招聘網(wǎng)站顯示，每年全國各類企業(yè)對網(wǎng)

15、頁設(shè)計(jì)師的人才需求缺口在50萬人左右，而實(shí)際需求遠(yuǎn)遠(yuǎn)大于這個數(shù)字，網(wǎng)頁設(shè)計(jì)師不僅IT專業(yè)企業(yè)需要，廣大的非IT企業(yè)也需要，一個基本的企業(yè)都需要一個網(wǎng)站作為展示自己產(chǎn)品的平臺，有能力維護(hù)企業(yè)網(wǎng)站的網(wǎng)頁設(shè)計(jì)師就變得非常吃香。就業(yè)前景是非常樂觀的，同時網(wǎng)頁設(shè)計(jì)師和其他一些專業(yè)比起來具有一些特點(diǎn)：工作起點(diǎn)高，發(fā)展空間大，職業(yè)壽命長，越老越吃香，性別無偏好，工作最穩(wěn)定，不用頻繁跳槽，前景年年好，薪水待遇高!</p><p>

16、;<b>　　3.薪水待遇高</b></p><p>　　隨著國內(nèi)信息化工作的迅速推進(jìn)、互聯(lián)網(wǎng)業(yè)的蓬勃發(fā)展及網(wǎng)絡(luò)技術(shù)的日新月異，市場對網(wǎng)頁設(shè)計(jì)師、網(wǎng)站開發(fā)人員等技術(shù)人員的需求不斷看漲。網(wǎng)頁設(shè)計(jì)師的就業(yè)范圍相當(dāng)寬廣，幾乎所有的企業(yè)都需要網(wǎng)頁設(shè)計(jì)師幫助企業(yè)設(shè)計(jì)網(wǎng)站和建設(shè)客戶交互式系統(tǒng);幾乎所有有前瞻意識的企業(yè)都需要網(wǎng)頁設(shè)計(jì)師負(fù)責(zé)運(yùn)行和維護(hù)工作。因此，網(wǎng)頁設(shè)計(jì)師的就業(yè)機(jī)會比IT專業(yè)多，而且，薪酬待

17、遇也不錯，統(tǒng)計(jì)數(shù)據(jù)顯示，網(wǎng)頁設(shè)計(jì)師平均月薪約3500～7000元，高的則在15000元以上。</p><p>　　1.2個人網(wǎng)站設(shè)計(jì)條件</p><p>　　想要獨(dú)立設(shè)計(jì)網(wǎng)頁，需要具備一些必要條件，否則就不能勝任這份工作。</p><p><b>　　1.軟件基礎(chǔ)</b></p><p>　　網(wǎng)頁設(shè)計(jì)軟件三劍客：Flas

18、h、Dreamweaver、Fireworks熟練掌握其中之一</p><p>　　輔助軟件：Photoshop</p><p><b>　　2.技術(shù)需求</b></p><p><b>　　(1)基礎(chǔ)內(nèi)容</b></p><p>　　網(wǎng)頁設(shè)計(jì)概述、網(wǎng)站設(shè)計(jì)制作的基本流程、色彩搭配在網(wǎng)站中的應(yīng)用、網(wǎng)

19、站在用戶界面的設(shè)計(jì)、網(wǎng)站廣告的設(shè)計(jì)、網(wǎng)站中表格的使用、網(wǎng)站中層的應(yīng)用、框架網(wǎng)站的制作、模板網(wǎng)站的制作、javascript特效制作、使用CSS樣式表設(shè)計(jì)網(wǎng)頁等</p><p><b>　　(2)技術(shù)內(nèi)容</b></p><p>　　HTML語法、CSS語法、javascript語法</p><p><b>　　(3)圖像處理</

20、b></p><p>　　Flash動畫創(chuàng)意、gif動畫制作、網(wǎng)頁圖片處理</p><p><b>　　(4)行業(yè)網(wǎng)站實(shí)例</b></p><p>　　個人網(wǎng)站、企業(yè)宣傳網(wǎng)站、新聞資訊網(wǎng)站、教育網(wǎng)站、電子政務(wù)網(wǎng)站、電子商務(wù)網(wǎng)站、旅游網(wǎng)站、免費(fèi)資源網(wǎng)站、門戶網(wǎng)站等</p><p><b>　　(5)后臺編程

21、</b></p><p>　　數(shù)據(jù)庫：SQLServer設(shè)計(jì)、MySQL設(shè)計(jì)、Access設(shè)計(jì)</p><p>　　編程語言：ASP、JSP、VBScript、Javascript、PHP等一種</p><p>　　編程實(shí)例：文章發(fā)布系統(tǒng)、留言板、BBS、會員注冊系統(tǒng)、在線購物網(wǎng)站</p><p>　　1.3網(wǎng)站建設(shè)入門門檻（大專

22、）</p><p>　　我們是大專學(xué)生，所以針對我們電子商務(wù)的同學(xué)實(shí)踐操作特點(diǎn)，我們下面和大家探討一下學(xué)習(xí)的建站技術(shù)的基本步驟和具體的時間安排： </p><p>　　1、html（3天） </p><p>　　是最簡單易學(xué)的，不需要過多的時間，一天就能了解，三天就能掌握。 </p><p>　　2、學(xué)習(xí)ps（7天） </

23、p><p>　　能用ps切圖設(shè)計(jì)出漂亮的table頁面。什么？不符合web標(biāo)準(zhǔn)?不是div+css? 因?yàn)楸砀褡龅木W(wǎng)頁很直觀，新手很容易理解，ps網(wǎng)頁界面，只要有一點(diǎn)平面設(shè)計(jì)基礎(chǔ)的都能很快掌握，結(jié)合代碼能更加熟悉html的相關(guān)細(xì)節(jié)。這個過程大概需要7-10天時間，具體地，可以每天做一個網(wǎng)站首頁，從簡單的做起，如果能做的像網(wǎng)頁截圖那樣。那就完美了，中間可以參雜著做網(wǎng)站導(dǎo)航欄、按鈕效果、等等。要是沒有ps基礎(chǔ)的朋友

24、，可以適當(dāng)延長時間安排。</p><p>　　3、學(xué)習(xí)css（重點(diǎn)10天）</p><p>　　特別是想做職業(yè)站長的新手們，div+css技術(shù)是必學(xué)的，也是最要下功夫來學(xué)的，這里我說一下，css入門很容易，就是那么幾個屬性，而且在網(wǎng)頁編輯軟件里都有直接輸入數(shù)值的面板，我個人認(rèn)為css的難點(diǎn)在于頁面的整體性，要從整個頁面甚至整個站點(diǎn)的高度設(shè)計(jì)規(guī)劃css，并能熟練的運(yùn)用各種技巧實(shí)現(xiàn)網(wǎng)頁樣式與布

25、局的變化，包括考慮到瀏覽器的兼容性，這些都還是需要一定的時間的，一定熟練的作品才能學(xué)成。學(xué)習(xí)css可以考慮買本書來學(xué)習(xí)，書中的理論知識能幫助你理解每個布局代碼的含義。 </p><p>　　4、學(xué)習(xí)javascript+flash（7天） </p><p>　　javascript就是常說的js，如網(wǎng)頁的調(diào)用幻燈片、調(diào)用最新記錄、調(diào)用評論數(shù)等等，這些“調(diào)用”都是通過javascript來

26、實(shí)現(xiàn)的，javascript是運(yùn)行與客戶端的腳本，學(xué)習(xí)它能做出很多網(wǎng)頁特效，而且它相對簡單易學(xué)（不包括ajax的高級功能），對于想學(xué)習(xí)程序代碼的朋友，從javascript入手是個不錯的選擇。我們并不需要很熟練，只要相對了解就行了。能看懂一般的js代碼，并能自己寫出一小段js的程度就基本夠用了。學(xué)習(xí)完js和photoshop之后再學(xué)習(xí)一下flash的制作和使用，以便能制作出banner或其它廣告條，并不需要達(dá)到制作動畫片的水平。 [中國

27、站長站] </p><p>　　5、學(xué)習(xí)cms程序（8天） </p><p>　　學(xué)完以上技術(shù)之后，你的網(wǎng)頁基本知識應(yīng)該算比較牢固了，動態(tài)網(wǎng)頁需要程序的支持，程序相對比較復(fù)雜，要從零基礎(chǔ)到用自寫程序開發(fā)網(wǎng)站，那對于新手站長來說技術(shù)門檻太高了，所以現(xiàn)在源碼下載站人氣比較高。提倡的解決方案就是利用時下比較流行的cms建站程序，用他們可以自定義出幾乎任何類型的站點(diǎn)。這里的學(xué)習(xí)方法，就是到各大c

28、ms論壇去找相關(guān)教程和幫助文件了。</p><p><b>　　設(shè)計(jì)部分</b></p><p>　　個人網(wǎng)站要發(fā)展，要么是從我的需求出發(fā)，要么是從我周圍人的需求出發(fā)。每個人設(shè)計(jì)網(wǎng)頁都希望自己的網(wǎng)站能夠達(dá)到自己的期望要求。</p><p><b>　　2.1設(shè)計(jì)愿望</b></p><p>　　我所

29、制作的個人網(wǎng)站在完成時，希望能夠給瀏覽者一種簡約，時尚的感覺的，這是我的設(shè)計(jì)愿望。網(wǎng)站大體可以分為以下幾大部分：</p><p><b>　　(1)首頁</b></p><p>　　個人網(wǎng)站首頁板塊布局，采用一個簡單的DIV容器，容器左側(cè)設(shè)計(jì)一個圖片滾動AD插件，其目的是將4張大圖片做一個輪顯特效效果，右側(cè)設(shè)計(jì)一個垂直導(dǎo)航欄，導(dǎo)航欄分為4個欄目，分別是個人簡介、興趣愛

30、好、家鄉(xiāng)、個人相冊。</p><p><b>　　(2)個人簡介</b></p><p>　　個人簡介板塊布局，采用一個簡單的DIV容器，容器左側(cè)包括一個DIV，右側(cè)也包括一個DIV容器，左側(cè)容器方一張自己頭像的圖片，右側(cè)容器顯示關(guān)于自己的專業(yè)、學(xué)校、年紀(jì)、性格等的文字信息，用來簡單的介紹自己（特效）</p><p><b>　　(3

31、)興趣愛好</b></p><p>　　興趣愛好板塊布局，在一個的DIV容器里采用float方式鑲嵌2個小的DIV，左側(cè)里面再分5個DIV，1、3、5的DIV板塊作為欄目分別顯示動漫、軍事、游戲3個內(nèi)容，右側(cè)DIV模塊當(dāng)作個子容器，容器分為左右2個DIV模塊，右側(cè)模塊再分為上下2個DIV模塊</p><p>　　上面一個模塊是放圖片的，左側(cè)大的模塊和右側(cè)下面的DIV模塊內(nèi)嵌入一

32、個表格，用了展示相應(yīng)的文字信息。</p><p><b>　　(4)家鄉(xiāng)</b></p><p>　　家鄉(xiāng)板塊布局，采用一個大的DIV容器，容器里嵌入一個小的DIV塊，這個DIV塊里采用圖片滾動特效AD插件，和首頁圖片滾動AD插件的區(qū)別是圖片較小并且有相關(guān)的文字展示區(qū)域，用來介紹家鄉(xiāng)風(fēng)景名勝的文字信息。</p><p><b>　　(

33、5)個人相冊</b></p><p>　　個人相冊板塊布局，采用一個大的DIV容器，容器里嵌入一個小的DIV快，這個DIV塊里，采用圖片居中放大插件，用來顯示相冊的每張圖片。</p><p><b>　　2.2設(shè)計(jì)預(yù)期成果</b></p><p>　　在完成網(wǎng)站的風(fēng)格和色調(diào)以后，就是網(wǎng)站的材料組織以及網(wǎng)站的頁面設(shè)計(jì)和數(shù)據(jù)庫設(shè)計(jì)。網(wǎng)站

34、最后完成發(fā)到網(wǎng)上后，能夠充分吸引瀏覽者的目光，能夠?yàn)g覽我個人網(wǎng)站的瀏覽者能夠立刻體會到我網(wǎng)站的簡約，時尚絢麗的風(fēng)格。</p><p>　　2.3數(shù)據(jù)庫和環(huán)境的配置</p><p>　　(1)數(shù)據(jù)庫連接網(wǎng)站(ACCESS)</p><p>　　運(yùn)用ASP把數(shù)據(jù)庫和網(wǎng)站連接起來</p><p>　　做一個“conn.asp”文件，每次連接數(shù)據(jù)庫時

35、候都調(diào)用這個文件即可</p><p><b>　　<%</b></p><p>　　response.buffer=true '啟用緩沖處理</p><p>　　dim conn,db</p><p>　　dim connstr</p><p>　　db="%%%%%%%%

36、%%%%.mdb"'數(shù)據(jù)庫鏈接路徑</p><p>　　connstr="DBQ="+server.mappath(""&db&"")+";DefaultDir=;DRIVER={Microsoft Access Driver (*.mdb)};"</p><p>　　set

37、conn=server.createobject("ADODB.CONNECTION")</p><p>　　conn.open connstr</p><p>　　If Err Then</p><p><b>　　err.Clear</b></p><p>　　Set Conn = Nothing

38、</p><p>　　Response.Write "數(shù)據(jù)庫連接出錯，請檢查數(shù)據(jù)庫連接文件中的數(shù)據(jù)庫參數(shù)設(shè)置。"</p><p>　　Response.End</p><p><b>　　End If </b></p><p>　　sub Chkhttp()</p><p>　

39、　server_vv=len(Request.ServerVariables("SERVER_NAME"))</p><p>　　server_v1=left(Cstr(Request.ServerVariables("HTTP_REFERER")),server_vv)</p><p>　　server_v2=left(Cstr("htt

40、p://"&Request.ServerVariables("SERVER_NAME")),server_vv)</p><p>　　if server_v1<>server_v2 or server_v1="" or server_v1="" then</p><p>　　response.Char

41、set="utf-8"</p><p>　　response.write("<script>alert('錯誤：禁止從站點(diǎn)外部提交數(shù)據(jù)!.')</script>")</p><p>　　response.end</p><p><b>　　end if</b><

42、;/p><p><b>　　end sub</b></p><p><b>　　%></b></p><p>　　(2)window 7環(huán)境(IIS配置)</p><p>　　操作步驟(啟動IIS)：</p><p>　　點(diǎn)擊開始-------控制面板----------默

43、認(rèn)程序--------------程序和功能--------------打開或關(guān)閉windows功能----------------internet信息服務(wù)-------------Web管理工具--------然后勾選所有的</p><p><b>　　選項(xiàng)</b></p><p>　　操作步驟(配置IIS)：</p><p>　　點(diǎn)擊開始-

44、------控制面板------------管理工具------------internet信息服務(wù)(iis)管理器-------------打開后進(jìn)行相關(guān)設(shè)置</p><p>　　2.4設(shè)計(jì)工具和設(shè)計(jì)語言</p><p>　　我制作網(wǎng)站的網(wǎng)頁編輯工具軟件是Dreamweaver 8 、設(shè)計(jì)語言：web前端采用HTML5、CSS+DIV、編程語言：javascript+jQuery、服務(wù)器

45、語言：ASP </p><p><b>　　網(wǎng)站功能模塊</b></p><p><b>　　3.1首頁模塊</b></p><p>　　(1)首頁設(shè)計(jì)板塊圖：</p><p><b>　　(2)代碼：</b></p><p>　　<!DOCTYP

46、E html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p><p>　　<html xmlns="http://www.w3.org/1999/xhtml">&l

47、t;/p><p><b>　　<head></b></p><p><b>　　<style></b></p><p><b>　　#div1{</b></p><p>　　width:950px;</p><p>　　height:

48、400px;</p><p>　　background-color:#66CCCC;</p><p>　　margin:auto;</p><p>　　padding:60px 20px 140px 20px;</p><p><b>　　}</b></p><p><b>　　#div

49、2{</b></p><p>　　width:560px;</p><p>　　height:340px;</p><p>　　float:left;</p><p>　　background-color:#33FF00;</p><p>　　padding:20px 20px 40px 20px;<

50、/p><p><b>　　}</b></p><p><b>　　#div3{</b></p><p>　　width:230px;</p><p>　　height:340px;</p><p>　　background-color:#663399;</p>&l

51、t;p>　　float:right;</p><p>　　padding:20px 60px 40px 60px;</p><p><b>　　}</b></p><p><b>　　</style></b></p><p><b>　　</head><

52、/b></p><p><b>　　<body></b></p><p>　　<div id="div1"></p><p>　　<div id="div2"></p><p>　　<!--圖片滾動AD插件 --></p&

53、gt;<p>　　<img src="" alt="" name="tpADchajian" width="560" height="338" id="tpADchajian" /></div></p><p>　　<div id="div3

54、"></p><p>　　<table width="230" height="339" border="0" cellpadding="0" cellspacing="0"></p><p><b>　　<tr></b><

55、/p><p>　　<td height="60"><img src="" alt="" name="GRjianjie" width="229" height="52" id="GRjianjie" /></td></p><

56、;p><b>　　</tr></b></p><p><b>　　<tr></b></p><p>　　<td height="43">&nbsp;</td></p><p><b>　　</tr></b>&

57、lt;/p><p><b>　　<tr></b></p><p>　　<td height="55"><img src="" alt="" name="XQaihao" width="229" height="52" id=

58、"XQaihao" /></td></p><p><b>　　</tr></b></p><p><b>　　<tr></b></p><p>　　<td height="41">&nbsp;</td><

59、;/p><p><b>　　</tr></b></p><p><b>　　<tr></b></p><p>　　<td height="49"><img src="" alt="" name="JX" w

60、idth="228" height="45" id="JX" /></td></p><p><b>　　</tr></b></p><p><b>　　<tr></b></p><p>　　<td height=&

61、quot;42">&nbsp;</td></p><p><b>　　</tr></b></p><p><b>　　<tr></b></p><p>　　<td><img src="" alt="" na

62、me="GRxiangce" width="228" height="42" id="GRxiangce" /></td></p><p><b>　　</tr></b></p><p><b>　　</table></b>&

63、lt;/p><p><b>　　</div></b></p><p><b>　　</div></b></p><p><b>　　</body></b></p><p><b>　　</html></b><

64、;/p><p>　　(3)首頁AD插件特效代碼：</p><p><b>　　需要引用文檔：</b></p><p>　　<script type=”text/javascript” src=”...jquery.nivo.slider.pack.js”></script></p><p>　　<

65、;link rel=”stylesheet” href=”../nivo-slider.css” type=”text/css”></p><p>　　一個div元素包含一些圖片，超鏈接用于鼠標(biāo)單擊從而指向一些網(wǎng)頁，這里用了javascript庫jQuery：</p><p>　　<div id="slider" class="nivoSlider

66、"></p><p>　　<a href="#"><img src="photos/image1.jpg" alt="" title="image1描述信息"/></a></p><p>　　<a href="#"><i

67、mg src="photos/image2.jpg" alt="" title="image2描述信息"/></a></p><p>　　<a href="#"><img src="photos/image3.jpg" alt="" title="

68、;image3描述信息"/></a></p><p><b>　　</div></b></p><p><b>　　<script></b></p><p>　　$(window).load(</p><p>　　function() {</

69、p><p>　　$('#slider').nivoSlider();</p><p><b>　　}</b></p><p><b>　　);</b></p><p><b>　　3.2個人簡介模塊</b></p><p>　　(1)個人簡介

70、模塊設(shè)計(jì)圖：</p><p><b>　　(2)代碼：</b></p><p>　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

71、></p><p>　　<html xmlns="http://www.w3.org/1999/xhtml"></p><p><b>　　<head></b></p><p><b>　　<style></b></p><p><

72、b>　　#div1{</b></p><p>　　width:950px;</p><p>　　height:400px;</p><p>　　background-color:#66CCCC;</p><p>　　margin:auto;</p><p>　　padding:60px 20px 14

73、0px 20px;</p><p><b>　　}</b></p><p><b>　　#div2{</b></p><p>　　width:460px;</p><p>　　height:280px;</p><p>　　float:left;</p><

74、;p>　　background-color:#33FF00;</p><p>　　padding:20px 20px 100px 20px;</p><p><b>　　}</b></p><p><b>　　#div3{</b></p><p>　　width:380px;</p>

75、;<p>　　height:340px;</p><p>　　background-color:#663399;</p><p>　　float:right;</p><p>　　padding:20px 10px 40px 10px;</p><p><b>　　}</b></p><

76、p><b>　　#div3top{</b></p><p>　　width:380px;</p><p>　　height:140px;</p><p>　　background-color:#FF00CC;</p><p><b>　　}</b></p><p>　　

77、#div3top1{</p><p>　　width:140px</p><p>　　height:140px;</p><p>　　background-color:#FF99CC;</p><p>　　float:left;</p><p><b>　　}</b></p><

78、;p>　　#div3top2{</p><p>　　width:240px;</p><p>　　height:140px;</p><p>　　background-color:#FFCCFF;</p><p>　　float:right;</p><p><b>　　}</b></

79、p><p>　　#div3buttom{</p><p>　　width:380px;</p><p>　　height:200px;</p><p>　　background-color:#FF9966;</p><p><b>　　}</b></p><p><b&g

80、t;　　</style></b></p><p><b>　　</head></b></p><p><b>　　<body></b></p><p>　　<div id="div1"></p><p>　　<di

81、v id="div2"><img src="" alt="" name="XXIAO" width="458" height="276" id="XXIAO" /></div></p><p>　　<div id="div3&qu

82、ot;></p><p>　　<div id="div3top"></p><p>　　<div id="div3top1"></div></p><p>　　<div id="div3top2">文字填寫區(qū)域</div></p>

83、<p><b>　　</div></b></p><p>　　<div id="div3buttom">文字填寫區(qū)域</div></p><p><b>　　</div></b></p><p><b>　　</div>

84、</b></p><p><b>　　</body></b></p><p><b>　　</html></b></p><p><b>　　3.3興趣愛好模塊</b></p><p>　　(1)興趣愛好模塊設(shè)計(jì)圖：</p>&

85、lt;p><b>　　(2)代碼：</b></p><p>　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p><

86、;p>　　<html xmlns="http://www.w3.org/1999/xhtml"></p><p><b>　　<head></b></p><p><b>　　<style></b></p><p><b>　　#div1{</b

87、></p><p>　　width:950px;</p><p>　　height:400px;</p><p>　　background-color:#66CCCC;</p><p>　　margin:auto;</p><p>　　padding:60px 20px 140px 20px;</p>

88、<p><b>　　}</b></p><p><b>　　#div2{</b></p><p>　　width:240px;</p><p>　　height:340px;</p><p>　　float:left;</p><p>　　background-

89、color:#33FF00;</p><p>　　padding:20px 20px 40px 20px;</p><p><b>　　}</b></p><p><b>　　#div3{</b></p><p>　　width:600px;</p><p>　　height

90、:340px;</p><p>　　background-color:#663399;</p><p>　　float:right;</p><p>　　padding:20px 10px 40px 10px;</p><p><b>　　}</b></p><p><b>　　#div

91、3top{</b></p><p>　　width:600px;</p><p>　　height:140px;</p><p>　　background-color:#FFFFCC;</p><p><b>　　}</b></p><p>　　#div3top1{</p>

92、<p>　　width:460px;</p><p>　　height:140px;</p><p>　　background-color:#CC3366;</p><p>　　float:left;</p><p><b>　　}</b></p><p>　　#div3top2{&

93、lt;/p><p>　　width:140px;</p><p>　　height:140px;</p><p>　　background-color:#CC9900;</p><p>　　float:right;</p><p><b>　　}</b></p><p>　　#

94、div3buttom{</p><p>　　width:600px;</p><p>　　height:200px;</p><p>　　background-color:#CCFFFF;</p><p><b>　　}</b></p><p><b>　　</style>&

95、lt;/b></p><p><b>　　</head></b></p><p><b>　　<body></b></p><p>　　<div id="div1"></p><p>　　<div id="div2&quo

96、t;></p><p>　　<table width="240" height="337" border="0" cellpadding="0" cellspacing="0"></p><p><b>　　<tr></b></p&g

97、t;<p>　　<td><img src="" alt="" name="DMAN" width="237" height="53" id="DMAN" /></td></p><p><b>　　</tr></b&g

98、t;</p><p><b>　　<tr></b></p><p>　　<td>&nbsp;</td></p><p><b>　　</tr></b></p><p><b>　　<tr></b></p&

99、gt;<p>　　<td><img src="" alt="" name="JSHI" width="239" height="52" id="JSHI" /></td></p><p><b>　　</tr></b&

100、gt;</p><p><b>　　<tr></b></p><p>　　<td>&nbsp;</td></p><p><b>　　</tr></b></p><p><b>　　<tr></b></p

101、><p>　　<td><img src="" alt="" name="yxi" width="239" height="53" id="yxi" /></td></p><p><b>　　</tr></b&g

102、t;</p><p><b>　　</table></b></p><p><b>　　</div></b></p><p>　　<div id="div3"></p><p>　　<div id="div3top"&

103、gt;</p><p>　　<div id="div3top1"></div></p><p>　　<div id="div3top2"><img src="" alt="" name="tup1" width="139" hei

104、ght="138" id="tup1" /></div></p><p><b>　　</div></b></p><p>　　<div id="div3buttom"></div></p><p><b>　　</

105、div></b></p><p><b>　　</div></b></p><p><b>　　</body></b></p><p><b>　　</html></b></p><p><b>　　3.4家鄉(xiāng)模塊

106、</b></p><p>　　(1)家鄉(xiāng)板塊設(shè)計(jì)圖：</p><p><b>　　(2)代碼：</b></p><p>　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

107、tml1/DTD/xhtml1-transitional.dtd"></p><p>　　<html xmlns="http://www.w3.org/1999/xhtml"></p><p><b>　　<head></b></p><p><b>　　<style&

108、gt;</b></p><p><b>　　#div1{</b></p><p>　　width:950px;</p><p>　　height:400px;</p><p>　　background-color:#66CCCC;</p><p>　　margin:auto;</

109、p><p>　　padding:60px 20px 140px 20px;</p><p><b>　　}</b></p><p><b>　　#div3{</b></p><p>　　width:920px;</p><p>　　height:340px;</p>

110、<p>　　background-color:#663399;</p><p>　　float:right;</p><p>　　padding:20px 10px 40px 10px;</p><p><b>　　}</b></p><p>　　#div3left{</p><p>

111、　　width:530px;</p><p>　　height:340px;</p><p>　　background-color:#CC6633;</p><p>　　float:left;</p><p>　　padding-right:20px;</p><p><b>　　}</b><

112、;/p><p>　　#div3right{</p><p>　　width:370px;</p><p>　　height:340px;</p><p>　　background-color:#CCCC00;</p><p>　　float:right;</p><p><b>　　}&l

113、t;/b></p><p><b>　　</style></b></p><p><b>　　</head></b></p><p><b>　　<body></b></p><p>　　<div id="div1&qu

114、ot;></p><p>　　<div id="div3"></p><p>　　<div id="div3left"><img src="" alt="" name="ADchajian" width="530" height=&qu

115、ot;340" id="ADchajian" /></div></p><p>　　<div id="div3right">家鄉(xiāng)文字介紹</div></p><p><b>　　</div></b></p><p><b>　　&l

116、t;/div></b></p><p><b>　　</body></b></p><p><b>　　</html></b></p><p><b>　　3.5個人相冊模塊</b></p><p>　　(1)個人相冊模塊設(shè)計(jì)圖：<

117、;/p><p><b>　　(2)代碼：</b></p><p>　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></

118、p><p>　　<html xmlns="http://www.w3.org/1999/xhtml"></p><p><b>　　<head></b></p><p><b>　　<style></b></p><p><b>　　#d

119、iv1{</b></p><p>　　width:950px;</p><p>　　height:400px;</p><p>　　background-color:#66CCCC;</p><p>　　margin:auto;</p><p>　　padding:60px 20px 140px 20px;

120、</p><p><b>　　}</b></p><p><b>　　#div3{</b></p><p>　　width:920px;</p><p>　　height:340px;</p><p>　　background-color:#663399;</p>

121、<p>　　float:right;</p><p>　　padding:20px 10px 40px 10px;</p><p><b>　　}</b></p><p><b>　　</style></b></p><p><b>　　</head>

122、</b></p><p><b>　　<body></b></p><p>　　<div id="div1"></p><p>　　<div id="div3"></p><p>　　<img src=""

123、alt="" name="ADchajian" width="921" height="339" id="ADchajian" /></div></p><p><b>　　</div></b></p><p><b>　　<

124、;/body></b></p><p><b>　　</html></b></p><p>　　(3)圖片居中放大顯示插件代碼：</p><p><b>　　第一步 文檔引用：</b></p><p>　　<script type="text/javas

125、cript" src="js/jquery.lightbox-0.5.js"></script></p><p>　　<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" /></p>&

126、lt;p>　　第二步 要使用這個Widget，對HTML元素有一些要求，需要一個超鏈接包圍小圖片img元素，并且超鏈接目標(biāo)指向大圖片，超鏈接可以定義tittle屬性來描述圖片信息：</p><p>　　<a href=”photos/big_image1.jpg” title=”這是大圖”></p><p>　　<img src=”photos/thumb_imag

127、e1.jpg” width=”72” height=”72” alt=”” /></p><p><b>　　</a></b></p><p>　　第三步 對a元素調(diào)用jquery插件方法.lightBox()：</p><p>　　$(document).ready()</p><p>　　Funct

128、ion() {</p><p>　　$(‘a(chǎn)’).lightBox();</p><p><b>　　}</b></p><p><b>　　總結(jié)</b></p><p>　　在本次設(shè)計(jì)的全過程中，我對三年所學(xué)的知識有了一個比較系統(tǒng)的認(rèn)識和理解。涉及了各方面的知識，大大擴(kuò)展了我的知識面，同時是我學(xué)會

129、了如何使用所學(xué)的知識去解決一些實(shí)際的問題。 在設(shè)計(jì)中我深知自己掌握的知識還遠(yuǎn)遠(yuǎn)不夠，掌握的一些理論知識應(yīng)用到實(shí)踐中去，總會出現(xiàn)這樣或那樣的問題，不是理論沒有掌握好，而是光知道書本上的知識是遠(yuǎn)遠(yuǎn)不夠的，一定要把理論知識和實(shí)踐結(jié)合起來。把學(xué)到的知識應(yīng)用到時間中去，多做多練，才可以把理論的精華發(fā)揮出來。知識不是知道，了解就好，一定要去應(yīng)用它，發(fā)展它，讓它在現(xiàn)實(shí)生活中得到充分的應(yīng)用，從而解決一些問題，這才是學(xué)習(xí)的根本目的。而且知識又不是單一的

130、，它是互相聯(lián)系的，學(xué)科與學(xué)科之間都有著內(nèi)在的聯(lián)系。計(jì)算機(jī)是一門非常復(fù)雜且龐大的學(xué)科，一項(xiàng)課題往往需要多項(xiàng)技術(shù)才可以完成的。在設(shè)計(jì)階段，通過對課題的深入分析與研究，迫使我對技術(shù)有了一定的了解。在遇到問題時，得到了指導(dǎo)老師與同學(xué)的悉心幫助，使我感受到集體的力量是無窮的。</p><p>　　通過這次設(shè)計(jì)，我學(xué)會了和別人配合工作，因?yàn)橐粋€人所學(xué)的知識不可能面面俱到的，只有通過合作，發(fā)揮自己的優(yōu)點(diǎn)，體現(xiàn)團(tuán)隊(duì)精神，才能使工

131、作做得更為出色。通過這次設(shè)計(jì)，我學(xué)到了許多書本上學(xué)不到的知識，增強(qiáng)了自己的動手能力。即將畢業(yè)我十分珍惜這次鍛煉的機(jī)會，我按部就班的完成了自己的設(shè)計(jì)任務(wù)，但由于自己的知識水平有限，仍然存在很多的不足之處，懇請老師多多指教！當(dāng)今的社會是競爭的社會，而人才的競爭則是競爭的焦點(diǎn)，畢業(yè)設(shè)計(jì)對于我們即將離校的同學(xué)來說，是離校前很好的一次鍛煉，使我們各方面的能力都有了很大的提高，為我們踏出校門，走上社會增強(qiáng)了能力與自信！ 互聯(lián)網(wǎng)技術(shù)的高速發(fā)展，使我深