运用网页范本制作版型相同的网.ppt

《运用网页范本制作版型相同的网.ppt》由会员分享，可在线阅读，更多相关《运用网页范本制作版型相同的网.ppt（48页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、著作權所有 旗標出版股份有限公司本著作含書附光碟之內容(不含 GPL 軟體)，僅授權合法持有本書之讀者（包含個人及法人）非商業用途之使用，切勿置放在網路上播放或供人下載，除此之外，未經授權不得將全部或局部內容以任何形式重製、轉載、散佈或以其他任何形式、基於任何目的加以利用。運用網頁範本製作版型相同的網頁第第 7 堂課堂課本堂課重點本堂課重點7-1 建立範本網頁7-2 套用範本7-3 修改、刪除與分離範本27-1 建立範本網頁建立範本網頁範本的使用時機與優點範本的使用時機與優點將網頁製作成範本將網頁製作成範本直接新增範本網頁直接新增範本網頁設定可編輯區域設定可編輯區域3範本的使用時機與優點範本的

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

3、作好一個要當作基本版型的頁面,將它儲存為範本範本格式,然後將其中需要更動的區域(內文、圖片等)設定為可編輯區域可編輯區域,之後套用範本的頁面就會成為相同版型,我們只要將可編輯區域可編輯區域的內容更新,就做好一頁新網頁了。下面我們就實際來將網頁製作為範本。請開啟練習檔 ex07-01.html,這是我們事先已製作好的頁面,我們要將這頁製作成範本,之後就可以套用此範本來製作其他內容的頁面。6將網頁製作成範本將網頁製作成範本1.請執行插入插入/範本物件範本物件/製作範本製作範本命令,在交談窗中輸入要儲存的範本檔名(你也可以執行檔案檔案/另存成範本另存成範本命令,將網頁另存成範本格式)：7將網頁製作成

4、範本將網頁製作成範本8將網頁製作成範本將網頁製作成範本2.存檔之後,Dreamweaver 會自動在網站根目錄下建立一個 Templates 資料夾,專門存放範本檔案：9直接新增範本網頁直接新增範本網頁除了將做好的網頁另存為範本網頁外,你也可以在建立檔案時直接選擇建立範本網頁,請在Dreamweaver 的起始畫面,按下更多更多鈕,進入新增文件新增文件交談窗(或在 Dreamweaver 中執行檔案檔案/新增檔案新增檔案命令,也可進入新增文件新增文件交談窗)。10直接新增範本網頁直接新增範本網頁11直接新增範本網頁直接新增範本網頁12直接新增範本網頁直接新增範本網頁13設定可編輯區域設定可編輯

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

6、輯區域可編輯區域,以便日後可以更動這些內容。15設定可編輯區域設定可編輯區域1.請開啟 Templates 資料夾下的 ex07-01.dwt 範本網頁(這就是你剛剛儲存的範本檔案),然後如下操作：16設定可編輯區域設定可編輯區域2.在交談窗中為可編輯區域可編輯區域取個名稱,這樣若同一個範本裡有 2 個以上的可編輯區域時,才方便辨識：17設定可編輯區域設定可編輯區域3.設定完畢後,剛才設定的區域就會被綠色的框線包圍起來,上方會顯示此編輯區域的名稱：18設定可編輯區域設定可編輯區域4.重複上述的步驟,將書籍圖片下方的說明文字選取起來,也設定為可編輯區域：19設定可編輯區域設定可編輯區域5.將包含

7、主題學習文章的整個區塊選取起來(你可在選項列選項列上點選整個 標籤),也設定為可編輯區域,取名為 book_content：20設定可編輯區域設定可編輯區域21設定可編輯區域設定可編輯區域最後請將範本網頁存檔,之後就可以利用這個範本來產生其他相同版面的網頁。你可開啟 Templates 資料夾中的範本檔案 ch07-01.dwt 來參考。227-2 套用範本套用範本現在我們已經將 1 個學習主題頁面製作成範本,接下來我們就要套用此範本,快速製作出 2 個新的學習主題頁面。建立直接套用範本的新網頁建立直接套用範本的新網頁將套用範本的網頁修改成新網頁將套用範本的網頁修改成新網頁23建立直接套用範本

8、的新網頁建立直接套用範本的新網頁在建立新網頁時即可直接套用範本。請執行檔案檔案/開新檔案開新檔案命令,在新增文件交談窗中如圖設定：24建立直接套用範本的新網頁建立直接套用範本的新網頁25建立直接套用範本的新網頁建立直接套用範本的新網頁26建立直接套用範本的新網頁建立直接套用範本的新網頁接著只要儲存檔案,就完成了一頁與範本一模一樣的頁面。你可開啟 ch07-01.html來參考。除了上面的方法,你也可以先建立一個空白網頁,再如下套用範本：27建立直接套用範本的新網頁建立直接套用範本的新網頁28建立直接套用範本的新網頁建立直接套用範本的新網頁要注意的是,套用範本的網頁最好是完全空白、沒有編輯過的,

9、若你將已經編輯好內容的網頁套用範本,當其中的網頁元件和範本中的可編輯區域發生衝突時,便會顯示如下的交談窗：29建立直接套用範本的新網頁建立直接套用範本的新網頁30將套用範本的網頁修改成新網頁將套用範本的網頁修改成新網頁套用範本後,只要把可編輯區域裡的內容換掉,另存新檔後,就完成一頁新網頁了。接下來我們就要實際製作兩個新的主題學習頁面,分別是 彩色影像轉為黑白影像的基本方法與原則 與 怎麼拍出剪影效果？頁面,所需的資料我們已經整理在 ch07A.doc 和 ch07B.doc 這兩個檔案中,請利用它們來替換可編輯區域裡的內容：31將套用範本的網頁修改成新網頁將套用範本的網頁修改成新網頁32將套用

10、範本的網頁修改成新網頁將套用範本的網頁修改成新網頁1.請開啟 ex07-02.html,這是我們已經套用範本的網頁,請選取其中的可編輯區域 book_img,將其中的圖片置換成 ch07A.doc 中的書籍圖片：33將套用範本的網頁修改成新網頁將套用範本的網頁修改成新網頁34將套用範本的網頁修改成新網頁將套用範本的網頁修改成新網頁2.接著請選取 ch07A.doc 中的參考書籍資訊和主題內容,分別置換到網頁中的可編輯區域 book_text 和 book_content：35將套用範本的網頁修改成新網頁將套用範本的網頁修改成新網頁36將套用範本的網頁修改成新網頁將套用範本的網頁修改成新網頁3.

11、貼入文字後,請參考原文來安排段落、插入圖片,再將標題和內文、圖片等分別套用網站的 CSS 格式,網頁就完成囉！你可開啟 ch07-02.html 來參考。37將套用範本的網頁修改成新網頁將套用範本的網頁修改成新網頁38將套用範本的網頁修改成新網頁將套用範本的網頁修改成新網頁完成上面的練習後,請你自行練習利用範例檔案資料夾中的 ch07B.doc 來製作怎麼拍出剪影效果？主題學習頁面,成果可參考 ch07-03.html。其實編輯套用範本的網頁和編輯一般網頁大同小異,唯一的不同就是不可編輯區域不可編輯區域無法更動。如果你想更改不可編輯區域不可編輯區域中的內容,必須先將頁面與範本分離才行,請參考下

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

13、.修改完成後,請執行檔案檔案/儲存儲存命令將範本存檔,這時 Dreamweaver 會提示你更新套用範本的網頁：43修改範本修改範本3.接著你可以開啟已套用範本的網頁來檢查一下,看看是否有更新成功。44刪除與分離範本刪除與分離範本範本可輔助我們快速製作及修改大量相同版型的網頁,因此當網站改版時,只要換用新的範本檔案,就能快速更新整個網站了。那麼舊範本和套用舊範本的網頁該怎麼辦呢？以下就分別說明刪除範本,以及將網頁與範本分離的方法。45刪除範本檔案刪除範本檔案只要在資源資源面板選取要刪除的範本,按下 鈕或按下 Delete 鍵即可刪除：46將網頁與範本檔案分離將網頁與範本檔案分離雖然刪除了範本,但原來套用範本的網頁並不會被更動,原本是不可編輯區域不可編輯區域的地方還是無法編輯：47將網頁與範本檔案分離將網頁與範本檔案分離這時只要執行修改修改/範本範本/從範本中分離從範本中分離命令,就能完全移除套用在此頁上的範本,即可編輯頁面中的所有區域。48