dreamweaver制作框架

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

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

2、是關(guān)于某個(gè)電子商務(wù)網(wǎng)站的“客戶中心”服務(wù)頁(yè)面。該網(wǎng)頁(yè)由3個(gè)框架組成，每個(gè)框架單獨(dú)顯示一張網(wǎng)頁(yè)。頂部框架用于顯示橫幅廣告，對(duì)應(yīng)于網(wǎng)頁(yè)top.html；左側(cè)框架放置客戶中心的一些服務(wù)列表，用于頁(yè)面導(dǎo)航，對(duì)應(yīng)于頁(yè)面left.html；右側(cè)窗口用于顯示具體某項(xiàng)客戶中心服務(wù)的信息，對(duì)應(yīng)于頁(yè)面right.html。為了瀏覽方便，當(dāng)瀏覽者單擊左側(cè)客戶中心服務(wù)列表的超鏈接時(shí)，右側(cè)窗口顯示相應(yīng)的客戶中心服務(wù)信息。圖1網(wǎng)頁(yè)中的多個(gè)框架二、制作框架網(wǎng)頁(yè)DreamweaverCS3提供了多種創(chuàng)建框架的方法，用戶可以使用DreamweaverCS3提供的預(yù)置框架集，也可以自己通過(guò)手寫(xiě)H

3、TML代碼任意地建立框架集。使用DreamweaverCS3如何實(shí)現(xiàn)如圖1所示的結(jié)構(gòu)清晰、風(fēng)格統(tǒng)一的框架集頁(yè)面？下面我們就使用DreamweaverCS3預(yù)置的框架集通過(guò)操作來(lái)實(shí)現(xiàn)如圖5.22所示的框架集頁(yè)面。制作過(guò)程如下。1.新建框架網(wǎng)頁(yè)要新建框架網(wǎng)頁(yè)，請(qǐng)事先規(guī)劃好網(wǎng)頁(yè)的設(shè)計(jì)布局，然后執(zhí)行如下步驟。WANGYEXX.COM(1)選擇“文件”一“新建”命令。(2)在“新建文檔”對(duì)話框中，選擇“框架集”類別。(3)從“框架集”列表中選擇一個(gè)合適的框架集，如圖2所示。圖2選擇符合自己要求的框架集(4)單擊“創(chuàng)建”按鈕，結(jié)果如圖3所示。2.設(shè)置框架集屬性要設(shè)置框架集

4、的屬性，請(qǐng)執(zhí)行如下步驟。(1)選中框架集：將鼠標(biāo)指針移至某個(gè)框架的邊框線上，然后單擊，這時(shí)將選中整個(gè)框架集，如圖3所示。(2)設(shè)置框架集的邊框?qū)挾龋和ㄟ^(guò)“框架集”屬性檢查器，可修改邊框設(shè)置為“是”，邊框?qū)挾仍O(shè)置為“1”，這里我們不設(shè)邊框。圖3框架集要調(diào)整某個(gè)框架的寬度或高度，請(qǐng)將鼠標(biāo)移至框架的邊框線上，左右或上下拖動(dòng)。3.添加每個(gè)框架的內(nèi)容如果事先沒(méi)有準(zhǔn)備每個(gè)框架的網(wǎng)頁(yè)內(nèi)容，現(xiàn)在可以直接在這些空白的框架中插入內(nèi)容，然后在保存的時(shí)候，將提示逐個(gè)保存每個(gè)框架的網(wǎng)頁(yè)。如果事先準(zhǔn)備好了每個(gè)框架的網(wǎng)頁(yè)內(nèi)容，現(xiàn)在可以設(shè)置每個(gè)框架所關(guān)聯(lián)的網(wǎng)頁(yè)。由于我們事先已準(zhǔn)備好了網(wǎng)頁(yè)to

5、p.html、left.html和right.html。下面我們就為每個(gè)框架設(shè)置對(duì)應(yīng)的網(wǎng)頁(yè)文件。(1)選擇“窗口”一“框架”命令，打開(kāi)“框架”面板，展現(xiàn)框架的縮略圖，如圖4所示。圖4框架面板(2)單擊“框架”面板中的每個(gè)框架，“屬性”檢查器中出現(xiàn)相應(yīng)框架的屬性，如圖5所示。單擊“源文件”旁邊的文件夾圖標(biāo)，選擇該框架對(duì)應(yīng)的網(wǎng)頁(yè)。圖5設(shè)置框架對(duì)應(yīng)的網(wǎng)頁(yè)文件(3)按照同樣的方法設(shè)置其他框架所對(duì)應(yīng)的網(wǎng)頁(yè)。(4)每個(gè)框架Dreamweaver都有個(gè)默認(rèn)的名稱，如頂部框架默認(rèn)為topFrame，左側(cè)框架默認(rèn)為leftFrame，右側(cè)框架默認(rèn)為mainFrame．如圖5所示

6、。您也可以單擊“框架名稱”文本框，修改其名稱，本例暫不修改。(5)框架內(nèi)容添加后的效果如圖6所示。4.設(shè)置超鏈接左側(cè)窗口內(nèi)容為“客戶中心”服務(wù)項(xiàng)目，現(xiàn)在希望當(dāng)用戶單擊這些服務(wù)項(xiàng)目超鏈接時(shí)，鏈接的網(wǎng)頁(yè)將會(huì)在右側(cè)主窗口中打開(kāi)，右側(cè)窗口的名稱是“mainFrame”。左側(cè)窗口中的“客戶中心”服務(wù)項(xiàng)目及其對(duì)應(yīng)超鏈接如圖1所示。要達(dá)到上述效果，請(qǐng)執(zhí)行如下步驟。(1)選中要設(shè)置超鏈接的圖片或文本，如“注冊(cè)&認(rèn)證”。(2)選擇“窗口”一“屬性”命令，打開(kāi)“屬性”面板，如圖6所示。圖6超鏈接屬性面板(3)單擊“鏈接文件”圖標(biāo)，選擇鏈接文件，如“right.html”。(4)單

7、擊“目標(biāo)”下拉列表框，選擇超鏈接在哪個(gè)框架中打開(kāi)，這里為了在右側(cè)框架打開(kāi)，所以選擇“mainFrame”。(5)同理，設(shè)置另外兩個(gè)超鏈接。5.預(yù)覽網(wǎng)頁(yè)要預(yù)覽網(wǎng)頁(yè)，請(qǐng)按快捷鍵F12或單擊工具欄中的“預(yù)覽”圖標(biāo)，將會(huì)看到網(wǎng)頁(yè)的顯示效果。單擊左側(cè)窗口中的“客戶中心”服務(wù)項(xiàng)目，鏈接內(nèi)容將在右側(cè)窗口顯示。本節(jié)作業(yè)：使用Dreamweaver制作如圖1所示的頁(yè)面效果。注意事項(xiàng)：1.根據(jù)教程和圖示完成作業(yè)。2.在DreamweaverCS3中點(diǎn)擊框架即會(huì)切換到選定頁(yè)面，隨時(shí)注意自己在修改的是哪一個(gè)頁(yè)面。網(wǎng)頁(yè)學(xué)習(xí)網(wǎng)提示：光看教程是無(wú)法讓你掌握HTML知識(shí)，最好是完成作業(yè)后才進(jìn)

8、入下一次教程，動(dòng)起手來(lái)吧！