HTML: Tạo Frame sử dụng ngôn ngữ HTML ~ Học Lập Trình Tại Đà Nẵng

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>

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…” >

…..

</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>

</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>

</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>

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>

</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>

<A HREF="Bester.htm"><IMG SRC="Bester.jpg" width=75 height=101> Jeff Bester</A>

Brian DuMont</A>

Dennis Jacobs</A>

</CENTER>

</BODY>

</HTML>

Bester.htm

<HTML>

<HEAD><TITLE>Jeff Bester</TITLE></HEAD>

<BODY>

<TABLE>

<TR>

<TD VALIGN=TOP>Jeff Bester</TD>

</TR>

<TR>

</TR>

<TR>

<TD VALIGN=TOP>Experience:</TD>

<TD VALIGN=TOP>Twelve years climbing. Three years with The Colorado Experience</TD>

</TR>

<TR>

</TR>

</TABLE>

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.

<BODY>

</HTML>

Các trang DuMont.htm, Jacobs.htm cũng thiết kế tương tự.

Logo.htm

<HTML>

</BODY>

</HTML>

Học Lập Trình Tại Đà Nẵng

Recent Posts

Entri Populer

Label

HTML: Tạo Frame sử dụng ngôn ngữ HTML