第一篇：計(jì)算機(jī)個(gè)人網(wǎng)站設(shè)計(jì)論文

淺談?dòng)?jì)算機(jī)個(gè)人網(wǎng)站建設(shè)及運(yùn)用

13級(jí) 計(jì)算機(jī) 劉潤(rùn)

摘要：個(gè)人網(wǎng)站在現(xiàn)在的個(gè)人生活中可以起到非常重要的作用，本文主要介紹了個(gè)人網(wǎng)站設(shè)計(jì)規(guī)劃，庫(kù)文件和模板文件的制作，利用模板制作網(wǎng)頁(yè)，制作網(wǎng)頁(yè)特效的制作并使用ASP＋I(xiàn)IS＋Access技術(shù)實(shí)現(xiàn)了我的網(wǎng)站的各種功能，其中和數(shù)據(jù)庫(kù)的連接使用到了ODBC技術(shù)等。通過(guò)此次的學(xué)習(xí)能快速掌握個(gè)人網(wǎng)站設(shè)計(jì)制作的基本技巧和基本網(wǎng)站建設(shè)過(guò)程。

關(guān)鍵詞：網(wǎng)站；網(wǎng)頁(yè)制作；模版

引 言

在Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們的政治、經(jīng)濟(jì)、生活等方面發(fā)揮著重要的作用。Internet上發(fā)布信息主要是通過(guò)網(wǎng)站來(lái)實(shí)現(xiàn)的，獲取信息也是要在Internet海洋中按照一定的檢索方式將所需要的信息從網(wǎng)站上下載下來(lái)。因此網(wǎng)站建設(shè)居Internet應(yīng)用上的地位顯而易見，它已成為政府、企事業(yè)單位信息化建設(shè)、個(gè)人網(wǎng)站建設(shè)中的重要組成部分，從而倍受人們的重視。個(gè)人網(wǎng)站已成為同學(xué)們討論最熱門的話題，適用于想通過(guò)建立網(wǎng)站交友、突出自我個(gè)性的廣大網(wǎng)站制作愛好者。

主要介紹了個(gè)人網(wǎng)站設(shè)計(jì)規(guī)劃，庫(kù)文件和模板文件的制作，利用模板制作網(wǎng)頁(yè)，制作網(wǎng)頁(yè)特效的制作等。通過(guò)此次的學(xué)習(xí)能快速掌握個(gè)人網(wǎng)站設(shè)計(jì)制作的基本技巧和基本網(wǎng)站建設(shè)過(guò)程。

首頁(yè)中主要涉及了個(gè)人簡(jiǎn)介，照片匣子，我的作品，友情鏈接等。

一、個(gè)人網(wǎng)站設(shè)計(jì)規(guī)劃

隨著網(wǎng)絡(luò)技術(shù)的飛速發(fā)展，越來(lái)越多的個(gè)人擁有了自己的網(wǎng)站，為了設(shè)計(jì)一個(gè)有效的，引人注目的站點(diǎn)，應(yīng)該有計(jì)劃，有步驟地完成一系列操作。在動(dòng)手建立網(wǎng)站以前，對(duì)網(wǎng)頁(yè)進(jìn)行完整，詳盡的整體設(shè)計(jì)是至關(guān)重要的。個(gè)人網(wǎng)站設(shè)計(jì)制作主要包括以下幾個(gè)步驟。

（一）確定網(wǎng)站的主題

對(duì)于主題的選擇主要按下列三個(gè)條件去考慮，本例所講的是一個(gè)個(gè)人介紹性質(zhì)的網(wǎng)站，主體就是介紹個(gè)人的相關(guān)信息。

1、主題要小而精。一般來(lái)說(shuō)，個(gè)人主頁(yè)的選材定位要小，內(nèi)容要精。

2、對(duì)于個(gè)人網(wǎng)站來(lái)說(shuō)主題最好是自己擅長(zhǎng)或者喜愛的內(nèi)容。這樣在制作時(shí)，才不會(huì)覺得無(wú)聊或者力不從心。興趣是制作網(wǎng)站的動(dòng)力，沒(méi)有熱情，很難設(shè)計(jì)制作出優(yōu)秀的作品。

3、主題不要太濫或者目標(biāo)太高。

如果主題已經(jīng)確定，就可以圍繞主題給該網(wǎng)站起一個(gè)名字，網(wǎng)站名稱也是網(wǎng)站設(shè)計(jì)的一部分，而且是關(guān)鍵的要素。

（二）確定網(wǎng)站的目錄結(jié)構(gòu)

網(wǎng)站的目錄是指建立網(wǎng)站時(shí)創(chuàng)建的目錄。目錄結(jié)構(gòu)的好壞，對(duì)瀏覽者來(lái)說(shuō)并沒(méi)有什么太大的感覺，但是對(duì)站點(diǎn)本身的上傳維護(hù)以及以后的內(nèi)容的擴(kuò)充和移植有著重要的影響。

本站只是個(gè)人介紹性質(zhì)的頁(yè)面，主要是靜態(tài)的幾個(gè)頁(yè)面，因此在建立目錄的時(shí)候，可以將其中的頁(yè)面文件直接放在根目錄下，所有的圖片可以放在images文件夾中。

下面是建立目錄結(jié)構(gòu)的建議：

1、不要將所有文件都存放在根目錄下。

2、按欄目?jī)?nèi)容建立子目錄。

3、在每個(gè)主目錄下都建立獨(dú)立的images目錄。

4、目錄的層次不要太深。

（三）確定網(wǎng)站的整體風(fēng)格

風(fēng)格是指站點(diǎn)的整體形象給瀏覽者的綜合感受，包括站點(diǎn)的標(biāo)志，色彩，字體，標(biāo)語(yǔ)，版面布局，內(nèi)容價(jià)值，存在意義，站點(diǎn)榮譽(yù)等諸多因素。本站采用白色，綠色等為主的色調(diào)，綠色具有清爽，理想，希望，生長(zhǎng)的含義,采用這種明亮的綠色，和褐色的沉穩(wěn),營(yíng)造了一個(gè)清晰明塊，充滿無(wú)限希望與活力的氛圍。

從整體風(fēng)格的角度來(lái)看，下面就是一個(gè)好的網(wǎng)站標(biāo)準(zhǔn)：

1、簡(jiǎn)潔實(shí)用：這是非常重要的，網(wǎng)絡(luò)特殊環(huán)境下，盡量以最高效率的方式將用戶所想得到的信息傳送給他就是最好的，所以要去掉所有冗余的東西。

2、整體性好：一個(gè)網(wǎng)站強(qiáng)調(diào)的就是一個(gè)整體，只有圍繞一個(gè)統(tǒng)一的目標(biāo)所做的設(shè)計(jì)才是成功的。

3、網(wǎng)站形象突出：一個(gè)符合美的標(biāo)準(zhǔn)的網(wǎng)頁(yè)是能夠使網(wǎng)站的形象得到最大限度的提升的。頁(yè)面用色協(xié)調(diào)，布局符合形式美的要求：布局有條理，使網(wǎng)頁(yè)富有可欣賞性。

4、交互式強(qiáng)：發(fā)揮網(wǎng)絡(luò)的優(yōu)勢(shì)，使每個(gè)使用者都參與到其中來(lái)，這樣的設(shè)計(jì)才能算是成功的設(shè)計(jì)。

（四）確定網(wǎng)站主要欄目和布局

因?yàn)槊颗_(tái)顯示器分辨率不同，所以同一個(gè)頁(yè)面的大小可能出現(xiàn)640*480像素，800*600像素，1024*768像素等不同尺寸。本站的所有頁(yè)面采用800*600像素制作。

通常版面布局按照如下步驟進(jìn)行。

1、草案

新建頁(yè)面就像一張白紙，沒(méi)有任何表格，框架和約定俗成的東西，可以盡可能地發(fā)揮想象力，用一張白紙和一支鉛筆將想到的景象畫上去，當(dāng)然用作圖軟件Photoshop，F(xiàn)ireworks等都可以。這屬于創(chuàng)作階段，不講究細(xì)膩工整，不必考慮細(xì)節(jié)功能，只以粗陋的線條勾畫出創(chuàng)意的輪廓既可。盡可能多畫，幾張，最后選定滿意的作為繼續(xù)創(chuàng)作的樣板。

2、粗略布局

在草案的基礎(chǔ)上，將確定需要放置的功能模塊安排到頁(yè)面上。必須遵循出重點(diǎn)，平衡協(xié)調(diào)的原則，將網(wǎng)站標(biāo)志，主要欄目等最重要的模塊放在最顯眼，最突出的位置，然后再考慮次要模塊的排放。

根據(jù)本站的主要欄目確定了本站的布局草圖。我們可以把頂部導(dǎo)航區(qū)作top庫(kù)文件，在制作其他網(wǎng)頁(yè)文件時(shí)直接引用。在本站中的其他頁(yè)面風(fēng)格和欄目相似，如果每次都重新設(shè)定網(wǎng)頁(yè)結(jié)構(gòu)以及導(dǎo)航條，各類圖標(biāo)就顯得非常麻煩，可以利用Dreamweaver先制作一個(gè)模板，然后利用模板再來(lái)創(chuàng)建其他的頁(yè)面。

二、創(chuàng)建個(gè)人網(wǎng)站站點(diǎn)

在制作網(wǎng)頁(yè)前，要先為網(wǎng)頁(yè)定義一個(gè)個(gè)人網(wǎng)站站點(diǎn)，用來(lái)存放站點(diǎn)中所有網(wǎng)頁(yè)文件及附屬文件。建設(shè)站點(diǎn)前先將配套的素材文件夾復(fù)制到本地硬盤上，在本地硬盤上創(chuàng)建個(gè)人網(wǎng)站，具體操作步驟如下。

1、選擇【站點(diǎn)】|【管理站點(diǎn)】命令，彈出【管理站點(diǎn)】對(duì)話框，在【管理站點(diǎn)】對(duì)話框中，單擊【新建】按鈕，然后從彈出的菜單中選擇【站點(diǎn)】。如下圖3-1所示：

圖3-1 管理站點(diǎn)

圖3-2 輸入站點(diǎn)名稱

2、彈出【站點(diǎn)定義】對(duì)話框，如果對(duì)話框顯示的是【高級(jí)】選項(xiàng)卡，則單擊【基本】選項(xiàng)卡，彈出【站點(diǎn)定義向?qū)А康牡谝粋€(gè)界面，要求為站點(diǎn)輸入名稱。如圖3-2所示.3、單擊【下一步】按鈕，出現(xiàn)向?qū)У南乱粋€(gè)界面，詢問(wèn)是否要使用服務(wù)器技術(shù)。選擇【否，我不想使用服務(wù)器技術(shù)】選項(xiàng)，指示目前該站點(diǎn)是一個(gè)靜態(tài)站點(diǎn)，沒(méi)有動(dòng)態(tài)頁(yè)面。

4、單擊【下一步】按鈕，打開一個(gè)對(duì)話框，在文本框中輸入站點(diǎn)路徑。

5、單擊【下一步】按鈕，詢問(wèn)是否使用遠(yuǎn)程服務(wù)器，這里選擇【無(wú)】，因?yàn)閷⒄麄€(gè)站點(diǎn)制作完成以后再上傳。

6、單擊【完成】按鈕，即出現(xiàn)【管理站點(diǎn)】對(duì)話框，其中顯示了新建的站點(diǎn)。

7、單擊【完成】按鈕，關(guān)閉【管理站點(diǎn)】對(duì)話框?，F(xiàn)在，已經(jīng)為站點(diǎn)定義了一個(gè)本地根文件夾，就可以在站點(diǎn)中制作網(wǎng)頁(yè)了，當(dāng)制作完成以后，就可以上傳到服務(wù)器上供大家瀏覽了。

三、制作網(wǎng)頁(yè)模板

因?yàn)楸揪W(wǎng)站中的幾個(gè)頁(yè)面都要用到相同的頁(yè)面元素和排版方式，因此可以使用模板以避免重復(fù)地在每個(gè)頁(yè)面輸入或修改相同的部分，在網(wǎng)站改版的時(shí)候，只要改變模板，就能自動(dòng)更改所有基于這個(gè)模板的網(wǎng)頁(yè)。

（一）制作庫(kù)文件

在Dreamweaver中，庫(kù)項(xiàng)目是可以重復(fù)使用的項(xiàng)目之一，庫(kù)的用途和模板類似，都是可將同一內(nèi)容用于不同的網(wǎng)頁(yè)，庫(kù)文件具體制作步驟如下。

1.選擇【文件】|【新建】命令，新建一空白網(wǎng)頁(yè)。

2.選擇【插入】|【圖像】命令，彈出【選擇圖像源文件】對(duì)話框，選擇lbi.jpg。3.單擊【確定】按鈕，即可插入圖像。

4.選擇【文件】|【另存為】命令，彈出【另存為】對(duì)話框，在【文件名】文本框中輸入文件名3.lbi，在【保存類型】中選擇【庫(kù)文件（* lbi）。

5.單擊【保存】按鈕，至此庫(kù)文件制作完成。

（二）制作模板

使用模板創(chuàng)建文檔可使站點(diǎn)具有統(tǒng)一的結(jié)構(gòu)和外觀。無(wú)論是新建站點(diǎn)還是更新已有站點(diǎn)，如果要使站點(diǎn)中的所有頁(yè)面都共有某種特色，則模板非常有用。使用模板可以個(gè)次修改若干頁(yè)面，而不用對(duì)新頁(yè)面逐個(gè)設(shè)置屬性。制作模板具體步驟如下。

1.選擇【文件】|【新建】命令，彈出【新建文檔】對(duì)話框，在【常規(guī)】選項(xiàng)卡中選擇

【模板頁(yè)】類別中的【HTML模板】選項(xiàng)。如圖4-1.圖4-1 HTML

模板

2.單擊【創(chuàng)建】按鈕，創(chuàng)建一空白模板網(wǎng)頁(yè)。選擇【窗口】|【資源】命令，打開資源面板，在資源面板中選擇images/bj_01.jpg文件。如圖4-2

圖4-2 打開文件 3.單擊【插入】按鈕，即可插入庫(kù)文件。

4.將光標(biāo)置于庫(kù)文件的下邊，選擇【插入】|【表格】命令，彈出【表格】對(duì)話框，并設(shè)置【行數(shù)】、【列數(shù)】，【表格寬度】設(shè)置為1005像素，單擊【確定】按鈕即可插入需要的表格。

5.將光標(biāo)置于第1行單元格中單擊鼠標(biāo)面板中【背景圖像】文本框右邊的 圖標(biāo)，彈

出【選擇圖像源文件】對(duì)話框，從中選擇圖像文件夾中的images/bj_01.jpg文件，如圖4-3所示.圖4-3 選擇文件

6.單擊【確定】按鈕，即可插入背景圖像

7.用PHOTOSHOP CS2制作圖片Bj-04.jpg，如圖4-4

圖4-4 制作圖片

8.按需要分別插入圖片，使其組合成一個(gè)完整的頁(yè)面背景.9.預(yù)覽，效果如圖4-5所示

圖4-5 效果圖

（三）設(shè)置模板可編輯區(qū)

1.接上一節(jié)，將鼠標(biāo)置于文檔想創(chuàng)建可編輯區(qū)域的位置。

2.選擇【插入】|【模板對(duì)象】|【可編輯區(qū)域】命令，彈出【新建可編輯區(qū)域】對(duì)話框，在對(duì)話框中，將【名稱】設(shè)置為index_1,如圖4-6所示.圖4-6 創(chuàng)建可編輯區(qū)域

3.單擊【確定】按鈕，即可創(chuàng)建可編輯區(qū)域，如圖4-7所示.圖4-7 可創(chuàng)建區(qū)域

（四）用模板制作網(wǎng)頁(yè)說(shuō)明

可以利用模板快速的制作出大量的風(fēng)格類似的網(wǎng)頁(yè)，當(dāng)模板改變時(shí)，所有基于模板的網(wǎng)頁(yè)也隨之改變，這樣能有效的實(shí)現(xiàn)網(wǎng)站的更新。

四、利用模板制作網(wǎng)頁(yè)

（一）制作登錄主頁(yè)

1.切換到【顯示代碼視窗】，在代碼視圖狀態(tài)下，在和

第二篇：個(gè)人網(wǎng)站設(shè)計(jì)論文

秦皇島職業(yè)技術(shù)學(xué)院信息工程系

分類號(hào)： TP319

秦皇島職業(yè)技術(shù)學(xué)院 課程設(shè)計(jì)（論文）

個(gè)人博客網(wǎng)頁(yè)設(shè)計(jì)論文

學(xué)生姓專班指導(dǎo)教指導(dǎo)教師職名 王飛飛 業(yè) 計(jì)算機(jī)應(yīng)用技術(shù) 級(jí) 1100103 師

稱

目錄

摘要 …………………………………………………………………………………2 前言 …………………………………………………………………………………3 第一章 關(guān)于網(wǎng)絡(luò)的知識(shí).............................................4

秦皇島職業(yè)技術(shù)學(xué)院信息工程系

1.1 INTERNET的簡(jiǎn)介.................................................4 1.2 WWW的簡(jiǎn)介....................................................4 1.3網(wǎng)頁(yè)基本構(gòu)成元素..............................................5 1.4 制作網(wǎng)頁(yè)前的準(zhǔn)備..............................................5 第二章 網(wǎng)站制作實(shí)戰(zhàn)...............................................6 2.1 站點(diǎn)..........................................................6 2.1.1 創(chuàng)建站點(diǎn)..................................................6 2.1.2 創(chuàng)建站點(diǎn)內(nèi)容..............................................6 2.2 首頁(yè)..........................................................7 2.2.1 設(shè)置首頁(yè)布局和頁(yè)面屬性....................................7 2.2.2 查看和編輯頭內(nèi)容..........................................9 2.2.3 插入圖像..................................................9 2.2.4 插入FLASH相冊(cè)...........................................10 2.2.5 插入文本.................................................10 2.3 創(chuàng)建其它網(wǎng)頁(yè).................................................11 第三章 建立網(wǎng)頁(yè)鏈接..............................................12 3.1 文字鏈接.....................................................12 3.2 圖像鏈接.....................................................13 3.3在HTML語(yǔ)言中建立網(wǎng)頁(yè)鏈接....................................14 第四章 網(wǎng)站測(cè)試與維護(hù) …………………………………………………………17 結(jié)論………………………………………………………………………………18 參考文獻(xiàn) ……………………………………………………………………… 19 致謝………………………………………………………………………………20

摘 要

本論文主要是對(duì)個(gè)人網(wǎng)站的建立進(jìn)行研究和探討。作品的主要技術(shù)指標(biāo)包括：

1、制作出一個(gè)具有靜態(tài)技術(shù)的“個(gè)人網(wǎng)站”；

2、在制作的過(guò)程中，加強(qiáng)和 1

秦皇島職業(yè)技術(shù)學(xué)院信息工程系

深化以前所學(xué)的關(guān)于網(wǎng)頁(yè)設(shè)計(jì)的方法，同時(shí)更好的理解參考資料上的方法、理論和更好的利用Fireworks、Flash制作網(wǎng)站需要的一些圖片和影片。

本設(shè)計(jì)的主要內(nèi)容包括：

1、個(gè)人網(wǎng)站的設(shè)計(jì)思想，整體規(guī)劃及相關(guān)基礎(chǔ)知識(shí)；

2、個(gè)人網(wǎng)站的首頁(yè)設(shè)計(jì)，包括簡(jiǎn)單的HTML語(yǔ)言及效果圖；

3、個(gè)人網(wǎng)站的調(diào)試。

網(wǎng)頁(yè)規(guī)劃包含的內(nèi)容很多，如網(wǎng)頁(yè)的結(jié)構(gòu)、欄目的設(shè)置、網(wǎng)頁(yè)的風(fēng)格、顏色搭配、版面布局、文字圖片的運(yùn)用等，也只有如此制作出來(lái)的網(wǎng)頁(yè)才能有個(gè)性、有特色，具有吸引力。

網(wǎng)站主題就是所要包含的主要內(nèi)容，一個(gè)網(wǎng)站必須要有一個(gè)明確的主題。特別是對(duì)于個(gè)人網(wǎng)站，不可能像單獨(dú)的網(wǎng)頁(yè)那樣做得內(nèi)容少而單一。所以必須要找準(zhǔn)一些自己最感興趣內(nèi)容，做深、做透，辦出自己的特色，這樣才能給人留下深刻的印象。

關(guān)鍵詞：技術(shù)指標(biāo)

基本設(shè)計(jì)內(nèi)容

網(wǎng)站規(guī)劃 網(wǎng)站主題

前言

隨著二十一世紀(jì)新興科技的飛速發(fā)展，如今的交流與交往不再是那么的單調(diào)，看如今不曾再有五百里加急文件的傳送，看如今已很少在出現(xiàn)寫信、寄信。人們正在運(yùn)用現(xiàn)世紀(jì)的高科技來(lái)增加自己的交際圈，來(lái)發(fā)展自己的人脈關(guān)系，秦皇島職業(yè)技術(shù)學(xué)院信息工程系

同時(shí)，其它人也是通過(guò)高科技，悄悄的就能很容易地去了解，關(guān)注一個(gè)人。

正是因?yàn)槿藗兊倪@些需求，所以出現(xiàn)了互聯(lián)網(wǎng)，正是因?yàn)槿藗兊男枨螅猿霈F(xiàn)了如今的網(wǎng)絡(luò)時(shí)代，網(wǎng)絡(luò)通訊工具。來(lái)方便人們的交往，交際與溝通。也正是因?yàn)槿藗兊男枨螅猿霈F(xiàn)了個(gè)人博客，通過(guò)一人簡(jiǎn)單的網(wǎng)頁(yè)來(lái)展現(xiàn)自己的獨(dú)特魅力，自己的與眾不同。真正的做到了“足不出戶，便知天下人”。

互聯(lián)網(wǎng)加大了我們了解世界的眼界，縮緊了人與人之間的距離，這就更容易的使我們走上了信息化的道路。

我覺得一個(gè)網(wǎng)站的開始，應(yīng)該有一個(gè)大體的規(guī)劃，網(wǎng)站的布局是最重要的，它起著一個(gè)網(wǎng)站成功與否的決定性作用，因?yàn)椴季值暮门c壞，帶來(lái)的是網(wǎng)站整體上的美觀效果及應(yīng)用。網(wǎng)站內(nèi)容上也能決定著網(wǎng)站成功與否，一個(gè)網(wǎng)站上的每個(gè)字眼都可能決定著這個(gè)網(wǎng)站，因?yàn)槟悴恢滥膫€(gè)字就是吸引別人的內(nèi)容，就是大家都追捧的話題，就是很潮的事物，所以內(nèi)容上一定要謹(jǐn)慎。再有，就是網(wǎng)站的圖片，一定要確準(zhǔn)好路徑，以免圖像的丟失而不能再網(wǎng)站中顯示，其次就是鏈接，在Dreamweaver中提供了很簡(jiǎn)單的鏈接命令，根據(jù)其提示操作即可。

我做了一個(gè)簡(jiǎn)單的個(gè)人博客的網(wǎng)站，通過(guò)這個(gè)網(wǎng)站能讓大家更深的了解我，同時(shí)更重要的是鍛煉自己的實(shí)踐能力，鞏固自己學(xué)習(xí)的知識(shí)，彌補(bǔ)自己學(xué)習(xí)的不足。

第一章 關(guān)于網(wǎng)絡(luò)的知識(shí)

1.1什么是Internet Internet是由眾多的計(jì)算機(jī)網(wǎng)絡(luò)互聯(lián)而成的互聯(lián)網(wǎng)，它覆蓋了全世界各地，3

秦皇島職業(yè)技術(shù)學(xué)院信息工程系

它是采用開放系統(tǒng)協(xié)議的計(jì)算機(jī)通訊網(wǎng)絡(luò)。然而，Internet不僅僅是計(jì)算機(jī)的互聯(lián)網(wǎng)，它還是全球最大的信息資源寶庫(kù)，它提供了包括科研、教育、文化娛樂(lè)、商業(yè)和信息交流等各種各樣的服務(wù)，使得世界范圍內(nèi)的人與人之間的交流在時(shí)間和空間上變的更小了。

Web頁(yè)瀏覽：這是目前利用最廣泛、最直接的互聯(lián)網(wǎng)服務(wù)，通過(guò)瀏覽WWW（萬(wàn)維網(wǎng)）中的網(wǎng)頁(yè)，可以了解世界各地的新聞，查看最新的股市行情，最新的娛樂(lè)動(dòng)態(tài)、科技發(fā)明，找到眾多的就業(yè)信息??幾乎想找到什么樣的信息，就有什么信息。正是有了WWW、Internet才會(huì)變得如此豐富多彩，才能走進(jìn)千家萬(wàn)戶。1.2 WWW的簡(jiǎn)介

WWW的全稱為World Wide Web，含義是“環(huán)球網(wǎng)”，又稱“萬(wàn)維網(wǎng)”、3W、Web。WWW是一個(gè)基于超文本（Hypertext）方式的信息檢索服務(wù)工具。我們上網(wǎng)瀏覽到的網(wǎng)頁(yè)就是這樣的超文本，也就是HTML(Hypertext Mark-up Language,超文本標(biāo)記語(yǔ)言)文件，這些網(wǎng)頁(yè)檔被放置到WWW服務(wù)器上，并且都有一定的地址。當(dāng)我們想瀏覽某個(gè)網(wǎng)站時(shí)，首先要在計(jì)算機(jī)上安裝瀏覽器，如

Internet Explorer或Netscape，然后在瀏覽器中輸入網(wǎng)站的地址（網(wǎng)址），就可以進(jìn)入網(wǎng)站進(jìn)行瀏覽。在這些網(wǎng)頁(yè)中，都有超連接，當(dāng)將鼠標(biāo)指針移動(dòng)到某個(gè)地方（如文本或圖像）時(shí)，鼠標(biāo)指針就會(huì)變成一個(gè)小手形形狀，單擊它就可以連接到另個(gè)網(wǎng)頁(yè)中，從而使得瀏覽者能在不同的信息之間動(dòng)畫和聲音等信息。通跳轉(zhuǎn)，我們之所以能在Internet的海洋中穿梭自如，正是超連接的功勞。

秦皇島職業(yè)技術(shù)學(xué)院信息工程系

1.3網(wǎng)頁(yè)基本構(gòu)成元素

要學(xué)會(huì)制作網(wǎng)頁(yè)，首先需要了解網(wǎng)頁(yè)都是由什么元素構(gòu)成的。文字：文本是構(gòu)成網(wǎng)頁(yè)的基本元素。一個(gè)最簡(jiǎn)單的網(wǎng)頁(yè)可以只有幾行文本。圖片：正是有個(gè)各種美麗的圖片，網(wǎng)頁(yè)才變得多姿多彩。動(dòng)畫：如今，網(wǎng)頁(yè)上的動(dòng)畫越來(lái)越多，最常用的有GIF動(dòng)畫、Flash動(dòng)畫等。超連接：如上所述，超連接幾乎是必不可少的。一個(gè)沒(méi)有超連接的網(wǎng)頁(yè)，就如同汪洋大海中的一座孤島，失去了與外界的一切聯(lián)系。其它元素：還可以在網(wǎng)頁(yè)中添加聲音、視頻等元素。1.4 制作網(wǎng)頁(yè)前的準(zhǔn)備

計(jì)算機(jī)必備：計(jì)算機(jī)速度夠快，最好能夠上網(wǎng)。操作系統(tǒng)：Windows 98/NT/Me/2000/XP.其它軟件：看圖軟件ACDSee、圖像處理軟件Photoshop、上傳工具CuteFTP、Fireworks、動(dòng)畫軟件Flash等。

秦皇島職業(yè)技術(shù)學(xué)院信息工程系

第二章 網(wǎng)站制作實(shí)戰(zhàn)

2.1 站點(diǎn) 2.1.1 創(chuàng)建站點(diǎn)

要制作一個(gè)網(wǎng)站，第一步操作都是一樣的，就是要?jiǎng)?chuàng)造一個(gè)“站點(diǎn)”，從菜單中選擇“站點(diǎn)/管理站點(diǎn)”在彈出的對(duì)話框中選擇“新建”，之后再選擇其中的“站點(diǎn)”，再次彈出一個(gè)對(duì)話框，在文本框中輸入自己已經(jīng)企化好的網(wǎng)站名稱“my web”。填好后，單擊“下一步”，進(jìn)入下一個(gè)步驟。由于我要做的是一個(gè)靜態(tài)的網(wǎng)頁(yè)，所以選擇上面的一項(xiàng)“否，我不想使用服務(wù)器技術(shù)。單擊“下一步”，進(jìn)入下一個(gè)步驟。在此選項(xiàng)中有兩個(gè)選擇，選擇推薦的“編輯我的計(jì)算機(jī)上的本地副本，完成后再上傳到服務(wù)器”。底下的文本框允許在本地磁盤上指定一個(gè)文件夾，Dreamweaver將在其中儲(chǔ)存站點(diǎn)檔的本地副本。單擊該文本框后面的文件夾圖示，之后單擊“下一步“，進(jìn)入下一個(gè)步驟。這一步是如何設(shè)置連接到遠(yuǎn)程服務(wù)器，彈出式菜單中有6中選擇，這里選擇“無(wú)”。而后“下一步”再“完成”，即可。2.1.2 創(chuàng)建站點(diǎn)內(nèi)容

站點(diǎn)創(chuàng)建完成后，就可以創(chuàng)建Web頁(yè)來(lái)填充站點(diǎn)了。在“右側(cè)浮動(dòng)面板組”中選擇“檔/檔”面板，在彈出的菜單中選擇“新建文件”，新建一個(gè)檔后將其命名為“index.htm(或index.html),它就是未來(lái)的首頁(yè)。

秦皇島職業(yè)技術(shù)學(xué)院信息工程系

2.2 首頁(yè)

2.2.1 設(shè)置首頁(yè)布局和頁(yè)面屬性

一、設(shè)置首頁(yè)布局

每個(gè)網(wǎng)站都會(huì)有一個(gè)首頁(yè)，就功能上而言，它代表著一個(gè)網(wǎng)站的風(fēng)格與特色，就網(wǎng)站架構(gòu)上而言，它代表了網(wǎng)站的第一層架構(gòu)，首頁(yè)是打開網(wǎng)站后在瀏覽器中顯示的第一個(gè)頁(yè)面。它是起什么名字通常要視Server端的設(shè)置，一般的有index.htm,default.htm或home.htm等，目前主要以index.htm的居多。當(dāng)然，后綴名為html也是正確的。具體設(shè)置方法是：右健單擊“檔”浮動(dòng)面板中的index.htm,在彈出的菜單中選擇“設(shè)成首頁(yè)”。操作步驟：

1、在“插入快捷欄”的“布局”分類中，單擊“布局表格”按紐。

2、將變成“+”形狀的鼠標(biāo)游標(biāo)放到編輯中網(wǎng)頁(yè)上，在要繪制的地方進(jìn)行拖動(dòng)就可以進(jìn)行創(chuàng)建了。（如果繪制的是第一個(gè)表格必須從網(wǎng)頁(yè)的最左上角開始繪制）?！癷ndex”表格布局如下圖：

秦皇島職業(yè)技術(shù)學(xué)院信息工程系

二、設(shè)置首頁(yè)的頁(yè)面屬性

首先雙擊“檔”浮動(dòng)面板中的index.htm,進(jìn)入頁(yè)面的編輯窗口。右健單擊空白區(qū)域，在菜單中選擇“頁(yè)面屬性”，之后彈出“頁(yè)面屬性”對(duì)話框，若選擇主菜單“修改/頁(yè)面屬性”項(xiàng)，也可以把打開該對(duì)話框。

在“頁(yè)面屬性”對(duì)話框中，左側(cè)窗口顯示“分類”，其中包括了“外觀”、“鏈接”、“標(biāo)題”、“標(biāo)題/編碼”、“跟蹤圖像”5項(xiàng)，右側(cè)區(qū)域則顯示各類中可以設(shè)置的項(xiàng)目

“index”首頁(yè)設(shè)置的屬性如下圖所示：

秦皇島職業(yè)技術(shù)學(xué)院信息工程系

2.2.2 查看和編輯頭內(nèi)容

一個(gè)網(wǎng)頁(yè)文件結(jié)構(gòu)上實(shí)際是由兩部分組成，頭（head）內(nèi)容和主體（body）內(nèi)容主體內(nèi)容（body）是文檔的主要部分，也是包含文本和圖像等的可見部分。頭內(nèi)容（head）是除文檔標(biāo)題外的不可見部分，包含有文文件類型、語(yǔ)言編碼、搜索引擎的關(guān)鍵的關(guān)鍵詞和內(nèi)容指示器以及樣式定義等重要信息，這些元器并不是每個(gè)頁(yè)面都需要的，例如，可以僅為主頁(yè)提供關(guān)鍵詞。2.2.3 插入圖像

圖像是網(wǎng)頁(yè)中不可或缺的組成成份，恰當(dāng)?shù)厥褂脠D像，可以使網(wǎng)站充滿生活生命力與說(shuō)服力，吸引更多的瀏覽者，加深他們欣賞你網(wǎng)站的意愿。首先將游標(biāo)停留在要插入圖像的位置，然后單擊“菜單欄”下面“插入快健欄”的下拉表，選擇其中的“常用”類，則右側(cè)將會(huì)顯示該類中可以插入的對(duì)象快鍵按鈕。左起第5個(gè)即為“圖像：圖像”按鈕，單擊它右側(cè)的下拉列表，選擇第1項(xiàng)“圖像”。隨即彈出“選擇圖像源文件”對(duì)話框。從計(jì)算機(jī)磁盤中選擇想要插入的圖像文件，下面的“相對(duì)于”下拉表框中，可選擇文件URL地址的類型，插入logo圖像，如圖所示:

秦皇島職業(yè)技術(shù)學(xué)院信息工程系

最后單擊“確定”按鈕，即可完成插入圖像的操作。2.2.4 插入FLASH相冊(cè)

在Dreamweaver 8中，除了之前講到的可以插入“圖像”外，還可插入動(dòng)畫、聲音、視頻，F(xiàn)LASH相冊(cè)等媒體元素，并且還可以在Dreamweaver自身內(nèi)插入Macromedia Flash MX2004按鈕和文本對(duì)象，以及進(jìn)行相關(guān)的后期處理和添加設(shè)計(jì)備注等操作。在Dreamweaver 8文文件中，可以插入媒體文件包Flash 相冊(cè)、QuickTime、AVI java、applet Active X控件以及各種格式的音頻檔。要在瀏覽器中播放放Flash 相冊(cè)，必須在瀏覽器中集成“Flash 播放器（Flash Player）”。操場(chǎng)作步驟：

步驟1、將游標(biāo)停留在要插入Flash的位置，然后單擊菜單欄下面“插入”的下拉列表，選擇其中的“FLASH”分類，找到圖像查看器命令，單擊彈出保存對(duì)話框，選擇要保存的地方和名稱，點(diǎn)擊保存。

步驟

2、在Dreamweaver中將會(huì)產(chǎn)生一個(gè)flash相冊(cè)，在Dreamweaver中的最右邊將會(huì)有一個(gè)flash元素，一次將flash的屬性修改，既可完成一個(gè)flash相冊(cè)的制作。2.2.5 插入文本

文字是人類語(yǔ)言最基本的表達(dá)方式，在網(wǎng)頁(yè)中，文本內(nèi)容也可以說(shuō)是重要的組成部分，它是最關(guān)鍵的因素。插入文本的兩種方式：一種是在網(wǎng)頁(yè)編輯窗口中直接用鍵盤敲入文本。另一種是復(fù)制文本的方式。直接使用Dreamweaver的文本復(fù)制功能，將大段的文本內(nèi)容拷貝到網(wǎng)頁(yè)的編輯窗口來(lái)進(jìn)行排版的工作，10

秦皇島職業(yè)技術(shù)學(xué)院信息工程系

具體步驟如下：打開文本編輯軟件（如Microsoft Word），選中要復(fù)制的文本，它們將反白顯示，執(zhí)行菜單“編輯/復(fù)制”命令或直接用快捷鍵Ctrl+C，之后切換回Dreamweaver,將游標(biāo)停留在插入文本的位置，執(zhí)行主菜單“編輯/粘貼”命令或直接使用快捷鍵Ctrl+v,即可將大段的文本快速粘貼到網(wǎng)頁(yè)中。這在我的“閑情逸致”中用到很多。2.3 創(chuàng)建其它網(wǎng)頁(yè)

還有其它的幾個(gè)網(wǎng)站與主頁(yè)的制作相同，一個(gè)網(wǎng)頁(yè)是圖像和文字的組合?！跋鄡?cè)”子頁(yè)中的FLASH相冊(cè)的插入和前面的介紹相同。

秦皇島職業(yè)技術(shù)學(xué)院信息工程系

第三章 建立網(wǎng)頁(yè)鏈接

網(wǎng)站實(shí)際上是由很多網(wǎng)頁(yè)組成的，那么網(wǎng)頁(yè)之間是如何聯(lián)系的呢？這就是本章要講的內(nèi)容----網(wǎng)頁(yè)的“鏈接”?！版溄印?，又稱“超鏈接"（Hyperlink）,它作為網(wǎng)頁(yè)的橋梁。網(wǎng)頁(yè)中的很多對(duì)象都可以加入“鏈接”屬性。在Dreamweaver 8中，如果以“鏈接”的媒介來(lái)劃分的話，則“鏈接”可以分為“文字鏈接”、“圖像鏈接”、“圖像地圖鏈接”、“內(nèi)部鏈接和外部鏈接”、“E-mail鏈接”、“命名錨記鏈接”、“文件下載鏈接”和“跳轉(zhuǎn)菜單”，共8種。3.1 文字鏈接

“文字鏈接”即以文字作為媒介的鏈接，它是網(wǎng)頁(yè)中最常被使用的鏈接方式，具有“文件小、制作簡(jiǎn)單和便于維護(hù)”的特點(diǎn)。接下來(lái)結(jié)合我的個(gè)人網(wǎng)站為實(shí)例，來(lái)講解如何為文字建立“鏈接”。操作步驟：

步驟1、準(zhǔn)備好已經(jīng)制作完成的首頁(yè)的各個(gè)欄目頁(yè)面

步驟

2、在Dreamweaver 中打開首頁(yè)，之后反白選取作為“鏈接”的文字。步驟

3、觀察“屬性面板”，其中包括一個(gè)“鏈接”文本框。步驟

4、接下來(lái)需要把鏈接的位址加入到文本框中。

步驟

5、在“鏈接”文本框下面還有一個(gè)“目標(biāo)”下拉列表，從中可以選擇鏈接網(wǎng)頁(yè)顯示的窗口方式，共有4種。如圖：

步驟

6、還可以設(shè)置一些“鏈接”的屬性，單擊“屬性面板”中的“頁(yè)面 12

秦皇島職業(yè)技術(shù)學(xué)院信息工程系

屬性”，選擇其中的“鏈接”分類，可以進(jìn)行的設(shè)置有“鏈接字體”、“大小”、“鏈接顏色”、“變換圖像鏈接”顏色、“已訪問(wèn)鏈接”顏色、“活動(dòng)鏈接”顏色及“下劃線樣式”。

步驟

7、至此，第1個(gè)欄目的鏈接就制作完畢了，按下Ctrl+S保存網(wǎng)頁(yè)，再按下F12預(yù)覽，測(cè)試一下，當(dāng)鼠標(biāo)放在“放松心情”這4個(gè)文字上時(shí)將變成手形，并且瀏覽器窗口下面的狀態(tài)區(qū)中會(huì)顯示鏈接到的網(wǎng)頁(yè)的位址，單擊文字，頁(yè)面會(huì)立即跳轉(zhuǎn)到第1個(gè)欄目中，這表示鏈接已經(jīng)制作成功了。

步驟

8、同理，按照以上步驟，再為“閑情逸致”和“個(gè)人主頁(yè)”等其它欄制作指向?qū)?yīng)欄目的鏈接。

至此，整個(gè)“文字鏈接”的實(shí)例就全就全部完成了。3.2 圖像鏈接

“圖像”也是常被使用的鏈接媒體，它和“文字鏈接”非常相似。為圖像加入鏈接，首先應(yīng)該在網(wǎng)頁(yè)中插入“圖像”，有關(guān)插入“圖像”或“導(dǎo)航條”按鈕的內(nèi)容，接下來(lái)以我的網(wǎng)站“my web“為例，講解如何建立“圖像鏈接”。操作步驟：

步驟

1、首先仍然要準(zhǔn)備好已經(jīng)制作完成的首頁(yè)和各個(gè)欄目的頁(yè)面 步驟

2、在Dreamweaver中打開網(wǎng)站的首頁(yè)，之后選取要制作“鏈接”的圖像。

步驟

3、觀察“屬性面板”，在“鏈接”文本框中輸入鏈接的文字位址。步驟

4、如果有需要，可以在“目標(biāo)”下拉列表中選擇“鏈接”網(wǎng)頁(yè)顯示 13

秦皇島職業(yè)技術(shù)學(xué)院信息工程系 的窗口方式，分別為-blank、-parent、-self或-top。

步驟

5、至此，第1個(gè)欄目的圖像鏈接就制作完畢了，按下Ctrl+S保存網(wǎng)頁(yè)，再按下F12預(yù)覽，測(cè)試一下，將鼠標(biāo)放在“動(dòng)畫制作”4個(gè)文字上時(shí)將變成手形，同時(shí)瀏覽器窗口下面的狀態(tài)區(qū)中會(huì)顯示出鏈接到的網(wǎng)頁(yè)的地址，并且會(huì)顯示出“替代”文本“動(dòng)畫制作”，單擊文字，頁(yè)面會(huì)立即跳轉(zhuǎn)到第3個(gè)欄目中，這表示鏈接已經(jīng)制作成功了。

步驟

6、同理，按照以上步驟，再為其它幾幅圖像制作指向?qū)?yīng)欄目的鏈接。

步驟

7、在欄目頁(yè)面中制作“返回首頁(yè)”的鏈接，使得單擊后可以跳轉(zhuǎn)回首頁(yè)。

至此，整個(gè)“圖像鏈像”的實(shí)例就全部完成了。3.3在HTML語(yǔ)言中建立網(wǎng)頁(yè)鏈接

一、文字鏈接

在HTML語(yǔ)言中用超鏈接標(biāo)記指向一個(gè)目標(biāo)。其基本格式為：舉個(gè)簡(jiǎn)單的“文本鏈接”的實(shí)例，該實(shí)例相對(duì)應(yīng)的HTML代碼如下所示。

a href-“index2.html”target=”-blank”>平面設(shè)計(jì)（新開窗口，-blank)

相冊(cè)（原窗口，默認(rèn)為空）

留言

第三篇：網(wǎng)頁(yè)制作論文--個(gè)人網(wǎng)站設(shè)計(jì)

網(wǎng)頁(yè)制作課程論文

（個(gè)人網(wǎng)站設(shè)計(jì)論文）

姓名：薛金鴿 學(xué)號(hào)：105031040025 班級(jí)：103212 專業(yè)：市場(chǎng)營(yíng)銷（電子商務(wù)方向）學(xué)期：2011-2012學(xué)年第2學(xué)期 任課教師：劉新飛

個(gè)人網(wǎng)站策劃書

1.組織機(jī)構(gòu)描述

1.1個(gè)人網(wǎng)站的應(yīng)用背景

網(wǎng)絡(luò)發(fā)展到今天，建立網(wǎng)站已經(jīng)成為一個(gè)很普遍的問(wèn)題了，對(duì)于個(gè)人來(lái)說(shuō)，建設(shè)好時(shí)間的個(gè)性化網(wǎng)站可以更加方便的收集信息，開展更加直接的網(wǎng)絡(luò)交流，使用自己構(gòu)筑的友善平臺(tái)，我們可以為自己畢業(yè)后找工作做好充分的準(zhǔn)備，通過(guò)自己建設(shè)的網(wǎng)站，用人單位可以更好的去了解你，從而給自己增加了一份很重的砝碼。在我的這個(gè)個(gè)人網(wǎng)站的制作過(guò)程中，我選擇了我比較熟悉的大學(xué)生活中的許多內(nèi)容做為我的網(wǎng)站的重要組成部分，這樣相對(duì)于其他包括種類齊全的網(wǎng)站，我就有了一定的材料基礎(chǔ)。這是我這個(gè)網(wǎng)站選擇大學(xué)生主題的原因之一。

其次，做為在校大學(xué)生，我知道大學(xué)生現(xiàn)在對(duì)什么事物，內(nèi)容，活動(dòng)等等感興趣，所以，我做起來(lái)的時(shí)候相對(duì)來(lái)說(shuō)是比較隨手的，我不用像其他的網(wǎng)站那樣去刻意的收集信息，資料，我只要在校園里稍微留意，我就會(huì)捕捉到大學(xué)生的興趣點(diǎn)。所以，在整個(gè)網(wǎng)站的設(shè)計(jì)過(guò)程中，我廣泛的聽取同學(xué)的意見和建議，不斷的改進(jìn)和提高我的網(wǎng)站的內(nèi)容和質(zhì)量，這些都取得了比較好的效果。

在整個(gè)網(wǎng)站的設(shè)計(jì)過(guò)程中，我根據(jù)自己以往的設(shè)計(jì)經(jīng)驗(yàn)和自己找來(lái)的資料，又經(jīng)過(guò)老師的指點(diǎn)，經(jīng)過(guò)了近一個(gè)月的努力，幾經(jīng)易稿，最終做成了我的這個(gè)個(gè)人主頁(yè)。.2 個(gè)人網(wǎng)站建設(shè)的目的

在我們的工作、日常生活中，能夠擁有一個(gè)自己的網(wǎng)站，一個(gè)已經(jīng)成為不少人的希望和驕傲。一個(gè)網(wǎng)站項(xiàng)目的確立是建立在各種各樣的需求上面的，這是個(gè)人網(wǎng)站，所以這種需求往往來(lái)自于個(gè)人的實(shí)際需求，其中每個(gè)人的實(shí)際需求占了絕大部分[6]。因此如何更好地的了解、分析、明確需求，并且能夠準(zhǔn)確、清晰以文檔的形式表達(dá)出來(lái)，保證開發(fā)過(guò)程按照個(gè)人需求為目的正確項(xiàng)目開發(fā)方向進(jìn)行。不同的網(wǎng)站目的要求通過(guò)不同的方式來(lái)實(shí)現(xiàn)。一個(gè)展示個(gè)人能力的網(wǎng)站與一個(gè)以花卉種植為主題的網(wǎng)站，以及一個(gè)大型門戶網(wǎng)站和一個(gè)小型企業(yè)網(wǎng)站，其出發(fā)點(diǎn)和建站目的都有所不同，在整個(gè)網(wǎng)站的建設(shè)規(guī)劃方面的要求也是肯定是大不一樣的。因此在規(guī)劃我的這個(gè)網(wǎng)站時(shí)，我選擇了和大學(xué)生的生活和學(xué)習(xí)相關(guān)聯(lián)的主題。

1.3 相關(guān)應(yīng)用軟件選用、技術(shù)采用

在網(wǎng)頁(yè)的設(shè)計(jì)過(guò)程中，我選用的軟件包括Dreamweavercs5、Fireworks cs5和Photoshopcs5，其中，Dreamweaver 是網(wǎng)頁(yè)編輯軟件，F(xiàn)ireworks cs5是圖形/圖像處理軟件，photoshopcs5是圖片處理軟件。它們是Macromedia公司專門為網(wǎng)頁(yè)設(shè)計(jì)、制作開發(fā)的系列軟件套件，三者之間可以無(wú)縫集成，能夠有效地解決網(wǎng)絡(luò)帶寬問(wèn)題，是設(shè)計(jì)動(dòng)畫網(wǎng)頁(yè)的最佳工具。

Dreamweaver cs5采用“所見即所得”的直觀設(shè)計(jì)模式，充分尊重設(shè)計(jì)人員的原始意識(shí)和想象力。她成功地將網(wǎng)頁(yè)設(shè)計(jì)功能中的技術(shù)實(shí)現(xiàn)部分和設(shè)計(jì)部分分離開來(lái)，使用戶只需專注于設(shè)計(jì)，而其余的工作由Dreamweavercs5自動(dòng)完成。另外，還有一點(diǎn)值得說(shuō)明的是，Dreamweaver cs5可以控制和刪除冗余代碼，減小網(wǎng)頁(yè)文件的大小。從而能夠快速上傳和下載。

Fireworkscs4的獨(dú)特之處在于它能夠優(yōu)化、切分圖片映射圖，并提供了功能強(qiáng)大的翻滾圖工具。它是基于WEB應(yīng)用的圖形/圖象處理軟件，提供了一種革命性的新方法來(lái)創(chuàng)建WEB圖形，并且具有所有其他圖形處理工具的諸多優(yōu)點(diǎn)。Fireworks cs4的最大優(yōu)勢(shì)就在于它在任何時(shí)候可以從任何階段開始設(shè)計(jì)工作，這樣既可以節(jié)約時(shí)間又可以對(duì)產(chǎn)品進(jìn)行擴(kuò)展。另外，F(xiàn)ireworks cs4中的諸多功能都是面向WEB應(yīng)用的，因此對(duì)于WEB設(shè)計(jì)新手來(lái)說(shuō)也很容易學(xué)習(xí)的。

在我設(shè)計(jì)我的個(gè)人網(wǎng)站的過(guò)程中，我選擇了Dreamwearcs5和 Photoshopcs5 Fireworks cs4三種軟件。因?yàn)樽约合驅(qū)τ谄渌能浖?lái)說(shuō)，這三個(gè)還算是比較熟悉的。

2．網(wǎng)站的技術(shù)參數(shù)部分

2.1我的導(dǎo)航系統(tǒng)

我所制作的個(gè)人網(wǎng)站的導(dǎo)航系統(tǒng)包括：

1.個(gè)人簡(jiǎn)介2.個(gè)人專題4.我的相冊(cè)5.網(wǎng)站說(shuō)明6.給我留言 8.發(fā)送郵件9.鏈接百度10.女生花園

2.2功能模塊的劃分

1．搜索引擎：

根據(jù)瀏覽者的要求，使用主頁(yè)上的搜索引擎鏈接到百度，在整個(gè)Internet上進(jìn)行搜索，完成信息的優(yōu)化與提取。

2．論壇：

主要功能是網(wǎng)友和網(wǎng)站之間的交流平臺(tái)，也是網(wǎng)友給版主提出意見的主要渠道。在論壇中用戶可以發(fā)表意見，這些意見可以讓所有人看到，也可以只讓版主看到，版主和其他人可以針對(duì)留言的內(nèi)容進(jìn)行回復(fù)，只留給版主的留言只有版主能夠回復(fù)，并且版主可以登錄后臺(tái)對(duì)留言進(jìn)行管理，是否發(fā)表或刪除。

3．發(fā)送電子郵件：

網(wǎng)友可以通過(guò)“聯(lián)系我”利用outlook 向版主或其他人發(fā)送電子郵件。4．精品收藏：

在其中展示我喜愛的東西，包括電影、歌曲和一些優(yōu)美的文章。奇文共欣賞，疑義相與析。我只想起到拋磚引玉的作用，讓大家從中認(rèn)識(shí)我和了解我，讓一些美好的東西我們大家共同來(lái)欣賞。但我增加了管理權(quán)限，我以管理員的身份可以對(duì)加入的新內(nèi)容進(jìn)行管理，即允許加入和對(duì)其進(jìn)行刪除。

5．留言板：

是一個(gè)我與大家談心交流的地方，在留言板中，我們可以暢所欲言，和大家進(jìn)行交流。就我們感興趣的話題展開討論。和大家進(jìn)行溝通。

2.3 首頁(yè)的設(shè)計(jì) 我的網(wǎng)站首頁(yè)主要采用簡(jiǎn)單大方的設(shè)計(jì)方法，用的是色調(diào)一致的一組圖片做的LOGO和相關(guān)的背景圖片，主要頁(yè)面布局如下：

2.4主要欄目的介紹

1．個(gè)人簡(jiǎn)介：

介紹版主的一些基本信息，希望各位訪客能夠認(rèn)識(shí)版主。2.我的論壇：

此版塊又分為主頁(yè)、發(fā)表意見、回復(fù)意見、顯示論壇內(nèi)容、版主后臺(tái)管理以及版主的回復(fù)界面。其中發(fā)表意見界面是所有訪客都可以在論壇里面發(fā)表自己的意見，這些意見可以是發(fā)表給所有的訪客，也可以是只發(fā)表給版主，如果只發(fā)表給版主，只有版主可以看到和回復(fù)；回復(fù)意見是所有訪客針對(duì)自己感興趣的話題進(jìn)行回復(fù)；這些發(fā)表的意見和回復(fù)可以在顯示論壇內(nèi)容的界面都顯示出來(lái)，供大家討論；那些只有版主才能看到的信息在版主的管理界面，這個(gè)界面需要登錄，設(shè)有用戶名和密碼，在這里版主可以對(duì)所有評(píng)論進(jìn)行發(fā)表或刪除的管理。3.個(gè)人專題：

這里收錄了我平時(shí)搜集的一些文章和音樂(lè)，各位訪客可以根據(jù)自己的喜好進(jìn)行閱覽。4.我的相冊(cè)：

在這個(gè)板塊可以看到我的照片，班級(jí)照片和搜集的校園照片，如果大家喜歡可以收藏。更改照片的時(shí)候只要更新數(shù)據(jù)庫(kù)就可以了。5.網(wǎng)站說(shuō)明：

里面是我對(duì)整個(gè)網(wǎng)站的介紹，不太清楚網(wǎng)站構(gòu)架的訪客可以先到這里。6.給我留言：

這是每位訪客針對(duì)我的網(wǎng)站情況給我留言，這些留言會(huì)直接保存到數(shù)據(jù)庫(kù)里面，并且能夠輕松的讀取。7.發(fā)送郵件：

各位訪客可以通過(guò)outlook向版主或者其他人發(fā)送電子郵件。8.鏈接百度：

如果訪客想在互聯(lián)網(wǎng)上查找東西，可以直接點(diǎn)擊這里。9.女生花園：

收集了一些女生喜歡的東西，如果你是女生，可以進(jìn)來(lái)看看。

2.5二級(jí)頁(yè)面的設(shè)計(jì)

我的網(wǎng)站主頁(yè)內(nèi)容簡(jiǎn)單所以主要內(nèi)容再二級(jí)頁(yè)面里要有詳細(xì)的說(shuō)明，具體說(shuō)明如下：

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

本模塊是個(gè)人簡(jiǎn)介部分，每個(gè)個(gè)人網(wǎng)站都會(huì)有作者介紹。在這個(gè)模塊訪客會(huì)了解到作者的一些基本信息.2.5.2文學(xué)欣賞

這個(gè)版塊主要介紹我自己喜歡的相關(guān)文學(xué)作品。此版塊的界面如圖所示：

圖3.6 文學(xué)欣賞界面

2.5.3快樂(lè)音樂(lè)

進(jìn)入此版塊，界面如圖所示：

通過(guò)在數(shù)據(jù)庫(kù)中存放音樂(lè)路徑，達(dá)到在網(wǎng)頁(yè)上播放的效果。在音樂(lè)的首頁(yè)上放置了歌曲的名字，網(wǎng)友無(wú)需登錄，即可收聽自己喜歡的歌曲。

音樂(lè)界面

2.5.4我的相冊(cè)版塊

個(gè)人網(wǎng)站中又一亮點(diǎn)就是個(gè)人相冊(cè)的設(shè)置，在我的相冊(cè)里，放置了我自己的照片、班級(jí)照片和校園照片。

相冊(cè)里面的這三個(gè)版塊具有相同的版面設(shè)計(jì)，如下圖所示：

相冊(cè)界面

2.5.5網(wǎng)站說(shuō)明版塊

此版塊是我根據(jù)自己的網(wǎng)站結(jié)構(gòu)對(duì)整個(gè)網(wǎng)站以及每個(gè)版塊所做的網(wǎng)站結(jié)構(gòu)和功能的說(shuō)明，以及網(wǎng)站和作者版權(quán)說(shuō)明。如下圖所示：

網(wǎng)站說(shuō)明界面

如果網(wǎng)友不清楚網(wǎng)站的構(gòu)架，可以查看此版塊。2.5.6給我留言版塊

留言板是目前最為流行的網(wǎng)絡(luò)應(yīng)用之一，使用留言板，可以為留言者提供發(fā)言的機(jī)會(huì)，讓他們能夠及時(shí)、準(zhǔn)確地交換自己的觀點(diǎn)。

2.5.7留言板主界面

完整的留言板具有發(fā)表留言和察看別人留言的功能，如圖所示的留言板主界面index1.ASP，可由此進(jìn)入留言界面和察看留言界面。

留言主界面

在主界面中存有全部留言的作者和主題，點(diǎn)擊你想察看的主題就會(huì)進(jìn)入察看留言界面，點(diǎn)擊 “發(fā)表帖子”進(jìn)入留言界面。

3．網(wǎng)站的維護(hù)方案

3.1域名的申請(qǐng)

域名（Domain Name），是由一串用點(diǎn)分隔的名字組成的,Internet上提供用戶訪問(wèn)某網(wǎng)站或網(wǎng)頁(yè)的路徑，用于在數(shù)據(jù)傳輸時(shí)標(biāo)識(shí)計(jì)算機(jī)的電子方位（有時(shí)也指地理位置）。

域名申請(qǐng)的含義

“域名申請(qǐng)”：為保證每個(gè)網(wǎng)站的域名或訪問(wèn)地址是獨(dú)一無(wú)二的，需要向統(tǒng)一管理域名的機(jī)構(gòu)或組織注冊(cè)或備檔的一種行為。也就是說(shuō)，為了保證網(wǎng)絡(luò)安全和有序性，網(wǎng)站建立后為其綁定一個(gè)全球獨(dú)一無(wú)二的域名或訪問(wèn)地址，必須向全球統(tǒng)一管理域名的機(jī)構(gòu)或組織去注冊(cè)或者備檔方可使用的一種行為。由于域名是網(wǎng)站必不可少的“門牌號(hào)”，域名可用于：網(wǎng)站地址訪問(wèn)、電子郵箱、品牌保護(hù)等用途，所以很多企業(yè)或個(gè)人均會(huì)進(jìn)行域名申請(qǐng)。

3.2空間或者主機(jī)的租用

有了自己的域名這個(gè)門牌號(hào)后，就需要一個(gè)空間來(lái)存放自己的網(wǎng)站，也就是虛擬主機(jī)。一般虛擬主機(jī)提供商都向用戶提供100MB、500MB、3GB等虛擬主機(jī)空間。我的個(gè)人網(wǎng)站選擇100-300MB的虛擬主機(jī)空間。購(gòu)買虛擬主機(jī)主要考慮幾個(gè)方面：售后服務(wù)、穩(wěn)定性、訪問(wèn)速度等。首先我選擇在萬(wàn)網(wǎng)上注冊(cè)一個(gè)域名然后申請(qǐng)租用空間建立個(gè)人網(wǎng)站。

3.3網(wǎng)站鏈接穩(wěn)定性測(cè)試

超級(jí)鏈接對(duì)于網(wǎng)站用戶而言意味著能不能流暢的使用整個(gè)網(wǎng)站提供的服務(wù)，因而鏈接將作為一個(gè)獨(dú)立的項(xiàng)目進(jìn)行測(cè)試。網(wǎng)站能夠正確運(yùn)行首先要保證鏈接能夠連貫運(yùn)行。

網(wǎng)站的運(yùn)行中整個(gè)系統(tǒng)是否運(yùn)行正常，我主要采用將測(cè)試網(wǎng)站長(zhǎng)時(shí)間運(yùn)轉(zhuǎn)進(jìn)行測(cè)試，派生出執(zhí)行程序所有功能需求的輸入條件，從而導(dǎo)出測(cè)試用例，進(jìn)行測(cè)試，網(wǎng)站中的每個(gè)版塊的每個(gè)頁(yè)面都出現(xiàn)了很多的鏈接，所以每個(gè)版塊要先進(jìn)行單獨(dú)測(cè)試，單獨(dú)測(cè)試完成后，根據(jù)個(gè)版塊之間的連接結(jié)構(gòu)再進(jìn)行總體測(cè)試，從而達(dá)到網(wǎng)站的整體的運(yùn)營(yíng)能夠順利地進(jìn)行。在測(cè)試這個(gè)環(huán)節(jié)時(shí)，沒(méi)有特定的測(cè)試方法，就要做到細(xì)心，做到網(wǎng)站的順利運(yùn)行。

總結(jié)：

通過(guò)這次個(gè)人網(wǎng)站設(shè)計(jì)的制作，我學(xué)會(huì)了很多東西，也了解了很多關(guān)于個(gè)人網(wǎng)站的資料。不知不覺網(wǎng)頁(yè)設(shè)計(jì)的課程將要結(jié)束了，這門課程所包含內(nèi)容的豐富是讓我從沒(méi)有想到的。在整個(gè)的學(xué)習(xí)過(guò)程中，我學(xué)習(xí)了Dreamwave、Firework、Html語(yǔ)言、網(wǎng)站建設(shè)的基本思想等重要內(nèi)容。到現(xiàn)在為止，我還是很慶幸能夠?qū)W到這么多的內(nèi)容。

雖然整個(gè)網(wǎng)頁(yè)的結(jié)構(gòu)還有很多不足，還有一些板塊沒(méi)有開通，但是我的確能夠感到在我們制作過(guò)程中技能的提高。整個(gè)網(wǎng)站的不足我想是沒(méi)有使用到一些動(dòng)態(tài)網(wǎng)頁(yè)的知識(shí)，使得日后網(wǎng)站的維護(hù)較為繁雜。希望以后可以自學(xué)動(dòng)態(tài)網(wǎng)站的課程，從而彌補(bǔ)自己在動(dòng)態(tài)網(wǎng)絡(luò)語(yǔ)言方面的不足。這樣以后可以利用業(yè)余的時(shí)間為自己或者公司，根據(jù)自己的愛好建立一個(gè)個(gè)人網(wǎng)站。

[參考文獻(xiàn)] [1] 袁曉紅.《網(wǎng)頁(yè)設(shè)計(jì)與制作》[M].高等教育出版社 2006 385頁(yè)~389頁(yè) [2] 甘登岱.《我也能掌握Flash編程》[M].航空工業(yè)出版社 2000 [3] 趙更生.《Flash動(dòng)畫制作培訓(xùn)實(shí)錄》[M].人民郵電出版社 2004 [4] 鮑嘉.盧堅(jiān).陳丁法《Dreamweaver CS5網(wǎng)頁(yè)設(shè)計(jì)從入門到精髓》[M].中國(guó)電力出版社2010 [5] 張成龍.《網(wǎng)頁(yè)制作一點(diǎn)通》.延邊人民出版社

[6] 劉瑞新，《ASP動(dòng)態(tài)網(wǎng)站開發(fā)、畢業(yè)設(shè)計(jì)指導(dǎo)及實(shí)例》[M].機(jī)械工業(yè)出版社 2000 [7] 石曉燕、蘇萍《網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)》[M].清華大學(xué)、交通出版社 20 04 [8] 王玉芬.《網(wǎng)站規(guī)劃與設(shè)計(jì)》[M].西北工業(yè)出版社 2003 [9] 謝希仁.計(jì)算機(jī)網(wǎng)絡(luò)(第5版)[M].北京：電子工業(yè)出版社,2008

第四篇：個(gè)人網(wǎng)站設(shè)計(jì)及實(shí)現(xiàn)畢業(yè)設(shè)計(jì)論文

個(gè)人網(wǎng)站設(shè)計(jì)及實(shí)現(xiàn)

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

互聯(lián)網(wǎng)是社會(huì)發(fā)展的必然趨勢(shì)，很多人已經(jīng)意識(shí)到網(wǎng)絡(luò)的強(qiáng)大生命力和它在未來(lái)將處于的重要地位。他們鉆研并且努力進(jìn)入到這一個(gè)新的空間，新的領(lǐng)域。以個(gè)人為中心，淡化了傳統(tǒng)中心地位，使得我們的世界向多元化加速發(fā)展，人人都有話語(yǔ)權(quán)，人人都是中心。

互聯(lián)網(wǎng)是一個(gè)互動(dòng)性極強(qiáng)的平臺(tái)，它自由、寬容、平等、共享，并使來(lái)自民間的聲音參與到了構(gòu)建主流話語(yǔ)的行動(dòng)中來(lái)。計(jì)算機(jī)技術(shù)的發(fā)展，特別是網(wǎng)絡(luò)技術(shù)的飛速發(fā)展，給文檔的保存和管理提供極大的方便[1]。本論文中，將軟件工程的基本原理和方法應(yīng)用到整個(gè)網(wǎng)站系統(tǒng)，并對(duì)其進(jìn)行需求分析，提出了解決問(wèn)題的具體方法。在具體制作中，用ASP技術(shù)來(lái)實(shí)現(xiàn)B/S系統(tǒng)，ASP技術(shù)與數(shù)據(jù)庫(kù)技術(shù)結(jié)合，用戶在瀏覽器端可以隨意查詢自己需要的標(biāo)本，這樣提高了網(wǎng)頁(yè)的互動(dòng)性，使整個(gè)系統(tǒng)能更好的為用戶服務(wù)。

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 課題研究現(xiàn)狀分析

伴隨著社會(huì)的發(fā)展和科學(xué)的進(jìn)步，上網(wǎng)成為越來(lái)越多人們的選擇。隨著互聯(lián)網(wǎng)的飛速發(fā)展，有關(guān)網(wǎng)絡(luò)的技術(shù)也層出不窮。如今互聯(lián)網(wǎng)上的個(gè)人網(wǎng)站如雨后春筍般蓬勃發(fā)展，絢麗多彩的主頁(yè)比比皆是。每個(gè)人都有發(fā)揮個(gè)人才能，揮灑自己個(gè)性的網(wǎng)上伊甸園。在hao123神話以后，網(wǎng)站大全類網(wǎng)站又再一次達(dá)到頂峰。然而這個(gè)模式拷貝成功的網(wǎng)站卻寥寥無(wú)幾。而對(duì)于技術(shù)薄弱的個(gè)人網(wǎng)站來(lái)說(shuō)，似乎網(wǎng)址類網(wǎng)站應(yīng)該是一個(gè)很好的切入點(diǎn)。但是由于搜索的異軍突起，網(wǎng)址類網(wǎng)站似乎變得可有可無(wú)。

第 1 頁(yè)（共 9 頁(yè)）

[2]

網(wǎng)頁(yè)實(shí)際是一個(gè)文件，他存放在世界某個(gè)角落的某一臺(tái)計(jì)算機(jī)中而這臺(tái)計(jì)算機(jī)必須是與互聯(lián)網(wǎng)相連的。網(wǎng)頁(yè)經(jīng)由網(wǎng)址（URL）來(lái)識(shí)別與存取，當(dāng)我們?cè)跒g覽器輸入網(wǎng)址后，經(jīng)過(guò)一段復(fù)雜而又快速的程序，網(wǎng)頁(yè)文件會(huì)被傳送到你的計(jì)算機(jī)，然后再通過(guò)瀏覽器解釋網(wǎng)頁(yè)的內(nèi)容，再展示到你的眼前。文字與圖片是構(gòu)成一個(gè)網(wǎng)頁(yè)的兩個(gè)最基本的元素。可以簡(jiǎn)單的理解為：文字，就是網(wǎng)頁(yè)的內(nèi)容，圖片，就是網(wǎng)頁(yè)的美觀。除此之外，網(wǎng)頁(yè)的元素還包括動(dòng)畫、音樂(lè)、程序等等。網(wǎng)頁(yè)實(shí)際上只是一個(gè)純文本文件，它通過(guò)各式各樣的標(biāo)記對(duì)頁(yè)面上的文字、圖片、表格、聲音等元素進(jìn)行描述（例如字體、顏色、大?。鵀g纜器則對(duì)這些標(biāo)記進(jìn)行解釋并生成頁(yè)面。1.2 個(gè)人網(wǎng)站的研究工作 1．理論研究基礎(chǔ)

個(gè)人網(wǎng)站是由個(gè)別提供的一套集博客、文章、相冊(cè)、日程、通訊錄、鏈接、調(diào)查、留言板等諸多功能于一體的網(wǎng)絡(luò)平臺(tái)。個(gè)人網(wǎng)站的自由、開放精神，并使之更容易操作，更具個(gè)性需求，而不需要高深的技術(shù)。它可以幫助個(gè)人進(jìn)行全面的信息化，以多種形式達(dá)到對(duì)信息獲取、組織、思考、表達(dá)、共享和交流的目的。以個(gè)人為中心，建立一個(gè)完全屬于自己的可定制的個(gè)性化網(wǎng)絡(luò)平臺(tái)。來(lái)自文章的評(píng)論，留言板都可以很好的進(jìn)行交流，傾聽別人的聲音。2．技術(shù)層面的支持

隨著互聯(lián)網(wǎng)的進(jìn)一步發(fā)展與成熟，網(wǎng)絡(luò)的帶寬進(jìn)一步加闊，網(wǎng)絡(luò)應(yīng)用也越來(lái)越廣泛。網(wǎng)頁(yè)制作更是日新月異，層出不窮。涌現(xiàn)了很多琳瑯滿目的網(wǎng)站，使得整個(gè)互聯(lián)網(wǎng)多姿多彩。

在進(jìn)行動(dòng)態(tài)網(wǎng)頁(yè)制作的時(shí)候，通常都是使用ASP來(lái)完成。由于ASP使用方便，操作簡(jiǎn)單，很多網(wǎng)頁(yè)設(shè)計(jì)者一直使用ASP。ASP集成在HTML和腳本語(yǔ)言中，其工作界面簡(jiǎn)單，因此，ASP相對(duì)于其他網(wǎng)頁(yè)制作軟件來(lái)說(shuō)，易學(xué)易用，是網(wǎng)頁(yè)制作初學(xué)者的入門軟件。同時(shí)配合數(shù)據(jù)庫(kù)的操作，使個(gè)人網(wǎng)站具有更好的網(wǎng)絡(luò)平臺(tái)和交互性。1.3 已經(jīng)取得的研究成果

中國(guó)互聯(lián)網(wǎng)在近幾年發(fā)展迅猛。一方面，產(chǎn)生了一批依賴技術(shù)領(lǐng)先的互聯(lián)網(wǎng)公司，取得了成功；另一方面，互聯(lián)網(wǎng)技術(shù)逐漸走向普及，使得行業(yè)進(jìn)入門檻正在降低[4]。目前中國(guó)網(wǎng)站總數(shù)已經(jīng)近百萬(wàn)。在這里面出現(xiàn)了大量的個(gè)人網(wǎng)站。并且個(gè)人網(wǎng)站存在著巨

第 2 頁(yè)（共 9 頁(yè)）

[3]

大的商業(yè)價(jià)值。如果能以強(qiáng)大的號(hào)召力，把互補(bǔ)的個(gè)人網(wǎng)站聯(lián)合起來(lái)，不知道可以成立多少個(gè)門戶網(wǎng)站。我們有理由相信，個(gè)人網(wǎng)站還極具潛力。1.4選題的目的及意義

隨著Internet的迅速普及，我們已經(jīng)不再滿足于僅僅瀏覽網(wǎng)頁(yè)，而是希望更深入地參預(yù)到網(wǎng)絡(luò)中去，Internet的開放性使個(gè)人建立自己的網(wǎng)站成為可能，擁有自己的網(wǎng)站也越來(lái)越成為一種時(shí)尚，同時(shí)創(chuàng)建一個(gè)能充分體現(xiàn)自我風(fēng)格和特色的個(gè)人網(wǎng)站已經(jīng)成為互聯(lián)網(wǎng)用戶的新追求。

我們更需要交流，相信交流能夠促進(jìn)我們不斷的進(jìn)步，并融合別人的長(zhǎng)處；讓我們多一些渠道傾聽來(lái)自不同立場(chǎng)的聲音；設(shè)想我們的網(wǎng)絡(luò)，當(dāng)每個(gè)人都擁有個(gè)人網(wǎng)頁(yè)，不管是否在線，我們都可以跨越時(shí)間、空間進(jìn)行交流，因?yàn)檫@個(gè)網(wǎng)頁(yè)中擁有我所有的一切，生活，見解，知識(shí)，思想；理想的狀態(tài)是個(gè)人門戶就是每個(gè)人的影子，他為每個(gè)人打點(diǎn)網(wǎng)絡(luò)上的一切，很多志同道合的朋友會(huì)在這里和你相識(shí)相知。1.5 課題研究的主要內(nèi)容

互聯(lián)網(wǎng)是社會(huì)發(fā)展的必然趨勢(shì)，很多人已經(jīng)意識(shí)到網(wǎng)絡(luò)的強(qiáng)大生命力和它在未來(lái)將處于的重要地位。他們鉆研并且努力進(jìn)入到這一個(gè)新的空間，新的領(lǐng)域。其中包括你和我。

在我們的工作、日常生活中，能夠擁有一個(gè)自己的網(wǎng)站，一個(gè)已經(jīng)成為不少人的希望和驕傲。就這個(gè)課題的研究，因?yàn)槭莻€(gè)人網(wǎng)站，所以我只是選擇了自己擅長(zhǎng)和喜愛的內(nèi)容，在突出自己的風(fēng)格和特點(diǎn)的同時(shí)，還應(yīng)用了現(xiàn)在流行的網(wǎng)站設(shè)計(jì)技術(shù)和數(shù)據(jù)庫(kù)技術(shù)。[5]

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

“個(gè)人網(wǎng)站要發(fā)展，要么是從我的需求出發(fā)，要么是從我周圍人的需求出發(fā)?！眹?guó)內(nèi)著名個(gè)人網(wǎng)站站長(zhǎng)、手機(jī)之家站長(zhǎng)高春輝說(shuō)。網(wǎng)頁(yè)設(shè)計(jì)是一門新興的設(shè)計(jì)類和網(wǎng)絡(luò)的交叉學(xué)科，近幾年隨著網(wǎng)絡(luò)的發(fā)展而逐漸收到人們的重視，它本身以網(wǎng)絡(luò)為載體,把各種信息以最快捷、方便的方式傳達(dá)給大眾。一個(gè)網(wǎng)站項(xiàng)目的確立是建立在各種各樣的需求上面的，這是個(gè)人網(wǎng)站，所以這種需求往往來(lái)自于個(gè)人的實(shí)際需求，其中每個(gè)人的實(shí)

第 3 頁(yè)（共 9 頁(yè)）

際需求占了絕大部分[6]。因此如何更好地的了解、分析、明確需求，并且能夠準(zhǔn)確、清晰以文檔的形式表達(dá)出來(lái)，保證開發(fā)過(guò)程按照個(gè)人需求為目的正確項(xiàng)目開發(fā)方向進(jìn)行。2.1設(shè)計(jì)的愿望

在Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟(jì)、生活等各個(gè)方面發(fā)揮著重要的作用。因此網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯而易見，它已成為個(gè)人、政府、企事業(yè)單位信息化建設(shè)中的重要組成部分，從而倍受人們的重視[7]。

越來(lái)越多的人希望能真正參預(yù)到互聯(lián)網(wǎng)上，這就出現(xiàn)了越來(lái)越多的個(gè)人網(wǎng)站的設(shè)計(jì)以及推廣的工作和任務(wù)。

就我個(gè)人而言，之所以在畢業(yè)設(shè)計(jì)的時(shí)候選擇這個(gè)課題是因?yàn)槲乙蚕霌碛凶约旱膫€(gè)人網(wǎng)站，在互聯(lián)網(wǎng)上擁有自己的一席之地，從而真正的參與到網(wǎng)絡(luò)中去，做網(wǎng)絡(luò)新時(shí)代的主人，同時(shí)也希望自己喜歡和收藏的一些東西能夠和網(wǎng)絡(luò)一起分享，和互聯(lián)網(wǎng)上的你一起分享。

我所制作的個(gè)人網(wǎng)站大體可分為以下幾個(gè)功能： 1．搜索引擎：

根據(jù)瀏覽者的要求，使用主頁(yè)上的搜索引擎鏈接到百度，在整個(gè)Internet上進(jìn)行搜索，完成信息的優(yōu)化與提取。2．論壇：

主要功能是網(wǎng)友和網(wǎng)站之間的交流平臺(tái)，也是網(wǎng)友給版主提出意見的主要渠道。在論壇中用戶可以發(fā)表意見，這些意見可以讓所有人看到，也可以只讓版主看到，版主和其他人可以針對(duì)留言的內(nèi)容進(jìn)行回復(fù)，只留給版主的留言只有版主能夠回復(fù)，并且版主可以登錄后臺(tái)對(duì)留言進(jìn)行管理，是否發(fā)表或刪除。3．發(fā)送電子郵件：

網(wǎng)友可以通過(guò)“聯(lián)系我”利用outlook 向版主或其他人發(fā)送電子郵件。4．精品收藏：

在其中展示我喜愛的東西，包括電影、歌曲和一些優(yōu)美的文章。奇文共欣賞，疑義相與析。我只想起到拋磚引玉的作用，讓大家從中認(rèn)識(shí)我和了解我，讓一些美好的東西我們大家共同來(lái)欣賞。但我增加了管理權(quán)限，我以管理員的身份可以對(duì)加入的新內(nèi)容進(jìn)

第 4 頁(yè)（共 9 頁(yè)）

行管理，即允許加入和對(duì)其進(jìn)行刪除。5．留言板：

是一個(gè)我與大家談心交流的地方，在留言板中，我們可以暢所欲言，和大家進(jìn)行交流。就我們感興趣的話題展開討論。和大家進(jìn)行溝通。

2.2設(shè)計(jì)介紹

這次我所設(shè)計(jì)的課題正是互聯(lián)網(wǎng)與個(gè)人生活之間的緊密聯(lián)系的體現(xiàn)，個(gè)人的宣傳網(wǎng)站，包括個(gè)人簡(jiǎn)介、論壇、個(gè)人照片、個(gè)人專題等。在突出自己的風(fēng)格和特點(diǎn)的同時(shí)，還應(yīng)用了現(xiàn)在流行的網(wǎng)站設(shè)計(jì)技術(shù)和數(shù)據(jù)庫(kù)技術(shù)。

2.3設(shè)計(jì)的背景 2.3.1用戶特征

用戶人群：具有基本的計(jì)算機(jī)操作能力，熟知網(wǎng)絡(luò)并能夠在Internet遨游。2.3.2運(yùn)行環(huán)境

軟件平臺(tái)需要服務(wù)器上的操作系統(tǒng)為microsoft windows xp server。因?yàn)锳SP的開發(fā)平臺(tái)首選是Windows NT Server(Windows 2000 Server)上的IIS，然后是Windows NT Workstation(Windows 2000 Profession)或Windows95/98的Personal Web，同樣現(xiàn)在的瀏覽器是微軟一家獨(dú)大，使用的瀏覽器是微軟的explorer，網(wǎng)站的數(shù)據(jù)庫(kù)使用了同樣是microsoft的office access數(shù)據(jù)庫(kù)，因?yàn)橐粋€(gè)數(shù)據(jù)不是很龐大的個(gè)人網(wǎng)站沒(méi)有必要使用oracle等大型數(shù)據(jù)庫(kù)系統(tǒng)，同時(shí)access數(shù)據(jù)庫(kù)結(jié)構(gòu)比較的簡(jiǎn)單，使用起來(lái)比較簡(jiǎn)單好用。

2.4 達(dá)到的預(yù)期成果

在明確了我的個(gè)人網(wǎng)站的風(fēng)格和定位后，就是網(wǎng)站的材料組織以及網(wǎng)站的頁(yè)面設(shè)計(jì)和數(shù)據(jù)庫(kù)設(shè)計(jì)。網(wǎng)站最后完成發(fā)不到網(wǎng)上后，能夠充分吸引瀏覽者的目光，利用搜索引擎，瀏覽者可以在網(wǎng)站內(nèi)搜索自己喜歡的資料，并且可以在留言板和大家交流，在后臺(tái)管理頁(yè)面中，通過(guò)身份認(rèn)證，管理員可以對(duì)網(wǎng)站信息進(jìn)行管理。站內(nèi)的其它頁(yè)面均是我自己的精心收藏，與大家一起分享。

第 5 頁(yè)（共 9 頁(yè)）

2.5使用工具的簡(jiǎn)要介紹 2.5.1 IIS的簡(jiǎn)要介紹

IIS是Internet Information Server的縮寫，它是微軟公司主推的Web服務(wù)器，最新的版本是Windows2000里面包含的IIS 5.0，IIS與WindowNT Server完全集成在一起，因而用戶能夠利用Windows NT Server和NTFS（NT File System，NT的文件系統(tǒng)）內(nèi)置的安全特性，建立強(qiáng)大、靈活而安全的Internet和Intranet站點(diǎn)。IIS的一個(gè)重要特性是支持ASP[9]。IIS 3.0版本以后引入了ASP，可以很容易的張貼動(dòng)態(tài)內(nèi)容和開發(fā)基于Web的應(yīng)用程序。2.5.2 數(shù)據(jù)庫(kù)Access的簡(jiǎn)要介紹

Access數(shù)據(jù)庫(kù)是集成在Microsoft公司開發(fā)的產(chǎn)品更新?lián)Q代Office系統(tǒng)中的集成軟件[10]。

Access是一個(gè)數(shù)據(jù)庫(kù)管理系統(tǒng)，它之所以被集成到Office中而不是Visual Studio中，是因?yàn)樗c其它的數(shù)據(jù)庫(kù)管理系統(tǒng)（如Visual FoxPro）相比更加簡(jiǎn)單易學(xué)，一個(gè)普通的計(jì)算機(jī)用戶即可掌握并使用它。而且最重要的一點(diǎn)是，Access的功能足夠強(qiáng)大，足以應(yīng)付一般的數(shù)據(jù)管理及處理需要。

ODBC（Open Database Connectivity開放式數(shù)據(jù)庫(kù)互聯(lián)）是微軟推出的一種工業(yè)標(biāo)準(zhǔn)，一種開放的獨(dú)立于廠商的API應(yīng)用程序接口，可以跨平臺(tái)訪問(wèn)各種個(gè)人計(jì)算機(jī)、小型機(jī)以及主機(jī)系統(tǒng)[11]。ODBC作為一個(gè)工業(yè)標(biāo)準(zhǔn)，絕大多數(shù)數(shù)據(jù)庫(kù)廠商、大多數(shù)應(yīng)用軟件和工具軟件廠商都為自己的產(chǎn)品提供了ODBC接口或提供了ODBC支持，這其中就包括常用的SQL SERVER、ORACAL、INFORMIX等，當(dāng)然也包括了Access。2.5.3 對(duì)ASP的簡(jiǎn)要介紹

Active Server Pages（ASP）是服務(wù)器端腳本編寫環(huán)境，使用它可以創(chuàng)建和運(yùn)行動(dòng)態(tài)、交互的 Web 服務(wù)器應(yīng)用程序。使用 ASP 可以組合 HTML頁(yè)、VBScript腳本命令和JavaScript腳本命令等，以創(chuàng)建交互的 Web 頁(yè)和基于 Web 的功能強(qiáng)大的應(yīng)用程序[14]。

由于腳本程序是在服務(wù)器上而不是在客戶端運(yùn)行，傳送到瀏覽器上的 Web 頁(yè)是在 Web 服務(wù)器上生成的。所以不必?fù)?dān)心瀏覽器能否處理腳本：Web 服務(wù)器已經(jīng)完成了所有

第 6 頁(yè)（共 9 頁(yè)）

腳本的處理，并將標(biāo)準(zhǔn)的 HTML 頁(yè)面?zhèn)鬏數(shù)綖g覽器。由于只有腳本的結(jié)果返回到瀏覽器，所以服務(wù)器端腳本不易被別人復(fù)制。用戶看不到創(chuàng)建他們正在瀏覽的頁(yè)的腳本命令。2.6 任務(wù)概述

隨著計(jì)算機(jī)的普及和網(wǎng)絡(luò)技術(shù)的迅速發(fā)展，人們也越來(lái)越依賴于計(jì)算機(jī)和網(wǎng)絡(luò)。因此，網(wǎng)絡(luò)安全應(yīng)該也必須引起注意。網(wǎng)絡(luò)安全是一門涉及計(jì)算機(jī)、網(wǎng)絡(luò)、通訊、密碼、信息安全、應(yīng)用數(shù)學(xué)、數(shù)論、信息論等多種學(xué)科的綜合性學(xué)科，涉及面極廣，而且不斷更新和發(fā)展。國(guó)家對(duì)信息產(chǎn)業(yè)的扶持，使國(guó)內(nèi)的網(wǎng)絡(luò)狀況逐漸好轉(zhuǎn)，更多的服務(wù)器的開通，更快的寬帶網(wǎng)得逐漸普及，各種各樣的攻擊行為在網(wǎng)上也越來(lái)越頻繁化和簡(jiǎn)單化。

微軟在推出 ASP 時(shí)提到的 ASP 的一個(gè)好處是：Active Server Pages 的源程序，不會(huì)被傳到客戶瀏覽器，因而可以避免所寫的源程序被他人剽竊，也提高了程序的安全性。然而，由于 NT、IIS 以及 ASP 系統(tǒng)本身存在的一些漏洞，卻可能使 ASP 源碼暴露無(wú)遺，解決方法就是及時(shí)更新補(bǔ)丁。

該個(gè)人網(wǎng)站系統(tǒng)是基于Internet/Intranet 及Web技術(shù)，建立以Browser/Server 為結(jié)構(gòu)模式、以數(shù)據(jù)庫(kù)為后臺(tái)核心應(yīng)用、以服務(wù)為目的信息平臺(tái)，對(duì)資源進(jìn)行科學(xué)的加工整序和管理維護(hù)，為用戶提供個(gè)人信息保障和直接參預(yù)到互聯(lián)網(wǎng)上而設(shè)計(jì)的系統(tǒng)。包括界面設(shè)計(jì),代碼設(shè)計(jì),這一階段偏重于網(wǎng)頁(yè)制作工具和技巧的應(yīng)用, 編寫總系統(tǒng)總體功能分析及架構(gòu)圖。

2.6.1 個(gè)人簡(jiǎn)介版塊

本模塊是個(gè)人簡(jiǎn)介部分，每個(gè)個(gè)人網(wǎng)站都會(huì)有作者介紹。在這個(gè)模塊訪客會(huì)了解到作者的一些基本信息,此版塊采用了靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)，最大的亮點(diǎn)就是利用了一個(gè)圖片特效產(chǎn)生的效果，圖片以溶解的方式漸漸出現(xiàn).2.6.2 我的論壇版塊

在個(gè)人網(wǎng)站建設(shè)中，BBS論壇也是其中最主要的一個(gè)子系統(tǒng)。BBS論壇的主要功能就是討論問(wèn)題，論壇采用了B/S模式，提供了發(fā)表評(píng)論，回復(fù)評(píng)論和管理員對(duì)評(píng)論進(jìn)行管理等功能。

第 7 頁(yè)（共 9 頁(yè)）

2.6.3 個(gè)人專題版塊

在這個(gè)版塊我設(shè)計(jì)和兩部分內(nèi)容包括文學(xué)欣賞和快樂(lè)音樂(lè)。文學(xué)欣賞里收集了一些精美文章，快樂(lè)音樂(lè)里收集了一些好聽的mp3歌曲。2.6.4 我的相冊(cè)版塊

個(gè)人網(wǎng)站中又一亮點(diǎn)就是個(gè)人相冊(cè)的設(shè)置，在我的相冊(cè)里，放置了我自己的照片、班級(jí)照片和校園照片。2.6.5 網(wǎng)站說(shuō)明版塊

此版塊是我根據(jù)自己的網(wǎng)站結(jié)構(gòu)對(duì)整個(gè)網(wǎng)站以及每個(gè)版塊所做的網(wǎng)站結(jié)構(gòu)和功能的說(shuō)明，以及網(wǎng)站和作者版權(quán)說(shuō)明。2.6.6 給我留言版塊

留言板是目前最為流行的網(wǎng)絡(luò)應(yīng)用之一，使用留言板，可以為留言者提供發(fā)言的機(jī)會(huì)，讓他們能夠及時(shí)、準(zhǔn)確地交換自己的觀點(diǎn)。2.6.7 鏈接百度版塊

在網(wǎng)站的首頁(yè)上我設(shè)置了鏈接百度的搜索引擎，如果訪客有內(nèi)容要查詢，可以直接在此引擎內(nèi)搜索，可直接鏈接到百度查找內(nèi)容。

第三章 總結(jié)

在本次設(shè)計(jì)的全過(guò)程中，我對(duì)四年所學(xué)的知識(shí)有了一個(gè)比較系統(tǒng)的認(rèn)識(shí)和理解。涉及了各方面的知識(shí)，大大擴(kuò)展了我的知識(shí)面，同時(shí)是我學(xué)會(huì)了如何使用所學(xué)的知識(shí)去解決一些實(shí)際的問(wèn)題。

在設(shè)計(jì)中我深知自己掌握的知識(shí)還遠(yuǎn)遠(yuǎn)不夠，掌握的一些理論知識(shí)應(yīng)用到實(shí)踐中去，總會(huì)出現(xiàn)這樣或那樣的問(wèn)題，不是理論沒(méi)有掌握好，而是光知道書本上的知識(shí)是遠(yuǎn)遠(yuǎn)不夠的，一定要把理論知識(shí)和實(shí)踐結(jié)合起來(lái)。把學(xué)到的知識(shí)應(yīng)用到時(shí)間中去，多做多

第 8 頁(yè)（共 9 頁(yè)）

練，才可以把理論的精華發(fā)揮出來(lái)。知識(shí)不是知道，了解就好，一定要去應(yīng)用它，發(fā)展它，讓它在現(xiàn)實(shí)生活中得到充分的應(yīng)用，從而解決一些問(wèn)題，這才是學(xué)習(xí)的根本目的。而且知識(shí)又不是單一的，它是互相聯(lián)系的，學(xué)科與學(xué)科之間都有著內(nèi)在的聯(lián)系。計(jì)算機(jī)是一門非常復(fù)雜且龐大的學(xué)科，一項(xiàng)課題往往需要多項(xiàng)技術(shù)才可以完成的。在設(shè)計(jì)階段，通過(guò)對(duì)課題的深入分析與研究，迫使我對(duì)技術(shù)有了一定的了解。在遇到問(wèn)題時(shí)，得到了指導(dǎo)老師與同學(xué)的悉心幫助，使我感受到集體的力量是無(wú)窮的。

通過(guò)這次設(shè)計(jì)，我學(xué)會(huì)了和別人配合工作，因?yàn)橐粋€(gè)人所學(xué)的知識(shí)不可能面面俱到的，只有通過(guò)合作，發(fā)揮自己的優(yōu)點(diǎn)，體現(xiàn)團(tuán)隊(duì)精神，才能使工作做得更為出色。通過(guò)這次設(shè)計(jì)，我學(xué)到了許多書本上學(xué)不到的知識(shí)，增強(qiáng)了自己的動(dòng)手能力。即將畢業(yè)我十分珍惜這次鍛煉的機(jī)會(huì)，我按部就班的完成了自己的設(shè)計(jì)任務(wù)，但由于自己的知識(shí)水平有限，仍然存在很多的不足之處，懇請(qǐng)老師多多指教！當(dāng)今的社會(huì)是競(jìng)爭(zhēng)的社會(huì)，而人才的競(jìng)爭(zhēng)則是競(jìng)爭(zhēng)的焦點(diǎn)，畢業(yè)設(shè)計(jì)對(duì)于我們即將離校的同學(xué)來(lái)說(shuō)，是離校前很好的一次鍛煉，使我們各方面的能力都有了很大的提高，為我們踏出校門，走上社會(huì)增強(qiáng)了能力與自信！

計(jì)算機(jī)技術(shù)的高速發(fā)展，使我深深地認(rèn)識(shí)到只有不斷的加強(qiáng)學(xué)習(xí)，才能在計(jì)算機(jī)技術(shù)方面不至于被淘汰，今后，我還要加強(qiáng)學(xué)習(xí)，努力使自己成為一位專業(yè)的計(jì)算機(jī)人員，為我自己所從事的工作服務(wù)。

第 9 頁(yè)（共 9 頁(yè)）

第五篇：個(gè)人網(wǎng)站設(shè)計(jì)及實(shí)現(xiàn)畢業(yè)設(shè)計(jì)論文

個(gè)人網(wǎng)站設(shè)計(jì)及實(shí)現(xiàn)

摘 要：

網(wǎng)絡(luò)發(fā)展到今天，建立網(wǎng)站已經(jīng)成為一個(gè)很普遍的問(wèn)題了。對(duì)于企業(yè)家來(lái)說(shuō)，建立好的網(wǎng)站可以搶占新世紀(jì)發(fā)展的戰(zhàn)略要點(diǎn)。建立新的企業(yè)形象，直接開拓國(guó)際市場(chǎng)。對(duì)于個(gè)人來(lái)說(shuō)，建設(shè)好的個(gè)人網(wǎng)站可以更加方便的收集信息，開展更加直接的網(wǎng)絡(luò)交流，使用自己構(gòu)造的平臺(tái)，可以為畢業(yè)后找工作做好充分的準(zhǔn)備。在我的個(gè)人網(wǎng)站制作過(guò)程中，主要是針對(duì)我網(wǎng)站設(shè)計(jì)的方向和目的、網(wǎng)站設(shè)計(jì)的整個(gè)流程出發(fā)，然后通過(guò)自己設(shè)計(jì)的這個(gè)個(gè)人網(wǎng)站作品來(lái)說(shuō)明并演示一個(gè)網(wǎng)站制作過(guò)程。這篇論文的主要內(nèi)容是個(gè)人網(wǎng)站的設(shè)計(jì)思想，整體規(guī)化及相關(guān)的基礎(chǔ)科知識(shí)。網(wǎng)站的規(guī)化又包括網(wǎng)頁(yè)的結(jié)構(gòu)、欄目的設(shè)置、網(wǎng)頁(yè)的風(fēng)格、顏色的搭配、版面的布局、文字圖片的運(yùn)用等。

關(guān)鍵詞：網(wǎng)站設(shè)計(jì)；網(wǎng)站規(guī)化；網(wǎng)站主題

隨著經(jīng)濟(jì)的發(fā)展，計(jì)算機(jī)以被應(yīng)用到社會(huì)生活的各個(gè)領(lǐng)域。這給人們的生活帶來(lái)很大的方便。如今，已成為人們?nèi)粘Ｉ钪胁豢苫蛉鄙俚牟糠帧Ｈ藗兛梢宰悴怀鰬羯暇W(wǎng)購(gòu)物，隨時(shí)查詢股票信息，在自己的博客上盡情發(fā)表言論??以上這些都離不開最基本的網(wǎng)頁(yè)設(shè)計(jì)和制作。

網(wǎng)站作為網(wǎng)絡(luò)信息主要的表現(xiàn)形式而且還是互聯(lián)網(wǎng)信息的主要承載者，在互聯(lián)網(wǎng)上表現(xiàn)出及其重要的地位，并發(fā)揮著及其重要的作用，無(wú)論是在國(guó)內(nèi)還是國(guó)外都得以迅速的發(fā)展和壯大，并被人們重視和關(guān)注。網(wǎng)站的迷人之處在于綜合使用文本、圖像、聲音、動(dòng)畫視頻信息和內(nèi)容，具有豐富的多媒體表現(xiàn)與互動(dòng)特點(diǎn)。毋庸置疑，網(wǎng)站已成為最吸引人的也是最有效的信息傳遞的手段和方式。隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，各類網(wǎng)站紛紛出現(xiàn)，個(gè)人網(wǎng)站也成為了一種時(shí)尚，越來(lái)越多的人希望擁有自己的網(wǎng)站，開辟網(wǎng)絡(luò)世界的一片天地，展示自己的才華和風(fēng)格。

個(gè)人網(wǎng)站是指?jìng)€(gè)人因某種興趣、擁有某種專業(yè)技術(shù)，提供某種服務(wù)或把自己的作品、商品展示銷售而制作的具有獨(dú)立空間域名的網(wǎng)站。所謂個(gè)人網(wǎng)站，就是指網(wǎng)站內(nèi)容是介紹自己的或是以自己的信息為中心的網(wǎng)站。

[3][2][1]

一 網(wǎng)站設(shè)計(jì)規(guī)化

1.1 什么是網(wǎng)站

網(wǎng)站是因特網(wǎng)上的一個(gè)信息集中點(diǎn)，可以通過(guò)域名進(jìn)行訪問(wèn)。網(wǎng)站要存儲(chǔ)在獨(dú)立服務(wù)器

第 1 頁(yè)（共 8 頁(yè)）

或者服務(wù)器的虛擬主機(jī)上才能接受訪問(wèn)。網(wǎng)站是有獨(dú)立域名、獨(dú)立存放空間的內(nèi)容集合，這些內(nèi)容可能是網(wǎng)頁(yè)，也可能是程序或其他文件，不一定要有很多網(wǎng)頁(yè)，只要有獨(dú)立域名和空間，哪怕只有一個(gè)頁(yè)面也叫網(wǎng)站。

網(wǎng)站就是在互聯(lián)網(wǎng)上的一塊固定的面向全世界發(fā)布消息的地方，它由域名和網(wǎng)站空間構(gòu)成。衡量一個(gè)網(wǎng)站的性能通常從網(wǎng)站空間大小、網(wǎng)站位置、網(wǎng)站連接速度、網(wǎng)站軟件配置、網(wǎng)站提供服務(wù)等幾方面考慮。

1.2 網(wǎng)站建設(shè)的目的

網(wǎng)站的建設(shè)不僅僅是制作主頁(yè)的問(wèn)題，還需要考慮網(wǎng)站的定位、目標(biāo)用戶、網(wǎng)站內(nèi)容、服務(wù)事項(xiàng)、空間方案、安全性、藝術(shù)設(shè)計(jì)等等。任何網(wǎng)站在建設(shè)之前都必須明確文向、用途和服務(wù)群體等一系列的問(wèn)題，寫出詳細(xì)的建站計(jì)劃，可以說(shuō)這是網(wǎng)站建設(shè)的根源和核心所在。這里我的個(gè)人網(wǎng)站主要是讓更多的人認(rèn)識(shí)到我，了解我。借助網(wǎng)絡(luò)的這個(gè)平臺(tái)來(lái)展示我自己，還有我希望能交到和我一樣懷著夢(mèng)想起航的朋友。

1.3 本站的明確目的

不同的網(wǎng)站目的要求通過(guò)不同的方式來(lái)實(shí)現(xiàn)。一個(gè)展示個(gè)人能力的網(wǎng)站與一個(gè)以花卉種植為主題的網(wǎng)站，以及一個(gè)大型門戶網(wǎng)站和一個(gè)小型企業(yè)網(wǎng)站，其出發(fā)點(diǎn)和建站目的都有所不同。在整個(gè)網(wǎng)站的建設(shè)規(guī)化方面的要求也是肯定不一樣的。因此在規(guī)化我的網(wǎng)站時(shí)，我選擇的是與我本人相關(guān)的內(nèi)容來(lái)作為主題的。

網(wǎng)站預(yù)計(jì)的用戶群體：對(duì)于網(wǎng)站的設(shè)計(jì)者和建設(shè)者來(lái)說(shuō)，在設(shè)計(jì)規(guī)化網(wǎng)站時(shí)必須要明確自己網(wǎng)站的瀏覽都，也就是確定自己的用戶群體。在已經(jīng)確定了建設(shè)目的的前提下，應(yīng)根據(jù)建站方向所會(huì)導(dǎo)致出現(xiàn)的不同用戶群體的需求來(lái)規(guī)化設(shè)計(jì)整個(gè)網(wǎng)站。我的這個(gè)網(wǎng)站就確定了以懷著夢(mèng)想奮斗的人為用戶群體。

1.4 軟件準(zhǔn)備

在網(wǎng)頁(yè)的設(shè)計(jì)過(guò)程中，因人而宜，每個(gè)人使用的軟件也許不同。Dreamweaver與Flash、Fireworks這3者被用戶稱為“網(wǎng)頁(yè)設(shè)計(jì)三劍客”。Dreamweaver的優(yōu)勢(shì)在于它不僅是優(yōu)秀的所見即所得的編輯軟件，同時(shí)也兼顧了HTML源代碼，可以讓用戶很方便地在兩種模式之間的切換。

Dreamweaver采用“所見即所得”的直觀設(shè)計(jì)模式，充分尊重設(shè)計(jì)人員的原始意識(shí)和想像力，它成功地將網(wǎng)頁(yè)設(shè)計(jì)功能中的技術(shù)實(shí)現(xiàn)部分和設(shè)計(jì)部分分開，還提供眾多的可視化設(shè)計(jì)工具、應(yīng)用開發(fā)環(huán)境以及代碼編輯支持。如利用鼠標(biāo)拖曳來(lái)添加表格、圖像等元素，在方檔中直接輸入文本，直接插入一些常用的特殊符號(hào)對(duì)象等。用戶在沒(méi)有輸入代碼的情況下完成了上述工作，Dreamweaver自動(dòng)將結(jié)果轉(zhuǎn)換為HTML源代碼。用戶也可以隨時(shí)查看方檔的HTML

第 2 頁(yè)（共 8 頁(yè)）

源代碼，在代碼視圖中進(jìn)行修改。

二 網(wǎng)站的總體設(shè)計(jì)

2.1 確定網(wǎng)站主題

做網(wǎng)站，首先必須要解決的就是網(wǎng)站內(nèi)容問(wèn)題，即確定網(wǎng)站的主題。如果自己在某些方面有興趣，或掌握的資料越多，也可以做一個(gè)自己感興趣的東西。你可以有自己的見解，做出自己的特色。對(duì)于內(nèi)容主題的選擇，要做到小而精，主題定位要小，內(nèi)容要精。不要去試圖制作一個(gè)包羅萬(wàn)象的站點(diǎn)，這往往會(huì)失去網(wǎng)站的特色，也會(huì)帶來(lái)高強(qiáng)度的勞動(dòng)，給網(wǎng)站的及時(shí)更新帶來(lái)困難。我的網(wǎng)站主題是以我個(gè)人相關(guān)的資料來(lái)制作的。

2.2 確定網(wǎng)站形象

網(wǎng)站形象的設(shè)計(jì)可以從網(wǎng)站標(biāo)志、網(wǎng)站色彩、網(wǎng)站字體網(wǎng)絡(luò)宣傳語(yǔ)等這些方面著手。網(wǎng)站色彩，網(wǎng)站給人的第一印象來(lái)自視覺沖擊，不同的色彩搭配產(chǎn)生不同的效果，并可能影響到訪問(wèn)者的情緒?！皹?biāo)準(zhǔn)色彩”是指能體現(xiàn)網(wǎng)站形象和延伸內(nèi)涵的色彩，給人以整體統(tǒng)一的感覺。我個(gè)人網(wǎng)站的色彩是以粉色為主，淡粉色和冰粉色為輔，給人一種浪漫的感覺，仿佛生活在虛幻的世界里。

網(wǎng)站字體，和標(biāo)準(zhǔn)色彩一樣，標(biāo)準(zhǔn)字體是指用于標(biāo)題、主菜單的特有字體。為了體現(xiàn)網(wǎng)站的特有風(fēng)格，可以根據(jù)自已網(wǎng)站所表達(dá)的內(nèi)涵，選擇更貼切的字體。我的個(gè)人網(wǎng)站的標(biāo)準(zhǔn)字體是幼圓。給人一種沉穩(wěn)而不失俏皮的感覺。

2.3 確定網(wǎng)站風(fēng)格

風(fēng)格是抽象的，是指網(wǎng)站的整體形象給瀏覽者的綜合感受。這個(gè)“整體形象”包括網(wǎng)站的標(biāo)志、色彩、字體、標(biāo)語(yǔ)等諸多因素。網(wǎng)站是可以平易近人、生動(dòng)活潑的，也可以是專業(yè)嚴(yán)肅的。不管是色彩、技術(shù)、文字、布局、還是交互方式，只要你能由此讓瀏覽者明確的分辨出這是你網(wǎng)站獨(dú)所有的，這就形成了風(fēng)格。

風(fēng)格是有人性的，通過(guò)網(wǎng)站的色彩、技術(shù)、文字、布局、交互方式可以概括出一個(gè)網(wǎng)站的個(gè)性；我的網(wǎng)站風(fēng)格是以浪漫為主，給人一種夢(mèng)幻的感覺。

2.4 確定網(wǎng)站內(nèi)容

我的個(gè)人網(wǎng)站大體上包括了一些內(nèi)容：首頁(yè)、網(wǎng)頁(yè)設(shè)計(jì)、動(dòng)畫特效、網(wǎng)頁(yè)素材、相關(guān)軟件、作品展示、本站論壇、游客留言等網(wǎng)站常用內(nèi)容，方便大家瀏覽。

三 具體實(shí)現(xiàn)與分析

3.1 首頁(yè)

第 3 頁(yè)（共 8 頁(yè)）

一個(gè)網(wǎng)站的首頁(yè)是一個(gè)文檔，當(dāng)一個(gè)網(wǎng)站服務(wù)器收到一臺(tái)電腦上網(wǎng)絡(luò)瀏覽器的訊息連結(jié)請(qǐng)求時(shí)，便會(huì)向這臺(tái)電腦發(fā)送這個(gè)文檔。當(dāng)在瀏覽器的位址列輸入域名，而未指向特定目錄或檔案時(shí)，通常瀏覽器也會(huì)打開網(wǎng)站的首頁(yè)。

網(wǎng)站首頁(yè)往往會(huì)被編輯得易于了解該網(wǎng)站提供的資訊，并引導(dǎo)互聯(lián)網(wǎng)用戶瀏覽網(wǎng)站其他部分的內(nèi)容。這部分內(nèi)容一般被認(rèn)為是一個(gè)目錄性質(zhì)的內(nèi)容，如圖1。

圖1

3.2 網(wǎng)頁(yè)設(shè)計(jì)模塊

為了滿足廣大網(wǎng)頁(yè)制作愛好者的學(xué)習(xí)需求，本網(wǎng)站推出新版的網(wǎng)頁(yè)制作教程，該教程使用Dreamweaver CS5作為開發(fā)工具，結(jié)合老師的網(wǎng)站開發(fā)經(jīng)驗(yàn)，為大家講解網(wǎng)頁(yè)制作的每個(gè)環(huán)節(jié)。希望通過(guò)本套課程的學(xué)習(xí)，大家能靈活運(yùn)用Dreaweaver完成網(wǎng)站的開發(fā)，如圖2。

圖2 3.3 網(wǎng)頁(yè)特效模塊

提供包括鼠標(biāo)類類、文字類、菜單類、背景類、圖形類、播放器等網(wǎng)頁(yè)特效代碼，力求做到收集最全網(wǎng)站。可能的關(guān)注這方面的最新發(fā)展趨勢(shì)，不斷更新自己的網(wǎng)站，盡可能的收集最新的網(wǎng)頁(yè)特效代碼。如圖3

第 4 頁(yè)（共 8 頁(yè)）

圖3

3.4 網(wǎng)頁(yè)素材模塊

提供各種新式素材包含圖片、動(dòng)畫、flash、音樂(lè)等方便網(wǎng)頁(yè)及網(wǎng)站制作時(shí)參考即借鑒之用，如圖4。

第 5 頁(yè)（共 8 頁(yè)）

圖4 3.5 相關(guān)軟件下載模塊

提供網(wǎng)站及網(wǎng)頁(yè)制作所需的必要工具如Dreamweaver、Flash、Fireworks等相關(guān)必備軟件下載，如圖5。

圖5 3.6 作品展示模塊

提供多種多樣名人或企業(yè)個(gè)人網(wǎng)站供大家學(xué)習(xí)參考，豐富大家的知識(shí)，詳細(xì)內(nèi)容如圖6所示。

第 6 頁(yè)（共 8 頁(yè)）

圖6 3.7 論壇及留言模塊

論壇又名網(wǎng)絡(luò)論壇BBS，全稱為Bulletin Board System（電子公告板）或者Bulletin Board Service（公告板服務(wù)）。是Internet上的一種電子信息服務(wù)系統(tǒng)。它提供一塊公共電子白板，每個(gè)用戶都可以在上面書寫，通過(guò)留言的方式可發(fā)布信息或提出看法。它是一種交互性強(qiáng)，內(nèi)容豐富而及時(shí)的Internet電子信息服務(wù)系統(tǒng)。用戶在BBS站點(diǎn)上可以獲得各種信息服務(wù)，發(fā)布信息，進(jìn)行討論，聊天等等如圖7所示。

圖7 四 總結(jié)

經(jīng)過(guò)老師耐心細(xì)致的指導(dǎo)，及同學(xué)之間的相互交流，同時(shí)翻閱了大量的資料(包括網(wǎng)上資料、書本及學(xué)校的一些相關(guān)資料)，經(jīng)過(guò)近一段時(shí)間的努力，個(gè)人網(wǎng)站的設(shè)計(jì)制作告一段落?？偨Y(jié)這次“揚(yáng)帆起航-個(gè)人網(wǎng)站”開發(fā)制作過(guò)程，我使用了目前因特網(wǎng)上比較流行的各種靜態(tài)制作方法及交互動(dòng)態(tài)網(wǎng)站的制作設(shè)計(jì)手段，并對(duì)初步利用后臺(tái)程序完成了網(wǎng)站的動(dòng)態(tài)響應(yīng)與生成網(wǎng)頁(yè)的技術(shù)，同時(shí)也從中學(xué)習(xí)了對(duì)靜態(tài)網(wǎng)頁(yè)的處理風(fēng)格，色彩搭配，頁(yè)面導(dǎo)航方面有了一定的經(jīng)驗(yàn)。

目前網(wǎng)站的制作技術(shù)與要求，都已經(jīng)告別了因特網(wǎng)初期網(wǎng)站制作的“幼稚”期，隨著各類網(wǎng)站的迅速增加與瀏覽者需求的提高，無(wú)不要求網(wǎng)站從立意、策劃、頁(yè)面設(shè)計(jì)到后臺(tái)程序的全面提高。無(wú)論是個(gè)人網(wǎng)站還是企業(yè)網(wǎng)站都必須被要求從瀏覽者角度出發(fā)，最大限度的滿足用戶的要求，這也是以后各類網(wǎng)站發(fā)展競(jìng)爭(zhēng)的真正實(shí)質(zhì)所在。

本次設(shè)計(jì)由于設(shè)計(jì)時(shí)間比較緊，且相關(guān)模塊比較多，加之設(shè)計(jì)經(jīng)驗(yàn)的不足，在網(wǎng)站的整體設(shè)計(jì)及各模塊功能可能設(shè)計(jì)的不完全，有待于進(jìn)一步的完善和改進(jìn)。

第 7 頁(yè)（共 8 頁(yè)）

參 考 文 獻(xiàn)

[1] http://wenku.baidu.com/view/ef0e976548d7c1c708a14568.html [2] http://wenku.baidu.com/view/1a6f9dba1a37f111f1855b03.html [3] http://wenku.baidu.com/view/f75ac32c647d27284b7351d0.html． [4]李沖．Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)[M]．清華大學(xué)出版社．2011．

[5]王寶軍．計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)與應(yīng)用[M]．中國(guó)勞動(dòng)社會(huì)出版保障出版社．2002． [6]岳鴻．計(jì)算機(jī)應(yīng)用基礎(chǔ)[M]．國(guó)防科技大學(xué)出版社．2006． [7]宋虹．Photoshop圖形圖像處理[M]．湖南大學(xué)出版社．2011． [8]姬付梓．創(chuàng)意設(shè)計(jì)[M]．大學(xué)出版社．2011．

Abstract the network development to today, to establish the website has become a very common problem.For the entrepreneur, build good website can seize strategic points of development in the new century.To establish a new corporate image, to open up international market directly.For an individual, build good personal website can be more convenient to collect information, carry out more direct communication, using the constructed their own platform, can find a job after graduation fully prepared.In my personal website design process, is mainly based on our web site design, web site design purpose and direction of the entire process, and through their own design of this personal website works to explain and demonstrate a website production process.The main content of this thesis is a personal website design, overall planning and related basic knowledge.Site planning and webpage structure, section design, webpage style, color, layout of the layout, text and images using.There are the theme of the site is to be included in the main contents, a site must have a clear theme, especially the personal web site, not as separate webpage that becomes less content, while the single, so to find the content they are interested in, so deep, so thoroughly, show their own characteristics, so as to leave deep impression.Keywords: website design； website programming；website theme

第 8 頁(yè)（共 8 頁(yè)）