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

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

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

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

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

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

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

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

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

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

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

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

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

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