第11章 實(shí)戰(zhàn)開發(fā)（下）-傳智播客設(shè)計(jì)學(xué)院子頁(yè)面

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

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