資源描述:
《Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)與制作 教學(xué)課件 作者 林曉峰 王曉平《Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)與制作》第1-5章教學(xué)課件第10章.ppt》由會(huì)員上傳分享,免費(fèi)在線閱讀,更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。
1、模板、庫(kù)及框架第10章本章要點(diǎn):◆?模板的使用◆?庫(kù)的使用◆?建立框架頁(yè)面◆?框架的基本操作◆?設(shè)置框架集與框架的屬性◆?在框架中使用鏈接10.1使用模板教學(xué)進(jìn)程1.網(wǎng)頁(yè)另存為模板10.1.1創(chuàng)建模板2.插入可編輯區(qū)域10.1使用模板教學(xué)進(jìn)程1.網(wǎng)頁(yè)另存為模板10.1.1創(chuàng)建模板2.插入可編輯區(qū)域10.1使用模板教學(xué)進(jìn)程1.刪除可編輯區(qū)域10.1.2編輯模板2.更改可編輯區(qū)域名稱3.保存更改后的模板4.設(shè)置首選參數(shù)選中并刪除10.1使用模板教學(xué)進(jìn)程1.刪除可編輯區(qū)域10.1.2編輯模板2.更改可編輯區(qū)域名稱3.保存更改后的模板4.設(shè)置首選參數(shù)輸入名稱10.1使用模
2、板教學(xué)進(jìn)程1.刪除可編輯區(qū)域10.1.2編輯模板2.更改可編輯區(qū)域名稱3.保存更改后的模板4.設(shè)置首選參數(shù)保存后更新文件10.1使用模板教學(xué)進(jìn)程1.刪除可編輯區(qū)域10.1.2編輯模板2.更改可編輯區(qū)域名稱3.保存更改后的模板4.設(shè)置首選參數(shù)保存后更新文件10.1.3應(yīng)用模板創(chuàng)建新網(wǎng)頁(yè)教學(xué)進(jìn)程10.1.4編輯應(yīng)用模板創(chuàng)建的網(wǎng)頁(yè)教學(xué)進(jìn)程不可編輯區(qū)域可編輯區(qū)域進(jìn)行插入、刪除操作10.2使用庫(kù)項(xiàng)目教學(xué)進(jìn)程10.2.1創(chuàng)建庫(kù)選中l(wèi)ogo展開庫(kù)類別新建庫(kù)項(xiàng)目教學(xué)進(jìn)程10.2使用庫(kù)項(xiàng)目10.2.2插入庫(kù)●完成插入庫(kù)●確定光標(biāo)位置●選擇庫(kù)●單擊插入按鈕教學(xué)進(jìn)程10.2使用庫(kù)項(xiàng)目1
3、0.2.3編輯庫(kù)修改庫(kù)的屬性教學(xué)進(jìn)程10.2使用庫(kù)項(xiàng)目10.2.3編輯庫(kù)更新后的效果10.3使用框架教學(xué)進(jìn)程●框架優(yōu)點(diǎn)訪問(wèn)者的瀏覽器不需要為每個(gè)頁(yè)面重新加載與導(dǎo)航相關(guān)的圖形訪問(wèn)者可以獨(dú)立滾動(dòng)這些框架10.3使用框架教學(xué)進(jìn)程●框架缺點(diǎn)難以實(shí)現(xiàn)不同框架中各元素的精確圖形對(duì)齊對(duì)導(dǎo)航進(jìn)行測(cè)試可能很耗時(shí)間各個(gè)帶有框架的頁(yè)面的URL不顯示在瀏覽器中10.3.1建立框架集和框架教學(xué)進(jìn)程在創(chuàng)建框架集之前,我們要先制作好top.htm、left.htm、right.htm和bottom.htm這4個(gè)頁(yè)面。Top.htm頁(yè)面Left.htm頁(yè)面10.3.1建立框架集和框架教學(xué)進(jìn)程ri
4、ght.htm頁(yè)面buttom.htm頁(yè)面教學(xué)進(jìn)程●方法一:通過(guò)【插入】工具欄,創(chuàng)建新的空框架集通過(guò)【新建文檔】對(duì)話框,創(chuàng)建新的空框架集10.3.1建立框架集和框架創(chuàng)建框架集的方法●方法二:教學(xué)進(jìn)程10.3.1建立框架集和框架創(chuàng)建框架集的方法創(chuàng)建框架集風(fēng)格教學(xué)進(jìn)程10.3.2編輯框架和框架集執(zhí)行【窗口】
5、【框架】命令,打開【框架】面板在【框架】面板中單擊某個(gè)框架的內(nèi)部,可以選中該框架在【框架】面板中單擊環(huán)繞框架集的邊框,即可選中框架集1.選擇框架和框架集教學(xué)進(jìn)程10.3.2編輯框架和框架集選中框架,打開【屬性】面板,在屬性面板中修改。2.查看和設(shè)置框架屬性教學(xué)進(jìn)程
6、在【屬性】面板上單擊【瀏覽文件】按鈕,彈出【選擇HTML文件】對(duì)話框10.3.2編輯框架和框架集3.在框架中打開文檔選中要打開的html文檔教學(xué)進(jìn)程在【框架】面板中單擊環(huán)繞框架集的邊框,選中整個(gè)框架集。然后在【屬性】面板右側(cè),單擊頂部框架,10.3.2編輯框架和框架集4.調(diào)整框架的大小調(diào)整框架頂部教學(xué)進(jìn)程10.3.2編輯框架和框架集5.拆分框架在【框架】面板中選中整個(gè)框架集,移動(dòng)鼠標(biāo)指針,把它放到框架集最底部的邊框上,使之出現(xiàn)雙向箭頭,拖動(dòng)鼠標(biāo)即可。將光標(biāo)向上拖動(dòng),即可產(chǎn)生新的框架教學(xué)進(jìn)程選中整個(gè)框架集,執(zhí)行【文件】
7、【保存框架頁(yè)】命令,打開【另存為】對(duì)話框,給框
8、架集起個(gè)名為main.htm,單擊【保存】按鈕即可。10.3.3保存框架教學(xué)進(jìn)程雙擊左側(cè)框架中的【FLASH作品一】按鈕,彈出【插入Flash按鈕】對(duì)話框。設(shè)置好鏈接文件等參數(shù)后,單擊【目標(biāo)】下拉列表框,選中相關(guān)參數(shù)。10.3.4框架超級(jí)鏈接10.4習(xí)題與上機(jī)操作1.填空題(1)庫(kù)是一種用來(lái)存儲(chǔ)想要在整個(gè)網(wǎng)站上_____________的頁(yè)面元素的方法,這些元素稱為庫(kù)項(xiàng)目。(3)使用庫(kù)項(xiàng)目的優(yōu)勢(shì)是_____________________。(2)在Dreamweaver中使用庫(kù)時(shí),可以在庫(kù)中存儲(chǔ)各種各樣的頁(yè)面元素,如___________、___________、
9、__________和___________。教學(xué)進(jìn)程10.4習(xí)題與上機(jī)操作1.填空題(4)框架是將一個(gè)瀏覽器窗口劃分為多個(gè)_____________,每個(gè)_____________都可以顯示不同HTML文檔的方法。(5)框架可以創(chuàng)建使用相同_____________的多個(gè)頁(yè)面??蚣艿淖畛R娪猛臼莀____________,一組框架通常包括一個(gè)含有_____________的框架和另一個(gè)要顯示_____________的框架。教學(xué)進(jìn)程教學(xué)進(jìn)程10.4習(xí)題與上機(jī)操作2.上機(jī)操作題(1)創(chuàng)建如下圖所示的模板,然后根據(jù)該模板創(chuàng)建新的頁(yè)面。教學(xué)進(jìn)程10.4習(xí)題與上機(jī)操作2
10、.上機(jī)操作