第章使用框架ppt課件

1、第第12章章 使用框架使用框架 框架用來拆分瀏覽器窗口，在不同的區(qū)域顯示不同的網(wǎng)頁。框架的使用讓網(wǎng)頁的組織變得更加有序。 框架可以更好地組織結(jié)構(gòu)比較復(fù)雜的網(wǎng)站頁面。一般可以將導(dǎo)航頁面放置在某個框架之中，單擊其中的某個鏈接，鏈接的網(wǎng)頁將出現(xiàn)在另外的框架中，而導(dǎo)航頁面本身不發(fā)生變化。12.1 創(chuàng)建框架的步驟 創(chuàng)建框架和創(chuàng)建普通網(wǎng)頁有所區(qū)別，其具體的創(chuàng)建順序如下： 創(chuàng)建框架結(jié)構(gòu)：首先需要創(chuàng)建一個新網(wǎng)頁，該網(wǎng)頁將作為控制框架結(jié)構(gòu)的頁面，然后在Dreamweaver中將對該網(wǎng)頁進行拆分，從而獲得自己需要的框架結(jié)構(gòu) 設(shè)置框架集和框架的屬性：接著給每個框架指定或新建一個顯示具體內(nèi)容的頁面 創(chuàng)建鏈接：然后給每

2、個框架命名，通過“屬性面板給文本和圖像指定鏈接 保存框架網(wǎng)頁：最后將所有的框架網(wǎng)頁文件保存起來12.2 創(chuàng)建框架 創(chuàng)建框架結(jié)構(gòu)在Dreamweaver窗口中新建一個文件，然后在該文件中創(chuàng)建框架結(jié)構(gòu)。創(chuàng)建框架結(jié)構(gòu)的兩種方法：使用預(yù)設(shè)方式創(chuàng)建框架結(jié)構(gòu)自定義框架結(jié)構(gòu)12.2.1 創(chuàng)建框架結(jié)構(gòu)使用預(yù)設(shè)方式 2、選擇“左側(cè)和嵌套的頂部框架命令，翻開“框架標簽輔助功能屬性對話框，在其中為每個框架設(shè)定一個標題1、將“插入工具欄，切換到“規(guī)劃插入工具欄，在其中單擊“框架按鈕旁的下拉按鈕，此時將展開一個框架下拉列表3、如果要調(diào)整框架的寬度或高度，可直接用鼠標拖動框架的邊框12.2.1 創(chuàng)建框架結(jié)構(gòu)-自定義框架結(jié)

3、構(gòu) 操作步驟： 將鼠標置于網(wǎng)頁編輯窗口邊緣，當出現(xiàn)雙向箭頭時將框架邊框拖動到適當?shù)奈恢茫蚣芙Y(jié)構(gòu)就創(chuàng)建出來了 將光標放在右側(cè)框架網(wǎng)頁中，然后在“規(guī)劃插入工具欄上展開“框架下拉列表，在其中選擇“頂部框架命令，此時將在右側(cè)的框架中插入一個嵌套的子框架12.2.1 刪除框架 如果要刪除框架，只要將光標放置于要刪除的框架的邊框之上，然后拖動框架邊框到父邊框或是網(wǎng)頁編輯窗口邊緣，即可刪除該框架結(jié)構(gòu)12.2.2 設(shè)置框架集的屬性 設(shè)置框架集的屬性需要在“屬性面板中完成 各參數(shù)含義： 邊框：用來設(shè)定框架是否有邊框 邊框?qū)挾龋河脕碓O(shè)定框架結(jié)構(gòu)中邊框的寬度，單位是像素 邊框顏色：用來設(shè)定邊框的顏色12.2.2

4、設(shè)置框架集的屬性 操作步驟： 選擇菜單命令“窗口”“框架”，翻開“框架面板 單擊其中框架最外側(cè)的邊框，此時在“屬性面板中修改最高一層的框架集屬性：邊框為“否”，“邊框?qū)挾葹?，左側(cè)的矩形狀將“值改為170像素，而右側(cè)的矩形狀，將值改為“1相對 在“框架面板上單擊垂直方向的邊框，選中第2級框架集，在“屬性面板上設(shè)定“邊框為“否”，“邊框?qū)挾葹?，兩行高度的頂部高度設(shè)為30像素，底部框架的“單位設(shè)為“相對”，“值設(shè)為112.2.3 設(shè)置框架的屬性 在“框架面板上單擊左側(cè)框架，選中該框架 將左側(cè)的框架重命名為leftFrame，指定“源文件為navigator.html 用同樣的方法指定頂部框架名稱

5、為topFrame，指定“源文件為FrameTop.htm 再指定右側(cè)下部框架名為rightFrame，“源文件為desktop.htm12.2.4 設(shè)置無框架內(nèi)容 有些瀏覽器并不支持框架，對于這樣的瀏覽器應(yīng)該給一些提示信息，讓這部分瀏覽者也能夠 了解框架網(wǎng)頁的大致內(nèi)容。通過設(shè)置無框架內(nèi)容可解決此問題。 操作步驟： 在框架網(wǎng)頁的編輯窗口下，選擇菜單命令“修改”“框架頁”“編輯無框架內(nèi)容”，此時網(wǎng)頁框架消失，同時出現(xiàn)完整的編輯窗口，窗口上方標注“無框架內(nèi)容” 此時就可以和編輯普通網(wǎng)頁一樣，在其中添加或編輯無框架時顯示的內(nèi)容。一般都是一些提示性的信息，讓瀏覽者知道自己的瀏覽器不支持框架即可 完成無框架內(nèi)容編輯后，再次選擇菜單命令“修改”“框架頁”“編輯無框架內(nèi)容就可退出編輯無框架內(nèi)容狀態(tài)12.2.5 框架內(nèi)的鏈接 此時每個框架網(wǎng)頁都是一個單獨的網(wǎng)頁，在對框架網(wǎng)頁進行編輯時，只需將光標放在框架中的頁面內(nèi)，就可以和編輯普通頁面一樣對框架網(wǎng)頁進行編輯。 這里我們在左側(cè)的頁面中給“文本“基本情況添加鏈接，當單擊該鏈接后，將在右側(cè)的框架中顯示update.html。12.2.5 框架內(nèi)的鏈接 操作步驟 選中文字“基本情況”，在“屬性面板上“鏈接文本框中指定要鏈接的網(wǎng)頁update.html 翻開“目的下拉列