Dreamweaver實(shí)例教程（Dreamweaver2020）PPT完整全套教學(xué)課件

全套可編輯PPT課件第1章初識(shí)Dreamweaver2020本章簡(jiǎn)介：Dreamweaver是一款主流的“所見即所得”的網(wǎng)頁編輯制作軟件。網(wǎng)頁是網(wǎng)站基本的組成部分，利用Dreamweaver可以制作出我們想要的網(wǎng)站。本章主要講述Dreamweaver2020的基礎(chǔ)知識(shí)，包括Dreamweaver2020的工作界面、創(chuàng)建站點(diǎn)、管理站點(diǎn)文件和文件夾、管理站點(diǎn)和網(wǎng)頁文件頭設(shè)置。掌握Dreamweaver2020的工作界面掌握使用站點(diǎn)管理器、創(chuàng)建文件夾、定義新站點(diǎn)、創(chuàng)建和保存網(wǎng)頁掌握重命名、移動(dòng)、刪除文件和文件夾掌握站點(diǎn)的打開、編輯、復(fù)制、刪除、導(dǎo)出和導(dǎo)入掌握關(guān)鍵字、作者、版權(quán)信息、刷新時(shí)間、說明信息等文件頭的設(shè)置課堂學(xué)習(xí)目標(biāo)1.1

Dreamweaver2020的工作界面友好的開始頁面不同風(fēng)格的工作界面伸縮自如的面板多文檔編輯界面新穎的“插入”面板更完整的CSS功能1.1.1友好的開始頁面啟動(dòng)Dreamweaver2020，首先看到的是開始界面，用戶可在此界面中選擇新建文件的類型或打開已有的文檔等。如果不太習(xí)慣開始界面，可選擇“編輯>首選項(xiàng)”命令，或按Ctrl+U組合鍵，彈出“首選項(xiàng)”對(duì)話框，取消選中“顯示開始屏幕”復(fù)選框。單擊“應(yīng)用”按鈕，然后單擊“關(guān)閉”按鈕。這樣打開Dreamweaver2020時(shí)將不再顯示開始界面。開始頁面“首選參數(shù)”對(duì)話框1.1.2不同風(fēng)格的工作界面Dreamweaver2020的工作界面相比老版本的有一些改變。若用戶想修改工作界面的風(fēng)格，切換到自己熟悉的開發(fā)環(huán)境，可選擇“窗口>工作區(qū)布局”命令，彈出其子菜單，在子菜單中選擇“開發(fā)人員”或“標(biāo)準(zhǔn)”命令，即選擇其中一種風(fēng)格，工作界面會(huì)發(fā)生相應(yīng)的改變。1.1.3伸縮自如的面板浮動(dòng)面板按鈕縮放工作區(qū)在浮動(dòng)面板的右上方單擊按鈕，可以隱藏或展開面板。如果用戶覺得工作區(qū)不夠大，可以將鼠標(biāo)指針放在文檔編輯窗口右側(cè)與面板交界的框線處，當(dāng)鼠標(biāo)指針呈雙向箭頭時(shí)按住鼠標(biāo)的左鍵并拖曳，調(diào)整工作區(qū)的大小。若用戶需要更大的工作區(qū)，可以將面板隱藏。鼠標(biāo)指針呈雙箭頭1.1.4多文檔編輯界面Dreamweaver2020提供了多文檔的編輯界面，將多個(gè)文檔整合在一起，方便用戶在各個(gè)文檔之間切換。單擊文檔編輯窗口上方的標(biāo)簽，即可快速切換到相應(yīng)的文檔，方便同時(shí)編輯多個(gè)文檔。多文檔編輯界面1.1.5新穎的“插入”面板Dreamweaver2020的“插入”面板可以隨意與其他面板組合，為了方便操作一般會(huì)放置在菜單欄的下方?！安迦搿泵姘灏ā癏TML”“表單”“模板”“Bootstrap組件”“jQueryMobile”“jQueryUI”和“收藏夾”7個(gè)選項(xiàng)卡，不同功能的按鈕分門別類地放在了不同的選項(xiàng)卡中。在Dreamweaver2020中，“插入”面板可用菜單和選項(xiàng)卡2種方式顯示。如果需要菜單樣式，可用鼠標(biāo)右鍵單擊“插入”面板的選項(xiàng)卡，在彈出的快捷菜單中選擇“顯示為菜單”命令。新穎的“插入”面板1.1.6更完整的CSS功能傳統(tǒng)的HTML語言所提供的樣式及排版功能非常有限，因此，復(fù)雜的網(wǎng)頁版面主要依靠CSS樣式來實(shí)現(xiàn)。而CSS的功能較多，語法比較復(fù)雜，需要有一個(gè)很好的工具有條不紊地整理復(fù)雜的CSS源代碼，并適時(shí)地提供輔助說明。Dreamweaver2020就提供了這樣的功能?！皩傩浴泵姘?.2創(chuàng)建站點(diǎn)站點(diǎn)管理器創(chuàng)建站點(diǎn)文件夾創(chuàng)建新站點(diǎn)創(chuàng)建和保存網(wǎng)頁1.2.1站點(diǎn)管理器站點(diǎn)管理器的主要功能包括新建站點(diǎn)、編輯站點(diǎn)、復(fù)制站點(diǎn)、刪除站點(diǎn)，以及導(dǎo)入或?qū)С稣军c(diǎn)。若要管理站點(diǎn)，必須打開“管理站點(diǎn)”對(duì)話框?！拔募泵姘濉白烂妗绷斜怼肮芾碚军c(diǎn)”面板1.2.2創(chuàng)建站點(diǎn)文件夾建立站點(diǎn)前，要先在本地計(jì)算機(jī)上規(guī)劃站點(diǎn)文件夾。1.2.3創(chuàng)建新站點(diǎn)創(chuàng)建好站點(diǎn)文件夾后，用戶就可以創(chuàng)建新站點(diǎn)了。在Dreamweaver2020中，站點(diǎn)通常包含兩部分，即本地站點(diǎn)和遠(yuǎn)程站點(diǎn)。在Dreamweaver2020中創(chuàng)建Web站點(diǎn)，通常應(yīng)先在本地磁盤上創(chuàng)建本地站點(diǎn)，然后創(chuàng)建遠(yuǎn)程站點(diǎn)，將網(wǎng)頁的副本上傳到遠(yuǎn)程Web服務(wù)器上，使公眾可以訪問它們。1.2.4創(chuàng)建和保存網(wǎng)頁創(chuàng)建站點(diǎn)后，用戶需要?jiǎng)?chuàng)建網(wǎng)頁來組織網(wǎng)站要展示的內(nèi)容。為網(wǎng)頁進(jìn)行合理的命名非常重要，一般網(wǎng)頁的名稱應(yīng)容易理解，能反映網(wǎng)頁的內(nèi)容。新建空白文檔“新建文檔”對(duì)話框1.3管理站點(diǎn)文件和文件夾重命名文件和文件夾移動(dòng)文件和文件夾刪除文件和文件夾1.3.1重命名文件和文件夾修改文件名稱或文件夾名稱操作的具體步驟如下。（1）選擇“窗口>文件”命令，彈出“文件”面板，在其中選擇要重命名的文件或文件夾。（2）可以通過以下2種方法激活文件或文件夾的名稱。①單擊文件名，稍停片刻，再次單擊文件名。②在文件或文件夾圖標(biāo)上單擊鼠標(biāo)右鍵，在彈出的菜單中選擇“編輯>重命名”命令。（3）輸入新名稱，按Enter鍵。1.3.2移動(dòng)文件和文件夾移動(dòng)文件或文件夾的操作步驟如下。（1）選擇“窗口>文件”命令，彈出“文件”面板，在其中選擇要移動(dòng)的文件或文件夾。（2）通過以下2種方法移動(dòng)文件或文件夾。①剪切該文件或文件夾，然后將其粘貼在新位置。②將該文件或文件夾直接拖曳到新位置。（3）“文件”面板會(huì)自動(dòng)刷新，這樣就可以看到該文件或文件夾出現(xiàn)在新位置上。1.3.3刪除文件和文件夾刪除文件或文件夾有以下2種方法。（1）選擇“窗口>文件”命令，彈出“文件”面板，在其中選擇要?jiǎng)h除的文件或文件夾，按Delete鍵刪除。（2）在要?jiǎng)h除的文件或文件夾上單擊鼠標(biāo)右鍵，從彈出的菜單中選擇“編輯>刪除”命令。1.4管理站點(diǎn)打開站點(diǎn)編輯站點(diǎn)復(fù)制站點(diǎn)刪除站點(diǎn)導(dǎo)出和導(dǎo)入站點(diǎn)1.4.1打開站點(diǎn)當(dāng)要修改某個(gè)網(wǎng)站的內(nèi)容時(shí)，首先要打開站點(diǎn)。打開站點(diǎn)的具體操作步驟如下。（1）啟動(dòng)Dreamweaver2020。（2）選擇“窗口>文件”命令，彈出“文件”面板，展開“桌面”下拉列表，在其中選擇要打開的站點(diǎn)名。選擇站點(diǎn)打開站點(diǎn)1.4.2編輯站點(diǎn)有時(shí)用戶需要修改站點(diǎn)的一些設(shè)置，此時(shí)就要利用Dreamweaver2020編輯站點(diǎn)的功能。例如，修改站點(diǎn)的默認(rèn)圖像文件夾的路徑。1.4.3復(fù)制站點(diǎn)復(fù)制站點(diǎn)可省去重復(fù)建立多個(gè)結(jié)構(gòu)相同站點(diǎn)的操作步驟，可以提高用戶的工作效率。在“管理站點(diǎn)”對(duì)話框中可以復(fù)制站點(diǎn)，其具體操作步驟如下。（1）在“管理站點(diǎn)”對(duì)話框中，選中要復(fù)制的站點(diǎn)，單擊“復(fù)制當(dāng)前選定的站點(diǎn)”按鈕進(jìn)行復(fù)制。（2）雙擊新復(fù)制的站點(diǎn)，彈出“站點(diǎn)設(shè)置對(duì)象基礎(chǔ)素材復(fù)制”對(duì)話框，在“站點(diǎn)名稱”文本框中可以更改新站點(diǎn)的名稱。1.4.4刪除站點(diǎn)刪除站點(diǎn)只是刪除Dreamweaver2020同本地站點(diǎn)間的關(guān)聯(lián)，而本地站點(diǎn)包含的文件和文件夾仍然保存在本地磁盤原來的位置上。換句話說，刪除站點(diǎn)后，雖然站點(diǎn)文件夾仍保存在本地計(jì)算機(jī)中，但在Dreamweaver2020中已經(jīng)不存在相應(yīng)站點(diǎn)了。例如，在按下列步驟刪除站點(diǎn)后，在“管理站點(diǎn)”對(duì)話框中已沒有了該站點(diǎn)的名稱。在“管理站點(diǎn)”對(duì)話框中刪除站點(diǎn)的具體操作步驟如下。（1）在“管理站點(diǎn)”對(duì)話框中選中要?jiǎng)h除的站點(diǎn)。（2）單擊“刪除當(dāng)前選定的站點(diǎn)”按鈕即可刪除選擇的站點(diǎn)。1.4.5導(dǎo)出和導(dǎo)入站點(diǎn)如果想要在計(jì)算機(jī)之間移動(dòng)站點(diǎn)，或者與其他用戶共同設(shè)計(jì)站點(diǎn)，可通過Dreamweaver2020的導(dǎo)出和導(dǎo)入站點(diǎn)功能實(shí)現(xiàn)。導(dǎo)出站點(diǎn)功能是將站點(diǎn)導(dǎo)出為“.ste”格式文件，然后可在其他計(jì)算機(jī)上用導(dǎo)入站點(diǎn)功能將其導(dǎo)入到Dreamweaver2020中。導(dǎo)出導(dǎo)入1.5網(wǎng)頁文件頭設(shè)置插入搜索關(guān)鍵字插入作者和版權(quán)信息設(shè)置刷新時(shí)間設(shè)置說明信息1.5.1設(shè)置搜索關(guān)鍵字在Web上通過搜索引擎查找資料時(shí)，搜索引擎自動(dòng)讀取Web上網(wǎng)頁中<meta></meta>標(biāo)簽的內(nèi)容，所以在網(wǎng)頁中設(shè)置搜索關(guān)鍵字非常重要，它可以間接地宣傳網(wǎng)站，提高網(wǎng)站訪問量。但搜索關(guān)鍵字并不是字?jǐn)?shù)越多越好，因?yàn)橛行┧阉饕嫦拗扑阉麝P(guān)鍵字的字符數(shù)目，當(dāng)超過了限制的數(shù)目時(shí)，它將忽略所有的搜索關(guān)鍵字，所以最好只使用幾個(gè)精選的關(guān)鍵字。一般情況下，關(guān)鍵字是對(duì)網(wǎng)頁的主題、內(nèi)容、風(fēng)格或作者等內(nèi)容的概括。1.5.2設(shè)置作者和版權(quán)信息要設(shè)置網(wǎng)頁的作者和版權(quán)信息，可選擇“插入>Head>Meta”命令，彈出“META”對(duì)話框。在“值”文本框中輸入“/x.Copyright”，在“內(nèi)容”文本框中輸入作者姓名和版權(quán)信息，單擊“確定”按鈕完成設(shè)置。

“META”對(duì)話框1.5.3設(shè)置刷新時(shí)間要指定載入頁面刷新或者轉(zhuǎn)到其他頁面的時(shí)間，可設(shè)置文件頭部的刷新時(shí)間項(xiàng)，具體操作步驟如下。選擇“插入>HTML>Meta”命令，彈出“META”對(duì)話框。在“屬性”下拉列表中選擇“HTTP-equivalent”選項(xiàng)，在“值”文本框中輸入“refresh”，在“內(nèi)容”文本框中輸入需要的時(shí)間值，單擊“確定”按鈕完成設(shè)置?！癕ETA”對(duì)話框1.5.4設(shè)置說明信息搜索引擎也可通過讀取<meta></meta>標(biāo)簽的說明內(nèi)容來查找相關(guān)信息，但說明信息主要是對(duì)網(wǎng)頁內(nèi)容的詳細(xì)說明，而搜索關(guān)鍵字可以讓搜索引擎盡快搜索到網(wǎng)頁。設(shè)置網(wǎng)頁說明信息的具體操作步驟如下。（1）選中文檔編輯窗口中的“代碼”視圖，將鼠標(biāo)指針放在<head></head>標(biāo)簽中，選擇“插入>HTML>說明”命令，彈出“說明”對(duì)話框。

（2）在“說明”對(duì)話框中設(shè)置說明信息?！癕ETA”對(duì)話框第2章文本本章簡(jiǎn)介：在當(dāng)今的“網(wǎng)絡(luò)時(shí)代”，不管網(wǎng)頁內(nèi)容多么豐富，文本自始至終都是網(wǎng)頁中最基本的元素之一。由于文本的信息量大，輸入、編輯起來方便，并且生成的文件小，容易被瀏覽器下載，不會(huì)產(chǎn)生太多的等待時(shí)間，因此掌握好文本的使用方法，對(duì)于制作網(wǎng)頁來說是基本的要求。掌握文字的輸入、連續(xù)空格的輸入掌握頁邊距、網(wǎng)頁的標(biāo)題、網(wǎng)頁的默認(rèn)格式的設(shè)置掌握文字的大小、顏色、字體、對(duì)齊方式和段落樣式的設(shè)置掌握項(xiàng)目符號(hào)、編號(hào)列表、文本縮進(jìn)、日期、特殊字符和換行符的設(shè)置掌握水平線、網(wǎng)格和標(biāo)尺的應(yīng)用課堂學(xué)習(xí)目標(biāo)2.1輸入文本并編輯課堂案例——青山別墅網(wǎng)頁輸入文本設(shè)置文本屬性輸入連續(xù)的空格設(shè)置是否顯示不可見元素設(shè)置頁邊距設(shè)置網(wǎng)頁的標(biāo)題設(shè)置網(wǎng)頁的默認(rèn)格式課堂案例——機(jī)電設(shè)備網(wǎng)頁改變文本的大小改變文本的顏色改變文本的字體改變文本的對(duì)齊方式設(shè)置文本樣式設(shè)置段落格式2.1.1課堂案例—青山別墅網(wǎng)頁使用“頁面屬性”命令設(shè)置網(wǎng)頁外觀、網(wǎng)頁標(biāo)題效果；使用“首選項(xiàng)”命令設(shè)置允許多個(gè)連續(xù)空格。效果圖2.1.2輸入文本使用Dreamweaver2020編輯網(wǎng)頁時(shí)，在文檔編輯窗口中光標(biāo)默認(rèn)處于顯示狀態(tài)。要添加文本，首先應(yīng)將光標(biāo)移動(dòng)到文檔編輯窗口中的編輯區(qū)域，然后直接輸入文本，就像在其他文本編輯器中一樣。打開一個(gè)頁面，在頁面中單擊，將光標(biāo)置于其中，然后輸入文本。輸入文字后的效果圖2.1.3設(shè)置文本屬性利用“屬性”面板可以方便地修改選中文本的字體、字號(hào)、樣式、對(duì)齊方式等，以獲得預(yù)期的效果。選擇“窗口>屬性”命令，彈出“屬性”面板，在HTML和CSS的“屬性”面板中都可以設(shè)置文本的屬性?！皩傩浴泵姘?.1.4輸入連續(xù)的空格在默認(rèn)狀態(tài)下，Dreamweaver2020只允許用戶輸入一個(gè)空格，要輸入連續(xù)多個(gè)空格則需要進(jìn)行設(shè)置或通過特定操作才能實(shí)現(xiàn)。1．設(shè)置“首選項(xiàng)”對(duì)話框2．直接插入多個(gè)連續(xù)空格2.1.5設(shè)置是否顯示不可見元素在網(wǎng)頁的“設(shè)計(jì)”視圖中，有一些元素僅用來標(biāo)志位置，在瀏覽器中是不可見的。例如，腳本圖標(biāo)用來標(biāo)志文檔正文中的JavaScript或VBScript代碼的位置，換行符圖標(biāo)用來標(biāo)志每個(gè)換行符<br>的位置等。在設(shè)計(jì)網(wǎng)頁時(shí)，為了快速找到這些不可見元素的位置，常常需要改變這些元素在“設(shè)計(jì)”視圖中的可見性。2.1.6設(shè)置頁邊距通常文本與紙的四周需要留有一定的距離，這個(gè)距離叫頁邊距。網(wǎng)頁設(shè)計(jì)也是如此，在默認(rèn)狀態(tài)下文檔的上、下、左、右頁邊距不為0。修改網(wǎng)頁頁邊距的具體操作步驟如下。（1）選擇“文件>頁面屬性”命令，彈出“頁面屬性”對(duì)話框。（2）根據(jù)需要在對(duì)話框的“左邊距”“上邊距”“邊距寬度”和“邊距高度”數(shù)值框中輸入相應(yīng)的數(shù)值即可?！绊撁鎸傩浴睂?duì)話框2.1.7設(shè)置網(wǎng)頁的標(biāo)題網(wǎng)頁的標(biāo)題可以提示瀏覽者所查看網(wǎng)頁的內(nèi)容，并可在瀏覽器的歷史記錄和書簽列表中標(biāo)志頁面。注意，網(wǎng)頁的文件名是通過“保存文件”命令保存的網(wǎng)頁文件名稱，而網(wǎng)頁的標(biāo)題是瀏覽者在瀏覽網(wǎng)頁時(shí)瀏覽器標(biāo)題欄中顯示的信息。“頁面屬性”對(duì)話框2.1.8設(shè)置網(wǎng)頁的默認(rèn)格式用戶在制作新網(wǎng)頁時(shí)，系統(tǒng)提供的頁面都有一些默認(rèn)的屬性，如網(wǎng)頁的標(biāo)題、頁邊距、文字編碼、文字顏色和超鏈接的顏色等。若需要修改網(wǎng)頁的默認(rèn)格式，可選擇“文件>頁面屬性”命令，彈出“頁面屬性”對(duì)話框，在其中進(jìn)行設(shè)置?！绊撁鎸傩浴睂?duì)話框2.1.9課堂案例—機(jī)電設(shè)備網(wǎng)頁效果圖使用“屬性”面板，設(shè)置文字的字號(hào)、顏色及字體；使用“CSS設(shè)計(jì)器”面板，設(shè)置文字的字體、字號(hào)、顏色及行距。Dreamweaver2020提供了2種改變文本大小的方法，一種是設(shè)置文本的默認(rèn)大小，另一種是設(shè)置選中文本的大小。2.1.10改變文本的大小“頁面屬性”對(duì)話框豐富的視覺色彩可以吸引網(wǎng)頁游覽者的注意力，網(wǎng)頁中的文本不僅可以是黑色，還可以顯示為其他色彩，最多時(shí)可達(dá)到16777216種顏色。顏色的種類與用戶顯示器的分辨率和顏色值有關(guān)，一般建議在216種網(wǎng)頁色彩中選擇文字的顏色。2.1.11改變文本的顏色Dreamweaver2020提供了2種改變文本字體的方法，一種是設(shè)置文本的默認(rèn)字體，另一種是設(shè)置選中文本的字體。2.1.12改變文本的字體設(shè)置選中文本字體設(shè)置文本默認(rèn)字體2.1.13改變文本的對(duì)齊方式文本的對(duì)齊方式是指文字相對(duì)于文檔編輯窗口或?yàn)g覽器窗口在水平方向上的對(duì)齊方式。對(duì)齊方式按鈕有以下4種。“左對(duì)齊”按鈕：使文本在瀏覽器窗口中左對(duì)齊?！熬又袑?duì)齊”按鈕：使文本在瀏覽器窗口中居中對(duì)齊?！坝覍?duì)齊”按鈕：使文本在瀏覽器窗口中右對(duì)齊?！皟啥藢?duì)齊”按鈕：使文本在瀏覽器窗口中兩端對(duì)齊。文本樣式是指文本的外觀及顯示方式，如加粗文本、傾斜文本和文本加下劃線等。2.1.14設(shè)置文本樣式1．通過“樣式”命令設(shè)置文本樣式2．通過“屬性”面板設(shè)置文本樣式3．使用組合鍵“Ctrl+B”

快速設(shè)置文本樣式網(wǎng)頁中的段落是指描述同一主題的并且格式統(tǒng)一的一段文字。在文檔編輯窗口中，輸入一段文字后按Enter鍵，這段文字就會(huì)作為一個(gè)段落顯示在<P></P>標(biāo)簽中。2.1.15設(shè)置段落格式1．應(yīng)用段落格式2．指定預(yù)格式2.2無序列表和編號(hào)列表課堂案例——電器城網(wǎng)頁設(shè)置項(xiàng)目符號(hào)或編號(hào)修改無序列表或編號(hào)列表設(shè)置文本縮進(jìn)格式插入日期和時(shí)間插入特殊字符插入換行符2.2.1課堂案例—電器城網(wǎng)頁使用“屬性”面板中的“編號(hào)列表”按鈕，創(chuàng)建列表；使用“CSS設(shè)計(jì)器”面板，設(shè)置列表的樣式。 效果圖1.通過“無序列表”按鈕或“編號(hào)列表”按鈕設(shè)置項(xiàng)目符號(hào)或編號(hào)。2.通過“列表”命令設(shè)置項(xiàng)目符號(hào)或編號(hào)。2.2.2設(shè)置項(xiàng)目符號(hào)或編號(hào)設(shè)置后效果圖列表菜單2.2.3修改項(xiàng)目符號(hào)或編號(hào)（1）將插入點(diǎn)定位在要修改項(xiàng)目符號(hào)或編號(hào)的文本中。（2）通過以下2種方法中的一種打開“列表屬性”對(duì)話框。①單擊“屬性”面板中的“列表項(xiàng)目”按鈕。②選擇“編輯>列表>屬性”命令。2.2.4設(shè)置文本縮進(jìn)格式設(shè)置文本縮進(jìn)格式有以下3種方法。（1）在“屬性”面板中單擊“內(nèi)縮區(qū)塊”按鈕或“刪除內(nèi)縮區(qū)塊”按鈕，使段落向右移動(dòng)或向左移動(dòng)。（2）選擇“編輯>文本>縮進(jìn)”或“編輯>文本>凸出”命令，可使段落向右移動(dòng)或向左移動(dòng)。（3）按Ctrl+Alt+]組合鍵或Ctrl+Alt+[組合鍵，使段落向右移動(dòng)或向左移動(dòng)。2.2.5插入日期和時(shí)間（1）在文檔編輯窗口中，將插入點(diǎn)放置在想要插入對(duì)象的位置。（2）通過以下2種方法打開“插入日期”對(duì)話框。①單擊“插入”面板“HTML”選項(xiàng)卡中的“日期”按鈕。②選擇“插入>HTML>日期”命令。（3）選擇相應(yīng)的日期和時(shí)間的格式，單擊“確定”按鈕完成設(shè)置?！安迦肴掌凇睂?duì)話框2.2.6插入特殊字符在網(wǎng)頁中插入特殊字符，有以下2種方法。（1）選擇“插入>HTML>字符”命令，彈出其子菜單，選擇需要的字符命令。（2）單擊“插入”面板“HTML”選項(xiàng)卡中的“字符”展開式按鈕，彈出12個(gè)特殊字符按鈕。在其中選擇需要的特殊字符按鈕，即可插入特殊字符。2.2.7插入換行符為段落添加換行符有以下3種方法。（1）單擊“插入”面板“HTML”選項(xiàng)卡中的“字符”展開式按鈕，選擇“換行符”按鈕。（2）按Shift+Enter組合鍵。（3）選擇“插入>HTML>字符>換行符”命令。2.3水平線、網(wǎng)格與標(biāo)尺課堂案例——藝術(shù)攝影網(wǎng)頁水平線網(wǎng)格標(biāo)尺2.3.1課堂案例—藝術(shù)攝影網(wǎng)頁使用“插入>HTML>水平線”命令，在文檔中插入水平線；使用“屬性”面板，改變水平線的高度；添加代碼，改變水平線的顏色。效果圖2.3.2水平線“屬性”面板1．創(chuàng)建水平線創(chuàng)建水平線有以下2種方法。（1）單擊“插入”面板“HTML”選項(xiàng)卡中的“水平線”按鈕。（2）選擇“插入>HTML>水平線”命令。2．修改水平線在文檔編輯窗口中，選中水平線，選擇“窗口>屬性”命令，彈出“屬性”面板，可以根據(jù)需要對(duì)水平線的屬性進(jìn)行修改。使用網(wǎng)格可以更加方便地精確地定位網(wǎng)頁元素，在網(wǎng)頁布局時(shí)網(wǎng)格也具有至關(guān)重要的作用。2.3.3網(wǎng)格1．顯示和隱藏網(wǎng)格2．設(shè)置網(wǎng)頁元素與網(wǎng)格對(duì)齊3．修改網(wǎng)格的疏密4．修改網(wǎng)格線的顏色和線型標(biāo)尺顯示在文檔編輯窗口的上方和左側(cè)，用以標(biāo)志網(wǎng)頁元素的位置。標(biāo)尺的單位分為px（像素）、英寸和cm（厘米）。2.3.4標(biāo)尺1．在文檔編輯窗口中顯示標(biāo)尺2．改變標(biāo)尺的單位3．改變坐標(biāo)原點(diǎn)4．重置標(biāo)尺的坐標(biāo)原點(diǎn)課堂練習(xí)——有機(jī)果蔬網(wǎng)頁使用“頁面屬性”命令，設(shè)置頁面外觀、網(wǎng)頁標(biāo)題效果；使用“首選項(xiàng)”命令，設(shè)置允許多個(gè)連續(xù)空格；使用“CSS設(shè)計(jì)器”面板，設(shè)置文字的字體、字號(hào)和行距。

效果圖課后習(xí)題——旅行購票網(wǎng)頁使用“頁面屬性”命令，設(shè)置頁面邊距和標(biāo)題；使用“CSS樣式”命令，改變文本的顏色及行距。效果圖第3章圖像和多媒體本章簡(jiǎn)介：圖像在網(wǎng)頁中的作用是非常重要的，適當(dāng)?shù)靥砑痈黝悎D像可以使網(wǎng)頁更加清晰美觀、形象生動(dòng)，更能引發(fā)瀏覽者的閱讀興趣。所謂“媒體”是指信息的載體，而“多媒體”指多種媒體的綜合使用，包括文字、圖形、動(dòng)畫、音頻和視頻等。在Dreamweaver2020中，用戶可以方便快捷地向網(wǎng)頁中添加多媒體文件，并對(duì)它們進(jìn)行各種編輯。掌握?qǐng)D像的格式掌握?qǐng)D像的插入、圖像的屬性、圖像替換文字、跟蹤圖像的應(yīng)用掌握Flash動(dòng)畫、FLV、Animate作品、HTML5Video、音頻和插件的插入課堂學(xué)習(xí)目標(biāo)3.1圖像課堂案例——環(huán)球旅游網(wǎng)頁網(wǎng)頁中的圖像格式插入圖像設(shè)置圖像屬性給圖像添加文字說明跟蹤圖像3.1.1課堂案例—環(huán)球旅游網(wǎng)頁使用“Image”按鈕，插入圖像；使用“CSS設(shè)計(jì)器”面板，設(shè)置圖像之間的距離。效果圖3.1.2網(wǎng)頁中的圖像格式Web網(wǎng)頁中通常使用的圖像文件有JPEG、GIF、PNG3種格式，但大多數(shù)瀏覽器只支持JPEG、GIF2種圖像格式。因?yàn)橐ＷC瀏覽者下載網(wǎng)頁的速度，所以目前網(wǎng)站設(shè)計(jì)者也主要使用JPEG和GIF這2種壓縮格式的圖像。3.1.3插入圖像要在Dreamweaver2020文檔中插入圖像，該圖像必須位于本地站點(diǎn)文件夾內(nèi)或遠(yuǎn)程站點(diǎn)文件夾內(nèi)，否則不能正確顯示，所以在建立站點(diǎn)時(shí)，網(wǎng)站設(shè)計(jì)者常常是先創(chuàng)建一個(gè)名叫“image”的文件夾，并將需要的圖像復(fù)制到其中?！斑x擇圖像源文件”對(duì)話框3.1.4設(shè)置圖像屬性插入圖像后，在“屬性”面板中顯示了該圖像的屬性。插入圖像后的“屬性”面板3.1.5給圖像添加文字說明當(dāng)圖像不能在瀏覽器中正常顯示時(shí)，網(wǎng)頁中圖像的位置就變成空白區(qū)域。為了讓瀏覽者在圖像不能正常顯示時(shí)也能了解圖像的信息，可以為網(wǎng)頁中的圖像設(shè)置替換文字，即將圖像的說明文字輸入“替換”文本框中?！皩傩浴泵姘逍Ч麍D3.1.6跟蹤圖像在工程設(shè)計(jì)過程中，一般先在圖像處理軟件中勾畫出工程藍(lán)圖，然后在此基礎(chǔ)上反復(fù)修改，最終得到一幅完美的設(shè)計(jì)圖。制作網(wǎng)頁時(shí)也應(yīng)采用類似的方法，先在圖像處理軟件中繪制網(wǎng)頁的藍(lán)圖，將其添加到網(wǎng)頁的背景中，然后按設(shè)計(jì)方案添加相應(yīng)元素，等網(wǎng)頁制作完畢后，再將藍(lán)圖刪除。在Dreamweaver2020中可利用“跟蹤圖像”功能來實(shí)現(xiàn)上述網(wǎng)頁設(shè)計(jì)的方式。3.2多媒體課堂案例——綠色農(nóng)場(chǎng)網(wǎng)頁插入Flash動(dòng)畫插入FLV視頻插入Animate作品插入HTML5視頻插入音頻插入插件3.2.1課堂案例—綠色農(nóng)場(chǎng)網(wǎng)頁使用“FlashSWF”按鈕，為網(wǎng)頁文檔插入Flash動(dòng)畫；使用“屬性”面板，設(shè)置動(dòng)畫背景為透明。效果圖3.2.2插入Flash動(dòng)畫Dreamweaver2020中提供了插入Flash對(duì)象的功能，但要注意Flash動(dòng)畫的格式。例如Flash源文件格式（.fla）的文件不能在瀏覽器中顯示、FlashSWF格式（.swf）的文件是Flash動(dòng)畫的壓縮格式，可以在瀏覽器中顯示，所以在Dreamweaver2020中只能插入FlashSWF格式的文件，便于在Web瀏覽器上查看。3.2.3插入FLV視頻應(yīng)用Dreamweaver2020可以在網(wǎng)頁中輕松添加FLV視頻，而無須使用Flash創(chuàng)作工具。但插入的FLV視頻必須是經(jīng)過編碼的。3.2.4插入Animate作品Animate是Adobe最新出品的用于制作HTML5動(dòng)畫的可視化工具，可以將其簡(jiǎn)單地理解為HTML5版本的FlashPro。在使用Dreamweaver2020制作的網(wǎng)頁中同樣可以插入Animate制作的作品。3.2.5插入HTML5視頻Dreamweaver2020可以在網(wǎng)頁中插入HTML5視頻。HTML5視頻元素提供了一種將電影或視頻嵌入網(wǎng)頁中的標(biāo)準(zhǔn)方式?！皩傩浴泵姘?.2.6插入音頻1．插入背景音樂Dreamweaver2020的HTML代碼中提供了背景音樂<bgsound>標(biāo)簽，使用該標(biāo)簽可以為網(wǎng)頁添加背景音樂效果。2．插入音樂插入音樂和插入背景音樂的效果不同，插入音樂可以在頁面中看到播放器的外觀，如播放、暫停、定位和音量等按鈕。3．嵌入音樂嵌入音樂和插入音樂效果基本相同，只不過嵌入音樂播放器的外觀要比插入音樂播放器的外觀多幾個(gè)按鈕。3.2.7插入插件利用“插件”按鈕，可以在網(wǎng)頁中插入AIV、MPG、MOV、MP4等格式的視頻文件，還可以插入音頻文件。在網(wǎng)頁中插入插件的具體操作步驟如下。（1）在文檔編輯窗口的“設(shè)計(jì)”視圖中，將插入點(diǎn)放置在想要插入插件的位置。（2）通過以下2種方法彈出“插件”對(duì)話框，插入插件。①單擊“插入”面板“HTML”選項(xiàng)卡中的“插件”按鈕。②選擇“插入>HTML>插件”命令。課堂練習(xí)——拓森企業(yè)網(wǎng)頁使用“Image”按鈕插入圖像，美化頁面。效果圖課后習(xí)題——五谷雜糧網(wǎng)頁使用“FlashSWF”按鈕，插入Flash動(dòng)畫效果。效果圖第4章超鏈接本章簡(jiǎn)介：網(wǎng)站中的每個(gè)網(wǎng)頁都是通過超鏈接的形式關(guān)聯(lián)在一起的，超鏈接是網(wǎng)頁中最重要、最根本的元素之一。瀏覽者可以通過鼠標(biāo)單擊網(wǎng)頁中的某個(gè)超鏈接，輕松地實(shí)現(xiàn)網(wǎng)頁之間的轉(zhuǎn)換，或下載文件、收發(fā)郵件等。本章將對(duì)超鏈接進(jìn)行具體的講解。掌握超鏈接的概念掌握文本超鏈接、電子郵件超鏈接、下載文件鏈接的創(chuàng)建方法掌握?qǐng)D像超鏈接、鼠標(biāo)經(jīng)過圖像鏈接的創(chuàng)建方法掌握ID超鏈接、熱點(diǎn)鏈接的創(chuàng)建方法課堂學(xué)習(xí)目標(biāo)4.1超鏈接的概念超鏈接的主要作用是將物理上無序的網(wǎng)頁組成有機(jī)的統(tǒng)一體。鏈接對(duì)象存放著對(duì)應(yīng)網(wǎng)頁或其他文件的地址。在瀏覽網(wǎng)頁時(shí)，當(dāng)用戶將鼠標(biāo)指針移到某些文字或圖像上時(shí)，鼠標(biāo)指針會(huì)改變形狀或顏色，這是在提示用戶：此對(duì)象為鏈接對(duì)象。用戶只需單擊鏈接對(duì)象，就可完成打開鏈接的網(wǎng)頁、下載文件、打開郵件及收發(fā)郵件等操作。4.2文本超鏈接課堂案例——建筑模型網(wǎng)頁創(chuàng)建文本超鏈接設(shè)置文本超鏈接的狀態(tài)創(chuàng)建下載文件超鏈接創(chuàng)建電子郵件超鏈接4.2.1課堂案例—建筑模型網(wǎng)頁使用“插入”面板的“HTML”選項(xiàng)卡制作電子郵件鏈接效果；使用“屬性”面板為文字制作下載文件鏈接效果。效果圖創(chuàng)建文本超鏈接的方法非常簡(jiǎn)單，在鏈接文本的“屬性”面板中指定鏈接文件即可。指定鏈接文件的方法有以下3種。4.2.2創(chuàng)建文本超鏈接1．直接輸入要鏈接文件的路徑和文件名。2．使用“瀏覽文件”按鈕。3．使用“指向文件”按鈕。未被訪問過的鏈接文字與被訪問過的鏈接文字在形式上應(yīng)該是有所區(qū)別的，以提示瀏覽者鏈接文字所指示的網(wǎng)頁是否已被訪問過。4.2.3設(shè)置文本超鏈接的狀態(tài)瀏覽網(wǎng)站的目的往往是查找并下載資料，網(wǎng)站中的文件下載功能可利用下載文件超鏈接來實(shí)現(xiàn)。創(chuàng)建下載文件超鏈接的步驟與創(chuàng)建文本超鏈接的類似，區(qū)別在于所鏈接的文件不是網(wǎng)頁文件而是其他文件，如EXE、ZIP等文件。創(chuàng)建下載文件鏈接的具體操作步驟如下。（1）在文檔編輯窗口中選擇需添加下載文件超鏈接的網(wǎng)頁對(duì)象。（2）在“鏈接”文本框中指定鏈接文件。（3）按F12鍵預(yù)覽網(wǎng)頁。4.2.4創(chuàng)建下載文件超鏈接網(wǎng)站一般只作為單向傳播的工具，將各網(wǎng)頁中的信息傳達(dá)給瀏覽者，但網(wǎng)站設(shè)計(jì)者可能需要接收瀏覽者的反饋信息，這可以通過讓瀏覽者給網(wǎng)站設(shè)計(jì)者發(fā)送電子郵件來實(shí)現(xiàn)。在網(wǎng)頁中創(chuàng)建電子郵件超鏈接就可以實(shí)現(xiàn)這種功能。4.2.5創(chuàng)建電子郵件超鏈接屬性面板“電子郵件鏈接”對(duì)話框4.3圖像超鏈接課堂案例——溫泉度假網(wǎng)頁創(chuàng)建圖像超鏈接創(chuàng)建鼠標(biāo)指針經(jīng)過圖像超鏈接4.3.1課堂案例—溫泉度假網(wǎng)頁使用“鼠標(biāo)經(jīng)過圖像”按鈕，為網(wǎng)頁添加導(dǎo)航效果；使用“鏈接”文本框，制作超鏈接效果；使用“CSS設(shè)計(jì)器”面板，控制超鏈接的邊框顯示效果。效果圖4.3.2創(chuàng)建圖像超鏈接創(chuàng)建圖像超鏈接的操作步驟如下。（1）在文檔編輯窗口中選擇圖像。（2）在“屬性”面板中，單擊“鏈接”選項(xiàng)右側(cè)的“瀏覽文件”按鈕，為圖像添加相對(duì)路徑的鏈接。（3）在“替換”文本框中可輸入圖像替換文字。設(shè)置圖像替換文字后，當(dāng)圖像不能下載時(shí)，會(huì)在圖像的位置上顯示替換文字；當(dāng)瀏覽者將鼠標(biāo)指針指向圖像時(shí)，也會(huì)顯示替換文字。（4）按F12鍵預(yù)覽網(wǎng)頁的效果?！笆髽?biāo)指針經(jīng)過圖像”是一種常用的互動(dòng)技術(shù)，當(dāng)鼠標(biāo)指針經(jīng)過圖像時(shí)，圖像會(huì)隨之發(fā)生變化。一般來說，“鼠標(biāo)指針經(jīng)過圖像”效果由2張大小相等的圖像形成，一張圖像稱為主圖像，另一張圖像稱為次圖像。主圖像是首次載入網(wǎng)頁時(shí)顯示的圖像，次圖像是當(dāng)鼠標(biāo)指針經(jīng)過時(shí)更換的另一張圖像。“鼠標(biāo)指針經(jīng)過圖像”效果經(jīng)常應(yīng)用于網(wǎng)頁中的按鈕上。4.3.3創(chuàng)建鼠標(biāo)指針經(jīng)過圖像超鏈接4.4ID超鏈接課堂案例——東方木品網(wǎng)頁創(chuàng)建ID超鏈接4.4.1課堂案例—東方木品網(wǎng)頁使用“屬性”面板，創(chuàng)建ID標(biāo)記；使用“鏈接”文本框，制作鼠標(biāo)經(jīng)過圖像的ID超鏈接。效果圖若網(wǎng)頁的內(nèi)容很多，為了尋找所需內(nèi)容，瀏覽者往往需要拖曳滾動(dòng)條進(jìn)行查看，非常不方便。Dreamweaver2020提供了ID超鏈接功能，可用于快速定位到網(wǎng)頁的不同位置。4.4.2創(chuàng)建ID超鏈接1．創(chuàng)建ID標(biāo)記2．建立ID超鏈接4.5熱點(diǎn)超鏈接課堂案例——恒選地產(chǎn)網(wǎng)頁創(chuàng)建熱點(diǎn)超鏈接4.5.1課堂案例——恒選地產(chǎn)網(wǎng)頁使用熱點(diǎn)按鈕，為圖像添加熱點(diǎn)；使用“屬性”面板，為熱點(diǎn)創(chuàng)建超鏈接。效果圖4.5.2創(chuàng)建熱點(diǎn)超鏈接創(chuàng)建熱點(diǎn)超鏈接的具體操作步驟如下。（1）選取一張圖片，在“屬性”面板的“地圖”項(xiàng)下方單擊熱點(diǎn)按鈕。（2）將鼠標(biāo)指針放在圖片上，當(dāng)鼠標(biāo)指針變?yōu)槭中螘r(shí)，在圖片上按住鼠標(biāo)左鍵并拖曳，創(chuàng)建相應(yīng)形狀的淡綠色熱點(diǎn)。如果圖片上有多個(gè)熱點(diǎn)，可通過“指針熱點(diǎn)工具”按鈕選擇不同的熱點(diǎn)，并通過控制點(diǎn)調(diào)整熱點(diǎn)的大小。利用“圓形熱點(diǎn)工具”按鈕，建立多個(gè)圓形熱點(diǎn)。（3）在“鏈接”文本框中輸入要鏈接的網(wǎng)頁地址，在“替換”文本框中輸入當(dāng)鼠標(biāo)指針指向熱點(diǎn)時(shí)所顯示的替換文字。通過熱點(diǎn)功能，用戶可以在圖片的任何地方做一個(gè)鏈接。反復(fù)操作，就可以在一張圖片上劃分很多熱點(diǎn)功能，并為每一個(gè)熱點(diǎn)設(shè)置一個(gè)鏈接，從而實(shí)現(xiàn)在一張圖片不同位置上單擊鼠標(biāo)左鍵鏈接到不同頁面的效果。（4）按F12鍵預(yù)覽網(wǎng)頁的效果。課堂練習(xí)——?jiǎng)?chuàng)意設(shè)計(jì)網(wǎng)頁使用“電子郵件鏈接”按鈕，制作電子郵件超鏈接；使用“屬性”面板，為文字制作下載文件超鏈接；使用“頁面屬性”命令，改變超鏈接的顯示效果。效果圖課后習(xí)題——建筑設(shè)計(jì)網(wǎng)頁使用“鼠標(biāo)經(jīng)過圖像”按鈕，制作鼠標(biāo)指針經(jīng)過圖像的圖像變換效果。效果圖第5章表格本章簡(jiǎn)介：Dreamweaver2020的表格是網(wǎng)頁設(shè)計(jì)中一個(gè)非常有用的工具。它不僅可以將相關(guān)數(shù)據(jù)有序地組織在一起，還可以精確地定位文字、圖像等網(wǎng)頁元素在頁面中的位置，使得頁面在形式上既豐富多彩又條理清楚，在組織上井然有序而不顯單調(diào)。使用表格進(jìn)行頁面布局的最大好處之一是，即使瀏覽者改變了計(jì)算機(jī)顯示器的分辨率，也不會(huì)影響網(wǎng)頁的瀏覽效果。因此，表格是網(wǎng)站設(shè)計(jì)人員必須掌握的工具。表格運(yùn)用得熟練與否，是劃分網(wǎng)站專業(yè)制作人士和業(yè)余愛好者的一個(gè)重要標(biāo)準(zhǔn)。

掌握表格的組成和插入方法掌握表格元素的屬性設(shè)置掌握在表格中輸入文字、插入其他網(wǎng)頁元素掌握復(fù)制、粘貼表格的應(yīng)用掌握刪除行或列、縮放表格的應(yīng)用掌握單元格的合并和拆分掌握表格數(shù)據(jù)的導(dǎo)入、導(dǎo)出掌握表格數(shù)據(jù)排序掌握表格的嵌套課堂學(xué)習(xí)目標(biāo)5.1表格的簡(jiǎn)單操作課堂案例——布藝沙發(fā)網(wǎng)頁表格的組成插入表格表格各元素的屬性在表格中插入內(nèi)容選擇表格元素復(fù)制、剪切、粘貼表格清除表格內(nèi)容和刪除行或列縮放表格合并和拆分單元格增加表格的行和列5.1.1課堂案例—布藝沙發(fā)網(wǎng)頁使用“頁面屬性”命令，設(shè)置頁面邊距和網(wǎng)頁標(biāo)題；使用“Table”按鈕，插入表格；使用“Image”按鈕，插入圖像；使用“CSS設(shè)計(jì)器”面板，控制圖像的間距。

效果圖5.1.2表格的組成表格中包含行、列、單元格、表格標(biāo)題等元素。單元格表格的標(biāo)題行列效果圖5.1.3插入表格在Dreamweaver2020中插入表格，是有效組織數(shù)據(jù)的最佳手段之一。插入表格的具體操作步驟如下。（1）在文檔編輯窗口中，將插入點(diǎn)放到合適的位置。（2）通過以下3種方法彈出“Table”對(duì)話框。（3）根據(jù)需要設(shè)置新建表格的行、列數(shù)等，單擊“確定”按鈕完成新建表格的設(shè)置。①選擇“插入>Table”命令。②按Ctrl+Alt+T組合鍵。③單擊“插入”面板“HTML”選項(xiàng)卡中的“Table”按鈕。5.1.4表格元素的屬性插入表格后，通過選擇不同的表格對(duì)象，可以在“屬性”面板中看到它們的各項(xiàng)參數(shù)，修改這些參數(shù)可以得到不同風(fēng)格的表格。表格的“屬性”面板單元格、行、列的“屬性”面板5.1.5在表格中插入內(nèi)容建立表格后，可以在表格中添加各種網(wǎng)頁元素，如文本、圖像和表格等。在表格中添加元素的操作非常簡(jiǎn)單，只需根據(jù)設(shè)計(jì)要求選定單元格，然后插入網(wǎng)頁元素即可。一般當(dāng)表格中插入內(nèi)容后，表格的尺寸會(huì)隨內(nèi)容的尺寸自動(dòng)調(diào)整。當(dāng)然，還可以利用單元格的屬性來調(diào)整其內(nèi)部元素的對(duì)齊方式和單元格的大小等。1．輸入文本2．插入其他網(wǎng)頁元素5.1.6選擇表格元素表格中的元素需要先選中然后才能對(duì)其進(jìn)行操作?？梢赃x擇整個(gè)表格、多行或多列，也可以選擇一個(gè)或多個(gè)單元格。1．選擇整個(gè)表格2．選擇行或列3．選擇單元格4．選擇一個(gè)矩形區(qū)域5．選擇不相鄰的單元格5.1.7復(fù)制、剪切、粘貼表格在Dreamweaver2020中復(fù)制表格的操作如同在Word中一樣，可以對(duì)表格中的多個(gè)單元格進(jìn)行復(fù)制、剪切、粘貼操作，并保留原單元格的格式，也可以僅對(duì)單元格的內(nèi)容進(jìn)行操作。1．復(fù)制單元格2．剪切單元格3．粘貼單元格4．粘貼操作的幾點(diǎn)說明5.1.8清除表格內(nèi)容和刪除行或列刪除表格的操作包括刪除行或列，以及清除表格內(nèi)容。1．清除表格內(nèi)容2．刪除行或列5.1.9縮放表格創(chuàng)建表格后，可根據(jù)需要調(diào)整表格、行和列的大小。1．縮放表格2．修改行或列的大小5.1.10合并和拆分單元格有的表格項(xiàng)需要幾行或幾列來說明，這時(shí)需要將多個(gè)單元格合并，生成一個(gè)跨多個(gè)列或行的單元格。1．合并單元格2．拆分單元格5.1.11增加表格的行和列如果想增加網(wǎng)頁中表格的內(nèi)容，不需要重新插入新表格，通過選擇“編輯>表格”中的相應(yīng)子菜單命令，添加行或列，即可加入新的內(nèi)容。5.2表格的復(fù)雜操作課堂案例——典藏博物館網(wǎng)頁導(dǎo)入和導(dǎo)出表格的數(shù)據(jù)表格數(shù)據(jù)排序5.2.1課堂案例—典藏博物館網(wǎng)頁使用“表格式數(shù)據(jù)”命令，導(dǎo)入外部表格式數(shù)據(jù)；使用“屬性”面板，改變單元格的寬度、高度和對(duì)齊方式；使用“CSS設(shè)計(jì)器”面板，控制文字的大小和顏色；使用“排序表格”命令，對(duì)表格數(shù)據(jù)進(jìn)行排序。效果圖在Dreamweaver2020中，可以將一個(gè)網(wǎng)頁中的表格數(shù)據(jù)導(dǎo)出為文件或在一個(gè)網(wǎng)頁中導(dǎo)入其他表格數(shù)據(jù)。導(dǎo)出的表格文件還可以作為文本導(dǎo)入Word文檔中。5.2.2導(dǎo)入和導(dǎo)出表格的數(shù)據(jù)1．將網(wǎng)頁中的表格導(dǎo)出2．在其他網(wǎng)頁中導(dǎo)入表格數(shù)據(jù)3．在Word文檔中導(dǎo)入表格數(shù)據(jù)日常工作中，網(wǎng)站設(shè)計(jì)者常常需要對(duì)無序的表格數(shù)據(jù)進(jìn)行排序，以便瀏覽者可以快速找到所需的數(shù)據(jù)。Dreamweaver2020的表格數(shù)據(jù)排序功能可以為設(shè)計(jì)者解決這一難題。將插入點(diǎn)放到要排序的表格中，然后選擇“編輯>表格>排序表格”命令，彈出“排序表格”對(duì)話框。根據(jù)需要設(shè)置相應(yīng)選項(xiàng)，單擊“應(yīng)用”或“確定”按鈕完成設(shè)置。5.2.3表格數(shù)據(jù)排序“排序表格”對(duì)話框當(dāng)一個(gè)表格無法滿足對(duì)網(wǎng)頁元素的定位時(shí)，需要在表格的一個(gè)單元格中繼續(xù)插入表格，這叫作表格的嵌套，單元格中的表格即內(nèi)嵌入式表格。通過內(nèi)嵌入式表格可以將一個(gè)單元格再分成許多行和列，而且可以無限地插入內(nèi)嵌入式表格。但是內(nèi)嵌入式表格越多，瀏覽時(shí)下載頁面的時(shí)間越長(zhǎng)，因此，內(nèi)嵌入式的表格最好不超過3層。5.3表格的嵌套課堂練習(xí)——風(fēng)季租車網(wǎng)頁使用“Table”按鈕，插入表格進(jìn)行布局；使用“Image”按鈕，插入圖像；使用“CSS設(shè)計(jì)器”面板，為單元格添加背景圖像并控制文字大小、顏色。

效果圖課后習(xí)題——綠色糧倉網(wǎng)頁使用“表格式數(shù)據(jù)”命令，導(dǎo)入外部表格數(shù)據(jù)；使用“排序表格”命令，將表格的數(shù)據(jù)排序。效果圖第6章ASP本章簡(jiǎn)介：本章主要介紹ASP動(dòng)態(tài)網(wǎng)頁基礎(chǔ)和內(nèi)置對(duì)象，包括ASP服務(wù)器的安裝、ASP語法基礎(chǔ)、數(shù)組的創(chuàng)建與應(yīng)用及流程控制語句等。通過對(duì)本章的學(xué)習(xí)，讀者可以掌握ASP的基本操作。掌握ASP服務(wù)器的運(yùn)行環(huán)境、安裝IIS的方法掌握ASP語法基礎(chǔ)、數(shù)組的創(chuàng)建與應(yīng)用的方法掌握VBScript選擇和循環(huán)語句的方法掌握Request請(qǐng)求對(duì)象和Response響應(yīng)對(duì)象的方法掌握Server服務(wù)對(duì)象的使用方法課堂學(xué)習(xí)目標(biāo)6.1ASP動(dòng)態(tài)網(wǎng)頁基礎(chǔ)課堂案例——節(jié)能環(huán)保網(wǎng)頁ASP服務(wù)器的安裝ASP語法基礎(chǔ)數(shù)組的創(chuàng)建與應(yīng)用流程控制語句6.1.1課堂案例—節(jié)能環(huán)保網(wǎng)頁使用“拆分”按鈕和“設(shè)計(jì)”按鈕，切換視圖；使用函數(shù)Now()顯示當(dāng)前系統(tǒng)時(shí)間。 效果圖6.1.2ASP服務(wù)器的安裝ASP是一種服務(wù)器端腳本編寫環(huán)境，其主要功能是把腳本語言、HTML、組件和Web數(shù)據(jù)庫訪問功能有機(jī)地結(jié)合在一起，形成一個(gè)能在服務(wù)器端運(yùn)行的應(yīng)用程序，該應(yīng)用程序可根據(jù)來自瀏覽器端的請(qǐng)求生成相應(yīng)的HTML文檔并回送給瀏覽器。使用ASP可以創(chuàng)建以HTML網(wǎng)頁作為用戶界面，并能夠?qū)?shù)據(jù)庫進(jìn)行交互的Web應(yīng)用程序。1．ASP的運(yùn)行環(huán)境2．安裝IIS6.1.3ASP語法基礎(chǔ)1．ASP文件結(jié)構(gòu)ASP文件是以.asp為擴(kuò)展名的。2．聲明腳本語言在編寫ASP程序時(shí)，可以聲明ASP文件所使用的腳本語言，以便Web服務(wù)器知道ASP文件是使用何種腳本語言來編寫程序的。3．ASP與HTML在ASP網(wǎng)頁中，ASP程序包含在“<%”和“%>”之間，并在瀏覽器中打開網(wǎng)頁時(shí)產(chǎn)生動(dòng)態(tài)內(nèi)容。它與HTML標(biāo)簽互相協(xié)作，構(gòu)成動(dòng)態(tài)網(wǎng)頁。ASP程序可以出現(xiàn)在HTML文件中的任意位置，在ASP程序中也可以嵌入HTML標(biāo)簽。6.1.4數(shù)組的創(chuàng)建與應(yīng)用數(shù)組是有序數(shù)據(jù)的集合。數(shù)組中的元素都屬于同一個(gè)數(shù)據(jù)類型，用數(shù)組名和下標(biāo)可以唯一地確定數(shù)組中的元素，下標(biāo)放在緊跟數(shù)組名之后的括號(hào)中。有一個(gè)下標(biāo)的數(shù)組稱為一維數(shù)組，有兩個(gè)下標(biāo)的數(shù)組稱為二維數(shù)組，以此類推。數(shù)組的最大維數(shù)為60。1．創(chuàng)建數(shù)組在VBScript中，數(shù)組有2種類型：固定數(shù)組和動(dòng)態(tài)數(shù)組。2．應(yīng)用數(shù)組函數(shù)數(shù)組函數(shù)用于數(shù)組的操作。數(shù)組函數(shù)主要包括LBound函數(shù)、UBound函數(shù)、Split函數(shù)和Erase函數(shù)。6.1.5流程控制語句在VBScript語言中，有順序結(jié)構(gòu)、選擇結(jié)構(gòu)和循環(huán)結(jié)構(gòu)3種基本程序流程控制結(jié)構(gòu)。順序結(jié)構(gòu)是程序設(shè)計(jì)中最基本的結(jié)構(gòu)，在程序運(yùn)行時(shí)，編譯器總是按照先后順序執(zhí)行程序中的所有命令。通過選擇結(jié)構(gòu)和循環(huán)結(jié)構(gòu)可以改變代碼的執(zhí)行順序。本節(jié)介紹VBScript中的選擇語句和循環(huán)語句。6.2ASP內(nèi)置對(duì)象課堂案例——乒乓球俱樂部網(wǎng)頁Request對(duì)象Response對(duì)象Session對(duì)象Application對(duì)象Server對(duì)象ObjectContext對(duì)象6.2.1課堂案例—乒乓球俱樂部網(wǎng)頁在“代碼顯示器”窗口輸出代碼；使用Request對(duì)象獲取表單數(shù)據(jù)。效果圖6.2.2Request對(duì)象在客戶端/服務(wù)器結(jié)構(gòu)中，當(dāng)客戶端Web頁面向網(wǎng)站服務(wù)器傳遞信息時(shí)，ASP通過Request對(duì)象能夠獲取用戶提交的全部信息。信息包括客戶端用戶的HTTP變量在網(wǎng)站服務(wù)器端存放的客戶端瀏覽器的Cookies數(shù)據(jù)、附于URL之后的字符串信息、頁面中表單傳輸?shù)臄?shù)據(jù)以及客戶端的認(rèn)證信息等。6.2.3Response對(duì)象Response對(duì)象用于從服務(wù)器向用戶發(fā)送信息?？梢允褂肦esponse對(duì)象控發(fā)送給用戶的信息，包括直接發(fā)送信息給瀏覽器、重定向?yàn)g覽器到另一個(gè)URL或設(shè)置Cookies的值。Response對(duì)象提供了標(biāo)識(shí)服務(wù)器和性能的HTTP變量、發(fā)送給瀏覽器的信息和任何將在Cookies中存儲(chǔ)的信息。Response對(duì)象只有一個(gè)集合——Cookies，該集合用于設(shè)置希望放置在客戶端上的Cookies的值。Cookies集合用于當(dāng)前響應(yīng)，將Cookies值發(fā)送到客戶端。該集合訪問方式為只寫。6.2.4Session對(duì)象用戶可以使用Session對(duì)象存儲(chǔ)特定會(huì)話所需的信息。這樣，當(dāng)在Web網(wǎng)頁之間跳轉(zhuǎn)時(shí)，存儲(chǔ)在Session對(duì)象中的變量將不會(huì)丟失，而是在用戶會(huì)話中一直存在。當(dāng)用戶請(qǐng)求訪問Web網(wǎng)頁時(shí)，如果還沒有用戶會(huì)話，則Web服務(wù)器將自動(dòng)創(chuàng)建一個(gè)Session對(duì)象。當(dāng)某會(huì)話過期或被舍棄后，Web服務(wù)器將終止該會(huì)話。6.2.5Application對(duì)象ASP程序是在Web服務(wù)器上執(zhí)行的，在Web站點(diǎn)中創(chuàng)建一個(gè)基于ASP的應(yīng)用程序之后，可以通過Application對(duì)象在ASP應(yīng)用程序的所有用戶之間共享信息。也就是說，Application對(duì)象中包含的數(shù)據(jù)可以在整個(gè)Web站點(diǎn)中被所有用戶使用，并且可以在網(wǎng)站運(yùn)行期間持久保存。用Application對(duì)象可以實(shí)現(xiàn)統(tǒng)計(jì)網(wǎng)站的在線人數(shù)、創(chuàng)建多用戶游戲以及多用戶聊天室等功能。6.2.6Server對(duì)象Server對(duì)象的作用是訪問有關(guān)服務(wù)器的屬性和方法，大多數(shù)屬性和方法是作為組件實(shí)例提供的。6.2.7ObjectContext對(duì)象ObjectContext對(duì)象是一個(gè)以組件為主的事務(wù)處理對(duì)象，可以保證事務(wù)的成功完成。系統(tǒng)允許用戶在網(wǎng)頁中直接配合MicrosoftTransactionServer（微軟事務(wù)服務(wù)器MTS）使用ObjectContext對(duì)象，從而可以高效率開發(fā)或管理Web服務(wù)器應(yīng)用程序。事務(wù)是一個(gè)操作序列，這些序列可以視為一個(gè)整體。如果其中的某一個(gè)步驟沒有完成，所有與該步驟相關(guān)的內(nèi)容都將取消。事務(wù)用于對(duì)數(shù)據(jù)庫進(jìn)行可靠的操作。課堂練習(xí)——挖掘機(jī)網(wǎng)頁

使用“Form集合”命令，獲取表單數(shù)據(jù)。效果圖課后習(xí)題——建筑信息咨詢網(wǎng)頁使用Response對(duì)象的Write（）方法，向?yàn)g覽器端輸出標(biāo)簽，顯示日期。效果圖第7章CSS本章簡(jiǎn)介：CSS（CascadingStyleSheets，串聯(lián)樣式表）是萬維網(wǎng)聯(lián)盟（WorldWideWebConsortium，W3C）設(shè)定為標(biāo)準(zhǔn)的輔助HTML設(shè)計(jì)的新特性，能保持整個(gè)HTML網(wǎng)站的統(tǒng)一外觀。CSS功能強(qiáng)大、操作靈活，用CSS改變一個(gè)文件就可以改變很多網(wǎng)頁的外觀，而且其個(gè)性化的頁面表現(xiàn)效果更能吸引訪問者。Dreamweaver2020提供了功能復(fù)雜、使用方便的CSS，方便網(wǎng)站設(shè)計(jì)師制作個(gè)性化網(wǎng)頁。了解CSS的概念掌握CSS設(shè)計(jì)器面板和樣式類型的應(yīng)用掌握CSS樣式的創(chuàng)建及應(yīng)用掌握編輯樣式的方法掌握CSS樣式的屬性掌握CSS過渡效果的應(yīng)用課堂學(xué)習(xí)目標(biāo)7.1CSS的概念CSS一般譯為“層疊樣式表”或“串聯(lián)樣式表”。CSS對(duì)HTML3.2之前版本的語法進(jìn)行了變革，將某些HTML標(biāo)簽屬性簡(jiǎn)化。比如要將一段文字的大小變成36px，在HTML3.2中要寫成“<p><fontsize="36">文字的大小</font></p>”，標(biāo)簽的層層嵌套使HTML程序很臃腫；而用CSS，寫成“<pstyle="font-size:36px">文字的大小</p>”即可。CSS使用HTML格式的代碼，瀏覽器處理起來速度比較快?？梢哉fCSS是HTML的一部分，它將對(duì)象引入HTML中，可以通過腳本程序調(diào)用和改變對(duì)象的屬性，從而產(chǎn)生動(dòng)態(tài)效果。比如，當(dāng)鼠標(biāo)指針放到文字上時(shí)，文字變大，對(duì)應(yīng)的CSS代碼為<ponMouseOver="className='aa'">動(dòng)態(tài)文字</p>。7.2CSS樣式“CSS設(shè)計(jì)器”面板CSS樣式的類型7.2.1“CSS設(shè)計(jì)器”面板使用“CSS設(shè)計(jì)器”面板可以創(chuàng)建、編輯和刪除CSS樣式，并且可以將外部樣式表附加到文檔中?！癈SS設(shè)計(jì)器”面板1．打開“CSS設(shè)計(jì)器”面板2．CSS的功能7.2.2CSS樣式的類型CSS樣式可分為類選擇器、標(biāo)簽選擇器、ID選擇器、內(nèi)聯(lián)樣式、復(fù)合選擇器等幾種形式。同級(jí)別聲明嵌套式聲明7.3樣式的創(chuàng)建與應(yīng)用創(chuàng)建CSS樣式應(yīng)用CSS樣式創(chuàng)建和附加外部樣式7.3.1創(chuàng)建CSS樣式使用“CSS設(shè)計(jì)器”面板可以創(chuàng)建類選擇器、標(biāo)簽選擇器、ID選擇器和復(fù)合選擇器等CSS樣式。7.3.2應(yīng)用CSS樣式創(chuàng)建自定義樣式后，還要為不同的網(wǎng)頁元素應(yīng)用不同類型的樣式，其具體操作步驟如下。（1）在文檔編輯窗口中選擇網(wǎng)頁元素。（2）根據(jù)選擇器類型的不同應(yīng)用方法不同。7.3.3創(chuàng)建和附加外部樣式如果不同網(wǎng)頁的不同網(wǎng)頁元素需要同一樣式時(shí)，可通過附加外部樣式來實(shí)現(xiàn)。首先創(chuàng)建一個(gè)外部樣式，然后在不同網(wǎng)頁的不同HTML元素中附加定義好的外部樣式即可。1．創(chuàng)建外部樣式2．附加外部樣式7.4編輯樣式網(wǎng)站設(shè)計(jì)者有時(shí)需要修改應(yīng)用于文檔的內(nèi)部樣式和外部樣式，如果修改內(nèi)部樣式，系統(tǒng)會(huì)自動(dòng)重新設(shè)置受它控制的所有HTML對(duì)象的格式；如果修改外部樣式文件，系統(tǒng)會(huì)自動(dòng)重新設(shè)置與它鏈接的所有HTML文檔。7.5CSS樣式的屬性

課堂案例——山地車網(wǎng)頁布局屬性文本屬性邊框?qū)傩员尘皩傩?.5.1課堂案例——山地車網(wǎng)頁使用“Table”按鈕，插入表格；使用“CSS設(shè)計(jì)器”面板，設(shè)置導(dǎo)航按鈕的鼠標(biāo)指針經(jīng)過變化效果。效果圖7.5.2布局屬性“布局”選項(xiàng)組用于控制網(wǎng)頁中塊元素的大小、邊距、填充和位置屬性等。7.5.3文本屬性“文本”選項(xiàng)組用于控制網(wǎng)頁中文字的字體、字號(hào)、顏色、行距、縮進(jìn)、對(duì)齊、陰影和列表等屬性。7.5.4邊框?qū)傩浴斑吙颉边x項(xiàng)組用于控制塊元素的邊框粗細(xì)、樣式、顏色及圓角等。7.5.5背景屬性“背景”選項(xiàng)組用于在網(wǎng)頁元素后加入背景圖像或背景顏色等。7.6CSS過渡效果課堂案例——羽毛球運(yùn)動(dòng)網(wǎng)頁“CSS過渡效果”面板創(chuàng)建CSS過渡效果7.6.1課堂案例——羽毛球運(yùn)動(dòng)網(wǎng)頁使用“CSS設(shè)計(jì)器”面板，設(shè)置文字的字體、顏色；使用“CSS過渡效果”面板，設(shè)置文字的變色效果。效果圖7.6.2“CSS過渡效果”面板在“CSS過渡效果”面板中可以新建、刪除和編輯CSS過渡效果。7.6.3創(chuàng)建CSS過渡效果在創(chuàng)建CSS過渡效果時(shí)，需要為元素指定過渡效果類。如果在創(chuàng)建效果類之前已選擇元素，則過渡效果類會(huì)自動(dòng)應(yīng)用于選定的元素。課堂練習(xí)——電商網(wǎng)頁使用“CSS設(shè)計(jì)器”面板，設(shè)置文字的字號(hào)、顏色及行距等。效果圖課后習(xí)題——鮮花速遞網(wǎng)頁效果圖使用“CSS設(shè)計(jì)器”面板，設(shè)置文字的字體、顏色及字號(hào)；使用“CSS過渡效果”面板，為文字添加陰影效果。第8章模板和庫本章簡(jiǎn)介：制作網(wǎng)站的時(shí)候，為了保持網(wǎng)站中各網(wǎng)頁風(fēng)格的統(tǒng)一，需要在每個(gè)網(wǎng)頁中制作一些相同的內(nèi)容，如相同的導(dǎo)航條、圖標(biāo)等。網(wǎng)站設(shè)計(jì)初學(xué)者可能需要花費(fèi)大量的時(shí)間和精力在這些重復(fù)性的工作上。其實(shí)為了提高設(shè)計(jì)制作人員的工作效率，Dreamweaver2020提供了模板和庫功能，利用它們，即可從這些重復(fù)性工作中解脫出來。掌握“資源”面板的使用方法掌握創(chuàng)建模板、可編輯區(qū)域、重復(fù)區(qū)域、重復(fù)表格的創(chuàng)建方法掌握模板的重命名、修改模板文件、刪除模板文件和用模板更新的方法掌握如何創(chuàng)建庫文件掌握重命名、刪除、修改和更新庫項(xiàng)目的方法課堂學(xué)習(xí)目標(biāo)8.1“資源”面板“資源”面板用于管理和使用制作網(wǎng)站的各種元素，如圖像或視頻文件等。選擇“窗口>資源”命令，即可彈出“資源”面板。

“資源”面板課堂案例——時(shí)尚前沿網(wǎng)頁創(chuàng)建模板定義和取消可編輯區(qū)域創(chuàng)建基于模板的網(wǎng)頁管理模板8.2模板

8.2.1課堂案例—時(shí)尚前沿網(wǎng)頁使用“創(chuàng)建模板”按鈕，創(chuàng)建模板；使用“可編輯區(qū)域”和“重復(fù)區(qū)域”按鈕，制作可編輯區(qū)域和重復(fù)可編輯區(qū)域。效果圖8.2.2創(chuàng)建模板在Dreamweaver2020中創(chuàng)建模板非常容易。當(dāng)用戶創(chuàng)建模板之后，Dreamweaver2020會(huì)自動(dòng)把模板存儲(chǔ)在站點(diǎn)的本地根目錄下的“Templates”子文件夾中，文件擴(kuò)展名為.dwt。如果此文件夾不存在，當(dāng)存儲(chǔ)一個(gè)新模板時(shí)，Dreamweaver2020會(huì)自動(dòng)生成此子文件夾。1．創(chuàng)建空白模板2．將現(xiàn)有文檔存為模板8.2.3定義和取消可編輯區(qū)域創(chuàng)建模板后，網(wǎng)站設(shè)計(jì)者可能還需要對(duì)模板的內(nèi)容進(jìn)行編輯，這時(shí)可以指定模板中哪些內(nèi)容是可以編輯的，哪些內(nèi)容是不可以編輯的。模板的不可編輯區(qū)域是指基于模板創(chuàng)建的網(wǎng)頁中固定不變的元素；可編輯模板區(qū)域是指基于模板創(chuàng)建的網(wǎng)頁中用戶編輯修改的區(qū)域。當(dāng)創(chuàng)建一個(gè)模板或?qū)⒁粋€(gè)網(wǎng)頁另存為模板時(shí)，Dreamweaver2020默認(rèn)將所有區(qū)域標(biāo)志為鎖定，因此設(shè)計(jì)者要根據(jù)具體要求定義和修改模板的可編輯區(qū)域。1．對(duì)已有的模板進(jìn)行修改2．定義可編輯區(qū)域3．定義可編輯的重復(fù)區(qū)域4．定義可編輯的重復(fù)表格5．取消可編輯區(qū)域標(biāo)記8.2.4創(chuàng)建基于模板的網(wǎng)頁創(chuàng)建基于模板的網(wǎng)頁有2種方法，一是使用“新建”命令創(chuàng)建基于模板的新文檔；二是利用“資源”面板中的模板來創(chuàng)建基于模板的網(wǎng)頁。8.2.5管理模板創(chuàng)建模板后可以重命名模板文件、修改模板文件和刪除模板文件。8.3庫課堂案例——品茗茶業(yè)網(wǎng)頁創(chuàng)建庫項(xiàng)目向頁面添加庫項(xiàng)目管理庫項(xiàng)目8.3.1課堂案例—品茗茶業(yè)網(wǎng)頁使用“庫”面板，添加庫項(xiàng)目；使用注冊(cè)的庫項(xiàng)目，制作網(wǎng)頁文檔；使用“CSS設(shè)計(jì)器”面板，更改文本的顏色。效果圖8.3.2創(chuàng)建庫項(xiàng)目庫項(xiàng)目可以包含文檔<body></body>部分中的任意元素，包括文本、表格、表單、JavaApplet、插件、ActiveX元素、導(dǎo)航條和圖像等。庫項(xiàng)目只是對(duì)網(wǎng)頁元素的引用，原始文件必須保存在指定的位置。1．基于選定內(nèi)容創(chuàng)建庫項(xiàng)目2．創(chuàng)建空白庫項(xiàng)目8.3.3向頁面添加庫項(xiàng)目當(dāng)向頁面添加庫項(xiàng)目時(shí)，應(yīng)把實(shí)際內(nèi)容以及對(duì)該庫項(xiàng)目的引用一起插入到文檔中。此時(shí)，無須提供原項(xiàng)目就可以正常顯示。在頁面中插入庫項(xiàng)目的具體操作步驟如下。（1）將插入點(diǎn)放在文檔編輯窗口中的合適位置。（2）選擇“窗口>資源”命令，彈出“資源”面板。單擊“庫”按鈕，進(jìn)入“庫”面板。將庫項(xiàng)目插入到網(wǎng)頁中。8.3.4管理庫項(xiàng)目當(dāng)修改庫項(xiàng)目時(shí)，會(huì)同時(shí)更新使用該項(xiàng)目的所有文檔。如果選擇不更新，那么文檔將不會(huì)更新但仍保持與庫項(xiàng)目的關(guān)聯(lián)，可以在以后進(jìn)行更新。1．重命名庫項(xiàng)目2．刪除庫項(xiàng)目3．重新創(chuàng)建已刪除的庫項(xiàng)目4．修改庫項(xiàng)目5．用最新庫項(xiàng)目更新課堂練習(xí)——游天下網(wǎng)頁使用“創(chuàng)建模板”按鈕，創(chuàng)建模板；使用“可編輯區(qū)域”按鈕和“重復(fù)區(qū)域”按鈕，制作可編輯區(qū)域和可編輯的重復(fù)區(qū)域。效果圖課后習(xí)題——婚禮策劃網(wǎng)頁使用“庫”面板添加庫項(xiàng)目；使用注冊(cè)的庫項(xiàng)目制作網(wǎng)頁文檔。效果圖第9章表單本章簡(jiǎn)介：隨著網(wǎng)絡(luò)的普及，越來越多的人在網(wǎng)上擁有了自己的個(gè)人網(wǎng)站。一般情況下，個(gè)人網(wǎng)站的設(shè)計(jì)者除了想宣傳自己的相關(guān)內(nèi)容外，還希望收到他人的反饋信息。表單為網(wǎng)站設(shè)計(jì)者提供了通過網(wǎng)絡(luò)接收用戶數(shù)據(jù)的平臺(tái)，如注冊(cè)會(huì)員頁、網(wǎng)上訂貨頁、檢索頁等，都是通過表單來收集用戶信息。因此，表單是網(wǎng)站管理者與瀏覽者間溝通的橋梁。掌握表單的使用方法掌握單行文本域、多行文本域和密碼文本域的創(chuàng)建方法掌握單選按鈕、單選按鈕組、復(fù)選框和復(fù)選框組的創(chuàng)建方法掌握下拉列表和滾動(dòng)列表的創(chuàng)建方法掌握文件域、圖像按鈕和普通按鈕的創(chuàng)建方法掌握電子郵件文本域、URL文本域、Tel文本域、搜索文本域、數(shù)字文本域、范圍文本域和顏色的插入方法掌握日期、時(shí)間類表單的插入方法課堂學(xué)習(xí)目標(biāo)9.1表單課堂案例——用戶登錄網(wǎng)頁創(chuàng)建表單表單的屬性文本域9.1.1課堂案例—用戶登錄網(wǎng)頁使用“表單”按鈕，插入表單；使用“Table”按鈕，插入表格；使用表單中的“文本”按鈕，插入單行文本域；使用表單中的“密碼”按鈕，插入密碼文本域；使用“屬性”面板設(shè)置表格、單行文本域、密碼文本域的屬性。效果圖9.1.2創(chuàng)建表單表單是一個(gè)“容器”，用來存放表單對(duì)象，并負(fù)責(zé)將表單對(duì)象的值提交給服務(wù)器端的某個(gè)程序處理，所以在添加文本域、按鈕等表單對(duì)象之前，要先創(chuàng)建表單。 在文檔中插入表單的具體操作步驟如下。（1）在文檔編輯窗口中，將光標(biāo)置入到希望插入表單的位置。（2）彈出“表單”命令，文檔編輯窗口中出現(xiàn)一個(gè)紅色的虛輪廓線用來指示表單域?！氨韱巍毙Ч麍D9.1.3表單的屬性在文檔編輯窗口中選擇表單，“屬性”面板中出現(xiàn)表單屬性。表單“屬性”面板9.1.4文本域制作網(wǎng)頁時(shí)通常使用表單的文本域來接收用戶輸入的信息，文本域包括單行文本域、多行文本域、密碼文本域3種。一般情況下，當(dāng)用戶輸入較少的信息時(shí)，使用單行文本域接收；當(dāng)用戶輸入較多的信息時(shí)，使用多行文本域接收；當(dāng)用戶輸入密碼等保密信息時(shí)，使用密碼文本域接收。9.2單選按鈕和復(fù)選框課堂案例——傳統(tǒng)文化網(wǎng)頁單選按鈕單選按鈕組復(fù)選框9.2.1課堂案例—傳統(tǒng)文化網(wǎng)頁使用“單選按鈕”按鈕，插入單選按鈕；使用“復(fù)選框”按鈕，插入復(fù)選框。效果圖9.2.2單選按鈕為了使單選按鈕的布局更加合理，通常逐個(gè)插入單選按鈕。若要在表單域中插入單選按鈕，先將光標(biāo)放置在表單內(nèi)需要插入單選按鈕的位置，然后插入單選按鈕?！皢芜x按鈕”效果圖9.2.3單選按鈕組先將光標(biāo)放在表單輪廓內(nèi)需要插入單選按鈕組的位置，然后打開“單選按鈕組”對(duì)話框。打開“單選按鈕組”對(duì)話框有以下2種方法。單擊“插入”面板“表單”選項(xiàng)卡中的“單選按鈕組”按鈕。選擇“插入>表單>單選按鈕組”命令?！皢芜x按鈕組”效果圖“單選按鈕組”對(duì)話框9.2.4復(fù)選框?yàn)榱耸箯?fù)選框的布局更加合理，通常逐個(gè)插入復(fù)選框。若要在表單域中插入復(fù)選框，先將光標(biāo)放在表單內(nèi)需要插入復(fù)選框的位置，然后插入復(fù)選框?！皬?fù)選框”效果圖9.3下拉列表、滾動(dòng)列表、文件域和按鈕課堂案例——健康測(cè)試網(wǎng)頁創(chuàng)建下拉列表和滾動(dòng)列表課堂案例——網(wǎng)上營(yíng)業(yè)廳網(wǎng)頁創(chuàng)建文件域插入圖像按鈕插入普通按鈕插入“提交”按鈕插入“重置”按鈕9.3.1課堂案例—健康測(cè)試網(wǎng)頁使用“選擇”按鈕，插入下拉菜單；使用“屬性”面板，設(shè)置下拉列表的屬性。效果圖1.插入下拉列表2.插入滾動(dòng)列表9.3.2創(chuàng)建下拉列表和滾動(dòng)列表“下拉菜單”效果圖“滾動(dòng)列表”效果圖9.3.3課堂案例——網(wǎng)上營(yíng)業(yè)廳網(wǎng)頁使用“圖像按鈕”，插入圖像按鈕。效果圖9.3.4創(chuàng)建文件域網(wǎng)頁中要實(shí)現(xiàn)訪問者上傳文件的功能，需要在表單中插入文件域。文件域的外觀與其他文本域類似，只是文件域還包含一個(gè)“瀏覽”按鈕。訪問者可以手動(dòng)輸入要上傳的文件路徑，也可以使用“瀏覽”按鈕定位并選擇該文件。若要在表單域中插入文件域，則先將光標(biāo)放在表單內(nèi)需要插入文件域的位置，然后插入文件域。“文件域”效果圖9.3.5插入圖像按鈕Dreamweaver2020默認(rèn)的按鈕樣式比較死板，為了設(shè)計(jì)需要，可使用自定義的圖像代替按鈕?！斑x擇圖像源文件”對(duì)話框9.3.6插入普通按鈕按鈕的作用是控制表單的操作。一般情況下，表單中設(shè)有“提交”按鈕、“重置”按鈕和普通按鈕等，瀏覽者在網(wǎng)上申請(qǐng)QQ、郵箱或會(huì)員注冊(cè)時(shí)會(huì)見到。Dreamweaver2020將按鈕分為3種類型，即按鈕、“提交”按鈕和“重置”按鈕。其中，按鈕元素需要制作者指定單擊該按鈕時(shí)要執(zhí)行的操作，例如添加一個(gè)JavaScript腳本，使得瀏覽者單擊該按鈕時(shí)打開另一個(gè)頁面?！疤峤话粹o”效果圖按鈕“屬性”面板9.3.7插入“提交”按鈕“提交”按鈕的作用是，在用戶單擊該按鈕時(shí)將表單數(shù)據(jù)內(nèi)容提交到表單域的Action屬性中指定的處理程序中進(jìn)行處理。若要在表單域中插入“提交”按鈕，先將光標(biāo)放在表單輪廓內(nèi)需要插入“提交”按鈕的位置，然后插入“提交”按鈕?！疤峤弧卑粹o“屬性”面板9.3.8插入“重置”按鈕“重置”按鈕的作用是，在用戶單擊該按鈕時(shí)將清除表單中所做的設(shè)置，恢復(fù)為默認(rèn)的設(shè)置內(nèi)容。若要在表單域中插入“重置”按鈕，先將光標(biāo)放在表單輪廓內(nèi)需要插入“重置”按鈕的位置，然后插入“重置”按鈕?！爸刂谩卑粹o“屬性”面板9.4創(chuàng)建HTML5表單元素課堂案例——森林動(dòng)物園網(wǎng)頁插入電子郵件文本域插入U(xiǎn)RL文本域插入Tel文本域插入搜索文本域插入數(shù)字文本域插入范圍文本域插入顏色文本域課堂案例——鑫飛越航空網(wǎng)頁插入月表單元素插入周表單元素插入日期表單元素插入時(shí)間表單元素插入日期時(shí)間表單元素插入日期時(shí)間（當(dāng)?shù)兀┍韱卧?.4.1課堂案例—森林動(dòng)物園網(wǎng)頁使用“文本”按鈕插入單行文本域；使用“Tel”按鈕插入Tel文本域；使用“日期”按鈕插入日期表單；使用“文本區(qū)域”按鈕插入多行文本域；使用“提交”按鈕和“‘重置’按鈕”插入“提交”和“重置”按鈕；使用“屬性”面板設(shè)置各表單的屬性。效果圖9.4.2插入電子郵件文本域Dreamweaver2020為了適應(yīng)HTML5的發(fā)展增加了許多全新的HTML5表單元素，電子郵件文本域就是其中的一種。電子郵件文本域是專門為輸入郵箱地址而定義的文本框，相應(yīng)程序會(huì)驗(yàn)證輸入的文本是否符合郵箱地址的格式，若不符合會(huì)提示驗(yàn)證錯(cuò)誤。若要在表單域中插入電子郵件文本域，先將光標(biāo)置于表單內(nèi)需要插入電子郵件文本域的位置，然后插入電子郵件文本域。電子郵件文本域“屬性”面板9.4.3插入U(xiǎn)RL文本域URL文本域是專門為輸入U(xiǎn)RL地址而定義的文本框，在驗(yàn)證輸入的文本格式時(shí)，如果該文本框中的內(nèi)容不符合URL地址的格式，會(huì)提示驗(yàn)證錯(cuò)誤。若要在表單域中插入U(xiǎn)RL文本域，先將光標(biāo)放在表單內(nèi)需要插入U(xiǎn)RL文本域的位置，然后插入U(xiǎn)RL文本域。URL文本域“屬性”面板9.4.4插入Tel文本域Tel文本域是專門為輸入電話號(hào)碼而定義的文本框，沒有特殊的驗(yàn)證規(guī)則。要在表單域中插入Tel表單文本域，先將光標(biāo)置于表單內(nèi)需要插入Tel文本域的位置，然后插入Tel文本域。Tel文本域“屬性”面板9.4.5插入搜索文本域搜索表單元素是專門為輸入搜索內(nèi)容而定義的文本框，沒有特殊的驗(yàn)證規(guī)則。若要在表單域中插入搜索文本域，先將光標(biāo)放在表單輪廓內(nèi)需要插入搜索文本域的位置，然后插入搜索文本域。搜索文本域“屬性”面板9.4.6插入數(shù)字文本域數(shù)字表單元素是專門為輸入特定的數(shù)字而定義的文本框，具有“Min”、“Max”和“Step”屬性，表示允許輸入的最小值、最大值和調(diào)整步長(zhǎng)。若要在表單域中插入數(shù)字文本域，先將光標(biāo)放在表單內(nèi)需要插入數(shù)字文本域的位置，然后插入數(shù)字文本域。數(shù)字文本域“屬性”面板9.4.7插入范圍文本域范圍文本域?qū)⑽谋究蝻@示為滑動(dòng)條，作為某一特定范圍內(nèi)的數(shù)值選擇器。要在表單域中插入范圍文本域，先將光標(biāo)置于表單內(nèi)需要插入范圍文本域的位置，然后插入范圍文本域。范圍文本域“屬性”面板9.4.8插入顏色文本域顏色表單元素應(yīng)用于網(wǎng)頁時(shí)會(huì)默認(rèn)提供一個(gè)顏色選擇器，大部分瀏覽器還不能實(shí)現(xiàn)該效果，但Chrome、火狐瀏覽器等支持該表單元素。若要在表單域中插入顏色文本域，先將光標(biāo)放在表單內(nèi)需要插入顏色文本域的位置，然后插入顏色文本域。顏色“屬性”面板9.4.9課堂案例——鑫飛越航空網(wǎng)頁使用“日期”按鈕，插入日期元素。9.4.10插入月表單元素月表單元素的作用是為用戶提供一個(gè)月選擇器，但在大部分瀏覽器中還不能實(shí)現(xiàn)該效果，但Chrome、360、Opera等瀏覽器支持該表單元素。若要在表單域中插入月表單，先將光標(biāo)放在表單內(nèi)需要插入月表單的位置，然后插入月表單元素。月表單“屬性”面板9.4.11插入周表單元素周表單元素的作用是為用戶提供一個(gè)周選擇器，大部分瀏覽器中還不支持該表單元素，但Chrome、360、Opera等瀏覽器支持該表單元素。若要在表單域中插入周表單，先將光標(biāo)放在表單內(nèi)需要插入周表單的位置，然后插入周表單元素。周表單“屬性”面板9.4.12插入日期表單元素日期表單元素的作用是為用戶提供一個(gè)日期選擇器，大部分瀏覽器還不支持該表單元素，但Chrome、360、Opera等瀏覽器支持該表單元素。若要在表單域中插入日期表單，先將光標(biāo)放在表單內(nèi)需要插入日期表單的位置，然后插入日期表單元素。日期表單“屬性”面板9.4.13插入時(shí)間表單元素時(shí)間表單元素的作用是為用戶提供一個(gè)時(shí)間選擇器，大部分瀏覽器還不支持該表單元素，但Chrome、360、Opera等瀏覽器支持該表單元素。若要在表單域中插入時(shí)間表單，先將光標(biāo)放在表單輪廓內(nèi)需要插入時(shí)間表單的位置，然后插入時(shí)間表單。時(shí)間表單“屬性”面板9.4.14插入日期時(shí)間表單元素日期時(shí)間表單元素的作用是為用戶提供一個(gè)完整的日期時(shí)間選擇器，大部分瀏覽器還不支持該表單元素，但Chrome、360、Opera等瀏覽器支持該表單元素。若要在在表單域中插入日期時(shí)間表單，先將光標(biāo)放在表單內(nèi)需要插入日期時(shí)間表單的位置，然后插入日期時(shí)間表單元素。日期時(shí)間表單“屬性”面板9.4.15插入日期時(shí)間（當(dāng)?shù)兀┍韱卧厝掌跁r(shí)間（當(dāng)?shù)兀┍韱卧氐淖饔檬菫橛脩籼峁┮粋€(gè)完整的日期時(shí)間（不包含時(shí)區(qū)）選擇器，大部分瀏覽器還不支持該表單元素，但Chrome、360、Opera等瀏覽器支持該表單元素。若要在表單域中插入日期時(shí)間（當(dāng)?shù)兀┍韱?，先將光?biāo)放在表單內(nèi)需要插入日期時(shí)間（當(dāng)?shù)兀┍韱蔚奈恢?，然后插入日期時(shí)間（當(dāng)?shù)兀┍韱卧?。日期時(shí)間（當(dāng)?shù)兀┍韱巍皩傩浴泵姘逭n堂練習(xí)——智能掃地機(jī)器人網(wǎng)頁使用“表單”按鈕插入表單；使用“Table”按鈕插入表格，進(jìn)行頁面布局；使用“圖像按鈕”按鈕插入圖像按鈕；使用“復(fù)選框”按鈕插入復(fù)選框；使用“文本”按鈕插入單行文本域；使用“Tel”按鈕插入Tel文本域。效果圖課后習(xí)題——房屋評(píng)估網(wǎng)頁使用“文本”按鈕，插入文本字段；使用“圖像按鈕”按鈕，插入圖像按鈕；使用“單選按鈕”按鈕，插入單選項(xiàng)。效果圖第10章行為本章簡(jiǎn)介：行為是Dreamweaver2020預(yù)置的JaveScript程序庫，每個(gè)行為包括一個(gè)動(dòng)作和一個(gè)事件。任何一個(gè)動(dòng)作都需要一個(gè)事件激活，兩者相輔相成。動(dòng)作是一段已編輯好的JaveScript代碼，這些代碼在特定事件被激發(fā)時(shí)執(zhí)行。本章主要講解行為和動(dòng)作的應(yīng)用方法，通過這些內(nèi)容的學(xué)習(xí)，讀者可以在網(wǎng)頁中熟練應(yīng)用行為和動(dòng)作，使設(shè)計(jì)制作的網(wǎng)頁更加生動(dòng)精彩。掌握“行為”面板的使用掌握調(diào)用JavaScript、打開瀏覽器窗口和轉(zhuǎn)到URL的創(chuàng)建方法掌握檢查插件、檢查表單和交換圖像的創(chuàng)建方法掌握容器的文本、狀態(tài)欄文本、文本域文字的設(shè)置方法掌握跳轉(zhuǎn)菜單和跳轉(zhuǎn)菜單開始的設(shè)置方法課堂學(xué)習(xí)目標(biāo)10.1行為“行為”面板

應(yīng)用行為10.1.1“行為”面板使用“行為”面板為網(wǎng)