多媒體制作技術(shù)及應(yīng)用-網(wǎng)站設(shè)計相關(guān)知識

1、第九章 網(wǎng)站設(shè)計9.1 網(wǎng)站設(shè)計基本知識9.1.1 網(wǎng)站設(shè)計 網(wǎng)頁是WWW的基本文檔，它是用HTML（Hypertext Markup Laguage即超文本標識語言）編寫的。HTML是一種編程語言，是一些能讓瀏覽器解釋的標簽（tag），當(dāng)網(wǎng)頁中包含正常文本和HTML語言標簽時，瀏覽器會“翻譯”由這些HTML語言標簽提供的網(wǎng)頁結(jié)構(gòu)、外觀和內(nèi)容的信息，從而將網(wǎng)頁按設(shè)計者的要求顯示出來。網(wǎng)頁的出色之處在于能夠把超鏈接（Hyperlink）嵌入網(wǎng)頁中，這使用戶能夠從一個網(wǎng)頁站點方便地轉(zhuǎn)移到另一個相關(guān)的網(wǎng)頁站點。它可以指向其他網(wǎng)頁、文檔、多媒體文件、圖像甚至程序。進入網(wǎng)站首先看到的那一頁稱首頁或主頁（

2、HomePage）。 9.1 網(wǎng)站設(shè)計基本知識9.1.1 網(wǎng)站設(shè)計 WEB網(wǎng)站是由Home Page和相關(guān)網(wǎng)頁構(gòu)成的超文本信息的集合，網(wǎng)頁按一定的組織結(jié)構(gòu)和順序組合起來，使瀏覽者在訪問該網(wǎng)站時能連接到各個網(wǎng)頁來觀看網(wǎng)頁內(nèi)容。用戶可以使用瀏覽器（如微軟的Internet Explorer）瀏覽這些頁面的內(nèi)容。 網(wǎng)站設(shè)計，就是用HTML把多種媒體信息有效地組織起來，使瀏覽者高效、便捷地獲取這些信息。 網(wǎng)站設(shè)計包含的內(nèi)容大體分兩個方面：一方面是信息的處理和組織，另一方面是網(wǎng)站的延伸設(shè)計。9.1 網(wǎng)站設(shè)計基本知識9.1.2 網(wǎng)頁文件的規(guī)劃與創(chuàng)意 一個網(wǎng)站的成功與否，很重要的一個因素在于它的構(gòu)思、內(nèi)容的

3、組織、好的創(chuàng)意及豐富詳實的內(nèi)容。 基本設(shè)計思路： 1網(wǎng)站的目標與定位 2網(wǎng)頁的組織結(jié)構(gòu) 3資料的收集與整理 4 選擇網(wǎng)頁的設(shè)計方法 5網(wǎng)站的整體風(fēng)格創(chuàng)意設(shè)計9.1 網(wǎng)站設(shè)計基本知識9.1.3 網(wǎng)頁制作軟件 構(gòu)成WEB網(wǎng)站頁面的HTML文件是標準的ASCII文件，看起來像是加入了許多被稱為標簽（tag）的特殊字符串的普通文本文件，我們可以用普通的文本編輯器制作和編輯。但使用文本編輯器制做網(wǎng)頁非常繁瑣而且不易布局和定位。目前有很多專門的網(wǎng)頁制作工具軟件，各有特色。9.1 網(wǎng)站設(shè)計基本知識9.1.3 網(wǎng)頁制作軟件 1DreamWeaver DreamWeaver是一個功能強大的專業(yè)網(wǎng)頁設(shè)計軟件，包括

4、可視化編輯、HTML代碼編輯的軟件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等，還能通過拖拽從頭到尾制作動態(tài)的HTML動畫，支持動態(tài)HTML（Dynamic HTML）的設(shè)計。同時它還提供了自動更新頁面信息的功能。 DreamWeaver采用了Roundtrip HTML技術(shù)。這項技術(shù)使得網(wǎng)頁在DreamWeaver和HTML代碼編輯器之間進行自由轉(zhuǎn)換，HTML句法及結(jié)構(gòu)不變。這樣，專業(yè)設(shè)計者可以在不改變原有編輯習(xí)慣的同時，充分享受到可視化編輯帶來的益處。DreamWeaver具挑戰(zhàn)性和生命力的是它的開放式設(shè)計，這項設(shè)計使任何人都可以輕易擴展它的功

5、能。9.1 網(wǎng)站設(shè)計基本知識9.1.3 網(wǎng)頁制作軟件 2Microsoft FrontPage 如果對Word很熟悉，那么用FrontPage 進行網(wǎng)頁設(shè)計一定會非常順手。 FrontPage功能強大，簡單易用。頁面制作由Frontpage中的Editor完成，其工作窗口由3個標簽頁組成，分別是“所見即所得”的編輯頁，HTML代碼編輯頁，預(yù)覽頁。Frontpage帶有圖形和GIF動畫編輯器，支持CGI和CSS。向?qū)Ш湍０宥寄苁钩鯇W(xué)者在編輯網(wǎng)頁時感到更加方便。站點管理功能強大，在更新服務(wù)器上的站點時，不需要創(chuàng)建更改文件的目錄，F(xiàn)rontPage會跟蹤文件并拷貝那些新版本文件。9.1 網(wǎng)站設(shè)計基本

6、知識9.1.3 網(wǎng)頁制作軟件 3Netscape編輯器 Netscape Communicator和Netscape Navigator Gold版本的瀏覽器都帶有網(wǎng)頁編輯器。 當(dāng)用Netscape瀏覽器顯示網(wǎng)頁時，單擊編輯按鈕，Netscape就會把網(wǎng)頁存儲在硬盤中，然后就可以開始編輯?？梢韵袷褂肳ord那樣編輯文字、字體、顏色，改變主頁作者、標題、背景顏色或圖像，定義錨點，插入鏈接，定義文檔編碼，插入圖像，創(chuàng)建表格等。Netscape編輯器是網(wǎng)頁制作初學(xué)者很好的入門工具。如果網(wǎng)頁主要是由文本和圖片組成的，Netscape 編輯器將是一個輕松的選擇。9.1 網(wǎng)站設(shè)計基本知識9.1.3 網(wǎng)頁制

7、作軟件 4Adobe Pagemill Pagemill功能不算強大，但使用起來很方便，適合初學(xué)者制作較為美觀、而不是非常復(fù)雜的主頁。能夠很方便地編輯需要很多框架、表單和Image Map圖像的網(wǎng)頁。 Pagemill創(chuàng)建多框架頁十分方便，可以同時編輯各個框架中的內(nèi)容。Pagemill在服務(wù)器端或客戶端都可創(chuàng)建與處理Image Map圖像，也支持表單創(chuàng)建。Pagemill允許在HTML代碼上編寫和修改，支持大部分常見的HTML擴展，還提供拼寫檢錯、搜索替換等文檔處理工具。在Pagemill 3.0增加了站點管理能力，但仍不支持CSS、TrueDoc和動態(tài)HTML等高級特性。 Pagemill另

8、一大特色是有一個剪貼板，可以將任意多的文本、圖形、表格拖放到里面，需要時再打開，很方便。9.1 網(wǎng)站設(shè)計基本知識9.1.3 網(wǎng)頁制作軟件 5Claris Home Page 如果使用Claris Home Page軟件，可以在幾分鐘之內(nèi)創(chuàng)建一個動態(tài)網(wǎng)頁。它有一個很好的創(chuàng)建和編輯Frame（框架）的工具，不必花費太多的力氣就可以增加新的Frame（框架）。而且Claris Home Page 3.0集成了FileMaker數(shù)據(jù)庫，增強的站點管理特性還允許檢測頁面的合法連接。9.1 網(wǎng)站設(shè)計基本知識9.1.3 網(wǎng)頁制作軟件 6HotDog Professional HotDog是較早基于代碼的網(wǎng)頁

9、設(shè)計工具，其最具特色的是提供了許多向?qū)Чぞ撸軒椭O(shè)計者制作頁面中的復(fù)雜部分。HotDog對plugin的支持也遠遠超過其他產(chǎn)品，它提供的對話框允許以手動方式為不同格式的文件選擇不同的選項。 HotDog是個功能強大的軟件，對于那些希望在網(wǎng)頁中加入CSS、Java、RealVideo等復(fù)雜技術(shù)的高級設(shè)計者，是個很好的選擇。9.1 網(wǎng)站設(shè)計基本知識9.1.3 網(wǎng)頁制作軟件 7HomeSite Allaire的HomeSite是一個小巧而全能的HTML代碼編輯器，有豐富的幫助功能，支持CGI和CSS等等，并且可以直接編輯Perl程序。 HomeSite工作界面繁簡由人，根據(jù)習(xí)慣，可以將其設(shè)置成像N

10、otepad那樣簡單的編輯窗口，也可以在復(fù)雜的界面下工作。 HomeSite具有良好的站點管理功能，鏈接確認向?qū)Э梢詸z查一個或多個文檔的鏈接狀況。HomeSite適合那些比較復(fù)雜和精彩頁面的設(shè)計。9.1 網(wǎng)站設(shè)計基本知識9.1.3 網(wǎng)頁制作軟件 8HotMetal Pro HotMetal既提供“所見即所得”圖形制作方式，又提供代碼編輯方式，是個令各層次設(shè)計者都不至于失望的軟件。但是初學(xué)者需要熟知HTML，才能得心應(yīng)手地使用這個軟件。 HotMetal具有強大的數(shù)據(jù)嵌入能力，利用它的數(shù)據(jù)插入向?qū)В梢园淹獠康腁ccess、Word、Excel以及其他ODBC數(shù)據(jù)，放入頁面中，而且能夠把它們自動

11、轉(zhuǎn)換為HTML格式，此外它還能轉(zhuǎn)換很多老格式的文檔（如WordStar等），并能在轉(zhuǎn)換過程中把這些文檔里的圖片自動轉(zhuǎn)換為GIF格式。HotMetal為用戶提供了很多工具，還可以用網(wǎng)狀圖或樹狀圖表現(xiàn)整個站點文檔的鏈接狀況。9.1 網(wǎng)站設(shè)計基本知識9.1.4 HTML語言 HTML語言是網(wǎng)頁制作的基礎(chǔ)。雖然現(xiàn)在有許多所見即所得的網(wǎng)頁制作工具，但還是有必要了解一些HTML的語法。這樣，可以更精確的控制頁面的排版，可以實現(xiàn)更多的功能。HTML不是程序語言，它只是標識語言，格式非常簡單，只是由文字及標簽組合而成，可直接使用普通的文本編輯器進行編輯。9.1 網(wǎng)站設(shè)計基本知識9.1.4 HTML語言 1標簽

12、（tag）寫法 標簽又稱標識或標記，在HTML中，用來界定各種單元，如標題、段落、列表等。HTML單元由三部分組成：起始標簽、單元內(nèi)容、結(jié)束標簽。起始標簽由“”來界定，結(jié)束標簽由“”來界定，單元名稱和屬性由起始標簽給出。 超文本標簽用尖括號“”表示 標簽名與“”不能留有空白字符。 有些標簽要加上參數(shù)（或稱屬性）。 超文本標簽一般是成對出現(xiàn)，用帶斜杠的元素表示結(jié)束，有些標簽只有起始標簽而沒有結(jié)束標簽，還有些標簽可以省略。參數(shù)只可加于起始標簽中。 標簽字母大小寫皆可。 一個標簽元素可寫在多行，參數(shù)位置不受限制。9.1 網(wǎng)站設(shè)計基本知識9.1.4 HTML語言 2HTML 語言的結(jié)構(gòu) 一個HTML文

13、件應(yīng)具有下面的結(jié)構(gòu)：HTML文件開始 文件頭開始.文件頭結(jié)束文件體開始. 文件體結(jié)束 HTML文件結(jié)束 9.1 網(wǎng)站設(shè)計基本知識9.1.4 HTML語言 3基本標簽的使用（1）HTML標簽這個標簽告訴瀏覽器在 之間的文件是用HTML編寫的文檔。（2）文檔頭標簽 之間包含的是HTML文檔名稱。（3）文檔名稱標簽 之間包含的是具體的HTML文檔名稱，字符數(shù)通常不超過64。（4）正文標簽 之間是正文部分，這是HTML文檔最多的部分，它包含的是顯示在瀏覽器文本窗口中的文檔內(nèi)容。9.1 網(wǎng)站設(shè)計基本知識9.1.4 HTML語言 3基本標簽的使用（5）標題（Heading）標簽HTML定義了6個等級的標題

14、標簽，其中n1，2，6。 之間包含的是第n級標題。（6）段落（Paragraph）標簽 之間包含的是一段文本。HTML中沒有使用硬換行（carriage return）來分段落，也不承認多個連續(xù)的空格，這是與字處理軟件不同的。在HTML文檔中，和之間不論有多少行，不論每一行有多長或者多短，也不論其間有多少個空格，瀏覽器都把它作為一個段落來處理。9.1 網(wǎng)站設(shè)計基本知識9.1.4 HTML語言 3基本標簽的使用（7）列表標簽、和HTML支持無編號列表和有編號列表，而且還可以在列表中嵌套列表。 表示標簽之間的列表項目是無編號列表（Unnumbered List）。 表示標簽之間的列表項目是有編號列

15、表（Ordered List）。 表示標簽后面的內(nèi)容是具體的列表項目（List Item）。（8）定義列表標簽、和定義列表有三個標簽。表示定義列表（Definition Lists） 表示后面的項是定義術(shù)語（Definition Term） 表示后面的項是定義釋義（Definition Definition）9.1 網(wǎng)站設(shè)計基本知識9.1.4 HTML語言 3基本標簽的使用（9）預(yù)格式文本（Preformatted Text）標簽用于產(chǎn)生固定寬度的字符。在 之間的空格、新行、空行和表格與HTML源文檔中的一致。（10）擴展引用（Extended Quotations）標簽 用來包含一個比較長的

16、引用語。（11）強制換行標簽使用標簽可強制文本換行，但不在行與行之間增加空白。9.1 網(wǎng)站設(shè)計基本知識9.1.4 HTML語言 3基本標簽的使用（12）表單標簽用來收集用戶的信息，它可以包含讓用戶輸入文本和選擇項目的接口構(gòu)件，例如文本域、按鈕、復(fù)選框（checkboxe），單選按鈕（radio button）和選擇列表。使用標簽時需要注意：在表單中的每個接口構(gòu)件必須和輸入標簽（）或者選擇標簽（）一起定義；單中的所有構(gòu)件必須在之間定義。9.1 網(wǎng)站設(shè)計基本知識9.1.4 HTML語言 3基本標簽的使用（13）橫線（Horizontal Rule）標簽生成一條用于分割文檔的水平線，其長度與瀏覽器窗

17、口等寬，粗細和長短都可設(shè)置。（14）嵌入圖像標簽如或，image-url是圖像文件的URL。目前，大部分瀏覽器支持 .GIF 和 .JPEG文件。alt屬性告訴不支持圖圖像的瀏覽器用Text代替該圖。9.1 網(wǎng)站設(shè)計基本知識9.1.4 HTML語言 3基本標簽的使用（15）表格標簽表格的基本形式：一個表由開始，結(jié)束，表的內(nèi)容由,和定義。說明表的一個行，表有多少行就有多少個；說明表的列數(shù)和相應(yīng)欄目的名稱，有多少個欄就有多少個；則填充由和組成的表格。是否用表格線分開為部分內(nèi)容用border屬性說明。9.1 網(wǎng)站設(shè)計基本知識9.1.4 HTML語言 4常用HTML標簽 （1）基本標簽 （2）標題標簽

18、 （3）文檔整體屬性 （4）文本標簽 （5）鏈接 （6）格式排版 （7）圖形元素 （8）表格 （9）表格屬性 （10）框架 （11）框架屬性 （12）表單9.1 網(wǎng)站設(shè)計基本知識9.1.5 Dreamweaver介紹 1Dreamweaver簡介 Dreamweaver是當(dāng)前最流行的網(wǎng)頁設(shè)計軟件。它與同為Macromedia公司出品的Fireworks和Flash一道，被譽為網(wǎng)頁制作三劍客。 Macromedia Dreamweaver MX 是一款專業(yè)的HTML 編輯器，用于對Web 站點、Web 頁和Web 應(yīng)用程序進行設(shè)計、編碼和開發(fā)。無論愿意享受手工編寫HTML代碼時的駕馭感還是偏愛在

19、可視化編輯環(huán)境中工作，Dreamweaver 都會提供有用的工具。9.1 網(wǎng)站設(shè)計基本知識9.1.5 Dreamweaver介紹 1Dreamweaver簡介 利用Dreamweaver 中的可視化編輯功能，可以快速地創(chuàng)建頁面而無須編寫任何代碼?？梢圆榭此姓军c元素或資源并將它們從易于使用的面板直接拖到文檔中。可以在Macromedia Fireworks 或其他圖形應(yīng)用程序中創(chuàng)建和編輯圖像，然后將它們直接導(dǎo)入Dreamweaver，或者添加Macromedia Flash 對象，從而優(yōu)化開發(fā)工作流程。9.1 網(wǎng)站設(shè)計基本知識9.1.5 Dreamweaver介紹 2Dreamweaver M

20、X操作界面插入面板文檔工具箱網(wǎng)頁設(shè)計區(qū)屬性區(qū)面板組9.1 網(wǎng)站設(shè)計基本知識9.1.5 Dreamweaver介紹 2Dreamweaver MX操作界面Dreamweaver MX操作界面主要的構(gòu)成元素： 菜單區(qū) 和其他的軟件一樣，該軟件所有的操作命令都可以從這一個區(qū)內(nèi)找到，例如，選中菜單“編輯”中的“首選參數(shù)”， 或按快捷鍵CTRL+U，可以把自己的Dreamweaver MX設(shè)置為“設(shè)計者”或“代碼編寫者” 工作區(qū)布局風(fēng)格。 9.1 網(wǎng)站設(shè)計基本知識9.1.5 Dreamweaver介紹 2Dreamweaver MX操作界面Dreamweaver MX操作界面主要的構(gòu)成元素： 插入項目選

21、擇工具 插入項目選擇工具又稱“對象面板”或“插入面板”，在插入面板選中了某個圖標，可在頁面中的插入相應(yīng)項目。點擊向下按鈕在下拉菜單中可選擇各類項目圖標，若選擇“顯示為制表符”，本面板顯示為另一種形式。9.1 網(wǎng)站設(shè)計基本知識9.1.5 Dreamweaver介紹 2Dreamweaver MX操作界面Dreamweaver MX操作界面主要的構(gòu)成元素： 文檔工具欄 文檔工具欄可將網(wǎng)頁設(shè)計區(qū)快速切換為“代碼視圖”、“設(shè)計視圖”、“拆分視圖”。工具欄中還包含一些與查看文檔、在本地和遠程站點間傳輸文檔有關(guān)的常用命令和選項。 網(wǎng)頁設(shè)計區(qū) 你所設(shè)計的網(wǎng)頁或代碼將出現(xiàn)在該區(qū)。 屬性區(qū) 屬性區(qū)也成為屬性面板

22、，在該區(qū)可以對選中的對象進行一些設(shè)置，選擇不同的網(wǎng)頁元素，屬性面板所顯示的內(nèi)容也有所不同。 9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁9.2.1了解用Dreamweaver MX 2004制作網(wǎng)頁 1.設(shè)計簡單的主頁 通過一個實例頁面的制作過程，我們可以熟悉新建文檔、插入內(nèi)容、設(shè)置頁面屬性、保存、預(yù)覽等基本功能。 首先，在硬盤上建立一個文件夾，再在其中建立一個命名為images的子文件夾，另準備兩幅要置入網(wǎng)頁中的圖像文件，復(fù)制到images子文件夾。本例中的兩幅圖分別為Logo1_1.jpg和Welcome.gif，圖像大小分別為35680象素和600300象素。9.2 用D

23、reamweaver MX 2004設(shè)計站點網(wǎng)頁9.2.1了解用Dreamweaver MX 2004制作網(wǎng)頁 1.設(shè)計簡單的主頁 （1）啟動Dreamweaver MX 2004，選擇“文件”“新建”命令，新建一個文檔。出現(xiàn)新建文檔對話框。 選擇基本頁的HTML并單擊“創(chuàng)建”按鈕，創(chuàng)建一個默認的空白頁。9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁9.2.1了解用Dreamweaver MX 2004制作網(wǎng)頁 1.設(shè)計簡單的主頁 （2）選擇“文件”“另存為”命令，將文件路徑指定為前面建立的文件夾，給文件起一個名字index.htm。 在進行具體制作之前，我們點擊文檔工具欄的代碼

24、按鈕或拆分按鈕，可以看到Dreamweaver為這個空文件生成的HTML代碼。9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁9.2.1了解用Dreamweaver MX 2004制作網(wǎng)頁 1.設(shè)計簡單的主頁 （5）點擊屬性面板下面的“頁面屬性”按鈕或選擇“修改”“頁面屬性”命令，打開“頁面屬性”對話框。在頁面屬性對話框中將背景顏色設(shè)置為f9b779，頁面字體保持默認字體，大小設(shè)為12像素，左邊距、右邊距、上邊距和下邊距均設(shè)為0。 9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁9.2.1了解用Dreamweaver MX 2004制作網(wǎng)頁 1.設(shè)計簡單的主頁 （6）在

25、“插入對象面板”的常用類中單擊圖像圖標，在“選擇圖像源文件”對話框中選擇images文件夾中的Logo1_1.jpg。插入圖像后鼠標點擊圖像右側(cè)使光標移到圖像右邊，多次按回車將光標定位在合適位置，用同樣方法將圖像Welcome.gif插入到頁面。 （7）在編輯過程中可以隨時在瀏覽器中預(yù)覽以確定效果，按鍵盤上F12鍵或點擊Dreamweaver中文檔工具欄中預(yù)覽按鈕之后選“預(yù)覽在iexplore”，可以在瀏覽器中察看我們制作的網(wǎng)頁結(jié)果。9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁9.2.1了解用Dreamweaver MX 2004制作網(wǎng)頁 1.設(shè)計簡單的主頁 9.2 用Drea

26、mweaver MX 2004設(shè)計站點網(wǎng)頁9.2.1了解用Dreamweaver MX 2004制作網(wǎng)頁 1.設(shè)計簡單的主頁 （8）回到Dreamweave，點擊選中下面一幅圖像Welcome.gif，在下面的“屬性面板”中可以調(diào)整其在HTML文檔中的屬性。9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁9.2.1了解用Dreamweaver MX 2004制作網(wǎng)頁 1.設(shè)計簡單的主頁 （9）點擊右面的居中對齊按鈕使得圖像在顯示時處于頁面中央，設(shè)置“邊框”值為0。 （10）在設(shè)計窗口點擊圖像右邊區(qū)域并按回車使光標移到圖像下方，輸入文字“歡迎！點擊進入.”。拖動鼠標選中剛才輸入的文字

27、，在“屬性面板”中改為居中對齊。 （11）為建立鏈接，新建一個HTML文檔取名為Homepage.htm，保存并關(guān)閉該文檔。 （12）回到index.htm，點擊選中圖像Welcome.gif，在屬性面板中點擊“鏈接編輯框”后面的瀏覽文件圖標，在彈出的“選擇文件對話框”中選擇Homepage.htm。9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁9.2.1了解用Dreamweaver MX 2004制作網(wǎng)頁 1.設(shè)計簡單的主頁 （13）拖動鼠標選擇文字“歡迎！點擊進入.”，以同樣方法建立鏈接到Homepage.htm。在瀏覽器中察看網(wǎng)頁的實際效果，點擊網(wǎng)頁中下方的圖像或文字，可以

28、鏈接到另一頁。9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁9.2.1了解用Dreamweaver MX 2004制作網(wǎng)頁 1.設(shè)計簡單的主頁 （14）回到Dreamweave，保存剛才設(shè)計的網(wǎng)頁。 至此完成本頁面的制作，點擊代碼按鈕可以看到Dreamweaver生成的HTML代碼 。9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.1了解用Dreamweaver MX 2004制作網(wǎng)頁 1.設(shè)計簡單的主頁 為了不影響網(wǎng)頁的下載速度，圖像要用得少而精，使用圖像處理軟件在不失真的情況下盡量壓縮。 瀏覽器能識別的圖像有jpg（jpeg）、gif、png和bmp等，

29、Dreamweaver能較好支持的有jpg、gif和png。 目前網(wǎng)上用的最多的是jpg和gif，因為這兩種格式文件體積較小。Gif格式的圖像用工具處理后能去掉本身的背景，而很好地和頁面融合，還能做成動畫。 在Dreamweaver中選中網(wǎng)頁中的圖像后，可使用“屬性面板”調(diào)整其在網(wǎng)頁中的屬性。9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.1了解用Dreamweaver MX 2004制作網(wǎng)頁 2站點管理 用Dreamweaver制作網(wǎng)頁，為了以后的方便，最好首先定義一個本地站點。其實，使用網(wǎng)頁編輯器比起直接手寫代碼最大的優(yōu)勢就在于站點管理。用Dreamweaver，可以

30、很方便的對站點內(nèi)文件進行改名或刪除操作，其站點管理能自動修改其他頁面指向這個文件的鏈接。使用Dreamweaver的模版和庫，可讓站點內(nèi)的部分頁面共用相同的部分，還可方便的統(tǒng)一更新。Dreamweaver還自帶FTP功能，可進行遠程管理。9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.1了解用Dreamweaver MX 2004制作網(wǎng)頁 2站點管理 （1）要新建一個本地站點，需點擊Dreamweaver菜單欄的“站點”“管理站點”命令，彈出“管理站點”對話框。9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.1了解用Dreamweaver MX 20

31、04制作網(wǎng)頁 2站點管理 （2）單擊“新建”按鈕，彈出“站點定義”對話框，在基本頁填入你給這個站點的命名。在對話框“高級”頁“本地根文件夾”設(shè)置這個站點在本地所在的文件夾，用以模擬本地站點的根目錄。9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.1了解用Dreamweaver MX 2004制作網(wǎng)頁 2站點管理 （3）選中“自動刷新本地文件列表”前的選框，則將來當(dāng)有新的文件復(fù)制到本地文件夾時，Dreamweaver將對這個本地站點的目錄列表自動更新。 （4）在HTTP地址后可以填入這個站點的網(wǎng)址。 （5）選中“啟用緩存”復(fù)選框，則Dreamweaver會給這個本地站點設(shè)置

32、一個緩存，以提高站點管理的速度。 （6）設(shè)置完畢后，點擊“確定”按鈕，完成本地站點設(shè)置。 9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.1了解用Dreamweaver MX 2004制作網(wǎng)頁 2站點管理 準備三幅圖把它們存入images文件夾。 Logobar.jpg 圖像大小為76080像素；Menubar.jpg 76020像素9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.1了解用Dreamweaver MX 2004制作網(wǎng)頁 2站點管理 Left1_03.gif 152363 像素9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁

33、 9.2.1了解用Dreamweaver MX 2004制作網(wǎng)頁 2站點管理 在“文件面板”文件列表上的上一節(jié)建立的空文件Homepage.htm上點右鍵，選“打開”，打開Homepage.htm文檔，也可在文件列表雙擊打開該文件，“文件面板”文件列表上展開images文件夾，拖動圖像Logobar.jpg到設(shè)計視圖，把光標移到圖像右側(cè)再按鍵盤上“Shift”+“回車”鍵，把Menubar.jpg拖過來，再把光標移到右側(cè)按鍵盤上“Shift”+“回車”鍵，用同樣方法拖入圖像Left1_03.gif，設(shè)置文檔的標題為“風(fēng)箏網(wǎng)站”，保存該網(wǎng)頁。 9.2 用Dreamweaver MX 2004設(shè)計

34、站點網(wǎng)頁 9.2.1了解用Dreamweaver MX 2004制作網(wǎng)頁 2站點管理 按F12鍵在瀏覽器中預(yù)覽結(jié)果 9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.2 文本編輯 Macromedia Dreamweaver MX 2004 提供了多種向文檔中添加文本和設(shè)置文本格式的方法。可以插入文本、設(shè)置字體類型、大小、顏色和對齊屬性，以及使用層疊樣式表（CSS） 樣式創(chuàng)建和應(yīng)用自己的自定義樣式。 Dreamweaver允許通過以下方式在Web 頁中添加文本：直接將文本鍵入頁中，從其他文檔復(fù)制和粘貼文本，或從其他應(yīng)用程序拖放文本。Web 專業(yè)人員接受的、包含能夠合并到We

35、b 頁的文本內(nèi)容的常見文檔類型有ASCII 文本文件、RTF 文件和MS Office 文檔。Dreamweaver可以從這些文檔類型中的任何一種取出文本，然后將文本并入Web 頁中。9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.2 文本編輯 （1）打開前面建好的網(wǎng)頁Homepage.htm。選中圖像Left1_03.gif，在“屬性面板”對齊下拉菜單 中選左對齊，光標在Left1_03.gif右側(cè)，輸入一段文字 。 （2）使用“屬性面板”或“文本”菜單中的選項可以設(shè)置或更改所選文本的字體特性?？梢栽O(shè)置字體類型、樣式（如粗體或斜體）和大小。 （3）選中要編輯的文字，利用

36、“屬性面版”進行文本屬性編輯。 （4）保存設(shè)計的網(wǎng)頁。9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.3 頁面布局 1使用表格控制頁面布局 頁面元素的布局和定位并不能隨心所欲排版，借助表格，可實現(xiàn)所設(shè)想的任何排版效果。也可靈活使用表格的背景、框線等作出較美觀的效果。 表格是用于在HTML 頁上顯示表格式數(shù)據(jù)以及對文本和圖形進行布局的強有力的工具。表格由一行或多行組成；每行又由一個或多個單元格組成。雖然HTML 代碼中通常不明確指定列，但Dreamweaver 允許操作列、行和單元格。9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.3 頁面布局 1使用

37、表格控制頁面布局 （1）打開網(wǎng)頁文檔Homepage.htm，拖動鼠標選中頁面中所有圖像和文字，按Delete鍵刪除。在“頁面屬性”中設(shè)置頁面背景色為#7799ca，頁面字體大小為12像素。在“文檔工具欄”中輸入頁面標題為“風(fēng)箏文化”。在“插入面版”的“通用”組中點擊表格圖標，彈出“表格”對話框 。9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.3 頁面布局 1使用表格控制頁面布局 （2）設(shè)置“行數(shù)”：2，“列數(shù)”：1，“表格寬度”：760像素，“邊框?qū)挾取保?像素，“單元格邊距”：5，“單元格間距”：5，確定。 （3）點擊表格第一行單元格定位光標，插入圖像Logobar

38、.jpg。 （4）在第二行單元格中插入圖像Menubar.jpg。 （5）點擊表格內(nèi)上方區(qū)域，在工作區(qū)下方選擇要選定的內(nèi)容，點擊選定整個表格，在“屬性面板”中調(diào)整表格屬性。9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.3 頁面布局 2表格的嵌套 （1）在Dreamweaver中，選定整個表格，選擇“編輯”“剪貼”命令，在“插入面版”的“通用”組中點擊表格圖標，再次建立表格，設(shè)置“行數(shù)”：2，“列數(shù)”：1，“表格寬度”：760像素，“邊框?qū)挾取保?像素，“單元格邊距”：0，“單元格間距”：0。 （2）點擊表格第一行標單元格定位光標，選擇“編輯” “復(fù)制”命令。這個單元格內(nèi)

39、又套入了一個表格。 （3）點擊外層表格中下方的單元格，再插入一個表格，參數(shù)設(shè)置為“行數(shù)”：1，“列數(shù)”：2，“表格寬度”：760像素，“邊框?qū)挾取保?像素，“單元格邊距”：0，“單元格間距”：0。9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.3 頁面布局 2表格的嵌套 （4）點擊，選中最外層表格。在“屬性面板”的設(shè)為白色或直接輸入#FFFFFF。 （5）用鼠標點擊內(nèi)嵌的下面一個表格左側(cè)單元格，光標定位在這個單元格內(nèi)，點擊，選中內(nèi)層表格第一行的第一個單元格，在“屬性面板”中設(shè)定高度為152。設(shè)置第二個單元格的對齊方式為“頂端”。 （6）在內(nèi)嵌的下面一個表格的第一列插入圖像

40、Left1_03.gif，第二列中輸入文本內(nèi)容并調(diào)整文本格式和屬性。 9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.3 頁面布局 2表格的嵌套 （4）點擊，選中最外層表格。在“屬性面板”的設(shè)為白色或直接輸入#FFFFFF。 （5）用鼠標點擊內(nèi)嵌的下面一個表格左側(cè)單元格，光標定位在這個單元格內(nèi)，點擊，選中內(nèi)層表格第一行的第一個單元格，在“屬性面板”中設(shè)定高度為152。設(shè)置第二個單元格的對齊方式為“頂端”。 （6）在內(nèi)嵌的下面一個表格的第一列插入圖像Left1_03.gif，第二列中輸入文本內(nèi)容并調(diào)整文本格式和屬性。 （7）保存設(shè)計的網(wǎng)頁Homepage.htm。9.2 用

41、Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.3 頁面布局 3合并或拆分表格單元 只要整個選擇部分的單元格形成一行或一個矩形，便可以合并任意數(shù)目的相鄰的單元格，以生成一個跨多個列或行的單元格。可以將單元格拆分成任意數(shù)目的行或列，而不管之前它是否是合并的。Dreamweaver 可以自動重新構(gòu)造表格以創(chuàng)建指定的排列方式。9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.3 頁面布局 4導(dǎo)入導(dǎo)出 可以將在另一個應(yīng)用程序（例如Microsoft Excel）中創(chuàng)建并以分隔文本的格式（其中的項以制表符、逗號、冒號、分號或其他分隔符隔開）保存的表格式數(shù)據(jù)導(dǎo)入到Dream

42、weaver 中并設(shè)置為表格的格式。也可以將表格數(shù)據(jù)從Dreamweaver 導(dǎo)出到文本文件中，相鄰單元格的內(nèi)容由分隔符隔開?？梢允褂枚禾?、冒號、分號或空格作為分隔符。當(dāng)導(dǎo)出表格時，將導(dǎo)出整個表格，不能選擇導(dǎo)出部分表格。9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.3 頁面布局 5靈活運用表格設(shè)計精美頁面 在Dreamweaver中，新建一個文檔，用表格定位的方法，制作網(wǎng)頁 。其中的表格線框是使用了一個“背景顏色”為灰色、“間距”為1像素的表格，所有單元格的“背景顏色”設(shè)為白色。 9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.3 頁面布局 6其他

43、布局方法 （1）布局模式 Macromedia Dreamweaver MX 2004 提供了兩種查看和操作表格的方式：在“標準模式”中，表格顯示為行和列的網(wǎng)格，而“布局模式”允許在將表格用作基礎(chǔ)結(jié)構(gòu)的同時在頁面上繪制、調(diào)整方框的大小以及移動方框。 與一般的表格不同，在任何一個位置拖動圖標，“布局模式”都可以自動生成表格和單元格。另外，它能夠自由拖動，所以再復(fù)雜的頁面布局也可以輕松地制作出來。 在“布局模式”中，可以在添加內(nèi)容前使用布局單元格和表格來對頁面進行布局。例如，可以沿頁的頂部繪制一個單元格放置標題圖形，在頁的左邊繪制另一個單元格放置導(dǎo)航條，在右邊繪制第三個單元格放置內(nèi)容。添加內(nèi)容時，

44、您可以按需要在四周移動單元格，以調(diào)整布局。9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.3 頁面布局 6其他布局方法 （2）層 層是用于精確定位的頁面元素?？赏鶎永锛尤雸D像、文本等其他頁面元素，借助層，可對加入的頁面元素進行精確定位，還可做出重疊效果和運動效果。 要往網(wǎng)頁中加入層，點擊“插入面板”上“布局”組中的“描繪層”圖標，移動鼠標至Dreamweaver主窗口，鼠標即顯示成十字型。在窗口區(qū)域拖動鼠標即可畫出層?；蛘?，點擊菜單欄的“插入”“布局對像”“層”，主窗口即被加入一個層。 點擊層的邊線，即選中這個層?？捎檬髽送蟿?，將層移至頁面合適的位置。用鼠標拖動邊線上的黑

45、色方塊，可調(diào)節(jié)層的大小。 用鼠標點擊層內(nèi)的任意位置，這時可往層內(nèi)加入文本、圖像等內(nèi)容。層中可再嵌套層。9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.3 頁面布局 7使用框架 框架結(jié)構(gòu)提供將一個瀏覽器窗口劃分為多個區(qū)域、每個區(qū)域都可以顯示不同HTML 文檔的方法?？蚣芙Y(jié)構(gòu)將兩個或兩個以上的網(wǎng)頁頁面組合起來，能用同一個瀏覽器窗口打開，即多個頁面合起來顯示成一個頁面的效果。9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.3 頁面布局 7使用框架 使用框架具有以下優(yōu)點： （1）訪問者的瀏覽器不需要為每個頁面重新加載與導(dǎo)航相關(guān)的圖形。能統(tǒng)一風(fēng)格、便于制作和修

46、改、方便訪問； （2）每個框架都具有自己的滾動條（如果內(nèi)容太大，在窗口中顯示不下） ，因此訪問者可以獨立滾動這些框架。例如，當(dāng)框架中的內(nèi)容頁面較長時，如果導(dǎo)航條位于不同的框架中，那么向下滾動到頁面底部的訪問者就不需要再滾動回頂部來使用導(dǎo)航條。9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.3 頁面布局 7使用框架 使用框架的缺點是： （1）可能難以實現(xiàn)不同框架中各元素的精確圖形對齊； （2）對導(dǎo)航進行測試可能很耗時間； （3）各個帶有框架的頁面的URL 不顯示在瀏覽器中，因此訪問者可能難以將特定頁面設(shè)為書簽。9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9

47、.2.3 頁面布局 7使用框架 （1）在Dreamweaver中，新建一個基本HTML文檔，建立一個框架結(jié)構(gòu)，在菜單“查看”“可視化助理”中確認選中“框架邊框”，在菜單“窗口”中確認選中“框架”以顯示“框架面板”。框架面板9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.3 頁面布局 7使用框架 （2）用鼠標點擊框線，或在“框架面板”點擊最外層邊框，選擇整個框架集在“文檔工具欄”的“標題”后輸入“風(fēng)箏會”，選擇“文件”“框架集另存為”命令，保存這個框架集文件，命名為page4.htm。 （3）在“框架面板”中點擊左邊的框體，在“屬性面板”查看和設(shè)置框架屬性，可在“源文件”后

48、設(shè)置將要在本區(qū)域顯示的已經(jīng)編輯好的HTML頁面。我們在“源文件”后設(shè)置為已經(jīng)編輯好的一個網(wǎng)頁文檔page4_l.htm 9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.3 頁面布局 7使用框架 （4）在設(shè)計窗口中點擊某區(qū)域編輯修改或直接建立HTML頁面。 在右側(cè)上邊的分欄中設(shè)計網(wǎng)頁，編輯后用菜單“文件”中的“保存框架”或“框架另存為”保存為page4_t_1.htm。同樣，在下邊的分欄中設(shè)計網(wǎng)頁并用菜單“框架另存為” 保存為page4_1_1.htm。9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.3 頁面布局 7使用框架 （5）在“框架面板”點擊最

49、外層邊框，選擇整個框架集，在“屬性面板” 中設(shè)置“邊框”為“否”，意為在瀏覽器中不顯示邊框。設(shè)邊框?qū)挾葹椤?”，意為在瀏覽器中不占用空間。菜單“文件”“保存框架頁”以保存對框架集的修改 。9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.4 鏈接與導(dǎo)航 Dreamweaver MX 2004 提供多種創(chuàng)建超文本鏈接的方法，可創(chuàng)建到文檔、圖像、多媒體文件或可下載軟件的鏈接?？梢越⒌轿臋n內(nèi)任意位置的任何文本或圖像（包括標題、列表、表、層或框架中的文本或圖像）的鏈接。若要直觀地查看文件是如何鏈接在一起的，可使用站點地圖。在站點地圖中，可以向站點添加新文檔、創(chuàng)建和刪除文檔鏈接以及

50、檢查到相關(guān)文件的鏈接。9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.4 鏈接與導(dǎo)航 2客戶端圖像地圖 可使一個圖像的不同部位分別鏈接到不同的頁面，這叫作客戶端圖像映射或客戶端圖像地圖。 在圖像“屬性面板”擴展模式左下方有一項為“地圖”，用以進行客戶端圖像映射。在其后可填入你為這個映射起的名字，若不填，則Dreamweaver自動加上一個名字?！暗貓D”下面有三個圖標，從左到右依次為截取矩形、截取圓形和截取不規(guī)則圖形。9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.4 鏈接與導(dǎo)航 2客戶端圖像地圖 （1）打開前面建立的網(wǎng)頁Homepage.htm，點擊

51、選中最上面的圖像，在“屬性面板”中點擊截取矩形，在圖像中右上角環(huán)繞“關(guān)于我們”部分畫一矩形，這個形狀成為“熱點” 。 （ 2）在“熱點”的“屬性面板”中給“熱點”設(shè)置超級鏈接，用同樣方法給右邊“聯(lián)系留言”部分建立熱點鏈接，在“鏈接”欄輸入mailto：，后面輸入一個Email地址。 （3）保存文檔。 9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.4 鏈接與導(dǎo)航 3導(dǎo)航條 導(dǎo)航條一般由幾個圖像構(gòu)成，點擊不同的圖像，將鏈接到網(wǎng)站不同的頁面。通過統(tǒng)一導(dǎo)航條的方法，我們可以實現(xiàn)網(wǎng)站風(fēng)格的統(tǒng)一，同時也方便了訪問者在不同頁面間的跳轉(zhuǎn)。 在建立導(dǎo)航條之前，我們先做一些準備工作，使用圖

52、像處理軟件，把前面例子中的菜單圖像Menubar.jpg切割成多塊，并把要在網(wǎng)頁中建立鏈接的每部分圖像的背景和文字更換不同顏色另存兩份 9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.4 鏈接與導(dǎo)航 3導(dǎo)航條 （1）在Dreamweaver中，刪除圖像Menubar.jpg，加入一個表格，在每單元格插入切成小塊的圖像，使其看起來就像原來的圖像Menubar.jpg。 （2）選中有“風(fēng)箏薈萃”字樣的Menubar3_1.jpg。選擇“插入” “圖像對象” “導(dǎo)航條”，或在“插入面板”欄的“常用”類別中，單擊“圖像”菜單并選擇“插入導(dǎo)航條”按鈕，打開“插入導(dǎo)航條”對話框。9.

53、2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.4 鏈接與導(dǎo)航 3導(dǎo)航條 導(dǎo)航條項目有四種狀態(tài)： 一般：用戶尚未單擊或尚未與此項目交互時所顯示的圖像。設(shè)為Menubar3_1.jpg。 滑過：指鼠標指針滑過“一般”圖像時所顯示的圖像。項目的外觀發(fā)生變化，以便讓用戶知道可與這個項目進行交互。設(shè)為Menubar3_2.jpg。 按下：指項目被單擊后所顯示的圖像。設(shè)為Menubar3_3.jpg。 按下時鼠標經(jīng)過：指在項目被單擊后，鼠標指針滑過“按下”圖像時，所顯示的圖像。是鼠標點擊后當(dāng)鼠標再次移動到這個部位上時顯示的圖像。可不做設(shè)置。9.2 用Dreamweaver MX 200

54、4設(shè)計站點網(wǎng)頁 9.2.4 鏈接與導(dǎo)航 3導(dǎo)航條 （3）在“按下時，前往的URL”后設(shè)置要鏈接的網(wǎng)頁。設(shè)定完成后確定。 當(dāng)鼠標移至“風(fēng)箏薈萃”時變?yōu)榘椎缀谧?當(dāng)鼠標在“風(fēng)箏薈萃”上按下時變?yōu)槌鹊装鬃?9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.5 其他設(shè)計要素 1.利用最新多媒體技術(shù) Macromedia Dreamweaver MX 2004 可以迅速、方便地向Web 站點添加聲音和影片，可以在Dreamweaver 自身內(nèi)插入Macromedia Flash MX 2004 按鈕和文本對象等。可以在文檔中插入：Flash 和Shockwave 影片、QuickTime、AVI、Java applet、Active X 控件以及各種格式的音頻文件等?？梢栽谑褂肈reamweaver 時在文檔中創(chuàng)建、插入和修改Flash 按鈕而無須使用Macromedia Flash?？梢宰远xFlash 按鈕對象，并添加文本、背景顏色以及指向其他文件的鏈接。Flash 文本對象允許您創(chuàng)建和插入只包含文本的Flash 影片。9.2 用Dreamweaver MX 2004設(shè)計站點網(wǎng)頁 9.2.5 其他設(shè)計要素 2. CSS樣式表 CSS即Cascading Styl