第10章 旅游網(wǎng)站框架網(wǎng)頁設(shè)計(jì)(免費(fèi)下載)

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

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

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

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

6、種 類型的嵌套。 10.2.3 10.2.3 框架集的嵌套框架集的嵌套 在Dreamweaver CS5中，每個(gè)預(yù)定義的框架集均在同 一文件中定義其所有框架集。在Dreamweaver CS5中 使用外部框架集文件的最常見情形是：使用【在框架 中打開】命令在框架內(nèi)打開一個(gè)框架集文件，但這可 能導(dǎo)致設(shè)置鏈接目標(biāo)時(shí)出現(xiàn)問題，通常最簡單的方法 是在單個(gè)文件中定義所有的框架集。 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)頁所有文檔都是新文檔，需要先 保存所有文檔，同時(shí)需要在保存

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

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

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

10、文檔。 10.3.3 10.3.3 在框架中顯示現(xiàn)有文檔在框架中顯示現(xiàn)有文檔 10.4 10.4 設(shè)置框架和框架集屬性及框架中的鏈接設(shè)置框架和框架集屬性及框架中的鏈接 選擇框架和框架集選擇框架和框架集 設(shè)置框架集屬性設(shè)置框架集屬性 設(shè)置框架屬性設(shè)置框架屬性 設(shè)置框架網(wǎng)頁中的超級鏈接設(shè)置框架網(wǎng)頁中的超級鏈接 一、在【框架】面板中選擇框架或框架集 10.4.1 10.4.1 選擇框架和框架集選擇框架和框架集 二、在文檔窗口中選擇框架或框架集 三、選擇不同的框架或框架集 如果要在當(dāng)前選定內(nèi)容的同一層次級別上選擇下一框 架（框架集）或前一框架（框架集），需要在鍵盤上 按住Alt鍵的同時(shí)按下左箭頭鍵或右

11、箭頭鍵。使用這些 鍵，可以按照框架和框架集在框架集文件中定義的順 序依次選擇這些框架和框架集。 如果要選擇父框架集（包含當(dāng)前選定內(nèi)容的框架集）， 可在鍵盤上按住Alt鍵的同時(shí)按上箭頭鍵。如果要選擇 當(dāng)前選定框架集的第1個(gè)子框架或框架集（即在框架集 文件中定義順序中的第1個(gè)），在按住Alt鍵的同時(shí)按 下箭頭鍵。 使用【屬性】面板可以查看和設(shè)置大多數(shù)框架集屬性， 包括框架集邊框、框架大小等。 10.4.2 10.4.2 設(shè)置框架集屬性設(shè)置框架集屬性 使用【屬性】面板可以查看和設(shè)置大多數(shù)框架屬性， 包括邊框、邊距以及是否在框架中顯示滾動條等。 10.4.3 10.4.3 設(shè)置框架屬性設(shè)置框架屬性 如

12、果要在一個(gè)框架中使用超級鏈接打開另一個(gè)框架中 的文檔，必須設(shè)置鏈接目標(biāo)窗口打開方式。超級鏈接 的target屬性指定在其中打開所鏈接內(nèi)容的框架或窗口。 10.4.4 10.4.4 設(shè)置框架網(wǎng)頁中的超級鏈接設(shè)置框架網(wǎng)頁中的超級鏈接 10.5 10.5 優(yōu)化框架網(wǎng)頁優(yōu)化框架網(wǎng)頁 使用框架存在的問題使用框架存在的問題 優(yōu)化框架網(wǎng)頁優(yōu)化框架網(wǎng)頁 如果確定要使用框架，它最常用于導(dǎo)航。一組框架中通常包含兩個(gè) 框架，一個(gè)含有導(dǎo)航條，另一個(gè)顯示主要內(nèi)容頁面。按這種方式使 用框架，它具有以下優(yōu)點(diǎn)。 (1)瀏覽者的瀏覽器不需要為每個(gè)頁面重新加載與導(dǎo)航相關(guān)的圖形。 (2)每個(gè)框架都具有自己的滾動條，因此瀏覽者可以獨(dú)

13、立滾動這些 框架。 但是，Adobe公司并不鼓勵在網(wǎng)頁布局中使用框架，原因可歸納為 以下幾個(gè)方面。 (1)可能難以實(shí)現(xiàn)不同框架中各元素的精確圖形對齊。 (2)對導(dǎo)航進(jìn)行測試可能很耗時(shí)間。 (3)框架中顯示的每個(gè)頁面的URL不顯示在瀏覽器地址欄中，因此 瀏覽者可能難以將特定頁面設(shè)為書簽。 10.5.1 10.5.1 使用框架存在的問題使用框架存在的問題 (4)目前并非所有瀏覽器都對框架提供良好的支持，并且框架對 于殘障人士來說導(dǎo)航會有困難。 (5)更主要的是，在許多情況下可以創(chuàng)建沒有框架的網(wǎng)頁，它可 以達(dá)到與框架網(wǎng)頁同樣效果。例如，如果希望導(dǎo)航條顯示在頁 面的左側(cè)，可以在站點(diǎn)中的每一頁的左側(cè)處包

14、含該導(dǎo)航條即可。 在Dreamweaver CS5中，使用模板和庫都可以實(shí)現(xiàn)這一目標(biāo)， 它們既具有類似框架布局的頁面設(shè)計(jì)，又沒有使用框架。 (6)目前大多數(shù)的搜索引擎都無法識別網(wǎng)頁中的框架，或者無法 對框架中的內(nèi)容進(jìn)行遍歷或搜索，這是由于那些具體內(nèi)容都被 放到“內(nèi)部網(wǎng)頁”中去了。 為了讓更多的瀏覽者能夠正常訪問到或者通過搜索引 擎能夠查詢到含有框架的網(wǎng)頁，在Dreamweaver CS5 中可以從3個(gè)方面進(jìn)行優(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】對話框，并進(jìn)行參 數(shù)設(shè)置。 在文檔窗口中選中插入 的浮動框架，然后在菜 單欄中選擇【窗口】/ 【標(biāo)簽檢查器】命令， 打開【標(biāo)簽檢查器】面 板，對其中的相關(guān)參數(shù) 進(jìn)行修改即可。 10.7 拓展訓(xùn)練 根據(jù)操作要求創(chuàng)建框架網(wǎng)頁，效果如圖所示。 (1)將素