Khi cần hiển thị trên trình duyệt nhiều nội dung, chủ đề khác nhau trên cùng một trang thì một giải pháp có thể đáp ứng cho trường hợp này là frame (khung). Trong chương này sẽ giới thiệu về frame và hướng dẫn cách tạo một frame layout trong trang web. Mời các bạn cùng tham khảo.
Trang 1FRAME
Trang 2I GI I THI U FRAMES(KHUNG) GI I THI U FRAMES(KHUNG) Ớ Ớ Ệ Ệ
Khi c n hi n th trên trình duy t nhi u n i dung, ch Khi c n hi n th trên trình duy t nhi u n i dung, ch ầầ ểể ịị ệệ ềề ộộ ủủ
đ khác nhau trên cùng m t trang thì m t gi i pháp có ề ộ ộ ả
đ khác nhau trên cùng m t trang thì m t gi i pháp có ề ộ ộ ả
th đáp ng cho trể ứ ường h p này là frame (khung). ợ
th đáp ng cho trể ứ ường h p này là frame (khung). ợ
Có th phân chia m t trang thành các khung, cho phép Có th phân chia m t trang thành các khung, cho phép ểể ộộ
người truy c p cùng m t lúc có th xem nhi u trang ậ ộ ể ề
người truy c p cùng m t lúc có th xem nhi u trang ậ ộ ể ề
mà không c n cu n màn hình, m i khung ch a m t ầ ố ỗ ứ ộ
mà không c n cu n màn hình, m i khung ch a m t ầ ố ỗ ứ ộ
trang web riêng
N u trong trang đã s d ng Frame thì không s tag N u trong trang đã s d ng Frame thì không s tag ếế ử ụử ụ ửử
Body
Ví d : c n t o m t trang web mà khung bên trái ch a Ví d : c n t o m t trang web mà khung bên trái ch a ụ ầ ạụ ầ ạ ộộ ứứ
các m c liên k t, bên ph i hi n th n i dung c a các ụ ế ả ể ị ộ ủ
các m c liên k t, bên ph i hi n th n i dung c a các ụ ế ả ể ị ộ ủ
trang liên k t, ph n trên c a trang ch a logoế ầ ủ ứ
trang liên k t, ph n trên c a trang ch a logoế ầ ủ ứ
Trang 4Cách th c hi n:ự ệ
Trước h t ta t o các trang web riêng: trang logo, trang ế ạ
ch a các liên k t và các trang n i dung chính, sau đó ứ ế ộ
đ a các trang này vào các khung c a frameư ủ
Trang 6II CÁCH T O M T FRAME LAYOUT CÁCH T O M T FRAME LAYOUT Ạ Ạ Ộ Ộ
Cú pháp:
<HTML>
<HAED>
<TITLE>Page Title</TITLE>
</HEAD>
<FRAMESET>
Frame Definitions
</FRAMESET>
</HTML>
Trang 71 Các d ng frame:Các d ng frame:ạ ạ
T o frame theo dòng T o frame theo dòng ạ ạ
Cú pháp:
<HTML>
<HEAD><TITLE>N i dung tiêu đ </TITLE></HEAD>ộ ề
<HEAD><TITLE>N i dung tiêu đ </TITLE></HEAD>ộ ề
<Frameset Rows=”a, b…” >
<Frame name=”Name1” Src=”Content1.htm>
<Frame name=”Name2” Src=”Content2.htm>
…
<Frame name=”Name_n” Src=”Content_n.htm>
</Frameset>
</HTML>
Trang 8– a, b: là đ cao c a các dòng th 1, th 2 …, có th tính : là đ cao c a các dòng th 1, th 2 …, có th tính ộộ ủủ ứứ ứứ ểể
b ng pixel ho c b ng %ằ ặ ằ
b ng pixel ho c b ng %ằ ặ ằ
– Name: tên khung, (xác đ nh ch c năng c a khung): tên khung, (xác đ nh ch c năng c a khung)ịị ứứ ủủ
– Content.htm: đ a ch trang web xu t hi n đ u tiên trong : đ a ch trang web xu t hi n đ u tiên trong ịị ỉỉ ấấ ệệ ầầ khung
Ví dụ:
<HTML>
<HEAD><TITLE>Frame</TITLE></HEAD>
<Frameset Rows=20%, 60%, 20% >
<Frame name=”Head” Src=”head.htm>
<Frame name=”Content1” Src=”Content1.htm>
<Frame name=”Content2” Src=”Content2.htm>
</Frameset>
</HTML>
Trang 9 T o frame theo c t T o frame theo c t ạ ạ ộ ộ
Cú pháp:
<HTML>
<HEAD><TITLE>N i dung tiêu đ </TITLE></HEAD>ộ ề
<HEAD><TITLE>N i dung tiêu đ </TITLE></HEAD>ộ ề
<Frameset Cols=”a, b…” >
<Frame name=”Name1” Src=”Content1.htm>
<Frame name=”Name2” Src=”Content2.htm>
…
<Frame name=”Name_n” Src=”Content_n.htm>
</Frameset>
</HTML>
Trang 10– a, b: là đ cao c a các dòng th 1, th 2 …, có th tính : là đ cao c a các dòng th 1, th 2 …, có th tính ộ ộ ủ ủ ứ ứ ứ ứ ể ể
b ng pixel ho c b ng % ằ ặ ằ
b ng pixel ho c b ng % ằ ặ ằ
– Name: tên khung, (xác đ nh ch c năng c a khung) : tên khung, (xác đ nh ch c năng c a khung) ị ị ứ ứ ủ ủ
– Content.htm: đ a ch trang web xu t hi n đ u tiên trong : đ a ch trang web xu t hi n đ u tiên trong ị ị ỉ ỉ ấ ấ ệ ệ ầ ầ
khung
Ví dụ:
<HTML>
<HEAD><TITLE>Frame</TITLE></HEAD>
<Frameset Cols=30%, 30%, * >
<Frame name=”Baner” Src=”head.htm>
<Frame name=”Content1” Src=”Content1.htm>
<Frame name=”Content2” Src=”Content2.htm>
</Frameset>
</HTML>
Trang 11III CÁC THU C TÍNH C A FRAME CÁC THU C TÍNH C A FRAME Ộ Ộ Ủ Ủ
Noresize: Không đ i kích th : Không đ i kích th ổ ổ ướ ướ c c
Scrolling: có/không có thanh cu n : có/không có thanh cu n ộ ộ
Auto: Xu t hi n thanh cu n khi n i dung dài : Xu t hi n thanh cu n khi n i dung dài ấ ấ ệ ệ ộ ộ ộ ộ
Yes: luôn xu t hi n thanh cu n : luôn xu t hi n thanh cu n ấ ấ ệ ệ ộ ộ No: không xu t hi n thanh cu n ấ ệ ộ
<frameset rows="80,*" frameborder="NO" border="0" >
<frame noresize src="topFrame" scrolling="NO" >
<frame noresize src="leftFrame" scrolling="NO" >
</frameset>
Frameborder: đ : đ ườ ườ ng vi n c a khung m c đ nh là 1, mu n gi a ng vi n c a khung m c đ nh là 1, mu n gi a ề ề ủ ủ ặ ặ ị ị ố ố ữ ữ
Trang 12 Marginwidth: hi u ch nh kho ng cách t n i dung hi u ch nh kho ng cách t n i dung ệệ ỉỉ ảả ừ ộừ ộ
đ n l trái và ph i c a khung (tính b ng pixel)ế ề ả ủ ằ
đ n l trái và ph i c a khung (tính b ng pixel)ế ề ả ủ ằ
Marginheight: hi u ch nh kho ng cách t n i dung : hi u ch nh kho ng cách t n i dung ệệ ỉỉ ảả ừ ộừ ộ
đ n l trên và dế ề ướ ủi c a khung (tính b ng pixel)ằ
đ n l trên và dế ề ướ ủi c a khung (tính b ng pixel)ằ
Các frame l ng nhau: Các frame l ng nhau: ồ ồ
<Frameset >
<Frame name=”name” src=”Page.htm”>
<Frameset>
<Frame name=”name” src=”Page.htm”>
…
</Frameset>
…
</Frameset>
Trang 13IV LIÊN K T FRAME LIÊN K T FRAME Ế Ế
Trang đ u tiên c a khung đTrang đ u tiên c a khung đầầ ủủ ượược ch ra trong thu c tính c ch ra trong thu c tính ỉỉ ộộ SRC, ta có th ch nh các trang khác cùng xu t hi n ể ỉ ấ ệ
SRC, ta có th ch nh các trang khác cùng xu t hi n ể ỉ ấ ệ
trong khung đó b ng cách ch ra v trí trang đích (Target)ằ ỉ ị
trong khung đó b ng cách ch ra v trí trang đích (Target)ằ ỉ ị
T i trang mu n t o liên k t v i khung, ta nh p cú pháp:T i trang mu n t o liên k t v i khung, ta nh p cú pháp:ạạ ố ạố ạ ế ớế ớ ậậ
<a Href=”Page.htm Target=”name”>
Nhãn m c liên k tụ ế
Nhãn m c liên k tụ ế
</a>
Trong đó :
Target=Name : tên c a khung mà trang mu n liên tên c a khung mà trang mu n liên ủủ ốố
k t đ n trong tag <Frame>ế ế
k t đ n trong tag <Frame>ế ế
Trang 14 Tag <Base>:
N u có nhi u liên k t đ n các trang xu t hi n trong ế ề ế ế ấ ệ
N u có nhi u liên k t đ n các trang xu t hi n trong ế ề ế ế ấ ệ
cùng m t khung thì thu c tính target m c đ nh đ t ộ ộ ặ ị ặ
cùng m t khung thì thu c tính target m c đ nh đ t ộ ộ ặ ị ặ
trong tag <Base>
Cú pháp:
<Head>
<Base target=”name”>
</Head>
Trang 15V PH N T NOFRAMES PH N T NOFRAMES Ầ Ầ Ử Ử
Ph n t NOFRAMES đ Ph n t NOFRAMES đ ầ ử ầ ử ượ ử ụ ượ ử ụ c s d ng đ ch n i dung thay th cho c s d ng đ ch n i dung thay th cho ể ể ỉ ộ ỉ ộ ế ế frame khi trình duy t không h tr frame. ệ ổ ợ
Cú pháp :
<HTML>
<HEAD><TITLE>Page title</TITLE></HEAD>
<FRAMESET>
Frame Definitions
</TRAMESET>
<NOFRAME>
<BODY>
Page Layout
</BODY>
</NOFRAME>
Trang 16VI PH N T IFRAME PH N T IFRAME Ầ Ầ Ử Ử
N u mu n tr n văn b n và khung trong cùng m t trang thì ph i N u mu n tr n văn b n và khung trong cùng m t trang thì ph i ế ế ố ố ộ ộ ả ả ộ ộ ả ả
t o m t khung bên trong trang b ng tag ạ ộ ằ
không h tr thì n i dung trong IFRAME s b tr l i ổ ợ ộ ẽ ị ả ạ
Cú pháp :T i v trí mu n chèn frame, nh p cú pháp: :T i v trí mu n chèn frame, nh p cú pháp: ạ ị ạ ị ố ố ậ ậ
<Iframe Src=”Page.htm” Name=”name” Width= x Height=y Align=left/ right>
N i dung thay th khi trình duy t không ch p nh n khung ộ ế ệ ấ ậ
</Iframe>
Trong đó:
Page.htm: là trang đ u tiên xu t hi n trong khung : là trang đ u tiên xu t hi n trong khung ầ ầ ấ ấ ệ ệ
x, y: kích th : kích th ướ ủ ướ ủ c c a khung c c a khung
Align: canh lề
Trang 17VÍ D :Ụ