《網(wǎng)頁設(shè)計(jì)與制作教程HTML+CSS+Bootstrap》課件 項(xiàng)目七創(chuàng)建網(wǎng)站“快樂花店”

項(xiàng)目七創(chuàng)建網(wǎng)站“快樂花店”

（模板應(yīng)用）項(xiàng)目簡介利用DreamweaverCC的模板功能，將網(wǎng)站中所有風(fēng)格類似的網(wǎng)頁，不變化的部分設(shè)計(jì)成模板網(wǎng)頁，利用制作的模板來生成網(wǎng)頁，我們只需制作網(wǎng)頁中變化的部分，這樣就極大的提高網(wǎng)站制作效率。項(xiàng)目目標(biāo)本項(xiàng)目以《快樂花店》網(wǎng)站開發(fā)為例，使用模板來快速完成整個(gè)網(wǎng)站的建設(shè)。幫助初學(xué)者理解模板的概念和作用，學(xué)會(huì)模板網(wǎng)頁基本框架的設(shè)計(jì)，固定元素部分的制作，以及可編輯區(qū)域的設(shè)計(jì)；學(xué)會(huì)利用模板網(wǎng)頁來生成新的網(wǎng)頁，對(duì)網(wǎng)頁中可編輯區(qū)域中內(nèi)容的編輯方法，以及通過修改模板來快速修改所有引用模板的網(wǎng)頁，感受模板應(yīng)用的強(qiáng)大功能。工作任務(wù)根據(jù)《快樂花店》網(wǎng)站設(shè)計(jì)與制作的要求，基于工作過程，以任務(wù)驅(qū)動(dòng)的方式，利用模板功能完成整個(gè)網(wǎng)站中所有網(wǎng)頁的設(shè)計(jì)和制作，使所有網(wǎng)頁具有相同的布局和樣式，保證整個(gè)網(wǎng)站的風(fēng)格協(xié)調(diào)一致。（1）了解模板的含義和功能；（2）模板網(wǎng)頁的設(shè)計(jì)和制作（固定區(qū)域和可編輯區(qū)域）；（3）利用模板網(wǎng)頁生成新網(wǎng)頁并對(duì)可編輯區(qū)域進(jìn)行編輯；（4）通過修改模板網(wǎng)頁快速修改所有引用模板的網(wǎng)頁；（5）通過“快樂花店”網(wǎng)站設(shè)計(jì)與制作整理模板制作網(wǎng)站的一般流程。任務(wù)一構(gòu)建網(wǎng)頁結(jié)構(gòu)通過以下兩個(gè)步驟的操作實(shí)踐來認(rèn)識(shí)模板的概念和作用，初步完成《快樂花店》首頁模板的制作，網(wǎng)頁效果如圖：1．設(shè)計(jì)《快樂花店》網(wǎng)站首頁結(jié)構(gòu)；2．制作《快樂花店》網(wǎng)站網(wǎng)頁模板；

任務(wù)目標(biāo)按照網(wǎng)站需求分析，建立站點(diǎn)文件夾，并在Dreamweaver中建立站點(diǎn)，通過《快樂花店》網(wǎng)站首頁模板設(shè)計(jì)，幫助初學(xué)者理解模板的概念和作用，學(xué)會(huì)模板網(wǎng)頁基本框架的設(shè)計(jì)，固定元素部分的制作，以及可編輯區(qū)域的設(shè)計(jì)。知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備一了解模板的概念和作用觀察這兩張網(wǎng)頁的區(qū)別。知識(shí)準(zhǔn)備二Dreamweaver中4種模板區(qū)域可編輯區(qū)域：基于模板的網(wǎng)頁中未鎖定區(qū)域，是模板用戶可以編輯修改的部分。重復(fù)區(qū)域：是網(wǎng)頁中設(shè)置為重復(fù)的布局部分。如可以設(shè)置一個(gè)重復(fù)的表格行?？蛇x區(qū)域：是在模板中指定為可選的部分，用于保存有可能在基于模板的網(wǎng)頁中出現(xiàn)的內(nèi)容?？删庉嫎?biāo)簽屬性：在模板中解鎖標(biāo)簽屬性，使該屬性可在基于模板的頁面中編輯修改。知識(shí)準(zhǔn)備三

模板網(wǎng)頁的制作方式創(chuàng)建空白模板

插入模板知識(shí)準(zhǔn)備四

模板網(wǎng)頁制作要點(diǎn)1．定義可編輯區(qū)域2．定義可編輯的重復(fù)區(qū)域3．定義可編輯的重復(fù)表格4．取消可編輯區(qū)域標(biāo)記任務(wù)實(shí)施步驟一

制作首頁基本架構(gòu)1．在D盤建立站點(diǎn)目錄“klhd”及其子目錄images。2．打開Dreamweaver，打開“文件”菜單，選擇“新建站點(diǎn)”，使用站點(diǎn)設(shè)置對(duì)象定義站點(diǎn)，站點(diǎn)名“快樂花店”，站點(diǎn)文件夾“klhd”。任務(wù)實(shí)施步驟一

制作首頁基本架構(gòu)3．打開“資源”面板中，選擇“模板”，對(duì)話框內(nèi)右鍵單擊“新建模板”，新建模板文件，重命名為“klhd.dwt”任務(wù)實(shí)施步驟一

制作首頁基本架構(gòu)4．雙擊打開klhd.dwt文件，將素材中提供的CSS樣式表style.css附加到當(dāng)前模板文件。利用DIV+CSS技術(shù)，使用附加的樣式表，設(shè)計(jì)一個(gè)如下結(jié)構(gòu)頁面布局。任務(wù)實(shí)施步驟二定義模板可編輯區(qū)1．在已完成的頁面設(shè)計(jì)中，鼠標(biāo)指向右側(cè)網(wǎng)頁主體部分“本站快訊”欄目下空白區(qū)域單擊左鍵。2．打開“插入”菜單，選擇“模板>可編輯區(qū)”，在彈出的對(duì)話框的名稱中輸入“網(wǎng)頁可編輯區(qū)”，點(diǎn)“確定”。3．切換到“代碼”視圖，在“<title>快樂花店</title>”之前添加：<!--TemplateBeginEditablename="doctitle"-->，之后添加：<!--TemplateEndEditable-->。任務(wù)實(shí)施步驟二定義模板可編輯區(qū)模板網(wǎng)頁最終設(shè)計(jì)效果任務(wù)二

基于模板制作網(wǎng)站首頁和子頁通過以下七個(gè)步驟的操作實(shí)踐通過四個(gè)步驟的操作實(shí)踐來認(rèn)識(shí)引用模板制作網(wǎng)頁的方法，完成《快樂花店》首頁：生日捧花和子頁面：慶典花籃、支付方式的制作。（1）利用模板網(wǎng)頁生成《快樂花店》首頁：生日捧花；（2）利用模板網(wǎng)頁生成《快樂花店》子頁：支付方式；（3）通過修改模板網(wǎng)頁的分類導(dǎo)航鏈接內(nèi)容，修改所有引用模板網(wǎng)頁；（4）通過瀏覽器預(yù)覽站點(diǎn)，檢查網(wǎng)站制作是否達(dá)到預(yù)期目標(biāo)。任務(wù)二

基于模板制作網(wǎng)站首頁和子頁通過以下七個(gè)步驟的操作實(shí)踐《快樂花店》網(wǎng)站首頁效果圖任務(wù)目標(biāo)利用模板網(wǎng)頁來生成新的網(wǎng)頁，對(duì)網(wǎng)頁中可編輯區(qū)域內(nèi)容的編輯方法，以及通過修改模板來快速修改所有引用模板的網(wǎng)頁，感受模板應(yīng)用的強(qiáng)大功能。知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備一

創(chuàng)建基于模板的網(wǎng)頁方式1．使用新建命令創(chuàng)建基于模板的新網(wǎng)頁知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備一

創(chuàng)建基于模板的網(wǎng)頁方式2．應(yīng)用“資源”面板中的模板創(chuàng)建基于模板的網(wǎng)頁知識(shí)準(zhǔn)備二

模板管理的要點(diǎn)1．重命名模板文件2．修改模板文件3．更新站點(diǎn)4．刪除模板文件任務(wù)實(shí)施步驟一

基于模板制作網(wǎng)站首頁：生日捧花1．打開菜單“文件>新建”，彈出“新建文檔”對(duì)話框，單擊“網(wǎng)站模板”標(biāo)簽，切換到“網(wǎng)頁模板”窗口。在“站點(diǎn)”選項(xiàng)框中選擇“快樂花店”，再從右側(cè)的選項(xiàng)框中選擇模板文件“klhd”，單擊“創(chuàng)建”按鈕，創(chuàng)建網(wǎng)站首頁：生日捧花。2．將視圖模式切換到“拆分”，插入“鮮花推薦”圖片。3．在“鮮花推薦”圖片下方，使用項(xiàng)目列表方式添加鮮花圖片。4．插入鮮花圖片和名稱、價(jià)格。5．打開菜單“修改>頁面屬性”，選擇“標(biāo)題/編碼”選項(xiàng)，在“標(biāo)題”欄內(nèi)輸入“快樂花店-生日捧花”。任務(wù)實(shí)施步驟一

基于模板制作網(wǎng)站首頁：生日捧花首頁編輯完成后的效果任務(wù)實(shí)施

課堂實(shí)踐

制作網(wǎng)站子頁：慶典花籃“慶典花籃”網(wǎng)頁編輯完成后的效果步驟二

基于模板制作網(wǎng)站子頁：支付方式1．同網(wǎng)站首頁“生日捧花”創(chuàng)建方式，根據(jù)模板新建網(wǎng)頁，創(chuàng)建網(wǎng)站子頁：支付方式。2．將編輯模式切換到“拆分”。插入“支付方式”圖片。3．在“網(wǎng)頁可編輯區(qū)”依次插入“銀行卡支付”、“微信支付”、“支付寶”、“京東支付”四種支付方式圖片。4．打開菜單“修改>頁面屬性”，選擇“標(biāo)題/編碼”選項(xiàng)，在“標(biāo)題”欄內(nèi)輸入“快樂花店-支付方式”。步驟二

基于模板制作網(wǎng)站子頁：支付方式“支付方式”網(wǎng)頁編輯完成后的效果步驟三修改模板頁導(dǎo)航鏈接并更新所有網(wǎng)頁1．打開模板文件klhd.dwt，選中左側(cè)“生日捧花”，打開“修改>創(chuàng)建鏈接”，選擇站點(diǎn)根目錄下的“index.html”，完成超