網(wǎng)頁設(shè)計(jì) (9)

1、 . 任務(wù)任務(wù)2 使用浮動框架制作網(wǎng)頁使用浮動框架制作網(wǎng)頁任務(wù)任務(wù)1 使用框架布局制作網(wǎng)頁使用框架布局制作網(wǎng)頁項(xiàng)目項(xiàng)目1了解網(wǎng)站的概念了解網(wǎng)站的概念 技能鞏固技能鞏固項(xiàng)目總結(jié)項(xiàng)目總結(jié) 幾乎所有網(wǎng)站都會有至少一個(gè)后臺管理系統(tǒng)來對網(wǎng)站進(jìn)行維護(hù)和更新。圖9-1所示是假設(shè)的“每味美味”網(wǎng)站的后管理系統(tǒng)。使用該系統(tǒng)可以對網(wǎng)站信息進(jìn)行增、刪、改等編輯操作。 該系統(tǒng)使用框架布局來設(shè)計(jì)制作網(wǎng)頁。頁面中有三個(gè)網(wǎng)頁組成，這三個(gè)網(wǎng)頁被安放在三個(gè)框架中，而這三個(gè)框架又被集中到一個(gè)框架集中。 左側(cè)框架中顯示的是后臺系統(tǒng)中的主菜單，單擊其中的菜單項(xiàng)，就會在右側(cè)較大的框架（即主編輯區(qū)）中顯示相關(guān)內(nèi)容，供管理員編輯處理。 任

2、務(wù)任務(wù)1 使用框架布局制作網(wǎng)頁使用框架布局制作網(wǎng)頁圖圖9-1 用框架布局的網(wǎng)頁用框架布局的網(wǎng)頁一框架的概念及應(yīng)用一框架的概念及應(yīng)用 框架就是把一個(gè)瀏覽器窗口分成若干個(gè)子窗口，每框架就是把一個(gè)瀏覽器窗口分成若干個(gè)子窗口，每個(gè)子窗口中顯示不同的網(wǎng)頁文件，這種子窗口稱為框架個(gè)子窗口中顯示不同的網(wǎng)頁文件，這種子窗口稱為框架（Frame）。每個(gè)框架都是瀏覽器窗口中的一個(gè)獨(dú)立區(qū)）。每個(gè)框架都是瀏覽器窗口中的一個(gè)獨(dú)立區(qū)域，在這個(gè)區(qū)域中可以顯示一個(gè)單獨(dú)的網(wǎng)頁而不影響其域，在這個(gè)區(qū)域中可以顯示一個(gè)單獨(dú)的網(wǎng)頁而不影響其他區(qū)域中的顯示內(nèi)容。多個(gè)框架同時(shí)顯示在一個(gè)瀏覽窗他區(qū)域中的顯示內(nèi)容。多個(gè)框架同時(shí)顯示在一個(gè)瀏覽窗

3、口中口中,就組成了框架集就組成了框架集(Frameset)。任務(wù)任務(wù)1 使用框架布局制作網(wǎng)頁使用框架布局制作網(wǎng)頁二框架的創(chuàng)建與刪除二框架的創(chuàng)建與刪除創(chuàng)建框架網(wǎng)頁可以有以下方法： 1使用“文件”菜單創(chuàng)建 單擊單擊“文件文件”菜單菜單“新建新建”，打開，打開“新建文檔新建文檔”對話框，選擇對話框，選擇“示例示例中的頁中的頁”“框架集框架集”，再選擇一個(gè)框架結(jié)構(gòu)。如圖，再選擇一個(gè)框架結(jié)構(gòu)。如圖9-2所示。所示。再單擊再單擊“創(chuàng)建創(chuàng)建”按鈕。新創(chuàng)建的框架網(wǎng)頁中會彈出按鈕。新創(chuàng)建的框架網(wǎng)頁中會彈出“框架標(biāo)簽輔助功能屬性框架標(biāo)簽輔助功能屬性”對話框，如圖對話框，如圖9-3所示。所示。 要求為每個(gè)框架指定一

4、個(gè)可供識別的標(biāo)簽（即框架的名稱）。要求為每個(gè)框架指定一個(gè)可供識別的標(biāo)簽（即框架的名稱）?？梢允褂媚J(rèn)的標(biāo)簽，也可以自行定義一組便于記憶的標(biāo)簽?？梢允褂媚J(rèn)的標(biāo)簽，也可以自行定義一組便于記憶的標(biāo)簽。任務(wù)任務(wù)1 使用框架布局制作網(wǎng)頁使用框架布局制作網(wǎng)頁二框架的創(chuàng)建與刪除二框架的創(chuàng)建與刪除 圖圖9-2 “新建文檔新建文檔”對話框?qū)υ捒?圖圖9-3 “框架標(biāo)簽輔助功能屬性框架標(biāo)簽輔助功能屬性”對話框?qū)υ捒?任務(wù)任務(wù)1 使用框架布局制作網(wǎng)頁使用框架布局制作網(wǎng)頁首先創(chuàng)建并打開一個(gè)空白網(wǎng)頁文件，將光標(biāo)定位首先創(chuàng)建并打開一個(gè)空白網(wǎng)頁文件，將光標(biāo)定位到網(wǎng)頁左上角。然后單擊到網(wǎng)頁左上角。然后單擊“布局布局”工具中

5、的工具中的“框架框架”按鈕，在下拉菜單中選擇要?jiǎng)?chuàng)建的框架類型，按鈕，在下拉菜單中選擇要?jiǎng)?chuàng)建的框架類型，如圖如圖9-4所示。所示。 2使用“布局”工具欄創(chuàng)建二框架的創(chuàng)建與刪除二框架的創(chuàng)建與刪除圖圖9-4 在在“框架框架”下拉菜單選擇框架類型下拉菜單選擇框架類型 任務(wù)任務(wù)1 使用框架布局制作網(wǎng)頁使用框架布局制作網(wǎng)頁 選擇一種類型后，會彈出選擇一種類型后，會彈出“框架標(biāo)簽輔助功能屬性框架標(biāo)簽輔助功能屬性”對話框，為框架對話框，為框架集中的每個(gè)框架指定相應(yīng)的標(biāo)簽后單擊集中的每個(gè)框架指定相應(yīng)的標(biāo)簽后單擊“確定確定”按鈕，編輯窗口中顯示該按鈕，編輯窗口中顯示該框架布局頁面。如圖框架布局頁面。如圖9-5所示

6、。所示。 要生成更復(fù)雜的框架樣式，可以在已生成的框架集中單擊某個(gè)框架，要生成更復(fù)雜的框架樣式，可以在已生成的框架集中單擊某個(gè)框架，使用使用“布局布局”面板上的面板上的“框架框架”按鈕，選擇需要的類型，即可在光標(biāo)處按鈕，選擇需要的類型，即可在光標(biāo)處插入新框架，實(shí)現(xiàn)框架的嵌套。插入新框架，實(shí)現(xiàn)框架的嵌套。 要?jiǎng)h除框架，用鼠標(biāo)選中，變成雙向箭頭時(shí)，拖到網(wǎng)頁編輯窗口邊要?jiǎng)h除框架，用鼠標(biāo)選中，變成雙向箭頭時(shí)，拖到網(wǎng)頁編輯窗口邊緣以外即可，如圖緣以外即可，如圖9-6中圓圈部分所示。中圓圈部分所示。二二框架的創(chuàng)建與刪除框架的創(chuàng)建與刪除任務(wù)任務(wù)1 使用框架布局制作網(wǎng)頁使用框架布局制作網(wǎng)頁二二框架的創(chuàng)建與刪除框

7、架的創(chuàng)建與刪除圖圖9-5 新建的新建的“框架框架”網(wǎng)頁網(wǎng)頁 圖圖9-6 刪除框架集中的框架刪除框架集中的框架 任務(wù)任務(wù)1 使用框架布局制作網(wǎng)頁使用框架布局制作網(wǎng)頁1按住按住Alt鍵的同時(shí)，用鼠標(biāo)單擊某框架的內(nèi)部，可激活此框架鍵的同時(shí)，用鼠標(biāo)單擊某框架的內(nèi)部，可激活此框架。2在在“框架框架”面板上單擊所要選擇的框架，以激活。面板上單擊所要選擇的框架，以激活?！翱蚣芸蚣堋泵姘宓拇蜷_可通過單擊面板的打開可通過單擊“窗口窗口”菜單菜單“框架框架”可來實(shí)現(xiàn)。可來實(shí)現(xiàn)。“框架框架”面板如圖面板如圖9-7所示。框架被激活后就可以在下方的所示?？蚣鼙患せ詈缶涂梢栽谙路降摹皩傩詫傩浴泵婷姘暹M(jìn)行相關(guān)屬性的設(shè)置，如

8、圖板進(jìn)行相關(guān)屬性的設(shè)置，如圖9-8所示所示 。三框架的激活及屬性設(shè)置三框架的激活及屬性設(shè)置如果要修改框架的屬性，需要先激活該框架，然后再通過如果要修改框架的屬性，需要先激活該框架，然后再通過“屬性屬性”面板面板設(shè)置新的屬性值。激活框架的方法主要有：設(shè)置新的屬性值。激活框架的方法主要有： 任務(wù)任務(wù)1 使用框架布局制作網(wǎng)頁使用框架布局制作網(wǎng)頁三框架的激活及屬性設(shè)置三框架的激活及屬性設(shè)置圖圖9-7 “框架框架”面板面板 圖圖9-8 通過通過“屬性屬性”面板設(shè)置框架的屬性面板設(shè)置框架的屬性 框架的屬性主要有：框架的名稱、是否顯示邊框、邊框的寬度、邊框的框架的屬性主要有：框架的名稱、是否顯示邊框、邊框的

9、寬度、邊框的顏色、滾動條的顯示方式、是否能在瀏覽器窗口中調(diào)整大小以及在此框架中顏色、滾動條的顯示方式、是否能在瀏覽器窗口中調(diào)整大小以及在此框架中顯示的網(wǎng)頁文件。顯示的網(wǎng)頁文件。 框架行高（列寬）的值可以是具體的框架行高（列寬）的值可以是具體的“像素像素”值，也可以是占整個(gè)框架的值，也可以是占整個(gè)框架的百分比。還有一種是百分比。還有一種是“相對相對”值，即根據(jù)其他框架所占的行高（列寬），值，即根據(jù)其他框架所占的行高（列寬），自動調(diào)整當(dāng)前框架的行高（列寬）。自動調(diào)整當(dāng)前框架的行高（列寬）。任務(wù)任務(wù)1 使用框架布局制作網(wǎng)頁使用框架布局制作網(wǎng)頁1點(diǎn)擊框架集的外邊緣，如圖點(diǎn)擊框架集的外邊緣，如圖9-9圓

10、圈部分所示。圓圈部分所示。 2在框架面板中點(diǎn)擊相應(yīng)的框架。在框架面板中點(diǎn)擊相應(yīng)的框架。3在激活框架的情況下，單擊在激活框架的情況下，單擊“標(biāo)簽選擇器標(biāo)簽選擇器”中相應(yīng)的中相應(yīng)的標(biāo)簽。標(biāo)簽。選中框架集后，選中框架集后，“屬性屬性”面板中顯示框架集的屬性值。如圖面板中顯示框架集的屬性值。如圖9-10所示。所示。四框架集屬性的設(shè)置四框架集屬性的設(shè)置 給框架集設(shè)置屬性前應(yīng)先選中它。選中框架集的方法主要有： 任務(wù)任務(wù)1 使用框架布局制作網(wǎng)頁使用框架布局制作網(wǎng)頁四框架集屬性的設(shè)置四框架集屬性的設(shè)置圖圖9-9 單擊框架集外邊緣單擊框架集外邊緣 圖圖9-10 通過通過“屬性屬性”面板設(shè)置框架集的屬性面板設(shè)置框

11、架集的屬性 框架集的屬性主要有：是否顯示邊框、邊框?qū)挾取⑦吙蝾伾蚣芗膶傩灾饕校菏欠耧@示邊框、邊框?qū)挾?、邊框顏色以及各框架的行高、列寬值。以及各框架的行高、列寬值。任?wù)任務(wù)1 使用框架布局制作網(wǎng)頁使用框架布局制作網(wǎng)頁四框架集屬性的設(shè)置四框架集屬性的設(shè)置 在使用框架布局網(wǎng)頁前，一般是先將各框架中需要顯示的網(wǎng)頁制作好，再通過“屬性”面板的“源文件”框設(shè)置各框架相應(yīng)的網(wǎng)頁文件。本教材“項(xiàng)目素材”文件夾中已經(jīng)前先制作了部分網(wǎng)頁文件。實(shí)施任務(wù)前先將這些文件復(fù)制到站點(diǎn)文件中的相應(yīng)位置。1.在在Windows環(huán)境下，使用環(huán)境下，使用“我的電腦我的電腦”，將本教材，將本教材“項(xiàng)目素材項(xiàng)目素材”文件夾文件夾

12、中中“project09/task01”中的中的oa文件夾復(fù)制到站點(diǎn)文件夾文件夾復(fù)制到站點(diǎn)文件夾mwmw中；中；將將“project09/task01/SpryAssets”中的兩個(gè)文件復(fù)制到中的兩個(gè)文件復(fù)制到mwmw中的中的SpryAssets文件夾中。文件夾中。 2運(yùn)行運(yùn)行Dreamweaver CS3，打開站點(diǎn)，打開站點(diǎn)example。任務(wù)任務(wù)1 使用框架布局制作網(wǎng)頁使用框架布局制作網(wǎng)頁一新建框架網(wǎng)頁一新建框架網(wǎng)頁1在在“文件文件”面板中展開站點(diǎn)文件夾，右擊其中的子文件夾面板中展開站點(diǎn)文件夾，右擊其中的子文件夾oa，在快捷菜單中選擇在快捷菜單中選擇“新建文件新建文件”，輸入網(wǎng)頁文件名為，

13、輸入網(wǎng)頁文件名為“editor.html”。 2單擊單擊“布局布局”工具欄中的工具欄中的“框架框架”按鈕，在下拉菜單中選擇按鈕，在下拉菜單中選擇“頂部頂部和嵌套的左側(cè)框架和嵌套的左側(cè)框架”，彈出，彈出“框架標(biāo)簽輔助功能屬性框架標(biāo)簽輔助功能屬性”對話框，使用對話框，使用系統(tǒng)默認(rèn)值，單擊系統(tǒng)默認(rèn)值，單擊“確定確定”按鈕。按鈕。 此時(shí)網(wǎng)頁中建立了三個(gè)框架，頂部框架為此時(shí)網(wǎng)頁中建立了三個(gè)框架，頂部框架為“topFrame”、左、左側(cè)框架為側(cè)框架為“l(fā)eftFrame”、右側(cè)框架為、右側(cè)框架為“mainFrame”。任務(wù)任務(wù)1 使用框架布局制作網(wǎng)頁使用框架布局制作網(wǎng)頁一新建框架網(wǎng)頁一新建框架網(wǎng)頁3單擊單

14、擊“窗口窗口”菜單菜單“框架框架”，打開，打開“框架框架”面板。面板。 4在在“框架框架”面板中點(diǎn)擊框架集上方的外邊緣，激活框架集，面板中點(diǎn)擊框架集上方的外邊緣，激活框架集，在屬性面板中設(shè)置在屬性面板中設(shè)置“行行”值為值為“80像素像素”。5在在“框架框架”面板中點(diǎn)擊下方框架集（即面板中點(diǎn)擊下方框架集（即leftFrame和和mainFrame所在的框架集）的邊緣，激活框架集，所在的框架集）的邊緣，激活框架集，在屬性面板中設(shè)置在屬性面板中設(shè)置“列列”值為值為“200像素像素”。 任務(wù)任務(wù)1 使用框架布局制作網(wǎng)頁使用框架布局制作網(wǎng)頁一新建框架網(wǎng)頁一新建框架網(wǎng)頁6按下按下Alt鍵的同時(shí)，用鼠標(biāo)單擊

15、鍵的同時(shí)，用鼠標(biāo)單擊leftFrame框架的內(nèi)部，框架的內(nèi)部，激活它。在激活它。在“屬性屬性”面板中設(shè)置其面板中設(shè)置其“滾動滾動”為為“自動自動”。 7同樣的方法設(shè)置同樣的方法設(shè)置mainFrame框架的框架的“滾動滾動”屬性為屬性為“自動自動”。 任務(wù)任務(wù)1 使用框架布局制作網(wǎng)頁使用框架布局制作網(wǎng)頁1按下按下Alt鍵的同時(shí)，用鼠標(biāo)單擊鍵的同時(shí)，用鼠標(biāo)單擊topFrame框架的內(nèi)部，激活它。在框架的內(nèi)部，激活它。在“屬屬性性”面板中設(shè)置其面板中設(shè)置其“源文件源文件”為為“editor_top.html”。 2同樣的方法設(shè)置同樣的方法設(shè)置leftFrame框架的框架的“源文件源文件”屬性為屬性為

16、“l(fā)eftmenu.html”、mainFrame框架的框架的“源文件源文件”屬性為屬性為“welcome.html”。結(jié)果如圖。結(jié)果如圖9-11所示。所示。二為框架鏈接網(wǎng)頁二為框架鏈接網(wǎng)頁圖圖9-11 鏈接網(wǎng)頁后的框架布局鏈接網(wǎng)頁后的框架布局任務(wù)任務(wù)1 使用框架布局制作網(wǎng)頁使用框架布局制作網(wǎng)頁3為菜單設(shè)置超鏈接。選中為菜單設(shè)置超鏈接。選中l(wèi)eftFrame框框架中的第一項(xiàng)菜單架中的第一項(xiàng)菜單“添加文章添加文章”，在屬性面板，在屬性面板中設(shè)置其超鏈接為中設(shè)置其超鏈接為“addfile.html”，目標(biāo)為目標(biāo)為“mainframe”。如圖。如圖9-12所示。所示。 4同樣的方法為同樣的方法為le

17、ftFrame框架中的第二項(xiàng)菜單框架中的第二項(xiàng)菜單“修改文章修改文章”設(shè)置其超鏈設(shè)置其超鏈接為接為“filelist.html”，目標(biāo)為，目標(biāo)為“mainframe”。其他超鏈接的設(shè)置方式。其他超鏈接的設(shè)置方式與此相同。本任務(wù)僅是一個(gè)示例，不具實(shí)用性，故不再一一贅述。與此相同。本任務(wù)僅是一個(gè)示例，不具實(shí)用性，故不再一一贅述。 二為框架鏈接網(wǎng)頁二為框架鏈接網(wǎng)頁圖圖9-12 設(shè)置超鏈接和目標(biāo)框架設(shè)置超鏈接和目標(biāo)框架任務(wù)任務(wù)1 使用框架布局制作網(wǎng)頁使用框架布局制作網(wǎng)頁返回 任務(wù)任務(wù)2 使用浮動框架制作網(wǎng)頁使用浮動框架制作網(wǎng)頁圖9-13 頁面左下方帶有浮動框架的布局任務(wù)任務(wù)2 使用浮動框架制作網(wǎng)頁使用

18、浮動框架制作網(wǎng)頁一浮動框架的概念一浮動框架的概念浮動框架也稱內(nèi)聯(lián)框架，標(biāo)記為浮動框架也稱內(nèi)聯(lián)框架，標(biāo)記為，它能夠比框架，它能夠比框架更靈活地實(shí)現(xiàn)框架的功能，在使用表格或是更靈活地實(shí)現(xiàn)框架的功能，在使用表格或是DIV布局的頁面布局的頁面中，如果要小面積地使用框架來當(dāng)作圖像或是網(wǎng)頁對象的容中，如果要小面積地使用框架來當(dāng)作圖像或是網(wǎng)頁對象的容器，就可以使用浮動框架。即浮動框架可以靈活地插入到網(wǎng)器，就可以使用浮動框架。即浮動框架可以靈活地插入到網(wǎng)頁的任何位置。頁的任何位置。 任務(wù)任務(wù)2 使用浮動框架制作網(wǎng)頁使用浮動框架制作網(wǎng)頁二浮動框架的創(chuàng)建及屬性設(shè)置二浮動框架的創(chuàng)建及屬性設(shè)置在在Dreamweave

19、r CS3中，單擊中，單擊“布局布局”工具欄中的工具欄中的“IFRAME”按鈕來插入浮動框架，在代碼編輯視圖中，按鈕來插入浮動框架，在代碼編輯視圖中，會自動生成一對會自動生成一對標(biāo)記，在設(shè)標(biāo)記，在設(shè)計(jì)視圖中則會出現(xiàn)一個(gè)灰色的正方形，如圖計(jì)視圖中則會出現(xiàn)一個(gè)灰色的正方形，如圖9-14所示。所示。屬性設(shè)置要在代碼中去進(jìn)行。屬性設(shè)置要在代碼中去進(jìn)行。任務(wù)任務(wù)2 使用浮動框架制作網(wǎng)頁使用浮動框架制作網(wǎng)頁二浮動框架的創(chuàng)建及屬性設(shè)置二浮動框架的創(chuàng)建及屬性設(shè)置圖圖9-14 頁面插入浮動框架頁面插入浮動框架 標(biāo)記的常屬性有：標(biāo)記的常屬性有： name：浮動框架的名稱：浮動框架的名稱 width：浮動框架的寬度

20、：浮動框架的寬度 （ 可用像素或是百分比）可用像素或是百分比） height：浮動框架的高度：浮動框架的高度 （可用像素或是百分比）（可用像素或是百分比） frameborder：浮動框架的邊框：浮動框架的邊框 scrolling：浮動框架的滾動條：浮動框架的滾動條 （“auto”為自動為自動 “yes”為顯示為顯示 “no”為不顯示）為不顯示） src：浮動框架中顯示文件地址：浮動框架中顯示文件地址 1打開當(dāng)前站點(diǎn)文件夾下為打開當(dāng)前站點(diǎn)文件夾下為oa子文件夾中的子文件夾中的leftmenu.html網(wǎng)頁文件。網(wǎng)頁文件。2在菜單的下方插入一個(gè)空的在菜單的下方插入一個(gè)空的DIV層。設(shè)置其背景為層。設(shè)置其背景為“白色白色（#FFFFFF）”，方框大小為，方框大小為“180像素像素”，左右邊界為，左右邊界為“自動自動”。3在在DIV中通過中通過“布局布局”工具欄中的工具欄中的“IFRAME”按鈕插入一個(gè)浮動框架。按鈕插入一個(gè)浮動框架。 任務(wù)任務(wù)2 使用浮動框架制