（中職）網(wǎng)頁(yè)設(shè)計(jì)與制作教程8

1、YCF正版可修改PPT（中職）網(wǎng)頁(yè)設(shè)計(jì)與制作教程8項(xiàng)目活動(dòng)八居家房產(chǎn)網(wǎng)站:模板和庫(kù)的應(yīng)用任務(wù)一創(chuàng)建模板任務(wù)二應(yīng)用模板任務(wù)三庫(kù)任務(wù)四居家房產(chǎn)網(wǎng)站建設(shè)返回任務(wù)一創(chuàng)建模板一、模板的概念模板是一個(gè)有固定內(nèi)容和格式的文檔， 是用戶(hù)批量創(chuàng)建文檔和更新文檔的基礎(chǔ)。在 中， 創(chuàng)建的模板文件保存在網(wǎng)站根目錄下的“” 文件夾內(nèi)， “” 文件夾是自動(dòng)生成的， 用戶(hù)不能對(duì)其進(jìn)行修改。二、創(chuàng)建模板創(chuàng)建模板有兩種方法， 即直接創(chuàng)建空白模板和將現(xiàn)有網(wǎng)頁(yè)保存為模板() 直接創(chuàng)建空白模板。執(zhí)行菜單命令“窗口” “資源”， 打開(kāi)“資源” 面板， 單擊“資源” 面板中的“模板” 按鈕， 然后單擊“資源” 面板右下角的“新建” 按鈕

2、 來(lái)創(chuàng)建空白模板。 如圖 所示。下一頁(yè)返回任務(wù)一創(chuàng)建模板也可以在主菜單中執(zhí)行菜單命令“文件” “新建”， 打開(kāi)“新建文檔” 對(duì)話(huà)框， 然后選擇“空模板” “ 模板” 命令來(lái)創(chuàng)建空白模板， 如圖 所示， 單擊“創(chuàng)建” 按鈕后， 效果如圖 所示。 創(chuàng)建空白模板后， 還需要打開(kāi)模板文件， 在其中添加網(wǎng)頁(yè)元素和模板對(duì)象。() 將現(xiàn)有網(wǎng)頁(yè)保存為模版。首先打開(kāi)一個(gè)已有內(nèi)容的網(wǎng)頁(yè)文檔， 根據(jù)實(shí)際需要在網(wǎng)頁(yè)中選擇網(wǎng)頁(yè)元素， 并將其轉(zhuǎn)換為模板對(duì)象， 然后在主菜單中執(zhí)行菜單命令“文件” “另存為模板”， 如圖 所示， 會(huì)彈出“另存模板” 對(duì)話(huà)框， 如圖 所示。上一頁(yè)下一頁(yè)返回任務(wù)一創(chuàng)建模板三、刪除模板如果要?jiǎng)h除模

3、板， 只要選中該模板， 然后單擊“資源” 面板右下角的“刪除” 按鈕 即可， 如圖 所示。四、編輯模板() 可編輯區(qū)域?？删庉媴^(qū)域是指可以進(jìn)行添加、修改和刪除網(wǎng)頁(yè)元素等操作的區(qū)域。 可編輯區(qū)域在模板中由高亮顯示的矩形邊框圍繞， 該邊框使用在首選參數(shù)中設(shè)置的高亮顏色。 該區(qū)域左上角的選項(xiàng)卡顯示該區(qū)域的名稱(chēng)。 另外需要注意的是， 在可編輯區(qū)域內(nèi)不能再插入可編輯區(qū)域。上一頁(yè)下一頁(yè)返回任務(wù)一創(chuàng)建模板執(zhí)行菜單命令“插入” “模板對(duì)象” “可編輯區(qū)域”， 如圖 所示。 會(huì)打開(kāi)“新建可編輯區(qū)域” 對(duì)話(huà)框， 插入或者將當(dāng)前選定區(qū)域設(shè)為可編輯區(qū)域。修改可編輯區(qū)域等模板對(duì)象的名稱(chēng)可以在“屬性” 面板中進(jìn)行修改。

4、方法是單擊模板對(duì)象的名稱(chēng)或者將光標(biāo)定位在模板對(duì)象處， 然后在工作區(qū)下面選擇相應(yīng)的標(biāo)簽， 在選擇模板對(duì)象時(shí)會(huì)顯示其“屬性” 面板， 在“屬性” 面板中修改模板對(duì)象的名稱(chēng)即可， 如圖 所示。() 可編輯區(qū)域操作。在模板中創(chuàng)建了可編輯區(qū)域后， 可以對(duì)它進(jìn)行常用的操作， 例如選擇可編輯區(qū)域、刪除可編輯區(qū)域、重命名可編輯區(qū)域等。在模板中單擊可編輯區(qū)域左上角的選項(xiàng)卡即可選擇可編輯區(qū)域。 在模板中單擊可編輯區(qū)域之外的任何區(qū)域， 可以取消選擇可編輯區(qū)域。上一頁(yè)下一頁(yè)返回任務(wù)一創(chuàng)建模板在模板中刪除可編輯區(qū)域， 則該區(qū)域變?yōu)椴豢删庉媴^(qū)域。 要?jiǎng)h除可編輯區(qū)域， 首先選擇可編輯區(qū)域， 然后執(zhí)行菜單命令“修改” “模板

5、” “刪除模板標(biāo)記”。要重命名可編輯區(qū)域， 首先選擇可編輯區(qū)域， 然后在屬性欄的可編輯區(qū)域“名稱(chēng)” 框中輸入新的名稱(chēng)即可。上一頁(yè)返回任務(wù)二應(yīng)用模板一、利用模板新建網(wǎng)頁(yè)執(zhí)行菜單命令“文件” “新建”， 打開(kāi)“新建文檔” 對(duì)話(huà)框， 選擇“模板中的頁(yè)”選項(xiàng)卡， 選擇已創(chuàng)建的模板， 如圖 所示。 也可以在“資源” 面板中打開(kāi)模板列表，在模板列表單擊鼠標(biāo)右鍵選取需要的模板， 在彈出的快捷菜單中選擇“從模板新建” 命令， 如圖 所示。 基于模板的新文檔即在文檔窗口中打開(kāi)。二、在已存在的頁(yè)面應(yīng)用模板首先打開(kāi)要應(yīng)用模板的網(wǎng)頁(yè)文檔， 執(zhí)行菜單命令“修改” “模板” “應(yīng)用模板到頁(yè)”， 彈出“選擇模板” 對(duì)話(huà)框，

6、 如圖 所示。 或者在“資源” 面板的模板列表框中選中要應(yīng)用的模板， 單擊面板底部的“應(yīng)用” 按鈕即可應(yīng)用模板。下一頁(yè)返回任務(wù)二應(yīng)用模板如果已打開(kāi)的文檔是一個(gè)空白文檔， 文檔將直接應(yīng)用模板， 如果打開(kāi)的文檔是一個(gè)有內(nèi)容的文檔， 這時(shí)通常會(huì)彈出一個(gè)“不一致的區(qū)域名稱(chēng)” 對(duì)話(huà)框， 如圖 所示。 該對(duì)話(huà)框會(huì)提示讀者將文檔中已有內(nèi)容放在模板的什么區(qū)域。 保存文檔， 預(yù)覽效果如圖 所示。三、分離模板通過(guò)選擇“從模板中分離” 命令將使用模板的網(wǎng)頁(yè)脫離模板。 脫離模板后， 網(wǎng)頁(yè)中的內(nèi)容將自動(dòng)變成與模板無(wú)關(guān)的內(nèi)容， 網(wǎng)頁(yè)與模板不再有關(guān)聯(lián)。上一頁(yè)返回任務(wù)三庫(kù)一、庫(kù)的概念庫(kù)是一種特殊的 文件， 可以用來(lái)存放諸如文

7、本、圖像等的網(wǎng)頁(yè)元素， 這些元素通常被廣泛用于整個(gè)站點(diǎn)， 并且經(jīng)常被重復(fù)使用或更新。創(chuàng)建的庫(kù)項(xiàng)目通常保存在網(wǎng)站根目錄下的“” 文件夾內(nèi)， “” 文件夾是自動(dòng)生成的， 用戶(hù)不能對(duì)其進(jìn)行修改。二、創(chuàng)建庫(kù)項(xiàng)目() 創(chuàng)建空白庫(kù)項(xiàng)目。執(zhí)行菜單命令“窗口” “資源”， 打開(kāi)“資源” 面板。 在“資源” 面板中單擊“庫(kù)” 按鈕 切換至“庫(kù)” 分類(lèi)， 單擊面板右下角的“新建” 按鈕 新建一個(gè)庫(kù)， 然后在列表框中輸入庫(kù)的名稱(chēng)并加以確認(rèn)。 如圖 所示。下一頁(yè)返回任務(wù)三庫(kù)也可以在主菜單中執(zhí)行菜單命令“文件” “新建”， 打開(kāi)“新建文檔” 對(duì)話(huà)框，然后選擇“空白頁(yè)”， 在頁(yè)面類(lèi)型中選擇“庫(kù)項(xiàng)目” 來(lái)創(chuàng)建空白庫(kù)項(xiàng)目。

8、如圖 所示。() 從已有的網(wǎng)頁(yè)創(chuàng)建庫(kù)項(xiàng)目。首先打開(kāi)一個(gè)已有的文檔， 從中選擇要保存為庫(kù)項(xiàng)目的對(duì)象， 如表格、圖像等， 然后執(zhí)行菜單命令“修改” “庫(kù)” “增加對(duì)象到庫(kù)” 或在“資源” 面板的“庫(kù)” 分類(lèi)模式下， 單擊右下角的“新建” 按鈕 ， 則該對(duì)象即被添加到庫(kù)項(xiàng)目列表中， 庫(kù)項(xiàng)目名為系統(tǒng)默認(rèn)的名稱(chēng)， 修改名稱(chēng)后按 鍵確認(rèn)。三、刪除庫(kù)項(xiàng)目如果要?jiǎng)h除庫(kù)項(xiàng)目， 只要先選中該庫(kù)項(xiàng)目， 然后單擊“資源” 面板右下角的“刪除”按鈕 或按 鍵即可。上一頁(yè)返回任務(wù)四制作居家網(wǎng)站一、新建、布局模板網(wǎng)頁(yè)() 新建站點(diǎn)， 將 中的“居家網(wǎng)” 文件夾下的“” 文件夾復(fù)制到本地根文件夾中。() 新建文檔， 執(zhí)行菜單

9、命令“文件” “另存為模板”， 彈出“另存為模板” 對(duì)話(huà)框， 將模板文件命名為“”， 修改頁(yè)面屬性， 設(shè)置文檔字體大小為“”。() 布局模板網(wǎng)頁(yè)， 插入一個(gè) 行 列、寬為 像素的表格。 設(shè)置表格居中對(duì)齊，第 個(gè)單元格寬度設(shè)置為 像素， 插入圖片 .。 第 個(gè)單元格中嵌入一個(gè) 行 列的表格， 合并該表格的第 行， 插入圖片 .。 設(shè)置第 行的行高為 像素，光標(biāo)定位到該行的第一個(gè)單元格中， 切換到代碼視圖。下一頁(yè)返回任務(wù)四制作居家網(wǎng)站在 標(biāo)簽中， 插入代碼 ./ / .， 合并第、 行中的第 列單元格， 插入圖片.。 在第 行的第 個(gè)單元格中， 插入圖片 .。() 將光標(biāo)定位到設(shè)置背景圖片的單元格

10、中， 在“屬性” 面板中設(shè)置該單元格水平、垂直、居中顯示， 輸入文字， 效果如圖 所示。() 插入一個(gè) 行 列、寬為 像素的表格， 設(shè)置表格居中對(duì)齊。 第 個(gè)單元格寬度設(shè)置為 像素， 插入圖片 .， 將光標(biāo)定位到圖片所在單元格的后面， 插入一個(gè) 行 列的表格， 寬度為。 將第、 行的高度設(shè)置為 像素，第、 行的高度設(shè)置為 像素， 設(shè)置背景圖片為 .。上一頁(yè)下一頁(yè)返回任務(wù)四制作居家網(wǎng)站在代碼視圖中刪除第、 行中的“”， 設(shè)置 行 列表格的第、 列的寬度為像素。() 在相應(yīng)的位置插入圖片， 效果如圖 所示。() 將光標(biāo)定位到 行 列表格的第 個(gè)單元格中， 設(shè)置該單元格的垂直對(duì)齊為頂端。 在該單元格

11、中插入一個(gè) 行 列的表格， 設(shè)置第 個(gè)單元格的寬為 像素， 插入圖片 .。 設(shè)置第 個(gè)單元格的寬為 像素， 插入圖片 .。 將第 個(gè)單元格拆分成 行， 設(shè)置第 行的行高為 像素， 將光標(biāo)定位到該單元格中， 在代碼視圖中， 設(shè)置背景圖片為 .， 輸入文字“熱點(diǎn)新聞金融資訊樓盤(pán)展示購(gòu)房指南”。上一頁(yè)下一頁(yè)返回任務(wù)四制作居家網(wǎng)站() 同理， 在 行 列的表格下方插入一個(gè) 行 列的表格， 設(shè)置第 列的寬度為像素， 插入圖片 .， 設(shè)置第 列的列寬為 像素， 拆分該單元格為兩行， 設(shè)置第 行的高度為 像素。 在代碼視圖中， 設(shè)置背景圖片為 .， 按相應(yīng)的空格， 輸入文字“熱點(diǎn)新聞”。 在第 列中插入圖片

12、 .， 布局完成， 效果如圖 所示。() 在文檔底部， 插入一個(gè) 行 列、寬為 像素的表格， 在單元格中插入圖片 .， 效果如圖 所示。() 保存模板網(wǎng)頁(yè)。 彈出如圖 所示的提示框。 單擊“確定”， 完成模板網(wǎng)頁(yè)的布局。上一頁(yè)下一頁(yè)返回任務(wù)四制作居家網(wǎng)站二、基于模板新建頁(yè)面() 執(zhí)行菜單命令“文件” “新建”， 打開(kāi)“新建文檔” 對(duì)話(huà)框。 選擇“模板中的頁(yè)” 選項(xiàng)， 選擇“站點(diǎn)” 中的模板“”， 單擊“創(chuàng)建” 按鈕， 如圖 所示。() 同理， 基于模板創(chuàng)建 個(gè)頁(yè)面。在文檔上方單擊鼠標(biāo)右鍵， 出現(xiàn)如圖 所示的列表， 單擊“保存全部”， 可將 個(gè)基于模板新建的頁(yè)面保存到本地根文件夾中， 名稱(chēng)分別為

13、.、.、.、. 和.。三、設(shè)置模板可編輯區(qū)域() 打開(kāi)模板文件“.”， 光標(biāo)定位到設(shè)置可編輯區(qū)域的單元格中， 單擊鼠標(biāo)右鍵， 執(zhí)行命令“模板” “新建可編輯區(qū)域”， 如圖 所示。上一頁(yè)下一頁(yè)返回任務(wù)四制作居家網(wǎng)站() 保存模板網(wǎng)頁(yè)， 彈出如圖 所示“更新模板文件” 對(duì)話(huà)框， 單擊“更新” 按鈕， 基于模板新建的頁(yè)面都有了可編輯區(qū)域。() 修改所有基于模板新建的頁(yè)面中的可編輯部分， 保存所有基于模板新建的頁(yè)面。四、設(shè)置模板的超鏈接() 分別選擇模板文件中的文字“新聞中心” “地產(chǎn)觀察” “樓盤(pán)點(diǎn)評(píng)” “熱點(diǎn)追蹤”“精彩生活” 創(chuàng)建超鏈接。() 文字“新聞中心” “地產(chǎn)觀察” “樓盤(pán)點(diǎn)評(píng)” “熱點(diǎn)追蹤” “精彩生活” 分別鏈接本地根文件夾中的.、.、.、. 和.。() 保存模板文件， 彈出“更新模板文件” 對(duì)話(huà)框， 單擊“更新” 按鈕， 保存基于模板新建的網(wǎng)頁(yè)。上一頁(yè)返回圖 “資源” 面板返回圖 “新建文檔” 對(duì)話(huà)框返回圖 效果圖返回圖 “另存為模板” 命令返回圖 “另存模板” 對(duì)話(huà)框返回圖 刪除效果圖返回圖 插入“可編輯區(qū)域”返回圖 可編輯區(qū)域的“屬性” 面板返回圖