框架網(wǎng)頁(yè)的特點(diǎn)及制作方法

1、框架是網(wǎng)頁(yè)中經(jīng)常使用的頁(yè)面設(shè)計(jì)方式，框架的作用就是把網(wǎng)頁(yè)在一個(gè)瀏覽器窗口下分割成幾個(gè)不同的區(qū)域，實(shí)現(xiàn)在一個(gè)瀏覽器窗口中顯示多個(gè)HTML頁(yè)面。使用框架可以非常方便的完成導(dǎo)航工作，讓網(wǎng)站的結(jié)構(gòu)更加清晰，而且各個(gè)框架之間決不存在干擾問(wèn)題。利用框架最大的特點(diǎn)就是使網(wǎng)站的風(fēng)格一致。通常把一個(gè)網(wǎng)站中頁(yè)面相同的部分單獨(dú)制作成一個(gè)頁(yè)面，作為框架結(jié)構(gòu)的一個(gè)子框架的內(nèi)容給整個(gè)網(wǎng)站公用。 一個(gè)框架結(jié)構(gòu)有兩部分網(wǎng)頁(yè)文件構(gòu)成： 框架（Frame）：框架是瀏覽器窗口中的一個(gè)區(qū)域，它可以顯示與瀏覽器窗口的其余部分中所顯示內(nèi)容無(wú)關(guān)的網(wǎng)頁(yè)文件。 框架集（Frameset）：框架集也是一個(gè)網(wǎng)頁(yè)文件，它將一個(gè)窗口通過(guò)行和列的方式分

2、割成多個(gè)框架，框架的多少根據(jù)具體有多少網(wǎng)頁(yè)來(lái)決定，每個(gè)框架中要顯示的就是不同的網(wǎng)頁(yè)文件。 一、創(chuàng)建框架 在創(chuàng)建框架集或使用框架前，通過(guò)選擇“查看/可視化助理/框架邊框”命令，使框架邊框在文檔窗口的設(shè)計(jì)視圖中可見(jiàn)。 1、使用預(yù)制框架集 (1、新建一個(gè)HTML文件，在快捷工具欄選擇“布局”，單擊 “框架”按鈕，在彈出的下拉菜單中選擇“頂部和嵌套的左側(cè)框架”。 （2）、使用鼠標(biāo)直接從框架的左側(cè)邊緣河上邊緣向中間拖動(dòng)，直至合適的位置，這樣頂部和嵌套的左側(cè)框架就完成了。2、鼠標(biāo)拖動(dòng)創(chuàng)建框架（1）、新建普通網(wǎng)頁(yè)，命名后將其打開(kāi)。（2）、把鼠標(biāo)放到框架邊框上，出現(xiàn)雙箭頭光標(biāo)時(shí)拖拽框架邊框，可以垂直或水平分割

3、網(wǎng)頁(yè)。二、保存框架 每一個(gè)框架都有一個(gè)框架名稱，可以用默認(rèn)的框架名稱，也可以在屬性面板修改名稱，我們采用系統(tǒng)默認(rèn)的框架名稱topFrame（上方）、leftFrame（左側(cè)）、mainFrame（右側(cè)）。 選擇菜單欄>文件>保存全部，將框架集保存為index.html，上方框架保存為07.html，左側(cè)框架保存為08.html，右側(cè)框架保存為09.html。 這個(gè)步驟雖然簡(jiǎn)單，但是很關(guān)鍵，只有將總框架集和各個(gè)框架保存在本地站點(diǎn)根目錄下，才能保證瀏覽頁(yè)面時(shí)顯示正常。 三、 編輯框架式網(wǎng)頁(yè) 雖然框架式網(wǎng)頁(yè)把屏幕分割成幾個(gè)窗口，每個(gè)框架（窗口）中放置一個(gè)普通的網(wǎng)頁(yè)，但是編輯框架式網(wǎng)頁(yè)時(shí)，

4、要把整個(gè)編輯窗口當(dāng)作一個(gè)網(wǎng)頁(yè)來(lái)編輯，插入的網(wǎng)頁(yè)元素位于哪個(gè)框架，就保存在哪個(gè)框架的網(wǎng)頁(yè)中?？蚣艿拇笮】梢噪S意修改。 1、 改變框架大小 用鼠標(biāo)拖拽框架邊框可隨意改變框架大小。 2、 刪除框架 用鼠標(biāo)把框架邊框拖拽到父框架的邊框上，可刪除框架。 3、設(shè)置框架屬性 設(shè)置框架屬性時(shí)，必須先選中框架。選擇框架方法如下： 選擇菜單欄>窗口>框架，打開(kāi)框架面板，單擊某個(gè)框架，即可選中該框架。 在編輯窗口某個(gè)框架內(nèi)按住Alt鍵并單擊鼠標(biāo)，即可選擇該框架。當(dāng)一個(gè)框架被選擇時(shí)，它的邊框帶有點(diǎn)線輪廓2. 設(shè)置框架屬性 選中框架，在屬性面板上可以設(shè)置框架屬性：框架名稱、源文件、空白邊距、滾動(dòng)條、重置大小

5、和邊框?qū)傩缘取?需要注意的是：1、框架是不可以合并的。2、在創(chuàng)建鏈接時(shí)要用到框架名稱，所以我們要很清楚的知道每個(gè)框架對(duì)應(yīng)的框架名。 四、在框架中使用超級(jí)鏈接 在框架式網(wǎng)頁(yè)中制作超級(jí)鏈接時(shí)，一定要設(shè)置鏈接的目標(biāo)屬性，為鏈接的目標(biāo)文檔指定顯示窗口。鏈接目標(biāo)較遠(yuǎn)（其他網(wǎng)站）時(shí)，一般放在新窗口，在導(dǎo)航條上創(chuàng)建鏈接時(shí)，一般將目標(biāo)文檔放在另一個(gè)框架中顯示（當(dāng)頁(yè)面較小時(shí)）或全屏幕顯示（當(dāng)頁(yè)面較大時(shí)）。 “目標(biāo)”下拉菜單中的選項(xiàng)： * _blank 放在新窗口中。 * _parent 放到父框架集或包含該鏈接的框架窗口中。 * _self 放在相同窗口中（默認(rèn)窗口無(wú)須指定）。 * _top 放到整個(gè)瀏覽器窗口

6、并刪除所有框架。 在我們保存有框架名為mainFrame、leftFrame、topFrame的框架后，在目標(biāo)下拉菜單中，還會(huì)出現(xiàn)mainFrame、leftFrame、topFrame選項(xiàng)： * mainFrame 放到名為mainFrame的框架中。 * leftFrame 放到名為leftFrame的框架中。 * topFrame放到名為topFrame的框架中。五、制作框架頁(yè)面 1、選擇菜單欄>窗口>框架，打開(kāi)框架面板，選中整個(gè)框架集，如下圖所示：在屬性面板中，將行的值設(shè)置為100，單位為像素，如下圖所示：2、選擇菜單欄>窗口>框架，打開(kāi)框架面板，選中子框架集，

7、如下圖所示：在屬性面板中，將列的值設(shè)置為200，單位為像素，如下圖所示：這樣，我們就完成了對(duì)整個(gè)框架的布局。下面我們來(lái)布局各個(gè)框架頁(yè)面。 3、鼠標(biāo)在topFrame框架中的空白處點(diǎn)擊一下，我們會(huì)看見(jiàn)文檔窗口上方的文件名變?yōu)榱?7.html。在頁(yè)面屬性中將上、下、左。右邊距全部設(shè)為0。 插入一個(gè)1行2列的表格，寬度為100，高度為100px，左單元格寬度為382px并插入背景圖片img/103.jpg，設(shè)置表格的背景顏色為103.jpg圖片右邊緣的綠色（用吸管吸?。?。 4、鼠標(biāo)在leftFrame框架中的空白處點(diǎn)擊一下，我們會(huì)看見(jiàn)文檔窗口上方的文件名變?yōu)榱?8.html，在頁(yè)面屬性中將上、下、左

8、。右邊距全部設(shè)為0。 插入一個(gè)6行1列 的表格，表格寬度為95，居中對(duì)齊。將第一個(gè)單元格的高度設(shè)為20px，選中其余單元格將高度設(shè)置為50px。分別輸入文字設(shè)置導(dǎo)航欄目。分別對(duì)各個(gè)導(dǎo)航欄目建立鏈接關(guān)系，鏈接路徑指向要鏈接到的網(wǎng)頁(yè)，目標(biāo)選擇mainFrame框架。 5、鼠標(biāo)在mainFrame框架中的空白處點(diǎn)擊一下，我們會(huì)看見(jiàn)文檔窗口上方的文件名變?yōu)榱?9.html，在頁(yè)面屬性中將上、下、左。右邊距全部設(shè)為0。 自己設(shè)置一個(gè)歡迎頁(yè)面。至此，我們完成了一個(gè)框架網(wǎng)站的制作。這篇教程為“Dreamweaver 8 入門經(jīng)典教程”的一部分。查看全套教程>>>>>。網(wǎng)頁(yè)設(shè)計(jì)中

9、使用框架的優(yōu)缺點(diǎn)剖析 2007-01-28 信息來(lái)源：酷絡(luò)網(wǎng) 視力保護(hù)色：                 【大 中 小】【打印本頁(yè)】【關(guān)閉窗口】框架的最常見(jiàn)用途就是導(dǎo)航。一組框架通常包括一個(gè)含有導(dǎo)航條的框架和另一個(gè)要顯示主要內(nèi)容頁(yè)面的框架。 但是，框架的設(shè)計(jì)可能比較復(fù)雜;并且在許多情況下，您可以創(chuàng)建沒(méi)有框架的 Web 頁(yè)，它可以達(dá)到使用一組框架所能達(dá)到的許多同樣效果。例如，如果您想讓導(dǎo)航條顯示在頁(yè)面的左側(cè)，則既可以用一組框架代替您的頁(yè)面，也可以只是在站點(diǎn)中的每一頁(yè)上包含該導(dǎo)航條。 許多專業(yè)&#

10、160;Web 設(shè)計(jì)人員不喜歡使用框架，并且許多瀏覽 Web 的人也不喜歡框架。在大多數(shù)情況下，這種反感是因?yàn)橛龅搅四切┦褂每蚣苄Ч患鸦虿槐匾厥褂每蚣艿恼军c(diǎn)(例如，每當(dāng)訪問(wèn)者單擊導(dǎo)航按鈕時(shí)就重新加載導(dǎo)航框架內(nèi)容的框架集。如果框架使用得法(例如，在允許其他框架的內(nèi)容發(fā)生更改的同時(shí)，使一個(gè)框架中的導(dǎo)航控件保持靜態(tài)，則這些框架對(duì)于某些站點(diǎn)可能非常有用。 并不是所有的瀏覽器都提供良好的框架支持，框架對(duì)于無(wú)法導(dǎo)航的訪問(wèn)者而言可能難以顯示。所以，如果您確實(shí)要使用框架，應(yīng)始終在您的框架集中提供 noframes 部分，以方便不能查看這些框架的訪問(wèn)者。您最好還要提供指向站點(diǎn)的無(wú)框架版本的顯式鏈接，以用于那些雖然其瀏覽器支持框架但不喜歡使用框架的訪問(wèn)者。 使用框架具有以下優(yōu)點(diǎn): 訪問(wèn)者的瀏覽器不需要為每個(gè)頁(yè)面重新加載與導(dǎo)航相關(guān)的圖形。 每個(gè)框架都具有自己的滾動(dòng)條(如果內(nèi)容太大，在窗口中顯示不下，因此訪問(wèn)者可以獨(dú)立滾動(dòng)這些框架。 例如，當(dāng)框架中的內(nèi)容頁(yè)面較長(zhǎng)時(shí)，如果導(dǎo)航條位于不同的框架中，那么向下滾動(dòng)到