1.1. KHÁI QUÁT VỀ FRAME
- 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 mà không cần cuộn màn hình, mỗi khung chứa một trang Web riêng.
- Nếu tài trang sử dụng Frame thì không sử thẻ Body
1.2. CÁCH TẠO MỘT FRAME LAYOUT
<HTML>
<HEAD>
<TITLE>Page Title</TITLE>
</HEAD>
<FRAMESET>
Frame Definitions
</FRAMESET>
</HTML>
1.2.1. Các dạng frame : Thẻ <FRAMESET> có 2 thuộc tính ROWS và COLS
a) Tạo frame theo dòng
Cú pháp:
<HTML>
<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>
Trong đó: a, b: là độ cao của các dòng thứ 1, thứ 2 …, có thể tính bằng pixel hoặc bằng %
Name: 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 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>
b) Tạo frame theo cột
Cú pháp:
<HTML>
<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>
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>
1.2.2 Các thuộc tính của Frame:
a) Noresize: Không đổi kích thước
b) Scrolling: có/không có thanh cuộn
Auto: Xuất hiện thanh cuộn khi nội dung dài
Yes: luôn xuất hiện thanh cuộn
No: không xuất hiện thanh cuộn
Ví dụ:
<frameset rows="80,*" cols="*" frameborder="NO" border="0" >
<frame noresize src="topFrame" scrolling="NO" >
<frame noresize src="leftFrame" scrolling="NO" >
</frameset>
c) Frameborder: đường viền của khung mặc định là 1, muốn giữa các khung không còn đường viền thì trong tag Frameset nhập thêm Border=0,
d) Marginwidth: 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)
e) Marginheight: 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)
1.2.3. Các frame lồng nhau:
<Frameset >
<Frame name=”name” src=”Page.htm”>
<Frameset>
<Frame name=”name” src=”Page.htm”>
…
</Frameset>
…
</Frameset>
1.2.4. Liên kết frame:
Trang đầu tiên của khung đượ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 trong khung đó bằng cách chỉ ra vị trí trang đích. 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
</a>
Trong đó :
Target=Name : tên của khung mà trang muốn liên kết đến trong tag <Frame>
Page.htm: trang hiển thị trong khung liên kết
- Thẻ <Base>: 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 trong tag <Base>
<head>
<Base target=”name”>
<a href=”URL”>Nhãn liên kết</a>
…
</head>
Ví dụ: Thiết kế trang web như sau:
Cách thực hiện:
Trang chính: Chia trang thành 3 khung: topframe, leftframe và mainframe. Trang Photo.htm đặt trong left frame, logo.htm đặt trong Topframe, Bester.htm, DuMont.htm, Jacobs.htm đặt trong mainframe
<HTML>
<HEAD><TITLE>Staff of The ColoradoExperience</TITLE>
<FRAMESET ROWS="60,*">
<!--- Company logo --->
<FRAME SRC="Logo.htm" marginheight=1 noresize scrolling=NO name=Topframe>
<!--- Nested frames --->
<FRAMESET COLS="140,*">
<!--- A list of staff photos --->
<FRAME SRC="Photos.htm" NAME=Leftframe>
<!--- Individual staff biographies --->
<FRAME SRC="Bester.htm" NAME=Mainframe>
</FRAMESET>
</FRAMESET>
</HEAD>
</HTML>
Trong đó các trang Logo.htm, Photos.htm, Bester.htm phải được tạo trước
Photos.htm
<HTML>
<HEAD><TITLE>Staff hypertext links</TITLE>
<BASE TARGET=Mainframe>
</HEAD>
<BODY>
<CENTER>
<A HREF="Bester.htm"><IMG SRC="Bester.jpg" width=75 height=101> <BR> Jeff Bester</A><BR><BR>
<A HREF="DuMont.htm"><IMG SRC="DuMont.jpg" width=75 height=101>
<BR> Brian DuMont</A><BR><BR>
<A HREF="Jacobs.htm"><IMG SRC="Jacobs.jpg" width=75 height=101><BR>
Dennis Jacobs</A><BR><BR>
</CENTER>
</BODY>
</HTML>
Bester.htm
<HTML>
<HEAD><TITLE>Jeff Bester</TITLE></HEAD>
<BODY>
<IMG SRC="Bester2.jpg" WIDTH=90 HEIGHT=125 ALIGN=LEFT>
<FONT SIZE=2>
<TABLE>
<TR>
<TD VALIGN=TOP><B>Name:</B></TD>
<TD VALIGN=TOP>Jeff Bester</TD>
</TR>
<TR>
<TD VALIGN=TOP><B>Age:</B></TD>
<TD VALIGN=TOP>37</TD>
</TR>
<TR>
<TD VALIGN=TOP><B>Experience:</B></TD>
<TD VALIGN=TOP>Twelve years climbing. Three years with The Colorado Experience</TD>
</TR>
<TR>
<TD VALIGN=TOP><B>EMT:</B></TD>
<TD VALIGN=TOP>Yes</TD>
</TR>
</TABLE><BR CLEAR=LEFT>
Jeff has led routes in Yosemite, Eldorado, Mount Ranierand Rocky
Mountain National Park. He has participated in expeditions in Denali,
Mexico and Nepal. We are happy to welcome back Jeff for his fourth
year with The Colorado Experience. Jeff will be leading tours to Eldorado
Canyon.
</FONT>
<BODY>
</HTML>
Các trang DuMont.htm, Jacobs.htm cũng thiết kế tương tự.
Logo.htm
<HTML>
<HEAD><TITLE>HEAD</TITLE></HEAD>
<BODY BACKGROUND="Mountain.jpg">
<IMG SRC="TCELogo.gif" WIDTH=550 HEIGHT=60>
</BODY>
</HTML>
