課程教案授課內(nèi)容項(xiàng)目九制作個(gè)人網(wǎng)站——應(yīng)用模板和庫授課班級授課學(xué)時(shí)8課時(shí)教學(xué)方法與手段講授法、演示法、討論法。多媒體教學(xué)項(xiàng)目內(nèi)容個(gè)人網(wǎng)站是提供記錄，交流，分享，展現(xiàn)自我及個(gè)性的屬于自己的空間和平臺，通過網(wǎng)站能夠和朋友進(jìn)行交流、學(xué)習(xí)。本項(xiàng)目的工作內(nèi)容就是制作一個(gè)個(gè)人網(wǎng)站。網(wǎng)站的設(shè)計(jì)要求如下：1.導(dǎo)航要盡量清晰明了，布局合理，層次分明，頁面鏈接層次不要太深，盡量讓用戶用最短的時(shí)間找到需要的資料；2.風(fēng)格要統(tǒng)一。保持統(tǒng)一的風(fēng)格，有助于加深訪問者對個(gè)人網(wǎng)站的個(gè)人的印象；3.色彩要和諧、重點(diǎn)要突出。在網(wǎng)頁設(shè)計(jì)中，要講究和諧、均衡和重點(diǎn)突出的原則；4.動態(tài)效果不宜太多。教學(xué)目標(biāo)學(xué)生通過本項(xiàng)目的學(xué)習(xí)，能：掌握創(chuàng)建和保存模板的方法熟練利用模板創(chuàng)建網(wǎng)頁理解庫項(xiàng)目的概念熟悉庫項(xiàng)目的創(chuàng)建和應(yīng)用教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)：掌握模板和庫的使用方法教學(xué)難點(diǎn)：熟練利用模板創(chuàng)建網(wǎng)頁教學(xué)過程設(shè)計(jì)項(xiàng)目效果【任務(wù)一】創(chuàng)建“夢幻花園”首頁——應(yīng)用模板（一）創(chuàng)建并保存模板文檔創(chuàng)建模板文檔的方法有兩種。一種是新建空白模板文檔，然后像制作普通網(wǎng)頁一樣制作和編輯模板內(nèi)容；還有一種是將普通網(wǎng)頁另存為模板。本節(jié)講解如何將普通網(wǎng)頁另存為模板。步驟1?將本項(xiàng)目素材中的“gp”文件夾拷貝至本地磁盤，然后在Dreamweaver中創(chuàng)建站點(diǎn)“gp”。打開準(zhǔn)備作為模板的網(wǎng)頁（此處為“gp”站點(diǎn)中的“invite.html”文檔），然后選擇“文件”→“另存為模板”菜單。步驟2?打開“另存模板”對話框，在“站點(diǎn)”下拉列表中選擇要保存到的站點(diǎn)，在“另存為”編輯框中命名模板，然后單擊“保存”按鈕。步驟3?彈出提示框，詢問是否更新鏈接，一般情況下都應(yīng)單擊“是”按鈕。步驟4?接下來需要編輯模板，模板的編輯和普通網(wǎng)頁的編輯基本一致，可根據(jù)需要進(jìn)行具體設(shè)計(jì)。步驟5?完成編輯后就要設(shè)置可編輯區(qū)域。選擇想要設(shè)置為可編輯區(qū)域的內(nèi)容，或?qū)⒉迦朦c(diǎn)放在想要插入可編輯區(qū)域的位置。步驟6?選擇“插入記錄”→“模板對象”→“可編輯區(qū)域”菜單，打開“新建可編輯區(qū)域”對話框，在“名稱”編輯框中輸入可編輯區(qū)域的名稱，然后單擊“確定”按鈕，創(chuàng)建可編輯區(qū)域。步驟7?可依據(jù)類似方法，設(shè)置其他可編輯區(qū)域，最后按【Ctrl+S】組合鍵保存文檔。步驟8?創(chuàng)建可編輯區(qū)域后，如果希望選擇可編輯區(qū)域，可單擊可編輯區(qū)域左上角的可編輯區(qū)域名稱標(biāo)簽，如圖9—4所示；或選擇“修改”→“模板”菜單，然后從該子菜單底部的列表中選擇可編輯區(qū)域名稱。步驟9?如果已經(jīng)將模板中的一個(gè)區(qū)域標(biāo)記為可編輯，而現(xiàn)在想要再次鎖定它（使其在基于模板的文檔中不可編輯），可使用“刪除模板標(biāo)記”命令。為此，可在選中可編輯區(qū)域后，選擇“修改”→“模板”→“刪除模板標(biāo)記”菜單。步驟10?要新命名可編輯區(qū)域，只需單擊可編輯區(qū)域左上角的可編輯區(qū)域名稱標(biāo)簽，然后在“屬性”面板的“名稱”編輯框中修改即可。步驟11?編輯完后，選擇“文件”→“保存”菜單，或按【Ctrl+S】組合鍵保存文檔。模板文檔中除可定義可編輯區(qū)域外，還可通過選擇“插入記錄”→“模板對象”菜單，定義其他幾種類型的區(qū)域。可選區(qū)域：如果在模板中指定了這類區(qū)域，則在基于模板的文檔中可顯示或隱藏該區(qū)域。要為文檔中的某部分內(nèi)容設(shè)置條件時(shí)，可使用“可選區(qū)域”。重復(fù)區(qū)域：重復(fù)區(qū)域是可以根據(jù)需要在基于模板的頁面中復(fù)制任意次數(shù)的部分。重復(fù)區(qū)域通常用于表格，但也可以為其他頁面元素定義重復(fù)區(qū)域。（二）基于模板創(chuàng)建文檔步驟1?選擇“文件”→“新建”菜單，打開“新建文檔”對話框。步驟2?在左側(cè)的“文檔類型”列表中選擇“模板中的頁”，在“站點(diǎn)”列表中選擇模板所在站點(diǎn)（此處為“gp”），在“站點(diǎn)‘gp’的模板”列表中選擇模板名稱（此處為“invite”），然后單擊“創(chuàng)建”按鈕。步驟3?根據(jù)需要修改文檔的可編輯區(qū)域或編輯文檔，最后將文檔保存即可。另外，除上面的方法外，也可在“資源”面板中右擊模板，然后從彈出的快捷菜單中選擇“從模板新建”選項(xiàng)，來創(chuàng)建基于模板的文檔。步驟4?在基于模板創(chuàng)建文檔后，如果又更改了模板，在保存時(shí)系統(tǒng)將打開“更新模板文件”對話框，其中列出了基于該模板創(chuàng)建的文檔列表。單擊“更新”按鈕，將打開“更新頁面”對話框，其中顯示了頁面更新情況。更新結(jié)束后，單擊“關(guān)閉”按鈕即可。【任務(wù)實(shí)施】在學(xué)習(xí)了模板的相關(guān)知識后，下面完成用模板實(shí)現(xiàn)的個(gè)人網(wǎng)站的制作。（一）創(chuàng)建網(wǎng)站模板1.創(chuàng)建并保存模板文檔步驟1?首先將本項(xiàng)目素材中的“p1”文件夾拷貝至本地磁盤，然后在Dreamweaver中新建站點(diǎn)“p1”。步驟2?選擇“文件”→“新建”菜單，打開“新建文檔”對話框，在左側(cè)的“文檔類型”列表中選擇“空模板”，在“模板類型”列表中選擇“HTML模板”，在“布局”列表中選擇“無”，最后單擊“創(chuàng)建”按鈕。步驟3?按【Ctrl+S】組合鍵保存模板頁，彈出提示框，提示“此模板不含有任何可編輯區(qū)域。你想繼續(xù)嗎？”，單擊“確定”按鈕即可。步驟4?彈出“另存模板”對話框，在“站點(diǎn)”下拉列表中選擇保存站點(diǎn)（此處為“p1”），在“描述”編輯框中輸入描述性文本（此處為“個(gè)人網(wǎng)站”），在“另存為”編輯框中輸入模板文件名（此處為“m1”），然后單擊“保存”按鈕。步驟5?打開“CSS樣式”面板，將“p1”站點(diǎn)中的樣式文件“s1.css”鏈接至模板文檔。2.設(shè)置模板內(nèi)容步驟1?將插入點(diǎn)置于文檔窗口中，插入一個(gè)1行3列，寬為1000像素，邊框、間距和邊距均為0的表格（稱為表格1），然后在各單元格中分別插入圖像。步驟2?在表格1下方插入一個(gè)6行2列，寬為1000像素，邊框、間距和邊距均為0的表格（稱為表格2），在左側(cè)的各個(gè)單元格中分別插入圖像“personal1_04.jpg”和“personal1_08.jpg”～“personal1_12.jpg”。步驟3?將表格2右側(cè)的6個(gè)單元格合并為一個(gè)單元格，并將插入點(diǎn)置于合并后的單元格中，在“屬性”面板上的“垂直”下拉列表中選擇“頂端”。步驟4?在合并后的單元格中嵌套一個(gè)3行2列，寬為723像素，邊框、間距和邊距均為0的表格。將第1行的兩個(gè)單元格合并，并在其中插入圖像“personal1_05.jpg”。步驟5?將插入點(diǎn)置于嵌套表格第2行第1列單元格中，設(shè)置其寬為603像素，高為378像素，并在“屬性”面板上的“垂直”下拉列表中選擇“頂端”，“背景圖像”為“personal1_06.jpg”。步驟6?將嵌套表格第2行第2列和第3行第2列的兩個(gè)單元格合并，并在合并后的單元格中插入圖像“personal1_07.jpg”；同樣在第3行第1列單元格中插入圖像“personal1_13.jpg”。步驟7?在表格2下方插入一個(gè)1行3列，寬為1000像素的表格，并分別在各個(gè)單元格中插入圖像“personal1_14.jpg”“personal1_15.jpg”和“personal1_16.jpg”。3.設(shè)置可編輯區(qū)域步驟1?將插入點(diǎn)置于表格2中嵌套表格的第2行第1列單元格中，單擊文檔工具欄中的“拆分”按鈕，在文檔窗口上方打開代碼視圖，單擊“布局”插入欄中的“IFRAME”按鈕，在單元格中插入“<iframe></iframe>”代碼。步驟2?在<iframe>標(biāo)簽中“>”符號左側(cè)單擊，按一下空格鍵，然后應(yīng)用快速標(biāo)簽編輯器依次輸入代碼：name=“page”frameborder=“0”width=“603”height=“350”。步驟3?單擊標(biāo)簽選擇器中“<iframe>”標(biāo)簽左側(cè)的“<td>”標(biāo)簽，選中嵌入式框架所在單元格，然后選擇“插入記錄”→“模板對象”→“可編輯區(qū)域”菜單。步驟4?打開“新建可編輯區(qū)域”對話框，在“名稱”編輯框中輸入“EditRegion1”，之后單擊“確定”按鈕，創(chuàng)建可編輯區(qū)域。步驟5?按【Ctrl+S】組合鍵保存文檔，便完成了網(wǎng)站模板的創(chuàng)建。（二）應(yīng)用模板創(chuàng)建網(wǎng)站主頁步驟1?在站點(diǎn)“p1”中新建網(wǎng)頁文檔，重命名為intro.html，然后在文檔編輯窗口中打開它。步驟2?將文本文檔“text.txt”中的內(nèi)容拷貝到該文檔窗口，然后單擊“CSS樣式”面板上的“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對話框。步驟3?在“選擇器類型”區(qū)選擇“標(biāo)簽”，在“標(biāo)簽”下拉列表中選擇“body”，在“定義在”列表區(qū)選擇“僅對該文檔”，然后單擊“確定”按鈕。步驟4?打開“body的CSS規(guī)則定義”對話框，設(shè)置“大小”為12像素，“行高”為20像素，“顏色”為灰色“#999999”。步驟5?在“分類”列表中選擇“背景”，設(shè)置“背景圖像”為“personal1_06.jpg”，在“重復(fù)”下拉列表中選擇“不重復(fù)”，在“附件”下拉列表中選擇“固定”。步驟6?在“分類”列表中選擇“方框”，取消選擇“邊界”區(qū)的“全部相同”復(fù)選框，設(shè)置“上”為40像素，“右”和“下”均為0像素，“左”為60像素，然后單擊“確定”按鈕。步驟7?按【Ctrl+S】組合鍵保存文檔，此時(shí)的文檔效果如圖所示。步驟8?選擇“文件”→“新建”菜單，打開“新建文檔”對話框，在左側(cè)的“文檔類型”列表中選擇“模板中的頁”，在“站點(diǎn)”列表中選擇“p1”，在“站點(diǎn)p1的模板”列表中選擇“m1”，然后單擊“創(chuàng)建”按鈕，如圖所示。步驟9?將新建文檔保存為“index.html”，并在文檔窗口上方打開代碼視圖，在<iframe>標(biāo)簽內(nèi)部單擊，按空格鍵打開快速標(biāo)簽編輯器，選擇“src”，然后單擊“瀏覽”按鈕。步驟10?打開“選擇文件”對話框，選擇前面創(chuàng)建的文檔“intro.html”，然后單擊“確定”按鈕。步驟11?保存文檔“index.html”，之后按F12鍵預(yù)覽。【任務(wù)實(shí)施】接下來，請同學(xué)們根據(jù)前面所學(xué)知識，應(yīng)用模板制作網(wǎng)站中的其他子頁。【任務(wù)二】創(chuàng)建“幸福一家”網(wǎng)頁——應(yīng)用庫項(xiàng)目（一）什么是庫項(xiàng)目庫項(xiàng)目是一種特殊類型的Dreamweaver文件，當(dāng)前網(wǎng)頁中的任意頁面元素均可定義為庫項(xiàng)目，如圖像、表格、文本、聲音和Flash影片等。當(dāng)需要使用某庫項(xiàng)目時(shí)，直接將其從“資源”模板中拖到網(wǎng)頁中就可以了。（二）創(chuàng)建庫項(xiàng)目步驟1?在Dreamweaver中打開本項(xiàng)目素材“gp”文件夾下的“index.html”文檔。步驟2?單擊選中“用戶登錄”欄目所在表格，選擇“修改”→“庫”→“增加對象到庫”菜單，打開提示框，單擊“確定”按鈕。步驟3?打開“資源”面板，剛選中的對象出現(xiàn)在“資源”面板中，且其名稱處于可編輯狀態(tài)。將默認(rèn)名刪除，重新輸入新名稱（此處為“l(fā)ogin”）并按Enter鍵確認(rèn)。（三）應(yīng)用庫項(xiàng)目應(yīng)用庫項(xiàng)目的方法非常簡單，只需在“資源”面板的庫窗口中將其拖入到文檔的適當(dāng)位置即可。此外，也可在定位插入點(diǎn)后，選中庫中的項(xiàng)目并單擊“資源”面板底部的“插入”按鈕，將庫項(xiàng)目插入到文檔中。對于普通對象，在單擊選中該對象后，對象四周會出現(xiàn)一組控制點(diǎn)。但是，如果單擊庫項(xiàng)目，該對象將變成半透明，而不是在四周出現(xiàn)控制點(diǎn)，如圖所示。可以據(jù)此判定該對象是否是庫項(xiàng)目。在文檔窗口中單擊選中庫項(xiàng)目后，網(wǎng)頁編輯窗口下方將顯示庫項(xiàng)目的“屬性”面板，如圖所示。該“屬性”面板中各設(shè)置項(xiàng)的意義如下：Src：顯示庫項(xiàng)目源文件的名稱和在站點(diǎn)中的存放位置。打開：打開庫項(xiàng)目源文件進(jìn)行編輯。從源文件中分離：斷開所選庫項(xiàng)目與其源文件之間的鏈接，使庫項(xiàng)目成為普通對象。重新創(chuàng)建：用當(dāng)前選定的內(nèi)容改寫原庫項(xiàng)目，使用此選項(xiàng)可以在丟失或意外刪除原始庫項(xiàng)目時(shí)重新創(chuàng)建庫項(xiàng)目。（四）應(yīng)用庫