網(wǎng)頁設(shè)計基礎(chǔ)教程與上機指導(dǎo)第版創(chuàng)建框架網(wǎng).ppt

第7章 創(chuàng)建框架網(wǎng)頁,教學(xué)提示和教學(xué)目標(biāo) 7.1 框架網(wǎng)頁的創(chuàng)建 7.2 改變框架屬性 7.3 框架和框架集,教學(xué)提示和教學(xué)目標(biāo),教學(xué)提示：在一個網(wǎng)頁中，有時候并不是所有的內(nèi)容都需要改變，如網(wǎng)頁的導(dǎo)航欄、網(wǎng)頁標(biāo)題部分是不需要改變的。如果在每個網(wǎng)頁中都重復(fù)插入這些元素，就會浪費時間，在這種情況下使用框架就會解決以上問題?？蚣艿淖饔弥饕脕碓鰪娋W(wǎng)頁的導(dǎo)航功能，對于那些每個頁面都包含有相同的導(dǎo)航菜單的網(wǎng)站來說，利用框架可以把導(dǎo)航菜單條放到一個框架中，而把內(nèi)容放到另外一個框架中，這樣切換菜單時，菜單條的框架不做任何改變，而只改變內(nèi)容框架部分。 教學(xué)目標(biāo)： 掌握框架網(wǎng)頁的創(chuàng)建 掌握框架的選擇 掌握設(shè)置框架和框架集的屬性 掌握編輯框架,7.1 框架網(wǎng)頁的創(chuàng)建,框架的作用就是把瀏覽器窗口劃分為若干個區(qū)域，每個區(qū)域可以分別顯示不同的網(wǎng)頁。當(dāng)在文件中建立框架時，Dreamweaver可以創(chuàng)建一個無標(biāo)題的框架集文件，在每個框架中創(chuàng)建無標(biāo)題文件，如果某個頁面被劃分成2個框架，它實際上包含的卻是3個獨立的文件：一個框架集文件和兩個框架內(nèi)容文件?？蚣軆?nèi)容文件包含了將出現(xiàn)在頁面框架中的內(nèi)容。 7.1.1 創(chuàng)建框架 7.1.2 保存框架,7.1.1 創(chuàng)建框架,框架網(wǎng)頁有兩個主要部分Frameset（框架集）和Frames（框架）組成?？蚣芗窃谝粋€文檔內(nèi)定義一組框架結(jié)構(gòu)的HTML網(wǎng)頁，框架是每個單獨的網(wǎng)頁文檔。創(chuàng)建框架集的具體操作步驟如下。 (1) 選擇【文件】|【新建】命令，彈出【新建文檔】對話框，如圖7.1所示。 (2) 在對話框中選擇【常規(guī)】選項卡中的【框架集】選項，在【框架集】列表框中選擇【上方固定，左側(cè)嵌套】選項，如圖7.2所示。 (3) 單擊【創(chuàng)建】按鈕，創(chuàng)建一框架網(wǎng)頁。,7.1.2 保存框架,當(dāng)編輯完框架及框架文件后，必須對框架及框架文件進(jìn)行保存，在Dreamweaver 8中保存框架及框架文件，如果像保存普通文件一樣保存框架，只會保存鼠標(biāo)所定位的框架內(nèi)容，其余的框架內(nèi)容將丟失，所以保存框架的方法是非常重要的。 (1) 選擇【文件】|【保存全部】命令。 (2) 彈出【另存為】對話框，此時整個框架邊框會出現(xiàn)一個陰影框，因為陰影出現(xiàn)在整個框架集內(nèi)側(cè)，所以詢問的是框架集的名稱，在【文件名】文本框中輸入index.html。 (3) 單擊【保存】按鈕，此時右邊框架內(nèi)出現(xiàn)虛線，提示保存右邊的框架，在【文件名】文本框中輸入right.html。 (4) 單擊【保存】按鈕，此時左邊框架內(nèi)出現(xiàn)虛線，提示保存左邊的框架，在【文件名】文本框中輸入left.html。 (5) 單擊【保存】按鈕，此時頂部框架內(nèi)出現(xiàn)虛線，提示保存頂部的框架，在【文件名】文本框中輸入top.html。 (6) 單擊【保存】按鈕，整個框架保存完畢。,7.2 改變框架屬性,在瀏覽中無法看到創(chuàng)建的框架，同時不能調(diào)整框架的大小，要改變這些屬性，需要在【屬性】面板中設(shè)置相應(yīng)的選項。 7.2.1 設(shè)置框架屬性 7.2.2 在框架中輸入內(nèi)容,7.2.1 設(shè)置框架屬性,在對框架進(jìn)行設(shè)置的時候，首先要選取所要進(jìn)行屬性設(shè)置的框架集，選中框架后，在【屬性】面板中將顯示框架的相關(guān)參數(shù)。 在框架【屬性】面板中的可以進(jìn)行如下設(shè)置。 【框架名稱】：指定框架名稱用來作為鏈接指向的目標(biāo)。 【源文件】：確定框架的源文檔，可以直接輸入名字，或單擊文本框右側(cè)的按鈕，查找并選取文件。也可以通過將鼠標(biāo)指針置于框架內(nèi)，選擇【文件】|【在框架中打開】命令打開文件。 【滾動】：設(shè)置框架內(nèi)的內(nèi)容溢出的時候是否出現(xiàn)滾動條。 【不能調(diào)整大小】：限定框架尺寸，防止用戶拖動框架邊框。 【邊框】：用來控制當(dāng)前框架邊框。有【是】、【否】、和【默認(rèn)】三個選項。 【邊框顏色】：設(shè)置與當(dāng)前框架相鄰的所有框架的邊框顏色。 【邊界寬度】：設(shè)置以像素為單位的框架邊框和內(nèi)容之間左右邊距。 【邊界高度】：設(shè)置以像素為單位的框架邊框和內(nèi)容之間上下邊距。,7.2.2 在框架中輸入內(nèi)容,框架創(chuàng)建好以后，就可以添加內(nèi)容了，每個框架的內(nèi)部內(nèi)容就是一個文檔，可以直接往里邊添加內(nèi)容，也可以在框架內(nèi)打開已經(jīng)存在的文檔。在框架中輸入內(nèi)容的具體操作步驟如下。 (1) 打開7.1.1節(jié)創(chuàng)建的框架文檔。 (2) 將鼠標(biāo)指針置于頂部框架中，選擇【修改】|【頁面屬性】命令，彈出【頁面屬性】對話框，在對話框中將【左邊距】、【上邊距】分別設(shè)置為0。 (3) 單擊【確定】按鈕，在頂部框架中輸入內(nèi)容。 (4) 同以上步驟，分別在左側(cè)和右側(cè)的框架中輸入內(nèi)容，如圖7.13所示。 (5) 保存文檔，按F12鍵在瀏覽器中預(yù)覽效果。,7.3 框架和框架集,在Dreamweaver中有兩種創(chuàng)建框架集的方法，既可以從預(yù)定義的框架集中選擇，也可以自定義框架集，選擇預(yù)定義的框架集將自動設(shè)置創(chuàng)建布局所需的所有框架集和框架，它是迅速創(chuàng)建基于框架布局的最簡單方法。 7.3.1 創(chuàng)建自定義框架集 7.3.2 嵌套框架集,7.3.1 創(chuàng)建自定義框架集,創(chuàng)建自定義框架集的具體操作步驟如下。 (1) 選擇【修改】|【框架頁】|【拆分上框架】命令，如圖7.15所示。 (2) 選擇該命令后，效果如圖7.16所示。,7.3.2 嵌套框架集,在另一個框架集之內(nèi)的框架集稱作嵌套的框架網(wǎng)頁，一個框架集文件可以包含多個嵌套的框架集，大多數(shù)使用框架的網(wǎng)頁實際上都使用嵌套的框架，并且在Dreamweaver中大多數(shù)預(yù)定義的框架集也使用嵌套。如果在一組框架中，不同行或不同列中有不同