畢業(yè)論文----論個人網站的設計與實現

1、<p>　　北京科技大學遠程與成人教育學院</p><p><b>　　畢業(yè)設計（論文）</b></p><p>　　題 目： 實用網站的設計與實現 </p><p>　　學習中心： 北京ITET培訓中心 </p><p>　　專 業(yè)： 計算機科學與技

2、術 </p><p>　　年 級： 0802 </p><p>　　姓 名： 劉吉惠 </p><p><b>　　設計題目及內容摘要</b></p><p>　　設計題目：論個人網站的設計與實

3、現</p><p>　　內容摘要：Internet的日益興起和以網頁為載體的網絡信息的廣泛傳播和應用，使得網站的建設及網頁制作得到發(fā)展的空間。大有大型企業(yè)的產品推銷、售后服務、解決方案。而小的有形形色色，五彩繽紛的個人網站。這主要是因為很多人已經不滿足僅僅在Internet上的瀏覽信息，而是希望更深入的參與其中，擁有自己的Web網站，這似乎也已經成為一種潮流。</p><p>　　關鍵字：

4、網站 網頁制作 </p><p><b>　　目 錄</b></p><p><b>　　引言4</b></p><p>　　1.1 網站域名的注冊與使用4</p><p>　　1.2 網站建設的相關軟件4</p><p>　　1.3網站的規(guī)劃設計4</p&

5、gt;<p>　　1.3.1網站的欄目設計5</p><p>　　1.3.2 確定網站的框架5</p><p>　　1.4網頁基本構成元素5</p><p><b>　　一、建站須知6</b></p><p><b>　　1、確定主題6</b></p><

6、p><b>　　2、選擇空間6</b></p><p>　　3、網站設計要點6</p><p>　　4、在本地搭建網站服務器平臺6</p><p>　　二、個人網頁的制作7</p><p>　　1、 用Photoshop完成網頁設計7</p><p>　　2. Dreamweave

7、r完成網頁制作8</p><p>　　3、制作時應注意事項10</p><p>　　三、網站的上傳10</p><p><b>　　總結12</b></p><p><b>　　致 謝12</b></p><p><b>　　引言</b>&l

8、t;/p><p>　　1.1 網站域名的注冊與使用</p><p>　　建立一個網站首先要有一個自己的網站地址(網址)，網址是由域名來決定的。因此若想建立網站，首先需要注冊或者轉入一個域名以便命名要建立的網站。隨著Internet的發(fā)展，人們把域名分為幾個大類，分別以不同的后綴結尾：</p><p>　　.com 用于商業(yè)公司</p><p&g

9、t;　　.org 用于組織、協(xié)會等</p><p>　　.net 用于網絡教育</p><p>　　.edu 用于教育機構</p><p>　　.gov 用于政府部門</p><p>　　.mil 用于軍事領域</p><p>　　.cn 中國專用的頂級域名</p>

10、<p>　　因此，在做一個網站以前要先注冊一個好的域名。一個非產品推銷的純信息服務網站，其所有建設的價值，都凝結在其網站域名之上。失去這個域名，所有前期工作就將全部落空。</p><p>　　目前，做個人網站的很多都依賴免費個人空間，其域名也是依賴免費域名指向，如網易的虛擬域名服務，其實這對個人網站的推廣與發(fā)展很為不利，不光是它“適時”開啟的窗口妨礙了瀏覽者的視線和好感，讓人一看就知道是個人網站，而

11、且也妨礙了網頁的傳輸速度。所以，可以花點錢去注冊一個域名，獨立的域名就是個人網站的第一筆財富，要把域名起得形象、簡單、易記。</p><p>　　1.2 網站建設的相關軟件</p><p>　　1、Photoshop</p><p>　　2、Dreamweaver</p><p><b>　　3、Flash</b><

12、;/p><p>　　4、Fireworks</p><p>　　1.3網站的規(guī)劃設計</p><p>　　在進行一個網站設計之前，要先明確網站的風格及特點，這對具體的設計是很有利的。利用制作網站的軟件如dreamweaver進行網頁框架、文字布局、頁面鏈接、動態(tài)效果等設計，也包括利用photoshop或者fireworks等平面設計軟件實現平面設計、靜態(tài)無聲圖片設計，

13、或者利用flash實現動畫效果。</p><p>　　網站的延伸設計。主要包括網站主題的定位、用戶群定位、智能交互、制作策劃、形象包裝和宣傳營銷等。</p><p>　　1.3.1網站的欄目設計</p><p>　　在我們確定了網站的主題和風格后，就應該圍繞主題制作相應的網頁內容，設計相應的題材欄目。</p><p><b>　　設

14、計網站logo</b></p><p>　　網站logo是網站的標志，是站點特色和內涵的集中體現。設計時不僅要考</p><p>　　慮到網站整體發(fā)展到一個高度時相應的推廣活動所要求的各類 效果，同時應</p><p>　　使用能夠讓多數用戶喜歡、印象深刻的造型。</p><p><b>　　設計網站的標準色彩</

15、b></p><p>　　網站給人的第一印象來自視覺沖擊，所以確定網站的標準色彩是相當重要的一步。不同的色彩搭配產生不同的效果，并可能影響到網頁瀏覽者的情緒。網站標準色彩的選擇和確定，是由網站的主題和企業(yè)自身的特點決定的。</p><p>　　所以，在定位網站VI形象時，要明確網站所要傳達的信息、定位網站的用戶群，不要使用過多的顏色和注意網站色差問題等。</p><

16、;p>　　1.3.2 確定網站的框架</p><p>　　網站框架可以使站點鏈接清楚，層次清晰。同時，為以后為以后業(yè)務需要和規(guī)模擴充，提供了方便，以免以后修改整個網站的框架。</p><p>　　1.4網頁基本構成元素</p><p>　　要學會制作網頁，首先需要了解網頁都是由什么元素構成的。</p><p>　　文字：文本是構成網頁的

17、基本元素。一個最簡單的網頁可以只有幾行文本。</p><p>　　圖片：正是有個各種美麗的圖片，網頁才變得多姿多彩。</p><p>　　動畫：如今，網頁上的動畫越來越多，最常用的有GIF動畫、Flash動畫等。</p><p>　　超連接：如上所述，超連接幾乎是必不可少的。一個沒有超連接的網頁，就如同汪洋大海中的一座孤島，失去了與外界的一切聯系。</p>

18、;<p>　　其它元素：還可以在網頁中添加聲音、視頻等元素。</p><p><b>　　一、建站須知</b></p><p><b>　　1、確定主題</b></p><p>　　做個人網站，好多人都喜歡在網頁中放一些自己感興趣的內容，但是個人的能力畢竟有限，網站后期會因為無力維護而導致站點更新緩慢、內容匱

19、乏。所以個人建議在做個人網站時，要選定一個主題。做一個小而精的有自己風格的網站。</p><p><b>　　2、選擇空間</b></p><p>　　個人認為建站初期可以申請免費域名空間，但是到后期為了網站更好的發(fā)展可以考慮去注冊一個域名。</p><p><b>　　3、網站設計要點</b></p>&l

20、t;p>　　制作清晰的網頁鏈接關系。其中導航清晰，布局合理，層次分明，頁面的鏈接層次不需太深，這樣可使瀏覽者在最短的時間內找到需要的東西。</p><p>　　盡量保持風格統(tǒng)一，這樣可以加深瀏覽者對自己網站的印象。</p><p>　　色彩和諧、重點突出。</p><p>　　保持主頁界面的清爽性</p><p>　　動態(tài)不易太多。動態(tài)

21、效果太多會讓瀏覽者眼花繚亂，適當的動態(tài)效果可起到畫龍點睛的作用。</p><p>　　4、在本地搭建網站服務器平臺（安裝以windowsXP為例）</p><p>　　1）將windows XP 系統(tǒng)安裝光盤插入到驅動器里。</p><p>　　2）選擇開始菜單上的設置-控制面板命令，打開控制面板，雙擊添加或刪除程序，打開</p><p>　

22、　3）在左側列表中選擇添加/刪除windows組建</p><p>　　4)選中【internet信息服務（IIS）】</p><p>　　5）單擊下一步，安裝完成后就會出現【windows組件向導】安裝結束對話框（一般默認IIS會被安裝在C盤，集中一個wwwroot文件夾就是瀏覽訪問的默認目錄）</p><p>　　6）打開IIS，如圖。創(chuàng)建一個新的web站點&l

23、t;/p><p>　　從圖中可以看到新建，選擇新建|虛擬目錄，這是就會出現虛擬目錄創(chuàng)建向導的對話框。按照對話框的提示逐步進行下一步的操作。其中虛擬目錄別名就是新建的站點名稱，網站內容目錄就是輸入虛擬目錄的真實位置（即個人網站的所有網站文件）。</p><p>　　7）設置站點屬性 因為是選擇本地計算機作為web服務器，所以可以在URL前綴的文本框中輸入http://127.0.0.1/<

24、;/p><p><b>　　二、個人網頁的制作</b></p><p>　　1、 用Photoshop完成網頁設計</p><p><b>　　1）頁面內容翔實</b></p><p>　　網絡是虛擬的，而網站往往體現的是現實世界中的一個實體，不管是企業(yè)或個人。極富特色、內容翔實、瀏覽順暢、效果獨特的網

25、頁才會使人駐足觀看。</p><p><b>　　2）視覺效果新穎</b></p><p>　　網頁形象要不落俗套，把內容的獨特的元素，如名稱、標志、標準字體、標準色等等。通過這些元素的合理應用，來實現網站形象與個性的塑造提高視覺效果。</p><p><b>　　3）欄目布局明確 </b></p><

26、p>　　頁面合理流暢、環(huán)環(huán)相扣、可信安全，這幾點是一個優(yōu)秀網站的精神所在，也是吸引力的來源。所以在建網站時應把網站內容的層次性和空間性突出顯示出來，使人一眼就能看出網站重點突出，結構分明。</p><p><b>　　4）特殊字體慎用 </b></p><p>　　在photoshop中雖然可以使用任意字體，但是當頁面上傳至網絡空間中，文字是非圖片形式可編輯的時

27、候，誰也不能預測訪問者在他們的計算機上將看到什么。所以為了避免所選擇的字體在訪問者的計算機上不能顯示，特殊字體須謹慎使用。</p><p>　　2. Dreamweaver完成網頁制作</p><p><b>　　站點</b></p><p><b>　　2.1 創(chuàng)建站點</b></p><p>　

28、　要制作一個網站，第一步操作都是一樣的，就是要創(chuàng)造一個“站點”，這樣可以使整個網站的脈絡結構清晰地展現在面前，避免了以后再進行紛雜的管理。</p><p>　　從菜單中選擇“站點/管理站點”在彈出的對話框中選擇“新建”，之后再選擇其中的“站點”，再次彈出一個對話框，在文本框中輸入自己已經想好的網站名稱“myself”。</p><p>　　填好后，單擊“下一步”，進入下一個步驟。由于我要做

29、的是一個靜態(tài)的網頁，所以選擇上面的一項“否，我不想使用服務器技術?！?lt;/p><p>　　單擊“下一步”，進入下一個步驟。</p><p>　　在此選項中有兩個選擇，選擇推薦的“編輯我的計算機上的本地副本，完成后再上傳到服務器”。底下的文本框允許在本地磁盤上指定一個文件夾，Dreamweaver將在其中儲存站點文件的本地副本。單擊該文本框后面的文件夾圖標，新建并指定一個空的文件夾如“E:/

30、website”。之后單擊“下一步“，進入下一個步驟。</p><p>　　這一步是如何設置連接到遠程服務器，彈出式菜單中有6種選擇，這里選擇“無”。而后“下一步”再“完成”，即可。</p><p>　　2.2 創(chuàng)建站點內容</p><p>　　站點創(chuàng)建完成后，就可以創(chuàng)建Web頁來填充站點了。在“右側浮動面板組”中選擇“文件/文件”面板，此時整個網站中沒有任何內容。

31、用鼠標右擊面板中的本地根目錄文件夾。</p><p>　　在彈出的菜單中選擇“新建文件”，新建一個文件后將其命名為“index.htm(或index.html),它就是未來的首頁。</p><p>　　由于“myself”網站并不是只有一個欄目，所以繼續(xù)用鼠標右擊右側，在彈出的菜單中選擇第二項“New Folder(新建文件夾)”。執(zhí)行N操作，新建N個文件夾，并把它們重命名為網站其他欄目的

32、名稱，存放它們各自的內容。之后再次新建1個文件夾，命名為images,用來存放“所有的圖象文件”的內容。</p><p>　　之后在個欄目的文件夾里還要建立想相應的欄目網頁。</p><p><b>　　2.2.1 首頁</b></p><p><b>　　設置首頁布局</b></p><p>　　

33、每個網站都會有一個首頁，就功能上而言，它代表著一個網站的風格與特色，就網站架構上而言，它代表了網站的第一層架構，至于網站上其他Web頁，原則上都必須通過首頁來連接散播出去，可見首頁是多么的重要。</p><p>　　首頁是打開網站后在瀏覽器中顯示的第一個頁面。它是起什么名字通常要視Server端的設置，一般的有index.htm,default.htm或home.htm等，目前主要以index.htm的居多。當然

34、，后綴名為html也是正確的。</p><p><b>　　設置首頁的頁面屬性</b></p><p>　　首先雙擊“文件”浮動面板中的index.htm,進入頁面的編輯窗口。右健單擊空白區(qū)域，在菜單中選擇“頁面屬性”，之后彈出“頁面屬性”對話框，若選擇主菜單“修改/頁面屬性”項，也可以把打開該對話框。</p><p>　　在“頁面屬性”對話框

35、中，左側窗口顯示“分類”，其中包括了“外觀”、“鏈接”、“標題”、“標題/編碼”、“跟蹤圖像”5項，右側區(qū)域則顯示各類中可以設置的項目。</p><p><b>　　查看和編輯頭內容</b></p><p>　　一個網頁文件結構上實際是由兩部分組成，頭(head)內容和主體(body)內容主體內容(body)是文檔的主要部分，也是包含文本和圖像等的可見部分。頭內容(h

36、ead)是除文檔標題外的不可見部分，包含有文檔類型、語言編碼、搜索引擎的關鍵的關鍵字和內容指示器以及樣式定義等重要信息，這些元器并不是每個頁面都需要的，例如，可以僅為主頁提供關鍵字。</p><p>　　下面就以首頁為例，說明怎樣插入較常用的頭( head)內容。</p><p>　　單擊“菜單攔”下面“插入快捷”的下拉列表，選擇其中的HTML類，此時右側將會顯示該類中可以插入的對象快捷按

37、鈕，再次單擊第2個按鈕“文件頭”旁邊的下拉箭頭，會彈出菜單，該項列出的便是即將插入的頭內容。</p><p><b>　　插入圖像</b></p><p>　　圖像是網頁中不可或缺的組成成份，恰當地使用圖像，可以使網站充滿生活生命力與說服力，吸引更多的瀏覽者，加深他們欣賞你網站的意愿。</p><p>　　下面就來詳細介紹對網頁圖像進行處理的操

38、作步驟，以使得它們在保持圖形美麗與網站風格搭配的基礎上，圖片文件能夠變的更小。</p><p>　　首先將光標停留在要插入圖像的位置，然后單擊“菜單欄”下面“插入快健欄”的下拉表，選擇其中的“常用”類，則右側將會顯示該類中可以插入的對象快鍵按鈕。左起第5個即為“圖像：圖像”按鈕，單擊它右側的下拉列表，選擇第1項“圖像”。隨即彈出“選擇圖像源文件”對話框。從計算機磁盤中選擇想要插入的圖像文件，或在URL編輯框中輸入

39、圖像的路徑和名稱。下面的“相對于”下拉表框中，可選擇文件URL地址的類型，如果選擇“文檔”選項，表示圖像地址相對于當前文檔;如果選擇“站點根目錄”選項，表示地址相對于根目錄。最后單擊“確定”按鈕，即可完成插入圖像的操作。</p><p><b>　　插入文本</b></p><p>　　文字是人類語言最基本的表達方式，在網頁中，文本內容也可以說是重要的組成部分，一個網

40、站成功與否，它是最關鍵的因素。在這最關鍵的因素?？韶S富網站的文字內容，并以最最美觀、最整齊的方式放入到網頁中。</p><p>　　2.2.2創(chuàng)建其它網頁</p><p>　　還有其它的幾個網站與主頁的制作相同，一個網頁是圖象和文字的組合。</p><p>　　2.2.3 建立網頁鏈接</p><p>　　網站實際上是由很多網頁組成的，那么網

41、頁之間是如何聯系的呢?這就是網頁的“鏈接”。</p><p>　　“鏈接”，又稱“超鏈接"(Hyperlink),它作為網頁的橋梁，起著相當重要的作用。網頁中的很多對象都可以加入“鏈接”屬性。在Dreamweaver中，如果以“鏈接”的媒介來劃分的話，則“鏈接”可以分為“文字鏈接”、“圖像鏈接”、“圖像地圖鏈接”、“內部鏈接和外部鏈接”、“E-mail鏈接”、“命名錨記鏈接”、“文件下載鏈接”和“跳轉菜

42、單”，共8種。</p><p><b>　　文字鏈接</b></p><p>　　“文字鏈接”即以文字作為媒介的鏈接，它是網頁中最常被使用的鏈接方式，具有“文件小、制作簡單和便于維護”的特點。</p><p><b>　　圖像鏈接</b></p><p>　　“圖像”也是常被使用的鏈接媒體，它和“文

43、字鏈接”非常相似。為圖像加入鏈接，首先應該在網頁中插入“圖像”，有關插入“圖像”或“導航條”按鈕的內容。</p><p>　　E –Mail的鏈接</p><p>　　E-Mail鏈接，是指當瀏覽者單擊該鏈接之后，不是打開一個網頁文件，而是啟動用戶的E- Mail客戶端軟件(如Outlook Express),并打開一個空白的新郵件，供瀏覽者撰寫內容來與網站聯系人聯系，這是一種最方便的互動

44、方式。</p><p>　　建立E-Mail鏈接的步驟如下所述:</p><p><b>　　操作步驟</b></p><p>　　步驟1 將光標停留在頁面右下角要插入E-mail鏈接的位置。</p><p>　　步驟2 選擇“插入快捷欄”中的“常用”分類，單擊左側第2個“電子郵件鏈接”按鈕。</p>&l

45、t;p>　　步驟3 在彈出的“電子郵件鏈接”對話框中有兩個輸入項，分別是“文本”和“E-Mail” 。在“文本”項中輸入鏈接的文字，中文、英文均可，在E-Mail項中輸入網站聯系人的電子郵件地址</p><p>　　步驟4 單擊“確定”按鈕，具有“E-Mail鏈接”屬性的文本就插入到光標所在位置了，按下 Ctrl+S保存網頁，再按下F12預覽查看實際效果。</p><p>　　上面的

46、方法只適用于文本的“E-Mail鏈接”，如果想在其它的對象(如圖像)上也加入這種鏈接，該怎辦呢?下面介紹第2種建立“E-Mail鏈接”的方法。</p><p>　　其實很簡單，與前面講過的圖像加入鏈接的方法基本一樣。先在頁面中需要的地方插入圖像，之后選中圖像，并在“屬性面板”的“鏈接”文本框中輸入如下語句即可----mailto:moumoumou郵箱。與第1種方法不同的是，E-Mail 地址前面增加了mailt

47、o:字樣。用這種方法就可以給圖像等其他對象建立“E-Mail鏈接”了。</p><p>　　3、制作時應注意事項</p><p><b>　　預覽時看不到圖片 </b></p><p>　　有時圖片在編輯狀態(tài)下是好的，而在預覽時或在網頁發(fā)布后無法顯示，究其原因，一個方面可能是路徑問題，另一方面可能就是因為圖片用的是中文文件名而招來的麻煩。如果是

48、路徑的問題，可能是圖片不在站點內，這就需要把圖片存人相應的文件夾中，然后改變圖片的路徑就可以了。如果圖片是在站點內，在預覽時仍看不見圖片，則往往是使用了中文的文件名、目錄名或文件名。解決的方法是把中文名字改為英文字母、數字和下劃線等符號組合成文件名或目錄。</p><p>　　不要忽略頁面屬性的設置</p><p>　　設置左邊界、頂部邊界、邊界寬度和邊界高度。細心的用戶會發(fā)現在沒有進行設

49、置前瀏覽時頁面會在上下、左右，各留一片空白，這塊區(qū)域用戶不能利用，白白浪費了，為了節(jié)省網頁中的寶貴空間，建議把這四個選項都設置為0。</p><p>　　適當變化網頁中的字體</p><p>　　網頁中的字體字號、字距、行距和文字顏色可作些適當變化，以求最美的視覺效果。需要突出的地方可以用不同的字體、字號和不同的顏色表示。字體最好采用系統(tǒng)自帶的字體，因為字體的顯示效果是由瀏覽者的瀏覽器來決

50、定的。許多漂亮的文字，瀏覽器可能并不支持，可以把文字做成圖片的方式來處理，不過這種方法不適合在大段的文字上采用。恰當的運用css樣式表會使文字處理達到事半功倍的效果。但每一頁中的字體要限制在4種以內，過多的字體反而顯得雜亂無序。</p><p><b>　　三、網站的上傳</b></p><p>　　完成網頁制作后，在瀏覽器中輸入http://127.0.0.1訪問一

51、下，檢查一下頁面是否還存在什么問題，尤其是鏈接這一部門。若頁面沒有問題后，就可以將其上傳至申請的服務器了。</p><p>　　個人網站一般采用ＦＴＰ軟件進行上傳文件、更新文件和維護網站。FTP客戶機可以向服務器發(fā)出各種命令，包括下載文件、上傳文件、創(chuàng)建或改變服務器上的目錄。</p><p><b>　　總結</b></p><p>　　在互聯

52、網走進我們的生活之前，沒有人敢夢想擁有自己的報紙、雜志、電臺、電視臺?，F在不同了，互聯網給我們提供了一個“表達自我”的自由天地,你可以擁有自己的新聞郵件，你可以建立自己的個人網站。只要你辦得成功也可以吸引成千上萬的訂戶、讀者,并建立自己在眾多參與者中的權威地位。建立個人網站的基本過程可以分為以下七個環(huán)節(jié) :</p><p>　　1  了解中國網絡個人主頁研究背景與發(fā)展現狀</p><

53、p>　　2  系統(tǒng)需求分析與總體設計</p><p>　　3  熟悉網站開發(fā)模式、工具及環(huán)境</p><p>　　4　把自己的作品和想要展示的內容制作成網頁。</p><p>　　5  使用動態(tài)網頁技術，實現動態(tài)內容更新。</p><p>　　6  認真地選取測試用例，進行交叉測試</p&g

54、t;<p>　　7  網站的后期完善、宣傳及發(fā)展方向</p><p>　　其中，網頁制作和使用動態(tài)網頁技術實現動態(tài)內容更新是網站開發(fā)的核心內容。通過這次的學習過程，讓我鞏固了以前所學的知識。同時，也讓我看到自己的欠缺之處，如對使用動態(tài)網頁技術，實現動態(tài)內容更新。在這塊是我學習不足的地方，也是我以后重點學習的地方。</p><p><b>　　致 謝<