1、5.1 Dreamweaver MX 2004簡介 5.2 站點管理 5.3 制作第一個網(wǎng)頁 5.4 超鏈接 5.5 使用圖像 5.6 使用多媒體對象 5.7 使用表格,第5章 網(wǎng)頁制作工具Dreamweaver MX 2004基礎(chǔ),利用Dreamweaver的可視化編輯功能，用戶可以快速地創(chuàng)建頁面而無需編寫任何代碼。在Dreamweaver內(nèi)可以直接對圖形編輯，把Word和Excel文檔復(fù)制和粘貼到Dreamweaver中，會保留字體、顏色、CSS樣式表信息。 如果用戶熟悉手工編寫標記代碼，Dreamweaver包括許多與編碼相關(guān)的工具和功能，其使用將更加靈活。并且，借助Dreamweave

2、r還可以使用服務(wù)器語言（例如ASP、ASP.NET、ColdFusion標記語言、JSP和PHP）生成支持動態(tài)數(shù)據(jù)庫的Web應(yīng)用程序。 目前，Dreamweaver的最新版本是Dreamweaver MX 2004 v7.01，如果用戶安裝的是v7.0，一定要升級為v7.01，否則有些功能將不能使用（如時間軸）。,5.1 Dreamweaver MX 2004簡介,1. 啟動Dreamweaver MX 2004 安裝好Dreamweaver MX 2004后，單擊“開始”“程序”“Macromedia”“Macromedia Dreamweaver MX 2004”命令。Dreamweave

3、r MX 2004進行一系列初始化過程后，首先顯示“工作區(qū)設(shè)置”對話框，如圖5-1所示。由于要采用可視化方式設(shè)計網(wǎng)頁，選中“設(shè)計者”單選鈕，單擊“確定”按鈕。,5.1 Dreamweaver MX 2004簡介 5.1.1 Dreamweaver MX 2004的啟動和主工作區(qū),圖5-1 “工作區(qū)設(shè)置”對話框,2. Dreamweaver MX 2004的工作區(qū) Dreamweaver MX 2004的設(shè)計工作區(qū)由插入工具欄、文檔工具欄、文檔窗口、屬性面板和面板等部分組組成，如圖5-3所示。,5.1 Dreamweaver MX 2004簡介 5.1.1 Dreamweaver MX 2004

4、的啟動和主工作區(qū),圖5-3 Dreamweaver MX 2004的工作區(qū),1. 常規(guī)參數(shù)設(shè)置 單擊“編輯”“首選參數(shù)”命令，或按Ctrl+U組合鍵，打開“首選參數(shù)”對話框。選擇“分類”列表中的“常規(guī)”選項，對話框右側(cè)顯示出相關(guān)的屬性。其中通常設(shè)置的屬性有文檔工作區(qū)的切換和一些編輯選項。,5.1 Dreamweaver MX 2004簡介 5.1.2 Dreamweaver MX 2004的參數(shù)設(shè)置,圖5-12 常規(guī)參數(shù)設(shè)置,2. 面板參數(shù)設(shè)置 Dreamweaver中的面板被組織到面板組中。面板組中選定的面板顯示為一個選項卡。每個面板組都可以展開或折疊，并且可以和其它面板組?？吭谝黄鸹蛉∠?/p>

5、靠。面板組還可以?？康郊傻膽?yīng)用程序窗口中。這使得用戶能夠很容易地訪問所需的面板，而不會使工作區(qū)變得混亂。,5.1 Dreamweaver MX 2004簡介 5.1.2 Dreamweaver MX 2004的參數(shù)設(shè)置,圖5-13 面板參數(shù)設(shè)置,3. 站點參數(shù)設(shè)置 選擇“分類”列表中的“站點”選項，對話框右側(cè)顯示出相關(guān)的屬性，此對話框用于為“文件”面板設(shè)置站點首選參數(shù)，如圖5-14所示。,5.1 Dreamweaver MX 2004簡介 5.1.2 Dreamweaver MX 2004的參數(shù)設(shè)置,圖5-14 站點參數(shù)設(shè)置,基于Internet服務(wù)器的不可知特性，因此通常將存儲于Inter

6、net服務(wù)器上的站點和相關(guān)文檔稱作遠端站點。 利用Dreamweaver可以對位于Internet服務(wù)器上的站點文檔直接進行編輯和管理，但這在很多時候非常不便。 既然位于Internet服務(wù)器上的站點仍是以文件和文件夾作為基本要素的磁盤組織形式，那么能不能首先在本地計算機的磁盤上構(gòu)建出整個網(wǎng)站的框架，編輯相應(yīng)的文檔，然后再將之放置到Internet服務(wù)器上呢?答案是可以的，這就是本地站點的概念。 利用Dreamweaver，可以在本地計算機上創(chuàng)建出站點的框架，從整體上對站點全局進行把握。在站點設(shè)計完畢，可以利用各種上傳工具，將本地站點上傳到Internet服務(wù)器上以形成遠端站點。,5.2 站點

7、管理 5.2.1 本地站點和遠端站點,設(shè)計目標 建立一個本地站點，定義站點名稱和站點使用的本地根文件夾以及默認的圖像文件夾，為以后的頁面制作和管理打好基礎(chǔ)。本實例定義站點的名稱為“Sample”，使用的本地文件夾為“D:myweb”，默認的圖像文件夾為“D:mywebimage”，站點的設(shè)置和結(jié)構(gòu)如圖5-15所示。,5.2 站點管理 5.2.2 建立本地站點,圖5-15 需要建立的站點結(jié)構(gòu),1. 編輯站點 在Dreamweaver中創(chuàng)建好本地站點后，如果需要，還可以對整個站點進行編輯操作。例如，編輯修改站點、復(fù)制站點、刪除站點等。 2. 文件的基本操作 在Dreamweaver中，可以使用“文

8、件”菜單來對單獨的文件進行管理。例如，執(zhí)行“新建”、“打開”、“保存”、“另存為”等命令 。 3. 指定站點首頁 網(wǎng)站的門戶就是首頁，通常首頁文件中總包含有若干指向其他主要網(wǎng)頁的超鏈接，用戶可以先為網(wǎng)站創(chuàng)建一個空白首頁，然后編輯，并可以利用站點地圖來查看網(wǎng)站中超鏈接的情況。,5.2 站點管理 5.2.3 管理本地站點,設(shè)計目標 制作一個淺黃色背景的網(wǎng)頁，在頁面上通過添加文字和水平線，展示一個旅游文化網(wǎng)頁的宣傳內(nèi)容，并且在頁面的右下方顯示出感謝信息和當前日期，實例效果如圖5-28所示。 【例5-2】,5.3 制作第一個網(wǎng)頁 5.3.1 制作網(wǎng)頁的一般過程,圖5-28 實例效果,1. 設(shè)置網(wǎng)頁標題

9、 設(shè)置網(wǎng)頁標題的方法為：在文檔窗口工具欄中的“標題”文本框內(nèi)直接輸入網(wǎng)頁的標題文字；也可以在文檔窗口中選擇“修改”菜單中的“頁面屬性”命令，或者按Ctrl+J快捷鍵，打開“頁面屬性”對話框，選擇“標題/編碼”分類，在右側(cè)的“標題”文本框內(nèi)設(shè)置網(wǎng)頁的標題，如圖5-42所示。,5.3 制作第一個網(wǎng)頁 5.3 2 設(shè)置頁面屬性,圖5-42 設(shè)置網(wǎng)頁標題,2. 設(shè)置網(wǎng)頁其他屬性 如果需要設(shè)置網(wǎng)頁的其他屬性，可以打開“頁面屬性”對話框設(shè)置，對話框的功能分類如下： (1) 外觀 外觀對話框主要設(shè)置網(wǎng)頁基本頁面布局選項，包括頁面字體、大小、文本顏色、背景顏色、背景圖像、左邊距、右邊距、上邊距和下邊距，如圖5

10、-43所示。,5.3 制作第一個網(wǎng)頁 5.3 2 設(shè)置頁面屬性,圖5-43 外觀對話框,2. 設(shè)置網(wǎng)頁其他屬性 (2) 鏈接 網(wǎng)頁中的鏈接就是以文字或圖像作為鏈接對象，然后指定一個要跳轉(zhuǎn)的網(wǎng)頁地址，當瀏覽者單擊文字或其他對象時，瀏覽器跳轉(zhuǎn)到指定的目標網(wǎng)頁。 鏈接對話框主要設(shè)置網(wǎng)頁中超級鏈接的字體、字體大小、各種鏈接顏色、鏈接下劃線的樣式，如圖5-44所示。,5.3 制作第一個網(wǎng)頁 5.3 2 設(shè)置頁面屬性,圖5-44 鏈接對話框,2. 設(shè)置網(wǎng)頁其他屬性 (3) 跟蹤圖像 跟蹤圖像是放在“文檔”窗口背景中的JPEG、GIF或PNG圖像。在跟蹤圖像對話框中，可以隱藏圖像、設(shè)置圖像的不透明度和更改圖

11、像的位置，如圖5-45所示。,5.3 制作第一個網(wǎng)頁 5.3.2 設(shè)置頁面屬性,圖5-45 跟蹤圖像對話框,1. 文本 文本的操作主要包括：輸入文字、設(shè)置文字大小、設(shè)置字體、設(shè)置文本顏色、設(shè)置文本對齊方式等。 2. 插入日期 Dreamweaver提供了一個方便的日期對象，該對象使用戶可以以任何喜歡的格式插入當前日期，還可以選擇在每次保存文件時都自動更新該日期。 將插入點放置到要插入日期的位置，執(zhí)行“插入”“日期”命令，彈出“插入日期”對話框，選擇一種日期格式。設(shè)置完畢后，單擊“確定”按鈕完成日期的插入。,5.3 制作第一個網(wǎng)頁 5.3.3 網(wǎng)頁基本元素,1. 超鏈接的分類 根據(jù)超鏈接目標文件

12、的不同，超鏈接可分為頁面超鏈接、錨點超鏈接、電子郵件超接鏈等；根據(jù)超鏈接單擊對象的不同，超鏈接可分為文字超鏈接、圖像超鏈接、圖像映射等。 2. 路徑 (1) 絕對路徑 絕對路徑是包括服務(wù)器規(guī)范在內(nèi)的完全路徑（網(wǎng)頁一般使用http:/）。 (2) 根目錄相對路徑 根目錄相對路徑是指從站點根文件夾到被鏈接文檔經(jīng)過的路徑。 (3) 文檔目錄相對路徑 文檔目錄相對路徑是指以當前文檔所在位置為起點到被鏈接文檔經(jīng)過的路徑，這種方式適合于創(chuàng)建本地鏈接。,5.4 超鏈接 5.4.1 超級鏈接的基本概念,設(shè)計目標 制作一個介紹中國四大名著的頁面，使用了錨點鏈接、頁面間鏈接和電子郵件鏈接等技術(shù)。當用戶單擊主頁面欄

13、目中某個名著的鏈接時，首先鏈接到本頁面內(nèi)該作品的簡介位置，如果用戶需要查看詳細內(nèi)容，單擊“詳細內(nèi)容”鏈接，進入相應(yīng)的頁面顯示出詳細的作品內(nèi)容。實例效果如圖5-50所示。 【例5-3】,5.4 超鏈接 5.4.2 在Dreamweaver中設(shè)置超鏈接,圖5-50 實例效果,設(shè)計目標 制作一個學(xué)校建筑的展示網(wǎng)頁，通過學(xué)校校風(fēng)圖像和循環(huán)滾動圖像的展示，突出學(xué)校的建筑風(fēng)格和特色。循環(huán)的圖像支持超鏈接，并且鼠標移動到圖像上時，畫面靜止；鼠標移出圖像后，圖像繼續(xù)滾動。在瀏覽器中的顯示效果如圖5-62所示。 【例5-4】,5.5 使用圖像 5.5.1 插入圖像,圖5-62 實例效果,設(shè)計目標 制作一個認識世

14、界地圖的網(wǎng)頁，當用戶將鼠標移至地圖的不同組成部分時，顯示出相應(yīng)的說明文字，例如鼠標移到南美洲區(qū)域上時，便會顯示“南美洲”的字樣。單擊地圖圖像的不同組成部分時，打開相應(yīng)的鏈接頁面顯示相應(yīng)的簡介，效果如圖5-71所示。 【例5-5】,5.5 使用圖像 5.5.2 圖像映射,圖5-71 實例效果,設(shè)計目標 制作一個翻轉(zhuǎn)圖像的效果，原始圖像是一個幻想電腦的卡通人物。當鼠標經(jīng)過圖像時，圖像變?yōu)橐环嬲碾娔X畫面，而鼠標離開時，圖像又恢復(fù)為原始圖像。當單擊圖像時，鏈接到另外一個介紹電腦的頁面，效果如圖5-76所示。 【例5-6】,5.5 使用圖像 5.5.3 制作鼠標經(jīng)過圖像,圖5-76 實例效果,網(wǎng)頁中

15、的多媒體對象包括音頻、視頻、Flash電影、Java小程序、Shockwave電影和ActiveX控件等對象。在網(wǎng)頁中添加多媒體對象可以使制作出的網(wǎng)頁有聲有色。目前在網(wǎng)絡(luò)上播放的音頻和視頻文件格式包括： 音頻：主要包含Wav、Midi、Mp3、Aif和Ra等文件格式。 視頻：主要有RealMedia、Windows Medla、QuickTime三種視頻文件，其中RealMedia和Windows Media格式是目前國內(nèi)比較廣泛使用的。 設(shè)計目標 為前面章節(jié)中制作的校園建筑網(wǎng)頁制作背景音樂。當頁面打開時，自動播放一首溫馨的Midi背景音樂，使用戶感覺非常親切。 【例5-7】,5.6 使用多媒體對象 5.6.1 添加背景音樂,設(shè)計目標 制作一個影音播放的娛樂頁面。當頁面打開時，頁面內(nèi)左上角嵌入瀏覽器自動播放一段標志視頻；當用戶單擊“點歌臺”中的歌曲鏈接時，在新的窗口打開“Windows Media Player”播放器播放該歌曲；當用戶單擊“演唱會欣賞”中的視頻鏈接時，在新的窗口打開“Windows Media Player”播放器播放視頻動畫。實例效果如圖5-79所示。 【例5-8】,5.6 使用多媒體對象 5.6.2 使用聲音與視頻,圖5-79 實例效果,表格是頁面布局極為有用的設(shè)計工具。在設(shè)計頁面時，往往要利用表格來定