個人網(wǎng)站設計論文[共18頁]

合肥經(jīng)濟技術職業(yè)學院 畢業(yè)設計論文 （ 2011 — 2012 學年） 論文（設計）題目_____________________________________ 院 系 名 稱___________________________________ 專 業(yè) 班 級______________________________________ 學 生 姓 名______________________________________ 學 號______________________________________ 指 導 教 師______________________________________ 日期 2012年 月 日 目 錄 摘 要 3 引 言 4 第一章 網(wǎng)站制作的基礎知識 5 1.1建站工具 5 1.2網(wǎng)站建設的三個階段 5 1.3網(wǎng)站設計步驟 5 第二章 制作網(wǎng)頁 7 2.1 建立站點 7 2.2 制作首頁 7 2.2.1 頁面設置 7 2.2.2 網(wǎng)頁布局 8 2.2.3 插入圖像 9 2.2.4 插入多媒體 9 2.2.5插入文本 10 2.3 建立子網(wǎng)頁 10 第三章 網(wǎng)頁鏈接 11 3.1文本鏈接 11 3.2圖像鏈接 12 3.3郵件鏈接 12 3.4錨點鏈接 12 第四章 HTML語言 14 4.1HTML語言結構 14 4.2 網(wǎng)頁的基本代碼 14 4.3表格的基本語法 15 4.4超鏈接代碼 15 第五章 網(wǎng)站維護和測試 16 總 結 17 參考文獻 18 摘 要 隨著經(jīng)濟社會的發(fā)展，計算機已被應用到社會生活的各個領域。與此同時，互聯(lián)網(wǎng)作為信息技術的通信橋梁連接著全球的計算機，而網(wǎng)站作為網(wǎng)絡信息主要的表現(xiàn)形式而且還是互聯(lián)網(wǎng)信息的主要承載者，在Internet上表現(xiàn)出其及其重要的地位，并發(fā)揮著其及其重要的作用。無論是在國內還是國外都得以迅速的發(fā)展和壯大，并被人們重視和關注。互聯(lián)網(wǎng)已經(jīng)徹底的改變了世界，互聯(lián)網(wǎng)的世界里蘊藏著無限的可能，在這種情況下，各行各業(yè)及其個人、單位、工廠、企事業(yè)等等在網(wǎng)上構筑屬于自己的網(wǎng)絡信息平臺，保護自己的網(wǎng)絡資源并在互聯(lián)網(wǎng)上開辟自己的市場和消費群體，以及構造自己的數(shù)字化世界和加強全球范圍內不同地域的人們聯(lián)系交流等等活動也就顯的日益重要。于是各種各樣的網(wǎng)站便如雨后春筍般地出現(xiàn)魚龍混雜且良莠不齊。Internet的日益興起和以網(wǎng)頁為載體的網(wǎng)絡信息的廣泛傳播和應用，使得網(wǎng)站的建設及網(wǎng)頁制作得到發(fā)展的空間，大至大型企業(yè)的產品推銷、售后服務、解決方案，小至個人Web頁面開發(fā)，形形色色，五彩繽紛，網(wǎng)站建設和網(wǎng)頁制作也成為計算機網(wǎng)絡領域最熱門的話題。 基于如今社會的需要，本論文主要介紹怎樣制作一個靜態(tài)的個人網(wǎng)站。并且在建立個人網(wǎng)站的過程中逐漸理解和加強大學這幾年所學習的關于制作網(wǎng)站的各種知識點。在我個人的理解中，制作一個具有特色的個人網(wǎng)站，能夠有自己的個性和特點。這樣才能吸引人。只有一個目標，那就是做好自己。 關鍵詞： 個人 設計 網(wǎng)站 引 言 人類已進入21世紀,科學技術突飛猛進,經(jīng)濟知識和信息產業(yè)初見端倪,特別是信息技術和網(wǎng)絡技術的訊速發(fā)展和廣泛應用,對社會的政治,經(jīng)濟,軍事,文化等領域產生越來越深刻的影響,也正在改變人們的工作,生活學習,交流方式。信息的獲取,處理,交流和應用能力,已經(jīng)成為人們最重要的能力之一。 在不久的將來知識經(jīng)濟將占世界經(jīng)濟發(fā)展的主導地位,國家綜合國力和國際競爭能力越來越取決于教育發(fā)展,科學技術和知識創(chuàng)新的水平,教育在經(jīng)濟和社會發(fā)展過程中將呈現(xiàn)出越來越突出的重要作用。 隨著Internet的出現(xiàn)，網(wǎng)絡正在改變整個世界，由于Internet具有傳播信息容量極大、形態(tài)多樣、迅速方便、全球覆蓋、自由和交互的特點，已經(jīng)發(fā)展成為新的傳播媒體，而將教育和網(wǎng)絡相結合，將會更好的推動教育的發(fā)展?，F(xiàn)在不僅很多大學和眾多企業(yè)部門都已經(jīng)建立了自己的網(wǎng)站，而且個人網(wǎng)站也如雨后春筍般大量的出現(xiàn)，通過計算機網(wǎng)絡實現(xiàn)宣傳、交流及資源的整合 第一章 網(wǎng)站制作的基礎知識 1.1建站工具 編輯網(wǎng)頁的工具有很多，但是我們一般用的是Macromedia公司的網(wǎng)頁制作三劍客來制作網(wǎng)頁。三劍客分別為Dreamweaver CS3、fireworks、flash。 1.2網(wǎng)站建設的三個階段 （1）、網(wǎng)站的定位 即網(wǎng)站設計的最終目標及指導方針。確立網(wǎng)站的主題，解決為誰設計、吸引誰，交流什么。 （2）、制作網(wǎng)頁 通過網(wǎng)頁設計體現(xiàn)網(wǎng)站整體協(xié)調一致的風格。網(wǎng)站的色彩基調、配色方案、頁面色彩的格調、頁面構圖及圖片、動畫的處理等都要反復研究。方便的導航設計使用戶易于訪問站點中的資源。 （3）、網(wǎng)站的發(fā)布與維護 完成對網(wǎng)站所有文件的測試并上傳到服務器，進行網(wǎng)站的推廣和宣傳，建立信息的收集反饋系統(tǒng)，及時更新網(wǎng)頁。 1.3網(wǎng)站設計步驟 （1）、設定網(wǎng)站主題并搜集資料 分析網(wǎng)站的訪問對象是什么樣的群體，確定網(wǎng)站要為訪問者提供什么樣的服務。圍繞網(wǎng)站設計要達到的目標，進一步?jīng)Q定網(wǎng)站展示的內容和網(wǎng)站要實現(xiàn)的功能。 （2）、建立站點的目錄結構 用來分類保存網(wǎng)站中的不同的資源，精心設計的網(wǎng)站目錄結構有利于網(wǎng)站類容的擴充和移植需要。很多初學者往往不注意建立站點的目錄結構，所有的文件都保存在一個目錄中，這給今后的網(wǎng)站維護和擴充帶來了很大的困難。例如，files保存非index之外是文件，images保存圖片文件，sounds保存聲音文件等等。 （3）、建立網(wǎng)頁的鏈接關系 網(wǎng)頁的鏈接結構要層次清晰、訪問方便快捷，就要設計網(wǎng)站中網(wǎng)頁的鏈接關系。用最少的點擊打開網(wǎng)站內的任何一個網(wǎng)頁，為用戶提供最便捷的服務。 （4）、頁面設計與網(wǎng)頁制作 網(wǎng)站圖標、網(wǎng)頁標題、導航欄設計、各頁風格、頁面規(guī)劃、便捷的鏈接、合理使用框架、巧用背景色、合適的圖片、網(wǎng)頁空白。 （5）、網(wǎng)站測試 已經(jīng)建好的一個設計精美的網(wǎng)站在發(fā)布之前要進行嚴格的測試。如果在測試過程中發(fā)現(xiàn)了錯誤，就要及時修改，在準確無誤后，可正式在Internet上發(fā)布。 （6）、網(wǎng)站發(fā)布 把制作好的網(wǎng)站發(fā)布到自己的服務器系統(tǒng)上，也可以使用上傳工具把網(wǎng)站發(fā)布到ISP提供的虛擬主機上。在國外或國內網(wǎng)站提供免費的主頁空間和域名，上傳后就可以使用瀏覽器訪問自己的網(wǎng)站了 （7）、推廣宣傳與后期維護 網(wǎng)頁上傳后，及時更新網(wǎng)站內容，為瀏覽者提供豐富、及時的信息。網(wǎng)頁的更新速度是衡量一個網(wǎng)站的主要目標。同時為了增加網(wǎng)站的訪問量，要采用各種方法加以推廣。例如在搜索引擎上注冊，發(fā)布網(wǎng)絡廣告提供免費服務或者使用傳統(tǒng)的促銷媒介等等方式來推廣網(wǎng)站。 第二章 制作網(wǎng)頁 2.1 建立站點 選擇“站點”，單擊“管理站點”，單擊“新建”，選擇站點。如圖（2—1）： 圖2—1 在按上圖完成所填部分，在面板組就會出現(xiàn)站點等文件夾了。在右邊的面板組中選擇“站點”文件名，右擊“新建文件”，命名為“index”，完成首頁的命名。 2.2 制作首頁 2.2.1 頁面設置 首先雙擊“index.html”,進入頁面的編輯窗口。右健單擊空白區(qū)域，在菜單中選擇“頁面屬性”，之后彈出“頁面屬性”對話框，若選擇主菜單“修改/頁面屬性”項，也可以把打開該對話框。在“頁面屬性”對話框中，左側窗口顯示“分類”，其中包括了“外觀”、“鏈接”、“標題”、“標題/編碼”、“跟蹤圖像”5項，右側區(qū)域則顯示各類中可以設置的項目。首頁設置的屬性如圖（2—2）所示： 圖2—2 2.2.2 網(wǎng)頁布局 在網(wǎng)頁布局中一般采用表格來進行布局。下面簡單介紹下表格的布局方式。通過單擊“插入”面板中的“常用”選項中的“表格”來打開“表格”對話框，對話框可分為“表格大小”、“頁眉”、“輔助功能”三部分。對表格的各項屬性設置如圖（2—3）所示： 圖2—3 2.2.3 插入圖像 圖像是網(wǎng)頁中不可或缺的組成成份，恰當?shù)厥褂脠D像，可以使網(wǎng)站充滿生活生命力與說服力，吸引更多的瀏覽者，加深他們欣賞你網(wǎng)站的意愿。首先將游標停留在要插入圖像的位置，通過單擊“常用”欄中的“圖像”的下拉按鈕，單擊第一個“圖像”按鈕，隨即彈出“選擇圖像源文件”對話框。從計算機磁盤中選擇想要插入的圖像文件。如圖（2—4）所示： 圖2—4 2.2.4 插入多媒體 將光標移到要插入Flash動畫的位置，選擇“插入”面板中的“常用”選項卡單擊“媒體”右側的命令，再單擊第一個“Flash”選項。再從打開選擇文件對話框中選擇你所需要的Flash動畫（*.swf），調整Flash 動畫的大小，既可以手動調整，也可以在下面的屬性里添上我自己事先設置好的大小，如圖（2—5）所示,在瀏覽器中，F(xiàn)lash動畫才可以被看到，要想看看效果的話，只有按F12預覽下。 圖2—5 2.2.5插入文本 文字是人類語言最基本的表達方式，在網(wǎng)頁中，文本內容也可以說是重要的組成部分，它是最關鍵的因素。插入文本的兩種方式：一種是在網(wǎng)頁編輯窗口中直接用鍵盤敲入文本；另一種是復制文本的方式。直接使用Dreamweaver的文本復制功能，將大段的文本內容拷貝到網(wǎng)頁的編輯窗口來進行排版的工作，具體步驟如下：打開文本編輯軟件（如Microsoft Word），選中要復制的文本，執(zhí)行菜單“編輯/復制”命令或直接用快捷鍵Ctrl+C，之后切換回Dreamweaver,將游標停留在插入文本的位置，執(zhí)行主菜單“編輯/粘貼”命令或直接使用快捷鍵Ctrl+v,即可將大段的文本快速粘貼到網(wǎng)頁中。 2.3 建立子網(wǎng)頁 制作子網(wǎng)頁的一般步驟和首頁的步驟差不多。如果說你的首頁中有標題的話，那么在子網(wǎng)頁中也一定要和首頁的位置是一樣的。在子網(wǎng)頁中一般需要大量的文字敘述或者圖片，這就需要做好細節(jié)工作了。 第三章 網(wǎng)頁鏈接 網(wǎng)站實際上是由很多網(wǎng)頁組成的，那么網(wǎng)頁之間是如何聯(lián)系的呢？這就是本章要講的內容----網(wǎng)頁的“鏈接”。“鏈接”，又稱“超鏈接",它作為網(wǎng)頁的橋梁。網(wǎng)頁中的很多對象都可以加入“鏈接”屬性。在Dreamweaver 中，如果以“鏈接”的媒介來劃分的話，則“鏈接”可以分為“文本鏈接”、“圖像鏈接”、“圖像地圖鏈接”、“內部鏈接和外部鏈接”、“E-mail鏈接”、“錨記鏈接”、“文件下載鏈接”和“跳轉菜單”，共8種。下面我所介紹將是在本網(wǎng)站中所能用到的鏈接方式。 3.1文本鏈接 “文字鏈接”即以文字作為媒介的鏈接，它是網(wǎng)頁中最常被使用的鏈接方式，具有“文件小、制作簡單和便于維護”的特點。接下來結合我的個人網(wǎng)站為實例，來講解如何為文字建立“鏈接”。 將已經(jīng)制作完成的首頁的各個子網(wǎng)頁準備好。在Dreamweaver 中打開首頁，之后反白選取作為“鏈接”的文字。觀察“屬性面板”，其中包括一個“鏈接”文本框和“目標”文本框。接下來需要把鏈接的位址加入到文本框中。 在“鏈接”文本框下面還有一個“目標”下拉列表，從中可以選擇鏈接網(wǎng)頁顯示的窗口方式，共有4種。（“目標”文本框有四個選項。分別為-blank 、-parent 、-self或 top。）點擊“blank”表示鏈接目標出現(xiàn)在新打開的窗口。還可以設置一些“鏈接”的屬性，單擊“屬性面板”中的“頁面屬性”，選擇其中的“鏈接”分類，可以進行的設置有“鏈接字體”、“大小”、“鏈接顏色”、“變換圖像鏈接”顏色、“已訪問鏈接”顏色、“活動鏈接”顏色及“下劃線樣式”。至此，第1個欄目的鏈接就制作完畢了，按下Ctrl+S保存網(wǎng)頁，再按下F12預覽，測試一下，當鼠標放在你所鏈接的文字上時將變成手形，并且瀏覽器窗口下面的狀態(tài)區(qū)中會顯示鏈接到的網(wǎng)頁的位址，單擊文字，頁面會立即跳轉到第1個欄目中，這表示鏈接已經(jīng)制作成功了。 3.2圖像鏈接 “圖像”也是常被使用的鏈接媒體，它和“文字鏈接”非常相似。為圖像加入鏈接，首先應該在網(wǎng)頁中插入“圖像”，有關插入“圖像”或“導航條”按鈕的內容，接下來以我的網(wǎng)站為例，講解如何建立“圖像鏈接”。 首先仍然要準備好已經(jīng)制作完成的首頁和各個欄目的頁面在Dreamweaver中打開網(wǎng)站的首頁，之后選取要制作“鏈接”的圖像。觀察“屬性面板”，在“鏈接”文本框中輸入鏈接的文字位址。如果有需要，可以在“目標”下拉列表中選擇“鏈接”網(wǎng)頁顯示的窗口方式，分別為-blank 、-parent 、-self或 top。至此，第1個欄目的圖像鏈接就制作完畢了，按下Ctrl+S保存網(wǎng)頁，再按下F12預覽，測試一下，將鼠標放在“主頁”上時將變成手形，同時瀏覽器窗口下面的狀態(tài)區(qū)中會顯示出鏈接到的網(wǎng)頁的地址，并且會顯示出“替代”文本“動畫制作”，單擊文字，頁面會立即跳轉，這表示鏈接已經(jīng)制作成功了。同理，按照以上步驟，再為其它幾幅圖像制作指向對應欄目的鏈接。如果有需要，在欄目頁面中制作“返回首頁”的鏈接，使得單擊后可以跳轉回首頁。 3.3郵件鏈接 為了保持訪問者與網(wǎng)頁制作人員之間的聯(lián)系，應該建立指向電子郵件的鏈接。選擇要鏈接的元素。單擊“插入”面板“常用”選項卡中的“電子郵件鏈接”圖標，在打開的對話框中輸入E—mail地址就行了。如圖（3—1）所示?；蛘咴凇版溄印蔽谋究蛑休斎搿癿ailto:”加上郵件地址也可以的。按下Ctrl+S保存網(wǎng)頁，再按下F12預覽，單擊E—mail地址，看看能不能跳轉到空的網(wǎng)頁。 圖3—1 3.4錨點鏈接 錨點是在網(wǎng)頁文檔中設置的標記，這些標記通常放在文檔的特定處。錨點鏈接可以快速將訪問者帶到指定的位置。創(chuàng)建到錨點的過程分為兩步：第一步創(chuàng)建命名錨記；第二步創(chuàng)建到命名錨記的鏈接。 首先將光標放在你想要插入錨點的位置。選擇菜單“插入”中的“命名錨記”，在彈出的對話框中輸入你想命名的錨記的名稱，如圖（3—2）所示。錨記的名稱不能為漢字。單擊“確定”按鈕。然后在網(wǎng)頁文檔中選擇要建立鏈接的文本，之后在“屬性”面板的“鏈接”文本中輸入“#錨記名稱”。按下Ctrl+S保存網(wǎng)頁，再按下F12預覽，看看單擊你所錨點的文本，能不能跳轉到你想要的位置。可以的話，至此，整個“錨點鏈接”的實例就全部完成了。 圖3—2 第四章 HTML語言 4.1HTML語言結構 HTML是超文本標記語言的縮寫。它使用一些寫在<>中的標記對文本格式、特性等進行描述，形成的文件稱為超文本文件。通過瀏覽器解釋標記的含義，顯示文件的內容。下面來介紹一下網(wǎng)頁的HTML代碼結構: <!......>標記用于定義注釋的內容，注釋的內容在瀏覽器中不顯示。 <html>......</html>標記定義HTML文件（網(wǎng)頁），用于瀏覽器識別網(wǎng)頁文件。網(wǎng)頁文件的所有內容都在<html>......</html>標記中。 <head>......</head>標記定義網(wǎng)頁的頭部信息。頭部定義包括網(wǎng)頁的簡介和為搜索引擎提供相關信息等內容。 <title>......</title>標記用來定義網(wǎng)頁的標題，網(wǎng)頁的標題顯示在瀏覽器的標題欄中，也用于搜索引擎的按標題查找。此標記位于<head>......</head>標記中。 <body>......</body>標記中定義的內容是頁面正文。標記中包含的文本如果不設置格式標示符，瀏覽器將忽略所有空格和回車。 4.2 網(wǎng)頁的基本代碼 <hn>......</hn>標題標記，添加在文本的兩邊會使文本顯示出不同的標題風格。 <p>......</p>段落標記，定義文本的段落。 <br>換行標記。 <hr>水平線標記，使網(wǎng)頁中出現(xiàn)分隔線。 <address>......</address>標記用來定義網(wǎng)頁頁腳的版權信息，其中內容是傾斜的。 <center>......</center>標記是在該標記范圍內的內容強制居中對齊。 4.3表格的基本語法 <table width="75%"border="1"> <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> 表格的所有內容都在<table>......</table>中，表格的行數(shù)有<tr>......</tr>標記的個數(shù)確定，表格的列數(shù)有<td>......</td>的個數(shù)所確定。單元格中的內容都在<td>......</td>中。 4.4超鏈接代碼 超鏈接是通過<a>......</a>標記定義的，定義文本超鏈接或圖片超鏈接是必須指定所鏈接的目標位置。通過<a>標記的href屬性的值來確定鏈接的目標位置。格式為： <a href=目標頁面文件名>描述文字</a> <html><head><title>文字鏈接</title></head><body><p><a href-“dh.html”target=”-blank”></a></p></body></html> href:是<a>標記的一種屬性，該屬性中的URL等于鏈接目標文件的地址。Target:也是<a>標記的一種屬性，相當于Dreamweaver“屬性面板”中的“目標”，它的值等于-blank,效果是在新窗口中打開。 如果想要進行圖片超鏈接的話，只需要像這樣就可以了。<a href="dh.html"target="-blank"><img src="images/dh.jpg"></a>的標記中插入圖片文件和該圖片文件所鏈接的目標位置。 第五章 網(wǎng)站維護和測試 網(wǎng)站建成后并不意味著網(wǎng)站建設的結束，網(wǎng)站內容需要不斷更新， 并且網(wǎng)站發(fā)布前要進行細致周密的測試，以保證正常瀏覽和使用。主要測試內容： （1）、服務器穩(wěn)定性、安全性。 （2）、程序軟件的測試。 （3）、網(wǎng)頁兼容性測試，如瀏覽器、顯示器。 （4）、根據(jù)需要的其他測試。 網(wǎng)站發(fā)布后也要定時的對網(wǎng)站進行維護，以保證網(wǎng)站的正常瀏覽和使用。主要的維護內容有： （1)、服務器及相關軟硬件的維護，對可能出現(xiàn)的問題進行評估，制定響應時間。 （2）、數(shù)據(jù)庫維護，有效地利用數(shù)據(jù)是網(wǎng)站維護的重要內容，因此數(shù)據(jù)庫的維護要受到重視。 （3）、內容的更新、調整等。 （4）、制定相關網(wǎng)站維護的規(guī)定，將網(wǎng)站維護制度化、規(guī)范化。 總 結 在本次設計的全過程中，我對四年所學的知識有了一個比較系統(tǒng)的認識和理解。涉及了各方面的知識，大大擴展了我的知識面，同時是我學會了如何使用所學的知識去解決一些實際的問題。 在設計中我深知自己掌握的知識還遠遠不夠，掌握的一些理論知識應用到實踐中去，總會出現(xiàn)這樣或那樣的問題，不是理論沒有掌握好，而是光知道書本上的知識是遠遠不夠的，一定要把理論知識和實踐結合起來。把學到的知識應用到時間中去，多做多練，才可以把理論的精華發(fā)揮出來。知識不是知道，了解就好，一定要去應用它，發(fā)展它，讓它在現(xiàn)實生活中得到充分的應用，從而解決一些問題，這才是學習的根本目的。而且知識又不是單一的，它是互相聯(lián)系的，學科與學科之間都有著內在的聯(lián)系。計算機是一門非常復雜且龐大的學科，一項課題往往需要多項技術才可以完成的。在設計階段，通過對課題的深入分析與研究，迫使我對技術有了一定的了解。 計算機技術的高速發(fā)展，使我深深地認識到只有不斷的加強學習，才能在計算機技術方面不至于被淘汰，今后，我還要加強學習，努力使自己成為一位專業(yè)的計算機人員，為我自己所從事的工作服務。 參考文獻 （1）、姜楠,完美網(wǎng)頁設計與制作,中國青年出版社, 2004年5月。 （2）、王映雪等編著作,HTML網(wǎng)頁制作,上海科學普及出版社， 2006。 （3）、雁騰創(chuàng)作室編,網(wǎng)頁制作方法與技巧,機械工業(yè)出版社， 2009。 （4）、丁淼,網(wǎng)頁設計與制作,東南大學出版社 （5）、David Karlins，Build Your Own Web Site [M]，McGraw-Hill Osborne Media，2003.1 （6）、Dan Suciu, Gottfried Vosen，The World Wide Web and databases，Springer，2001.1 17