第一篇：計算機個人網站設計論文

淺談計算機個人網站建設及運用

13級 計算機 劉潤

摘要：個人網站在現在的個人生活中可以起到非常重要的作用，本文主要介紹了個人網站設計規劃，庫文件和模板文件的制作，利用模板制作網頁，制作網頁特效的制作并使用ASP＋IIS＋Access技術實現了我的網站的各種功能，其中和數據庫的連接使用到了ODBC技術等。通過此次的學習能快速掌握個人網站設計制作的基本技巧和基本網站建設過程。

關鍵詞：網站；網頁制作；模版

引 言

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

主要介紹了個人網站設計規劃，庫文件和模板文件的制作，利用模板制作網頁，制作網頁特效的制作等。通過此次的學習能快速掌握個人網站設計制作的基本技巧和基本網站建設過程。

首頁中主要涉及了個人簡介，照片匣子，我的作品，友情鏈接等。

一、個人網站設計規劃

隨著網絡技術的飛速發展，越來越多的個人擁有了自己的網站，為了設計一個有效的，引人注目的站點，應該有計劃，有步驟地完成一系列操作。在動手建立網站以前，對網頁進行完整，詳盡的整體設計是至關重要的。個人網站設計制作主要包括以下幾個步驟。

（一）確定網站的主題

對于主題的選擇主要按下列三個條件去考慮，本例所講的是一個個人介紹性質的網站，主體就是介紹個人的相關信息。

1、主題要小而精。一般來說，個人主頁的選材定位要小，內容要精。

2、對于個人網站來說主題最好是自己擅長或者喜愛的內容。這樣在制作時，才不會覺得無聊或者力不從心。興趣是制作網站的動力，沒有熱情，很難設計制作出優秀的作品。

3、主題不要太濫或者目標太高。

如果主題已經確定，就可以圍繞主題給該網站起一個名字，網站名稱也是網站設計的一部分，而且是關鍵的要素。

（二）確定網站的目錄結構

網站的目錄是指建立網站時創建的目錄。目錄結構的好壞，對瀏覽者來說并沒有什么太大的感覺，但是對站點本身的上傳維護以及以后的內容的擴充和移植有著重要的影響。

本站只是個人介紹性質的頁面，主要是靜態的幾個頁面，因此在建立目錄的時候，可以將其中的頁面文件直接放在根目錄下，所有的圖片可以放在images文件夾中。

下面是建立目錄結構的建議：

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

2、按欄目內容建立子目錄。

3、在每個主目錄下都建立獨立的images目錄。

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

（三）確定網站的整體風格

風格是指站點的整體形象給瀏覽者的綜合感受，包括站點的標志，色彩，字體，標語，版面布局，內容價值，存在意義，站點榮譽等諸多因素。本站采用白色，綠色等為主的色調，綠色具有清爽，理想，希望，生長的含義,采用這種明亮的綠色，和褐色的沉穩,營造了一個清晰明塊，充滿無限希望與活力的氛圍。

從整體風格的角度來看，下面就是一個好的網站標準：

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

2、整體性好：一個網站強調的就是一個整體，只有圍繞一個統一的目標所做的設計才是成功的。

3、網站形象突出：一個符合美的標準的網頁是能夠使網站的形象得到最大限度的提升的。頁面用色協調，布局符合形式美的要求：布局有條理，使網頁富有可欣賞性。

4、交互式強：發揮網絡的優勢，使每個使用者都參與到其中來，這樣的設計才能算是成功的設計。

（四）確定網站主要欄目和布局

因為每臺顯示器分辨率不同，所以同一個頁面的大小可能出現640*480像素，800*600像素，1024*768像素等不同尺寸。本站的所有頁面采用800*600像素制作。

通常版面布局按照如下步驟進行。

1、草案

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

2、粗略布局

在草案的基礎上，將確定需要放置的功能模塊安排到頁面上。必須遵循出重點，平衡協調的原則，將網站標志，主要欄目等最重要的模塊放在最顯眼，最突出的位置，然后再考慮次要模塊的排放。

根據本站的主要欄目確定了本站的布局草圖。我們可以把頂部導航區作top庫文件，在制作其他網頁文件時直接引用。在本站中的其他頁面風格和欄目相似，如果每次都重新設定網頁結構以及導航條，各類圖標就顯得非常麻煩，可以利用Dreamweaver先制作一個模板，然后利用模板再來創建其他的頁面。

二、創建個人網站站點

在制作網頁前，要先為網頁定義一個個人網站站點，用來存放站點中所有網頁文件及附屬文件。建設站點前先將配套的素材文件夾復制到本地硬盤上，在本地硬盤上創建個人網站，具體操作步驟如下。

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

圖3-1 管理站點

圖3-2 輸入站點名稱

2、彈出【站點定義】對話框，如果對話框顯示的是【高級】選項卡，則單擊【基本】選項卡，彈出【站點定義向導】的第一個界面，要求為站點輸入名稱。如圖3-2所示.3、單擊【下一步】按鈕，出現向導的下一個界面，詢問是否要使用服務器技術。選擇【否，我不想使用服務器技術】選項，指示目前該站點是一個靜態站點，沒有動態頁面。

4、單擊【下一步】按鈕，打開一個對話框，在文本框中輸入站點路徑。

5、單擊【下一步】按鈕，詢問是否使用遠程服務器，這里選擇【無】，因為將整個站點制作完成以后再上傳。

6、單擊【完成】按鈕，即出現【管理站點】對話框，其中顯示了新建的站點。

7、單擊【完成】按鈕，關閉【管理站點】對話框。現在，已經為站點定義了一個本地根文件夾，就可以在站點中制作網頁了，當制作完成以后，就可以上傳到服務器上供大家瀏覽了。

三、制作網頁模板

因為本網站中的幾個頁面都要用到相同的頁面元素和排版方式，因此可以使用模板以避免重復地在每個頁面輸入或修改相同的部分，在網站改版的時候，只要改變模板，就能自動更改所有基于這個模板的網頁。

（一）制作庫文件

在Dreamweaver中，庫項目是可以重復使用的項目之一，庫的用途和模板類似，都是可將同一內容用于不同的網頁，庫文件具體制作步驟如下。

1.選擇【文件】|【新建】命令，新建一空白網頁。

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

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

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

（二）制作模板

使用模板創建文檔可使站點具有統一的結構和外觀。無論是新建站點還是更新已有站點，如果要使站點中的所有頁面都共有某種特色，則模板非常有用。使用模板可以個次修改若干頁面，而不用對新頁面逐個設置屬性。制作模板具體步驟如下。

1.選擇【文件】|【新建】命令，彈出【新建文檔】對話框，在【常規】選項卡中選擇

【模板頁】類別中的【HTML模板】選項。如圖4-1.圖4-1 HTML

模板

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

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

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

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

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

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

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

圖4-4 制作圖片

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

圖4-5 效果圖

（三）設置模板可編輯區

1.接上一節，將鼠標置于文檔想創建可編輯區域的位置。

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

3.單擊【確定】按鈕，即可創建可編輯區域，如圖4-7所示.圖4-7 可創建區域

（四）用模板制作網頁說明

可以利用模板快速的制作出大量的風格類似的網頁，當模板改變時，所有基于模板的網頁也隨之改變，這樣能有效的實現網站的更新。

四、利用模板制作網頁

（一）制作登錄主頁

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

第二篇：個人網站設計論文

秦皇島職業技術學院信息工程系

分類號： TP319

秦皇島職業技術學院 課程設計（論文）

個人博客網頁設計論文

學生姓專班指導教指導教師職名 王飛飛 業 計算機應用技術 級 1100103 師

稱

目錄

摘要 …………………………………………………………………………………2 前言 …………………………………………………………………………………3 第一章 關于網絡的知識.............................................4

秦皇島職業技術學院信息工程系

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

摘 要

本論文主要是對個人網站的建立進行研究和探討。作品的主要技術指標包括：

1、制作出一個具有靜態技術的“個人網站”；

2、在制作的過程中，加強和 1

秦皇島職業技術學院信息工程系

深化以前所學的關于網頁設計的方法，同時更好的理解參考資料上的方法、理論和更好的利用Fireworks、Flash制作網站需要的一些圖片和影片。

本設計的主要內容包括：

1、個人網站的設計思想，整體規劃及相關基礎知識；

2、個人網站的首頁設計，包括簡單的HTML語言及效果圖；

3、個人網站的調試。

網頁規劃包含的內容很多，如網頁的結構、欄目的設置、網頁的風格、顏色搭配、版面布局、文字圖片的運用等，也只有如此制作出來的網頁才能有個性、有特色，具有吸引力。

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

關鍵詞：技術指標

基本設計內容

網站規劃 網站主題

前言

隨著二十一世紀新興科技的飛速發展，如今的交流與交往不再是那么的單調，看如今不曾再有五百里加急文件的傳送，看如今已很少在出現寫信、寄信。人們正在運用現世紀的高科技來增加自己的交際圈，來發展自己的人脈關系，秦皇島職業技術學院信息工程系

同時，其它人也是通過高科技，悄悄的就能很容易地去了解，關注一個人。

正是因為人們的這些需求，所以出現了互聯網，正是因為人們的需求，所以出現了如今的網絡時代，網絡通訊工具。來方便人們的交往，交際與溝通。也正是因為人們的需求，所以出現了個人博客，通過一人簡單的網頁來展現自己的獨特魅力，自己的與眾不同。真正的做到了“足不出戶，便知天下人”。

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

我覺得一個網站的開始，應該有一個大體的規劃，網站的布局是最重要的，它起著一個網站成功與否的決定性作用，因為布局的好與壞，帶來的是網站整體上的美觀效果及應用。網站內容上也能決定著網站成功與否，一個網站上的每個字眼都可能決定著這個網站，因為你不知道哪個字就是吸引別人的內容，就是大家都追捧的話題，就是很潮的事物，所以內容上一定要謹慎。再有，就是網站的圖片，一定要確準好路徑，以免圖像的丟失而不能再網站中顯示，其次就是鏈接，在Dreamweaver中提供了很簡單的鏈接命令，根據其提示操作即可。

我做了一個簡單的個人博客的網站，通過這個網站能讓大家更深的了解我，同時更重要的是鍛煉自己的實踐能力，鞏固自己學習的知識，彌補自己學習的不足。

第一章 關于網絡的知識

1.1什么是Internet Internet是由眾多的計算機網絡互聯而成的互聯網，它覆蓋了全世界各地，3

秦皇島職業技術學院信息工程系

它是采用開放系統協議的計算機通訊網絡。然而，Internet不僅僅是計算機的互聯網，它還是全球最大的信息資源寶庫，它提供了包括科研、教育、文化娛樂、商業和信息交流等各種各樣的服務，使得世界范圍內的人與人之間的交流在時間和空間上變的更小了。

Web頁瀏覽：這是目前利用最廣泛、最直接的互聯網服務，通過瀏覽WWW（萬維網）中的網頁，可以了解世界各地的新聞，查看最新的股市行情，最新的娛樂動態、科技發明，找到眾多的就業信息??幾乎想找到什么樣的信息，就有什么信息。正是有了WWW、Internet才會變得如此豐富多彩，才能走進千家萬戶。1.2 WWW的簡介

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

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

秦皇島職業技術學院信息工程系

1.3網頁基本構成元素

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

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

秦皇島職業技術學院信息工程系

第二章 網站制作實戰

2.1 站點 2.1.1 創建站點

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

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

秦皇島職業技術學院信息工程系

2.2 首頁

2.2.1 設置首頁布局和頁面屬性

一、設置首頁布局

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

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

2、將變成“+”形狀的鼠標游標放到編輯中網頁上，在要繪制的地方進行拖動就可以進行創建了。（如果繪制的是第一個表格必須從網頁的最左上角開始繪制）。“index”表格布局如下圖：

秦皇島職業技術學院信息工程系

二、設置首頁的頁面屬性

首先雙擊“檔”浮動面板中的index.htm,進入頁面的編輯窗口。右健單擊空白區域，在菜單中選擇“頁面屬性”，之后彈出“頁面屬性”對話框，若選擇主菜單“修改/頁面屬性”項，也可以把打開該對話框。

在“頁面屬性”對話框中，左側窗口顯示“分類”，其中包括了“外觀”、“鏈接”、“標題”、“標題/編碼”、“跟蹤圖像”5項，右側區域則顯示各類中可以設置的項目

“index”首頁設置的屬性如下圖所示：

秦皇島職業技術學院信息工程系

2.2.2 查看和編輯頭內容

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

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

秦皇島職業技術學院信息工程系

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

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

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

步驟

2、在Dreamweaver中將會產生一個flash相冊，在Dreamweaver中的最右邊將會有一個flash元素，一次將flash的屬性修改，既可完成一個flash相冊的制作。2.2.5 插入文本

文字是人類語言最基本的表達方式，在網頁中，文本內容也可以說是重要的組成部分，它是最關鍵的因素。插入文本的兩種方式：一種是在網頁編輯窗口中直接用鍵盤敲入文本。另一種是復制文本的方式。直接使用Dreamweaver的文本復制功能，將大段的文本內容拷貝到網頁的編輯窗口來進行排版的工作，10

秦皇島職業技術學院信息工程系

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

還有其它的幾個網站與主頁的制作相同，一個網頁是圖像和文字的組合。“相冊”子頁中的FLASH相冊的插入和前面的介紹相同。

秦皇島職業技術學院信息工程系

第三章 建立網頁鏈接

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

“文字鏈接”即以文字作為媒介的鏈接，它是網頁中最常被使用的鏈接方式，具有“文件小、制作簡單和便于維護”的特點。接下來結合我的個人網站為實例，來講解如何為文字建立“鏈接”。操作步驟：

步驟1、準備好已經制作完成的首頁的各個欄目頁面

步驟

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

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

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

步驟

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

步驟

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

秦皇島職業技術學院信息工程系

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

步驟

7、至此，第1個欄目的鏈接就制作完畢了，按下Ctrl+S保存網頁，再按下F12預覽，測試一下，當鼠標放在“放松心情”這4個文字上時將變成手形，并且瀏覽器窗口下面的狀態區中會顯示鏈接到的網頁的位址，單擊文字，頁面會立即跳轉到第1個欄目中，這表示鏈接已經制作成功了。

步驟

8、同理，按照以上步驟，再為“閑情逸致”和“個人主頁”等其它欄制作指向對應欄目的鏈接。

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

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

步驟

1、首先仍然要準備好已經制作完成的首頁和各個欄目的頁面 步驟

2、在Dreamweaver中打開網站的首頁，之后選取要制作“鏈接”的圖像。

步驟

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

4、如果有需要，可以在“目標”下拉列表中選擇“鏈接”網頁顯示 13

秦皇島職業技術學院信息工程系 的窗口方式，分別為-blank、-parent、-self或-top。

步驟

5、至此，第1個欄目的圖像鏈接就制作完畢了，按下Ctrl+S保存網頁，再按下F12預覽，測試一下，將鼠標放在“動畫制作”4個文字上時將變成手形，同時瀏覽器窗口下面的狀態區中會顯示出鏈接到的網頁的地址，并且會顯示出“替代”文本“動畫制作”，單擊文字，頁面會立即跳轉到第3個欄目中，這表示鏈接已經制作成功了。

步驟

6、同理，按照以上步驟，再為其它幾幅圖像制作指向對應欄目的鏈接。

步驟

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

至此，整個“圖像鏈像”的實例就全部完成了。3.3在HTML語言中建立網頁鏈接

一、文字鏈接

在HTML語言中用超鏈接標記指向一個目標。其基本格式為：舉個簡單的“文本鏈接”的實例，該實例相對應的HTML代碼如下所示。

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

相冊（原窗口，默認為空）

留言

第三篇：網頁制作論文--個人網站設計

網頁制作課程論文

（個人網站設計論文）

姓名：薛金鴿 學號：105031040025 班級：103212 專業：市場營銷（電子商務方向）學期：2011-2012學年第2學期 任課教師：劉新飛

個人網站策劃書

1.組織機構描述

1.1個人網站的應用背景

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

其次，做為在校大學生，我知道大學生現在對什么事物，內容，活動等等感興趣，所以，我做起來的時候相對來說是比較隨手的，我不用像其他的網站那樣去刻意的收集信息，資料，我只要在校園里稍微留意，我就會捕捉到大學生的興趣點。所以，在整個網站的設計過程中，我廣泛的聽取同學的意見和建議，不斷的改進和提高我的網站的內容和質量，這些都取得了比較好的效果。

在整個網站的設計過程中，我根據自己以往的設計經驗和自己找來的資料，又經過老師的指點，經過了近一個月的努力，幾經易稿，最終做成了我的這個個人主頁。.2 個人網站建設的目的

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

1.3 相關應用軟件選用、技術采用

在網頁的設計過程中，我選用的軟件包括Dreamweavercs5、Fireworks cs5和Photoshopcs5，其中，Dreamweaver 是網頁編輯軟件，Fireworks cs5是圖形/圖像處理軟件，photoshopcs5是圖片處理軟件。它們是Macromedia公司專門為網頁設計、制作開發的系列軟件套件，三者之間可以無縫集成，能夠有效地解決網絡帶寬問題，是設計動畫網頁的最佳工具。

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

Fireworkscs4的獨特之處在于它能夠優化、切分圖片映射圖，并提供了功能強大的翻滾圖工具。它是基于WEB應用的圖形/圖象處理軟件，提供了一種革命性的新方法來創建WEB圖形，并且具有所有其他圖形處理工具的諸多優點。Fireworks cs4的最大優勢就在于它在任何時候可以從任何階段開始設計工作，這樣既可以節約時間又可以對產品進行擴展。另外，Fireworks cs4中的諸多功能都是面向WEB應用的，因此對于WEB設計新手來說也很容易學習的。

在我設計我的個人網站的過程中，我選擇了Dreamwearcs5和 Photoshopcs5 Fireworks cs4三種軟件。因為自己向對于其它的軟件來說，這三個還算是比較熟悉的。

2．網站的技術參數部分

2.1我的導航系統

我所制作的個人網站的導航系統包括：

1.個人簡介2.個人專題4.我的相冊5.網站說明6.給我留言 8.發送郵件9.鏈接百度10.女生花園

2.2功能模塊的劃分

1．搜索引擎：

根據瀏覽者的要求，使用主頁上的搜索引擎鏈接到百度，在整個Internet上進行搜索，完成信息的優化與提取。

2．論壇：

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

3．發送電子郵件：

網友可以通過“聯系我”利用outlook 向版主或其他人發送電子郵件。4．精品收藏：

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

5．留言板：

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

2.3 首頁的設計 我的網站首頁主要采用簡單大方的設計方法，用的是色調一致的一組圖片做的LOGO和相關的背景圖片，主要頁面布局如下：

2.4主要欄目的介紹

1．個人簡介：

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

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

這里收錄了我平時搜集的一些文章和音樂，各位訪客可以根據自己的喜好進行閱覽。4.我的相冊：

在這個板塊可以看到我的照片，班級照片和搜集的校園照片，如果大家喜歡可以收藏。更改照片的時候只要更新數據庫就可以了。5.網站說明：

里面是我對整個網站的介紹，不太清楚網站構架的訪客可以先到這里。6.給我留言：

這是每位訪客針對我的網站情況給我留言，這些留言會直接保存到數據庫里面，并且能夠輕松的讀取。7.發送郵件：

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

如果訪客想在互聯網上查找東西，可以直接點擊這里。9.女生花園：

收集了一些女生喜歡的東西，如果你是女生，可以進來看看。

2.5二級頁面的設計

我的網站主頁內容簡單所以主要內容再二級頁面里要有詳細的說明，具體說明如下：

2.5.1個人簡介

本模塊是個人簡介部分，每個個人網站都會有作者介紹。在這個模塊訪客會了解到作者的一些基本信息.2.5.2文學欣賞

這個版塊主要介紹我自己喜歡的相關文學作品。此版塊的界面如圖所示：

圖3.6 文學欣賞界面

2.5.3快樂音樂

進入此版塊，界面如圖所示：

通過在數據庫中存放音樂路徑，達到在網頁上播放的效果。在音樂的首頁上放置了歌曲的名字，網友無需登錄，即可收聽自己喜歡的歌曲。

音樂界面

2.5.4我的相冊版塊

個人網站中又一亮點就是個人相冊的設置，在我的相冊里，放置了我自己的照片、班級照片和校園照片。

相冊里面的這三個版塊具有相同的版面設計，如下圖所示：

相冊界面

2.5.5網站說明版塊

此版塊是我根據自己的網站結構對整個網站以及每個版塊所做的網站結構和功能的說明，以及網站和作者版權說明。如下圖所示：

網站說明界面

如果網友不清楚網站的構架，可以查看此版塊。2.5.6給我留言版塊

留言板是目前最為流行的網絡應用之一，使用留言板，可以為留言者提供發言的機會，讓他們能夠及時、準確地交換自己的觀點。

2.5.7留言板主界面

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

留言主界面

在主界面中存有全部留言的作者和主題，點擊你想察看的主題就會進入察看留言界面，點擊 “發表帖子”進入留言界面。

3．網站的維護方案

3.1域名的申請

域名（Domain Name），是由一串用點分隔的名字組成的,Internet上提供用戶訪問某網站或網頁的路徑，用于在數據傳輸時標識計算機的電子方位（有時也指地理位置）。

域名申請的含義

“域名申請”：為保證每個網站的域名或訪問地址是獨一無二的，需要向統一管理域名的機構或組織注冊或備檔的一種行為。也就是說，為了保證網絡安全和有序性，網站建立后為其綁定一個全球獨一無二的域名或訪問地址，必須向全球統一管理域名的機構或組織去注冊或者備檔方可使用的一種行為。由于域名是網站必不可少的“門牌號”，域名可用于：網站地址訪問、電子郵箱、品牌保護等用途，所以很多企業或個人均會進行域名申請。

3.2空間或者主機的租用

有了自己的域名這個門牌號后，就需要一個空間來存放自己的網站，也就是虛擬主機。一般虛擬主機提供商都向用戶提供100MB、500MB、3GB等虛擬主機空間。我的個人網站選擇100-300MB的虛擬主機空間。購買虛擬主機主要考慮幾個方面：售后服務、穩定性、訪問速度等。首先我選擇在萬網上注冊一個域名然后申請租用空間建立個人網站。

3.3網站鏈接穩定性測試

超級鏈接對于網站用戶而言意味著能不能流暢的使用整個網站提供的服務，因而鏈接將作為一個獨立的項目進行測試。網站能夠正確運行首先要保證鏈接能夠連貫運行。

網站的運行中整個系統是否運行正常，我主要采用將測試網站長時間運轉進行測試，派生出執行程序所有功能需求的輸入條件，從而導出測試用例，進行測試，網站中的每個版塊的每個頁面都出現了很多的鏈接，所以每個版塊要先進行單獨測試，單獨測試完成后，根據個版塊之間的連接結構再進行總體測試，從而達到網站的整體的運營能夠順利地進行。在測試這個環節時，沒有特定的測試方法，就要做到細心，做到網站的順利運行。

總結：

通過這次個人網站設計的制作，我學會了很多東西，也了解了很多關于個人網站的資料。不知不覺網頁設計的課程將要結束了，這門課程所包含內容的豐富是讓我從沒有想到的。在整個的學習過程中，我學習了Dreamwave、Firework、Html語言、網站建設的基本思想等重要內容。到現在為止，我還是很慶幸能夠學到這么多的內容。

雖然整個網頁的結構還有很多不足，還有一些板塊沒有開通，但是我的確能夠感到在我們制作過程中技能的提高。整個網站的不足我想是沒有使用到一些動態網頁的知識，使得日后網站的維護較為繁雜。希望以后可以自學動態網站的課程，從而彌補自己在動態網絡語言方面的不足。這樣以后可以利用業余的時間為自己或者公司，根據自己的愛好建立一個個人網站。

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

[6] 劉瑞新，《ASP動態網站開發、畢業設計指導及實例》[M].機械工業出版社 2000 [7] 石曉燕、蘇萍《網頁設計基礎》[M].清華大學、交通出版社 20 04 [8] 王玉芬.《網站規劃與設計》[M].西北工業出版社 2003 [9] 謝希仁.計算機網絡(第5版)[M].北京：電子工業出版社,2008

第四篇：個人網站設計及實現畢業設計論文

個人網站設計及實現

第一章 文獻綜述

互聯網是社會發展的必然趨勢，很多人已經意識到網絡的強大生命力和它在未來將處于的重要地位。他們鉆研并且努力進入到這一個新的空間，新的領域。以個人為中心，淡化了傳統中心地位，使得我們的世界向多元化加速發展，人人都有話語權，人人都是中心。

互聯網是一個互動性極強的平臺，它自由、寬容、平等、共享，并使來自民間的聲音參與到了構建主流話語的行動中來。計算機技術的發展，特別是網絡技術的飛速發展，給文檔的保存和管理提供極大的方便[1]。本論文中，將軟件工程的基本原理和方法應用到整個網站系統，并對其進行需求分析，提出了解決問題的具體方法。在具體制作中，用ASP技術來實現B/S系統，ASP技術與數據庫技術結合，用戶在瀏覽器端可以隨意查詢自己需要的標本，這樣提高了網頁的互動性，使整個系統能更好的為用戶服務。

Internet飛速發展使得網站不再僅僅為企業或公司等大型結構所擁有，互聯網成為人們快速獲取、發布和傳遞信息的重要渠道，它在人們政治、經濟、生活等各個方面發揮著重要的作用。因此網站建設在Internet應用上的地位顯而易見，一個家庭甚至個人都可以擁有屬于自己的網站，而在這其中，個人網站已經日漸普及，而且發展到今天，創建一個能充分體現自我風格和特色的個人網站已經成為互聯網用戶的新追求。

1.1 課題研究現狀分析

伴隨著社會的發展和科學的進步，上網成為越來越多人們的選擇。隨著互聯網的飛速發展，有關網絡的技術也層出不窮。如今互聯網上的個人網站如雨后春筍般蓬勃發展，絢麗多彩的主頁比比皆是。每個人都有發揮個人才能，揮灑自己個性的網上伊甸園。在hao123神話以后，網站大全類網站又再一次達到頂峰。然而這個模式拷貝成功的網站卻寥寥無幾。而對于技術薄弱的個人網站來說，似乎網址類網站應該是一個很好的切入點。但是由于搜索的異軍突起，網址類網站似乎變得可有可無。

第 1 頁（共 9 頁）

[2]

網頁實際是一個文件，他存放在世界某個角落的某一臺計算機中而這臺計算機必須是與互聯網相連的。網頁經由網址（URL）來識別與存取，當我們在瀏覽器輸入網址后，經過一段復雜而又快速的程序，網頁文件會被傳送到你的計算機，然后再通過瀏覽器解釋網頁的內容，再展示到你的眼前。文字與圖片是構成一個網頁的兩個最基本的元素。可以簡單的理解為：文字，就是網頁的內容，圖片，就是網頁的美觀。除此之外，網頁的元素還包括動畫、音樂、程序等等。網頁實際上只是一個純文本文件，它通過各式各樣的標記對頁面上的文字、圖片、表格、聲音等元素進行描述（例如字體、顏色、大小），而瀏纜器則對這些標記進行解釋并生成頁面。1.2 個人網站的研究工作 1．理論研究基礎

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

隨著互聯網的進一步發展與成熟，網絡的帶寬進一步加闊，網絡應用也越來越廣泛。網頁制作更是日新月異，層出不窮。涌現了很多琳瑯滿目的網站，使得整個互聯網多姿多彩。

在進行動態網頁制作的時候，通常都是使用ASP來完成。由于ASP使用方便，操作簡單，很多網頁設計者一直使用ASP。ASP集成在HTML和腳本語言中，其工作界面簡單，因此，ASP相對于其他網頁制作軟件來說，易學易用，是網頁制作初學者的入門軟件。同時配合數據庫的操作，使個人網站具有更好的網絡平臺和交互性。1.3 已經取得的研究成果

中國互聯網在近幾年發展迅猛。一方面，產生了一批依賴技術領先的互聯網公司，取得了成功；另一方面，互聯網技術逐漸走向普及，使得行業進入門檻正在降低[4]。目前中國網站總數已經近百萬。在這里面出現了大量的個人網站。并且個人網站存在著巨

第 2 頁（共 9 頁）

[3]

大的商業價值。如果能以強大的號召力，把互補的個人網站聯合起來，不知道可以成立多少個門戶網站。我們有理由相信，個人網站還極具潛力。1.4選題的目的及意義

隨著Internet的迅速普及，我們已經不再滿足于僅僅瀏覽網頁，而是希望更深入地參預到網絡中去，Internet的開放性使個人建立自己的網站成為可能，擁有自己的網站也越來越成為一種時尚，同時創建一個能充分體現自我風格和特色的個人網站已經成為互聯網用戶的新追求。

我們更需要交流，相信交流能夠促進我們不斷的進步，并融合別人的長處；讓我們多一些渠道傾聽來自不同立場的聲音；設想我們的網絡，當每個人都擁有個人網頁，不管是否在線，我們都可以跨越時間、空間進行交流，因為這個網頁中擁有我所有的一切，生活，見解，知識，思想；理想的狀態是個人門戶就是每個人的影子，他為每個人打點網絡上的一切，很多志同道合的朋友會在這里和你相識相知。1.5 課題研究的主要內容

互聯網是社會發展的必然趨勢，很多人已經意識到網絡的強大生命力和它在未來將處于的重要地位。他們鉆研并且努力進入到這一個新的空間，新的領域。其中包括你和我。

在我們的工作、日常生活中，能夠擁有一個自己的網站，一個已經成為不少人的希望和驕傲。就這個課題的研究，因為是個人網站，所以我只是選擇了自己擅長和喜愛的內容，在突出自己的風格和特點的同時，還應用了現在流行的網站設計技術和數據庫技術。[5]

第二章 設計部分

“個人網站要發展，要么是從我的需求出發，要么是從我周圍人的需求出發。”國內著名個人網站站長、手機之家站長高春輝說。網頁設計是一門新興的設計類和網絡的交叉學科，近幾年隨著網絡的發展而逐漸收到人們的重視，它本身以網絡為載體,把各種信息以最快捷、方便的方式傳達給大眾。一個網站項目的確立是建立在各種各樣的需求上面的，這是個人網站，所以這種需求往往來自于個人的實際需求，其中每個人的實

第 3 頁（共 9 頁）

際需求占了絕大部分[6]。因此如何更好地的了解、分析、明確需求，并且能夠準確、清晰以文檔的形式表達出來，保證開發過程按照個人需求為目的正確項目開發方向進行。2.1設計的愿望

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

越來越多的人希望能真正參預到互聯網上，這就出現了越來越多的個人網站的設計以及推廣的工作和任務。

就我個人而言，之所以在畢業設計的時候選擇這個課題是因為我也想擁有自己的個人網站，在互聯網上擁有自己的一席之地，從而真正的參與到網絡中去，做網絡新時代的主人，同時也希望自己喜歡和收藏的一些東西能夠和網絡一起分享，和互聯網上的你一起分享。

我所制作的個人網站大體可分為以下幾個功能： 1．搜索引擎：

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

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

網友可以通過“聯系我”利用outlook 向版主或其他人發送電子郵件。4．精品收藏：

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

第 4 頁（共 9 頁）

行管理，即允許加入和對其進行刪除。5．留言板：

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

2.2設計介紹

這次我所設計的課題正是互聯網與個人生活之間的緊密聯系的體現，個人的宣傳網站，包括個人簡介、論壇、個人照片、個人專題等。在突出自己的風格和特點的同時，還應用了現在流行的網站設計技術和數據庫技術。

2.3設計的背景 2.3.1用戶特征

用戶人群：具有基本的計算機操作能力，熟知網絡并能夠在Internet遨游。2.3.2運行環境

軟件平臺需要服務器上的操作系統為microsoft windows xp server。因為ASP的開發平臺首選是Windows NT Server(Windows 2000 Server)上的IIS，然后是Windows NT Workstation(Windows 2000 Profession)或Windows95/98的Personal Web，同樣現在的瀏覽器是微軟一家獨大，使用的瀏覽器是微軟的explorer，網站的數據庫使用了同樣是microsoft的office access數據庫，因為一個數據不是很龐大的個人網站沒有必要使用oracle等大型數據庫系統，同時access數據庫結構比較的簡單，使用起來比較簡單好用。

2.4 達到的預期成果

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

第 5 頁（共 9 頁）

2.5使用工具的簡要介紹 2.5.1 IIS的簡要介紹

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

Access數據庫是集成在Microsoft公司開發的產品更新換代Office系統中的集成軟件[10]。

Access是一個數據庫管理系統，它之所以被集成到Office中而不是Visual Studio中，是因為它與其它的數據庫管理系統（如Visual FoxPro）相比更加簡單易學，一個普通的計算機用戶即可掌握并使用它。而且最重要的一點是，Access的功能足夠強大，足以應付一般的數據管理及處理需要。

ODBC（Open Database Connectivity開放式數據庫互聯）是微軟推出的一種工業標準，一種開放的獨立于廠商的API應用程序接口，可以跨平臺訪問各種個人計算機、小型機以及主機系統[11]。ODBC作為一個工業標準，絕大多數數據庫廠商、大多數應用軟件和工具軟件廠商都為自己的產品提供了ODBC接口或提供了ODBC支持，這其中就包括常用的SQL SERVER、ORACAL、INFORMIX等，當然也包括了Access。2.5.3 對ASP的簡要介紹

Active Server Pages（ASP）是服務器端腳本編寫環境，使用它可以創建和運行動態、交互的 Web 服務器應用程序。使用 ASP 可以組合 HTML頁、VBScript腳本命令和JavaScript腳本命令等，以創建交互的 Web 頁和基于 Web 的功能強大的應用程序[14]。

由于腳本程序是在服務器上而不是在客戶端運行，傳送到瀏覽器上的 Web 頁是在 Web 服務器上生成的。所以不必擔心瀏覽器能否處理腳本：Web 服務器已經完成了所有

第 6 頁（共 9 頁）

腳本的處理，并將標準的 HTML 頁面傳輸到瀏覽器。由于只有腳本的結果返回到瀏覽器，所以服務器端腳本不易被別人復制。用戶看不到創建他們正在瀏覽的頁的腳本命令。2.6 任務概述

隨著計算機的普及和網絡技術的迅速發展，人們也越來越依賴于計算機和網絡。因此，網絡安全應該也必須引起注意。網絡安全是一門涉及計算機、網絡、通訊、密碼、信息安全、應用數學、數論、信息論等多種學科的綜合性學科，涉及面極廣，而且不斷更新和發展。國家對信息產業的扶持，使國內的網絡狀況逐漸好轉，更多的服務器的開通，更快的寬帶網得逐漸普及，各種各樣的攻擊行為在網上也越來越頻繁化和簡單化。

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

該個人網站系統是基于Internet/Intranet 及Web技術，建立以Browser/Server 為結構模式、以數據庫為后臺核心應用、以服務為目的信息平臺，對資源進行科學的加工整序和管理維護，為用戶提供個人信息保障和直接參預到互聯網上而設計的系統。包括界面設計,代碼設計,這一階段偏重于網頁制作工具和技巧的應用, 編寫總系統總體功能分析及架構圖。

2.6.1 個人簡介版塊

本模塊是個人簡介部分，每個個人網站都會有作者介紹。在這個模塊訪客會了解到作者的一些基本信息,此版塊采用了靜態網頁設計，最大的亮點就是利用了一個圖片特效產生的效果，圖片以溶解的方式漸漸出現.2.6.2 我的論壇版塊

在個人網站建設中，BBS論壇也是其中最主要的一個子系統。BBS論壇的主要功能就是討論問題，論壇采用了B/S模式，提供了發表評論，回復評論和管理員對評論進行管理等功能。

第 7 頁（共 9 頁）

2.6.3 個人專題版塊

在這個版塊我設計和兩部分內容包括文學欣賞和快樂音樂。文學欣賞里收集了一些精美文章，快樂音樂里收集了一些好聽的mp3歌曲。2.6.4 我的相冊版塊

個人網站中又一亮點就是個人相冊的設置，在我的相冊里，放置了我自己的照片、班級照片和校園照片。2.6.5 網站說明版塊

此版塊是我根據自己的網站結構對整個網站以及每個版塊所做的網站結構和功能的說明，以及網站和作者版權說明。2.6.6 給我留言版塊

留言板是目前最為流行的網絡應用之一，使用留言板，可以為留言者提供發言的機會，讓他們能夠及時、準確地交換自己的觀點。2.6.7 鏈接百度版塊

在網站的首頁上我設置了鏈接百度的搜索引擎，如果訪客有內容要查詢，可以直接在此引擎內搜索，可直接鏈接到百度查找內容。

第三章 總結

在本次設計的全過程中，我對四年所學的知識有了一個比較系統的認識和理解。涉及了各方面的知識，大大擴展了我的知識面，同時是我學會了如何使用所學的知識去解決一些實際的問題。

在設計中我深知自己掌握的知識還遠遠不夠，掌握的一些理論知識應用到實踐中去，總會出現這樣或那樣的問題，不是理論沒有掌握好，而是光知道書本上的知識是遠遠不夠的，一定要把理論知識和實踐結合起來。把學到的知識應用到時間中去，多做多

第 8 頁（共 9 頁）

練，才可以把理論的精華發揮出來。知識不是知道，了解就好，一定要去應用它，發展它，讓它在現實生活中得到充分的應用，從而解決一些問題，這才是學習的根本目的。而且知識又不是單一的，它是互相聯系的，學科與學科之間都有著內在的聯系。計算機是一門非常復雜且龐大的學科，一項課題往往需要多項技術才可以完成的。在設計階段，通過對課題的深入分析與研究，迫使我對技術有了一定的了解。在遇到問題時，得到了指導老師與同學的悉心幫助，使我感受到集體的力量是無窮的。

通過這次設計，我學會了和別人配合工作，因為一個人所學的知識不可能面面俱到的，只有通過合作，發揮自己的優點，體現團隊精神，才能使工作做得更為出色。通過這次設計，我學到了許多書本上學不到的知識，增強了自己的動手能力。即將畢業我十分珍惜這次鍛煉的機會，我按部就班的完成了自己的設計任務，但由于自己的知識水平有限，仍然存在很多的不足之處，懇請老師多多指教！當今的社會是競爭的社會，而人才的競爭則是競爭的焦點，畢業設計對于我們即將離校的同學來說，是離校前很好的一次鍛煉，使我們各方面的能力都有了很大的提高，為我們踏出校門，走上社會增強了能力與自信！

計算機技術的高速發展，使我深深地認識到只有不斷的加強學習，才能在計算機技術方面不至于被淘汰，今后，我還要加強學習，努力使自己成為一位專業的計算機人員，為我自己所從事的工作服務。

第 9 頁（共 9 頁）

第五篇：個人網站設計及實現畢業設計論文

個人網站設計及實現

摘 要：

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

關鍵詞：網站設計；網站規化；網站主題

隨著經濟的發展，計算機以被應用到社會生活的各個領域。這給人們的生活帶來很大的方便。如今，已成為人們日常生活中不可或缺少的部分。人們可以足不出戶上網購物，隨時查詢股票信息，在自己的博客上盡情發表言論??以上這些都離不開最基本的網頁設計和制作。

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

個人網站是指個人因某種興趣、擁有某種專業技術，提供某種服務或把自己的作品、商品展示銷售而制作的具有獨立空間域名的網站。所謂個人網站，就是指網站內容是介紹自己的或是以自己的信息為中心的網站。

[3][2][1]

一 網站設計規化

1.1 什么是網站

網站是因特網上的一個信息集中點，可以通過域名進行訪問。網站要存儲在獨立服務器

第 1 頁（共 8 頁）

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

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

1.2 網站建設的目的

網站的建設不僅僅是制作主頁的問題，還需要考慮網站的定位、目標用戶、網站內容、服務事項、空間方案、安全性、藝術設計等等。任何網站在建設之前都必須明確文向、用途和服務群體等一系列的問題，寫出詳細的建站計劃，可以說這是網站建設的根源和核心所在。這里我的個人網站主要是讓更多的人認識到我，了解我。借助網絡的這個平臺來展示我自己，還有我希望能交到和我一樣懷著夢想起航的朋友。

1.3 本站的明確目的

不同的網站目的要求通過不同的方式來實現。一個展示個人能力的網站與一個以花卉種植為主題的網站，以及一個大型門戶網站和一個小型企業網站，其出發點和建站目的都有所不同。在整個網站的建設規化方面的要求也是肯定不一樣的。因此在規化我的網站時，我選擇的是與我本人相關的內容來作為主題的。

網站預計的用戶群體：對于網站的設計者和建設者來說，在設計規化網站時必須要明確自己網站的瀏覽都，也就是確定自己的用戶群體。在已經確定了建設目的的前提下，應根據建站方向所會導致出現的不同用戶群體的需求來規化設計整個網站。我的這個網站就確定了以懷著夢想奮斗的人為用戶群體。

1.4 軟件準備

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

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

第 2 頁（共 8 頁）

源代碼，在代碼視圖中進行修改。

二 網站的總體設計

2.1 確定網站主題

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

2.2 確定網站形象

網站形象的設計可以從網站標志、網站色彩、網站字體網絡宣傳語等這些方面著手。網站色彩，網站給人的第一印象來自視覺沖擊，不同的色彩搭配產生不同的效果，并可能影響到訪問者的情緒。“標準色彩”是指能體現網站形象和延伸內涵的色彩，給人以整體統一的感覺。我個人網站的色彩是以粉色為主，淡粉色和冰粉色為輔，給人一種浪漫的感覺，仿佛生活在虛幻的世界里。

網站字體，和標準色彩一樣，標準字體是指用于標題、主菜單的特有字體。為了體現網站的特有風格，可以根據自已網站所表達的內涵，選擇更貼切的字體。我的個人網站的標準字體是幼圓。給人一種沉穩而不失俏皮的感覺。

2.3 確定網站風格

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

風格是有人性的，通過網站的色彩、技術、文字、布局、交互方式可以概括出一個網站的個性；我的網站風格是以浪漫為主，給人一種夢幻的感覺。

2.4 確定網站內容

我的個人網站大體上包括了一些內容：首頁、網頁設計、動畫特效、網頁素材、相關軟件、作品展示、本站論壇、游客留言等網站常用內容，方便大家瀏覽。

三 具體實現與分析

3.1 首頁

第 3 頁（共 8 頁）

一個網站的首頁是一個文檔，當一個網站服務器收到一臺電腦上網絡瀏覽器的訊息連結請求時，便會向這臺電腦發送這個文檔。當在瀏覽器的位址列輸入域名，而未指向特定目錄或檔案時，通常瀏覽器也會打開網站的首頁。

網站首頁往往會被編輯得易于了解該網站提供的資訊，并引導互聯網用戶瀏覽網站其他部分的內容。這部分內容一般被認為是一個目錄性質的內容，如圖1。

圖1

3.2 網頁設計模塊

為了滿足廣大網頁制作愛好者的學習需求，本網站推出新版的網頁制作教程，該教程使用Dreamweaver CS5作為開發工具，結合老師的網站開發經驗，為大家講解網頁制作的每個環節。希望通過本套課程的學習，大家能靈活運用Dreaweaver完成網站的開發，如圖2。

圖2 3.3 網頁特效模塊

提供包括鼠標類類、文字類、菜單類、背景類、圖形類、播放器等網頁特效代碼，力求做到收集最全網站。可能的關注這方面的最新發展趨勢，不斷更新自己的網站，盡可能的收集最新的網頁特效代碼。如圖3

第 4 頁（共 8 頁）

圖3

3.4 網頁素材模塊

提供各種新式素材包含圖片、動畫、flash、音樂等方便網頁及網站制作時參考即借鑒之用，如圖4。

第 5 頁（共 8 頁）

圖4 3.5 相關軟件下載模塊

提供網站及網頁制作所需的必要工具如Dreamweaver、Flash、Fireworks等相關必備軟件下載，如圖5。

圖5 3.6 作品展示模塊

提供多種多樣名人或企業個人網站供大家學習參考，豐富大家的知識，詳細內容如圖6所示。

第 6 頁（共 8 頁）

圖6 3.7 論壇及留言模塊

論壇又名網絡論壇BBS，全稱為Bulletin Board System（電子公告板）或者Bulletin Board Service（公告板服務）。是Internet上的一種電子信息服務系統。它提供一塊公共電子白板，每個用戶都可以在上面書寫，通過留言的方式可發布信息或提出看法。它是一種交互性強，內容豐富而及時的Internet電子信息服務系統。用戶在BBS站點上可以獲得各種信息服務，發布信息，進行討論，聊天等等如圖7所示。

圖7 四 總結

經過老師耐心細致的指導，及同學之間的相互交流，同時翻閱了大量的資料(包括網上資料、書本及學校的一些相關資料)，經過近一段時間的努力，個人網站的設計制作告一段落。總結這次“揚帆起航-個人網站”開發制作過程，我使用了目前因特網上比較流行的各種靜態制作方法及交互動態網站的制作設計手段，并對初步利用后臺程序完成了網站的動態響應與生成網頁的技術，同時也從中學習了對靜態網頁的處理風格，色彩搭配，頁面導航方面有了一定的經驗。

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

本次設計由于設計時間比較緊，且相關模塊比較多，加之設計經驗的不足，在網站的整體設計及各模塊功能可能設計的不完全，有待于進一步的完善和改進。

第 7 頁（共 8 頁）

參 考 文 獻

[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網頁設計[M]．清華大學出版社．2011．

[5]王寶軍．計算機網絡技術與應用[M]．中國勞動社會出版保障出版社．2002． [6]岳鴻．計算機應用基礎[M]．國防科技大學出版社．2006． [7]宋虹．Photoshop圖形圖像處理[M]．湖南大學出版社．2011． [8]姬付梓．創意設計[M]．大學出版社．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 頁（共 8 頁）