Dreamweaver網頁設計與制作教材課件匯總完整版ppt全套課件最全教學教程整本書電子教案全書

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

38、集”菜單下的子菜單，將普通頁面拆分為框架集；另外，還可以單擊“布局”插入欄中的“框架”按鈕，在普通頁面中插入預定義的框架集。 創(chuàng)建框架集文檔 拆分上下框架 拆分左右框架 保存框架集四、設置框架集屬性在制作框架時，Dreamweaver 默認以工作界面為基準將框架二等分，但在實際的網頁制作中，需要根據布局精確地指定每個框架的大小。下面以前面制作的框架集為例，介紹如何設置框架集屬性（包括指定框架大小和邊框）。 設置邊框寬度和顏色五、設置框架屬性設置框架屬性，首先選中框架。選擇框架的方法有兩種，一種是在“框架”面板中選擇，還有一種是使用鼠標和鍵盤選擇，在此基礎上進行設置。選擇“窗口”“框架”命令，可

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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