Dreamweaver-CC網(wǎng)頁設計與應用整本書課件完整版電子教案全套課件最全教學教程ppt(最新)

1、本章簡介： 本章主要講解Dreamweaver的基礎知識和基本操作。通過這些內(nèi)容的學習，讀者可以認識和了解工作界面的構成，學習網(wǎng)站框架的創(chuàng)建及站點的管理方法，為以后的網(wǎng)站設計和制作打下一個堅實的基礎。第1章初識Dreamweaver CC 2019了解工作界面的構成掌握創(chuàng)建網(wǎng)站框架的方法和流程掌握站點的管理方法 課堂學習目標1.1 工作界面 Dreamweaver CC 2019的工作區(qū)將多個文檔集中到一個窗口中，不僅降低了系統(tǒng)資源的占用，還可以更加方便地操作文檔。Dreamweaver CC 2019的工作窗口由5部分組成，分別是“插入”面板、“文檔”工具欄、“文檔”窗口、面板組和“屬性”面

2、板。Dreamweaver的操作環(huán)境簡潔明快，可大大提高設計效率。 1.1.1 開始屏幕啟動Dreamweaver CC 2019后，首先看到的畫面是開始頁面，供用戶選擇新建文件的類型，或打開已有的文檔等。選擇“編輯 首選項”命令，彈出“首選項”對話框，取消選擇“顯示開始屏幕”復選框，單擊“應用”按鈕完成設置，單擊“關閉”按鈕關閉對話框。Dreamweaver CC 2019將不再顯示開始屏幕。 開始頁面 “首選項”對話框1.1.2 不同風格的界面 選擇 “窗口 工作區(qū)布局”命令，彈出其子命令菜單，選擇“標準”或“開發(fā)人員”命令。選擇其中一種界面風格，頁面會發(fā)生相應的改變?！肮ぷ鞑季帧泵?.

3、1.3 多文檔的編輯界面 Dreamweaver CC 2019提供了多文檔的編輯界面，將多個文檔整合在一起，方便用戶在各個文檔之間切換。用戶可以單擊文檔編輯窗口上方的選項卡，切換到相應的文檔。通過多文檔的編輯界面，用戶可以同時編輯多個文檔。多文檔的編輯界面 1.1.4 “插入”面板 “插入”面板包括“HTML”“表單”“模板”“Bootstrap組件”“jQuery Mobile”“jQuery UI”和“收藏夾”7個選項卡，將不同功能的按鈕分門別類地放在不同的選項卡中。在Dreamweaver CC 2019中，“插入”面板可用菜單和選項卡兩種方式顯示。如果需要菜單樣式，用戶可用鼠標右鍵單

4、擊“插入”面板的選項卡，在彈出的快捷菜單中選擇“顯示為菜單”命令?！安迦搿泵姘?1.2 創(chuàng)建網(wǎng)站框架 站點管理器定義新站點創(chuàng)建文件夾創(chuàng)建和保存網(wǎng)頁 1.2.1 站點管理器 站點管理器的主要功能包括新建站點、編輯站點、復制站點、刪除站點及導入或?qū)С稣军c。若要管理站點，必須打開“管理站點”對話框。在Dreamweaver CC 2019中，站點通常包含兩部分，即本地站點和遠程站點。本地站點是本地計算機上的一組文件，遠程站點是遠程 Web 服務器上的一個位置。用戶將本地站點中的文件發(fā)布到網(wǎng)絡上的遠程站點，使公眾可以訪問它們。在Dreamweaver CC 2019中創(chuàng)建 Web 站點，通常先在本地磁

5、盤上創(chuàng)建本地站點，然后創(chuàng)建遠程站點，再將這些網(wǎng)頁的副本上傳到一個遠程 Web 服務器上，使公眾可以訪問它們。本節(jié)只介紹如何創(chuàng)建本地站點（1）選擇“站點 管理站點”命令，彈出“管理站點”對話框。（2）在對話框中單擊“新建站點”按鈕，彈出“站點設置對象 未命名站點2”對話框。在對話框中，設計者通過“站點”選項卡設置站點名稱；單擊“高級設置”選項，在彈出的選項卡中根據(jù)需要設置站點。 1.2.2 定義新站點 1.2.3 創(chuàng)建文件夾 站點建立好之后，要先在站點管理器中規(guī)劃站點文件夾。新建文件夾的具體操作步驟如下。（1）在“文件”面板中選擇站點。（2）通過以下兩種方法新建文件夾。 單擊“文件”面板右上方的

6、 按鈕，在彈出的菜單中選擇“文件 新建文件夾”命令。 在“文件”面板中，用鼠標右鍵單擊站點，在彈出的菜單中選擇“新建文件夾”命令。（3）輸入新文件夾的名稱。 1.2.4 創(chuàng)建和保存網(wǎng)頁 選擇“文件 新建”命令，或按Ctrl+N組合鍵，彈出“新建文檔”對話框，選擇“新建文檔”選項，在“文檔類型”選項框中選擇“HTML”選項，在“框架”選項框中選擇“無”選項卡，創(chuàng)建空白網(wǎng)頁。網(wǎng)頁設計完成后，選擇“文件 保存”命令，彈出“另存為”對話框，在“文件名”選項的文本框中輸入網(wǎng)頁的名稱，單擊“保存”按鈕，將該文檔保存在站點文件夾中。 1.3 管理站點 打開站點編輯站點復制站點刪除站點導出和導入站點1.3.1

7、 打開站點 當要修改某個網(wǎng)站的內(nèi)容時，首先需要打開該站點。打開站點就是在各站點間進行切換，具體操作步驟如下。（1）啟動Dreamweaver CC 2019。（2）選擇“窗口 文件”命令，或按F8鍵，彈出“文件”面板，在其中選擇要打開的站點名，打開站點。 1.3.2 編輯站點 當用戶需要修改站點的一些設置時，就需要編輯站點。例如，修改站點的默認圖像文件夾的路徑，其具體的操作步驟如下。（1）選擇“站點 管理站點”命令，彈出“管理站點”對話框。（2）在“管理站點”對話框中，選擇要編輯的站點，單擊“編輯當前選定的站點”按鈕 ，在彈出的對話框中，選擇“高級設置”選項，此時可根據(jù)需要進行修改，單擊“保存

8、”按鈕完成設置，回到“管理站點”對話框。（3）如果不需要修改其他站點，可單擊“完成”按鈕關閉“管理站點”對話框。 1.3.3 復制站點 復制站點可省去重復建立多個結構相同站點的操作步驟，從而提高用戶的工作效率。在“管理站點”對話框中可以復制站點，其具體操作步驟如下。（1）在“管理站點”對話框中選擇要復制的站點。（2）單擊“復制當前選定的站點”按鈕 進行復制。（3）雙擊新復制的站點，彈出“文稿 復制”對話框，在“站點名稱”選項的文本框中可以輸入新站點的名稱。1.3.4 刪除站點 刪除站點只是刪除Dreamweaver CC 2019與本地站點間的關系，而本地站點包含的文件和文件夾仍然保存在磁盤原

9、來的位置上。換句話說，刪除站點后，雖然站點文件夾保存在計算機中，但在Dreamweaver CC 2019中已經(jīng)不存在此站點了。例如，在按下列步驟刪除站點后，在“管理站點”對話框中，就不存在該站點的名稱了。（1）在“管理站點”對話框中選擇要刪除的站點。（2）單擊“刪除當前選定的站點”按鈕 即可刪除選擇的站點。1.3.5 導出和導入站點1導出站點（1）選擇“站點 管理站點”命令，彈出“管理站點”對話框。在對話框中，選擇要導出的站點，單擊“導出當前選定的站點”按鈕 ，彈出“導出站點”對話框。（2）在該對話框中瀏覽并選擇保存該站點的路徑，單擊“保存”按鈕，將該站點保存為擴展名為“ste”的文件。（3

10、）單擊“完成”按鈕，關閉“管理站點”對話框，完成導出站點的設置。 2導入站點導入站點的具體操作步驟如下。（1）選擇“站點 管理站點”命令，彈出“管理站點”對話框。（2）在對話框中，單擊“導入站點”按鈕，彈出“導入站點”對話框，瀏覽并選定要導入的站點，單擊“打開”按鈕，站點被導入。 （3）單擊“完成”按鈕，關閉“管理站點”對話框，完成導入站點的設置。本章簡介： 文本是網(wǎng)頁設計中最基本的元素。本章主要講解文本的輸入和編輯、水平線與網(wǎng)格的設置。通過這些內(nèi)容的學習，讀者可以充分利用文本工具和命令在網(wǎng)頁中輸入和編輯文本內(nèi)容，設置水平線與網(wǎng)格，運用豐富的字體和多樣的編排手段，表現(xiàn)出網(wǎng)頁的內(nèi)容。第2章文本掌

11、握輸入和編輯文本的方法掌握設置頁邊距和插入換行符的方法掌握水平線的設置方法掌握顯示和隱藏網(wǎng)格方法課堂學習目標2.1 編輯文本格式 輸入文本設置文本屬性輸入連續(xù)空格設置顯示或隱藏不可見元素設置頁邊距插入換行符課堂案例青山別墅網(wǎng)頁2.1.1 輸入文本 應用Dreamweaver CC 2019編輯網(wǎng)頁時，在文檔窗口中光標為默認顯示狀態(tài)。要添加文本，首先應將光標移動到文檔窗口中的編輯區(qū)域，然后直接輸入文本，就像在其他文本編輯器中一樣。打開一個文檔，在文檔中單擊鼠標左鍵，將光標置于其中，然后在光標后面輸入文本即可。2.1.2 設置文本屬性 利用文本屬性可以方便地修改選中文本的字體、字號、樣式、對齊方式

12、等，以獲得預期的效果。選擇“窗口 屬性”命令，或按Ctrl+F3組合鍵，彈出“屬性”面板，在HTML和CSS屬性面板中都可以設置文本的屬性。 “屬性”面板 2.1.3 輸入連續(xù)空格 在默認狀態(tài)下，Dreamweaver CC 2019只允許網(wǎng)站設計者輸入一個空格，要輸入連續(xù)多個空格則需要進行設置或通過特定操作才能實現(xiàn)。具體操作步驟如下。（1）選擇“編輯 首選項”命令，彈出“首選項”對話框。（2）在“首選項”對話框左側的“分類”列表中選擇“常規(guī)”選項，在右側的“編輯選項”選項組中選擇“允許多個連續(xù)的空格”復選框，單擊“應用”按鈕完成設置，單擊“關閉”按鈕關閉對話框。此時，用戶可連續(xù)按Space鍵

13、在文檔編輯區(qū)內(nèi)輸入多個空格。2.1.4 設置顯示或隱藏不可見元素顯示或隱藏某些不可見元素的具體操作步驟如下。（1）選擇“編輯 首選項”命令，彈出“首選項”對話框。（2）在“首選項”對話框左側的“分類”列表中選擇“不可見元素”選項，根據(jù)需要選擇或取消選擇右側的多個復選框，以實現(xiàn)不可見元素的顯示或隱藏，單擊“應用”按鈕完成設置，單擊“關閉”按鈕關閉對話框。最常用的不可見元素是換行符、腳本、命名錨記、AP元素的錨點和表單隱藏區(qū)域，一般將它們設為可見。2.1.5 設置頁邊距 按照文章的書寫規(guī)則，正文與頁面之間的四周需要留有一定的距離，這個距離叫頁邊距。網(wǎng)頁設計也如此，在默認狀態(tài)下，HTML文檔的上、下

14、、左、右邊距不為零。修改頁邊距的具體操作步驟如下。（1）選擇“文件 頁面屬性”命令，彈出“頁面屬性”對話框。（2）根據(jù)需要在對話框的“左邊距”“右邊距”“上邊距”“下邊距”選項的數(shù)值框中輸入相應的數(shù)值。2.1.6 插入換行符 為段落插入換行符有以下幾種方法。 選擇“插入”面板中的“HTML”選項卡，單擊“字符：換行符”展開式工具按鈕 。 按Shift+Enter組合鍵。 選擇“插入 HTML 字符 換行符”命令。 在文檔中插入換行符的操作步驟如下。 （1）打開一個網(wǎng)頁文件，輸入一段文字。 （2）按Shift+Enter組合鍵，將光標切換到另一個段落。按Shift+Ctrl+Space組合鍵，輸

15、入空格，輸入文字。 （3）使用相同的方法，輸入換行符和文字。2.1.7 課堂案例青山別墅網(wǎng)頁使用“頁面屬性”命令，設置頁面外觀、網(wǎng)頁標題效果；使用“首選項”命令，設置允許多個連續(xù)空格。效果圖2.2 水平線與網(wǎng)格 水平線顯示和隱藏網(wǎng)格課堂案例休閑度假村網(wǎng)頁2.2.1 水平線 1. 創(chuàng)建水平線創(chuàng)建水平線的方法有以下兩種。 選擇“插入”面板中的“HTML”選項卡，單擊“水平線”工具按鈕 。 選擇“插入 HTML 水平線”命令。2. 修改水平線在文檔窗口中，選中水平線，選擇“窗口 屬性”命令，彈出“屬性”面板，可以根據(jù)需要對屬性進行修改。2.2.2 顯示和隱藏網(wǎng)格 使用網(wǎng)格可以更加方便地定位網(wǎng)頁元素，

16、在網(wǎng)頁布局時網(wǎng)格也具有至關重要的作用。1顯示和隱藏網(wǎng)格選擇“查看 設計視圖選項 網(wǎng)格設置 顯示網(wǎng)格”命令，或按Ctrl+Alt+G組合鍵，此時處于顯示網(wǎng)格的狀態(tài)，網(wǎng)格在“設計”視圖中可見。2設置網(wǎng)頁元素與網(wǎng)格對齊選擇“查看 設計視圖選項 網(wǎng)格設置 靠齊到網(wǎng)格”命令，或按Ctrl+Alt+Shift+G組合鍵，此時，無論網(wǎng)格是否可見，都可以讓網(wǎng)頁元素自動與網(wǎng)格對齊。3修改網(wǎng)格的疏密選擇“查看 設計視圖選項 網(wǎng)格設置 網(wǎng)格設置”命令，彈出“網(wǎng)格設置”對話框。在“間隔”選項的文本框中輸入一個數(shù)字，并從下拉列表中選擇間隔的單位，單擊“確定”按鈕關閉對話框，完成對網(wǎng)格線疏密的修改。4修改網(wǎng)格線的形狀和顏

17、色選擇“查看 設計視圖選項 網(wǎng)格設置 網(wǎng)格設置”命令，彈出“網(wǎng)格設置”對話框。在對話框中，先單擊“顏色”按鈕并從顏色拾取器中選擇一種顏色，或者在文本框中輸入一個十六進制的數(shù)字，然后單擊“顯示”選項組中的“線”或“點”單選項，最后單擊“確定”按鈕，完成網(wǎng)格線顏色和線型的修改。2.2.3 課堂案例休閑度假村網(wǎng)頁使用“水平線”命令，在文檔中插入水平線；使用“屬性”面板，取消水平線的陰影；使用代碼改變水平線的顏色。效果圖課堂練習有機果蔬網(wǎng)頁使用“頁面屬性”命令，設置頁面外觀、網(wǎng)頁標題效果；使用“首選項”命令，設置允許多個連續(xù)空格；使用“CSS設計器”面板，設置文字的字體、大小和行距。 效果圖課后習題國

18、畫展覽館網(wǎng)頁使用“屬性”面板，設置文字大小、顏色及字體。 效果圖本章簡介： 圖像和多媒體是網(wǎng)頁中的重要元素，在網(wǎng)頁中的應用越來越廣泛。本章主要講解圖像和多媒體在網(wǎng)頁中的應用方法和技巧，通過這些內(nèi)容的學習，學生可以使設計制作的網(wǎng)頁更加美觀形象、生動豐富，更可以增加網(wǎng)頁的動感，使網(wǎng)頁更具有吸引力。第3章圖像和多媒體掌握在網(wǎng)頁中插入和編輯圖像的方法掌握多媒體在網(wǎng)頁中的應用方法和技巧課堂學習目標3.1 圖像的基本操作 網(wǎng)頁中的圖像格式在網(wǎng)頁中插入圖像設置圖像屬性給圖片添加文字說明跟蹤圖像課堂案例蛋糕店網(wǎng)頁3.1.1 網(wǎng)頁中的圖像格式網(wǎng)頁中通常使用的圖像文件有JPEG、GIF、PNG 三種格式，但大多數(shù)

19、瀏覽器只支持JPEG和GIF兩種圖像格式。因為要保證瀏覽者下載網(wǎng)頁的速度，網(wǎng)站設計者也常使用JPEG和GIF這兩種壓縮格式的圖像。3.1.2 在網(wǎng)頁中插入圖像要在Dreamweaver CC 2019文檔中插入的圖像必須位于當前站點文件夾內(nèi)或遠程站點文件夾內(nèi)，否則圖像不能正確顯示，所以在建立站點時，網(wǎng)站設計者常先創(chuàng)建一個名為“images”的文件夾，并將需要的圖像復制到其中。在網(wǎng)頁中插入圖像的具體操作步驟如下。（1）在文檔窗口中，將插入點放置在要插入圖像的位置。（2）通過以下幾種方法啟用“圖像”命令，彈出“選擇圖像源文件”對話框。（3）在對話框中，選擇圖像文件，單擊“確定”按鈕完成設置。3.1

20、.3 設置圖像屬性 插入圖像后，在“屬性”面板中顯示該圖像的屬性。 “屬性”面板3.1.4 給圖片添加文字說明當圖片不能在瀏覽器中正常顯示時，網(wǎng)頁中圖片的位置就變成空白區(qū)域。為了讓瀏覽者在不能正常顯示圖片時也能了解圖片的信息，常為網(wǎng)頁的圖像設置“替換”屬性，將圖片的說明文字輸入“替換”文本框中。3.1.5 跟蹤圖像在工程設計過程中，一般先在圖像處理軟件中勾畫出工程藍圖，然后在此基礎上反復修改，最終得到一幅完美的設計圖。制作網(wǎng)頁時也應采用工程設計的方法，先在圖像處理軟件中繪制網(wǎng)頁的藍圖，將其添加到網(wǎng)頁的背景中，按設計方案對號入座，等網(wǎng)頁制作完畢后，再將藍圖刪除。Dreamweaver CC 20

21、19利用“跟蹤圖像”功能來實現(xiàn)上述網(wǎng)頁設計的方式。3.1.6 課堂案例蛋糕店網(wǎng)頁使用“Image”按鈕，插入圖像；使用“CSS樣式”命令，控制圖像的水平邊距。 效果圖3.2 多媒體在網(wǎng)頁中的應用 插入Flash動畫插入FLV插入Animate作品插入HTML5 Video插入音頻插入插件課堂案例物流運輸網(wǎng)頁3.2.1 插入Flash動畫Dreamweaver CC 2019提供了使用Flash對象的功能，雖然Flash中使用的文件類型有Flash 源文件(.fla)、Flash SWF文件(.swf)、Flash 模板文件(.swt)，但Dreamweaver CC 2019只支持Flash

22、SWF(.swf)文件，因為它是 Flash (.fla) 文件的壓縮版本，已進行了優(yōu)化，便于在Web上查看。3.2.2 插入FLV在網(wǎng)頁中可以輕松添加FLV視頻，而無須使用Flash創(chuàng)作工具。但在操作之前必須有一個經(jīng)過編碼的 FLV 文件。使用Dreamweaver插入一個顯示FLV文件的SWF組件，當在瀏覽器中查看時，此組件顯示所選的FLV文件及一組播放控件。3.2.3 插入Animate作品Animate是Adobe最新出品的制作HTML5動畫的可視化工具，可以簡單理解為HTML5版本的Flash Pro。使用該軟件，可以在網(wǎng)頁中輕而易舉地插入視頻，而不需要編寫煩瑣復雜的代碼。3.2.4

23、 插入HTML5 Video在網(wǎng)頁中插入HTML5 Video的具體操作步驟如下。（1）在文檔窗口的“設計”視圖中，將插入點放置在想要插入視頻的位置。（2）通過以下幾種方法啟用“HTML5 Video”命令。 在“插入”面板的“HTML”選項卡中，單擊“HTML5 Video”按鈕 。 選擇“插入 HTML HTML5 Video”命令。 按Ctrl+Shift+Alt+V組合鍵（3）在頁面中插入一個內(nèi)部帶有影片圖標的矩形塊。選中該圖形，在“屬性”面板中，單擊“源”選項右側的“瀏覽”按鈕 ，在彈出的“選擇視頻”對話框中選擇視頻文件。單擊“確定”按鈕，完成視頻文件的選擇。（4）保存文檔，按F12

24、鍵預覽效果。3.2.5 插入音頻1插入背景音樂Html中提供了背景音樂標簽，該標簽可以為網(wǎng)頁實現(xiàn)背景音樂效果。2插入音樂插入音樂和背景音樂的效果不同，插入音樂可以在頁面中看到播放器的外觀，如播放、暫停、定位和音量等按鈕。3嵌入音樂上面我們介紹了背景音樂及插入音樂，下面我們來講解一下嵌入音樂。嵌入音樂和插入音樂相同，只不過嵌入音樂播放器的外觀要比插入音樂播放器的外觀多幾個按鈕。3.2.6 插入插件利用“插件”按鈕，可以在網(wǎng)頁中插入aiv、mpg、mov、mp4等格式的視頻文件，還可以插入音頻文件。在網(wǎng)頁中插入插件的具體操作步驟如下。（1）在文檔窗口的“設計”視圖中，將插入點放置在想要插入插件的位

25、置。（2）通過以下幾種方法彈出“插件”命令，插入插件。 在“插入”面板的“HTML”選項卡中，單擊“插件”按鈕 。 選擇“插入 HTML 插件”命令。3.2.7 課堂案例物流運輸網(wǎng)頁使用“Flash SWE”按鈕，為網(wǎng)頁文檔插入Flash動畫效果；使用“屬性”面板，設置動畫背景透明。 效果圖課堂練習咖啡館網(wǎng)頁使用“Image”按鈕，插入圖像。 效果圖課后習題五谷雜糧網(wǎng)頁使用“Flash SWF”按鈕，插入Flash動畫效果。 效果圖第4章超鏈接本章簡介： 本章主要講解超鏈接的概念和使用方法，包括文本超鏈接、圖像超鏈接、電子郵件超鏈接和鼠標經(jīng)過圖像超鏈接等內(nèi)容。通過這些內(nèi)容的學習，學生可以熟練掌

26、握網(wǎng)站鏈接的設置與使用方法，并精心編織網(wǎng)站的鏈接，為網(wǎng)站訪問者能夠盡情地遨游在網(wǎng)站之中提供必要的條件。掌握設置文本超鏈接的方法和技巧掌握設置電子郵件鏈接的方法和技巧掌握設置圖像超鏈接的方法和技巧掌握設置鼠標經(jīng)過圖像超鏈接的方法和技巧課堂學習目標4.1 文本超鏈接 創(chuàng)建文本超鏈接文本鏈接的狀態(tài)電子郵件超鏈接課堂案例創(chuàng)意設計網(wǎng)頁4.1.1 創(chuàng)建文本超鏈接 創(chuàng)建文本超鏈接的方法非常簡單，主要是在鏈接文本的“屬性”面板中指定鏈接文件。指定鏈接文件的方法有以下3種。1直接輸入要鏈接文件的路徑和文件名2使用“瀏覽文件”按鈕3使用指向文件圖標 4.1.2 文本鏈接的狀態(tài) 一個未被訪問過的鏈接文字與一個被訪問

27、過的鏈接文字在形式上是有所區(qū)別的，以提示瀏覽者鏈接文字所指示的網(wǎng)頁是否被看過。 每當瀏覽者單擊包含電子郵件超鏈接的網(wǎng)頁對象時，就會打開郵件處理工具（如微軟的Outlook Express），并且自動將收信人地址設為網(wǎng)站建設者的郵箱地址，方便瀏覽者給網(wǎng)站發(fā)送反饋信息。1利用“屬性”面板建立電子郵件超鏈接2利用“電子郵件鏈接”對話框建立電子郵件超鏈接4.1.3 電子郵件超鏈接 使用“電子郵件鏈接”按鈕，制作電子郵件鏈接效果；使用“屬性”面板，為文字制作下載鏈接效果；使用“頁面屬性”命令，改變鏈接的顯示效果。 4.1.4 課堂案例創(chuàng)意設計網(wǎng)頁效果圖 圖像超鏈接 鼠標經(jīng)過圖像超鏈接 課堂案例獅立地板網(wǎng)

28、頁4.2 圖像超鏈接 建立圖像超鏈接的操作步驟如下。（1）在文檔窗口中選擇圖像。（2）在“屬性”面板中，單擊“鏈接”選項右側的“瀏覽文件”按鈕 ，為圖像添加文檔相對路徑的鏈接。（3）在“替換”選項中可輸入替換文字。設置替換文字后，當圖片不能下載時，會在圖片的位置上顯示替換文字；當瀏覽者將鼠標指針指向圖像時也會顯示替換文字。（4）按F12鍵預覽網(wǎng)頁的效果。4.2.1 圖像超鏈接 4.2.2 鼠標經(jīng)過圖像超鏈接 “鼠標經(jīng)過圖像”是一種常用的互動技術，當鼠標指針經(jīng)過圖像時，圖像會隨之發(fā)生變化。一般來說，“鼠標經(jīng)過圖像”效果由兩張大小相等的圖像組成，一張稱為主圖像，另一張稱為次圖像。主圖像是首次載入網(wǎng)

29、頁時顯示的圖像，次圖像是當鼠標指針經(jīng)過時更換的另一張圖像?！笆髽私?jīng)過圖像”經(jīng)常應用于網(wǎng)頁中的按鈕上。4.2.3 課堂案例獅立地板網(wǎng)頁使用“鼠標經(jīng)過圖像”按鈕，制作導航條效果。效果圖使用“熱點”按鈕，為圖像添加熱點圖像；使用“屬性”面板，為熱點創(chuàng)建超鏈接。 課堂練習建筑規(guī)劃網(wǎng)頁效果圖使用“電子郵件鏈接”命令，制作電子郵件鏈接效果；使用“瀏覽文件”鏈接按鈕，為文字制作下載文件鏈接效果。 課后習題摩托車改裝網(wǎng)頁效果圖第5章表格本章簡介： 在制作網(wǎng)頁時，表格的作用不僅是列舉數(shù)據(jù)，更多地是用在網(wǎng)頁定位上。很多網(wǎng)頁都是以表格布局的，這是因為表格在內(nèi)容的組織、頁面中文本和圖形的位置控制方面都有很強的功能。本

30、章主要講解表格的操作方法和制作技巧。通過這些內(nèi)容的學習，學生可以熟練地掌握數(shù)據(jù)表格的編輯方法及如何應用表格對頁面進行合理的布局。掌握插入表格的方法掌握設置表格的方法和技巧掌握在表格內(nèi)添加元素的方法掌握網(wǎng)頁中數(shù)據(jù)表格的編輯方法 課堂學習目標5.1 表格的簡單操作 插入表格設置表格屬性在表格內(nèi)添加元素課堂案例租車網(wǎng)頁5.1.1 插入表格 要將相關數(shù)據(jù)有序地組織在一起，必須先插入表格，然后才能有效地組織數(shù)據(jù)。插入表格的具體操作步驟如下。（1）在“文檔”窗口中，將插入點放到合適的位置。（2）通過以下幾種方法彈出“Table”對話框。選擇“插入 Table”命令。單擊“插入”面板“HTML”選項卡中的“

31、Table”按鈕 。按Ctrl+Alt+T組合鍵。（3）根據(jù)需要選擇新建表格的大小、行列數(shù)值等，單擊“確定”按鈕完成新建表格的設置。5.1.2 設置表格屬性 插入表格后，通過選擇不同的表格對象，可以在“屬性”面板中看到它們的各項參數(shù)，修改這些參數(shù)可以得到不同風格的表格。1表格的屬性 2單元格和行或列的屬性 表格“屬性”面板 單元格和行或列的“屬性”面板5.1.3 在表格內(nèi)添加元素 建立表格后，可以在表格中添加各種網(wǎng)頁元素，如文本、圖像、表格等。1輸入文字在單元格中輸入文字，有以下幾種方法。 單擊任意一個單元格并直接輸入文本，此時單元格會隨文本的輸入自動擴展。 粘貼從其他文字編輯軟件中復制的帶有

32、格式的文本。 2插入其他網(wǎng)頁元素（1）嵌套表格。將插入點放到一個單元格內(nèi)并插入表格，即可實現(xiàn)嵌套表格。（2）插入圖像。在表格中插入圖像有以下幾種方法。 將插入點放到一個單元格中，單擊“插入”面板“HTML”選項卡中的“Image”按鈕 。 將插入點放到一個單元格中，選擇“插入 Image”命令。 將插入點放到一個單元格中，將“插入”面板“HTML”選項卡中的“Image”按鈕 拖曳到單元格內(nèi)。從資源管理器、站點資源管理器或桌面上直接將圖像文件拖曳到一個需要插入圖像的單元格內(nèi)。5.1.4 課堂案例租車網(wǎng)頁使用“Table”按鈕，插入表格進行頁面布局；使用“Image”按鈕，插入圖像。 效果圖5.

33、2 網(wǎng)頁中的數(shù)據(jù)表格 導入和導出表格的數(shù)據(jù)排序表格課堂案例典藏博物館網(wǎng)頁5.2.1 導入和導出表格的數(shù)據(jù) 1將網(wǎng)頁內(nèi)的表格數(shù)據(jù)導出2在其他網(wǎng)頁中導入表格數(shù)據(jù) “導出表格”對話框 “導入表格式數(shù)據(jù)”對話框 日常工作中，常常需要對無序的表格內(nèi)容進行排序，以便瀏覽者可以快速找到所需的數(shù)據(jù)。表格排序功能可以為網(wǎng)站設計者解決這一難題。將插入點放到要排序的表格中，然后選擇“編輯 表格 排序表格”命令，彈出“排序表格”對話框。根據(jù)需要設置相應的選項，單擊“應用”或“確定”按鈕完成設置?！芭判虮砀瘛睂υ捒?.2.2 排序表格5.2.3 課堂案例典藏博物館網(wǎng)頁使用“表格式數(shù)據(jù)”命令，導入外部表格數(shù)據(jù)；使用“屬性

34、”面板改變表格的寬度、高度和背景顏色。效果圖課堂練習火鍋餐廳網(wǎng)頁 使用“Table”按鈕，插入表格效果；使用“Image”按鈕，插入圖像；使用“CSS設計器”面板，為單元格添加背景圖像及控制文字大小和字體。 效果圖課后練習OA辦公系統(tǒng)網(wǎng)頁使用“導入表格式數(shù)據(jù)”命令，導入外部表格數(shù)據(jù)；使用“屬性”面板，改變表格的高度和對齊方式；使用“CSS設計器”面板，改變文字的顏色。 效果圖第6章ASP本章簡介： 本章主要介紹ASP動態(tài)網(wǎng)頁基礎和內(nèi)置對象，包括ASP服務器的安裝、ASP語法基礎、數(shù)組的創(chuàng)建與應用及流程控制語句等。通過對本章的學習，讀者可以掌握ASP的基本操作。掌握ASP服務器的運行環(huán)境及安裝I

35、IS的方法掌握ASP語法基礎及數(shù)組的創(chuàng)建與應用方法掌握VBScript選擇和循環(huán)語句掌握Request請求和響應對象的方法掌握Server服務對象課堂學習目標6.1 ASP動態(tài)網(wǎng)頁基礎ASP服務器的安裝ASP語法基礎數(shù)組的創(chuàng)建與應用流程控制語句課堂案例節(jié)能環(huán)保網(wǎng)頁6.1.1 ASP服務器的安裝ASP是一種服務器端腳本編寫環(huán)境，其主要功能是把腳本語言、HTML、組件和Web數(shù)據(jù)庫訪問功能有機地結合在一起，形成一個能在服務器端運行的應用程序，該應用程序可根據(jù)來自瀏覽器端的請求生成相應的HTML文檔并將其回送給瀏覽器。使用ASP可以創(chuàng)建以HTML網(wǎng)頁作為用戶界面，并能夠?qū)?shù)據(jù)庫進行交互的Web應用程

36、序。1ASP的運行環(huán)境2安裝IIS6.1.2 ASP語法基礎1ASP文件結構ASP文件是以“asp”為擴展名的。在ASP文件中，可以包含以下內(nèi)容。（1）HTML標簽（2）腳本命令（3）ASP代碼（4）文本2聲明腳本語言在編寫ASP程序時，可以聲明ASP文件所使用的腳本語言，以通知Web服務器文件是使用何種腳本語言來編寫程序的。3ASP與HTML在ASP網(wǎng)頁中，ASP程序包含在“”之間，并在瀏覽器打開網(wǎng)頁時產(chǎn)生動態(tài)內(nèi)容。它與HTML標簽兩者互相協(xié)作，構成動態(tài)網(wǎng)頁。ASP程序可以出現(xiàn)在HTML文件中的任意位置，同時在ASP程序中也可以嵌入HTML標簽。6.1.3 數(shù)組的創(chuàng)建與應用數(shù)組是有序數(shù)據(jù)的集

37、合。數(shù)組中的每一個元素都屬于同一個數(shù)據(jù)類型，用一個統(tǒng)一的數(shù)組名和下標可以唯一地確定數(shù)組中的元素，下標放在緊跟在數(shù)組名之后的括號中。有一個下標的數(shù)組稱為一維數(shù)組，有兩個下標的數(shù)組稱為二維數(shù)組，以此類推。數(shù)組的最大維數(shù)為60。1創(chuàng)建數(shù)組在VBScript中，數(shù)組有兩種類型：固定數(shù)組和動態(tài)數(shù)組。2應用數(shù)組函數(shù)數(shù)組函數(shù)用于數(shù)組的操作。數(shù)組函數(shù)主要包括LBound函數(shù)、UBound函數(shù)、Split函數(shù)和Erase函數(shù)。6.1.4 流程控制語句在VBScript語言中，有順序結構、選擇結構和循環(huán)結構3種基本程序控制結構。順序結構是程序設計中最基本的結構，在程序運行時，編譯器總是按照先后順序執(zhí)行程序中的所有

38、命令。通過選擇結構和循環(huán)結構可以改變代碼的執(zhí)行順序。本節(jié)介紹VBScript選擇語句和循環(huán)語句。1運用VBScript選擇語句2運用VBScript循環(huán)語句6.1.5 課堂案例節(jié)能環(huán)保網(wǎng)頁使用“拆分”按鈕和“設計”按鈕切換視圖窗口，使用函數(shù)“Now()”顯示當前系統(tǒng)日期和時間。效果圖6.2 ASP內(nèi)置對象Request請求對象Response響應對象Session會話對象Application應用程序?qū)ο骃erver服務對象ObjectContext事務處理對象課堂案例網(wǎng)球俱樂部網(wǎng)頁6.2.1 Request請求對象在客戶端/服務器結構中，當客戶端Web頁面向網(wǎng)站服務器傳遞信息時，ASP通過R

39、equest對象能夠獲取客戶提交的全部信息。信息包括客戶端用戶的HTTP變量在網(wǎng)站服務器端存放的客戶端瀏覽器的Cookies數(shù)據(jù)、附于URL之后的字符串信息、頁面中表單傳送的數(shù)據(jù)及客戶端的認證等。1獲取表單數(shù)據(jù)2檢索查詢字符串3獲取服務器端環(huán)境變量4以二進制碼方式讀取數(shù)據(jù)6.2.2 Response響應對象Response對象用來訪問所創(chuàng)建并返回客戶端的響應?？梢允褂肦esponse對象控制發(fā)送給用戶的信息，如直接發(fā)送信息給瀏覽器、重定向瀏覽器到另一個URL或設置Cookies的值。Response對象提供了標識服務器和性能的HTTP變量、發(fā)送給瀏覽器的信息內(nèi)容和任何將在Cookies中存儲的

40、信息。Response對象只有一個集合Cookies，該集合用于設置希望放置在客戶系統(tǒng)上的Cookies的值。Response對象的Cookies集合用于當前響應中，將Cookies值發(fā)送到客戶端，該集合的訪問方式為只寫。1將信息從服務器端直接發(fā)送給客戶端2利用緩沖輸出數(shù)據(jù)3重定向網(wǎng)頁4向客戶端輸出二進制數(shù)據(jù)5使用Cookies在客戶端保存信息6.2.3 Session會話對象用戶可以使用 Session 對象存儲特定會話所需的信息。這樣，當用戶在應用程序的 Web 頁之間跳轉(zhuǎn)時，存儲在 Session 對象中的變量將不會丟失，而是在整個用戶會話中一直存在下去。當用戶請求來自應用程序的 Web

41、 頁時，如果該用戶還沒有會話，則 Web 服務器將自動創(chuàng)建一個 Session 對象。當會話過期或被放棄后，服務器將終止該會話。1返回當前會話的唯一標識符2控制會話的結束時間3應用Abandon方法清除Session變量6.2.4 Application應用程序?qū)ο驛SP程序是在Web服務器上運行的，在Web站點中創(chuàng)建一個基于ASP的應用程序之后，可以通過Application對象在ASP應用程序的所有用戶之間共享信息。也就是說，Application對象中包含的數(shù)據(jù)可以在整個Web站點中被所有用戶使用，并且可以在網(wǎng)站運行期間持久保存數(shù)據(jù)。用Application對象可以實現(xiàn)統(tǒng)計網(wǎng)站的在線人數(shù)

42、、創(chuàng)建多用戶游戲及創(chuàng)建多用戶聊天室等功能。1鎖定和解鎖Application對象2制作網(wǎng)站計數(shù)器6.2.5 Server服務對象Server對象提供對服務器上的方法和屬性的訪問，大多數(shù)方法和屬性是作為實用程序的功能提供的。1設置ASP腳本的執(zhí)行時間2創(chuàng)建服務器組件實例3獲取文件的真實物理路徑4輸出HTML源代碼6.2.6 ObjectContext事務處理對象ObjectContext對象是一個以組件為主的事務處理系統(tǒng)，可以保證事務的成功完成。使用ObjectContext對象，允許程序在網(wǎng)頁中直接配合Microsoft Transaction Server（MTS）使用，從而可以管理或開發(fā)高

43、效率的Web服務器應用程序。事務是一個操作序列，這些序列可以視為一個整體。如果其中的某一個步驟沒有完成，所有與該操作相關的內(nèi)容都應該取消。6.2.7 課堂案例網(wǎng)球俱樂部網(wǎng)頁使用“代碼顯示器”窗口輸出代碼，使用Request對象獲取表單數(shù)據(jù)。 效果圖課堂案例挖掘機網(wǎng)頁使用“Form集合”命令，獲取表單數(shù)據(jù)。 效果圖課后習題建筑信息咨詢網(wǎng)頁使用“Response”對象的Write方法，向瀏覽器端輸出標記顯示日期。 效果圖第7章CSS樣式本章簡介： 通過CSS的樣式定義，可以將網(wǎng)頁制作得更加絢麗多彩。本章主要對CSS的技術應用進行講解。通過對這些內(nèi)容的學習，可以使設計者輕松、有效地對頁面的整體布局、

44、顏色、字體、鏈接、背景及同一頁面的不同部分、不同頁面的外觀和格式等效果進行精確控制。了解CSS樣式類型的應用掌握CSS屬性的應用方法和技巧熟練運用CSS過濾器課堂學習目標7.1 CSS樣式概述“CSS設計器”面板CSS樣式的類型7.1.1 “CSS設計器”面板使用“CSS設計器”面板可以創(chuàng)建、編輯和刪除CSS樣式，并且可以將外部樣式表附加到文檔中。1打開“CSS設計器”面板打開“CSS設計器”面板有以下兩種方法。 選擇“窗口 CSS設計器”命令。 按Shift+F11組合鍵。2樣式表的功能層疊樣式表是HTML格式的代碼，瀏覽器處理起來速度比較快。另外，Deamweaver CC 2019提供了

45、功能復雜、使用方便的層疊樣式表，方便網(wǎng)站設計師制作個性化網(wǎng)頁。7.1.2 CSS樣式的類型CSS樣式可分為類選擇器、標簽選擇器、ID選擇器、內(nèi)聯(lián)樣式、復合選擇器等幾種。1類選擇器類選擇器可以將樣式屬性應用于頁面上所有的HTML元素。類選擇器的名稱必須以“.”為前綴進行標識，后面加上類名，屬性和值必須符合CSS規(guī)范。2標簽選擇器標簽選擇器可以對頁面中的同一標簽進行聲明，如對p標簽進行聲明，那么頁面中所有的標簽將會使用相同的樣式。3ID選擇器ID選擇器與類選擇器的使用方法基本相同，唯一不同之處是ID選擇器只能在HTML頁面中使用一次，針對性比較強。ID選擇器以“#”為前綴進行標識，后面加上ID名。

46、4內(nèi)聯(lián)樣式內(nèi)聯(lián)樣式是直接以style屬性將CSS代碼寫入HTML標簽。5復合選擇器復合選擇器可以將風格完全相同或部分相同的選擇器同時聲明。7.2 CSS樣式的創(chuàng)建與應用創(chuàng)建CSS樣式應用CSS樣式創(chuàng)建和附加外部樣式7.2.1 創(chuàng)建CSS樣式建立CSS樣式的操作步驟如下。（1）新建或打開一個文檔。（2）選擇“窗口 CSS設計器”命令，彈出“CSS設計器”面板。（3）在“CSS設計器”面板中單擊“源”選項組中的“添加CSS源”按鈕 ，在彈出的菜單中選擇“在頁面中定義”選項，以確定CSS樣式的保存位置，選擇該選項后在“源”選項組中將出現(xiàn)“”標簽。（4）單擊“選擇器”選項組中的“添加選擇器”按鈕 ，在

47、“選擇器”選項組中出現(xiàn)一個文本框。根據(jù)要定義的樣式的類型輸入名稱，如定義類選擇器，首先要輸入“.” ，再輸入名稱，按Enter鍵確認。（5）在“屬性”選項組中單擊“邊框”按鈕 ，切換到有關邊框的CSS屬性，根據(jù)需要添加屬性。7.2.2 應用CSS樣式創(chuàng)建自定義樣式后，還要為不同的網(wǎng)頁元素應用不同的樣式，其具體操作步驟如下。（1）在文檔窗口中選擇網(wǎng)頁元素。（2）根據(jù)選擇器類型使用不同的應用方法。7.2.3 創(chuàng)建和附加外部樣式如果不同網(wǎng)頁的不同網(wǎng)頁元素需要同一樣式，則可通過附加外部樣式來實現(xiàn)。首先創(chuàng)建一個外部樣式，然后在不同網(wǎng)頁的不同HTML元素中附加定義好的外部樣式。1創(chuàng)建外部樣式2附加外部樣式

48、7.3 編輯CSS樣式網(wǎng)站設計者有時需要修改應用于文檔的內(nèi)部樣式和外部樣式，如果修改內(nèi)部樣式，則會自動重新設置受它控制的所有HTML對象的格式；如果修改外部樣式文件，則會自動重新設置與它鏈接的所有HTML文檔。7.4 CSS的屬性布局屬性文本屬性邊框?qū)傩员尘皩傩哉n堂案例山地車網(wǎng)頁7.4.1 布局屬性“布局”選項組用于控制網(wǎng)頁中塊元素的大小、邊距、填充和位置屬性等。7.4.2 文本屬性“文本”選項組用于控制網(wǎng)頁中文字的字體、字號、顏色、行距、首行縮進、對齊方式、文本陰影和列表屬性等。 7.4.3 邊框?qū)傩浴斑吙颉边x項組用于控制塊元素邊框的粗細、樣式、顏色及圓角。7.4.4 背景屬性“背景”選項組

49、用于在網(wǎng)頁元素后加入背景圖像或背景顏色。7.4.5 課堂案例山地車網(wǎng)頁使用“表格”按鈕，插入表格效果；使用“CSS樣式”命令，設置翻轉(zhuǎn)效果的鏈接。7.5 過渡效果“CSS過渡效果”面板創(chuàng)建CSS過渡效果課堂案例足球運動網(wǎng)頁7.5.1 “CSS過渡效果”面板在“CSS過渡效果”面板中可以新建、刪除和編輯CSS過渡效果。7.5.2 創(chuàng)建CSS過渡效果在創(chuàng)建CSS過渡效果時，需要為元素指定過渡效果類。如果在創(chuàng)建效果類之前已選擇元素，則過渡效果類會自動應用于選定的元素。建立CSS過渡效果的操作步驟如下。（1）新建或打開一個文檔。（2）選擇“窗口 CSS過渡效果”命令，彈出“CSS過渡效果”面板。（3）

50、單擊“新建過渡效果”按鈕 ，彈出“新建過渡效果”對話框。（4）設置好選項后，單擊“創(chuàng)建過渡效果”按鈕，完成過渡效果的創(chuàng)建，“CSS過渡效果”面板中自動生成創(chuàng)建的過渡效果。（5）在Dreamweaver CC 2019中看不到過渡的真實效果，只有在瀏覽器中才能看到真實效果。保存文檔，按F12鍵預覽效果。 7.5.3 課堂案例足球運動網(wǎng)頁使用“CSS設計器”面板，設置文字的字體、顏色；使用“CSS過渡效果”面板，設置文字的變色效果。效果圖課堂案例葡萄酒網(wǎng)頁使用“CSS設計器”面板，改變文字的大小和行距。 效果圖課后習題布藝沙發(fā)網(wǎng)頁 使用“CSS過渡效果”面板，制作超鏈接變化效果。 效果圖第8章模板

51、和庫本章簡介： 模板的功能就是把網(wǎng)頁布局和內(nèi)容分離，在布局設計好之后將其保存為模板。這樣，相同的布局頁面可以通過模板來創(chuàng)建，因此能夠極大地提高工作效率。本章主要講解模板和庫的創(chuàng)建方法和應用技巧。通過這些內(nèi)容的學習，學生可以使網(wǎng)站的更新、維護工作變得更加輕松。掌握創(chuàng)建和編輯模板的方法掌握管理模板的方法掌握創(chuàng)建庫的方法掌握向頁面添加庫項目的方法課堂學習目標8.1 模板 創(chuàng)建空模板創(chuàng)建可編輯區(qū)域管理模板課堂案例慕斯蛋糕店網(wǎng)頁8.1.1 創(chuàng)建空模板 創(chuàng)建空白模板有以下幾種方法。 在打開的文檔窗口中單擊“插入”面板“模板”選項卡中的“創(chuàng)建模板”按鈕 ，將當前文檔轉(zhuǎn)換為模板文檔。 在“資源”面板中單擊“模

52、板”按鈕 ，此時列表為模板列表。然后單擊下方的“新建模板”按鈕 ，創(chuàng)建空模板，此時新的模板添加到“資源”面板的“模板”列表中，為該模板輸入名稱。 在“資源”面板的“模板”列表中單擊鼠標右鍵，在彈出的菜單中選擇“新建模板”命令。8.1.2 創(chuàng)建可編輯區(qū)域 （1）打開文件。（2）將光標放置在要插入可編輯區(qū)域的位置，在“插入”面板的“模板”選項卡中，單擊“可編輯區(qū)域”按鈕 ，彈出“新建可編輯區(qū)域”對話框，在“名稱”文本框中輸入可編輯區(qū)域的名稱。（3）單擊“確定”按鈕，在網(wǎng)頁中即可插入可編輯區(qū)域。（4）選擇“文件 另存為模板”命令，彈出“另存模板”對話框，在對話框中的“另存為”文本框中輸入模板的名稱，

53、在“站點”右側的下拉列表中選擇保存的站點。（5）單擊“保存”按鈕，即可將該文件保存為模板。 8.1.3 管理模板 1刪除模板若要刪除模板文件，具體操作步驟如下。（1）在“資源”面板中選擇面板左側的“模板”按鈕 。（2）單擊模板的名稱以選擇該模板。（3）單擊面板底部的“刪除”按鈕 ，然后確認要刪除該模板。2修改模板文件當更改模板時，Dreamweaver CC 2019將提示更新基于該模板的文檔，具體操作步驟如下。（1）在“資源”面板中，選擇面板左側的“模板”按鈕 。（2）在可用模板列表中，執(zhí)行下列操作之一。 單擊要編輯的模板名稱。 選擇要編輯的模板，然后單擊面板底部的“編輯”按鈕 。 模板在文

54、檔窗口中打開。（3）根據(jù)需要修改模板的內(nèi)容。（4）保存該模板。（5）單擊“更新”按鈕，更新基于修改后的模板的所有文檔；如果不想更新基于修改后的模板文檔，則單擊“不更新”按鈕。 8.1.4 課堂案例慕斯蛋糕店網(wǎng)頁使用“創(chuàng)建模板”按鈕創(chuàng)建模板；使用“可編輯區(qū)域”按鈕制作可編輯區(qū)域效果。 效果圖8.2 庫 創(chuàng)建庫文件向頁面添加庫項目課堂案例鮮果批發(fā)網(wǎng)頁8.2.1 創(chuàng)建庫文件 庫項目可以包含文檔部分中的任意元素，包括文本、表格、表單、Java applet、插件、ActiveX元素、導航條、圖像等。庫項目只是一個對網(wǎng)頁元素的引用，原始文件必須保存在指定的位置上。1基于選定內(nèi)容創(chuàng)建庫項目2創(chuàng)建空白庫項目

55、 8.2.2 向頁面添加庫項目 向頁面添加庫項目時，會將實際內(nèi)容及對該庫項目的引用一起插入到文檔中。此時，無需提供原項目就可以正常顯示。在頁面中插入庫項目的具體操作步驟如下。（1）將插入點放在文檔窗口中的合適位置。（2）選擇“窗口 資源”命令，彈出“資源”面板。單擊左側的“庫”按鈕 ，進入“庫”面板。將庫項目插入到網(wǎng)頁中有以下幾種方法。 將一個庫項目從“庫”面板拖曳到文檔窗口中。 在“庫”面板中選擇一個庫項目，然后單擊面板底部的“插入”按鈕 。8.2.3 課堂案例鮮果批發(fā)網(wǎng)頁使用“庫”面板添加庫項目；使用庫中注冊的項目制作網(wǎng)頁文檔。效果圖課堂練習電子吉他網(wǎng)頁使用“創(chuàng)建模板”按鈕，創(chuàng)建模板；使用

56、“可編輯區(qū)域”和“重復區(qū)域”按鈕，制作可編輯區(qū)域和重復區(qū)域效果。 效果圖課后習題婚禮策劃網(wǎng)頁使用“庫”面板添加庫項目；使用庫中注冊的項目制作網(wǎng)頁文檔。效果圖第9章表單本章簡介： 表單的出現(xiàn)已經(jīng)使網(wǎng)頁從單向的信息傳遞，發(fā)展到能夠?qū)崿F(xiàn)與用戶交互對話，使網(wǎng)頁的交互性越來越強。本章主要講解表單的使用方法和應用技巧。通過這些內(nèi)容的學習，學生可以利用表單輸入信息或進行選擇，使用文本域、密碼域、單選按鈕/多選按鈕、列表框、跳轉(zhuǎn)菜單、按鈕等表單對象，將表單相應的信息提交給服務器進行處理。使用表單可以實現(xiàn)網(wǎng)上投票、網(wǎng)站注冊、信息發(fā)布、網(wǎng)上交易等功能。掌握創(chuàng)建表單的方法掌握設置表單屬性的方法掌握創(chuàng)建列表和菜單的方

57、法掌握創(chuàng)建文本域和圖像域的方法掌握創(chuàng)建按鈕的方法掌握HTML5表單元素的應用方法課堂學習目標9.1 表單的使用 創(chuàng)建表單表單的屬性插入文本域課堂案例用戶登錄界面9.1.1 創(chuàng)建表單 在文檔中插入表單的具體操作步驟如下。（1）在文檔窗口中，將插入點放在希望插入表單的位置。 （2）彈出“表單”命令，文檔窗口中出現(xiàn)一個紅色的虛輪廓線用來指示表單區(qū)域。 創(chuàng)建表單 9.1.2 表單的屬性 在文檔窗口中選擇表單，在“屬性”面板中出現(xiàn)表單屬性。 “屬性”面板 9.1.3 插入文本域 1插入單行文本域單行文本域通常提供單字或短語響應，如姓名或地址。若要在表單域中插入單行文本域，先將光標置于表單輪廓內(nèi)需要插入單

58、行文本域的位置，然后插入單行文本域。2插入密碼文本域密碼域是特殊類型的文本域。當用戶在密碼域中輸入文本時，所輸入的文本被替換為星號或項目符號，以隱藏該文本，保護這些信息不被看到。若要在表單域中插入密碼文本域，先將光標置于表單輪廓內(nèi)需要插入密碼文本域的位置，然后插入密碼文本域。3插入多行文本域多行文本域為訪問者提供一個較大的區(qū)域，供其輸入響應?？梢灾付ㄔL問者最多輸入的行數(shù)及對象的字符寬度。如果輸入的文本超過設置的行數(shù)和寬度，則該域?qū)凑論Q行屬性中指定的設置進行滾動。9.1.4 課堂案例用戶登錄界面使用“插入”面板“HTML”選項卡中的按鈕，插入表格；使用“表單”選項卡中的按鈕，插入文本字段、文本

59、區(qū)域，并設置相應的屬性。 效果圖9.2 應用單選按鈕和復選框插入單選按鈕插入單選按鈕組插入復選框課堂案例人力資源網(wǎng)頁9.2.1 插入單選按鈕插入單選按鈕有以下幾種方法。 單擊“插入”面板“表單”選項卡中的“單選按鈕”按鈕 ，在文檔窗口的表單中出現(xiàn)一個單選按鈕。 選擇“插入 表單 單選按鈕”命令，在文檔窗口的表單中出現(xiàn)一個單選按鈕。在“屬性”面板中顯示單選按鈕的屬性，可以根據(jù)需要設置該單選按鈕的各項屬性。 “屬性”面板 9.2.2 插入單選按鈕組“單選按鈕組”面板 先將光標放在表單輪廓內(nèi)需要插入單選按鈕組的位置，然后啟用“單選按鈕組”對話框。打開“單選按鈕組”對話框有以下幾種方法。 單擊“插入”

60、面板“表單”選項卡中的“單選按鈕組”按鈕 。 選擇“插入 表單 單選按鈕組”命令。 9.2.3 插入復選框插入復選框有以下幾種方法。 單擊“插入”面板“表單”選項卡中的“復選框”按鈕 ，在文檔窗口的表單中出現(xiàn)一個復選框。 選擇“插入 表單 復選框”命令，在文檔窗口的表單中出現(xiàn)一個復選框。“屬性”面板 9.2.4 課堂案例人力資源網(wǎng)頁使用“單選按鈕”按鈕，插入單選按鈕；使用“復選框”按鈕，插入復選框。 效果圖9.3 下拉菜單、滾動列表、文件域和按鈕創(chuàng)建列表和菜單創(chuàng)建文件域創(chuàng)建圖像按鈕插入普通按鈕插入“提交”按鈕插入“重置”按鈕課堂案例健康測試網(wǎng)頁9.3.1 創(chuàng)建列表和菜單1插入下拉菜單插入下拉菜