大學(xué)計算機(jī)Ⅱ(第8次課)

1、2022-1-11大學(xué)計算機(jī)(第8次課)1第第8講講 使用框架和層布局網(wǎng)頁使用框架和層布局網(wǎng)頁參考資源：大學(xué)計算機(jī)2022-1-11大學(xué)計算機(jī)(第8次課)2本講內(nèi)容本講內(nèi)容v1 1框架及其基本操作；框架及其基本操作；v2 2使用框架制作圖片瀏覽器；使用框架制作圖片瀏覽器；v3 3層及其基本操作層及其基本操作v4 4使用層制作下拉菜單；使用層制作下拉菜單；v5 5討論、總結(jié)和作業(yè)。討論、總結(jié)和作業(yè)。2022-1-11大學(xué)計算機(jī)(第8次課)31框架及其基本操作框架及其基本操作v框架網(wǎng)頁的外觀框架網(wǎng)頁的外觀2022-1-11大學(xué)計算機(jī)(第8次課)41框架及其基本操作框架及其基本操作v框架網(wǎng)頁的外觀框

2、架網(wǎng)頁的外觀 1) 1) 頁面被分成了多個子頁面；頁面被分成了多個子頁面； 2) 2) 每個子頁面有獨(dú)立的滾動條；每個子頁面有獨(dú)立的滾動條； 3) 3) 點(diǎn)擊其中一個子頁面中的超鏈接，可在點(diǎn)擊其中一個子頁面中的超鏈接，可在另外一個子頁面中打開目標(biāo)端點(diǎn)網(wǎng)頁。另外一個子頁面中打開目標(biāo)端點(diǎn)網(wǎng)頁。2022-1-11大學(xué)計算機(jī)(第8次課)51框架及其基本操作框架及其基本操作v什么是框架？什么是框架？ 框架是網(wǎng)頁文檔窗口帶有邊框的矩形區(qū)域，框架是網(wǎng)頁文檔窗口帶有邊框的矩形區(qū)域，每一個框架都有一個名稱。每一個框架都有一個名稱。 框架是一個網(wǎng)頁文檔容器，用于顯示一個獨(dú)框架是一個網(wǎng)頁文檔容器，用于顯示一個獨(dú)立網(wǎng)

3、頁文件。立網(wǎng)頁文件。2022-1-11大學(xué)計算機(jī)(第8次課)61框架及其基本操作框架及其基本操作v什么是框架集？什么是框架集？ 框架集是框架集是HTMLHTML文件，它定義一組框架的布局文件，它定義一組框架的布局和屬性，包括框架的數(shù)目、框架的大小和位和屬性，包括框架的數(shù)目、框架的大小和位置以及在每個框架中初始顯示的頁面置以及在每個框架中初始顯示的頁面URLURL。 框架集文件本身不包含要在瀏覽器中顯示的框架集文件本身不包含要在瀏覽器中顯示的內(nèi)容，只是告訴瀏覽器如何顯示一組框架以內(nèi)容，只是告訴瀏覽器如何顯示一組框架以及在這些框架中顯示哪些網(wǎng)頁文檔。及在這些框架中顯示哪些網(wǎng)頁文檔。 框架集可以嵌套

4、，即一個框架集可以作為一框架集可以嵌套，即一個框架集可以作為一個框架嵌入在另外一個框架集中。個框架嵌入在另外一個框架集中。2022-1-11大學(xué)計算機(jī)(第8次課)71框架及其基本操作框架及其基本操作v網(wǎng)頁文檔、框架和框架集的關(guān)系網(wǎng)頁文檔、框架和框架集的關(guān)系 一個框架中顯示一個獨(dú)立的網(wǎng)頁文檔；一個框架中顯示一個獨(dú)立的網(wǎng)頁文檔； 一個框架集可以可以包含多個框架，這些框一個框架集可以可以包含多個框架，這些框架可以構(gòu)成多行多列的框架區(qū)域；架可以構(gòu)成多行多列的框架區(qū)域； 對于復(fù)雜的框架結(jié)構(gòu)，只能采用嵌套方式實(shí)對于復(fù)雜的框架結(jié)構(gòu)，只能采用嵌套方式實(shí)現(xiàn)；現(xiàn)； 網(wǎng)頁文檔中不管有多少框架集嵌套，只有一網(wǎng)頁文檔中

5、不管有多少框架集嵌套，只有一個框架集文件。個框架集文件。2022-1-11大學(xué)計算機(jī)(第8次課)81框架及其基本操作框架及其基本操作v框架的優(yōu)點(diǎn)框架的優(yōu)點(diǎn) （1 1）使用框架，瀏覽者單擊框架網(wǎng)頁中某）使用框架，瀏覽者單擊框架網(wǎng)頁中某個超鏈接時，瀏覽器通常不需要重新加載（個超鏈接時，瀏覽器通常不需要重新加載（即重新從即重新從WebWeb服務(wù)器下載）框架中的每個網(wǎng)服務(wù)器下載）框架中的每個網(wǎng)頁，只需重新加載某個框架中的網(wǎng)頁，因此頁，只需重新加載某個框架中的網(wǎng)頁，因此可以減少一些不必要的網(wǎng)絡(luò)傳輸流量，提高可以減少一些不必要的網(wǎng)絡(luò)傳輸流量，提高網(wǎng)頁的瀏覽速度。網(wǎng)頁的瀏覽速度。 （2 2）每個框架都具有自

6、己的滾動條，各自）每個框架都具有自己的滾動條，各自可以獨(dú)立滾動，并且在框架網(wǎng)頁重新加載時可以獨(dú)立滾動，并且在框架網(wǎng)頁重新加載時也互不影響（也就是說，沒有重新加載的網(wǎng)也互不影響（也就是說，沒有重新加載的網(wǎng)頁可以保留滾動條的當(dāng)前滾動位置）。頁可以保留滾動條的當(dāng)前滾動位置）。2022-1-11大學(xué)計算機(jī)(第8次課)91框架及其基本操作框架及其基本操作v框架的缺點(diǎn)框架的缺點(diǎn) （1 1）有時難以實(shí)現(xiàn)不同框架中各元素之間）有時難以實(shí)現(xiàn)不同框架中各元素之間比較精確的圖形對齊。比較精確的圖形對齊。 （2 2）由于框架中網(wǎng)頁的）由于框架中網(wǎng)頁的URLURL不顯示在瀏覽器不顯示在瀏覽器中，因此瀏覽者難以將特定頁面

7、添加到收藏中，因此瀏覽者難以將特定頁面添加到收藏夾。夾。2022-1-11大學(xué)計算機(jī)(第8次課)101框架及其基本操作框架及其基本操作v新建框架網(wǎng)頁新建框架網(wǎng)頁2022-1-11大學(xué)計算機(jī)(第8次課)111框架及其基本操作框架及其基本操作v選擇框架和框架集選擇框架和框架集“框架”面板中被選中的框架“框架”面板中被選選中的框架集2022-1-11大學(xué)計算機(jī)(第8次課)121框架及其基本操作框架及其基本操作v保存框架集和框架網(wǎng)頁保存框架集和框架網(wǎng)頁 保存框架保存框架 框架另存為框架另存為 保存框架集保存框架集 框架集另存為框架集另存為 全部保存全部保存2022-1-11大學(xué)計算機(jī)(第8次課)131

8、框架及其基本操作框架及其基本操作v編輯框架編輯框架 設(shè)置框架和框架集屬性設(shè)置框架和框架集屬性 改變框架大小改變框架大小 拆分框架拆分框架 刪除框架刪除框架2022-1-11大學(xué)計算機(jī)(第8次課)141框架及其基本操作框架及其基本操作v問題：下圖中至少包含幾個框架？問題：下圖中至少包含幾個框架？2022-1-11大學(xué)計算機(jī)(第8次課)152使用框架制作圖片瀏覽器使用框架制作圖片瀏覽器v最終效果最終效果2022-1-11大學(xué)計算機(jī)(第8次課)162使用框架制作圖片瀏覽器使用框架制作圖片瀏覽器v案例總結(jié)案例總結(jié) 1) 1) 使用框架和表格布局網(wǎng)頁使用框架和表格布局網(wǎng)頁 2) 2) 框架網(wǎng)頁中超鏈接的

9、特點(diǎn)和響應(yīng)方式框架網(wǎng)頁中超鏈接的特點(diǎn)和響應(yīng)方式 3) 3) 框架網(wǎng)頁和框架之間的關(guān)系框架網(wǎng)頁和框架之間的關(guān)系2022-1-11大學(xué)計算機(jī)(第8次課)173層及其基本操作層及其基本操作v網(wǎng)頁中的層網(wǎng)頁中的層2022-1-11大學(xué)計算機(jī)(第8次課)183層及其基本操作層及其基本操作v層的特點(diǎn)層的特點(diǎn) 層是一種層是一種HTMLHTML頁面元素，從外觀上看，層像頁面元素，從外觀上看，層像一個浮在網(wǎng)頁上方的矩形小窗口，層可以定一個浮在網(wǎng)頁上方的矩形小窗口，層可以定位在頁面上任意位置。位在頁面上任意位置。 層同時也是一個容器，可以容納文本、圖像層同時也是一個容器，可以容納文本、圖像或其它任意可在或其它任意

10、可在HTMLHTML文檔正文中出現(xiàn)的內(nèi)容文檔正文中出現(xiàn)的內(nèi)容。 甚至層內(nèi)還可以放入另外一個層，即層可以甚至層內(nèi)還可以放入另外一個層，即層可以嵌套。嵌套。2022-1-11大學(xué)計算機(jī)(第8次課)193層及其基本操作層及其基本操作v層的概念層的概念 1) 1) 層是一個矩形窗口層是一個矩形窗口 2) 2) 層根據(jù)需要可以顯示，也可以隱藏層根據(jù)需要可以顯示，也可以隱藏 3) 3) 層可以浮動在網(wǎng)頁的上方層可以浮動在網(wǎng)頁的上方 4) 4) 層的位置在網(wǎng)頁中比較自由層的位置在網(wǎng)頁中比較自由2022-1-11大學(xué)計算機(jī)(第8次課)203層及其基本操作層及其基本操作v層的作用層的作用 （1 1）由于層可以重

11、疊，所以可將網(wǎng)頁元素）由于層可以重疊，所以可將網(wǎng)頁元素置于不同的層當(dāng)中，以產(chǎn)生許多重疊效果。置于不同的層當(dāng)中，以產(chǎn)生許多重疊效果。 （2 2）由于層可以游離于網(wǎng)頁文檔之上，因）由于層可以游離于網(wǎng)頁文檔之上，因此可以利用層來精確定位網(wǎng)頁元素。此可以利用層來精確定位網(wǎng)頁元素。 （3 3）層可以顯示和隱藏，可以制作多種網(wǎng)）層可以顯示和隱藏，可以制作多種網(wǎng)頁特效。頁特效。2022-1-11大學(xué)計算機(jī)(第8次課)213層及其基本操作層及其基本操作v創(chuàng)建層創(chuàng)建層 直接插入層直接插入層 繪制層繪制層 創(chuàng)建嵌入層創(chuàng)建嵌入層2022-1-11大學(xué)計算機(jī)(第8次課)223層及其基本操作層及其基本操作v層的基本操作

12、層的基本操作 選擇層選擇層 設(shè)置層的屬性設(shè)置層的屬性 調(diào)整層的大小調(diào)整層的大小 移動層移動層 對齊層對齊層 更改層的順序更改層的順序 設(shè)置層的可見性設(shè)置層的可見性 刪除層刪除層2022-1-11大學(xué)計算機(jī)(第8次課)234使用層制作下拉菜單使用層制作下拉菜單v最終效果最終效果2022-1-11大學(xué)計算機(jī)(第8次課)244使用層制作下拉菜單使用層制作下拉菜單v案例總結(jié)案例總結(jié) 1) 1) 創(chuàng)建層的方法創(chuàng)建層的方法 2) 2) 層的定位方式層的定位方式 3) 3) 層作為容器的應(yīng)用層作為容器的應(yīng)用 4) 4) 層的顯示和隱藏層的顯示和隱藏 5) 5) 初識動作初識動作2022-1-11大學(xué)計算機(jī)(

13、第8次課)255討論、總結(jié)和作業(yè)討論、總結(jié)和作業(yè)v討論問題討論問題 網(wǎng)頁制作時，我們選擇什么樣的網(wǎng)頁布局方網(wǎng)頁制作時，我們選擇什么樣的網(wǎng)頁布局方法？法？v基本要求：基本要求： 1) 1) 列出每種方法的優(yōu)點(diǎn)；列出每種方法的優(yōu)點(diǎn)； 2) 2) 列出每種方法的缺點(diǎn)；列出每種方法的缺點(diǎn)； 3) 3) 列出每種方法各自適用的場合和不適用列出每種方法各自適用的場合和不適用的場合。的場合。2022-1-11大學(xué)計算機(jī)(第8次課)265討論、總結(jié)和作業(yè)討論、總結(jié)和作業(yè)v本次課總結(jié)本次課總結(jié) 1) 1) 表格的優(yōu)缺點(diǎn)和適用場合表格的優(yōu)缺點(diǎn)和適用場合 2) 2) 框架的優(yōu)缺點(diǎn)和適用場合框架的優(yōu)缺點(diǎn)和適用場合 3) 3) 層的優(yōu)缺點(diǎn)和適用場合層的優(yōu)缺點(diǎn)和適用場合2022-1-11大學(xué)計算機(jī)(第8次課)275討論、總結(jié)和作業(yè)討論、總結(jié)和作業(yè)v作