《DreamweaverCS5網(wǎng)頁設(shè)計(jì)》課件

1、/ 電子教學(xué)參考資料包DreamweaverCS5網(wǎng)網(wǎng)頁設(shè)計(jì)計(jì)主編趙趙增敏敏目錄第1章DreamweaverCS5使用基礎(chǔ)礎(chǔ)第2章文本與表表格第3章圖像與媒媒體第4章鏈接與框框架第5章層疊樣式式表應(yīng)用用第6章CSS+DIV頁頁面布局局第7章JavaScript行行為應(yīng)用用第8章創(chuàng)建Spry頁頁面第9章Spry表表單驗(yàn)證證第10章章制作ASP動(dòng)態(tài)態(tài)網(wǎng)頁3183第1章DreamweaverCS5使用基礎(chǔ)礎(chǔ)1.1認(rèn)識(shí)DreamweaverCS5工作區(qū)1.2設(shè)置Dreamweaver站點(diǎn)1.3創(chuàng)建和管管理站點(diǎn)點(diǎn)文件41831.1認(rèn)認(rèn)識(shí)識(shí)DreamweaverCS5工作區(qū)區(qū)1.1.1啟動(dòng)Dreamwea

2、verCS5啟動(dòng)DreamweaverCS5：?jiǎn)螕簟伴_始”，指向向“所有有程序”，然后后單擊“AdobeDreamweaverCS5”。在“開始始”菜單單或任務(wù)務(wù)欄中為為這個(gè)軟軟件添加加一個(gè)快快捷方式式。1.1.2工作區(qū)布布局概述述工作區(qū)中中主要包包括以下下元素。歡迎屏幕幕。應(yīng)用程序序欄。文檔工具具欄。標(biāo)準(zhǔn)工具具欄。編碼工具具欄。樣式呈現(xiàn)現(xiàn)工具欄欄文檔窗口口屬性檢查查器標(biāo)簽選擇擇器面板組插入面板板文件面板板第1章目目錄51831.1認(rèn)認(rèn)識(shí)識(shí)DreamweaverCS5工作區(qū)區(qū)1.1.3文檔窗口口文檔窗口口用于顯顯示當(dāng)前前文檔。在使用用文檔窗窗口時(shí)，根據(jù)設(shè)設(shè)計(jì)需要要可選擇擇下列視視圖。設(shè)計(jì)視圖圖

3、代碼視圖圖拆分代碼碼視圖代碼和設(shè)設(shè)計(jì)視圖圖實(shí)時(shí)視圖圖實(shí)時(shí)代碼碼視圖相關(guān)文件件工具欄欄在文檔窗窗口中的的不同視視圖之間間切換如果一次次打開了了多個(gè)文文檔，則則可以采采用層疊疊方式或或平鋪方方式放置置這些文文檔。第1章目目錄61831.1認(rèn)認(rèn)識(shí)識(shí)DreamweaverCS5工作區(qū)區(qū)1.1.4工具欄文檔工具具欄標(biāo)準(zhǔn)工具具欄樣式呈現(xiàn)現(xiàn)工具欄欄瀏覽器導(dǎo)導(dǎo)航工具具欄編碼工具具欄狀態(tài)欄第1章目目錄71831.1認(rèn)認(rèn)識(shí)識(shí)DreamweaverCS5工作區(qū)區(qū)1.1.5檢查器與與面板文件面板板插入面板板屬性檢查查器標(biāo)簽檢查查器CSS樣式面板板第1章目目錄81831.2設(shè)設(shè)置置Dreamweaver站站點(diǎn)1.2.1

4、Dreamweaver工作流程程規(guī)劃和設(shè)設(shè)置站點(diǎn)點(diǎn)組織和管管理站點(diǎn)點(diǎn)文件設(shè)計(jì)網(wǎng)頁頁布局向頁面添添加內(nèi)容容通過手動(dòng)動(dòng)編碼創(chuàng)創(chuàng)建頁面面針對(duì)動(dòng)態(tài)態(tài)內(nèi)容設(shè)設(shè)置Web應(yīng)用程序序創(chuàng)建動(dòng)態(tài)態(tài)頁測(cè)試和發(fā)發(fā)布第1章目目錄91831.2設(shè)設(shè)置置Dreamweaver站站點(diǎn)1.2.2理解Dreamweaver站點(diǎn)在Dreamweaver中，術(shù)語語“站點(diǎn)點(diǎn)”是指指屬于某某個(gè)Web站點(diǎn)的文文檔的本本地或遠(yuǎn)遠(yuǎn)程存儲(chǔ)儲(chǔ)位置。使用Dreamweaver站點(diǎn)可以以組織和和管理所所有Web文檔，并并將站點(diǎn)點(diǎn)上傳到到Web服務(wù)器，跟蹤和和維護(hù)鏈鏈接以及及管理和和共享文文件。為為了充分分利用Dreamweaver的功能，就應(yīng)當(dāng)當(dāng)定義

5、一一個(gè)站點(diǎn)點(diǎn)。若要定義義Dreamweaver站點(diǎn)，只只需設(shè)置置一個(gè)本本地文件件夾。若若要向Web服務(wù)器傳傳輸文件件或開發(fā)發(fā)Web應(yīng)用程序序，還必必須添加加遠(yuǎn)程站站點(diǎn)和測(cè)測(cè)試服務(wù)務(wù)器信息息。Dreamweaver站點(diǎn)由以以下3個(gè)文件夾夾組成。本地根文文件夾遠(yuǎn)程文件件夾測(cè)試服務(wù)務(wù)器文件件夾第1章目目錄101831.2設(shè)設(shè)置置Dreamweaver站站點(diǎn)1.2.3設(shè)置Dreamweaver站點(diǎn)選擇“站站點(diǎn)”“新建建站點(diǎn)”。選擇“站站點(diǎn)”類類別，然然后在“站點(diǎn)名名稱”框框中鍵入入一個(gè)名名稱。在“本地地站點(diǎn)文文件夾”框中鍵鍵入本地地根文件件夾的名名稱。設(shè)置站點(diǎn)點(diǎn)的其他他選項(xiàng)。第1章目目錄111831.

6、3創(chuàng)建和管管理站點(diǎn)文件1.3.1創(chuàng)建新文文檔選擇“文文件”“新建建”。選擇“空空白頁”類別，然后從從“頁面面類型”列選擇擇要?jiǎng)?chuàng)建建的頁面面類型。如果希望望新頁面面包含CSS布局，可可從“布布局”列列中選擇擇一個(gè)預(yù)預(yù)設(shè)計(jì)的的CSS布局；否否則，可可選擇“無”。從“文檔檔類型”下拉列列表中選選擇文檔檔類型。如果已在在“布局局”列中中選擇了了一種CSS布局，則則從“布布局CSS位置”下下拉列表表中為布布局的CSS選擇一個(gè)個(gè)位置。創(chuàng)建頁面面時(shí)，還還可以將將CSS樣式表附附加到新新頁面（與CSS布局無關(guān)關(guān)）。單擊“創(chuàng)創(chuàng)建”按按鈕。第1章目目錄121831.3創(chuàng)建和管管理站點(diǎn)文件1.3.1創(chuàng)建新文文檔選擇

7、“文文件”“新建建”。選擇“空空白頁”類別，然后從從“頁面面類型”列選擇擇要?jiǎng)?chuàng)建建的頁面面類型。如果希望望新頁面面包含CSS布局，可可從“布布局”列列中選擇擇一個(gè)預(yù)預(yù)設(shè)計(jì)的的CSS布局；否否則，可可選擇“無”。從“文檔檔類型”下拉列列表中選選擇文檔檔類型。如果已在在“布局局”列中中選擇了了一種CSS布局，則則從“布布局CSS位置”下下拉列表表中為布布局的CSS選擇一個(gè)個(gè)位置。創(chuàng)建頁面面時(shí)，還還可以將將CSS樣式表附附加到新新頁面（與CSS布局無關(guān)關(guān)）。單擊“創(chuàng)創(chuàng)建”按按鈕。第1章目目錄131831.3創(chuàng)建和管管理站點(diǎn)文件1.3.2保存文檔檔保存文檔檔的步驟驟選擇“文文件”“保存存”，或或單擊文

8、文檔工具具欄上的的“保存存”按鈕鈕，或按按Ctrl+S。瀏覽到要要用來保保存文件件的文件件夾。在“文件件名”框框中，鍵鍵入文件件名。單擊“保保存”按按鈕。保存當(dāng)前前打開的的所有文文檔?；貜?fù)到文文檔上次次保存的的版本。第1章目目錄141831.3創(chuàng)建和管管理站點(diǎn)文件1.3.3打開現(xiàn)有有文檔打開文檔檔的步驟驟選擇“文文件”“打開開”。找到要打打開的文文件并選選中該文文件。單擊“打打開”按按鈕。打開最近近打開過過的文件件。第1章目目錄151831.3創(chuàng)建和管管理站點(diǎn)文件1.3.4管理文件件和文件件夾打開文件件創(chuàng)建文件件或文件件夾刪除文件件或文件件夾移動(dòng)或復(fù)復(fù)制文件件或文件件夾刷新文件件面板第1章目目

9、錄16183第2章文文本與表表格2.1HTML語言基礎(chǔ)礎(chǔ)2.2在頁面中中應(yīng)用文文本2.3用表格顯顯示內(nèi)容容171832.1HTML語言基礎(chǔ)礎(chǔ)2.1.1定義HTML元素一個(gè)HTML文檔包含含各種HTML標(biāo)簽，這這些標(biāo)簽簽是一些些嵌入式式HTML命令，用用以描述述網(wǎng)頁的的結(jié)構(gòu)、外觀和和內(nèi)容等等信息。在HTML語言中，所有標(biāo)標(biāo)簽都必必須用一一對(duì)尖括括號(hào)（即即小于號(hào)號(hào)“”）括起來來，這對(duì)對(duì)尖括號(hào)號(hào)就是HTML語言的定定界符。定義HTML元素要呈現(xiàn)的的內(nèi)容示例網(wǎng)頁設(shè)計(jì)計(jì)標(biāo)準(zhǔn)屬性性idclassstyle第2章目錄181832.1HTML語言基礎(chǔ)礎(chǔ)2.1.2XHTML代碼規(guī)范范簡(jiǎn)介所有標(biāo)簽簽必須使使用相應(yīng)

10、應(yīng)的結(jié)束束標(biāo)簽來來進(jìn)行關(guān)關(guān)閉。標(biāo)簽及其其屬性名名稱必須須使用小小寫字母母。標(biāo)簽的屬屬性值必必須使用用引號(hào)括括起來。標(biāo)簽的所所有屬性性都必須須具有值值。強(qiáng)制XHTML元素。第2章目錄191832.1HTML語言基礎(chǔ)礎(chǔ)第2章目錄201832.1HTML語言基礎(chǔ)礎(chǔ)2.1.4設(shè)置頁面面標(biāo)題和和編碼頁面標(biāo)題題：頁面標(biāo)題題文本文檔編碼碼：設(shè)置頁面面的標(biāo)題題和編碼碼：選擇“修修改”“頁面面屬性”，或者者在屬性性檢查器器中單擊擊“頁面面屬性”。在“頁面面屬性”對(duì)話框框中，單單擊“標(biāo)標(biāo)題/編碼”類類別，如如圖2.1所示。在“標(biāo)題題”框中中，指定定頁面標(biāo)標(biāo)題。也也可以使使用文檔檔工具欄欄來指定定頁面標(biāo)標(biāo)題。從“編

11、碼碼”下拉拉列表框框中選擇擇文檔中中字符所所用的編編碼。單擊“確確定”。第2章目錄211832.1HTML語言基礎(chǔ)礎(chǔ)2.1.4設(shè)置頁面面標(biāo)題和和編碼頁面標(biāo)題題：頁面標(biāo)題題文本文檔編碼碼：設(shè)置頁面面的標(biāo)題題和編碼碼：選擇“修修改”“頁面面屬性”，或者者在屬性性檢查器器中單擊擊“頁面面屬性”。在“頁面面屬性”對(duì)話框框中，單單擊“標(biāo)標(biāo)題/編碼”類類別，如如圖2.1所示。在“標(biāo)題題”框中中，指定定頁面標(biāo)標(biāo)題。也也可以使使用文檔檔工具欄欄來指定定頁面標(biāo)標(biāo)題。從“編碼碼”下拉拉列表框框中選擇擇文檔中中字符所所用的編編碼。單擊“確確定”。第2章目錄221832.1HTML語言基礎(chǔ)礎(chǔ)2.1.5設(shè)置頁面面基本屬

12、屬性body元素的常常用屬性性backgroundbgcolortextlinkalinkvlinkleftmargintopmargin使用“頁頁面屬性性”對(duì)話話框來設(shè)設(shè)置HTML頁面屬性性：選擇“修修改”“頁面面屬性”，或單單擊屬性性檢查器器中的“頁面屬屬性”按按鈕。在“頁面面屬性”對(duì)話框框中，選選擇“外外觀（HTML）”類別別。在“背景景圖像”框中，輸入背背景圖像像的路徑徑。在“背景景”框中中，設(shè)置置頁面的的背景顏顏色。在“文本本”框中中，指定定顯示字字體時(shí)使使用的默默認(rèn)顏色色。在“鏈接接”框中中，指定定應(yīng)用于于鏈接文文本的顏顏色。在“已訪訪問鏈接接”框中中，指定定應(yīng)用于于已訪問問鏈接的

13、的顏色。在“活動(dòng)動(dòng)鏈接”框中，指定當(dāng)當(dāng)鼠標(biāo)指指針在鏈鏈接上單單擊時(shí)應(yīng)應(yīng)用的顏顏色在“左邊邊距”框框中，指指定頁面面左邊距距的大小小。在“上邊邊距”框框中，指指定頁面面上邊距距的大小小。單擊“確確定”。第2章目錄231832.2在在頁頁面中應(yīng)應(yīng)用文本本2.2.1添加文本本若要在HTML頁面中添添加文本本，可以以直接在在文檔窗窗口中鍵鍵入文本本，也可可以從其其他應(yīng)用用程序中中復(fù)制文文本，然然后切換換到Dreamweaver，將插入入點(diǎn)定位位在文檔檔窗口的的設(shè)計(jì)視視圖中，再執(zhí)行行粘貼操操作。使用中文文輸入法法提供的的軟鍵盤盤，還可可以在頁頁面中輸輸入一些些特殊符符號(hào)，例例如五角角星、方塊塊、三角形形

14、、菱形、圓圓形等等。在DreamweaverCS5中，可以以使用“插入”菜單或或面板來來插入特特殊字符符。第2章目錄241832.2在在頁頁面中應(yīng)應(yīng)用文本本2.2.2設(shè)置字體體、字號(hào)號(hào)和顏色色.face屬性指定定文本所所用的字字體名稱稱，可以以是一種種字體或或一個(gè)字字體列表表，字體體名稱之之間用逗逗號(hào)分隔隔。當(dāng)瀏瀏覽器解解析font標(biāo)簽時(shí)，它將優(yōu)優(yōu)先使用用列表中中的第一一種字體體來顯示示文本。如果運(yùn)運(yùn)行瀏覽覽器的計(jì)計(jì)算機(jī)上上安裝了了該字體體，則使使用該字字體；否否則將嘗嘗試列表表中的下下一種字字體。這這種情況況會(huì)繼續(xù)續(xù)下去，直到找找到匹配配的字體體或到達(dá)達(dá)列表結(jié)結(jié)束。如如果未找找到任何何匹配的

15、的字體，則使用用默認(rèn)字字體。size屬性指定定文本的的字體大大?。ㄗ肿痔?hào)），其值為為整數(shù)，取值范范圍為17，默認(rèn)值值為3。也可以以用正負(fù)負(fù)號(hào)來指指定相對(duì)對(duì)于基準(zhǔn)準(zhǔn)字體的的大小。color屬性指定定文本的的顏色，可使用用RGB格式或顏顏色名稱稱來表示示。第2章目錄251832.2在在頁頁面中應(yīng)應(yīng)用文本本2.2.3設(shè)置字符符樣式在HTML中，通過過設(shè)置字字符樣式式可以為為某些字字符設(shè)置置特殊格格式，例例如粗體體、斜體體、下畫畫線、刪刪除線、上標(biāo)以以及下標(biāo)標(biāo)等。第2章目錄261832.2在在頁頁面中應(yīng)應(yīng)用文本本2.2.4設(shè)置段落落與換行行段落是文文本的基基本單位位。通過過使用段段落標(biāo)簽簽p可將文檔檔

16、劃分為為段落，段落間間通過一一個(gè)空行行來分隔隔。p標(biāo)簽在文文檔中定定義一個(gè)個(gè)段落，該段落落與后續(xù)續(xù)內(nèi)容間間有一個(gè)個(gè)空行。語法如如下：.其中，align屬性指定定段落文文本的對(duì)對(duì)齊方式式，有以以下取值值：left（左對(duì)齊齊，默認(rèn)認(rèn)值）、center（居中對(duì)對(duì)齊）、right（右對(duì)齊齊）、justify（兩端對(duì)對(duì)齊）。在Dreamweaver中將一段段文字設(shè)設(shè)置為段段落。如果只需需要換行行而不想想產(chǎn)生新新的段落落，則可可以使用用換行標(biāo)標(biāo)簽br標(biāo)簽強(qiáng)制制當(dāng)前行行中斷，使后續(xù)續(xù)內(nèi)容顯顯示在下下一行。語法如如下：第2章目錄271832.2在在頁頁面中應(yīng)應(yīng)用文本本2.2.5設(shè)置標(biāo)題題格式在HTML中，可使

17、使用h1、h2、h3、h4、h5和h6標(biāo)簽在文文檔中設(shè)設(shè)置標(biāo)題題格式，其中h1設(shè)置的標(biāo)標(biāo)題字號(hào)號(hào)最大，h2次之，h3更次之，以此類類推，h6設(shè)置的標(biāo)標(biāo)題字號(hào)號(hào)最小。語法如如下：. .其中，align屬性指定定標(biāo)題文文本的對(duì)對(duì)齊方式式。第2章目錄281832.2在在頁頁面中應(yīng)應(yīng)用文本本2.2.6插入水平平線在HTML中，可以以使用hr標(biāo)簽在文文檔中插插入一條條水平線線，語法法如下：align屬性設(shè)置置水平線線的對(duì)齊齊方式，其取值值可為center（默認(rèn)值值）、left和right；color屬性設(shè)置置水平線線的線條條顏色，可用RGB格式或顏顏色名稱稱表示；noshade屬性指定定在瀏覽覽器中呈呈

18、現(xiàn)為一一條無陰陰影的實(shí)實(shí)線，其其值為該該屬性名名稱本身身；size屬性指定定水平線線的高度度；width屬性指定定水平線線的長(zhǎng)度度，可為為整數(shù)（像素）或百分分比（相相對(duì)于頁頁面寬度度）。創(chuàng)建水平平線：將插入點(diǎn)點(diǎn)放在要要插入水水平線的的位置。選擇“插插入”“HTML”“水平線”。修改水平平線。在文檔窗窗口中，選擇水水平線。選擇“窗窗口”“屬性性”打開開屬性檢檢查器，然后根根據(jù)需要要對(duì)水平平線的以以下屬性性進(jìn)行修修改：ID寬高高對(duì)對(duì)齊陰陰影第2章目錄291832.2在在頁頁面中應(yīng)應(yīng)用文本本2.2.7div與span標(biāo)簽div標(biāo)簽在頁頁面中定定義一個(gè)個(gè)可顯示示HTML內(nèi)容的區(qū)區(qū)域，使使用div標(biāo)簽可

19、把把頁面分分割為獨(dú)獨(dú)立的不不同部分分。語法法如下：.align屬性指定定文本在在區(qū)域內(nèi)內(nèi)的對(duì)齊齊方式。span標(biāo)簽可用用于組合合文檔中中的行內(nèi)內(nèi)元素。語法如如下：.span元素是一一個(gè)行內(nèi)內(nèi)元素，它只能能容納文文本或者者其他行行內(nèi)元素素，在它它的前后后不會(huì)換換行。span元素本身身并沒有有任何格格式表現(xiàn)現(xiàn)，只能能通過設(shè)設(shè)置它的的id、class或style屬性來對(duì)對(duì)對(duì)其額額外的樣樣式。當(dāng)當(dāng)使用其其他行內(nèi)內(nèi)元素都都不合適適時(shí)，可可考慮使使用span元素。第2章目錄301832.2在在頁頁面中應(yīng)應(yīng)用文本本2.2.8設(shè)置列表表格式項(xiàng)目列表表用ul和li標(biāo)簽定義義，語法法如下。條目1條目2. .編號(hào)列

20、表表用ol和li標(biāo)簽定義義，語法法如下。條目1條目2. .第2章目錄311832.3使使用用表格顯顯示內(nèi)容容2.3.1創(chuàng)建基本本表格定義表格格的基本本語法表格標(biāo)題題數(shù)據(jù)項(xiàng)數(shù)據(jù)項(xiàng). .數(shù)據(jù)項(xiàng)數(shù)據(jù)項(xiàng)數(shù)據(jù)項(xiàng). .數(shù)據(jù)項(xiàng). .在DreamweaverCS5中，插入入一個(gè)表表格并對(duì)對(duì)其基本本屬性進(jìn)進(jìn)行設(shè)置置。第2章目錄321832.3使使用用表格顯顯示內(nèi)容容2.3.2設(shè)置表格格的屬性性在HTML頁面中，可以通通過table標(biāo)簽的屬屬性對(duì)表表格的格格式進(jìn)行行設(shè)置。在Dreamweaver中，可以以利用屬屬性檢查查器對(duì)表表格的常常用屬性性進(jìn)行設(shè)設(shè)置。第2章目錄331832.3使使用用表格顯顯示內(nèi)容容2.3.

21、3表格基本本操作選擇表格格元素調(diào)整表格格、列和和行的大大小添加/刪除行和和列復(fù)制、粘粘貼和刪刪除單元元格2.3.4設(shè)置單元元格、行行或列的的屬性除了從整整體上對(duì)對(duì)表格的的屬性進(jìn)進(jìn)行設(shè)置置之外，也可以以根據(jù)需需要對(duì)表表格中的的某些行行、列或或單元格格的屬性性進(jìn)行設(shè)設(shè)置。表格行是是通過tr標(biāo)簽定義義的。通通過設(shè)置置tr標(biāo)簽的屬屬性值可可以對(duì)行行內(nèi)包含含的所有有單元格格的格式式進(jìn)行設(shè)設(shè)置。tr標(biāo)簽的常常用屬性性表格行中中的單元元格是通通過td或th標(biāo)簽定義義的。通通過設(shè)置置這些標(biāo)標(biāo)簽的屬屬性值可可以對(duì)選選定單元元格的格格式進(jìn)行行設(shè)置。td和th標(biāo)簽的常常用屬性性在DreamweaverCS5中，可使

22、使用屬性性檢查器器設(shè)置單單元格、行或列列屬性。第2章目錄341832.3使使用用表格顯顯示內(nèi)容容2.3.5合并或拆拆分單元元格在HTML中，表格格中的某某個(gè)單元元格是用用td或th標(biāo)簽定義義，通過過設(shè)置這這兩個(gè)標(biāo)標(biāo)簽的colspan或rowspan屬性，可可以指定定該單元元格跨過過的列數(shù)數(shù)或行數(shù)數(shù)，從而而實(shí)現(xiàn)單單元格的的合并或或拆分。在DreamweaverCS5中，可以以使用屬屬性檢查查器或“修改”“表表格”子子菜單中中的命令令來合并并或拆分分單元格格。第2章目錄35183第3章圖圖像與媒媒體3.1圖像應(yīng)用用3.2媒體應(yīng)用用361833.1圖像應(yīng)用用3.1.1常用圖像像格式GIF圖像格式式：

23、GIF是GraphicsInterchangeFormat的縮寫，意為“圖像互互換格式式”，其其文件擴(kuò)擴(kuò)展名為為.gif，這是CompuServe公司在1987年開發(fā)的的圖像文文件格式式。JPEG圖像格式式：JPEG是JointPhotographicExpertsGroup的縮寫，意為“聯(lián)合圖圖像專家家組”，其文件件擴(kuò)展名名為.jpg或.jpeg，它可包包含數(shù)百百萬種顏顏色，用用于攝影影或連續(xù)續(xù)色調(diào)圖圖像的較較好格式式。PNG圖像格式式：PNG是PortableNetwork GraphicFormat的縮寫，意為“可移植植網(wǎng)絡(luò)圖圖形”，其文件件擴(kuò)展名名為.png，這是一一種替代代GIF格式

24、的無無專利權(quán)權(quán)限制的的格式，它包括括對(duì)索引引色、灰灰度、真真彩色圖圖像以及及alpha通道透明明度的支支持。PNG是AdobeFireworks軟件固有有的文件件格式。第3章目錄371833.1圖像應(yīng)用用3.1.2插入圖像像在HTML中，可使使用img標(biāo)簽在網(wǎng)網(wǎng)頁中插插入一個(gè)個(gè)圖像，語法如如下：src指定圖像像文件的的位置。alt指定替代代圖像的的文本信信息，在在瀏覽器器不能顯顯示圖像像時(shí)顯示示出來或或圖像加加載時(shí)間間過長(zhǎng)時(shí)時(shí)先顯示示出來。當(dāng)鼠標(biāo)標(biāo)指針懸懸停在圖圖像上方方時(shí)顯示示文本信信息。longdesc與alt屬性類似似，但它它允許更更長(zhǎng)的描描述性文文字。height和width分別指定定

25、圖像的的寬度和和高度。border指定圖像像的邊框框?qū)挾?，以像素素為單位位。hspace和vspace指定圖像像與文本本之間在在水平方方向和垂垂直方向向上的間間距。align指定圖像像與文本本的對(duì)齊齊方式或或繞排方方式。使用Dreamweaver在頁面中中插入圖圖像。第3章目錄381833.1圖像應(yīng)用用3.1.3設(shè)置圖像像的屬性性在HTML中，使用用img標(biāo)簽的屬屬性設(shè)置置圖像的的屬性。在DreamweaverCS5中，使用用圖像屬屬性檢查查器來設(shè)設(shè)置圖像像的屬性性。第3章目錄391833.1圖像應(yīng)用用3.1.4插入圖像像占位符符圖像占位位符是在在準(zhǔn)備好好將最終終圖形添添加到網(wǎng)網(wǎng)頁前使使用的圖

26、圖形。插入圖像像占位符符：在文檔窗窗口中，將插入入點(diǎn)放置置在要插插入占位位符圖形形的位置置。選擇“插插入”“圖像像對(duì)象”“圖圖像占位位符”。當(dāng)出現(xiàn)“圖像占占位符”對(duì)話框框時(shí)，在在“名稱稱”框中中輸入要要作為圖圖像占位位符的標(biāo)標(biāo)簽顯示示的文本本。在“寬度度”和“高度”框中，鍵入設(shè)設(shè)置圖像像大小的的數(shù)值。設(shè)置占位位符的顏顏色。指定替換換文本，然后單單擊“確確定”。替換圖像像占位符符在文檔窗窗口中雙雙擊圖像像占位符符，然后后在屬性性檢查器器中單擊擊“源文文件”文文本框旁旁的文件件夾圖標(biāo)標(biāo)，在“選擇圖圖像源文文件”對(duì)對(duì)話框中中，導(dǎo)航航到要用用其替換換圖像占占位符的的圖像文文件，單單擊“確確定”按按鈕。

27、第3章目錄401833.1圖像應(yīng)用用3.1.5插入鼠標(biāo)標(biāo)經(jīng)過圖圖像在文檔窗窗口中，將插入入點(diǎn)放置置在要顯顯示鼠標(biāo)標(biāo)經(jīng)過圖圖像的位位置。選擇“插插入”“圖像像對(duì)象”“鼠鼠標(biāo)經(jīng)過過圖像”。在“插入入鼠標(biāo)經(jīng)經(jīng)過圖像像”對(duì)話話框中，對(duì)以下下選項(xiàng)進(jìn)進(jìn)行設(shè)置置。圖像名稱稱：鼠標(biāo)標(biāo)經(jīng)過圖圖像的名名稱。原始圖像像：頁面面加載時(shí)時(shí)要顯示示的圖像像。在文文本框中中輸入路路徑，或或單擊“瀏覽”，然后后選擇該該圖像。鼠標(biāo)經(jīng)過過圖像：鼠標(biāo)指指針滑過過原始圖圖像時(shí)要要顯示的的圖像。在文本本框中輸輸入路徑徑，或單單擊“瀏瀏覽”，然后選選擇該圖圖像。預(yù)載鼠標(biāo)標(biāo)經(jīng)過圖圖像：將將圖像預(yù)預(yù)先加載載瀏覽器器的緩存存中，以以便用戶戶將

28、鼠標(biāo)標(biāo)指針滑滑過圖像像時(shí)不會(huì)會(huì)發(fā)生延延遲。替換文本本：這是是一種（可選）文本，為使用用只顯示示文本的的瀏覽器器的訪問問者描述述圖像。按下時(shí)，前往的的URL：用戶單單擊鼠標(biāo)標(biāo)經(jīng)過圖圖像時(shí)要要打開的的文件。輸入路路徑或單單擊“瀏瀏覽”并并選擇該該文件。第3章目錄411833.2媒媒體體應(yīng)用3.2.1創(chuàng)建字幕幕在HTML中，可使使用marquee標(biāo)簽在頁頁面中插插入一個(gè)個(gè)字幕，以水平平或垂直直滾動(dòng)方方式顯示示內(nèi)容。語法如如下：. .behavior指定字幕幕動(dòng)畫的的類型。bgcolor指定字幕幕的背景景顏色。direction指定字幕幕內(nèi)容的的移動(dòng)方方向。height和width指定字幕幕的高度度和

29、寬度度。hspace和vspace指定字幕幕的水平平邊距和和垂直邊邊距。loop指定字幕幕的滾動(dòng)動(dòng)次數(shù)。scrollamount指定字幕幕內(nèi)容每每次移動(dòng)動(dòng)的像素素?cái)?shù)。scrolldealy指定字幕幕內(nèi)容兩兩次移動(dòng)動(dòng)之間的的時(shí)間間間隔（以以毫秒為為單位）。第3章目錄421833.2媒媒體體應(yīng)用3.2.2插入聲音音在HTML中，可使使用bgsound標(biāo)簽在網(wǎng)網(wǎng)頁中插插入背景景音樂。bgsound標(biāo)簽僅適適用于IE瀏覽器，其語法法如下：src指定要播播放的聲聲音文件件的URL。loop指定聲音音播放的的次數(shù)。volume指定音量量的高低低。balance設(shè)置把將將聲音分分成左聲聲道和右右聲道兩兩部分

30、。第3章目錄431833.2媒媒體體應(yīng)用3.2.2插入聲音音用embed標(biāo)簽在網(wǎng)網(wǎng)頁中嵌嵌入聲音音文件：src指定要播播放的媒媒體（如如聲音、視頻）文件的的位置align指定嵌入入對(duì)象與與相鄰文文本的對(duì)對(duì)齊方式式。autostart指定聲音音文件是是否自動(dòng)動(dòng)開始播播放。loop指定是否否循環(huán)播播放或播播放的次次數(shù)。starttime和endtime分別指定定聲音開開始播放放和結(jié)束束播放的的時(shí)間。pluginspage指定用戶戶可以從從中下載載插件的的網(wǎng)站的的完整URL。heigh和width分別指定定嵌入對(duì)對(duì)象的高高度和寬寬度。volume指定音量量的高低低。hidden指定是否否隱藏嵌嵌入對(duì)

31、象象。在Dreamweaver中，可通通過插入入插件的的方法在在網(wǎng)頁中中添加聲聲音和視視頻等媒媒體內(nèi)容容，此時(shí)時(shí)將自動(dòng)動(dòng)生成embed標(biāo)簽并對(duì)對(duì)其屬性性進(jìn)行設(shè)設(shè)置。第3章目錄441833.2媒媒體體應(yīng)用3.2.3插入視頻頻使用embed標(biāo)簽不僅僅可以在在網(wǎng)頁中中嵌入聲聲音文件件，也可可以插入入視頻文文件。為為此，應(yīng)應(yīng)將embed標(biāo)簽的src屬性設(shè)置置為視頻頻文件的的位置，并通過過height和width屬性設(shè)置置媒體播播放器插插件的高高度和寬寬度，根根據(jù)需要要也可以以對(duì)插件件的其他他屬性進(jìn)進(jìn)行設(shè)置置。3.2.4插入ActiveX控件在頁面中中插入ActiveX控件可使使用object標(biāo)簽來實(shí)實(shí)

32、現(xiàn)。. .object標(biāo)簽的常常用屬性性alignarchiveborderclassidcodebasecodetypedatadeclarehspace和vspacenamestandbytypeusemap為了向正正在加載載的對(duì)象象（如IE瀏覽器中中的ActiveX控件）傳傳遞參數(shù)數(shù)，可在在object元素中嵌嵌套使用用param標(biāo)簽：name和value屬性分別別指定參參數(shù)的名名稱和值值。第3章目錄451833.2媒媒體體應(yīng)用3.2.5插入SWF文件SWF文件（.swf）是Flash源文件（.fla）的編譯譯版本，它已進(jìn)進(jìn)行了優(yōu)優(yōu)化，適適合于在在Web上查看，此類文文件可以以在瀏覽覽器

33、中播播放，也也可以在在Dreamweaver中進(jìn)行預(yù)預(yù)覽。在HTML中，可使使用object標(biāo)簽在頁頁面中插插入SWF文件，為為此應(yīng)將將其classid屬性設(shè)置置為“clsid:D27CDB6E-AE6D-11cf-96B8-444553540000”。在Dreamweaver中，可使使用菜單單命令在在頁面中中插入SWF文件。在Dreamweaver中插入SWF文件并設(shè)設(shè)置屬性性。第3章目錄461833.2媒媒體體應(yīng)用3.2.6插入FLV文件FLV文件（.flv）是一種種視頻文文件，它它包含經(jīng)經(jīng)過編碼碼的音頻頻和視頻頻數(shù)據(jù)，可通過過FlashPlayer進(jìn)行傳送送。如果果有QuickTime或

34、Windows Media視頻文件件，則可可以使用用編碼器器（如AdobeMediaEncoder CS5）將視頻頻文件轉(zhuǎn)轉(zhuǎn)換為FLV文件。在在HTML中，可使使用object標(biāo)簽將FLV文件插入入頁面，為此應(yīng)應(yīng)將其classid屬性設(shè)置置為“clsid:D27CDB6E-AE6D-11cf-96B8-444553540000”。在DreamweaverCS5中，可以以向網(wǎng)頁頁中輕松松添加FLV視頻。在在開始之之前，必必須有一一個(gè)經(jīng)過過編碼的的FLV文件。Dreamweaver還將插入入一個(gè)顯顯示FLV文件的SWF組件；當(dāng)當(dāng)在瀏覽覽器中查查看時(shí)，此組件件顯示所所選的FLV文件以及及一組播播放控

35、件件。DreamweaverCS5提供了以以下兩個(gè)個(gè)選項(xiàng)，用于將將FLV視頻傳送送給站點(diǎn)點(diǎn)訪問者者。累進(jìn)式下下載視頻頻流視頻第3章目錄471833.2媒媒體體應(yīng)用3.2.7插入ShockwaveAdobeShockwave是Web上用于交交互式多多媒體的的一種標(biāo)標(biāo)準(zhǔn)，并并且是一一種壓縮縮格式，可使在在AdobeDirector中創(chuàng)建的的媒體文文件能夠夠被大多多數(shù)常用用瀏覽器器快速下下載和播播放。在HTML語言中，可以使使用object標(biāo)簽將Shockwave影片插入入頁面中中，為此此應(yīng)將該該標(biāo)簽的的classid屬性設(shè)置置為“clsid:166B1BCA-3F9C-11CF-8075-4445

36、53540000”。在DreamweaverCS5中，可使使用“插插入”“媒體體”“Shockwave”菜單命令令將Shockwave影片輕松松地插入入到文檔檔中。第3章目錄481833.2媒媒體體應(yīng)用3.2.8插入Java appletJava applet是用Java語言編寫寫的一些些小型應(yīng)應(yīng)用程序序，它們們可以嵌嵌入網(wǎng)頁頁中，并并能夠產(chǎn)產(chǎn)生特殊殊的效果果。包含含Java applet的網(wǎng)頁被被稱為Java-Powered頁。當(dāng)站站點(diǎn)瀏覽覽者訪問問這樣的的網(wǎng)頁時(shí)時(shí)，Applet將被下載載到客戶戶碰見計(jì)計(jì)算機(jī)上上執(zhí)行。在Java applet中，可以以繪制圖圖形、控控制文本本的字體體和顏色色

37、、播放放聲音和和動(dòng)畫以以及實(shí)現(xiàn)現(xiàn)人機(jī)交交互及網(wǎng)網(wǎng)絡(luò)交流流等功能能。在HTML中，可使使用applet標(biāo)簽在頁頁面中定定義嵌入入的applet。語法格格式如下下：. .applet元素的常常用屬性性alignaltarchivecodecodebaseheight和widthhspace和vspacename在Dreamweaver中，可以以使用選選擇“插插入”“媒體體”“Applet”菜單命令令將Java applet輕松地插插入HTML文檔中，然后使使用屬性性檢查器器對(duì)相關(guān)關(guān)參數(shù)進(jìn)進(jìn)行設(shè)置置。第3章目錄49183第4章鏈鏈接與框框架4.1創(chuàng)建鏈接接4.2使用框架架501834.1創(chuàng)建鏈接接4

38、.1.1鏈接概述述鏈接是指指從一個(gè)個(gè)網(wǎng)頁指指向一個(gè)個(gè)目標(biāo)文文檔的連連接關(guān)系系，這個(gè)個(gè)目標(biāo)文文檔可以以是另一一個(gè)網(wǎng)頁頁，也可可以是同同一網(wǎng)頁頁上的不不同位置置，還可可以是一一個(gè)圖片片、一個(gè)個(gè)電子郵郵件地址址、一個(gè)個(gè)Word文檔或一一個(gè)Flash影片文件件等，甚甚至可以以是一個(gè)個(gè)程序文文件。目目標(biāo)文檔檔與包含含鏈接的的起點(diǎn)網(wǎng)網(wǎng)頁可以以位于同同一個(gè)服服務(wù)器中中，也可可以分別別位于不不同服務(wù)務(wù)器中。鏈接的類類型鏈接到其其他文檔檔或文件件（如圖圖像、影影片或聲聲音文件件）的鏈鏈接。命名錨記記鏈接，此類鏈鏈接跳轉(zhuǎn)轉(zhuǎn)至文檔檔內(nèi)的特特定位置置。電子郵件件鏈接，此類鏈鏈接新建建一個(gè)已已填好收收件人地地址的空空白

39、電子子郵件?？真溄雍秃湍_本鏈鏈接，此此類鏈接接用于在在對(duì)象上上附加行行為，或或者創(chuàng)建建執(zhí)行JavaScript代碼的鏈鏈接。第4章目錄511834.1創(chuàng)建鏈接接4.1.2鏈接路徑徑的類型型每個(gè)網(wǎng)頁頁都有一一個(gè)唯一一地址，稱作統(tǒng)統(tǒng)一資源源定位器器（URL，Uniform Resource Locator）。鏈接接路徑是是指從作作為鏈接接起點(diǎn)的的文檔到到作為鏈鏈接目標(biāo)標(biāo)的文檔檔或資源源之間的的文件路路徑。鏈接路徑徑的類型型絕對(duì)路徑徑：提供供所鏈接接目標(biāo)文文檔的完完整URL，其中包包括所使使用的協(xié)協(xié)議（對(duì)對(duì)于網(wǎng)頁頁通常為為http:/或file:/）。文檔相對(duì)對(duì)路徑：基本思思想是省省略掉對(duì)對(duì)于當(dāng)前前

40、文檔和和所鏈接接的文檔檔或資源源都相同同的絕對(duì)對(duì)路徑部部分，而而只提供供不同的的路徑部部分。站點(diǎn)根目目錄相對(duì)對(duì)路徑：站點(diǎn)根根目錄相相對(duì)路徑徑描述從從站點(diǎn)的的根文件件夾到文文檔的路路徑。如如果在處處理使用用多個(gè)服服務(wù)器的的大型Web站點(diǎn)，或或者在使使用承載載多個(gè)站站點(diǎn)的服服務(wù)器，則可能能需要使使用這些些路徑。第4章目錄521834.1創(chuàng)建鏈接接4.1.3鏈接到網(wǎng)網(wǎng)頁或其其他文件件在HTML中，可以以使用a標(biāo)簽在網(wǎng)網(wǎng)頁中創(chuàng)創(chuàng)建從圖圖像、對(duì)對(duì)象或文文本到其其他網(wǎng)頁頁或文件件的鏈接接，語法法格式如如下：. .href指定要鏈鏈接的目目標(biāo)文檔檔或資源源的URLname指定網(wǎng)頁頁內(nèi)的特特定位置置的名稱稱，

41、稱為為命名錨錨記或錨錨點(diǎn)target指定一個(gè)個(gè)窗口或或框架的的名稱，目標(biāo)文文檔將在在該窗口口或框架架中打開開title指定鼠標(biāo)標(biāo)指針指指向鏈接接文本或或圖像時(shí)時(shí)所顯示示的提示示信息第4章目錄531834.1創(chuàng)建鏈接接4.1.4鏈接到網(wǎng)網(wǎng)頁中的的特定位位置若要跳轉(zhuǎn)轉(zhuǎn)到網(wǎng)頁頁中的特特定位置置，可以以通過創(chuàng)創(chuàng)建到命命名錨記記的鏈接接來實(shí)現(xiàn)現(xiàn)。這個(gè)個(gè)過程分分為兩步步：首先先創(chuàng)建命命名錨記記以標(biāo)識(shí)識(shí)該位置置，然后后創(chuàng)建到到該命名名錨記的的鏈接。創(chuàng)建命名名錨記鏈接到命命名錨記記第4章目錄541834.1創(chuàng)建鏈接接4.1.5創(chuàng)建電子子郵件鏈鏈接當(dāng)單擊電電子郵件件鏈接時(shí)時(shí)，將使使用與用用戶瀏覽覽器相關(guān)關(guān)聯(lián)的電

42、電子郵件件客戶端端程序（如Outlook或Foxmail）打開一一個(gè)新的的空白信信息窗口口。在電電子郵件件消息窗窗口中，“收件件人”框框自動(dòng)更更新為顯顯示電子子郵件鏈鏈接中指指定的地地址。根根據(jù)需要要，也可可以在其其他文本本框中填填充相應(yīng)應(yīng)的信息息。創(chuàng)建電子子郵件鏈鏈接mailto:收件人地地址?subject=郵件主題題&cc=抄送地址址&bcc=密送地址址&body=正文內(nèi)容容第4章目錄551834.1創(chuàng)建鏈接接4.1.6創(chuàng)建空鏈鏈接和腳腳本鏈接接空鏈接是是未指派派目標(biāo)文文檔的鏈鏈接，可可用于向向頁面上上的對(duì)象象或文本本附加行行為。例例如，可可以向空空鏈接附附加一個(gè)個(gè)行為，以便在在指針滑滑

43、過該鏈鏈接時(shí)會(huì)會(huì)交換圖圖像或顯顯示絕對(duì)對(duì)定位的的元素（稱為AP元素）。創(chuàng)建空鏈鏈接腳本鏈接接可用于于執(zhí)行JavaScript代碼或調(diào)調(diào)用JavaScript函數(shù)，它它能夠在在不離開開當(dāng)前網(wǎng)網(wǎng)頁的情情況下為為訪問者者提供有有關(guān)某項(xiàng)項(xiàng)的附加加信息。腳本鏈鏈接還可可用于在在訪問者者單擊特特定項(xiàng)時(shí)時(shí)，執(zhí)行行計(jì)算、驗(yàn)證表表單和完完成其他他處理任任務(wù)。創(chuàng)建腳本本鏈接第4章目錄561834.1創(chuàng)建鏈接接4.1.7自動(dòng)更新新鏈接每當(dāng)在本本地站點(diǎn)點(diǎn)內(nèi)移動(dòng)動(dòng)或重命命名文檔檔時(shí)，Dreamweaver都可以更更新起自自以及指指向該文文檔的鏈鏈接。在在將整個(gè)個(gè)站點(diǎn)（或其中中完全獨(dú)獨(dú)立的一一個(gè)部分分）存儲(chǔ)儲(chǔ)在本地地磁盤

44、上上時(shí)，此此項(xiàng)功能能最適用用。Dreamweaver不更改遠(yuǎn)遠(yuǎn)程文件件夾中的的文件，除非將將這些本本地文件件放在或或者存回回到遠(yuǎn)程程服務(wù)器器上。啟用自動(dòng)動(dòng)鏈接更更新功能能：選擇“編編輯”“首選選參數(shù)”。在“首選選參數(shù)”對(duì)話框框中，從從左側(cè)的的“分類類”列表表中選擇擇“常規(guī)規(guī)”。在“常規(guī)規(guī)”首選選參數(shù)的的“文檔檔選項(xiàng)”部分，從“移移動(dòng)文件件時(shí)更新新鏈接”下拉列列表框選選擇“總總是”第4章目錄571834.1創(chuàng)建鏈接接4.1.8創(chuàng)建緩存存文件為了加快快鏈接的的更新過過程，可可Dreamweaver中創(chuàng)建一一個(gè)緩存存文件，用以存存儲(chǔ)有關(guān)關(guān)本地文文件夾中中所有鏈鏈接的信信息。在在添加、更改或或刪除本本

45、地站點(diǎn)點(diǎn)上的鏈鏈接時(shí)，該緩存存文件以以不可見見的方式式進(jìn)行更更新。創(chuàng)建緩存存文件：選擇“站站點(diǎn)”“管理理站點(diǎn)”。在“管理理站點(diǎn)”對(duì)話框框中，選選擇一個(gè)個(gè)站點(diǎn)，然后單單擊“編編輯”。在“站點(diǎn)點(diǎn)設(shè)置”對(duì)話框框中，展展開“高高級(jí)設(shè)置置”并選選擇“本本地信息息”類別別。在“本地地信息”類別中中，選擇擇“啟用用緩存”。第4章目錄581834.1創(chuàng)建鏈接接4.1.9在站點(diǎn)范范圍內(nèi)更更改鏈接接在文件面面板的本本地視圖圖中，選選擇一個(gè)個(gè)文件。若更改改的是電電子郵件件鏈接、FTP鏈接、空空鏈接或或腳本鏈鏈接，則則不需要要選擇文文件。選擇“站站點(diǎn)”“更改改整個(gè)站站點(diǎn)鏈接接”。在“更改改整個(gè)站站點(diǎn)鏈接接”對(duì)話話框中

46、，對(duì)以下下選項(xiàng)進(jìn)進(jìn)行設(shè)置置。更改所有有的鏈接接變成新鏈鏈接第4章目錄591834.2使使用用框架4.2.1理解框架架與框架架集框架（frame）是瀏覽覽器窗口口中的一一個(gè)區(qū)域域，可用用來顯示示與瀏覽覽器窗口口其余部部分所顯顯示內(nèi)容容無關(guān)的的HTML文檔。框框架提供供將一個(gè)個(gè)瀏覽器器窗口劃劃分為多多個(gè)區(qū)域域、每個(gè)個(gè)區(qū)域都都可以顯顯示不同同HTML文檔的方方法。使使用框架架的最常常見場(chǎng)景景是，一一個(gè)框架架顯示包包含導(dǎo)航航控件的的文檔，而另一一個(gè)框架架顯示包包含內(nèi)容容的文檔檔?？蚣芗╢rameset）是一個(gè)個(gè)HTML文檔，可可用于定定義一組組框架的的布局和和屬性，包括框框架的數(shù)數(shù)目、框框架的大大小

47、和位位置以及及最初在在每個(gè)框框架中顯顯示的頁頁面的URL?？蚣芗募颈旧聿话谠跒g覽器器中顯示示的HTML內(nèi)容（noframes部分除外外），它它只是向向?yàn)g覽器器提供應(yīng)應(yīng)如何顯顯示一組組框架以以及在這這些框架架中應(yīng)顯顯示哪些些文檔的的有關(guān)信信息。若要在瀏瀏覽器中中查看一一組框架架，可輸輸入框架架集文件件的URL；瀏覽器器隨后打打開要顯顯示在這這些框架架中的相相應(yīng)文檔檔。通常常將一個(gè)個(gè)站點(diǎn)的的框架集集文件命命名為index.html，以便當(dāng)當(dāng)訪問者者未指定定文件名名時(shí)默認(rèn)認(rèn)顯示該該文件。第4章目錄601834.2使使用用框架4.2.2框架網(wǎng)頁頁基本結(jié)結(jié)構(gòu)框架網(wǎng)頁頁標(biāo)題. .此網(wǎng)頁使使用

48、了框框架，但但您的瀏瀏覽器不不支持框框架。第4章目錄611834.2使使用用框架4.2.3創(chuàng)建框架架和框架架集使用DreamweaverCS5創(chuàng)建框架架集時(shí)，既可以以從若干干預(yù)定義義的框架架集中選選擇，也也可以自自己設(shè)計(jì)計(jì)框架集集。當(dāng)選選擇預(yù)定定義的框框架集時(shí)時(shí)，只能能在文檔檔窗口的的設(shè)計(jì)視視圖中插插入預(yù)定定義的框框架集，這將會(huì)會(huì)設(shè)置創(chuàng)創(chuàng)建布局局所需的的所有框框架集和和框架，它是迅迅速創(chuàng)建建基于框框架的布布局的最最簡(jiǎn)單方方法。此此外，還還可以通通過向文文檔窗口口中添加加“拆分分器”來來設(shè)計(jì)自自己的框框架集。創(chuàng)建空的的預(yù)定義義框架集集創(chuàng)建預(yù)定定義框架架集并顯顯示現(xiàn)有有文檔第4章目錄621834.

49、2使使用用框架4.2.4框架基本本操作在框架中中打開文文檔拆分框架架調(diào)整框架架大小刪除框架架4.2.5選擇框架架和框架架集若要更改改框架或或框架集集的屬性性，首先先需要選選擇希望望更改的的框架或或框架集集。既可可以在文文檔窗口口中選擇擇框架或或框架集集，也可可以通過過框架面面板進(jìn)行行選擇。在文檔窗窗口的設(shè)設(shè)計(jì)視圖圖中選定定一個(gè)框框架后，其邊框框被虛線線環(huán)繞；在選定定了一個(gè)個(gè)框架集集后，該該框架集集內(nèi)各框框架的所所有邊框框都被淡淡顏色的的虛線環(huán)環(huán)繞。在框架面面板中選選擇框架架或框架架集。第4章目錄631834.2使使用用框架4.2.6保存框架架和框架架集文件件保存框架架集文件件：在框架面面板或文

50、文檔窗口口中，選選擇框架架集。若要保存存框架集集文件，可選擇擇“文件件”“保存框框架集”。若要將框框架集文文件另存存為新文文件，可可選擇“文件”“框框架集另另存為”。保存框架架中顯示示的文檔檔：?jiǎn)螕粼摽蚩蚣軆?nèi)部部。若要保存存框架內(nèi)內(nèi)顯示的的文檔，可選擇擇“文件件”“保存框框架”。若要將框框架內(nèi)顯顯示的文文檔另存存為新文文件，可可選擇“文件”“框框架另存存為”。若要保存存與一組組框架關(guān)關(guān)聯(lián)的所所有文件件，可選選擇“文文件”“保存存所有框框架”。第4章目錄641834.2使使用用框架4.2.7設(shè)置框架架集的屬屬性在HTML中，frameset標(biāo)簽用于于定義框框架集的的結(jié)構(gòu)，通過設(shè)設(shè)置該標(biāo)標(biāo)簽的屬屬

51、性可以以指定框框架集的的顯示方方式。frameset標(biāo)簽的常常用屬性性cols：指定框框架的列列寬。rows：指定框框架的行行高。border：指定邊邊框的寬寬度。bordercolor：指定邊邊框的顏顏色。frameborder：指定框框架周圍圍是否顯顯示三維維邊框。framespacing：指定各各框架之之間的間間隔。在DreamweaverCS5中，可以以使用屬屬性檢查查器來查查看和設(shè)設(shè)置大多多數(shù)框架架集屬性性，包括括框架集集標(biāo)題、邊框以以及框架架大小。第4章目錄651834.2使使用用框架4.2.8設(shè)置框架架的屬性性一個(gè)框架架集由若若干個(gè)框框架組成成，每個(gè)個(gè)框架都都可以顯顯示一個(gè)個(gè)文檔

52、。在HTML中，通過過設(shè)置frame標(biāo)簽的屬屬性可以以指定在在框架內(nèi)內(nèi)顯示哪哪個(gè)文檔檔，也可可以控制制該框架架的顯示示效果。frame標(biāo)簽的常常用屬性性src：指定在在該框架架中顯示示的文檔檔的URLname：指定框框架的名名稱border：指定邊邊框的寬寬度bordercolor：指定邊邊框的顏顏色frameborder：指定框框架周圍圍是否顯顯示邊框框。frameheight：指定框框架內(nèi)容容與上、下邊框框的間距距。framewidth：指定框框架內(nèi)容容與左、右邊框框的間距距。scrolling：指定是是否為框框架添加加滾動(dòng)條條。norisize：若指定定了該項(xiàng)項(xiàng)，則不不能調(diào)整整框架的的大

53、小。在DreamweaverCS5中，可以以使用屬屬性檢查查器來查查看和設(shè)設(shè)置大多多數(shù)框架架屬性，包括邊邊框、邊邊距以及及是否在在框架中中顯示滾滾動(dòng)條。第4章目錄661834.2使使用用框架4.2.9在框架文文檔中設(shè)設(shè)置鏈接接目標(biāo)若要在一一個(gè)框架架中使用用鏈接打打開另一一個(gè)框架架中的文文檔，必必須設(shè)置置鏈接的的目標(biāo)。創(chuàng)建鏈鏈接時(shí)，可用a標(biāo)簽的target屬性來指指定在其其中打開開所鏈接接內(nèi)容的的框架或或窗口。為了簡(jiǎn)簡(jiǎn)化設(shè)計(jì)計(jì)，也可可以使用用base標(biāo)簽為所所有鏈接接設(shè)置默默認(rèn)的目目標(biāo)。例例如，如如果導(dǎo)航航條位于于左框架架，并且且希望鏈鏈接的材材料顯示示在右側(cè)側(cè)的主要要內(nèi)容框框架中，則必須須將主

54、要要內(nèi)容框框架的名名稱指定定為每個(gè)個(gè)導(dǎo)航條條鏈接的的目標(biāo)。當(dāng)訪問問者單擊擊導(dǎo)航鏈鏈接時(shí)，將在主主框架中中打開指指定的文文檔內(nèi)容容。設(shè)置鏈接接的目標(biāo)標(biāo)為所有鏈鏈接設(shè)置置默認(rèn)的的目標(biāo)第4章目錄671834.2使使用用框架4.2.10使用內(nèi)聯(lián)聯(lián)框架在HTML中，可使使用iframe標(biāo)簽會(huì)創(chuàng)創(chuàng)建包含含另外一一個(gè)文檔檔的內(nèi)聯(lián)聯(lián)框架（即行內(nèi)內(nèi)框架）。語法法格式如如下：.iframe元素的常常用屬性性align指定如何何根據(jù)周周圍的元元素來對(duì)對(duì)齊此框框架。frameborder指定是否否顯示框框架周圍圍的邊框框。height和width：指定框框架的高高度。longdesc：指定一一個(gè)頁面面的URL。mar

55、ginheight：指定框框架的頂頂部和底底部的邊邊距。marginwidth：指定框框架的左左側(cè)和右右側(cè)的邊邊距。name：指定框框架的名名稱。scrolling：指定是是否在框框架中顯顯示滾動(dòng)動(dòng)條。src：指定在在框架中中顯示的的文檔的的URL。在DreamweaverCS5中，可以以菜單命命令或插插入面板板來插入入內(nèi)聯(lián)框框架。第4章目錄68183第5章層層疊樣式式表應(yīng)用用5.1創(chuàng)建和應(yīng)應(yīng)用CSS5.2設(shè)置CSS屬性691835.1創(chuàng)建和應(yīng)應(yīng)用CSS5.1.1CSS基本概念念CSS（CascadingStyleSheet）稱為層層疊樣式式表，是是一組格格式設(shè)置置規(guī)則，可用于于控制網(wǎng)網(wǎng)頁內(nèi)容

56、容的外觀觀。通過過使用CSS樣式設(shè)置置頁面的的格式，可將頁頁面的內(nèi)內(nèi)容與表表示形式式分離開開。這樣樣可使得得從一個(gè)個(gè)位置集集中維護(hù)護(hù)站點(diǎn)的的外觀變變得更加加容易，因?yàn)檫M(jìn)進(jìn)行更改改時(shí)不需需要對(duì)每每個(gè)頁面面上的每每個(gè)屬性性都進(jìn)行行更新。使用CSS可以非常常靈活地地控制頁頁面的確確切外觀觀。使用用CSS可以控制制許多文文本屬性性，包括括特定字字體和字字號(hào)，粗粗體、斜斜體、下下劃線和和文本陰陰影，文文本顏色色和背景景顏色以以及鏈接接顏色和和鏈接下下畫線等等。通過過使用CSS控制字體體，還可可以確保保在多個(gè)個(gè)瀏覽器器中以更更一致的的方式處處理頁面面布局和和外觀。使用CSS可以控制制網(wǎng)頁中中塊級(jí)元元素的格

57、格式和定定位。術(shù)語“層層疊”表表示對(duì)同同一個(gè)頁頁面元素素應(yīng)用多多種樣式式的能力力。例如如，可以以創(chuàng)建一一個(gè)CSS規(guī)則來應(yīng)應(yīng)用顏色色，創(chuàng)建建另一個(gè)個(gè)CSS規(guī)則來應(yīng)應(yīng)用邊距距，然后后將兩者者應(yīng)用于于頁面上上的同一一個(gè)文本本。所定定義的樣樣式向下下“層疊疊”到頁頁面元素素，并最最終實(shí)現(xiàn)現(xiàn)想要的的設(shè)計(jì)。CSS的主要優(yōu)優(yōu)點(diǎn)在于于它提供供了便利利的更新新功能。第5章目錄701835.1創(chuàng)建和應(yīng)應(yīng)用CSS5.1.2定義CSS規(guī)則CSS樣式表由由一組CSS規(guī)則組成成，每個(gè)個(gè)CSS規(guī)則由選選擇器和和屬性聲聲明兩個(gè)個(gè)部分組組成，其其中選擇擇器用于于標(biāo)識(shí)和和選擇頁頁面元素素（如p、h3、類名或或id標(biāo)識(shí)符等等），屬

58、屬性聲明明則用于于定義一一個(gè)或多多個(gè)頁面面元素的的樣式。在HTML文檔中定定義CSS規(guī)則時(shí)，應(yīng)將CSS規(guī)則包含含在style塊中，語語法格式式如下：selectorattribue: value;attribue:value; . .selector表示選擇擇器，用用于選擇擇要對(duì)其其應(yīng)用CSS規(guī)則的一一個(gè)或多多個(gè)頁面面元素?；ɡㄌ?hào)號(hào)中的內(nèi)內(nèi)容是CSS屬性聲明明，該聲聲明由一一些屬性性-值（attribue-value）對(duì)組成成，屬性性名稱與與屬性值值用冒號(hào)號(hào)（:）分隔；若屬性性值包含含空格，則用引引號(hào)括起起來；不不同屬性性-對(duì)用分號(hào)號(hào)（;）分隔。第5章目錄711835.1創(chuàng)建和應(yīng)應(yīng)用CSS5.

59、1.3CSS選擇器類類型通配選擇擇器：用用星號(hào)（*）表表示，可可用于選選擇頁面面內(nèi)的任任何元素素。*attribue: value;attribue:value; .標(biāo)簽選擇擇器：用用于選擇擇由特定定HTML標(biāo)簽定義義的頁面面元素。tagName attribue:value; attribue:value;.類選擇器器：用于于選擇具具有特定定class屬性的頁頁面元素素。tagName|*.classNameattribue:value;attribue: value;.id選擇器：用于選選擇具有有特定id屬性的頁頁面元素素。tagName|*#IDattribue: value;attri

60、bue:value;.包含選擇擇器：e1和e2兩個(gè)選擇擇器組成成，用于于選擇所所有被e1包含的e2。e1e2attribue: value;attribue:value; .群組選擇擇器：將將同樣的的定義應(yīng)應(yīng)用于多多個(gè)選擇擇器，此此時(shí)應(yīng)使使用逗號(hào)號(hào)來分隔隔這些選選擇器，將多個(gè)個(gè)選擇器器合并為為一組。e1,e2, e3 attribue:value; attribue:value;.偽類選擇擇器：與與HTML標(biāo)簽或類類選擇器器一起構(gòu)構(gòu)成偽類類選擇器器。selector:pseudo-class attribue:value; attribue:value;.:link：設(shè)置a元素在未未被訪問問前