10用框架布局頁(yè)面教學(xué)課件 高教版 中職 網(wǎng)頁(yè)設(shè)計(jì)與制作( CS5) 用框架布局網(wǎng)頁(yè)靜態(tài)網(wǎng)站制作教學(xué)資源課件框架可以把瀏覽器窗口分成幾個(gè)獨(dú)立的部分,每部分顯示單獨(dú)的頁(yè)面,頁(yè)面的內(nèi)容是互相聯(lián)系的。如圖中的網(wǎng)頁(yè)就是一個(gè)典型的框架頁(yè)面,包括3個(gè)不同的HTML文檔,,目前大部分的網(wǎng)站已不采用框架技術(shù),本節(jié)只對(duì)框架進(jìn)行簡(jiǎn)單介紹。,中提供了許多現(xiàn)成的框架結(jié)構(gòu),如圖所示。一個(gè)框架結(jié)構(gòu)有兩部分網(wǎng)頁(yè)文件構(gòu)成:框架(Frame):框架是瀏覽器窗口中的一部分區(qū)域。框架集():框架集也是一個(gè)網(wǎng)頁(yè)文件,它將一個(gè)窗口通過(guò)行和列的方式分割成多個(gè)框架。實(shí)例9:制作如圖所示的框架頁(yè)面,圖片素材和網(wǎng)頁(yè)文件均可在教學(xué)資料包中找到。1、實(shí)例中的框架是由四個(gè)文件組成的,一個(gè)框架集文件(我們看到的實(shí)例),三個(gè)框架文件: “top.html”、“l(fā)eft.html”、“main.html”,如圖所示。2、選擇“文件”菜單中的“新建”命令,打開(kāi)“新建”對(duì)話(huà)框,單擊“示例中的頁(yè)”,在“示例文件夾”中選擇“框架頁(yè)”,在“示例頁(yè)”中選擇“上方固定,左側(cè)嵌套”,如圖所示。3、框架集出現(xiàn)在文檔窗口中,同時(shí)打開(kāi)“框架標(biāo)簽輔助功能屬性”對(duì)話(huà)框,如圖所示,單擊“確定”為每個(gè)框架指定一個(gè)默認(rèn)的名稱(chēng),為以后在框架中添加文件做準(zhǔn)備。4、空的預(yù)定義框架集網(wǎng)頁(yè)效果如圖所示5、單擊“文件”菜單中的“框架集另存為”命令,保存該框架集文件。“框架集”屬性面板如圖所示。6、在“邊框”中選擇“是”,以顯示框架的邊框(在實(shí)際中并不顯示框架的邊框dw用框架進(jìn)行網(wǎng)頁(yè)布局,這里是為了讓同學(xué)們對(duì)框架有個(gè)更清晰的認(rèn)知),根據(jù)最上層框架中要顯示內(nèi)容的高度來(lái)確定在“行”中輸入的值:250px。7、單擊“窗口”菜單時(shí)的“框架”命令或按“Shift+F2”dw用框架進(jìn)行網(wǎng)頁(yè)布局,打開(kāi)“框架”面板,如圖3.50所示,在“框架”面板中選擇頂端框架“”,則“框架”屬性面板如圖3.51所示。單擊并拖動(dòng)“源文件”文本框右側(cè)的“指向文件”按鈕 指向“文件”面板中的網(wǎng)頁(yè)文件“top.html”,選擇在該框架中打開(kāi)的網(wǎng)頁(yè)文件,實(shí)例效果如圖3.52所示。8、按上述方法可以快速指定另外兩個(gè)框架中打開(kāi)的網(wǎng)頁(yè)文件。9、單擊“框架”面板中下部的外框,如圖3.53所示,選擇下部的框架集,
友情鏈接: 餐飲加盟
地址:北京市海淀區(qū) 電話(huà):010- 郵箱:@126.com
備案號(hào):冀ICP備2024067069號(hào)-3 北京科技有限公司版權(quán)所有