框架里的乾坤

1、.6、框架里的乾坤（1）什么是框架 前面我們介紹了很多網(wǎng)站的頁面是用表格制作的，還有一種更方便的工具，就是使用框架。框架的作用就是把瀏覽器窗口劃分為若干個區(qū)域，每個區(qū)域可以分別顯示不同的網(wǎng)頁。將文檔分割為幾個框架后，Dreamweaver會自動產(chǎn)生一個沒名字的框架體文件，比如我們看到的一個簡單的左右框架頁面（圖1），實際上包含3個不同的文件，一個是框架體文件，還有兩個在框架中顯示內(nèi)容的文件。 圖1左右結(jié)構的框架頁面框架體文件中保存頁面中框架的數(shù)量，框架的尺寸、位置及每個框架的網(wǎng)頁源文件和其它可定義的屬性。 這是一個典型的利用框架制作的頁面（圖2），主體結(jié)構為上下結(jié)構，上面是主導航區(qū)，下面該是頻

2、道的內(nèi)容。下部又被分為左右兩個子框架，左側(cè)為主要欄目，右側(cè)為具體內(nèi)容。 圖2典型框架頁面的效果（點擊瀏覽） （2）建立一個簡單的框架下面我們就來一起創(chuàng)建這個框架。新建一個空文檔，調(diào)出“Object”面板，打開“Common”下拉菜單，選擇“Frames”，這里提供了創(chuàng)建框架的快捷方式（圖1）。 圖1創(chuàng)建框架的面板圖2上下結(jié)構的框架 單擊“Insert Top Frame”圖標，整個頁面被拆分為上下兩部分（圖2）。我們選擇“Windows”菜單下的 “Frames”命令，調(diào)出Frame視窗（快捷鍵Ctrl+F10），在這里可以清楚地看到框架體的層次結(jié)構（圖3），框架體邊框為立體加粗的立

3、體邊界，而框架則是灰色的單線邊界，里面顯示框架的名字。圖3Frame視窗中的效果上面是topFrame，下面是mainframe。單擊topFrame，選定這個框架，此時框架外有黑色框，表示我們現(xiàn)在處于此框架內(nèi)（圖4）。圖4選中上部框架單擊mainframe，下面的框架出現(xiàn)黑色邊框，上面框架的黑色邊框消失，表示我們處于mainframe框架內(nèi)。我們將mainframe進行拆分。單擊“Object”面板中的第一個圖標，名字為“Insert Left Frame”，可以看到下面的框架被拆分為左右兩部分，一個簡單的框架結(jié)構就建好了（圖5）。 圖5創(chuàng)建好的框架結(jié)構（3）框架屬性的設置接下來我們向框架中

4、添加網(wǎng)頁內(nèi)容。我們先制作好四個網(wǎng)頁，分別為top.htm，用于顯示在上部框架中；left.htm用于顯示在下部左框架中；001.htm、002.htm用于顯示在下部右側(cè)框架中（圖1）。top.htmleft.htm001.htm002.htm圖1事先做好的四個頁面（點擊查看網(wǎng)頁效果）單擊Frame視窗中的topFrame，將上面的框架選定，此時可以看到編輯頁面中此框架邊界以虛線包圍。調(diào)出屬性面板，可以看到此框架的缺省名字為topFrame，如果框架很復雜，這個名字就不適用了。我們可以將其改名，只要在下面的輸入框中輸入新名字就行了，這里我們將其命名為myframe_top，給框架命名是為了便于區(qū)

5、分各個網(wǎng)頁中的框架（圖2）。圖2上部框架中引入文件接下來指定此框架中的源文件。單擊“Src”輸入框左面的文件圖標，選擇事先制作好的文件“Top.htm”，看，Top.htm網(wǎng)頁顯示在上面的框架中了（圖3）。圖3上部框架引入文件后的效果我們可以調(diào)整框架的高度，使其與內(nèi)容相適應。將鼠標指針放在上下框架的分界線上，當鼠標變?yōu)樯舷码p箭頭時，按下鼠標左鍵進行拖動，直接改變框架高度（圖4）。圖4調(diào)整框架線高度這時我們看到框架與里面內(nèi)容間總有一個間隙，我們可將這個間隙去掉。先選中myframe_top框架，將屬性面板中的“Margin Width”、“Margin Height”值均設為0（圖5），這回再調(diào)

6、整框架高度，可以使其剛好容納里面的內(nèi)容。 圖5設置margin值為0按住ALT鍵，單擊左側(cè)的框架，選中l(wèi)eftFrame框架，將框架命名為“myframe_left”，源文件設為left.htm （圖6），并調(diào)整框架寬度。 圖6左部框架引入文件現(xiàn)在網(wǎng)頁變成這個樣子了（圖7）。圖7左部框架引入文件后的效果最后我們選中右側(cè)的框架，框架名為“myframe_main”，將其源文件設為001.htm。因為右側(cè)框架內(nèi)容可能比較多，可以讓此框架存在滾動條。在屬性面板中，在Scroll列表中選擇“Auto”。這樣，如果右側(cè)框架中的內(nèi)容很多，就會自動出現(xiàn)滾動條（圖8）。 圖8右部框架引入文件別忘了保存文件喲！

7、選擇“File”菜單下的“Frameset”命令，將主框架體文件命名為myframe.htm。myframe.htm文件中保存的是什么信息呢？這個文件相當于一個匯總文件，要讓瀏覽器知道框架的數(shù)目、大小比例，預先載入那些網(wǎng)頁等信息。保存此文件的另一個好處是框架中調(diào)入網(wǎng)頁文件時，Src框中會呈現(xiàn)相對目錄，而不是本地的目錄名稱。按下F12，預覽一下我們剛做的網(wǎng)頁吧！（圖9）圖9三個框架都引入文件后的效果（點擊瀏覽）看來框架的使用也并不難！ （4）框架間的鏈接現(xiàn)在我們想實現(xiàn)這樣一個目標，點擊左側(cè)框架中的主題，對應的文章便會呈現(xiàn)在右側(cè)的頁框架中。下面來看看如何來完成這樣的鏈接。選中左側(cè)的第一個條目“集郵

8、天地”，調(diào)出屬性面板，在Link框中選擇相應的文件，這里我們選擇001.htm，再單擊“target”列表框，從中選擇要顯示此內(nèi)容的框架名，這里選擇“myframe_main”，表示鏈接在框架myframe_main中打開（圖1）。 圖1選擇打開文件的目標框架接下來我們選擇“文學天地”，鏈接到002.htm文件， “target”還是設為“myframe_main”（圖2）。 圖2框架間的鏈接其余的鏈接也這樣建立，這里就不再細說。 進入瀏覽器，單擊左側(cè)條目，右側(cè)框架就顯示出頁面的內(nèi)容（圖3）。 圖3框架間加入鏈接后的效果（5）設置主框架標題主框架文件（也就是最外面的框架）是所以框架文件的載體，

9、通常是首頁或特定主題的進入點，因而有必要設置網(wǎng)頁的標題。 當光標在框架內(nèi)時，按下Ctrl+J調(diào)出的“Page Properties”對話框只能設置對應框架內(nèi)源文件的頁面屬性。要想設置主框架文件（myframe.htm）的屬性，可以將鼠標移動到最外層框架（在本例中為上下結(jié)構的框架）的框線上，當鼠標指針變?yōu)殡p向箭頭時單擊鼠標左鍵，使可選定整體框架（圖1）。圖1選中框架的方法再次調(diào)出“Page Properties”對話框，就可以設置主框架文件的屬性了（圖2）。圖2設置主框架標題我們將Title設為“笨象的家”，對框架集而言，背景圖或背景顏色的設定是沒有任何意義的（圖3）。 圖3設置過標題的框架網(wǎng)頁（點擊瀏覽）單擊“OK”，主框架標題設置完了。看看效果吧?。?）去掉框架的分隔線有些網(wǎng)站是用框架來設計的，但表面卻看不出來，這是因為看不到頁框間分隔線和頁框滾動條。下面我們就看一下如何設計這樣的框架。 先選取整個框架集，在屬性面板上，從Borders下拉