資源描述：
《Dreamweaver網(wǎng)頁設(shè)計(jì)培訓(xùn)教程09.ppt》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。
1、第9課使用框架布局網(wǎng)頁本課要點(diǎn)具體要求本課導(dǎo)讀上機(jī)練習(xí)本課要點(diǎn)了解框架并創(chuàng)建框架框架及框架集的基本操作和屬性設(shè)置具體要求了解框架及框架集熟悉框架及框架集的創(chuàng)建掌握框架及框架集的基本操作掌握框架及框架集的屬性設(shè)置本課導(dǎo)讀使用框架可以避免重復(fù)勞動(dòng)，如將共同的部分（頂部的導(dǎo)航區(qū)、版權(quán)信息區(qū)）分別制作成單獨(dú)的網(wǎng)頁，然后通過框架將其鏈接到各個(gè)框架網(wǎng)頁中，而不必每個(gè)網(wǎng)頁都重新制作這些共同的部分，從而節(jié)約了時(shí)間，也可以減少整個(gè)網(wǎng)站的大小。9.1了解框架并創(chuàng)建框架在布局頁面時(shí)除了可以使用層和表格外，還可以使用框架進(jìn)行布局，下面介紹框架的概念及創(chuàng)建方法。9.1了解框架并創(chuàng)建框架9.1.1知識講解9.1.2
2、典型案例——“精品欣賞”網(wǎng)頁框架制作9.1.1知識講解框架的功能是把瀏覽器窗口劃分為若干個(gè)區(qū)域，分別顯示不同的網(wǎng)頁?？蚣芗墓δ苁嵌x一組框架的布局和屬性。9.1.1知識講解1.了解框架及框架集2.框架及框架集的創(chuàng)建3.框架及框架集的保存1.了解框架及框架集在網(wǎng)頁上定義的一個(gè)區(qū)域就是單個(gè)框架，而框架集則記錄了同一個(gè)網(wǎng)頁中多個(gè)框架的布局、超鏈接和屬性信息。利用框架可以把瀏覽器窗口劃分為若干個(gè)區(qū)域，每個(gè)區(qū)域可以添加任意網(wǎng)頁元素，也可分別顯示不同的網(wǎng)頁。1.了解框架及框架集框架集與框架之間的關(guān)系其實(shí)就是包含與被包含的關(guān)系，框架集相當(dāng)于一個(gè)容器，框架則是放在容器中的東西，框架集記錄了框架的位置，
3、以及框架中包含的網(wǎng)頁的鏈接地址。2.框架及框架集的創(chuàng)建Dreamweaver8的預(yù)定義框架集可以直接創(chuàng)建，也可在頁面中加載。1）直接創(chuàng)建預(yù)定義框架集2）加載預(yù)定義框架集3）手動(dòng)創(chuàng)建框架集3.框架及框架集的保存框架創(chuàng)建完成后，可將其保存起來。在Dreamweaver8中保存框架和框架集與一般網(wǎng)頁文檔的保存有所不同，可以保存某個(gè)框架文檔，也可以單獨(dú)保存框架集文檔，還可保存框架集和框架中出現(xiàn)的所有文檔。1）保存框架文檔2）保存框架集文檔3）保存框架集中的所有文檔9.1.2典型案例——“精品欣賞”網(wǎng)頁框架制作案例目標(biāo)本案例主要練習(xí)利用框架布局頁面。本例中共有5個(gè)框架，其中頂部及底部各1個(gè)，中間共
4、3個(gè)框架。效果圖位置：【第9課源文件jingpin1kuangjia1.html】9.1.2典型案例——“精品欣賞”網(wǎng)頁框架制作操作思路（1）首先創(chuàng)建一個(gè)“上方固定，下方固定”類型的框架集。（2）然后將中間的框架進(jìn)行分割、調(diào)整，使其中間具有3個(gè)框架。（3）最后保存框架及框架集即可。9.1.2典型案例——“精品欣賞”網(wǎng)頁框架制作操作步驟具體操作步驟請教師參照軟件和書中內(nèi)容進(jìn)行講解。9.1.2典型案例——“精品欣賞”網(wǎng)頁框架制作案例小結(jié)本案例練習(xí)了框架頁面的創(chuàng)建及保存，其中要重點(diǎn)掌握的是手動(dòng)進(jìn)行框架拆分的方法，要區(qū)分按住【Alt】鍵與未按住【Alt】鍵而直接拆分時(shí)的區(qū)別。另外，本案例
5、中保存框架及框架集時(shí)都使用了快捷鍵，用戶可在Dreamweaver8的【文件】菜單中找到與命令對應(yīng)的快捷鍵。9.2框架及框架集的基本操作和屬性設(shè)置框架創(chuàng)建完成后，還需對其進(jìn)行一些操作，如選擇框架、設(shè)置屬性、鏈接網(wǎng)頁等。9.2框架及框架集的基本操作和屬性設(shè)置9.2.1知識講解9.2.2典型案例——“精品欣賞”網(wǎng)頁框架屬性設(shè)置9.2.1知識講解框架及框架集可進(jìn)行選擇、刪除等操作。9.2.1知識講解1.框架及框架集的基本操作2.刪除框架3.框架及框架集的屬性設(shè)置1.框架及框架集的基本操作在對框架和框架集進(jìn)行屬性設(shè)置以及其他操作前，需要先選擇相應(yīng)的框架和框架集。1）認(rèn)識【框架】面板2）選中框架和
6、框架集2.刪除框架如果要?jiǎng)h除不需要的框架，可用鼠標(biāo)將要?jiǎng)h除框架的邊框拖至頁面外即可，如果是嵌套框架，則將其邊框拖到父框架邊框上或拖離頁面即可3.框架及框架集的屬性設(shè)置框架集創(chuàng)建好后，即可在各框架中直接添加網(wǎng)頁內(nèi)容，或分別制作各框架要鏈接的網(wǎng)頁后，在【屬性】面板中進(jìn)行鏈接。1）設(shè)置框架的屬性2）設(shè)置框架集的屬性9.2.2典型案例——“精品欣賞”網(wǎng)頁框架屬性設(shè)置案例目標(biāo)本案例主要練習(xí)框架頁面的設(shè)置。素材位置：【第9課素材jingpin2】效果圖位置：【第9課源文件jingpin2kuangjia2.html】9.2.2典型案例——“精品欣賞”網(wǎng)頁框架屬性設(shè)置操作思路（1）首先
7、打開任意一個(gè)框架網(wǎng)頁，創(chuàng)建外部樣式表以便其他網(wǎng)頁能引用，然后為該框架網(wǎng)頁添加圖像。（2）接著打開其他框架網(wǎng)頁，鏈接外部樣式表，然后為其添加圖像。其中“main.html”框架網(wǎng)頁需添加背景圖像并輸入文本。（3）接著將9.1.2節(jié)制作的框架網(wǎng)頁“kuangjia1.html”另存為“kuangjia2.html”，然后對各個(gè)框架及框架集進(jìn)行屬性的設(shè)置。（4）最后保存框架及框架集即可。9.2.2典型案例——“精品欣賞”網(wǎng)頁框架屬性設(shè)置操
