《新編網(wǎng)頁(yè)制作三劍客培訓(xùn)教程》課件第7章_第1頁(yè)
《新編網(wǎng)頁(yè)制作三劍客培訓(xùn)教程》課件第7章_第2頁(yè)
《新編網(wǎng)頁(yè)制作三劍客培訓(xùn)教程》課件第7章_第3頁(yè)
《新編網(wǎng)頁(yè)制作三劍客培訓(xùn)教程》課件第7章_第4頁(yè)
《新編網(wǎng)頁(yè)制作三劍客培訓(xùn)教程》課件第7章_第5頁(yè)
已閱讀5頁(yè),還剩63頁(yè)未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第7章使用Dreamweaver模板快速建站7.1認(rèn)識(shí)模板7.2應(yīng)用模板7.3管理模板7.4上機(jī)實(shí)訓(xùn)7.1認(rèn)識(shí)模板7.1.1什么是模板7.1.2什么是嵌套模板7.1.3什么是模板區(qū)域7.1.4識(shí)別模板和基于模板的網(wǎng)頁(yè)7.1.1什么是模板

1.模板的概念模板是一種特殊類型的文檔(.dwt文檔),用于設(shè)計(jì)“固定的”頁(yè)面布局,然后便可以基于模板創(chuàng)建網(wǎng)頁(yè),創(chuàng)建的網(wǎng)頁(yè)會(huì)繼承模板的頁(yè)面布局。也就是說(shuō)模板是要?jiǎng)?chuàng)建的網(wǎng)頁(yè)的基礎(chǔ)。在創(chuàng)建模板的時(shí)候,可以指定哪些區(qū)域保持不變(不可編輯),哪些區(qū)域可以進(jìn)行修改(可編輯區(qū)域)。2.模板的作用使用模板可以一次更新成百上千個(gè)頁(yè)面,從而大大提高網(wǎng)站開(kāi)發(fā)效率。從模板創(chuàng)建的網(wǎng)頁(yè)與該模板保持連接狀態(tài)(除非分離該網(wǎng)頁(yè))??梢孕薷哪0宀⒘⒓锤禄谠撃0宓乃芯W(wǎng)頁(yè)中的設(shè)計(jì)布局。7.1.1什么是模板

3.模板技術(shù)與框架結(jié)構(gòu)的區(qū)別 優(yōu)點(diǎn):建站效率高、網(wǎng)站運(yùn)行穩(wěn)定、便于頻繁更新網(wǎng)站內(nèi)容、修改布局后只上傳框架集網(wǎng)頁(yè),主頁(yè)訪問(wèn)速度慢、主題頁(yè)訪問(wèn)速度快。 缺點(diǎn):網(wǎng)頁(yè)內(nèi)容不容易實(shí)現(xiàn)居中對(duì)齊、網(wǎng)頁(yè)不能精確布局。模板的本質(zhì)是在制作網(wǎng)頁(yè)時(shí)先設(shè)計(jì)出一個(gè)模板,再通過(guò)模板創(chuàng)建不同的網(wǎng)頁(yè),修改模板時(shí)可以自動(dòng)更新基于模板的網(wǎng)頁(yè)。在網(wǎng)頁(yè)瀏覽時(shí)不依賴模板文件。 優(yōu)點(diǎn):建站效率高、網(wǎng)站運(yùn)行穩(wěn)定、修改布局后必須上傳所有網(wǎng)頁(yè),主頁(yè)訪問(wèn)速度與主題頁(yè)相同;網(wǎng)頁(yè)能精確布局、可以實(shí)現(xiàn)所有效果。 缺點(diǎn):如果模板與基于模板的網(wǎng)頁(yè)存放目錄級(jí)別不同時(shí),容易產(chǎn)生錯(cuò)誤;不便于頻繁更新網(wǎng)站內(nèi)容;如果模板文件進(jìn)行了結(jié)構(gòu)性的修改,很有可能造成模板不能更新網(wǎng)頁(yè),從而給網(wǎng)站更新帶來(lái)很多麻煩。7.1.2什么是嵌套模板

嵌套模板是指其設(shè)計(jì)和可編輯區(qū)域都基于另一個(gè)模板的模板。嵌套模板對(duì)于控制共享許多設(shè)計(jì)元素的站點(diǎn)頁(yè)面很有用,但在各頁(yè)之間有些差異。例如,基本模板中可能包含更寬廣的設(shè)計(jì)區(qū)域,并且可以由站點(diǎn)的許多內(nèi)容提供者使用,而嵌套模板可以進(jìn)一步定義站點(diǎn)內(nèi)特定部分頁(yè)面中的可編輯區(qū)域,適合制作具有多級(jí)目錄跳轉(zhuǎn)的網(wǎng)站,不同的欄目之間既有完全相同的區(qū)域,又有個(gè)性化區(qū)域。7.1.3什么是模板區(qū)域1.可編輯區(qū)域可編輯區(qū)域控制基于模板的頁(yè)面中有哪些區(qū)域可以編輯。也就是說(shuō),當(dāng)在模板文件中創(chuàng)建了可編輯區(qū)域后,在通過(guò)模板生成的網(wǎng)頁(yè)中只有這些可編輯區(qū)域才能在Dreamweaver中修改。7.1.3什么是模板區(qū)域2.可選區(qū)域可選區(qū)域是模板中的區(qū)域,在編輯基于模板的網(wǎng)頁(yè)時(shí)可將其設(shè)置為顯示或隱藏,如圖7-3所示。插入可選區(qū)域以后,既可以為模板參數(shù)設(shè)置特定的值,也可以為模板區(qū)域定義條件語(yǔ)句(If...else語(yǔ)句)??梢允褂煤?jiǎn)單的“真或假”操作,也可以定義比較復(fù)雜的條件語(yǔ)句和表達(dá)式。如有必要,可以在以后對(duì)這個(gè)可選區(qū)域進(jìn)行修改。模板用戶可以根據(jù)定義的條件在其創(chuàng)建的基于模板的網(wǎng)頁(yè)文檔中編輯參數(shù)并控制是否顯示可選區(qū)域。7.1.4識(shí)別模板和基于模板的網(wǎng)頁(yè)1.在設(shè)計(jì)視圖中識(shí)別模板在【設(shè)計(jì)】視圖中,可編輯區(qū)域出現(xiàn)在【文檔】窗口的預(yù)設(shè)高亮顏色的矩形外框中。每個(gè)區(qū)域的左上角都會(huì)出現(xiàn)一個(gè)小的標(biāo)簽,其中顯示該區(qū)域的名稱。通過(guò)查看【文檔】窗口中的標(biāo)題欄,可以識(shí)別模板文件。模板文件的標(biāo)題欄中包含“<<模板>>”字樣,并且模板文件的擴(kuò)展名為.dwt。7.1.4識(shí)別模板和基于模板的網(wǎng)頁(yè)2.在【設(shè)計(jì)】視圖中識(shí)別基于模板的網(wǎng)頁(yè)在【設(shè)計(jì)】視圖的基于模板的網(wǎng)頁(yè)文檔中,【文檔】窗口中的可編輯區(qū)域四周會(huì)顯示預(yù)設(shè)高亮顏色的矩形外框。每個(gè)區(qū)域的左上角都會(huì)出現(xiàn)一個(gè)小的標(biāo)簽,其中顯示該區(qū)域的名稱。除可編輯區(qū)域的外框之外,整個(gè)頁(yè)面周圍也會(huì)顯示其他顏色的外框,右上角給出該文檔的基礎(chǔ)模板的名稱,如圖7-6所示。這一高亮矩形提醒相應(yīng)網(wǎng)頁(yè)文檔是基于某個(gè)模板的,不能更改可編輯區(qū)域之外的內(nèi)容。7.2應(yīng)用模板7.2.1創(chuàng)建模板7.2.2使用可編輯區(qū)域7.2.3使用可選區(qū)域7.2.4使用重復(fù)區(qū)域7.2.5創(chuàng)建嵌套模板7.2.1創(chuàng)建模板1.基于現(xiàn)有網(wǎng)頁(yè)文檔創(chuàng)建模板可以基于現(xiàn)有網(wǎng)頁(yè)文檔創(chuàng)建模板,這種方法適用于已經(jīng)有現(xiàn)成的布局好的網(wǎng)頁(yè),希望將設(shè)計(jì)布局應(yīng)用到模板中。7.2.1創(chuàng)建模板(1)打開(kāi)要另存為模板的文檔(“ch5\5.5.2-1.html”),執(zhí)行下列操作之一。 在菜單欄中選擇【文件】→【另存為模板】命令。 在菜單欄中選擇【插入記錄】→【模板對(duì)象】→【創(chuàng)建模板】命令。 在【插入】工具欄的【常用】選項(xiàng)卡中,單擊【模板】按鈕右側(cè)的下三角按鈕,從彈出的菜單中選擇【創(chuàng)建模板】命令,如圖7-7所示,彈出【另存模板】對(duì)話框。圖7-7選擇【創(chuàng)建模板】命令7.2.1創(chuàng)建模板(2)從【站點(diǎn)】下拉列表框中選擇一個(gè)用來(lái)保存模板的站點(diǎn),然后在【另存為】對(duì)話框中為模板輸入一個(gè)唯一的名稱“aoyun0”。(3)單擊【保存】按鈕,Dreamweaver將模板文件以“DWT”格式保存在站點(diǎn)本地根文件夾中的“Templates”文件夾中,如圖7-9所示。如果該“Templates”文件夾在站點(diǎn)中尚不存在,Dreamweaver將在保存新建模板時(shí)自動(dòng)創(chuàng)建該文件夾。圖7-9【文件】面板圖7-9【文件】面板

7.2.1創(chuàng)建模板2.在資源面板中創(chuàng)建空白模板在資源面板中創(chuàng)建空白模板的操作步驟如下。(1)在【資源】面板(在菜單欄中選擇【窗口】→【資源】命令或單擊【文件】面板中的【資源】選項(xiàng)卡,即可打開(kāi)【資源】面板)中,單擊面板左側(cè)的【模板】圖標(biāo)。(2)單擊【資源】面板底部的【新建模板】按鈕(或在右鍵快捷中選擇菜單【新建模板】命令),一個(gè)新的、無(wú)標(biāo)題模板將添加到【資源】面板的模板列表中,如圖7-10所示。圖7-9【文件】面板圖7-10【資源】面板7.2.1創(chuàng)建模板3.在文件菜單中創(chuàng)建空白模板在文件菜單中創(chuàng)建空白模板的操作步驟如下。(1)在菜單欄中選擇【文件】→【新建】命令,彈出【新建文檔】對(duì)話框,如圖7-11所示。圖7-9【文件】面板圖7-11【新建文檔】對(duì)話框7.2.1創(chuàng)建模板(3)在菜單欄中選擇【文件】→【保存】命令,可能會(huì)彈出【警告】對(duì)話框,如圖7-12所示。

(4)單擊【確定】按鈕后,彈出【另存模板】對(duì)話框進(jìn)行保存即可。圖7-9【文件】面板圖7-12【警告】對(duì)話框7.2.2使用可編輯區(qū)域1.創(chuàng)建模板創(chuàng)建模板的操作步驟如下。(1)在【文件】面板中打開(kāi)“ch5\5.5.2-1.html”網(wǎng)頁(yè)。(2)在菜單欄中選擇【插入記錄】→【模板對(duì)象】→【創(chuàng)建模板】命令,彈出【另存模板】對(duì)話框,如圖7-13所示。圖7-9【文件】面板圖7-13【另存模板】對(duì)話框7.2.2使用可編輯區(qū)域(3)在【另存為】文本框中輸入“jx”保存,彈出【提示】對(duì)話框,如圖7-14所示。圖7-9【文件】面板圖7-14【提示】對(duì)話框7.2.2使用可編輯區(qū)域(4)單擊【是】按鈕,網(wǎng)頁(yè)“5.5.2-1.html”就被另存為“jx.dwt”模板文件。(5)選中圖片上面單元格中的文本,如圖7-15所示,將其刪除(保持插入點(diǎn)在文本所在單元格中)。圖7-9【文件】面板圖7-15選中文本7.2.2使用可編輯區(qū)域(6)在【插入】工具欄的【常用】選項(xiàng)卡中單擊【模板】按鈕,在彈出的菜單中選擇【可編輯區(qū)域】命令,如圖7-16所示,彈出【新建可編輯區(qū)域】對(duì)話框。圖7-9【文件】面板圖7-16選擇【可編輯區(qū)域】命令7.2.2使用可編輯區(qū)域(7)在【名稱】文本框中輸入“文本”,單擊【確定】按鈕,插入“文本”可編輯區(qū)域。(8)將圖片刪除,選中圖片所在的表格,重復(fù)步驟(4)~(6),插入“圖片”可編輯區(qū)域,如圖7-18所示。(9)在菜單欄中選擇【文件】→【保存】命令保存模板,并關(guān)閉模板文件。圖7-9【文件】面板圖7-18插入的“圖片”可編輯區(qū)域7.2.2使用可編輯區(qū)域2.通過(guò)模板生成基于模板的網(wǎng)頁(yè)通過(guò)模板生成基于模板的網(wǎng)頁(yè)的操作步驟如下。(1)在【資源】面板(在菜單欄中選擇【窗口】→【資源】命令,即可打開(kāi)【資源】面板)中,右擊“jx”模板文件,在彈出的右鍵快捷菜單中選擇【從模板新建】命令,如圖7-19所示,創(chuàng)建一個(gè)基于模板“jx.dwt”的網(wǎng)頁(yè)。圖7-19選擇【從模板新建】命令7.2.2使用可編輯區(qū)域(2)在網(wǎng)頁(yè)中的“文本”可編輯區(qū)域[1972年的慕尼黑奧運(yùn)會(huì)(小獵狗)]和“圖片”可編輯區(qū)域(20.jpg)中插入相應(yīng)內(nèi)容,保存網(wǎng)頁(yè)為“ch7\1972.html”,并關(guān)閉網(wǎng)頁(yè)。(3)重復(fù)步驟(1)~(2)分別創(chuàng)建基于模板“jx.dwt”的其他奧運(yùn)吉祥物的網(wǎng)頁(yè),如圖7-20所示。圖7-20創(chuàng)建其他奧運(yùn)吉祥物的網(wǎng)頁(yè)7.2.2使用可編輯區(qū)域3.通過(guò)模板修改導(dǎo)航鏈接通過(guò)模板修改導(dǎo)航鏈接的操作步驟如下。(1)關(guān)閉所有已經(jīng)打開(kāi)編輯的基于模板的網(wǎng)頁(yè),在【文件】面板打開(kāi)模板文件“Templates\jx.dwt”。7.2.2使用可編輯區(qū)域(2)選中鏈接文字“1972年的慕尼黑奧運(yùn)會(huì)(小獵狗)”,在【屬性】面板中將鏈接指向到通過(guò)此模板生成的“1972.html”網(wǎng)頁(yè)文件,如圖7-21所示。(3)重復(fù)步驟(2)將左側(cè)導(dǎo)航欄鏈接全部修改到通過(guò)模板創(chuàng)建的相應(yīng)網(wǎng)頁(yè)上。圖7-21修改鏈接7.2.2使用可編輯區(qū)域4.保存模板將修改更新到所有基于模板的網(wǎng)頁(yè)上保存模板的操作步驟如下。(1)在菜單欄中選擇【文件】→【保存】命令,彈出【更新模板文件】對(duì)話框,如圖7-22所示。圖7-22【更新模板文件】對(duì)話框7.2.2使用可編輯區(qū)域(2)單擊對(duì)話框中的【更新】按鈕,彈出【更新頁(yè)面】對(duì)話框,并顯示更新過(guò)程,根據(jù)網(wǎng)頁(yè)多少所需的更新時(shí)間也不盡相同,最后顯示【完成】字樣,即更新完畢,如圖7-23所示。(3)關(guān)閉模板文件,打開(kāi)第一個(gè)網(wǎng)頁(yè)進(jìn)行瀏覽。圖7-23【更新頁(yè)面】對(duì)話框

7.2.3使用可選區(qū)域下面仍以“奧運(yùn)吉祥物網(wǎng)站”為例,說(shuō)明可選區(qū)域的用法。(1)打開(kāi)模板文件“Templates\jx.dwt”,選中“圖片”可編輯區(qū)域中的“表格”,如圖7-24所示,按<Ctrl>+<C>組合鍵將其復(fù)制到剪貼板上。圖7-24選中“圖片”可編輯區(qū)域中的“表格”7.2.3使用可選區(qū)域(2)單擊“圖片”可編輯區(qū)域中的標(biāo)題“圖片”,將可編輯區(qū)域選中,按<Delete>鍵將其刪除。(3)按<Ctrl>+<V>組合鍵將刪除的表格粘貼到原來(lái)位置。選中表格以后在菜單欄中選擇【插入記錄】→【模板對(duì)象】→【可編輯的可選區(qū)域】命令,彈出【新建可選區(qū)域】對(duì)話框,在【名稱】文本框中輸入“圖片可選”,如圖7-25所示,單擊【確定】按鈕。圖7-25【新建可選區(qū)域】對(duì)話框7.2.3使用可選區(qū)域(4)單擊“If圖片可選”外面的可編輯區(qū)域標(biāo)題“EditRegion4”,選中可編輯區(qū)域“EditRegion4”,在【屬性】面板的【名稱】文本框中輸入【圖片】,如圖7-26所示。(5)保存模板文件,并更新此前基于模板生成的網(wǎng)頁(yè)后,關(guān)閉模板文件。圖7-26可編輯區(qū)域的【屬性】面板7.2.3使用可選區(qū)域(5)保存模板文件,并更新此前基于模板生成的網(wǎng)頁(yè)后,關(guān)閉模板文件。(6)在菜單欄中選擇【文件】→【新建】命令,彈出【新建文檔】對(duì)話框,如圖7-27所示。在對(duì)話框中選擇【模板中的頁(yè)】圖標(biāo),在【站點(diǎn)】列表框中選擇“站點(diǎn)實(shí)例”,在【站點(diǎn)“站點(diǎn)實(shí)例”的模板】列表框中選擇“jx”模板后,單擊【創(chuàng)建】按鈕,將創(chuàng)建一個(gè)基于模板“jx”的網(wǎng)頁(yè)。圖7-27【新建文檔】對(duì)話框7.2.4使用重復(fù)區(qū)域

如果用一個(gè)具有重復(fù)區(qū)域的模板生成了網(wǎng)頁(yè),那么網(wǎng)頁(yè)中重復(fù)區(qū)域部分就會(huì)出現(xiàn)控制按鈕組,如圖7-31所示?!局貜?fù)區(qū)域】各選項(xiàng)的意義如下。 單擊【增項(xiàng)】按鈕增加一個(gè)重復(fù)區(qū)域。 單擊【刪除】按鈕刪除已選的重復(fù)區(qū)域。 單擊【向下箭頭】按鈕將一個(gè)重復(fù)區(qū)域向下移動(dòng)一格。 單擊【向上箭頭】按鈕將一個(gè)重復(fù)區(qū)域向上移動(dòng)一格。7.2.5創(chuàng)建嵌套模板

創(chuàng)建嵌套模板最簡(jiǎn)單的方法是將基于模板生成的網(wǎng)頁(yè)另存為模板即可。其具體操作步驟如下。(1)在【資源】面板的【模板】列表框中右擊要作為創(chuàng)建新網(wǎng)頁(yè)文檔基礎(chǔ)的模板,然后從右鍵快捷菜單中選擇【從模板新建】命令。(2)在菜單欄中選擇【文件】→【另存模板】命令,將新網(wǎng)頁(yè)文檔另存為嵌套模板。(3)在【另存為】對(duì)話框中輸入模板名稱,然后單擊【確定】按鈕。7.3管理模板7.3.1編輯、更新和刪除模板文件7.3.2在現(xiàn)有網(wǎng)頁(yè)中應(yīng)用或刪除模板7.3.1編輯、更新和刪除模板文件1.重命名模板(1)單擊模板的名稱,選中該模板。(2)再次單擊模板的名稱以便使文本可選,然后輸入一個(gè)新名稱。(3)在【資源】面板中的另一個(gè)區(qū)域中單擊使更改生效。(4)系統(tǒng)彈出【警告】對(duì)話框,詢問(wèn)用戶是否要更新基于此模板的文檔。(5)單擊【更新】按鈕,更新站點(diǎn)中所有基于此模板的文檔。2.打開(kāi)編輯模板在【資源】面板中,雙擊模板的名稱或單擊模板的名稱使其選中后,單擊【編輯】按鈕即可打開(kāi)模板進(jìn)行編輯。7.3.1編輯、更新和刪除模板文件3.手動(dòng)更新基于模板的文檔手動(dòng)更新可以更新站點(diǎn)的所有頁(yè)面,也可以只更新特定的頁(yè)面。在編輯模板之后進(jìn)行保存時(shí),系統(tǒng)會(huì)提示更新。如果用戶未單擊【更新】按鈕,便失去了自動(dòng)更新的機(jī)會(huì),這種情況下用戶可以使用手動(dòng)更新。(1)在菜單欄中選擇【修改】→【模板】→【更新頁(yè)面】命令,彈出【更新頁(yè)面】對(duì)話框,如圖7-32所示。(2)單擊【開(kāi)始】按鈕即可。圖7-32【更新頁(yè)面】對(duì)話框7.3.1編輯、更新和刪除模板文件4.刪除模板要?jiǎng)h除模板文件可以執(zhí)行如下操作之一。 在【資源】面板中,單擊面板左側(cè)的【模板】圖標(biāo),單擊模板的名稱以選擇該模板文件,單擊面板底部的【刪除】按鈕,然后確認(rèn)要?jiǎng)h除該模板。 在【資源】面板中,單擊模板的名稱以選擇該模板文件,按<Delete>鍵,然后確認(rèn)要?jiǎng)h除該模板。 在【文件】面板中“Templates”文件夾下,單擊模板的名稱以選擇該模板文件,按<Delete>鍵,然后確認(rèn)要?jiǎng)h除該模板。7.3.2在現(xiàn)有網(wǎng)頁(yè)中應(yīng)用或刪除模板1.將模板應(yīng)用于現(xiàn)有文檔(1)打開(kāi)要應(yīng)用模板的文檔。(2)在菜單欄中選擇【修改】→【模板】→【應(yīng)用模板到頁(yè)】命令,彈出【選擇模板】對(duì)話框,如圖7-33所示。(3)從【模板】列表框中選擇一個(gè)模板并單擊【選定】按鈕。圖7-33【選擇模板】對(duì)話框7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例1.實(shí)訓(xùn)目的綜合利用前面所講內(nèi)容制作“奧運(yùn)之旅”網(wǎng)站,介紹歷屆奧運(yùn)會(huì)徽、奧運(yùn)火炬、奧運(yùn)吉祥物和奧運(yùn)獎(jiǎng)牌的一些情況,網(wǎng)站主頁(yè)最終效果如圖7-34所示。本實(shí)訓(xùn)最終效果文件見(jiàn)“站點(diǎn)實(shí)例”(WebDemo\aoyun),所用素材見(jiàn)“站點(diǎn)實(shí)例”(WebDemo\AY_Media\)。7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例2.實(shí)訓(xùn)分析從網(wǎng)站整體效果來(lái)看,這是一個(gè)典型的具有2級(jí)目錄導(dǎo)航的網(wǎng)站。實(shí)現(xiàn)2級(jí)目錄導(dǎo)航可以通過(guò)嵌套框架或嵌套模板來(lái)實(shí)現(xiàn),這里作者通過(guò)1個(gè)基本模板和4個(gè)嵌套模板(1個(gè)欄目1個(gè))來(lái)實(shí)現(xiàn)。3.實(shí)訓(xùn)步驟(1)啟動(dòng)Dreamweaver軟件,在【文件】面板中右擊【站點(diǎn)】,在彈出的右鍵快捷菜單中選擇【新建文件夾】命令,在站點(diǎn)根目錄下創(chuàng)建“aoyun”文件夾。(2)在【資源】面板中單擊【模板】圖標(biāo),在彈出的菜單中選擇【新建模板】命令,如圖7-39所示,創(chuàng)建一個(gè)模板文件并改名為“aoyunB”(作為基本模板)。

7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(1)啟動(dòng)Dreamweaver軟件,在【文件】面板中右擊【站點(diǎn)】,在彈出的右鍵快捷菜單中選擇【新建文件夾】命令,在站點(diǎn)根目錄下創(chuàng)建“aoyun”文件夾。(2)在【資源】面板中單擊【模板】圖標(biāo),在彈出的菜單中選擇【新建模板】命令,如圖7-39所示,創(chuàng)建一個(gè)模板文件并改名為“aoyunB”(作為基本模板)。圖7-39【資源】面板圖7-39【資源】面板7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(3)雙擊“aoyunB”使其進(jìn)入編輯狀態(tài),并進(jìn)入【設(shè)計(jì)】視圖。(4)在菜單欄中選擇【修改】→【頁(yè)面屬性】命令,彈出【頁(yè)面屬性】對(duì)話框,如圖7-40所示。設(shè)置【文本顏色】為“黑色”、【背景顏色】為淺“藍(lán)色”、【上邊距】為“2像素”、其他邊距為“0像素”。圖7-39【資源】面板圖7-40【頁(yè)面屬性】對(duì)話框7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(5)在菜單欄中選擇【插入記錄】→【表格】命令,插入一個(gè)表格(1行,1列,760像素寬,0邊框,0邊距和1間距),【表格】對(duì)話框中的表格屬性設(shè)置如圖7-41所示。圖7-39【資源】面板圖7-41【表格】對(duì)話框中的表格屬性設(shè)置7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(6)在【CSS】面板中單擊【新建樣式表規(guī)則】按鈕,彈出【新建CSS規(guī)則】對(duì)話框,設(shè)置相關(guān)選項(xiàng)為“【類】、【table_bk】、【僅對(duì)該文檔】”,如圖7-42所示。圖7-39【資源】面板圖7-42【新建CSS規(guī)則】對(duì)話框7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(7)單擊【確定】按鈕,彈出【table_bk的CSS規(guī)則定義】對(duì)話框,在【分類】列表框中選擇【邊框】選項(xiàng),設(shè)置為“【實(shí)線】、【1像素】、【黑色】”,如圖7-43所示。圖7-39【資源】面板圖7-43【table_bk的CSS規(guī)則定義】對(duì)話框7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(8)單擊【確定】按鈕關(guān)閉對(duì)話框。在【文檔】窗口選中表格,在【屬性】面板的【類】下拉列表框中選擇剛才定義的“table_bk”類規(guī)則,并在【對(duì)齊】下拉列表框中選擇【居中對(duì)齊】,如圖7-44所示。圖7-39【資源】面板圖7-44【屬性】面板7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(9)將插入點(diǎn)定位在步驟(5)~(8)建立的黑邊表格中,在菜單欄中選擇【插入記錄】→【表格】命令,插入一個(gè)表格(5行,1列,寬760像素,0邊框,0邊距和1間距),如圖7-45所示。圖7-39【資源】面板圖7-45插入一個(gè)表格7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(10)在第一行插入圖片文件“AY_Media\top_1.jpg”,第二行插入Flash動(dòng)畫(huà)文件“AY_Media\top.swf”。(11)在第三行插入一個(gè)表格(1行,7列,寬760像素,0邊框,0邊距和1間距),拖動(dòng)鼠標(biāo)同時(shí)選中7個(gè)單元格,在【屬性】面板中將其【背景顏色】定義為“深藍(lán)色”,除第一個(gè)單元格外每個(gè)單元格都插入圖片文件“AY_Media\anniu.gif”,并分別輸入“主頁(yè)”、“奧運(yùn)會(huì)徽”、“奧運(yùn)火炬”、“奧運(yùn)吉祥物”、“奧運(yùn)獎(jiǎng)牌”和“聯(lián)系我們”,如圖7-46所示。圖7-39【資源】面板圖7-46插入的1行7列表格與輸入的相關(guān)文字7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(12)將插入點(diǎn)定位在第四行單元格中,在【屬性】面板的【垂直】下拉列表框中選擇【頂端】選項(xiàng)。在菜單欄中選擇【插入記錄】→【模板對(duì)象】→【可編輯區(qū)域】命令,彈出【新建可編輯區(qū)域】對(duì)話框,在【名稱】文本框中輸入“主頁(yè)(可編輯)”,如圖7-47所示。圖7-39【資源】面板圖7-47【新建可編輯區(qū)域】對(duì)話框7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(13)單擊【確定】按鈕,插入一個(gè)可編輯區(qū)域,將可編輯區(qū)域內(nèi)部自動(dòng)生成的文字“主頁(yè)(可編輯)”刪除。(14)將插入點(diǎn)定位在第五行單元格中,在【屬性】面板的【水平】下拉列表框中選擇【居中對(duì)齊】選項(xiàng)、在【背景顏色】【拾色器】中選擇“深藍(lán)色”。在單元格中輸入“教育技術(shù)教研室數(shù)字媒體應(yīng)用組@2008年2月18日”(作為本站的版權(quán)信息欄)。圖7-39【資源】面板7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(15)在【CSS樣式】面板中單擊【新建CSS規(guī)則】按鈕,添加一個(gè)名稱為“xx”、【僅對(duì)該文檔】的【類】樣式,在其【類型】選項(xiàng)區(qū)中將【大小】設(shè)置為“11像素”、【行高】設(shè)置為“20像素”、【顏色】設(shè)置為“白色”,并在【修飾】選項(xiàng)區(qū)中勾選【無(wú)】復(fù)選框,【XX的CSS規(guī)則定義】對(duì)話框設(shè)置如圖7-48所示,單擊【確定】按鈕。圖7-39【資源】面板圖7-48【XX的CSS規(guī)則定義】對(duì)話框7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(16)將第五行單元格中文字“教育技術(shù)教研室數(shù)字媒體應(yīng)用組@2008年2月18日”選中,在【屬性】面板的【樣式】下拉列表框中選擇“xx”選項(xiàng),基本模板aoyun_B.dwt最終效果如圖7-49所示。圖7-39【資源】面板圖7-49基本模板aoyun_B.dwt最終效果7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(17)在【CSS樣式】面板中新建名稱為“a:link”的【高級(jí)】規(guī)則,【類型】選項(xiàng)區(qū)中屬性設(shè)置為:【大小】“12像素”、【顏色】“白色”。(18)在【CSS樣式】面板中新建名稱為“a:visited”的【高級(jí)】規(guī)則,【類型】選項(xiàng)區(qū)中屬性設(shè)置為:【大小】“12像素”、【顏色】“淺黃色”。(19)在【CSS樣式】面板中新建名稱為“a:hover”的【高級(jí)】規(guī)則,【類型】選項(xiàng)區(qū)中屬性設(shè)置為:【大小】“12像素”、【顏色】“紅色”;【背景】選項(xiàng)區(qū)中屬性設(shè)置為:【背景顏色】“黃色”。(20)在【CSS樣式】面板中新建名稱為“a:active”的【高級(jí)】規(guī)則,【類型】選項(xiàng)區(qū)中屬性設(shè)置為:【大小】“12像素”、【顏色】“紅色”。圖7-39【資源】面板7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(21)在【CSS樣式】面板中新建名稱為“text”的【類】規(guī)則,【區(qū)塊】選項(xiàng)區(qū)中屬性設(shè)置為:【文字縮進(jìn)】“2字體高”。最后,模板中的【CSS樣式】面板如圖7-50所示。圖7-39【資源】面板圖7-50【CSS樣式】面板7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(22)關(guān)閉基本模板文件“aoyun_B.dwt”,在菜單欄中選擇【文件】→【新建】命令,彈出【新建文檔】對(duì)話框,單擊【模板中的頁(yè)】圖標(biāo),在【站點(diǎn)】列表框中選擇【站點(diǎn)實(shí)例】選項(xiàng),在【站點(diǎn)“站點(diǎn)實(shí)例”的模板】列表框中選擇“aoyun_B”選項(xiàng),如圖7-51所示,單擊【創(chuàng)建】按鈕,創(chuàng)建基于模板的空白網(wǎng)頁(yè)。圖7-39【資源】面板圖7-51【新建文檔】對(duì)話框7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(23)按<Ctrl>+<S>組合鍵將網(wǎng)頁(yè)保存到“aoyun\aoyun_index.html”。(24)打開(kāi)“AY_Media\主頁(yè)內(nèi)容.txt”文件,將其文字內(nèi)容復(fù)制到可編輯區(qū)域中。將標(biāo)題以外的段落選中,在【屬性】面板中應(yīng)用“text”樣式,最后效果如圖7-52所示。圖7-39【資源】面板圖7-52主頁(yè)最后效果7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(25)保存主頁(yè)“aoyun_index.html”。在菜單欄中選擇【插入記錄】→【模板對(duì)象】→【創(chuàng)建嵌套模板】命令,彈出【另存模板】對(duì)話框,命名為“aoyun_huihui”,如圖7-53所示,單擊【保存】按鈕。(26)彈出【要更新鏈接嗎?】對(duì)話框,單擊【是】按鈕,創(chuàng)建第一個(gè)欄目“奧運(yùn)會(huì)徽”的嵌套模板“aoyun_huihui”。圖7-39【資源】面板圖7-53【另存模板】對(duì)話框7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(27)將“主頁(yè)(可編輯區(qū))”中的文字全部刪除(包括“空格”“回車”等)。(28)在【插入】工具欄的【常用】選項(xiàng)卡中單擊【表格】按鈕,插入一個(gè)表格(1行,2列,寬760像素,0邊框,12邊距和0間距)。(29)在【屬性】面板的【垂直】下拉列表框中選擇【頂端】選項(xiàng),并將左側(cè)單元格【背景顏色】設(shè)置為“深藍(lán)色”,如圖7-54所示。圖7-39【資源】面板圖7-54嵌套模板設(shè)置效果7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(30)在左側(cè)單元格中插入一個(gè)表格(13行,2列,寬225像素,0邊框,0邊距和0間距)。將第一行的2個(gè)單元格合并,并在其中輸入“奧運(yùn)會(huì)徽”,在其他各行的左側(cè)單元格中分別插入圖片文件“AY_Media\anniu.gif”,右側(cè)輸入相應(yīng)文字內(nèi)容(素材見(jiàn)“AY_Media\huihui\奧運(yùn)會(huì)徽.txt”),嵌套模板導(dǎo)航欄如圖7-55所示。圖7-39【資源】面板圖7-55嵌套模板導(dǎo)航欄7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(31)將插入點(diǎn)定位在右側(cè)單元格中,在菜單欄中選擇【插入記錄】→【模板對(duì)象】→【可編輯區(qū)域】命令,插入一個(gè)名為“會(huì)徽(可編輯)”的可編輯區(qū)域,并將藍(lán)色邊框里的文字“會(huì)徽(可編輯)”刪除。(32)保存并關(guān)閉“奧運(yùn)會(huì)徽”的欄目嵌套模板“aoyun_huihui.dwt”。(33)按步驟(22)~(24)方法,利用嵌套模板“aoyun_huihui.dwt”創(chuàng)建網(wǎng)頁(yè)“aoyun_huihui_3.html”并保存在“aoyun”文件夾中。(34)在“會(huì)徽(可編輯)”區(qū)域中插入一個(gè)表格(1行,2列,寬480像素,0邊框,8邊距和0間距)。圖7-39【資源】面板7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(35)在上一步所建表格的左側(cè)插入圖片“AY_Media\huihui\bnay1904(03).jpg”,并在右側(cè)輸入第3屆奧運(yùn)會(huì)徽有關(guān)解釋(素材見(jiàn)“AY_Media\huihui\奧運(yùn)會(huì)徽.txt”)?!皧W運(yùn)會(huì)徽”主題頁(yè)面可編輯區(qū)域如圖7-56所示。(36)選中文字段落,在【屬性】面板中的【樣式】下拉列表框中選擇“text”選項(xiàng)。圖7-39【資源】面板圖7-56“奧運(yùn)會(huì)徽”主題頁(yè)面可編輯區(qū)域7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(37)重復(fù)步驟(33)~(36),通過(guò)“aoyun_huihui.dwt”嵌套模板創(chuàng)建其他11屆“奧運(yùn)會(huì)徽”的主題頁(yè)面。(38)關(guān)閉所有主題頁(yè)面,打開(kāi)“aoyun_huihui.dwt”嵌套模板,選中導(dǎo)航欄第一行“第3屆圣路易斯博覽會(huì)中‘日常節(jié)目’”,在【屬性】面板中將其指向“aoyun_huihui_3.html”,并保證【目標(biāo)】窗口保持為空或?yàn)椤綺self】(目的是在當(dāng)前窗口中顯示目標(biāo)網(wǎng)頁(yè))。(39)重復(fù)步驟(38)將其他11屆奧運(yùn)會(huì)徽添加到相應(yīng)主題網(wǎng)頁(yè)的鏈接。圖7-39【資源】面板7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(40)選擇<Ctrl>+<S>組合鍵保存“aoyun_huihui.dwt”嵌套模板,彈出【更新模板文件】(基于模板的網(wǎng)頁(yè)文件)對(duì)話框,如圖7-57所示。圖7-39【資源】面板圖7-57【更新模板文件】對(duì)話框7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(41)關(guān)閉所有打開(kāi)文件,打開(kāi)主頁(yè)“aoyun_index.html”,在【插入】工具欄的【常用】選項(xiàng)卡中單擊【模板】按鈕,在彈出的菜單中選擇【創(chuàng)建嵌套模板】命令,彈出【另存模板

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論