全書配套課件：網(wǎng)頁設(shè)計(jì)與制作-第二套

1、 本章將介紹網(wǎng)絡(luò)、網(wǎng)站和網(wǎng)頁的一些基本知識，為后續(xù)內(nèi)容的學(xué)習(xí)奠定一個(gè)初步基礎(chǔ)。第1章 網(wǎng)頁制作基礎(chǔ)學(xué)習(xí)目標(biāo)了解網(wǎng)絡(luò)的一些常用術(shù)語。了解網(wǎng)頁的基本元素。了解常用的網(wǎng)頁制作工具。掌握網(wǎng)頁布局的基本類型。了解常用的網(wǎng)頁布局技術(shù)。了解網(wǎng)站建設(shè)的基本流程。1.1常用術(shù)語Internet Intranet ISPIP域名網(wǎng)站URLFTPWWW超級文本HTMLASPVBScript和JavaScript1.1.1 InternetInternet也稱因特網(wǎng)或國際互聯(lián)網(wǎng)，是20世紀(jì)70年代由美國軍方的ARPAnet（阿帕網(wǎng)，由美國高等研究計(jì)劃署（Advanced Research Project Agency

2、）創(chuàng)立）發(fā)展而來的。Internet是一個(gè)由各種不同類型和規(guī)模并各自獨(dú)立運(yùn)行和管理的計(jì)算機(jī)網(wǎng)絡(luò)組成的覆蓋全球范圍內(nèi)的龐大網(wǎng)絡(luò)，網(wǎng)絡(luò)間可以暢通無阻地交換信息。組成Internet的計(jì)算機(jī)網(wǎng)絡(luò)包括局域網(wǎng)（LAN）、地域網(wǎng)（MAN）和廣域網(wǎng)（WAN）等。這些網(wǎng)絡(luò)通過普通電話線、高速率專用線路、衛(wèi)星、微波和光纜等通訊線路，把不同地域的大學(xué)、公司、科研機(jī)構(gòu)以及軍事、政府等組織的網(wǎng)絡(luò)連接起來。Internet為人們提供了巨大且不斷增長的信息資源和服務(wù)工具寶庫，用戶可以利用其提供的各種工具去獲取這些信息資源和服務(wù)。也可以通過Internet將個(gè)人或企業(yè)部門的信息發(fā)布出去，供其他用戶訪問瀏覽。1.1.2 In

3、tranetIntranet也稱企業(yè)內(nèi)部互聯(lián)網(wǎng)，用于在公司或組織內(nèi)傳遞和處理信息。是Internet技術(shù)在企業(yè)內(nèi)部或封閉的用戶群內(nèi)的應(yīng)用，也是一個(gè)公司或組織所特有的（不一定與Internet有物理上的連接關(guān)系）網(wǎng)絡(luò)。它可以用于提供文檔分發(fā)、軟件發(fā)布、訪問數(shù)據(jù)庫和培訓(xùn)等服務(wù)。雖然Intranet也使用了如Web頁（網(wǎng)頁）、Web瀏覽器、FTP站點(diǎn)、電子郵件、新聞組和郵件列表等與Internet相關(guān)的應(yīng)用程序，但它的作用范圍僅限定于公司或組織內(nèi)部。1.1.3 InternetISP（Internet Service Provider）是Internet服務(wù)提供商。用戶只有通過ISP才能接入Inte

4、rnet，并享受各種服務(wù)。ISP作為提供接入服務(wù)的中介，租用國際信道和大量的當(dāng)?shù)仉娫捑€，購置一系列計(jì)算機(jī)設(shè)備，通過集中使用、分散壓力的方式，向本地用戶提供接入服務(wù)。1.1.4 IPIP地址是Internet上主機(jī)地址的數(shù)字形式，與主機(jī)的域名地址是一一對應(yīng)的。IP地址是一個(gè)32位的二進(jìn)制數(shù)，通常寫成被點(diǎn)分開的4個(gè)十進(jìn)制數(shù)的形式，例如：2等。IP地址通常分為A、B、C三類，這種分類與IP地址中字節(jié)的使用方法相關(guān)。在實(shí)際應(yīng)用中，可以根據(jù)具體情況選擇IP地址的類型格式。A、B、C三類地址所能表示的范圍分別是：A類“-55”，B類“-55”，C類“-55”。IP地址和域名地址就像平時(shí)生活中的通信地址一樣

5、，不能隨意分配，否則將會導(dǎo)致無法估計(jì)的混亂狀態(tài)。在需要IP地址或域名地址時(shí)，用戶必須向國際網(wǎng)絡(luò)信息中心提出申請。申請批準(zhǔn)后，凡能夠使用Internet域名的地方都可以使用IP地址。1.1.5 域名互聯(lián)網(wǎng)上的站點(diǎn)就像人們生活中的機(jī)構(gòu)或家庭一樣，需要有個(gè)具體的地址，網(wǎng)民才能根據(jù)這個(gè)地址進(jìn)行訪問。由于Internet計(jì)算機(jī)的身份標(biāo)識是IP地址，為了便于記憶，按照一定的規(guī)則給Internet上的計(jì)算機(jī)起的名字就叫做域名。按照Internet的組織模式，對域名進(jìn)行分級，一級域名主要有以下幾種：.com（商業(yè)組織）、.net（網(wǎng)絡(luò)中心）、.edu（教育機(jī)構(gòu)）、.gov（政府部門）、.mil（軍事機(jī)構(gòu)）、.

6、org（國際組織）等。大部分國家和地區(qū)都擁有自己獨(dú)立的域名，例如：.cn（中國）、.us（美國）、.uk（英國）、.hk（香港）等。1.1.6 網(wǎng)站網(wǎng)站是一種通過互聯(lián)網(wǎng)相互連接起來的，為用戶提供網(wǎng)頁服務(wù)（Web Server）、數(shù)據(jù)傳輸服務(wù)（FTP Server）、郵件服務(wù)（Mail Server）、數(shù)據(jù)庫服務(wù)（Database Server）等多種服務(wù)的信息載體。它通常以虛擬主機(jī)或主機(jī)托管的方式進(jìn)行存放和運(yùn)作。網(wǎng)站一般擁有固定的域名。1.1.7 URLURL（Uniform Resource Locator，統(tǒng)一資源定位）主要用來指明通信協(xié)議和地址的方式，以取得網(wǎng)絡(luò)上的各種服務(wù)，它包括通信協(xié)

7、議（Protocol）、主機(jī)名、所要訪問文件的路徑和文件名等幾個(gè)部分。例如，“”便是老虎工作室的URL。這部分內(nèi)容將在5.1.1節(jié)詳細(xì)介紹。1.1.8 FTPFTP（File Transfer Protocol，文本傳輸協(xié)議）是Internet上使用非常廣泛的一種通訊協(xié)議。FTP是由支持Internet文件傳輸?shù)母鞣N規(guī)則所組成的集合，這些規(guī)則使Internet用戶可以把文件從一個(gè)主機(jī)傳送到另一個(gè)主機(jī)上。FTP通常也表示用戶執(zhí)行這個(gè)協(xié)議所使用的應(yīng)用程序，如CutFTP等。用戶使用FTP的方法很簡單，啟動FTP軟件后先與遠(yuǎn)程主機(jī)建立連接，然后向遠(yuǎn)程發(fā)出指令即可。1.1.9 WWWWWW（World

8、 Wide Web，萬維網(wǎng)）是一個(gè)基于超級文本的信息查詢工具。WWW是在Internet的基礎(chǔ)上，由各計(jì)算機(jī)節(jié)點(diǎn)上的WWW軟件和超級文本格式的信息文件組成的。這些節(jié)點(diǎn)稱為WWW服務(wù)器，簡稱Web服務(wù)器。海量的信息被存儲于Web服務(wù)器上，用戶使用WWW時(shí)只需提出查詢要求，到何處查詢及如何查詢則由WWW自動完成。WWW只是Internet上的一種應(yīng)用，Internet還包括許多其他服務(wù)，如Telnet、FTP、Archie、Wais、Mail等。使用這些服務(wù)功能必須具備一定的計(jì)算機(jī)知識，有的還需要用戶通過鍵盤輸入命令來完成操作（如Telnet），這就使許多初級用戶望而卻步。而WWW采用的是圖形界面

9、技術(shù)，用戶只需操縱鼠標(biāo)，通過Windows界面下的WWW軟件和超級文本就可以完成瀏覽、查詢和下載等各項(xiàng)功能，并通過Internet從全世界任何地方找到所希望得到的文本、圖像和聲音等信息，而且WWW可以與其他服務(wù)（如Telnet、FTP和Mail等）實(shí)現(xiàn)無縫連接。可以說，WWW的誕生使用戶從繁雜的操作中解脫出來，充分享受計(jì)算機(jī)帶來的便利。1.1.10 超級文本超級文本（Hypertext）與普通文本不同，它是一種使用戶與計(jì)算機(jī)之間能夠更加密切交流的文本顯示技術(shù)，它通過對相關(guān)詞匯進(jìn)行索引鏈接，可以使帶鏈接的詞匯或語句指向文本中的其他段落、注解或文本。用戶可以沿著超級文本中的索引鏈接跳轉(zhuǎn)閱讀，也可以

10、隨時(shí)返回到原來的閱讀之處。超級文本的出現(xiàn)，使計(jì)算機(jī)中的文本呈現(xiàn)出嶄新的面目。1.1.11 HTMLHTML（Hypertext Markup Language，超級文本標(biāo)記語言）是一種用來制作網(wǎng)絡(luò)中超級文本的簡單標(biāo)記語言。它是在文本文件的基礎(chǔ)上加上一系列標(biāo)記，用以描述其顏色、字體、文字大小和格式，再加上聲音、圖像、動畫甚至視頻等形成精彩的頁面。嚴(yán)格來說，HTML語言并不是一種編程語言，只是一些能讓瀏覽器看懂的標(biāo)記。當(dāng)用戶瀏覽WWW上包含HTML語言標(biāo)簽的網(wǎng)頁時(shí)，瀏覽器會“翻譯”由這些HTML語言標(biāo)簽提供的網(wǎng)頁結(jié)構(gòu)、外觀和內(nèi)容的信息，并按照一定的格式在屏幕上顯示出來。HTML是在客戶端被執(zhí)行的，

11、它包含許多HTML標(biāo)簽，這些標(biāo)簽都包括在“”符號里，并且大部分是成對出現(xiàn)的。1.1.11 HTML一個(gè)最簡單的HTML文檔至少包含下列標(biāo)簽。1.1.11 HTML它們的含義分別如下。：網(wǎng)頁的開始、結(jié)束標(biāo)簽，表示文件聲明，讓瀏覽器知道這是HTML文件。：網(wǎng)頁的文件頭部分，包含網(wǎng)頁的重要信息，在瀏覽器中不顯示。：網(wǎng)頁的可見部分，在設(shè)計(jì)視圖中看到的各個(gè)元素都包含在這一對標(biāo)簽內(nèi)。以上3對標(biāo)簽在網(wǎng)頁文檔中只能出現(xiàn)1次，而且順序也是固定的，不能重復(fù)出現(xiàn)或者顛倒順序。源代碼中的HTML標(biāo)簽是層層嵌套的，最外層是“”標(biāo)簽。1.1.12 ASPASP（Active Server Pages，動態(tài)服務(wù)器主頁）是M

12、icrosoft公司在1996年底推出的一種運(yùn)行于服務(wù)器端的Web應(yīng)用程序開發(fā)技術(shù)，可以運(yùn)行于Windows 98（PWS）/Windows NT（IIS）/Windows 2000（IIS）/Windows XP（IIS）/Windows 2003（IIS）平臺。ASP既不是一種語言，也不是一種開發(fā)工具，而是一種內(nèi)含于IIS/PWS之中的集成Script語言（如VBScript、JavaScript）到HTML主頁的服務(wù)器端的腳本語言環(huán)境，其主要功能是為生成動態(tài)的、交互的Web服務(wù)器應(yīng)用程序提供一種功能強(qiáng)大的方式或技術(shù)。因此可以說，ASP是一種類似于HTML、Script與CGI的結(jié)合體，但

13、是其運(yùn)行效率卻比CGI更高，程序編制比HTML更方便且更有靈活性，程序安全及保密性也比Script好。ASP文件的擴(kuò)展名為“.asp”，其中包括HTML標(biāo)記、文本和腳本語句，其腳本語句代碼包含于“”之間。1.1.13 VBScript和JavaScriptScript（腳本）是一種介于HTML和Java、C+之類高級編程語言之間的一種特殊語言，它由一組可以在Web服務(wù)器或客戶端瀏覽器上運(yùn)行的命令組合而成。盡管Script更接近高級語言，但它不具有編程語言復(fù)雜、嚴(yán)謹(jǐn)?shù)恼Z法規(guī)則。VBScript腳本語言是ASP的默認(rèn)語言，它是VB家族的最新成員，可以說VBScript是VB的子集，也可以說VBSc

14、ript是為了符合Internet小而精的條件而從VB之中萃取出精華功能的程序語言。其語法規(guī)則、函數(shù)與VB很相似，但功能上有所限制。VBScript可以在客戶端使用，也可以在服務(wù)器端使用，這是程序本身決定的。但是并不是所有的瀏覽器都支持VBScript，因此一般在安裝IIS的服務(wù)器端使用VBScript。下面來看一段VBScript代碼。1.1.13 VBScript和JavaScript MsgBox歡迎訪問我們的主頁！其中，與之間就是VBScript的腳本代碼，language告訴瀏覽器腳本代碼的語言類型是VBScript。MsgBox是VBScript語言中顯示消息框的函數(shù)，其功能是彈出

15、一個(gè)具有 按鈕的對話框，并顯示雙引號之間的字符串。提到JavaScript腳本語言，讀者有可能會把它與Java語言混淆起來，認(rèn)為也像VBScript與VB這對“孿生兄弟”一樣，其實(shí)JavaScript與Java是兩種完全不同的語言。雖然它們的語法元素都和C+非常相似，但彼此之間是不同的。JavaScript是一種解釋型的語言，而Java是一種編譯型的語言。1.1.13 VBScript和JavaScriptJavaScript是一種跨平臺、基于對象的腳本語言，由JavaScript核心語言、JavaScript客戶端擴(kuò)展、JavaScript服務(wù)器端擴(kuò)展3部分組成。核心語言部分在客戶端、服務(wù)器

16、端均可使用，包括了JavaScript的基本語法（如操作符、語句、函數(shù)）以及一些內(nèi)置對象等?？蛻舳藬U(kuò)展部分是在JavaScript核心語言的基礎(chǔ)上擴(kuò)展了控制瀏覽器的對象模型DOM。這樣，在客戶端編寫腳本時(shí)，用戶就可以方便地對頁面中的對象進(jìn)行控制，完成許多功能。服務(wù)器端擴(kuò)展部分是在JavaScript核心語言的基礎(chǔ)上擴(kuò)展了在服務(wù)器端運(yùn)行需要的對象，這些對象同樣可以與Web數(shù)據(jù)庫連接，對服務(wù)器上的文件進(jìn)行控制，在應(yīng)用程序之間交換信息，從而實(shí)現(xiàn)與CGI同樣的功能。下面來看一段JavaScript代碼。1.1.13 VBScript和JavaScript alert(您是訪問我們主頁的第88位瀏覽者！

17、); 其中，與之間就是JavaScript的腳本代碼，language告訴瀏覽器腳本代碼的語言類型是JavaScript。Alert()是JavaScript語言中顯示消息框的函數(shù)，其功能是彈出一個(gè)具有 按鈕的對話框，并顯示括號中雙引號之間的字符串。1.2 網(wǎng)頁元素文本圖像動畫音頻視頻1.2.1 文本文本是非常重要的網(wǎng)頁元素之一，是網(wǎng)頁中信息的主要載體。文字、字母、數(shù)字和符號等都可以稱為文本。與漂亮的圖像、優(yōu)美的動畫、悅耳的聲音和有聲有色的視頻相比，文本在網(wǎng)頁中似乎是最普通不過了，但文本卻是用戶創(chuàng)建網(wǎng)頁應(yīng)該考慮的關(guān)鍵因素，因?yàn)槲谋臼潜硎鲂畔⒌淖钔陚涞姆绞剑^大多數(shù)信息都是通過文本傳遞給瀏覽者的

18、。1.2.2 圖像圖像是站點(diǎn)中比較重要的元素，網(wǎng)頁的設(shè)計(jì)和創(chuàng)意都離不開圖像的使用和處理。一個(gè)欣賞性較好的站點(diǎn)應(yīng)有清新悅目的畫面，能夠吸引讀者有興趣瀏覽下去。同時(shí)，圖像可以傳遞文字所無法表達(dá)的特定的信息，在Web上的大多數(shù)網(wǎng)頁都使用圖像來圖文并茂地對內(nèi)容加以介紹。網(wǎng)頁中的圖像既有簡單的彩色背景，也有實(shí)物的真實(shí)照片?？傊?，根據(jù)不同的需要，配備不同的圖像加以說明，但從做網(wǎng)頁的角度來講，網(wǎng)頁上的圖像可以分為兩大類。一類純粹是網(wǎng)頁本身的需要，起增添網(wǎng)頁色彩的作用，它并不傳給讀者特定的信息，如某些網(wǎng)頁背景圖像、表格背景圖像等。另一類是行文的需要，配合文本向讀者傳遞信息，這就是所說的圖文并茂，或者利用圖像單

19、獨(dú)向讀者傳遞信息，如圖片新聞。1.2.3 動畫動畫是現(xiàn)代網(wǎng)站的重要特色，是網(wǎng)頁制作技術(shù)的重要組成部分。在網(wǎng)頁中，常見的動畫類型有GIF動畫、Flash動畫等，使用編程的方法也可以制作動畫。目前，網(wǎng)頁中最流行的動畫是Flash動畫。Flash動畫一般具有文件容量小、傳輸速度快、不失真、邊下載邊播放的特點(diǎn)，還具有交互性優(yōu)勢。Flash動畫具有嶄新的視覺效果，已經(jīng)成為一種流行的藝術(shù)表現(xiàn)形式。1.2.4 音頻實(shí)際上，在Internet中運(yùn)用最早和最多的多媒體文件就是音頻文件。Web網(wǎng)頁上使用的音頻文件類型也比視頻文件類型要豐富得多，目前，網(wǎng)絡(luò)上的音頻文件得到了空前的應(yīng)用，而且類型多樣。MP3具有壓縮程

20、度高、音質(zhì)好的特點(diǎn)，是目前最為流行的一種音樂文件，在網(wǎng)上有很多可以在線收聽或下載MP3的站點(diǎn)。OGG是一種新的音頻壓縮格式，類似于MP3等現(xiàn)有的音樂格式。ASF和WMA都是Microsoft公司針對Real公司開發(fā)的新一代網(wǎng)上流式數(shù)字音頻壓縮技術(shù)，這種壓縮技術(shù)的特點(diǎn)是同時(shí)兼顧了保真度和網(wǎng)絡(luò)傳輸需求，所以具有一定的先進(jìn)性，由于Microsoft公司的影響力，這種音頻格式現(xiàn)在正獲得越來越多的支持。WAV是Microsoft Windows系統(tǒng)提供的音頻格式，由于Windows本身的影響力，這個(gè)格式已經(jīng)成為了事實(shí)上的通用音頻格式。rm是目前網(wǎng)絡(luò)上流行的主流多媒體文件格式之一，該類文件必須使用基于Re

21、alNetworks 公司開發(fā)的RealMedia引擎的播放器（例如RealPlayer）才能正常播放。real格式是RealNetworks公司網(wǎng)絡(luò)音頻和視頻解決方案，具有很高的壓縮比，使用流式（streaming）播放媒體技術(shù)，從而使人們能夠在網(wǎng)上實(shí)時(shí)收聽音頻及收看視頻。1.2.4 音頻1.2.5 視頻在網(wǎng)頁中添加視頻文件可以大大增加站點(diǎn)的可讀性，已成為站點(diǎn)多媒體特性的重要體現(xiàn)?，F(xiàn)在，能夠在網(wǎng)絡(luò)上運(yùn)行的視頻文件類型也日益豐富。AVI（.AVI）是音頻視頻交錯(cuò)（Audio Video Interleaved）的英文縮寫，它是Microsoft公司開發(fā)的一種符合RIFF文件規(guī)范的數(shù)字音頻與視頻

22、文件格式。MPEG文件（.MPEG/.MPG/.DAT）是運(yùn)動圖像壓縮算法的國際標(biāo)準(zhǔn)，它采用有損壓縮方法減少運(yùn)動圖像中的冗余信息，同時(shí)保證每秒30幀的圖像動態(tài)刷新率，已被幾乎所有的計(jì)算機(jī)平臺共同支持。1.2.5 視頻DIVX視頻編碼技術(shù)可以說是一種新生視頻壓縮格式，它由Microsoft mpeg4 v3修改而來，使用了MPEG4的壓縮算法。RealVideo文件（.RA/.RM/.RMVB）是RealNetworks公司開發(fā)的一種新型流式視頻文件格式，它包含在RealNetworks公司所制定的音頻視頻壓縮規(guī)范RealMedia中，主要用來在低速率的廣域網(wǎng)上實(shí)時(shí)傳輸活動視頻影像，可以根據(jù)網(wǎng)絡(luò)

23、數(shù)據(jù)傳輸速率的不同而采用不同的壓縮比率，從而實(shí)現(xiàn)影像數(shù)據(jù)的實(shí)時(shí)傳送和實(shí)時(shí)播放。QuickTime（MOV/.QT）是Apple計(jì)算機(jī)公司開發(fā)的一種音頻、視頻文件格式，用于保存音頻和視頻信息，具有先進(jìn)的視頻和音頻功能，目前已成為數(shù)字媒體軟件技術(shù)領(lǐng)域中事實(shí)上的工業(yè)標(biāo)準(zhǔn)。Microsoft公司推出的Advanced Streaming Format （ASF，高級流格式）是一個(gè)在Internet上實(shí)時(shí)傳播多媒體的技術(shù)標(biāo)準(zhǔn)，由于它使用了MPEG4的壓縮算法，所以壓縮率和圖像質(zhì)量上的表現(xiàn)都很不錯(cuò)。WMV是一種采取獨(dú)立編碼方式并且可以在Internet上實(shí)時(shí)傳播多媒體的技術(shù)標(biāo)準(zhǔn)，主要優(yōu)點(diǎn)包括：本地或網(wǎng)絡(luò)回

24、放、可擴(kuò)充的媒體類型、部件下載、可伸縮的媒體類型、流的優(yōu)先級化、多語言支持、環(huán)境獨(dú)立性、豐富的流間關(guān)系以及擴(kuò)展性等。1.3 了解網(wǎng)頁制作工具由于網(wǎng)頁元素的多樣化，要想制作出精致美觀、豐富生動的網(wǎng)頁，不是單純依靠一種網(wǎng)頁編輯軟件所能實(shí)現(xiàn)的，往往需要多種軟件的互相配合，如同時(shí)應(yīng)用網(wǎng)頁布局軟件Dreamweaver、圖像處理軟件Photoshop、動畫制作軟件Flash等。常用的網(wǎng)頁編輯軟件有FrontPage和Dreamweaver等。Dreamweaver因其功能全面、操作靈活、專業(yè)性強(qiáng)，而受到網(wǎng)頁制作人員的青睞。在制作網(wǎng)頁時(shí)，經(jīng)常使用的圖像處理軟件有Fireworks和Photoshop。Dr

25、eamweaver、Fireworks和Flash一度被稱為“網(wǎng)頁三劍客”，不過，現(xiàn)在，一般將Dreamweaver、Photoshop和Flash稱為“新網(wǎng)頁三劍客”。Flash是目前最常用的網(wǎng)頁動畫制作軟件。用Flash制作的動畫文件小，利于網(wǎng)上發(fā)布，而且還能制作出具有交互功能的動畫，并能很方便地與網(wǎng)頁建立鏈接。作為一般網(wǎng)頁制作人員，掌握了這3種軟件，就可以制作出精美的網(wǎng)頁。本書將重點(diǎn)介紹Dreamweaver CS3的使用方法，同時(shí)兼顧介紹Photoshop CS3、Flash CS3的使用方法。1.4 網(wǎng)頁布局類型國字型匡字型三字型川字型其他類型1.4.1 國字型國字型也稱同字型，即最

26、上面是網(wǎng)站的標(biāo)題以及橫幅廣告條，接下來是網(wǎng)站的主要內(nèi)容，最左側(cè)和最右側(cè)分列一些小條目內(nèi)容，中間是主要部分，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這是使用最多的一種結(jié)構(gòu)類型。1.4.2 匡字型匡字型也稱拐角形，這種結(jié)構(gòu)與國字型結(jié)構(gòu)很相近，上面是標(biāo)題及廣告橫幅，下面左側(cè)是一窄列的鏈接等，右側(cè)是很寬的正文，下面也是一些網(wǎng)站的輔助信息。1.4.3 三字型這是一種比較簡潔的布局類型，其頁面在橫向上被分隔為3部分，上部和下部放置一些標(biāo)志、導(dǎo)航條、廣告條和版權(quán)信息等，中間是正文內(nèi)容。1.4.4 川字型整個(gè)頁面在垂直方向上被分為3列，內(nèi)容按欄目分布在這3列中，最大限度地突出欄目的索引功能。1.4.

27、5 其他類型常見的網(wǎng)頁布局類型還包括標(biāo)題文本型、框架型、封面型、Flash型等。標(biāo)題文本型即頁面內(nèi)容以文本為主，最上面一般是標(biāo)題，下面是正文的格式?？蚣苄筒季滞ǔ７譃樽笥铱蚣苄汀⑸舷驴蚣苄秃途C合框架型。由于兼容性和美觀等原因，專業(yè)設(shè)計(jì)人員很少采用這種結(jié)構(gòu)。封面型基本出現(xiàn)在一些網(wǎng)站的首頁，大部分由一些精美的平面設(shè)計(jì)和動畫組合而成，在頁面中放幾個(gè)簡單的鏈接或者僅是一個(gè)“進(jìn)入”的鏈接，甚至直接在首頁的圖片上做鏈接而沒有任何提示。這種類型的網(wǎng)頁布局大多用于企業(yè)網(wǎng)站或個(gè)人網(wǎng)站。Flash型是指整個(gè)網(wǎng)頁就是一個(gè)Flash動畫，這是一種比較新潮的布局方式。其實(shí)，這種布局與封面型在結(jié)構(gòu)上是類似的，無非使用了F

28、lash技術(shù)。1.5 網(wǎng)站建設(shè)流程前期策劃網(wǎng)頁制作網(wǎng)站發(fā)布網(wǎng)站推廣后期維護(hù)1.5.1 前期策劃無論是大的門戶網(wǎng)站還是只有少量頁面的個(gè)人主頁，都需要做好前期的策劃工作。明確網(wǎng)站主題、網(wǎng)站名稱、欄目設(shè)置、整體風(fēng)格、所需要的功能及實(shí)現(xiàn)的方法等，這是制作一個(gè)網(wǎng)站的良好開端。網(wǎng)站必須有一個(gè)明確的主題。網(wǎng)站必須有一個(gè)容易讓用戶記住的名稱網(wǎng)站欄目設(shè)置要合理。網(wǎng)站必須有自己的風(fēng)格。1.5.2 網(wǎng)頁制作在前期策劃完成后，接著就進(jìn)入網(wǎng)頁設(shè)計(jì)與制作階段。這一時(shí)期的工作按其性質(zhì)可以分為3類：頁面美工設(shè)計(jì)靜態(tài)頁面制作程序開發(fā)1.5.3 網(wǎng)站發(fā)布發(fā)布站點(diǎn)前，必須確定網(wǎng)頁的存儲空間。如果自己有服務(wù)器，配置好后，直接發(fā)布到上

29、面即可。如果自己沒有服務(wù)器，則最好在網(wǎng)上申請一個(gè)空間來存放網(wǎng)頁，并申請一個(gè)域名來指定站點(diǎn)在網(wǎng)上的位置。發(fā)布網(wǎng)頁可直接使用Dreamweaver CS3中的“發(fā)布站點(diǎn)”功能進(jìn)行上傳。對于大型站點(diǎn)的上傳一般都使用FTP軟件，如LeapFTP、CuteFTP等，使用這種方法上傳下載速度都很快。1.5.4 網(wǎng)站推廣網(wǎng)站推廣活動一般發(fā)生在網(wǎng)站發(fā)布之后，當(dāng)然有一些網(wǎng)站在籌備期間就開始進(jìn)行宣傳。網(wǎng)站推廣是網(wǎng)絡(luò)營銷的主要內(nèi)容，可以說，大部分的網(wǎng)絡(luò)營銷活動都是為了網(wǎng)站推廣的需要，如發(fā)布新聞、搜索引擎登記、交換鏈接以及網(wǎng)絡(luò)廣告等。1.5.5 后期維護(hù)站點(diǎn)上傳到服務(wù)器后，首先要檢查運(yùn)行是否正常，如果有錯(cuò)誤要及時(shí)更正

30、。另外，每隔一段時(shí)間，還應(yīng)對站點(diǎn)中的內(nèi)容進(jìn)行更新，以便提供最新消息，吸引更多的用戶。1.6建站方式實(shí)體主機(jī)主機(jī)托管 虛擬主機(jī) 1.6.1實(shí)體主機(jī)自行購買和建設(shè)服務(wù)器主機(jī)，然后向ISP申請連接Internet的專線和網(wǎng)址。這種方案的主動權(quán)較大，可以隨意增加服務(wù)項(xiàng)目，功能最豐富。通過專線，主機(jī)將成為網(wǎng)絡(luò)中的一個(gè)節(jié)點(diǎn)，網(wǎng)絡(luò)中的用戶可以隨時(shí)訪問主機(jī)。不過該方案的弊端也很多，僅購買服務(wù)器主機(jī)和每個(gè)月昂貴的專線租用費(fèi)這兩項(xiàng)，就不是中小企業(yè)所能承擔(dān)的，而且還要聘用專人維護(hù)網(wǎng)站和服務(wù)器主機(jī)?？傊@種方案就仿佛在開發(fā)一片新大陸，不僅要修路、架橋，還要建房、尋覓人才。不過對于公司內(nèi)部的Intranet來說，這種

31、方式卻變成了最優(yōu)方案，因?yàn)镮ntranet本身就是服務(wù)于公司內(nèi)部的，自身網(wǎng)絡(luò)及服務(wù)器都不需要花費(fèi)額外的費(fèi)用，只需要選擇性能好的服務(wù)器主機(jī)就行了。1.6.2主機(jī)托管 只需購買主機(jī)，不必租用專線，自行創(chuàng)建網(wǎng)站和管理服務(wù)器主機(jī)。這種方案比實(shí)體主機(jī)方案省掉一部分的專線租用費(fèi)，但必須通過其他方式（如撥號、ISDN、ADSL等）上網(wǎng)，服務(wù)器必須放置在提供主機(jī)托管的服務(wù)商那里。這種方案就好像省去了修路、架橋的費(fèi)用，直接租賃土地進(jìn)行開發(fā)建設(shè)。目前多數(shù)的企業(yè)采取這種方式在Internet上安家落戶。1.6.3虛擬主機(jī) 這種方案連購買主機(jī)的費(fèi)用也省去了，而是租用ISP的主機(jī)硬盤空間，由ISP負(fù)責(zé)所有硬件和技術(shù)人員

32、的費(fèi)用以及連接Internet的專線月租。這種方案，網(wǎng)站建造者可以不必通過ISP的網(wǎng)絡(luò)接入上網(wǎng)，而是通過其他更省錢的方式上網(wǎng)，還可以向其他ISP申請專有的域名。就好像向ISP租用廠房，節(jié)省了各項(xiàng)建設(shè)費(fèi)用，只要按時(shí)交納各種管理費(fèi)，就可以省心地開展業(yè)務(wù)了。小型企業(yè)或者個(gè)人用戶多采取這種方式在Internet上落戶。 本章將首先介紹網(wǎng)頁制作軟件Dreamweaver CS3的工作界面、常用工具欄和面板以及工作區(qū)布局，然后介紹在Dreamweaver CS3中創(chuàng)建和管理站點(diǎn)的方法。第2章 創(chuàng)建和管理站點(diǎn)學(xué)習(xí)目標(biāo)了解Dreamweaver CS3的工作界面。了解Dreamweaver CS3的常用工具欄

33、和面板。了解Dreamweaver CS3的工作區(qū)布局。掌握定義站點(diǎn)的基本方法。掌握設(shè)置首選參數(shù)的基本方法。掌握創(chuàng)建文件夾和文件的基本方法。掌握編輯、復(fù)制和刪除站點(diǎn)的基本方法。掌握導(dǎo)出和導(dǎo)入站點(diǎn)的基本方法。2.1 認(rèn)識Dreamweaver CS3工作界面常用工具欄常用面板工作區(qū)布局2.1.1 工作界面一、歡迎屏幕啟動Dreamweaver CS3，在Dreamweaver CS3的工作界面中首先出現(xiàn)的是歡迎屏幕。如果從網(wǎng)頁制作的角度來看歡迎屏幕，可以將其分為頁眉、主體和頁腳3個(gè)部分，其中主體又分為左欄、中欄和右欄3列。在頁眉部分顯示的是Dreamweaver CS3的名稱和Adobe的標(biāo)志，

34、在主體部分的左欄提供了用戶打開文檔的方式，在主體部分的中欄提供了新建文檔的方式，在主體部分的右欄提供了從模板創(chuàng)建文檔的方式，在頁腳部分提供了幫助信息，初次使用Dreamweaver CS3的用戶可從中了解該軟件的基本情況。如果希望以后在啟動Dreamweaver CS3時(shí)不再顯示歡迎屏幕，可以勾選頁腳中的【不再顯示】復(fù)選框。也可以通過選擇菜單欄中的【編輯】/【首選參數(shù)】命令，打開【首選參數(shù)】對話框，在【常規(guī)】分類中的【顯示歡迎屏幕】復(fù)選框中設(shè)置是否顯示歡迎屏幕，勾選該項(xiàng)將在啟動Dreamweaver CS3時(shí)顯示歡迎屏幕，否則不顯示歡迎屏幕。2.1.1 工作界面2.1.1 工作界面二、工作界面

35、在歡迎屏幕中，選擇主體部分中欄的【新建】/【HTML】命令，將新建一個(gè)HTML文檔，2.1.2 常用工具欄一、【插入】工具欄【插入】工具欄位于菜單欄的下面，如圖2-4所示，可以通過在菜單欄中選擇【查看】/【工具欄】/【插入】命令（或選擇【窗口】/【插入】命令）將其顯示或隱藏?！静迦搿抗ぞ邫谕ǔＳ袃煞N表現(xiàn)形式：制表符格式和菜單格式。2.1.2 常用工具欄二、【文檔】工具欄【文檔】工具欄可以通過選擇【查看】/【工具欄】/【文檔】命令來對其進(jìn)行顯示或隱藏。通過【文檔】 工具欄可以在【設(shè)計(jì)】視圖、【代碼】視圖和【拆分】視圖之間進(jìn)行切換。2.1.2 常用工具欄在【文檔】工具欄中，單擊 下拉菜單，從中可以

36、選擇要預(yù)覽網(wǎng)頁的瀏覽器。在下拉菜單中選擇【編輯瀏覽器列表】命令，將打開【首選參數(shù)】對話框，可以在【在瀏覽器中預(yù)覽】分類中添加其他瀏覽器。可以對在【瀏覽器】列表中所選擇的瀏覽器進(jìn)行編輯，還可以通過設(shè)置【默認(rèn)】選項(xiàng)為“主瀏覽器”或“次瀏覽器”來設(shè)定所添加的瀏覽器是主瀏覽器還是次瀏覽器。2.1.2 常用工具欄三、【標(biāo)準(zhǔn)】工具欄在默認(rèn)情況下，【標(biāo)準(zhǔn)】工具欄是不顯示的，可以通過選擇【查看】/【工具欄】/【標(biāo)準(zhǔn)】命令來顯示或隱藏該工具欄。2.1.3 常用面板一、【文件】面板Dreamweaver CS3提供了許多功能面板，這些功能面板的命令都集中在【窗口】菜單中。如果要顯示某個(gè)面板，在【窗口】菜單中選擇相

37、應(yīng)的命令（即在命令前打上“”號）即可。這些功能面板絕大多數(shù)都顯示在窗口的右側(cè)，多個(gè)面板可以組成一個(gè)面板組，如【文件】面板組包括【文件】、【資源】和【代碼片斷】3個(gè)面板，再如【CSS】面板組包括【CSS樣式】和【AP元素】兩個(gè)面板。2.1.3 常用面板二、【屬性】面板【屬性】面板通常顯示在編輯區(qū)域的最下面，如果工作界面中沒有顯示【屬性】面板，在菜單欄中選擇【窗口】/【屬性】命令即可將其顯示出來。單擊【屬性】面板右下角的 按鈕或 按鈕可以隱藏或重新顯示高級設(shè)置項(xiàng)目。通過【屬性】面板可以檢查、設(shè)置和修改所選對象的屬性。選擇的對象不同，【屬性】面板中的項(xiàng)目也不一樣。2.1.4 工作區(qū)布局在Dreamw

38、eaver CS3工作界面中，工具欄和面板是否顯示以及顯示的位置都是可以調(diào)整的。調(diào)整好的工作區(qū)布局可以保存下來，選擇【窗口】/【工作區(qū)布局】/【保存當(dāng)前】命令，打開【保存工作區(qū)布局】對話框進(jìn)行設(shè)置即可。選擇【窗口】/【工作區(qū)布局】/【管理】命令，打開【管理工作區(qū)布局】對話框可對工作區(qū)進(jìn)行管理。2.2 創(chuàng)建站點(diǎn)定義站點(diǎn)設(shè)置首選參數(shù)創(chuàng)建文件夾和文件2.2.1 定義站點(diǎn)1、選擇【站點(diǎn)】/【新建站點(diǎn)】命令，打開【未命名站點(diǎn)2 的站點(diǎn)定義為】對話框，輸入站點(diǎn)的名稱，如果還沒有站點(diǎn)的HTTP地址，下方的文本框可不填。 2、設(shè)置是否使用服務(wù)器技術(shù)。2.2.1 定義站點(diǎn)3、設(shè)置文件的使用方式。4、設(shè)置瀏覽站點(diǎn)

39、的URL。5、設(shè)置是否使用遠(yuǎn)程服務(wù)器。 2.2.2 設(shè)置首選參數(shù)在使用Dreamweaver CS3制作網(wǎng)頁之前，可以結(jié)合自己的需要來定義Dreamweaver CS3的使用規(guī)則。例如，在Dreamweaver CS3啟動時(shí)是否顯示歡迎屏幕，在文本處理中是否允許輸入多個(gè)連續(xù)的空格，在定義文本或其他元素外觀時(shí)是使用CSS標(biāo)簽還是使用HTML標(biāo)簽，不可見元素是否顯示，新建文檔默認(rèn)的擴(kuò)展名是什么等。這些規(guī)則可以通過設(shè)置Dreamweaver CS3的首選參數(shù)來實(shí)現(xiàn)。1、設(shè)置【常規(guī)】分類2.2.2 設(shè)置首選參數(shù)2、 設(shè)置【不可見元素】分類3、設(shè)置【復(fù)制/粘貼】分類2.2.2 設(shè)置首選參數(shù)4、 設(shè)置【新

40、建文檔】分類2.2.3 創(chuàng)建文件夾和文件一、文件夾和文件的命名規(guī)則漢語拼音：即根據(jù)每個(gè)頁面的標(biāo)題或主要內(nèi)容，提取兩三個(gè)概括字，將它們的漢語拼音作為文件名。如“公司簡介”頁面可提取“簡介”這兩個(gè)字的漢語拼音，文件名為“jianjie.htm”。拼音縮寫：即根據(jù)每個(gè)頁面的標(biāo)題或主要內(nèi)容，提取每個(gè)漢字的第1個(gè)字母作為文件名。如“公司簡介”頁面的拼音是“gongsijianjie”，那么文件名就是“gsjj.htm”。英文縮寫：一般適用于專有名詞。例如，“Active Server Pages”這個(gè)專有名詞一般用ASP來代替，因此文件名為“asp.htm”。英文原義：這種方法比較實(shí)用、準(zhǔn)確。如可以將“

41、圖書列表”頁面命名為“BookList.htm”。以上4種命名方式有時(shí)會與數(shù)字、符號組合使用。例如“Book1.htm”、“Book_1.htm”。一個(gè)網(wǎng)站中最好不要使用不同的命名規(guī)則，以免造成維護(hù)上的麻煩。2.2.3 創(chuàng)建文件夾和文件二、創(chuàng)建文件夾和文件的方法在【文件】/【文件】面板中創(chuàng)建文件夾的方法是，用鼠標(biāo)右鍵單擊根文件夾，在彈出的快捷菜單中選擇【新建文件夾】命令，然后在“untitled”處輸入新的文件夾名，如“images”，然后按Enter鍵確認(rèn)。在【文件】/【文件】面板中創(chuàng)建文件的方法是，用鼠標(biāo)右鍵單擊根文件夾，在彈出的快捷菜單中選擇【新建文件】命令，然后在“untitled.a

42、sp”處輸入新的文件名，如“index.asp”，然后按Enter鍵確認(rèn)。也可在菜單欄中選擇【文件】/【新建】命令或按Ctrl+N鍵打開【新建文檔】對話框來創(chuàng)建文檔。2.3 管理站點(diǎn)編輯站點(diǎn)復(fù)制站點(diǎn)刪除站點(diǎn)導(dǎo)出站點(diǎn)導(dǎo)入站點(diǎn)2.3.1 編輯站點(diǎn)選擇【站點(diǎn)】/【管理站點(diǎn)】命令，打開【管理站點(diǎn)】對話框，在站點(diǎn)列表中選中要編輯的站點(diǎn)，然后單擊 按鈕。2.3.2 編輯站點(diǎn)在站點(diǎn)列表中選中要復(fù)制的站點(diǎn)，然后單擊 按鈕將復(fù)制一個(gè)站點(diǎn)。2.3.3 編輯站點(diǎn)在【管理站點(diǎn)】對話框中選中要?jiǎng)h除的站點(diǎn)，然后單擊 按鈕，將彈出提示對話框。2.3.4 導(dǎo)出站點(diǎn)選中要導(dǎo)出的站點(diǎn)，然后單擊 按鈕打開【導(dǎo)出站點(diǎn)】對話框，設(shè)置導(dǎo)

43、出站點(diǎn)文件的路徑和文件名稱。2.3.5 導(dǎo)入站點(diǎn)在【管理站點(diǎn)】對話框中單擊 按鈕，打開【導(dǎo)入站點(diǎn)】對話框，選中要導(dǎo)入的站點(diǎn)文件。2.4實(shí)例導(dǎo)入、編輯和導(dǎo)出站點(diǎn)通過前面各節(jié)的學(xué)習(xí)，讀者規(guī)劃、創(chuàng)建和管理站點(diǎn)已經(jīng)沒有問題了。本節(jié)將綜合運(yùn)用前面所介紹的知識來導(dǎo)入一個(gè)站點(diǎn)，然后對該站點(diǎn)進(jìn)行編輯，最后導(dǎo)出該站點(diǎn)。 本章將介紹在Dreamweaver CS3中，創(chuàng)建文檔和設(shè)置文檔格式的基本方法。第3章創(chuàng)建和設(shè)置文檔學(xué)習(xí)目標(biāo)掌握創(chuàng)建和保存文檔的方法。掌握打開和關(guān)閉文檔的方法。掌握添加文檔內(nèi)容的方法。掌握設(shè)置文檔格式的方法。3.1文檔基本操作創(chuàng)建文檔保存文檔3.1.1 創(chuàng)建文檔一、通過【文件】面板創(chuàng)建文檔3.1

44、.1 創(chuàng)建文檔二、通過歡迎屏幕創(chuàng)建文檔3.1.1 創(chuàng)建文檔三、通過【文件】/【新建】菜單命令創(chuàng)建文檔3.1.2 保存文檔如果對新建文檔進(jìn)行保存，可選擇【文件】菜單中的【保存】命令或【另存為】命令，打開【另存為】對話框進(jìn)行保存文檔被保存以后，如果又對其進(jìn)行了編輯，可以直接選擇【文件】/【保存】命令進(jìn)行保存如果要換個(gè)名字保存，則選擇【文件】/【另存為】命令進(jìn)行保存選擇【文件】/【保存全部】命令可同時(shí)保存已打開的所有文檔3.2 添加文檔內(nèi)容輸入文本導(dǎo)入文檔內(nèi)容復(fù)制和粘貼3.2.1 輸入文本在文檔中，可以直接輸入文本。另外，在Dreamweaver CS3中，也可以通過【插入記錄】/【HTML】/【特

45、殊字符】中的相應(yīng)命令插入特殊字符。3.2.2 導(dǎo)入文檔內(nèi)容除了直接輸入文本外，還可以通過導(dǎo)入的方法將Word文檔中的內(nèi)容導(dǎo)入到Dreamweaver CS3文檔中。選擇【文件】/【導(dǎo)入】/【W(wǎng)ord文檔】命令，打開【導(dǎo)入Word文檔】對話框。3.2.3 復(fù)制和粘貼除了直接輸入文本和導(dǎo)入文檔內(nèi)容外，也可以將其他文檔中的內(nèi)容復(fù)制粘貼到Dreamweaver文檔中。目前，Word文檔是使用最廣泛的一種，因此復(fù)制粘貼Word文檔內(nèi)容是最常見的操作。選擇【編輯】/【選擇性粘貼】命令，打開【選擇性粘貼】對話框，在【粘貼為】欄中選擇需要的選項(xiàng)。3.3 設(shè)置文檔格式設(shè)置瀏覽器標(biāo)題分段和換行設(shè)置文檔標(biāo)題格式添加

46、空格設(shè)置頁邊距設(shè)置文本的字體、大小和顏色設(shè)置文本樣式設(shè)置文本的對齊方式設(shè)置文本的縮進(jìn)和凸出應(yīng)用列表插入水平線插入日期3.3.1 設(shè)置瀏覽器標(biāo)題 在【文檔】工具欄的【標(biāo)題】文本框中輸入瀏覽器標(biāo)題 選擇【修改】/【頁面屬性】命令，或單擊【屬性】面板中的【頁面屬性】按鈕，打開【頁面屬性】對話框，然后選擇【標(biāo)題/編碼】分類，在【標(biāo)題】文本框中輸入網(wǎng)頁標(biāo)題3.3.2 分段和換行在Dreamweaver CS3文檔窗口中，每按一次Enter鍵也會另起一個(gè)段落。選擇【插入記錄】/【HTML】/【特殊字符】/【換行符】命令，或按Shift+Enter組合鍵，可以插入換行符3.3.3 設(shè)置文檔標(biāo)題格式在【屬性】

47、面板的【格式】下拉列表中選擇標(biāo)題類型在【頁面屬性】對話框的【標(biāo)題】分類中定義標(biāo)題樣式3.3.4 添加空格 在【首選參數(shù)】對話框的【常規(guī)】分類中，是否勾選【允許多個(gè)連續(xù)的空格】復(fù)選框只對按Space鍵有影響，而對【插入記錄】/【HTML】/【特殊字符】/【不換行空格】命令和在【插入】/【文本】面板中單擊 按鈕沒有影響。另外，不換行空格在源代碼中顯示為“”。3.3.5 設(shè)置頁邊距 選擇【修改】/【頁面屬性】命令，或在【屬性】面板中單擊【頁面屬性】按鈕，打開【頁面屬性】對話框。在【外觀】分類的【上邊距】、【下邊距】、 【左邊距】、【右邊距】文本框中設(shè)置即可。3.3.6 設(shè)置文本的字體、大小和顏色 一

48、、 在【頁面屬性】對話框的【外觀】分類中定義頁面文本的字體、大小和顏色。3.3.6 設(shè)置文本的字體、大小和顏色二、在【屬性】面板中定義所選文本的字體、大小和顏色。三、在【文本】菜單中選擇【字體】、【大小】和【顏色】命令進(jìn)行設(shè)置。在【頁面屬性】對話框中設(shè)置的字體、大小和顏色，將對當(dāng)前網(wǎng)頁中所有的文本都起作用，而通過【屬性】面板或【文本】菜單中的命令設(shè)置的字體、大小和顏色，只對當(dāng)前網(wǎng)頁中所選擇的文本起作用。3.3.7 設(shè)置文本樣式在【屬性】面板中設(shè)置文本粗體或斜體樣式。在【文本】/【樣式】菜單中選擇相應(yīng)的命令也可以對文本設(shè)置樣式，如下劃線、刪除線等。在【插入】工具欄中，切換到【文本】選項(xiàng)卡，將出現(xiàn)

49、【文本】工具面板，單擊相應(yīng)的按鈕也可以設(shè)置粗體或斜體樣式。3.3.8 設(shè)置文本的對齊方式 文本的對齊方式通常有4種：左對齊、居中對齊、右對齊和兩端對齊。可以通過【屬性】面板來設(shè)置，也可以通過【文本】/【對齊】菜單中的相應(yīng)命令來實(shí)現(xiàn)。如果同時(shí)設(shè)置多個(gè)段落的對齊方式，則需要先選中這些段落。3.3.9 設(shè)置文本的縮進(jìn)和凸出 在文檔排版過程中，有時(shí)會遇到需要使某段文本整體向內(nèi)縮進(jìn)或向外凸出的情況。選擇【文本】/【縮進(jìn)】（或【凸出】）命令，或者單擊【屬性】面板上的相應(yīng)按鈕，可以使段落整體向內(nèi)縮進(jìn)或向外凸出。如果同時(shí)設(shè)置多個(gè)段落的縮進(jìn)和凸出，則需要先選中這些段落。3.3.10 應(yīng)用列表 通過以下任意一種方

50、式將所選文本設(shè)置為編號列表或項(xiàng)目列表。在【屬性】面板中單擊編號列表或項(xiàng)目列表按鈕。選擇【文本】/【列表】/【編號列表】或【編號列表】命令。在【插入】工具欄中，切換到【文本】選項(xiàng)卡，在【文本】工具面板中單擊編號列表或項(xiàng)目列表按鈕。 如果對插入的列表不滿意，可以進(jìn)行修改，方法是： 選擇【文本】/【列表】/【屬性】命令，或在【屬性】面板中單擊【列表項(xiàng)目】按鈕，打開【列表屬性】對話框。3.3.11 插入水平線選擇【插入記錄】/【HTML】/【水平線】命令，插入水平線。選中水平線，在【屬性】面板中可以設(shè)置其屬性。在水平線【屬性】面板中，可以設(shè)置水平線的id名稱、寬度和高度、對齊方式、是否具有陰影效果等，

51、如果設(shè)置了CSS類樣式，還可以應(yīng)用樣式。水平線的HTML標(biāo)簽如下。水平線的HTML標(biāo)簽是“”，align表示對齊方式，其值有l(wèi)eft（左對齊）、center（居中對齊）和right（右對齊）。width表示寬度，size表示高度，id表示水平線的id名稱。3.3.12 插入日期選擇【插入記錄】/【日期】命令打開【插入日期】對話框，只有在【插入日期】對話框中勾選【儲存時(shí)自動更新】復(fù)選框，才能使單擊日期時(shí)顯示日期的【屬性】面板，否則插入的日期僅僅是一段文本而已。3.4 實(shí)例設(shè)置“國外知名電影節(jié)”文檔格式 本章將介紹有關(guān)圖像和媒體的基本知識及其在網(wǎng)頁中的應(yīng)用。 第4章使用圖像和媒體學(xué)習(xí)目標(biāo)了解常用圖

52、像的基本格式。掌握插入和設(shè)置圖像的方法。掌握插入圖像占位符的方法。掌握設(shè)置網(wǎng)頁背景的方法。掌握插入Flash動畫的方法。掌握插入圖像查看器的方法。掌握插入ActiveX視頻的方法。4.1認(rèn)識網(wǎng)頁常用圖像格式GIF圖像JPEG圖像PNG圖像4.1.1GIF圖像GIF格式（Graphics Interchange Format，圖像交換格式，文件擴(kuò)展名為.gif）是由Compuserve公司提出的與設(shè)備無關(guān)的圖像存儲標(biāo)準(zhǔn)，也是在網(wǎng)頁上使用最早、應(yīng)用最廣泛的圖像格式。該格式圖像具有文件小、下載速度快、下載時(shí)隔行顯示、支持透明色以及多個(gè)圖像能組成動畫的特點(diǎn)，是網(wǎng)頁制作中首選的格式。由于最多只支持256

53、色，因此適合對色彩要求不高的圖像，不適合于有暈光、漸變色彩等顏色細(xì)膩的圖像和照片。4.1.2JPEG圖像JPEG格式（Joint Photographic Experts Group，聯(lián)合圖像專家組文件格式，文件擴(kuò)展名為.jpg）是目前互聯(lián)網(wǎng)中最受歡迎的圖像格式。該格式可以設(shè)置圖像質(zhì)量，其圖像大小由其質(zhì)量的高低決定，質(zhì)量越高文件越大，質(zhì)量越低文件越小。在多數(shù)圖像處理軟件中（如Photoshop、Fireworks和Paintshop等）都可以設(shè)置JPEG文件的大小，使其介于最低圖像質(zhì)量和最高圖像質(zhì)量之間。因此，該格式比較適合顯示色彩較絢麗、質(zhì)量要求較高的圖像，如照片、油畫和一些細(xì)膩、講究色彩濃

54、淡的圖像。由于JPEG支持很高的壓縮率，其圖像的下載速度也非?？?。4.1.3PNG圖像PNG格式（Portable Network Graphics，便攜式網(wǎng)絡(luò)圖像，文件擴(kuò)展名為.png）是最近使用量逐漸增多的一種圖像格式。該格式圖像的優(yōu)點(diǎn)是，在壓縮方面能夠像GIF格式的圖像一樣沒有壓縮上的損失，并能像JPEG那樣呈現(xiàn)更多的顏色。而且PNG格式也提供了一種隔行顯示方案，在顯示速度上比GIF和JPEG更快一些。同時(shí)PNG格式圖像又具有JPEG格式圖像沒有的透明度支持能力。雖然PNG格式圖像還沒有普及到所有的瀏覽器，但在未來它有可能是一種非常受歡迎的圖像格式。4.2 在網(wǎng)頁中應(yīng)用圖像插入圖像設(shè)置圖

55、像屬性4.2.1 插入圖像插入圖像主要有以下幾種途徑。選擇【插入記錄】/【圖像】命令。在【插入】/【常用】工具欄中單擊（圖像）按鈕或?qū)⑵渫蟿拥轿臋n中。在【文件】面板中選中圖像并拖動到文檔中。在【資源】面板中選中圖像并單擊【插入】按鈕或直接拖動到文檔中。圖像的HTML標(biāo)簽格式是：“”其中，“”是圖像標(biāo)簽，屬性“src”表示圖像文件的路徑，“width”表示圖像的寬度，“height”表示圖像的高度。4.2.2 設(shè)置圖像屬性 選中圖像，將顯示圖像【屬性】面板。在【屬性】面板中，可以設(shè)置圖像名稱、大小、替換文本、邊距、邊框、圖文混排方式等。4.3 插入圖像占位符圖像占位符作為臨時(shí)代替圖像的符號，是在

56、網(wǎng)頁設(shè)計(jì)階段使用的重要占位工具。讀者可以隨意定義其大小，并且放置在預(yù)插入圖像的位置，用自定義的顏色來代替圖像。在有了合適的圖像后，可以通過圖像占位符【屬性】面板的【源文件】文本框設(shè)置實(shí)際需要的圖像文件，設(shè)置完畢后圖像占位符將自動變成圖像。插入圖像占位符的方法是，選擇【插入記錄】/【圖像對象】/【圖像占位符】命令，或在【插入】/【常用】面板的【圖像】下拉按鈕組單擊（圖像占位符） 按鈕，打開【圖像占位符】對話框進(jìn)行設(shè)置即可。4.4 設(shè)置網(wǎng)頁背景設(shè)置背景顏色設(shè)置背景圖像4.4.1 設(shè)置背景顏色 選擇【修改】/【頁面屬性】命令，打開【頁面屬性】對話框，在【外觀】分類中設(shè)置背景顏色4.4.2 設(shè)置背景圖

57、像打開【頁面屬性】對話框，在【外觀】分類中設(shè)置背景圖像和重復(fù)方式。4.5在網(wǎng)頁中插入媒體插入Flash動畫插入圖像查看器 插入ActiveX 4.5.1插入Flash動畫在Dreamweaver CS3中插入Flash動畫的方法通常有以下3種。選擇【插入記錄】/【媒體】/【Flash】命令在【插入】/【常用】工具欄中單擊 （媒體）按鈕，在彈出的下拉按鈕組中單擊 （Flash ）按鈕在【文件】/【文件】面板中選中文件，然后拖動到文檔中4.5.2插入圖像查看器插入圖像查看器的方法是： 選擇【插入記錄】/【媒體】/【圖像查看器】命令，插入Flash占位符。在文檔中右鍵單擊Flash占位符，在彈出的快

58、捷菜單中選擇【編輯標(biāo)簽】命令打開【標(biāo)簽編輯器object】對話框，切換至【替代內(nèi)容】分類，在文本框內(nèi)找到默認(rèn)的圖像文件路徑名修改為現(xiàn)有圖像的文件路徑名。4.5.3插入ActiveX插入ActiveX來播放WMV視頻格式文件的方法：選擇【插入記錄】/【媒體】/【ActiveX】命令在文檔中插入一個(gè)ActiveX占位符。在【屬性】面板的【ClassID】下拉列表框中添加“CLSID:22D6f312-b0f6-11d0-94ab-0080c74c7e95”。在【屬性】面板中勾選【嵌入】復(fù)選框，然后單擊【參數(shù)】按鈕，打開【參數(shù)】對話框添加參數(shù)。4.5.3插入ActiveX插入ActiveX來播放RM

59、視頻格式文件的方法：選擇【插入記錄】/【媒體】/【ActiveX】命令在文檔中插入一個(gè)ActiveX占位符。在【屬性】面板的【ClassID】下拉列表框中添加“RealPlayer/clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA”。在【屬性】面板中勾選【嵌入】復(fù)選框，然后單擊【參數(shù)】按鈕，打開【參數(shù)】對話框添加參數(shù)。最后設(shè)置【寬】和【高】為固定尺寸。4.6實(shí)例設(shè)置“西湖十景”網(wǎng)頁通過前面各節(jié)的學(xué)習(xí)，讀者對網(wǎng)頁中常用的圖像格式以及插入圖像、設(shè)置圖像屬性、插入圖像占位符、設(shè)置網(wǎng)頁背景、插入Flash動畫、圖像查看器、ActiveX控件的基本方法都有了一定的了解

60、。本節(jié)將綜合運(yùn)用前面所介紹的知識來設(shè)置文檔中的圖像和媒體，讓讀者進(jìn)一步鞏固所學(xué)內(nèi)容。 本章將介紹在Dreamweaver CS3中創(chuàng)建和設(shè)置超級鏈接的基本方法。第5章創(chuàng)建和設(shè)置超級鏈接學(xué)習(xí)目標(biāo)了解超級鏈接的種類。掌握設(shè)置文本和圖像超級鏈接的方法。掌握設(shè)置圖像熱點(diǎn)超級鏈接的方法。掌握設(shè)置電子郵件超級鏈接的方法。掌握設(shè)置錨記超級鏈接和空鏈接的方法。掌握設(shè)置鼠標(biāo)經(jīng)過圖像和導(dǎo)航條的方法。掌握設(shè)置Flash文本和Flash按鈕的方法。5.1認(rèn)識超級鏈接URL路徑鏈接目標(biāo) 超級鏈接的分類5.1.1 URLURL的地址格式為“scheme:/host:port/path/file”。scheme：Inter