Dreamweaver教學(xué)課件.ppt

Dreamweaver 的使用,主要內(nèi)容：,一、Dreamweaver概述 二、站點的創(chuàng)建和管理 三、文本的使用 四、圖像的使用 五、超鏈接 六、網(wǎng)頁屬性 七、表格的使用,主要內(nèi)容：,八、頁面布局 九、表單的使用 十、多媒體的使用 十一、框架的使用 十二、層的使用 十三、時間軸的使用 十四、歷史和資源管理器,主要內(nèi)容：,十五、模板和庫 十六、層疊樣式表 十七、行為的應(yīng)用 十八、擴展功能 十九、動態(tài)網(wǎng)頁開發(fā)基礎(chǔ)知識 二十、網(wǎng)站設(shè)計,一、Dreamweaver概述,1、Dreamweaver簡介 2、Dreamweaver的工作環(huán)境和相關(guān)操作 3、HTML語言介紹 4、關(guān)于Dreamweaver 幫助,1、 Dreamweaver簡介,Dreamweaver 是由美國著名的軟件開發(fā)商Macromedia公司推出的一個“所見即所得”的可視化網(wǎng)站開發(fā)工具。 用于對 Web 站點、Web 頁和 Web 應(yīng)用程序進行設(shè)計、編碼和開發(fā)。,1、 Dreamweaver簡介,它的主要特點如下： 可視化的設(shè)計界面：學(xué)習(xí)簡單，操作快捷 跨瀏覽器支持：支持多種瀏覽器，并可以選擇主要的瀏覽器 支持動態(tài)網(wǎng)頁技術(shù)：CSS、層、行為、JavaScript 強大的網(wǎng)站管理功能：庫、模板、標(biāo)簽等,1、 Dreamweaver簡介,它的主要特點如下(續(xù))： 豐富的媒體支持：Java、Flash、Shockwave、ActiveX、Real等 超強的擴展能力：支持第三方插件 完善的協(xié)同工作能力：Flash、Fireworks、Coldfusion,2、Dreamweaver的工作環(huán)境和相關(guān)操作,界面： 菜單欄、“插入”欄、文檔工具欄、文檔窗口、面板組、屬性檢查器 面板整理： 展開或折疊一個面板組 關(guān)閉面板組 打開屏幕上不可見的面板組或面板 在展開的面板組中選擇一個面板,2、Dreamweaver的工作環(huán)境和相關(guān)操作,面板整理(續(xù))： 查看未顯示的面板組的“選項”菜單 停靠和取消?？棵姘搴兔姘褰M 重新調(diào)整面板組大小和重命名面板組 設(shè)置“面板”首選參數(shù),2、Dreamweaver的工作環(huán)境和相關(guān)操作,文件操作： 創(chuàng)建新文檔 保存新文檔 設(shè)置默認的新文檔類型 打開現(xiàn)有文檔 導(dǎo)入 Microsoft Word HTML 文件：導(dǎo)入/清理 標(biāo)尺和網(wǎng)格：顯示/隱藏 參數(shù)選擇：“編輯”“首選參數(shù)”,3、HTML語言介紹,(1) 概述 (2) HTML文檔 (3) HTML標(biāo)簽和屬性簡介,(1) 概述,HTML （Hypertext Markup Language，超文本標(biāo)識語言） 是生成WWW的語言之一，也是組織多媒體文檔的一門重要語言，它不僅用來編寫 Web 網(wǎng)頁，而且也越來越多地被用來制作光盤上的多媒體節(jié)目。,(2) HTML文檔,HTML文檔是一種沒有格式的文本文檔，也稱為 ASCII 文件。因此，HTML文檔可以使用任何一種文本編輯器來編寫。 一個文檔通常由文檔頭(head)、文檔名稱(title)、表格(table)、段落(paragraph)和列表(list)等成分構(gòu)成。為了表達方便，我們把這些成分稱為文檔元素(element)，簡稱為文素，它們是文本文檔的基本構(gòu)件，并且使用 HTML規(guī)定的標(biāo)簽(tag)來標(biāo)識這些文素。,(2) HTML文檔,每個HTML文檔都是由標(biāo)簽開始，而以標(biāo)簽結(jié)束。每個HTML文檔分成兩個部分組成：文檔頭(head)和正文(body)，并分別用 和 來作標(biāo)記。 文檔頭標(biāo)簽 之間所包含的是文檔的名稱(title) 正文標(biāo)簽 之間含有用各種HTML標(biāo)簽作標(biāo)記的段落、列表、和其他文素組成的實際文檔。,(2) HTML文檔,一個簡單的HTML文檔如下所示： 章乃器軼事 章乃器妙語揭貪官 章乃器是我國杰出的愛國人士。1938年3月，應(yīng)當(dāng)時安徽省政府主席李宗仁之邀，出任安徽省政府財政廳廳長。 針對當(dāng)時眾多的貪官污吏乘國難之機貪污腐化、中飽私囊等劣行，章乃器上任伊始就提出了“鏟除貪污”等四項重大措施。 ,(3) HTML標(biāo)簽和屬性簡介,簡介 基本標(biāo)簽 屬性 超鏈接 嵌入背景聲音 用圖像作網(wǎng)頁的背景 表格的標(biāo)簽和屬性,簡介,HTML標(biāo)簽由3部分組成：左尖括號“”。HTML標(biāo)簽名稱中的字母不分大小寫，標(biāo)簽通常是成對出現(xiàn)的 某些文素還可以包含“屬性(attribute)”。屬性是指背景顏色、字體屬性(大小、顏色、正體、斜體等)、對齊方式等等，它是包含在開始標(biāo)簽中的附加信息。例如，表示這段文字是居中對齊的,基本標(biāo)簽, 、和等等,基本標(biāo)簽(1), HTML標(biāo)簽：這個標(biāo)簽告訴瀏覽器在 之間的文件是用HTML編寫的文檔。 文檔頭標(biāo)簽： 之間包含的是HTML文檔名稱。 文檔名稱標(biāo)簽： 之間包含的是具體的HTML文檔名稱，字符數(shù)通常不超過64。,基本標(biāo)簽(2), 正文標(biāo)簽： 之間是正文部分，這是HTML文檔最多的部分，它包含的是顯示在瀏覽器文本窗口中的文檔內(nèi)容。 標(biāo)題(Heading)標(biāo)簽：HTML定義了6個等級的標(biāo)題標(biāo)簽，其中n1，2，6。 之間包含的是第n級標(biāo)題。,基本標(biāo)簽(3), 段落(Paragraph)標(biāo)簽： 之間包含的是一段文本。HTML中沒有使用硬換行(carriage return)來分段落，這是與字處理軟件不同的。在HTML文檔中，和之間不論有多少行，不論每一行有多長或者多短，也不論其間有多少個空格，瀏覽器都把它作為一個段落來處理。,基本標(biāo)簽(4),、和 列表標(biāo)簽：HTML支持無編號列表和有編號列表，而且還可以在列表中套列表。 表示標(biāo)簽之間的列表項目是無編號列表(Unnumbered List)。 表示標(biāo)簽之間的列表項目是有編號列表(Ordered List)。 表示標(biāo)簽后面的內(nèi)容是具體的列表項目(List Item)。,基本標(biāo)簽(5), 強制換行標(biāo)簽(Forced Line Breaks/Postal Addresses)：使用標(biāo)簽可強制文本換行，其好處是不在行與行之間增加空白行。 水平線(Horizontal Rule)標(biāo)簽：生成一條用于分割文檔的水平線，其長度與瀏覽器窗口等寬，粗細和長短都可設(shè)置。,屬性,屬性是指用來修改HTML標(biāo)簽之間的文素特性，例： 例1： 理解字符屬性的概念 例2： 這是居中段落 ,超鏈接,基本語法是： . 或 . ,文件內(nèi)鏈接,文件內(nèi)鏈接是為閱讀方便服務(wù)的，主要用于比較長的文件。在作鏈接之前要先建立錨點（名），給鏈接的目的地作個定義。 建立錨名 鏈接到錨名,文件內(nèi)鏈接*命令格式,建立錨名： 錨名所對應(yīng)的文本 鏈接到錨名 鏈接文本,嵌入背景聲音,在HTML文檔中可嵌入背景音樂，當(dāng)打開HTML文檔時就開始播放。嵌入背景音樂的基本語法結(jié)構(gòu)如下： 其中，URL表示背景音樂的文件名， LOOP表示循環(huán)次數(shù)（INFINITE為無限次）。,用圖像作網(wǎng)頁的背景,在瀏覽器上經(jīng)?？煽吹礁鞣N背景圖像，使用圖像做網(wǎng)頁背景的語法結(jié)構(gòu)如下： 做背景的圖像不需要很大，瀏覽器會利用它的平鋪(tiling)功能布滿整個網(wǎng)頁。,在文檔中顯示圖像,命令格式： 例：顯示一幅文件名為flower.gif的圖片 ,在文檔中顯示圖像,相關(guān)屬性： 控制大?。?高：HEIGHT像素數(shù) 寬：WIDTH像素數(shù) 圖像邊框： BORDER=寬度值 例： ,用圖像實現(xiàn)鏈接,格式： 例： ,在網(wǎng)頁中加入視頻,格式： 說明： 引導(dǎo)圖在當(dāng)視頻還沒有完全被載入時，會顯示在視頻將顯示的位置。,在網(wǎng)頁中加入視頻,相關(guān)屬性： START屬性： 用于控制視頻的播放時機，取值有fileopen和mouseover兩種，分別表示當(dāng)頁面一打開就播放和當(dāng)鼠標(biāo)移到播放區(qū)域上才播放。默認值為fileopen。 也可以同時設(shè)定以上兩個值，這時表示頁面剛載入時播放，其后，當(dāng)我們將鼠標(biāo)移到顯示區(qū)域時，視頻也會播放。,在網(wǎng)頁中加入視頻,例： ,讓文本動起來,基本格式： 文本 一些相關(guān)屬性： DIRECTION屬性：取值有兩種 LEFT：右向左 RIGHT：左向右,讓文本動起來,一些相關(guān)屬性： BEHAVIOR屬性：取值有三種 ALTERNATE：來回移動 SLIDE：移動一次后停止 SCROLL：循環(huán)單向移動,表格的標(biāo)簽和屬性,標(biāo)簽 屬性 注意事項,表格*標(biāo)簽,. 定義表格。 定義表的名稱(CAPTION) . 定義表的行(Table Row)，可定義對齊屬性 . 定義列表標(biāo)題(Table Header)，常為黑體字，中央對齊 定義列表數(shù)據(jù)(Table Data)單元,表格*屬性,ALIGN (LEFT, CENTER, RIGHT) 表單元的水平對齊方式 VALIGN (TOP, MIDDLE, BOTTOM) 表單元的垂直對齊方式 COLSPAN=n 表單元跨越的列數(shù) ROWSPAN=n 表單元跨越的行數(shù),表格*注意事項, 必須要包含整個表的定義； 在表格中的第一項是表的名稱(CAPTION)，它是可有可無的； 標(biāo)簽定義的行的數(shù)目沒有限制； 在一行中，使用 或者 標(biāo)簽定義的數(shù)據(jù)單元數(shù)目也沒有限制； 表的每一個單元的屬性可單獨設(shè)置，因此表格的形式可以多種多樣； 數(shù)據(jù)單元中的內(nèi)容可以是文字，也可以是圖標(biāo)，或者是兩者，而且還可以設(shè)置超級鏈接,表格示例, 例表一 基本情況 入庫資料 其它資料 編號 姓名 年齡 001 肖靜 23 002 陳江 25 ,4、 Dreamweaver 幫助,“幫助”系統(tǒng)提供所有Dreamweaver 功能的綜合信息，其本身就是一本很好的電子書。,二、站點的創(chuàng)建和管理,Dreamweaver可以用于制作單獨的網(wǎng)頁文件，但更經(jīng)常地用于整個站點的建設(shè)。因為大多數(shù)網(wǎng)頁設(shè)計者創(chuàng)建的往往不是多種風(fēng)格網(wǎng)頁的集合，而是風(fēng)格一致的一個網(wǎng)站。,1、創(chuàng)建本地站點,選擇“站點”“管理站點”。 出現(xiàn)“管理站點”對話框。 注意：如果您沒有定義過任何 Dreamweaver 站點，則會直接出現(xiàn)“站點定義”對話框，您可以跳過下一步。 單擊“新建”按鈕。 出現(xiàn)“站點定義”對話框。,1、創(chuàng)建本地站點,執(zhí)行下列操作之一： 單擊“基本”選項卡以使用“站點定義向?qū)А?，它將引?dǎo)您逐步完成設(shè)置過程。 單擊“高級”選項卡以使用“高級”設(shè)置，它使您可以根據(jù)需要分別設(shè)置本地、遠程和測試文件夾。,1、創(chuàng)建本地站點,完成 Dreamweaver 站點設(shè)置過程： 在“站點定義向?qū)А敝?，回答每一屏上出現(xiàn)的問題，然后單擊“下一步”繼續(xù)進行設(shè)置，或者單擊“上一步”返回到前一屏。 對于“高級”設(shè)置，可根據(jù)需要完成“本地信息”類別、“遠程信息”類別和“測試服務(wù)器”等類別。,2、網(wǎng)站文件的管理,我們往往根據(jù)站點內(nèi)容，采用層次化目錄結(jié)構(gòu)分類分級保存網(wǎng)站文件，將相關(guān)的頁面放在同一文件夾中，必要時可以使用子文件夾，這種組織類型使站點更容易維護和導(dǎo)航。 文件創(chuàng)建：文件面板中右鍵單擊新建文件（快捷鍵Ctrl+N） 選擇文件：可單擊選一或配合Ctrl鍵和Shift鍵進行多重選擇。,2、網(wǎng)站文件的管理,打開和編輯：雙擊 刪除：Delete鍵 改名：兩次單擊 關(guān)于保存：保存、另存為、全部保存、回復(fù)至上次的保存 復(fù)制與粘貼：快捷菜單或Ctrl+拖動 移動：直接拖動 關(guān)閉：快捷鍵Ctrl+W,2、網(wǎng)站文件的管理,消除文件只讀屬性：右鍵快捷菜單 設(shè)為首頁：右鍵快捷菜單 添加設(shè)計備注：右鍵快捷菜單 默認情況下，當(dāng)移動、重命名或刪除站點中文檔時Dreamweaver會提示你執(zhí)行更新，站點管理器可自動修復(fù)頁面中相應(yīng)的超鏈。（編輯首選參數(shù)常規(guī)文檔選項設(shè)置“移動文件時更新鏈接”）,3、頁面預(yù)覽,菜單：文件在瀏覽器中預(yù)覽iexplore 工具欄地球圖標(biāo)預(yù)覽在iexplore,4、站點的編輯和管理, 文件面板 打開現(xiàn)有本地網(wǎng)站 查看本地和遠程網(wǎng)站的文件和地圖 調(diào)整窗口視圖 保存站點地圖 重建站點緩存 站點編輯、復(fù)制、刪除、導(dǎo)入與導(dǎo)出,4、站點的編輯和管理, 文件面板 “擴展/折疊”按鈕展開或折疊“文件”面板，以顯示一個或兩個窗格。 顯示方式：面板菜單查看站點文件（F8）或站點地圖（Alt+F8）切換 打開現(xiàn)有本地網(wǎng)站 在文件面板的站點下拉式列表中選擇站點。,4、站點的編輯和管理,查看本地和遠程網(wǎng)站的文件和地圖 文件窗可以同時顯示本地和遠程站點的內(nèi)容。本地站點可以以文件列表、地圖或者同時顯示兩者的方式出現(xiàn)。遠程站點只能以文件列表方式顯示。 （通過文件面板的工具欄圖標(biāo)切換）,4、站點的編輯和管理,調(diào)整窗口視圖 默認情況下，遠程站點或本地站點地圖顯示在站點窗口左邊，本站點顯示在右邊，但可以轉(zhuǎn)換顯示方式。 編輯首選參數(shù)站點總是顯示 保存站點地圖(先切換至地圖視圖模式) 面板菜單：文件保存站點地圖(Bmp或Png格式),4、站點的編輯和管理,重建站點緩存 為了加快更新過程，Dreamweaver 可創(chuàng)建一個緩存文件，用以存儲有關(guān)本地文件夾中所有鏈接的信息。在“站點定義”對話框中選擇“緩存”選項，就會創(chuàng)建此緩存文件。以后在使用Dreamweaver 添加、更改或刪除到本地站點上文件的鏈接時，此緩存文件將以不可見方式更新。,4、站點的編輯和管理,重建站點緩存 菜單：站點管理站點選擇站點編輯“高級”標(biāo)簽選擇左側(cè)列表中“本地信息”類別選中“啟用緩存”復(fù)選框。 啟動之后，第一次更改或刪除指向本地文件夾中文件的鏈接時，會提示您載入緩存。如果單擊“否”，則將所做更改記入緩存，但并不載入該緩存，而且Dreamweaver 也不更新鏈接。,4、站點的編輯和管理,重建站點緩存 在比較大型的站點上，載入此緩存可能需要一段時間，其中的大部分時間用于將本站點上文件 的時間戳與緩存中記錄的時間戳進行比較，以確定緩存是否過期。如果沒有在DW之外更改任何文件，則當(dāng)“停止”按鈕出現(xiàn)時，可以放心地單擊該按鈕。 如果要重新創(chuàng)建站點緩存，在文件面板中，選擇面板菜單站點重建站點緩存,4、站點的編輯和管理,站點編輯、復(fù)制、刪除、導(dǎo)入與導(dǎo)出 文件面板菜單站點管理站點,三、文本的使用,1、文字輸入 2、文字編輯 3、文字屬性面板 4、使用CSS樣式 5、清理當(dāng)前頁面,三、文本的使用,1、文字輸入 要注意的細節(jié)： （1）換行與分段 換行：Shift+Enter(菜單：插入HTML特殊字符換行符) 分段：Enter,三、文本的使用,1、文字輸入 (2) 空白 全角空格 代碼視圖中輸入 或插入欄文本字符不換行空格 輸入多個連續(xù)空格：編輯首選參數(shù)常規(guī)選中“允許多個連續(xù)的空格” 直接按 Ctrl+Shift+空格鍵輸入空白,三、文本的使用,1、文字輸入 (3) 插入時間與日期 插入欄常用日期 菜單：插入日期 (4) 插入特殊符號 插入欄文本字符 菜單：插入HTML特殊字符 (5) 分隔線 插入欄HTML水平線 菜單：插入HTML水平線,三、文本的使用,2、文字編輯 （1）文字選取 拖動選取 雙擊選擇英文單詞或中文句子；三擊選擇段落； 單擊起點，然后按Shift，再單擊終點，選中兩點之間文本。 編輯全選； 單擊狀態(tài)行上的標(biāo)簽選擇器；,三、文本的使用,2、文字編輯 （2）剪切、復(fù)制與粘貼及撤消與重做 Ctrl+拖動：復(fù)制 拷貝HTML/粘貼HTML 撤消：Ctrl+Z 重做： Ctrl+Y,三、文本的使用,2、文字編輯 （3）查找與替換（Ctrl+F ） 在當(dāng)前文件中替換文本 在一個文件夾中替換文本 保存和載入查詢 在源代碼中查找與替換 高級文本查找替換 替換HTML標(biāo)簽 查找下一個（F3鍵）,三、文本的使用,3、文字屬性面板 顯示/關(guān)閉當(dāng)前對象屬性面板：CTRL+F3 段落和標(biāo)題格式（文本段落格式） 文字顏色（文本顏色） 字體（文本字體） 文字大?。ㄎ谋敬笮?改變大小） 文字樣式（文本樣式） 對齊方式（文本 對齊） 列表（有序列表、無序列表）及列表屬性（文本列表） 段落縮進（Ctrl+Alt+ ）或凸出（ Ctrl+Alt+ ）（文本縮進/凸出） 文字超鏈接（屬性面板中鏈接欄）,三、文本的使用,4、使用CSS樣式 通過設(shè)置CSS樣式，可以快速一致地將字體格式應(yīng)用于文檔中的文本。 CSS樣式可由單個或多個CSS字體標(biāo)簽屬性（如顏色、字體、大?。┮约捌渌袷綄傩裕ù煮w或斜體）組成。 菜單：窗口 CSS樣式 菜單：文本 CSS樣式,三、文本的使用,5、清理當(dāng)前頁面 （1）清理HTML/XHTML 此功能可刪除空標(biāo)簽、合并嵌套FONT標(biāo)簽，以及通過其他方法改善雜亂或不可讀的HTML代碼。 命令清理HTML/XHTML 文件轉(zhuǎn)換 XHTML,三、文本的使用,5、清理當(dāng)前頁面 （2）導(dǎo)入Word 文件和清理Word生成的HTML 文件導(dǎo)入 Word文檔 命令清理Word生成的HTML,四、圖像的使用,1、圖像的格式 雖然圖像標(biāo)準(zhǔn)中存在多種圖形文件格式，但網(wǎng)頁中通常使用的只有三種，即GIF、JPEG和PNG。目前， GIF和JPEG格式的支持情況最好，大多數(shù)瀏覽器都可以查看。 GIF：只支持256種顏色 JPEG：有損壓縮的格式 PNG：無損壓縮圖像，支持一千六百萬種顏色。,四、圖像的使用,2、圖像文件和圖像占位符插入 菜單：插入圖像 工具欄：插入欄常用圖像 在站點面板中直接將圖像文件拖到頁面上 從資源管理器中直接將圖像文件拖到頁面上 菜單：插入圖像對象圖像占位符 工具欄：插入欄常用圖像占位符,四、圖像的使用,3、圖像和圖像占位符屬性面板使用 主要屬性：圖像的名稱、大小、源文件、鏈接、替代文字、邊框和邊距、對齊方式等。,四、圖像的使用,4、圖像熱區(qū) 使用圖像地圖，可以在單個圖像中創(chuàng)建多個熱點或熱區(qū)（可單擊的區(qū)域），并使每一個熱點鏈接到一個不同的URL。 注：圖像地圖指已被分為多個可鏈接區(qū)域（或稱“熱點”）的圖像 （1）繪制熱區(qū) 矩形 橢圓形 多邊形,四、圖像的使用,4、圖像熱區(qū) （2）選擇熱區(qū) 多選方法：SHIFT+單擊 （3）移動熱區(qū) （4）調(diào)整熱區(qū)大小,四、圖像的使用,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)航條由圖像或圖像組組成，這些圖像的顯示內(nèi)容隨用戶操作而變化。每個頁面只能有一個導(dǎo)航條。 使用“插入導(dǎo)航條”命令之前，須首先為各個導(dǎo)航項目的顯示狀態(tài)創(chuàng)建一組圖像。,四、圖像的使用,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 7、制作WEB相冊 命令菜單創(chuàng)建網(wǎng)站相冊,四、圖像的使用,8、圖像的優(yōu)化和格式轉(zhuǎn)換 （1）用Fireworks優(yōu)化頁面圖像 右擊圖像在 Fireworks中優(yōu)化 命令 在 Fireworks中優(yōu)化圖像 （2）用Photoshop和Fireworks轉(zhuǎn)換圖像文件格式和優(yōu)化處理,五、超鏈接,1、關(guān)于URL 2、超鏈接的制作方法 3、超鏈接的類型 4、設(shè)置鏈接的目標(biāo)窗口,五、超鏈接,1、關(guān)于URL URL（統(tǒng)一資源定位符）：用于描述網(wǎng)絡(luò)資源的位置、類型和訪問方法。 一般格式： 協(xié)議:/IP地址（域名）:端口號/目錄/文件名 協(xié)議：指明訪問該資源所采用的協(xié)議。如HTTP、FTP等。,五、超鏈接,2、超鏈接的制作方法 （1）通過“指向文件”圖標(biāo)創(chuàng)建鏈接 注：文件名最好不用中文。如一定要使用中文文件名，則需要設(shè)置： 編輯首選參數(shù)代碼改寫使用%將URL中的特殊字符編碼 （2）屬性面板Link欄輸入和文件夾圖標(biāo)創(chuàng)建鏈接,五、超鏈接,2、超鏈接的制作方法(續(xù)) （3）插入菜單或插入欄創(chuàng)建超鏈 插入菜單超級鏈接 插入欄常用超級鏈接 修改菜單創(chuàng)建鏈接 （4）超鏈接的相關(guān)操作 修改菜單創(chuàng)建鏈接或更改鏈接 修改菜單移除鏈接 修改菜單打開鏈接頁面 修改菜單鏈接目標(biāo),五、超鏈接,3、超鏈接的類型 (1) HTML鏈接（頁面鏈接） (2) E-mail鏈接 Link欄手工輸入 mailto:郵件地址 插入欄常用電子郵件鏈接 插入菜單電子郵件鏈接 (3) 文件鏈接 (4) 錨點和鏈接,五、超鏈接,3、超鏈接的類型 (4)錨點和鏈接 創(chuàng)建錨點 插入菜單命名錨記 插入欄常用命名錨記 錨點引用 同一文件中錨點引用，在屬性面板中超鏈欄填寫#錨點名 不同文件之間錨點引用，則填寫文件名#錨點名,五、超鏈接,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() 關(guān)閉當(dāng)前窗口，在屬性面板Link欄輸入 javascript: self.close(),五、超鏈接,3、超鏈接的類型 (6)腳本鏈接 -續(xù) 例如： 顯示一個警告框，在屬性面板Link欄輸入 javascript:alert(This link leads to the index),五、超鏈接,4、設(shè)置鏈接的目標(biāo)窗口 _blank:在新的瀏覽窗口中打開鏈接的文檔 _parent:在顯示鏈接的框架父框架集中打開鏈接的文檔，同時替換整個框架集。 _self：在當(dāng)前框架中打開鏈接，同時替換所有框架。 _top：在當(dāng)前瀏覽器窗口中打開鏈接的文框，同時替換所有框架。,六、網(wǎng)頁屬性,1、設(shè)置頁面屬性 2、使用頭元素 3、頁面配色方案 4、可視化助理,六、網(wǎng)頁屬性,1、設(shè)置頁面屬性 修改菜單頁面屬性 標(biāo)題、背景、字體和鏈接的顏色，頁邊距等。 2、使用頭元素 （1）Meta 標(biāo)簽的常見功能： 幫助主頁被各大搜索引擎登錄 定義頁面的使用語言 自動刷新并指向新的頁面 實現(xiàn)網(wǎng)頁轉(zhuǎn)換時的動畫效果,六、網(wǎng)頁屬性,2、使用頭元素 （2）顯示和修改當(dāng)前頁面現(xiàn)有的文件頭信息 查看文件頭內(nèi)容：查看文件頭欄及其屬性面板 （3）設(shè)置當(dāng)前頁面新的文件頭信息 插入欄HTML文件頭標(biāo)簽選擇項目 插入菜單HTML文件頭標(biāo)簽選擇項目,文件頭標(biāo)簽選擇項目,“Meta”：將一個“Meta”標(biāo)簽插入到文檔head部分。出現(xiàn)一個對話框，您可以在其中輸入meta屬性的信息。 “關(guān)鍵字”：將一個meta name=“keywords”標(biāo)簽插入到文檔的head部分。出現(xiàn)一個對話框，可以在其中輸入文檔的關(guān)鍵字。,文件頭標(biāo)簽選擇項目,“描述”：將一個“描述”meta標(biāo)簽插入到文檔的head部分。出現(xiàn)一個對話框，可在其中輸入描述文檔的文本。 “刷新”：將一個“刷新” meta標(biāo)簽插入到文檔的head部分。出現(xiàn)一個對話框，可在其中輸入刷新以前等待的秒數(shù)，以及是要重新載入當(dāng)前頁面還是轉(zhuǎn)到新的頁面。,文件頭標(biāo)簽選擇項目,“基礎(chǔ)”：將一個base標(biāo)簽插入到文檔的head部分。出現(xiàn)一個對話框，可在其中輸入文檔連接的基礎(chǔ)URL。 “鏈接”：將一個link標(biāo)簽插入到文檔的head部分。出現(xiàn)一個對話框，可在其中輸入鏈接信息，請注意這不是一個超文本鏈接；它經(jīng)常用來指定外部樣式表。,六、網(wǎng)頁屬性,2、使用頭元素 （4）Meta的屬性 Meta的屬性有兩種：name和http-equiv。 Name屬性主要用于描述網(wǎng)頁，與之對應(yīng)的屬性值為content（網(wǎng)頁內(nèi)容），以便于搜索引擎查找、分類（目前幾乎所有的搜索引擎都使用網(wǎng)上自動查找meta值來給網(wǎng)頁分類）。這其中最重要的是description（站點在搜索引擎上的描述）和keywords（分類關(guān)鍵詞），所以應(yīng)該給每頁加一個Meta值。,name 屬性,1、用以說明生成工具（如Microsoft FrontPage 4.0）等； 2、向搜索引擎說明你的網(wǎng)頁的關(guān)鍵詞 3、告訴搜索引擎你的站點的主要內(nèi)容； 4、告訴搜索引擎你的站點的制作的作者；,name 屬性,5、 其中的屬性說明如下： 設(shè)定為all：文件將被檢索，且頁面上的鏈接可以被查詢； 設(shè)定為none：文件將不被檢索，且頁面上的鏈接不可以被查詢； 設(shè)定為index：文件將被檢索； 設(shè)定為follow：頁面上網(wǎng)頁等級評定，在IE的internet選項中有一項內(nèi)容設(shè)置，可以防止瀏覽一些受限制的網(wǎng)站，而網(wǎng)站的限制級別就是通過meta屬性來設(shè)置的；,http-equiv屬性,1、 和 用以說明主頁制作所使用的文字以及語言； 字符集：英文是ISO-8859-1字符集，還有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集； ISO 語言代碼 ：如 en-US (English US 英文-美國)。中文的語言代碼是 zh-TW (中國臺灣),zh-HK (中國香港),與 zh-CN (中國大陸),http-equiv屬性,2、 定時: 讓網(wǎng)頁在指定的時間n內(nèi)，跳轉(zhuǎn)到頁面http:/yourlink； 3、 用于設(shè)定網(wǎng)頁的到期時間，一旦過期則必須到服務(wù)器上重新調(diào)用。需要注意的是必須使用GMT時間格式；,http-equiv屬性,4、 用于設(shè)定禁止瀏覽器從本地機的緩存中調(diào)閱頁面內(nèi)容，設(shè)定后一旦離開網(wǎng)頁就無法從Cache中再調(diào)出； 5、 cookie設(shè)定，如果網(wǎng)頁過期，存盤的cookie將被刪除。需要注意的也是必須使用GMT時間格式；,http-equiv屬性,6、 網(wǎng)頁等級評定，在IE的internet選項中有一項內(nèi)容設(shè)置，可以防止瀏覽一些受限制的網(wǎng)站，而網(wǎng)站的限制級別就是通過meta屬性來設(shè)置的； 7、 強制頁面在當(dāng)前窗口中以獨立頁面顯示，可以防止自己的網(wǎng)頁被別人當(dāng)作一個frame頁調(diào)用；,http-equiv屬性,8、和設(shè)定進入和離開頁面時的特殊效果，這個功能即FrontPage中的“格式/網(wǎng)頁過渡”，不過所加的頁面不能夠是一個frame頁面。 Duration的值為網(wǎng)頁動態(tài)過渡的時間，單位為秒。 Transition是過渡方式，它的值為0到23，分別對應(yīng)24種過渡方式。,六、網(wǎng)頁屬性,3、頁面配色方案 命令菜單設(shè)定配色方案 4、可視化助理 設(shè)置在設(shè)計視圖下，是否顯示頁面對象的邊框或頁面的不可見元素。 查看菜單可視化助理（選擇項目） 工具欄視圖選項可視化助理（選擇項目） 編輯菜單首選參數(shù)不可見元素,七、表格的使用,表格(table)是頁面的重要元素,是頁面排版的主要手段。盡管DHTML中的層(layer)也可以實現(xiàn)網(wǎng)頁元素的自由定位，但是表格顯然更加方便編輯與修改。熟練掌握和運用表格的各種屬性，可以讓您的頁面看起來賞心悅目。,七、表格的使用,1、插入表格 插入菜單表格 插入欄 常用表格 或插入欄 布局表格 2、表格基本操作 （1）選擇表格元素 整個表格：標(biāo)簽、修改表格選擇表格、右鍵、Ctrl+A+A、邊框 行、列 ：標(biāo)簽（行）、邊框、拖拽 單元格：標(biāo)簽、 Ctrl+單擊、 Ctrl+A、拖拽,七、表格的使用,2、表格基本操作 （2）處理表格行、列 插入行（Ctrl+M）、列（ Ctrl+Shift+A ） 修改菜單、右鍵、屬性檢查器、Tab 刪除行（ Ctrl +Shift +M ）、列（ Ctrl +Shift +- ） （3）單元格分、合 單元格合并（ Ctrl +Alt +M ） 單元格拆分（ Ctrl +Alt +S ）,七、表格的使用,2、表格基本操作 （4）其它操作 行列寬度調(diào)整和高度調(diào)整 表格復(fù)制、剪切和粘貼 3、設(shè)置表格屬性 4、格式化表格 命令菜單格式化表格,七、表格的使用,5、表格排序 命令菜單排序表格 6、表格與表格式數(shù)據(jù)導(dǎo)入和導(dǎo)出 導(dǎo)入： 文件菜單導(dǎo)入表格式數(shù)據(jù) 或插入欄布局表格數(shù)據(jù) 導(dǎo)出： 文件菜單導(dǎo)出表格,八、頁面布局,1、布局視圖下繪制表格（布局表格） 2、跟蹤圖像,八、頁面布局,1、布局視圖下繪制表格（布局表格） （1）視圖切換 查看菜單表格模式 插入欄布局標(biāo)準(zhǔn)視圖/布局視圖 編輯首選參數(shù)布局模式 （2）繪制布局表格 插入欄布局繪制布局表格（按住CTRL連續(xù)繪制多個，按住Alt取消自動吸附功能）,八、頁面布局,1、布局視圖下繪制表格（布局表格） （3）繪制布局單元格 插入欄布局繪制布局單元格（按住CTRL可連續(xù)繪制多個，按住Alt取消自動吸附功能） （4）嵌套布局表格 （5）移動表格或單元格 （6）設(shè)置表格和單元格屬性,八、頁面布局,2、跟蹤圖像 可以使用跟蹤圖像作為重新創(chuàng)建已經(jīng)使用圖形應(yīng)用程序（如 Macromedia Freehand 或 Fireworks）創(chuàng)建的頁面設(shè)計的向?qū)А?跟蹤圖像是放在“文檔”窗口背景中的 JPEG、GIF 或 PNG 圖像。可以隱藏圖像、設(shè)置圖像的不透明度和更改圖像的位置。,八、頁面布局,2、跟蹤圖像 若要將跟蹤圖像放在“文檔”窗口中，可執(zhí)行以下操作： (1)選擇“查看”“跟蹤圖像”“載入”。 或者選擇“修改”“頁面屬性”，然后單擊“跟蹤圖像”文本框旁邊的“瀏覽”按鈕。 (2)在出現(xiàn)的對話框中，選擇圖像文件并單擊“選擇”(Windows) 或“選擇”(Macintosh)。 “頁面屬性”對話框隨即出現(xiàn)。 (3)拖動“圖像透明度”滑塊指定圖像的透明度，然后單擊“確定”。 (4)若要隨時切換到另一跟蹤圖像或更改當(dāng)前跟蹤圖像的透明度，請選擇“修改”“頁面屬性”。,八、頁面布局,2、跟蹤圖像 若要顯示或隱藏跟蹤圖像，請執(zhí)行以下操作： 選擇“查看”“跟蹤圖像”“顯示”。 僅在 Dreamweaver 中跟蹤圖像是可見的。當(dāng)在瀏覽器中查看頁面時，跟蹤圖像永遠不可見。當(dāng)跟蹤圖像可見時，頁面的實際背景圖像和顏色在“文檔”窗口中不可見；但是，在瀏覽器中查看頁面時，背景圖像和顏色是可見的。,八、頁面布局,2、跟蹤圖像 若要更改跟蹤圖像的位置，請執(zhí)行以下操作： (1)選擇“查看”“跟蹤圖像”“調(diào)整位置”。 (2)執(zhí)行下列操作之一： 若要準(zhǔn)確地指定跟蹤圖像的位置，請在“X”和“Y”文本框中輸入坐標(biāo)值。 若要逐個像素地移動圖像，請使用箭頭鍵。 若要一次五個像素地移動圖像，請按 Shift 鍵和箭頭鍵。 (3)重設(shè)跟蹤圖像的位置： 選擇“查看”“跟蹤圖像”“重設(shè)位置”。 跟蹤圖像隨即返回到文檔窗口的左上角 (0,0)。,八、頁面布局,2、跟蹤圖像 若要將跟蹤圖像與所選元素對齊，請執(zhí)行以下操作： 在“文檔”窗口中選擇一個元素。 選擇“查看”“跟蹤圖像”“對齊所選范圍”。 跟蹤圖像的左上角隨即與所選元素的左上角對齊。,九、表單的使用,1、關(guān)于表單 2、插入表單及設(shè)置表單屬性 3、插入表單元素及屬性設(shè)置 4、表單應(yīng)用舉例,九、表單的使用,1、關(guān)于表單 表單是用于實現(xiàn)網(wǎng)頁瀏覽者與服務(wù)器之間信息交互的一種頁面元素,被廣泛用于各種信息的搜集和反饋，如調(diào)查表、訂單、站點注冊單、搜索引擎等。 表單有兩個部分組成：一是面向客戶端各種對象部分，一是服務(wù)器端的處理程序部分。,九、表單的使用,1、關(guān)于表單 當(dāng)訪問者將信息輸入Web站點表單單擊提交按鈕時，這些信息將被發(fā)送到服務(wù)器，服務(wù)器端腳本或應(yīng)用程序?qū)@些信息進行響應(yīng)。通常，通過通用網(wǎng)關(guān)接口（CGI）腳本、ColdFusion頁、Java Server Page（JSP）或ASP來處理信息。如果不使用服務(wù)端腳本或應(yīng)用程序來處理表單數(shù)據(jù)，就無法收集這些數(shù)據(jù)。,九、表單的使用,2、插入表單及設(shè)置表單屬性 插入表單 插入表單 插入欄表單 Dreamweaver插入一個表單（域）。當(dāng)頁面處于設(shè)計視圖中時，用紅色的虛輪廓線指示表單。如果沒有看到此輪廓線，請檢查是否選中了“查看可視化助理不可見元素”。,九、表單的使用,2、插入表單及設(shè)置表單屬性 設(shè)置表單屬性（用屬性檢查器設(shè)置 ） 在“表單名稱”文本框中，鍵入標(biāo)識該表單的唯一名稱。 命名表單后，就可以使用腳本語言（如 JavaScript 或 VBScript）引用或控制該表單。如果不命名表單，則 Dreamweaver 使用語法 form n 生成一個名稱，并在向頁面中添加每個表單時遞增 n 的值。,九、表單的使用,2、插入表單及設(shè)置表單屬性 在“動作”文本框中，指定處理該表單的動態(tài)頁或腳本的路徑?？梢栽凇皠幼鳌蔽谋究蛑墟I入完整路徑，也可以單擊文件夾圖標(biāo)定位到同一站點中包含該腳本或應(yīng)用程序頁的相應(yīng)文件夾。 在“方法”彈出菜單中，選擇將表單數(shù)據(jù)傳輸?shù)椒?wù)器的方法。有POST、GET和默認三種選擇。,九、表單的使用,2、插入表單及設(shè)置表單屬性 如果需要，可以使用“MIME 類型”彈出菜單指定對提交給服務(wù)器進行處理的數(shù)據(jù)使用 MIME 編碼類型。 默認設(shè)置 application/x-www-form-urlencode 通常與 POST 方法協(xié)同使用。如果要創(chuàng)建文件上傳域，請指定 multipart/form-data MIME 類型。,附：關(guān)于POST與GET方法,POST 方法將在 HTTP 請求中嵌入表單數(shù)據(jù)。 GET 方法將值附加到請求該頁的 URL 中。 默認方法使用瀏覽器的默認設(shè)置將表單數(shù)據(jù)發(fā)送到服務(wù)器。通常，默認方法為 GET 方法。 不要使用 GET 方法發(fā)送長表單。URL 的長度限制在 8192 個字符以內(nèi)。如果發(fā)送的數(shù)據(jù)量太大，數(shù)據(jù)將被截斷，從而導(dǎo)致意外的或失敗的處理結(jié)果。,附：關(guān)于POST與GET方法,對于由 GET 方法傳遞的參數(shù)所生成的動態(tài)頁，可添加書簽，這是因為重新生成頁面所需的全部值都包含在瀏覽器地址框中顯示的 URL 中。與此相反，對于由 POST 方法傳遞的參數(shù)所生成的動態(tài)頁，不可添加書簽。 如果您要收集機密用戶名和密碼、信用卡號或其它機密信息，POST 方法看起來比 GET 方法更安全。但是，由 POST 方法發(fā)送的信息是未經(jīng)加密的，容易被黑客獲取。若要確保安全性，請通過安全的連接與安全的服務(wù)器相連。,九、表單的使用,3、插入表單元素及屬性設(shè)置 表單：所有表單對象要發(fā)揮作用，就必須存在于表單域中。 文本字段：在表單中插入一個可輸入一行文本的文本域。文本域接受任何類型的字母數(shù)字。該文本可以顯示為單行、多行，也可以顯示為一系列點或星號（密碼輸入） 隱藏域：可以存儲用戶輸入的信息，如姓名、電子郵件地址或常用的查看方式，并在該用戶下次訪問引站點時使用這些數(shù)據(jù)。,九、表單的使用,3、插入表單元素及屬性設(shè)置 復(fù)選框：允許在一組選項中選擇多項。用戶可以選擇任意多個適用的選項。 單選按鈕：代表互相排斥的選擇。在某單選按鈕組（多個按鈕同名）中選擇一個按鈕，就會取消選擇該組中的所有其他按鈕。 單選按鈕組：直接插入一組多個單選按鈕。,九、表單的使用,3、插入表單元素及屬性設(shè)置 列表/菜單：“列表”選項在一個滾動列表中顯示選項值，用戶可以從該滾動列表中選擇多個選項?！安藛巍边x項則是在一個菜單中顯示選項值，用戶只能從中選擇單個選項。 跳轉(zhuǎn)菜單：是可導(dǎo)航的列表或彈出式菜單，它使你可以插入一種菜單，這種菜單中的每個選項都擁有鏈接的屬性，單擊即可跳轉(zhuǎn)至其他網(wǎng)頁或文件。,九、表單的使用,3、插入表單元素及屬性設(shè)置 圖像域：插入一個可放置圖像的區(qū)域。該圖像用于生成圖形化按鈕，例如“提交”或“重置”按鈕。 文件域：插入一個文本字段和一個“瀏覽”按鈕。用戶可以使用文件域瀏覽本地計算機上的某個文件并將該文件作為表單數(shù)據(jù)上傳。 按鈕：在單擊時執(zhí)行某一腳本或程序，例如，提交或重置表單。并且可以自定義按鈕名稱或標(biāo)簽。,九、表單的使用,4、表單應(yīng)用舉例 簡單舉例： 瀏覽器端：表單中文本提交 服務(wù)器端：響應(yīng)文本 ,十、多媒體的使用,1、插入Flash動畫文件 2、插入Flash文本 3、插入Flash按鈕 4、插入Shockwave影片 5、插入Applet（Java程序 6、插入?yún)?shù) 7、插入ActiveX 8、插入插件 9、音頻文件使用 10、視頻文件使用,十、多媒體的使用,1、插入Flash動畫文件 插入菜單媒體 Flash 插入欄常用 Flash 技巧提醒：使Flash動畫文件背景透明的方法： 在屬性面板中增加屬性Wmode，值Transparent,十、多媒體的使用,2、插入Flash文本 插入菜單媒體 Flash文本 插入欄常用 Flash文本 Flash 文本對象允許您創(chuàng)建和插入只包含文本的 Flash 影片。這使您可以使用自己選擇的設(shè)計器字體和文本創(chuàng)建較小的矢量圖形影片。,十、多媒體的使用,3、插入Flash按鈕 插入菜單媒體 Flash按鈕 插入欄常用 Flash按鈕,十、多媒體的使用,4、插入Shockwave影片 插入菜單媒體 Shockwave 插入欄常用 Shockwave Shockwave 作為 Web 上用于交互式多媒體的 Macromedia 標(biāo)準(zhǔn)，是一種經(jīng)壓縮的格式，使得在 Macromedia Director 中創(chuàng)建的多媒體文件能夠被快速下載，而且可以在大多數(shù)常用瀏覽器中進行播放。,十、多媒體的使用,5、插入Applet（Java程序） 可以使用 Dreamweaver 將 Java applet 插入 HTML 文檔中。Java 是一種編程語言，通過它可以開發(fā)可嵌入 Web 頁中的小型應(yīng)用程序（applet）。 插入菜單媒體 Applet 插入欄常用 Applet,十、多媒體的使用,6、插入?yún)?shù) 插入欄常用參數(shù) 使用“參數(shù)”對話框可為 Shockwave 和 Flash SWF 文件、ActiveX 控件、Netscape Navigator 插件和 Java applets 定義的特定參數(shù)輸入值。 使用參數(shù)控制媒體對象,十、多媒體的使用,7、插入ActiveX 可以在頁面中插入 Active X 控件。ActiveX 控件（以前稱作 OLE 控件）是可以充當(dāng)瀏覽器插件的可重復(fù)使用的組件，有些像微型的應(yīng)用程序。 插入菜單媒體 ActiveX 插入欄常用 ActiveX,十、多媒體的使用,8、插入插件 插入媒體元素： 插入菜單媒體插件 插入欄常用插件,十、多媒體的使用,9、音頻文件的使用 常用的聲音格式主要包括： mid/wav/aif/mp3/rm/ra/ram/rpm等。 （1）鏈接到音頻文件 需要客戶端已安裝相應(yīng)的播放程序。 （2）嵌入音頻文件 嵌入音頻將聲音直接并入頁面中，但只有在訪問您站點的訪問者具有所選聲音文件的適當(dāng)插件后，聲音才可以播放。如果希望將聲音用作背景音樂，或如果希望控制音量、播放器在頁面上的外觀或者聲音文件的開始點和結(jié)束點，請嵌入文件。,十、多媒體的使用,9、音頻文件的使用 若要嵌入音頻文件，請執(zhí)行以下操作： 插入菜單媒體插件 或者 插入欄常用插件 在屬性檢查器中，單擊文件夾圖標(biāo)以瀏覽音頻文件，或者在“鏈接”文本框中鍵入文件的路徑和名稱。 通過在適當(dāng)?shù)奈谋究蛑休斎胫祷蛘咄ㄟ^在“文檔”窗口中調(diào)整插件占位符的大小，輸入寬度和高度。,十、多媒體的使用,9、音頻文件的使用 （3）使用播放聲音行為 先創(chuàng)建基于文本和圖像等對象的超鏈，再設(shè)其“播放聲音”行為。（通過“行為”面板） （4）設(shè)置頁面背景聲音 代碼視圖下手工輸入：,十、多媒體的使用,10、視頻文件使用 常用的視頻格式： 主要包括mpg/mpeg/avi/wmv/asf/mov/ rpm/rm等。 （1）鏈接到視頻文件 需要客戶端安裝相應(yīng)的播放程序。 （2）嵌入視頻文件 插入菜單媒體插件 插入欄常用插件,十一、框架的使用,1、概述 2、創(chuàng)建/刪除框架和框架集 3、選擇框架和框架集 4、查看和設(shè)置框架和框架集屬性 5、在框架中插入網(wǎng)頁文件 6、保存框架和框架集的文件 7、設(shè)置框架內(nèi)超鏈接 8、處理不能顯示框架的瀏覽器 9、頁中頁技術(shù)（浮動框架）,十一、框架的使用,1、概述 框架結(jié)構(gòu)是一種使多個網(wǎng)頁通過多種類型區(qū)域的劃分，顯示在同一個窗口的網(wǎng)頁結(jié)構(gòu)。 一個框架結(jié)構(gòu)又是由兩部分網(wǎng)頁文件組成的： 框架 框架集,十一、框架的使用,1、概述 關(guān)于框架和框架集 框架 是瀏覽器窗口中的一個區(qū)域，它可以顯示與瀏覽器窗口的其余部分中所顯示內(nèi)容無關(guān)的 HTML 文檔。 框架集 也是 HTML 文件，它定義一組框架的布局和屬性，包括框架的數(shù)目、框架的大小和位置以及在每個框架中初始顯示的頁面的 URL?？蚣芗募旧聿话跒g覽器中顯示的 HTML 內(nèi)容，只是向瀏覽器提供應(yīng)如何顯示一組框架以及在這些框架中應(yīng)顯示哪些文檔的有關(guān)信息。,十一、框架的使用,2、創(chuàng)建/刪除框架和框架集 方法有二：一是使用系統(tǒng)預(yù)定義的框架集，二是自己動手設(shè)計框架集。 （1）使用預(yù)定義的框架集 插入菜單HTML框架 插入欄 布局框架 “新建文檔”對話框創(chuàng)建新的空框架集。,十一、框架的使用,2、創(chuàng)建/刪除框架和框架集 （2）手動設(shè)計框架集 提示：在創(chuàng)建框架集或使用框架前，通過選擇“查看”“可視化助理”“框架邊框”，使框架邊框在“文檔”窗口的“設(shè)計”視圖中可見。 若要創(chuàng)建框架集，請執(zhí)行以下操作： 選擇“修改”“框架集”，然后從子菜單選擇拆分項（例如“拆分左框架”或“拆分右框架”）。 Dreamweaver 將窗口拆分成幾個框架。如果打開一個現(xiàn)有的文檔，它將出現(xiàn)在其中一個框架中。,十一、框架的使用,2、創(chuàng)建/刪除框架和框架集 （3）嵌套框架 在另一個框架集之內(nèi)的框架集稱作嵌套的框架集。一個框架集文件可以包含多個嵌套的框架集。大多數(shù)使用框架的 Web 頁實際上都使用嵌套的框架,十一、框架的使用,2、創(chuàng)建/刪除框架和框架集 （4）刪除框架和框架集 將框架的邊框拖離“設(shè)計”視圖范圍或拖到父框架的邊框上。 如果要刪除的框架中的文檔有未保存的內(nèi)容，則DW將提示保存該文檔。 注：不能通過拖動邊框完全刪除一個框架集。要刪除一個框架集，先關(guān)閉顯示它的文檔窗口，再刪除該框架集文件。,十一、框架的使用,3、選擇框架和框架集 可以直接在文檔窗口中選擇框架（Alt鍵+單擊）或框架集，也可以通過框架面板進行選擇。,十一、框架的使用,4、查看和設(shè)置框架和框架集屬性 （1）框架集屬性 “邊框”確定在瀏覽器中查看文檔時在框架周圍是否應(yīng)顯示邊框。要顯示邊框，則選擇“是”；要使瀏覽器不顯示邊框，則選擇“否”。 要允許瀏覽器確定如何顯示邊框，則選擇“默認值”。 “邊框?qū)挾取敝付蚣芗兴羞吙虻膶挾取?十一、框架的使用,4、查看和設(shè)置框架和框架集屬性 （1）框架集屬性（續(xù)） “邊框顏色”設(shè)置邊框的顏色。使用顏色選擇器選擇一種顏色，或者鍵入顏色的十六進制值。 若要設(shè)置選定框架集的各行和各列的框架的大小，請單擊“行列選擇范圍”區(qū)域左側(cè)或頂部的選項卡；然后在“值”文本框中，輸入高度或?qū)挾取?十一、框架的使用,4、查看和設(shè)置框架和框架集屬性 （1）框架集屬性（續(xù)） 若要指定瀏覽器分配給每個框架的空間大小，請從“單位”菜單中選擇以下選項： “像素”將選定列或行的大小設(shè)置為一個絕對值。對于應(yīng)始終保持相同大小的框架（例如導(dǎo)航條）而言，此選項是最佳選擇。,十一、框架的使用,4、查