1、個人網(wǎng)站設(shè)計與實現(xiàn)（動態(tài)）俸亞雄（湖南交通職業(yè)技術(shù)學(xué)院物流管理學(xué)院，湖南42 3000）摘要：網(wǎng)站伴隨著網(wǎng)絡(luò)的快速發(fā)展而快速興起，作為上網(wǎng)的主要依托,由于人們使用網(wǎng)絡(luò)的 頻繁而變得非常的重要，其中個人網(wǎng)站作為其對外展示自己的窗口，在現(xiàn)代互聯(lián)網(wǎng)時代是推 銷自己的不二選擇工具。本文將簡單介紹個人網(wǎng)站在社會生活中對人們生活產(chǎn)生的影響，說 明個人網(wǎng)站在互聯(lián)網(wǎng)時代對個人的重要性，其次介紹網(wǎng)站個人網(wǎng)站的色調(diào)搭配，設(shè)計風(fēng)格， 重點介紹個人網(wǎng)站的功能模塊以及文字內(nèi)容和圖片展示;最后解釋一些網(wǎng)站設(shè)計的重要代碼 以及其實現(xiàn)功能。關(guān)鍵詞:個人網(wǎng)站、網(wǎng)站設(shè)計、功能模塊、程序代碼目錄摘要- - - 一 -I第一章 文獻(xiàn)

2、綜述 -1 .網(wǎng)頁設(shè)計彳丁業(yè)現(xiàn)狀- - -2。 網(wǎng)站設(shè)計條件 - - - - - 網(wǎng)站建設(shè)入門門檻（大專）-第二章設(shè)計部分-1.設(shè)計愿望一- -2。設(shè)計預(yù)期成果3 .數(shù)據(jù)庫和環(huán)境的配置設(shè)計工具和設(shè)計語言第三章網(wǎng)站模塊功能個人簡介模塊興趣愛好模塊家鄉(xiāng)模塊個人相冊模塊第四章總結(jié)一第一章文獻(xiàn)綜述互聯(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)的平臺，它自由、寬容、平等、共享，并使來自民間的聲

3、音參與到了構(gòu) 建主流話語的行動中來.Internet飛速發(fā)展使得網(wǎng)站不再僅僅為企業(yè)或公司等大型結(jié)構(gòu)所 擁有，互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟(jì)、生活 等各個方面發(fā)揮著重要的作用。因此網(wǎng)站建設(shè)在Interne t應(yīng)用上的地位顯而易見，一個家 庭甚至個人都可以擁有屬于自己的網(wǎng)站，而在這其中，個人網(wǎng)站已經(jīng)日漸普及，而且發(fā)展到 今天，創(chuàng)建一個能充分體現(xiàn)自我風(fēng)格和特色的個人網(wǎng)站已經(jīng)成為互聯(lián)網(wǎng)用戶的新追求。1.1網(wǎng)頁設(shè)計師就業(yè)現(xiàn)狀。中國網(wǎng)民數(shù)量多中國的網(wǎng)民數(shù)量已超過5億，處于全球網(wǎng)民數(shù)量最多的位置.整個互聯(lián)網(wǎng)處于快速發(fā)展 階段，每個人，每個企業(yè)都想要一個網(wǎng)站，網(wǎng)頁設(shè)計師就

4、業(yè)前景良好。網(wǎng)頁設(shè)計師培訓(xùn)成為 了許多人進(jìn)修以及進(jìn)入網(wǎng)頁設(shè)計師行業(yè)的首選。2。社會這類人才需求大，發(fā)展空間大。根據(jù)權(quán)威的人才招聘網(wǎng)站顯示，每年全國各類企業(yè)對網(wǎng)頁設(shè)計師的人才需求缺口在50萬 人左右，而實際需求遠(yuǎn)遠(yuǎn)大于這個數(shù)字，網(wǎng)頁設(shè)計師不僅IT專業(yè)企業(yè)需要，廣大的非IT企 業(yè)也需要，一個基本的企業(yè)都需要一個網(wǎng)站作為展示自己產(chǎn)品的平臺，有能力維護(hù)企業(yè)網(wǎng)站 的網(wǎng)頁設(shè)計師就變得非常吃香。就業(yè)前景是非常樂觀的，同時網(wǎng)頁設(shè)計師和其他一些專業(yè)比 起來具有一些特點：工作起點高，發(fā)展空間大，職業(yè)壽命長，越老越吃香，性別無偏好，工作 最穩(wěn)定，不用頻繁跳槽，前景年年好，薪水待遇高！3 .薪水待遇高隨著國內(nèi)信息化工

5、作的迅速推進(jìn)、互聯(lián)網(wǎng)業(yè)的蓬勃發(fā)展及網(wǎng)絡(luò)技術(shù)的日新月異，市場對 網(wǎng)頁設(shè)計師、網(wǎng)站開發(fā)人員等技術(shù)人員的需求不斷看漲。網(wǎng)頁設(shè)計師的就業(yè)范圍相當(dāng)寬廣， 幾乎所有的企業(yè)都需要網(wǎng)頁設(shè)計師幫助企業(yè)設(shè)計網(wǎng)站和建設(shè)客戶交互式系統(tǒng);幾乎所有有前 瞻意識的企業(yè)都需要網(wǎng)頁設(shè)計師負(fù)責(zé)運(yùn)行和維護(hù)工作。因此網(wǎng)頁設(shè)計師的就業(yè)機(jī)會比IT專 業(yè)多，而且，薪酬待遇也不錯，統(tǒng)計數(shù)據(jù)顯示，網(wǎng)頁設(shè)計師平均月薪約3 50070 0 0元， 高的則在1 5 0 0 0元以上。1.2個人網(wǎng)站設(shè)計條件想要獨立設(shè)計網(wǎng)頁，需要具備一些必要條件，否則就不能勝任這份工作軟件基礎(chǔ)網(wǎng)頁設(shè)計軟件三劍客：F 1 a s h、Dre a mwe av er、Fi

6、r e wo rk s熟練掌握其中之一輔助軟件：Photoshop2。技術(shù)需求（1）基礎(chǔ)內(nèi)容網(wǎng)頁設(shè)計概述、網(wǎng)站設(shè)計制作的基本流程、色彩搭配在網(wǎng)站中的應(yīng)用、網(wǎng)站在用戶界面的設(shè) 計、網(wǎng)站廣告的設(shè)計、網(wǎng)站中表格的使用、網(wǎng)站中層的應(yīng)用、框架網(wǎng)站的制作、模板網(wǎng)站的 制作、java script特效制作、使用CSS樣式表設(shè)計網(wǎng)頁等（2）技術(shù)內(nèi)容HTML 語法、CSS 語法、java s crip t 語法（3）圖像處理Flas h動畫創(chuàng)意、gif動畫制作、網(wǎng)頁圖片處理（4）行業(yè)網(wǎng)站實例個人網(wǎng)站、企業(yè)宣傳網(wǎng)站、新聞資訊網(wǎng)站、教育網(wǎng)站、電子政務(wù)網(wǎng)站、電子商務(wù)網(wǎng)站、旅游 網(wǎng)站、免費(fèi)資源網(wǎng)站、門戶網(wǎng)站等（5）后臺

7、編程數(shù)據(jù)庫：SQLServer設(shè)計、MySQL設(shè)計、Acce s s設(shè)計編程語言：ASP、JSP、VBScript、Javascript、PHP 等一種編程實例：文章發(fā)布系統(tǒng)、留言板、BBS、會員注冊系統(tǒng)、在線購物網(wǎng)站3網(wǎng)站建設(shè)入門門檻（大專）我們是大專學(xué)生，所以針對我們電子商務(wù)的同學(xué)實踐操作特點，我們下面和大家探討一下學(xué) 習(xí)的建站技術(shù)的基本步驟和具體的時間安排：1、html （3 天）是最簡單易學(xué)的，不需要過多的時間，一天就能了解，三天就能掌握。2、學(xué)習(xí)ps（7天）能用ps切圖設(shè)計出漂亮的tab 1 e頁面。什么？不符合web標(biāo)準(zhǔn)?不是div+css?因為表格做的網(wǎng)頁很直觀，新手很容易理解，

8、ps網(wǎng)頁界面，只要有一點平面設(shè)計基礎(chǔ)的都能很快掌 握，結(jié)合代碼能更加熟悉htm 1的相關(guān)細(xì)節(jié)。這個過程大概需要7-10天時間，具體地， 可以每天做一個網(wǎng)站首頁，從簡單的做起，如果能做的像網(wǎng)頁截圖那樣。那就完美了，中間 可以參雜著做網(wǎng)站導(dǎo)航欄、按鈕效果、等等.要是沒有ps基礎(chǔ)的朋友,可以適當(dāng)延長時間安 排。3、學(xué)習(xí)css （重點10天）特別是想做職業(yè)站長的新手們，di v +css技術(shù)是必學(xué)的，也是最要下功夫來學(xué)的,這里我 說一下，c ss入門很容易，就是那么幾個屬性，而且在網(wǎng)頁編輯軟件里都有直接輸入數(shù)值的面 板，我個人認(rèn)為cs s的難點在于頁面的整體性，要從整個頁面甚至整個站點的高度設(shè)計規(guī)劃c

9、 ss，并能熟練的運(yùn)用各種技巧實現(xiàn)網(wǎng)頁樣式與布局的變化，包括考慮到瀏覽器的兼容性，這些 都還是需要一定的時間的，一定熟練的作品才能學(xué)成.學(xué)習(xí)c s S可以考慮買本書來學(xué)習(xí)，書中 的理論知識能幫助你理解每個布局代碼的含義.4、學(xué)習(xí) jav a scri p t+flash（ 7 天）javascript就是常說的js,如網(wǎng)頁的調(diào)用幻燈片、調(diào)用最新記錄、調(diào)用評論數(shù)等等，這些“調(diào) 用”都是通過j a v asc r ipt來實現(xiàn)的,jav a scrip t是運(yùn)行與客戶端的腳本，學(xué)習(xí)它能做出很多 網(wǎng)頁特效,而且它相對簡單易學(xué)（不包括ajax的高級功能），對于想學(xué)習(xí)程序代碼的朋友， 從javascri

10、pt入手是個不錯的選擇。我們并不需要很熟練,只要相對了解就行了。能看 懂一般的js代碼,并能自己寫出一小段js的程度就基本夠用了。學(xué)習(xí)完j s和photoshop之 后再學(xué)習(xí)一下flash的制作和使用，以便能制作出banner或其它廣告條，并不需要達(dá)到制 作動畫片的水平.中國站長站5、學(xué)習(xí)cms程序（8天）學(xué)完以上技術(shù)之后,你的網(wǎng)頁基本知識應(yīng)該算比較牢固了，動態(tài)網(wǎng)頁需要程序的支持， 程序相對比較復(fù)雜，要從零基礎(chǔ)到用自寫程序開發(fā)網(wǎng)站，那對于新手站長來說技術(shù)門檻太高 了，所以現(xiàn)在源碼下載站人氣比較高。提倡的解決方案就是利用時下比較流行的cms建站程 序，用他們可以自定義出幾乎任何類型的站點。這里的

11、學(xué)習(xí)方法就是到各大cms論壇去找 相關(guān)教程和幫助文件了。第二章設(shè)計部分個人網(wǎng)站要發(fā)展，要么是從我的需求出發(fā)，要么是從我周圍人的需求出發(fā)。每個人設(shè)計網(wǎng)頁都希望自己的網(wǎng)站能夠達(dá)到自己的期望要求.2.1設(shè)計愿望我所制作的個人網(wǎng)站在完成時，希望能夠給瀏覽者一種簡約，時尚的感覺的，這是我的 設(shè)計愿望。網(wǎng)站大體可以分為以下幾大部分：（1）首頁個人網(wǎng)站首頁板塊布局，采用一個簡單的DIV容器,容器左側(cè)設(shè)計一個圖片滾動AD插 件，其目的是將4張大圖片做一個輪顯特效效果，右側(cè)設(shè)計一個垂直導(dǎo)航欄，導(dǎo)航欄分為4個 欄目，分別是個人簡介、興趣愛好、家鄉(xiāng)、個人相冊.（2）個人簡介個人簡介板塊布局，采用一個簡單的DIV容器

12、，容器左側(cè)包括一個DIV，右側(cè)也包括 一個DIV容器，左側(cè)容器方一張自己頭像的圖片，右側(cè)容器顯示關(guān)于自己的專業(yè)、學(xué)校、年 紀(jì)、性格等的文字信息，用來簡單的介紹自己（特效）（3）興趣愛好興趣愛好板塊布局，在一個的DIV容器里采用f loa t方式鑲嵌2個小的D I V,左側(cè)里面再 分5個DIV,1、3、5的DIV板塊作為欄目分別顯示動漫、軍事、游戲3個內(nèi)容，右側(cè)DIV 模塊當(dāng)作個子容器，容器分為左右2個DIV模塊，右側(cè)模塊再分為上下2個DIV模塊 上面一個模塊是放圖片的，左側(cè)大的模塊和右側(cè)下面的DIV模塊內(nèi)嵌入一個表格，用了展 示相應(yīng)的文字信息。（4）家鄉(xiāng)家鄉(xiāng)板塊布局，采用一個大的DIV容器，容

13、器里嵌入一個小的DI V塊，這個DIV塊 里采用圖片滾動特效AD插件，和首頁圖片滾動AD插件的區(qū)別是圖片較小并且有相關(guān)的文 字展示區(qū)域，用來介紹家鄉(xiāng)風(fēng)景名勝的文字信息.（5）個人相冊。個人相冊板塊布局，采用一個大的DIV容器，容器里嵌入一個小的DIV快，這個DIV塊里, 采用圖片居中放大插件，用來顯示相冊的每張圖片。2。2設(shè)計預(yù)期成果。在完成網(wǎng)站的風(fēng)格和色調(diào)以后,就是網(wǎng)站的材料組織以及網(wǎng)站的頁面設(shè)計和數(shù)據(jù)庫設(shè)計。網(wǎng) 站最后完成發(fā)到網(wǎng)上后,能夠充分吸引瀏覽者的目光，能夠瀏覽我個人網(wǎng)站的瀏覽者能夠立 刻體會到我網(wǎng)站的簡約，時尚絢麗的風(fēng)格.2. 3數(shù)據(jù)庫和環(huán)境的配置(1)數(shù)據(jù)庫連接網(wǎng)站(ACCESS

14、)。運(yùn)用ASP把數(shù)據(jù)庫和網(wǎng)站連接起來。做一個“ conn。asp”文件，每次連接數(shù)據(jù)庫時候都調(diào)用這個文件即可%responseo buffer=true 啟用緩沖處理dim conn， d bdim con nstrdb =% .mdb數(shù)據(jù)庫鏈接路徑conns tr= DBQ=”+serve r。mappa t h (”&db & ”)+”；DefaultD i r=；DRIVER = Micr o soft Ac c e s s Driver (大.md b );set c onn=server。cre a teobje c t (ADODB.CONNECTI ON )connopen co

15、nns trIf Err T h enerr C learSet Con n = No t hingRes p onse.W r ite ”數(shù)據(jù)庫連接出錯，請檢查數(shù)據(jù)庫連接文件中的數(shù)據(jù)庫參數(shù)設(shè)置?！盧e s po n se。EndEnd Ifsu b C hkhttp()serve r_vv=len(Requ e st.ServerVari abl e s (”SERVER_NAME )s erv e r_v1 =left (Cstr (Req ues t . Se rve r Variab les (HTTP_ R EFE R ER )， s erv er_vv)serve r _v2=le

16、 ft (C st r (http： /& Re quest. Se r v e rVa riab l e s(SERVER_NAM E )， se rv er_ vv)if serve r _v 1 s erver_v 2 or server_ v 1 = or s e r ve r _ vl=” th enr e sponse.C h arset=”utf8”resp o ns e .writ e ( s criptalert ( 錯誤：禁止從站點外部提交數(shù)據(jù)！.)/ s cr ip t”) response.end end ifend sub%(2)win dow 7環(huán)境(IIS配置)操

17、作步驟(啟動IIS)：點擊開始一-控制面板-一-默認(rèn)程序-程序和功能-打開或關(guān)閉 window $功能- -in ternet信息服務(wù)Web管理工具然后勾選所有的選項操作步驟(配置IIS)：點擊開始控制面板-管理工具i nternet信息服務(wù)(iis)管理器 打開后進(jìn)行相關(guān)設(shè)置2 .4設(shè)計工具和設(shè)計語言我制作網(wǎng)站的網(wǎng)頁編輯工具軟件是Dreamweaver 8、設(shè)計語言：web前端采用HTML5、CSS+DIV、編程語言:javascript+jQuery、服務(wù)器語言：ASP第三章網(wǎng)站功能模塊3。1首頁模塊(1)首頁設(shè)計板塊圖:(2)代碼:！DOCTYPE h t ml PUB LIC /W3

18、C/ /D TD XHTML 1。0 Trans i tio na l/ /E N ht t p：/www. /TR / xhtml1/DTD/xh tml1t ra ns i tional。d t d”ht ml xmlns=”htt p：/ / 1 99 9 / xhtml headst y le#d i v1w i dth：9 5 0 p x；ohei g ht： 400px;ba c kgroundcol or： #66CCCC;mar g in:aut o；。p ad d in g：6 0p x 20p x 1 4 0px 2 0 p x；#div2 width:560px;heig

19、h t： 34 0 px；float:left；backg roun d-co lor:# 33FF0 0 ;p a dd ing:20px 2 0px 4 0p x 2 0p x;# d iv3width： 23 0 p x；血 e ight:3 4 0 p x；6back g rou n d-color:#663399；6flo a t:r i g ht；pad ding： 20px 6 0 px 4 0 px 6 0 px;div id=d i v 1 ”！一-圖片滾動AD插件div i d = d i v3 t a b 1 e wid t h=2 3 0 h ei g ht=339,

20、b o r d er = 0 c e 11 p ad d ing= 0” cellspacing=,05,t rtd h e ig h t =60) v/ t rt d hei g ht=43 ( / t dt d heig h t=55 (img src= al t name = X Q aihao w i d t h = ,229 height = 5 2 id=XQaih a o /) /tr)&n b sp;vtd hei g ht= 4 9”img s rc= a 1 t = n ame= J X widths2 2 8 h ei ght= 45”id=”JX”/ & n bsp;/

21、 t d) i mg src= a 1 t = name=GR x i a n g ce w i dth =22 8 hei ght= 42 id= GRx i angce / /d i v/ b ody(3)首頁AD插件特效代碼：需要引用文檔：(script t y pe=text/ jav ascript sr c =”.。.jquery. n ivo.slide r。pac k。j s v/s c ripta h re f=# img s rc =”ph o tos/image2. jpg a lt=t itle= i mag e 2 描述信息”/aa href=#”/a/d i vsc

22、 ript(window) .lo ad( function ()$(#s 1 ide r) .niv o Sl i der()；吊）；3。2個人簡介模塊（1）個人簡介模塊設(shè)計圖:$(2)代碼：！DOCTYPE html PUBL I C ”-/W3 C /DTD XHTML 1。0 Transitional/EN ”ht tp:/www. w3or g/TR /x h t m 11 /DTD/xhtml 1 - tr a nsi tiona 1. d t d”html xmlns=”h t tp： /www. /1999/xhtml”head#d i v1width： 95 0 px;血 e

23、ig ht：4 0 0p x；ba c kg ro un dco lo r:#66 C CCC;marg i n:aut o；padding： 60 p x 2 0p x 140px 20px;#div2width： 460 p x;height： 280px;。f lo a t：le ft;b ac k gr o u nd -c o lor：#3 3F F00;p a ddi n g： 2 0p x 2 0 px 1 00px 20px;#div3。w idth: 3 80p x；血 e ight: 3 40px；background- c olor： # 6 6 3 39 9；。f loa

24、t：righ t;padding:20px 10 px 40px 10px; #di v 3top owi dt h：3 80px；heigh t : 1 40p x ;o b ac kg rou n dc ol o r：#F F00C C ;#div3top1o width :140 pxohe i ght:14 0 px；oback gr oundco l or:#FF 9 9CC；float：left;#div3top2owidth：240px；height:140px;back g ro u n dcolor: # FFC C FF;float：right；#div3bu t tom

25、width:380px;heigh t :20 0 p x；obackground- color：#FF9 966;/headb od y di v id= d ivl ”/divdiv id=”d i v3” / div文字填寫區(qū)域/divdi v i d=” div 3 buttom 文字填寫區(qū)域/div/di v/h tml3. 3興趣愛好模塊(1)興趣愛好模塊設(shè)計圖：(2)代碼：html xmlns=ht tp： /www .w3.o rg / 19 9 9 /xh tml”style#div1 width：9 5 0 px；he igh t： 400p x；b ackg r ou n

26、 dcolo r： #66CCCC； garg in :auto;pa d din g： 60px 20 p x l 4 0 px 20px；# di v2(w i dth：2 4 0 px;h e ight： 340px;f 1 oat: left；b a c kgro undc o lor：#33FF0 0；叩 a d d ing:2 0px 20px 4 0 p x 2 0px;#div3 wid t h： 600 p x；height：340px；b a ckgr o und- co lor:#663399；f1oat：right；padding： 2 0 px 1 0p x 40p

27、x 10px；#div3topowid t h：6 0 0 px ;血 ei gh t :140 px；ba ck groun d 一 c o 1 or: # FFFFCC;#d iv 3top1 owidt h :460p x ;oh e ig h t:1 4 0 px;obackgroun d 一color:# CC 336 6 ;f 1 oat： l e ft;#div3top2width：l 40 p x；height: 1 4 0 px；obac k gr o u n dcol or:# CC 9 900;of1oat：right;#div3buttom width:6 0 0p x

28、；hei gh t: 2 0 0px;ob a ckgroundcolor：#CCFFFF ;bodydiv id=div1”t a ble wi d th= 240 h e i g ht= 337 b o rd e r= 0 cell p add i ng=”0 c e ll spac in g= 0t rtd) / td)/ t r(td (/t d /trtdimg src= alt= n ame=JS HI wid t h= 239 he i gh t = 52 id=JSHI /) / t r)td) &n b sp;/ t d/ t rdiv id= div3”di v id=di

29、v3topl d i v i d =div3top2/div/ di v d iv i d = div3buttom(/ d i v / html)3o 4家鄉(xiāng)模塊(1)家鄉(xiāng)板塊設(shè)計圖:(2)代碼：html xml ns = http： /www/1999/xhtmls t yle#div 1width： 9 5 0 px ;。he i g ht： 400px；。b a c kg r o u nd-color：# 66CCCC；ma rgin:au t o;p adding ：6 0px 20p x 1 40p x 2 0 p x； #div3 width：920px；he ig h t :

30、3 40px;b a c kgroun d -c o lor： #663399；fl o at：r igh t；padding： 20px 1 0 p x 4 0p x 10p x；# div3le ft wid th :53 0 p x；height：3 4 0px；back g rou n d一 color：# CC6633；flo a t:left;叩 a d d ing- right： 2 0 px；#div3rightwidth： 370p x；血 e ight： 340 px；ob a ckgro u nd- color： #C CCC00;。f l o at： right;530

31、” h e igh t =340” id=ADchajian div id= di v 3righ t”家鄉(xiāng)文字介紹/ d iv 3.5個人相冊模塊個人相冊模塊設(shè)計圖:(2)代碼：！ DOCTYPE html PUBLIC /W3C/DTD XHTML 1. 0 Transit iona 1/EN” http: / /www。w3. o r g /TR/x h tml1/DTD/x h tml1transiti o nal. dtd”htm 1 x mln s =ht t p： /www .w3. o rg / 1999/ x h t ml”d i v id=”div3”i mg src= alt= name=”AD c h a jian ” wi d th= 921 he i gh t =33 9 id=”AD c ha j ian /div/bo d y/h tml(3)圖片居中放大顯示插件代碼： 第一步文檔引用：s cri pt ty pe = t e x t/ j avascript s r c =”js / jq u er y. light b ox0。5.js1 i nk r el=” stylesheet type= te x t/css href=”cs s /jquery。lightbox0. 5. c ss ” /第二步要使用這個Wi dget，對HTM