資源描述:
《DW創(chuàng)建框架網(wǎng)頁(yè).ppt》由會(huì)員上傳分享,免費(fèi)在線閱讀,更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)。
1、Dreamweaver-----基礎(chǔ)教案Dreamweaver基礎(chǔ)篇第7章創(chuàng)建框架網(wǎng)頁(yè)回顧掌握表格的插入掌握表格屬性的設(shè)置掌握選擇表格的方法掌握編輯表格和單元格學(xué)習(xí)目標(biāo)了解框架網(wǎng)頁(yè)概述掌握創(chuàng)建框架和框架集掌握框架和框架集的選擇掌握框架和框架集屬性的設(shè)置掌握完整的框架網(wǎng)頁(yè)創(chuàng)建掌握嵌入式框架的創(chuàng)建掌握框架的使用技巧7.1框架網(wǎng)頁(yè)概述在Dreamweaver8中,框架是一個(gè)非常重要的頁(yè)面布局工具。它可以把瀏覽器的窗口分割成若干相互獨(dú)立又有聯(lián)系的區(qū)域,在每個(gè)區(qū)域中顯示一個(gè)獨(dú)立的網(wǎng)頁(yè)文件,從而實(shí)現(xiàn)了一個(gè)網(wǎng)頁(yè)內(nèi)顯示多個(gè)HTML文件的目的。使用框架的優(yōu)點(diǎn)在于可以把不同層次的網(wǎng)頁(yè)中
2、的不改變的內(nèi)容放在一個(gè)框架中,把不斷改變的文檔內(nèi)容放在一個(gè)框架中??蚣芗夹g(shù)可以被廣泛的應(yīng)用到網(wǎng)站導(dǎo)航和文檔瀏覽中,方便訪問(wèn)者對(duì)網(wǎng)頁(yè)的瀏覽,減少訪問(wèn)者下載頁(yè)面所需要的時(shí)間??蚣苡煽蚣芗涂蚣芙M成??蚣芗褪强蚣艿募?,它是在一個(gè)文檔內(nèi)一組框架結(jié)構(gòu)的HTML網(wǎng)頁(yè),定義了網(wǎng)頁(yè)顯示的框架數(shù)、框架的大小、載入框架的網(wǎng)頁(yè)源和其他可定義的屬性等??蚣苁强蚣芗酗@示的文檔,每個(gè)框架實(shí)質(zhì)上都是一個(gè)獨(dú)立存在的HTML文檔。7.2創(chuàng)建框架和框架集在Dreamweaver中預(yù)定義了多種框架集,可以很方便地創(chuàng)建想要的框架網(wǎng)頁(yè)。創(chuàng)建框架集選擇預(yù)定義的框架集將自動(dòng)設(shè)置創(chuàng)建布局所需要的所有框架集和
3、框架,它是迅速創(chuàng)建基于框架布局的最簡(jiǎn)單方法。創(chuàng)建框架集的具體操作步驟如下。1.選擇菜單中的【文件】
4、【新建】命令,打開(kāi)【新建文檔】對(duì)話框,在對(duì)話框中選擇【常規(guī)】選項(xiàng)卡中的【類別】
5、【框架集】
6、【上方固定,左側(cè)嵌套】選項(xiàng)。如圖7-1:2.單擊【創(chuàng)建】按鈕,即可創(chuàng)建一上方固定,左側(cè)嵌套的框架網(wǎng)頁(yè)。如圖7-2:提示:還可以用以下兩種方法創(chuàng)建框架網(wǎng)頁(yè):在【布局】插入欄中單擊按鈕,在彈出的菜單中選擇【左側(cè)和嵌套的下方框架】選項(xiàng),即可創(chuàng)建框架網(wǎng)頁(yè)。如圖7-3:選擇菜單中的【插入】
7、【HTML】
8、【框架】
9、【左側(cè)及下方嵌套】命令,即可創(chuàng)建框架網(wǎng)頁(yè)。插入預(yù)定義框架集插入預(yù)定義框架集
10、的具體操作步驟如下。1.標(biāo)放置在頭部框架中,選擇菜單中的【修改】
11、【頁(yè)面屬性】命令,打開(kāi)【頁(yè)面屬性】對(duì)話框中將【左邊距】設(shè)置為0像素,【右邊距】設(shè)置為0像素。如圖7-4:2.【確定】按鈕。選中頭部框架,在【屬性】面板中單擊【源文件】文本框右側(cè)的【瀏覽文件】按鈕,打開(kāi)【選擇HTML文件】對(duì)話框,在對(duì)話框中選擇top1.htm。3.單擊【確定】按鈕,插入文件。4.將光標(biāo)放置在左側(cè)框架中,修改頁(yè)面屬性,在【屬性】面板中單擊【源文件】文本框右側(cè)的【瀏覽文件】按鈕,在打開(kāi)的【選擇HTML文件】對(duì)話框中選擇leftl.htm,單擊【確定】按鈕,插入文件。5.將光標(biāo)放置在右側(cè)框架
12、中,修改頁(yè)面屬性,在【屬性】面板中單擊【源文件】文本框右側(cè)的【瀏覽文件】按鈕,在打開(kāi)的【選擇HTML文件】對(duì)話框中選擇right.htm,單擊【確定】按鈕,插入文件。保存框架和框架集文件在瀏覽器中預(yù)覽框架集之前,必須保存框架集文件以及要在框架中顯示的所有文檔。可以單獨(dú)保存每個(gè)框架集文件和帶框架的文檔,也可以同時(shí)保存框架集文件和框架中出現(xiàn)的所有文檔。保存框架和框架集文件的具體操作步驟如下。1.新建一上方固定,左側(cè)嵌套的框架網(wǎng)頁(yè)。選擇菜單中的【文件】
13、【保存全部】命令,打開(kāi)【另存為】對(duì)話框,此時(shí)整個(gè)框架集內(nèi)側(cè)出現(xiàn)陰影,所以詢問(wèn)的是框架集的名稱,在【文件名】文本框中輸入i
14、ndex.htm。如圖7-5:2.單擊【保存】按鈕,打開(kāi)第2個(gè)【另存為】對(duì)話框,因?yàn)橛覀?cè)框架內(nèi)側(cè)出現(xiàn)陰影,所示詢問(wèn)的是右側(cè)框架的名稱,在【文件名】文本框中輸入right.htm。如圖7-6:3.單擊【保存】按鈕,打開(kāi)第3個(gè)【另存為】對(duì)話框,因?yàn)樽髠?cè)框架內(nèi)側(cè)出現(xiàn)陰影,所以詢問(wèn)的是左側(cè)框架的名稱,在【文件名】丈本框中輸入left.htm。如圖7-7:4.單擊【保存】按鈕,打開(kāi)第4個(gè)【另存為】對(duì)話框,因?yàn)轭^部框架內(nèi)側(cè)出現(xiàn)陰影,所示詢問(wèn)的是頭部框架的名稱,在【文件名】文本框中輸入top.htm。如圖7-8:5.單擊【保存】按鈕,至此整個(gè)框架保存完畢。7.3選擇框架和框架集在
15、【框架】面板中選擇框架或框架集在【框架】面板中選擇框架或框架集的具體操作步驟如下。1.選擇菜單中的【窗口】
16、【框架】命令,打開(kāi)【框架】面板,在面板中單擊需要選擇的框架,框架的邊界就會(huì)被虛線包圍。如圖7-9:提示:按組合鍵,打開(kāi)【框架】面板。2.在【框架】面板中單擊框架集的邊框,也可以選擇整個(gè)框架集,框架集的內(nèi)側(cè)出現(xiàn)虛線。如圖7-10:在文檔窗口中選擇框架或框架集在文檔窗口中選擇框架或框架集的具體操作步驟如下。1.將光標(biāo)放置在要選擇的框架中,按住鍵單擊鼠標(biāo)左鍵,框架邊框內(nèi)側(cè)出現(xiàn)虛線,即可選擇該框架。2.將光標(biāo)放置在任意框架中,按住