Adobe-Dreamweaver-CS6-復(fù)習(xí)大綱(課堂PPT)課件(PPT 66頁)

1、Adobe Dreamweaver CS6 復(fù) 習(xí) 大 綱1.第1頁，共66頁。一、網(wǎng)頁設(shè)計概述1.網(wǎng)站和網(wǎng)頁的概念和區(qū)別網(wǎng)頁就是一個瀏覽頁面，是一個html文件，瀏覽器是用來解讀這份文件的。每個網(wǎng)頁都由文字，圖片，視頻等信息組合而成。網(wǎng)站，就需要單獨編輯若干個html文件，然后通過“超鏈接”把它們連接在一起。2.第2頁，共66頁。2.網(wǎng)頁的設(shè)計過程和構(gòu)成部分網(wǎng)站策劃人員組織頁面設(shè)計程序開發(fā)測試發(fā)布維護(hù)推廣項目總結(jié)3.第3頁，共66頁。3.如何創(chuàng)建文檔和保存文檔文件創(chuàng)建：文件面板中右鍵單擊新建文件（快捷鍵Ctrl+N）文件保存：Ctrl+S4.第4頁，共66頁。二HTML語言1.HTML語言概

2、念可視化的設(shè)計界面：學(xué)習(xí)簡單，操作快捷跨瀏覽器支持：支持多種瀏覽器，并可以選擇主要的瀏覽器支持動態(tài)網(wǎng)頁技術(shù)：CSS、層、行為、JavaScript強(qiáng)大的網(wǎng)站管理功能：庫、模板、標(biāo)簽等5.第5頁，共66頁。2.一個網(wǎng)頁文檔由哪些基本HTML標(biāo)記組成一個文檔通常由文檔頭(head)、文檔名稱(title)、表格(table)、段落(paragraph)和列表(list)等成分構(gòu)成。6.第6頁，共66頁。三站點的創(chuàng)建和管理1.創(chuàng)建站點和管理站點Dreamweaver可以制作單獨的網(wǎng)頁文件，但更經(jīng)常地用于整個站點的建設(shè)。因為大多數(shù)設(shè)計者創(chuàng)建風(fēng)格一致的一個整體網(wǎng)站。站點功能： 統(tǒng)一管理網(wǎng)站中所有的網(wǎng)頁文

3、件和素材，是一個文件夾7.第7頁，共66頁。1)、創(chuàng)建本地站點選擇“站點”“管理站點”。 出現(xiàn)“管理站點”對話框。注意：如果您沒有定義過任何 Dreamweaver 站點，則會直接出現(xiàn)“站點定義”對話框，您可以跳過下一步。單擊“新建”按鈕。 出現(xiàn)“站點定義”對話框。執(zhí)行下列操作之一：單擊“基本”選項卡以使用“站點定義向?qū)А?，它將引?dǎo)您逐步完成設(shè)置過程。 單擊“高級”選項卡以使用“高級”設(shè)置，它使您可以根據(jù)需要分別設(shè)置本地、遠(yuǎn)程和測試文件夾。完成 Dreamweaver 站點設(shè)置過程：在“站點定義向?qū)А敝?，回答每一屏上出現(xiàn)的問題，然后單擊“下一步”繼續(xù)進(jìn)行設(shè)置，或者單擊“上一步”返回到前一屏。

4、對于“高級”設(shè)置，可根據(jù)需要完成“本地信息”類別、“遠(yuǎn)程信息”類別和“測試服務(wù)器”等類別。8.第8頁，共66頁。2)、網(wǎng)站文件管理我們往往根據(jù)站點內(nèi)容，采用層次化目錄結(jié)構(gòu)分類分級保存網(wǎng)站文件，將相關(guān)的頁面放在同一文件夾中，必要時可以使用子文件夾，這種組織類型使站點更容易維護(hù)和導(dǎo)航。文件創(chuàng)建：文件面板中右鍵單擊新建文件（快捷鍵Ctrl+N）選擇文件：可單擊選一或配合Ctrl鍵和Shift鍵進(jìn)行多重選擇。打開和編輯：雙擊刪除：Delete鍵改名：兩次單擊關(guān)于保存：保存、另存為、全部保存、回復(fù)至上次的保存復(fù)制與粘貼：快捷菜單或Ctrl+拖動移動：直接拖動關(guān)閉：快捷鍵Ctrl+W消除文件只讀屬性：右鍵

5、快捷菜單設(shè)為首頁：右鍵快捷菜單添加設(shè)計備注：右鍵快捷菜單默認(rèn)情況下，當(dāng)移動、重命名或刪除站點中文檔時Dreamweaver會提示你執(zhí)行更新，站點管理器可自動修復(fù)頁面中相應(yīng)的超鏈。（編輯首選參數(shù)常規(guī)文檔選項設(shè)置“移動文件時更新鏈接”）9.第9頁，共66頁。3)、頁面預(yù)覽菜單：文件在瀏覽器中預(yù)覽iexplore工具欄地球圖標(biāo)預(yù)覽在iexplore10.第10頁，共66頁。四插入文本1.文字輸入 換行和分段1、文字輸入2、文字編輯3、文字屬性面板4、使用CSS樣式5、清理當(dāng)前頁面11.第11頁，共66頁。1、文字輸入 要注意的細(xì)節(jié)：（1）換行與分段換行：Shift+Enter(菜單：插入HTML特殊

6、字符換行符)分段：Enter12.第12頁，共66頁。1、文字輸入(2) 空白全角空格代碼視圖中輸入 或插入欄文本字符不換行空格輸入多個連續(xù)空格：編輯首選參數(shù)常規(guī)選中“允許多個連續(xù)的空格”直接按 Ctrl+Shift+空格鍵輸入空白13.第13頁，共66頁。1、文字輸入(3) 插入時間與日期插入欄常用日期菜單：插入日期(4) 插入特殊符號插入欄文本字符菜單：插入HTML特殊字符(5) 分隔線插入欄HTML水平線菜單：插入HTML水平線14.第14頁，共66頁。2、文字編輯（1）文字選取拖動選取雙擊選擇英文單詞或中文句子；三擊選擇段落；單擊起點，然后按Shift，再單擊終點，選中兩點之間文本。編

7、輯全選；單擊狀態(tài)行上的標(biāo)簽選擇器；15.第15頁，共66頁。2、文字編輯（2）剪切、復(fù)制與粘貼及撤消與重做Ctrl+拖動：復(fù)制拷貝HTML/粘貼HTML撤消：Ctrl+Z重做： Ctrl+Y16.第16頁，共66頁。2、文字編輯（3）查找與替換（Ctrl+F ）在當(dāng)前文件中替換文本在一個文件夾中替換文本保存和載入查詢在源代碼中查找與替換高級文本查找替換替換HTML標(biāo)簽查找下一個（F3鍵）17.第17頁，共66頁。3、文字屬性面板顯示/關(guān)閉當(dāng)前對象屬性面板：CTRL+F3段落和標(biāo)題格式（文本段落格式）文字顏色（文本顏色）字體（文本字體）文字大?。ㄎ谋敬笮?改變大小）文字樣式（文本樣式）對齊方式（

8、文本 對齊）列表（有序列表、無序列表）及列表屬性（文本列表）段落縮進(jìn)（Ctrl+Alt+ ）或凸出（ Ctrl+Alt+ ）（文本縮進(jìn)/凸出）文字超鏈接（屬性面板中鏈接欄）18.第18頁，共66頁。4、使用CSS樣式通過設(shè)置CSS樣式，可以快速一致地將字體格式應(yīng)用于文檔中的文本。 CSS樣式可由單個或多個CSS字體標(biāo)簽屬性（如顏色、字體、大小）以及其他格式屬性（粗體或斜體）組成。菜單：窗口 CSS樣式菜單：文本 CSS樣式19.第19頁，共66頁。5、清理當(dāng)前頁面（1）清理HTML/XHTML此功能可刪除空標(biāo)簽、合并嵌套FONT標(biāo)簽，以及通過其他方法改善雜亂或不可讀的HTML代碼。命令清理HT

9、ML/XHTML文件轉(zhuǎn)換 XHTML5、清理當(dāng)前頁面（2）導(dǎo)入Word 文件和清理Word生成的HTML文件導(dǎo)入 Word文檔命令清理Word生成的HTML20.第20頁，共66頁。2空格輸入空格（切換段落）Shift+空格（空格）21.第21頁，共66頁。3.時間日期、特殊符號、分割線hr(3) 插入時間與日期插入欄常用日期菜單：插入日期(4) 插入特殊符號插入欄文本字符菜單：插入HTML特殊字符(5) 分隔線插入欄HTML水平線菜單：插入HTML水平線22.第22頁，共66頁。五插入圖像1.圖像插入1、圖像的格式雖然圖像標(biāo)準(zhǔn)中存在多種圖形文件格式，但網(wǎng)頁中通常使用的只有三種，即GIF、JP

10、EG和PNG。目前， GIF和JPEG格式的支持情況最好，大多數(shù)瀏覽器都可以查看。GIF：只支持256種顏色JPEG：有損壓縮的格式PNG：無損壓縮圖像，支持一千六百萬種顏色。23.第23頁，共66頁。2、圖像文件和圖像占位符插入菜單：插入圖像工具欄：插入欄常用圖像在站點面板中直接將圖像文件拖到頁面上從資源管理器中直接將圖像文件拖到頁面上菜單：插入圖像對象圖像占位符工具欄：插入欄常用圖像占位符24.第24頁，共66頁。3、圖像和圖像占位符屬性面板使用主要屬性：圖像的名稱、大小、源文件、鏈接、替代文字、邊框和邊距、對齊方式等。25.第25頁，共66頁。4、圖像熱區(qū)使用圖像地圖，可以在單個圖像中創(chuàng)

11、建多個熱點或熱區(qū)（可單擊的區(qū)域），并使每一個熱點鏈接到一個不同的URL。 注：圖像地圖指已被分為多個可鏈接區(qū)域（或稱“熱點”）的圖像（1）繪制熱區(qū)矩形橢圓形多邊形4、圖像熱區(qū)（2）選擇熱區(qū) 多選方法：SHIFT+單擊（3）移動熱區(qū)（4）調(diào)整熱區(qū)大小26.第26頁，共66頁。5、插入交互式圖像（1）鼠標(biāo)經(jīng)過圖像（簡單翻轉(zhuǎn)圖）使用以下方法之一插入鼠標(biāo)經(jīng)過圖像：在“插入”欄中，選擇“常用”，然后單擊“鼠標(biāo)經(jīng)過圖像”圖標(biāo)。在“插入”欄中，選擇“常用”，然后將“鼠標(biāo)經(jīng)過圖像”圖標(biāo)拖到“文檔”窗口中的所需位置。選擇“插入”“圖像對象”“鼠標(biāo)經(jīng)過圖像”。5、插入交互式圖像（2）導(dǎo)航條導(dǎo)航條由圖像或圖像組組成

12、，這些圖像的顯示內(nèi)容隨用戶操作而變化。每個頁面只能有一個導(dǎo)航條。 使用“插入導(dǎo)航條”命令之前，須首先為各個導(dǎo)航項目的顯示狀態(tài)創(chuàng)建一組圖像。27.第27頁，共66頁。5、插入交互式圖像（2）導(dǎo)航條若要創(chuàng)建導(dǎo)航條，請執(zhí)行以下操作： 執(zhí)行下列操作之一：選擇“插入”“圖像對象”“導(dǎo)航條”。在“插入”欄的“常用”類別中，單擊“圖像”菜單并選擇“插入導(dǎo)航條”按鈕。 出現(xiàn)“插入導(dǎo)航條”對話框。設(shè)置相關(guān)項目6、導(dǎo)入Fireworks HTML Fireworks可利用切片將圖片文檔分割成多個較小的部分并將每部分導(dǎo)出為單獨的文件。插入圖像對象 Fireworks HTML插入欄常用 Fireworks HTML

13、7、制作WEB相冊命令菜單創(chuàng)建網(wǎng)站相冊28.第28頁，共66頁。8、圖像的優(yōu)化和格式轉(zhuǎn)換（1）用Fireworks優(yōu)化頁面圖像右擊圖像在 Fireworks中優(yōu)化命令 在 Fireworks中優(yōu)化圖像（2）用Photoshop和Fireworks轉(zhuǎn)換圖像文件格式和優(yōu)化處理29.第29頁，共66頁。六插入超鏈接1、關(guān)于URLURL（統(tǒng)一資源定位符）：用于描述網(wǎng)絡(luò)資源的位置、類型和訪問方法。一般格式：協(xié)議:/IP地址（域名）:端口號/目錄/文件名協(xié)議：指明訪問該資源所采用的協(xié)議。如HTTP、FTP等。2、超鏈接的制作方法（1）通過“指向文件”圖標(biāo)創(chuàng)建鏈接注：文件名最好不用中文。如一定要使用中文文件

14、名，則需要設(shè)置：編輯首選參數(shù)代碼改寫使用%將URL中的特殊字符編碼（2）屬性面板Link欄輸入和文件夾圖標(biāo)創(chuàng)建鏈接30.第30頁，共66頁。2、超鏈接的制作方法(續(xù))（3）插入菜單或插入欄創(chuàng)建超鏈插入菜單超級鏈接插入欄常用超級鏈接修改菜單創(chuàng)建鏈接（4）超鏈接的相關(guān)操作修改菜單創(chuàng)建鏈接或更改鏈接修改菜單移除鏈接修改菜單打開鏈接頁面修改菜單鏈接目標(biāo)31.第31頁，共66頁。3、超鏈接的類型(1) HTML鏈接（頁面鏈接）(2) E-mail鏈接Link欄手工輸入 mailto:郵件地址插入欄常用電子郵件鏈接插入菜單電子郵件鏈接(3) 文件鏈接(4) 錨點和鏈接3、超鏈接的類型(4)錨點和鏈接創(chuàng)建錨

15、點插入菜單命名錨記插入欄常用命名錨記錨點引用同一文件中錨點引用，在屬性面板中超鏈欄填寫#錨點名不同文件之間錨點引用，則填寫文件名#錨點名32.第32頁，共66頁。3、超鏈接的類型(5)空鏈接創(chuàng)建空鏈接，只需在屬性面板Link欄輸入符號 # 或者 javascript:;(6)腳本鏈接主要用于讓頁面文字具有獲取事件的能力，尤其是方便文字與行為和腳本程序的結(jié)合。3、超鏈接的類型(6)腳本鏈接 -續(xù)創(chuàng)建腳本鏈接，在屬性面板Link欄輸入 javascript:(后面跟一些 JavaScript 代碼或函數(shù)調(diào)用)例如：打印當(dāng)前頁面，在屬性面板Link欄輸入 javascript: self.print

16、()關(guān)閉當(dāng)前窗口，在屬性面板Link欄輸入 javascript: self.close()33.第33頁，共66頁。3、超鏈接的類型 (6)腳本鏈接 -續(xù) 例如：顯示一個警告框，在屬性面板Link欄輸入 javascript:alert(This link leads to the index)4、設(shè)置鏈接的目標(biāo)窗口_blank:在新的瀏覽窗口中打開鏈接的文檔_parent:在顯示鏈接的框架父框架集中打開鏈接的文檔，同時替換整個框架集。_self：在當(dāng)前框架中打開鏈接，同時替換所有框架。_top：在當(dāng)前瀏覽器窗口中打開鏈接的文框，同時替換所有框架。34.第34頁，共66頁。七插入表格插入菜單

17、表格1、插入表格插入欄 常用表格或插入欄 布局表格2、表格基本操作（1）選擇表格元素整個表格：標(biāo)簽、修改表格選擇表格、右鍵、Ctrl+A+A、邊框行、列 ：標(biāo)簽（行）、邊框、拖拽單元格：標(biāo)簽、 Ctrl+單擊、 Ctrl+A、拖拽35.第35頁，共66頁。2、表格基本操作（2）處理表格行、列插入行（Ctrl+M）、列（ Ctrl+Shift+A ）修改菜單、右鍵、屬性檢查器、Tab刪除行（ Ctrl +Shift +M ）、列（ Ctrl +Shift +- ）（3）單元格分、合單元格合并（ Ctrl +Alt +M ）單元格拆分（ Ctrl +Alt +S ）36.第36頁，共66頁。2、表

18、格基本操作（4）其它操作行列寬度調(diào)整和高度調(diào)整表格復(fù)制、剪切和粘貼3、設(shè)置表格屬性4、格式化表格命令菜單格式化表格37.第37頁，共66頁。5、表格排序命令菜單排序表格6、表格與表格式數(shù)據(jù)導(dǎo)入和導(dǎo)出導(dǎo)入：文件菜單導(dǎo)入表格式數(shù)據(jù)或插入欄布局表格數(shù)據(jù)導(dǎo)出：文件菜單導(dǎo)出表格38.第38頁，共66頁。1、布局視圖下繪制表格（布局表格）（1）視圖切換查看菜單表格模式插入欄布局標(biāo)準(zhǔn)視圖/布局視圖編輯首選參數(shù)布局模式（2）繪制布局表格插入欄布局繪制布局表格（按住CTRL連續(xù)繪制多個，按住Alt取消自動吸附功能）1、布局視圖下繪制表格（布局表格）（3）繪制布局單元格插入欄布局繪制布局單元格（按住CTRL可連續(xù)

19、繪制多個，按住Alt取消自動吸附功能）（4）嵌套布局表格（5）移動表格或單元格（6）設(shè)置表格和單元格屬性39.第39頁，共66頁。2、跟蹤圖像可以使用跟蹤圖像作為重新創(chuàng)建已經(jīng)使用圖形應(yīng)用程序（如 Macromedia Freehand 或 Fireworks）創(chuàng)建的頁面設(shè)計的向?qū)?。跟蹤圖像是放在“文檔”窗口背景中的 JPEG、GIF 或 PNG 圖像?？梢噪[藏圖像、設(shè)置圖像的不透明度和更改圖像的位置。2、跟蹤圖像若要將跟蹤圖像放在“文檔”窗口中，可執(zhí)行以下操作：(1)選擇“查看”“跟蹤圖像”“載入”。 或者選擇“修改”“頁面屬性”，然后單擊“跟蹤圖像”文本框旁邊的“瀏覽”按鈕。(2)在出現(xiàn)的對

20、話框中，選擇圖像文件并單擊“選擇”(Windows) 或“選擇”(Macintosh)。 “頁面屬性”對話框隨即出現(xiàn)。(3)拖動“圖像透明度”滑塊指定圖像的透明度，然后單擊“確定”。(4)若要隨時切換到另一跟蹤圖像或更改當(dāng)前跟蹤圖像的透明度，請選擇“修改”“頁面屬性”。40.第40頁，共66頁。2、跟蹤圖像若要顯示或隱藏跟蹤圖像，請執(zhí)行以下操作：選擇“查看”“跟蹤圖像”“顯示”。僅在 Dreamweaver 中跟蹤圖像是可見的。當(dāng)在瀏覽器中查看頁面時，跟蹤圖像永遠(yuǎn)不可見。當(dāng)跟蹤圖像可見時，頁面的實際背景圖像和顏色在“文檔”窗口中不可見；但是，在瀏覽器中查看頁面時，背景圖像和顏色是可見的。2、跟

21、蹤圖像若要更改跟蹤圖像的位置，請執(zhí)行以下操作：(1)選擇“查看”“跟蹤圖像”“調(diào)整位置”。(2)執(zhí)行下列操作之一：若要準(zhǔn)確地指定跟蹤圖像的位置，請在“X”和“Y”文本框中輸入坐標(biāo)值。若要逐個像素地移動圖像，請使用箭頭鍵。若要一次五個像素地移動圖像，請按 Shift 鍵和箭頭鍵。(3)重設(shè)跟蹤圖像的位置：選擇“查看”“跟蹤圖像”“重設(shè)位置”。 跟蹤圖像隨即返回到文檔窗口的左上角 (0,0)。41.第41頁，共66頁。2、跟蹤圖像若要將跟蹤圖像與所選元素對齊，請執(zhí)行以下操作：在“文檔”窗口中選擇一個元素。選擇“查看”“跟蹤圖像”“對齊所選范圍”。 跟蹤圖像的左上角隨即與所選元素的左上角對齊。42.

22、第42頁，共66頁。1、關(guān)于表單2、插入表單及設(shè)置表單屬性3、插入表單元素及屬性設(shè)置4、表單應(yīng)用舉例43.第43頁，共66頁。1、關(guān)于表單表單是用于實現(xiàn)網(wǎng)頁瀏覽者與服務(wù)器之間信息交互的一種頁面元素,被廣泛用于各種信息的搜集和反饋，如調(diào)查表、訂單、站點注冊單、搜索引擎等。表單有兩個部分組成：一是面向客戶端各種對象部分，一是服務(wù)器端的處理程序部分。當(dāng)訪問者將信息輸入Web站點表單單擊提交按鈕時，這些信息將被發(fā)送到服務(wù)器，服務(wù)器端腳本或應(yīng)用程序?qū)@些信息進(jìn)行響應(yīng)。通常，通過通用網(wǎng)關(guān)接口（CGI）腳本、ColdFusion頁、Java Server Page（JSP）或ASP來處理信息。如果不使用服務(wù)

23、端腳本或應(yīng)用程序來處理表單數(shù)據(jù)，就無法收集這些數(shù)據(jù)。44.第44頁，共66頁。2、插入表單及設(shè)置表單屬性插入表單插入表單插入欄表單Dreamweaver插入一個表單（域）。當(dāng)頁面處于設(shè)計視圖中時，用紅色的虛輪廓線指示表單。如果沒有看到此輪廓線，請檢查是否選中了“查看可視化助理不可見元素”。設(shè)置表單屬性（用屬性檢查器設(shè)置 ）在“表單名稱”文本框中，鍵入標(biāo)識該表單的唯一名稱。 命名表單后，就可以使用腳本語言（如 JavaScript 或 VBScript）引用或控制該表單。如果不命名表單，則 Dreamweaver 使用語法 form n 生成一個名稱，并在向頁面中添加每個表單時遞增 n 的值。在

24、“動作”文本框中，指定處理該表單的動態(tài)頁或腳本的路徑?？梢栽凇皠幼鳌蔽谋究蛑墟I入完整路徑，也可以單擊文件夾圖標(biāo)定位到同一站點中包含該腳本或應(yīng)用程序頁的相應(yīng)文件夾。 在“方法”彈出菜單中，選擇將表單數(shù)據(jù)傳輸?shù)椒?wù)器的方法。有POST、GET和默認(rèn)三種選擇。45.第45頁，共66頁。2、插入表單及設(shè)置表單屬性如果需要，可以使用“MIME 類型”彈出菜單指定對提交給服務(wù)器進(jìn)行處理的數(shù)據(jù)使用 MIME 編碼類型。 默認(rèn)設(shè)置 application/x-www-form-urlencode 通常與 POST 方法協(xié)同使用。如果要創(chuàng)建文件上傳域，請指定 multipart/form-data MIME 類

25、型。3、插入表單元素及屬性設(shè)置表單：所有表單對象要發(fā)揮作用，就必須存在于表單域中。文本字段：在表單中插入一個可輸入一行文本的文本域。文本域接受任何類型的字母數(shù)字。該文本可以顯示為單行、多行，也可以顯示為一系列點或星號（密碼輸入）隱藏域：可以存儲用戶輸入的信息，如姓名、電子郵件地址或常用的查看方式，并在該用戶下次訪問引站點時使用這些數(shù)據(jù)。3、插入表單元素及屬性設(shè)置復(fù)選框：允許在一組選項中選擇多項。用戶可以選擇任意多個適用的選項。單選按鈕：代表互相排斥的選擇。在某單選按鈕組（多個按鈕同名）中選擇一個按鈕，就會取消選擇該組中的所有其他按鈕。單選按鈕組：直接插入一組多個單選按鈕。46.第46頁，共66

26、頁。列表/菜單：“列表”選項在一個滾動列表中顯示選項值，用戶可以從該滾動列表中選擇多個選項。“菜單”選項則是在一個菜單中顯示選項值，用戶只能從中選擇單個選項。跳轉(zhuǎn)菜單：是可導(dǎo)航的列表或彈出式菜單，它使你可以插入一種菜單，這種菜單中的每個選項都擁有鏈接的屬性，單擊即可跳轉(zhuǎn)至其他網(wǎng)頁或文件。圖像域：插入一個可放置圖像的區(qū)域。該圖像用于生成圖形化按鈕，例如“提交”或“重置”按鈕。文件域：插入一個文本字段和一個“瀏覽”按鈕。用戶可以使用文件域瀏覽本地計算機(jī)上的某個文件并將該文件作為表單數(shù)據(jù)上傳。按鈕：在單擊時執(zhí)行某一腳本或程序，例如，提交或重置表單。并且可以自定義按鈕名稱或標(biāo)簽。4、表單應(yīng)用舉例簡單舉

27、例：瀏覽器端：表單中文本提交服務(wù)器端：響應(yīng)文本47.第47頁，共66頁。八.插入DIV層1、概述2、層的創(chuàng)建和刪除3、使用“屬性面板”設(shè)置層的屬性4、層的基本操作5、設(shè)置層的默認(rèn)屬性6、層和表格之間轉(zhuǎn)換7、層和行為相結(jié)合制作動態(tài)效果48.第48頁，共66頁。1、概述在網(wǎng)頁制作中，對文字和對象的位置控制是比較困難的，我們常常通過表格來定位，但往往達(dá)不到精度要求?！皩印笔荄W中另外一種可以進(jìn)行排版的工具。它可以被定位在頁面的任意位置，并且其中可以包含文本、圖像等所有可直接插入至網(wǎng)頁的對象。層擁有很多表格所不具備的特點，比如可以重疊、便于移動、可設(shè)為隱藏等。2、層的創(chuàng)建和刪除面板的顯示：窗口層（F2

28、）插入欄布局描繪層（拖動繪制，按Ctrl可連繪）拖動“插入欄布局描繪層圖標(biāo)”到頁面插入菜單布局對象層刪除：Delete鍵49.第49頁，共66頁。3、使用“屬性面板”設(shè)置層的屬性選擇一個或多個層后即可對它們進(jìn)行操作或更改它們的屬性。（1）單個層的屬性設(shè)置首先選擇層（下列操作之一）：單擊一個層的選擇柄。 如果選擇柄不可見，請在該層中的任意位置單擊以顯示該選擇柄。單擊一個層的邊框。在一個層中按住 Ctrl-Shift 鍵并單擊 單擊層代碼標(biāo)記（在“設(shè)計”視圖中）使用屬性檢查器查看和設(shè)置層的屬性50.第50頁，共66頁。3、使用“屬性面板”設(shè)置層的屬性（1）單個層的屬性設(shè)置首先選擇層（下列操作之一）

29、：單擊一個層的選擇柄。 如果選擇柄不可見，請在該層中的任意位置單擊以顯示該選擇柄。單擊一個層的邊框。在一個層中按住 Ctrl-Shift 鍵并單擊 單擊層代碼標(biāo)記（在“設(shè)計”視圖中）使用屬性檢查器查看和設(shè)置層的屬性層屬性面板的設(shè)置：(續(xù))寬和高指定層的寬度和高度。 位置和大小的默認(rèn)單位為像素 (px)。您也可以指定以下單位：pc (pica)、pt（點）、in（英寸）、mm（毫米）、cm（厘米）或 %（父層相應(yīng)值的百分比）?？s寫必須緊跟在值之后，中間不留空格：例如，3mm 表示 3 毫米。51.第51頁，共66頁。3、使用“屬性面板”設(shè)置層的屬性層屬性面板的設(shè)置：(續(xù))Z 軸確定層的 z 軸（

30、即堆疊順序）。 在瀏覽器中，編號較大的層出現(xiàn)在編號較小的層的前面。值可以為正，也可以為負(fù)。當(dāng)更改層的堆疊順序時，使用“層”面板要比輸入特定的 z 軸值更為簡便（直接拖動）。3、使用“屬性面板”設(shè)置層的屬性層屬性面板的設(shè)置：(續(xù))可見性指定該層最初是否是可見的。從以下選項中選擇：“默認(rèn)”不指定可見性屬性。 當(dāng)未指定可見性時，大多數(shù)瀏覽器都會默認(rèn)為“繼承”?！袄^承”使用該層父級的可見性屬性?！翱梢姟憋@示該層的內(nèi)容，而不管父級的值是什么?！半[藏”隱藏層的內(nèi)容，而不管父級的值是什么。 52.第52頁，共66頁。3、使用“屬性面板”設(shè)置層的屬性層屬性面板的設(shè)置：(續(xù))背景圖像指定層的背景圖像。 背景顏色

31、指定層的背景顏色。 如果將此選項留為空白，則可以指定透明的背景。標(biāo)簽指定用來定義該層的 HTML 標(biāo)簽。3、使用“屬性面板”設(shè)置層的屬性層屬性面板的設(shè)置：(續(xù))溢出控制當(dāng)層的內(nèi)容超過層的指定大小時如何在瀏覽器中顯示層?！翱梢姟敝甘驹趯又酗@示額外的內(nèi)容；實際上，該層會通過延伸來容納額外的內(nèi)容。“隱藏”指定不在瀏覽器中顯示額外的內(nèi)容。“滾動”指定瀏覽器應(yīng)在層上添加滾動條，而不管是否需要滾動條?！白詣印笔篂g覽器僅在需要時（即，當(dāng)層的內(nèi)容超出其邊界時）才顯示層的滾動條。53.第53頁，共66頁。層屬性面板的設(shè)置：(續(xù))剪輯定義層的可見區(qū)域。 指定左側(cè)、頂部、右側(cè)和底邊坐標(biāo)可在層的坐標(biāo)空間中定義一個矩形

32、（從層的左上角開始計算）。層經(jīng)過“剪輯”后，只有指定的矩形區(qū)域才是可見的。源文件（僅限 layer 和 ilayer）用于在層中顯示另一個 HTML 文檔。（2）多個層的屬性設(shè)置首先選擇多個層（選擇層時按下 Shift 鍵）標(biāo)簽：指定用來定義這些層的HTML標(biāo)簽。在下拉列表中有DIV和SPAN兩個選項。54.第54頁，共66頁。4、層的基本操作（1）調(diào)整層的大小調(diào)整單個層的大小（拖動手柄、CTRL+箭頭）調(diào)整多個層的大小選擇兩個或更多個層后，選擇“修改”“對齊”“設(shè)成寬度相同”或“修改”“對齊”“設(shè)成高度相同”。 （2）移動層的位置鼠標(biāo)、箭頭或Shift+箭頭（3）層的對齊修改對齊（4）在層中

33、插入對象與在文檔中操作類似（5）層的疊加順序修改排列順序修改層的“Z軸”屬性55.第55頁，共66頁。4、層的基本操作（6）層的復(fù)制、剪切和粘貼與其它對象的操作類似（7）層的嵌套按住 Alt 鍵并拖動，可在現(xiàn)有層中嵌套一個層。在“文檔”窗口的“設(shè)計”視圖中將插入點放置在一個現(xiàn)有層中，然后選擇“插入”“層”。 使用“層”面板將現(xiàn)有層嵌套在另一個層中，（選擇一個層，然后通過按住 Ctrl 鍵并拖動，將層移動到“層”面板上的目標(biāo)層。）（8）顯示/隱藏層選擇“窗口”“層”，打開“層”面板。 在層的眼形圖標(biāo)列內(nèi)單擊可以更改其可見性。56.第56頁，共66頁。5、設(shè)置層的默認(rèn)屬性選擇“編輯”“首選參數(shù)”“

34、層”設(shè)置各對話框選項6、層和表格之間轉(zhuǎn)換（1）將表格轉(zhuǎn)換為層“修改”“轉(zhuǎn)換”“表格到層”注：空單元格不會轉(zhuǎn)換為層（除非它們具有背景顏色）。（2）將層轉(zhuǎn)換為表格“修改”“轉(zhuǎn)換”“層到表格”。注：在轉(zhuǎn)換為表格之前，請確保層沒有重疊7、層和行為相結(jié)合制作動態(tài)效果例：動態(tài)顯示-隱藏層 制作幾個空鏈接，分別設(shè)置“顯示-隱藏層”行為，控制層的顯示/隱藏。57.第57頁，共66頁。九行為1、概念2、行為面板3、關(guān)于事件4、為對象附加行為5、Dreamweaver內(nèi)置行為58.第58頁，共66頁。1、概念Dreamweaver行為是一種運(yùn)行在瀏覽器中的JavaScript代碼，設(shè)計者可以將其放置在網(wǎng)頁文檔中，

35、以允許瀏覽者與網(wǎng)頁本身進(jìn)行交互。行為由事件和事件觸發(fā)的動作組成2、行為面板（1）顯示行為面板窗口菜單行為（Shift+F4）（2）附加行為行為面板：“+”按鈕（3）刪除行為行為面板：“”按鈕（4）調(diào)整行為順序（5）設(shè)置瀏覽器版本（6）為附加的行為選擇事件59.第59頁，共66頁。3、關(guān)于事件 行為是事件與動作的聯(lián)合，事件用于指明執(zhí)行某項動作的條件。常用事件包含有鼠標(biāo)事件、鍵盤事件、窗體事件和其它事件等。onClick：單擊選定元素（如超鏈接、圖片、按鈕）將觸發(fā)該事件。onMouseOver：當(dāng)鼠標(biāo)首次移動指向特定對象時觸發(fā)該事件。onMouseMove：當(dāng)鼠標(biāo)停留在對象邊界內(nèi)移動時觸發(fā)該事件。

36、onMouseOut：當(dāng)鼠標(biāo)離開對象邊界時觸發(fā)該事件。onMouseDown：當(dāng)按下鼠標(biāo)按鈕時觸發(fā)該事件。onLoad：當(dāng)圖片或頁面完成載入后觸發(fā)該事件。60.第60頁，共66頁。4、為對象附加行為可以將行為附加給整個文檔、鏈接、圖像、表單元素或其他HTML對象。5、Dreamweaver內(nèi)置行為調(diào)用 JavaScript“調(diào)用 JavaScript”動作允許您使用“行為”面板指定當(dāng)發(fā)生某個事件時應(yīng)該執(zhí)行的自定義函數(shù)或 JavaScript 代碼行。（您可以自己編寫 JavaScript 或使用 Web 上多個免費的 JavaScript 庫中提供的代碼。例如，若要創(chuàng)建一個“后退”按鈕，您可以

37、鍵入if(history.length0)history.back()。如果您已將代碼封裝在一個函數(shù)中，則只需鍵入該函數(shù)的名稱（例如 hogback()）。改變屬性使用“改變屬性”動作更改對象某個屬性（例如層的背景顏色或表單的動作）的值。您可以更改的屬性是由瀏覽器決定的；檢查瀏覽器使用“檢查瀏覽器”動作可根據(jù)訪問者不同類型和版本的瀏覽器將他們轉(zhuǎn)到不同的頁。例如，您可能想要將使用 Netscape Navigator 4.0 或更高版本瀏覽器的訪問者轉(zhuǎn)到一頁，而將使用 Internet Explorer 4.0 或更高版本的訪問者轉(zhuǎn)到另一頁，并讓使用任何其它類型瀏覽器的訪問者留在當(dāng)前頁上。61.

38、第61頁，共66頁。檢查瀏覽器（續(xù)）將此行為附加到幾乎與任何瀏覽器都兼容的頁（該頁不使用任何其它 JavaScript）的 body 標(biāo)簽上是十分有用的；這樣，已關(guān)閉 JavaScript 功能的訪問者在訪問此頁時仍可以看到內(nèi)容。另一個辦法是將此行為附加到一個空鏈接（例如 ）并讓該動作根據(jù)訪問者瀏覽器的類型和版本確定鏈接的目標(biāo)。檢查插件使用“檢查插件”動作根據(jù)訪問者是否安裝了指定的插件這一情況將他們轉(zhuǎn)到不同的頁。例如，您可能想讓安裝有 Shockwave 的訪問者轉(zhuǎn)到一頁，讓未安裝該軟件的訪問者轉(zhuǎn)到另一頁?？刂?Shockwave 或 Flash使用“控制 Shockwave 或 Flash”

39、動作來播放、停止、倒帶或轉(zhuǎn)到 Macromedia Shockwave 或 Macromedia Flash SWF 文件中的幀。拖動層“拖動層”動作允許訪問者拖動層。使用此動作創(chuàng)建拼板游戲、滑塊控件和其它可移動的界面元素。 轉(zhuǎn)到 URL“轉(zhuǎn)到 URL”動作在當(dāng)前窗口或指定的框架中打開一個新頁。此操作尤其適用于通過一次單擊更改兩個或多個框架的內(nèi)容。62.第62頁，共66頁。跳轉(zhuǎn)菜單當(dāng)您使用“插入”“表單對象”“跳轉(zhuǎn)菜單”創(chuàng)建跳轉(zhuǎn)菜單時，Dreamweaver 創(chuàng)建一個菜單對象并向其附加一個“跳轉(zhuǎn)菜單”（或“跳轉(zhuǎn)菜單轉(zhuǎn)到”）行為。打開瀏覽器窗口使用“打開瀏覽器窗口”動作在一個新的窗口中打開 URL。您可以指定新窗口的屬性（包括其大?。⑻匦裕ㄋ欠窨梢哉{(diào)整大小、是否具有菜單欄等）和名稱。例如，您可以使用此行為在訪問者單擊縮略圖時在一個單獨的窗口中打開一個較大的圖像；使用此行為，您可以使新窗口與該圖