添加網(wǎng)頁(yè)基本對(duì)象.ppt

1、第3章 添加網(wǎng)頁(yè)基本對(duì)象,3.1 操作網(wǎng)頁(yè)文件 3.2 操作文本 3.3 插入圖像 3.4 插入Flash對(duì)象 3.5 插入其他基本對(duì)象 3.6 創(chuàng)建超連接,3.1 操作網(wǎng)頁(yè)文件 文件的創(chuàng)建和存儲(chǔ)是文檔操作中最基本的部分。通常首先創(chuàng)建本地站點(diǎn)，然后根據(jù)站點(diǎn)設(shè)計(jì)規(guī)劃添加各種空白文件，接著對(duì)這些文件進(jìn)行編輯。本節(jié)講述網(wǎng)頁(yè)文件的基本操作包括：創(chuàng)建網(wǎng)頁(yè)、打開(kāi)網(wǎng)頁(yè)、保存網(wǎng)頁(yè)以及將網(wǎng)頁(yè)設(shè)置為首頁(yè)、設(shè)置網(wǎng)頁(yè)屬性等。,3.1.1 創(chuàng)建、保存網(wǎng)頁(yè)文件 1創(chuàng)建網(wǎng)頁(yè)文件 在Dreamweaver MX 2004中，可通過(guò)3種方法創(chuàng)建網(wǎng)頁(yè)。 (1)啟動(dòng)Dreamweaver MX 2004后，窗口中會(huì)出現(xiàn)一個(gè)啟動(dòng)頁(yè)面

2、，單擊【創(chuàng)建新項(xiàng)目】下面的選項(xiàng)即可創(chuàng)建網(wǎng)頁(yè)。 (2)單擊【文件】【新建】命令，彈出【新建文檔】對(duì)話框，選定【常規(guī)】選項(xiàng)卡中【類別】下的【基本頁(yè)面】選項(xiàng)，單擊【創(chuàng)建】按鈕，即可新建一個(gè)頁(yè)面，默認(rèn)名稱為“Untitled-1”。 (3)通過(guò)工具欄按鈕創(chuàng)建網(wǎng)頁(yè)：?jiǎn)螕簟疽晥D】【工具欄】【標(biāo)準(zhǔn)工具欄】命令，打開(kāi)標(biāo)準(zhǔn)工具欄，單擊標(biāo)準(zhǔn)工具欄上的【新建】按鈕。打開(kāi)【新建文檔】對(duì)話框，按上面的步驟操作，即可新建文件。,2保存網(wǎng)頁(yè) 編輯好的網(wǎng)頁(yè)可以將其保存起來(lái)。在Dreamweaver MX 2004中，用戶可以保存文件、另存為文件，還可以將文件保存為模板。 (1)保存文件：?jiǎn)螕簟疚募俊颈４妗棵?，彈出【保存?/p>

3、】對(duì)話框，在【保存在】下拉列表框中選擇保存文件的位置；在【文件名】文本框中輸入保存文件的名稱，并單擊【保存】按鈕。 (2)另存為文件：另存為文件就是將已經(jīng)保存的文件另存倒其他位置，或以其他名稱保存起來(lái)。操作步驟如下：?jiǎn)螕簟疚募俊玖泶鏋椤棵?，彈出【保存為】?duì)話框，在【保存在】下拉列表框中選擇保存文件的位置；在【文件名】文本框中輸入保存文件的名稱，并單擊【保存】按鈕。,(3)保存為模板：將文件保存為模板文件后，該文件將以模板的形式存在，如果其他文件應(yīng)用該模板，則其格式會(huì)與之相同。在第一次將文件保存為模板文件之前，首先要建立一個(gè)站點(diǎn)。操作步驟如下：?jiǎn)螕簟疚募俊玖泶鏋槟０濉棵?，彈出【另存為模?/p>

4、】對(duì)話框，在【站點(diǎn)】下拉列表框中選擇站點(diǎn)；在【另存為】文本框中輸入保存模板的名稱，并單擊【保存】按鈕。,3.1.2 設(shè)置網(wǎng)頁(yè)屬性 設(shè)置網(wǎng)頁(yè)屬性包括設(shè)置網(wǎng)頁(yè)標(biāo)題、網(wǎng)頁(yè)中文本的顏色、網(wǎng)頁(yè)背景顏色及背景圖片、網(wǎng)頁(yè)邊距等。 設(shè)置網(wǎng)頁(yè)屬性通過(guò)設(shè)置【頁(yè)面屬性】來(lái)完成。通過(guò)單擊【修改】【頁(yè)面屬性】命令，即可打開(kāi)【頁(yè)面屬性】對(duì)話框，通過(guò)該對(duì)話框，用戶可以設(shè)置頁(yè)面、鏈接、網(wǎng)頁(yè)標(biāo)題等項(xiàng)的屬性。在【分類】列表中選擇某一項(xiàng)，對(duì)話框右側(cè)即會(huì)出現(xiàn)有關(guān)該選項(xiàng)的屬性。然后進(jìn)行各選項(xiàng)地設(shè)置。設(shè)置完成后，單擊【確定】按鈕。,3.2 操作文本 文字在網(wǎng)頁(yè)中的應(yīng)用十分普遍，與其他文本處理相比網(wǎng)頁(yè)文本處理有許多相似的部分，例如標(biāo)題、段

5、落、列表、對(duì)齊方式等，但網(wǎng)頁(yè)文本有它獨(dú)特的要求，即必須努力地精簡(jiǎn)代碼，必須盡可能使樣式和內(nèi)容分離，必須盡可能使樣式保持一定的規(guī)律。,3.2.1添加文本 若要在網(wǎng)頁(yè)文檔中添加文本，首先應(yīng)光標(biāo)移到要添加文本的位置，直接輸入內(nèi)容或在其他應(yīng)用程序中復(fù)制文本，然后切換到Dreamweaver 的文檔窗口，進(jìn)行粘貼即可。輸入文字時(shí)，如果需要分段，則按Enter鍵。 按常規(guī)方法，在DreamweaverMX2004中不能輸入多個(gè)空格，只能輸入一個(gè)。如果用戶想要輸入多個(gè)空格，則將輸入法提示框上的【半角】改為【全角】即可。,3.2.2設(shè)置文本屬性 設(shè)置文本屬性主要包括設(shè)置文本的字體、字號(hào)、文字顏色、對(duì)齊方式、間

6、距。 設(shè)置方法為：選定需要設(shè)置文本屬性的文本，然后選擇【窗口】【屬性】命令，打開(kāi)屬性面板，通過(guò)屬性面板進(jìn)行設(shè)置或選擇【文本】【字體】菜單中的相應(yīng)命令即可,3.3 插入圖像 在網(wǎng)頁(yè)中添加精致、美觀的圖像，會(huì)使網(wǎng)頁(yè)變得豐富多彩。在插入圖像時(shí)，首先考慮圖像在頁(yè)面中的整體效果，其次應(yīng)綜合考慮圖像的質(zhì)量和下載速度。圖片的格式有多種，但不是所有格式的圖像都可以放在網(wǎng)頁(yè)上。目前，網(wǎng)絡(luò)上支持的圖像格式有3種：JPEG、GIF和PNG。所以如果要將其他格式的圖像放到網(wǎng)頁(yè)上，首先需要轉(zhuǎn)換成這3種格式。,3.3.1插入圖像 1插入一般圖像 在Dreamweaver中插入圖像后，系統(tǒng)會(huì)在HTML中自動(dòng)生成對(duì)該圖像文件

7、的引用，要確保引用正確，插入的圖像文件必須位于當(dāng)前站點(diǎn)內(nèi)，如果沒(méi)在當(dāng)前站點(diǎn)中，預(yù)覽時(shí)圖片將無(wú)法顯示。 插入一般圖像有兩種方法，第一種方法：可以通過(guò)菜單命令插入，將光標(biāo)放到要插入圖像的位置，然后選擇【插入】【圖像】命令，彈出【選擇圖像源文件】對(duì)話框，在對(duì)話框中選擇一幅圖片，單擊【插入】按鈕，即可在網(wǎng)頁(yè)中插入圖片。第二種方法：可以通過(guò)按鈕插入圖像，單擊【常用】子面板上的【圖像】按鈕，從下拉列表中選擇【圖像】，從彈出的【選擇圖像源文件】對(duì)話框中選擇要插入的圖像，單擊【確認(rèn)】按鈕，即可插入圖像。,2插入交互圖像 操作步驟如下： （1）將插入點(diǎn)放置到要插入交換圖像的位置，單擊【插入】【圖像對(duì)象】【鼠標(biāo)經(jīng)

8、過(guò)圖像】命令，彈出【插入鼠標(biāo)經(jīng)過(guò)圖像】對(duì)話框。 （2）在對(duì)話框中首先給此交換圖像命名，然后在【原始圖像】框和【鼠標(biāo)經(jīng)過(guò)圖像】框中分別通過(guò)單擊【瀏覽按鈕】，選擇交換前的圖像和鼠標(biāo)指向時(shí)交換的圖像。選中【預(yù)覽鼠標(biāo)經(jīng)過(guò)圖像】復(fù)選框，其作用是在瀏覽器加載頁(yè)面時(shí)首先下載交換圖像，以保證圖像交換功能的正常實(shí)現(xiàn)。然后再在【按下時(shí)，前往的URL】框中設(shè)定此交換圖像的超鏈接地址，最后單擊確定按鈕即可。,3.3.2設(shè)置圖像屬性 選定圖像，窗口最下方會(huì)出現(xiàn)圖像屬性面板。 屬性面板中各項(xiàng)的設(shè)置如下： l圖像：圖像文本框用來(lái)輸入圖像的名稱，以方便在使用腳本語(yǔ)言時(shí)引用。 l寬：設(shè)置圖像寬度。 l高：設(shè)置圖像高度。 l源文

9、件：此框用來(lái)設(shè)置插入圖像的路徑及名稱。單擊右端的按鈕，打開(kāi)【選擇圖像源】對(duì)話框，選擇一幅圖片，可以替換原來(lái)的圖像。 l鏈接：設(shè)置圖像的鏈接屬性。 l替代：用于輸入說(shuō)明文本。在該文本框中輸入的內(nèi)容會(huì)顯示在圖像將要顯示的位置。 l類：從已定義的樣式中選擇為圖片定義的樣式。,l 編輯：“編輯”后面集合了一些常用的圖片編輯工具，通過(guò)這幾個(gè)工具可以在Fireworks窗口中編輯和優(yōu)化圖像、裁剪圖像、重設(shè)圖像、設(shè)置圖像的亮度和對(duì)比度，以及銳化圖像。l 垂直邊距：是圖像左、右兩側(cè)與網(wǎng)頁(yè)其他元素的距離。l 水平邊距：是圖像上、下兩側(cè)與網(wǎng)頁(yè)其他元素的距離。l 目標(biāo)：表示鏈接的目標(biāo)文件在瀏覽器中的打開(kāi)方式。其中包

10、括4種方式：_blank表示將鏈接文件在新的窗口中打開(kāi)；_parent表示將鏈接文件在上級(jí)框架集或包含該鏈接的窗口中打開(kāi)；_self表示將鏈接文件載入到相同框架或窗口中；_top表示將鏈接文件載入到整個(gè)瀏覽器窗口中，將刪除所有框架。,l 邊框：改變“邊框”的數(shù)值可以使圖片添加指定數(shù)值的邊框，而邊框的顏色將與當(dāng)前文檔的文本默認(rèn)顏色一致。有時(shí)為圖片添加鏈接時(shí)，會(huì)突然出現(xiàn)一個(gè)藍(lán)色的邊框，這時(shí)只要將“邊框”值設(shè)為0即可消除這個(gè)邊框。l對(duì)齊：與普通文字的“左”、“中”、“右”對(duì)齊方式相比，圖片還增加了更多的對(duì)齊選擇，這個(gè)選項(xiàng)主要是指定圖片與周圍的文本的排版方式。其中設(shè)定此參數(shù)為“左對(duì)齊”和“右對(duì)齊”，可

11、以使圖片與周圍的文本混合起來(lái)排列。,3.4 插入Flash對(duì)象 使用Dreamweaver MX 2004可以在文檔中插入Flash動(dòng)畫(huà)、帶有樣式的Flash按鈕和Flash文本。,3.4.1插入并設(shè)置Flash動(dòng)畫(huà) 1插入Flash動(dòng)畫(huà) 插入Flash動(dòng)畫(huà)有兩種方法。第一種：可以通過(guò)菜單插入Flash動(dòng)畫(huà)，首先將光標(biāo)放到要插入Flash動(dòng)畫(huà)的位置，然后選擇【插入】【媒體】【Flash】命令，打開(kāi)【選擇文件】對(duì)話框，在其中選擇Flash文件，選擇完成后，單擊【確定】按鈕，將文件圖表插入到文檔中。 第二種：可以通過(guò)按鈕插入Flash動(dòng)畫(huà)，首先將光標(biāo)放到要插入Flash動(dòng)畫(huà)的位置，然后單擊【插入】

12、面板上【常規(guī)】子面板上的【媒體】按鈕，打開(kāi)下拉列表，選擇Flash，從彈出的【選擇文件】對(duì)話框中選擇一幅Flash動(dòng)畫(huà)文件，單擊【確定】按鈕即可。插入Flash動(dòng)畫(huà)文件后按F12鍵可以瀏覽動(dòng)畫(huà)。,2設(shè)置Flash動(dòng)畫(huà)屬性 選定文件中的Flash動(dòng)畫(huà)圖標(biāo)，打開(kāi)Flash屬性面板，F(xiàn)lash屬性面板上各屬性的設(shè)置如下： lFlash：指定Flash動(dòng)畫(huà)的名稱。 l寬：指定Flash動(dòng)畫(huà)被裝進(jìn)瀏覽器時(shí)的寬度。 l高：指定Flash動(dòng)畫(huà)被裝進(jìn)瀏覽器時(shí)的高度。 l文件：指定Flash動(dòng)畫(huà)文件的路徑。 l循環(huán)：選中此復(fù)選框，自動(dòng)循環(huán)播放Flash動(dòng)畫(huà)。 l自動(dòng)播放：選中此復(fù)選框，自動(dòng)播放Flash動(dòng)畫(huà)。

13、l垂直邊距：設(shè)置Flash動(dòng)畫(huà)的垂直邊距。,l 品質(zhì)：設(shè)置Flash動(dòng)畫(huà)播放的效果。 l 比例：設(shè)置Flash動(dòng)畫(huà)文件的比例。 l 對(duì)齊：確定Flash動(dòng)畫(huà)和頁(yè)面的對(duì)齊方式。 l 背景顏色：指定Flash動(dòng)畫(huà)區(qū)域的背景顏色。 l ：編輯Flash動(dòng)畫(huà)的屬性。 l ：重置到原始尺寸。 l ：?jiǎn)螕粼摪粹o，可以觀察到Flash動(dòng)畫(huà)播放時(shí)的效果。 l ：?jiǎn)螕粼摪粹o，在打開(kāi)的對(duì)話框中可設(shè)置Flash動(dòng)畫(huà)的參數(shù)。,3.4.2插入并設(shè)置Flash文本對(duì)象 1插入Flash文本對(duì)象 插入Flash文本對(duì)象有兩種方法。 第一種：可以通過(guò)菜單命令插入Flash文本，首先將光標(biāo)放到要插入Flash文本對(duì)象的位置，然

14、后選擇【插入】【媒體】【Flash文本】命令，打開(kāi)【插入Flash文本】命令，打開(kāi)“插入Flash文本”對(duì)話框，在該對(duì)話框中設(shè)置Flash文本屬性，單擊“確定”按鈕，應(yīng)用設(shè)置。若要編輯輸入的Flash文本對(duì)象，可選定對(duì)象，然后單擊屬性面板上的【編輯】按鈕。,第二種方法：可以通過(guò)按鈕插入Flash文本對(duì)象，首先將光標(biāo)放到要插入Flash動(dòng)畫(huà)的位置，然后單擊【插入】面板上【常規(guī)】子面板上的【媒體】按鈕，打開(kāi)下拉列表，選擇【Flash文本】，在彈出的【插入Flash文本】對(duì)話框中設(shè)置文本屬性，單擊【確定】按鈕即可。,3.4.3插入并設(shè)置Flash按鈕對(duì)象 插入Flash按鈕對(duì)象有兩種方法。 第一種方

15、法：可以通過(guò)菜單命令插入Flash按鈕對(duì)象，首先將光標(biāo)放到要插入Flash按鈕對(duì)象的位置，然后選擇【插入】【媒體】【Flash按鈕】命令，打開(kāi)【插入Flash按鈕】對(duì)話框，對(duì)話框中各項(xiàng)的設(shè)置如下： l范例：顯示按鈕樣式。 l樣式：設(shè)置按鈕樣式。 l按鈕文本：輸入在按鈕上顯示的文本。 l字體：設(shè)置按鈕上文字的字體。 l大?。涸O(shè)置按鈕上文字的大小。,l鏈接：設(shè)置鏈接路徑。 l目標(biāo)：定義鏈接的目標(biāo)窗口。 l背景色：設(shè)置按鈕的背景顏色。 l另存為：輸入將要輸出的Flash按鈕文件名。 在該對(duì)話框中設(shè)置Flash按鈕屬性，單擊“確定”按鈕，應(yīng)用設(shè)置。若要對(duì)Flash按鈕對(duì)象進(jìn)行再編輯，可選定對(duì)象，然后單

16、擊屬性面板上的【編輯】按鈕。,第二種方法：通過(guò)按鈕插入Flash按鈕對(duì)象，首先將光標(biāo)放到要插入Flash按鈕對(duì)象的位置，然后單擊【插入】面板上【常規(guī)】子面板上的【媒體】按鈕，打開(kāi)下拉列表，選擇【Flash按鈕】，在彈出的【插入Flash按鈕】對(duì)話框中設(shè)置按鈕屬性，單擊【確定】按鈕即可。,3.5 插入其它基本對(duì)象 3.5.1 插入日期 插入日期有兩種方法，第一種：可以通過(guò)菜單命令插入日期，首先將光標(biāo)放到要插入日期的位置，然后選擇【插入】【日期】命令，打開(kāi)【插入日期】對(duì)話框，從中選擇日期格式，單擊“確定”按鈕即可。第二種：可以通過(guò)按鈕插入日期，首先將光標(biāo)放到要插入日期的位置，然后單擊【插入】工具欄

17、上【常用】子工具欄上的【日期】按鈕，打開(kāi)【插入日期】對(duì)話框，從中選擇一種日期格式，單擊【確定】按鈕即可。,3.5.2 插入水平線 水平線對(duì)于組織信息很有用。在頁(yè)面上，可以使用一條或多條水平線以可視方式分隔文本和對(duì)象。 1插入水平線 將光標(biāo)放到要插入水平線的位置，將【插入】【HTML】【水平線】命令，便會(huì)直接插入一條水平線。 2修改水平線 通過(guò)屬性面板可以設(shè)置水平線的高度、寬度及對(duì)齊方式。選定水平線，可以在屬性面板中修改水平線的屬性。,3.5.3 插入文本列表 列表可以清晰地創(chuàng)建可識(shí)別的大綱和目錄結(jié)構(gòu)。Dreamweaver中常用的列表有無(wú)序列表和有序列表兩種形式。 l無(wú)序列表：插入一個(gè)無(wú)序列表

18、符號(hào)后，輸入列表文字后按回車鍵，會(huì)自動(dòng)添加下一個(gè)列表項(xiàng)。 l 有序列表：有序列表的優(yōu)點(diǎn)是可以自動(dòng)產(chǎn)生項(xiàng)目的編號(hào)。 l嵌套列表：用戶可以改變某個(gè)列表項(xiàng)的層次，選中一個(gè)列表項(xiàng)單擊縮進(jìn)按鈕，當(dāng)前列表項(xiàng)會(huì)自動(dòng)成為上一個(gè)列表項(xiàng)的子內(nèi)容列表，及多級(jí)列表，而前面的列表符號(hào)也自動(dòng)與它的父級(jí)不同。,3.5.4 插入特殊字符 有時(shí)候需要在網(wǎng)頁(yè)中插入一些特殊字符，操作步驟如下： （1）將光標(biāo)移到要插入特殊字符的位置。 （2）單擊【插入】【HTML】【特殊字符】菜單項(xiàng)，在子菜單項(xiàng)中選擇合適的字符，或者單擊【插入】欄【文本】選項(xiàng)卡中的相應(yīng)字符按鈕。 （3）如果沒(méi)有相應(yīng)的字符，可以選擇子菜單中的【其他字符】，或者單擊【插

19、入】欄【文本】選項(xiàng)卡中的相應(yīng)字符按鈕，彈出對(duì)話框，在對(duì)話框中單擊需要的字符，該字符的代碼就會(huì)出現(xiàn)在【插入】文本框中。 （4）最后單擊【確定】按鈕即可將字符插入到文檔中。,3.6 創(chuàng)建超鏈接 超鏈接簡(jiǎn)單地說(shuō)就是一種資料的鏈接方法，使用戶更方便地找到閱讀文件。超鏈接不僅可以鏈接不同的文件，而且還可以鏈接同一份文件中的某一部分。超鏈接正是Web的魅力所在。為了把Internet上眾多的網(wǎng)站和網(wǎng)頁(yè)聯(lián)系起來(lái)，構(gòu)成一個(gè)有機(jī)的整體，就要在網(wǎng)頁(yè)上加入鏈接。通過(guò)點(diǎn)擊網(wǎng)頁(yè)上的鏈接，我們才能在信息海洋中盡情遨游。 。,3.6.1創(chuàng)建文本超鏈接 1創(chuàng)建文本超鏈接 創(chuàng)建文本超鏈接的操作步驟如下： （1）選擇要?jiǎng)?chuàng)建鏈接的

20、文本，然后單擊【窗口】【屬性】命令，打開(kāi)屬性面板。 （2）在【鏈接】文本框中輸入鏈接到的網(wǎng)頁(yè)地址即目標(biāo)端點(diǎn)的URL地址，或者單擊【鏈接】文本框右端的【瀏覽文件】按鈕，打開(kāi)【選擇文件】對(duì)話框，從中選擇要鏈接到的網(wǎng)頁(yè)地址。單擊確定按鈕后系統(tǒng)將自動(dòng)生成相應(yīng)的URL地址，并顯示在【屬性】面板的【鏈接】文本框中。,2刪除超鏈接 刪除超鏈接的方法非常簡(jiǎn)單，操作步驟是：首先選擇要?jiǎng)h除超鏈接的文本，然后刪除屬性面板上“鏈接”文本框中的網(wǎng)址，即可刪除超鏈接。 3.6.2 創(chuàng)建圖像超鏈接 圖片超鏈接的建立與文本的超級(jí)鏈接方法相似，只是選擇的不是文本而是圖片。 首先選擇要?jiǎng)?chuàng)建鏈接的圖片，然后選擇【窗口】【屬性】命令

21、，打開(kāi)屬性面板。單擊【鏈接】右端的【瀏覽文件】按鈕，打開(kāi)【選擇文件】對(duì)話框，從中選擇要鏈接到的文件。單擊【確認(rèn)】按鈕，即可創(chuàng)建圖片鏈接。,3.6.3創(chuàng)建其他類型超鏈接 1創(chuàng)建郵件鏈接 創(chuàng)建郵件鏈接有兩種方法。 第一種：通過(guò)菜單命令創(chuàng)建電子郵件的鏈接，首先將光標(biāo)放到需要插入電子郵件鏈接的位置，然后選擇【插入】【電子郵件鏈接】命令，打開(kāi)【E-mail鏈接】對(duì)話框，在【文本框】中輸入郵件鏈接要顯示在業(yè)面上的文本；在E-mail文本框中輸入要鏈接的郵箱地址。最后，單擊確定按鈕，郵件鏈接就加入到了當(dāng)前文檔中。,第二種：通過(guò)【插入】面板上的按鈕創(chuàng)建電子郵件的鏈接，首先將光標(biāo)放到需要插入電子郵件鏈接的位置，然后單擊【常用】子面板上的【電子郵件鏈接】按鈕，彈出【E-mail鏈接】對(duì)話框，其余操作與第一種方法相同。,2創(chuàng)建命名錨鏈接 利用命名錨可以在文檔中特定位置上設(shè)置鏈接的目標(biāo)端點(diǎn)。使用命名錨可以跳轉(zhuǎn)到其他文檔中的