Dreamweaver網(wǎng)頁設(shè)計(jì)與制作教材課件匯總完整版ppt全套課件最全教學(xué)教程整本書電子教案全書

1、任務(wù) 1認(rèn)識(shí)網(wǎng)站與網(wǎng)頁任務(wù) 2使用 HTML 語言修改簡單網(wǎng)頁項(xiàng)目一個(gè)人網(wǎng)頁的簡單美化網(wǎng)站制作基礎(chǔ)知識(shí)任務(wù) 1 認(rèn)識(shí)網(wǎng)站與網(wǎng)頁認(rèn)識(shí)網(wǎng)頁的本質(zhì)和網(wǎng)頁中的常見元素掌握 IP 地址、域名、網(wǎng)址等基本概念理解靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁的區(qū)別一、網(wǎng)頁的本質(zhì)如圖所示是新浪網(wǎng)的主頁及其組成文件，由該圖可以看出，網(wǎng)頁主要由文字、圖像和動(dòng)畫等元素組成。網(wǎng)頁包括一組文件，它們分別是網(wǎng)頁文件（擴(kuò)展名為 htm、asp等）、圖像文件（擴(kuò)展名為 jpg、gif 等）和 Flash 動(dòng)畫文件（擴(kuò)展名為 swf）等。 新浪網(wǎng)主頁及其組成文件二、網(wǎng)頁中的常見元素1. 文本文本一直是最重要的信息載體與交流工具，網(wǎng)頁中的信息一般以文本為

2、主。在網(wǎng)頁中可以通過字體、大小、顏色、底紋、邊框等設(shè)置文本的屬性。構(gòu)成網(wǎng)頁的常用元素2. 圖像在網(wǎng)頁中圖像既可以表達(dá)主題，也可以對(duì)網(wǎng)頁起裝飾作用。網(wǎng)頁中的圖片一般為JPG、PNG 和 GIF 格式，即以 .jpg（或 .jpeg）、.png 和 .gif 為后綴的文件。3. 超鏈接超鏈接是網(wǎng)站的靈魂，是從一個(gè)網(wǎng)頁指向另一個(gè)目的端的鏈接。4. 表單表單是用來收集站點(diǎn)訪問者信息的域集。站點(diǎn)訪問者填寫表單的方式是輸入文本、單擊單選框與復(fù)選框，以及從下拉菜單中選擇選項(xiàng)。5. 表格表格是網(wǎng)頁排版的靈魂。使用表格排版是現(xiàn)在網(wǎng)頁的主要制作形式。通過在表格中放置相應(yīng)的圖片或其他內(nèi)容，網(wǎng)頁中的元素得以方便地固定

3、在設(shè)計(jì)的位置上，即可有效地組合成符合設(shè)計(jì)效果的頁面。一般表格邊線不在網(wǎng)頁中顯示。6. 動(dòng)畫動(dòng)畫是網(wǎng)頁上最活躍的元素，通常制作優(yōu)秀、創(chuàng)意出眾的動(dòng)畫是吸引瀏覽者的最有效的方法。三、IP 地址、域名和網(wǎng)址1.IP 地址每一個(gè)主機(jī)在互聯(lián)網(wǎng)上都有唯一的地址，這個(gè)地址稱為 IP 地址（Internet Protocol Address）。IP地址由 4 組 0255 之間的整數(shù)（可取0及255） 組成， 數(shù)字之間用點(diǎn)間隔。2. 域名由于 IP 地址在使用過程中難于記憶和書寫，人們又用一種與 IP 地址對(duì)應(yīng)的字符來表示地址，這就是域名。每一個(gè)網(wǎng)站都有自己的域名，并且域名是獨(dú)一無二的。3. 網(wǎng)址網(wǎng)址又稱為 U

4、RL，英文全稱是“Uniform Resource Locator”，即統(tǒng)一資源定位符。一個(gè)完整的網(wǎng)址由通信協(xié)議名稱、域名或 IP 地址、網(wǎng)頁在服務(wù)器中的路徑和文件名 4 部分組成。 網(wǎng)址示例四、動(dòng)態(tài)網(wǎng)頁與靜態(tài)網(wǎng)頁網(wǎng)頁可分為動(dòng)態(tài)網(wǎng)頁（DHTML）和靜態(tài)網(wǎng)頁（HTML）兩大類。從表現(xiàn)形式上來看，動(dòng)態(tài)網(wǎng)頁與靜態(tài)網(wǎng)頁 URL 的后綴不同，靜態(tài)網(wǎng)頁的后綴可以是 .htm、.html、.xml、.shtml，而動(dòng)態(tài)網(wǎng)頁則是以 .asp、.jsp、.php、.cgi、.perl 為后綴，并且在動(dòng)態(tài)網(wǎng)頁網(wǎng)址中通常有一個(gè)標(biāo)志性符號(hào)“？”。任務(wù) 2使用 HTML 語言修改簡單網(wǎng)頁掌握創(chuàng)建 HTML 文件的方法理

5、解 HTML 文件結(jié)構(gòu)掌握簡單 HTML 文件的編寫方法HTML（Hypertext Markup Language，超文本標(biāo)記語言）不是一種編程語言，而是一種描述性的標(biāo)記語言，用于描述超文本中內(nèi)容的顯示方式。其最基本的語法是： 內(nèi)容 。標(biāo)記通常都是成對(duì)使用的，一個(gè)開頭標(biāo)記就對(duì)應(yīng)有一個(gè)結(jié)束標(biāo)記。結(jié)束標(biāo)記只是在開頭標(biāo)記的前面加一個(gè)斜杠“/”。一、HTML 文件的創(chuàng)建人們經(jīng)常使用網(wǎng)頁這個(gè)概念，實(shí)際上，網(wǎng)頁就是一個(gè)文件，這個(gè)文件是利用 HTML寫成的，所以又被稱為 HTML 文件。HTML 文件的本質(zhì)就是一個(gè)文本文件，只是擴(kuò)展名為“.htm”或“.html”。在Windows 操作系統(tǒng)中，最簡單的文

6、本編輯軟件就是 Notepad（記事本）。HTML 文件的創(chuàng)建方法非常簡單，具體的操作步驟如下。在記事本中輸入 HTML 文件 修改后綴名保存后的 HTML 文件 在瀏覽器中的顯示效果二、HTML 文件結(jié)構(gòu)1. 標(biāo)記 標(biāo)記放在 HTML 文件的開頭，并沒有實(shí)質(zhì)性的功能，只是一個(gè)形式上的標(biāo)記，在 HTML 文件開頭使用 標(biāo)記開始。2. 標(biāo)記 稱為頭標(biāo)記，一般放在 標(biāo)記里，其作用是放置關(guān)于此 HTML 文件的信息，如提供索引、定義 CSS 樣式等。3. 標(biāo)記 稱為標(biāo)題標(biāo)記，包含在 標(biāo)記內(nèi)，其作用是設(shè)定網(wǎng)頁標(biāo)題，在瀏覽器左上方的標(biāo)題欄中將顯示這個(gè)標(biāo)題，此外，在 Windows 任務(wù)欄中顯示的也是這個(gè)

7、標(biāo)題。4. 標(biāo)記 稱為主體標(biāo)記，網(wǎng)頁所要顯示的內(nèi)容都放在這個(gè)標(biāo)記內(nèi)，它是 HTML 文件的重點(diǎn)所在。在后面項(xiàng)目中所介紹的 HTML 標(biāo)記都將放在這個(gè)標(biāo)記內(nèi)。三、簡單的 HTML 案例例 1.1 設(shè)置標(biāo)題。新建空白的 html 文件， 輸入 HTML代碼如下，在瀏覽器中打開這個(gè)網(wǎng)頁，其效果如圖所示。 標(biāo)題標(biāo)記 以下為標(biāo)題樣式： H1 標(biāo)題大小 H2 標(biāo)題大小 H3 標(biāo)題大小 H4 標(biāo)題大小 H5 標(biāo)題大小 H6 標(biāo)題大小 標(biāo)題標(biāo)記例 1.2 設(shè)置文字顏色。新建空白的 html 文件，輸入 HTML 代碼如下，在瀏覽器中打開這個(gè)網(wǎng)頁，其效果如圖所示。字體顏色標(biāo)記 設(shè)置文字顏色 這是藍(lán)色文字 例 1

8、.3 同時(shí)設(shè)置加粗、傾斜以及文字的顏色。新建空白的 html 文件，輸入 HTML 代碼如下，在瀏覽器中打開這個(gè)網(wǎng)頁，其效果如圖所示。藍(lán)色粗斜字體 藍(lán)色粗斜字體 這是藍(lán)色粗斜字體 例 1.4 插入本項(xiàng)目素材中的“cup.jpg”圖片。新建空白的 html 文件，輸入 HTML 代碼如下，在瀏覽器中打開這個(gè)網(wǎng)頁，其效果如圖所示。插入圖片 插入圖片 網(wǎng)頁也可以圖文并茂 ! 例 1.5 注釋標(biāo)記。新建空白的 html 文件，輸入 HTML 代碼如下，在瀏覽器中打開這個(gè)網(wǎng)頁，其效果如圖所示。注釋標(biāo)記 注釋標(biāo)記 這是正文文本 任務(wù) 3任務(wù) 1面板基本操作初識(shí) Dreamweaver CS3 任務(wù) 2創(chuàng)建

9、“fuligong”站點(diǎn)新建和管理站點(diǎn)為首頁設(shè)置頭信息和頁面屬性頁面總體設(shè)置項(xiàng)目二創(chuàng)建度假村網(wǎng)站DreamweaverCS3 入門任務(wù) 1面板基本操作初識(shí) Dreamweaver CS3熟悉 Dreamweaver CS3 操作界面掌握網(wǎng)頁文檔的基本操作Dreamweaver CS3 工作界面如圖所示，其界面大致可以直觀地劃分為 9 個(gè)部分。 DreamweaverCS3 工作界面一、文檔窗口文檔窗口有三種視圖狀態(tài)，分別是代碼、拆分和設(shè)計(jì)。在文檔工具欄部分有三個(gè)按鈕，如圖所示，可以快速地切換三種視圖。 視圖切換按鈕二、狀態(tài)欄狀態(tài)欄提示當(dāng)前創(chuàng)建文檔的有關(guān)信息，如圖所示。 狀態(tài)欄三、“插入”工具欄

10、“插入”工具欄提供的是部分操作或功能的快捷按鈕，這些操作或功能在編輯網(wǎng)頁中會(huì)頻繁使用。下圖展示了其中的常用、布局、表單和文本四個(gè)部分。 “插入”工具欄（常用） “插入”工具欄（布局） “插入”工具欄（表單） “插入”工具欄（文本）四、“文檔”工具欄“文檔”工具欄上有前面提到的文檔視圖切換按鈕，同時(shí)還有新建、打開、保存、剪切、復(fù)制、粘貼、頁面預(yù)覽、上傳、根據(jù) DTD 聲明驗(yàn)證 HTML 標(biāo)記等快捷按鈕。 “文檔”工具欄五、“屬性”面板“屬性”面板用于對(duì)網(wǎng)頁中元素屬性進(jìn)行設(shè)置，“屬性”面板中的屬性項(xiàng)動(dòng)態(tài)關(guān)聯(lián)至鼠標(biāo)選定的網(wǎng)頁元素。如圖所示，分別展示的是網(wǎng)頁中文本的屬性面板和圖像元素的屬性面板。 “屬

11、性”面板（圖像屬性） “屬性”面板（文本屬性）六、“結(jié)果”面板“結(jié)果”面板用于顯示幾種常用操作的操作結(jié)果，如圖所示。 “結(jié)果”面板1. 搜索Dreamweaver CS3 提供的搜索功能十分強(qiáng)大，如圖所示。其搜索范圍可以是鼠標(biāo)選定的一段文字、當(dāng)前文檔、當(dāng)前打開的幾個(gè)文檔、某個(gè)文件夾下的所有文檔，甚至是整個(gè)站點(diǎn)的文檔。 查找和替換功能七、“文件”面板“文件”面板可以管理當(dāng)前站點(diǎn)的文件和文件夾，無論它們是本地站點(diǎn)還是在遠(yuǎn)程服務(wù)器上。“文件”面板八、面板組面板組是分組在某個(gè)標(biāo)題下的相關(guān)面板的集合，如圖所示。 面板組1.CSSCSS 面板顯示當(dāng)前元素的 CSS 式樣，可以在該區(qū)域新建、修改或刪除 CS

12、S 聲明語句。2. 代碼片斷代碼片斷面板收集了許多常用代碼段，包括 HTML 代碼、JavaScript 代碼等。3. 應(yīng)用程序應(yīng)用程序面板為使用動(dòng)態(tài)技術(shù)頁面的編寫提供了方便，該部分包括數(shù)據(jù)庫鏈接、數(shù)據(jù)集綁定、組件使用等方面的內(nèi)容。4. 標(biāo)簽檢查器標(biāo)簽檢查器動(dòng)態(tài)關(guān)聯(lián)到文檔窗口內(nèi)當(dāng)前選定的元素標(biāo)記，標(biāo)簽檢查器列出該標(biāo)記具有的屬性、可供該標(biāo)記綁定的事件等。5. 資源資源面板用于管理頁面中使用的多媒體元素，包括圖片、Flash 動(dòng)畫、聲音文件等。九、菜單欄1. 標(biāo)簽庫標(biāo)簽庫的顯示如圖所示。在該編輯器中可以新建標(biāo)簽，并且為標(biāo)簽添加 屬性。 標(biāo)簽庫編輯器2. 快捷鍵可以修改或添加常用操作的快捷鍵，以提高

13、使用 Dreamweaver CS3 的效率。 快捷鍵設(shè)定面板3. 首選參數(shù)（1）新建文檔首選參數(shù)設(shè)置面板（新建文檔）（2）驗(yàn)證程序“驗(yàn)證程序”部分的作用是為沒有明確聲明參數(shù)的頁面指定規(guī)范標(biāo)準(zhǔn)。 首選參數(shù)設(shè)置面板（驗(yàn)證程序）任務(wù) 2創(chuàng)建“fuligong”站點(diǎn)新建和管理站點(diǎn)了解網(wǎng)頁文檔和文件的命名規(guī)則熟悉定義站點(diǎn)的步驟，能定義站點(diǎn)并創(chuàng)建網(wǎng)頁一、網(wǎng)頁文檔和文件夾的命名規(guī)則網(wǎng)站中所有文件和文件夾的命名最好遵循一定的規(guī)則。1. 靜態(tài)的首頁文件一般命名為“index.html”。如果是包含程序代碼的動(dòng)態(tài)頁面，如ASP 文件，則命名為“index.asp”。2. 最好不要使用漢字命名文件和文件夾。3.

14、文件名中不要使用大寫英文字母。4. 運(yùn)算符號(hào)不能用在文件名的開頭。5. 比較長的文件名可以使用下劃線“_”隔開多個(gè)單詞或關(guān)鍵字。6. 在大型網(wǎng)站中，分支頁面的文件應(yīng)存放在單獨(dú)的文件夾中。7. 在動(dòng)態(tài)網(wǎng)站中，用來存放數(shù)據(jù)庫的文件夾一般命名為“data”或者“database”。二、在 Dreamweaver 中定義站點(diǎn)為便于管理和編輯站點(diǎn)，在創(chuàng)建網(wǎng)頁之前，首先要在 Dreamweaver 中定義站點(diǎn)。定義站點(diǎn)可以將本地磁盤中的站點(diǎn)文件夾同 Dreamweaver 建立一定的關(guān)聯(lián)，可以使用 Dreamweaver 上傳或下載站點(diǎn)內(nèi)容。定義站點(diǎn)主要包括設(shè)置站點(diǎn)名稱、站點(diǎn)性質(zhì)，以及站點(diǎn)所對(duì)應(yīng)的文件夾。

15、設(shè)置站點(diǎn)名稱和服務(wù)器技術(shù)設(shè)置網(wǎng)站編輯方式和站點(diǎn)根文件夾設(shè)置連接遠(yuǎn)程服務(wù)器的方法 所設(shè)參數(shù)總匯“文件”面板中顯示新創(chuàng)建的站點(diǎn)三、新建文檔Dreamweaver 中的文檔也就是網(wǎng)頁，創(chuàng)建新網(wǎng)頁的方法有多種。下面使用“文件”菜單創(chuàng)建網(wǎng)頁。“新建文檔”對(duì)話框 創(chuàng)建新文檔四、保存和關(guān)閉文檔新建或編輯網(wǎng)頁文檔后，需要保存文檔才能使所做的設(shè)置生效?！傲泶鏋椤睂?duì)話框五、打開和預(yù)覽文檔除常用的新建、保存和關(guān)閉文檔操作外，有時(shí)還需要打開某個(gè)文檔進(jìn)行編輯。打開文檔文檔打開效果 預(yù)覽文檔六、“文件”面板的應(yīng)用使用“文件”面板可以非常高效地管理站點(diǎn)。實(shí)際操作中，在定義站點(diǎn)后，通常都是利用該面板創(chuàng)建、重命名或打開站點(diǎn)中的

16、網(wǎng)頁文檔或文件夾。創(chuàng)建文檔圖 重命名文檔 新建文件夾 重命名文件夾任務(wù) 3為首頁設(shè)置頭信息和頁面屬性頁面總體設(shè)置掌握設(shè)置網(wǎng)頁頭信息的方法熟悉頁面屬性的設(shè)置方法一、設(shè)置頭信息頭信息包括網(wǎng)頁關(guān)鍵字、網(wǎng)頁說明等。在使用 Google、Baidu、Bing 等搜索引擎搜索網(wǎng)頁時(shí)，不是檢索網(wǎng)頁的所有內(nèi)容，而是只檢索網(wǎng)頁的關(guān)鍵字。如果想要自己的網(wǎng)頁能夠被搜索引擎檢索到，最好把關(guān)鍵字設(shè)置為人們經(jīng)常使用的詞語。插入關(guān)鍵字 在“代碼”視圖中查看關(guān)鍵字效果 設(shè)置說明文本二、設(shè)置頁面屬性 “頁面屬性”對(duì)話框 “編輯字體列表”對(duì)話框 設(shè)置鏈接樣式 設(shè)置網(wǎng)頁標(biāo)題和編碼任務(wù) 3任務(wù) 1輸入并設(shè)置網(wǎng)站子頁文本文本輸入與編輯

17、任務(wù) 2在主頁中插入導(dǎo)航條和圖像應(yīng)用圖像為主頁設(shè)置動(dòng)畫和背景音樂應(yīng)用動(dòng)畫和多媒體項(xiàng)目三制作汽車網(wǎng)站輸入與編輯網(wǎng)頁元素 任務(wù) 1輸入并設(shè)置網(wǎng)站子頁文本文本輸入與編輯熟練掌握文本的輸入方法掌握各種文本格式的設(shè)置方法一、輸入文本在 Dreamweaver 中輸入文本的方法非常簡單，只要將光標(biāo)定位在網(wǎng)頁的某個(gè)位置，然后選擇輸入法輸入文本即可。對(duì)于大量的外部文本，用戶可利用剪貼板將其拷貝到網(wǎng)頁文檔中。 打開外部文本并復(fù)制二、設(shè)置文本段落格式和字符格式默認(rèn)情況下，輸入文本的字體、字號(hào)等，與該網(wǎng)頁“頁面屬性”中設(shè)置的相同。文本的格式設(shè)置有字符格式與段落格式之分。其中，要設(shè)置段落格式，只需將光標(biāo)定位在該段落即

18、可進(jìn)行設(shè)置；要設(shè)置字符格式，應(yīng)首先利用拖動(dòng)方法選中文本，然后再進(jìn)行設(shè)置。 文本“屬性”面板 設(shè)置文本顏色 設(shè)置段落對(duì)齊1. 設(shè)置字體列表Dreamweaver 中自帶的字體有限，一般滿足不了大多數(shù)網(wǎng)頁設(shè)計(jì)者的需求?？梢酝ㄟ^設(shè)置字體列表解決這一問題。2. 設(shè)置文本字體及大小設(shè)置好需要的字體列表后，就可以為網(wǎng)頁中的文本設(shè)置字體了。3. 設(shè)置段落對(duì)齊和縮進(jìn)通過設(shè)置段落對(duì)齊和縮進(jìn)格式，可以更好地為文檔布局。 文本及段落格式設(shè)置4. 設(shè)置列表項(xiàng)“編號(hào)列表”的設(shè)置方法同“項(xiàng)目列表”類似。 選中文本應(yīng)用“項(xiàng)目列表”格式三、插入水平線和特殊字符1. 插入水平線水平線對(duì)于組織信息和區(qū)分版塊很有幫助，如圖所示。

19、網(wǎng)頁中的水平線 水平線“屬性”面板2. 插入特殊字符要插入特殊字符，可在定位插入點(diǎn)后，選擇“插入記錄”“HTML”“特殊字符”命令，然后在彈出的菜單中選擇相應(yīng)的特殊字符。 插入特殊字符任務(wù) 2在主頁中插入導(dǎo)航條和圖像應(yīng)用圖像掌握編輯圖像的方法掌握?qǐng)D像各種特效的制作方法掌握導(dǎo)航條的制作方法一、網(wǎng)頁中常見的圖像文件格式JPEG（聯(lián)合圖像專家組標(biāo)準(zhǔn)）格式：該格式適于表現(xiàn)色彩豐富、具有連續(xù)色調(diào)的圖像，如各種照片。GIF（圖形交換格式）格式：由于它最多只能包含 256 種顏色，因而適合表現(xiàn)色調(diào)不連續(xù)或具有大面積單一顏色的圖像。PNG（便攜網(wǎng)絡(luò)圖像）格式：該格式集 JPEG 和 GIF 格式的優(yōu)點(diǎn)于一身，

20、圖像質(zhì)量高且可包含透明區(qū)。二、插入與編輯圖像在 Dreamweaver 中插入圖像的方法非常簡單，下面介紹具體操作。確定插入點(diǎn)后單擊“圖像”按鈕 插入圖像“圖像標(biāo)簽輔助功能屬性”對(duì)話框 “首選參數(shù)”對(duì)話框下面列出圖像“屬性”面板中各常用項(xiàng)的意義。圖像：設(shè)置圖像名稱，主要用于通過腳本控制圖像。寬和高：圖像的寬度和高度（單位為像素），改變了圖像的尺寸后，該數(shù)值將加粗顯示。圖像“屬性”面板源文件：顯示圖像文件的路徑。鏈接：用于創(chuàng)建從圖像到其他文件的鏈接。替換：在瀏覽器無法顯示圖像文件時(shí)，在圖像位置顯示的說明性文字。垂直邊距和水平邊距：指定圖像上、下、左、右空白的像素值。目標(biāo)：設(shè)置在何處打開鏈接文檔，

21、_blank 表示新窗口，_self 表示當(dāng)前窗口，_parent表示當(dāng)前窗口的父窗口，_top 表示當(dāng)前窗口的頂級(jí)窗口。邊框：設(shè)置圖像邊框的粗細(xì)，以像素為單位。有時(shí)在為圖像設(shè)置鏈接后，圖像的周圍會(huì)多出一個(gè)藍(lán)色的邊框，此時(shí)只需將圖像的邊框值設(shè)置為“0”，即可將該邊框去掉。對(duì)齊：確定圖像在單元格或頁面中的對(duì)齊方式。三、使用圖像占位符圖像占位符相當(dāng)于圖像的臨時(shí)替代對(duì)象。如果網(wǎng)頁中的某個(gè)圖像尚未制作好，可暫時(shí)用圖像占位符代替。打開“圖像占位符”對(duì)話框 插入圖像占位符 替換圖像四、制作鼠標(biāo)經(jīng)過圖像要制作鼠標(biāo)經(jīng)過圖像，需要用到兩張大小相同，而內(nèi)容不同的圖像。其中一張作為原始圖像，在頁面打開的時(shí)候顯示；另

22、一張則作為鼠標(biāo)經(jīng)過圖像，在鼠標(biāo)經(jīng)過的時(shí)候替換原始圖像顯示出來。 設(shè)置圖像名稱和原始圖像 插入鼠標(biāo)經(jīng)過圖像預(yù)覽文檔五、制作導(dǎo)航條導(dǎo)航條在網(wǎng)站中起著不可替代的作用，它把網(wǎng)站中的各個(gè)頁面連接起來。每一個(gè)網(wǎng)站都有自己的導(dǎo)航條。利用與制作鼠標(biāo)經(jīng)過圖像類似的方法，可制作具有可變效果的導(dǎo)航條。制作導(dǎo)航條需要用到兩組大小相同而內(nèi)容不同的圖片。 設(shè)置鼠標(biāo)經(jīng)過圖像 預(yù)覽網(wǎng)頁任務(wù) 3為主頁設(shè)置動(dòng)畫和背景音樂應(yīng)用動(dòng)畫和多媒體掌握插入 Flash 動(dòng)畫的方法掌握插入音頻和視頻的方法一、插入 Flash 動(dòng)畫Flash 動(dòng)畫是一種流行的矢量動(dòng)畫，具有文件尺寸小、變化豐富的優(yōu)點(diǎn)，因而很多網(wǎng)頁中都會(huì)使用。選擇 Flash 動(dòng)

23、畫插入 Flash 動(dòng)畫 Flash 動(dòng)畫“屬性”面板“屬性”面板中部分常用設(shè)置項(xiàng)的意義如下。循環(huán)：選中該選項(xiàng)后，F(xiàn)lash 動(dòng)畫將連續(xù)播放。自動(dòng)播放：如果選中該選項(xiàng)，則在打開頁面時(shí)自動(dòng)播放 Flash 動(dòng)畫。垂直邊距和水平邊距：指定 Flash 動(dòng)畫周圍的空白像素值。寬和高：以像素為單位指定 Flash 動(dòng)畫的寬度和高度。文件：指向 Flash 動(dòng)畫文件的路徑。重設(shè)大?。簩?Flash 動(dòng)畫恢復(fù)到實(shí)際大小。品質(zhì)：設(shè)置 Flash 動(dòng)畫的播放品質(zhì)。比例：確定 Flash 動(dòng)畫如何適應(yīng)在其“寬”和“高”編輯框中設(shè)置的尺寸。對(duì)齊：確定影片在頁面上的對(duì)齊方式。背景顏色：指定 Flash 動(dòng)畫區(qū)域的背

24、景顏色。參數(shù)：單擊此按鈕打開一個(gè)對(duì)話框，可在其中輸入傳遞給 Flash 動(dòng)畫的附加參數(shù)。二、應(yīng)用透明 Flash 動(dòng)畫假如已為網(wǎng)頁、某個(gè)表格或某個(gè)單元格設(shè)置了一張背景圖像，在單元格中插入一個(gè)Flash 動(dòng)畫時(shí)，由于 Flash 動(dòng)畫的背景顏色會(huì)遮蓋掉背景圖像，就看不到背景圖像了。為使背景圖像能夠正常顯示，需要將 Flash 動(dòng)畫的背景顏色改成透明。 插入動(dòng)畫 預(yù)覽網(wǎng)頁效果 預(yù)覽透明背景的動(dòng)畫效果“參數(shù)”對(duì)話框三、插入 Flash 按鈕Flash 按鈕包括兩類，一類是用 Flash 軟件制作的按鈕，另一類是 Dreamweaver 中集成的按鈕。前者的插入方法與 Flash 動(dòng)畫類似，此處主要講

25、解后者的插入。 插入 Flash 按鈕四、插入音頻文件 插入音頻文件五、插入視頻文件除音頻文件外，在 Dreamweaver 中還可以插入視頻文件、Shockwave 影片和 Applet等其他媒體元素。 插入視頻文件任務(wù) 1為首頁和子頁設(shè)置鏈接應(yīng)用超鏈接任務(wù) 2 為首頁添加伴隨窗口應(yīng)用行為項(xiàng)目四制作文化公司網(wǎng)站應(yīng)用超鏈接和行為任務(wù) 1為首頁和子頁設(shè)置鏈接應(yīng)用超鏈接熟練掌握設(shè)置各種超鏈接的方法掌握跳轉(zhuǎn)菜單的設(shè)置方法一、設(shè)置常規(guī)超鏈接常規(guī)超鏈接包括內(nèi)部超鏈接和外部超鏈接。內(nèi)部超鏈接是指目標(biāo)文件位于站點(diǎn)內(nèi)部的鏈接；外部超鏈接是實(shí)現(xiàn)網(wǎng)站與網(wǎng)站之間跳轉(zhuǎn)，也就是從本網(wǎng)站跳轉(zhuǎn)到其他網(wǎng)站的鏈接。1. 內(nèi)部超

26、鏈接 單擊“瀏覽文件”按鈕設(shè)置內(nèi)部超鏈接“屬性”面板上“鏈接”編輯框下方的“目標(biāo)”下拉列表框表示打開鏈接文檔的方式，其中各選項(xiàng)意義如下。_blank：表示在保留當(dāng)前網(wǎng)頁窗口的狀態(tài)下，在新窗口中顯示被打開的鏈接網(wǎng)頁。_parent：表示在當(dāng)前窗口顯示被打開的鏈接網(wǎng)頁；如果是框架網(wǎng)頁，則在父框架中_self：表示在當(dāng)前窗口顯示被打開的鏈接網(wǎng)頁；如果是框架網(wǎng)頁，則在當(dāng)前框架中顯示被打開的鏈接網(wǎng)頁。_top：表示在當(dāng)前窗口顯示被打開的鏈接網(wǎng)頁；如果是框架網(wǎng)頁，則刪除所有框架，顯示當(dāng)前網(wǎng)頁。 拖動(dòng)“指向文件”按鈕設(shè)置內(nèi)部鏈接二、設(shè)置圖片鏈接和下載鏈接所謂圖片鏈接，就是在單擊網(wǎng)頁中的某個(gè)小圖片時(shí)，在新窗口

27、中打開一幅大圖片；下載鏈接是指單擊某個(gè)超鏈接時(shí)會(huì)打開一個(gè)“文件下載”對(duì)話框（或自動(dòng)啟動(dòng)下載工具），通過在該對(duì)話框中單擊“打開”或“保存”按鈕，打開或下載文件。 設(shè)置外部超鏈接 設(shè)置圖片鏈接和下載鏈接三、設(shè)置電子郵件鏈接很多網(wǎng)站上留有電子郵件地址，單擊該地址可打開默認(rèn)電子郵件工具（如 Outlook）的編輯新郵件窗口，這是一種特殊類型的鏈接，又稱為電子郵件鏈接。在網(wǎng)站上設(shè)置一個(gè)這樣的鏈接，可以方便瀏覽者聯(lián)系，下面介紹如何設(shè)置此類鏈接。設(shè)置電子郵件鏈接“電子郵件鏈接”對(duì)話框預(yù)覽電子郵件鏈接效果四、設(shè)置熱點(diǎn)鏈接很多時(shí)候都需要為一張圖片的不同部位設(shè)置不同的鏈接，如何為一張圖片設(shè)置多個(gè)鏈接呢？這就用到了

28、熱點(diǎn)鏈接。熱點(diǎn)鏈接又稱為圖像映射，就是使用熱點(diǎn)工具將一張圖片劃分成多個(gè)區(qū)域，并為這些區(qū)域分別設(shè)置鏈接，下面介紹具體操作。 繪制矩形熱點(diǎn) 設(shè)置熱點(diǎn)鏈接 預(yù)覽網(wǎng)頁五、設(shè)置命名錨記鏈接在瀏覽網(wǎng)頁時(shí)，經(jīng)常會(huì)遇到由于網(wǎng)頁的內(nèi)容非常多，瀏覽器的滾動(dòng)條變得很長，瀏覽者無法快速找到所要內(nèi)容的情況。為解決這個(gè)問題，可以通過命名錨記鏈接為網(wǎng)頁添加位于該網(wǎng)頁內(nèi)部的超鏈接，單擊該超鏈接，就跳轉(zhuǎn)到網(wǎng)頁中指定的位置。設(shè)置命名錨記鏈接，首先要插入命名錨記，然后創(chuàng)建跳轉(zhuǎn)到該命名錨記的鏈接。 插入命名錨記設(shè)置命名錨記鏈接預(yù)覽網(wǎng)頁六、設(shè)置跳轉(zhuǎn)菜單跳轉(zhuǎn)菜單相當(dāng)于一組超鏈接的集合，在網(wǎng)頁中顯示為彈出式下拉菜單，如圖所示。彈出菜單內(nèi)的

29、鏈接沒有類型上的限制，可以是內(nèi)部鏈接，也可以是到其他網(wǎng)站的鏈接，還可以是電子郵件鏈接或命名錨記鏈接。跳轉(zhuǎn)菜單設(shè)置第 1 個(gè)菜單項(xiàng) 添加并設(shè)置其他菜單項(xiàng)“插入跳轉(zhuǎn)菜單”對(duì)話框中各設(shè)置項(xiàng)的意義如下。菜單項(xiàng)：列出了所有創(chuàng)建的菜單項(xiàng)。當(dāng)新建菜單時(shí)，只有一項(xiàng)默認(rèn)的“unnamed1”。文本：用來設(shè)置跳轉(zhuǎn)菜單項(xiàng)的名稱。選擇時(shí)，轉(zhuǎn)到 URL：用來設(shè)置跳轉(zhuǎn)菜單項(xiàng)的鏈接地址。打開 URL 于：用來設(shè)置跳轉(zhuǎn)菜單項(xiàng)鏈接目標(biāo)的打開方式。菜單 ID：用來設(shè)置便于記憶和理解的跳轉(zhuǎn)菜單名稱。菜單之后插入前往按鈕：勾選此項(xiàng)時(shí)會(huì)在跳轉(zhuǎn)菜單的后面添加一個(gè)“前往”按鈕。更改 URL 后選擇第一個(gè)項(xiàng)目：勾選此項(xiàng)時(shí)允許使用菜單選擇提示

30、。 設(shè)置初始菜單項(xiàng) “列表值”對(duì)話框以列表框形式顯示的跳轉(zhuǎn)菜單任務(wù) 2為首頁添加伴隨窗口應(yīng)用行為熟悉“行為”面板熟練掌握各種行為的設(shè)置方法一、“行為”面板“行為”面板是應(yīng)用行為不可缺少的工具。選擇“窗口”“行為”命令，或按Shift+F4 組合鍵，即可打開“行為”面板，如圖所示?！靶袨椤泵姘宥?、應(yīng)用行為行為可以應(yīng)用于 XHTML 標(biāo)簽、圖像、鏈接文本等對(duì)象。每個(gè)行為都由兩部分組成，即事件和動(dòng)作。所謂事件是指“發(fā)生什么”，如鼠標(biāo)移到對(duì)象上方、離開對(duì)象或雙擊對(duì)象等；而動(dòng)作是指“去做什么”，如打開瀏覽器窗口、播放聲音或彈出信息等。 應(yīng)用行為三、應(yīng)用“彈出信息”行為有時(shí)候，打開某個(gè)網(wǎng)頁或單擊網(wǎng)頁中的某

31、個(gè)元素時(shí)可以看到彈出信息框。應(yīng)用“彈出信息”行為可以輕松實(shí)現(xiàn)該功能，下面介紹“彈出信息”行為的應(yīng)用。 選擇要應(yīng)用行為的對(duì)象 設(shè)置彈出信息設(shè)置事件 預(yù)覽文檔四、應(yīng)用“打開瀏覽器窗口”行為應(yīng)用“打開瀏覽器窗口”行為，可實(shí)現(xiàn)單擊目標(biāo)文字或圖片打開固定大小窗口的效果。許多站點(diǎn)都使用這種方式彈出重要的通知、廣告信息等頁面。為文本設(shè)置空鏈接 添加行為 設(shè)置要在窗口中顯示的網(wǎng)頁設(shè)置窗口寬度和高度 設(shè)置事件 預(yù)覽文檔五、對(duì)圖像應(yīng)用“效果”行為“效果”行為包括增大 / 收縮、擠壓、顯示 / 漸隱、晃動(dòng)、滑動(dòng)、遮簾和高亮顏色。以“顯示 / 漸隱”為例，介紹這類行為的應(yīng)用方法。選擇行為 “顯示 / 漸隱”對(duì)話框 設(shè)

32、置事件六、應(yīng)用“顯示隱藏元素”行為應(yīng)用“顯示隱藏元素”行為，可以控制 AP Div 的顯示和隱藏，通過對(duì) AP Div 反復(fù)應(yīng)用該行為，可以實(shí)現(xiàn)下拉菜單效果。 插入 APDiv 并在其中插入小圖片 添加行為 設(shè)置事件 “顯示 / 隱藏元素”對(duì)話框七、應(yīng)用“設(shè)置狀態(tài)欄文本”行為很多個(gè)人網(wǎng)站都設(shè)置了狀態(tài)欄文本，以表明網(wǎng)站所屬人的狀態(tài)。下面介紹如何為網(wǎng)頁設(shè)置狀態(tài)欄文本。 添加行為 “設(shè)置狀態(tài)欄文本”對(duì)話框 設(shè)置事件任務(wù) 1布局主頁 index.html表格的基本應(yīng)用任務(wù) 2布局子頁表格的高級(jí)應(yīng)用項(xiàng)目五制作飾品網(wǎng)站用表格構(gòu)建網(wǎng)頁布局任務(wù) 1布局主頁index.html表格的基本應(yīng)用熟悉各種表格的操作方

33、法掌握表格的嵌套方法一、插入表格Dreamweaver 提供了非常完善的表格編輯功能，首先介紹如何在網(wǎng)頁文檔中插入表格。 插入表格 插入表格“表格”對(duì)話框中幾個(gè)重要選項(xiàng)的意義如下。表格寬度（Width）：設(shè)置表格寬度值，否則，其寬度將隨其中的內(nèi)容而改變。邊框粗細(xì)（Border）：指整個(gè)表格邊框的粗細(xì)，標(biāo)準(zhǔn)單位是像素。單元格邊距（Cell padding）：也稱為單元格填充，是指單元格內(nèi)部的文本或圖像與單元格邊框之間的距離，標(biāo)準(zhǔn)單位是像素。單元格間距（Cell spacing）：指相鄰單元格之間的距離，標(biāo)準(zhǔn)單位是像素。二、選擇表格和單元格在 Dreamweaver 中選擇表格的方法非常簡單，只需

34、用鼠標(biāo)單擊表格邊框線即可。當(dāng)表格外框顯示為黑色粗實(shí)線時(shí)，就表示該表格被選中，如圖a 所示。另外，還可以通過“標(biāo)簽選擇器”選擇表格。 選擇表格 選擇單元格區(qū)域 選擇某行或某列單元格三、設(shè)置表格屬性選中表格后，可利用“屬性”面板查看或修改表格的行、列、寬，以及填充、間距、背景圖像、背景顏色等屬性，如圖所示。 表格“屬性”面板 設(shè)置表格背景顏色四、設(shè)置單元格屬性在表格的某個(gè)單元格中單擊選中，“屬性”面板中將顯示水平、垂直、寬、高等單元格屬性，此時(shí)可通過“屬性”面板設(shè)置其屬性，如圖所示。 單元格“屬性”面板任務(wù) 2布局子頁表格的高級(jí)應(yīng)用熟悉表格的編輯方法掌握布局表格的使用一、拆分與合并單元格1. 拆分

35、單元格拆分單元格就是將一個(gè)單元格拆分成多個(gè)單元格，具體操作如下。拆分單元格2. 合并單元格合并單元格就是將相鄰的幾個(gè)單元格合并成一個(gè)單元格。繼續(xù)在前文的文檔中操作，將前文拆分的單元格合并成一個(gè)單元格。合并單元格二、在表格中添加或刪除行與列在使用表格組織大量信息時(shí)，需要在創(chuàng)建好的表格中添加或刪除行與列，以增加或減少記錄，具體操作如下。 打開“插入行或列”對(duì)話框 插入行任務(wù) 制作電影網(wǎng)站首頁框架網(wǎng)頁入門項(xiàng)目六制作電影網(wǎng)站建立框架網(wǎng)頁任務(wù)制作電影網(wǎng)站首頁框架網(wǎng)頁入門理解框架網(wǎng)頁的基本概念掌握創(chuàng)建框架的基本方法區(qū)分框架與框架集，并掌握框架集的保存和屬性設(shè)置一、框架和框架集在框架網(wǎng)頁中，瀏覽器窗口被劃分

36、成了若干區(qū)域，每個(gè)區(qū)域稱為一個(gè)框架。每個(gè)框架可顯示不同文檔的內(nèi)容，彼此之間互不干擾?？蚣芫W(wǎng)頁由框架集定義，框架集是特殊的 HTML 文件，它定義一組框架的布局和屬性，包括框架的數(shù)目、大小和位置，以及在每個(gè)框架中初始顯示的頁面 URL。框架集文件本身不包含要在瀏覽器中顯示的 HTML 內(nèi)容，只是向?yàn)g覽器提供如何顯示一組框架，以及在這些框架中應(yīng)顯示哪些文檔的信息。使用框架最常見的情況是，一個(gè)框架顯示包含導(dǎo)航控件的文檔，另一個(gè)框架顯示含有主要內(nèi)容的文檔。例如，圖顯示了一個(gè)由兩個(gè)框架組成的框架網(wǎng)頁：一個(gè)較窄的框架位于左側(cè)，其中包含導(dǎo)航條；一個(gè)大框架占據(jù)了頁面的其余部分，包含網(wǎng)頁的主要內(nèi)容。 由兩個(gè)框架

37、組成的框架網(wǎng)頁二、框架構(gòu)造如上圖所示的網(wǎng)頁至少由三個(gè)單獨(dú)的網(wǎng)頁文檔組成：兩個(gè)框架區(qū)域中顯示的兩個(gè)網(wǎng)頁文檔和把這兩個(gè)文檔顯示在一個(gè)界面上的框架集文檔?？蚣芗臋n定義了當(dāng)前在瀏覽器中顯示的網(wǎng)頁文檔的構(gòu)造和各個(gè)框架的特征（如框架大小、邊框顏色等），下圖顯示了該框架集文檔的結(jié)構(gòu)。 框架集文檔結(jié)構(gòu)三、制作并保存框架集文檔在 Dreamweaver 中創(chuàng)建框架集的方法有很多，可以選擇“文件”“新建”命令，打開“新建文檔”對(duì)話框，然后在左側(cè)的“文檔類型”列表中選擇“示例中的頁”，在“示例文件夾”列表中選擇“框架集”，最后在“示例頁”列表中選擇框架類型并單擊“創(chuàng)建”按鈕，如圖所示；也可以通過選擇“修改”“框架

38、集”菜單下的子菜單，將普通頁面拆分為框架集；另外，還可以單擊“布局”插入欄中的“框架”按鈕，在普通頁面中插入預(yù)定義的框架集。 創(chuàng)建框架集文檔 拆分上下框架 拆分左右框架 保存框架集四、設(shè)置框架集屬性在制作框架時(shí)，Dreamweaver 默認(rèn)以工作界面為基準(zhǔn)將框架二等分，但在實(shí)際的網(wǎng)頁制作中，需要根據(jù)布局精確地指定每個(gè)框架的大小。下面以前面制作的框架集為例，介紹如何設(shè)置框架集屬性（包括指定框架大小和邊框）。 設(shè)置邊框?qū)挾群皖伾濉⒃O(shè)置框架屬性設(shè)置框架屬性，首先選中框架。選擇框架的方法有兩種，一種是在“框架”面板中選擇，還有一種是使用鼠標(biāo)和鍵盤選擇，在此基礎(chǔ)上進(jìn)行設(shè)置。選擇“窗口”“框架”命令，可

39、打開“框架”面板。利用“框架”面板選擇框架時(shí)，直接在面板中相應(yīng)區(qū)域單擊即可，如圖所示。 利用“框架”面板選擇框架使用鼠標(biāo)和鍵盤選擇框架的方法為：按住 Alt 鍵，然后在要選擇的框架內(nèi)單擊。選中框架后，利用“屬性”面板可設(shè)置其屬性，包括框架名稱、框架源文件、框架邊框等，如圖所示。 框架“屬性”面板任務(wù) 1為網(wǎng)站首頁設(shè)置樣式樣式表的基本應(yīng)用任務(wù) 2 為網(wǎng)站子頁設(shè)置樣式樣式表的高級(jí)應(yīng)用項(xiàng)目七制作美容網(wǎng)站應(yīng)用樣式表任務(wù) 1為網(wǎng)站首頁設(shè)置樣式樣式表的基本應(yīng)用理解并熟悉樣式的類型熟悉樣式的創(chuàng)建方法一、熟悉“CSS 樣式”面板在 Dreamweaver 中，可以借助“CSS 樣式”面板來新建、刪除、編輯和應(yīng)

40、用樣式，以及附加外部樣式表等。選擇“窗口”“CSS 樣式”命令，可打開“CSS 樣式”面板，如圖所示。 “CSS 樣式”面板（所有樣式模式）“CSS 樣式”面板的“全部”選項(xiàng)卡包含兩個(gè)窗格。其中，上面的“所有規(guī)則”窗格顯示了當(dāng)前文檔中定義的樣式和鏈接到當(dāng)前文檔的樣式文件中定義的樣式。使用下方的“屬性”窗格可以快速編輯“所有規(guī)則”窗格中所選樣式的屬性。 “CSS 樣式”面板（當(dāng)前選擇模式）二、CSS 樣式的存在方式1. 外部 CSS 樣式表為增強(qiáng) CSS 樣式的通用性，可以創(chuàng)建擴(kuò)展名為“css”的樣式表文件。利用“CSS 樣式”面板可將該文件鏈接至站點(diǎn)中的一個(gè)或多個(gè)網(wǎng)頁中，從而使用戶可以直接應(yīng)用

41、其中定義的樣式。2. 內(nèi)部（或嵌入式）CSS 樣式表內(nèi)部 CSS 樣式表是一系列包含在 HTML 文檔 head 部分 style 標(biāo)簽內(nèi)的 CSS 樣式，如圖所示。 “CSS 樣式”面板（當(dāng)前選擇模式） 內(nèi)部 CSS 樣式表三、CSS 樣式的分類1. 類樣式類樣式又稱自定義樣式，是唯一可應(yīng)用于文檔中任何對(duì)象的 CSS 樣式，主要用于定義一些特殊的樣式。例如，可為網(wǎng)頁中的列表項(xiàng)定義樣式。2. 標(biāo)簽樣式標(biāo)簽樣式用來重定義 HTML 標(biāo)簽的樣式。例如，定義 table 標(biāo)簽樣式后，網(wǎng)頁中所有表格都將自動(dòng)應(yīng)用該樣式。3. 選擇器樣式選擇器樣式又稱高級(jí)樣式，主要用來定義鏈接文本的樣式，也可用來重定義特

42、定標(biāo)簽組合的樣式。四、創(chuàng)建樣式的一般步驟在 Dreamweaver 中，可按照以下方法來創(chuàng)建 CSS 樣式。 打開“新建 CSS 規(guī)則”對(duì)話框 選擇“選擇器”類別 選擇標(biāo)簽 “保存樣式表文件為”對(duì)話框 “CSS 規(guī)則定義”對(duì)話框“背景”屬性其中部分選項(xiàng)的意義如下。重復(fù)（background-repeat）：確定是否以及如何重復(fù)背景圖像。附件（background-attachment）：確定背景圖像是固定在它的原始位置還是隨內(nèi)容一起滾動(dòng)。水平位置和垂直位置（background-position）：指定背景圖像相對(duì)于元素的初始位置，可以使背景圖像與頁面中心垂直和水平對(duì)齊。 “背景”屬性任務(wù) 2

43、為網(wǎng)站子頁設(shè)置樣式樣式表的高級(jí)應(yīng)用掌握附加外部樣式的使用方法理解并掌握 CSS 濾鏡的使用方法一、附加外部樣式如果網(wǎng)站中多個(gè)網(wǎng)頁文檔用到了同一個(gè)樣式，可以將該樣式保存在外部樣式文件中，然后將樣式文件鏈接至各個(gè)網(wǎng)頁文檔，就可以對(duì)各文檔應(yīng)用該樣式了。 打開“鏈接外部樣式表”對(duì)話框 選擇樣式文件 設(shè)置添加形式 查看鏈接樣式的代碼 預(yù)覽網(wǎng)頁二、CSS 濾鏡應(yīng)用 CSS 濾鏡可為圖像設(shè)置漸變、透明、陰影等效果。在“ 的 CSS 規(guī)則定義”對(duì)話框左側(cè)的“分類”列表中選擇“擴(kuò)展”選項(xiàng)，右側(cè)的“過濾器”下拉列表中為用戶提供了多種濾鏡效果，如圖所示。 “過濾器”下拉列表下面以 Alpha 濾鏡為例，介紹 CSS

44、 濾鏡的應(yīng)用方法。 新建 CSS 樣式 選擇過濾器任務(wù) 制作網(wǎng)站首頁和子頁使用 Div+CSS 技術(shù)制作網(wǎng)頁項(xiàng)目八制作茶文化網(wǎng)站應(yīng)用 Div+CSS 技術(shù)布局網(wǎng)頁任務(wù)制作網(wǎng)站首頁和子頁使用 Div+CSS 技術(shù)制作網(wǎng)頁了解 Web 標(biāo)準(zhǔn)的含義、構(gòu)成，認(rèn)識(shí) Div熟練掌握使用 Div+CSS 技術(shù)構(gòu)建網(wǎng)頁的方法一、Web 標(biāo)準(zhǔn)的含義Web 標(biāo)準(zhǔn)是由 W3C 和其他標(biāo)準(zhǔn)化組織制定的一套規(guī)范，包括 XHTML、JavaScript及 CSS 等一系列標(biāo)準(zhǔn)，其目的在于創(chuàng)建一個(gè)統(tǒng)一的用于 Web 表現(xiàn)層的技術(shù)標(biāo)準(zhǔn)，以便于通過不同瀏覽器或終端設(shè)備（計(jì)算機(jī)、手機(jī)等）向最終用戶展示信息內(nèi)容。從狹義上講，Web

45、 標(biāo)準(zhǔn)就是采用 Div+CSS 代碼進(jìn)行網(wǎng)站建設(shè)，現(xiàn)在 Div+CSS 儼然成了標(biāo)準(zhǔn)化的代名詞。二、Web 標(biāo)準(zhǔn)的構(gòu)成1. 結(jié)構(gòu)結(jié)構(gòu)技術(shù)用于對(duì)網(wǎng)頁中用到的信息（文本、圖像、動(dòng)畫等）進(jìn)行分類和整理，目前用于結(jié)構(gòu)化設(shè)計(jì)的 Web 標(biāo)準(zhǔn)技術(shù)主要是 XHTML。2. 表現(xiàn)表現(xiàn)技術(shù)用于對(duì)已被結(jié)構(gòu)化的信息進(jìn)行顯示上的控制，包括位置、顏色、字體、大小等形式控制。目前用于表現(xiàn)設(shè)計(jì)的 Web 標(biāo)準(zhǔn)技術(shù)就是 CSS。簡單來說就是表現(xiàn)與內(nèi)容完全分離，使站點(diǎn)的維護(hù)更加容易。3. 行為行為是指對(duì)整個(gè)文檔的一個(gè)模型定義和交互行為的編寫。目前用于行為設(shè)計(jì)的Web 標(biāo)準(zhǔn)技術(shù)主要有以下兩個(gè)。DOM（Document Objec

46、t Model）：文檔對(duì)象模型，相當(dāng)于瀏覽器與內(nèi)容結(jié)構(gòu)之間的一個(gè)接口。它定義了訪問和處理 HTML 文檔的標(biāo)準(zhǔn)方法，把網(wǎng)頁和腳本以及其他的編程語言聯(lián)系起來。ECMAScript（JavaScript 的擴(kuò)展腳本語言）：由 CMA（Computer Manufacturers Association）制定的腳本語言（JavaScript），用于實(shí)現(xiàn)網(wǎng)頁對(duì)象的交互操作。三、認(rèn)識(shí) DivDiv 全稱 Division，意為“區(qū)分”。Div 的使用方法與其他標(biāo)簽一樣。如果單獨(dú)使用Div 而不加 CSS，則它在網(wǎng)頁中的效果和段落標(biāo)記“”相似。Div 是用來為 XHTML 文檔中的塊內(nèi)容設(shè)置結(jié)構(gòu)和背景屬性

47、的元素。它相當(dāng)于一個(gè)容器，由起始標(biāo)簽 和結(jié)束標(biāo)簽 之間的所有內(nèi)容來構(gòu)成這個(gè)塊。XHTML 中可以作為容器的標(biāo)簽有很多，相比之下，Div 除了可以作為容器，還具有一個(gè)特有的優(yōu)點(diǎn)，即不帶有任何原始屬性。 使用 Div 標(biāo)簽和 p 標(biāo)簽的區(qū)別四、Div+CSS 布局的優(yōu)缺點(diǎn)1. 優(yōu)點(diǎn)（1）CSS 的優(yōu)勢(shì)體現(xiàn)在它簡潔的代碼上。（2）使用 Div+CSS 技術(shù)制作的網(wǎng)站改版更加方便簡單。（3）可以一次設(shè)計(jì)，多處發(fā)布。（4）可以更好、更輕松地控制網(wǎng)頁布局。（5）將設(shè)計(jì)部分剝離出來，放在一個(gè)單獨(dú)的樣式表文件中，可以減少網(wǎng)頁無效的可能性。（6）布局靈活性大。（7）如果對(duì) JavaScript 比較精通，可以不

48、必寫 ID，使用 class 即可。（8）代碼更簡潔。2. 缺點(diǎn)對(duì)于 CSS 的高度依賴， 使得網(wǎng)頁設(shè)計(jì)變得比較復(fù)雜。CSS 文件異常將會(huì)影響整個(gè)網(wǎng)站的正常顯示。對(duì)于用 Div+CSS 技術(shù)制作的網(wǎng)站，非常容易出現(xiàn)瀏覽器兼容性問題。Div+CSS 技術(shù)對(duì)搜索引擎的優(yōu)化效果，取決于網(wǎng)頁設(shè)計(jì)者的專業(yè)水平而不是Div+CSS 技術(shù)本身。五、絕對(duì)定位與相對(duì)定位1. 絕對(duì)定位絕對(duì)定位在 CSS 中的寫法是“position:absolute；”。其表達(dá)的意思是參照瀏覽器的左上角，配合 top、right、bottom、left（上、右、下、左）值來定位元素，如下 CSS 代碼： #lay positio

49、n:absolute； left:5px； top:5px；它表示應(yīng)用 #lay 樣式的對(duì)象為絕對(duì)定位模式，它將始終保持距離瀏覽器窗口左邊框 5px、上邊框 5px，如圖所示。 絕對(duì)定位2. 相對(duì)定位相對(duì)定位在 CSS 中的寫法是“position:relative；”。其表達(dá)的意思是以父級(jí)（它所在的容器）的坐標(biāo)原點(diǎn)為坐標(biāo)原點(diǎn)。無父級(jí)則以 body 的坐標(biāo)原點(diǎn)為坐標(biāo)原點(diǎn)，配合上、右、下、左（TRBL）進(jìn)行定位，當(dāng)父級(jí)內(nèi)有 padding 等 CSS 屬性時(shí)，當(dāng)前級(jí)的坐標(biāo)原點(diǎn)則參照父級(jí)內(nèi)容區(qū)的坐標(biāo)原點(diǎn)進(jìn)行定位，如圖所示。相對(duì)定位六、浮動(dòng)定位浮動(dòng)定位在 CSS 中用“float”屬性來表示。當(dāng)“f

50、loat”值為“Bone”時(shí)，表示對(duì)象不浮動(dòng)；為“l(fā)eft”時(shí)，表示對(duì)象向左浮動(dòng)；為“right”時(shí)，表示對(duì)象向右浮動(dòng)。浮動(dòng)是一種非常先進(jìn)的布局方式，可以改變網(wǎng)頁中對(duì)象的前后流動(dòng)順序，這樣使得內(nèi)容的排版變得簡單且具有良好的可伸縮性。如果使用浮動(dòng)定位方式，為 Div 中的所有列都加上“float:left”屬性，那么它們會(huì)挨個(gè)向左排列。如果讓一個(gè)元素浮動(dòng)，它會(huì)往右或者往左浮動(dòng)直至遇到容器的邊緣。應(yīng)該為所有使用“float”屬性的元素設(shè)定寬度值（除非是圖像元素，因其具有隱含的寬度），如果不設(shè)定寬度，結(jié)果將是不可預(yù)知的。 UXMagazine 網(wǎng)站七、插入 Div 標(biāo)簽Div 標(biāo)簽與表格、圖像等網(wǎng)頁

51、對(duì)象的插入方法類似，所不同的是，在插入 Div 標(biāo)簽的同時(shí)可以為其設(shè)置樣式。 插入 Div 標(biāo)簽“插入 Div 標(biāo)簽”對(duì)話框中各設(shè)置項(xiàng)的意義如下。插入：“插入”下拉列表中的內(nèi)容會(huì)根據(jù)插入點(diǎn)所在位置而發(fā)生變化，通過在其下拉列表中選擇不同選項(xiàng)，可以更精確地定位插入點(diǎn)位置。類：選擇要應(yīng)用于 Div 標(biāo)簽的類樣式，如果要新建針對(duì)該 Div 標(biāo)簽的類樣式，可在“類”編輯框中輸入樣式名，然后單擊“新建 CSS 樣式”按鈕定義類樣式。ID：如果要新建針對(duì)該 Div 標(biāo)簽的 ID 樣式，可在“ID”編輯框中輸入樣式名，然后單擊“新建 CSS 樣式”按鈕定義 ID 樣式。任務(wù) 1創(chuàng)建“夢(mèng)幻花園”首頁應(yīng)用模板任務(wù)

52、 2創(chuàng)建“幸福一家”網(wǎng)頁應(yīng)用庫項(xiàng)目項(xiàng)目九制作個(gè)人網(wǎng)站應(yīng)用模板和庫任務(wù) 1創(chuàng)建“夢(mèng)幻花園”首頁應(yīng)用模板掌握創(chuàng)建和保存模板的方法熟悉利用模板創(chuàng)建網(wǎng)頁的方法一、創(chuàng)建并保存模板文檔創(chuàng)建模板文檔的方法有兩種。一種是新建空白模板文檔，然后像制作普通網(wǎng)頁一樣制作和編輯模板內(nèi)容；另一種是將普通網(wǎng)頁另存為模板。這里講解如何將普通網(wǎng)頁另存為模板。 將現(xiàn)有網(wǎng)頁另存為模板 選擇表格 創(chuàng)建可編輯區(qū)域 選擇可編輯區(qū)域 重命名可編輯區(qū)域二、基于模板創(chuàng)建文檔創(chuàng)建模板后，就可以在該模板的基礎(chǔ)上創(chuàng)建網(wǎng)頁文檔了，具體方法如下。 基于模板創(chuàng)建文檔另外，除上面的方法外，也可在“資源”面板中右擊模板，然后從彈出的快捷菜單中選擇“從模板新

53、建”選項(xiàng)，來創(chuàng)建基于模板的文檔，如圖所示。 “資源”面板 刪除模板對(duì)話框“更新模板文件”對(duì)話框任務(wù) 2創(chuàng)建“幸福一家”網(wǎng)頁應(yīng)用庫項(xiàng)目理解庫項(xiàng)目的概念熟悉庫項(xiàng)目的創(chuàng)建和應(yīng)用一、庫項(xiàng)目的概念庫項(xiàng)目是一種特殊類型的 Dreamweaver 文件，當(dāng)前網(wǎng)頁中的任意頁面元素均可定義為庫項(xiàng)目，如圖像、表格、文本、聲音和 Flash 影片等。當(dāng)需要使用某庫項(xiàng)目時(shí)，直接將其從“資源”模板中拖到網(wǎng)頁中就可以了。創(chuàng)建庫項(xiàng)目的好處是可以在多個(gè)頁面中重復(fù)使用它們，當(dāng)更改某個(gè)庫項(xiàng)目的內(nèi)容時(shí)，所有應(yīng)用該庫項(xiàng)目的頁面都可以同時(shí)更新。網(wǎng)頁中只是保存了指向圖像、動(dòng)畫等文件的路徑，以后通過置換圖像也可以更新網(wǎng)頁，但相比之下，使用

54、庫項(xiàng)目更為便捷。二、創(chuàng)建庫項(xiàng)目創(chuàng)建庫項(xiàng)目的方法非常簡單。首先選中對(duì)象，然后選擇“修改”“庫”“增加對(duì)象到庫”命令，即將所選對(duì)象創(chuàng)建為庫項(xiàng)目。下面為具體操作步驟。 提示框 創(chuàng)建并重命名庫項(xiàng)目三、應(yīng)用庫項(xiàng)目應(yīng)用庫項(xiàng)目的方法非常簡單，只需在“資源”面板的庫窗口中將其拖入到文檔的適當(dāng)位置即可。此外，也可在定位插入點(diǎn)后，選中庫中的項(xiàng)目并單擊“資源”面板底部的“插入”按鈕，將庫項(xiàng)目插入到文檔中。對(duì)于普通對(duì)象，在單擊選中該對(duì)象后，對(duì)象四周會(huì)出現(xiàn)一組控制點(diǎn)。但是，如果單擊庫項(xiàng)目，該對(duì)象將變成半透明，而不是在四周出現(xiàn)控制點(diǎn)，如圖所示。 普通對(duì)象與庫項(xiàng)目選中狀態(tài)對(duì)比在文檔窗口中單擊選中庫項(xiàng)目后，網(wǎng)頁編輯窗口下方將

55、顯示庫項(xiàng)目的“屬性”面板，如圖所示。從源文件中分離：斷開所選庫項(xiàng)目與其源文件之間的鏈接，使庫項(xiàng)目成為普通對(duì)象。重新創(chuàng)建：用當(dāng)前選定的內(nèi)容改寫原庫項(xiàng)目，使用此選項(xiàng)可以在丟失或意外刪除原始庫項(xiàng)目時(shí)重新創(chuàng)建庫項(xiàng)目。 庫項(xiàng)目的“屬性”面板四、編輯庫項(xiàng)目要編輯庫項(xiàng)目，可在“資源”面板中雙擊庫項(xiàng)目，Dreamweaver 會(huì)在文檔編輯窗口中打開該庫項(xiàng)目，如圖所示。 打開庫項(xiàng)目可以在該文檔窗口中對(duì)庫項(xiàng)目進(jìn)行編輯。對(duì)庫項(xiàng)目進(jìn)行編輯后保存時(shí)，系統(tǒng)會(huì)自動(dòng)打開“更新庫項(xiàng)目”對(duì)話框，詢問用戶是否更新使用了庫項(xiàng)目的網(wǎng)頁，如圖a 所示。一般情況下，應(yīng)單擊“更新”按鈕。修改庫項(xiàng)目后更新使用了庫項(xiàng)目的網(wǎng)頁任務(wù) 3任務(wù) 1創(chuàng)建

56、動(dòng)態(tài)網(wǎng)頁測(cè)試環(huán)境任務(wù) 2創(chuàng)建“留言板”數(shù)據(jù)庫了解數(shù)據(jù)庫制作“留言板”應(yīng)用表單和表單對(duì)象項(xiàng)目十制作留言板動(dòng)態(tài)網(wǎng)頁入門任務(wù) 1創(chuàng)建動(dòng)態(tài)網(wǎng)頁測(cè)試環(huán)境理解動(dòng)態(tài)網(wǎng)頁的工作原理熟悉 IIS 的安裝方法一、動(dòng)態(tài)網(wǎng)頁的工作原理動(dòng)態(tài)網(wǎng)頁一般使用“HTML+ 數(shù)據(jù)庫 +ASP”“HTML+ 數(shù)據(jù)庫 +PHP”或“HTML+ 數(shù)據(jù)庫 +JSP”等技術(shù)來實(shí)現(xiàn)。目前中小型網(wǎng)站較常用的是“HTML+ 數(shù)據(jù)庫 +ASP”技術(shù)。當(dāng)瀏覽者通過瀏覽器向服務(wù)器發(fā)出請(qǐng)求時(shí)，如果請(qǐng)求的是一個(gè)靜態(tài)網(wǎng)頁，那么這個(gè)請(qǐng)求到達(dá)服務(wù)器后，服務(wù)器會(huì)在本地硬盤上尋找相關(guān)網(wǎng)頁，然后返回；如果請(qǐng)求的是一個(gè)動(dòng)態(tài)網(wǎng)頁，服務(wù)器在接到請(qǐng)求后，會(huì)接著傳送給安裝在這

57、個(gè)機(jī)器上的應(yīng)用程序服務(wù)器。應(yīng)用程序服務(wù)器會(huì)理解并解釋這些代碼的含義，并將解釋后的內(nèi)容返回到客戶端，用戶看到的仍然是一個(gè)單純的靜態(tài) HTML 網(wǎng)頁。二、安裝 IIS要制作動(dòng)態(tài)網(wǎng)頁，首先需要有一個(gè)測(cè)試服務(wù)器。在 Windows 7 操作系統(tǒng)下，只要安裝了 IIS，就可以將自己的計(jì)算機(jī)設(shè)置為測(cè)試服務(wù)器。在安裝 Windows 7 時(shí)，默認(rèn)狀態(tài)下是不會(huì)安裝 IIS 的，所以需要單獨(dú)安裝。 單擊“程序和功能”雙擊“默認(rèn)程序”圖標(biāo)選擇“Internet 信息服務(wù)”單擊“打開或關(guān)閉 Windows 功能”選中“ASP 和 ASP.NET”選項(xiàng)選中“基本身份驗(yàn)證”和“摘要式身份驗(yàn)證”選項(xiàng)測(cè)試是否正確安裝了 I

58、IS任務(wù) 2創(chuàng)建“留言板”數(shù)據(jù)庫了解數(shù)據(jù)庫了解數(shù)據(jù)庫的基本知識(shí)熟悉數(shù)據(jù)庫文件的創(chuàng)建方法數(shù)據(jù)庫簡介數(shù)據(jù)庫（Database）是以一定的組織形式存放在計(jì)算機(jī)存儲(chǔ)介質(zhì)上的相互關(guān)聯(lián)的數(shù)據(jù)集合。數(shù)據(jù)庫看起來像是一個(gè)表格，按照行和列來表示信息。一般來說，表的每一行稱為一個(gè)“記錄”，每一列稱為一個(gè)“字段”，記錄和字段是數(shù)據(jù)庫中最基本的術(shù)語。例如，一個(gè)記錄某公司員工信息的數(shù)據(jù)庫，通常包括姓名、年齡、學(xué)歷等字段，而針對(duì)每個(gè)員工的具體數(shù)據(jù)就是一個(gè)記錄。目前常用的數(shù)據(jù)庫管理系統(tǒng)有以下幾種。Access：適合創(chuàng)建中小型信息管理系統(tǒng)，由微軟公司開發(fā)，是辦公軟件 Microsoft Office 的一個(gè)組件。SQL Se

59、rver：目前應(yīng)用最廣泛的數(shù)據(jù)庫管理系統(tǒng)，適合創(chuàng)建中小型信息管理系統(tǒng)，由微軟公司開發(fā)。Oracle：適合創(chuàng)建大型信息管理系統(tǒng)，由 Oracle 公司開發(fā)。DB2：適合創(chuàng)建大中型信息管理系統(tǒng)，由 IBM 公司開發(fā)。任務(wù) 3制作“留言板”應(yīng)用表單和表單對(duì)象掌握表單和表單對(duì)象的插入方法掌握利用表單制作網(wǎng)頁的方法一、認(rèn)識(shí)表單表單多用于填寫用戶信息。例如，用戶在網(wǎng)頁上進(jìn)行注冊(cè)、登錄、留言等操作時(shí)，都是通過表單向網(wǎng)站數(shù)據(jù)庫提交或讀取數(shù)據(jù)的。如圖所示為網(wǎng)易免費(fèi)郵箱注冊(cè)頁面，當(dāng)用戶填寫完信息，單擊“同意協(xié)議并注冊(cè)”按鈕后，所填信息將提交到網(wǎng)站數(shù)據(jù)庫中。 網(wǎng)易免費(fèi)郵箱注冊(cè)頁面嚴(yán)格來說，一個(gè)完整的表單設(shè)計(jì)應(yīng)該分為

60、兩部分，即表單對(duì)象部分和應(yīng)用程序部分，它們分別由網(wǎng)頁設(shè)計(jì)師和程序設(shè)計(jì)師來完成。通常情況下，首先由網(wǎng)頁設(shè)計(jì)師制作出一個(gè)表單頁面（表單對(duì)象部分），此時(shí)的表單只是一個(gè)空殼，并不具備工作的能力；然后由程序設(shè)計(jì)師來編寫程序（應(yīng)用程序部分），實(shí)現(xiàn)表單與數(shù)據(jù)庫之間的連接。二、插入表單選擇 Dreamweaver“插入”欄中的“表單”選項(xiàng)卡，可插入的表單對(duì)象快捷按鈕將顯示在“插入”欄中，如圖所示。 “表單”插入欄表單對(duì)象只有添加到表單中才能起作用，所以在應(yīng)用表單對(duì)象前需要先在頁面中插入表單，在頁面中插入表單的步驟如下。 插入表單 表單“屬性”面板該面板中各設(shè)置項(xiàng)的意義如下。表單名稱：設(shè)置表單名稱，可用于程序調(diào)