BÀI 6 BÀY TRÍ NỀN VÀ KHUNG
6.3. Khung – Frames
HTML có các thẻ trình bày cho ph p chia vùng hiển thị của cửa sổ trình duyệt thành nhiều khung, mỗi khung là một cửa sổ độc lập, hiển thị một tài liệu HTML khác nhau.
Khung cho ph p người thiết kế hiển thị đồng bộ nhiều tài liệu HTML khác nhau để tiện theo dõi, so sánh. Ví dụ, trong khung bên trái hiển thị các nút bấm, c n khung bên phải hiển thị tài liệu tương ứng.
6.3.1. Trang trí khung
Trang HTML thực hiện bày trí các khung (gọi là frameset document) có cấu trúc
khác trang thơng thường, khơng có khung.
Trang thường có 2 phần, HEAD và BODY. Trang bày trí khung có HEAD và FRAMESET thay cho BODY.
Thành phần FRAMESET tổ chức các khung trong cửa sổ trình duyệt. Nó cũng có thể chứa thẻ NOFRAMES để xử lí trường hợp trình duyệt khơng hỗ trợ frame.
Các thành phần thông thường khác vốn nằm trong BODY không được xuất hiện trước thẻ mở FRAMESET. Nếu không, thành phần FRAMESET sẽ bị bỏ qua.
Ví dụ:
Dưới đây là một ví dụ đơn giản. <HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE> </HEAD>
<FRAMESET cols="20%, 80%"> <FRAMESET rows="100, 200"> <FRAME src="frame1.html">
Bài 6. Bày trí nền và khung Trang 45 <FRAME src="frame2.gif"> </FRAMESET> <FRAME src="frame3.html"> <NOFRAMES>
<P>This frameset document contains: .....
</NOFRAMES> </FRAMESET> </HTML>
Đoạn mã trên sẽ tạo 3 khung, được bài trí như dưới đây.
Hình 6.1. Kết quả chạy đoạn code ví dụ
Khi trình duyệt khách khơng hỗ trợ khung thì các khung sẽ khơng được hiển thị mà thành phần NOFRAMES sẽ được xử lí.
6.3.2. Thành phần FRAMESET
Thẻ FRAMESET dùng để phân chia vùng hiển thị trong cửa sổ trình duyệt thành các khung hình chữ nhật. Mỗi khung hình chữ nhật gọi là một frame, được định nghĩa bằng thẻ FRAME.
a. Các thuộc tính và ví dụ minh họa
rows = Danh sách các độ cao của các khung
Danh sách gồm nhiều phần tử, cách nhau dấu phẩy. Mỗi phần tử xác định độ cao (số d ng ) của một khung. Chia chiều đứng thành bao nhiêu khung thì danh sách có bấy nhiêu phần tử.
Chiều cao thể hiện bằng - số pixel,
Bài 6. Bày trí nền và khung
Trang 46 - hay t lệ phần chiều cao c n lại.
Giá trị mặc định là 100%, tức chỉ có một khung theo chiều ngang.
cols = Danh sách các độ rộng của các khung.
ý nghĩa tương tự như trên.
Giá trị mặc định là 100%, tức chỉ có một khung theo chiều dọc.
Thuộc tính row thiết lập việc chia khung theo chiều ngang trong một frameset. Nếu khơng định nghĩa, thì các cột trong khung sẽ chiếm toàn bộ chiều cao vùng hiển thị.
Thuộc tính cols thiết lập việc chia khung theo chiều đứng trong một frameset. Nếu không định nghĩa, thì các d ng trong khung sẽ chiếm tồn bộ chiều rộng vùng hiển thị.
Phối hợp hai thuộc tính sẽ tạo ra ơ lưới các khung. Các ví dụ.
1- Chia màn hình thành hai nửa: nửa trên và nửa dưới: <FRAMESET rows="50%, 50%">
...the rest of the definition...
</FRAMESET>
2- Chia màn hình thành 3 cột. Cột giữa rộng 250 pixels. Cột đầu chiếm 25% của phần c n lại và cột thứ 3 chiếm 75% của phần độ rộng c n lại.
<FRAMESET cols="1*,250,3*">
...the rest of the definition...
</FRAMESET>
3- Tạo lưới gồm 2 x 3 = 6 khung.
<FRAMESET rows="30%,70%" cols="33%,34%,33%">
...the rest of the definition...
</FRAMESET>
4- Chia chiều đứng màn hình thành 4 khung. Khung thứ nhất chiếm 30% của chiều cao vùng hiển thị. Khung thứ hai có chiều cao cố định 400 pixel. Dấu sao có nghĩa là hai khung thứ 3, thứ 4 chia nhau phần c n lại. Khung thứ 4 có chiều cao là 2* , gấp đơi khung thứ 3 (vì * tương đương với 1*).
Nếu chiều cao vùng hiển thị là 1000 pixel thì độ cao của các khung 1,2,3,4 lần lượt là: 300, 400, 100, 200 pixel !.
<FRAMESET rows="30%,400,*,2*">
...the rest of the definition...
</FRAMESET>
b. Chia khung lồng nhau và thành phần FRAME
Việc chia khung có thể lồng nhau nhiều mức.
Ví dụ: chia chiều rộng thành 3 khung đứng, sau đó khung ở giữa lại được chia thành 2 phần trên và dưới.
<FRAMESET cols="33%, 33%, 34%"> ...contents of first frame...
Bài 6. Bày trí nền và khung
Trang 47 ...contents of second frame, first row...
...contents of second frame, second row... </FRAMESET>
...contents of third frame... </FRAMESET>
Thẻ FRAME định nghĩa một khung hình cụ thể (trong nhiều khung hình của frameset).
Các thuộc tính
name = Tên của khung.
Có thể dùng tên này để làm đích của mối siêu liên kết.
src = URI
Trỏ đến trang tài liệu sẽ hiển thị trong khung.
noresize
Khơng cho ph p co giãn lại kích thước
scrolling = auto|yes|no
Thiết lập thanh cuộn.
auto: Xuất hiện thanh cuộn khi cần thiết. Đây là giá trị mặc định. yes: Ln có thanh cuộn.
no: Ln khơng có thanh cuộn.
frameborder = 1|0
Thiết lập đường biên.
1: Có đường biên giữa khung đang x t với các khung kề nó. Đây là giá trị mặc định.
0: Khơng có đường biên giữa khung đang x t với các khung kề nó.
marginwidth = số pixel
Thiết lập độ rộng lề chiều rộng = khoảng trống giữa phần hiển thị nội dung và biên trái, biên phải. Giá trị mặc định tuỳ theo bộ duyệt.
marginheight = số pixel
Thiết lập độ rộng lề chiều cao = khoảng trống giữa phần hiển thị nội dung và biên trên, biên dưới. Giá trị mặc định tuỳ theo trình duyệt.
Lưu ý: Nội dung trong một frame khơng được thuộc về chính trang tài liệu định nghĩa frameset.