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

個人網(wǎng)站設計與實現(xiàn)（動態(tài)）

俸亞雄

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

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

關鍵詞：個人網(wǎng)站、網(wǎng)站設計、功能模塊、程序代碼

目錄

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

第一章 文獻綜述------------------------------------------------------------------------------------------

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

2．網(wǎng)站設計條件-------------------------------------------------------------------------------------------

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

第二章 設計部分--------------------------------------------------------------------------------------------

1．設計愿望-------------------------------------------------------------------------------------------------

2．設計預期成果-------------------------------------------------------------------------------------------

3．數(shù)據(jù)庫和環(huán)境的配置 ----------------------------------------------------------------------------------

4．設計工具和設計語言 -----------------------------------------------------------------------------------

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

1．個人簡介模塊---------------------------------------------------------------------------------------------

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

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

4．個人相冊模塊--------------------------------------------------------------------------------------------

第四章 總結----------------------------------------------------------------------------------------------------

第一章 文獻綜述

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

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

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

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

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

3. 薪水待遇高

隨著國內(nèi)信息化工作的迅速推進、互聯(lián)網(wǎng)業(yè)的蓬勃發(fā)展及網(wǎng)絡技術的日新月異，市場對網(wǎng)頁設計師、網(wǎng)站開發(fā)人員等技術人員的需求不斷看漲。網(wǎng)頁設計師的就業(yè)范圍相當寬廣，幾乎所有的企業(yè)都需要網(wǎng)頁設計師幫助企業(yè)設計網(wǎng)站和建設客戶交互式系統(tǒng); 幾乎所有有前瞻意識的企業(yè)都需要網(wǎng)頁設計師負責運行和維護工作。因此，網(wǎng)頁設計師的就業(yè)機會比IT 專業(yè)多，而且，薪酬待遇也不錯，統(tǒng)計數(shù)據(jù)顯示，網(wǎng)頁設計師平均月薪約3500～7000元，高的則在15000元以上。

1.2個人網(wǎng)站設計條件

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

1. 軟件基礎

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

輔助軟件：Photoshop

2. 技術需求

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

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

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

HTML 語法、CSS 語法、javascript 語法

(3)圖像處理

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

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

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

(5)后臺編程

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

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

編程實例：文章發(fā)布系統(tǒng)、留言板、BBS 、會員注冊系統(tǒng)、在線購物網(wǎng)站

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

我們是大專學生，所以針對我們電子商務的同學實踐操作特點，我們下面和大家探討一下學習的建站技術的基本步驟和具體的時間安排：

1、html （3天）

是最簡單易學的，不需要過多的時間，一天就能了解，三天就能掌握。

2、學習ps （7天）

能用ps 切圖設計出漂亮的table 頁面。什么？不符合web 標準? 不是div css? 因為表格做的網(wǎng)頁很直觀，新手很容易理解，ps 網(wǎng)頁界面，只要有一點平面設計基礎的都能很快掌握，結合代碼能更加熟悉html 的相關細節(jié)。這個過程大概需要7-10天時間，具體地，可以每天做一個網(wǎng)站首頁，從簡單的做起，如果能做的像網(wǎng)頁截圖那樣。那就完美了，中間可以參雜著做網(wǎng)站導航欄、按鈕效果、等等。要是沒有ps 基礎的朋友，可以適當延長時間安排。

3、學習css （重點10天）

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

4、學習javascript flash（7天）

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

5、學習cms 程序（8天）

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

第二章 設計部分

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

2.1設計愿望

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

(1)首頁

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

(2)個人簡介

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

(3)興趣愛好

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

(4)家鄉(xiāng)

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

(5)個人相冊

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

2.2設計預期成果

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

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

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

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

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

<

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

dim conn,db

dim connstr

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

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ù)庫連接出錯，請檢查數(shù)據(jù)庫連接文件中的數(shù)據(jù)庫參數(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配置)

操作步驟(啟動IIS) ： 點擊開始-------控制面板----------默認程序--------------程序和功能--------------打開或關閉windows 功能----------------internet 信息服務-------------Web 管理工具--------然后勾選所有的 選項

操作步驟(配置IIS) ：

點擊開始-------控制面板------------管理工具------------internet 信息服務(iis)管理器-------------打開后進行相關設置

2.4設計工具和設計語言

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

Dreamweaver 8 、設計語言：web 前端采用HTML5、CSS DIV、編程語言：javascript jQuery、服務器語言：ASP

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

3.1首頁模塊

(1)首頁設計板塊圖：

(2)代碼：

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

1.0 Transitional//EN"

,

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

需要引用文檔：

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