第一篇：基于PHP的個人網站設計與實現論文

摘要:隨著互聯網的迅猛發展,網站已經被應用到生活的各個領域,與人們的生活融為一體,息息相關.本文通過對個人網站的系統分析、系統設計、系統實施等步驟,詳細介紹了應用PHP動態網頁技術開發個人網站的設計與實現.關鍵詞:個人網站;系統分析;PHP動態網頁技術

現階段,伴隨互聯網迅猛發展和普及率的穩步提升,人們已經把生活與互聯網融為一體,互聯網成為人與人,人與社會之間交流的一種重要形式.而個人網站,恰好是世界互聯網迅猛發展過程中的必然產物之一,人們通過設計開發個人網站,不僅可以將個人的喜好、某種服務或商品等相關信息,滲透到互聯網中,還可以運用個人網站樹立個人的網絡形象,搭建起一個個人推薦、展現自我、互動交流的網絡平臺,縮短人與人、人與社會之間的距離.1系統分析

在個人網站的設計開發過程中,要做好網站的需求分析,確定網站的開發語言和系統數據庫.本次主要研究基于PHP開發環境的個人網站系統,通過PHP技術與My SQL數據庫相結合,在互動性極強的互聯網平臺基礎上,實現個人網站的功能框架,讓用戶在瀏覽器端方便、快捷的訪問網站系統,瀏覽自己所需要的相關信息,這樣不僅使文檔的保存和管理提供了極大的方便,還大大提高了網頁的互動性,增強了網站系統的用戶體驗.1.1理論研究基礎.個人網站是由文章日志、相冊圖片、個人信息、留言板等諸多功能于一體的網絡平臺.個人網站以個人為中心,建立一個完全屬于自己的可定制的個性化網絡平臺,凸顯其個性的需求,簡便的操作,利用互聯網的特性幫助個人進行全面的信息展示,以多種形式達到對信息獲取、組織、思考、表達、共享和交流的目的.通過網友對文章的評論,在留言板進行留言,傾聽來自互聯網的聲音,達到自己與他人交流互動的效果.1.2技術層面的支持.在進行動態網頁制作和網站系統設計與開發時,PHP開發成為了今天使用的主流.由于PHP是一種通用的開源腳本語言,吸收了多種開發語言的特點,使用方便,操作簡單,所以贏得了很多網頁設計開發者的青睞.PHP集成在HTML和腳本語言中,其工作界面簡單,入門門檻比較低,代碼簡潔,運行速度快,執行效率高,使用廣泛,幾乎支持所有流行的數據庫以及操作系統,PHP所具有的強大功能使個人網站具有更好的網絡平臺操作性和交互性.2個人網站的開發工具

本網站的開發使用Dreamweaver、Photoshop、Flash和Fireworks軟件進行網頁架構、動畫效果及圖片處理.3個人網站的開發設計

3.1確定網站的主題.對于網站的設計與開發,首先要確定網站的主題.網站的主題要選擇恰當,做到定位小而精.如果在網站主題的定位過程中,不夠準確,盲目設計,隨心所欲,那么網站就會讓用戶感覺到主題不突出,這不僅造成開發者的勞動浪費,還會使網站失去亮點,對網站將來的推廣以及運營過程帶來重重困難.因此,準確把握網站的主題在整個網站設計開發過程中十分重要,與日后網站的發展息息相關.個人網站主要展示個人所想要宣傳的信息,以個人的興趣愛好為中心,圍繞隨筆日記和圖片相冊來展示個人生活、情感、工作等內容.3.2確定網站的形象.網站的形象在網站的設計與開發過程中占有十分重要的地位.網站的形象會影響網站訪問者的第一印象,網站中不同的色彩搭配會產生不同的效果,不同的效果會形成不同的視覺沖擊,從而影響網站訪問者的情緒.在網站設計過程中,會涉及到網站中的很多元素搭配,如網站標志、網站色彩、網站字體和圖片等元素,不同的元素組合到一起.同時,網站中各種元素的布局、模塊分類還會影響到網站的整體質量.一個設計合理的網站,其內容都在很大程度上考慮了大多數用戶操作使用網站的習慣,讓網站與用戶更好的結合.良好的網站形象可以使網站內容鮮明,突出網站的主題,達到讓用戶操作便捷、一目了然的效果,明確的感受到網站的獨有特色,為網站的推廣和運營工作打了堅實的基礎.3.3優化網站頁面布局.網站的效果和特點由網站本身的功能決定,網站的頁面布局影響著最終的用戶體驗,因此,網站的頁面布局在網站系統開發過程中起到了至關重要的作用.在頁面布局過程中,要遵循以下幾點:

3.3.1確定網站頁面的寬度.在網頁結構定位時,有一個很重要的參數需要確定,即網頁的寬度.確定網頁寬度通常有固定像素模式和顯示屏自適應模式.隨著用戶習慣的變化和大眾使用的顯示器尺寸的變化,網站頁面的寬度應該遵循最流行、最受歡迎的頁面尺寸.3.3.2頁面頭部和底部布局.在個人網站系統的頭部與底部布局中,以頁面分離方式,通過頭部文件和底部文件分別對頁面的頭部與底部進行統一布局和控制,不同頁面通過調用的方式來實現頁面的精準布局與控制.3.3.3頁面的主要內容布局.傳統的網站大都使用基于表格的布局顯示頁面信息,雖然表格很容易創建,但是表格也會生成大量難閱讀和維護的代碼,在網頁實際的瀏覽過程中也存在著一定兼容性問題.所以本網站在頁面的主要內容布局中,采用DIV層與層疊樣式表相結合的布局方式,實現網頁設計的靈活控制,對網站內容進行結構、表現與行為的分離.內容的表現形式,要清晰簡潔,讓用戶在瀏覽訪問過程中一目了然.3.4建立個人網站系統的數據庫.本個人網站系統的數據庫采用My SQL數據庫.在WEB應用方面My SQL是最好的RDBMS(Relational Database Management System:關系數據庫管理系統)應用軟件之一.My SQL關聯數據庫可以將數據保存在不同的表中,而不是將所有數據放在一個大倉庫內,不但訪問速度快,靈活性也很強.My SQL所使用的SQL語言是用于訪問數據庫的最常用標準化語言.My SQL軟件采用了雙授權政策,它分為社區版和商業版,由于其體積小、速度快、總體擁有成本低,尤其是開放源碼這一特點,一般中小型網站的開發都選擇My SQL作為網站數據庫.由于其社區版的性能卓越,搭配PHP和Apache可組成良好的開發環境.3.5順應移動互聯網的發展趨勢.隨著寬帶無線接入技術和移動終端技術的飛速發展,人們迫切希望能夠隨時隨地乃至在移動過程中都能方便地從互聯網獲取信息和服務,移動互聯網應運而生并迅猛發展.在個人網站系統開發過程中,也要在移動互聯網中部署各個節點,把網站系統的移動版本優化、完善,以此增強用戶體驗,捆綁更多的用戶,為個人網站后期的推廣運營奠定基礎.4結束語

總之在個人網站系統設計開發過程中,要在實現網站功能的同時,始終以用戶體驗為中心,增強網站的交互性設計.只有讓用戶認可,符合用戶的要求,網站的后期運營才能有更好的發展,個人網站才能實現它獨有的價值.參考文獻:

[1]楊選輝.網頁設計與制作教程[M].北京:清華大學出版社,2009.[2]劉智勇.Java Script開發技術大全[M].北京:清華大學出版社,2009.[3]鄭婷.個人網站設計[D].東北大學,2012.[4]劉增杰,姬遠鵬.精通PHP+MYSQL動態網站開發[M].北京:清華大學出版社,2013.[5]陳光鋒.玩賺你的網站[M].北京:機械工業出版社,2010

第二篇：論文：個人網站的設計與實現

個人網站的設計與實現

前 言

隨著國際互聯網的普及，很多人已經不滿足僅僅在Internet上的瀏覽信息，而是希望更深入的參與其中，擁有自己的Web網站，這似乎已經成為一種潮流。如果說個人建立網站是為了追求時尚，那么企業建立網站就是必然的選擇了。

無論是專業的，還是業余的，很多人對網頁制作頗感興趣。事實上制作一個簡單的網頁并不困難，會使用Word的人都可以勝任。但想做出超凡脫俗的網頁就不那么容易了，而Dreamweaver卻可以滿足你的愿望，它是Macromedia公司開發的集網頁制作和網站管理于一身的所見即所得的網頁編輯器。

同樣出自Macromedia公司的Flash,Fireworks在制作網站的過程中起到了錦上添花的作用，是個人網站實現的好幫手，在制作網站的時候經常會用到這些軟件。

本文有五章，我來由淺到深介紹個人網站的設計與實現。

摘 要

在互聯網走進我們的生活之前，沒有人敢夢想擁有自己的報紙、雜志、電臺、電視臺。除了政策上的制約外，一個人也根本沒有操作一份傳播媒體的能力。現在不同了，互聯網給我們提供了一個“表達自我”的自由天地,你可以擁有自己的新聞郵件，你可以建立自己的個人網站。只要你辦得成功也可以吸引成千上萬的訂戶、讀者,并建立自己在眾多參與者中的權威地位。建立個人網站的基本過程可以分為以下七個環節 : 1 了解中國網絡個人主頁研究背景與發展現狀 2 系統需求分析與總體設計 3 熟悉網站開發模式、工具及環境 把自己的作品和想要展示的內容制作成網頁。5 使用動態網頁技術(ASP)，實現動態內容更新。6 認真地選取測試用例，進行交叉測試 7 網站的后期完善、宣傳及發展方向

其中 ,網頁制作和使用動態網頁技術(ASP)實現動態內容更新是網站開發的核心內容。

關鍵詞：網頁、制作、訪問、鏈接 Abstract Enters before our life in the Internet, nobody dares to vainly hope for has own newspaper, the magazine, the broadcasting station, the television station.Besides the policy in restriction, a person simply has not also operated dissemination media the ability.Now has been different, Internet has provided to us “the expression” free world,You may have own news mail, you may establish own individual website.So long as you also manage the success to be possible to attract the tens of thousands of subscribers, the reader,And establishes oneself in the multitudinous participant's authoritative status.Establishes individual website the unit process to be possible to divide into following seven links: 1、understands the Chinese network individual main page research background and the development present situation 2 systems demands analysis and system design 3 familiar websites developments pattern, tool and environment 4 and wants own work the content which demonstrated to manufacture the homepage.5 uses dynamic homepages technology(ASP), realization dynamic content renewal.6 earnestly selects measured the test example, carries on the overlapping test 7 websites later periods consummate, the propaganda and the development direction Among them,The homepage manufacture and the use dynamic homepage technology(ASP)realizes the dynamic content renewal is the website development core content.Key word: Homepage, manufacture, visit, link

第一章 預備知識

1.1 什么是Internet Internet的中文名為“國際互聯網”，又稱“因特網”。

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

要了解Internet，就必須先了解局域網。我們可以將同一地點的許多計算機使用網線連接在一起，構成一個高效率的計算機網絡，所有處于網絡內的終端機或電腦都能享受網絡內所有的資源，比如程序，圖文資料等。這種計算機網絡因為一般都局限在一定區域中，我們稱之為“局域網”（Local Area Network,簡稱LAN）,它是在日常工作中用得最多的一種小型計算機網絡。局域網所覆蓋的地理范圍比較小，通常不超過幾十公里，甚至只在同一座建筑物內或者鄰近的幾座建筑內。像常見的校園網，一座寫字樓內部的網絡等都屬于局域網。

而Internet則不是指單個區域范圍內的網絡，而是指將全世界的各中不同類型的計算機網絡連接起來的一個全球性的網絡。Internet上有取之不盡，用之不竭的信息資源。對于Internet中各種各樣的信息，所有的人都可以通過網絡的連接來共享和使用。

1.2 Internet有那些功能

Web頁瀏覽：這是目前利用最廣泛、最直接的互聯網服務，通過瀏覽WWW（萬維網）中的網頁，可以了解世界各地的新聞，查看最新的股市行情，最新的娛樂動態、科技發明，找到眾多的就業信息??幾乎想找到什么樣的信息，就有什么信息。正是有了WWW、Internet才會變得如此豐富多彩，才能走進千家萬戶。信息發布：通過Internet，不僅可以瀏覽別人發布在Web頁上的信息，也可以將自己要發布的信息制作成Web頁，也即網頁，然后發布到Internet上，供全世界的人瀏覽。

電子郵件：不同于傳統郵件，電子郵件(E-mail)通過Internet傳輸，寫信，發信，收信都在計算機上完成，一封電子郵件最短在一秒之內就可以發送出去，其效率是傳統郵件無法比擬的。而且發送與接收電子郵件幾乎是免費的，所以比傳統郵件既節省時間又經濟的多。

網上聊天：通過聊天軟件（如QQ、ICQ等）或不同網站的聊天室，可以和世界各地的網友聊天。網友可能是遠在天邊的異國朋友，也可能是與你一起工作的餓同事，或者是一起生活的家人，在這里沒有年齡、性別、身份、職業、國籍、膚色的限制，完全突破了交友的傳統方式，人們可通過Internet互相了解對方，進行各種各樣的交流。

電子商務：現在網上交易已經成為現實，網上購物、網上商品銷售、網上拍賣、企業級電子商務、網上貨幣支付等電子商務活動已經搞的有聲有色，幾乎所有的專家都預測，在未來的幾年內，電子商務會飛速發展。在不久的將來，您可以做在電腦前進行各種各樣的商務活動。

網絡游戲：通過Internet，可以與全世界的玩家一起進行游戲對戰，也可以協同作戰。網絡游戲已經成為信息產業全新的經濟增長點，每年都為開發商帶來巨額的利潤。通過網絡游戲，可以充分享受Internet給我們帶來的樂趣。

網絡電話：網絡電話也稱IP電話。它采用Internet技術，利用專門的網絡電話軟件，只需支付非常低廉的話費就可通話。Internet在電信市場上的應用將越來越廣泛。

1.3 WWW的簡介

WWW的全稱為World Wide Web，含義是“環球網”，又稱“萬維網”、3W、Web。WWW是一個基于超文本（Hypertext）方式的信息檢索服務工具。我們上網瀏覽到的網頁就是這樣的超文本，也就是HTML(Hypertext Mark-up Language,超文本標記語言)文件，這些網頁文件被放置到WWW服務器上，并且都有一定的地址。當我們想瀏覽某個網站時，首先要在電腦上安裝瀏覽器，如Internet Explorer或Netscape，然后在瀏覽器中輸入網站的地址（網址），就可以進入網站進行瀏覽。在這些網頁中，都有超連接，當將鼠標指針移動到某個地方（如文本或圖象）時，鼠標指針就會變成一個小手形形狀，單擊它就可以連接到另個網頁中，從而使得瀏覽者能在不同的信息之間跳轉，我們之所以能在Internet的海洋中穿梭自如，正是超連接的功勞。

WWW 為我們帶來的是世界范圍的超級文本服務：只須操縱鼠標，就可以通過Internet從世界各地調來你所希望的文本、圖像、動畫和聲音等信息。通過使用WWW，一個不熟悉網絡使用的人也可以成為Internet的行家。

1.4網頁基本構成元素

要學會制作網頁，首先需要了解網頁都是由什么元素構成的。

文字：文本是構成網頁的基本元素。一個最簡單的網頁可以只有幾行文本。

圖片：正是有個各種美麗的圖片，網頁才變得多姿多彩。

動畫：如今，網頁上的動畫越來越多，最常用的有GIF動畫、Flash動畫等。

超連接：如上所述，超連接幾乎是必不可少的。一個沒有超連接的網頁，就如同汪洋大海中的一座孤島，失去了與外界的一切聯系。

其它元素：還可以在網頁中添加聲音、視頻等元素。

1.5軟件的安裝與啟動 要使用網站設計軟件，自然先要將這些軟件安裝到自己的電腦中。安裝完畢，還需要如何啟動，如何創建快捷方式。下面就讓我們來詳細地看一看具體的操作步驟。

1.5.1軟件的安裝

安裝之前，需要先了解軟件對系統的要求。以Windows為例，系統要求如下： Intel Pentium II處理器或等效處理器，主頻300MHz或更高。

Windows 98Windows 2000Windows NT(具有Service Pack 3 或更高版本)、Windows Me或Windows XP.Netscape Navigator 4.0版或更高版本或Microsoft Internet Explorer.96MB的可用內存（RAM），建議采用128MB內存。

分辨率可達 800×600像素的256色顯示器（建議顏色為百萬顏色，分辨率達到1024×768像素）。CD-ROM 驅動器。

檢查一下您的計算機，看是否具備了以上條件。如果具備，將“Macromedia Studio MX”程序會自動運行。如果不能自動運行，可以找到光盤放入光驅，安裝程序會自動運行。可以找到光盤中的“Install Macromedia Studio MX”程序或“Autorun”程序并雙擊運行。

Dreamweaver的安裝比較容易，幾乎可以自動完成。下面簡要說明一下安裝步驟。

操作步驟：

1、將安裝光盤放入光驅，安裝程序自動運行，并出現安裝界面。如果單擊安裝界面上的“Macromedia STUDIO MX安裝”，那么將會安裝其下方所列出的軟件。所有的安裝會自動完成。

2、單擊Dreamweaver MX,開始安裝過裝過程.先是出現解壓縮文件窗口,等待一會兒,便會出現安裝向導對話框。單擊“下一步”按鈕，繼續安裝過程。

3、出現“選擇目的地位置”對話框，默認的盤是C盤，如果想安裝到不同的位置，可以單擊目的文件夾右邊的“瀏覽”按鈕，并在彈出的“選擇文件夾”對話框選擇不同的文件，如要安裝在D盤則可直接將路徑中的“C：”改為“D:”。也可以在下面的“目錄”中選擇其它的文件夾，設置完后，單擊“確定”，回到“選擇目的地址”對話框，單擊“下一步”繼續。

4、而后會出現“默認編輯器”的對話框，默認為全選。如果希望讓Dreamweaver MX成為下面所列文件類型的默認編輯器，那么可以在這里做選擇。選擇完畢，單擊“下一步”按鈕。

5、出現“開始復制文件”對話框，單擊“下一步”安裝程序開始復制文件，過幾分鐘后，安裝結束，單擊“結束”按鈕，結束安裝。

1.5.2 軟件啟動

軟件安裝完畢后，我們就可以使用它了。安裝程序已經自動在“開始”菜單中加入了快捷方式。

單擊“開始”菜單，將鼠標指針依次指向“程序”|“Macromedia”|“Macromedia MX”,并在上面單擊鼠標左鍵。

1.5.3 創建快捷方式 使用“開始”菜單啟動程序的過程比較煩瑣。可以在Windows桌面或快速啟動欄上創建快捷方式，這樣可以快速的啟動程序。

具體實現方法是：在“開始”菜單中找到相應程序的快捷方式，不過這是不要用鼠標左鍵單擊，而是用右鍵按住向桌面拖動，然后松開右鍵，會出現一個快捷菜單，在其中可以選擇不同的命令，比如選擇“在當前位置創建快捷方式”或“復制到當前位置”。

這樣以后在運行程序時，就方便快捷的多了。

1.6 制作網頁前的準備

電腦必備：

電腦速度夠快，最好能夠上網。操作系統：Windows 98/NT/Me/2000/XP.軟件可選：

其它軟件：看圖軟件ACDSee、圖像處理軟件Photoshop、上傳工具CuteFTP、Fireworks、動畫軟件Flash等。

1.7 Dreamweaver MX的操作環境

我們將工作界面分成了“標題欄”、“菜單欄”、“快捷工具欄”、“屬性面板”、“浮動控制面板”5個部分來分別介紹。

1.7.1 標題欄 Dreamweaver MX的“標題欄”中將顯示文字“Macromedia Dreamweaver MX”如果打開網頁的話，在后面還會顯示該網頁的一些信息，如網頁標題、所在位置及網頁名稱，右邊有三個鈕，分別對應Dreamweaver MX的最大化最小化和關閉的操作。

1.7.2 菜單欄

“標題欄”下面就是“菜單欄”，欄中提供了“文件”、“編輯”、“查看”、“插入”、“修改”、“文本”、“站點”、“窗口”、“幫助”10項菜單。單擊其中任意一項菜單，隨即就會出現一個下拉式指令菜單。有些指令的右邊會有鍵盤的代碼，這是該指令的快捷鍵，熟練使用快捷鍵將會有助于提高工作效率。有些指令的右邊會有一個小黑三角的標記，它代表該指令還包含下一級的指令，鼠標停留片刻即可顯示。

1.7.3 快捷工具欄

“快捷工具欄”指的是“菜單欄”下邊的3排按鈕，選擇菜單“查看/工具欄”，勾選里面的“插入”、“文檔”和“標準”3項，完整的快捷工具欄就顯現出來了。

1.7.4 屬性面板

在網頁編輯窗口的下面還有一個面板，它是有名的“屬性面板”，它在這個軟件中起到舉足輕重的作用。

屬性面板顧名思義，就是顯示，調整屬性的面板，根據鼠標所選中對象的不同，“屬性面板”在界面上也會有所差異，用戶可以分別對不同的對象進行調整。

第二章 網站制作實戰

2.1 站點

2.1.1 創建站點

要制作一個網站，第一步操作都是一樣的，就是要創造一個“站點”，這樣可以使整個網站的脈絡結構清晰地展現在面前，避免了以后再進行紛雜的管理。

從菜單中選擇“站點/管理站點”在彈出的對話框中選擇“新建”，之后再選擇其中的“站點”，再次彈出一個對話框，在文本框中輸入自己已經企化好的網站名稱“追夢人”。

填好后，單擊“下一步”，進入下一個步驟。由于我要做的是一個靜態的網頁，所以選擇上面的一項“否，我不想使用服務器技術。” 單擊“下一步”，進入下一個步驟。

在此選項中有兩個選擇，選擇推薦的“編輯我的計算機上的本地副本，完成后再上傳到服務器”。底下的文本框允許在本地磁盤上指定一個文件夾，Dreamweaver將在其中儲存站點文件的本地副本。單擊該文本框后面的文件夾圖標，新建并指定一個空的文件夾“E:/ding”。之后單擊“下一步“，進入下一個步驟。

這一步是如何設置連接到遠程服務器，彈出式菜單中有6中選擇，這里選擇“無”。而后“下一步”再“完成”，即可。

2.1.2 創建站點內容

站點創建完成后，就可以創建Web頁來填充站點了。在“右側浮動面板組”中選擇“文件/文件”面板，此時整個網站中沒有任何內容。用鼠標右擊面板中的本地根目錄文件夾。在彈出的菜單中選擇“新建文件”，新建一個文件后將其命名為“index.htm(或index.html),它就是未來的首頁。

由于“追夢人”網站分為“平面設計”、“動畫制作”、“網文精品”、“經典回顧”、“個人說明“這五個大欄目，所以繼續用鼠標右擊右側，在彈出的菜單中選擇第二項“New Folder（新建文件夾）”。執行五次操作，新建五個文件夾，并把它們重命名為graph、anim、books、music、letter，分別對應上面的五個大欄目。存放它們各自的內容。之后再次新建1個文件夾，命名為images,用來存放“所有的圖象文件”的內容。

之后在個欄目的文件夾里還要建立想相應的欄目網頁。

2.2 首頁

2.2.1 設置首頁布局

每個網站都會有一個首頁，就功能上而言，它代表著一個網站的風格與特色，就網站架構上而言，它代表了網站的第一層架構，至于網站上其他Web頁，原則上都必須通過首頁來連接散播出去，可見首頁是多么的重要。

首頁是打開網站后在瀏覽器中顯示的第一個頁面。它是起什么名字通常要視Server端的設置，一般的有index.htm,default.htm或home.htm等，目前主要以index.htm的居多。當然，后綴名為html也是正確的。

具體設置方法是：右健單擊“文件”浮動面板中的index.htm,在彈出的菜單中選擇“設成首頁”。

首頁的布局有很多方法，在這里我所用到的是表格的“布局模式”。“布局”模式中的表格稱為布局表格，單元格稱為布局單元格。在繪制布局表格和布局單元格時，必須從“標準”模式切換到“布局”模式。直接單擊“布局”按鈕即可。操作步驟：

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

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

3、在這里要繪制多個表格，可以再次單擊“布局表格”按紐進行繪制，也可以按住Ctrl鍵繪制多個表格。追夢人”網站首頁的布局如圖所示：

2.2.2設置首頁的頁面屬性

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

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

2.2.3查看和編輯頭內容

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

下面就以首頁為例，說明怎樣插入較常用的頭（head）內容。

單擊“菜單攔”下面“插入快捷”的下拉列表，選擇其中的HTML類，此時右側將會顯示該類中可以插入的對象快捷按鈕，再次單擊第2個按鈕“文件頭”旁邊的下拉箭頭，會彈出菜單，該項列出的便是即將插入的頭內容。

2.2.4 插入圖像

圖像是網頁中不可或缺的組成成份，恰當地使用圖像，可以使網站充滿生活生命力與說服力，吸引更多的瀏覽者，加深他們欣賞你網站的意愿。

另一方面，網頁的容量大小是網站成功與否的一大關鍵因素。由于網絡在傳輸上的限制，導致了下載的速度不可能太快，因此，網頁的大小就不能太大，其中關鍵就在于圖像的大小了，否則瀏覽者會失去等待的耐心，無論你的網站多么精彩也無濟于事了。所以，在網面容量大小的問題上一定要重視。下面就來詳細介紹對網頁圖像進行處理的操作步驟，以使得它們在保持圖形美麗與網站風格搭配的基礎上，圖片文件能夠變的更小。

1、首先將光標停留在要插入圖像的位置，然后單擊“菜單欄”下面“插入快健欄”的下拉表，選擇其中的“常用”類，則右側將會顯示該類中可以插入的對象快鍵按鈕。左起第5個即為“圖像：圖像”按鈕，單擊它右側的下拉列表，選擇第1項“圖像”。

2、隨即彈出“選擇圖像源文件”對話框。從計算機磁盤中選擇想要插入的圖像文件，或在URL編輯框中輸入圖像的路徑和名稱。下面的“相對于”下拉表框中，可選擇文件URL地址的類型，如果選擇“文檔”選項，表示圖像地址相對于當前文檔；如果選擇“站點根目錄”選項，表示地址相對于根目錄。在這里我要插入的是網站標志logo，插入logo圖象，如圖所示：

最后單擊“確定”按鈕，即可完成插入圖像的操作。2.2.5插入多媒體

在Dreamweaver MX2004中，除了之前講到的可以插入“圖像”外，還可插入動畫、聲音、視頻等媒體元素，如Flash,Shockwave,Applets,ActieX及格Midi聲音文件等，并且還可以在Dreamweaver自身內插入Macromedia Flash MX2004按鈕和文本對象，以及進行相關的后期處理和添加設計備注等操作。

在Dreamweaver MX 2004文檔中，可以插入媒體文件包括Flash Shockwave影片、QuickTime、AVI java、applet Active X控件以及各種格式的音頻文件。要在瀏覽器中播放放Flash 動畫，必須在瀏覽器中集成“Flash 播放器（Flash Player）”。其中，Internet Explorer通過ActiveX控制來實現，Netscape Navigator則是通過相應的插件來實現的。在最新的Netscape Navigator和Internet Explorer瀏覽器中，均已集成了 Flash動畫播放功能。操場作步驟：

步驟1 將光標停留在要插入Flash的位置，然后單擊菜單欄下面“插入快捷欄”的下拉列表，選擇其中的“常用”分類，右側將會顯示該類中可以插入的對象快捷按鈕。左起第6個即為“媒體”按鈕，單擊它右側的下拉列表，選擇第1項Flash圖標。

步驟2 在彈出的對話框中選擇擴展名為swf 的Flash文件，即可將其插入到Dreamwe aver的“網頁編輯窗口”中，可以看到，在這個窗口中Flash文件的大小。在這里我的主頁插入的一個動畫，如圖所示：

2.2.6插入文本 文字是人類語言最基本的表達方式，在網頁中，文本內容也可以說是重要的組成部分，一個網站成功與否，它是最關鍵的因素。在這最關鍵的因素。可豐富網站的文字內容，并以最最美觀、最整齊的方式放入到網頁中。插入文本的兩種方式

網頁中需要大量的文本，我們或以通過以下兩種方式插入它們。

一種是在網頁編輯窗口中直接用鍵盤敲入文本。這可以算是最基本的輸入方式了，和一些文本編輯軟件（如Microsoft Word）的使用方法一樣，選擇好習慣的輸入法，就可以運指如飛了。

另一種是復制文本的方式。有些讀者可能不喜歡使用Dreamweaver MX2004來進行打字的工作，而更習慣在專門的文本編輯軟件中快速打字，如Microsoft Word和 Windows自帶的記事本等，又或者讀者已經準備好了要放入網頁的文本的電子版本，那么我們就可以直接使用Dreamweaver的文本復制功能，將大段的文本內容拷貝到網頁的編輯窗口來進行排版的工作，具體步驟如下。

打開文本編輯軟件（如Microsoft Word），選中要復制的文本，它們將反白顯示，執行菜單“編輯/復制”命令或直接用快捷鍵Ctrl+C，之后切換回Dreamweaver,將光標停留在插入文本的位置，執行主菜單“編輯/粘貼”命令或直接使用快捷鍵Ctrl+v,即可將大段的文本快速粘貼到網頁中。

這在我的“網文精品”中用到很多，全部是在word軟件中排好ctrl+c,然后點擊要粘貼的位置，crtl+v到Dreamweaver即可。

2.3創建其它網頁

還有其它的幾個網站與主頁的制作相同，一個網頁是圖象和文字的組合。“平面設計”中的圖象插入和前面的介紹相似，并可以在屬性攔中調節圖象的大小。在Dreamwerver中常常會用到Firework、Flash，它們是相輔相成，在主頁中的主體部分就是用Firework,如圖所示：

在“個人說明”中也用到這點，首先定好需要尺寸，在屬性中設好背景，顏色等等，插入圖象，輸入文字，也word里的操作雷同。

第三章 建立網頁鏈接

網站實際上是由很多網頁組成的，那么網頁之間是如何聯系的呢？這就是本章要講的內容----網頁的“鏈接”。

“鏈接”，又稱“超鏈接"（Hyperlink）,它作為網頁的橋梁，起著相當重要的作用。網頁中的很多對象都可以加入“鏈接”屬性。在Dreamweaver MX2004中，如果以“鏈接”的媒介來劃分的話，則“鏈接”可以分為“文字鏈接”、“圖像鏈接”、“圖像地圖鏈接”、“內部鏈接和外部鏈接”、“E-mail鏈接”、“命名錨記鏈接”、“文件下載鏈接”和“跳轉菜單”，共8種。其中部分內容在之前的章節中可能接觸過，這里將對其進行更深入的講解。

3.1文字鏈接

“文字鏈接”即以文字作為媒介的鏈接，它是網頁中最常被使用的鏈接方式，具有“文件小、制作簡單和便于維護”的特點。

接下來結合我的個人網站為實例，來講解如何為文字建立“鏈接”。具體操作步驟如下所述。操作步驟

步驟1 準備好已經制作完成的首頁的各個欄目頁面（假設除了“鏈接”，其他內容都已經制作完成了），該網站包含6個欄目，這里的5個欄目----“平面設計”、“動畫制作”和“網文精品”、“經典回顧”、“個人說明”為例來進行講解。

步驟2 在Dreamweaver 中打開首頁，之后反白選取作為“鏈接”的文字。實例中要做到單擊不同的欄目的網頁。因此為第1個欄目“平面設計”設置鏈接，首先要反白選中“平面設計”4個文字。

步驟3 觀察“屬性面板”，其中包括一個“鏈接”文本框。步驟4 接下來需要把鏈接的地址加入到文本框中，方法有3種。

這里我用到的是直接點擊文件夾圖標，在文件夾中找到要鏈接的對象graph.htm。這樣就建立了超鏈接。不過有點很重要，由于大多數服務器都不支持中文文件名，而且對大小寫敏感，因此采用英文文件名并統一大小寫。如圖所示：

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

實例中沒有選擇任何選項，保持空白，表示在原窗口中打開鏈接網頁。

步驟6 還可以設置一些“鏈接”的屬性，這是前面講過的內容。單擊“屬性面板”中的“頁面屬性”，選擇其中的“鏈接”分類，可以進行的設置有“鏈接字體”、“大小”、“鏈接顏色”、“變換圖像鏈接”顏色、“已訪問鏈接”顏色、“活動鏈接”顏色及“下劃線樣式”。

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

步驟8 同理，按照以上步驟，再為“動畫制作”和“網文精品”“經典回顧“等其它欄制作指向對應欄目的鏈接。

步驟9 通常在欄目頁面中還需要有“返回首頁”的鏈接，單擊其后可以跳轉回首頁，因此在各個欄目中還要插入“網站首頁”的文字，并且制作指向首頁index.html的鏈接，制作方法不變。

至此，整個“文字鏈接”的實例就全就全部完成了。通過對這個實例的講解，讀者不僅應該學會如何為文字制作鏈接，還應用對“鏈接”有了更加深刻的理解，鏈接的目的何在？它到底能夠在網頁的網站中發揮什么樣的作用？怎樣才能更好地使用它？這些是網頁制作者更應該思考的問題。下面繼續介紹其他類型的鏈接。

3.2圖像鏈接

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

步驟1 首先仍然要準備好已經制作完成的首頁和各個欄目的頁面（假設除了“鏈接”，其他內容都已經制作完成了），該網站包含6個欄目，下面我們就動手為這6個欄目分別制作它們的鏈接。

步驟2 在Dreamweaver中打開網站的首頁，之后選取要制作“鏈接”的圖像。實例中先為第3個欄目“動畫制作”設置鏈接，因此選中包含“動畫制作”4個字的圖像。步驟3 觀察“屬性面板”，在“鏈接”文本框中輸入鏈接的文字地址。可以使用之前講過的“指向文件”和“選擇文件”的方法。

步驟4 如果有需要，可以在“目標”下拉列表中選擇“鏈接”網頁顯示的窗口方式，分別為-blank、-parent、-self或 top。實例中使用了默認出的保留空白選項的方式。

步驟5 另外，讀者還可以為圖像增加“替代”文本。實例中為第1個欄目增加欄目名稱的“替代”文本。

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

步驟8 在欄目頁面中制作“返回首頁”的鏈接，使得單擊后可以跳轉回首頁，其制作方法不變。

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

3.3E –Mail的鏈接

E-Mail鏈接，是指當瀏覽者單擊該鏈接之后，不是打開一個網頁文件，而是啟動用戶的E-Mail客戶端軟件（如Outlook Express）,并打開一個空白的新郵件，供瀏覽者撰寫內容來與網站聯系人聯系，這是一種最方便的互動方式。結合“個人說明”網頁，建立E-Mail鏈接的步驟如下所述。操作步驟 步驟1 將光標停留在頁面右下角要插入E-mail鏈接的位置。

步驟2 選擇“插入快捷欄”中的“常用”分類，單擊左側第2個“電子郵件鏈接”按鈕。

步驟3 在彈出的“電子郵件鏈接”對話框中有兩個輸入項，分別是“文本”和“E-Mail”。在“文本”項中輸入鏈接的文字，中文、英文均可，在E-Mail項中輸入網站聯系有的電子郵件地址，如實例中的 ding_zhuimeng123@163.net。

步驟4 單擊“確定”按鈕，具有“E-Mail鏈接”屬性的文本就ding_zhuimeng123@163.net。插入到光標所在位置了，按下 Ctrl+S保存網頁，再按下F12預覽查看實際效果。上面的方法只適用于文本的“E-Mail鏈接”，如果想在其它的對象（如圖像）上也加入這種鏈接，該怎辦呢？下面介紹第2種建立“E-Mail鏈接”的方法。

其實很簡單，與前面講過的圖像加入鏈接的方法基本一樣。先在頁面中需要的地方插入圖像，之后選中圖像，并在“屬性面板”的“鏈接”文本框中輸入如下語句即可----mailto: ding_zhuimeng123@163.net ?subject=網站的建議與第1種方法不同的是，E-Mail 地址前面增加了mailto:字樣。用這種方法就可以給圖像等其他對象建立“E-Mail鏈接”了。

3.4文件下載鏈接

“文件下載鏈接”的原理很簡單，只要鏈接文件屬于瀏覽無法識別的關型，便都會使用IE瀏覽器直接進行下載，并保存到本地計算機中。

瀏覽器無法識別的文件類型有很多，這里就介紹一個最常用的，以zip或rar為后綴名的壓縮格式文件，這種文件可以使用主流的壓縮軟件（如winzip、winrar）來制作。下面我們就業以實例來說明。在前面“插入多媒體”一章中，我們曾經講過直接鏈接文件的方式來插入“視頻”，即直接在“鏈接”文本框中輸入“文件名+名后綴名”，如olympus.wmv。單日擊這個鏈接，經過數據下載后，Windows系統將啟動自帶的媒體播放器Windows Media Player 來播放該視頻。操作步驟

步驟1 先將視頻文件olympus.wmv通壓縮成olympus.rar文件，放入站點的media文件夾下。

步驟2 將文件路徑輸入至“鏈接”文本框中。

步驟3 保存網頁，按下F12預覽，在瀏覽器中單擊“下載精彩廣告視頻”鏈接文本，會彈出“文本下載”選擇框，單擊其中的“保存”按鈕。

步驟4 在“另存為”對框中選擇保存到本地計算機中的位置，實例中為“經典回顧”文件夾。之后單擊“保存”按鈕，壓縮文件即保存到該位置中。至此，“文件下載鏈接”便制作完成了。讀者可以打開“我的文檔”文件夾，解壓縮olympus.rar文件，隨時欣賞下載影片。

本設計中未用到此鏈接，在此只作簡單介紹。

3.5在HTML語言中建立網頁鏈接

3.5.1文字鏈接

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

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

動畫制作（原窗口，默認為空）

網文精品

第三篇：php校園網站的設計與實現論文

XxxxxxxxxxXXX學校

2013年畢業設計（論文）

華航校園網網站的設計與實現

學 院: 專 業: 班 級: 學 號: 學生姓名: 指導教師:

2012年X月X日 摘要

校園網站是學校對外宣傳的窗口，也是展示全校師生才能，加強對校外聯系，互相學習，共同發展的陣地，學校網站建設的目的是促進師生與學校共同發展。校園網是高校的重要宣傳窗口與工作平臺，隨著網絡規模的擴大與校園網功能的變化，校園網網站設計的要求也相應會有變化，一個功能齊全、界面優雅、操作方便的校園網才能更好地展現學校的面貌。本文設計的華航校園網網站的主要介紹了學校概況、學校科研、圖書館管理、招生就業、教師招聘和相關機構等主題，基本上能滿足大家對學校各個方面信息的了解，也有助于學校的招生和有助于學校師生的發展。

本文介紹的華航校園網系統是在Windows xp操作系統下，以MYSQL為數據庫開發平臺，用IIS（Internet Information Server）網絡信息服務為應用服務器，采用PHP(Active Server Page)語言開發和設計的。本系統的基本功能：數據進行錄入、修改、刪除、查詢、統計的基本功能。

關鍵詞：MYSQL ；網上商城；PHP;School site is the school's external propaganda window, but also show teachers and students ability, strengthen the out-of-school, learn from each other, common development positions, school construction site aims to promote the common development of teachers and students and school.Campus network is an important window for the publicity and working platform in Colleges and universities, with the change of network scale and the function of campus network, campus network design requirements will change, a full-featured, campus network in order to better interface, convenient operation and elegant display of school look.In this paper, the design of cal campus network mainly introduced the profile of the school, the school scientific research, library management, recruitment and employment, teacher recruitment and related institutions such as the theme, basically can satisfy your understanding of all aspects of school information, also contribute to the school enrollment and contribute to the development of the school teachers and students.Cal campus network system was introduced in the Windows XP operating system, using MYSQL database development platform, using IIS(Internet Information Server)network information service as the application server, using PHP(Active Server Page)language development and design.The basic functions of the system: the basic function of data entry, modify, delete, query, statistics..3

目錄

1.緒論....................................................................6

1.1系統開發背景和意義..................................................................................................................................6 1.2系統實現目標............................................................................................................錯誤！未定義書簽。

2.文獻綜述...............................................錯誤！未定義書簽。

2.1研究背景和意義.........................................................................................................錯誤！未定義書簽。2.2相關研究綜述與分析..................................................................................................錯誤！未定義書簽。

3.系統分析................................................................7

3.1可行性分析.................................................................................................................................................7

3.1.1經濟上的可行性..................................................................................................................7 3.1.2技術上的可行性..................................................................................................................8 3.1.3操作上的可行性..................................................................................................................8 3.2需求分析.....................................................................................................................................................8 3.3業務管理需求分析...................................................................................................................................10 3.4數據流程分析............................................................................................................................................11

4.系統設計...............................................................12

4.1系統體系結構...........................................................................................................................................12 酒店預訂系統設計的是基于瀏覽器/服務器（B/S）技術的管理系統，解決傳統的客戶端/服務器模型結構存在的客戶端（C/S）維護煩瑣的問題，維護相對簡單，具有良好的系統擴展性，方便管理。......12 4.2 開發軟件...................................................................................................................................................13

4.2.1 ASP技術............................................................................................................................13 4.2.2 Internet服務管理器......................................................................................................13 4.2.3 Microsoft SQL Server...................................................................................................15 4.2.4Macromedia Dreamweaver 8.............................................................................................15 4.3數據庫設計...............................................................................................................................................17 4.4系統的軟硬件平臺...................................................................................................................................17

5．系統操作說明..........................................................19

5.1系統用戶管理...........................................................................................................................................19 5.2會議室管理................................................................................................................錯誤！未定義書簽。

5.2.1添加會議室........................................................................................錯誤！未定義書簽。

5.2.2管理會議室........................................................................................錯誤！未定義書簽。

6.軟件測試與分析.........................................................23

6.1系統測試的定義.......................................................................................................................................23 6.2系統測試的目的及意義............................................................................................................................23 6.3系統測試的重要性...................................................................................................................................23 6.4系統測試的常用方法................................................................................................................................24 6.5測試環境與測試條件................................................................................................................................25 6.6系統運行情況...........................................................................................................................................25 6.7測試總結...................................................................................................................................................26

7.結論...................................................................26

7.1系統的特點...............................................................................................................................................26 7.2系統的不足和改進...................................................................................................................................26 7.3設計收獲與心得.......................................................................................................................................26

致 謝..................................................................28 參 考 文 獻..............................................................29

1.緒論

1.1學校簡介

北華航天工業學院是一所“中央與地方共建、以地方管理為主”的公辦普通本科院校，是服務國家（航天）特殊需求人才碩士專業學位研究生教育試點單位。學校坐落在河北省廊坊市市區，始建于1978年，先后隸屬于第八機械工業總局、第七機械工業部、航天工業部、航空航天工業部、航天工業總公司。1999年劃轉到河北省，2003年河北省人民政府與中國航天科技集團公司、中國航天科工集團公司簽署協議共建學校，并在學校設立了獎教金和獎學金。著名運載火箭與衛星技術專家、國家最高科學技術獎獲得者孫家棟院士為學校名譽校長。

學校占地面積753畝，分東、西兩個校區，總建筑面積近30萬平方米。校園環境優雅，是省市區三級文明單位、花園式單位、安全工作先進單位和衛生、綠化工作先進單位。

學校有教師550多名，其中高級職稱教師219名，博士、碩士學位教師417名，具有行業背景或“雙師型”教師占20%以上。獲得省級教學名師、省級優秀骨干教師等省級以上稱號的教師18名，獲得航天科技人才培訓基金會SHATF獎教金的教師29名。

學校設有機械工程系、電子工程系、經濟管理系、建筑工程系、計算機科學與工程系、會計系、外語系、材料工程系、文法系、基礎科學部、體育部、工程技術訓練中心、成人教育學院等13個教學單位。現有20個本科、18個專科招生專業。學校是一所以工為主，工、管、經等學科相互支撐、協調發展的普通本科院校。有省重點發展學科1個；省級優秀教學團隊1個、本科教育創新高地1個、重點建設品牌特色專業2個、國家級和省級精品課程8門。現有全日制普通本專科在校生11580人、成人高等教育本專科在校生2144人。建校以來，累計為社會輸送各類人才3萬余名，其中為航天系統輸送近萬名畢業生，先后獲得中國航天科技集團公司頒發的“航天人才貢獻獎”（2003-2007）和“航天人才突出貢獻獎”（2006-2010年）。

學校建有34個教學科研儀器設備先進的實驗室（中心），教學科研儀器設備總值9364萬元。有“精密光柵位移傳感器制造與檢測技術”河北省工程實驗室、河北省高校“先進制造與生產過程自動化應用技術研發中心”等兩個省 級科技創新平臺；“廊坊市CAD/CAM/CIMS應用技術推廣中心”、“廊坊市物聯網與自動化技術實驗室”、“華航-燕嶺現代制造與信息工程技術研發中心”等3個市級科技創新平臺。

學校圖書館2.6萬平方米，館藏紙質圖書85萬冊，數字資源量2萬多GB（其中，電子圖書67萬冊），中外文現刊近千種。學校有8000多個多媒體教室座位，有近2000個圖書館閱覽座位，有設備先進的語音室和視聽室。學生住宿實行公寓化管理，環境整潔安寧，配套設施齊全，宿舍全部連通了校園網，是省級學生公寓先進單位。學生食堂管理嚴格，服務規范，是省級高校標準化學生食堂。學校為學生提供了良好的學習和生活環境。

1.2系統研究背景和意義

校園網絡是指在校園范圍內，將計算機以相互共享資源（硬件、軟件和數據）的方式連接起來，同時具有進行教學、管理和信息服務等功能的計算機系統的集合。在校園網的建設中應本著實用性原則、可靠性原則、先進性原則、擴展性原則、安全性原則、經濟性原則、標準性原則進行開發。同時，要考慮校園網的規劃管理，聯網經濟，技術換代時新技術的采用以及舊的設施沿用的繼承性和兼容性，網絡工程方面的問題以及校園網應用問題。

學校教育是以管理者、教師和學生為主體，以傳授知識、教書育人為目的的綜合活動過程，從信息和資源管理理論上看，它是一個通過教學環境、利用信息資源完成三者之間信息流傳遞轉換的過程。校園網系統的建設應能滿足學校教學的需要，滿足學校管理的需要，滿足與Internet連接的需要。同時，要努力創設出一個符合學生身心健康發展需要的校園網絡文化環境。

2.系統分析

2.1可行性分析

2.1.1經濟上的可行性

（1）前期投入資金比較少，只需要平臺系統的開發、域名和空間的購買費用，如果需要可再購買一臺服務器。（2）接下來就是資料的錄入工作。管理員登陸系統后臺，可對相關的資料進行錄入、編輯等工作即可。

（3）中后期主要工作就是維護更新，工作量不大，只需一位管理人員來完成。

從經濟上來說，建設這樣一個系統是可行的。2.1.2技術上的可行性

技術可行性研究是研究現有的技術條件能否順利完成開發工作，硬、軟件配置能否滿足開發的需要等等。配置稍好的PC機，Winxp操作系統，IIS服務器，MySQL軟件，結合PHP語言，可以完成目標系統的建設，從技術上來說是容易實現的。

2.1.3操作上的可行性

首先，設計網站的幾種軟件現在都比較流行，一般設計人員對這幾款軟件比較熟悉，可以利用這些軟件設計出較完善的華航校園網。其次，系統的管理主要是信息的錄入、修改、統計等工作，一般工作人員都能夠勝任。從操作上來說是可行的。

綜上所述，從各方面來看，我們在現行條件下可以設計出較合適的平臺系統，完成客戶對會議的預訂。

2.2系統功能需求分析

通過前期的調查分析及研究，對本系統來說，分兩種用戶類型，管理員和瀏覽用戶，主要實現的系統功能有以下一些方面：

1）管理員賬號管理

主要功能是超級管理員對普通管理員進行添加、修改、刪除等操作。2）學校概況

管理員把學校概況進行添加、修改、刪除等操作。3）科研研究管理

管理員把科學研究的相關信息資料進行添加、修改、刪除等操作。4）圖書館管理

管理員對圖書館信息進行添加、查詢、修改、刪除等操作。5）友情連接管理。

管理員對友情連接地址進行添加、查詢、修改、刪除等操作。6）要聞速覽管理

管理員圣要聞束覽信息進行添加、查詢、修改、刪除等操作。7）新聞快遞管理

管理員對新聞信息進行進行添加、查詢、修改、刪除等操作。8）系統管理

管理員進行系統公告、系統簡介、黨群機構、行政機構、系部機構、教師招聘等信息的添加、查詢、修改、刪除等操作。

9）瀏覽用戶可對前臺的各項信息進行查看，包括：學校概況、黨群機構、行政機構、系部機構、教師招聘、科學研究、招生就業、圖書館等內容。

以上是用戶的主要需求，也是該系統主要功能，除了這些功能以外，在設計時也對一些細節做了優化與調整，使系統更具有完整性與實用性。

系統功能模塊結構圖如圖2.2所示：

華航校園網網站系統后臺管理前臺登錄管理員賬號管理學校概況科學研究管理圖書館管理友情連接管理要聞速覽管理新聞快遞管理系統管理學校概況黨群機構行政機構系部機構教師招聘科學研究招圖生書就館業系統公告系統簡介黨群機構行政機構系部機構教師招聘 圖2.2模塊功能結構圖

2.3業務流程分析

華航校園網工作流程為：系統啟動并進入首頁頁面，瀏覽用戶可在前臺頁面進行所有欄目信息瀏覽。管理員點擊后臺，輸入用戶名和密碼進行后臺登陸，登陸之后，可進行后臺的所有操作。本系統的業務流程圖如下所示：

圖2.3業務流程圖

本系統是利用現代化的計算機網絡技術將校園信息進行整合，按照實踐過程設計完成的。同時完善服務，初步設計一個華航校園網網站管理系統。為了使系統在各項管理中發揮更大的作用，實現工作過程的計算機化，提高工作效率和工作質量，現提出如下系統開發目標：

1.操作簡單、界面友好：完全控件式的頁面布局，使得信息的錄入工作更簡便。

2.即時可見：對信息的處理（包括添加、修改、刪除）將立即在對應的版塊顯示出來，達到“即時發布、即時見效”的功能。

3.功能完善：不僅包括常見系統的信息管理的各個方面：信息錄入、瀏覽、刪除、修改、查詢等各個方面，完整地實現了系統對即時信息的管理要求。而且，還能進行上傳下載相關資源的管理。

4.方便移植：系統應具有實用性、可靠性和適用性。系統界面中所需的數據都存放于數據文件中，只要對該文件做部分修改，就能在系統界面上實現及時更新的效果，減少了更改系統源代碼的復雜性。

5.動態管理：對系統數據庫實行動態操作，能實現對數據庫信息的動態查詢、動態更新修改和動態錄入數據。

2.4數據流程分析

數據流程分析主要包括對信息的流動、傳遞、處理、存儲等的分析。數據流程分析的目的就是要發現和解決數據流通中的問題。現有的數據流程分析多是通過分層的數據流程圖（data flow diagram，簡稱DFD）來實現的。其具體的做法是：按業務流程圖理出的業務流程順序，將相應調查過程中所掌握的數據處理過程，繪制成一套完整的數據流程圖。

整個系統的數據流程圖如下圖所示：

進入華航校園網網站系統管理員登錄管理員添加、學校概況、科學研究等添加、修改。系統數據庫管理員信息數據備份數據恢復圖2.4 系統的數據流程

注銷登錄

3.系統設計

3.1系統B/S結構

華航校園網是基于瀏覽器/服務器（B/S）技術的管理系統，解決傳統的客戶端/服務器模型結構存在的客戶端（C/S）維護煩瑣的問題，維護相對簡單，具有良好的系統擴展性，方便管理。

本系統所面向的對象是廣大的互連網用戶。因此，將要采用比較流行的B/S三層結構。

圖2-4-1 B/S三層結構圖

B/S體系結構與B/S體系結構相比不僅具有其全部的優點，而且又有B/S體 系結構所不具備的獨特優勢:(1)開放的標準：B/S所采用的標準都是開放的、非專用的，是經過標準化組織所確定而非單一廠商所制定，保證了其應用的通用性和跨平臺性。

(2)較低的開發和維護成本：B/S的應用只需在客戶端安裝通用的瀏覽器即可，維護和升級工作都在服務器端進行，不需對客戶端進行任何改變，故而大大降低了開發和維護的成本。

(3)用戶使用簡單，界面友好：B/S用戶的界面都在統一的瀏覽器上，瀏覽器易于使用、界面友好，又因為它不再負責數據的存取和復雜數據計算等任務，只需要進行顯示，因而大大降低了對客戶端的要求。

從以上的分析與比較可以看出，B/S模式具有B/S模式無法替代的優越性:它簡化了系統的開發和維護，并且特別適用于網上信息發布。因此，我開發的課程在線瀏覽系統采用了基于B/S模式的體系結構。

3.2 開發軟件

3.2.1 PHP技術

PHP，是英文超文本預處理語言Hypertext Preprocessor的縮寫。PHP 是一種 HTML 內嵌式的語言，是一種在服務器端執行的嵌入HTML文檔的腳本語言，語言的風格有類似于C語言，被廣泛地運用。

PHP 獨特的語法混合了 C、Java、Perl 以及 PHP 自創的語法。

它可以比 CGI或者Perl更快速地執行動態網頁。用PHP做出的動態頁面與其他的編程語言相比，PHP是將程序嵌入到HTML文檔中去執行，執行效率比完全生成HTML標記的CGI要高許多；PHP還可以執行編譯后代碼，編譯可以達到加密和優化代碼運行，使代碼運行更快。PHP具有非常強大的功能，所有的CGI的功能PHP都能實現，而且支持幾乎所有流行的數據庫以及操作系統。最重要的是PHP可以用C、C++進行程序的擴展！3.2.2 Internet服務管理器

本系統運用了Asp技術，而IIS是Windows XP中的Internet服務管理器。通過安裝和配置IIS后就可以運行ASP程序。Internet Information Server(IIS)內置在Windows XP操作系統中的網絡文件和應用程序服務器中。ASP程序通過服務器解釋后才可以在瀏覽器中運行，所以在Windows XP系統中必須安裝IIS 服務。IIS默認情況下安裝在Windows XP中。IIS可以幫助Web管理員創建Web的應用程序。IIS集成安裝向導、Web發布工具、集成的安全性和身份驗證程序，以及對其他Web的應用程序的支持。

IIS(Internet Information Server)，是微軟公司主推的服務器，最新的版本是IIS 6.0，IIS與Windows NT Server完全集成在一起，因而用戶能夠利用Windows NT Server和NTFS（NT File System，NT的文件系統）內置的安全特性，建立強大，靈活而安全的Internet站點。

IIS支持HTTP（Hypertext Transfer Protocol，超文本傳輸協議）、FTP（File Transfer Protocol，文件傳輸協議）以及SMTP協議，通過使用CGI和ISAPI，IIS可以得到高度的擴展。

IIS支持與語言無關的腳本編寫和組件，通過IIS，開發人員就可以開發新一代動態的，富有魅力的Web站點。IIS不需要開發人員學習新的腳本語言或者編譯應用程序，IIS完全支持VBScript，JavaScript開發軟件以及Java，同時也支持CGI和WinCGI，以及ISAPI擴展和過濾器。

IIS支持服務器應用的Microsoft BackOffice系列，Microsoft BackOffice系列包括以下內容：

Microsoft Exchange Server 客戶/服務器通訊和群組軟件； Microsoft Proxy Server 代理服務器；

用于連接IBM企業網絡的Microsoft SNA Server；

用于集中管理分布式系統的Microsoft Systems Management Server； Microsoft Commercial Internet System（MCIS）。

IIS的設計目的是建立一套集成的服務器服務，用以支持HTTP，FTP和SMTP，能夠提供快速且集成了現有產品，同時可擴展的Internet服務器。IIS相應性極高，同時系統資源的消耗也是最少，IIS的安裝，管理和配置都相當簡單，這是因為IIS與Windows NT Server網絡操作系統緊密的集成在一起，另外，IIS還使用與Windows NT Server相同的SAM（Security Accounts Manager，安全性賬號管理器），對于管理員來說，IIS使用諸如Performance Monitor和SNMP（Simple Network Management Protocol，簡單網絡管理協議）之類的NT已有管理工具。

IIS支持ISAPI，使用ISAPI可以擴展服務器功能，而使用ISAPI過濾器可 以預先處理和事后處理儲存在IIS上的數據。用于32位Windows應用程序的Internet擴展可以把FTP，SMTP和HTTP協議置于容易使用且任務集中的界面中，這些界面將Internet應用程序的使用大大簡化，IIS也支持MIME（Multipurpose Internet Mail Extensions，多用于Internet郵件擴展），可以為Internet應用程序的訪問提供一個簡單的注冊項。

3.2.3 MySQL Server

MySQL是一個關系型數據庫管理系統，由瑞典MySQL AB公司開發，目前屬于Oracle公司。MySQL是一種關聯數據庫管理系統，關聯數據庫將數據保存在不同的表中，而不是將所有數據放在一個大倉庫內，這樣就增加了速度并提高了靈活性。MySQL的SQL語言是用于訪問數據庫的最常用標準化語言。MySQL軟件采用了雙授權政策（本詞條“授權政策”），它分為社區版和商業版，由于其體積小、速度快、總體擁有成本低，尤其是開放源碼這一特點，一般中小型網站的開發都選擇MySQL作為網站數據庫。由于其社區版的性能卓越，搭配PHP和Apache可組成良好的開發環境。

MySQL是一個開放源碼的小型關聯式數據庫管理系統，開發者為瑞典MySQL AB公司。目前MySQL被廣泛地應用在Internet上的中小型網站中。由于其體積小、速度快、總體擁有成本低，尤其是開放源碼這一特點，許多中小型網站為了降低網站總體擁有成本而選擇了MySQL作為網站數據庫。

與其他的大型數據庫例如Oracle、DB2、SQL Server等相比，MySQL自有它的不足之處，如規模小、功能有限（MySQL Cluster的功能和效率都相對比較差）等，但是這絲毫也沒有減少它受歡迎的程度。對于一般的個人使用者和中小型企業來說，MySQL提供的功能已經綽綽有余，而且由于MySQL是開放源碼軟件，因此可以大大降低總體擁有成本。

系統特性：

1．使用C和C++編寫，并使用了多種編譯器進行測試，保證源代碼的可移植性

2．支持AIX、FreeBSD、HP-UX、Linux、Mac OS、NovellNetware、OpenBSD、OS/2 Wrap、Solaris、Windows等多種操作系統

3．為多種編程語言提供了API。這些編程語言包括C、C++、Python、Java、Perl、PHP、Eiffel、Ruby和Tcl等。

4．支持多線程，充分利用CPU資源

5．優化的SQL查詢算法，有效地提高查詢速度

6．既能夠作為一個單獨的應用程序應用在客戶端服務器網絡環境中，也能夠作為一個庫而嵌入到其他的軟件中。

7．提供多語言支持，常見的編碼如中文的GB 2312、BIG5，日文的Shift_JIS等都可以用作數據表名和數據列名。

8．提供TCP/IP、ODBC和JDBC等多種數據庫連接途徑。9．提供用于管理、檢查、優化數據庫操作的管理工具。

10．支持大型的數據庫。可以處理擁有上千萬條記錄的大型數據庫。11．支持多種存儲引擎。3.2.4 Macromedia Dreamweaver cs5 Macromedia Dreamweaver cs5是建立Web站點和應用程序的專業工具。它將可視布局工具、應用程序開發功能和代碼編輯支持組合在一起，其功能強大，使得各個層次的開發人員和設計人員都能夠快速創建界面吸引人的基于標準的網站和應用程序。從對基于BS的設計的領先支持到手工編碼功能，Dreamdreanweaver cs5的工作界面和圖標、(5張)weaver提供了專業人員在一個集成、高效的環境中所需的工具。開發人員可以使用Dreamweaver及所選擇的服務器技術來創建功能強大的Internet應用程序，從而使用戶能連接到數據庫、Web服務和舊式系統。

Dreamweaver是在網頁設計與制作領域中用戶最多、應用最廣、功能最強大的軟件，隨著Dreamweaver cs5的發布，更堅定Dreamweaver在該領域的地位。它集網頁設計、網站開發和站點管理功能于一身，具有可視化、支持多平臺和跨瀏覽器的特性，是目前網站設計、開發、制作的首選工具。

1、靈活的編寫方式Dreamweaver具有靈活編寫網頁的特點，不但將世界一流水平的“設計”和“代碼”編輯器合二為一，而且在設計窗口中還精化了源代碼，能幫助用戶按工作需要定制自己的用戶界面。

2、可視化編輯界面Dreamweaver是一種所見即所得的HTML編輯器，可實現頁面元素的插入和生成。或視化編輯環境大量減少了代碼的編寫，同時亦保證 16 了其專業性和兼容性，并且可以對內部的HTML編輯器和任何第三方的HTML編輯器進行實時的訪問。無論用戶習慣手工輸入HTML源代碼還是使用可視化的編輯界面，Dreamweaver都能提供便捷的方式使用戶設計網頁和管理網站變得更容易。

3、功能更多的CSS支持——CSS可視化設計、CSS檢查工具。

4、動態跨瀏覽器驗證當保存時系統自動檢查當前文檔的跨瀏覽器有效性，可以指定何種瀏覽器為測試用瀏覽器，同時系統自動檢驗以確定頁面有沒有目標瀏覽器不支持的tags或CSS結構。動態跨瀏覽器有效性檢查功能可以自動核對tags和CSS規則是否適應目前的主瀏覽器。

5、強大的WEB站點管理功能。

6、內建的圖形編輯引擎。

7、Dreamweaver的集成特性Dreamweaver cs5繼承了Fireworks、Flash和Shockwave的集成特性，可以在這些Web創作工具之間自由地切換，輕松地創建美觀實用的網頁。

8、豐富的媒體支持能力可以方便地加入Java、Flash、Shockwave、ActiveX以及其他媒體。Dreamweaver具有強大的多媒體處理功能，在設計DHTML和CSS方面表現得極為出色，它利用JavaScript和DHTML語言代碼輕松地實現網頁元素的動作和交互操作。Dreamweaver還提供行為和時間線兩種控件來產生交互式響應和進行動畫處理。

9、超強的擴展能力Dreamweaver還支持第三方插件，任何人都可以根據自己的需要擴展Dreamweaver的功能，并且可以發布這些插件。

3.3數據庫設計

3.3.1數據庫概念結構設計

根據上面的系統功能需求分析、業務流程分析和數據流程分析，就可以設計出能夠滿足用戶需求的各種實體，以及它們之間的關系，為后面的邏輯結構設計打下基礎。這些實體包含各種具體信息，通過相互之間的作用形成數據的流動。

下面對主要的實體E-R圖作一下展示。整體E-R圖如圖2.5.1a所示：

管理員賬號學校概況科學研究圖書館信息友情連接要聞速覽新聞快遞管理員添加、修改系統公告系統簡介黨群機構行政機構系部機構教師招聘瀏覽、查看瀏覽用戶 圖2.5.1a整體ER圖

管理員實體E-R圖如圖2.5.1b所示：

用戶名密碼管理員圖2.5.1a管理員E－R圖

學校概況實體E-R圖如圖2.5.1c所示：

類別標題內容學校概況圖2.5.1c學校概況E－R圖

圖書館實體E-R圖如圖2.5.1d所示：

類別標題內容圖書館圖2.5.1d圖書館E－R圖

3.3.2數據庫邏輯結構設計

數據庫設計的好壞直接影響整個系統，如果數據庫設計不好，不僅僅很多的業務處理起來相當的復雜和煩瑣，而且在編寫系統代碼的時候也會遇到很多問題。所以，一個合理的數據庫是必須的、是必要的。本系統的數據庫結構在設計的時候注意到了規范命名和建立索引的必要性。

3.4系統的軟硬件平臺

1.客戶機/服務器：采用Pentium II 或以上級別PC機，至少30M硬盤，Pentium90MHZ，支持VGA或分辨率更高的顯示器

2.客戶機/服務器操作系統：Window xp/vista/7。3.數據庫：MySQL

4.網絡：以太網組成的局域網，可設多臺客戶機。

4．系統操作說明

網站結構分為兩個部分：前臺登入模塊、后臺管理模塊。

4.1系統前臺操作說明

4.1.1首頁頁面

打開系統首頁，界面如圖4.1.1所示。

圖4.1.1首頁頁面

系統首頁顏色歡快活潑，界面十分清晰，顯得希望和朝氣。最上方為系統功能導航欄，下方為各信息模塊的顯示區，整體呈左中右三塊。首頁設計功能齊全，沒有冗余也沒有遺漏，使用戶能一視而知之。4.1.2學校概況瀏覽頁面

圖4.1.2學校概況瀏覽頁面

此頁面實現的功能是瀏覽用戶對學校概況信息進行查看。4.1.3黨群機構頁面

圖4.1.3黨群機構頁面

此頁面實現的功能是瀏覽用戶對學校黨群機構進行查看。

4.2系統后臺操作界面

4.2.1管理員賬號管理頁面

圖4.2.1管理員賬號管理頁面

此頁面實現的功能是超級管理員對普通管理員的添加操作。4.2.2學校概況添加頁面

圖4.2.2學校概況添加頁面

此界面實現的功能是管理員對學校概況信息進行添加操作，包括標題、類別、內容等相關信息。學校概況編輯頁面很清晰、簡單，易于操作。4.2.3科學研究添加頁面

圖4.2.2科學研究添加頁面

此界面實現的功能是管理員對學校科學研究信息進行添加操作，包括標題、類別、內容等相關信息。

5.軟件測試與分析

測試是開發時期最后一個階段，是保證軟件質量的重要手段。軟件測試就是在受控制的條件下對系統或應用程序進行操作并評價操作結果的過程，所謂控制條件應包括正常條件與非正常條件。軟件測試過程中應該故意地去促使錯誤的發生，也就是事情在不該出現的時候出現或者在應該出現的時候沒有出現。從本質上說，軟件測試是“探測”，在“探測”中發現軟件的毛病。

5.1系統測試的定義

軟件測試是為了發現錯誤而執行程序的過程。它不僅是軟件開發階段的有機組成部分，而且在整個軟件工程(即軟件定義、設計和開發過程)中占據相當大的比重。軟件測試是軟件質量保證的關鍵環節，直接影響著軟件的質量評估。軟件測試不僅要講究策略，更要講究時效性。驗收測試作為軟件測試過程的最后一個環節，對軟件質量、軟件的可交付性和軟件項目的實施周期起到“一錘定音”的作用。

5.2系統測試的目的及意義

軟件危機曾經是軟件界甚至整個計算機界最熱門的話題。為了解決這場危機，軟件從業人員、專家和學者做出了大量的努力。現在人們已經逐步認識到所謂的軟件危機實際上僅是一種狀況，那就是軟件中有錯誤，正是這些錯誤導致了軟件開發在成本、進度和質量上的失控。有錯是軟件的屬性，而且是無法改變的，因為軟件是由人來完成的，所有由人做的工作都不會是完美無缺的。問題在于我們如何去避免錯誤的產生和消除已經產生的錯誤，使程序中的錯誤密度達到盡可能低的程度。

5.3系統測試的重要性

軟件測試在軟件生命周期中占據重要的地位，在傳統的瀑布模型中，軟件測試學僅處于運行維護階段之前，是軟件書籍交付用戶使用之前保證軟件質量的重要手段。近來，軟件工程界趨向于一種新的觀點，即認為軟件生命周期每一階段 中都應包含測試，從而檢驗本階段的成果是否接近預期的目標，盡可能早的發現錯誤并加以修正，如果不在早期階段進行測試，錯誤的延時擴散常常會導致最后成品測試的巨大困難。

事實上，對于軟件來講，不論采用什么技術和什么方法，軟件中仍然會有錯。采用新的語言、先進的開發方式、完善的開發過程，可以減少錯誤的引入，但是不可能完全杜絕軟件中的錯誤，這些引入的錯誤需要測試來找出，軟件中的錯誤密度也需要測試來進行估計。測試是所有工程學科的基本組成單元，是軟件開發的重要部分。自有程序設計的那天起測試就一直伴隨著。統計表明，在典型的軟件開發項目中，軟件測試工作量往往占軟件開發總工作量的40％以上。而在軟件開發的總成本中，用在測試上的開銷要占30％到50％。如果把維護階段也考慮在內，討論整個軟件生存期時，測試的成本比例也許會有所降低，但實際上維護工作相當于二次開發，乃至多次開發，其中必定還包含有許多測試工作。

5.4系統測試的常用方法

程序測試的主要方法分為兩大類，白盒測試和黑盒測試。

白盒測試：一種是以程序的內部邏輯結構為依據而設計測試用例的方法，因而又稱結構測試或玻璃盒測試，將軟件看成一個透明的白盒子，按照程序的內部結構和處理邏輯來選定測試用例，對軟件的邏輯路徑及過程進行測試，檢查它與設計是否相符。白盒測試就是要選取足夠的測試用例，對源代碼實行比較充分的覆蓋，以便盡可能多地發現程序中的錯誤。主要有兩種方法：一種稱為邏輯覆蓋法，另一種稱為路徑覆蓋法。

黑盒測試：也稱功能測試，數據驅動測試等，它將待測對象堪稱是一個黑盒子，在完全不考慮程序的內部結構和特性的情況下，只依據規格說明書檢查程序的功能是否能正常使用。

黑盒測試主要是根據輸入條件和輸出條件的確定測試數據，來檢查程序是否能產生正確的輸出[16]。進行黑盒測試主要有下面幾種方法：等價分類法、邊界值分析法、猜錯法、因果圖法。

本系統的測試綜合了白盒測試、黑盒測試兩種方法，但主要使用的是黑盒測試方法。在測試當中遵循了“盡早地和不斷進行測試”，“保證測試用例的完整 24 性和有效性”原則。通過測試達到以下測試目的：

1功能檢查。

檢查功能是否爭取，是否遺漏或實現不了應該實現的功能等。2接口檢查。

檢查能否正確地接受信息或輸出信息。3數據檢查。

檢查數據結構或外部信息是否有（如數據文件）訪問錯誤。4性能檢查。

檢查性能需求能否得到滿足。5初始化、終止檢查。

檢查是否能進行正確地初始化或終止。

5.5測試環境與測試條件

處理器：Inter(R)Core(TM)2 Duo T5750 內存：2GB 硬盤：160G 操作系統：Windows XP 數據庫：MYSQL 2000 5.6系統運行情況

系統評價是指系統在正式運行了一段時間之后，對它在功能上、技術上和經濟上所進行的審核評價。針對本系統的評價如下：

(1)系統功能評價

根據本系統開發前所訂的目標，在系統完成后經過測試運行，該系統達到了預定的開發目標，在實際使用中的功能可以滿足用戶需求。

(2)系統技術評價

本系統設計合理，功能達到了預期目標，且系統運行后穩定可靠，安全性高，具有實用性，大大提高了信訪辦公效率。

(3)系統經濟評價 在規定時間內，該系統完成了系統分析時所確定的系統開發目標，達到了設計要求，投入使用后為用戶節省了大量人力物力財力，提高了科學管理水平。

5.7測試總結

通過對系統的全面測試，所有測試條目都已經通過，實現了基本要求，系統可以正常運行。

6.結論

畢業設計是體現我們對所學知識的領悟和應用，是對我們大學四年所學理論知識的一次鞏固和提高，在此我對此次畢業設計做了三點歸納。

6.1系統的特點

華航校園網，采用PHP+MySQL的模式來訂制的一個小型平臺。本系統從功能上來說，比較完備。系統以Web界面與用戶交互，為用戶提供信息并接受其操作，同時通過數據庫管理系統來存儲信息數據。系統實現了根據用戶的需求及程序的應用與維護的易用性，將各個部分置于不同的模塊當中，方便了程序的擴展與維護，同時建立了程序功能復用的基礎。

6.2系統的不足和改進

本系統基本上滿足了華航校園網管理方面的需要。在界面上力求做到簡潔，在操作方面上盡量避免由于用戶操作不當帶來系統的出錯現象。但由于時間倉促，本系統還存在不足有待改進。界面不夠美觀，需要進一步修飾和美化；對數據庫操作的性能有待進一步優化，雖然本系統優化了不少，但要達到理想狀態還有一段距離，如部分功能程序代碼過長，如果后臺數據庫過大將會影響運行速度；部分數據庫表的設計存在一定的冗余，有待進一步優化。根據系統的不足，繼續改進和完善本系統。簡化程序代碼，可使不同界面之間能共享一些方法、函數和變量，這樣就會提高系統的運行速度；使用數據庫連接池技術提高數據庫操作的性能；數據庫的關系模式可以進一步規范化，減少冗余現象。

6.3設計收獲與心得

畢業設計是體現我們對所學知識的領悟和應用，是對我們大學四年所學理論 知識的一次鞏固和提高。設計本系統的過程不僅是對我學過的知識的一次回顧，更是在對我處理問題、解決實際問題能力的培養和鍛煉。通過本次畢業設計使我對系統開發有了深入的了解，我的編程能力也有了較大的提高。我在設計過程中也遇到了很多困難，但是通過指導老師和同學的幫助以及自己的努力，最終還是順利地完成了畢業設計。

雖然，畢業設計只有短暫的幾個月，但卻使我充分認識到自身還存在很多不足的地方，還需要不斷的努力實踐來充實自己、完善自己，只有這樣才能學無止境，以求得更大的發展。

致 謝

大學生活在這個時候即將劃上一個句號。但是對于我的人生道路來說，這僅僅是一個逗號，我將面對的是又一次征程的開始。

在此畢業設計期間，我首先要感謝我的指導老師——xx老師的幫助和支持，老師扎實的理論知識和認真負責的工作態度都使我受益匪淺，特別是在論文指導方面給予了我很大幫助，使我順利地完成了畢業論文。

同時我也要感謝我的同學，通過大學四年的相處，彼此都互相關心和幫助，每當我遇到困難和挫折的時候，他們都積極的鼓勵我，幫助我。

最后還要感謝在這大學四年中所有教過我的老師們，是你們使我獲得了知識的擴充，掌握了各種技術的理論基礎。這都為我最后進行畢業設計提供了強大的理論支持。

參 考 文 獻

[1] Luke?Welling，《PHP和MySql Web開發》，機械工業出版社 [2] 孔祥盛，《PHP編程基礎與實例教程》，人民郵電出版社

[3] 丁海燕，《Dreamweaver 網頁設計與制作案例教程》，清華大學出版社 [4] 本社，《Photoshop CS6從入門到精通》，北京希望電子出版社 [5] 羅云模，SQL Server 2000數據倉庫應用與開發，人民郵電出版社

[6] 殷佳庭,陸婷婷.基于PHP技術的ECSHOP的二次開發[J].科技信息.2011(32)[7] 紀海燕.基于PHP技術的教師資格考試準考證網上打印系統及后臺管理系統的設計與實現[J].科技信息.2012(09)[8] 張飛.基于PHP和MySQL的同學錄管理系統[J].計算機光盤軟件與應用.2012(03)[9] 邱煜炎.基于PHP的論文管理系統的設計與實現[J].中國教育信息化.2012(05)[10] 王歡,何友軍,杜鑫,李智宇.基于PHP MVC與ExtJs結合開發會議預約系統[J].電腦編程技巧與維護.2012(12)[11] 賈素來.使用PHP和MySQL開發動態網站[J].大眾科技.2011(03)[12] 劉艷杰,王軍豪.基于PHP技術在線考試系統的設計[J].電腦知識與技術.2011(29)[13] 田寧莉.基于PHP的Web數據庫訪問[J].科技風.2008(05)[14] 郭亮,高輝.動態網頁技術ASP,PHP,JSP的比較[J].黑龍江科技信息.2007(17)[15] 劉艷妮,張平平,張都應.利用PHP技術加強高校數字化校園的信息資源建設[J].技術與創新管理.2009(04)[16] 毛耀,楊頌華,祖正容,葉海濱.基于Flash的動態網站新方案[J].西南民族學院學報(自然科學版).2001(03)

第四篇：個人網站的設計與實現 畢業設計(論文)

隨著國際互聯網的普及，很多人已經不滿足僅僅在Internet上的瀏覽信息，而

是希望更深入的參與其中，擁有自己的Web網站，這似乎已經成為一種潮流。如果說個

人建立網站是為了追求時尚，那么企業建立網站就是必然的選擇了。

無論是專業的，還是業余的，很多人對網頁制作頗感興趣。事實上制作一個簡單的

網頁并不困難，會使用Word的人都可以勝任。但想做出超凡脫俗的網頁就不那么容易

了，而Dreamweaver卻可以滿足你的愿望，它是Macromedia公司開發的集網頁制作和

網站管理于一身的所見即所得的網頁編輯器。

同樣出自Macromedia公司的Flash,Fireworks在制作網站的過程中起到了錦上添

花的作用，是個人網站實現的好幫手，在制作網站的時候經常會用到這些軟件。

本文有五章，我來由淺到深介紹個人網站的設計與實現。

摘

摘摘

摘

要

要要 要

在互聯網走進我們的生活之前，沒有人敢夢想擁有自己的報紙、雜志、電臺、電

視臺。除了政策上的制約外，一個人也根本沒有操作一份傳播媒體的能力。現在不同了，互聯網給我們提供了一個“表達自我”的自由天地,你可以擁有自己的新聞郵件，你可

以建立自己的個人網站。只要你辦得成功也可以吸引成千上萬的訂戶、讀者,并建立自

己在眾多參與者中的權威地位。建立個人網站的基本過程可以分為以下七個環節 : 1 了解中國網絡個人主頁研究背景與發展現狀 系統需求分析與總體設計 熟悉網站開發模式、工具及環境 把自己的作品和想要展示的內容制作成網頁。使用動態網頁技術(ASP)，實現動態內容更新。認真地選取測試用例，進行交叉測試 網站的后期完善、宣傳及發展方向

其中 ,網頁制作和使用動態網頁技術(ASP)實現動態內容更新是網站開發的核心內容。

關鍵詞：網頁、制作、訪問、鏈接

Abstract

目 錄

第一章 引言

1.1 什么是Internet

1.2 Internet有哪些功能 1.3 www簡介

1.4 網頁基本構成元素

1.5 軟件的安裝與啟動

1.5.1 軟件的安裝

1.5.2 軟件的啟動

1.5.3 創建快捷方式

1.6 制作網頁前的準備

1.7 Dreamweaver的操作環境

1.7.1標題欄

1.7.2菜單欄

1.7.3快捷工具欄

1.7.4屬性面板

第二章 網站制作實戰

2.1 站點

2.1.1創建站點

2.1.2 創建站點內容

2.2 首頁

2.2.1 設置首頁布局

2.2.2 設置首頁的頁面屬性 2.2.3 查看和編輯頭內容

2.2.4 插入圖像

2.2.5 插入多媒體 2.2.6 插入文本

2.3 創建其它網頁

第三章 建立網頁鏈接

3.1 文字鏈接

3.2 圖像鏈接

3.3 E-Mail鏈接

3.4 文件下載鏈接

3.5 在HTML語言中建立網頁鏈接

3.5.1 文字鏈接

3.5.2 圖像鏈接

3.5.3 E-Mail鏈接

3.6.4 文件下載鏈接

第四章 結論

致 謝

參考文獻

第一章

第一章第一章

第一章

預備知識

預備知識預備知識

預備知識

1.1

InternetInternet

Internet

Internet的中文名為“國際互聯網”，又稱“因特網”。

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

用開放系統協議的計算機通訊網絡。然而，Internet不僅僅是計算機的互聯網，它還是

全球最大的信息資源寶庫，它提供了包括科研、教育、文化娛樂、商業和信息交流等各

種各樣的服務，使得世界范圍內的人與人之間的交流在時間和空間上變的更小了。

要了解Internet，就必須先了解局域網。我們可以將同一地點的許多計算機使用網

線連接在一起，構成一個高效率的計算機網絡，所有處于網絡內的終端機或電腦都能享

受網絡內所有的資源，比如程序，圖文資料等。這種計算機網絡因為一般都局限在一定

區域中，我們稱之為“局域網”（Local Area Network,簡稱LAN）,它是在日常工作中

用得最多的一種小型計算機網絡。局域網所覆蓋的地理范圍比較小，通常不超過幾十公

里，甚至只在同一座建筑物內或者鄰近的幾座建筑內。像常見的校園網，一座寫字樓內

部的網絡等都屬于局域網。

而Internet則不是指單個區域范圍內的網絡，而是指將全世界的各中不同類型的

計算機網絡連接起來的一個全球性的網絡。Internet上有取之不盡，用之不竭的信息資

源。對于Internet中各種各樣的信息，所有的人都可以通過網絡的連接來共享和使用。1.2

1.2 Internet有那些功能

Web頁瀏覽：這是目前利用最廣泛、最直接的互聯網服務，通過瀏覽WWW（萬維網）

中的網頁，可以了解世界各地的新聞，查看最新的股市行情，最新的娛樂動態、科技發

明，找到眾多的就業信息??幾乎想找到什么樣的信息，就有什么信息。正是有了WWW、Internet才會變得如此豐富多彩，才能走進千家萬戶。信息發布：通過Internet，不僅可以瀏覽別人發布在Web頁上的信息，也可以將

自己要發布的信息制作成Web頁，也即網頁，然后發布到Internet上，供全世界的人

瀏覽。

電子郵件：不同于傳統郵件，電子郵件(E-mail)通過Internet傳輸，寫信，發信，收信都在計算機上完成，一封電子郵件最短在一秒之內就可以發送出去，其效率是傳統

郵件無法比擬的。而且發送與接收電子郵件幾乎是免費的，所以比傳統郵件既節省時間

又經濟的多。

網上聊天：通過聊天軟件（如QQ、ICQ等）或不同網站的聊天室，可以和世界各

地的網友聊天。網友可能是遠在天邊的異國朋友，也可能是與你一起工作的餓同事，或

者是一起生活的家人，在這里沒有年齡、性別、身份、職業、國籍、膚色的限制，完全

突破了交友的傳統方式，人們可通過Internet互相了解對方，進行各種各樣的交流。

電子商務：現在網上交易已經成為現實，網上購物、網上商品銷售、網上拍賣、企業級電子商務、網上貨幣支付等電子商務活動已經搞的有聲有色，幾乎所有的專家都

預測，在未來的幾年內，電子商務會飛速發展。在不久的將來，您可以做在電腦前進行

各種各樣的商務活動。

網絡游戲：通過Internet，可以與全世界的玩家一起進行游戲對戰，也可以協同

作戰。網絡游戲已經成為信息產業全新的經濟增長點，每年都為開發商帶來巨額的利潤。

通過網絡游戲，可以充分享受Internet給我們帶來的樂趣。

網絡電話：網絡電話也稱IP電話。它采用Internet技術，利用專門的網絡電話

軟件，只需支付非常低廉的話費就可通話。Internet在電信市場上的應用將越來越廣泛。

1.3 WWW的簡介

WWW的全稱為World Wide Web，含義是“環球網”，又稱“萬維網”、3W、Web。

WWW是一個基于超文本（Hypertext）方式的信息檢索服務工具。我們上網瀏覽到的網頁就是這樣的超文本，也就是HTML(Hypertext Mark-up Language,超文本標記語言)文件，這些網頁文件被放置到WWW服務器上，并且都有一定的地址。當我們想瀏覽某個網站時，首先要在電腦上安裝瀏覽器，如Internet Explorer或Netscape，然后在瀏覽器中輸

入網站的地址（網址），就可以進入網站進行瀏覽。在這些網頁中，都有超連接，當將

鼠標指針移動到某個地方（如文本或圖象）時，鼠標指針就會變成一個小手形形狀，單

擊它就可以連接到另個網頁中，從而使得瀏覽者能在不同的信息之間跳轉，我們之所以

能在Internet的海洋中穿梭自如，正是超連接的功勞。

WWW 為我們帶來的是世界范圍的超級文本服務：只須操縱鼠標，就可以通過Inter net從世界各地調來你所希望的文本、圖像、動畫和聲音等信息。通過使用WWW，一個

不熟悉網絡使用的人也可以成為Internet的行家。

1.4網頁基本構成元素

要學會制作網頁，首先需要了解網頁都是由什么元素構成的。

文字：文本是構成網頁的基本元素。一個最簡單的網頁可以只有幾行文本。

圖片：正是有個各種美麗的圖片，網頁才變得多姿多彩。

動畫：如今，網頁上的動畫越來越多，最常用的有GIF動畫、Flash動畫等。

超連接：如上所述，超連接幾乎是必不可少的。一個沒有超連接的網頁，就如同汪

洋大海中的一座孤島，失去了與外界的一切聯系。

其它元素：還可以在網頁中添加聲音、視頻等元素。

1.5軟件的安裝與啟動

要使用網站設計軟件，自然先要將這些軟件安裝到自己的電腦中。安裝完畢，還需

要如何啟動，如何創建快捷方式。下面就讓我們來詳細地看一看具體的操作步驟。

1.5.1軟件的安裝

安裝之前，需要先了解軟件對系統的要求。以Windows為例，系統要求如下：

Intel Pentium II處理器或等效處理器，主頻300MHz或更高。

Windows 98Windows 2000Windows NT(具有Service Pack 3 或更高版本)、Windo

ws Me或Windows XP.Netscape Navigator 4.0版或更高版本或Microsoft Internet Explorer.96MB的可用內存（RAM），建議采用128MB內存。

分辨率可達 800×600像素的256色顯示器（建議顏色為百萬顏色，分辨率達到102

4×768像素）。

CD-ROM 驅動器。

檢查一下您的計算機，看是否具備了以上條件。如果具備，將“Macromedia Stud

io MX”程序會自動運行。如果不能自動運行，可以找到光盤放入光驅，安裝程序會自

動運行。可以找到光盤中的“Install Macromedia Studio MX”程序或“Autorun”程

序并雙擊運行。

Dreamweaver的安裝比較容易，幾乎可以自動完成。下面簡要說明一下安裝步驟。

操作步驟：

1、將安裝光盤放入光驅，安裝程序自動運行，并出現安裝界面。如果單擊安裝界面

上的“Macromedia STUDIO MX安裝”，那么將會安裝其下方所列出的軟件。所有的安裝

會自動完成。

2、單擊Dreamweaver MX,開始安裝過裝過程.先是出現解壓縮文件窗口,等待一會兒，便會出現安裝向導對話框。單擊“下一步”按鈕，繼續安裝過程。

3、出現“選擇目的地位置”對話框，默認的盤是C盤，如果想安裝到不同的位置，可以單擊目的文件夾右邊的“瀏覽”按鈕，并在彈出的“選擇文件夾”對話框選擇不同 的文件，如要安裝在D盤則可直接將路徑中的“C：”改為“D:”。也可以在下面的“目

錄”中選擇其它的文件夾，設置完后，單擊“確定”，回到“選擇目的地址”對話框，單擊“下一步”繼續。

4、而后會出現“默認編輯器”的對話框，默認為全選。如果希望讓Dreamweaver M

X成為下面所列文件類型的默認編輯器，那么可以在這里做選擇。選擇完畢，單擊“下

一步”按鈕。

5、出現“開始復制文件”對話框，單擊“下一步”安裝程序開始復制文件，過幾

分鐘后，安裝結束，單擊“結束”按鈕，結束安裝。

1.5.2 軟件啟動

軟件安裝完畢后，我們就可以使用它了。安裝程序已經自動在“開始”菜單中加入

了快捷方式。

單擊“開始”菜單，將鼠標指針依次指向“程序”|“Macromedia”|“MacromediaMX”,并在上面單擊鼠標左鍵。

1.5.3 創建快捷方式

使用“開始”菜單啟動程序的過程比較煩瑣。可以在Windows桌面或快速啟動欄上

創建快捷方式，這樣可以快速的啟動程序。

具體實現方法是：在“開始”菜單中找到相應程序的快捷方式，不過這是不要用

鼠標左鍵單擊，而是用右鍵按住向桌面拖動，然后松開右鍵，會出現一個快捷菜單，在

其中可以選擇不同的命令，比如選擇“在當前位置創建快捷方式”或“復制到當前位置”。

這樣以后在運行程序時，就方便快捷的多了。

1.6 制作網頁前的準備

電腦必備：

電腦速度夠快，最好能夠上網。

操作系統：Windows XP.軟件可選： 其它軟件：看圖軟件美圖秀秀 圖像處理軟件Photoshop、上傳工具CuteFTP

1.7 Dreamweaver MX的操作環境

我們將工作界面分成了“標題欄”、“菜單欄”、“快捷工具欄”、“屬性面板”、“浮動控制面板”5個部分來分別介紹。

1.7.1 標題欄

Dreamweaver MX的“標題欄”中將顯示文字“Macromedia Dreamweaver MX”如果

打開網頁的話，在后面還會顯示該網頁的一些信息，如網頁標題、所在位置及網頁名稱，右邊有三個鈕，分別對應Dreamweaver MX的最大化最小化和關閉的操作。

1.7.2 菜單欄

“標題欄”下面就是“菜單欄”，欄中提供了“文件”、“編輯”、“查看”、“插

入”、“修改”、“文本”、“站點”、“窗口”、“幫助”10項菜單。單擊其中任意

一項菜單，隨即就會出現一個下拉式指令菜單。有些指令的右邊會有鍵盤的代碼，這是

該指令的快捷鍵，熟練使用快捷鍵將會有助于提高工作效率。有些指令的右邊會有一個

小黑三角的標記，它代表該指令還包含下一級的指令，鼠標停留片刻即可顯示。

1.7.3 快捷工具欄

“快捷工具欄”指的是“菜單欄”下邊的3排按鈕，選擇菜單“查看/工具欄”，勾

選里面的“插入”、“文檔”和“標準”3項，完整的快捷工具欄就顯現出來了。

1.7.4 屬性面板

在網頁編輯窗口的下面還有一個面板，它是有名的“屬性面板”，它在這個軟件中

起到舉足輕重的作用。

屬性面板顧名思義，就是顯示，調整屬性的面板，根據鼠標所選中對象的不同，“屬性

面板”在界面上也會有所差異，用戶可以分別對不同的對象進行調整。

站點

2.1.1

創建站點

創建站點

要制作一個網站，第一步操作都是一樣的，就是要創造一個“站點”，這樣可以使

整個網站的脈絡結構清晰地展現在面前，避免了以后再進行紛雜的管理。

從菜單中選擇“站點/管理站點”在彈出的對話框中選擇“新建”，之后再選擇其

中的“站點”，再次彈出一個對話框，在文本框中輸入自己已經企化好的網站名稱“追

夢人”。

填好后，單擊“下一步”，進入下一個步驟。由于我要做的是一個靜態的網頁，所以選擇上面的一項“否，我不想使用服務器技術。”

單擊“下一步”，進入下一個步驟。

在此選項中有兩個選擇，選擇推薦的“編輯我的計算機上的本地副本，完成后再上

傳到服務器”。底下的文本框允許在本地磁盤上指定一個文件夾，Dreamweaver將在其 中儲存站點文件的本地副本。單擊該文本框后面的文件夾圖標，新建并指定一個空的文

件夾“E:/ding”。之后單擊“下一步“，進入下一個步驟。

這一步是如何設置連接到遠程服務器，彈出式菜單中有6中選擇，這里選擇“無”。

而后“下一步”再“完成”，即可。

2.1.2 創建站點內容

站點創建完成后，就可以創建Web頁來填充站點了。在“右側浮動面板組”中選擇

“文件/文件”面板，此時整個網站中沒有任何內容。用鼠標右擊面板中的本地根目錄

文件夾。在彈出的菜單中選擇“新建文件”，新建一個文件后將其命名為“index.htm(或i

ndex.html),它就是未來的首頁。

由于“追夢人”網站分為“平面設計”、“動畫制作”、“網文精品”、“經典回

顧”、“個人說明“這五個大欄目，所以繼續用鼠標右擊右側，在彈出的菜單中選擇第

二項“New Folder（新建文件夾）”。執行五次操作，新建五個文件夾，并把它們重命

名為graph、anim、books、music、letter，分別對應上面的五個大欄目。存放它們各

自的內容。之后再次新建1個文件夾，命名為images,用來存放“所有的圖象文件”的

內容。

之后在個欄目的文件夾里還要建立想相應的欄目網頁。

2.2.1 設置首頁布局

每個網站都會有一個首頁，就功能上而言，它代表著一個網站的風格與特色，就網站

架構上而言，它代表了網站的第一層架構，至于網站上其他Web頁，原則上都必須通過

首頁來連接散播出去，可見首頁是多么的重要。

首頁是打開網站后在瀏覽器中顯示的第一個頁面。它是起什么名字通常要視Server端 的設置，一般的有index.htm,default.htm或home.htm等，目前主要以index.htm的

居多。當然，后綴名為html也是正確的。

具體設置方法是：右健單擊“文件”浮動面板中的index.htm,在彈出的菜單中選擇“設

成首頁”。

首頁的布局有很多方法，在這里我所用到的是表格的“布局模式”。“布局”模式中的表格稱為布局表格，單元格稱為布局單元格。在繪制布局表格和布局單元格時，必須從

“標準”模式切換到“布局”模式。直接單擊“布局”按鈕即可。

操作步驟：

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

2、將變成“+”形狀的鼠標光標放到編輯中網頁上，在要繪制的地方進行拖動

就可以進行創建了。（如果繪制的是第一個表格必須從網頁的最左上角開始繪制）。

3、在這里要繪制多個表格，可以再次單擊“布局表格”按紐進行繪制，也可

以按住Ctrl鍵繪制多個表格。追夢人”網站首頁的布局如圖所示：

2.2.2設置首頁的頁面屬性

首先雙擊“文件”浮動面板中的index.htm,進入頁面的編輯窗口。右健單擊空白

區域，在菜單中選擇“頁面屬性”，之后彈出“頁面屬性”對話框，若選擇主菜單“修

改/頁面屬性”項，也可以把打開該對話框。

在“頁面屬性”對話框中，左側窗口顯示“分類”，其中包括了“外觀”、“鏈

接”、“標題”、“標題/編碼”、“跟蹤圖像”5項，右側區域則顯示各類中可以設置 的項目。“追夢人”首頁設置的屬性如下圖所示：

2.2.3查看和編輯頭內容

一個網頁文件結構上實際是由兩部分組成，頭（head）內容和主體（body）內容

主體內容（body）是文檔的主要部分，也是包含文本和圖像等的可見部分。頭內容（he

ad）是除文檔標題外的不可見部分，包含有文檔類型、語言編碼、搜索引擎的關鍵的關鍵字和內容指示器以及樣式定義等重要信息，這些元器并不是每個頁面都需要的，例如，可以僅為主頁提供關鍵字。

下面就以首頁為例，說明怎樣插入較常用的頭（head）內容。

單擊“菜單攔”下面“插入快捷”的下拉列表，選擇其中的HTML類，此時右側將

會顯示該類中可以插入的對象快捷按鈕，再次單擊第2個按鈕“文件頭”旁邊的下拉箭

頭，會彈出菜單，該項列出的便是即將插入的頭內容。

2.2.4 插入圖像

圖像是網頁中不可或缺的組成成份，恰當地使用圖像，可以使網站充滿生活生命力

與說服力，吸引更多的瀏覽者，加深他們欣賞你網站的意愿。

另一方面，網頁的容量大小是網站成功與否的一大關鍵因素。由于網絡在傳輸上 的限制，導致了下載的速度不可能太快，因此，網頁的大小就不能太大，其中關鍵就在

于圖像的大小了，否則瀏覽者會失去等待的耐心，無論你的網站多么精彩也無濟于事了。所以，在網面容量大小的問題上一定要重視。下面就來詳細介紹對網頁圖像進行處理的

操作步驟，以使得它們在保持圖形美麗與網站風格搭配的基礎上，圖片文件能夠變的更

小。

1、首先將光標停留在要插入圖像的位置，然后單擊“菜單欄”下面“插入快健欄” 的下拉表，選擇其中的“常用”類，則右側將會顯示該類中可以插入的對象快鍵按鈕。

左起第5個即為“圖像：圖像”按鈕，單擊它右側的下拉列表，選擇第1項“圖像”。

2、隨即彈出“選擇圖像源文件”對話框。從計算機磁盤中選擇想要插入的圖像文件，或在URL編輯框中輸入圖像的路徑和名稱。下面的“相對于”下拉表框中，可選擇文件

URL地址的類型，如果選擇“文檔”選項，表示圖像地址相對于當前文檔；如果選擇“站

點根目錄”選項，表示地址相對于根目錄。在這里我要插入的是網站標志logo，插入l

ogo圖象，如圖所示：

最后單擊“確定”按鈕，即可完成插入圖像的操作。2.2.5插入多媒體

在Dreamweaver MX2004中，除了之前講到的可以插入“圖像”外，還可插入動畫、聲音、視頻等媒體元素，如Flash,Shockwave,Applets,ActieX及格Midi聲音文件等，并且還可以在Dreamweaver自身內插入Macromedia Flash MX2004按鈕和文本對象，以

及進行相關的后期處理和添加設計備注等操作。

在Dreamweaver MX 2004文檔中，可以插入媒體文件包括Flash Shockwave影片、QuickTime、AVI java、applet Active X控件以及各種格式的音頻文件。

要在瀏覽器中播放放Flash 動畫，必須在瀏覽器中集成“Flash 播放器（Flash Play er）”。其中，Internet Explorer通過ActiveX控制來實現，Netscape Navigator則

是通過相應的插件來實現的。在最新的Netscape Navigator和Internet Explorer瀏

覽器中，均已集成了 Flash動畫播放功能。操場作步驟：

步驟1 將光標停留在要插入Flash的位置，然后單擊菜單欄下面“插入快捷欄”的下

拉列表，選擇其中的“常用”分類，右側將會顯示該類中可以插入的對象快捷

按鈕。左起第6個即為“媒體”按鈕，單擊它右側的下拉列表，選擇第1項Fl

ash圖標。

步驟2 在彈出的對話框中選擇擴展名為swf 的Flash文件，即可將其插入到Dreamwe

aver的“網頁編輯窗口”中，可以看到，在這個窗口中Flash文件的大小。在

這里我的主頁插入的一個動畫，如圖所示：

2.2.6插入文本

文字是人類語言最基本的表達方式，在網頁中，文本內容也可以說是重要的組成

部分，一個網站成功與否，它是最關鍵的因素。在這最關鍵的因素。可豐富網站的文字

內容，并以最最美觀、最整齊的方式放入到網頁中。

插入文本的兩種方式

網頁中需要大量的文本，我們或以通過以下兩種方式插入它們。

一種是在網頁編輯窗口中直接用鍵盤敲入文本。這可以算是最基本的輸入方式了，和一些文本編輯軟件（如Microsoft Word）的使用方法一樣，選擇好習慣的輸入法，就

可以運指如飛了。

另一種是復制文本的方式。有些讀者可能不喜歡使用Dreamweaver MX2004來進行

打字的工作，而更習慣在專門的文本編輯軟件中快速打字，如Microsoft Word和 Wind

ows自帶的記事本等，又或者讀者已經準備好了要放入網頁的文本的電子版本，那么我

們就可以直接使用Dreamweaver的文本復制功能，將大段的文本內容拷貝到網頁的編輯

窗口來進行排版的工作，具體步驟如下。

打開文本編輯軟件（如Microsoft Word），選中要復制的文本，它們將反白顯示，執行菜單“編輯/復制”命令或直接用快捷鍵Ctrl+C，之后切換回Dreamweaver,將光標

停留在插入文本的位置，執行主菜單“編輯/粘貼”命令或直接使用快捷鍵Ctrl+v,即可

將大段的文本快速粘貼到網頁中。

這在我的“網文精品”中用到很多，全部是在word軟件中排好ctrl+c,然后點擊要

粘貼的位置，crtl+v到Dreamweaver即可。

2.3創建其它網頁

還有其它的幾個網站與主頁的制作相同，一個網頁是圖象和文字的組合。“平面設計”中的圖象插入和前面的介紹相似，并可以在屬性攔中調節圖象的大小。

在Dreamwerver中常常會用到Firework、Flash，它們是相輔相成，在主頁中的主體部

分就是用Firework,如圖所示：

在“個人說明”中也用到這點，首先定好需要尺寸，在屬性中設好背景，顏色等

等，插入圖象，輸入文字，也word里的操作雷同。

3.建立網頁鏈接

網站實際上是由很多網頁組成的，那么網頁之間是如何聯系的呢？這就是本章要講 的內容----網頁的“鏈接”。“鏈接”，又稱“超鏈接"（Hyperlink）,它作為網頁的橋梁，起著相當重要的作用。網頁中的很多對象都可以加入“鏈接”屬性。在Dreamweaver MX2004中，如果以“鏈

接”的媒介來劃分的話，則“鏈接”可以分為“文字鏈接”、“圖像鏈接”、“圖像地圖鏈接”、“內部鏈接和外部鏈接”、“E-mail鏈接”、“命名錨記鏈接”、“文件下載鏈接”和“跳轉菜單”，共8種。其中部分內容在之前的章節中可能接觸過，這里將對其進行更深入的講解。3.1文字鏈接

“文字鏈接”即以文字作為媒介的鏈接，它是網頁中最常被使用的鏈接方式，具

有“文件小、制作簡單和便于維護”的特點。

接下來結合我的個人網站為實例，來講解如何為文字建立“鏈接”。

具體操作步驟如下所述。操作步驟

步驟1 準備好已經制作完成的首頁的各個欄目頁面（假設除了“鏈接”，其他內容都

已經制作完成了），該網站包含6個欄目，這里的5個欄目----“平面設計”、“動畫

制作”和“網文精品”、“經典回顧”、“個人說明”為例來進行講解。

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

到單擊不同的欄目的網頁。因此為第1個欄目“平面設計”設置鏈接，首先要反白選中

“平面設計”4個文字。

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

步驟4 接下來需要把鏈接的地址加入到文本框中，方法有3種。

這里我用到的是直接點擊文件夾圖標，在文件夾中找到要鏈接的對象graph.htm。這樣

就建立了超鏈接。不過有點很重要，由于大多數服務器都不支持中文文件名，而且對大

小寫敏感，因此采用英文文件名并統一大小寫。如圖所示：

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

實例中沒有選擇任何選項，保持空白，表示在原窗口中打開鏈接網頁。

步驟6 還可以設置一些“鏈接”的屬性，這是前面講過的內容。單擊“屬性面板”中的 “頁面屬性”，選擇其中的“鏈接”分類，可以進行的設置有“鏈接字體”、“大小”、“鏈接顏色”、“變換圖像鏈接”顏色、“已訪問鏈接”顏色、“活動鏈接”顏色及“下

劃線樣式”。

步驟7 至此，第1個欄目的鏈接就制作完畢了，按下Ctrl+S保存網頁，再按下F12預

覽，測試一下，當鼠標放在“平面設計”這4個文字上時將變成手形，并且瀏覽器窗口下面的狀態欄中會顯示鏈接到的網頁的地址，單擊文字，頁面會立即跳轉到第1個欄目

中，這表示鏈接已經制作成功了。

步驟8 同理，按照以上步驟，再為“動畫制作”和“網文精品”“經典回顧“等其它欄

制作指向對應欄目的鏈接。

步驟9 通常在欄目頁面中還需要有“返回首頁”的鏈接，單擊其后可以跳轉回首頁，因

此在各個欄目中還要插入“網站首頁”的文字，并且制作指向首頁index.html的鏈接，制作方法不變。

至此，整個“文字鏈接”的實例就全就全部完成了。通過對這個實例的講解，讀者不僅

應該學會如何為文字制作鏈接，還應用對“鏈接”有了更加深刻的理解，鏈接的目的何

在？它到底能夠在網頁的網站中發揮什么樣的作用？怎樣才能更好地使用它？這些是

網頁制作者更應該思考的問題。

下面繼續介紹其他類型的鏈接。

3.2

3.23.2

3.2圖像鏈接

圖像鏈接圖像鏈接

圖像鏈接

“圖像”也是常被使用的鏈接媒體，它和“文字鏈接”非常相似。為圖像加入鏈接，首

先應該在網頁中插入“圖像”，有關插入“圖像”或“導航條”按鈕的內容，接下來以

我的網站“追夢人“為例，講解如何建立“圖像鏈接”。

操作步驟

步驟1 首先仍然要準備好已經制作完成的首頁和各個欄目的頁面（假設除了“鏈接”，其他內容都已經制作完成了），該網站包含6個欄目，下面我們就動手為這6個欄目分

別制作它們的鏈接。

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

為第3個欄目“動畫制作”設置鏈接，因此選中包含“動畫制作”4個字的圖像。步驟3 觀察“屬性面板”，在“鏈接”文本框中輸入鏈接的文字地址。可以使用之前講

過的“指向文件”和“選擇文件”的方法。

步驟4 如果有需要，可以在“目標”下拉列表中選擇“鏈接”網頁顯示的窗口方式，分

別為-blank、-parent、-self或 top。實例中使用了默認出的保留空白選項的方式。

步驟5 另外，讀者還可以為圖像增加“替代”文本。實例中為第1個欄目增加欄目名稱 的“替代”文本。

步驟6 至此，第1個欄目的圖像鏈接就制作完畢了，按下Ctrl+S保存網頁，再按下F1 2預覽，測試一下，將鼠標放在“動畫制作”4個文字上時將變成手形，同時瀏覽器窗

口下面的狀態欄中會顯示出鏈接到的網頁的地址，并且會顯示出“替代”文本“動畫制

作”，單擊文字，頁面會立即跳轉到第3個欄目中，這表示鏈接已經制作成功了。

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

步驟8 在欄目頁面中制作“返回首頁”的鏈接，使得單擊后可以跳轉回首頁，其制作方

法不變。

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

3.3E

3.3E 3.3E

3.3E –

––

–Mail

MailMail

Mail的鏈接 的鏈接的鏈接 的鏈接

E-Mail鏈接，是指當瀏覽者單擊該鏈接之后，不是打開一個網頁文件，而是啟動用戶的

E-Mail客戶端軟件（如Outlook Express）,并打開一個空白的新郵件，供瀏覽者撰寫

內容來與網站聯系人聯系，這是一種最方便的互動方式。

結合“個人說明”網頁，建立E-Mail鏈接的步驟如下所述。

操作步驟 步驟1 將光標停留在頁面右下角要插入E-mail鏈接的位置。步驟2 選擇“插入快捷欄”中的“常用”分類，單擊左側第2個“電子郵件鏈接”按鈕。

步驟3 在彈出的“電子郵件鏈接”對話框中有兩個輸入項，分別是“文本”和“E-Mai

l”。在“文本”項中輸入鏈接的文字，中文、英文均可，在E-Mail項中輸入網站聯

系有的電子郵件地址，如實例中的 ding_zhuimeng123@163.net。

步驟4 單擊“確定”按鈕，具有“E-Mail鏈接”屬性的文本就ding_zhuimeng123@163.net。插入到光標所在位置了，按下 Ctrl+S保存網頁，再按下F12預覽查看實際效果。

上面的方法只適用于文本的“E-Mail鏈接”，如果想在其它的對象（如圖像）上也加入

這種鏈接，該怎辦呢？下面介紹第2種建立“E-Mail鏈接”的方法。

其實很簡單，與前面講過的圖像加入鏈接的方法基本一樣。先在頁面中需要的地方插入

圖像，之后選中圖像，并在“屬性面板”的“鏈接”文本框中輸入如下語句即可----ma

ilto: ding_zhuimeng123@163.net ?subject=網站的建議與第1種方法不同的是，E-Ma

il 地址前面增加了mailto:字樣。用這種方法就可以給圖像等其他對象建立“E-Mail

鏈接”了。

3.4

3.43.4

3.4文件下載鏈接

文件下載鏈接文件下載鏈接

文件下載鏈接

“文件下載鏈接”的原理很簡單，只要鏈接文件屬于瀏覽無法識別的關型，便都會使用 IE瀏覽器直接進行下載，并保存到本地計算機中。

瀏覽器無法識別的文件類型有很多，這里就介紹一個最常用的，以zip或rar為后綴名 的壓縮格式文件，這種文件可以使用主流的壓縮軟件（如winzip、winrar）來制作。下

面我們就業以實例來說明。在前面“插入多媒體”一章中，我們曾經講過直接鏈接文件的方式來插入“視頻”，即

直接在“鏈接”文本框中輸入“文件名+名后綴名”，如olympus.wmv。單日擊這個鏈接，經過數據下載后，Windows系統將啟動自帶的媒體播放器Windows Media Player 來播

放該視頻。

操作步驟

步驟1 先將視頻文件olympus.wmv通壓縮成olympus.rar文件，放入站點的media文件

夾下。

步驟2 將文件路徑輸入至“鏈接”文本框中。

步驟3 保存網頁，按下F12預覽，在瀏覽器中單擊“下載精彩廣告視頻”鏈接文本，會

彈出“文本下載”選擇框，單擊其中的“保存”按鈕。

步驟4 在“另存為”對框中選擇保存到本地計算機中的位置，實例中為“經典回顧”文

件夾。之后單擊“保存”按鈕，壓縮文件即保存到該位置中。至此，“文件下載鏈接”

便制作完成了。讀者可以打開“我的文檔”文件夾，解壓縮olympus.rar文件，隨時欣

賞下載影片。

本設計中未用到此鏈接，在此只作簡單介紹。

3.5

3.53.5

3.5在在在

在HTML

HTMLHTML

HTML語言中建立網頁鏈接

語言中建立網頁鏈接語言中建立網頁鏈接

語言中建立網頁鏈接

3.5.1

3.5.13.5.1

3.5.1文字鏈接

文字鏈接文字鏈接

文字鏈接

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

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

動畫制作（原窗口，默認為空）

網文精品

第五篇：畢業設計(論文)個人網站的設計與實現

題目：個人網站實現技術

個人網站實現技術

個人網站的設計與實現

前 言

隨著國際互聯網的普及，很多人已經不滿足僅僅在Internet上的瀏覽信息，而是希望更深入的參與其中，擁有自己的Web網站，這似乎已經成為一種潮流。如果說個人建立網站是為了追求時尚，那么企業建立網站就是必然的選擇了。

無論是專業的，還是業余的，很多人對網頁制作頗感興趣。事實上制作一個簡單的網頁并不困難，會使用Word的人都可以勝任。但想做出超凡脫俗的網頁就不那么容易了，而Dreamweaver卻可以滿足你的愿望，它是Macromedia公司開發的集網頁制作和網站管理于一身的所見即所得的網頁編輯器。

同樣出自Macromedia公司的Flash,Fireworks在制作網站的過程中起到了錦上添花的作用，是個人網站實現的好幫手，在制作網站的時候經常會用到這些軟件。

本文有五章，我來由淺到深介紹個人網站的設計與實現。

摘 要

在互聯網走進我們的生活之前，沒有人敢夢想擁有自己的報紙、雜志、電臺、電視臺。除了政策上的制約外，一個人也根本沒有操作一份傳播媒體的能力。現在不同了，互聯網給我們提供了一個“表達自我”的自由天地,你可以擁有自己的新聞郵件，你可以建立自己的個人網站。只要你辦得成功也可以吸引成千上萬的訂戶、讀者,并建立自己在眾多參與者中的權威地位。建立個人網站的基本過程可以分為以下七個環節 : 1 了解中國網絡個人主頁研究背景與發展現狀 2 系統需求分析與總體設計 3 熟悉網站開發模式、工具及環境 把自己的作品和想要展示的內容制作成網頁。5 使用動態網頁技術(ASP)，實現動態內容更新。6 認真地選取測試用例，進行交叉測試 7 網站的后期完善、宣傳及發展方向

其中 ,網頁制作和使用動態網頁技術(ASP)實現動態內容更新是網站開發的核心內容。

關鍵詞：網頁、制作、訪問、鏈接 Abstract Enters before our life in the Internet, nobody dares to vainly hope for has own newspaper, the magazine, the broadcasting station, the television station.Besides the policy in restriction, a person simply has not also operated dissemination media the ability.Now has been different, Internet has provided to us “the expression” free world,You may have own news mail, you may establish own individual website.So long as you also manage the success to be possible to attract the tens of thousands of subscribers, the reader,And establishes oneself in the multitudinous participant's authoritative status.Establishes individual website the unit process to be possible to divide into following seven links: 1、understands the Chinese network individual main page research background and the development present situation 2 systems demands analysis and system design 3 familiar websites developments pattern, tool and environment 4 and wants own work the content which demonstrated to manufacture the homepage.5 uses dynamic homepages technology(ASP), realization dynamic content renewal.6 earnestly selects measured the test example, carries on the overlapping test 7 websites later periods consummate, the propaganda and the development direction Among them,The homepage manufacture and the use dynamic homepage technology(ASP)realizes the dynamic content renewal is the website development core content.Key word: Homepage, manufacture, visit, link

目 錄 第一章 引言 1.1 什么是Internet 1.2 Internet有哪些功能 1.3 www簡介

1.4 網頁基本構成元素 1.5 軟件的安裝與啟動 1.5.1 軟件的安裝 1.5.2 軟件的啟動 1.5.3 創建快捷方式 1.6 制作網頁前的準備 1.7 Dreamweaver的操作環境 1.7.1標題欄 1.7.2菜單欄 1.7.3快捷工具欄 1.7.4屬性面板 第二章 網站制作實戰 2.1 站點 2.1.1創建站點 2.1.2 創建站點內容 2.2 首頁

2.2.1 設置首頁布局 2.2.2 設置首頁的頁面屬性 2.2.3 查看和編輯頭內容 2.2.4 插入圖像 2.2.5 插入多媒體 2.2.6 插入文本 2.3 創建其它網頁 第三章 建立網頁鏈接 3.1 文字鏈接 3.2 圖像鏈接 3.3 E-Mail鏈接 3.4 文件下載鏈接

3.5 在HTML語言中建立網頁鏈接 3.5.1 文字鏈接 3.5.2 圖像鏈接 3.5.3 E-Mail鏈接 3.6.4 文件下載鏈接 第四章 結論 致 謝 參考文獻

第一章 預備知識

1.1 什么是Internet Internet的中文名為“國際互聯網”，又稱“因特網”。

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

要了解Internet，就必須先了解局域網。我們可以將同一地點的許多計算機使用網線連接在一起，構成一個高效率的計算機網絡，所有處于網絡內的終端機或電腦都能享受網絡內所有的資源，比如程序，圖文資料等。這種計算機網絡因為一般都局限在一定區域中，我們稱之為“局域網”（Local Area Network,簡稱LAN）,它是在日常工作中用得最多的一種小型計算機網絡。局域網所覆蓋的地理范圍比較小，通常不超過幾十公里，甚至只在同一座建筑物內或者鄰近的幾座建筑內。像常見的校園網，一座寫字樓內部的網絡等都屬于局域網。

而Internet則不是指單個區域范圍內的網絡，而是指將全世界的各中不同類型的計算機網絡連接起來的一個全球性的網絡。Internet上有取之不盡，用之不竭的信息資源。對于Internet中各種各樣的信息，所有的人都可以通過網絡的連接來共享和使用。

1.2 Internet有那些功能

Web頁瀏覽：這是目前利用最廣泛、最直接的互聯網服務，通過瀏覽WWW（萬維網）中的網頁，可以了解世界各地的新聞，查看最新的股市行情，最新的娛樂動態、科技發明，找到眾多的就業信息??幾乎想找到什么樣的信息，就有什么信息。正是有了WWW、Internet才會變得如此豐富多彩，才能走進千家萬戶。信息發布：通過Internet，不僅可以瀏覽別人發布在Web頁上的信息，也可以將自己要發布的信息制作成Web頁，也即網頁，然后發布到Internet上，供全世界的人瀏覽。

電子郵件：不同于傳統郵件，電子郵件(E-mail)通過Internet傳輸，寫信，發信，收信都在計算機上完成，一封電子郵件最短在一秒之內就可以發送出去，其效率是傳統郵件無法比擬的。而且發送與接收電子郵件幾乎是免費的，所以比傳統郵件既節省時間又經濟的多。

網上聊天：通過聊天軟件（如QQ、ICQ等）或不同網站的聊天室，可以和世界各地的網友聊天。網友可能是遠在天邊的異國朋友，也可能是與你一起工作的餓同事，或者是一起生活的家人，在這里沒有年齡、性別、身份、職業、國籍、膚色的限制，完全突破了交友的傳統方式，人們可通過Internet互相了解對方，進行各種各樣的交流。

電子商務：現在網上交易已經成為現實，網上購物、網上商品銷售、網上拍賣、企業級電子商務、網上貨幣支付等電子商務活動已經搞的有聲有色，幾乎所有的專家都預測，在未來的幾年內，電子商務會飛速發展。在不久的將來，您可以做在電腦前進行各種各樣的商務活動。

網絡游戲：通過Internet，可以與全世界的玩家一起進行游戲對戰，也可以協同作戰。網絡游戲已經成為信息產業全新的經濟增長點，每年都為開發商帶來巨額的利潤。通過網絡游戲，可以充分享受Internet給我們帶來的樂趣。

網絡電話：網絡電話也稱IP電話。它采用Internet技術，利用專門的網絡電話軟件，只需支付非常低廉的話費就可通話。Internet在電信市場上的應用將越來越廣泛。

1.3 WWW的簡介

WWW的全稱為World Wide Web，含義是“環球網”，又稱“萬維網”、3W、Web。WWW是一個基于超文本（Hypertext）方式的信息檢索服務工具。我們上網瀏覽到的網頁就是這樣的超文本，也就是HTML(Hypertext Mark-up Language,超文本標記語言)文件，這些網頁文件被放置到WWW服務器上，并且都有一定的地址。當我們想瀏覽某個網站時，首先要在電腦上安裝瀏覽器，如Internet Explorer或Netscape，然后在瀏覽器中輸入網站的地址（網址），就可以進入網站進行瀏覽。在這些網頁中，都有超連接，當將鼠標指針移動到某個地方（如文本或圖象）時，鼠標指針就會變成一個小手形形狀，單擊它就可以連接到另個網頁中，從而使得瀏覽者能在不同的信息之間跳轉，我們之所以能在Internet的海洋中穿梭自如，正是超連接的功勞。

WWW 為我們帶來的是世界范圍的超級文本服務：只須操縱鼠標，就可以通過Internet從世界各地調來你所希望的文本、圖像、動畫和聲音等信息。通過使用WWW，一個不熟悉網絡使用的人也可以成為Internet的行家。

1.4網頁基本構成元素

要學會制作網頁，首先需要了解網頁都是由什么元素構成的。

文字：文本是構成網頁的基本元素。一個最簡單的網頁可以只有幾行文本。

圖片：正是有個各種美麗的圖片，網頁才變得多姿多彩。

動畫：如今，網頁上的動畫越來越多，最常用的有GIF動畫、Flash動畫等。

超連接：如上所述，超連接幾乎是必不可少的。一個沒有超連接的網頁，就如同汪洋大海中的一座孤島，失去了與外界的一切聯系。

其它元素：還可以在網頁中添加聲音、視頻等元素。

1.5軟件的安裝與啟動 要使用網站設計軟件，自然先要將這些軟件安裝到自己的電腦中。安裝完畢，還需要如何啟動，如何創建快捷方式。下面就讓我們來詳細地看一看具體的操作步驟。

1.5.1軟件的安裝

安裝之前，需要先了解軟件對系統的要求。以Windows為例，系統要求如下： Intel Pentium II處理器或等效處理器，主頻300MHz或更高。

Windows 98Windows 2000Windows NT(具有Service Pack 3 或更高版本)、Windows Me或Windows XP.Netscape Navigator 4.0版或更高版本或Microsoft Internet Explorer.96MB的可用內存（RAM），建議采用128MB內存。

分辨率可達 800×600像素的256色顯示器（建議顏色為百萬顏色，分辨率達到1024×768像素）。CD-ROM 驅動器。

檢查一下您的計算機，看是否具備了以上條件。如果具備，將“Macromedia Studio MX”程序會自動運行。如果不能自動運行，可以找到光盤放入光驅，安裝程序會自動運行。可以找到光盤中的“Install Macromedia Studio MX”程序或“Autorun”程序并雙擊運行。

Dreamweaver的安裝比較容易，幾乎可以自動完成。下面簡要說明一下安裝步驟。

操作步驟：

1、將安裝光盤放入光驅，安裝程序自動運行，并出現安裝界面。如果單擊安裝界面上的“Macromedia STUDIO MX安裝”，那么將會安裝其下方所列出的軟件。所有的安裝會自動完成。

2、單擊Dreamweaver MX,開始安裝過裝過程.先是出現解壓縮文件窗口,等待一會兒,便會出現安裝向導對話框。單擊“下一步”按鈕，繼續安裝過程。

3、出現“選擇目的地位置”對話框，默認的盤是C盤，如果想安裝到不同的位置，可以單擊目的文件夾右邊的“瀏覽”按鈕，并在彈出的“選擇文件夾”對話框選擇不同的文件，如要安裝在D盤則可直接將路徑中的“C：”改為“D:”。也可以在下面的“目錄”中選擇其它的文件夾，設置完后，單擊“確定”，回到“選擇目的地址”對話框，單擊“下一步”繼續。

4、而后會出現“默認編輯器”的對話框，默認為全選。如果希望讓Dreamweaver MX成為下面所列文件類型的默認編輯器，那么可以在這里做選擇。選擇完畢，單擊“下一步”按鈕。

5、出現“開始復制文件”對話框，單擊“下一步”安裝程序開始復制文件，過幾分鐘后，安裝結束，單擊“結束”按鈕，結束安裝。

1.5.2 軟件啟動

軟件安裝完畢后，我們就可以使用它了。安裝程序已經自動在“開始”菜單中加入了快捷方式。

單擊“開始”菜單，將鼠標指針依次指向“程序”|“Macromedia”|“Macromedia MX”,并在上面單擊鼠標左鍵。

1.5.3 創建快捷方式 使用“開始”菜單啟動程序的過程比較煩瑣。可以在Windows桌面或快速啟動欄上創建快捷方式，這樣可以快速的啟動程序。

具體實現方法是：在“開始”菜單中找到相應程序的快捷方式，不過這是不要用鼠標左鍵單擊，而是用右鍵按住向桌面拖動，然后松開右鍵，會出現一個快捷菜單，在其中可以選擇不同的命令，比如選擇“在當前位置創建快捷方式”或“復制到當前位置”。

這樣以后在運行程序時，就方便快捷的多了。

1.6 制作網頁前的準備

電腦必備：

電腦速度夠快，最好能夠上網。操作系統：Windows 98/NT/Me/2000/XP.軟件可選：

其它軟件：看圖軟件ACDSee、圖像處理軟件Photoshop、上傳工具CuteFTP、Fireworks、動畫軟件Flash等。

1.7 Dreamweaver MX的操作環境

我們將工作界面分成了“標題欄”、“菜單欄”、“快捷工具欄”、“屬性面板”、“浮動控制面板”5個部分來分別介紹。

1.7.1 標題欄 Dreamweaver MX的“標題欄”中將顯示文字“Macromedia Dreamweaver MX”如果打開網頁的話，在后面還會顯示該網頁的一些信息，如網頁標題、所在位置及網頁名稱，右邊有三個鈕，分別對應Dreamweaver MX的最大化最小化和關閉的操作。

1.7.2 菜單欄

“標題欄”下面就是“菜單欄”，欄中提供了“文件”、“編輯”、“查看”、“插入”、“修改”、“文本”、“站點”、“窗口”、“幫助”10項菜單。單擊其中任意一項菜單，隨即就會出現一個下拉式指令菜單。有些指令的右邊會有鍵盤的代碼，這是該指令的快捷鍵，熟練使用快捷鍵將會有助于提高工作效率。有些指令的右邊會有一個小黑三角的標記，它代表該指令還包含下一級的指令，鼠標停留片刻即可顯示。

1.7.3 快捷工具欄

“快捷工具欄”指的是“菜單欄”下邊的3排按鈕，選擇菜單“查看/工具欄”，勾選里面的“插入”、“文檔”和“標準”3項，完整的快捷工具欄就顯現出來了。

1.7.4 屬性面板

在網頁編輯窗口的下面還有一個面板，它是有名的“屬性面板”，它在這個軟件中起到舉足輕重的作用。

屬性面板顧名思義，就是顯示，調整屬性的面板，根據鼠標所選中對象的不同，“屬性面板”在界面上也會有所差異，用戶可以分別對不同的對象進行調整。

第二章 網站制作實戰

2.1 站點

2.1.1 創建站點

要制作一個網站，第一步操作都是一樣的，就是要創造一個“站點”，這樣可以使整個網站的脈絡結構清晰地展現在面前，避免了以后再進行紛雜的管理。

從菜單中選擇“站點/管理站點”在彈出的對話框中選擇“新建”，之后再選擇其中的“站點”，再次彈出一個對話框，在文本框中輸入自己已經企化好的網站名稱“追夢人”。

填好后，單擊“下一步”，進入下一個步驟。由于我要做的是一個靜態的網頁，所以選擇上面的一項“否，我不想使用服務器技術。” 單擊“下一步”，進入下一個步驟。

在此選項中有兩個選擇，選擇推薦的“編輯我的計算機上的本地副本，完成后再上傳到服務器”。底下的文本框允許在本地磁盤上指定一個文件夾，Dreamweaver將在其中儲存站點文件的本地副本。單擊該文本框后面的文件夾圖標，新建并指定一個空的文件夾“E:/ding”。之后單擊“下一步“，進入下一個步驟。

這一步是如何設置連接到遠程服務器，彈出式菜單中有6中選擇，這里選擇“無”。而后“下一步”再“完成”，即可。

2.1.2 創建站點內容

站點創建完成后，就可以創建Web頁來填充站點了。在“右側浮動面板組”中選擇“文件/文件”面板，此時整個網站中沒有任何內容。用鼠標右擊面板中的本地根目錄文件夾。在彈出的菜單中選擇“新建文件”，新建一個文件后將其命名為“index.htm(或index.html),它就是未來的首頁。

由于“追夢人”網站分為“平面設計”、“動畫制作”、“網文精品”、“經典回顧”、“個人說明“這五個大欄目，所以繼續用鼠標右擊右側，在彈出的菜單中選擇第二項“New Folder（新建文件夾）”。執行五次操作，新建五個文件夾，并把它們重命名為graph、anim、books、music、letter，分別對應上面的五個大欄目。存放它們各自的內容。之后再次新建1個文件夾，命名為images,用來存放“所有的圖象文件”的內容。

之后在個欄目的文件夾里還要建立想相應的欄目網頁。

2.2 首頁

2.2.1 設置首頁布局

每個網站都會有一個首頁，就功能上而言，它代表著一個網站的風格與特色，就網站架構上而言，它代表了網站的第一層架構，至于網站上其他Web頁，原則上都必須通過首頁來連接散播出去，可見首頁是多么的重要。

首頁是打開網站后在瀏覽器中顯示的第一個頁面。它是起什么名字通常要視Server端的設置，一般的有index.htm,default.htm或home.htm等，目前主要以index.htm的居多。當然，后綴名為html也是正確的。

具體設置方法是：右健單擊“文件”浮動面板中的index.htm,在彈出的菜單中選擇“設成首頁”。

首頁的布局有很多方法，在這里我所用到的是表格的“布局模式”。“布局”模式中的表格稱為布局表格，單元格稱為布局單元格。在繪制布局表格和布局單元格時，必須從“標準”模式切換到“布局”模式。直接單擊“布局”按鈕即可。操作步驟：

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

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

3、在這里要繪制多個表格，可以再次單擊“布局表格”按紐進行繪制，也可以按住Ctrl鍵繪制多個表格。追夢人”網站首頁的布局如圖所示：

2.2.2設置首頁的頁面屬性

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

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

2.2.3查看和編輯頭內容

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

下面就以首頁為例，說明怎樣插入較常用的頭（head）內容。

單擊“菜單攔”下面“插入快捷”的下拉列表，選擇其中的HTML類，此時右側將會顯示該類中可以插入的對象快捷按鈕，再次單擊第2個按鈕“文件頭”旁邊的下拉箭頭，會彈出菜單，該項列出的便是即將插入的頭內容。

2.2.4 插入圖像

圖像是網頁中不可或缺的組成成份，恰當地使用圖像，可以使網站充滿生活生命力與說服力，吸引更多的瀏覽者，加深他們欣賞你網站的意愿。

另一方面，網頁的容量大小是網站成功與否的一大關鍵因素。由于網絡在傳輸上的限制，導致了下載的速度不可能太快，因此，網頁的大小就不能太大，其中關鍵就在于圖像的大小了，否則瀏覽者會失去等待的耐心，無論你的網站多么精彩也無濟于事了。所以，在網面容量大小的問題上一定要重視。下面就來詳細介紹對網頁圖像進行處理的操作步驟，以使得它們在保持圖形美麗與網站風格搭配的基礎上，圖片文件能夠變的更小。

1、首先將光標停留在要插入圖像的位置，然后單擊“菜單欄”下面“插入快健欄”的下拉表，選擇其中的“常用”類，則右側將會顯示該類中可以插入的對象快鍵按鈕。左起第5個即為“圖像：圖像”按鈕，單擊它右側的下拉列表，選擇第1項“圖像”。

2、隨即彈出“選擇圖像源文件”對話框。從計算機磁盤中選擇想要插入的圖像文件，或在URL編輯框中輸入圖像的路徑和名稱。下面的“相對于”下拉表框中，可選擇文件URL地址的類型，如果選擇“文檔”選項，表示圖像地址相對于當前文檔；如果選擇“站點根目錄”選項，表示地址相對于根目錄。在這里我要插入的是網站標志logo，插入logo圖象，如圖所示：

最后單擊“確定”按鈕，即可完成插入圖像的操作。2.2.5插入多媒體

在Dreamweaver MX2004中，除了之前講到的可以插入“圖像”外，還可插入動畫、聲音、視頻等媒體元素，如Flash,Shockwave,Applets,ActieX及格Midi聲音文件等，并且還可以在Dreamweaver自身內插入Macromedia Flash MX2004按鈕和文本對象，以及進行相關的后期處理和添加設計備注等操作。

在Dreamweaver MX 2004文檔中，可以插入媒體文件包括Flash Shockwave影片、QuickTime、AVI java、applet Active X控件以及各種格式的音頻文件。要在瀏覽器中播放放Flash 動畫，必須在瀏覽器中集成“Flash 播放器（Flash Player）”。其中，Internet Explorer通過ActiveX控制來實現，Netscape Navigator則是通過相應的插件來實現的。在最新的Netscape Navigator和Internet Explorer瀏覽器中，均已集成了 Flash動畫播放功能。操場作步驟：

步驟1 將光標停留在要插入Flash的位置，然后單擊菜單欄下面“插入快捷欄”的下拉列表，選擇其中的“常用”分類，右側將會顯示該類中可以插入的對象快捷按鈕。左起第6個即為“媒體”按鈕，單擊它右側的下拉列表，選擇第1項Flash圖標。

步驟2 在彈出的對話框中選擇擴展名為swf 的Flash文件，即可將其插入到Dreamwe aver的“網頁編輯窗口”中，可以看到，在這個窗口中Flash文件的大小。在這里我的主頁插入的一個動畫，如圖所示：

2.2.6插入文本 文字是人類語言最基本的表達方式，在網頁中，文本內容也可以說是重要的組成部分，一個網站成功與否，它是最關鍵的因素。在這最關鍵的因素。可豐富網站的文字內容，并以最最美觀、最整齊的方式放入到網頁中。插入文本的兩種方式

網頁中需要大量的文本，我們或以通過以下兩種方式插入它們。

一種是在網頁編輯窗口中直接用鍵盤敲入文本。這可以算是最基本的輸入方式了，和一些文本編輯軟件（如Microsoft Word）的使用方法一樣，選擇好習慣的輸入法，就可以運指如飛了。

另一種是復制文本的方式。有些讀者可能不喜歡使用Dreamweaver MX2004來進行打字的工作，而更習慣在專門的文本編輯軟件中快速打字，如Microsoft Word和 Windows自帶的記事本等，又或者讀者已經準備好了要放入網頁的文本的電子版本，那么我們就可以直接使用Dreamweaver的文本復制功能，將大段的文本內容拷貝到網頁的編輯窗口來進行排版的工作，具體步驟如下。

打開文本編輯軟件（如Microsoft Word），選中要復制的文本，它們將反白顯示，執行菜單“編輯/復制”命令或直接用快捷鍵Ctrl+C，之后切換回Dreamweaver,將光標停留在插入文本的位置，執行主菜單“編輯/粘貼”命令或直接使用快捷鍵Ctrl+v,即可將大段的文本快速粘貼到網頁中。

這在我的“網文精品”中用到很多，全部是在word軟件中排好ctrl+c,然后點擊要粘貼的位置，crtl+v到Dreamweaver即可。

2.3創建其它網頁

還有其它的幾個網站與主頁的制作相同，一個網頁是圖象和文字的組合。“平面設計”中的圖象插入和前面的介紹相似，并可以在屬性攔中調節圖象的大小。在Dreamwerver中常常會用到Firework、Flash，它們是相輔相成，在主頁中的主體部分就是用Firework,如圖所示：

在“個人說明”中也用到這點，首先定好需要尺寸，在屬性中設好背景，顏色等等，插入圖象，輸入文字，也word里的操作雷同。

第三章 建立網頁鏈接

網站實際上是由很多網頁組成的，那么網頁之間是如何聯系的呢？這就是本章要講的內容----網頁的“鏈接”。

“鏈接”，又稱“超鏈接"（Hyperlink）,它作為網頁的橋梁，起著相當重要的作用。網頁中的很多對象都可以加入“鏈接”屬性。在Dreamweaver MX2004中，如果以“鏈接”的媒介來劃分的話，則“鏈接”可以分為“文字鏈接”、“圖像鏈接”、“圖像地圖鏈接”、“內部鏈接和外部鏈接”、“E-mail鏈接”、“命名錨記鏈接”、“文件下載鏈接”和“跳轉菜單”，共8種。其中部分內容在之前的章節中可能接觸過，這里將對其進行更深入的講解。

3.1文字鏈接

“文字鏈接”即以文字作為媒介的鏈接，它是網頁中最常被使用的鏈接方式，具有“文件小、制作簡單和便于維護”的特點。

接下來結合我的個人網站為實例，來講解如何為文字建立“鏈接”。具體操作步驟如下所述。操作步驟

步驟1 準備好已經制作完成的首頁的各個欄目頁面（假設除了“鏈接”，其他內容都已經制作完成了），該網站包含6個欄目，這里的5個欄目----“平面設計”、“動畫制作”和“網文精品”、“經典回顧”、“個人說明”為例來進行講解。

步驟2 在Dreamweaver 中打開首頁，之后反白選取作為“鏈接”的文字。實例中要做到單擊不同的欄目的網頁。因此為第1個欄目“平面設計”設置鏈接，首先要反白選中“平面設計”4個文字。

步驟3 觀察“屬性面板”，其中包括一個“鏈接”文本框。步驟4 接下來需要把鏈接的地址加入到文本框中，方法有3種。

這里我用到的是直接點擊文件夾圖標，在文件夾中找到要鏈接的對象graph.htm。這樣就建立了超鏈接。不過有點很重要，由于大多數服務器都不支持中文文件名，而且對大小寫敏感，因此采用英文文件名并統一大小寫。如圖所示：

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

實例中沒有選擇任何選項，保持空白，表示在原窗口中打開鏈接網頁。

步驟6 還可以設置一些“鏈接”的屬性，這是前面講過的內容。單擊“屬性面板”中的“頁面屬性”，選擇其中的“鏈接”分類，可以進行的設置有“鏈接字體”、“大小”、“鏈接顏色”、“變換圖像鏈接”顏色、“已訪問鏈接”顏色、“活動鏈接”顏色及“下劃線樣式”。

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

步驟8 同理，按照以上步驟，再為“動畫制作”和“網文精品”“經典回顧“等其它欄制作指向對應欄目的鏈接。

步驟9 通常在欄目頁面中還需要有“返回首頁”的鏈接，單擊其后可以跳轉回首頁，因此在各個欄目中還要插入“網站首頁”的文字，并且制作指向首頁index.html的鏈接，制作方法不變。

至此，整個“文字鏈接”的實例就全就全部完成了。通過對這個實例的講解，讀者不僅應該學會如何為文字制作鏈接，還應用對“鏈接”有了更加深刻的理解，鏈接的目的何在？它到底能夠在網頁的網站中發揮什么樣的作用？怎樣才能更好地使用它？這些是網頁制作者更應該思考的問題。下面繼續介紹其他類型的鏈接。

3.2圖像鏈接

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

步驟1 首先仍然要準備好已經制作完成的首頁和各個欄目的頁面（假設除了“鏈接”，其他內容都已經制作完成了），該網站包含6個欄目，下面我們就動手為這6個欄目分別制作它們的鏈接。

步驟2 在Dreamweaver中打開網站的首頁，之后選取要制作“鏈接”的圖像。實例中先為第3個欄目“動畫制作”設置鏈接，因此選中包含“動畫制作”4個字的圖像。步驟3 觀察“屬性面板”，在“鏈接”文本框中輸入鏈接的文字地址。可以使用之前講過的“指向文件”和“選擇文件”的方法。

步驟4 如果有需要，可以在“目標”下拉列表中選擇“鏈接”網頁顯示的窗口方式，分別為-blank、-parent、-self或 top。實例中使用了默認出的保留空白選項的方式。

步驟5 另外，讀者還可以為圖像增加“替代”文本。實例中為第1個欄目增加欄目名稱的“替代”文本。

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

步驟8 在欄目頁面中制作“返回首頁”的鏈接，使得單擊后可以跳轉回首頁，其制作方法不變。

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

3.3E –Mail的鏈接

E-Mail鏈接，是指當瀏覽者單擊該鏈接之后，不是打開一個網頁文件，而是啟動用戶的E-Mail客戶端軟件（如Outlook Express）,并打開一個空白的新郵件，供瀏覽者撰寫內容來與網站聯系人聯系，這是一種最方便的互動方式。結合“個人說明”網頁，建立E-Mail鏈接的步驟如下所述。操作步驟 步驟1 將光標停留在頁面右下角要插入E-mail鏈接的位置。

步驟2 選擇“插入快捷欄”中的“常用”分類，單擊左側第2個“電子郵件鏈接”按鈕。

步驟3 在彈出的“電子郵件鏈接”對話框中有兩個輸入項，分別是“文本”和“E-Mail”。在“文本”項中輸入鏈接的文字，中文、英文均可，在E-Mail項中輸入網站聯系有的電子郵件地址，如實例中的 ding_zhuimeng123@163.net。

步驟4 單擊“確定”按鈕，具有“E-Mail鏈接”屬性的文本就ding_zhuimeng123@163.net。插入到光標所在位置了，按下 Ctrl+S保存網頁，再按下F12預覽查看實際效果。上面的方法只適用于文本的“E-Mail鏈接”，如果想在其它的對象（如圖像）上也加入這種鏈接，該怎辦呢？下面介紹第2種建立“E-Mail鏈接”的方法。

其實很簡單，與前面講過的圖像加入鏈接的方法基本一樣。先在頁面中需要的地方插入圖像，之后選中圖像，并在“屬性面板”的“鏈接”文本框中輸入如下語句即可----mailto: ding_zhuimeng123@163.net ?subject=網站的建議與第1種方法不同的是，E-Mail 地址前面增加了mailto:字樣。用這種方法就可以給圖像等其他對象建立“E-Mail鏈接”了。

3.4文件下載鏈接

“文件下載鏈接”的原理很簡單，只要鏈接文件屬于瀏覽無法識別的關型，便都會使用IE瀏覽器直接進行下載，并保存到本地計算機中。

瀏覽器無法識別的文件類型有很多，這里就介紹一個最常用的，以zip或rar為后綴名的壓縮格式文件，這種文件可以使用主流的壓縮軟件（如winzip、winrar）來制作。下面我們就業以實例來說明。在前面“插入多媒體”一章中，我們曾經講過直接鏈接文件的方式來插入“視頻”，即直接在“鏈接”文本框中輸入“文件名+名后綴名”，如olympus.wmv。單日擊這個鏈接，經過數據下載后，Windows系統將啟動自帶的媒體播放器Windows Media Player 來播放該視頻。操作步驟

步驟1 先將視頻文件olympus.wmv通壓縮成olympus.rar文件，放入站點的media文件夾下。

步驟2 將文件路徑輸入至“鏈接”文本框中。

步驟3 保存網頁，按下F12預覽，在瀏覽器中單擊“下載精彩廣告視頻”鏈接文本，會彈出“文本下載”選擇框，單擊其中的“保存”按鈕。

步驟4 在“另存為”對框中選擇保存到本地計算機中的位置，實例中為“經典回顧”文件夾。之后單擊“保存”按鈕，壓縮文件即保存到該位置中。至此，“文件下載鏈接”便制作完成了。讀者可以打開“我的文檔”文件夾，解壓縮olympus.rar文件，隨時欣賞下載影片。

本設計中未用到此鏈接，在此只作簡單介紹。

3.5在HTML語言中建立網頁鏈接

3.5.1文字鏈接

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

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

動畫制作（原窗口，默認為空）

網文精品