html frames - iframe/ khung - khung nội dòng trong html

Khung à ....frame thường được dùng để à...ờ. Ví dụ, bạn làm một website, có phần đầu chứ banner, bên trái là dãy menu còn bên phải là nội dung:

Down về và giải nén ra để xem ví dụ
http://sites.google.com/site/hocvuinetsite/frame/frame.zip
Sau khi down về nếu bạn nào không biết giải nén thì nhấp chuột phải vào chọn Extract here

Bắt đầu vào phân tích cái frame này.

Code: [Select]

<html>
<head>
</head>
<frameset cols="20%,*">
<frame name="menu" src="menu.htm">
<frame name="main" src="main.htm">
</frameset>
</html>

Đây là một trang frame đơn giản nhất, nó là một trang gộp lại bởi hai trang menu.htm và main.htm.
trang frame không có tag <body>

frameset: tag này chứa thông tin định dạng cho trang frame và các frame nhỏ bên trong
cols: thuộc tính này sẽ quyết định chiều rộng của hai cột, như ví dụ trên là 20%,*, 20% sẻ là chiều rộng của cột đầu tiên, còn lại là của cột thứ 2.
<frame>: tag này mới chính thức là tag dẫn tới trang mà bạn chỉ định, với thuộc tính src là đường dẫn tới trang bạn muốn!

Còn ở ví dụ, mọi chuyện hơi khác, ở đó bạn thấy có 3 khung tất cả, một khung nằm ngang và hai khung bình thường. Đó là frame chứa frame có hai khung nhỏ.

Code: [Select]

<html>

<head>
<title>trang frame</title>
</head>

<frameset rows="15%,*">
	<frame name="banner" scrolling="no" noresize >
	<frameset cols="10%,*">
		<frame name="menu" target="contents">
		<frame name="main">
	</frameset>
</frameset>

</html>

như là đả nói từ trước, thường người ta dùng frame để tạo một menu, mà để khi click vào frame này mà frame kia thay đỗi, ta cần thuộc tính name và thuộc tính target.
_trong frame menu thêm thuộc tính target với giá trị là tên frame ta muốn chuyễn hướng khi click chuột
_trong trang tương ứng với frame menu, trên phần <head> ta thêm tag <base> với thuộc tính target giá trị cũng là tên frame muốn chuyễn hướng

Chú ý: ta vẫn có thể dơn giản là dùng thuộc tính target giá trị cũng là tên frame muốn chuyễn hướng trong tag <a> (xem lại phần html Link)

Dàn frame
Nói chung và khộng chính xác frame có hai cách dàng đó là hàng và cột!
Để dàng một cái frame nằm ngang(chiều dài hơn rộng) trong tag <frameset> thuộc tính rows với giá trị là chiều cao của frame thí nhất( tính từ trên xuống)

VD:<frameset rows="30%,*">

Để dàng một cái frame đứng(chiều dài bé hơn rộng) trong tag <frameset> thuộc tính cols với giá trị là chiều cao của frame thí nhất( tính từ trên xuống)

VD:<frameset cols="30%,*">

Phân tích khĩ hơn các file ví dụ

Mình cũng đả giai thích sơ qua cho mọi người hiểu ở trên, bây giờ đi sâu vào luôn

mình nói là đó là một cái frame lớn, frmae này là frame chia trang ra thành 2 phần ngang

Code: [Select]

<frameset framespacing="0" border="0" frameborder="0" rows="30%,*">
	<frame name="banner" scrolling="no" target="contents">
</frameset>

Và một cái frame nhõ hơn

Code: [Select]

	<frameset cols="30%,*">
		<frame name="menu" target="main">
		<frame name="main">
	</frameset>

và cả cái trang này được hợp thành bởi cả hai cái này, cái nhỏ hơn chèn bên trong cái lớn hơn

Code: [Select]

<frameset framespacing="0" border="0" frameborder="0" rows="30%,*">
	<frame name="banner" scrolling="no" target="contents">
	<frameset cols="30%,*">
		<frame name="menu" target="main">
		<frame name="main">
	</frameset>
</frameset>

Ở đây ta hiểu là, frame nhỏ hơn, đả thế vào chỗ vị trí frame ngang thứ hai. Còn như ta muốn tạo m65t trang frame, có một cột đứng bên phải, và cột bên trái chia ra làm hai nữa nằm ngang thì code lúc này sẽ là:

Code: [Select]

<frameset cols="50%,*">
	<frame name="left" scrolling="no" noresize target="rtop">
	<frameset rows="50%,*">
		<frame name="rtop" target="rbottom">
		<frame name="rbottom">
	</frameset>
</frameset>

Inlineframe - frame nội dòng
Đây là một hình thức frame dễ xử dụng hơn rất nhiều, ta có thể chèn frame này vào bất cứ đâu trên trang web html bình thường, giống như một phần tử.
để làm được điều đó, bạn dùng tag <iframe> với các thông số sau:
name: cái này không bắt buộc, VD:name="framename"
width:chiều rộng, giá trị % màn hình hay px, VD:width="398"
height:tương tự như trên, VD:height="227"
src:link dẫn tới trang web, có thể là link tuyệ/tương đối(xem lại bài html link), VD:src="http://hocvui.net"
bên trong cặp thẻ iframe bạn có thể chèn một dòng chữ thông báo lỗi hiễn thị frame cũng được
ví dụ:

Code: [Select]

<iframe name="framename" width="398" height="227" src="http://hocvui.net">
Nếu bạn nìn thấy dòng chữ này, tức là trình duyệt của bạn không hỗ trợ inlineframe.
</iframe>

kết quả

Định dạng cho Frame
Định dãng cho frameset
framespacing,border,frameborder
Để 3 thuộc tính này ở tag frameset giá tri này là 0 để không hiện viền khung, trường hợp bạn muốn không cho mọi người nhìn thấy cách bố trí của mình
scrolling thuộc tính quyết định có hiễn thị thanh cuộn khi mà nội dung trang chứa trải dài hơn màn hình hay không, có 3 giá trị: no,auto,yes

no:không bao giờ hiện
auto:tuỳ,cần thì hiện
yes: lúc nào cũng hiện

thuộc tính này đặt trong tag <iframe>

Với iframe tất cả đều tương tự, nhưng đỡ một điều là toàn bộ các thuộc tính đều ở tag <iframe>

bản quyền thuộc http://hocvui.net có copy đi đâu thì cũng cho xin cái bản quyền nha, công sức ngồi viết mà!

Hocvui.net

Trả lời nhanh