1、學(xué)習(xí)情境六：Dreamweaver制作網(wǎng)頁參考手冊【教學(xué)目標(biāo)】能力目標(biāo)：1、 培養(yǎng)用Dreamweaver制作網(wǎng)頁的能力2、 提高學(xué)生在制作網(wǎng)頁過程中應(yīng)用Dreamweaver的各種功能的能力3、 培養(yǎng)學(xué)生在實(shí)踐中掌握知識(shí)的能力4、 培養(yǎng)學(xué)生利用所學(xué)知識(shí)設(shè)計(jì)與制作網(wǎng)頁的能力5、 提高學(xué)生的動(dòng)手能力知識(shí)目標(biāo)：1、掌握Dreamweaver的各種菜單的用法2、掌握掌握在代碼模式和設(shè)計(jì)模式下熟練制作網(wǎng)頁的能力3、掌握利用Dreamweaver制作網(wǎng)頁的一般步驟職業(yè)素質(zhì)目標(biāo)：1、 獲取知識(shí)的能力2、 知識(shí)應(yīng)用能力3、 自主學(xué)習(xí)能力4、 動(dòng)手能力【教學(xué)時(shí)間】30課時(shí)【任務(wù)1】制作“跟我學(xué)電腦”網(wǎng)頁(2課

2、時(shí))【效果圖】【學(xué)習(xí)目標(biāo)】“跟我學(xué)電腦”網(wǎng)頁是使用Dreamweaver制作的第一個(gè)網(wǎng)頁，該網(wǎng)頁由標(biāo)題、文字、圖像等元素組成。通過制作該網(wǎng)頁，可以了解Dreamweaver的基本操作，為后面的學(xué)習(xí)打下一個(gè)堅(jiān)實(shí)的基礎(chǔ)?！救蝿?wù)要求】教師布置任務(wù)、要求學(xué)生根據(jù)參考手冊掌握學(xué)習(xí)目標(biāo)的內(nèi)容一、咨詢（15分鐘）明確任務(wù)后，教師幫助學(xué)生理解任務(wù)要求，分析任務(wù)，并介紹網(wǎng)頁設(shè)計(jì)整體情況的同時(shí)提出資訊建議，提供獲取資訊的方法和途徑信息。學(xué)生依據(jù)任務(wù)及提示，尋找完成任務(wù)所需的資源。例如：教材參考手冊網(wǎng)上查詢【相關(guān)知識(shí)點(diǎn)】1什么是DreamweaverDreamweaver是原Macromedia公司推出的網(wǎng)頁制作和

3、網(wǎng)站管理的工具軟件，集網(wǎng)頁制作與網(wǎng)站管理于一身。Dreamweaver是一套功能強(qiáng)大的可視化設(shè)計(jì)工具、應(yīng)用開發(fā)環(huán)境和代碼編輯軟件。軟件的集成程度非常高，開發(fā)環(huán)境精簡而高效，開發(fā)人員能夠運(yùn)用Dreamweaver與服務(wù)器技術(shù)構(gòu)建功能強(qiáng)大的網(wǎng)絡(luò)應(yīng)用程序銜接到用戶的數(shù)據(jù)、網(wǎng)絡(luò)服務(wù)體系。Dreamweaver提供了開放式和可擴(kuò)展的工作環(huán)境。賦予使用者最大的自由度和靈活性。Dreamweaver將世界一流水平的“設(shè)計(jì)”和“代碼”編輯器合二為一。它操作簡便，可以使開發(fā)人員和設(shè)計(jì)師能夠快速創(chuàng)建代碼規(guī)范的應(yīng)用程序，適合各個(gè)階段、各個(gè)水平的用戶使用。初學(xué)者在使用Dreamweaver時(shí)，可以無須編寫一句代碼就能

4、夠快速創(chuàng)建自己的網(wǎng)頁。利用該軟件，能夠快速創(chuàng)建格式規(guī)范的網(wǎng)頁文檔。Dreamweaver的整個(gè)創(chuàng)作環(huán)境十分人性化，它不僅界面美觀、友好，而且允許用戶個(gè)性化的工作環(huán)境。用戶可以創(chuàng)建完全屬于自己的對(duì)象和命令，修改鍵盤快捷鍵，甚至可以編寫JavaScript代碼擴(kuò)充軟件功能。Dreamweaver可以進(jìn)行多個(gè)站點(diǎn)的管理，設(shè)置了HTML語言編輯器，支持DHTML和CSS，分類提供了頁面對(duì)象，可凈化Microsoft Word生成的HTML文件，可以導(dǎo)入Microsoft Excel和Microsoft Access建立的數(shù)據(jù)文件，導(dǎo)入和編輯Fireworks制作的HTML源代碼和圖像，以及導(dǎo)入Flas

5、h動(dòng)畫、按鈕和文字，編輯動(dòng)態(tài)頁面等，同時(shí)它可以用來編輯交互式的網(wǎng)頁，即在因特網(wǎng)上，客戶和服務(wù)器進(jìn)行信息交流。Dreamweaver是開放式和可擴(kuò)展的。賦予用戶最大的自由度和靈活性來選擇最適合用戶的技術(shù)。Dreamweaver還提供了純粹的代碼編輯環(huán)境，允許用戶使用HTML、CSS、JavaScript、CFML、ASP、JSP、PHP和服務(wù)器技術(shù)，創(chuàng)建動(dòng)態(tài)的、數(shù)據(jù)庫驅(qū)動(dòng)的網(wǎng)頁和程序。另外，還可以幫助用戶輕松創(chuàng)建XSLT頁、附加XML文件，并在Web頁中顯示XML數(shù)據(jù)。目前，Dreamweaver的最新版本是Dreamweaver 8，已經(jīng)推出了中文Dreamweaver 8。2進(jìn)入Dreamw

6、eaver 8第一次運(yùn)行Dreamweaver 8時(shí)，會(huì)彈出“工作區(qū)設(shè)置”對(duì)話框，如圖1-2-4所示。可以看出，Dreamweaver 8提供了兩種工作區(qū)布局（即工作界面）。如下圖：選中某一種工作區(qū)名稱的單選項(xiàng)，再單擊“確定”按鈕，即可進(jìn)入相應(yīng)的工作區(qū)。例如，單擊選中“設(shè)計(jì)器”單選項(xiàng)，再單擊“確定”按鈕，即可進(jìn)入“Macromedia Dreamweaver 8”對(duì)話框。通常在沒有任何文檔打開時(shí)，也會(huì)自動(dòng)彈出“Macromedia Dreamweaver 8”對(duì)話框。如果選中“不再顯示此對(duì)話框”復(fù)選框，則下次啟動(dòng)Dreamweaver時(shí)就不會(huì)再出現(xiàn)此對(duì)話框?！癕acromedia Dreamw

7、eaver 8”對(duì)話框中各欄的作用如下。1）“打開最近項(xiàng)目”欄：此欄中列出了Dreamweaver最近打開過的文檔名稱，單擊其中的項(xiàng)目可以快速彈出已經(jīng)編輯過的文檔。單擊“打開”按鈕，可以彈出“打開”對(duì)話框，利用該對(duì)話框可以打開選定的文檔。（2）“創(chuàng)建新項(xiàng)目”欄：此欄中列出了“新建文檔”對(duì)話框中的大部分可以創(chuàng)建的項(xiàng)目，利用它可以快速創(chuàng)建一個(gè)新的文檔或者一個(gè)站點(diǎn)。（3）“從范例創(chuàng)建”欄：單擊其中的文件夾按鈕，可彈出不同的“新建文檔”對(duì)話框，利用該對(duì)話框可以新建一個(gè)相應(yīng)的文檔。在它的底部有一個(gè)Dreamweaver Exchange按鈕，單擊此按鈕后，將鏈接到Dreamweaver Exchange

8、網(wǎng)站。（4）“Dreamweaver幫助”欄：有“進(jìn)入Dreamweaver快速指南”等3個(gè)鏈接文字。單擊這3個(gè)鏈接文字，可以進(jìn)入網(wǎng)站中相應(yīng)的站點(diǎn)，利用網(wǎng)站查找相關(guān)信息。單擊“Macromedia Dreamweaver 8”對(duì)話框中“創(chuàng)建新項(xiàng)目”欄內(nèi)的“HTML”鏈接文字，即可進(jìn)入采用“設(shè)計(jì)器”風(fēng)格的Dreamweaver 8的工作區(qū)，如下圖所示：由上圖可以看出，Dreamweaver 8的工作區(qū)主要由標(biāo)題欄、菜單欄、文檔窗口、狀態(tài)欄、“插入”欄（“對(duì)象”欄或“對(duì)象”面板）、“標(biāo)準(zhǔn)工具”欄、“文檔工具”欄、“屬性”欄（“屬性”面板或?qū)傩詸z查器）和“隱藏面板”按鈕等組成。單擊“查看”“工具欄”

9、“××”菜單命令，可打開或關(guān)閉“插入”欄、“標(biāo)準(zhǔn)工具”欄、“文檔工具”欄或“樣式呈現(xiàn)”欄。單擊“窗口”“屬性”菜單命令，可以打開或關(guān)閉“屬性”欄。單擊“窗口”“插入”菜單命令，可以打開或關(guān)閉“插入”欄。單擊“查看”“隱藏面板”按鈕，可隱藏面板組和“屬性”欄，單擊“查看”“顯示面板”按鈕，可顯示面板組和“屬性”欄。3更換Dreamweaver 8工作區(qū)和默認(rèn)文檔類型（1）單擊“窗口”“工作區(qū)布局”“編碼器”菜單命令，即可進(jìn)入采用“編碼器”風(fēng)格的Dreamweaver 8的工作區(qū)，如圖1-2-6所示。單擊“窗口”“工作區(qū)布局”“設(shè)計(jì)器”菜單命令，可進(jìn)入采用“設(shè)計(jì)器”風(fēng)格的Dre

10、amweaver 8的工作區(qū)，如下圖所示：（2）調(diào)整工作區(qū)布局后，單擊“窗口”“工作區(qū)布局”“保存當(dāng)前”菜單命令，可彈出“保存工作區(qū)布局”對(duì)話框，在“名稱”文本框內(nèi)輸入名稱，如下圖所示：再單擊“確定”按鈕，即可將當(dāng)前工作區(qū)布局保存。以后只要單擊“窗口”“工作區(qū)布局”“××××”菜單命令（例如，單擊“shendalin”菜單命令），即可進(jìn)入相應(yīng)風(fēng)格的Dreamweaver 8的工作區(qū)。3）改變默認(rèn)文檔類型：單擊“編輯”“首選參數(shù)”菜單命令，彈出“首選參數(shù)”對(duì)話框（Dreamweaver 8的許多設(shè)置需要使用該對(duì)話框，以后將不斷涉及該對(duì)話框的使用）。單擊該對(duì)

11、話框左邊“分類”欄中的“新建文檔”選項(xiàng)。此時(shí)的“首選參數(shù)”對(duì)話框如圖1-2-8所示。在“默認(rèn)文檔類型”下拉列表框內(nèi)可以選擇默認(rèn)的文檔類型。4Dreamweaver 8工作區(qū)簡介（1）文檔窗口文檔窗口用來顯示和編輯當(dāng)前的文檔頁面。文檔窗口的底部有狀態(tài)欄，可以提供多種信息。在文檔窗口最大化時(shí)，其標(biāo)簽頂部顯示文檔的名稱。文檔工具欄和標(biāo)準(zhǔn)工具欄在文檔窗口內(nèi)，如果文檔窗口處于還原狀態(tài)，則文檔工具欄和標(biāo)準(zhǔn)工具欄在文檔窗口外，其標(biāo)題欄內(nèi)顯示網(wǎng)頁的標(biāo)題和網(wǎng)頁文檔所在的文件夾名稱和網(wǎng)頁文檔的名稱。文檔窗口有3種視圖，單擊文檔工具欄中的按鈕，可進(jìn)行視圖的切換。也可以單擊“查看”“代碼”（或“設(shè)計(jì)”、“代碼和設(shè)計(jì)”

12、）菜單命令或按Ctrl+-鍵?！霸O(shè)計(jì)”視圖：它是一個(gè)用于可視化頁面布局、可視化編輯和快速應(yīng)用程序開發(fā)的設(shè)計(jì)環(huán)境。在該視圖中，顯示的效果與在網(wǎng)絡(luò)瀏覽器中瀏覽時(shí)非常相似，可以直接進(jìn)行編輯。“代碼”視圖：它是一個(gè)用于編寫和編輯HTML、JavaScript、服務(wù)器語言代碼（如ASP或ColdFusion標(biāo)記語言）以及任何其他類型代碼的手工編碼環(huán)境?！按a和設(shè)計(jì)”視圖：它可以使用戶在單個(gè)窗口中同時(shí)看到同一文檔的“代碼”視圖和“設(shè)計(jì)”視圖。（2）狀態(tài)欄 Dreamweaver 8的狀態(tài)欄位于文檔窗口的底部，如圖1-2-9所示。標(biāo)簽選擇器：標(biāo)簽選擇器在狀態(tài)欄的最左邊，它以HTML標(biāo)記顯示方式來表示光標(biāo)當(dāng)前

13、位置處的網(wǎng)頁對(duì)象信息。一般光標(biāo)當(dāng)前位置處有多種信息，則可顯示出多個(gè)HTML標(biāo)記。不同的HTML標(biāo)記表示不同的HTML元素信息。例如，<body>表示文檔主體，<img>表示圖像，<table>表示表格，<font>表示字體，<tr>表示行，<object>表示插入對(duì)象等。單擊某一個(gè)HTML標(biāo)記，Dreamweaver 8會(huì)自動(dòng)選取與該標(biāo)記相對(duì)應(yīng)的網(wǎng)頁對(duì)象，用戶可對(duì)該對(duì)象進(jìn)行編輯。窗口大小信息欄：它用來顯示與調(diào)整窗口大小。單擊它會(huì)彈出一個(gè)快捷菜單，在還原狀態(tài)下單擊該快捷菜單上邊一欄中的一個(gè)菜單命令，可馬上按照選定的大小改變窗

14、口的大小。文檔大小/估計(jì)的下載時(shí)間：它給出了文檔大小的字節(jié)數(shù)和網(wǎng)頁的預(yù)計(jì)下載時(shí)間。（3）標(biāo)尺顯示標(biāo)尺：單擊“查看”“標(biāo)尺”“顯示”菜單命令，可顯示標(biāo)尺，如圖1-2-10所示。單擊選中“查看”“標(biāo)尺”菜單命令的下一級(jí)菜單中的“像素”、“英寸”或“厘米”菜單命令，可以更改標(biāo)尺的單位。用鼠標(biāo)拖曳標(biāo)尺左上角處的小正方形，此時(shí)鼠標(biāo)指針呈十字線狀。拖曳鼠標(biāo)到文檔窗口內(nèi)合適的位置后松開鼠標(biāo)左鍵，即可將原點(diǎn)位置改變。如果要將標(biāo)尺的原點(diǎn)位置還原，可單擊“查看”“標(biāo)尺”“重設(shè)原點(diǎn)”菜單命令。（4）網(wǎng)格顯示與不顯示網(wǎng)格線：單擊“查看”“網(wǎng)格”“顯示網(wǎng)格”菜單命令，可以在顯示網(wǎng)格（選中時(shí)，其菜單命令左邊有對(duì)勾）和不顯

15、示網(wǎng)格（沒選中時(shí)，其左邊沒有對(duì)勾）之間切換。網(wǎng)格線的顯示效果如圖1-2-10所示。靠齊功能：如果沒選中“查看”“網(wǎng)格”“靠齊到網(wǎng)格”菜單命令，移動(dòng)層或改變層的大小時(shí)，最小的單位是一個(gè)像素，在移動(dòng)層時(shí)不容易與網(wǎng)格對(duì)齊。如果選中“查看”“網(wǎng)格”“靠齊到網(wǎng)格”菜單命令，移動(dòng)層或改變層的大小時(shí)，最小的單位是5個(gè)像素，在移動(dòng)層時(shí)可以自動(dòng)與網(wǎng)格對(duì)齊。網(wǎng)格的參數(shù)設(shè)置：單擊“查看”“網(wǎng)格”“網(wǎng)格設(shè)置”菜單命令，可以彈出“網(wǎng)格設(shè)置”對(duì)話框，如圖1-2-11所示。利用該對(duì)話框，可對(duì)網(wǎng)格和靠齊等參數(shù)進(jìn)行設(shè)置。（5）“屬性”欄 “屬性”欄也叫屬性檢查器或“屬性”面板。利用“屬性”欄可以顯示并精確調(diào)整網(wǎng)頁中選定對(duì)象的屬

16、性?！皩傩浴睓诰哂兄悄芑奶攸c(diǎn)，選中網(wǎng)頁中的不同對(duì)象，其“屬性”欄的內(nèi)容會(huì)隨之發(fā)生變化。單擊“屬性”欄右下角的按鈕，可以展開“屬性”欄；單擊“屬性”欄右下角的按鈕，可以收縮“屬性”欄。如果在沒有選中任何對(duì)象時(shí)單擊“屬性”欄右邊的按鈕，可以在光標(biāo)當(dāng)前位置添加HTML語言；如果在選中一個(gè)對(duì)象時(shí)單擊按鈕，可以編輯相應(yīng)標(biāo)簽的HTML。（6）“插入”欄在Dreamweaver 8中，“插入”欄可以顯示為制表符和菜單兩種外觀效果，如果要將“插入”欄切換到菜單狀態(tài)，可右鍵單擊“插入”欄右邊的按鈕，彈出它的快捷菜單，再單擊該菜單中的“顯示為菜單”菜單命令。如果要將“插入”欄切換到制表符狀態(tài)，可單擊欄左邊的黑色

17、箭頭，彈出它的快捷菜單，再單擊該菜單中的“顯示為制表符”菜單命令?！安迦搿睓诎恕俺Ｓ谩?、“布局”等8個(gè)標(biāo)簽項(xiàng)或8個(gè)與標(biāo)簽名稱相同的菜單命令。當(dāng)“插入”欄為制表符狀態(tài)時(shí)，可以使用鼠標(biāo)拖曳“插入”欄左邊的圖標(biāo)，將“插入”欄變?yōu)楦?dòng)面板。一般人們習(xí)慣使用制表符狀態(tài)的“插入”欄。在制表符狀態(tài)下，每一個(gè)標(biāo)簽內(nèi)有多個(gè)用于插入對(duì)象的按鈕。單擊標(biāo)簽可以切換標(biāo)簽項(xiàng)，單擊標(biāo)簽內(nèi)的對(duì)象按鈕或者將相應(yīng)的按鈕圖標(biāo)拖曳到文檔窗口中，可將相應(yīng)的對(duì)象插入到網(wǎng)頁中。對(duì)于有些對(duì)象，會(huì)在單擊按鈕或拖曳按鈕后，彈出一個(gè)相應(yīng)的設(shè)置對(duì)話框，進(jìn)行完設(shè)置后，單擊“確定”按鈕才可以真正在文檔窗口（即網(wǎng)頁）中插入對(duì)象。如果在插入對(duì)象的同時(shí)按

18、住Ctrl鍵，就可以避免出現(xiàn)一個(gè)選擇對(duì)象對(duì)話框，而是直接插入一個(gè)相應(yīng)類型的空對(duì)象，如果以后要給該空對(duì)象賦予相應(yīng)內(nèi)容，可以雙擊該對(duì)象。5面板的基本操作（1）面板的拆分與組合面板的拆分：將鼠標(biāo)指針移到面板左上角圖標(biāo)處，當(dāng)鼠標(biāo)指針變?yōu)槭皱^狀時(shí)，將面板拖離原來的位置，即可使面板成為一個(gè)可以用鼠標(biāo)拖曳的浮動(dòng)面板，如下圖所示：如果要將面板組合中的面板（例如，“CSS樣式”面板）拆分，可單擊面板中的標(biāo)簽（例如，“CSS樣式”標(biāo)簽），使它成為當(dāng)前面板，再單擊面板右上角的圖標(biāo)，彈出面板菜單，如圖1-2-13所示。單擊該菜單中的“將文件組合在”“新組合面板”菜單命令，即可將當(dāng)前面板（例如，“CSS樣式”面板）拆

19、分出來，如下圖所示：面板的組合：單擊面板（例如，“CSS樣式”面板）右上角的圖標(biāo)，彈出面板菜單，單擊該菜單中的“將文件組合在”“層”菜單命令，即可將當(dāng)前面板與“層”面板組合在一起。單擊面板菜單中的“重命名面板組”菜單命令，在彈出的“重命名面板組”對(duì)話框中將面板組的名稱改為“設(shè)計(jì)”，即可恢復(fù)該面板組。（2）調(diào)整面板大小和打開與關(guān)閉面板調(diào)整面板大?。簩⑹髽?biāo)指針移到面板的邊緣，當(dāng)鼠標(biāo)指針變成雙向箭頭時(shí)，單擊并拖曳面板的邊框，達(dá)到所需的大小后松開鼠標(biāo)左鍵即可打開面板：單擊“窗口”“×××”（面板名稱）菜單命令，即可打開指定的面板。例如，單擊“窗口”“文件”菜單命令，即可打

20、開“文件”面板。關(guān)閉面板：單擊面板（組）標(biāo)題欄右上角的按鈕。另外，在面板標(biāo)題欄單擊鼠標(biāo)右鍵，彈出其快捷菜單，再單擊該快捷菜單中的“關(guān)閉”菜單命令，也可以關(guān)閉該面板。隱藏所有面板：單擊“查看”“隱藏面板”菜單命令或按F4鍵，即可隱藏所有打開的面板。再進(jìn)行相同的操作，即可以將隱藏的面板（原來打開的面板）顯示出來。6網(wǎng)頁的新建、打開、關(guān)閉和保存（1）新建和打開網(wǎng)頁文檔新建網(wǎng)頁文檔：單擊“文件”“新建”菜單命令，即可彈出“新建文檔”對(duì)話框，如下圖所示：從該對(duì)話框可以看出，利用它可以建立各種類型的文件。從“類別”列表框中選擇“基本頁”選項(xiàng)，然后選擇“基本頁”列表框中的HTML選項(xiàng)。單擊“創(chuàng)建”按鈕，即可

21、新建一個(gè)空白的HTML網(wǎng)頁文檔。打開網(wǎng)頁文檔：單擊“文件”“打開”菜單命令，彈出“打開”對(duì)話框。在該對(duì)話框內(nèi)選中要打開的HTML文檔，單擊“打開”按鈕，即可將選定的HTML文檔打開。例如，可打開前面編寫的名字為文檔。（2）保存文檔和關(guān)閉文檔單擊“文檔”“保存”菜單命令，可以原名字保存當(dāng)前的文檔。單擊“文檔”“另存為”菜單命令，可彈出“另存為”對(duì)話框。利用該對(duì)話框可以將當(dāng)前的文檔以其他名字保存。單擊“文檔”“保存全部”菜單命令，可將當(dāng)前正在編輯的所有文檔以原名保存。單擊“文檔”“關(guān)閉”菜單命令，可以關(guān)閉打開的當(dāng)前文檔。如果當(dāng)前文檔在修改后沒有存盤，則會(huì)彈出一個(gè)提示框，提示用戶是否保存文檔。單擊“

22、文檔”“全部關(guān)閉”菜單命令，即可關(guān)閉所有打開的文檔。二、計(jì)劃（5分鐘）在教帥協(xié)調(diào)下學(xué)生分組，明確分工、收集資料。學(xué)生按照工作任務(wù)的要求，在教師指導(dǎo)下制定學(xué)習(xí)計(jì)劃，教師適時(shí)審定工作計(jì)劃方案，關(guān)注計(jì)劃中的預(yù)期成果及未來的自查項(xiàng)目，關(guān)注工作進(jìn)度及重要節(jié)點(diǎn)。三、實(shí)施（55分鐘）學(xué)生根據(jù)任務(wù)計(jì)劃依據(jù)參考手冊實(shí)施任務(wù)，教師對(duì)任務(wù)重點(diǎn)難點(diǎn)進(jìn)行講解和分析，學(xué)生做好知識(shí)點(diǎn)記錄，重點(diǎn)掌握重要知識(shí)點(diǎn)，使學(xué)習(xí)計(jì)劃能夠按時(shí)完成。教師監(jiān)督學(xué)生學(xué)習(xí)過程，糾正學(xué)生學(xué)習(xí)偏差，注重考察學(xué)生在任務(wù)實(shí)施過程中的能力，關(guān)注職業(yè)素養(yǎng)的培養(yǎng)，做好相應(yīng)的記錄。本任務(wù)應(yīng)先由教師系統(tǒng)講解，學(xué)生分步跟學(xué)。對(duì)部分理解掌握知識(shí)相對(duì)熟練、快速的學(xué)生，如

23、果其在學(xué)習(xí)過程中遇見問題，教師可輔助提示學(xué)生查找教材、參考手冊的相關(guān)內(nèi)容或通過網(wǎng)絡(luò)獲取相關(guān)內(nèi)容，引導(dǎo)學(xué)生解決問題；部分知識(shí)構(gòu)建不熟練的學(xué)生則應(yīng)詳細(xì)講解或者建議學(xué)生反復(fù)理解相關(guān)知識(shí)并完成任務(wù)。鼓勵(lì)小組成員在工作過程中互幫互助，解決在完成任務(wù)中所遇到的問題?！静僮鞑襟E】四、檢查評(píng)估（5分鐘）1 、任務(wù)完成后，學(xué)生自我檢查評(píng)價(jià)自己的工作，填寫“自我評(píng)價(jià)表”，小組成員互相檢查和評(píng)價(jià)并填寫在 “小組互評(píng)”表。2 、教師針對(duì)學(xué)生在完成任務(wù)過程中遇見的普遍問題做點(diǎn)評(píng)。3 、教師指引學(xué)生歸納總結(jié)，引導(dǎo)學(xué)生獨(dú)立寫出自己的經(jīng)驗(yàn)和完成任務(wù)的更好方法。4 、特別注意對(duì)“假如下次做同類似的任務(wù)，您認(rèn)為怎么做更好？”的引

24、導(dǎo)和討論?！救蝿?wù)拓展】教材完成拓展案例3、拓展案例4【任務(wù)2】制作“計(jì)算機(jī)簡史”、“硬件知識(shí)”、“外設(shè)簡介”網(wǎng)頁(4課時(shí))【效果圖】【學(xué)習(xí)目標(biāo)】文字是網(wǎng)頁的基礎(chǔ)和靈魂，任何一個(gè)網(wǎng)站都離不開網(wǎng)頁中的文字。在Dreamweaver中，可以對(duì)文字的格式、字體、字號(hào)、顏色以及對(duì)齊格式等屬性進(jìn)行設(shè)置。通過本案例的學(xué)習(xí)，可以掌握這些屬性設(shè)置的方法。在網(wǎng)頁中同時(shí)插入圖像和文字時(shí)，可以設(shè)置不同的對(duì)齊方式，以達(dá)到不同的顯示效果。圖文混排是網(wǎng)頁制作的基本操作，實(shí)用性非常強(qiáng)。在該網(wǎng)頁中，除了常見的文字和圖像外，還包含一個(gè)由多個(gè)圖像按鈕組成的導(dǎo)航條。當(dāng)鼠標(biāo)移到該導(dǎo)航條中的任意一個(gè)按鈕上時(shí)，該按鈕中的文字會(huì)變?yōu)椤皢螕暨M(jìn)

25、入”文字圖像?！救蝿?wù)要求】教師布置任務(wù)、要求學(xué)生根據(jù)參考手冊掌握學(xué)習(xí)目標(biāo)的內(nèi)容一、咨詢（15分鐘）明確任務(wù)后，教師幫助學(xué)生理解任務(wù)要求，分析任務(wù)，并介紹網(wǎng)頁設(shè)計(jì)整體情況的同時(shí)提出資訊建議，提供獲取資訊的方法和途徑信息。學(xué)生依據(jù)任務(wù)及提示，尋找完成任務(wù)所需的資源。例如：教材參考手冊網(wǎng)上查詢【相關(guān)知識(shí)點(diǎn)】“計(jì)算機(jī)簡史”網(wǎng)頁1文字屬性設(shè)置文字的屬性可以在下圖所示的文本“屬性”欄的“插入”（文本）欄中進(jìn)行設(shè)置。（1）文字標(biāo)題格式的設(shè)置根據(jù)HTML語言規(guī)定，頁面的文本有6種標(biāo)題格式，它們所對(duì)應(yīng)的字號(hào)大小和段落對(duì)齊方式都是設(shè)定好的。在“格式”下拉列表框中，可以選擇各種格式?！盁o”選項(xiàng)：無特殊格式的規(guī)定，僅

26、決定于瀏覽器本身?！岸温洹边x項(xiàng)：正文段落，在文字的開始與結(jié)尾處有換行，各行的文字間距較小?！皹?biāo)題1”至“標(biāo)題6”選項(xiàng)：標(biāo)題1至標(biāo)題6約為中文6號(hào)至中文1號(hào)字大小?！邦A(yù)先格式化的”選項(xiàng)：設(shè)置預(yù)定義的格式。（2）創(chuàng)建字體組合 Dreamweaver 8使用了字體組合的方法，取代了簡單地給文本指定一種字體的方法。字體組合就是多個(gè)不同字體依次排列的組合。在設(shè)計(jì)網(wǎng)頁時(shí)，可給文本指定一種字體組合。在網(wǎng)頁瀏覽器中瀏覽該網(wǎng)頁時(shí)，系統(tǒng)會(huì)按照字體組合中指定的字體順序自動(dòng)尋找用戶計(jì)算機(jī)中安裝的字體。采用這種方法可以照顧各種瀏覽器和安裝不同操作系統(tǒng)的計(jì)算機(jī)用戶。在“字體”下拉列表框中，可以選擇Dreamweaver提

27、供的各種字體組合，如下圖所示。單擊其中的某個(gè)列表項(xiàng)，即可設(shè)置該字體組合。單擊上圖所示的字體組合列表項(xiàng)中的“編輯字體列表”列表項(xiàng)，彈出“編輯字體列表”對(duì)話框，如下圖所示。單擊“編輯字體列表”對(duì)話框中“字體列表”列表框內(nèi)的“在以下列表中添加字體”列表項(xiàng)。在“可用字體”列表框中選擇字體，然后雙擊該字體名稱，即可在“選擇的字體”列表框中顯示出相應(yīng)的字體名稱；也可以單擊某一個(gè)字體名字，再單擊按鈕，將選中的字體添加到“選擇的字體”列表框內(nèi)。按照上述方法，依次往“選擇的字體”列表框中加入字體組合中的各種字體。同時(shí)，會(huì)看到在“字體列表”列表框內(nèi)最下邊隨之顯示出新的字體組合，如圖2-1-4所示。單擊“確定”按鈕

28、，即可完成字體組合的創(chuàng)建操作。如果要?jiǎng)h除字體組合中的一種字體，單擊“選擇的字體”列表框內(nèi)該字體的名稱，再單擊按鈕。如果要?jiǎng)h除一個(gè)字體組合，可在“字體列表”列表框中單擊該字體組合，再單擊“編輯字體列表”對(duì)話框中的按鈕。如果還要增加字體組合，可以單擊“編輯字體列表”對(duì)話框中的按鈕，使“字體列表”列表框中增加“在以下列表中添加字體”選項(xiàng)。（3）文字屬性的設(shè)置文字大小設(shè)置：字號(hào)的數(shù)字越大，文字也越大。在Dreamweaver 8中，默認(rèn)的字號(hào)是13。單擊文字“屬性”欄內(nèi)的“大小”下拉列表框中的一種字號(hào)數(shù)字，即可完成字號(hào)的設(shè)定。在“大小”下拉列表框內(nèi)，還可以通過選擇“極小”到“極大”以及“較小”和“較大

29、”列表項(xiàng)的方法來設(shè)置文字的大小。文字樣式設(shè)置：在“樣式”下拉列表框中，單擊“管理樣式”項(xiàng)目，可以彈出“編輯樣式表”對(duì)話框。單擊該對(duì)話框中的“新建”按鈕，就可以為文字添加樣式設(shè)置。文字的對(duì)齊設(shè)置：文字的對(duì)齊是指一行或多行文字在水平方向的位置，它有左對(duì)齊、居中對(duì)齊和右對(duì)齊3種?？梢酝ㄟ^在選中頁面內(nèi)的文字后，單擊文字“屬性”欄內(nèi)的（左對(duì)齊）、（居中對(duì)齊）和（右對(duì)齊）按鈕來實(shí)現(xiàn)。如果文字是直接輸入到頁面中的，則會(huì)以瀏覽器的邊界線進(jìn)行對(duì)齊。文字的縮進(jìn)設(shè)置：要改變段落文字的縮進(jìn)量，可以選中文字，再單擊文字“屬性”欄內(nèi)的（減少縮進(jìn)，向左移兩個(gè)單位）按鈕或（增加縮進(jìn)，向右移兩個(gè)單位）按鈕。文字風(fēng)格的設(shè)置：選中

30、網(wǎng)頁中的文字，單擊按下按鈕，即可將選中的文字設(shè)置為粗體；單擊按下按鈕，即可將選中的文字設(shè)置為斜體。利用菜單命令改變文字風(fēng)格：在“文本”“樣式”菜單的子菜單中，單擊其中的某一個(gè)菜單命令，可以將選中的文字樣式做相應(yīng)的改變。文字顏色的設(shè)置：單擊文字“屬性”欄內(nèi)的“大小”下拉列表框右邊的按鈕，可以彈出顏色面板，利用它可以設(shè)置文字的顏色。也可以在其文本框中直接輸入顏色代碼，例如紅色的顏色代碼為“#FF0000”。使用“插入”（文本）欄：單擊“插入”欄的“文本”標(biāo)簽，如下圖所示。面板中有許多文本格式控制按鈕，通過這些按鈕可以方便地插入各種文本。單擊面板中的“字體標(biāo)簽編輯器”按鈕，可以彈出“標(biāo)簽編輯器”對(duì)話

31、框，如下圖所示。利用該對(duì)話框可以設(shè)置文字的字體、大小和顏色等，還可以編輯文字字體列表。2設(shè)置和修改項(xiàng)目列表（1）設(shè)置項(xiàng)目列表設(shè)置無序列表和有序列表：選中要排列的文字段，再單擊文字“屬性”欄內(nèi)的按鈕，可設(shè)置無序列表；選中要排列的文字段，再單擊文字“屬性”欄內(nèi)的按鈕，可設(shè)置有序列表。定義列表方式：選中要排列的文字段，再單擊“文本”“列表”“定義列表”菜單命令。采用這種列表方式的效果是：奇數(shù)行靠左，偶數(shù)行向右縮進(jìn)，如下圖所示。（2）修改項(xiàng)目列表屬性首先將列表的文字按照無序或有序列表方式進(jìn)行列表，然后將光標(biāo)移到列表文字中。單擊“文本”“列表”“屬性”菜單命令，彈出“列表屬性”對(duì)話框，如圖2-1-8所示

32、?！傲斜眍愋汀毕吕斜砜蛴脕磉x擇列表類型，其類型有項(xiàng)目列表、編號(hào)列表、目錄列表和菜單列表4種。項(xiàng)目列表的段首為圖案標(biāo)志符號(hào)，是無序列表；編號(hào)列表的段首是數(shù)字，是有序列表。選擇“編號(hào)列表”選項(xiàng)后，“列表屬性”對(duì)話框中的隱藏選項(xiàng)會(huì)變?yōu)橛行?。在“樣式”下拉列表框?nèi)，可以選擇列表的風(fēng)格，其中各選項(xiàng)的含義為：“默認(rèn)”選項(xiàng)是默認(rèn)方式，段首標(biāo)記為實(shí)心圓點(diǎn)；“項(xiàng)目符號(hào)”選項(xiàng)是段首標(biāo)記為項(xiàng)目的符號(hào)；“正方形”選項(xiàng)的段首標(biāo)記為實(shí)心方塊。在“新建樣式”下拉列表框內(nèi)，也有上述4個(gè)選項(xiàng)，用來設(shè)置光標(biāo)所在段和以下各段的列表屬性。在“列表類型”下拉列表框中選擇“編號(hào)列表”列表項(xiàng)目后，“列表屬性”對(duì)話框如下圖所示。在“樣式”

33、列表框中，可以選擇列表的風(fēng)格。選擇“默認(rèn)”選項(xiàng)和“數(shù)字”選項(xiàng)，段首標(biāo)記為阿拉伯?dāng)?shù)字；選擇“小寫羅馬數(shù)字”選項(xiàng)，段首標(biāo)記為小寫羅馬數(shù)字；選擇“大寫羅馬數(shù)字”選項(xiàng)，段首標(biāo)記為大寫羅馬數(shù)字；選擇“小寫字母”選項(xiàng)，段首標(biāo)記為英文小寫字母；選擇“大寫字母”選項(xiàng)，段首標(biāo)記為英文大寫字母。在“開始計(jì)數(shù)”文本框內(nèi)可以輸入起始的數(shù)字或字母，以后各段的編號(hào)將根據(jù)起始數(shù)字或字母自動(dòng)排列。在“列表屬性”對(duì)話框的“列表項(xiàng)目”欄內(nèi)的“新建樣式”下拉列表框中，也有上述6個(gè)選項(xiàng)，用來設(shè)置光標(biāo)所在段和以下各段的列表為另一種新屬性。在“重設(shè)計(jì)數(shù)”文本框內(nèi)，輸入光標(biāo)所在段和以下各段的列表的起始數(shù)字或字母。“硬件知識(shí)”網(wǎng)頁（1）用鼠

34、標(biāo)拖曳圖像在Windows的“我的電腦”或“資源管理器”中，單擊一個(gè)圖像文件，再用鼠標(biāo)拖曳該圖像到網(wǎng)頁文檔窗口內(nèi)，即可將圖像插入到頁面內(nèi)的指定位置。雙擊頁面內(nèi)的圖像，可以彈出“選擇圖像源文件”對(duì)話框，供用戶更換圖像。（2）利用“插入”（常用）面板插入圖像單擊“插入”（常用）欄“圖像”快捷菜單中的“圖像”按鈕，或用鼠標(biāo)拖曳“圖像”按鈕到網(wǎng)頁內(nèi)，可以彈出“選擇圖像源文件”對(duì)話框，如圖2-2-2所示。如果“圖像”快捷菜單處顯示的不是“圖像”按鈕，可以單擊旁邊的下三角按鈕，在彈出的快捷菜單中選擇“圖像”按鈕。在“選擇圖像源文件”對(duì)話框中選中圖像文件后，單擊“確定”按鈕，即可將選定的圖像插入到頁面的光標(biāo)

35、處。通常所選圖像應(yīng)放在站點(diǎn)文件夾下的圖像文件夾內(nèi)。在“選擇圖像源文件”對(duì)話框內(nèi)，“URL”文本框內(nèi)會(huì)給出該圖像的路徑。在“相對(duì)于”下拉列表框內(nèi)，如果選擇“文檔”選項(xiàng)，則“URL”文本框內(nèi)會(huì)給出該圖像文件的相對(duì)于當(dāng)前網(wǎng)頁文檔的路徑和文件名。例如“pic/2-1-1.jpg”；如果選擇“站點(diǎn)根目錄”選項(xiàng)，則“URL”文本框內(nèi)會(huì)給出以站點(diǎn)目錄為根目錄的路徑，例如“/pic/2-1-1.jpg”。2圖像和文字的相對(duì)位置當(dāng)網(wǎng)頁內(nèi)有文字和圖像混排時(shí)，系統(tǒng)默認(rèn)的狀態(tài)是圖像的下沿和它所在的文字行的下沿對(duì)齊。如果圖像較大，則頁面內(nèi)的文字與圖像的布局會(huì)很不協(xié)調(diào)，因此需要調(diào)整它們的布局。調(diào)整圖像與文字混排的布局需要

36、使用圖像的“屬性”欄。（1）圖像與文字相對(duì)位置的調(diào)整圖像“屬性”欄內(nèi)的“對(duì)齊”下拉列表框中有10個(gè)列表項(xiàng)，用來進(jìn)行圖像與文字相對(duì)位置的調(diào)整。這些列表項(xiàng)的含義如下?！澳J(rèn)值”列表項(xiàng)：使用瀏覽器默認(rèn)的對(duì)齊方式，不同的瀏覽器會(huì)稍有不同?！盎€”列表項(xiàng)：圖像的下沿與文字的基線水平對(duì)齊?！绊敹恕绷斜眄?xiàng)：圖像的頂端與當(dāng)前行中最高對(duì)象（圖像或文本）的頂端對(duì)齊?！爸虚g”列表項(xiàng)：圖像的中線與文字的基線水平對(duì)齊?！暗撞俊绷斜眄?xiàng)：圖像的下沿與文字的基線水平對(duì)齊。“文本上方”列表項(xiàng)：圖像的頂端與文本行中最高字符的頂端對(duì)齊?！敖^對(duì)中間”列表項(xiàng)：圖像的中線與文字的中線水平對(duì)齊?！敖^對(duì)底部”列表項(xiàng)：圖像的下沿與文字的下沿水

37、平對(duì)齊。文字的下沿是指文字的最下邊，而基線不到文字的最下邊?！白髮?duì)齊”列表項(xiàng)：圖像在文字的左邊緣，文字從右側(cè)環(huán)繞圖像?！坝覍?duì)齊”列表項(xiàng)：圖像在文字的右邊緣，文字從左側(cè)環(huán)繞圖像。文字的上沿、中線、基線、下沿、左邊緣和右邊緣之間的關(guān)系如下圖所示。（2）圖像與文字間距的調(diào)整圖像與文字的間距是指圖像與文字水平方向和垂直方向的間距，可以通過改變“水平邊距”和“垂直邊距”文本框內(nèi)的數(shù)值來實(shí)現(xiàn)，數(shù)值的單位是像素。3圖像的移動(dòng)、復(fù)制、刪除和調(diào)整大小移動(dòng)和復(fù)制圖像：選中要編輯的圖像，這時(shí)圖像周圍會(huì)出現(xiàn)幾個(gè)黑色方形的小控制柄。如果要移動(dòng)或復(fù)制圖像，可以像移動(dòng)文字那樣，用鼠標(biāo)拖曳圖像到目標(biāo)點(diǎn)，即可移動(dòng)圖像；按住Ct

38、rl鍵并用鼠標(biāo)拖曳圖像到目標(biāo)點(diǎn)，即可復(fù)制圖像。刪除圖像：先選中要?jiǎng)h除的圖像，再按Delete鍵即可，還可以將它剪切到剪貼板中。簡單調(diào)整圖像大?。哼x中要調(diào)整的圖像，用鼠標(biāo)拖曳其控制柄。按住Shift鍵，同時(shí)用鼠標(biāo)拖曳圖像周圍的小控制柄，可以在保證圖像長寬比不變的情況下調(diào)整圖像的大小。4利用圖像“屬性”欄編輯“硬件知識(shí)”網(wǎng)頁中的圖像在網(wǎng)頁中插入圖像后，如果要精確調(diào)整圖像的大小和圖像的位置，必須使用圖像“屬性”欄。在選中圖像后，圖像“屬性”欄如下圖所示。圖像命名：在圖像“屬性”欄的左上角會(huì)顯示縮小的選中的圖像，圖像的右邊會(huì)顯示它的字節(jié)數(shù)?？梢栽趫D像右邊的文本框內(nèi)輸入圖像的名字，以后可以使用腳本語言（

39、JavaScript、VBScript等）對(duì)它進(jìn)行引用。調(diào)整圖像的位置：選中要調(diào)整位置的圖像后，或?qū)⒐鈽?biāo)移到圖像所在的行后，單擊（居左）、（居中）或（居右）按鈕，即可對(duì)該行的圖像位置進(jìn)行調(diào)整。精確調(diào)整圖像的大?。涸凇皩挕蔽谋究騼?nèi)輸入圖像的寬度，系統(tǒng)默認(rèn)的單位是像素（pixels），如果要使用其他單位，則必須在輸入數(shù)字后再輸入單位名稱，例如in（英寸，1in=96 pixels）、mm（毫米，1mm=3.8 pixels)、pt（磅，1pt）和pc（派卡，1pc=16 pixels）等。用同樣的方法可在“高”文本框內(nèi)輸入圖像的高度。%表示圖像占文檔窗口的寬度和長度百分比，設(shè)置后，圖像的大小會(huì)隨文

40、檔窗口的大小自動(dòng)進(jìn)行調(diào)整。若不管頁面大小，只想占頁面寬度的30%，可在“寬”文本框中輸入30%。如果要還原圖像大小的初始值，可單擊和文字或刪除“寬”和“高”文本框中的數(shù)值；要想將寬度和長度全部還原，則可單擊“重設(shè)大小”按鈕。圖像的路徑：“源文件”右邊的文本框內(nèi)給出了圖像文件的路徑。文件路徑可以是絕對(duì)路徑（“file:/D|/跟我學(xué)電腦/pic/2-1-1.jpg”圖像文件不在站點(diǎn)文件夾內(nèi)），也可以是相對(duì)路徑（“pic/2-1-1.jpg”或“/pic/2-1-1.jpg”圖像文件在站點(diǎn)文件夾內(nèi)）。單擊“源文件”右邊的按鈕，即可彈出“選擇圖像源文件”對(duì)話框，利用它可以更換圖像。鏈接：“鏈接”右邊

41、的文本框內(nèi)給出了被鏈接文件的路徑。超級(jí)鏈接所指向的對(duì)象可以是一個(gè)網(wǎng)頁，也可以是一個(gè)具體的文件。設(shè)置圖像鏈接后，用戶在瀏覽網(wǎng)頁時(shí)只要單擊該圖像，即可打開相關(guān)的網(wǎng)頁或文件。建立超級(jí)鏈接有3種方法：直接輸入鏈接地址URL；拖曳指向文件圖標(biāo)到“站點(diǎn)”窗口要鏈接的文件上；單擊該文本框右邊的文件夾按鈕，彈出“選擇文件”對(duì)話框，利用該對(duì)話框選定文件。給圖像加文字提示說明：選中要加文字提示說明的圖像，再在圖像“屬性”欄內(nèi)的“替代”下拉列表框中輸入圖像的文字提示說明。用瀏覽器打開圖像頁面后，將鼠標(biāo)移到加文字提示說明的圖像上，或發(fā)生斷鏈現(xiàn)象時(shí)，即可出現(xiàn)相應(yīng)的文字提示說明，如下圖所示?！巴庠O(shè)簡介”網(wǎng)頁1插入導(dǎo)航條導(dǎo)

42、航條實(shí)際上是一組動(dòng)態(tài)圖像按鈕，單擊一個(gè)導(dǎo)航按鈕，可以在瀏覽器中彈出HTML文件和其他（如圖像）文件。插入導(dǎo)航條的方法如下。（1）單擊“插入”（常規(guī)）面板中的“圖像”快捷菜單中的“導(dǎo)航條”按鈕，即可彈出“插入導(dǎo)航條”對(duì)話框，如下圖所示。（2）在“插入導(dǎo)航條”對(duì)話框中進(jìn)行各選項(xiàng)的設(shè)置。各選項(xiàng)的作用如下“導(dǎo)航條元件”列表框：給出導(dǎo)航條中各個(gè)動(dòng)態(tài)圖像按鈕的名稱（默認(rèn)是圖像的名稱）。單擊按鈕，可以增加動(dòng)態(tài)圖像按鈕；選中動(dòng)態(tài)圖像按鈕名稱，再單擊按鈕，可以刪除該按鈕；單擊動(dòng)態(tài)圖像按鈕名稱，再單擊按鈕或按鈕，可以改變動(dòng)態(tài)圖像按鈕在導(dǎo)航條中的位置。“項(xiàng)目名稱”文本框：其內(nèi)可輸入各動(dòng)態(tài)圖像按鈕的名稱。4個(gè)文本框與“瀏覽”按鈕：定義鼠