用Dreamweaver建立框架頁(yè)面

1、 實(shí)驗(yàn)8 用Dreamweaver建立框架頁(yè)面實(shí)驗(yàn)?zāi)康模和ㄟ^實(shí)驗(yàn)，掌握如何如何創(chuàng)建和應(yīng)用框架頁(yè)面，了解框架的基本分布結(jié)構(gòu)和各個(gè)框架頁(yè)面之間的相互聯(lián)系。實(shí)驗(yàn)步驟：1. 啟動(dòng)Dreamweaver程序，選擇菜單“文件” “新建”命令，打開“新建文檔”對(duì)話框。在對(duì)話框中“常規(guī)”標(biāo)簽下選擇“類別”列表中的“框架集”選項(xiàng)，然后再右邊的“框架集”列表中選擇“上方固定”選項(xiàng)，如圖8-1所示。單擊“創(chuàng)建”按鈕創(chuàng)建框架網(wǎng)頁(yè)。2. 選擇菜單“窗口” “框架”命令，打開框架控制面板。3. 用鼠標(biāo)單擊框架 控制面板中的下部分，選中mainFrame框架。如圖8-2所示： 圖 8-1 套用框架 圖11-2 選擇框架集的

2、子框架4. 將鼠標(biāo)放在選中的邊框上， 使鼠標(biāo)變成雙向箭頭，然后拖動(dòng)鼠標(biāo)將該框架分成左右兩個(gè)子框架。如圖 8-3所示。 圖8-3 把主框架切分為子框架5. 在框架編輯窗口中，單擊頂部框架，選擇菜單 “文件”“保存框架”命令，保存框架為top.htm頁(yè)面。6. 將光標(biāo)停放到下部分框架的左邊框家中，選擇菜單“文件”“保存框架”命令，保存框架為left.htm頁(yè)面。7. 按同樣的方法，將右邊的框架保存為right.htm頁(yè)面。8. 單擊框架面板上最外層的邊框，或單擊頁(yè)面編輯窗口中的最外層邊框，使外框出現(xiàn)虛線。如圖8-4所示：圖 8-4選中整個(gè)框架 說(shuō)明 鼠標(biāo)單擊所選中的框架，頁(yè)面中的框架邊框會(huì)出現(xiàn)虛線

3、，所選中的框架就是當(dāng)前正在編輯的頁(yè)面.9. 選擇菜單“文件”“保存全部”命令，保存所有框架和框架集，框架集文件名稱為index.htm.如圖8-5所示.10. 單擊框架面板上的topFrame框架，選中top.htm網(wǎng)頁(yè).圖 8-5 保存框架集11. 打開屬性面板，在屬性面板上的“滾動(dòng)”下拉菜單中選擇“否”，然后勾選旁邊的“不能調(diào)整大小”復(fù)選框；在“邊界寬度”和“邊界高度”的文本框中都輸入0，參數(shù)設(shè)置如圖8-6所示. 圖 8-6 top框架的屬性設(shè)置說(shuō)明 框架屬性面板上的“滾動(dòng)”下拉菜單中有“是”.“否”.“自動(dòng)”.和“默認(rèn)”四項(xiàng)，其中選擇“是”表示允許頁(yè)面左右.上下出現(xiàn)滾動(dòng)條；選擇“自動(dòng)”.

4、“默認(rèn)”表示根據(jù)網(wǎng)頁(yè)內(nèi)容，需要時(shí)自動(dòng)顯示滾動(dòng)條；選擇“否”表示不允許出現(xiàn)滾動(dòng)條.12. 單擊top框架頁(yè)面，在屬性面板中單擊“頁(yè)面屬性”按鈕 。13. 打開“頁(yè)面屬性”對(duì)話框，在“左邊框.右邊框.上邊框.下邊框”各文本框中輸入0，使網(wǎng)頁(yè)邊距都為0.單擊“確定”返回框架頁(yè)top.htm編輯窗口.14. 單擊“插入”面板上的“表格”按鈕，插入2行4列，寬為100%的表格.15. 打開屬性面板，設(shè)置第2列兩個(gè)表格背景顏色為“淺藍(lán)色”（色標(biāo)值為#E0E4F4），然后選擇第4列單元格，設(shè)置同樣的背景顏色；設(shè)置第3列單元格的背景顏色為“深藍(lán)色”（色標(biāo)值為#3A4593）16. 單擊屬性面板的“拆分單元格為

5、行或列”按鈕，分別在第2行的各個(gè)單元格插入行，把增加行的單元格背景顏色設(shè)置為“深藍(lán)色”（色標(biāo)值為#3A4593）17. 將光標(biāo)停放在第1行中的第2單元格內(nèi)，打開屬性面板，選擇“水平”下拉菜單中的“居中對(duì)齊”命令，選擇“垂直”下拉菜單中“底部”命令，使光標(biāo)移動(dòng)到底部中間的位置；同樣，使第4單元格中的光標(biāo)移動(dòng)到底部中間的位置.18. 單擊插入面板上的“表格”按鈕，在第1行中的第2個(gè)單元格內(nèi)插入1行7列的嵌套表格，然后依次在表格內(nèi)輸入“公司簡(jiǎn)介”.“旅游路線“.”特色產(chǎn)品“.“主題活動(dòng)”.“旅游咨訊”.“論壇聊天”.“聯(lián)系我們”等欄目標(biāo)題.19. 同樣，在第4列第2行的單元格中插入1行2列的嵌套表格

6、，然后在表格中輸入“首頁(yè)”.“站點(diǎn)導(dǎo)航”標(biāo)題.20. 在內(nèi)容輸入完畢后，top 框架上的頁(yè)面制作好了,此頁(yè)就是top.htm,顯示效果如圖8-7所示.圖8-7 top.htm完成頁(yè)面說(shuō)明 有時(shí)候在完成top框架后,框架中底部的內(nèi)容被下部分的框架遮蓋了,這表示top框架內(nèi)容較多或下部的框架位置過高,這時(shí)可以打開框架控制面板,單擊最外層框架邊框或下部框架邊框,然后在屬性面板行或列的文本框中輸入合適的值.21. 在框架面板上單擊左邊leftFrame框架，在屬性面板上“滾動(dòng)”列表中選擇“否”.然后單擊頁(yè)面編輯窗口中的left.htm頁(yè)面，設(shè)置頁(yè)面屬性的“左邊距.右邊距.上邊距.下邊距”各文本框中輸入

7、0，使網(wǎng)頁(yè)邊距都為0，確定頁(yè)面屬性設(shè)置.22. 單擊框架面板上的下部最外層邊框，然后在屬性面板中“列”文本框中輸入600像素.23. 把光標(biāo)放到頁(yè)面中，單擊插入面板上“表格”按鈕，在頁(yè)面中插入1行2列的表格，表格寬度為100%.24. 設(shè)置第2個(gè)單元格背景顏色為“淺藍(lán)色”（色標(biāo)值為#E0E4F4），在“水平”列表中選擇“居中對(duì)齊”選項(xiàng)，在“垂直”列表中選擇“底部”選項(xiàng).如圖8-8所示.圖 8-8 在左邊框的頁(yè)面中插入表格說(shuō)明 如果左邊框的寬度不夠，則可以在邊框的屬性“列”值中進(jìn)行調(diào)試，直到達(dá)到效果為止.25. 在第2個(gè)單元格內(nèi)，單擊插入面板上的“圖像”按鈕，在表格中插入圖像文件“1.jpg”.

8、26. 把光標(biāo)放到第1個(gè)單元格中，在表格中插入4行3列，寬度為106像素，單元格邊距為4的嵌套表格.27. 選中嵌套表格第1列的單元格，單擊屬性面板上的“合并所選單元格”按鈕，合并第1列單元格，設(shè)置背景顏色為“深藍(lán)色”（色標(biāo)值為#3A4593）.29. 在第3列的第2，3，4單元格內(nèi)，分別輸入“衣食住行”.“購(gòu)物娛樂”.“歷史文化”，完成后保存整個(gè)框架.30. 單擊框架面板上右側(cè)的mainFrame框架，然后在屬性面板的“滾動(dòng)”選項(xiàng)中選擇“默認(rèn)”.31. 將光標(biāo)放到right.htm 頁(yè)面中，單擊插入面板上的“表格”按鈕，插入2行1列，寬度為300像素，各邊距都為0的表格.32. 在表格中輸入

9、如圖8-9右邊中的內(nèi)容.圖8-9 框架中的內(nèi)容33. 制作好right.htm 頁(yè)面的內(nèi)容之后，然后選擇菜單“文件”“保存全部”命令，保存所有頁(yè)面，按下F12在瀏覽器中查看網(wǎng)頁(yè)效果.如圖8-9所示.說(shuō)明 框架集制作好了，現(xiàn)在就可以利用框架上的導(dǎo)航制作各個(gè)框架內(nèi)容頁(yè)面的超級(jí)鏈接，這也是制作框架的重要意義.34. 將鼠標(biāo)光標(biāo)放在right.htm 頁(yè)面中，選擇菜單“文件”“框架另存為”命令，把right.htm另存為網(wǎng)頁(yè)right-1.htm.35. 然后將頁(yè)面中的內(nèi)容刪除，添加新的內(nèi)容.如圖8-10所示.圖8-10 在右框架中制作新的頁(yè)面36. 選中左邊框架上的“衣食住行”文字，打開屬性面板，單

10、擊“鏈接”文本框后面按鈕，選擇right-1.htm頁(yè)面，然后在“目標(biāo)”下拉菜單中選擇mainFrame.說(shuō)明 目標(biāo)下拉菜單上的命令，是指鏈接頁(yè)面的顯示方式，其中，_blank表示新的瀏覽器窗口中顯示，_parent表示在當(dāng)前窗口的父框架中打開，_self表示在本框架頁(yè)面中打開，_top表示在整個(gè)瀏覽器窗口中打開（即取消框架顯示），除了這些保留名稱之外，根據(jù)用戶所建立框架的不同，還會(huì)有其他框架名稱.例如，在本示例中，mainFrame表示在框架集的主框架中打開，leftFrame表示在框架集的左邊框架中打開，topFrame 表示在框架集的上部打開.37. 按同樣的方法，選中“購(gòu)物娛樂”鏈接到right-2.htm頁(yè)面，在“目標(biāo)”下拉菜單中選擇mainFrame. 如圖8-11所示.圖8-11在右框架中制作新的頁(yè)面38. 選中框架上部導(dǎo)航條中的“公司簡(jiǎn)介”，鏈接到文件夾中的company.htm頁(yè)面(由自己設(shè)計(jì))，“目標(biāo)”下拉菜單中選擇_blank，使之重新打開一個(gè)頁(yè)面.39. 按同樣的方法設(shè)置其他導(dǎo)航鏈接，選擇對(duì)應(yīng)的頁(yè)面，顯示方式