dreamweaver制作框架

《dreamweaver制作框架》由會員上傳分享，免費在線閱讀，更多相關內(nèi)容在行業(yè)資料-天天文庫。

1、Dreamweaver制作框架框架是將瀏覽器窗口劃分成幾個部分，將一些不需要更新的元素放在一個框架內(nèi)作為單獨的網(wǎng)頁文檔，這個文檔是不變的，其他經(jīng)常更新的內(nèi)容放在主框架內(nèi)?？蚣芡ǔＪ怯煽蚣芗涂蚣軆刹糠纸M成，框架集實際上是一個頁面，這個頁面里包含了好多框架窗口，每個框架窗口可以單獨顯示一個HTML文檔，這些HTML文檔之間可以通過超鏈接聯(lián)系起來，下面我們就使用DreamweaverCS3快速地創(chuàng)建框架。一、框架網(wǎng)頁框架將一個瀏覽器窗口分為多個獨立的區(qū)域，每個區(qū)域（框架）顯示一個單獨的可滾動頁面，每個框架都是瀏覽器窗口內(nèi)的一個獨

2、立窗口。典型的框架網(wǎng)頁如圖1所示，這是關于某個電子商務網(wǎng)站的“客戶中心”服務頁面。該網(wǎng)頁由3個框架組成，每個框架單獨顯示一張網(wǎng)頁。頂部框架用于顯示橫幅廣告，對應于網(wǎng)頁top.html；左側(cè)框架放置客戶中心的一些服務列表，用于頁面導航，對應于頁面left.html；右側(cè)窗口用于顯示具體某項客戶中心服務的信息，對應于頁面right.html。為了瀏覽方便，當瀏覽者單擊左側(cè)客戶中心服務列表的超鏈接時，右側(cè)窗口顯示相應的客戶中心服務信息。圖1網(wǎng)頁中的多個框架二、制作框架網(wǎng)頁DreamweaverCS3提供了多種創(chuàng)建框架的方法，用戶可

3、以使用DreamweaverCS3提供的預置框架集，也可以自己通過手寫HTML代碼任意地建立框架集。使用DreamweaverCS3如何實現(xiàn)如圖1所示的結(jié)構(gòu)清晰、風格統(tǒng)一的框架集頁面？下面我們就使用DreamweaverCS3預置的框架集通過操作來實現(xiàn)如圖5.22所示的框架集頁面。制作過程如下。1.新建框架網(wǎng)頁要新建框架網(wǎng)頁，請事先規(guī)劃好網(wǎng)頁的設計布局，然后執(zhí)行如下步驟。WANGYEXX.COM(1)選擇“文件”一“新建”命令。(2)在“新建文檔”對話框中，選擇“框架集”類別。(3)從“框架集”列表中選擇一個合適的框架集，如

4、圖2所示。圖2選擇符合自己要求的框架集(4)單擊“創(chuàng)建”按鈕，結(jié)果如圖3所示。2.設置框架集屬性要設置框架集的屬性，請執(zhí)行如下步驟。(1)選中框架集：將鼠標指針移至某個框架的邊框線上，然后單擊，這時將選中整個框架集，如圖3所示。(2)設置框架集的邊框?qū)挾龋和ㄟ^“框架集”屬性檢查器，可修改邊框設置為“是”，邊框?qū)挾仍O置為“1”，這里我們不設邊框。圖3框架集要調(diào)整某個框架的寬度或高度，請將鼠標移至框架的邊框線上，左右或上下拖動。3.添加每個框架的內(nèi)容如果事先沒有準備每個框架的網(wǎng)頁內(nèi)容，現(xiàn)在可以直接在這些空白的框架中插入內(nèi)容，然后

5、在保存的時候，將提示逐個保存每個框架的網(wǎng)頁。如果事先準備好了每個框架的網(wǎng)頁內(nèi)容，現(xiàn)在可以設置每個框架所關聯(lián)的網(wǎng)頁。由于我們事先已準備好了網(wǎng)頁top.html、left.html和right.html。下面我們就為每個框架設置對應的網(wǎng)頁文件。(1)選擇“窗口”一“框架”命令，打開“框架”面板，展現(xiàn)框架的縮略圖，如圖4所示。圖4框架面板(2)單擊“框架”面板中的每個框架，“屬性”檢查器中出現(xiàn)相應框架的屬性，如圖5所示。單擊“源文件”旁邊的文件夾圖標，選擇該框架對應的網(wǎng)頁。圖5設置框架對應的網(wǎng)頁文件(3)按照同樣的方法設置其他框架

6、所對應的網(wǎng)頁。(4)每個框架Dreamweaver都有個默認的名稱，如頂部框架默認為topFrame，左側(cè)框架默認為leftFrame，右側(cè)框架默認為mainFrame．如圖5所示。您也可以單擊“框架名稱”文本框，修改其名稱，本例暫不修改。(5)框架內(nèi)容添加后的效果如圖6所示。4.設置超鏈接左側(cè)窗口內(nèi)容為“客戶中心”服務項目，現(xiàn)在希望當用戶單擊這些服務項目超鏈接時，鏈接的網(wǎng)頁將會在右側(cè)主窗口中打開，右側(cè)窗口的名稱是“mainFrame”。左側(cè)窗口中的“客戶中心”服務項目及其對應超鏈接如圖1所示。要達到上述效果，請執(zhí)行如下步驟

7、。(1)選中要設置超鏈接的圖片或文本，如“注冊&認證”。(2)選擇“窗口”一“屬性”命令，打開“屬性”面板，如圖6所示。圖6超鏈接屬性面板(3)單擊“鏈接文件”圖標，選擇鏈接文件，如“right.html”。(4)單擊“目標”下拉列表框，選擇超鏈接在哪個框架中打開，這里為了在右側(cè)框架打開，所以選擇“mainFrame”。(5)同理，設置另外兩個超鏈接。5.預覽網(wǎng)頁要預覽網(wǎng)頁，請按快捷鍵F12或單擊工具欄中的“預覽”圖標，將會看到網(wǎng)頁的顯示效果。單擊左側(cè)窗口中的“客戶中心”服務項目，鏈接內(nèi)容將在右側(cè)窗口顯示。本節(jié)作業(yè)：使用Dr

8、eamweaver制作如圖1所示的頁面效果。注意事項：1.根據(jù)教程和圖示完成作業(yè)。2.在DreamweaverCS3中點擊框架即會切換到選定頁面，隨時注意自己在修改的是哪一個頁面。網(wǎng)頁學習網(wǎng)提示：光看教程是無法讓你掌握HTML知識，最好是完成作業(yè)后才進入下一次教程，動起手來吧！