項(xiàng)目六任務(wù)1制作班級(jí)網(wǎng)站首頁----框架網(wǎng)頁(精)

1、前臺(tái)頁面設(shè)計(jì)前臺(tái)頁面設(shè)計(jì)項(xiàng)目六項(xiàng)目六 班級(jí)網(wǎng)站班級(jí)網(wǎng)站山東理工職業(yè)學(xué)院軟件工程學(xué)院山東理工職業(yè)學(xué)院軟件工程學(xué)院山東理工職業(yè)學(xué)院軟件工程學(xué)院山東理工職業(yè)學(xué)院軟件工程學(xué)院前臺(tái)頁面設(shè)計(jì)前臺(tái)頁面設(shè)計(jì)目錄目錄制作班級(jí)網(wǎng)站制作班級(jí)網(wǎng)站子頁子頁-浮動(dòng)框架網(wǎng)頁浮動(dòng)框架網(wǎng)頁任務(wù)二任務(wù)二任務(wù)一任務(wù)一項(xiàng)目六所要講授的任務(wù)項(xiàng)目六所要講授的任務(wù)制作班級(jí)網(wǎng)站制作班級(jí)網(wǎng)站首頁首頁-框架網(wǎng)頁框架網(wǎng)頁山東理工職業(yè)學(xué)院軟件工程學(xué)院山東理工職業(yè)學(xué)院軟件工程學(xué)院前臺(tái)頁面設(shè)計(jì)前臺(tái)頁面設(shè)計(jì)任務(wù)任務(wù)1 1 制作班級(jí)網(wǎng)站首頁制作班級(jí)網(wǎng)站首頁-框架網(wǎng)頁框架網(wǎng)頁 教學(xué)重點(diǎn)教學(xué)重點(diǎn)1. 框架和框架集的創(chuàng)建與編輯2. 設(shè)置框架和框架集屬性 教學(xué)難點(diǎn)

2、教學(xué)難點(diǎn)1. 框架和框架集的創(chuàng)建與編輯2. 設(shè)置框架和框架集屬性 1. 了解框架網(wǎng)頁的概念2. 掌握框架集和框架的創(chuàng)建和保存的方法3. 掌握框架、框架集的編輯和屬性的設(shè)置方法4. 掌握框架頁超級(jí)鏈接的方法教學(xué)目標(biāo)教學(xué)目標(biāo)山東理工職業(yè)學(xué)院軟件工程學(xué)院山東理工職業(yè)學(xué)院軟件工程學(xué)院前臺(tái)頁面設(shè)計(jì)前臺(tái)頁面設(shè)計(jì)上節(jié)內(nèi)容回顧上節(jié)內(nèi)容回顧 上節(jié)課講到了表單的創(chuàng)建和設(shè)置以及表單的檢查方法等內(nèi)容。請(qǐng)回答下面兩個(gè)問題：表單的標(biāo)記是什么？通常用什么布局？表單的標(biāo)記是什么？通常用什么布局？問題問題 1 1表單對(duì)象有幾種？表單對(duì)象有幾種？問題問題 2 2山東理工職業(yè)學(xué)院軟件工程學(xué)院山東理工職業(yè)學(xué)院軟件工程學(xué)院前臺(tái)頁面設(shè)計(jì)

3、前臺(tái)頁面設(shè)計(jì)基礎(chǔ)知識(shí)基礎(chǔ)知識(shí)1 1框架的基本操作框架的基本操作 實(shí)例演練實(shí)例演練2 2制作制作“班級(jí)網(wǎng)站班級(jí)網(wǎng)站”首頁首頁任務(wù)任務(wù)1 1 制作班級(jí)網(wǎng)站首頁制作班級(jí)網(wǎng)站首頁-框架網(wǎng)頁框架網(wǎng)頁 山東理工職業(yè)學(xué)院軟件工程學(xué)院山東理工職業(yè)學(xué)院軟件工程學(xué)院前臺(tái)頁面設(shè)計(jì)前臺(tái)頁面設(shè)計(jì)框架的作用框架的作用及優(yōu)缺點(diǎn)及優(yōu)缺點(diǎn)編輯框架編輯框架 框架標(biāo)記框架標(biāo)記（3）（2）（1）1、基礎(chǔ)知識(shí)框架的基本操作框架的基本操作 山東理工職業(yè)學(xué)院軟件工程學(xué)院山東理工職業(yè)學(xué)院軟件工程學(xué)院前臺(tái)頁面設(shè)計(jì)前臺(tái)頁面設(shè)計(jì)1、基礎(chǔ)知識(shí)框架的基本操作框架的基本操作 （1 1）框架的作用及優(yōu)缺點(diǎn)）框架的作用及優(yōu)缺點(diǎn)框架的作用框架的作用 框架是一

4、個(gè)較早出現(xiàn)的框架是一個(gè)較早出現(xiàn)的HTMLHTML對(duì)象對(duì)象 把瀏覽器窗口劃分為若干個(gè)區(qū)域，把瀏覽器窗口劃分為若干個(gè)區(qū)域， 每個(gè)區(qū)域可以分別顯示不同的網(wǎng)頁每個(gè)區(qū)域可以分別顯示不同的網(wǎng)頁 使用框架布局，可使網(wǎng)站的結(jié)構(gòu)更加清晰。使用框架布局，可使網(wǎng)站的結(jié)構(gòu)更加清晰。山東理工職業(yè)學(xué)院軟件工程學(xué)院山東理工職業(yè)學(xué)院軟件工程學(xué)院前臺(tái)頁面設(shè)計(jì)前臺(tái)頁面設(shè)計(jì)1、基礎(chǔ)知識(shí)框架的基本操作框架的基本操作 （1 1）框架的作用及優(yōu)缺點(diǎn)）框架的作用及優(yōu)缺點(diǎn)訪問者的瀏覽器不需要為每個(gè)頁面重新訪問者的瀏覽器不需要為每個(gè)頁面重新加載與導(dǎo)航相關(guān)的圖形加載與導(dǎo)航相關(guān)的圖形加快了網(wǎng)頁的下載速度。加快了網(wǎng)頁的下載速度。每個(gè)框架都具有自己的

5、滾動(dòng)條，訪問者每個(gè)框架都具有自己的滾動(dòng)條，訪問者可以獨(dú)立滾動(dòng)這些框架?？梢元?dú)立滾動(dòng)這些框架。1456優(yōu)點(diǎn)優(yōu)點(diǎn)23山東理工職業(yè)學(xué)院軟件工程學(xué)院山東理工職業(yè)學(xué)院軟件工程學(xué)院前臺(tái)頁面設(shè)計(jì)前臺(tái)頁面設(shè)計(jì)1、基礎(chǔ)知識(shí)框架的基本操作框架的基本操作 （1 1）框架的作用及優(yōu)缺點(diǎn)）框架的作用及優(yōu)缺點(diǎn)1234對(duì)于不熟悉框架的制作對(duì)于不熟悉框架的制作者增添不少難度者增添不少難度在采用不同分辨率瀏覽網(wǎng)在采用不同分辨率瀏覽網(wǎng)頁時(shí)，難以實(shí)現(xiàn)不同框架頁時(shí)，難以實(shí)現(xiàn)不同框架中各元素的精確圖形對(duì)齊中各元素的精確圖形對(duì)齊，對(duì)導(dǎo)航進(jìn)行測(cè)試可能對(duì)導(dǎo)航進(jìn)行測(cè)試可能很耗時(shí)間很耗時(shí)間訪問者可能難以將特定頁訪問者可能難以將特定頁面設(shè)為收藏面

6、設(shè)為收藏缺點(diǎn)缺點(diǎn)山東理工職業(yè)學(xué)院軟件工程學(xué)院山東理工職業(yè)學(xué)院軟件工程學(xué)院前臺(tái)頁面設(shè)計(jì)前臺(tái)頁面設(shè)計(jì)（2 2）框架的編輯）框架的編輯決定網(wǎng)頁的框決定網(wǎng)頁的框架數(shù)目、大小架數(shù)目、大小及位置。及位置。制作框架的制作框架的內(nèi)容內(nèi)容設(shè)置框架的格設(shè)置框架的格式（大小、顏式（大小、顏色、是否顯示色、是否顯示卷軸等）卷軸等）針對(duì)不支持框針對(duì)不支持框架的瀏覽器設(shè)架的瀏覽器設(shè)計(jì)網(wǎng)頁內(nèi)容計(jì)網(wǎng)頁內(nèi)容建立框架網(wǎng)頁的步驟建立框架網(wǎng)頁的步驟12341、基礎(chǔ)知識(shí)框架的基本操作框架的基本操作 山東理工職業(yè)學(xué)院軟件工程學(xué)院山東理工職業(yè)學(xué)院軟件工程學(xué)院前臺(tái)頁面設(shè)計(jì)前臺(tái)頁面設(shè)計(jì)（3 3）框架的）框架的標(biāo)記標(biāo)記1、基礎(chǔ)知識(shí)框架的基本操作

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

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

9、右邊界大小指定框架左右邊界大小name=“ ”框架名稱框架名稱noresize不允許瀏覽者以鼠標(biāo)拖拽邊框的方式改變框不允許瀏覽者以鼠標(biāo)拖拽邊框的方式改變框架大小架大小scrolling=“ yes no auto ”框架是否顯示滾動(dòng)條框架是否顯示滾動(dòng)條src=“ ”指定框架的來源網(wǎng)頁指定框架的來源網(wǎng)頁山東理工職業(yè)學(xué)院軟件工程學(xué)院山東理工職業(yè)學(xué)院軟件工程學(xué)院前臺(tái)頁面設(shè)計(jì)前臺(tái)頁面設(shè)計(jì)（3 3）框架的標(biāo)記）框架的標(biāo)記1、基礎(chǔ)知識(shí)框架的基本操作框架的基本操作 無框架標(biāo)記無框架標(biāo)記 此網(wǎng)頁使用了框架，但你的瀏覽器不支持框架。此網(wǎng)頁使用了框架，但你的瀏覽器不支持框架。 山東理工職業(yè)學(xué)院軟件工程學(xué)院山東理工

10、職業(yè)學(xué)院軟件工程學(xué)院前臺(tái)頁面設(shè)計(jì)前臺(tái)頁面設(shè)計(jì)（1 1）班級(jí)網(wǎng)站首頁效果圖）班級(jí)網(wǎng)站首頁效果圖2、實(shí)例演練制作制作“班級(jí)網(wǎng)站班級(jí)網(wǎng)站”首頁首頁 山東理工職業(yè)學(xué)院軟件工程學(xué)院山東理工職業(yè)學(xué)院軟件工程學(xué)院前臺(tái)頁面設(shè)計(jì)前臺(tái)頁面設(shè)計(jì)（2 2）“班級(jí)網(wǎng)站班級(jí)網(wǎng)站”首頁制作步驟首頁制作步驟2、實(shí)例演練制作制作“班級(jí)網(wǎng)站班級(jí)網(wǎng)站”首頁首頁 left.htmlleft.html打開新建文檔對(duì)話框，新建三個(gè)網(wǎng)頁，分別命名保存打開新建文檔對(duì)話框，新建三個(gè)網(wǎng)頁，分別命名保存為為top.htmltop.html（上方）、（上方）、left.htmlleft.html（左側(cè)）、（左側(cè)）、main.htmlmain.htm

11、l（右側(cè)）。（右側(cè)）。 1山東理工職業(yè)學(xué)院軟件工程學(xué)院山東理工職業(yè)學(xué)院軟件工程學(xué)院前臺(tái)頁面設(shè)計(jì)前臺(tái)頁面設(shè)計(jì)（2 2）“班級(jí)網(wǎng)站班級(jí)網(wǎng)站”首頁制作步驟首頁制作步驟2、實(shí)例演練制作制作“班級(jí)網(wǎng)站班級(jí)網(wǎng)站”首頁首頁 top.htmltop.html打開新建文檔對(duì)話框，新建三個(gè)網(wǎng)頁，分別命名保存打開新建文檔對(duì)話框，新建三個(gè)網(wǎng)頁，分別命名保存為為top.htmltop.html（上方）、（上方）、left.htmlleft.html（左側(cè)）、（左側(cè)）、main.htmlmain.html（右側(cè)）。（右側(cè)）。 1山東理工職業(yè)學(xué)院軟件工程學(xué)院山東理工職業(yè)學(xué)院軟件工程學(xué)院前臺(tái)頁面設(shè)計(jì)前臺(tái)頁面設(shè)計(jì)（2 2）“班

12、級(jí)網(wǎng)站班級(jí)網(wǎng)站”首頁制作步驟首頁制作步驟2、實(shí)例演練制作制作“班級(jí)網(wǎng)站班級(jí)網(wǎng)站”首頁首頁 打開新建文檔對(duì)話框，新建三個(gè)網(wǎng)頁，分別命名保存打開新建文檔對(duì)話框，新建三個(gè)網(wǎng)頁，分別命名保存為為top.htmltop.html（上方）、（上方）、left.htmlleft.html（左側(cè)）、（左側(cè)）、main.htmlmain.html（右側(cè)）。（右側(cè)）。 1山東理工職業(yè)學(xué)院軟件工程學(xué)院山東理工職業(yè)學(xué)院軟件工程學(xué)院前臺(tái)頁面設(shè)計(jì)前臺(tái)頁面設(shè)計(jì)（2 2）“班級(jí)網(wǎng)站班級(jí)網(wǎng)站”首頁制作步驟首頁制作步驟2、實(shí)例演練制作制作“班級(jí)網(wǎng)站班級(jí)網(wǎng)站”首頁首頁 新建框架集網(wǎng)頁，保存為新建框架集網(wǎng)頁，保存為Frameset.

13、htmlFrameset.html2無標(biāo)題文檔無標(biāo)題文檔.frame width:1024px;margin:0 auto;山東理工職業(yè)學(xué)院軟件工程學(xué)院山東理工職業(yè)學(xué)院軟件工程學(xué)院前臺(tái)頁面設(shè)計(jì)前臺(tái)頁面設(shè)計(jì)（2 2）“班級(jí)網(wǎng)站班級(jí)網(wǎng)站”首頁制作步驟首頁制作步驟2、實(shí)例演練制作制作“班級(jí)網(wǎng)站班級(jí)網(wǎng)站”首頁首頁 山東理工職業(yè)學(xué)院軟件工程學(xué)院山東理工職業(yè)學(xué)院軟件工程學(xué)院前臺(tái)頁面設(shè)計(jì)前臺(tái)頁面設(shè)計(jì)（2 2）“班級(jí)網(wǎng)站班級(jí)網(wǎng)站”首頁制作步驟首頁制作步驟2、實(shí)例演練制作制作“班級(jí)網(wǎng)站班級(jí)網(wǎng)站”首頁首頁 3鏈接目標(biāo)鏈接目標(biāo)屬性屬性_parent 放到父框架集或包放到父框架集或包含該鏈接的框架窗含該鏈接的框架窗口

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