（中職）多媒體應用技術任務8.4 創(chuàng)建網(wǎng)頁模板根據(jù)模板制作子網(wǎng)頁教學課件（）

（中職）多媒體應用技術任務8.4創(chuàng)建網(wǎng)頁模板，根據(jù)模板制作子網(wǎng)頁教學課件（工信版）任務8.4根據(jù)模板制作子網(wǎng)頁【任務描述】【任務目標】【任務分析】郭迪已經(jīng)完全制作好首頁，需要開始制作子網(wǎng)頁，課時郭迪并不想更改關于主頁中banner、主菜單、友情鏈接部分的內(nèi)容，如果每個頁面都要重復做這些內(nèi)容，郭迪覺得太浪費時間和精力了，有沒有什么方法可以只做需要修改的部分呢？根據(jù)做出的主頁布局來插入模板，并且設置模板的可編輯部分進行保存。根據(jù)創(chuàng)建出來的模板創(chuàng)建子網(wǎng)頁，并且制作子網(wǎng)頁內(nèi)容即可。1.會根據(jù)主頁創(chuàng)建模板。2.會根據(jù)需要更改的內(nèi)容部分設置可編輯區(qū)域。3.會根據(jù)模板創(chuàng)建子網(wǎng)頁并進行可編輯區(qū)域部分的內(nèi)容插入。4.了解網(wǎng)頁模版的概念和作用?！救蝿諏嵤?.根據(jù)主頁布局創(chuàng)建模板，模板名稱命名為“moban.dwt”。選擇“插入|模板對象|創(chuàng)建模板”命令，在彈出的“另存模板”對話框中更改名稱為“moban”，點擊“保存”，在彈出的“要更新鏈接嗎？”對話框中選擇“是”。創(chuàng)建好模板頁“moban.dwt”，在“文件”浮動窗口中生成“Templates”文件夾。如圖8-4-1所示。圖8-4-1創(chuàng)建模板文件任務8.4根據(jù)模板制作子網(wǎng)頁2.在moban.dwt模板文件中插入可編輯區(qū)域。確定要更改內(nèi)容的區(qū)域，選擇這個區(qū)域的相關單元格，選擇“插入|模板對象|可編輯區(qū)域”命令，在彈出的對話框中點擊“確定”按鈕即可。如圖8-4-2所示。任務8.4根據(jù)模板制作子網(wǎng)頁圖8-4-2創(chuàng)建模版文件中的可編輯區(qū)域3.保存模板并關閉模板。未保存的模板有一個“*”符號，需要點擊“文件”|“保存”命令。點擊“╳”關閉模板。如圖8-4-3所示。任務8.4根據(jù)模板制作子網(wǎng)頁圖8-4-3保存并關閉模板文件4.根據(jù)所創(chuàng)建的模板新建網(wǎng)頁并替換站點中的子網(wǎng)頁。選擇“文件|新建”命令，在彈出的“新建文檔”對話框中，選擇“模板中的頁”，選擇“moban”，點擊“創(chuàng)建”按鈕。生成以“Untitled-1.html”命名的網(wǎng)頁文件。選擇“文件|另存為”命令，在彈出的“另存為”對話框中，更改文件名稱為“ziwojieshao”，點擊“保存”，在彈出的“是否覆蓋此文件”對話框中點擊是，替換原來的空白子網(wǎng)頁即可。如圖8-4-4所示。任務8.4根據(jù)模板制作子網(wǎng)頁圖8-4-4根據(jù)模板創(chuàng)建網(wǎng)頁并替換子網(wǎng)頁5.制作“ziwojieshao.html”網(wǎng)頁的內(nèi)容。選中可編輯區(qū)域的“table”部分，點擊Delete鍵進行刪除。根據(jù)之前學習郭迪插入表格，設置CSS格式方法插入表格進行該網(wǎng)頁內(nèi)容的編輯。如插入1行2列表格，左邊單元格設置寬300px，插入圖片（ren-01.jpg），右邊單元格插入“編號列表”，輸入自我介紹的內(nèi)容，使用CSS樣式定義標簽“l(fā)i”的格式（字號16pt，顏色為#000，方框padding部分四邊均為20px）。如圖8-4-5所示。任務8.4根據(jù)模板制作子網(wǎng)頁圖8-4-5編輯子網(wǎng)頁“ziwojieshao.html”任務8.4根據(jù)模板制作子網(wǎng)頁圖8-4-5編輯子網(wǎng)頁“ziwojieshao.html”【相關知識】1.關于模板中的可編輯區(qū)域Dreamweaver中的模板文檔包括可編輯區(qū)域和不可編輯區(qū)域兩個部分。將模板中的區(qū)域設置為可編輯區(qū)域后，就可以基于模板創(chuàng)建新的頁面了。在創(chuàng)建的新頁面中，可編輯區(qū)域是可以編輯的，而其他區(qū)域都是不可編輯區(qū)域，這些區(qū)域是被鎖定的，只能回到模板頁面去修改，所以模板中的可編輯區(qū)域是模板中最重要的組成部分。任務8.4根據(jù)模板制作子網(wǎng)頁2.關于li標簽Li標簽是HTML語言里的一個元素標簽，li標簽定義列表項目。以<li>開始</li>結(jié)束。<li>標簽可用在有序列表（<ol>）和無序列表（<ul>）中?！鞠嚓P知識】3.關于CSS框模型元素框的最內(nèi)部分是實際內(nèi)容，直接包圍內(nèi)容的是內(nèi)邊距（padding）。內(nèi)邊距呈現(xiàn)了元素的背景，內(nèi)邊距的邊緣是邊框，邊框以外是外邊距，外邊距默