中文版Dreamweaver+Flash+Photoshop網(wǎng)頁(yè)制作從入門(mén)到精通（CS6版）

1、網(wǎng)站的制作流程網(wǎng)頁(yè)制作軟件HTML快速入門(mén)什么是網(wǎng)站本章導(dǎo)讀學(xué)習(xí)網(wǎng)頁(yè)制作，需要先了解網(wǎng)頁(yè)的相關(guān)根底知識(shí)，例如，什么是網(wǎng)站、什么是網(wǎng)頁(yè)、網(wǎng)頁(yè)由哪些元素組成、使用什么軟件可以制作網(wǎng)站、實(shí)際制作時(shí)該采用哪些流程來(lái)完成以及如何才能學(xué)好網(wǎng)頁(yè)制作技術(shù)等，本章就來(lái)詳細(xì)介紹這些知識(shí)。第1章 網(wǎng)頁(yè)制作從零開(kāi)始什么是HTML商業(yè)網(wǎng)站開(kāi)發(fā)流程1.1 網(wǎng)頁(yè)制作根底知識(shí)在開(kāi)始學(xué)習(xí)網(wǎng)頁(yè)制作之前，應(yīng)該對(duì)網(wǎng)頁(yè)的根本知識(shí)有一定的了解，以減少在制作網(wǎng)頁(yè)時(shí)遇到的麻煩。1.1.1 什么是網(wǎng)站網(wǎng)站是由多個(gè)網(wǎng)頁(yè)組成的，但并不只是網(wǎng)頁(yè)的簡(jiǎn)單羅列組合，而是通過(guò)超級(jí)鏈接方式組成的既有鮮明風(fēng)格又有完善內(nèi)容的有機(jī)整體，如圖1-1所示為“人力資源網(wǎng)

2、站的所有文件及文件夾。要想制作出一個(gè)好的網(wǎng)站，必須了解網(wǎng)站建設(shè)的一些根本知識(shí)。圖1-1 “人力資源網(wǎng)站文件1.1.2 如何創(chuàng)立網(wǎng)站要?jiǎng)?chuàng)立網(wǎng)站，首先應(yīng)使用Dreamweaver或其他軟件在本地電腦中完成整個(gè)網(wǎng)站的編輯與測(cè)試，然后申請(qǐng)域名用于訪(fǎng)問(wèn)網(wǎng)站，如 baidu 和虛擬主機(jī)用于存放網(wǎng)站內(nèi)容，并上傳網(wǎng)站內(nèi)容到虛擬主機(jī)中，最后申請(qǐng)備案，通過(guò)備案后就可以通過(guò)域名訪(fǎng)問(wèn)網(wǎng)站了，其流程如圖1-2所示。 圖1-2 創(chuàng)立網(wǎng)站流程按網(wǎng)站內(nèi)容可將網(wǎng)站分為門(mén)戶(hù)網(wǎng)站、個(gè)人網(wǎng)站、專(zhuān)業(yè)網(wǎng)站和職能網(wǎng)站4種類(lèi)型。1.1.3 什么是網(wǎng)頁(yè)上網(wǎng)時(shí)在瀏覽器中看到的一個(gè)個(gè)漂亮的頁(yè)面就是網(wǎng)頁(yè)，網(wǎng)頁(yè)中包括了各種各樣的網(wǎng)頁(yè)元素，如文本、圖像

3、和超級(jí)鏈接等，如圖1-3所示為網(wǎng)站中“頁(yè)面的顯示效果，其中各組成元素的作用介紹如下。Logo超級(jí)鏈接表單動(dòng)畫(huà)圖像文本圖1-3 網(wǎng)頁(yè)主頁(yè)1LogoLogo是指網(wǎng)站的標(biāo)志，通常以圖像的形式表現(xiàn)。Logo需有獨(dú)特的創(chuàng)意以表達(dá)該網(wǎng)站的宗旨。如圖1-4所示分別為騰訊網(wǎng)、MSN中文網(wǎng)及搜搜網(wǎng)站的Logo。 圖1-4 網(wǎng)站Logo2表單表單是用于填寫(xiě)申請(qǐng)或提交信息時(shí)的交互頁(yè)面，如電子郵箱、主頁(yè)空間和QQ號(hào)碼等的申請(qǐng)頁(yè)面及登錄頁(yè)面或者進(jìn)行內(nèi)容搜索的搜索頁(yè)面等都是采用表單來(lái)實(shí)現(xiàn)交互的，如圖1-5所示為搜索頁(yè)面的表單。圖1-5 表單3超級(jí)鏈接在瀏覽器地址欄中輸入要訪(fǎng)問(wèn)的網(wǎng)址后按“Enter鍵即可訪(fǎng)問(wèn)該網(wǎng)站。超級(jí)鏈

4、接有將不同頁(yè)面鏈接起來(lái)的功能，它可以是同一站點(diǎn)頁(yè)面之間的鏈接，也可以是與其他網(wǎng)站頁(yè)面之間的鏈接。超級(jí)鏈接有文本鏈接、圖像鏈接等。在瀏覽網(wǎng)頁(yè)時(shí)單擊超級(jí)鏈接就能跳轉(zhuǎn)到與之對(duì)應(yīng)的頁(yè)面。4動(dòng)畫(huà)等多媒體元素動(dòng)畫(huà)、音樂(lè)等多媒體元素在網(wǎng)頁(yè)中也運(yùn)用得非常廣泛。網(wǎng)頁(yè)中常用的音樂(lè)格式有mid及mp3兩種格式。mid為通過(guò)電腦合成的音樂(lè)，不能被錄制。mp3為壓縮文件，其壓縮率非常高且音質(zhì)效果較好，是背景音樂(lè)的首選。網(wǎng)頁(yè)中常用的動(dòng)畫(huà)格式主要有兩種：一種是gif動(dòng)畫(huà)，另一種是swf動(dòng)畫(huà)。gif動(dòng)畫(huà)是逐幀動(dòng)畫(huà)，畫(huà)面相比照擬簡(jiǎn)單，而swf動(dòng)畫(huà)那么更富有表現(xiàn)力和視覺(jué)沖擊力，還可結(jié)合聲音和互動(dòng)功能，給瀏覽者強(qiáng)烈的視聽(tīng)感受。如圖

5、1-6所示分別為網(wǎng)站中的gif動(dòng)畫(huà)及swf動(dòng)畫(huà)。 圖1-6 動(dòng)畫(huà)5文本文本是網(wǎng)頁(yè)中最根本的組成元素之一。通過(guò)它可以詳細(xì)地將要傳達(dá)的信息傳送給瀏覽者。它在網(wǎng)絡(luò)上傳輸速度快，瀏覽者可方便地瀏覽和下載文本信息。因此，文本是網(wǎng)頁(yè)主要的信息載體。網(wǎng)頁(yè)中文本的樣式繁多、風(fēng)格不一，吸引人的網(wǎng)頁(yè)通常都具有美觀(guān)的文本樣式。文本的樣式可通過(guò)設(shè)置網(wǎng)頁(yè)文本的屬性來(lái)進(jìn)行設(shè)置。6圖像圖像也是網(wǎng)頁(yè)中不可或缺的元素。圖像比文本更直觀(guān)和生動(dòng)，并且可以傳遞一些文本不能傳遞的信息。網(wǎng)站Logo、Banner、廣告等通常都是圖像。如圖1-7所示為網(wǎng)站中的廣告圖像。圖1-7 廣告圖像1.1.4 網(wǎng)頁(yè)的類(lèi)型對(duì)于比擬大的網(wǎng)站，除了網(wǎng)站首頁(yè)

6、外，通常還有頻道頁(yè)，頻道頁(yè)下還包括欄目頁(yè)。在網(wǎng)站中，網(wǎng)頁(yè)有兩種分類(lèi)方法：一種是按表現(xiàn)形式分，另一種是按網(wǎng)頁(yè)的位置分。按網(wǎng)頁(yè)的表現(xiàn)形式可將網(wǎng)頁(yè)分為靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)兩類(lèi)，下面分別進(jìn)行介紹。靜態(tài)網(wǎng)頁(yè)：指用HTML語(yǔ)言編寫(xiě)的網(wǎng)頁(yè)。其制作方法簡(jiǎn)單易學(xué)，但不能進(jìn)行交互，缺乏靈活性。動(dòng)態(tài)網(wǎng)頁(yè)：指使用ASP、ASP.NET、PHP、JSP等語(yǔ)言編寫(xiě)的網(wǎng)頁(yè)，也稱(chēng)為交互式網(wǎng)頁(yè)，它可以與瀏覽者進(jìn)行交互。按網(wǎng)頁(yè)的位置可將網(wǎng)頁(yè)分為主頁(yè)和內(nèi)頁(yè)兩類(lèi)，分別介紹如下。主頁(yè)：指翻開(kāi)網(wǎng)站時(shí)看到的第一個(gè)頁(yè)面，也稱(chēng)為首頁(yè)。內(nèi)頁(yè)：指與主頁(yè)相關(guān)聯(lián)的頁(yè)面，也就是網(wǎng)站的內(nèi)部頁(yè)面。1.1.5 網(wǎng)頁(yè)的相關(guān)概念在網(wǎng)頁(yè)制作過(guò)程中，經(jīng)常會(huì)接觸到許多和

7、網(wǎng)絡(luò)相關(guān)的專(zhuān)業(yè)術(shù)語(yǔ)，了解這些專(zhuān)業(yè)術(shù)語(yǔ)的概念對(duì)于網(wǎng)頁(yè)設(shè)計(jì)有很大幫助。下面分別進(jìn)行介紹。瀏覽器：是用于觀(guān)看Internet上網(wǎng)頁(yè)的工具，使用它訪(fǎng)問(wèn)網(wǎng)絡(luò)就像是在互聯(lián)網(wǎng)的海洋中沖浪一樣，現(xiàn)在瀏覽器種類(lèi)眾多，如IE、Google Chrome、Firefox等。萬(wàn)維網(wǎng)：簡(jiǎn)稱(chēng)WWWWorld Wide Web，是目前Internet上最流行的一種信息資源。利用萬(wàn)維網(wǎng)可以將全世界的信息鏈接在一起，可以通過(guò)網(wǎng)絡(luò)訪(fǎng)問(wèn)這些資源并加以利用。文件傳輸協(xié)議：簡(jiǎn)稱(chēng)FTPFile Transfer Protocol。它是一種快速、高效和可靠的信息傳輸方式，通過(guò)該協(xié)議可以將文件從一臺(tái)電腦傳輸?shù)搅硗庖慌_(tái)電腦，實(shí)現(xiàn)資源互享。超文

8、本標(biāo)記語(yǔ)言：簡(jiǎn)稱(chēng)HTMLHyper Text Markup Language。網(wǎng)頁(yè)是通過(guò)超文本標(biāo)記語(yǔ)言創(chuàng)立的，其最根本的特征就是超文本和標(biāo)記，用HTML編寫(xiě)的網(wǎng)頁(yè)文件的擴(kuò)展名一般為htm或html。IP地址：由一組數(shù)字和小圓點(diǎn)組合而成，用于標(biāo)識(shí)網(wǎng)絡(luò)中電腦的位置，如和5等，在瀏覽器中輸入網(wǎng)站所在效勞器的IP地址即可訪(fǎng)問(wèn)該網(wǎng)站。域名：由于IP地址是一長(zhǎng)串的數(shù)字，因此要記住這些數(shù)字非常困難，為了方便記憶，便出現(xiàn)了域名的概念。域名是由英文字符和數(shù)字組成的，與固定的IP地址相對(duì)應(yīng)，這些域名通常都比擬簡(jiǎn)短，方便記憶。統(tǒng)一資源定位符：簡(jiǎn)稱(chēng)URLUniversal Resource Locator，用于定位I

9、nternet中某個(gè)資源的具體位置，以取得各種效勞信息的一種標(biāo)準(zhǔn)方法，如 :/ 為一個(gè)完整的URL。導(dǎo)航條：是多個(gè)超級(jí)鏈接的集合，能有效地實(shí)現(xiàn)超級(jí)鏈接功能。它包括了整個(gè)網(wǎng)站中主要頁(yè)面的關(guān)鍵詞，單擊導(dǎo)航條上的超級(jí)鏈接，可以跳轉(zhuǎn)到相應(yīng)的頁(yè)面進(jìn)行瀏覽。導(dǎo)航條一般分為橫式和豎式兩種。導(dǎo)航條可以是純文本、按鈕、圖片、Flash動(dòng)畫(huà)或腳本語(yǔ)言等。x，只需輸入域名，瀏覽器就會(huì)將頁(yè)面切換到網(wǎng)站首頁(yè)頁(yè)面。發(fā)布：將制作好的網(wǎng)頁(yè)上傳到網(wǎng)上的過(guò)程即稱(chēng)為發(fā)布，也叫做上傳或上載。如果做好了網(wǎng)頁(yè)，但沒(méi)有將網(wǎng)站內(nèi)容放到主頁(yè)效勞器上，那么仍然無(wú)法在互聯(lián)網(wǎng)上訪(fǎng)問(wèn)到它。1.2 網(wǎng)頁(yè)制作軟件一個(gè)好的網(wǎng)頁(yè)常包含文本、圖像、動(dòng)畫(huà)、音樂(lè)以

10、及視頻等多種對(duì)象，因此在制作過(guò)程中需要結(jié)合多種軟件進(jìn)行網(wǎng)頁(yè)編輯、動(dòng)畫(huà)制作、圖像處理等。下面對(duì)這些軟件進(jìn)行詳細(xì)介紹。1.2.1 網(wǎng)頁(yè)制作“三劍客網(wǎng)頁(yè)“三劍客，顧名思義，是一套強(qiáng)大的網(wǎng)頁(yè)編輯工具，最初是由Macromedia公司開(kāi)發(fā)，它由Dreamweaver、Fireworks和Flash 3個(gè)軟件組成。Dreamweaver是一個(gè)“所見(jiàn)即所得的可視化網(wǎng)站開(kāi)發(fā)工具軟件，主要用于靜態(tài)網(wǎng)頁(yè)的開(kāi)發(fā)；Fireworks主要是用于對(duì)網(wǎng)頁(yè)上常用的jpg、gif的圖像進(jìn)行處理的軟件，也可用于布局網(wǎng)頁(yè)；Flash主要用來(lái)制作動(dòng)畫(huà)。Adobe在收購(gòu)了Macromedia后，將旗下的代表作Photoshop與Dre

11、amweaver、Flash等進(jìn)行不斷的更新，現(xiàn)已開(kāi)展到了CS6版本，CS6為用戶(hù)提供了一些新的選擇工具和全新的軟件UI，用戶(hù)可完全擺脫代碼的束縛而創(chuàng)造屬于自己的HTML 5標(biāo)準(zhǔn)網(wǎng)頁(yè)。鑒于Adobe將Dreamweaver、Flash和Photoshop進(jìn)行了完美的兼容，因此，它們已成為新的網(wǎng)頁(yè)制作“三劍客。1Adobe Dreamweaver CS6Adobe Dreamweaver CS6是Adobe公司開(kāi)發(fā)集網(wǎng)頁(yè)制作和管理網(wǎng)站于一身的“所見(jiàn)即所得的網(wǎng)頁(yè)編輯軟件，它是第一套針對(duì)專(zhuān)業(yè)網(wǎng)頁(yè)設(shè)計(jì)師特別開(kāi)展的視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具，利用它可以輕而易舉地制作出跨越平臺(tái)限制和瀏覽器限制的充滿(mǎn)動(dòng)感的網(wǎng)頁(yè)。其

12、最大的特點(diǎn)就是能夠快速創(chuàng)立各種靜態(tài)、動(dòng)態(tài)網(wǎng)頁(yè)，除此之外，它還是一個(gè)出色的網(wǎng)站管理和維護(hù)軟件，如圖1-8所示為Dreamweaver CS6的主界面。隨著互聯(lián)網(wǎng)的普及，HTML技術(shù)的不斷開(kāi)展和完善，隨之產(chǎn)生了眾多網(wǎng)頁(yè)編輯軟件，從網(wǎng)頁(yè)編輯軟件根本性質(zhì)可以分為“所見(jiàn)即所得網(wǎng)頁(yè)編輯軟件和“非所見(jiàn)即所得網(wǎng)頁(yè)編輯器，兩者各有千秋。圖1-8 Dreamweaver CS6的主界面2Adobe Flash CS6Adobe Flash CS6是Adobe公司開(kāi)發(fā)的二維動(dòng)畫(huà)軟件，主要用于設(shè)計(jì)和編輯Flash動(dòng)畫(huà)，如圖1-9所示為Flash CS6的主界面。它附帶Adobe Flash Player播放器，用于支

13、持Flash動(dòng)畫(huà)的播放。圖1-9 Flash CS6的主界面Flash最大的優(yōu)點(diǎn)在于可應(yīng)用互聯(lián)網(wǎng)網(wǎng)頁(yè)的矢量動(dòng)畫(huà)文件格式，全世界97%的網(wǎng)絡(luò)瀏覽器都內(nèi)建Flash播放器，由于它產(chǎn)生出來(lái)的影片swf使用向量運(yùn)算Vector Graphics的方式，所以存儲(chǔ)空間較小，更加利于網(wǎng)絡(luò)傳播。3Adobe Photoshop CS6Adobe Photoshop CS6是Adobe公司旗下最為知名的圖像處理軟件之一，它是集圖像掃描、編輯修改、圖像制作、廣告創(chuàng)意、圖像輸入與輸出于一體的圖形圖像處理軟件，深受廣闊平面設(shè)計(jì)人員和網(wǎng)頁(yè)美工設(shè)計(jì)師的喜愛(ài)。CS6版本采用了最新的Mercury Graphics Engi

14、ne設(shè)計(jì)開(kāi)發(fā)引擎，其最新的內(nèi)容識(shí)別技術(shù)和友好的操作界面可幫助用戶(hù)更加精準(zhǔn)地完成圖片編輯，如圖1-10所示為Photoshop CS6的主界面。Fireworks可以處理網(wǎng)頁(yè)中常見(jiàn)格式的圖像，廣而不精。而Photoshop是專(zhuān)門(mén)用來(lái)處理圖片的。在Adobe公司收購(gòu)Macromedia后，使Dreamweaver和Flash兼容，因此Photoshop制作網(wǎng)頁(yè)圖像一點(diǎn)也不比Fireworks遜色。圖1-10 Photoshop CS6的主界面1.2.2 輔助軟件一個(gè)優(yōu)秀的網(wǎng)站除了具有合理的頁(yè)面布局和友好的用戶(hù)操作界面外，優(yōu)美簡(jiǎn)潔的顏色搭配、適當(dāng)參加3D動(dòng)畫(huà)、視頻和有效的推廣也是非常重要的。而這些工

15、作也可以借助一些小軟件來(lái)幫助網(wǎng)頁(yè)開(kāi)發(fā)人員和推廣人員進(jìn)行高效的完成。1網(wǎng)頁(yè)配色軟件網(wǎng)頁(yè)色彩的把握是網(wǎng)頁(yè)制作中的一個(gè)重點(diǎn)和難點(diǎn)，好的網(wǎng)頁(yè)色彩具有視覺(jué)舒適性，便于瀏覽者經(jīng)常訪(fǎng)問(wèn)。使用一些專(zhuān)門(mén)的網(wǎng)頁(yè)配色軟件可以方便地創(chuàng)立網(wǎng)頁(yè)色彩方案。用于網(wǎng)頁(yè)配色的軟件也較多，而常用的有玩轉(zhuǎn)顏色見(jiàn)圖1-11和網(wǎng)頁(yè)配色等，另外，某些網(wǎng)站也提供網(wǎng)頁(yè)配色功能，如藍(lán)色理想、模板無(wú)憂(yōu)見(jiàn)圖1-12等。 圖1-11 玩轉(zhuǎn)顏色軟件 圖1-12 模板無(wú)憂(yōu)在線(xiàn)配色工具2網(wǎng)頁(yè)推廣軟件為了提高網(wǎng)站的訪(fǎng)問(wèn)量，需要進(jìn)行網(wǎng)站的宣傳及推廣，網(wǎng)站推廣的方式很多，包括電子郵件推廣、搜索引擎加注、論壇推廣、參加友情鏈接聯(lián)盟等。當(dāng)然，借助電子商務(wù)師、登錄奇兵

16、、網(wǎng)站世界排名提升專(zhuān)家及Active WebTraffic等軟件進(jìn)行網(wǎng)站推廣也是必不可少的方式。網(wǎng)站推廣軟件，顧名思義，是通過(guò)網(wǎng)絡(luò)軟件將網(wǎng)站信息推廣到目標(biāo)受眾。具體包括通過(guò)傳統(tǒng)的廣告、企業(yè)形象系統(tǒng)去宣傳；通過(guò)網(wǎng)絡(luò)技術(shù)的方式，如鏈接、網(wǎng)絡(luò)廣告等方式宣傳。3網(wǎng)頁(yè)制作小軟件Dreamweaver既可以通過(guò)在視圖上進(jìn)行設(shè)計(jì)，又可以通過(guò)編寫(xiě)程序的方式進(jìn)行設(shè)計(jì)。制作網(wǎng)頁(yè)元素的小軟件非常多，如用于制作網(wǎng)頁(yè)特效的網(wǎng)頁(yè)特效王，制作3D文字動(dòng)畫(huà)的Cool 3D，制作網(wǎng)頁(yè)按鈕的Crystal Button，編寫(xiě)網(wǎng)頁(yè)代碼的HomeSite，轉(zhuǎn)換網(wǎng)頁(yè)音頻、視頻格式的格式工廠(chǎng)以及查看含有JavaApplet網(wǎng)頁(yè)的Java

17、虛擬機(jī)等，如圖1-13所示為Crystal Button的主界面。圖1-13 Crystal Button的主界面1.3 認(rèn)識(shí)HTMLHTML是網(wǎng)頁(yè)設(shè)置的語(yǔ)法根底，常稱(chēng)為超文本標(biāo)記語(yǔ)言Hypertext Markup Language，是用于描述網(wǎng)頁(yè)文檔的一種標(biāo)記語(yǔ)言。1.3.1 什么是HTMLHTML是標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用，也是一種標(biāo)準(zhǔn)、一種標(biāo)準(zhǔn)，它通過(guò)標(biāo)記符號(hào)來(lái)標(biāo)記要顯示網(wǎng)頁(yè)中的各個(gè)局部。網(wǎng)頁(yè)文件本身是一種文本文件，通過(guò)在文本文件中添加標(biāo)記符，可以告訴瀏覽器如何顯示其中的內(nèi)容，例如，文字如何處理、畫(huà)面如何安排、圖片如何顯示等。HTML語(yǔ)言文檔制作不復(fù)雜，但功能卻很強(qiáng)大，支持不同數(shù)據(jù)

18、格式的文件鑲?cè)?，包括圖片、聲音、視頻、動(dòng)畫(huà)、表單和超級(jí)鏈接等內(nèi)容，這也是它在互聯(lián)網(wǎng)中盛行的原因之一，其主要特點(diǎn)如下。簡(jiǎn)易性：HTML語(yǔ)言版本升級(jí)采用超集方式，從而更加靈活方便?？蓴U(kuò)展性：HTML語(yǔ)言的廣泛應(yīng)用帶來(lái)了加強(qiáng)功能、增加標(biāo)識(shí)符等要求，它采取子類(lèi)元素的方式，為系統(tǒng)擴(kuò)展帶來(lái)保證。Fireworks可以加速Web的設(shè)計(jì)與開(kāi)發(fā)，是一款創(chuàng)立與優(yōu)化Web圖像和快速構(gòu)建網(wǎng)站與Web界面原型的理想軟件。平臺(tái)無(wú)關(guān)性：HTML語(yǔ)言是一種標(biāo)準(zhǔn)，對(duì)于使用同一標(biāo)準(zhǔn)的瀏覽器，在查看一份HTML文檔時(shí)顯示是一樣的。但是網(wǎng)頁(yè)瀏覽器的種類(lèi)眾多，為讓不同標(biāo)準(zhǔn)的瀏覽器用戶(hù)查看同樣顯示效果的HTML文檔，HTML語(yǔ)言就使用了

19、統(tǒng)一的標(biāo)準(zhǔn)，從而能在各個(gè)瀏覽器平臺(tái)上顯示。1.3.2 HTML快速入門(mén)HTML其實(shí)就是文本，它需要瀏覽器的解釋?zhuān)渚庉嬡浖篌w可以分為3種，下面分別進(jìn)行介紹。根本文本、文檔編輯軟件：使用Windows視窗自帶的記事本或?qū)懽职宥伎梢跃帉?xiě)，不過(guò)保存時(shí)請(qǐng)使用htm或html作為擴(kuò)展名，這樣方便瀏覽器直接進(jìn)行運(yùn)行。半所見(jiàn)即所得軟件：這種軟件能大大提高開(kāi)發(fā)效率，使制作者在很短的時(shí)間內(nèi)做出主頁(yè)，且可以學(xué)習(xí)HTML，這種類(lèi)型的軟件主要有國(guó)產(chǎn)軟件網(wǎng)頁(yè)作坊、Amaya萬(wàn)維網(wǎng)聯(lián)盟和HOTDOG熱狗等。所見(jiàn)即所得軟件：使用最廣泛的編輯軟件，完全不懂HTML的知識(shí)也可以制作出網(wǎng)頁(yè)，這類(lèi)軟件主要有Amaya和Dream

20、weaver。與半所見(jiàn)即所得的軟件相比，這類(lèi)軟件開(kāi)發(fā)速度更快，效率更高，且直觀(guān)的表現(xiàn)更強(qiáng)，任何地方進(jìn)行修改后只需要刷新即可顯示。HTML語(yǔ)言非常簡(jiǎn)單，更容易上手。下面將通過(guò)一個(gè)HTML文件來(lái)進(jìn)行HTML的快速入門(mén)學(xué)習(xí)。在IE瀏覽器中翻開(kāi)一個(gè)l文檔，如圖1-14所示。在網(wǎng)頁(yè)空白處單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“查看源文件命令，可以查看網(wǎng)頁(yè)HTML源文件，如圖1-15所示。 圖1-14 瀏覽網(wǎng)頁(yè) 圖1-15 查看源文件一個(gè)網(wǎng)頁(yè)對(duì)應(yīng)一個(gè)HTML文件，超文本標(biāo)記語(yǔ)言文件以htm或html為擴(kuò)展名。可以使用任何能夠生成TXT類(lèi)型源文件的文本編輯軟件來(lái)產(chǎn)生超文本標(biāo)記語(yǔ)言文件，只修改文件后綴即可。標(biāo)準(zhǔn)

21、的超文本標(biāo)記語(yǔ)言文件都具有一個(gè)根本的整體結(jié)構(gòu)，即超文本標(biāo)記語(yǔ)言文件的開(kāi)頭與結(jié)尾標(biāo)志和超文本標(biāo)記語(yǔ)言的頭部與實(shí)體兩大局部，并且標(biāo)記一般都是成對(duì)出現(xiàn)局部標(biāo)記除外，如。1頭部標(biāo)記符號(hào)包括尖括號(hào)、標(biāo)記元素、屬性項(xiàng)等必須使用半角的英文字符，而不能使用全角字符。這兩個(gè)標(biāo)記符分別表示頭部信息的開(kāi)始和結(jié)尾。頭部中包含的標(biāo)記是頁(yè)面的標(biāo)題、序言、說(shuō)明等內(nèi)容，它本身不作為內(nèi)容來(lái)顯示，但影響網(wǎng)頁(yè)顯示的效果。頭部中最常用的標(biāo)記符是標(biāo)題標(biāo)記符和meta標(biāo)記符，其中標(biāo)題標(biāo)記符用于定義網(wǎng)頁(yè)的標(biāo)題內(nèi)容顯示。2實(shí)體超文本標(biāo)記語(yǔ)言正文標(biāo)記符為，又稱(chēng)為實(shí)體標(biāo)記符，網(wǎng)頁(yè)中顯示的實(shí)際內(nèi)容均包含在這兩個(gè)正文標(biāo)記符之間。3元素HTML元素用

22、來(lái)標(biāo)記文本，表示文本的內(nèi)容，如body、h1、p、title都是HTML元素。常見(jiàn)的元素標(biāo)記如表1-1所示。表1-1 常見(jiàn)的元素標(biāo)記名 稱(chēng)標(biāo) 記例如及說(shuō)明超級(jí)鏈接顯示的文字或圖片表格，行為，單元格為行列表，列表為，項(xiàng)為工程表單圖片字體這是我的個(gè)人主頁(yè)4元素的屬性HTML元素可以擁有屬性。屬性可以擴(kuò)展HTML元素的功能。例如，可以使用一個(gè)font屬性，使文字變?yōu)樗{(lán)色，語(yǔ)句為：。屬性通常由屬性名和值成對(duì)出現(xiàn)，語(yǔ)句為：color=#0000FF。上面例子中的font color就是name，#0000FF就是value，屬性值一般用雙引號(hào)引起來(lái)。1.4 網(wǎng)站開(kāi)發(fā)與制作流程了解商業(yè)網(wǎng)站開(kāi)發(fā)流程對(duì)于學(xué)習(xí)

23、網(wǎng)站建設(shè)與制作非常重要，因?yàn)樯虡I(yè)網(wǎng)站的開(kāi)發(fā)流程代表了專(zhuān)業(yè)和高效。下面對(duì)其進(jìn)行具體講解。1.4.1 商業(yè)網(wǎng)站開(kāi)發(fā)流程HTML注釋由感慨號(hào)表示，注釋內(nèi)容由“-符號(hào)結(jié)束，如。注釋內(nèi)容可插入文本中任何位置。假設(shè)在任何標(biāo)記前面插入感慨號(hào)，即被標(biāo)識(shí)為注釋?zhuān)挥栾@示。對(duì)于專(zhuān)門(mén)從事網(wǎng)站開(kāi)發(fā)的公司來(lái)說(shuō)，網(wǎng)站開(kāi)發(fā)是根據(jù)客戶(hù)的需求進(jìn)行的，主要分為客戶(hù)分析、工程開(kāi)發(fā)和確認(rèn)驗(yàn)收3個(gè)階段，每個(gè)環(huán)節(jié)都應(yīng)有相應(yīng)的責(zé)任人，如圖1-16所示是一個(gè)商業(yè)網(wǎng)站的開(kāi)發(fā)流程圖。一般的網(wǎng)站都是通過(guò)這個(gè)流程進(jìn)行開(kāi)發(fā)的。 圖1-16 商業(yè)網(wǎng)站開(kāi)發(fā)流程圖1需求分析階段在需求分析階段，需求分析人員首先設(shè)計(jì)出站點(diǎn)的結(jié)構(gòu)，然后規(guī)劃站點(diǎn)所需功能、內(nèi)容結(jié)構(gòu)

24、頁(yè)面等，經(jīng)客戶(hù)確認(rèn)后才能進(jìn)行下一步的操作。在這一過(guò)程中，需要與客戶(hù)緊密合作，認(rèn)真分析客戶(hù)提出的需求以減少后期再變更的可能性。2實(shí)現(xiàn)階段在網(wǎng)站開(kāi)發(fā)過(guò)程中管理工程進(jìn)度是一件比擬麻煩的事，因此必須按照標(biāo)準(zhǔn)流程進(jìn)行開(kāi)發(fā)，以便減少不必要的工作，使其在最短的時(shí)間內(nèi)高效地完成網(wǎng)站的開(kāi)發(fā)。在功能、內(nèi)容結(jié)構(gòu)頁(yè)面被確認(rèn)后，可以將功能、內(nèi)容結(jié)構(gòu)頁(yè)面交付給美工人員進(jìn)行美術(shù)設(shè)計(jì)，隨后再讓客戶(hù)通過(guò)設(shè)計(jì)界面進(jìn)行確認(rèn)，當(dāng)客戶(hù)對(duì)美術(shù)設(shè)計(jì)確認(rèn)以后可以開(kāi)始為客戶(hù)制作靜態(tài)站點(diǎn)。再次給客戶(hù)演示，在此靜態(tài)站點(diǎn)上直至將界面設(shè)計(jì)和功能修改到客戶(hù)滿(mǎn)意為止。隨后進(jìn)行數(shù)據(jù)庫(kù)設(shè)計(jì)和編碼開(kāi)發(fā)。3發(fā)布階段整個(gè)網(wǎng)站制作完成后，需要先對(duì)網(wǎng)站進(jìn)行測(cè)試，如網(wǎng)頁(yè)

25、的美觀(guān)度、易用性、是否有編碼錯(cuò)誤等。測(cè)試通過(guò)后即可試運(yùn)行，試運(yùn)行階段編碼人員還需根據(jù)收集到的日志進(jìn)行排錯(cuò)、測(cè)試，直至最后交付客戶(hù)使用。1.4.2 網(wǎng)站制作流程在對(duì)搜集的資料進(jìn)行分類(lèi)時(shí)，還可以在各子欄目文件夾中再次進(jìn)行細(xì)分，例如，在“音樂(lè)欄目下創(chuàng)立“圖像、“視頻等子文件夾。網(wǎng)站制作需要進(jìn)行許多準(zhǔn)備工作，例如，收集資料和素材、規(guī)劃站點(diǎn)等。做好這些準(zhǔn)備工作后，才能正式開(kāi)始制作網(wǎng)頁(yè)。最后還需測(cè)試站點(diǎn)并進(jìn)行網(wǎng)站的發(fā)布，以及對(duì)發(fā)布站點(diǎn)進(jìn)行更新和維護(hù)等操作。1收集資料和素材圖1-17 素材搜集與分類(lèi)在制作網(wǎng)頁(yè)前應(yīng)先收集要用到的文字資料、圖片素材及用于增添頁(yè)面特效的動(dòng)畫(huà)等元素，并將其分類(lèi)保存在相應(yīng)的文件夾中。

26、假設(shè)制作學(xué)校網(wǎng)頁(yè)那么需要提供有關(guān)學(xué)校的文字材料，如學(xué)校簡(jiǎn)介、招生對(duì)象說(shuō)明以及與學(xué)校有關(guān)的圖片等；假設(shè)制作個(gè)人網(wǎng)站，那么應(yīng)收集個(gè)人簡(jiǎn)歷、愛(ài)好等方面的材料，然后將收集到的素材和資料分類(lèi)保存，在需要使用時(shí)就可以方便地調(diào)用了，如圖1-17所示為素材搜集與分類(lèi)示意圖。圖1-18 網(wǎng)站結(jié)構(gòu)2規(guī)劃站點(diǎn)在籌劃站點(diǎn)時(shí)，應(yīng)按站點(diǎn)所包含的內(nèi)容進(jìn)行分類(lèi)即確定導(dǎo)航。例如，制作一個(gè)綜合性網(wǎng)站，其包含的頻道非常多，如“體育、“房產(chǎn)、“音樂(lè)、IT和“星座等，而頻道下又劃分了許多小欄目，例如，“體育頻道中設(shè)有“籃球、“足球和“臺(tái)球等小欄目。在前 期制作時(shí)只需精確到各頻道下的小欄目即可，如圖1-18所示。3制作網(wǎng)頁(yè)當(dāng)一切準(zhǔn)備工作

27、完成后，就可以進(jìn)行網(wǎng)頁(yè)制作了。在制作時(shí)，應(yīng)考慮以下幾個(gè)方面。創(chuàng)立頁(yè)面框架：將網(wǎng)頁(yè)劃分后，進(jìn)行頁(yè)面布局。創(chuàng)立導(dǎo)航條：一般的導(dǎo)航條都被放置在頁(yè)面的上部或者左側(cè)。填充內(nèi)容：將圖片和文本等內(nèi)容合理地分配到網(wǎng)頁(yè)的各頁(yè)面中。創(chuàng)立超級(jí)鏈接：將各個(gè)頁(yè)面進(jìn)行鏈接，方便用戶(hù)瀏覽網(wǎng)頁(yè)內(nèi)容。4測(cè)試站點(diǎn)在發(fā)布站點(diǎn)前需先對(duì)站點(diǎn)進(jìn)行測(cè)試，通?？筛鶕?jù)客戶(hù)端要求和網(wǎng)站大小等進(jìn)行測(cè)試。測(cè)試方法通常是將站點(diǎn)移到一個(gè)模擬調(diào)試效勞器上。在測(cè)試站點(diǎn)時(shí)，應(yīng)注意以下幾點(diǎn)。在創(chuàng)立網(wǎng)站的過(guò)程中，由于各站點(diǎn)重新設(shè)計(jì)、重新調(diào)整可能會(huì)使指向頁(yè)面的超級(jí)鏈接被移動(dòng)或刪除。此時(shí)可運(yùn)行超級(jí)鏈接檢查報(bào)告，測(cè)試超級(jí)鏈接是否有斷開(kāi)的情況。監(jiān)測(cè)頁(yè)面的文件大小以及下載

28、速度。對(duì)瀏覽器兼容性的檢查，使頁(yè)面原來(lái)不支持的樣式、層和插件等在瀏覽器中能兼容且功能正常。使用“檢查瀏覽器功能，自動(dòng)將訪(fǎng)問(wèn)者重新定向到另外的頁(yè)面，此方法可解決在較早版本的瀏覽器中無(wú)法運(yùn)行頁(yè)面的問(wèn)題。在不同的瀏覽器和平臺(tái)上預(yù)覽頁(yè)面，可以查看網(wǎng)頁(yè)布局、字體大小、顏色和默認(rèn)瀏覽器窗口大小等。5發(fā)布站點(diǎn)發(fā)布站點(diǎn)前需要在Internet上申請(qǐng)一個(gè)主頁(yè)空間，指定網(wǎng)站或主頁(yè)在Internet上的位置。可使用SharePoint Designer或Dreamweaver對(duì)站點(diǎn)進(jìn)行發(fā)布，也可使用FTP遠(yuǎn)程文件傳輸軟件將文件上傳到效勞器申請(qǐng)的網(wǎng)址目錄下。6更新和維護(hù)站點(diǎn)將站點(diǎn)上傳到效勞器后，需要每隔一段時(shí)間對(duì)站點(diǎn)

29、中的某些頁(yè)面進(jìn)行更新，保持網(wǎng)站內(nèi)容的新鮮感，以吸引更多的瀏覽者。此外，還應(yīng)定期翻開(kāi)瀏覽器檢查頁(yè)面元素和各種超級(jí)鏈接是否正常，以防止死鏈接情況的存在，此外，還需要檢測(cè)后臺(tái)程序是否被不速之客所篡改或注入，以便進(jìn)行及時(shí)的修正。1.5 根底實(shí)例制作個(gè)人主頁(yè)本章主要介紹了網(wǎng)頁(yè)的根底知識(shí)，通過(guò)下面的練習(xí)進(jìn)一步穩(wěn)固制作網(wǎng)頁(yè)需要了解和掌握的根底知識(shí)。網(wǎng)站正常運(yùn)行后，還需要及時(shí)對(duì)網(wǎng)站的內(nèi)容進(jìn)行更新，以便讓Google、Baidu等搜索引擎進(jìn)行收錄，從而提高網(wǎng)站的RP值。本例將使用記事本作為網(wǎng)頁(yè)編輯工具，制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)文檔，從而對(duì)網(wǎng)頁(yè)制作和HTML有個(gè)感性認(rèn)識(shí)。在網(wǎng)頁(yè)的制作中使用了最為根本的HTML元素：he

30、ad和body，最終效果如圖1-19所示。圖1-19 個(gè)人主頁(yè)最終效果1.5.1 行業(yè)分析本例制作的個(gè)人主頁(yè)，是使用Windows自帶的文本編輯工具，在記事本中書(shū)寫(xiě)了最為根本的HTML元素，只要保存為htm或html類(lèi)型的文檔，就可以通過(guò)瀏覽器進(jìn)行解析。個(gè)人主頁(yè)是從英文Personal Homepage翻譯而來(lái)，所以個(gè)人主頁(yè)就是一種最簡(jiǎn)單的個(gè)人網(wǎng)站，博客也是個(gè)人主頁(yè)的一種形式。它是根據(jù)自己的興趣愛(ài)好或價(jià)值取向，為了展示自我、與人交流的目的而在網(wǎng)絡(luò)上創(chuàng)立的供其他人瀏覽的網(wǎng)站。其作用為：可以充分地向其他人展示自己的才華，可以說(shuō)你的個(gè)人主頁(yè)就是你最好的簡(jiǎn)歷。用于展示你自己的個(gè)性，放上自己喜歡的東西，讓大家都可以來(lái)欣賞。用于結(jié)識(shí)新的朋友。對(duì)于好的個(gè)人主頁(yè)，一些大型網(wǎng)站會(huì)放在精彩推薦的位置，將會(huì)有很多人訪(fǎng)問(wèn)你的主頁(yè)，和訪(fǎng)問(wèn)者交流會(huì)大大擴(kuò)大你的生活空間。用于記憶家庭生活。例如，分享生活日記或照片、分享小孩成長(zhǎng)記錄、分享新婚儀式的照片給大家。1.5.2 操作思路雖然站點(diǎn)測(cè)試是一個(gè)復(fù)雜而且枯燥的工作，但站點(diǎn)測(cè)試卻是非常重要的，它是網(wǎng)站能正常運(yùn)行的前提，因此必須做好網(wǎng)站的測(cè)試工作。為更快完本錢(qián)例的制作，并盡可能運(yùn)用本章講解的知識(shí)，本例的操作思路如下。在IE瀏覽器中查看網(wǎng)頁(yè)輸入HTML代碼翻開(kāi)記事本1.5.3 操作步驟光盤(pán)素材第1章光盤(pán)效果第1章光盤(pán)實(shí)例演示第1章制作個(gè)人主頁(yè)