大學計算機ii課件第8次課

1、第8講 使用框架和層布局網(wǎng)頁參考資源：/dxjsj2/大學計算機2022/9/241廣東金融學院本講內(nèi)容1框架及其基本操作；2使用框架制作圖片瀏覽器；3層及其基本操作4使用層制作下拉菜單；5討論、總結(jié)和作業(yè)。2022/9/24廣東金融學院21框架及其基本操作框架網(wǎng)頁的外觀2022/9/24廣東金融學院31框架及其基本操作框架網(wǎng)頁的外觀1) 頁面被分成了多個子頁面；2) 每個子頁面有獨立的滾動條；3) 點擊其中一個子頁面中的超鏈接，可在另外一個子頁面中打開目標端點網(wǎng)頁。2022/9/24廣東金融學院41框架及其基本操作什么是框架？框架是網(wǎng)頁文檔窗口帶有邊框的矩形區(qū)域，每一個框架都有一個名稱。框架

2、是一個網(wǎng)頁文檔容器，用于顯示一個獨立網(wǎng)頁文件。2022/9/24廣東金融學院51框架及其基本操作什么是框架集？框架集是HTML文件，它定義一組框架的布局和屬性，包括框架的數(shù)目、框架的大小和位置以及在每個框架中初始顯示的頁面URL。框架集文件本身不包含要在瀏覽器中顯示的內(nèi)容，只是告訴瀏覽器如何顯示一組框架以及在這些框架中顯示哪些網(wǎng)頁文檔?？蚣芗梢郧短祝匆粋€框架集可以作為一個框架嵌入在另外一個框架集中。2022/9/24廣東金融學院61框架及其基本操作網(wǎng)頁文檔、框架和框架集的關(guān)系一個框架中顯示一個獨立的網(wǎng)頁文檔；一個框架集可以可以包含多個框架，這些框架可以構(gòu)成多行多列的框架區(qū)域；對于復(fù)雜的框架

3、結(jié)構(gòu)，只能采用嵌套方式實現(xiàn)；網(wǎng)頁文檔中不管有多少框架集嵌套，只有一個框架集文件。2022/9/24廣東金融學院71框架及其基本操作框架的優(yōu)點（1）使用框架，瀏覽者單擊框架網(wǎng)頁中某個超鏈接時，瀏覽器通常不需要重新加載（即重新從Web服務(wù)器下載）框架中的每個網(wǎng)頁，只需重新加載某個框架中的網(wǎng)頁，因此可以減少一些不必要的網(wǎng)絡(luò)傳輸流量，提高網(wǎng)頁的瀏覽速度。（2）每個框架都具有自己的滾動條，各自可以獨立滾動，并且在框架網(wǎng)頁重新加載時也互不影響（也就是說，沒有重新加載的網(wǎng)頁可以保留滾動條的當前滾動位置）。2022/9/24廣東金融學院81框架及其基本操作框架的缺點（1）有時難以實現(xiàn)不同框架中各元素之間比較精

4、確的圖形對齊。（2）由于框架中網(wǎng)頁的URL不顯示在瀏覽器中，因此瀏覽者難以將特定頁面添加到收藏夾。2022/9/24廣東金融學院91框架及其基本操作新建框架網(wǎng)頁2022/9/24廣東金融學院101框架及其基本操作選擇框架和框架集2022/9/24廣東金融學院11“框架”面板中被選中的框架“框架”面板中被選選中的框架集1框架及其基本操作保存框架集和框架網(wǎng)頁保存框架框架另存為保存框架集框架集另存為全部保存2022/9/24廣東金融學院121框架及其基本操作編輯框架設(shè)置框架和框架集屬性改變框架大小拆分框架刪除框架2022/9/24廣東金融學院131框架及其基本操作問題：下圖中至少包含幾個框架？202

5、2/9/24廣東金融學院142使用框架制作圖片瀏覽器最終效果2022/9/24廣東金融學院152使用框架制作圖片瀏覽器案例總結(jié)1) 使用框架和表格布局網(wǎng)頁2) 框架網(wǎng)頁中超鏈接的特點和響應(yīng)方式3) 框架網(wǎng)頁和框架之間的關(guān)系2022/9/24廣東金融學院163層及其基本操作網(wǎng)頁中的層2022/9/24廣東金融學院173層及其基本操作層的特點層是一種HTML頁面元素，從外觀上看，層像一個浮在網(wǎng)頁上方的矩形小窗口，層可以定位在頁面上任意位置。層同時也是一個容器，可以容納文本、圖像或其它任意可在HTML文檔正文中出現(xiàn)的內(nèi)容。甚至層內(nèi)還可以放入另外一個層，即層可以嵌套。2022/9/24廣東金融學院18

6、3層及其基本操作層的概念1) 層是一個矩形窗口2) 層根據(jù)需要可以顯示，也可以隱藏3) 層可以浮動在網(wǎng)頁的上方4) 層的位置在網(wǎng)頁中比較自由2022/9/24廣東金融學院193層及其基本操作層的作用（1）由于層可以重疊，所以可將網(wǎng)頁元素置于不同的層當中，以產(chǎn)生許多重疊效果。（2）由于層可以游離于網(wǎng)頁文檔之上，因此可以利用層來精確定位網(wǎng)頁元素。（3）層可以顯示和隱藏，可以制作多種網(wǎng)頁特效。2022/9/24廣東金融學院203層及其基本操作創(chuàng)建層直接插入層繪制層創(chuàng)建嵌入層2022/9/24廣東金融學院213層及其基本操作層的基本操作選擇層設(shè)置層的屬性調(diào)整層的大小移動層對齊層更改層的順序設(shè)置層的可見

7、性刪除層2022/9/24廣東金融學院224使用層制作下拉菜單最終效果2022/9/24廣東金融學院234使用層制作下拉菜單案例總結(jié)1) 創(chuàng)建層的方法2) 層的定位方式3) 層作為容器的應(yīng)用4) 層的顯示和隱藏5) 初識動作2022/9/24廣東金融學院245討論、總結(jié)和作業(yè)討論問題網(wǎng)頁制作時，我們選擇什么樣的網(wǎng)頁布局方法？基本要求：1) 列出每種方法的優(yōu)點；2) 列出每種方法的缺點；3) 列出每種方法各自適用的場合和不適用的場合。2022/9/24廣東金融學院255討論、總結(jié)和作業(yè)本次課總結(jié)1) 表格的優(yōu)缺點和適用場合2) 框架的優(yōu)缺點和適用場合3) 層的優(yōu)缺點和適用場合2022/9/24廣東金融學院265討論、總結(jié)和作業(yè)作業(yè)1從網(wǎng)絡(luò)中下載并使用D