廣東工業(yè)大學(xué)華立學(xué)院本科畢業(yè)設(shè)計（論文）基于dreamweaver 的個人網(wǎng)站的網(wǎng)頁設(shè)計系 部 機(jī)電與信息工程學(xué)部專 業(yè) 信息工程年級班別 09信息（1）班學(xué) 號

廣東工業(yè)大學(xué)

華立學(xué)院

本科畢業(yè)設(shè)計（論文）

基于dreamweaver 的個人網(wǎng)站的網(wǎng)頁設(shè)計

系 部 機(jī)電與信息工程學(xué)部

專 業(yè) 信息工程

年級班別 09信息（1）班

學(xué) 號 11030901008

學(xué)生姓名 黃炎停

指導(dǎo)教師 祝振宇

2013年 6 月

摘 要

因特網(wǎng)是目前世界上最大的計算機(jī)互聯(lián)網(wǎng)絡(luò)，它遍布全球，將世界各地的各種規(guī)模的網(wǎng)絡(luò)連成一個整體。據(jù)估計，目前因特網(wǎng)已有數(shù)以千萬計的網(wǎng)站，其內(nèi)容范圍跨越了政治、經(jīng)濟(jì)、文化、科學(xué)、生活等等各個領(lǐng)域，它已經(jīng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道。因此，網(wǎng)站建設(shè)在互聯(lián)網(wǎng)應(yīng)用上的地位是顯而易見的。

1991年8月6日，世界上第一個網(wǎng)站誕生。它是由Tim Berners-Lee所建立的，基于文本，包含幾個鏈接的網(wǎng)站，現(xiàn)在依然在線，網(wǎng)址是http://info.cern.ch/。從那以后，網(wǎng)頁設(shè)計師們嘗試了各種網(wǎng)頁的視覺效果。前期的網(wǎng)頁由文本構(gòu)成，加上一些小圖片，毫無布局可言的標(biāo)題與段落。然而，隨著科技的飛速發(fā)展，出現(xiàn)了表格布局，然后是 Flash ，最后是基于 CSS 的網(wǎng)頁設(shè)計。

目前，用戶最多、應(yīng)用最廣、功能最強大的的網(wǎng)頁設(shè)計軟件就是Dreamweaver ，它集網(wǎng)頁制作和管理網(wǎng)站于一身，它是第一套針對專業(yè)網(wǎng)頁設(shè)計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以非常容易地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。Dreamweaver 原本由Macromedia 公司所開發(fā)，但是Macromedia 公司現(xiàn)已被Adobe 公司收購，Dreamweaver 也就成為Adobe Dreamweaver。

我這次開發(fā)的是一個小型的個人網(wǎng)站，為了符合設(shè)計需求，結(jié)合各大網(wǎng)站內(nèi)容以及形式而建設(shè)的，包括：首頁、日記、推薦大全、輕松一刻、留言、登錄和注冊等7大板塊。

關(guān)鍵字： 網(wǎng)頁設(shè)計 ， 網(wǎng)站 ，個人網(wǎng)站， dreamweaver ， html

Abstract

The Internet is now the world's largest computer interconnected networks, it is all over the world, around the world to be various kinds of the size of the network together as a whole.Current estimates suggest that the Internet has tens of millions of websites and their content range across political, economic, cultural, scientific, and so on all areas of life, it has become people to quickly get, distribution and transfer information important channel.The website construction, therefore, on the Internet application status is obvious.

On August 6, 1991, the world's first website was born. It was founded by Tim berners-lee, text-based, contains several links to websites, now still online, the url is http://info.cern.ch.Since then, web page designers tried a variety of visual effects.Previous page consists of text, plus a few little pictures, no layout of headings and paragraphs. However, with the rapid development of science and technology, the form layout, then a Flash, the last is based on the CSS web design.

At present, most users, the most widely used, the most powerful is Dreamweaver web design software, it set web site in a web page creation and management, it is the first set for professional web designers develop visual web development tools in particular, it can be used to easily create, cross platform and cross browser limit restrictions dynamic web pages.Dreamweaver development by Macromedia companies are originally, but Macromedia company has been acquired by Adobe, Dreamweaver also becomes the Adobe Dreamweaver.

This development is a small personal site, in order to comply with the design requirements, combined with the content and form and construction, including: home page, diary, recommended books, relaxed moment, leave a message, login and registration, etc. 7 big plate.

Keywords : website Design , website , personal website, dreamweaver , html

目 錄

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

1.1課題需求 ...................................................................................................................... 1

1.2課題目的 ...................................................................................................................... 1

2 網(wǎng)頁設(shè)計簡述 ........................................................... 2

2.1網(wǎng)站與網(wǎng)頁 .................................................................................................................. 2

2.1.1網(wǎng)站 ................................................................................................................... 2

2.1.2網(wǎng)頁 ................................................................................................................... 3

2.2網(wǎng)頁的名詞解釋 .......................................................................................................... 3

2.3網(wǎng)頁的類型 .................................................................................................................. 4

2.4網(wǎng)頁設(shè)計的語言 .......................................................................................................... 6

2.4.1 HTML . ................................................................................................................. 6

2.4.2 JavaScrip ............................................................................................................ 7

2.5網(wǎng)頁的配色 .................................................................................................................. 7

2.6網(wǎng)頁的布局 .................................................................................................................. 8

3 網(wǎng)頁設(shè)計軟件介紹 ....................................................... 9

3.1 A DOBE D REAMWEAVER 介紹 . ....................................................................................... 9

3.2 A DOBE F LASH 介紹 . .................................................................................................... 10

3.3 A DOBE P HOTOSHOP 介紹 ............................................................................................ 11

4 主體設(shè)計 .............................................................. 13

4.1準(zhǔn)備工作 .................................................................................................................... 13

4.2定義站點 .................................................................................................................... 14

4.3制作首頁 .................................................................................................................... 14

4.3.1定義CSS 樣式 ................................................................................................. 15

4.3.2制作首頁上部 ................................................................................................. 17

4.3.3制作首頁中部 ................................................................................................. 17

4.3.4制作網(wǎng)頁下部 ................................................................................................. 19

4.4制作網(wǎng)頁模板 ............................................................................................................ 20

4.4.1制作模板的樣式和上部 ................................................................................. 20

4.4.2制作模板網(wǎng)頁中、下部 ................................................................................. 21

4.4.3創(chuàng)建可編輯區(qū)域 ............................................................................................. 21

4.5制作子頁 .................................................................................................................... 22

4.6設(shè)置鏈接 .................................................................................................................... 23

結(jié)束語 .................................................................. 25

參考文獻(xiàn) ................................................................ 26

1 緒論

1.1課題需求

因特網(wǎng)是目前世界上最大的計算機(jī)互聯(lián)網(wǎng)絡(luò)，它遍布全球，將世界各地的各種規(guī)模

的網(wǎng)絡(luò)連成一個整體。World Wide Web(簡稱WWW ，中文譯為萬維網(wǎng)) ，作為因特網(wǎng)上一種先進(jìn)的，易于被人們所接受的信息檢索手段，目前已成為世界上最大的信息資源庫。據(jù)估計，目前因特網(wǎng)已有數(shù)以千萬計的網(wǎng)站，其內(nèi)容范圍跨越了政治、經(jīng)濟(jì)、文化、科學(xué)、生活等等各個領(lǐng)域，其用戶群十分龐大，是數(shù)以億計的，它已經(jīng)成為人們快速獲取、

發(fā)布和傳遞信息的重要渠道，已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分。

例如通過網(wǎng)站，有需求的合作單位可以輕而易舉地獲取紙巾公司的相關(guān)信息，如公

司的名稱和地址、聯(lián)系方式，更加重要的是了解公司的產(chǎn)品信息，例如產(chǎn)品種類與價格等等。這樣的網(wǎng)站，對于廠家與商家而言都是不錯的。廠家可以利用網(wǎng)站展示自身形象、為商家提供及時和有效的信息，從而開拓新的市場和提高市場占有率；商家可以通過網(wǎng)站選擇到物美價廉的產(chǎn)品。

因此，網(wǎng)站建設(shè)在互聯(lián)網(wǎng)應(yīng)用上的地位是顯而易見的，對人類活動有極其重要的影

響。而網(wǎng)頁設(shè)計作為網(wǎng)站建設(shè)重要的一環(huán)，有其極其重要的價值。

1.2課題目的

如今的社會，人們已經(jīng)離不開了互聯(lián)網(wǎng)，互聯(lián)網(wǎng)已經(jīng)成為人與人之間交流的一種極

其重要的形式，它擺脫了時間與空間的限制。隨著科技的迅速發(fā)展及網(wǎng)絡(luò)用戶要求的不斷提高，網(wǎng)站向用戶提供的服務(wù)將越來越豐富，越來越人性化。例如用戶可以借助瀏覽器在網(wǎng)上獲得信息，做到足不出戶知天下；也可以在家里上網(wǎng)購物、炒股、聊天、辦理銀行轉(zhuǎn)賬、收發(fā)信件等。

網(wǎng)絡(luò)的發(fā)展大趨勢就是向個人網(wǎng)站發(fā)展。通過個人網(wǎng)站可以充分地向他人展示自

我，將自己喜歡的文字、圖像、影視等等放在個人網(wǎng)站上，以此展示自己的興趣愛好；展示自己的才華，將自己的作品、言論等等放在個人網(wǎng)站上，讓其他人知道你的長處；在商業(yè)營銷方面，可以將各種產(chǎn)品擺放在個人網(wǎng)站上進(jìn)行推薦，甚至直接買賣。

1

2 網(wǎng)頁設(shè)計簡述

2.1網(wǎng)站與網(wǎng)頁

網(wǎng)站與網(wǎng)頁是兩個不同概念，網(wǎng)頁是網(wǎng)站中的一頁，但是網(wǎng)頁有時就是一個網(wǎng)站，因為有些網(wǎng)站就只有一個頁面。

2.1.1網(wǎng)站

網(wǎng)站(Website)是指因特網(wǎng)上一塊固定的面向全世界發(fā)布消息的地方，由域名(也就是網(wǎng)址) 和網(wǎng)站空間構(gòu)成。網(wǎng)站開始是指在因特網(wǎng)上，根據(jù)一定的規(guī)則，使用HTML 等工具制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁的集合。簡單地說，網(wǎng)站是一種通訊工具，人們可以利用網(wǎng)站來提供相關(guān)的網(wǎng)絡(luò)服務(wù)，或者通過網(wǎng)站來發(fā)布自己想要公開的資訊，其他人可以通過網(wǎng)頁瀏覽器來訪問網(wǎng)站，享受網(wǎng)絡(luò)服務(wù)或者獲取自己需要的資訊。衡量一個網(wǎng)站的性能通常從網(wǎng)站空間大小、網(wǎng)站位置、網(wǎng)站連接速度（俗稱“網(wǎng)速”）、網(wǎng)站軟件配置、網(wǎng)站提供服務(wù)等幾方面考慮，最直接的衡量標(biāo)準(zhǔn)是這個網(wǎng)站的真實流量。網(wǎng)站建設(shè)包括網(wǎng)站策劃、網(wǎng)頁設(shè)計、網(wǎng)站推廣、網(wǎng)站評估、網(wǎng)站運營、網(wǎng)站整體優(yōu)化。

網(wǎng)站內(nèi)容按可分為5種類型，即企業(yè)網(wǎng)站、門戶網(wǎng)站、專業(yè)網(wǎng)站、職能網(wǎng)站、個人網(wǎng)站，下面將對這幾種網(wǎng)站分別進(jìn)行介紹。

企業(yè)網(wǎng)站：企業(yè)網(wǎng)站是為了展現(xiàn)公司產(chǎn)品和企業(yè)形象，以公司名義開發(fā)創(chuàng)建的網(wǎng)站，其內(nèi)容、樣式和風(fēng)格等都為擴(kuò)大銷售渠道和展示企業(yè)自身形象。

門戶網(wǎng)站：門戶網(wǎng)站是一種綜合性網(wǎng)站，涉及領(lǐng)域非常廣泛，包含新聞和娛樂、文學(xué)、音樂、影視、體育等方面的內(nèi)容，且具有論壇、評論等功能。

專業(yè)網(wǎng)站：專業(yè)網(wǎng)站具有很強的專業(yè)性，通常只涉及某一個領(lǐng)域，內(nèi)容比較專業(yè)。如起點文學(xué)網(wǎng)站即是一個專業(yè)小說網(wǎng)站，前程無憂網(wǎng)是一個招聘專業(yè)網(wǎng)站平臺。

職能網(wǎng)站：職能網(wǎng)站具有專門的功能，如政府職能網(wǎng)站等。目前大熱的電子商務(wù)網(wǎng)站也屬于這類網(wǎng)站，較有名的電子商務(wù)網(wǎng)站有淘寶網(wǎng)、京東和當(dāng)當(dāng)網(wǎng)等等。

個人網(wǎng)站：個人網(wǎng)站具有較強的個性化，是以個人名義開發(fā)創(chuàng)建的網(wǎng)站，以展現(xiàn)個人的個性，滿足個人需求。

網(wǎng)站是由多個網(wǎng)頁組成的，但不是網(wǎng)頁的簡單羅列組合，而是用超鏈接方式組成的既有鮮明風(fēng)格又有完善內(nèi)容的有機(jī)整體。

2

2.1.2網(wǎng)頁

網(wǎng)頁(web page)，是網(wǎng)站中的一頁，是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺。網(wǎng)頁是由多種元素構(gòu)成的，其中最基本的元素是文本和圖像，它們更是網(wǎng)頁信息的主要載體，它們在網(wǎng)貞中起著非常重要的作用，是用戶的第一印象。

各網(wǎng)頁集合的初始網(wǎng)頁叫主頁（亦稱首頁或起始頁），它是一個網(wǎng)站的起點站或者說主目錄。通過主頁，用戶可以比較輕松地了解該網(wǎng)站提供的信息，從而易于瀏覽網(wǎng)站其他部分的內(nèi)容。網(wǎng)頁是一個文件，他存放在世界某個地方的某一部計算機(jī)中，而這部計算機(jī)必須是與互聯(lián)網(wǎng)相連接的。網(wǎng)頁會經(jīng)由網(wǎng)址來識別與存取, 當(dāng)我們在網(wǎng)頁瀏覽器輸入網(wǎng)址后，經(jīng)過一段復(fù)雜而又快速的程序，與網(wǎng)址相對應(yīng)的網(wǎng)頁文件會經(jīng)過網(wǎng)絡(luò)被傳送到你的計算機(jī)，然后再通過網(wǎng)頁瀏覽器解釋網(wǎng)頁的內(nèi)容，再展示到你的眼前。

2.2網(wǎng)頁的名詞解釋

站點：站點是一個管理網(wǎng)頁文檔的場所。

IP 地址：IP 地址作為路由尋址用的數(shù)字型標(biāo)識，連接在因特網(wǎng)上的每一個主機(jī)分配的一個地址，它猶如主機(jī)的門牌號，獨一無二的，可以讓路由識別。

域名：域名是一種字符型標(biāo)識，能夠讓人輕而易舉地記住，它猶如是網(wǎng)站的地址，因特網(wǎng)中任何網(wǎng)站的域名都是全世界唯一的。如www .baidu.om就是百度網(wǎng)站的域名。

瀏覽器：瀏覽器是萬維網(wǎng)服務(wù)的客戶端瀏覽程序?？梢韵蛉f維網(wǎng)服務(wù)器發(fā)送各種請求，并對從服務(wù)器發(fā)來的超文本信息和各種多媒體數(shù)據(jù)格式進(jìn)行解釋、顯示和播放。目前瀏覽速度最快的瀏覽器是谷歌公司的chrome 瀏覽器。

導(dǎo)航條：導(dǎo)航條就如同一個網(wǎng)站的路牌，有了它，用戶輕而易舉地找到自己所想瀏覽的頁面，不會在瀏覽網(wǎng)站時“迷路”，如圖（2-2

）所示：

圖（2-2）：某網(wǎng)站的導(dǎo)航條

超鏈接：超鏈接在網(wǎng)頁中起著非常重要的作用，主要用于將不同頁面鏈接起來。用戶單擊含有超鏈接技術(shù)的文本、圖像，甚至動畫等等的載體，就能打開其指定的目標(biāo)網(wǎng)頁。

3

表單：表單是具有交互性的動態(tài)網(wǎng)頁，常用于在注冊網(wǎng)站會員和申請郵箱等活動時提交用戶信息。如圖（2-3）所示：

圖（2-3）：申請QQ 賬戶的表單

URL: URL（英文Uniform Resource Locator的縮寫）是指全球統(tǒng)一資源定位器，使用URL 路徑，可以標(biāo)識出位于互聯(lián)網(wǎng)計算機(jī)中任意位置的文件。

2.3網(wǎng)頁的類型

網(wǎng)頁有多種分類, 但是我們一般把它分為兩大類：靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。

所謂靜態(tài)網(wǎng)頁并不是是網(wǎng)頁是靜態(tài)不動的，它一樣可以有各種動態(tài)效果的，如.GIF 格式的動畫、FLASH 、滾動字幕等等，這些“動態(tài)效果”只是視覺上的。靜態(tài)網(wǎng)頁是用HTML 代碼來編寫的網(wǎng)頁，一般是以*.html或*.htm為模板來命名的，其代碼都在網(wǎng)頁之中。靜態(tài)網(wǎng)頁不需要經(jīng)過程序運算與數(shù)據(jù)庫連接，直接把這些靜態(tài)的信息發(fā)送到用戶的瀏覽器上了，這樣減輕了服務(wù)器的負(fù)擔(dān)，也就降低了數(shù)據(jù)庫的成本，自然而然的也就提高了網(wǎng)頁打開的速度了。

網(wǎng)站中長時間不需要更新的欄目宜用靜態(tài)網(wǎng)頁來實現(xiàn)，例如網(wǎng)站的導(dǎo)航欄目；網(wǎng)站如果不需要實時更新的話，也宜用靜態(tài)網(wǎng)頁來實現(xiàn)，例如產(chǎn)品種類與信息變更比較少的小規(guī)模公司或者展示型網(wǎng)站。由于不跟數(shù)據(jù)庫連接，靜態(tài)網(wǎng)頁不能自主管理發(fā)布更新的網(wǎng)頁, 信息更新速度相對比較緩慢。在沒有人工去更新的時候，用戶在任何時候、任何

4

地方、采用任何方式瀏覽該頁面，所看到的瀏覽結(jié)果都一模一樣的。如果想更新網(wǎng)頁內(nèi)容, 需要通過人工更新，通過FTP 軟件把文件下載下來，再用網(wǎng)頁制作軟件修改。

總之，靜態(tài)網(wǎng)頁比較適合于用來發(fā)布無需用戶參與、無需自動更新的靜態(tài)文本內(nèi)容。 與靜態(tài)網(wǎng)頁相對應(yīng)的是動態(tài)網(wǎng)頁，所謂動態(tài)網(wǎng)頁并不是指會動的網(wǎng)頁就是動態(tài)網(wǎng)頁，它一樣也可以是靜態(tài)的，頁面是純文字內(nèi)容的。動態(tài)網(wǎng)頁是通過網(wǎng)頁腳本與語言自動處理、自動更新的網(wǎng)頁，它會依據(jù)不同的客戶和不同的時間發(fā)送不同的網(wǎng)頁給用戶，它們是以網(wǎng)絡(luò)中的數(shù)據(jù)庫為依據(jù)的。動態(tài)頁面的主要功能是把儲存在數(shù)據(jù)庫中的內(nèi)容，以動態(tài)的形式展現(xiàn)給用戶，并把用戶的數(shù)據(jù)存儲在數(shù)據(jù)庫中，留在以后使用，動態(tài)網(wǎng)頁的信息更新的速度比較快。在動態(tài)網(wǎng)站中的程序的操作都是在服務(wù)器中執(zhí)行的，通過網(wǎng)絡(luò)發(fā)送給用戶的只是在這些程序中運算得到的結(jié)果，這樣一來，對用戶的服務(wù)器的要求會比較低，然而服務(wù)器在完成用戶的請求的時候，需要從數(shù)據(jù)庫中找到和用戶要求相對應(yīng)的一些數(shù)據(jù)，這樣一來，需要占用很大的服務(wù)器資源。隨著后臺的數(shù)據(jù)庫儲存的內(nèi)容不斷的豐富和訪問的人數(shù)不斷的增多，會不斷的增加服務(wù)器的壓力，最終，網(wǎng)頁加載的速度就會變的很慢。動態(tài)網(wǎng)頁一般以*.asp、*.aspx、*.php、或*.jsp作為模板來命名的。動態(tài)網(wǎng)頁一般需要配合數(shù)據(jù)庫，以實現(xiàn)非常強大的功能，比較常見的表現(xiàn)形式有：論壇和網(wǎng)購、留言板、聊天室、校友錄等等。

隨著數(shù)據(jù)庫和各種腳本技術(shù)的發(fā)展，越來越多的網(wǎng)站都開始采取動態(tài)網(wǎng)頁技術(shù)來設(shè)計。在動態(tài)網(wǎng)頁中， Web 服務(wù)器能夠與用戶進(jìn)行交互，按照用戶的需要來動態(tài)地、即時地構(gòu)造頁面。例如，在論壇中，用戶發(fā)新帖或者回復(fù)等等的行為，會讓網(wǎng)站服務(wù)器運行程序，自動處理信息，按照流程更新頁面，從而輕而易舉地更新網(wǎng)頁。

靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁之間并不如名稱那樣充滿矛盾，相反它們可以像陰陽那樣組合出和諧的太極圖。為了網(wǎng)站適應(yīng)搜索引擎檢索的需要，即使采用動態(tài)網(wǎng)頁技術(shù)，也可以將網(wǎng)頁內(nèi)容轉(zhuǎn)化為靜態(tài)網(wǎng)頁來發(fā)布。

動態(tài)網(wǎng)頁可以采用動靜結(jié)合的原則，適合采用動態(tài)網(wǎng)頁的地方用動態(tài)網(wǎng)頁，有需要使用靜態(tài)網(wǎng)頁，那么靜態(tài)網(wǎng)頁相關(guān)內(nèi)容則可以考慮用靜態(tài)網(wǎng)頁的方法來實現(xiàn)。例如一個網(wǎng)站的導(dǎo)航欄目一般不會在短時間內(nèi)更改的，就算瀏覽這個網(wǎng)站不同的頁面，它的導(dǎo)航欄目都是一樣的，因此，導(dǎo)航欄目比較適合采用靜態(tài)網(wǎng)頁技術(shù)。再例如網(wǎng)站的一部分圖片，這些圖片存在于不同頁面，如果采用動態(tài)網(wǎng)頁技術(shù)，則每次打開新頁面都會重新下載這些圖片，這不僅加重了服務(wù)器的負(fù)擔(dān)，也提高了對用戶網(wǎng)速的要求；如果采用靜態(tài)

5