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

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

2、是一個網頁文檔容器，用于顯示一個獨立網頁文件。2022/9/24廣東金融學院51框架及其基本操作什么是框架集？框架集是HTML文件，它定義一組框架的布局和屬性，包括框架的數(shù)目、框架的大小和位置以及在每個框架中初始顯示的頁面URL?？蚣芗募旧聿话跒g覽器中顯示的內容，只是告訴瀏覽器如何顯示一組框架以及在這些框架中顯示哪些網頁文檔。框架集可以嵌套，即一個框架集可以作為一個框架嵌入在另外一個框架集中。2022/9/24廣東金融學院61框架及其基本操作網頁文檔、框架和框架集的關系一個框架中顯示一個獨立的網頁文檔；一個框架集可以可以包含多個框架，這些框架可以構成多行多列的框架區(qū)域；對于復雜的框架

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

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

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

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

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