網(wǎng)頁設(shè)計與制作實用教程網(wǎng)頁設(shè)計與制作實用教程第7章應(yīng)用框架技術(shù)制作網(wǎng)頁22023/1/3學(xué)習目標 掌握框架的基本概念； 掌握創(chuàng)建框架結(jié)構(gòu)的方法； 掌握編輯框架頁面的方法； 掌握框架頁面導(dǎo)航的鏈接方法； 掌握設(shè)置框架和框架集屬性的方法。第7章應(yīng)用框架技術(shù)制作網(wǎng)頁22022/12/18學(xué)習目標第7章應(yīng)用框架技術(shù)制作網(wǎng)頁32023/1/3目錄框架應(yīng)用實例利用框架組織頁面實例本章小結(jié)配套實訓(xùn)練習題第7章應(yīng)用框架技術(shù)制作網(wǎng)頁32022/12/18目錄框架應(yīng)第7章應(yīng)用框架技術(shù)制作網(wǎng)頁42023/1/3框架應(yīng)用實例設(shè)計目標頁面分析實訓(xùn)引導(dǎo)制作步驟第7章應(yīng)用框架技術(shù)制作網(wǎng)頁42022/12/18框架應(yīng)用實第7章應(yīng)用框架技術(shù)制作網(wǎng)頁52023/1/3設(shè)計目標應(yīng)用框架制作“暢想未來”網(wǎng)頁，效果如圖7.1所示。在瀏覽網(wǎng)頁時，單擊左側(cè)導(dǎo)航欄的某個標題，則對應(yīng)的鏈接內(nèi)容便顯示在窗口右側(cè)，而頂端的網(wǎng)站標志和左側(cè)的導(dǎo)航欄仍然顯示在屏幕上，如圖7.2所示；當單擊“網(wǎng)易”時，將打開一個新的窗口顯示163網(wǎng)站的內(nèi)容。返回第7章應(yīng)用框架技術(shù)制作網(wǎng)頁52022/12/18設(shè)計目標應(yīng)第7章應(yīng)用框架技術(shù)制作網(wǎng)頁62023/1/3頁面分析該實例實質(zhì)上是一個應(yīng)用了“頂部和嵌套的左側(cè)框架”框架結(jié)構(gòu)的網(wǎng)頁。這種框架結(jié)構(gòu)的頁面被分成了三個區(qū)域，每一個區(qū)域都是一個框架（Frame），而這些框架的集合，就稱為框架集（Frameset）。由于每個框架都包含一個網(wǎng)頁，因此文檔窗口雖然被分成了3個框架（如圖7.3所示），但卻用到了4個網(wǎng)頁，即3個框架網(wǎng)頁和1個包含框架數(shù)、框架的大小、載入框架等信息的框架集網(wǎng)頁。（教程P141）返回第7章應(yīng)用框架技術(shù)制作網(wǎng)頁62022/12/18頁面分析該第7章應(yīng)用框架技術(shù)制作網(wǎng)頁72023/1/3實訓(xùn)引導(dǎo)1．本實例的頁面內(nèi)容取自于第6章制作的index6.htm網(wǎng)頁。2．導(dǎo)航欄中各個欄目文本所對應(yīng)的鏈接文件（如ex7_novel.htm、ex7_city.htm）由配套光盤webcourse\chapter07\materials文件夾提供，請將這些所要鏈接的文件復(fù)制到本地站點future\webpages文件夾下。3．頁面效果請參見webcourse\chapter07文件夾下的index7_1.html文件。返回第7章應(yīng)用框架技術(shù)制作網(wǎng)頁72022/12/18實訓(xùn)引導(dǎo)1第7章應(yīng)用框架技術(shù)制作網(wǎng)頁82023/1/3制作步驟創(chuàng)建基于框架的網(wǎng)頁可以依次按照下述步驟進行：1．在頁面中創(chuàng)建框架集和框架，并對頁面布局進行適當?shù)恼{(diào)整。2．保存框架集文件和框架文件。3．輸入框架頁面內(nèi)容。4．通過設(shè)置框架和框架集屬性，來改變框架網(wǎng)頁的外觀等。5．確認鏈接目標的框架設(shè)置，使所有鏈接內(nèi)容都出現(xiàn)在正確的區(qū)域內(nèi)。返回第7章應(yīng)用框架技術(shù)制作網(wǎng)頁82022/12/18制作步驟創(chuàng)第7章應(yīng)用框架技術(shù)制作網(wǎng)頁92023/1/3創(chuàng)建框架結(jié)構(gòu)插入一個如圖7.4所示的預(yù)定義的框架集，操作步驟見教程P142。第7章應(yīng)用框架技術(shù)制作網(wǎng)頁92022/12/18創(chuàng)建框架結(jié)第7章應(yīng)用框架技術(shù)制作網(wǎng)頁102023/1/3保存框架集網(wǎng)頁及編輯框架集頁面內(nèi)容

分別保存框架集網(wǎng)頁和各個框架中的網(wǎng)頁文件，操作步驟見教程P145。第7章應(yīng)用框架技術(shù)制作網(wǎng)頁102022/12/18保存框架第7章應(yīng)用框架技術(shù)制作網(wǎng)頁112023/1/3編輯框架集頁面內(nèi)容直接在3個區(qū)域（框架）中分別插入相應(yīng)的內(nèi)容，結(jié)果如圖7.1所示。第7章應(yīng)用框架技術(shù)制作網(wǎng)頁112022/12/18編輯框架第7章應(yīng)用框架技術(shù)制作網(wǎng)頁122023/1/3修飾框架集網(wǎng)頁外觀精確調(diào)整框架大小，使頂端框架的行高為250像素、左側(cè)框架的列寬為200像素。操作步驟見教程P148。為框架集網(wǎng)頁index7_1.html設(shè)置文檔標題，操作步驟見教程P150。自動為左側(cè)框架添加滾動條，操作步驟見教程P150。在index7_1.htm的基礎(chǔ)上設(shè)置邊框的寬度為2，其邊框顏色自定，并將設(shè)置后的框架網(wǎng)頁另存為index7_border.htm。操作步驟見教程P152。第7章應(yīng)用框架技術(shù)制作網(wǎng)頁122022/12/18修飾框架第7章應(yīng)用框架技術(shù)制作網(wǎng)頁132023/1/3設(shè)置框架中的鏈接目標為導(dǎo)航欄中的“科幻小說”文本創(chuàng)建超級鏈接，當單擊“科幻小說”時，在mainFrame框架中顯示對應(yīng)的鏈接內(nèi)容，如圖7.27所示。操作步驟見教程P152。第7章應(yīng)用框架技術(shù)制作網(wǎng)頁132022/12/18設(shè)置框架第7章應(yīng)用框架技術(shù)制作網(wǎng)頁142023/1/3利用框架組織頁面實例利用框架結(jié)構(gòu)重新組織index6.html頁面，并在預(yù)覽頁面時，單擊導(dǎo)航欄目可以在窗口的中間區(qū)域顯示相應(yīng)的鏈接內(nèi)容，效果如圖7.29所示，操作步驟見教程P154。第7章應(yīng)用框架技術(shù)制作網(wǎng)頁142022/12/18利用框架第7章應(yīng)用框架技術(shù)制作網(wǎng)頁152023/1/3本章小結(jié)本章通過一個典型的框架應(yīng)用實例，介紹了如何創(chuàng)建基于框架的網(wǎng)頁文件，內(nèi)容包括：（1）在頁面中創(chuàng)建框架集和框架，并對頁面布局進行適當?shù)恼{(diào)整。（2）輸入框架頁面內(nèi)容。（3）保存框架集文件和框架文件。（4）確認鏈接目標的框架設(shè)置，使所有鏈接內(nèi)容都出現(xiàn)在正確的區(qū)域內(nèi)。（5）通過設(shè)置框架和框架集屬性，來改變框架網(wǎng)頁的外觀等。第7章應(yīng)用框架技術(shù)制作網(wǎng)頁152022/12/18本章小結(jié)第7章應(yīng)用框架技術(shù)制作網(wǎng)頁162023/1/3配套實訓(xùn)

參見教材第157～158頁，利用提供的素材文件，制作一個關(guān)于杭州西湖的網(wǎng)頁，頁面效果如圖7.35所示。第7章應(yīng)用框架技術(shù)制作網(wǎng)頁162022/12/18配套實訓(xùn)第7章應(yīng)用框架技術(shù)制作網(wǎng)頁172023/1/3練習題參見教材第158頁，完成相應(yīng)的練習題：

填空題單選題思考題第7章應(yīng)用框架技術(shù)制作網(wǎng)頁172022/12/18練習題參網(wǎng)頁設(shè)計與制作實用教程網(wǎng)頁設(shè)計與制作實用教程第7章應(yīng)用框架技術(shù)制作網(wǎng)頁192023/1/3學(xué)習目標 掌握框架的基本概念； 掌握創(chuàng)建框架結(jié)構(gòu)的方法； 掌握編輯框架頁面的方法； 掌握框架頁面導(dǎo)航的鏈接方法； 掌握設(shè)置框架和框架集屬性的方法。第7章應(yīng)用框架技術(shù)制作網(wǎng)頁22022/12/18學(xué)習目標第7章應(yīng)用框架技術(shù)制作網(wǎng)頁202023/1/3目錄框架應(yīng)用實例利用框架組織頁面實例本章小結(jié)配套實訓(xùn)練習題第7章應(yīng)用框架技術(shù)制作網(wǎng)頁32022/12/18目錄框架應(yīng)第7章應(yīng)用框架技術(shù)制作網(wǎng)頁212023/1/3框架應(yīng)用實例設(shè)計目標頁面分析實訓(xùn)引導(dǎo)制作步驟第7章應(yīng)用框架技術(shù)制作網(wǎng)頁42022/12/18框架應(yīng)用實第7章應(yīng)用框架技術(shù)制作網(wǎng)頁222023/1/3設(shè)計目標應(yīng)用框架制作“暢想未來”網(wǎng)頁，效果如圖7.1所示。在瀏覽網(wǎng)頁時，單擊左側(cè)導(dǎo)航欄的某個標題，則對應(yīng)的鏈接內(nèi)容便顯示在窗口右側(cè)，而頂端的網(wǎng)站標志和左側(cè)的導(dǎo)航欄仍然顯示在屏幕上，如圖7.2所示；當單擊“網(wǎng)易”時，將打開一個新的窗口顯示163網(wǎng)站的內(nèi)容。返回第7章應(yīng)用框架技術(shù)制作網(wǎng)頁52022/12/18設(shè)計目標應(yīng)第7章應(yīng)用框架技術(shù)制作網(wǎng)頁232023/1/3頁面分析該實例實質(zhì)上是一個應(yīng)用了“頂部和嵌套的左側(cè)框架”框架結(jié)構(gòu)的網(wǎng)頁。這種框架結(jié)構(gòu)的頁面被分成了三個區(qū)域，每一個區(qū)域都是一個框架（Frame），而這些框架的集合，就稱為框架集（Frameset）。由于每個框架都包含一個網(wǎng)頁，因此文檔窗口雖然被分成了3個框架（如圖7.3所示），但卻用到了4個網(wǎng)頁，即3個框架網(wǎng)頁和1個包含框架數(shù)、框架的大小、載入框架等信息的框架集網(wǎng)頁。（教程P141）返回第7章應(yīng)用框架技術(shù)制作網(wǎng)頁62022/12/18頁面分析該第7章應(yīng)用框架技術(shù)制作網(wǎng)頁242023/1/3實訓(xùn)引導(dǎo)1．本實例的頁面內(nèi)容取自于第6章制作的index6.htm網(wǎng)頁。2．導(dǎo)航欄中各個欄目文本所對應(yīng)的鏈接文件（如ex7_novel.htm、ex7_city.htm）由配套光盤webcourse\chapter07\materials文件夾提供，請將這些所要鏈接的文件復(fù)制到本地站點future\webpages文件夾下。3．頁面效果請參見webcourse\chapter07文件夾下的index7_1.html文件。返回第7章應(yīng)用框架技術(shù)制作網(wǎng)頁72022/12/18實訓(xùn)引導(dǎo)1第7章應(yīng)用框架技術(shù)制作網(wǎng)頁252023/1/3制作步驟創(chuàng)建基于框架的網(wǎng)頁可以依次按照下述步驟進行：1．在頁面中創(chuàng)建框架集和框架，并對頁面布局進行適當?shù)恼{(diào)整。2．保存框架集文件和框架文件。3．輸入框架頁面內(nèi)容。4．通過設(shè)置框架和框架集屬性，來改變框架網(wǎng)頁的外觀等。5．確認鏈接目標的框架設(shè)置，使所有鏈接內(nèi)容都出現(xiàn)在正確的區(qū)域內(nèi)。返回第7章應(yīng)用框架技術(shù)制作網(wǎng)頁82022/12/18制作步驟創(chuàng)第7章應(yīng)用框架技術(shù)制作網(wǎng)頁262023/1/3創(chuàng)建框架結(jié)構(gòu)插入一個如圖7.4所示的預(yù)定義的框架集，操作步驟見教程P142。第7章應(yīng)用框架技術(shù)制作網(wǎng)頁92022/12/18創(chuàng)建框架結(jié)第7章應(yīng)用框架技術(shù)制作網(wǎng)頁272023/1/3保存框架集網(wǎng)頁及編輯框架集頁面內(nèi)容

分別保存框架集網(wǎng)頁和各個框架中的網(wǎng)頁文件，操作步驟見教程P145。第7章應(yīng)用框架技術(shù)制作網(wǎng)頁102022/12/18保存框架第7章應(yīng)用框架技術(shù)制作網(wǎng)頁282023/1/3編輯框架集頁面內(nèi)容直接在3個區(qū)域（框架）中分別插入相應(yīng)的內(nèi)容，結(jié)果如圖7.1所示。第7章應(yīng)用框架技術(shù)制作網(wǎng)頁112022/12/18編輯框架第7章應(yīng)用框架技術(shù)制作網(wǎng)頁292023/1/3修飾框架集網(wǎng)頁外觀精確調(diào)整框架大小，使頂端框架的行高為250像素、左側(cè)框架的列寬為200像素。操作步驟見教程P148。為框架集網(wǎng)頁index7_1.html設(shè)置文檔標題，操作步驟見教程P150。自動為左側(cè)框架添加滾動條，操作步驟見教程P150。在index7_1.htm的基礎(chǔ)上設(shè)置邊框的寬度為2，其邊框顏色自定，并將設(shè)置后的框架網(wǎng)頁另存為index7_border.htm。操作步驟見教程P152。第7章應(yīng)用框架技術(shù)制作網(wǎng)頁122022/12/18修飾框架第7章應(yīng)用框架技術(shù)制作網(wǎng)頁302023/1/3設(shè)置框架中的鏈接目標為導(dǎo)航欄中的“科幻小說”文本創(chuàng)建超級鏈接，當單擊“科幻小說”時，在mainFrame框架中顯示對應(yīng)的鏈接內(nèi)容，如圖7.27所示。操作步驟見教程P152。第7章應(yīng)用框架技術(shù)制作網(wǎng)頁132022/12/18設(shè)置框架第7章應(yīng)用框架技術(shù)制作網(wǎng)頁312023/1/3利用框架組織頁面實例利用框架結(jié)構(gòu)重新組織index6.html頁面，并在預(yù)覽頁面時，單擊導(dǎo)航欄目可以在窗口的中間區(qū)域顯示相應(yīng)的鏈接內(nèi)容，效果如圖7.29所示，操作步驟見教程P154。第7章應(yīng)用框架技術(shù)制作網(wǎng)頁142022/12/18利用框架第7章應(yīng)用框架技術(shù)制作網(wǎng)頁322023/1/3本章小結(jié)本章通過一個典型的框架應(yīng)用實例，介紹了如何創(chuàng)建基于框架的網(wǎng)頁文件，內(nèi)容包括：（1）在頁面中創(chuàng)建框架集和框架，并對頁面布局進行適當?shù)恼{(diào)整。（2）輸入框架頁面內(nèi)容。（3）保存框架集文件和框架文件。（4）確認鏈接目標的框架設(shè)置，使所有鏈接內(nèi)容都出現(xiàn)在正確的區(qū)域內(nèi)。（5）通過設(shè)置框架和框架集屬性，來改