資源簡介

(共13張PPT)
6
框 架
Part six
7、框架
1
定義框架
格式如下


< title>網頁標題

< frame src=“網頁URL地址一”>
...


功能:將瀏覽器窗口劃分成多個不同的顯示區域,并在每個顯示區域內獨立顯示不同網頁的一種技術,包含框架的網頁稱為框架集。
2
框架集基本標記
屬性 控件名稱 控件類型
type text 單行文本框
password 密碼框
file 文件域
radio 單選框
checkbox 復選框
submit 提交按鈕
reset 重置按鈕
button 普通按鈕
標記 屬性 功能
rows 在瀏覽器窗口從上至下劃分多個顯示區域,單位為像素或百分比,可用“*”表示剩余值
cols 在瀏覽器窗口從左至右劃分多個顯示區域,單位為像素或百分比,可用“*”
表示剩余值
frameboder 設置是否顯示邊框,“0”表示不顯示邊框,“1”表示顯示邊框
boder 設置邊框粗細
bordercolor 設置邊框顏色
標記 屬性 功能
src 指定當前顯示區域中初始時顯示的網頁,值為相對URL或絕對URL
name nane指定當前顯示區域的子窗口的名稱
noresize 指定多個不同的顯示區域是否可以通過拖動框架邊框在瀏覽器中調整顯示
區域的大小
說明:< frameset>…標記取代了普通網頁的…標記它們不可同時出現。
7、框架
2
Frameset屬性 rows cols
屬性 控件名稱 控件類型
type text 單行文本框
password 密碼框
file 文件域
radio 單選框
checkbox 復選框
submit 提交按鈕
reset 重置按鈕
button 普通按鈕
7、框架
2
Frameset屬性 rows cols
屬性 控件名稱 控件類型
type text 單行文本框
password 密碼框
file 文件域
radio 單選框
checkbox 復選框
submit 提交按鈕
reset 重置按鈕
button 普通按鈕
7、框架
水平/垂直分割窗口屬性 rows/cols
(1)格式
row=“值1,值2,…值N”
et cols-“值1,值2,…,值n”
(2)說明
①rows后面的值,說明窗口橫向分隔的情況:cols后面的值,說明窗口縱向分隔的情框況
②各參數值之間用逗號分隔,依次表示各個子窗口的高度(寬度)
③rows和cols可以用數字、百分比和剩余值及這三種方式的混合方式來表示
◆數字,表示子窗口高度(寬度)所占的像素點數
◆百分比(%).表示子窗口高度(寬度)占整個瀏覽器窗口高度(寬度)的百分比
◆剩余值(*).表示當前所有窗口設定之后的剩余部分,當符號“*”只出現一次即其他子窗口的大小都有明確的定義時,表示該子窗口的大小將根據瀏覽器窗口的大小而進行自動調整,當持號“*”出現一次以上時,表示按比倒分覽器口的剩余空間一例如,< frameset cols=“40%,2*,*”>表示將瀏覽器窗口分割為三列,第一個子窗口在第1列,窗口寬度為整個瀏覽器窗口寬度的40%:第二個子窗口在第二列,占瀏覽器窗口剩余空間的2/3,即其寬度為整個瀏覽器窗口寬度的40%:第三個子窗口占剩余空間的1/3,寬度為整個瀏覽器窗口寬度的20%.
2
Frame屬性 rows cols
屬性 控件名稱 控件類型
type text 單行文本框
password 密碼框
file 文件域
radio 單選框
checkbox 復選框
submit 提交按鈕
reset 重置按鈕
button 普通按鈕
7、框架
在窗口框架建立起來后,應在各個子窗口內放入相應的信息。子窗口的初始化是用
標簽來描述的。屏幕上的每一個子窗口均對應一個標簽。用標簽中的屬性鏈接相應的文件,該文件的內容就顯示在標簽對應的窗口之中, 1.src屬性是用于指定要導入到某個子窗口的HML文件的位置,其語法格式如下:

2.定義子窗口名稱屬性name
name屬性是用來指定窗口的名稱,此屬性是可選的。當完成定義子窗口的名稱后,便可
在超鏈接中,指定顯示網頁的子窗口。其語法格式如下
< frame name=”子窗口名稱”>
3.控制框架滾動條屬性 scrolling
scrolling屬性用于描述該窗口是否設有滾動條。該屬性是可選的,其設置語法格式如下:
< frame scrol1ing=yes或no或auto>
各個設置值所代表的意義按順序為顯示,不顯示和自動設置,默認方式是mo
2
Frame屬性 scrolling
屬性 控件名稱 控件類型
type text 單行文本框
password 密碼框
file 文件域
radio 單選框
checkbox 復選框
submit 提交按鈕
reset 重置按鈕
button 普通按鈕
7、框架
4.子窗口大小的調整屬性 noresize
noresize屬性是一個標志,沒有取值。它說明瀏覽者是否可以自行用鼠標調整窗口的大小。如果設定了 noresize屬性,則窗口不能調整。如果處于默認方式,則可以自行調整窗口的大小。
5.設置邊距屬性 marginwidth/marginheight
marginwidth屬性,用來控制窗口內顯示的內容與窗口左右邊緣的距離。該屬性是取一個像素值,默認值為1,該屬性是可選的
marginheight屬性,用來控制窗口內顯示的內容與上下邊緣的距離。該屬性是取一個像
素值,默認值為1,該屬性是可選的。
2
超鏈接的target屬性
屬性 控件名稱 控件類型
type text 單行文本框
password 密碼框
file 文件域
radio 單選框
checkbox 復選框
submit 提交按鈕
reset 重置按鈕
button 普通按鈕
7、框架
用 target屬性定義窗口的名稱,必須使用字母/數字字符;否則窗口的名稱將被忽略。但
是,有幾個特定的窗口的名稱例外,這幾個窗口的名稱有特殊含義,它們是 _blank,_self，_parent,_ top
(1) target=“_blank”
當將 arget屬性設置為bank時,若單擊超鏈接后,將以打開另一個窗口的方式顯示網頁
(2)target=“_self”
當將target屬性設置為_self時,則將在同一個窗口中顯示鏈接的網頁
(3) target=“_parent"
當將 target屬性設置為 parent時,若單擊超鏈接后,該鏈接網頁將導入目前子窗口的上
層框架。若沒有上層,則導入在同一個窗口中。
(4)當將 target屬性設置為_top時,則將脫離目前的窗口框架,在最上層的窗口框架中,顯
示鏈接的網頁。
2
Frame屬性 scrolling
屬性 控件名稱 控件類型
type text 單行文本框
password 密碼框
file 文件域
radio 單選框
checkbox 復選框
submit 提交按鈕
reset 重置按鈕
button 普通按鈕
7、框架
4.子窗口大小的調整屬性 noresize
noresize屬性是一個標志,沒有取值。它說明瀏覽者是否可以自行用鼠標調整窗口的大小。如果設定了 noresize屬性,則窗口不能調整。如果處于默認方式,則可以自行調整窗口的大小。
5.設置邊距屬性 marginwidth/marginheight
marginwidth屬性,用來控制窗口內顯示的內容與窗口左右邊緣的距離。該屬性是取一個像素值,默認值為1,該屬性是可選的
marginheight屬性,用來控制窗口內顯示的內容與上下邊緣的距離。該屬性是取一個像
素值,默認值為1,該屬性是可選的。
2
Frameset屬性
屬性 控件名稱 控件類型
type text 單行文本框
password 密碼框
file 文件域
radio 單選框
checkbox 復選框
submit 提交按鈕
reset 重置按鈕
button 普通按鈕
7、框架
3
浮動框架
屬性 控件名稱 控件類型
type text 單行文本框
password 密碼框
file 文件域
radio 單選框
checkbox 復選框
submit 提交按鈕
reset 重置按鈕
button 普通按鈕
屬性 功能
src 指定在窗口中顯示另一個頁面的文件路徑
width 指定浮動框架的寬度,單位為像素
height 指定浮動框架的高度,單位為像素
scrolling 指定浮動框架是否出現滾動條,值為auto(自動)、yes(出現)和no(不出現)
frameborder 指定浮動框架區域邊框的寬度,單位為像素,值為“0
0”時表示沒有邊框
格式：
功能:也稱為內聯框架,可以放在網頁中的任何位置,用于在一個頁面中嵌入一個框架窗口來顯示另一個頁面的內容
7、框架
3
浮動框架
屬性 控件名稱 控件類型
type text 單行文本框
password 密碼框
file 文件域
radio 單選框
checkbox 復選框
submit 提交按鈕
reset 重置按鈕
button 普通按鈕
7、框架
作業：完成下發的框架布局的作業
要求：利用記事本編輯網頁，按照要求保存為HTML文件，自己預覽后提交。有問題及時反饋練習。

展開更多......

收起↑