第11章 實戰(zhàn)開發(fā)（下）-傳智播客設計學院子頁面

模板的作用建立模板的步驟第十一章實戰(zhàn)開發(fā)（下）引用模板列表詳情頁面制作11.1Dreamweaver模板11.2列表詳情頁面制作11.1DW模板

11.1.1模板的作用一個大型網站通常包含多個頁面，瀏覽各個頁面時，會發(fā)現(xiàn)這些頁面有很多相同的版塊，如網站的標志、公司徽標、網站導航條等。如果每個頁面都重新布局會非常麻煩，Dreamweaver工具為此提供了專門的模板功能，將具有相同版面結構的頁面制作成模板，以供其他頁面引用。例如，在“傳智播客設計學院”項目中，所有頁面的頭部、導航和版權信息三個模塊的結構和樣式均相同。這樣就可以將這三個模塊制作成一個模板頁面，其他相同布局的網頁都可以引用此模板快速創(chuàng)建。另外，如果需要調整這三部分的內容，只需修改模板頁面內容即可。11.1DW模板11.1.2建立模板的步驟模板由可編輯區(qū)域和不可編輯區(qū)域兩部分組成。其中，不可編輯區(qū)域包含了所有頁面中相同的版塊，而可編輯區(qū)域是為各個頁面添加不同的內容設置的。下面將在站點根目錄下建立模板文件，具體步驟如下所示。11.1DW模板（1）選擇資源面板打開Dreamweaver工具，選擇【資源面板】，選中【模板】圖標，如圖所示。11.1.2建立模板的步驟11.1DW模板（2）新建模板在空白處點擊右鍵，選擇“新建模板”選項，界面中出現(xiàn)一個未命名的空模板文件，如圖所示。11.1.2建立模板的步驟11.1DW模板將文件命名為template，雙擊打開，將發(fā)現(xiàn)其后綴名為.dwt，如圖所示,這個后綴名為.dwt的文件即為網頁模板文件。11.1.2建立模板的步驟11.1DW模板模板文件創(chuàng)建完成后，站點根目錄就會自動生成一個保存模板文件的名為Templates的文件夾，如圖所示。11.1.2建立模板的步驟11.1DW模板（3）創(chuàng)建模板不可編輯區(qū)域在“傳智播客設計學院”項目中，所有頁面頭部、導航、版權信息三個模塊內容和樣式均相同。所以，在模板頁面中可以創(chuàng)建頭部、導航、版權信息三部分作為不可編輯區(qū)域。由于第十章中已經把這三部分的結構及樣式制作完成，這里只需要將所需的HTML代碼復制到模板頁面并且鏈接對應的CSS樣式表就可以了,如圖所示。11.1.2建立模板的步驟11.1DW模板注意：創(chuàng)建的模板文件都會存儲在默認的文件夾Templates里面。這樣，圖片路徑會發(fā)生變化，所以這里需要更改一些圖片的鏈接路徑。11.1.2建立模板的步驟11.1DW模板（4）定義模板可編輯區(qū)域不可編輯區(qū)域創(chuàng)建完成后，接下來要在模板頁面中建立可編輯區(qū)域。只有在可編輯區(qū)域里才可以編輯網頁內容，為其他頁面在模板頁的基礎上添加不同的內容。選中想要定義為可編輯區(qū)域的代碼或內容，點擊菜單欄中的【插入】→【模板對象】→【可編輯區(qū)域】選項，如圖所示。11.1.2建立模板的步驟11.1DW模板定義模板可編輯區(qū)域11.1.2建立模板的步驟11.1DW模板設置可編輯區(qū)域的名稱，一般將其設為默認值，然后點擊“確定”按鈕即可，如圖所示。11.1.2建立模板的步驟（5）保存并預覽模板模板文件創(chuàng)建完成，保存模板文件。打開【資源面板】，預覽模板頁面效果，如圖所示。11.1DW模板11.1.2建立模板的步驟11.1.3引用模板模板的作用在于能夠快速、一致地創(chuàng)建多個網頁，并可以一次、同時修改多個頁面。模板的應用也非常廣泛，在大中型網站項目開發(fā)中，經常需要運用模板文件來創(chuàng)建及更新網站的內容。本小節(jié)將詳細講解模板文件的引用，具體步驟如下所示。11.1DW模板（1）在站點根目錄下，打開新建的空白HTML文件about_us.html，如圖所示。11.1DW模板11.1.3引用模板（2）切換到【資源面板】，點擊模板文件預覽圖并拖動至about_us.html文件內部，即可實現(xiàn)模板文件的引用。引用模板文件后的頁面效果如圖所示。11.1DW模板11.1.3引用模板通過上圖可以看出，引用模板后的網頁由灰色和藍色代碼組成。其中，灰色代碼是不可編輯區(qū)域，只能在模板文件中進行修改。藍色的代碼則為可編輯區(qū)域，可以寫入不同的HTML代碼，以供引用模板文件的各個頁面填充各自不同的內容。11.1DW模板11.1.3引用模板11.2.1關于我們頁面制作觀察效果圖不難看出，網頁大致可分為當前瀏覽位置、學院介紹、就業(yè)明星三大部分，并且三部分均采用左右兩欄的布局方式。其效果圖對應的結構如圖所示。11.2列表詳情頁面制作11.2.2課程介紹頁面制作觀察效果圖不難看出，內容部分大致可分為當前瀏覽位置、UI設計課堂和主修課程三大模塊。其中，標題部分為左右兩欄切換顯示，詳細內容部分由左中右三欄構成。其效果圖對應的結構如圖所示。11.2列表詳情頁面制作11.2列表詳情頁面制作11.2.2課程介紹頁面制作11.2.3課程詳細介紹頁面制作觀察效果圖不難看出，“課程詳細介紹”頁面內容區(qū)域大致可分為當前瀏覽位置、課程報名、課程內容、視頻下載及課程咨詢五個模塊。其中，當前瀏覽位置、課程報名、課程內容以及課程咨詢四個模塊均采用左右兩欄的布局方式。其效果圖對應的結構如圖所示。11.2列表詳情頁面制作11.2列表詳情頁面制作11.2.3課程詳細介紹頁面制作本章小結本章首先介紹了Dreamweaver模板的作用、如何建立及引用模板。然后分步驟地分析了傳智播客設計學院列表詳情頁面的制作思