1、Dreamweaver CS5網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程 本章將介紹在本章將介紹在Dreamweaver CS5中，中，創(chuàng)建和設(shè)置框架網(wǎng)頁的基本方法。創(chuàng)建和設(shè)置框架網(wǎng)頁的基本方法。 第第1010章章 旅游網(wǎng)站框架網(wǎng)頁設(shè)計旅游網(wǎng)站框架網(wǎng)頁設(shè)計學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo) 了解框架和框架集的概念和工作原理。了解框架和框架集的概念和工作原理。 掌握創(chuàng)建、編輯框架和保存框架網(wǎng)頁的方法。掌握創(chuàng)建、編輯框架和保存框架網(wǎng)頁的方法。 掌握設(shè)置框架和框架集屬性的方法。掌握設(shè)置框架和框架集屬性的方法。 掌握在框架中顯示現(xiàn)有文檔的方法。掌握在框架中顯示現(xiàn)有文檔的方法。 掌握設(shè)置框架中超級鏈接的方法。掌握設(shè)置框架中超級鏈接

2、的方法。 掌握創(chuàng)建浮動框架和編輯無框架內(nèi)容的方法。掌握創(chuàng)建浮動框架和編輯無框架內(nèi)容的方法。10.110.1設(shè)計思路設(shè)計思路在本章實例中，瀏覽器窗口將被劃分成4區(qū)域。首先創(chuàng)建一個“上方固定，下方固定”的框架頁，然后將中間的框架使用【拆分右框架】命令進行拆分，并對框架和框架集設(shè)置屬性，最后對框架網(wǎng)頁進行保存，并根據(jù)需要編輯無框架內(nèi)容和插入浮動框架。 10.2 10.2 認識框架認識框架 框架和框架集的概念框架和框架集的概念 框架和框架集的工作原理框架和框架集的工作原理 框架集的嵌套框架集的嵌套 利用框架可以將瀏覽器窗口劃分成多個區(qū)域，這些利用框架可以將瀏覽器窗口劃分成多個區(qū)域，這些被劃分出來的區(qū)域

3、稱為框架，在每個框架中可以被劃分出來的區(qū)域稱為框架，在每個框架中可以顯示不同的網(wǎng)頁文檔。這些框架可以有各自獨立顯示不同的網(wǎng)頁文檔。這些框架可以有各自獨立的背景、滾動條和標(biāo)題等。通過在這些不同的框的背景、滾動條和標(biāo)題等。通過在這些不同的框架之間設(shè)置超級鏈接，還可以在瀏覽器窗口中呈架之間設(shè)置超級鏈接，還可以在瀏覽器窗口中呈現(xiàn)出有動有靜的效果。現(xiàn)出有動有靜的效果。 10.2.1 10.2.1 框架和框架集的概念框架和框架集的概念框架集是HTML文件，主要用來定義一組框架的布局和屬性，包括顯示在頁面中框架的數(shù)目、框架的大小和位置、最初在每個框架中顯示的頁面的URL以及其他一些可定義屬性的相關(guān)信息。框架

4、集文件本身不包含要在瀏覽器中顯示的內(nèi)容，只是向瀏覽器提供應(yīng)如何顯示一組框架以及在這些框架中應(yīng)顯示哪些文檔的有關(guān)信息。當(dāng)然，如果框架集文件含有“noframes（編輯無框架內(nèi)容）”部分，其將會顯示在瀏覽器中。 通常可以用框架來設(shè)置網(wǎng)頁中固定的幾個部分：一個框架顯示包含導(dǎo)航控件的文檔，而另一個框架顯示包含內(nèi)容的文檔。如果一個網(wǎng)頁左邊的導(dǎo)航菜單是固定的，而頁面中間的信息可以上下移動來展現(xiàn)所選擇的網(wǎng)頁內(nèi)容，這一般就可以認為是一個框架型網(wǎng)頁。也有一些站點在其頁面上方放置了公司的Logo或圖像，其位置也是固定的，而頁面的其他部分則可以上下左右移動來展現(xiàn)相應(yīng)的網(wǎng)頁內(nèi)容，這也可以認為是一個框架型網(wǎng)頁。 10.

5、2.2 10.2.2 框架和框架集的工作原理框架和框架集的工作原理在一個框架集中的另一個框架集稱為嵌套框架集。一個框架集文件可以包含多個嵌套的框架集。大多數(shù)使用框架的網(wǎng)頁實際上都使用嵌套的框架，在Dreamweaver CS5中大多數(shù)預(yù)定義的框架集也使用嵌套。如果在一組框架里，不同行或不同列中有不同數(shù)目的框架，則要求使用嵌套的框架集。有兩種方法可在HTML中嵌套框架集：內(nèi)部框架集可以與外部框架集在同一文件中定義，也可以在不同的文件中單獨定義。這兩種類型的嵌套均產(chǎn)生相同的視覺效果，如果沒有看到代碼，很難判斷使用的是哪種類型的嵌套。 10.2.3 10.2.3 框架集的嵌套框架集的嵌套在Dream

6、weaver CS5中，每個預(yù)定義的框架集均在同一文件中定義其所有框架集。在Dreamweaver CS5中使用外部框架集文件的最常見情形是：使用【在框架中打開】命令在框架內(nèi)打開一個框架集文件，但這可能導(dǎo)致設(shè)置鏈接目標(biāo)時出現(xiàn)問題，通常最簡單的方法是在單個文件中定義所有的框架集。 10.3 10.3 創(chuàng)建和保存框架網(wǎng)頁創(chuàng)建和保存框架網(wǎng)頁 創(chuàng)建框架網(wǎng)頁創(chuàng)建框架網(wǎng)頁 保存框架網(wǎng)頁保存框架網(wǎng)頁 在框架中顯示現(xiàn)有文檔在框架中顯示現(xiàn)有文檔 如果創(chuàng)建的框架網(wǎng)頁所有文檔都是新文檔，需要先保存所有文檔，同時需要在保存的框架中的文檔內(nèi)添加內(nèi)容。如果已經(jīng)將在各個框架中顯示的文檔預(yù)先制作好了，在創(chuàng)建框架網(wǎng)頁時，就只需

7、要保存框架集文件，然后在各個框架中打開已預(yù)先制作好的文檔即可。 選擇【文件】/【新建】命令，打開【新建文檔】對話框，在對話框中選擇【示例中的頁】/【框架頁】/【上方固定，下方固定】選項。10.3.1 10.3.1 創(chuàng)建框架網(wǎng)頁創(chuàng)建框架網(wǎng)頁如果在【首選參數(shù)】對話框的【輔助功能】分類中選擇了【框架】選項，會彈出【框架標(biāo)簽輔助功能屬性】對話框。在菜單欄中選擇【窗口】/【框架】命令可查看所命名的框架關(guān)系圖。10.3.2 10.3.2 保存框架網(wǎng)頁保存框架網(wǎng)頁在瀏覽器中預(yù)覽框架網(wǎng)頁前，需要先保存框架集文件以及要在框架中顯示的所有文檔。既可以單獨保存每個框架集文件和框架中的文檔，也可以同時保存框架集文件和

8、框架中出現(xiàn)的所有文檔。保存框架集文件：在【框架】面板中單擊最外層框架集的邊框選中最外層框架集，在菜單欄中選擇【文件】/【保存框架頁】命令。如果要將已保存過的框架集文件另存為新文件，需要選擇【文件】/【框架集另存為】命令。如果以前沒有保存過該框架集文件，這個命令與【文件】/【保存框架頁】命令是等效的。 保存框架中顯示的文檔：在文檔窗口的頂部框架“topFrame”內(nèi)單擊鼠標(biāo)左鍵，然后在菜單欄中選擇【文件】【保存框架】命令對頂部框架中的文檔進行保存。如果要將已保存過的框架文件另存為新文件，需要選擇【文件】/【框架另存為】命令。如果以前沒有保存過該框架文件，這個命令與【文件】/【保存框架】命令是等效

9、的。 如果創(chuàng)建的框架網(wǎng)頁所有文檔都是新文檔，需要先保存所有文檔，同時需要在保存的框架中的文檔內(nèi)添加內(nèi)容。如果已經(jīng)將在各個框架中顯示的文檔預(yù)先制作好了，在創(chuàng)建框架網(wǎng)頁時，就只需要保存框架集文件，然后在各個框架中打開已預(yù)先制作好的文檔即可。 在文檔窗口中將鼠標(biāo)光標(biāo)置于框架內(nèi)，然后在菜單欄中選擇【文件】/【在框架中打開】命令打開文檔。在保存了框架集文件后，在瀏覽器中打開框架集文件時，這些在框架中打開的文檔就成為在框架中顯示的默認文檔。 10.3.3 10.3.3 在框架中顯示現(xiàn)有文檔在框架中顯示現(xiàn)有文檔10.4 10.4 設(shè)置框架和框架集屬性及框架中的鏈接設(shè)置框架和框架集屬性及框架中的鏈接 選擇框架

10、和框架集選擇框架和框架集 設(shè)置框架集屬性設(shè)置框架集屬性 設(shè)置框架屬性設(shè)置框架屬性 設(shè)置框架網(wǎng)頁中的超級鏈接設(shè)置框架網(wǎng)頁中的超級鏈接 一、在【框架】面板中選擇框架或框架集 10.4.1 10.4.1 選擇框架和框架集選擇框架和框架集二、在文檔窗口中選擇框架或框架集 三、選擇不同的框架或框架集如果要在當(dāng)前選定內(nèi)容的同一層次級別上選擇下一框架（框架集）或前一框架（框架集），需要在鍵盤上按住Alt鍵的同時按下左箭頭鍵或右箭頭鍵。使用這些鍵，可以按照框架和框架集在框架集文件中定義的順序依次選擇這些框架和框架集。如果要選擇父框架集（包含當(dāng)前選定內(nèi)容的框架集），可在鍵盤上按住Alt鍵的同時按上箭頭鍵。如果要

11、選擇當(dāng)前選定框架集的第1個子框架或框架集（即在框架集文件中定義順序中的第1個），在按住Alt鍵的同時按下箭頭鍵。 使用【屬性】面板可以查看和設(shè)置大多數(shù)框架集屬性，包括框架集邊框、框架大小等。 10.4.2 10.4.2 設(shè)置框架集屬性設(shè)置框架集屬性使用【屬性】面板可以查看和設(shè)置大多數(shù)框架屬性，包括邊框、邊距以及是否在框架中顯示滾動條等。 10.4.3 10.4.3 設(shè)置框架屬性設(shè)置框架屬性如果要在一個框架中使用超級鏈接打開另一個框架中的文檔，必須設(shè)置鏈接目標(biāo)窗口打開方式。超級鏈接的target屬性指定在其中打開所鏈接內(nèi)容的框架或窗口。 10.4.4 10.4.4 設(shè)置框架網(wǎng)頁中的超級鏈接設(shè)置框

12、架網(wǎng)頁中的超級鏈接10.5 10.5 優(yōu)化框架網(wǎng)頁優(yōu)化框架網(wǎng)頁 使用框架存在的問題使用框架存在的問題 優(yōu)化框架網(wǎng)頁優(yōu)化框架網(wǎng)頁 如果確定要使用框架，它最常用于導(dǎo)航。一組框架中通常包含兩個框架，一個含有導(dǎo)航條，另一個顯示主要內(nèi)容頁面。按這種方式使用框架，它具有以下優(yōu)點。(1)瀏覽者的瀏覽器不需要為每個頁面重新加載與導(dǎo)航相關(guān)的圖形。(2)每個框架都具有自己的滾動條，因此瀏覽者可以獨立滾動這些框架。但是，Adobe公司并不鼓勵在網(wǎng)頁布局中使用框架，原因可歸納為以下幾個方面。(1)可能難以實現(xiàn)不同框架中各元素的精確圖形對齊。(2)對導(dǎo)航進行測試可能很耗時間。(3)框架中顯示的每個頁面的URL不顯示在瀏

13、覽器地址欄中，因此瀏覽者可能難以將特定頁面設(shè)為書簽。10.5.1 10.5.1 使用框架存在的問題使用框架存在的問題(4)目前并非所有瀏覽器都對框架提供良好的支持，并且框架對于殘障人士來說導(dǎo)航會有困難。(5)更主要的是，在許多情況下可以創(chuàng)建沒有框架的網(wǎng)頁，它可以達到與框架網(wǎng)頁同樣效果。例如，如果希望導(dǎo)航條顯示在頁面的左側(cè)，可以在站點中的每一頁的左側(cè)處包含該導(dǎo)航條即可。在Dreamweaver CS5中，使用模板和庫都可以實現(xiàn)這一目標(biāo)，它們既具有類似框架布局的頁面設(shè)計，又沒有使用框架。(6)目前大多數(shù)的搜索引擎都無法識別網(wǎng)頁中的框架，或者無法對框架中的內(nèi)容進行遍歷或搜索，這是由于那些具體內(nèi)容都被

14、放到“內(nèi)部網(wǎng)頁”中去了。為了讓更多的瀏覽者能夠正常訪問到或者通過搜索引擎能夠查詢到含有框架的網(wǎng)頁，在Dreamweaver CS5中可以從3個方面進行優(yōu)化：設(shè)置框架網(wǎng)頁標(biāo)題、設(shè)置文件頭標(biāo)簽中的關(guān)鍵字和說明、合理使用標(biāo)記等。 10.5.2 10.5.2 優(yōu)化框架網(wǎng)頁優(yōu)化框架網(wǎng)頁浮動框架是一種特殊的框架形式，可以包含在許多元素當(dāng)中。在菜單欄中選擇【插入】/【標(biāo)簽】命令，打開【標(biāo)簽選擇器】對話框，然后展開【HTML標(biāo)簽】分類，在右側(cè)列表中找到“iframe”。10.6 10.6 創(chuàng)建浮動框架創(chuàng)建浮動框架單擊【插入】按鈕打開【標(biāo)簽編輯器-iframe】對話框，并進行參數(shù)設(shè)置。在文檔窗口中選中插入的浮動框架，然后在菜單欄中選擇【窗口】/【標(biāo)簽檢查器】命令，打開【標(biāo)簽檢查器】面板，對其中的相關(guān)參數(shù)進行修改即可。10.7 拓展訓(xùn)練根據(jù)操作要求創(chuàng)建框架網(wǎng)頁，效果如圖所示。(