課時：3 班級：12計算機班實訓日期：2013-4-23 編寫時期：2013-4-18
一、實訓目的
1、 掌握模板的建立；
2、 掌握模板的的編輯；
3、 掌握基於模板建立網頁。
二、實訓內容
利用模板製作如下圖所示網頁
利用模板製作如下圖所示網頁；
其中：圖1為「首頁」index.html的效果圖，該頁面左欄文字內容在shengming.txt中；
圖2為「個人簡介」jianjie.html的效果圖，對於該頁面，單擊左欄的導航文字，右欄會跳到相對應文字所在的位置，右欄文字內容在jianjie.doc中；
圖3為「文學作品」wenxue.html的效果圖，該頁面右欄文字內容在wenxue.txt中；
圖4為「繪畫作品」huihua.html的效果圖；
圖5為「繪畫作品」donghua.html的效果圖，其中左側的導航按鈕，初始化時是一張影象，滑鼠單擊時又是一張影象；
圖6為單擊donghua.html的「動畫一」按鈕顯示的donghua1.html的效果圖；
圖7為單擊donghua.html的「動畫二」按鈕顯示的donghua2.html的效果圖；
圖8為單擊donghua.html的「動畫三」按鈕顯示的donghua3.html的效果圖；
圖9為單擊donghua.html的「動畫四」按鈕顯示的donghua4.html的效果圖；
圖10為 「學習心得」xinde.html的效果圖；
導航中的「寫信給我」鏈結到你的郵箱，設定所有鏈結的顏色為白色，已訪問的鏈結的顏色為黃色。
圖1 index.html圖2 jianjie.html
圖3 wenxue.html圖4 huihua.html
圖5 donghua.html圖6 donghua1.html
圖7 donghua2.html圖8 donghua3.html
圖9 donghua3.html圖10 xinde.html
三、知識點分解
由上圖可知，所有頁面的頁首、導航和頁尾區域的內容都是一致的，只要主題區不一致，所以我們可以利用模板來建立這些頁面，該模板的頁首、導航和頁尾區域都是固定區域，只有主體區是可編輯區域，在主體區域我們可以繪製2個**，每個**內建立1個可編輯區域，同時設定左邊**的背景顏色和右邊**的背景影象。對於donghua.html，donghua1.
html，donghua2.html，donghua3.html，donghua4.
html，從它們的效果圖可以看出這5個頁面的主體區只有右邊在變化，所以我們同樣可以再建立1個模板，在該模板的主體區的右欄建立1個可編輯區域。因此，對於該實訓我們需要建立2個模板。
四、實訓步驟
1、新建乙個文件，將「插入」欄中的「常用」選項卡改為「布局」選項卡，此時就出現「布局」工具欄，切換到「布局」模式，單擊「布局**」按鈕，繪製乙個寬：780px，高：636px的**。
2、單擊「布局**」按鈕，從該**的左上角起，繪製乙個寬：780，高：120的**。
3、單擊「布局單元格」按鈕，從**的左上角開始繪製乙個寬：140，高：120的單元格.
4、將游標定位在單元格內，選擇[插入]/[影象]選單命令，開啟「選擇影象源」檔案對話方塊，選擇影象logo.gif。
5、單擊「布局單元格」按鈕，接著上面的單元格的右邊繪製乙個寬：640，高：120的單元格.
6、將游標定位在單元格內，選擇[插入]/[**]/[flash]選單命令，開啟「選擇檔案」對話方塊，選擇檔案banner.swf。
7、接著往下繪製乙個寬：780，高：21，水平：
居中對齊，垂直;居中，背景顏色：#cc3333的單元格，輸入文字：首頁個人簡介文學作品繪畫作品動畫作品**作品學習心得給我留言寫信給我，設定文字格式：
字型「宋體」，大小「14px」。
8、接著再往下繪製乙個寬：140，高：470，水平：居中對齊，垂直;居中，背景顏色：#0066ff的單元格。
9、接著上面**的右邊繪製乙個寬：640，高：470，水平：居中對齊，垂直;居中，背景影象：back.gif的單元格。
10、接著上面的兩個**的下面繪製乙個高：18，水平：居中對齊，垂直;居中，背景顏色：
#000000的單元格，輸入文字：2023年12月20日最後更新 copyright 2006 小慧版權所有，設定文字格式：字型：
宋體，大小：12px，顏色：白色。
11、回到「標準」模式，將游標定位到第8步建立的單元格內，選擇[插入]/[模板物件]/[可編輯區域]選單命令，彈出如圖11所示的對話方塊，單擊「確定」按鈕，則在該單元格內就出現了乙個名為「editregion1」的可編輯區域。
圖11 「新建可編輯區域」對話方塊
12、將游標定位到第9步建立的單元格內，選擇[插入]/[模板物件]/[可編輯區域]，彈出如圖11所示的對話方塊，單擊「確定」按鈕，則在該**內就出現了乙個名為「editregion2」的可編輯區域，建立的模板的效果圖如下。
圖12 模板的效果圖圖13 「另存為模板」對話方塊
13、刪除可編輯區域裡面的文字「editregion1」，「editregion2」。
14、選擇[檔案]/[另存為模板]選單命令，彈出如圖13所示的「另存為模板」對話方塊，選擇模板所在的站點，如果該站點下有模板，則在「現存的模板」中會出現該模板的名稱，如果該站點下沒有模板，則在「現存的模板」中會出「沒有模板」，在「另存為」中輸入模板的名稱xiaohui，單擊「儲存」按鈕，該模板會自動儲存在templates資料夾中。
15、選擇[檔案] /[新建]選單命令，彈出如圖14所示的「從模板新建」對話方塊，選擇「模板」選項卡，單擊該站點下的模板「xiaohui」，單擊「建立」按鈕，即建立了乙個新的文件。
圖14 「從模板新建」對話方塊圖15 「檔案」面板
16、因為該文件是利用模板建立的，所以只有可編輯區域能夠進行編輯，其餘區域都不可編輯，將游標定位到「editregion1」內，開啟shengming.txt檔案，將裡面的文字複製、貼上到該區域，選擇標題文字「熱愛生命」，設定格式：字型「宋體」，大小「14px」，顏色「#ffff00」；選擇剩下的文字，設定格式：
字型「宋體」，大小「12px」，顏色「#ffffff」。
17、將游標定位到「editregion2」內，選擇[插入]/[**]/[flash]選單命令，開啟「選擇檔案」對話方塊，選擇檔案main.swf，將游標定位到main.swf的後面，敲回車鍵，輸入文字「 曾經愛的網路裡心在遊弋
曾經的相濡以沫曾經的默契合作曾經的打打鬧鬧
曾經的牽掛曾經的思念……」,設定格式：字型「宋體」，大小「16px」，顏色 「#ff9900」。
18、按【ctrl+s】將該網頁儲存為index.html。
19、重複步驟15，在「editregion1」內輸入文字「☆ 教育背景、☆ 英語水平、☆ 計算機水平、☆ 語言水平、☆ 所獲獎項、☆ 社會實踐、☆ 個性特點、☆ 興趣愛好、☆ 人生格言」，將游標定位到「editregion2」內，將jianjie.doc中的內容匯入到該區域中，同時對文字「教育背景、英語水平、計算機水平、語言水平、所獲獎項、社會實踐、個性特點、興趣愛好、人生格言」進行格式設定，設定格式：字型「宋體」，大小「18px」，「粗體」，其餘文字設為「宋體」，「14px」。
20、選擇右欄文字「教育背景」，選擇[插入] /[命名錨記]選單命令，輸入錨名「jiaoyu」，然後選擇左欄文字「☆ 教育背景」，將鏈結改為「#jiaoyu」。
21、重複步驟20，分別對左欄剩下的文字進行錨鏈結。
22、按【ctrl+s】將該網頁儲存為jianjie.html。
23、重複步驟15，將游標定位到「editregion1」內，選擇[插入]/[影象]選單命令，開啟「選擇影象源」檔案對話方塊，選擇圖xiu1.gif。
24、將游標定位到「editregion2」內，開啟wenxue.txt檔案，將裡面的文字複製、貼上到該區域。
25、按【ctrl+s】將該網頁儲存為wenxue.html。
26、重複步驟15，將游標定位到「editregion1」內，選擇[插入]/[影象]選單命令，開啟「選擇影象源」檔案對話方塊，選擇圖xiu1.gif。
27、將游標定位到「editregion2」內，選擇[插入]/[**] 選單命令，插入乙個2行4列無邊框的**，將游標定位到第1行第1個單元格，開啟浮動面板組中「檔案」面板，如圖15所示，選中影象「butterfly13.jpg」，將其拖到該單元格。
28、同理將「butterfly16.jpg」拖到第2個單元格，將「butterfly03.jpg」拖到第3個單元格，將「butterfly12.
jpg」拖到第4個單元格；將「butterfly01.jpg」拖到第2行第1個單元格，將「butterfly11.jpg」拖到第2行第2個單元格，將「butterfly08.
jpg」拖到第2行第3個單元格，將「butterfly07.jpg」拖到第2行第4個單元格。
29、按【ctrl+s】將該網頁儲存為huihua.html。
30、重複步驟15，將游標定位到「editregion2」內,輸入文字「單擊左邊的按鈕選擇動畫」，按【ctrl+s】將該網頁儲存為donghua.html。
31、重複步驟15。
32、將游標定位到「editregion2」內，選擇[插入]/[**]選單命令，插入乙個4行1列的**，在第1行的單元格中輸入文字「學英語怎樣才能事半功倍」，文字格式：大小「24px」，顏色「#0000ff」，單元格格式：水平「居中對齊」，垂直「居中」；在第2行的單元格中輸入文字「句子比單詞重要」，文字格式：
大小「18px」，顏色「#0000ff」，單元格格式：水平「左對齊」，垂直「居中」；在第3行的單元格中輸入文字「敢於開口」，文字格式：大小「18px」，顏色「#0000ff」，單元格格式：
水平「左對齊」，垂直「居中」，在第4行的單元格中輸入文字「盯住一套教材」，文字格式：大小「18px」，顏色「#0000ff」，單元格格式：水平「左對齊」，垂直「居中」。
網頁製作實訓報告
計算機應用專業 課程名稱 網頁設計與製作 專業 計算機應用技術 班級 2010計算機軟體 2 班 姓名 龐寧黃念秋 學號 20100501208 20100501211 時間 2012.04 2012.06 一 設計與製作專案任務書 二 實訓步驟 1 小組組成與分工,確定主題,並對選定的主題進行分析...
網頁製作課程實訓大綱
課程名稱 網頁製作實訓學時 86 適用專業 電子商務課程類別 專業課 編寫大綱教研組 實訓組 電子商務組 一 實訓的性質 目的與要求 網頁製作 課程是一門技術性和實踐性很強的學科，其模擬實習是在基礎理論教學完成之後，在校內利用 裝置及仿真實訓軟體進行的實踐性教學環節，是電子商務專業必須加強的技能教學...
電大網頁製作實訓報告答案
說明 1 淺灰色部分由學生填寫 2 白色部分為教師判分用 3 本報告與學生實際作品相關聯 說明 1 淺灰色部分由學生填寫 2 白色部分為教師判分用 3 本報告與學生實際作品相關聯 說明 1 淺灰色部分由學生填寫 2 白色部分為教師判分用 3 本報告與學生實際作品相關聯 說明 1 淺灰色部分由學生填寫...