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
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 đó :
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 Colorado
Experience</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 Ranier
and Rocky
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>