Dreamweaver教學(xué)課件【精品】

1、Dreamweaver教學(xué)課件 Dreamweaver教學(xué)課件 一、Dreamweaver概述 二、站點(diǎn)的創(chuàng)建和管理 三、文本的使用 四、圖像的使用 五、超鏈接 六、網(wǎng)頁(yè)屬性 七、表格的使用 Dreamweaver教學(xué)課件 八、頁(yè)面布局 九、表單的使用 十、多媒體的使用 十一、框架的使用 十二、層的使用 十三、時(shí)間軸的使用 十四、歷史和資源管理器 Dreamweaver教學(xué)課件 十五、模板和庫(kù) 十六、層疊樣式表 十七、行為的應(yīng)用 十八、擴(kuò)展功能 十九、動(dòng)態(tài)網(wǎng)頁(yè)開(kāi)發(fā)基礎(chǔ)知識(shí) 二十、網(wǎng)站設(shè)計(jì) Dreamweaver教學(xué)課件 1、Dreamweaver簡(jiǎn)介 2、Dreamweaver的工作環(huán)境和相關(guān)

2、操作 3、HTML語(yǔ)言介紹語(yǔ)言介紹 4、關(guān)于Dreamweaver 幫助 Dreamweaver教學(xué)課件 nDreamweaver 是由美國(guó)著名的軟件開(kāi)發(fā) 商Macromedia公司推出的一個(gè)“所見(jiàn)即所 得”的可視化網(wǎng)站開(kāi)發(fā)工具。 n用于對(duì) Web 站點(diǎn)、Web 頁(yè)和 Web 應(yīng)用 程序進(jìn)行設(shè)計(jì)、編碼和開(kāi)發(fā)。 Dreamweaver教學(xué)課件 n它的主要特點(diǎn)如下： n可視化的設(shè)計(jì)界面：學(xué)習(xí)簡(jiǎn)單，操作快捷 n跨瀏覽器支持：支持多種瀏覽器，并可以選 擇主要的瀏覽器 n支持動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)：CSS、層、行為、 JavaScript n強(qiáng)大的網(wǎng)站管理功能：庫(kù)、模板、標(biāo)簽等 Dreamweaver教學(xué)課件 n

3、它的主要特點(diǎn)如下(續(xù))： n豐富的媒體支持：Java、Flash、Shockwave、 ActiveX、Real等 n超強(qiáng)的擴(kuò)展能力：支持第三方插件 n完善的協(xié)同工作能力：Flash、Fireworks、 Coldfusion Dreamweaver教學(xué)課件 n界面： n菜單欄、“插入”欄、文檔工具欄、文檔窗 口、面板組、屬性檢查器 n面板整理： n展開(kāi)或折疊一個(gè)面板組 n關(guān)閉面板組 n打開(kāi)屏幕上不可見(jiàn)的面板組或面板 n在展開(kāi)的面板組中選擇一個(gè)面板 Dreamweaver教學(xué)課件 n面板整理(續(xù))： n查看未顯示的面板組的“選項(xiàng)”菜單 n停靠和取消?？棵姘搴兔姘褰M n重新調(diào)整面板組大小和重命名

4、面板組 n設(shè)置“面板”首選參數(shù) Dreamweaver教學(xué)課件 n文件操作： n創(chuàng)建新文檔 n保存新文檔 n設(shè)置默認(rèn)的新文檔類型 n打開(kāi)現(xiàn)有文檔 n導(dǎo)入 Microsoft Word HTML 文件：導(dǎo)入/清理 n標(biāo)尺和網(wǎng)格：顯示/隱藏 n參數(shù)選擇：“編輯”“首選參數(shù)” Dreamweaver教學(xué)課件 (1) 概述 (2) HTML文檔 (3) HTML標(biāo)簽和屬性簡(jiǎn)介 Dreamweaver教學(xué)課件 HTML （Hypertext Markup Language，超文本標(biāo)識(shí)語(yǔ)言），超文本標(biāo)識(shí)語(yǔ)言） 是生成WWW的語(yǔ)言之一，也是組織 多媒體文檔的一門(mén)重要語(yǔ)言，它不僅用 來(lái)編寫(xiě) Web 網(wǎng)頁(yè)，而且

5、也越來(lái)越多地 被用來(lái)制作光盤(pán)上的多媒體節(jié)目。 Dreamweaver教學(xué)課件 nHTML文檔是一種沒(méi)有格式的文本文檔，也稱為 ASCII 文件。因此，HTML文檔可以使用任何一 種文本編輯器來(lái)編寫(xiě)。 n一個(gè)文檔通常由文檔頭文檔頭(head)、文檔名稱、文檔名稱 (title)、表格、表格(table)、段落、段落(paragraph)和列和列 表表(list)等成分構(gòu)成。為了表達(dá)方便，我們把這 些成分稱為文檔元素(element)，簡(jiǎn)稱為文素文素， 它們是文本文檔的基本構(gòu)件，并且使用 HTML規(guī) 定的標(biāo)簽標(biāo)簽(tag)來(lái)標(biāo)識(shí)這些文素。 Dreamweaver教學(xué)課件 n每個(gè)HTML文檔都是由標(biāo)

6、簽開(kāi)始，而 以標(biāo)簽結(jié)束。每個(gè)HTML文檔分成 兩個(gè)部分組成：文檔頭文檔頭(head)和正文正文(body)， 并分別用 和 來(lái)作標(biāo)記。 n文檔頭標(biāo)簽 之間所包含 的是文檔的名稱(title) n正文標(biāo)簽 之間含有用各 種HTML標(biāo)簽作標(biāo)記的段落、列表、和其他文 素組成的實(shí)際文檔。 Dreamweaver教學(xué)課件 n一個(gè)簡(jiǎn)單的HTML文檔如下所示： 章乃器軼事 章乃器妙語(yǔ)揭貪官 章乃器是我國(guó)杰出的愛(ài)國(guó)人士。1938年3月，應(yīng)當(dāng)時(shí) 安徽省政府主席李宗仁之邀，出任安徽省政府財(cái)政廳廳長(zhǎng)。 針對(duì)當(dāng)時(shí)眾多的貪官污吏乘國(guó)難之機(jī)貪污腐化、中飽 私囊等劣行，章乃器上任伊始就提出了“鏟除貪污”等四 項(xiàng)重大措施。

7、Dreamweaver教學(xué)課件 n簡(jiǎn)介 n基本標(biāo)簽 n屬性 n超鏈接 n嵌入背景聲音 n用圖像作網(wǎng)頁(yè)的背景 n表格的標(biāo)簽和屬性 Dreamweaver教學(xué)課件 nHTML標(biāo)簽由3部分組成：左尖括號(hào)“”。HTML標(biāo)簽名稱中 的字母不分大小寫(xiě)，標(biāo)簽通常是成對(duì)出現(xiàn)的 n某些文素還可以包含“屬性(attribute)”。屬性 是指背景顏色、字體屬性(大小、顏色、正體、 斜體等)、對(duì)齊方式等等，它是包含在開(kāi)始標(biāo) 簽中的附加信息。例如，表示這段文字是居中對(duì)齊 的 Dreamweaver教學(xué)課件 n n n n n n n、和等等 Dreamweaver教學(xué)課件 n nHTML標(biāo)簽：這個(gè)標(biāo)簽告訴瀏覽器在 之

8、間的文件是用HTML 編寫(xiě)的文檔。 n n文檔頭標(biāo)簽： 之間包 含的是HTML文檔名稱。 n n文檔名稱標(biāo)簽： 之間 包含的是具體的HTML文檔名稱，字符數(shù)通 常不超過(guò)64。 Dreamweaver教學(xué)課件 n n正文標(biāo)簽： 之間是正 文部分，這是HTML文檔最多的部分，它包 含的是顯示在瀏覽器文本窗口中的文檔內(nèi)容。 n n標(biāo)題(Heading)標(biāo)簽：HTML定義了6個(gè)等級(jí) 的標(biāo)題標(biāo)簽，其中n1，2，6。 之間包含的是第n級(jí)標(biāo)題。 Dreamweaver教學(xué)課件 n n段落(Paragraph)標(biāo)簽： 之間包 含的是一段文本。HTML中沒(méi)有使用硬換行 (carriage return)來(lái)分段落

9、，這是與字處理 軟件不同的。在HTML文檔中，和 之間不論有多少行，不論每一行有多長(zhǎng)或者 多短，也不論其間有多少個(gè)空格，瀏覽器都 把它作為一個(gè)段落來(lái)處理。 Dreamweaver教學(xué)課件 n、和和 n列表標(biāo)簽：HTML支持無(wú)編號(hào)列表和有編號(hào) 列表，而且還可以在列表中套列表。 n 表示標(biāo)簽之間的列表項(xiàng)目是無(wú) 編號(hào)列表(Unnumbered List)。 n 表示標(biāo)簽之間的列表項(xiàng)目是有 編號(hào)列表(Ordered List)。 n 表示標(biāo)簽后面的內(nèi)容是具體的列表項(xiàng)目 (List Item)。 Dreamweaver教學(xué)課件 n n強(qiáng)制換行標(biāo)簽(Forced Line Breaks/Postal Ad

10、dresses)：使用標(biāo)簽可強(qiáng)制文本換 行，其好處是不在行與行之間增加空白行。 n n水平線(Horizontal Rule)標(biāo)簽：生成一條用 于分割文檔的水平線，其長(zhǎng)度與瀏覽器窗口 等寬，粗細(xì)和長(zhǎng)短都可設(shè)置。 Dreamweaver教學(xué)課件 n屬性是指用來(lái)修改HTML標(biāo)簽之間的文素 特性，例： n例1： 理解字符屬性的概念 n例2： 這是居中段落 Dreamweaver教學(xué)課件 n基本語(yǔ)法是： . 或 . Dreamweaver教學(xué)課件 n文件內(nèi)鏈接是為閱讀方便服務(wù)的，主要 用于比較長(zhǎng)的文件。在作鏈接之前要先 建立錨點(diǎn)（名），給鏈接的目的地作個(gè) 定義。 n建立錨名 n鏈接到錨名 Dreamw

11、eaver教學(xué)課件 n建立錨名： 錨名所對(duì)應(yīng)的文錨名所對(duì)應(yīng)的文 本本 n鏈接到錨名 鏈接文本鏈接文本 Dreamweaver教學(xué)課件 n在HTML文檔中可嵌入背景音樂(lè)，當(dāng)打開(kāi) HTML文檔時(shí)就開(kāi)始播放。嵌入背景音樂(lè) 的基本語(yǔ)法結(jié)構(gòu)如下： 其中，URL表示背景音樂(lè)的文件名， LOOP表示循環(huán)次數(shù)（INFINITE為無(wú)限 次）。 Dreamweaver教學(xué)課件 n在瀏覽器上經(jīng)?？煽吹礁鞣N背景圖像， 使用圖像做網(wǎng)頁(yè)背景的語(yǔ)法結(jié)構(gòu)如下： 做背景的圖像不需要很大，瀏覽器會(huì)利 用它的平鋪(tiling)功能布滿整個(gè)網(wǎng)頁(yè)。 Dreamweaver教學(xué)課件 n命令格式： n例：顯示一幅文件名為flower.g

12、if的圖片 Dreamweaver教學(xué)課件 n相關(guān)屬性：相關(guān)屬性： n控制大?。?n高：HEIGHT像素?cái)?shù)像素?cái)?shù) n寬：WIDTH像素?cái)?shù)像素?cái)?shù) n圖像邊框： nBORDER=寬度值寬度值 n例：例： Dreamweaver教學(xué)課件 n格式：格式： n例：例： Dreamweaver教學(xué)課件 n格式：格式： n說(shuō)明：說(shuō)明： 引導(dǎo)圖在當(dāng)視頻還沒(méi)有完全被載入時(shí)，會(huì)顯 示在視頻將顯示的位置。 Dreamweaver教學(xué)課件 n相關(guān)屬性：相關(guān)屬性： nSTART屬性：屬性： n用于控制視頻的播放時(shí)機(jī)，取值有和 mouseover兩種，分別表示當(dāng)頁(yè)面一打開(kāi)就播 放和當(dāng)鼠標(biāo)移到播放區(qū)域上才播放。默認(rèn)值為。

13、n也可以同時(shí)設(shè)定以上兩個(gè)值，這時(shí)表示頁(yè)面剛載 入時(shí)播放，其后，當(dāng)我們將鼠標(biāo)移到顯示區(qū)域時(shí)， 視頻也會(huì)播放。 Dreamweaver教學(xué)課件 n例： Dreamweaver教學(xué)課件 n基本格式： 文本文本 n一些相關(guān)屬性： nDIRECTION屬性：取值有兩種 nLEFT：右向左 nRIGHT：左向右 Dreamweaver教學(xué)課件 n一些相關(guān)屬性： nBEHAVIOR屬性：取值有三種 nALTERNATE：來(lái)回移動(dòng) nSLIDE：移動(dòng)一次后停止 nSCROLL：循環(huán)單向移動(dòng) Dreamweaver教學(xué)課件 n標(biāo)簽 n屬性 n注意事項(xiàng) Dreamweaver教學(xué)課件 n. n定義表格。 n n定

14、義表的名稱(CAPTION) n . n定義表的行(Table Row)，可定義對(duì)齊屬性 n . n定義列表標(biāo)題(Table Header)，常為黑體字，中央對(duì) 齊 n n定義列表數(shù)據(jù)(Table Data)單元 Dreamweaver教學(xué)課件 nALIGN (LEFT, CENTER, RIGHT) 表單元的水平對(duì)齊方式 nVALIGN (TOP, MIDDLE, BOTTOM) 表單元的垂直對(duì)齊方式 nCOLSPAN=n 表單元跨越的列數(shù) nROWSPAN=n 表單元跨越的行數(shù) Dreamweaver教學(xué)課件 必須要包含整個(gè)表的定 義； 在表格中的第一項(xiàng)是表的名稱(CAPTION)，它 是

15、可有可無(wú)的； 標(biāo)簽定義的行的數(shù)目沒(méi)有限制； 在一行中，使用 或者 標(biāo)簽定義的數(shù)據(jù)單元數(shù)目也沒(méi)有限制； 表的每一個(gè)單元的屬性可單獨(dú)設(shè)置，因此表格 的形式可以多種多樣； 數(shù)據(jù)單元中的內(nèi)容可以是文字，也可以是圖標(biāo)， 或者是兩者，而且還可以設(shè)置超級(jí)鏈接 Dreamweaver教學(xué)課件 例表一 基本情況 入庫(kù)資料 其它資料 編號(hào) 姓名 年齡 001 肖靜 23 002 陳江 25 Dreamweaver教學(xué)課件 n“幫助”系統(tǒng)提供所有Dreamweaver 功能 的綜合信息，其本身就是一本很好的電 子書(shū)。 Dreamweaver教學(xué)課件 nDreamweaver可以用于制作單獨(dú)的網(wǎng)頁(yè) 文件，但更經(jīng)常地用

16、于整個(gè)站點(diǎn)的建設(shè)。 因?yàn)榇蠖鄶?shù)網(wǎng)頁(yè)設(shè)計(jì)者創(chuàng)建的往往不是 多種風(fēng)格網(wǎng)頁(yè)的集合，而是風(fēng)格一致的 一個(gè)網(wǎng)站。 Dreamweaver教學(xué)課件 n選擇“站點(diǎn)”“管理站點(diǎn)”。 出現(xiàn)“管 理站點(diǎn)”對(duì)話框。 注意：注意：如果您沒(méi)有定義過(guò)任何 Dreamweaver 站點(diǎn)，則會(huì)直接出現(xiàn)“站 點(diǎn)定義”對(duì)話框，您可以跳過(guò)下一步。 n單擊“新建”按鈕。 出現(xiàn)“站點(diǎn)定義” 對(duì)話框。 Dreamweaver教學(xué)課件 n執(zhí)行下列操作之一： n單擊“基本基本”選項(xiàng)卡以使用“站點(diǎn)定義向 導(dǎo)”，它將引導(dǎo)您逐步完成設(shè)置過(guò)程。 n單擊“高級(jí)高級(jí)”選項(xiàng)卡以使用“高級(jí)”設(shè)置， 它使您可以根據(jù)需要分別設(shè)置本地、遠(yuǎn)程和 測(cè)試文件夾。 Dr

17、eamweaver教學(xué)課件 n完成 Dreamweaver 站點(diǎn)設(shè)置過(guò)程： n在“站點(diǎn)定義向?qū)А敝?，回答每一屏上出現(xiàn) 的問(wèn)題，然后單擊“下一步下一步”繼續(xù)進(jìn)行設(shè)置， 或者單擊“上一步”返回到前一屏。 n對(duì)于“高級(jí)”設(shè)置，可根據(jù)需要完成“本地 信息”類別、“遠(yuǎn)程信息”類別和“測(cè)試服 務(wù)器”等類別。 Dreamweaver教學(xué)課件 我們往往根據(jù)站點(diǎn)內(nèi)容，采用層次化目錄 結(jié)構(gòu)分類分級(jí)保存網(wǎng)站文件，將相關(guān)的頁(yè)面放 在同一文件夾中，必要時(shí)可以使用子文件夾， 這種組織類型使站點(diǎn)更容易維護(hù)和導(dǎo)航。 n文件創(chuàng)建：文件創(chuàng)建：文件面板中右鍵單擊右鍵單擊新建文新建文 件件（快捷鍵Ctrl+N） n選擇文件：選擇文件

18、：可單擊選一或配合Ctrl鍵和 Shift鍵進(jìn)行多重選擇。 Dreamweaver教學(xué)課件 n打開(kāi)和編輯打開(kāi)和編輯：雙擊 n刪除：刪除：Delete鍵 n改名改名：兩次單擊 n關(guān)于保存保存：保存、另存為、全部保存、 回復(fù)至上次的保存 n復(fù)制與粘貼復(fù)制與粘貼：快捷菜單或Ctrl+拖動(dòng) n移動(dòng)移動(dòng)：直接拖動(dòng) n關(guān)閉關(guān)閉：快捷鍵Ctrl+W Dreamweaver教學(xué)課件 n消除文件只讀屬性消除文件只讀屬性：右鍵快捷菜單 n設(shè)為首頁(yè)設(shè)為首頁(yè)：右鍵快捷菜單 n添加設(shè)計(jì)備注添加設(shè)計(jì)備注：右鍵快捷菜單 n默認(rèn)情況下，當(dāng)移動(dòng)、重命名或刪除站 點(diǎn)中文檔時(shí)Dreamweaver會(huì)提示你執(zhí)行 更新，站點(diǎn)管理器可自

19、動(dòng)修復(fù)頁(yè)面中相 應(yīng)的超鏈。（編輯首選參數(shù)常規(guī)文 檔選項(xiàng)設(shè)置“移動(dòng)文件時(shí)更新鏈接”） Dreamweaver教學(xué)課件 n菜單：文件文件在瀏覽器中預(yù)覽在瀏覽器中預(yù)覽iexplore n工具欄工具欄地球圖標(biāo)地球圖標(biāo)預(yù)覽在預(yù)覽在iexplore Dreamweaver教學(xué)課件 文件面板 打開(kāi)現(xiàn)有本地網(wǎng)站 查看本地和遠(yuǎn)程網(wǎng)站的文件和地圖 調(diào)整窗口視圖 保存站點(diǎn)地圖 重建站點(diǎn)緩存 站點(diǎn)編輯、復(fù)制、刪除、導(dǎo)入與導(dǎo)出 Dreamweaver教學(xué)課件 文件面板文件面板 n“擴(kuò)展擴(kuò)展/折疊折疊”按鈕展開(kāi)或折疊“文件” 面板，以顯示一個(gè)或兩個(gè)窗格。 n顯示方式：面板菜單面板菜單查看查看站點(diǎn)文件站點(diǎn)文件 （F8）或站

20、點(diǎn)地圖）或站點(diǎn)地圖（Alt+F8）切換 打開(kāi)現(xiàn)有本地網(wǎng)站打開(kāi)現(xiàn)有本地網(wǎng)站 n在文件面板的站點(diǎn)下拉式列表中選擇站 點(diǎn)。 Dreamweaver教學(xué)課件 查看本地和遠(yuǎn)程網(wǎng)站的文件和地圖查看本地和遠(yuǎn)程網(wǎng)站的文件和地圖 n文件窗可以同時(shí)顯示本地和遠(yuǎn)程站點(diǎn)的 內(nèi)容。本地站點(diǎn)可以以文件列表、地圖 或者同時(shí)顯示兩者的方式出現(xiàn)。遠(yuǎn)程站 點(diǎn)只能以文件列表方式顯示。 n（通過(guò)文件面板的工具欄圖標(biāo)切換） Dreamweaver教學(xué)課件 調(diào)整窗口視圖調(diào)整窗口視圖 n默認(rèn)情況下，遠(yuǎn)程站點(diǎn)或本地站點(diǎn)地圖 顯示在站點(diǎn)窗口左邊，本站點(diǎn)顯示在右 邊，但可以轉(zhuǎn)換顯示方式。 n編輯首選參數(shù)站點(diǎn)總是顯示 保存站點(diǎn)地圖保存站點(diǎn)地圖(先

21、切換至地圖視圖模式先切換至地圖視圖模式) n面板菜單：文件保存站點(diǎn)地圖(Bmp或 Png格式) Dreamweaver教學(xué)課件 重建站點(diǎn)緩存重建站點(diǎn)緩存 n為了加快更新過(guò)程，Dreamweaver 可創(chuàng)建 一個(gè)緩存文件，用以存儲(chǔ)有關(guān)本地文件夾中 所有鏈接的信息。在“站點(diǎn)定義”對(duì)話框中 選擇“緩存”選項(xiàng)，就會(huì)創(chuàng)建此緩存文件。 以后在使用Dreamweaver 添加、更改或刪 除到本地站點(diǎn)上文件的鏈接時(shí)，此緩存文件 將以不可見(jiàn)方式更新。 Dreamweaver教學(xué)課件 n重建站點(diǎn)緩存重建站點(diǎn)緩存 n菜單：站點(diǎn)管理站點(diǎn)選擇站點(diǎn)編輯 “高級(jí)”標(biāo)簽選擇左側(cè)列表中“本地信息” 類別選中“啟用緩存”復(fù)選框。

22、 n啟動(dòng)之后，第一次更改或刪除指向本地文件 夾中文件的鏈接時(shí)，會(huì)提示您載入緩存。如 果單擊“否”，則將所做更改記入緩存，但 并不載入該緩存，而且Dreamweaver 也不 更新鏈接。 Dreamweaver教學(xué)課件 n重建站點(diǎn)緩存重建站點(diǎn)緩存 n在比較大型的站點(diǎn)上，載入此緩存可能需要 一段時(shí)間，其中的大部分時(shí)間用于將本站點(diǎn) 上文件 的時(shí)間戳與緩存中記錄的時(shí)間戳進(jìn) 行比較，以確定緩存是否過(guò)期。如果沒(méi)有在 DW之外更改任何文件，則當(dāng)“停止”按鈕 出現(xiàn)時(shí)，可以放心地單擊該按鈕。 n如果要重新創(chuàng)建站點(diǎn)緩存，在文件面板中， 選擇面板菜單面板菜單站點(diǎn)站點(diǎn)重建站點(diǎn)緩存重建站點(diǎn)緩存 Dreamweaver教

23、學(xué)課件 站點(diǎn)編輯、復(fù)制、刪除、導(dǎo)入與導(dǎo)出站點(diǎn)編輯、復(fù)制、刪除、導(dǎo)入與導(dǎo)出 n文件面板菜單站點(diǎn)管理站點(diǎn) Dreamweaver教學(xué)課件 1、文字輸入 2、文字編輯 3、文字屬性面板 4、使用CSS樣式 5、清理當(dāng)前頁(yè)面 Dreamweaver教學(xué)課件 1、文字輸入、文字輸入 要注意的細(xì)節(jié)： （1）換行與分段）換行與分段 n換行：Shift+Enter(菜單：插入HTML特 殊字符換行符) n分段：Enter Dreamweaver教學(xué)課件 1、文字輸入、文字輸入 (2) 空白空白 n全角空格 n代碼視圖中輸入 或插入欄文本字 符不換行空格 n輸入多個(gè)連續(xù)空格：編輯首選參數(shù)常規(guī) 選中“允許多個(gè)連續(xù)

24、的空格” n直接按 Ctrl+Shift+空格鍵輸入空白 Dreamweaver教學(xué)課件 1、文字輸入、文字輸入 (3) 插入時(shí)間與日期插入時(shí)間與日期 n插入欄常用日期 n菜單：插入日期 (4) 插入特殊符號(hào)插入特殊符號(hào) n插入欄文本字符 n菜單：插入HTML特殊字符 (5) 分隔線分隔線 n插入欄HTML水平線 n菜單：插入HTML水平線 Dreamweaver教學(xué)課件 2、文字編輯、文字編輯 （1）文字選取）文字選取 n拖動(dòng)選取 n雙擊選擇英文單詞或中文句子；三擊選擇段 落； n單擊起點(diǎn)，然后按Shift，再單擊終點(diǎn)，選中 兩點(diǎn)之間文本。 n編輯全選； n單擊狀態(tài)行上的標(biāo)簽選擇器； Dre

25、amweaver教學(xué)課件 2、文字編輯、文字編輯 （2）剪切、復(fù)制與粘貼及撤消與重做）剪切、復(fù)制與粘貼及撤消與重做 nCtrl+拖動(dòng)：復(fù)制 n拷貝HTML/粘貼HTML n撤消：Ctrl+Z n重做： Ctrl+Y Dreamweaver教學(xué)課件 2、文字編輯、文字編輯 （3）查找與替換（）查找與替換（Ctrl+F ） n在當(dāng)前文件中替換文本 n在一個(gè)文件夾中替換文本 n保存和載入查詢 n在源代碼中查找與替換 n高級(jí)文本查找替換 n替換HTML標(biāo)簽 n查找下一個(gè)（F3鍵） Dreamweaver教學(xué)課件 3、文字屬性面板、文字屬性面板 n顯示/關(guān)閉當(dāng)前對(duì)象屬性面板：CTRL+F3 n段落和標(biāo)題

26、格式（文本段落格式） n文字顏色（文本顏色） n字體（文本字體） n文字大?。ㄎ谋敬笮?改變大?。?n文字樣式（文本樣式） n對(duì)齊方式（文本 對(duì)齊） n列表（有序列表、無(wú)序列表）及列表屬性（文本 列表） n段落縮進(jìn)（Ctrl+Alt+ ）或凸出（ Ctrl+Alt+ ） （文本縮進(jìn)/凸出） n文字超鏈接（屬性面板中鏈接欄） Dreamweaver教學(xué)課件 4、使用、使用CSS樣式樣式 n通過(guò)設(shè)置CSS樣式，可以快速一致地將字 體格式應(yīng)用于文檔中的文本。 CSS樣式 可由單個(gè)或多個(gè)CSS字體標(biāo)簽屬性（如顏 色、字體、大?。┮约捌渌袷綄傩?（粗體或斜體）組成。 n菜單：窗口窗口 CSS樣式樣式

27、n菜單：文本文本 CSS樣式樣式 Dreamweaver教學(xué)課件 5、清理當(dāng)前頁(yè)面、清理當(dāng)前頁(yè)面 （1）清理）清理HTML/XHTML n此功能可刪除空標(biāo)簽、合并嵌套FONT標(biāo)簽， 以及通過(guò)其他方法改善雜亂或不可讀的 HTML代碼。 n命令命令清理清理HTML/XHTML n文件文件轉(zhuǎn)換轉(zhuǎn)換 XHTML Dreamweaver教學(xué)課件 5、清理當(dāng)前頁(yè)面、清理當(dāng)前頁(yè)面 （2）導(dǎo)入）導(dǎo)入Word 文件和清理文件和清理Word生成的生成的 HTML n文件文件導(dǎo)入導(dǎo)入 Word文檔文檔 n命令命令清理清理Word生成的生成的HTML Dreamweaver教學(xué)課件 1、圖像的格式、圖像的格式 n雖然

28、圖像標(biāo)準(zhǔn)中存在多種圖形文件格式，但 網(wǎng)頁(yè)中通常使用的只有三種，即GIF、JPEG 和PNG。目前， GIF和JPEG格式的支持情況 最好，大多數(shù)瀏覽器都可以查看。 nGIF：只支持256種顏色 nJPEG：有損壓縮的格式 nPNG：無(wú)損壓縮圖像，支持一千六百萬(wàn)種顏 色。 Dreamweaver教學(xué)課件 2、圖像文件和圖像占位符插入、圖像文件和圖像占位符插入 n菜單：插入圖像 n工具欄：插入欄常用圖像 n在站點(diǎn)面板中直接將圖像文件拖到頁(yè)面上 n從資源管理器中直接將圖像文件拖到頁(yè)面上 n菜單：插入圖像對(duì)象圖像占位符 n工具欄：插入欄常用圖像占位符 Dreamweaver教學(xué)課件 3、圖像和圖像占位

29、符屬性面板使用、圖像和圖像占位符屬性面板使用 n主要屬性：圖像的名稱、大小、源文件、鏈 接、替代文字、邊框和邊距、對(duì)齊方式等。 Dreamweaver教學(xué)課件 4、圖像熱區(qū)、圖像熱區(qū) n使用圖像地圖，可以在單個(gè)圖像中創(chuàng)建多個(gè) 熱點(diǎn)或熱區(qū)（可單擊的區(qū)域），并使每一個(gè) 熱點(diǎn)鏈接到一個(gè)不同的URL。 注：圖像地圖指已被分為多個(gè)可鏈接區(qū)域注：圖像地圖指已被分為多個(gè)可鏈接區(qū)域 （或稱（或稱“熱點(diǎn)熱點(diǎn)”）的圖像）的圖像 （1）繪制熱區(qū) n矩形 n橢圓形 n多邊形 Dreamweaver教學(xué)課件 4、圖像熱區(qū)、圖像熱區(qū) n（2）選擇熱區(qū) 多選方法：SHIFT+單擊 n（3）移動(dòng)熱區(qū) n（4）調(diào)整熱區(qū)大小 D

30、reamweaver教學(xué)課件 5、插入交互式圖像、插入交互式圖像 n（1）鼠標(biāo)經(jīng)過(guò)圖像鼠標(biāo)經(jīng)過(guò)圖像（簡(jiǎn)單翻轉(zhuǎn)圖） 使用以下方法之一插入鼠標(biāo)經(jīng)過(guò)圖像： n在“插入”欄中，選擇“常用”，然后單擊“鼠 標(biāo)經(jīng)過(guò)圖像”圖標(biāo)。 n在“插入”欄中，選擇“常用”，然后將“鼠標(biāo) 經(jīng)過(guò)圖像”圖標(biāo)拖到“文檔”窗口中的所需位置。 n選擇“插入”“圖像對(duì)象”“鼠標(biāo)經(jīng)過(guò)圖像”。 Dreamweaver教學(xué)課件 5、插入交互式圖像、插入交互式圖像 （2）導(dǎo)航條）導(dǎo)航條 n導(dǎo)航條由圖像或圖像組組成，這些圖像的顯 示內(nèi)容隨用戶操作而變化。每個(gè)頁(yè)面只能有 一個(gè)導(dǎo)航條。 n使用“插入導(dǎo)航條”命令之前，須首先為各 個(gè)導(dǎo)航項(xiàng)目的顯示狀

31、態(tài)創(chuàng)建一組圖像。 Dreamweaver教學(xué)課件 5、插入交互式圖像、插入交互式圖像 （2）導(dǎo)航條）導(dǎo)航條 若要?jiǎng)?chuàng)建導(dǎo)航條，請(qǐng)執(zhí)行以下操作： 執(zhí)行下列操作之一： n選擇“插入插入”“圖像對(duì)象圖像對(duì)象”“導(dǎo)航條導(dǎo)航條”。 n在“插入”欄的“常用”類別中，單擊 “圖像”菜單并選擇“插入導(dǎo)航條”按鈕。 出現(xiàn)“插入導(dǎo)航條”對(duì)話框。設(shè)置相關(guān)項(xiàng) 目 Dreamweaver教學(xué)課件 6、導(dǎo)入、導(dǎo)入Fireworks HTML Fireworks可利用切片將圖片文檔分割成多 個(gè)較小的部分并將每部分導(dǎo)出為單獨(dú)的文件。 n插入插入圖像對(duì)象圖像對(duì)象 Fireworks HTML n插入欄插入欄常用常用 Firewo

32、rks HTML 7、制作、制作WEB相冊(cè)相冊(cè) n命令菜單命令菜單創(chuàng)建網(wǎng)站相冊(cè)創(chuàng)建網(wǎng)站相冊(cè) Dreamweaver教學(xué)課件 8、圖像的優(yōu)化和格式轉(zhuǎn)換、圖像的優(yōu)化和格式轉(zhuǎn)換 （1）用Fireworks優(yōu)化頁(yè)面圖像 n右擊圖像右擊圖像在在 Fireworks中優(yōu)化中優(yōu)化 n命令命令 在在 Fireworks中優(yōu)化圖像中優(yōu)化圖像 （2）用Photoshop和Fireworks轉(zhuǎn)換圖像文件 格式和優(yōu)化處理 Dreamweaver教學(xué)課件 1、關(guān)于URL 2、超鏈接的制作方法 3、超鏈接的類型 4、設(shè)置鏈接的目標(biāo)窗口 Dreamweaver教學(xué)課件 1、關(guān)于、關(guān)于URL nURL（統(tǒng)一資源定位符）：用于

33、描述網(wǎng)絡(luò)資 源的位置、類型和訪問(wèn)方法。 n一般格式： 協(xié)議協(xié)議:/IP地址（域名）地址（域名）:端口號(hào)端口號(hào)/目錄目錄/文件名文件名 n協(xié)議：指明訪問(wèn)該資源所采用的協(xié)議。如 HTTP、FTP等。 Dreamweaver教學(xué)課件 2、超鏈接的制作方法、超鏈接的制作方法 （1）通過(guò)“指向文件指向文件”圖標(biāo)創(chuàng)建鏈接 n注：文件名最好不用中文。如一定要使用 中文文件名，則需要設(shè)置： n編輯編輯首選參數(shù)首選參數(shù)代碼改寫(xiě)代碼改寫(xiě)使用使用%將將 URL中的特殊字符編碼中的特殊字符編碼 （2）屬性面板Link欄輸入欄輸入和文件夾圖標(biāo)文件夾圖標(biāo)創(chuàng)建 鏈接 Dreamweaver教學(xué)課件 2、超鏈接的制作方法、超

34、鏈接的制作方法(續(xù)續(xù)) （3）插入菜單或插入欄創(chuàng)建超鏈 n插入菜單插入菜單超級(jí)鏈接超級(jí)鏈接 n插入欄插入欄常用常用超級(jí)鏈接超級(jí)鏈接 n修改菜單修改菜單創(chuàng)建鏈接創(chuàng)建鏈接 （4）超鏈接的相關(guān)操作 n修改菜單修改菜單創(chuàng)建鏈接或更改鏈接創(chuàng)建鏈接或更改鏈接 n修改菜單修改菜單移除鏈接移除鏈接 n修改菜單修改菜單打開(kāi)鏈接頁(yè)面打開(kāi)鏈接頁(yè)面 n修改菜單修改菜單鏈接目標(biāo)鏈接目標(biāo) Dreamweaver教學(xué)課件 3、超鏈接的類型、超鏈接的類型 (1) HTML鏈接（頁(yè)面鏈接） (2) E-mail鏈接 nLink欄手工輸入欄手工輸入 mailto:郵件地址郵件地址 n插入欄插入欄常用常用電子郵件鏈接電子郵件鏈接

35、n插入菜單插入菜單電子郵件鏈接電子郵件鏈接 (3) 文件鏈接 (4) 錨點(diǎn)和鏈接 Dreamweaver教學(xué)課件 3、超鏈接的類型、超鏈接的類型 (4)錨點(diǎn)和鏈接 n創(chuàng)建錨點(diǎn) n插入菜單插入菜單命名錨記命名錨記 n插入欄插入欄常用常用命名錨記命名錨記 n錨點(diǎn)引用 n同一文件中錨點(diǎn)引用，在屬性面板中超鏈 欄填寫(xiě)#錨點(diǎn)名錨點(diǎn)名 n不同文件之間錨點(diǎn)引用，則填寫(xiě)文件名文件名# 錨點(diǎn)名錨點(diǎn)名 Dreamweaver教學(xué)課件 3、超鏈接的類型、超鏈接的類型 (5)空鏈接 n創(chuàng)建空鏈接，只需在屬性面板Link欄輸 入符號(hào) # 或者 javascript:; (6)腳本鏈接 n主要用于讓頁(yè)面文字具有獲取事件的

36、能 力，尤其是方便文字與行為和腳本程序 的結(jié)合。 Dreamweaver教學(xué)課件 3、超鏈接的類型、超鏈接的類型 (6)腳本鏈接 -續(xù) n創(chuàng)建腳本鏈接，在屬性面板Link欄輸入 javascript:(后面跟一些 JavaScript 代碼或 函數(shù)調(diào)用) 例如： n打印當(dāng)前頁(yè)面，在屬性面板Link欄輸入 javascript: self.print() n關(guān)閉當(dāng)前窗口，在屬性面板Link欄輸入 javascript: self.close() Dreamweaver教學(xué)課件 3、超鏈接的類型、超鏈接的類型 (6)腳本鏈接 -續(xù) 例如： n顯示一個(gè)警告框，在屬性面板Link欄輸入 javascr

37、ipt:alert(This link leads to the index) Dreamweaver教學(xué)課件 4、設(shè)置鏈接的目標(biāo)窗口、設(shè)置鏈接的目標(biāo)窗口 n_blank:在新的瀏覽窗口中打開(kāi)鏈接的文檔 n_parent:在顯示鏈接的框架父框架集中打開(kāi) 鏈接的文檔，同時(shí)替換整個(gè)框架集。 n_self：在當(dāng)前框架中打開(kāi)鏈接，同時(shí)替換所 有框架。 n_top：在當(dāng)前瀏覽器窗口中打開(kāi)鏈接的文框， 同時(shí)替換所有框架。 Dreamweaver教學(xué)課件 1、設(shè)置頁(yè)面屬性 2、使用頭元素 3、頁(yè)面配色方案 4、可視化助理 Dreamweaver教學(xué)課件 1、設(shè)置頁(yè)面屬性、設(shè)置頁(yè)面屬性 n修改菜單頁(yè)面屬性 標(biāo)

38、題、背景、字體和鏈接的顏色，頁(yè)邊距等。 2、使用頭元素、使用頭元素 （1）Meta 標(biāo)簽的常見(jiàn)功能： n幫助主頁(yè)被各大搜索引擎登錄 n定義頁(yè)面的使用語(yǔ)言 n自動(dòng)刷新并指向新的頁(yè)面 n實(shí)現(xiàn)網(wǎng)頁(yè)轉(zhuǎn)換時(shí)的動(dòng)畫(huà)效果 Dreamweaver教學(xué)課件 2、使用頭元素、使用頭元素 （2）顯示和修改當(dāng)前頁(yè)面現(xiàn)有的文件頭信息）顯示和修改當(dāng)前頁(yè)面現(xiàn)有的文件頭信息 n查看查看文件頭內(nèi)容：查看文件頭欄及其屬文件頭內(nèi)容：查看文件頭欄及其屬 性面板性面板 （3）設(shè)置當(dāng)前頁(yè)面新的文件頭信息）設(shè)置當(dāng)前頁(yè)面新的文件頭信息 n插入欄插入欄HTML文件頭標(biāo)簽文件頭標(biāo)簽選擇項(xiàng)目選擇項(xiàng)目 n插入菜單插入菜單HTML文件頭標(biāo)簽文件頭標(biāo)簽

39、選擇項(xiàng)選擇項(xiàng) 目目 Dreamweaver教學(xué)課件 n“Meta”：將一個(gè)“Meta”標(biāo)簽插入到文檔 head部分。出現(xiàn)一個(gè)對(duì)話框，您可以在 其中輸入meta屬性的信息。 n“關(guān)鍵字關(guān)鍵字”：將一個(gè)meta name=“keywords”標(biāo)簽插入到文檔的 head部分。出現(xiàn)一個(gè)對(duì)話框，可以在其 中輸入文檔的關(guān)鍵字。 Dreamweaver教學(xué)課件 n“描述描述”：將一個(gè)“描述”meta標(biāo)簽插入 到文檔的head部分。出現(xiàn)一個(gè)對(duì)話框， 可在其中輸入描述文檔的文本。 n“刷新刷新”：將一個(gè)“刷新” meta標(biāo)簽插 入到文檔的head部分。出現(xiàn)一個(gè)對(duì)話框， 可在其中輸入刷新以前等待的秒數(shù)，以 及是要

40、重新載入當(dāng)前頁(yè)面還是轉(zhuǎn)到新的 頁(yè)面。 Dreamweaver教學(xué)課件 n“基礎(chǔ)基礎(chǔ)”：將一個(gè)base標(biāo)簽插入到文檔的 head部分。出現(xiàn)一個(gè)對(duì)話框，可在其中 輸入文檔連接的基礎(chǔ)URL。 n“鏈接鏈接”：將一個(gè)link標(biāo)簽插入到文檔的 head部分。出現(xiàn)一個(gè)對(duì)話框，可在其中 輸入鏈接信息，請(qǐng)注意這不是一個(gè)超文 本鏈接；它經(jīng)常用來(lái)指定外部樣式表。 Dreamweaver教學(xué)課件 2、使用頭元素、使用頭元素 （4）Meta的屬性 Meta的屬性有兩種：name和http-equiv。 nName屬性主要用于描述網(wǎng)頁(yè)，與之對(duì)應(yīng)的 屬性值為content（網(wǎng)頁(yè)內(nèi)容），以便于搜 索引擎查找、分類（目前幾乎

41、所有的搜索引 擎都使用網(wǎng)上自動(dòng)查找meta值來(lái)給網(wǎng)頁(yè)分 類）。這其中最重要的是description（站點(diǎn) 在搜索引擎上的描述）和keywords（分類關(guān) 鍵詞），所以應(yīng)該給每頁(yè)加一個(gè)Meta值。 Dreamweaver教學(xué)課件 n1、用 以說(shuō)明生成工具（如Microsoft FrontPage 4.0） 等； n2、向 搜索引擎說(shuō)明你的網(wǎng)頁(yè)的關(guān)鍵詞 n3、 告訴搜索引擎你的站點(diǎn)的主要內(nèi)容； n4、告訴搜索引擎你的站點(diǎn)的制作的作者； Dreamweaver教學(xué)課件 n5、 n其中的屬性說(shuō)明如下： n設(shè)定為all：文件將被檢索，且頁(yè)面上的鏈接可以被 查詢； n設(shè)定為none：文件將不被檢索，且頁(yè)

42、面上的鏈接不 可以被查詢； n設(shè)定為index：文件將被檢索； n設(shè)定為follow：頁(yè)面上網(wǎng)頁(yè)等級(jí)評(píng)定，在IE的 internet選項(xiàng)中有一項(xiàng)內(nèi)容設(shè)置，可以防止瀏覽一些 受限制的網(wǎng)站，而網(wǎng)站的限制級(jí)別就是通過(guò)meta屬 性來(lái)設(shè)置的； Dreamweaver教學(xué)課件 n1、 和 n用以說(shuō)明主頁(yè)制作所使用的文字以及語(yǔ)言； n字符集：英文是ISO-8859-1字符集，還有BIG5、 utf-8、shift-Jis、Euc、Koi8-2等字符集； nISO 語(yǔ)言代碼 ：如 en-US (English US 英文-美 國(guó))。中文的語(yǔ)言代碼是 zh-TW (中國(guó)臺(tái)灣),zh- HK (中國(guó)香港),與

43、zh-CN (中國(guó)大陸) Dreamweaver教學(xué)課件 n2、 n定時(shí): 讓網(wǎng)頁(yè)在指定的時(shí)間n內(nèi)，跳轉(zhuǎn)到頁(yè)面； n3、 n用于設(shè)定網(wǎng)頁(yè)的到期時(shí)間，一旦過(guò)期則必須 到服務(wù)器上重新調(diào)用。需要注意的是必須使 用GMT時(shí)間格式； Dreamweaver教學(xué)課件 n4、 n用于設(shè)定禁止瀏覽器從本地機(jī)的緩存中調(diào)閱 頁(yè)面內(nèi)容，設(shè)定后一旦離開(kāi)網(wǎng)頁(yè)就無(wú)法從 Cache中再調(diào)出； n5、 ncookie設(shè)定，如果網(wǎng)頁(yè)過(guò)期，存盤(pán)的cookie 將被刪除。需要注意的也是必須使用GMT時(shí) 間格式； Dreamweaver教學(xué)課件 n6、 n網(wǎng)頁(yè)等級(jí)評(píng)定，在IE的internet選項(xiàng)中有一 項(xiàng)內(nèi)容設(shè)置，可以防止瀏覽一些

44、受限制的網(wǎng) 站，而網(wǎng)站的限制級(jí)別就是通過(guò)meta屬性來(lái) 設(shè)置的； n7、 n強(qiáng)制頁(yè)面在當(dāng)前窗口中以獨(dú)立頁(yè)面顯示，可 以防止自己的網(wǎng)頁(yè)被別人當(dāng)作一個(gè)frame頁(yè) 調(diào)用； Dreamweaver教學(xué)課件 n8、和設(shè)定進(jìn)入和離開(kāi)頁(yè)面時(shí)的特殊 效果，這個(gè)功能即FrontPage中的“格式/網(wǎng)頁(yè) 過(guò)渡”，不過(guò)所加的頁(yè)面不能夠是一個(gè)frame 頁(yè)面。 nDuration的值為網(wǎng)頁(yè)動(dòng)態(tài)過(guò)渡的時(shí)間，單位為 秒。 nTransition是過(guò)渡方式，它的值為0到23，分別 對(duì)應(yīng)24種過(guò)渡方式。 Dreamweaver教學(xué)課件 3、頁(yè)面配色方案、頁(yè)面配色方案 n命令菜單命令菜單設(shè)定配色方案設(shè)定配色方案 4、可視化助

45、理、可視化助理 設(shè)置在設(shè)計(jì)視圖下，是否顯示頁(yè)面對(duì)象 的邊框或頁(yè)面的不可見(jiàn)元素。 n查看菜單查看菜單可視化助理可視化助理（選擇項(xiàng)目）（選擇項(xiàng)目） n工具欄工具欄視圖選項(xiàng)視圖選項(xiàng)可視化助理可視化助理（選（選 擇項(xiàng)目）擇項(xiàng)目） n編輯菜單編輯菜單首選參數(shù)首選參數(shù)不可見(jiàn)元素不可見(jiàn)元素 Dreamweaver教學(xué)課件 n表格(table)是頁(yè)面的重要元素,是頁(yè)面排 版的主要手段。盡管DHTML中的層(layer) 也可以實(shí)現(xiàn)網(wǎng)頁(yè)元素的自由定位，但是 表格顯然更加方便編輯與修改。熟練掌 握和運(yùn)用表格的各種屬性，可以讓您的 頁(yè)面看起來(lái)賞心悅目。 Dreamweaver教學(xué)課件 1、插入表格、插入表格 n插入

46、菜單插入菜單表格表格 n插入欄插入欄 常用常用表格表格 n或插入欄或插入欄 布局布局表格表格 2、表格基本操作、表格基本操作 （1）選擇表格元素 n整個(gè)表格整個(gè)表格：標(biāo)簽、修改修改表格表格選擇表格選擇表格、 右鍵、Ctrl+A+A、邊框 n行行、列列 ：標(biāo)簽（行）、邊框、拖拽 n單元格單元格：標(biāo)簽、 Ctrl+單擊、 Ctrl+A、拖拽 Dreamweaver教學(xué)課件 2、表格基本操作、表格基本操作 （2）處理表格行、列）處理表格行、列 n插入行（Ctrl+M）、列（ Ctrl+Shift+A ） n修改菜單、右鍵、屬性檢查器、Tab n刪除行（ Ctrl +Shift +M ）、列（ Ctr

47、l +Shift +- ） （3）單元格分、合）單元格分、合 n單元格合并（ Ctrl +Alt +M ） n單元格拆分（ Ctrl +Alt +S ） Dreamweaver教學(xué)課件 2、表格基本操作、表格基本操作 （4）其它操作）其它操作 n行列寬度調(diào)整和高度調(diào)整 n表格復(fù)制、剪切和粘貼 3、設(shè)置表格屬性、設(shè)置表格屬性 4、格式化表格、格式化表格 n命令菜單命令菜單格式化表格格式化表格 Dreamweaver教學(xué)課件 5、表格排序、表格排序 n命令菜單排序表格 6、表格與表格式數(shù)據(jù)導(dǎo)入和導(dǎo)出、表格與表格式數(shù)據(jù)導(dǎo)入和導(dǎo)出 導(dǎo)入：導(dǎo)入： n文件菜單導(dǎo)入表格式數(shù)據(jù) n或插入欄布局表格數(shù)據(jù) 導(dǎo)出：

48、導(dǎo)出： n文件菜單導(dǎo)出表格 Dreamweaver教學(xué)課件 1、布局視圖下繪制表格（布局表格） 2、跟蹤圖像 Dreamweaver教學(xué)課件 1、布局視圖下繪制表格（布局表格）、布局視圖下繪制表格（布局表格） （1）視圖切換）視圖切換 n查看菜單表格模式 n插入欄布局標(biāo)準(zhǔn)視圖/布局視圖 n編輯首選參數(shù)布局模式 （2）繪制布局表格）繪制布局表格 n插入欄布局繪制布局表格（按住CTRL連 續(xù)繪制多個(gè)，按住Alt取消自動(dòng)吸附功能） Dreamweaver教學(xué)課件 1、布局視圖下繪制表格（布局表格）、布局視圖下繪制表格（布局表格） （3）繪制布局單元格）繪制布局單元格 n插入欄插入欄布局布局繪制布局單

49、元格繪制布局單元格（按住CTRL 可連續(xù)繪制多個(gè)，按住Alt取消自動(dòng)吸附功能） （4）嵌套布局表格）嵌套布局表格 （5）移動(dòng)表格或單元格）移動(dòng)表格或單元格 （6）設(shè)置表格和單元格屬性）設(shè)置表格和單元格屬性 Dreamweaver教學(xué)課件 2、跟蹤圖像、跟蹤圖像 n可以使用跟蹤圖像作為重新創(chuàng)建已經(jīng)使用圖 形應(yīng)用程序（如 Macromedia Freehand 或 Fireworks）創(chuàng)建的頁(yè)面設(shè)計(jì)的向?qū)ы?yè)面設(shè)計(jì)的向?qū)А?n跟蹤圖像是放在“文檔”窗口背景中的 JPEG、GIF 或 PNG 圖像。可以隱藏圖像、 設(shè)置圖像的不透明度和更改圖像的位置。 Dreamweaver教學(xué)課件 2、跟蹤圖像、跟蹤

50、圖像 若要將跟蹤圖像放在將跟蹤圖像放在“文檔文檔”窗口中窗口中，可執(zhí)行以下操 作： n(1)選擇“查看”“跟蹤圖像”“載入”。 或者選擇“修改”“頁(yè)面屬性”，然后單擊“跟蹤 圖像”文本框旁邊的“瀏覽”按鈕。 n(2)在出現(xiàn)的對(duì)話框中，選擇圖像文件并單擊“選 擇”(Windows) 或“選擇”(Macintosh)。 “頁(yè)面 屬性”對(duì)話框隨即出現(xiàn)。 n(3)拖動(dòng)“圖像透明度”滑塊指定圖像的透明度，然 后單擊“確定”。 n(4)若要隨時(shí)切換到另一跟蹤圖像或更改當(dāng)前跟蹤圖 像的透明度，請(qǐng)選擇“修改”“頁(yè)面屬性”。 Dreamweaver教學(xué)課件 2、跟蹤圖像、跟蹤圖像 若要顯示或隱藏跟蹤圖像，請(qǐng)執(zhí)行

51、以下操作： n選擇“查看查看”“跟蹤圖像跟蹤圖像”“顯示顯示”。 n僅在 Dreamweaver 中跟蹤圖像是可見(jiàn)的。 當(dāng)在瀏覽器中查看頁(yè)面時(shí)，跟蹤圖像永遠(yuǎn)不 可見(jiàn)。當(dāng)跟蹤圖像可見(jiàn)時(shí)，頁(yè)面的實(shí)際背景 圖像和顏色在“文檔”窗口中不可見(jiàn)；但是， 在瀏覽器中查看頁(yè)面時(shí)，背景圖像和顏色是 可見(jiàn)的。 Dreamweaver教學(xué)課件 2、跟蹤圖像、跟蹤圖像 若要更改跟蹤圖像的位置，請(qǐng)執(zhí)行以下操作： (1)選擇“查看查看”“跟蹤圖像跟蹤圖像”“調(diào)整位置調(diào)整位置”。 (2)執(zhí)行下列操作之一： n若要準(zhǔn)確地指定跟蹤圖像的位置，請(qǐng)?jiān)凇癤”和 “Y”文本框中輸入坐標(biāo)值。 n若要逐個(gè)像素地移動(dòng)圖像，請(qǐng)使用箭頭鍵。 n

52、若要一次五個(gè)像素地移動(dòng)圖像，請(qǐng)按 Shift 鍵和 箭頭鍵。 (3)重設(shè)跟蹤圖像的位置： n選擇“查看”“跟蹤圖像”“重設(shè)位置”。 跟 蹤圖像隨即返回到文檔窗口的左上角 (0,0)。 Dreamweaver教學(xué)課件 2、跟蹤圖像、跟蹤圖像 若要將跟蹤圖像與所選元素對(duì)齊，請(qǐng)執(zhí)行以下 操作： n在“文檔”窗口中選擇一個(gè)元素。 n選擇“查看查看”“跟蹤圖像跟蹤圖像”“對(duì)齊所選范對(duì)齊所選范 圍圍”。 跟蹤圖像的左上角隨即與所選元素 的左上角對(duì)齊。 Dreamweaver教學(xué)課件 1、關(guān)于表單 2、插入表單及設(shè)置表單屬性 3、插入表單元素及屬性設(shè)置 4、表單應(yīng)用舉例 Dreamweaver教學(xué)課件 1、

53、關(guān)于表單、關(guān)于表單 n表單是用于實(shí)現(xiàn)網(wǎng)頁(yè)瀏覽者與服務(wù)器之間信 息交互的一種頁(yè)面元素,被廣泛用于各種信 息的搜集和反饋，如調(diào)查表、訂單、站點(diǎn)注 冊(cè)單、搜索引擎等。 n表單有兩個(gè)部分組成：一是面向客戶端各種 對(duì)象部分，一是服務(wù)器端的處理程序部分。 Dreamweaver教學(xué)課件 1、關(guān)于表單、關(guān)于表單 n當(dāng)訪問(wèn)者將信息輸入Web站點(diǎn)表單單擊提交 按鈕時(shí)，這些信息將被發(fā)送到服務(wù)器，服務(wù) 器端腳本或應(yīng)用程序?qū)@些信息進(jìn)行響應(yīng)。 通常，通過(guò)通用網(wǎng)關(guān)接口（CGI）腳本、 ColdFusion頁(yè)、Java Server Page（JSP）或 ASP來(lái)處理信息。如果不使用服務(wù)端腳本或 應(yīng)用程序來(lái)處理表單數(shù)據(jù)，

54、就無(wú)法收集這些 數(shù)據(jù)。 Dreamweaver教學(xué)課件 2、插入表單及設(shè)置表單屬性、插入表單及設(shè)置表單屬性 n插入表單插入表單 n插入插入表單表單 n插入欄插入欄表單表單 nDreamweaver插入一個(gè)表單（域）。當(dāng)頁(yè)面 處于設(shè)計(jì)視圖中時(shí)，用紅色的虛輪廓線指示 表單。如果沒(méi)有看到此輪廓線，請(qǐng)檢查是否 選中了“查看查看可視化助理可視化助理不可見(jiàn)元素不可見(jiàn)元素”。 Dreamweaver教學(xué)課件 2、插入表單及設(shè)置表單屬性、插入表單及設(shè)置表單屬性 設(shè)置表單屬性（用屬性檢查器設(shè)置設(shè)置表單屬性（用屬性檢查器設(shè)置 ） n在“表單名稱表單名稱”文本框中，鍵入標(biāo)識(shí)該表單 的唯一名稱。 命名表單后，就可以使

55、用腳 本語(yǔ)言（如 JavaScript 或 VBScript）引用或 控制該表單。如果不命名表單，則 Dreamweaver 使用語(yǔ)法 form n 生成一個(gè)名 稱，并在向頁(yè)面中添加每個(gè)表單時(shí)遞增 n 的 值。 Dreamweaver教學(xué)課件 2、插入表單及設(shè)置表單屬性、插入表單及設(shè)置表單屬性 n在“動(dòng)作動(dòng)作”文本框中，指定處理該表單的 動(dòng)態(tài)頁(yè)或腳本的路徑?？梢栽凇皠?dòng)作”文 本框中鍵入完整路徑，也可以單擊文件夾 圖標(biāo)定位到同一站點(diǎn)中包含該腳本或應(yīng)用 程序頁(yè)的相應(yīng)文件夾。 n在“方法方法”彈出菜單中，選擇將表單數(shù)據(jù) 傳輸?shù)椒?wù)器的方法。有POST、GET和 默認(rèn)默認(rèn)三種選擇。 Dreamweav

56、er教學(xué)課件 2、插入表單及設(shè)置表單屬性、插入表單及設(shè)置表單屬性 n如果需要，可以使用“MIME 類型”彈出菜 單指定對(duì)提交給服務(wù)器進(jìn)行處理的數(shù)據(jù)使用 MIME 編碼類型。 默認(rèn)設(shè)置 application/x- 通常與 POST 方法協(xié)同使用。如果要?jiǎng)?chuàng)建文 件上傳域，請(qǐng)指定 multipart/form-data MIME 類型。 Dreamweaver教學(xué)課件 nPOST 方法將在 HTTP 請(qǐng)求中嵌入表單數(shù)據(jù)。 nGET 方法將值附加到請(qǐng)求該頁(yè)的 URL 中。 n默認(rèn)方法使用瀏覽器的默認(rèn)設(shè)置將表單數(shù)據(jù) 發(fā)送到服務(wù)器。通常，默認(rèn)方法為 GET 方 法。 n不要使用 GET 方法發(fā)送長(zhǎng)表單。

57、URL 的長(zhǎng) 度限制在 8192 個(gè)字符以內(nèi)。如果發(fā)送的數(shù) 據(jù)量太大，數(shù)據(jù)將被截?cái)?，從而?dǎo)致意外的 或失敗的處理結(jié)果。 Dreamweaver教學(xué)課件 n對(duì)于由 GET 方法傳遞的參數(shù)所生成的動(dòng)態(tài) 頁(yè)，可添加書(shū)簽，這是因?yàn)橹匦律身?yè)面所 需的全部值都包含在瀏覽器地址框中顯示的 URL 中。與此相反，對(duì)于由 POST 方法傳遞 的參數(shù)所生成的動(dòng)態(tài)頁(yè)，不可添加書(shū)簽。 n如果您要收集機(jī)密用戶名和密碼、信用卡號(hào) 或其它機(jī)密信息，POST 方法看起來(lái)比方法看起來(lái)比 GET 方法更安全方法更安全。但是，由 POST 方法發(fā) 送的信息是未經(jīng)加密的，容易被黑客獲取。 若要確保安全性，請(qǐng)通過(guò)安全的連接與安全 的

58、服務(wù)器相連。 Dreamweaver教學(xué)課件 3、插入表單元素及屬性設(shè)置、插入表單元素及屬性設(shè)置 n表單表單：所有表單對(duì)象要發(fā)揮作用，就必須存 在于表單域中。 n文本字段文本字段：在表單中插入一個(gè)可輸入一行文 本的文本域。文本域接受任何類型的字母數(shù) 字。該文本可以顯示為單行、多行，也可以 顯示為一系列點(diǎn)或星號(hào)（密碼輸入） n隱藏域隱藏域：可以存儲(chǔ)用戶輸入的信息，如姓名、 電子郵件地址或常用的查看方式，并在該用 戶下次訪問(wèn)引站點(diǎn)時(shí)使用這些數(shù)據(jù)。 Dreamweaver教學(xué)課件 3、插入表單元素及屬性設(shè)置、插入表單元素及屬性設(shè)置 n復(fù)選框復(fù)選框：允許在一組選項(xiàng)中選擇多項(xiàng)。用戶 可以選擇任意多個(gè)適用

59、的選項(xiàng)。 n單選按鈕單選按鈕：代表互相排斥的選擇。在某單選 按鈕組（多個(gè)按鈕同名）中選擇一個(gè)按鈕， 就會(huì)取消選擇該組中的所有其他按鈕。 n單選按鈕組單選按鈕組：直接插入一組多個(gè)單選按鈕。 Dreamweaver教學(xué)課件 3、插入表單元素及屬性設(shè)置、插入表單元素及屬性設(shè)置 n列表列表/菜單菜單：“列表”選項(xiàng)在一個(gè)滾動(dòng)列表 中顯示選項(xiàng)值，用戶可以從該滾動(dòng)列表中選 擇多個(gè)選項(xiàng)。“菜單”選項(xiàng)則是在一個(gè)菜單 中顯示選項(xiàng)值，用戶只能從中選擇單個(gè)選項(xiàng)。 n跳轉(zhuǎn)菜單跳轉(zhuǎn)菜單：是可導(dǎo)航的列表或彈出式菜單， 它使你可以插入一種菜單，這種菜單中的每 個(gè)選項(xiàng)都擁有鏈接的屬性，單擊即可跳轉(zhuǎn)至 其他網(wǎng)頁(yè)或文件。 Drea

60、mweaver教學(xué)課件 3、插入表單元素及屬性設(shè)置、插入表單元素及屬性設(shè)置 n圖像域圖像域：插入一個(gè)可放置圖像的區(qū)域。該圖 像用于生成圖形化按鈕，例如“提交”或 “重置”按鈕。 n文件域文件域：插入一個(gè)文本字段和一個(gè)“瀏覽” 按鈕。用戶可以使用文件域?yàn)g覽本地計(jì)算機(jī) 上的某個(gè)文件并將該文件作為表單數(shù)據(jù)上傳。 n按鈕按鈕：在單擊時(shí)執(zhí)行某一腳本或程序，例如， 提交或重置表單。并且可以自定義按鈕名稱 或標(biāo)簽。 Dreamweaver教學(xué)課件 4、表單應(yīng)用舉例 簡(jiǎn)單舉例： n瀏覽器端：表單中文本提交 n服務(wù)器端：響應(yīng)文本 Dreamweaver教學(xué)課件 1、插入Flash動(dòng)畫(huà)文件 2、插入Flash文本