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

1、廣東工業(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 Be

2、rners-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)用最廣、功能最強(qiáng)大的的網(wǎng)頁設(shè)計軟件就是Dreamweaver，它集網(wǎng)頁制作和管理網(wǎng)站于一身，它是第一套針對專業(yè)網(wǎng)頁設(shè)計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以非常容易地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。Dreamweaver原本由Macr

3、omedia公司所開發(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 ， htmlAbstractThe Internet is now the worlds largest computer interconnected networks, it is all over the world, aroun

4、d 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, dist

5、ribution and transfer information important channel.The website construction, therefore, on the Internet application status is obvious.On August 6, 1991, the worlds first website was born. It was founded by Tim berners-lee, text-based, contains several links to websites, now still online, the url is

6、 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 th

7、e 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

8、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 compl

9、y 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 緒論31.1課題需求31.2課

10、題目的32 網(wǎng)頁設(shè)計簡述32.1網(wǎng)站與網(wǎng)頁32.1.1網(wǎng)站32.1.2網(wǎng)頁32.2網(wǎng)頁的名詞解釋32.3網(wǎng)頁的類型32.4網(wǎng)頁設(shè)計的語言32.4.1 HTML32.4.2 JavaScrip32.5網(wǎng)頁的配色32.6網(wǎng)頁的布局33 網(wǎng)頁設(shè)計軟件介紹33.1 Adobe Dreamweaver介紹33.2 Adobe Flash介紹33.3 Adobe Photoshop介紹34 主體設(shè)計34.1準(zhǔn)備工作34.2定義站點(diǎn)34.3制作首頁34.3.1定義CSS樣式34.3.2制作首頁上部34.3.3制作首頁中部34.3.4制作網(wǎng)頁下部34.4制作網(wǎng)頁模板34.4.1制作模板的樣式和上部34.4.2

11、制作模板網(wǎng)頁中、下部34.4.3創(chuàng)建可編輯區(qū)域34.5制作子頁34.6設(shè)置鏈接3結(jié)束語3參考文獻(xiàn)31 緒論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è)中的重要組成部分。 例如通

12、過網(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ò)

13、用戶要求的不斷提高，網(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)行推薦，甚至直接買賣。2 網(wǎng)頁設(shè)計簡述2.1網(wǎng)站與網(wǎng)頁網(wǎng)站與網(wǎng)頁是兩個不同概念，網(wǎng)頁是網(wǎng)站中的一頁，但是網(wǎng)頁有時就是一個網(wǎng)站，因?yàn)橛行┚W(wǎng)站就只有

14、一個頁面。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)站的真實(shí)流量。網(wǎng)站建設(shè)包括網(wǎng)站策劃、網(wǎng)頁設(shè)計、網(wǎng)站推

15、廣、網(wǎng)站評估、網(wǎng)站運(yùn)營、網(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)站具有很強(qiáng)的專業(yè)性，通常只涉及某一個領(lǐng)域，內(nèi)容比較專業(yè)。如起點(diǎn)文學(xué)網(wǎng)站即是一個專業(yè)小說網(wǎng)站，前程無憂網(wǎng)是一個招聘專業(yè)網(wǎng)站平臺。職能網(wǎng)站：職能網(wǎng)站具有專門的功能，如政府職能網(wǎng)站等

16、。目前大熱的電子商務(wù)網(wǎng)站也屬于這類網(wǎng)站，較有名的電子商務(wù)網(wǎng)站有淘寶網(wǎng)、京東和當(dāng)當(dāng)網(wǎng)等等。個人網(wǎng)站：個人網(wǎng)站具有較強(qiáng)的個性化，是以個人名義開發(fā)創(chuàng)建的網(wǎng)站，以展現(xiàn)個人的個性，滿足個人需求。網(wǎng)站是由多個網(wǎng)頁組成的，但不是網(wǎng)頁的簡單羅列組合，而是用超鏈接方式組成的既有鮮明風(fēng)格又有完善內(nèi)容的有機(jī)整體。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)站的起點(diǎn)站或者

17、說主目錄。通過主頁，用戶可以比較輕松地了解該網(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)頁的名詞解釋站點(diǎn)：站點(diǎn)是一個管理網(wǎng)頁文檔的場所。IP地址：IP地址作為路由尋址用的數(shù)字型標(biāo)識，連接在因特網(wǎng)上的每一個主機(jī)分配的一個地址，它猶如主機(jī)的門牌號，獨(dú)一無二的，可以讓路由識別。域名：域名是一種字符型標(biāo)識，能夠讓

18、人輕而易舉地記住，它猶如是網(wǎng)站的地址，因特網(wǎng)中任何網(wǎng)站的域名都是全世界唯一的。如www .baidu.om就是百度網(wǎng)站的域名。瀏覽器：瀏覽器是萬維網(wǎng)服務(wù)的客戶端瀏覽程序。可以向萬維網(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ù)的文本、圖像，甚至動畫等

19、等的載體，就能打開其指定的目標(biāo)網(wǎng)頁。表單：表單是具有交互性的動態(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)頁，一

20、般是以*.html或*.htm為模板來命名的，其代碼都在網(wǎng)頁之中。靜態(tài)網(wǎng)頁不需要經(jīng)過程序運(yùn)算與數(shù)據(jù)庫連接，直接把這些靜態(tài)的信息發(fā)送到用戶的瀏覽器上了，這樣減輕了服務(wù)器的負(fù)擔(dān)，也就降低了數(shù)據(jù)庫的成本，自然而然的也就提高了網(wǎng)頁打開的速度了。網(wǎng)站中長時間不需要更新的欄目宜用靜態(tài)網(wǎng)頁來實(shí)現(xiàn)，例如網(wǎng)站的導(dǎo)航欄目；網(wǎng)站如果不需要實(shí)時更新的話，也宜用靜態(tài)網(wǎng)頁來實(shí)現(xiàn)，例如產(chǎn)品種類與信息變更比較少的小規(guī)模公司或者展示型網(wǎng)站。由于不跟數(shù)據(jù)庫連接，靜態(tài)網(wǎng)頁不能自主管理發(fā)布更新的網(wǎng)頁, 信息更新速度相對比較緩慢。在沒有人工去更新的時候，用戶在任何時候、任何地方、采用任何方式瀏覽該頁面，所看到的瀏覽結(jié)果都一模一樣的。如

21、果想更新網(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í)

22、行的，通過網(wǎng)絡(luò)發(fā)送給用戶的只是在這些程序中運(yùn)算得到的結(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ù)庫，以實(shí)現(xiàn)非常強(qiáng)大的功能，比較常見的表現(xiàn)形式有：論壇和網(wǎng)購、留言板、聊天室、校友錄等等。隨著數(shù)據(jù)庫和各種腳本技術(shù)的發(fā)展，越來越多的網(wǎng)站都開始采取動態(tài)網(wǎng)頁技術(shù)來設(shè)

23、計。在動態(tài)網(wǎng)頁中， Web服務(wù)器能夠與用戶進(jìn)行交互，按照用戶的需要來動態(tài)地、即時地構(gòu)造頁面。例如，在論壇中，用戶發(fā)新帖或者回復(fù)等等的行為，會讓網(wǎng)站服務(wù)器運(yùn)行程序，自動處理信息，按照流程更新頁面，從而輕而易舉地更新網(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)頁的方法來實(shí)現(xiàn)。例如一個網(wǎng)站的導(dǎo)航欄目一般不會在短時間內(nèi)更改的，就算瀏覽這個網(wǎng)

24、站不同的頁面，它的導(dǎo)航欄目都是一樣的，因此，導(dǎo)航欄目比較適合采用靜態(tài)網(wǎng)頁技術(shù)。再例如網(wǎng)站的一部分圖片，這些圖片存在于不同頁面，如果采用動態(tài)網(wǎng)頁技術(shù)，則每次打開新頁面都會重新下載這些圖片，這不僅加重了服務(wù)器的負(fù)擔(dān)，也提高了對用戶網(wǎng)速的要求；如果采用靜態(tài)網(wǎng)頁技術(shù)，就可以這些大量重復(fù)使用的圖片緩存在用戶的客服端中，減少了系統(tǒng)的消耗，降低對服務(wù)器的壓力，提高網(wǎng)頁打開的速度。總之，在同一個網(wǎng)站上，同時采用動態(tài)網(wǎng)頁技術(shù)和靜態(tài)網(wǎng)頁技術(shù)是很普遍的。2.4網(wǎng)頁設(shè)計的語言網(wǎng)頁設(shè)計中所涉及的語言高達(dá)十幾種，這里就簡單介紹比較常見的兩種語言，它們分別是HTML、JavaScrip。2.4.1 HTMLHTML（英語H

25、ypertext Markup Language的縮寫）即超文本標(biāo)記語言，它是在文本文件的基礎(chǔ)上加系列標(biāo)記，描述其格式、顏色、字體、文字大小，再加上聲音、圖像、甚至是視頻等形成精彩的頁面。嚴(yán)格的來講，它并不是編程語言，沒有分支、循環(huán)等控制結(jié)構(gòu)，只是一些能夠讓瀏覽器看懂的標(biāo)記。HTML的結(jié)構(gòu)標(biāo)識一般來說，都是雙向標(biāo)識，書寫規(guī)則是。一個標(biāo)準(zhǔn)的HTML文檔如下所示： for example main body 就像這個文檔一樣，HTML文檔都是必須以開始，以結(jié)束，它還通常有一個head元素和一個body元素，并且3對標(biāo)簽在個網(wǎng)頁文檔中有且只能出現(xiàn)一次，不能重復(fù)使用。其中為文件標(biāo)識，表示此文件是HTM

26、L格式的文件，是一個網(wǎng)頁文件。 為頭部標(biāo)識，包含網(wǎng)頁的重要信息，但是在瀏覽器中不顯示。為主體標(biāo)識，網(wǎng)頁的主體部分都放在這對標(biāo)識之間，比如文本、圖像、表格等元素，以及其他媒體元素都可以放置在標(biāo)簽中。以上3對標(biāo)簽在個網(wǎng)頁文檔中只能出現(xiàn)一次，而不能重復(fù)使用。2.4.2 JavaScripJavaScript是一種跨平臺、基于對象的腳本語言，由JavaScript核心語言、JavaScript客戶端擴(kuò)展和JavaScript服務(wù)器端擴(kuò)展3部分組成。它與Java是兩種完全不相同的語言，前者是腳本語言,而后者是一種編譯型的語言。含有JavaScript腳本代碼的文檔如下所示： for example al

27、ert (歡迎光臨！ )；其中，和之間就是JavaScript的腳本代碼。2.5網(wǎng)頁的配色色彩是很有力的工具，其視覺效果非常引人注目，能夠讓平平無奇的東西，瞬間生動活潑起來;也能夠讓生動活潑的東西，瞬間平平無奇。當(dāng)瀏覽者打開一個網(wǎng)頁時，網(wǎng)頁給其留下的第一印象既不是網(wǎng)站豐富的內(nèi)容，也不是網(wǎng)站合理的版面布局，而是網(wǎng)頁中的色彩。色彩運(yùn)用和搭配是否成功，在一定程度上決定網(wǎng)頁界面風(fēng)格是否形成，也決定了設(shè)一個網(wǎng)站的是否優(yōu)秀。總而言之，在設(shè)計網(wǎng)頁時必須重視網(wǎng)頁的配色?！鞍准埡谧帧笔怯肋h(yuǎn)的主題。網(wǎng)頁界面以白色為背景的居多，因?yàn)榘咨o人的感覺是干凈和簡潔，同時又是一種百搭色，它可以和多種顏色配上黑色最為突出。以

28、白色為背景色、配上黑色的字，可以讓頁面視覺自然、流暢，有利于突出頁面的重點(diǎn)，也有利于整個界面的配色，更容易為大多數(shù)人認(rèn)可和掌握。那么讓我們看看使用白色為背景色的優(yōu)秀網(wǎng)站，如圖（2-4）。圖（2-4）：百度主頁2.6網(wǎng)頁的布局一般來說，好的網(wǎng)站應(yīng)該給人干凈整潔、條理清楚的感覺，而能否做到這一點(diǎn)，就由網(wǎng)頁的布局所決定，也就是說布局設(shè)計可以讓瀏覽者更加清晰地 “讀懂”網(wǎng)站，從而輕而易舉地找到自己所需要的資源在那個位置。在網(wǎng)頁布局時通常有兩種方法，也就是紙上布局法和軟件布局法。紙上布局法：就是在紙上打草稿。先在紙上畫出草圖，對網(wǎng)頁布局進(jìn)行規(guī)劃，以方便設(shè)計，易于設(shè)計出優(yōu)秀的網(wǎng)頁。 軟件布局法：一般是說使

29、用Photoshop來完成軟件的布局。Photoshop在圖像編輯、處理方面的功能十分強(qiáng)大，它可以對顏色、圖像等進(jìn)行方便的處理，并且它的圖層功能，可以讓設(shè)計者設(shè)計出無法在紙上實(shí)現(xiàn)的效果。網(wǎng)頁布局大致可分為“國”字型、拐角型、“T”字型、“L”字型、綜合框架型、Flash型、變化型，這里就不一一介紹了。3 網(wǎng)頁設(shè)計軟件介紹網(wǎng)頁設(shè)計的軟件一般有三種類型，其中以Adobe Dreamweaver為代表的網(wǎng)頁制作軟件，以Adobe Flash為代表的網(wǎng)頁動畫制作軟件，以Adobe Fireworks為代表的網(wǎng)頁圖像處理軟件。這三款軟件合在一起被稱為網(wǎng)頁制作三劍客。不同的設(shè)計者有不同的軟件使用習(xí)慣，加上

30、網(wǎng)站不同的設(shè)計要求，設(shè)計者都是選擇自己適用的軟件，而我比較喜歡的網(wǎng)頁設(shè)計軟件搭配是Adobe Dreamweaver和Adobe Flash，還有Adobe Photoshop。3.1 Adobe Dreamweaver介紹Dreamweaver原本由著名的Macromedia公司所開發(fā)，但是Macromedia公司現(xiàn)已被Adobe公司收購，Dreamweaver也就正式改名為Adobe Dreamweaver。Dreamweaver剛開始只支持Mac（也就是蘋果公司的電腦系統(tǒng)），后來開發(fā)了Windows版本的，而隨著Macromedia被Adobe收購后，Adobe也開始有計劃地開發(fā)Linu

31、x版本的。目前，用戶最多、應(yīng)用最廣、功能最強(qiáng)大的的網(wǎng)頁制作軟件就是Dreamweaver，它集網(wǎng)頁制作和管理網(wǎng)站于一身，它是第一套針對專業(yè)網(wǎng)頁設(shè)計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以非常容易地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁，是目前制作網(wǎng)頁站點(diǎn)、網(wǎng)頁和網(wǎng)頁應(yīng)用程序開發(fā)的理想工具。不管是初學(xué)者，還是專業(yè)的網(wǎng)頁設(shè)計員，都可以使用Dreamweaver容易地制作出精美的網(wǎng)頁，甚至可以編寫出各種各樣的復(fù)雜的網(wǎng)頁應(yīng)用程序。作為一種網(wǎng)頁設(shè)計軟件，Dreamweaver使用所見即所得的接口，提供了強(qiáng)大的可視化編輯網(wǎng)頁功能，用戶可以將文本、圖像、動畫和視頻等等的媒體元素插入網(wǎng)頁，并使用

32、表格以及框架等布局技術(shù)為這些媒體元素布局。Dreamweaver的優(yōu)點(diǎn)就是它的兼容性，它可以與Fireworks、Flash、Photoshop、Playback等等的設(shè)計軟件兼容，從而可以用最快速的方式將兼容軟件的文檔移動到網(wǎng)頁上。Dreamweaver同時還可以直接開啟Firework或Photoshop來進(jìn)行編輯與設(shè)定圖檔的最佳化。這些優(yōu)點(diǎn)使Dreamweaver的網(wǎng)頁制作效率非常之高。在Adobe Dreamweaver CS5的工作界面中，包括【標(biāo)題欄】、【菜單欄】、【工作區(qū)】、【屬性】、【面板組】等等的組成部分，如圖（3-1）所示：圖（3-1）：Adobe Dreamweaver

33、CS5的工作界面3.2 Adobe Flash介紹網(wǎng)頁動畫主要包括Flash動畫和GIF動畫， 其中Flash動畫制作首選Adobe Flash軟件。Adobe Flash是目前應(yīng)用最廣泛的多媒體動畫制作軟件，它可以將各種音樂、聲效和動畫有機(jī)地融合在一起，制作出非常不錯的動畫。它在動畫制作方面也有一整套十分強(qiáng)大的功能，例如從動畫的繪制、動作的實(shí)現(xiàn)、編程控制以及最后動畫的輸出等，它都可以完全滿足這些功能的要求。Adobe Flash之所以能夠在網(wǎng)頁動畫設(shè)計方面大放異彩，與它所采用的矢量繪圖技術(shù)有著密不可分的關(guān)系。矢量圖像能夠在放大質(zhì)量的情況下，保持圖像的無損失，這樣也就能夠滿足不同用戶的需求，讓

34、屏幕大、分辨率大的用戶有不錯的體驗(yàn)。矢量繪圖的Flash動畫另外的一個優(yōu)點(diǎn)就是大大地縮小了動畫文件的大小，使在網(wǎng)絡(luò)帶寬局限的情況下，降低對網(wǎng)絡(luò)傳輸速度的要求，可以更加方便他人下載觀看或者在線觀看。在Adobe Flash CS5的主界面中，包括標(biāo)題欄、工作區(qū)、時簡軸動畫編輯器面板、屬性面板、庫面板和工具箱等組成部分，如（3-2）所示：圖（3-2）：Adobe Flash CS5的主界面3.3 Adobe Photoshop介紹PS除了是Postscript（備注的意思）的縮寫外，也是Photoshop 的縮寫，并且以此為世人廣泛使用。Adobe Photoshop是世界公認(rèn)的最好的圖像處理軟件

35、，它是Adobe公司所開發(fā)的圖形處理系列軟件之一，主要應(yīng)用于在圖像處理、廣告設(shè)計的一個軟件。Photoshop有十分強(qiáng)大的圖像處理功能，例如圖像編輯、圖像合成、校色調(diào)色及特效制作等等。圖像編輯是圖像處理的基礎(chǔ)，可以對圖像做各種處理如修補(bǔ)、修飾、放大、縮小、鏡像、旋轉(zhuǎn)、傾斜、透視等等。圖像合成則也就對圖像去背景、摳圖、蒙版、通道、透明、半透明、局部透明等等各種方法將幾張圖像合成一張自己所需求的圖像。校色和調(diào)色是該軟件十分強(qiáng)大的功能之一，可以方便快捷地對圖像的顏色進(jìn)行各種變換，例如明暗、色偏的調(diào)整和校正。特效制作是Photoshop最讓人癡迷的功能，主要由濾鏡、通道及工具綜合應(yīng)用完成。包括圖像的特

36、效創(chuàng)意和特效字的制作，例如可以讓萬里無云的天空瞬間下去傾盆大雨、閃電雷鳴，再例如可以制作陳3D效果和各種變形的字體特效。Photoshop主要用于處理位圖。所謂位圖，就是圖像由許多像小方塊一樣的像素組成的，它在放大的操作下，圖像質(zhì)量會有損失，與Flash所制作的矢量圖像相反。Adobe Photoshop十分強(qiáng)大的圖像處理功能、與Dreamweaver的兼容，還有它的切片功能，這些都注定Photoshop在網(wǎng)頁圖像處理方面能夠大放異彩。在Adobe Flash CS5的工作界面中，包括標(biāo)題欄、屬性欄、菜單欄、圖像編輯窗口、狀態(tài)欄、工具箱和控制面板等組成部分，如圖（3-3）所示：圖（3-3）：A

37、dobe Photoshop CS5的工作界面4 主體設(shè)計在網(wǎng)頁設(shè)計過程中，一般是先由美工人員利用Adobe Photoshop進(jìn)行網(wǎng)頁頁面效果的處理與制作，包括網(wǎng)頁中各種圖像的制作，例如網(wǎng)站Logo、Banner、背景圖像和頁面所需要圖像處理等等。由動畫制作人員利用Adobe Flash或者Adobe Photoshop進(jìn)行Flash動畫或者GIF動畫的制作。當(dāng)美工人員將網(wǎng)頁頁面效果圖制作完成后，使用Photoshop將圖像進(jìn)行切片并輸山，此時網(wǎng)頁設(shè)計人員就可以利用切片輸出的圖像，以及頁面效果圖的布局等，使用Dreamweaver對網(wǎng)頁進(jìn)行制作，此時完成的頁面還是屬于靜態(tài)網(wǎng)頁。如果有設(shè)計成動

38、態(tài)網(wǎng)頁的需求，則讓程序人員編寫相應(yīng)的應(yīng)用程序，這些應(yīng)用程序使瀏覽器與數(shù)據(jù)庫可以發(fā)生交互。由于本文的特殊需求，Photoshop的圖像處理與Flash的動畫制作過程都在現(xiàn)實(shí)中完成，只在此對已經(jīng)準(zhǔn)備好的資源加以運(yùn)用，而動態(tài)網(wǎng)頁設(shè)計方面也不在論文中詳述。4.1準(zhǔn)備工作網(wǎng)頁設(shè)計的前期準(zhǔn)備工作是不容忽視的，在創(chuàng)建站點(diǎn)前先要規(guī)劃好站點(diǎn)，例如網(wǎng)站的名字、風(fēng)格和結(jié)構(gòu)，并收集或者設(shè)計好相關(guān)的素材、資料，這樣才會高效率地完成網(wǎng)頁設(shè)計。不管是企業(yè)網(wǎng)站，還是個人網(wǎng)站，網(wǎng)站設(shè)計的第一件事就是給網(wǎng)站命名。一般情況下，企業(yè)網(wǎng)站直接以企業(yè)名字作為網(wǎng)站名，個人網(wǎng)站就可以依照自己的愛好來命名。本次設(shè)計的網(wǎng)站是一個個性化的個人網(wǎng)站

39、，名字可以個性、活潑一些，網(wǎng)站就命名為“黃者風(fēng)范”。第二件事就是確定網(wǎng)站的風(fēng)格。就猶如命名一樣，對于企業(yè)網(wǎng)站而言，通常是根據(jù)公司的性質(zhì)以及標(biāo)志來確定其風(fēng)格，而個人網(wǎng)站就任意而為。本次制作的個人網(wǎng)站因?yàn)閭€人的喜好，選用了代表生命、青春、和平、寧靜、自然、環(huán)保、成長、生機(jī)、希望的綠色作為主色調(diào)，又加以紫色作為點(diǎn)綴，不僅突出了重點(diǎn)，又能產(chǎn)生強(qiáng)烈的視覺效果。第三件事就是為網(wǎng)站劃分欄目和確定結(jié)構(gòu)。只有事先將網(wǎng)站的欄目規(guī)劃好和結(jié)構(gòu)確定好，才能在后面的制作中做到有章可循。本次設(shè)計，我將該網(wǎng)站劃分為7個欄目：首頁、日記、推薦大全、輕松一刻、留言、登錄和注冊。其中，日記主要記載我的日常生活，推薦大全主要是分為電

40、影推薦、電視劇推薦、音樂推薦、小說推薦和旅游推薦等5個部分，輕松一刻主要是分享一些幽默笑話，留言主要是為了與瀏覽者互動。依照這些欄目，我畫出了“黃者風(fēng)范”的網(wǎng)站結(jié)構(gòu)圖，如圖（4-1）所示：圖（4-1）：網(wǎng)站結(jié)構(gòu)圖4.2定義站點(diǎn)在正式設(shè)計網(wǎng)頁之前，最好先定義一個站點(diǎn)，并將建站需要的圖像以及其它資源放置在站點(diǎn)文件夾中，這是為了能夠更好地利用站點(diǎn)窗口對站點(diǎn)文件進(jìn)行管理?，F(xiàn)在市場的大部分軟件都是不能夠用中文進(jìn)行編程的，而Dreamweaver也不例外，所以在對各種文件、資源命名時，要用英文或者拼音來命名。接下來就說明定義站點(diǎn)的步驟：1、首先在本地磁盤創(chuàng)建一個以 “personal”命名的文件夾，并在該

41、文件夾下創(chuàng)建一個新文件夾，以“images”命名，以存放站點(diǎn)中的各種圖像文件。2、在Dreamweaver 菜單欄中，選擇“站點(diǎn)”“新建站點(diǎn)”菜單，在打開的“未命名站點(diǎn)1的站點(diǎn)定義為”對話框中選擇“高級”選項(xiàng)卡。3、在“站點(diǎn)名稱”文本框中輸入“personal”，單擊“本地根文件夾”文本框后的文件夾圖標(biāo)，在打開的對話框中選擇前面創(chuàng)建的文件夾“personal”，然后采用同樣的方法，設(shè)置“默認(rèn)圖像文件夾”為“images”。4、單擊“確定”按鈕，可以看到在Dreamweaver左下角的 “文件”面板中顯示了剛才定義的站點(diǎn)。到此，站點(diǎn)定義就算是完成了。4.3制作首頁為了便于制作，我將網(wǎng)站首頁的制作

42、細(xì)分為定義CSS樣式、制作首頁上部、制作首頁中部以及制作首頁下部等4部分。4.3.1定義CSS樣式在實(shí)際的網(wǎng)頁設(shè)計中，一般都是先定義“bodv”標(biāo)簽樣式，然后再設(shè)計網(wǎng)站內(nèi)容，最后定義其它的樣式，但是這里我就一次性全部定義先。所謂CSS是指Cascading Style Sheets（層疊樣式表單）的簡稱，更多的人把它稱作樣式表。顧名思義，它是一種設(shè)計網(wǎng)頁樣式的工具。以下是對CSS樣式定義的步驟：1、在“文件”面板中的空白處新建一個網(wǎng)頁文檔，命名為“index.html”。2、在文檔編輯窗口中打開剛剛創(chuàng)建的“index.html”文檔，然后點(diǎn)擊“屬性”面板中的“頁面屬性”按鈕，隨著打開“頁面屬性

43、”的對話框，在“分類”列表中選擇“標(biāo)題，編碼”，設(shè)置標(biāo)題為“黃者風(fēng)范網(wǎng)站主頁”，編碼為“Unicode(UTF-8)”，然后點(diǎn)擊“確定”按鈕。3、打開“CSS樣式”面板，點(diǎn)擊“新建css規(guī)則”按鈕，打開“新建CSS規(guī)則”對話框。在隨著打開的“選擇器類型”對話框中，選擇“標(biāo)簽”，在“標(biāo)簽”的下拉列表中選擇“bodv”，在“規(guī)則定義”列表區(qū)選擇“新建樣式表文件”，然后點(diǎn)擊“確定”按鈕。隨著打開“保存樣式表文件為”的對話框，在“保存在”下拉列表中選擇網(wǎng)站的根文件夾“personal”，在“文件名”文本框中輸入“c1”，然后點(diǎn)擊“保存”按鈕，保存完畢。4、打開“body的CSS規(guī)則定義”對話框，設(shè)置“

44、大小”為“10像素”，“行高”為“22像素”。在“分類”列表中選擇“方框”，然后在右側(cè)的“邊界”區(qū)域“上”編輯框中輸入“0”，由于“全部相同”的選項(xiàng)已經(jīng)打鉤，所以下方的所有值都將變?yōu)椤?”，最后點(diǎn)擊“確定”按鈕，完成了對“bodv”的標(biāo)簽樣式定義。5、再次打開“新建CSS規(guī)則”對話框，在“選擇器類型”區(qū)選擇“類”，在“名稱”的編輯框中輸入“l(fā)ine”，在“規(guī)則定義”列表區(qū)選擇“c1.css”，然后單擊“確定”按鈕。隨著打開了“.1ine的CSS規(guī)則定義”的對話框，在“分類”列表中選擇“邊框”，點(diǎn)擊已經(jīng)打鉤的“全部相同”復(fù)選框，取消了選擇樣式、寬度和顏色列表區(qū)的同值化，之后，“下”在樣式區(qū)的下拉

45、列表中選擇“虛線”，“下”在寬度區(qū)的編輯框中輸入“1”，“下”在顏色區(qū)的編輯框中設(shè)置顏色為藍(lán)色“#O9F”，單擊“確定”按鈕，完成對“l(fā)ine”類樣式的定義。6、再次打開“新建css規(guī)則”對話框。在“選擇器類型”區(qū)中選擇“類”，在“名稱”編輯框中輸入“l(fā)ist”，在“規(guī)則定義”列表區(qū)中選擇“cl.css”，然后點(diǎn)擊“確定”按鈕。在隨著打開的“.list的CSS規(guī)則定義”對話框，設(shè)置“大小”為“10像素”，“行高”為 “22像素”，“顏色”為深灰色“#666666”。然后在左側(cè)的“分類”列表中選擇“區(qū)塊”，然后在右側(cè)的“文本對齊”下拉列表中選擇“左對齊”。在左側(cè)的“分類”列表中選擇“方框”，取消

46、選擇“邊界”區(qū)的已經(jīng)打鉤的“全部相同”復(fù)選框，就取消了選擇樣式、寬度和顏色列表區(qū)的同值化，然后在“上”編輯框中輸入“8”，也就是設(shè)置上邊界為8像素。最后在左側(cè)的“分類”列表中選擇“列表”，然后在右側(cè)的“類型”的下拉列表中選擇“圓點(diǎn)”，在“位置”的下拉列表中選擇“外”，最后單擊“確定”按鈕，就會關(guān)閉了對話框，完成對“List”的CSS規(guī)則定義。7、再次打開“新建CSS規(guī)則”對話框，在“選擇器類型”區(qū)選擇“類”，在“名稱”編輯框中輸入“top”，在“規(guī)則定義”的列表區(qū)選擇“cl.css”，然后單擊“確定”按鈕。隨著打開了“.top的CSS規(guī)則定義”對話框，在左側(cè)的“分類”列表中選擇“邊框”，點(diǎn)擊已

47、經(jīng)打鉤的“全部相同”復(fù)選框，就取消選擇樣式、寬度和顏色列表區(qū)的同值化，之后，“上”在樣式區(qū)的下拉列表中選擇“實(shí)線”；“上”在寬度區(qū)的編輯框中輸入“2”，“上”在顏色區(qū)的編輯框中設(shè)置顏色為藍(lán)色“#5BBCF7”，最后單擊“確定”按鈕，關(guān)閉對話框，完成對“Top”的CSS規(guī)則定義。 8、最后次打開“新建CSS規(guī)則”對話框，在“選擇區(qū)類型”區(qū)選擇“類”，在“名稱”的編輯框中輸入“l(fā)inel”，在“規(guī)則定義”的列表區(qū)選擇“c1.css”，然后點(diǎn)擊“確定”按鈕。隨著打開了“1inel的css規(guī)則定義”對話框，在左側(cè)的“分類”列表中選擇“邊框”，然后“上”在樣式區(qū)的下拉列表中選擇“實(shí)線”，“上”在寬度區(qū)的

48、編輯框中輸入 “2”，“上”在顏色區(qū)的編輯框中設(shè)置顏色為淺灰色“#EIEIE1”，之后點(diǎn)擊“確定”按鈕，完成對“1inel”的CSS規(guī)則定義。9、分別保存“index.html”和“c1.css”。這就完成了對本次設(shè)計所需要的所有CSS樣式進(jìn)行定義，如圖（4-2）所示：圖（4-2）：CSS樣表4.3.2制作首頁上部本次設(shè)計的個人網(wǎng)站的首頁上部主要包括幾張圖片，圖片都是已經(jīng)制作完成的了，以下是具體的操作步驟：1、繼續(xù)在“index.html”文檔中操作。將插入點(diǎn)置于文檔編輯窗口，插入一個3行1列，寬1000像素，并且邊框粗細(xì)、單元格邊距和單元格間距等各項(xiàng)都為0的表格，稱之為表格1，并且設(shè)置表格的

49、對齊方式為“居中對齊”。2、將插入點(diǎn)置于表格1第一個單元格中，然后點(diǎn)擊菜單欄中的插入欄中的“圖像”選項(xiàng)，選擇本地站點(diǎn)“images”文件夾中的圖像“personal_01.jpg”，就會在相應(yīng)位置插入圖像。3、同理，按照上面的方法，在第2個單元格中分別插入圖像“nav-1.jpg”和“nav-2.jpg”、“nav-3.jpg”、“nav-4.jpg”、“nav-5.jpg”、“nav-6.jpg”、“nav-7.jpg”。4、同理，按照上面的方法，在第3個單元格中插入“images”文件夾中的圖像“personal_02.jpg”。首頁的上面部分就制作完畢，效果如圖（4-3）所示圖（4-3）

50、：首頁上部效果圖4.3.3制作首頁中部本次設(shè)計的網(wǎng)站的首頁中部主要是一些欄目精華和公告，是由2個大表格中嵌套多個小表格組成的，以下是具體的操作步驟：1、將插入點(diǎn)置于表格1下方，插入一個2行2列，寬1OOO像素，并且邊框粗細(xì)、單元格邊距和單元格間距等各項(xiàng)都為0的表格，稱之為表格2，并設(shè)置表格的對齊方式為“居中對齊”。2、將插入點(diǎn)置于表格2第1行第1列的單元格中，在“屬性”面板上“寬”和“高”文本框中分別輸入“720”和“10”，然后點(diǎn)擊確認(rèn)鍵。3、在表格2第2行第1列單元格中插入一個3行6列，寬720像素，并且邊框粗細(xì)、單元格邊距和單元格間距等各項(xiàng)均為0的表格，稱之為表格2-1，并設(shè)置表格的其對

51、齊方式為“左對齊”。4、拖動鼠標(biāo)，將表格2-1第1行的6個單元格全選，在“屬性”面板上點(diǎn)擊“合并”按鈕，6個單元格就合并成1個了。然后將插入點(diǎn)置于合并后的單元格中，在“屬性”面板上“樣式”的下拉列表中選擇“l(fā)ine”，之后插入圖像“personal_03.jpg”。5、拖動鼠標(biāo)選中表格2-1第2行的6個單元格，在“屬性”面板上“寬”的文本框中輸入120，并在“水平”的文本框中選擇“居中對齊”，之后分別在各個單元格中插入圖像，圖像為“11.jpg”和“22.jpg”、 “33.jpg”、 “44.jpg”、 “55.jpg”、 “66.jpg”，并對各個圖像應(yīng)用樣式“l(fā)inel”。6、將插入點(diǎn)置

52、于表格2-1第2行第1列單元格中，在“屬性”面板上“高”文本框中輸入“20”，然后按回車鍵確認(rèn)。7、拖動鼠標(biāo)，全選表格2-1第3行的6個單元格，選擇對齊方式為“居中對齊”，然后分別在各個單元格中輸入文本，分別是“天壇”和“深圳華僑城”、“三亞”、“九寨溝”、“迪士尼”、“巴黎鐵塔”。8、將插入點(diǎn)置于表格2第2行第2列單元格中，在“屬性”面板上“垂直”的下拉列表中選擇“頂端”，然后在其中嵌套1個2行l(wèi)列，寬280像素，并且邊框粗細(xì)、單元格邊距和單元格間距等各項(xiàng)均為0的表格，稱之為表格2-2，并設(shè)置表格的對齊方式為“左對齊”。9、對表格2-2第1個單元格應(yīng)用樣式“l(fā)ine”，并在其中插入圖像“pe

53、rsonal_04.jpg”，在第2個單元格中輸入文本，分別是“本人聯(lián)系方式”和“北京游記”，之后拖動鼠標(biāo)選擇所有文本，并點(diǎn)擊鼠標(biāo)右鍵，選擇“項(xiàng)目列表”，最后在“樣式”的下拉列表中選擇“l(fā)ist，對文本應(yīng)用列表樣式。10、將插入點(diǎn)置于表格2下方，插入一個1行3列，寬1000像素，并且邊框粗細(xì)、單元格邊距和單元格間距等各項(xiàng)均為0的表格，稱之為表格3，并設(shè)置表格的對齊方式為“左對齊”。1l、設(shè)置表格3的3個單元格寬分別為400像素、320像素和280像素，然后在第1個單元格中插入一個2行1列，寬430像素，并且邊框粗細(xì)、單元格邊距和單元格間距等各項(xiàng)均為0的表格，稱之為表格3-1，并設(shè)置表格的對齊方

54、式為“左對齊”。12、對表格3-1的第1個單元格應(yīng)用樣式“l(fā)ine”，并在其中插入圖像“personal_05.jpg”，在第2個單元格中輸入文本，分別是“北京游記” 和“雅安，加油” 、“小米V5系統(tǒng)”、 “破解電信送的貓”、 “蘇寧0元購”、“應(yīng)聘記”之后設(shè)置為項(xiàng)目列表，并對其應(yīng)用樣式“l(fā)ist”。13、按照上面的方法，對在表格3的第2和第3個單元格，分別嵌套相應(yīng)的表格并設(shè)置相應(yīng)的內(nèi)容。至此，網(wǎng)站首頁的中部就算是制作完成，其效果如圖（4-4）所示：圖（4-4）：首頁中部效果圖4.3.4制作網(wǎng)頁下部 相對于首頁的中部來說，首頁的下部的制作就相當(dāng)輕松，主要是相關(guān)的版權(quán)信息，以下就是一些具體步驟

55、：1、繼續(xù)在“index .html”文檔中操作。將插入點(diǎn)置于表格3下方，插入一個1行1列，寬1000像素，并且邊框粗細(xì)、單元格邊距和單元格間距等各項(xiàng)均為0的表格，稱之為表格4，并設(shè)置表格的對齊方式為“居中對齊”。2、將插入點(diǎn)置于表格4中，在“屬性”面板上“高”文本框中輸入“70”，在“樣式”的下拉列表中選擇“top”，并設(shè)置背景顏色為淡藍(lán)色“#f9fdff”。 3、在表格4中輸入文本，文本為“黃者風(fēng)范 版權(quán)所有”和“Copyright 2013 Huang Zhe Feng Fan Limited All Rights Reserved. ”，并設(shè)置文本的對齊方式為“居中對齊”。這就完成了網(wǎng)

56、站首頁的下部制作，其效果如圖（4-5）所示：圖（4-5）：首頁下部效果圖4、在菜單欄中的文件欄中，選擇“保存”保存網(wǎng)頁，或者直接使用快捷鍵【Ctrl+S】，至此，就完成網(wǎng)站首頁的制作，其效果如圖（4-6）所示： 圖（4-6）：首頁效果圖4.4制作網(wǎng)頁模板所謂模板，就是當(dāng)網(wǎng)站中有許多頁面排版相同的情況下，將其定義為網(wǎng)頁模板，并定義其中部分區(qū)域是可編輯的，部分區(qū)域是不可編輯的，這樣制作子頁的時候就可以省去制作重復(fù)部分的操作。本次網(wǎng)站制作的二級子頁都風(fēng)格統(tǒng)一，采用了相同的結(jié)構(gòu)，所以只要將模板做出來，各個子頁的制作就是非常輕松。4.4.1制作模板的樣式和上部1、在Dreamweaver的菜單欄中，選擇“文件”“新建”菜單，隨著打開了“新建文檔”對話框。2、在左側(cè)的文檔類型列表中選擇“空模板”，在右側(cè)的“模板類型”列表中選擇“HTML模板”，然后點(diǎn)擊“創(chuàng)建”按鈕，就創(chuàng)建了模板。3、使用快捷鍵【Ctrl+S】就會打開“另存模板”對話框，在“另存為”文本框中輸入“mu1”作為模板文檔名，然后點(diǎn)擊“保存”按鈕，保存文檔。4、在“CSS樣式”面板中，單擊鼠標(biāo)右鍵，選擇下方的