運用網頁範本製作版型相同的網頁

1. 第 7 堂課 運用網頁範本製作版型相同的網頁

2. 本堂課重點 • 7-1 建立範本網頁 • 7-2 套用範本 • 7-3 修改、刪除與分離範本

3. 7-1 建立範本網頁 • 範本的使用時機與優點 • 將網頁製作成範本 • 直接新增範本網頁 • 設定可編輯區域

4. 範本的使用時機與優點 • 為了製作風格相近的網頁, 最直覺的作法是將頁面另存新檔, 再更改圖片和文字的內容, 製作成新頁面。然而日後若要修改版型, 就必須逐一開啟每一個頁面來修改, 非常浪費時間。 • 本堂課我們要教你的作法, 是先將確認版型的頁面存成範本, 方便日後進行套用。範本的特色是可以將表頭、選單等不需更改的共同元件設為無法編輯的區域,則套用範本的網頁只需更動剩下的圖文區域, 即可製作成新頁面。且日後只要修改範本, 就可以同步更新到所有套用的網頁, 不必再開啟全部的網頁來修改。以上兩種作法的差異如下圖所示：

5. 範本的使用時機與優點

6. 將網頁製作成範本 • 運用範本的工作流程如下：首先製作好一個要當作基本版型的頁面, 將它儲存為範本格式, 然後將其中需要更動的區域 (內文、圖片等) 設定為可編輯區域, 之後套用範本的頁面就會成為相同版型, 我們只要將可編輯區域的內容更新, 就做好一頁新網頁了。 • 下面我們就實際來將網頁製作為範本。請開啟練習檔 ex07-01.html, 這是我們事先已製作好的頁面, 我們要將這頁製作成範本, 之後就可以套用此範本來製作其他內容的頁面。

7. 將網頁製作成範本 • 請執行『插入/範本物件/製作範本』命令, 在交談窗中輸入要儲存的範本檔名(你也可以執行『檔案/另存成範本』命令, 將網頁另存成範本格式)：

8. 將網頁製作成範本

9. 將網頁製作成範本 • 存檔之後, Dreamweaver 會自動在網站根目錄下建立一個 "Templates" 資料夾, 專門存放範本檔案：

10. 直接新增範本網頁 • 除了將做好的網頁另存為範本網頁外, 你也可以在建立檔案時直接選擇建立範本網頁, 請在Dreamweaver 的起始畫面, 按下更多…鈕, 進入新增文件交談窗 (或在 Dreamweaver 中執行『檔案/新增檔案』命令, 也可進入新增文件交談窗)。

11. 直接新增範本網頁

12. 直接新增範本網頁

13. 直接新增範本網頁

14. 設定可編輯區域 • 每個範本都是由可編輯區域和不可編輯區域組成的, 套用範本之後,只有可編輯區域的內容可以修改, 不可編輯區域則無法被修改, 如下圖所示：

15. 設定可編輯區域 • 但是在建立範本時, 預設會將整個範本都當成不可編輯區域, 因此在建立範本時,一定要將日後可能更動的部份 (例如圖片、文章等) 設定為可編輯區域, 這樣一來套用範本之後的網頁才能編輯內容。 • 設定區域之前, 應先分析網頁的結構, 歸納出哪些區域適合作成可編輯區域。以範例網頁而言, 會更動的地方包括：書籍圖片、書籍相關說明、主題學習文章, 因此我們可以如下在範本中設定 3 個可編輯區域, 以便日後可以更動這些內容。

16. 設定可編輯區域 • 請開啟 Templates 資料夾下的 ex07-01.dwt 範本網頁 (這就是你剛剛儲存的範本檔案), 然後如下操作：

17. 設定可編輯區域 • 在交談窗中為可編輯區域取個名稱,這樣若同一個範本裡有 2 個以上的可編輯區域時, 才方便辨識：

18. 設定可編輯區域 • 設定完畢後, 剛才設定的區域就會被綠色的框線包圍起來, 上方會顯示此編輯區域的名稱：

19. 設定可編輯區域 • 重複上述的步驟, 將書籍圖片下方的說明文字選取起來, 也設定為可編輯區域：

20. 設定可編輯區域 • 將包含主題學習文章的整個區塊選取起來 (你可在選項列上點選整個<div#article> 標籤), 也設定為可編輯區域, 取名為 "book_content"：

21. 設定可編輯區域

22. 設定可編輯區域 • 最後請將範本網頁存檔, 之後就可以利用這個範本來產生其他相同版面的網頁。你可開啟 "Templates" 資料夾中的範本檔案 "ch07-01.dwt" 來參考。

23. 7-2 套用範本 • 現在我們已經將 1 個學習主題頁面製作成範本, 接下來我們就要套用此範本,快速製作出 2 個新的學習主題頁面。 • 建立直接套用範本的新網頁 • 將套用範本的網頁修改成新網頁

24. 建立直接套用範本的新網頁 • 在建立新網頁時即可直接套用範本。請執行『檔案/開新檔案』命令, 在新增文件交談窗中如圖設定：

25. 建立直接套用範本的新網頁

26. 建立直接套用範本的新網頁

27. 建立直接套用範本的新網頁 • 接著只要儲存檔案, 就完成了一頁與範本一模一樣的頁面。你可開啟 ch07-01.html來參考。 • 除了上面的方法, 你也可以先建立一個空白網頁, 再如下套用範本：

28. 建立直接套用範本的新網頁

29. 建立直接套用範本的新網頁 • 要注意的是, 套用範本的網頁最好是完全空白、沒有編輯過的, 若你將已經編輯好內容的網頁套用範本, 當其中的網頁元件和範本中的可編輯區域發生衝突時,便會顯示如下的交談窗：

30. 建立直接套用範本的新網頁

31. 將套用範本的網頁修改成新網頁 • 套用範本後, 只要把可編輯區域裡的內容換掉, 另存新檔後, 就完成一頁新網頁了。接下來我們就要實際製作兩個新的主題學習頁面, 分別是 「彩色影像轉為黑白影像的基本方法與原則」 與 「怎麼拍出剪影效果？」 頁面, 所需的資料我們已經整理在 ch07A.doc 和 ch07B.doc 這兩個檔案中, 請利用它們來替換可編輯區域裡的內容：

32. 將套用範本的網頁修改成新網頁

33. 將套用範本的網頁修改成新網頁 • 請開啟 ex07-02.html, 這是我們已經套用範本的網頁, 請選取其中的可編輯區域 "book_img", 將其中的圖片置換成 ch07A.doc 中的書籍圖片：

34. 將套用範本的網頁修改成新網頁

35. 將套用範本的網頁修改成新網頁 • 接著請選取 ch07A.doc 中的參考書籍資訊和主題內容, 分別置換到網頁中的可編輯區域 "book_text" 和" "book_content"：

36. 將套用範本的網頁修改成新網頁

37. 將套用範本的網頁修改成新網頁 • 貼入文字後, 請參考原文來安排段落、插入圖片, 再將標題和內文、圖片等分別套用網站的 CSS 格式, 網頁就完成囉！你可開啟 ch07-02.html 來參考。

38. 將套用範本的網頁修改成新網頁

39. 將套用範本的網頁修改成新網頁 • 完成上面的練習後, 請你自行練習利用範例檔案資料夾中的 ch07B.doc 來製作「怎麼拍出剪影效果？」主題學習頁面, 成果可參考 ch07-03.html。 • 其實編輯套用範本的網頁和編輯一般網頁大同小異, 唯一的不同就是不可編輯區域無法更動。如果你想更改不可編輯區域中的內容, 必須先將頁面與範本分離才行, 請參考下一節的說明。

40. 7-3 修改、刪除與分離範本 • 修改範本 • 刪除與分離範本 • 刪除範本檔案 • 將網頁與範本檔案分離

41. 修改範本 • 範本儲存以後, 你還是可以再更新範本網頁的內容, 例如新增更多的可編輯區域,或加入新內容等等。只要更新並儲存範本檔案, 已套用範本的網頁就會自動更新, 不必再一個個重新修改。例如我們現在要將表頭上的「分類主題」圖片換成「推薦主題」圖片, 請如下操作： • 請開啟要編輯的範本檔案, 例如我們開啟 Templates 資料夾中的 ch07-01.dwt, 然後選取「分類主題」圖片, 如下更換圖片：

42. 修改範本

43. 修改範本 • 修改完成後, 請執行『檔案/儲存』命令將範本存檔, 這時 Dreamweaver 會提示你更新套用範本的網頁：

44. 修改範本 • 接著你可以開啟已套用範本的網頁來檢查一下, 看看是否有更新成功。

45. 刪除與分離範本 • 範本可輔助我們快速製作及修改大量相同版型的網頁, 因此當網站改版時, 只要換用新的範本檔案, 就能快速更新整個網站了。那麼舊範本和套用舊範本的網頁該怎麼辦呢？以下就分別說明刪除範本, 以及將網頁與範本分離的方法。

46. 刪除範本檔案 • 只要在資源面板選取要刪除的範本, 按下 鈕或按下 Delete鍵即可刪除：

47. 將網頁與範本檔案分離 • 雖然刪除了範本, 但原來套用範本的網頁並不會被更動, 原本是不可編輯區域的地方還是無法編輯：

48. 將網頁與範本檔案分離 • 這時只要執行『修改/範本/從範本中分離』命令, 就能完全移除套用在此頁上的範本, 即可編輯頁面中的所有區域。