Dreamweaver網(wǎng)頁設計與制作項目九

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