html frames - iframe/ khung - khung nội dòng trong htmlDown 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.
Mã nguồn: [Chọn]
<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ỏ.
Mã nguồn: [Chọn]
<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
Mã nguồn: [Chọn]
<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ơnMã nguồn: [Chọn]
<frameset cols="30%,*">
<frame name="menu" target="main">
<frame name="main">
</frameset>
Mã nguồn: [Chọn]
<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à:
Mã nguồn: [Chọn]
<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ụ:
Mã nguồn: [Chọn]
<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
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à!
