1、前臺頁面設計前臺頁面設計項目六項目六 班級網站班級網站山東理工職業學院軟件工程學院山東理工職業學院軟件工程學院山東理工職業學院軟件工程學院山東理工職業學院軟件工程學院前臺頁面設計前臺頁面設計目錄目錄制作班級網站制作班級網站子頁子頁-浮動框架網頁浮動框架網頁任務二任務二任務一任務一項目六所要講授的任務項目六所要講授的任務制作班級網站制作班級網站首頁首頁-框架網頁框架網頁山東理工職業學院軟件工程學院山東理工職業學院軟件工程學院前臺頁面設計前臺頁面設計任務任務1 1 制作班級網站首頁制作班級網站首頁-框架網頁框架網頁 教學重點教學重點1. 框架和框架集的創建與編輯2. 設置框架和框架集屬性 教學難點

2、教學難點1. 框架和框架集的創建與編輯2. 設置框架和框架集屬性 1. 了解框架網頁的概念2. 掌握框架集和框架的創建和保存的方法3. 掌握框架、框架集的編輯和屬性的設置方法4. 掌握框架頁超級鏈接的方法教學目標教學目標山東理工職業學院軟件工程學院山東理工職業學院軟件工程學院前臺頁面設計前臺頁面設計上節內容回顧上節內容回顧 上節課講到了表單的創建和設置以及表單的檢查方法等內容。請回答下面兩個問題：表單的標記是什么？通常用什么布局？表單的標記是什么？通常用什么布局？問題問題 1 1表單對象有幾種？表單對象有幾種？問題問題 2 2山東理工職業學院軟件工程學院山東理工職業學院軟件工程學院前臺頁面設計

3、前臺頁面設計基礎知識基礎知識1 1框架的基本操作框架的基本操作 實例演練實例演練2 2制作制作“班級網站班級網站”首頁首頁任務任務1 1 制作班級網站首頁制作班級網站首頁-框架網頁框架網頁 山東理工職業學院軟件工程學院山東理工職業學院軟件工程學院前臺頁面設計前臺頁面設計框架的作用框架的作用及優缺點及優缺點編輯框架編輯框架 框架標記框架標記（3）（2）（1）1、基礎知識框架的基本操作框架的基本操作 山東理工職業學院軟件工程學院山東理工職業學院軟件工程學院前臺頁面設計前臺頁面設計1、基礎知識框架的基本操作框架的基本操作 （1 1）框架的作用及優缺點）框架的作用及優缺點框架的作用框架的作用 框架是一

4、個較早出現的框架是一個較早出現的HTMLHTML對象對象 把瀏覽器窗口劃分為若干個區域，把瀏覽器窗口劃分為若干個區域， 每個區域可以分別顯示不同的網頁每個區域可以分別顯示不同的網頁 使用框架布局，可使網站的結構更加清晰。使用框架布局，可使網站的結構更加清晰。山東理工職業學院軟件工程學院山東理工職業學院軟件工程學院前臺頁面設計前臺頁面設計1、基礎知識框架的基本操作框架的基本操作 （1 1）框架的作用及優缺點）框架的作用及優缺點訪問者的瀏覽器不需要為每個頁面重新訪問者的瀏覽器不需要為每個頁面重新加載與導航相關的圖形加載與導航相關的圖形加快了網頁的下載速度。加快了網頁的下載速度。每個框架都具有自己的

5、滾動條，訪問者每個框架都具有自己的滾動條，訪問者可以獨立滾動這些框架。可以獨立滾動這些框架。1456優點優點23山東理工職業學院軟件工程學院山東理工職業學院軟件工程學院前臺頁面設計前臺頁面設計1、基礎知識框架的基本操作框架的基本操作 （1 1）框架的作用及優缺點）框架的作用及優缺點1234對于不熟悉框架的制作對于不熟悉框架的制作者增添不少難度者增添不少難度在采用不同分辨率瀏覽網在采用不同分辨率瀏覽網頁時，難以實現不同框架頁時，難以實現不同框架中各元素的精確圖形對齊中各元素的精確圖形對齊，對導航進行測試可能對導航進行測試可能很耗時間很耗時間訪問者可能難以將特定頁訪問者可能難以將特定頁面設為收藏面

6、設為收藏缺點缺點山東理工職業學院軟件工程學院山東理工職業學院軟件工程學院前臺頁面設計前臺頁面設計（2 2）框架的編輯）框架的編輯決定網頁的框決定網頁的框架數目、大小架數目、大小及位置。及位置。制作框架的制作框架的內容內容設置框架的格設置框架的格式（大小、顏式（大小、顏色、是否顯示色、是否顯示卷軸等）卷軸等）針對不支持框針對不支持框架的瀏覽器設架的瀏覽器設計網頁內容計網頁內容建立框架網頁的步驟建立框架網頁的步驟12341、基礎知識框架的基本操作框架的基本操作 山東理工職業學院軟件工程學院山東理工職業學院軟件工程學院前臺頁面設計前臺頁面設計（3 3）框架的）框架的標記標記1、基礎知識框架的基本操作

7、框架的基本操作 框架集標記框架集標記框架標記框架標記無框架標記無框架標記 山東理工職業學院軟件工程學院山東理工職業學院軟件工程學院前臺頁面設計前臺頁面設計（3 3）框架的標記）框架的標記1、基礎知識框架的基本操作框架的基本操作 border=“n”frameborder=“ ”Bordercolor=“ ”是否顯示邊框（是否顯示邊框（yes no）邊框顏色邊框顏色框架集標記框架集標記指定每個框架的邊框大小僅適用于指定每個框架的邊框大小僅適用于IE4IE4）rows將瀏覽器窗口分成上下窗口（像素或百分比）將瀏覽器窗口分成上下窗口（像素或百分比）cols將瀏覽器窗口分成左右窗口（像素或百分比）將瀏

8、覽器窗口分成左右窗口（像素或百分比）Framespacing =“n”指定相鄰框架的間距指定相鄰框架的間距山東理工職業學院軟件工程學院山東理工職業學院軟件工程學院前臺頁面設計前臺頁面設計（3 3）框架的標記）框架的標記1、基礎知識框架的基本操作框架的基本操作 框架標記框架標記border=“n”指定每個框架的邊框大小指定每個框架的邊框大小bordercolor=“#RRGGBB”邊框顏色邊框顏色frameborder=“0或或1”1 顯示框架邊框，顯示框架邊框，0 不顯示。不顯示。marginheight =“n”指定框架上下邊界大小指定框架上下邊界大小marginwidth=“n”指定框架左

9、右邊界大小指定框架左右邊界大小name=“ ”框架名稱框架名稱noresize不允許瀏覽者以鼠標拖拽邊框的方式改變框不允許瀏覽者以鼠標拖拽邊框的方式改變框架大小架大小scrolling=“ yes no auto ”框架是否顯示滾動條框架是否顯示滾動條src=“ ”指定框架的來源網頁指定框架的來源網頁山東理工職業學院軟件工程學院山東理工職業學院軟件工程學院前臺頁面設計前臺頁面設計（3 3）框架的標記）框架的標記1、基礎知識框架的基本操作框架的基本操作 無框架標記無框架標記 此網頁使用了框架，但你的瀏覽器不支持框架。此網頁使用了框架，但你的瀏覽器不支持框架。 山東理工職業學院軟件工程學院山東理工

10、職業學院軟件工程學院前臺頁面設計前臺頁面設計（1 1）班級網站首頁效果圖）班級網站首頁效果圖2、實例演練制作制作“班級網站班級網站”首頁首頁 山東理工職業學院軟件工程學院山東理工職業學院軟件工程學院前臺頁面設計前臺頁面設計（2 2）“班級網站班級網站”首頁制作步驟首頁制作步驟2、實例演練制作制作“班級網站班級網站”首頁首頁 left.htmlleft.html打開新建文檔對話框，新建三個網頁，分別命名保存打開新建文檔對話框，新建三個網頁，分別命名保存為為top.htmltop.html（上方）、（上方）、left.htmlleft.html（左側）、（左側）、main.htmlmain.htm

11、l（右側）。（右側）。 1山東理工職業學院軟件工程學院山東理工職業學院軟件工程學院前臺頁面設計前臺頁面設計（2 2）“班級網站班級網站”首頁制作步驟首頁制作步驟2、實例演練制作制作“班級網站班級網站”首頁首頁 top.htmltop.html打開新建文檔對話框，新建三個網頁，分別命名保存打開新建文檔對話框，新建三個網頁，分別命名保存為為top.htmltop.html（上方）、（上方）、left.htmlleft.html（左側）、（左側）、main.htmlmain.html（右側）。（右側）。 1山東理工職業學院軟件工程學院山東理工職業學院軟件工程學院前臺頁面設計前臺頁面設計（2 2）“班

12、級網站班級網站”首頁制作步驟首頁制作步驟2、實例演練制作制作“班級網站班級網站”首頁首頁 打開新建文檔對話框，新建三個網頁，分別命名保存打開新建文檔對話框，新建三個網頁，分別命名保存為為top.htmltop.html（上方）、（上方）、left.htmlleft.html（左側）、（左側）、main.htmlmain.html（右側）。（右側）。 1山東理工職業學院軟件工程學院山東理工職業學院軟件工程學院前臺頁面設計前臺頁面設計（2 2）“班級網站班級網站”首頁制作步驟首頁制作步驟2、實例演練制作制作“班級網站班級網站”首頁首頁 新建框架集網頁，保存為新建框架集網頁，保存為Frameset.

13、htmlFrameset.html2無標題文檔無標題文檔.frame width:1024px;margin:0 auto;山東理工職業學院軟件工程學院山東理工職業學院軟件工程學院前臺頁面設計前臺頁面設計（2 2）“班級網站班級網站”首頁制作步驟首頁制作步驟2、實例演練制作制作“班級網站班級網站”首頁首頁 山東理工職業學院軟件工程學院山東理工職業學院軟件工程學院前臺頁面設計前臺頁面設計（2 2）“班級網站班級網站”首頁制作步驟首頁制作步驟2、實例演練制作制作“班級網站班級網站”首頁首頁 3鏈接目標鏈接目標屬性屬性_parent 放到父框架集或包放到父框架集或包含該鏈接的框架窗含該鏈接的框架窗口

14、中口中_blank放在新窗口中放在新窗口中_self放在相同窗口中（放在相同窗口中（默認窗口無須指定默認窗口無須指定） _top 放到整個瀏覽器窗放到整個瀏覽器窗口并刪除所有框架口并刪除所有框架山東理工職業學院軟件工程學院山東理工職業學院軟件工程學院前臺頁面設計前臺頁面設計（2 2）“班級網站班級網站”首頁制作步驟首頁制作步驟2、實例演練制作制作“班級網站班級網站”首頁首頁 4實現框架集實現框架集整體居中整體居中head 之間定義樣式之間定義樣式frameset中引用樣式中引用樣式 .frame_center width:1024px; margin:0 auto; 山東理工職業學院軟件工程學院山東理工職業學院軟件工程學院前臺頁面設計前臺頁面設計小結小結 了解框架了解框架技術技術掌握框架掌握框架和框架集和框架集的創建、的創建、編輯以及編輯以及屬性設置屬性設置能夠使用能夠使用框架技術框架技術靈活布局靈活布局網頁網頁以以“班級