個(gè)人網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)（動(dòng)態(tài)）俸亞雄（湖南交通職業(yè)技術(shù)學(xué)院物流管理學(xué)院，湖南423000）摘要：網(wǎng)站伴隨著網(wǎng)絡(luò)的快速發(fā)展而快速興起，作為上網(wǎng)的主要依托，由于人們使用網(wǎng)絡(luò)的頻繁而變得非常的重要，其中個(gè)人網(wǎng)站

個(gè)人網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)（動(dòng)態(tài)）

俸亞雄

（湖南交通職業(yè)技術(shù)學(xué)院物流管理學(xué)院，湖南423000）

摘要：網(wǎng)站伴隨著網(wǎng)絡(luò)的快速發(fā)展而快速興起，作為上網(wǎng)的主要依托，由于人們使用網(wǎng)絡(luò)的頻繁而變得非常的重要，其中個(gè)人網(wǎng)站作為其對(duì)外展示自己的窗口，在現(xiàn)代互聯(lián)網(wǎng)時(shí)代是推銷自己的不二選擇工具。本文將簡(jiǎn)單介紹個(gè)人網(wǎng)站在社會(huì)生活中對(duì)人們生活產(chǎn)生的影響，說明個(gè)人網(wǎng)站在互聯(lián)網(wǎng)時(shí)代對(duì)個(gè)人的重要性，其次介紹網(wǎng)站個(gè)人網(wǎng)站的色調(diào)搭配，設(shè)計(jì)風(fēng)格，重點(diǎn)介紹個(gè)人網(wǎng)站的功能模塊以及文字內(nèi)容和圖片展示；最后解釋一些網(wǎng)站設(shè)計(jì)的重要代碼以及其實(shí)現(xiàn)功能。

關(guān)鍵詞：個(gè)人網(wǎng)站、網(wǎng)站設(shè)計(jì)、功能模塊、程序代碼

目錄

摘要------------------------------------------------------------------------------------------------------ ----I

第一章 文獻(xiàn)綜述------------------------------------------------------------------------------------------

1．網(wǎng)頁設(shè)計(jì)行業(yè)現(xiàn)狀------------------------------------------------------------------------------------

2．網(wǎng)站設(shè)計(jì)條件-------------------------------------------------------------------------------------------

3．網(wǎng)站建設(shè)入門門檻（大專）-------------------------------------------------------------------------

第二章 設(shè)計(jì)部分--------------------------------------------------------------------------------------------

1．設(shè)計(jì)愿望-------------------------------------------------------------------------------------------------

2．設(shè)計(jì)預(yù)期成果-------------------------------------------------------------------------------------------

3．?dāng)?shù)據(jù)庫(kù)和環(huán)境的配置 ----------------------------------------------------------------------------------

4．設(shè)計(jì)工具和設(shè)計(jì)語言 -----------------------------------------------------------------------------------

第三章 網(wǎng)站模塊功能----------------------------------------------------------------------------------------

1．個(gè)人簡(jiǎn)介模塊---------------------------------------------------------------------------------------------

2．興趣愛好模塊--------------------------------------------------------------------------------------------

3．家鄉(xiāng)模塊---------------------------------------------------------------------------------------------------

4．個(gè)人相冊(cè)模塊--------------------------------------------------------------------------------------------

第四章 總結(jié)----------------------------------------------------------------------------------------------------

第一章 文獻(xiàn)綜述

互聯(lián)網(wǎng)是社會(huì)發(fā)展的必然趨勢(shì)，很多人已經(jīng)意識(shí)到網(wǎng)絡(luò)的強(qiáng)大生命力和它在未來將處于的重要地位。他們鉆研并且努力進(jìn)入到這一個(gè)新的空間，新的領(lǐng)域。以個(gè)人為中心，淡化了傳統(tǒng)中心地位，使得我們的世界向多元化加速發(fā)展，人人都有話語權(quán)，人人都是中心。 互聯(lián)網(wǎng)是一個(gè)互動(dòng)性極強(qiáng)的平臺(tái)，它自由、寬容、平等、共享，并使來自民間的聲音參與到了構(gòu)建主流話語的行動(dòng)中來。Internet 飛速發(fā)展使得網(wǎng)站不再僅僅為企業(yè)或公司等大型結(jié)構(gòu)所擁有，互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟(jì)、生活等各個(gè)方面發(fā)揮著重要的作用。因此網(wǎng)站建設(shè)在Internet 應(yīng)用上的地位顯而易見，一個(gè)家庭甚至個(gè)人都可以擁有屬于自己的網(wǎng)站，而在這其中，個(gè)人網(wǎng)站已經(jīng)日漸普及，而且發(fā)展到今天，創(chuàng)建一個(gè)能充分體現(xiàn)自我風(fēng)格和特色的個(gè)人網(wǎng)站已經(jīng)成為互聯(lián)網(wǎng)用戶的新追求。

1.1網(wǎng)頁設(shè)計(jì)師就業(yè)現(xiàn)狀

1. 中國(guó)網(wǎng)民數(shù)量多

中國(guó)的網(wǎng)民數(shù)量已超過5億，處于全球網(wǎng)民數(shù)量最多的位置。整個(gè)互聯(lián)網(wǎng)處于快速發(fā)展階段，每個(gè)人，每個(gè)企業(yè)都想要一個(gè)網(wǎng)站，網(wǎng)頁設(shè)計(jì)師就業(yè)前景良好。網(wǎng)頁設(shè)計(jì)師培訓(xùn)成為了許多人進(jìn)修以及進(jìn)入網(wǎng)頁設(shè)計(jì)師行業(yè)的首選。

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

3. 薪水待遇高

隨著國(guó)內(nèi)信息化工作的迅速推進(jìn)、互聯(lián)網(wǎng)業(yè)的蓬勃發(fā)展及網(wǎng)絡(luò)技術(shù)的日新月異，市場(chǎng)對(duì)網(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); 幾乎所有有前瞻意識(shí)的企業(yè)都需要網(wǎng)頁設(shè)計(jì)師負(fù)責(zé)運(yùn)行和維護(hù)工作。因此，網(wǎng)頁設(shè)計(jì)師的就業(yè)機(jī)會(huì)比IT 專業(yè)多，而且，薪酬待遇也不錯(cuò)，統(tǒng)計(jì)數(shù)據(jù)顯示，網(wǎng)頁設(shè)計(jì)師平均月薪約3500～7000元，高的則在15000元以上。

1.2個(gè)人網(wǎng)站設(shè)計(jì)條件

想要獨(dú)立設(shè)計(jì)網(wǎng)頁，需要具備一些必要條件，否則就不能勝任這份工作。

1. 軟件基礎(chǔ)

網(wǎng)頁設(shè)計(jì)軟件三劍客：Flash 、Dreamweaver 、Fireworks 熟練掌握其中之一

輔助軟件：Photoshop

2. 技術(shù)需求

(1)基礎(chǔ)內(nèi)容

網(wǎng)頁設(shè)計(jì)概述、網(wǎng)站設(shè)計(jì)制作的基本流程、色彩搭配在網(wǎng)站中的應(yīng)用、網(wǎng)站在用戶界面的設(shè)計(jì)、網(wǎng)站廣告的設(shè)計(jì)、網(wǎng)站中表格的使用、網(wǎng)站中層的應(yīng)用、框架網(wǎng)站的制作、模板網(wǎng)站的制作、javascript 特效制作、使用CSS 樣式表設(shè)計(jì)網(wǎng)頁等

(2)技術(shù)內(nèi)容

HTML 語法、CSS 語法、javascript 語法

(3)圖像處理

Flash 動(dòng)畫創(chuàng)意、gif 動(dòng)畫制作、網(wǎng)頁圖片處理

(4)行業(yè)網(wǎng)站實(shí)例

個(gè)人網(wǎng)站、企業(yè)宣傳網(wǎng)站、新聞資訊網(wǎng)站、教育網(wǎng)站、電子政務(wù)網(wǎng)站、電子商務(wù)網(wǎng)站、旅游網(wǎng)站、免費(fèi)資源網(wǎng)站、門戶網(wǎng)站等

(5)后臺(tái)編程

數(shù)據(jù)庫(kù)：SQLServer 設(shè)計(jì)、MySQL 設(shè)計(jì)、Access 設(shè)計(jì)

編程語言：ASP 、JSP 、VBScript 、Javascript 、PHP 等一種

編程實(shí)例：文章發(fā)布系統(tǒng)、留言板、BBS 、會(huì)員注冊(cè)系統(tǒng)、在線購(gòu)物網(wǎng)站

1.3網(wǎng)站建設(shè)入門門檻（大專）

我們是大專學(xué)生，所以針對(duì)我們電子商務(wù)的同學(xué)實(shí)踐操作特點(diǎn)，我們下面和大家探討一下學(xué)習(xí)的建站技術(shù)的基本步驟和具體的時(shí)間安排：

1、html （3天）

是最簡(jiǎn)單易學(xué)的，不需要過多的時(shí)間，一天就能了解，三天就能掌握。

2、學(xué)習(xí)ps （7天）

能用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é)。這個(gè)過程大概需要7-10天時(shí)間，具體地，可以每天做一個(gè)網(wǎng)站首頁，從簡(jiǎn)單的做起，如果能做的像網(wǎng)頁截圖那樣。那就完美了，中間可以參雜著做網(wǎng)站導(dǎo)航欄、按鈕效果、等等。要是沒有ps 基礎(chǔ)的朋友，可以適當(dāng)延長(zhǎng)時(shí)間安排。

3、學(xué)習(xí)css （重點(diǎn)10天）

特別是想做職業(yè)站長(zhǎng)的新手們，div css技術(shù)是必學(xué)的，也是最要下功夫來學(xué)的，這里我說一下，css 入門很容易，就是那么幾個(gè)屬性，而且在網(wǎng)頁編輯軟件里都有直接輸入數(shù)值的面板，我個(gè)人認(rèn)為css 的難點(diǎn)在于頁面的整體性，要從整個(gè)頁面甚至整個(gè)站點(diǎn)的高度設(shè)計(jì)規(guī)劃css ，并能熟練的運(yùn)用各種技巧實(shí)現(xiàn)網(wǎng)頁樣式與布局的變化，包括考慮到瀏覽器的兼容性，這些都還是需要一定的時(shí)間的，一定熟練的作品才能學(xué)成。學(xué)習(xí)css 可以考慮買本書來學(xué)習(xí)，書中的理論知識(shí)能幫助你理解每個(gè)布局代碼的含義。

4、學(xué)習(xí)javascript flash（7天）

javascript 就是常說的js ，如網(wǎng)頁的調(diào)用幻燈片、調(diào)用最新記錄、調(diào)用評(píng)論數(shù)等等，這些“調(diào)用”都是通過javascript 來實(shí)現(xiàn)的，javascript 是運(yùn)行與客戶端的腳本，學(xué)習(xí)它能做出很多網(wǎng)頁特效，而且它相對(duì)簡(jiǎn)單易學(xué)（不包括ajax 的高級(jí)功能），對(duì)于想學(xué)習(xí)程序代碼的朋友，從javascript 入手是個(gè)不錯(cuò)的選擇。我們并不需要很熟練，只要相對(duì)了解就行了。能看懂一般的js 代碼，并能自己寫出一小段js 的程度就基本夠用了。學(xué)習(xí)完js 和photoshop 之后再學(xué)習(xí)一下flash 的制作和使用，以便能制作出banner 或其它廣告條，并不需要達(dá)到制作動(dòng)畫片的水平。 [中國(guó)站長(zhǎng)站]

5、學(xué)習(xí)cms 程序（8天）

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

第二章 設(shè)計(jì)部分

個(gè)人網(wǎng)站要發(fā)展，要么是從我的需求出發(fā)，要么是從我周圍人的需求出發(fā)。每個(gè)人設(shè)計(jì)網(wǎng)頁都希望自己的網(wǎng)站能夠達(dá)到自己的期望要求。

2.1設(shè)計(jì)愿望

我所制作的個(gè)人網(wǎng)站在完成時(shí)，希望能夠給瀏覽者一種簡(jiǎn)約，時(shí)尚的感覺的，這是我的設(shè)計(jì)愿望。網(wǎng)站大體可以分為以下幾大部分：

(1)首頁

個(gè)人網(wǎng)站首頁板塊布局，采用一個(gè)簡(jiǎn)單的DIV 容器，容器左側(cè)設(shè)計(jì)一個(gè)圖片滾動(dòng)AD 插件，其目的是將4張大圖片做一個(gè)輪顯特效效果，右側(cè)設(shè)計(jì)一個(gè)垂直導(dǎo)航欄，導(dǎo)航欄分為4個(gè)欄目，分別是個(gè)人簡(jiǎn)介、興趣愛好、家鄉(xiāng)、個(gè)人相冊(cè)。

(2)個(gè)人簡(jiǎn)介

個(gè)人簡(jiǎn)介板塊布局，采用一個(gè)簡(jiǎn)單的DIV 容器，容器左側(cè)包括一個(gè)DIV ，右側(cè)也包括一個(gè)DIV 容器，左側(cè)容器方一張自己頭像的圖片，右側(cè)容器顯示關(guān)于自己的專業(yè)、學(xué)校、年紀(jì)、性格等的文字信息，用來簡(jiǎn)單的介紹自己（特效）

(3)興趣愛好

興趣愛好板塊布局，在一個(gè)的DIV 容器里采用float 方式鑲嵌2個(gè)小的DIV ，左側(cè)里面再分5個(gè)DIV ，1、3、5的DIV 板塊作為欄目分別顯示動(dòng)漫、軍事、游戲3個(gè)內(nèi)容，右側(cè)DIV 模塊當(dāng)作個(gè)子容器，容器分為左右2個(gè)DIV 模塊，右側(cè)模塊再分為上下2個(gè)DIV 模塊 上面一個(gè)模塊是放圖片的，左側(cè)大的模塊和右側(cè)下面的DIV 模塊內(nèi)嵌入一個(gè)表格，用了展示相應(yīng)的文字信息。

(4)家鄉(xiāng)

家鄉(xiāng)板塊布局，采用一個(gè)大的DIV 容器，容器里嵌入一個(gè)小的DIV 塊，這個(gè)DIV 塊里采用圖片滾動(dòng)特效AD 插件，和首頁圖片滾動(dòng)AD 插件的區(qū)別是圖片較小并且有相關(guān)的文字展示區(qū)域，用來介紹家鄉(xiāng)風(fēng)景名勝的文字信息。

(5)個(gè)人相冊(cè)

個(gè)人相冊(cè)板塊布局，采用一個(gè)大的DIV 容器，容器里嵌入一個(gè)小的DIV 快，這個(gè)DIV 塊里，采用圖片居中放大插件，用來顯示相冊(cè)的每張圖片。

2.2設(shè)計(jì)預(yù)期成果

在完成網(wǎng)站的風(fēng)格和色調(diào)以后，就是網(wǎng)站的材料組織以及網(wǎng)站的頁面設(shè)計(jì)和數(shù)據(jù)庫(kù)設(shè)計(jì)。網(wǎng)站最后完成發(fā)到網(wǎng)上后，能夠充分吸引瀏覽者的目光，能夠?yàn)g覽我個(gè)人網(wǎng)站的瀏覽者能夠立刻體會(huì)到我網(wǎng)站的簡(jiǎn)約，時(shí)尚絢麗的風(fēng)格。

2.3數(shù)據(jù)庫(kù)和環(huán)境的配置

(1)數(shù)據(jù)庫(kù)連接網(wǎng)站(ACCESS)

運(yùn)用ASP 把數(shù)據(jù)庫(kù)和網(wǎng)站連接起來

做一個(gè)“conn.asp ”文件，每次連接數(shù)據(jù)庫(kù)時(shí)候都調(diào)用這個(gè)文件即可

<

response.buffer=true '啟用緩沖處理

dim conn,db

dim connstr

db=".mdb"'數(shù)據(jù)庫(kù)鏈接路徑

connstr="DBQ=" server.mappath(""&db&"") ";DefaultDir=;DRIVER={Microsoft Access Driver (*.mdb)};"

set conn=server.createobject("ADODB.CONNECTION")

conn.open connstr

If Err Then

err.Clear

Set Conn = Nothing

Response.Write "數(shù)據(jù)庫(kù)連接出錯(cuò)，請(qǐng)檢查數(shù)據(jù)庫(kù)連接文件中的數(shù)據(jù)庫(kù)參數(shù)設(shè)置。" Response.End

End If

sub Chkhttp()

server_vv=len(Request.ServerVariables("SERVER_NAME"))

server_v1=left(Cstr(Request.ServerVariables("HTTP_REFERER")),server_vv)

server_v2=left(Cstr("http://"&Request.ServerVariables("SERVER_NAME")),server_vv) if server_v1<>server_v2 or server_v1="" or server_v1="" then

response.Charset="utf-8"

response.write("")

response.end

end if

end sub

>

(2)window 7環(huán)境(IIS配置)

操作步驟(啟動(dòng)IIS) ： 點(diǎn)擊開始-------控制面板----------默認(rèn)程序--------------程序和功能--------------打開或關(guān)閉windows 功能----------------internet 信息服務(wù)-------------Web 管理工具--------然后勾選所有的 選項(xiàng)

操作步驟(配置IIS) ：

點(diǎn)擊開始-------控制面板------------管理工具------------internet 信息服務(wù)(iis)管理器-------------打開后進(jìn)行相關(guān)設(shè)置

2.4設(shè)計(jì)工具和設(shè)計(jì)語言

我制作網(wǎng)站的網(wǎng)頁編輯工具軟件是

Dreamweaver 8 、設(shè)計(jì)語言：web 前端采用HTML5、CSS DIV、編程語言：javascript jQuery、服務(wù)器語言：ASP

第三章 網(wǎng)站功能模塊

3.1首頁模塊

(1)首頁設(shè)計(jì)板塊圖：

(2)代碼：

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

1.0 Transitional//EN"

,

(3)首頁AD 插件特效代碼：

需要引用文檔：

一個(gè)div 元素包含一些圖片，超鏈接用于鼠標(biāo)單擊從而指向一些網(wǎng)頁，這里用了javascript 庫(kù)jQuery ：