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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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)頁時，不是檢索網(wǎng)頁的所有內(nèi)容，而是只檢索網(wǎng)頁的關(guān)鍵字。如果想要自己的網(wǎng)頁能夠被搜索引擎檢索到，最好把關(guān)鍵字設(shè)置為人們經(jīng)常使用的詞語。插入關(guān)鍵字 在“代碼”視圖中查看關(guān)鍵字效果 設(shè)置說明文本二、設(shè)置頁面屬性 “頁面屬性”對話框 “編輯字體列表”對話框 設(shè)置鏈接樣式 設(shè)置網(wǎng)頁標題和編碼任務(wù) 3任務(wù) 1輸入并設(shè)置網(wǎng)站子頁文本文本輸入與編輯

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

58、IS任務(wù) 2創(chuàng)建“留言板”數(shù)據(jù)庫了解數(shù)據(jù)庫了解數(shù)據(jù)庫的基本知識熟悉數(shù)據(jù)庫文件的創(chuàng)建方法數(shù)據(jù)庫簡介數(shù)據(jù)庫（Database）是以一定的組織形式存放在計算機存儲介質(zhì)上的相互關(guān)聯(lián)的數(shù)據(jù)集合。數(shù)據(jù)庫看起來像是一個表格，按照行和列來表示信息。一般來說，表的每一行稱為一個“記錄”，每一列稱為一個“字段”，記錄和字段是數(shù)據(jù)庫中最基本的術(shù)語。例如，一個記錄某公司員工信息的數(shù)據(jù)庫，通常包括姓名、年齡、學歷等字段，而針對每個員工的具體數(shù)據(jù)就是一個記錄。目前常用的數(shù)據(jù)庫管理系統(tǒng)有以下幾種。Access：適合創(chuàng)建中小型信息管理系統(tǒng)，由微軟公司開發(fā)，是辦公軟件 Microsoft Office 的一個組件。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)用表單和表單對象掌握表單和表單對象的插入方法掌握利用表單制作網(wǎng)頁的方法一、認識表單表單多用于填寫用戶信息。例如，用戶在網(wǎng)頁上進行注冊、登錄、留言等操作時，都是通過表單向網(wǎng)站數(shù)據(jù)庫提交或讀取數(shù)據(jù)的。如圖所示為網(wǎng)易免費郵箱注冊頁面，當用戶填寫完信息，單擊“同意協(xié)議并注冊”按鈕后，所填信息將提交到網(wǎng)站數(shù)據(jù)庫中。 網(wǎng)易免費郵箱注冊頁面嚴格來說，一個完整的表單設(shè)計應(yīng)該分為

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