《Web應(yīng)用開發(fā)》課件-06 框架

本章簡(jiǎn)介：框架的作用是把瀏覽器窗口劃分為若干個(gè)區(qū)域，每個(gè)區(qū)域可以分別顯示不同的頁面?？蚣艿某霈F(xiàn)大大地豐富了網(wǎng)頁的布局手段以及頁面之間的組織形式。本章主要講解了創(chuàng)建設(shè)置框架和框架集的方法，通過這些內(nèi)容的學(xué)習(xí)，可以合理地來組織頁面中的框架，使瀏覽者通過框架可以很方便地在不同的頁面之間跳轉(zhuǎn)及操作。06框架課堂學(xué)習(xí)目標(biāo)掌握創(chuàng)建框架集的方法掌握為框架添加內(nèi)容的方法掌握設(shè)置框架和框架集屬性的方法6.1創(chuàng)建框架和框架集建立框架集為框架添加內(nèi)容保存框架框架的選擇修改框架的大小拆分框架刪除框架課堂案例—牛奶飲料網(wǎng)頁6.1.1建立框架集在DreamweaverCS6中，可以利用可視化工具方便地創(chuàng)建框架集。用戶可以通過菜單命令實(shí)現(xiàn)該操作。1．通過“插入”命令建立框架集2．通過拖曳自定義框架6.1.2為框架添加內(nèi)容因?yàn)槊恳粋€(gè)框架都是一個(gè)HTML文檔，所以可以在創(chuàng)建框架后，直接編輯某個(gè)框架中的內(nèi)容，也可在框架中打開已有的HTML文檔，具體操作步驟如下。（1）在文檔窗口中，將光標(biāo)放置在某一框架內(nèi)。（2）選擇“文件>在框架中打開”命令，打開一個(gè)已有文檔。6.1.3保存框架保存框架時(shí)，分兩步進(jìn)行，先保存框架集，再保存框架。初學(xué)者在保存文檔時(shí)很容易糊涂，明明認(rèn)為保存的是框架，但實(shí)際上保存成了框架集；明明認(rèn)為保存的是某個(gè)框架，但實(shí)際上保存成了框架集或其他框架。因此，在保存框架前，用戶需要先選擇“窗口>屬性”命令和“窗口>框架”命令，啟用“屬性”面板和“框架”控制面板。然后，在“框架”控制面板中選擇一個(gè)框架，在“屬性”面板的“源文件”選項(xiàng)中查看此框架的文件名。用戶查看框架的名稱后，在保存文件時(shí)就可以根據(jù)“保存”對(duì)話框中的文件名信息知道保存的是框架集還是某框架了。6.1.4框架的選擇在對(duì)框架或框架集進(jìn)行操作之前，必須先選擇框架或框架集。1．選擇框架選擇框架有以下幾種方法。在文檔窗口中，按Alt+Shift組合鍵的同時(shí)，用鼠標(biāo)左鍵單擊欲選擇的框架。先選擇“窗口>框架”命令，彈出“框架”面板。然后，在面板中用鼠標(biāo)左鍵單擊欲選擇的框架。此時(shí)，文檔窗口中框架的邊框會(huì)出現(xiàn)虛線輪廓。2．選擇框架集選擇框架集有以下幾種方法。在“框架”控制面板中單擊框架集的邊框。在文檔窗口中用鼠標(biāo)左鍵單擊框架的邊框。6.1.5修改框架的大小建立框架的目的就是將窗口分成大小不同的子窗口，在不同的窗口中顯示不同的文檔內(nèi)容。調(diào)整子窗口的大小有以下幾種方法。（1）在“設(shè)計(jì)”視圖中，將鼠標(biāo)指針放到框架邊框上，當(dāng)鼠標(biāo)指針呈雙向箭頭時(shí)，拖曳鼠標(biāo)改變框架的大小。（2）選擇框架集，在“屬性”面板中“行”或“列”選項(xiàng)的文本框中輸入具體的數(shù)值，然后在“單位”選項(xiàng)的下拉列表中選擇單位。6.1.6拆分框架通過拆分框架，可以增加框架集中框架的數(shù)量，但實(shí)際上是在不斷地增加框架集，即框架集嵌套。拆分框架有以下幾種方法。（1）先將光標(biāo)置于要拆分的框架窗口中，然后選擇“修改>框架集”命令，彈出其子菜單，其中有4種拆分方式。（2）選定要拆分的框架集，按Alt+Shift組合鍵的同時(shí)，將鼠標(biāo)指針放到框架的邊框上，當(dāng)鼠標(biāo)指針呈雙向箭頭時(shí)，拖曳鼠標(biāo)指針拆分框架。6.1.7刪除框架通過拆分框架，可以增加框架集中框架的數(shù)量，但實(shí)際上是在不斷地增加框架集，即框架集嵌套。拆分框架有以下幾種方法。（1）先將光標(biāo)置于要拆分的框架窗口中，然后選擇“修改>框架集”命令，彈出其子菜單，其中有4種拆分方式。（2）選定要拆分的框架集，按Alt+Shift組合鍵的同時(shí)，將鼠標(biāo)指針放到框架的邊框上，當(dāng)鼠標(biāo)指針呈雙向箭頭時(shí)，拖曳鼠標(biāo)指針拆分框架。6.1.8課堂案例—牛奶飲料網(wǎng)頁使用“對(duì)齊上緣”命令，制作的網(wǎng)頁的結(jié)構(gòu)圖效果；使用“屬性”面板，改變框架的大??；使用“圖像”按鈕，插入圖像。效果圖6.2設(shè)置框架和框架集的屬性設(shè)置框架屬性設(shè)置框架集屬性6.2.1設(shè)置框架屬性選中要查看屬性的框架，選擇“窗口>屬性”命令，彈出“屬性”面板?！皩傩浴泵姘?.2.2設(shè)置框架集屬性選擇要查看屬性的框架集，然后選擇“窗口>屬性”命令?！皩傩浴泵姘逭n堂案例—建筑規(guī)劃網(wǎng)頁

使用“左對(duì)齊”命令，插入框架進(jìn)行布局；使用“鼠標(biāo)經(jīng)過圖像”按鈕，插入鼠標(biāo)經(jīng)過圖像效果；使用“屬性”面板，設(shè)