Bày trí nền và khung trong HTML

Admin · 1 Bày trí nền và khung trong HTML – Phần 2 Sat Nov 03, 2012 8:31 pm

Admin

Admin

Họ tên : Nguyễn Ích Hoàn

Bài viết : 3191

Xu : 9210

Thanks : 8
Age

Age : 34
Đến từ : Thanh Hóa

Tài Sản:
.:

HTML có các thẻ trình bày cho phép chia vùng hiển thị của cửa
sổ trình duyệt thành nhiều khung, mỗi khung là một cửa sổ độc
lập, hiển thị một tài liệu HTML khác nhau.
3. Khung – Frames
Khung cho phép người thiết kế hiển thị đồng bộ nhiều tài
liệu HTML khác nhau để tiện theo dõi, so sánh. Ví dụ, trong
khung bên trái hiển thị các nút bấm, còn khung bên phải hiển
thị tài liệu tương ứng.

3.1 Trang trí khung :

Trang HTML thực hiện bày trí các khung (gọi là frameset
document) có cấu trúc khác trang thông thường, không có khung.

Trang thường có 2 phần, HEAD và BODY. Trang bày trí khung có HEAD và FRAMESET thay cho BODY.

Thành phần FRAMESET tổ chức các khung trong cửa sổ trình
duyệt. Nó cũng có thể chứa thẻ NOFRAMES để xử lí trường hợp
trình duyệt không hỗ trợ frame.

Các thành phần thông thường khác vốn nằm trong BODY không
được xuất hiện trước thẻ mở FRAMESET. Nếu không, thành phần
FRAMESET sẽ bị bỏ qua.

Ví dụ:

Dưới đây là một ví dụ đơn giản.

Bày trí nền và khung trong HTML – Phần 2 20120821_Baytrinenvakhung_p2_1

Bày trí nền và khung trong HTML – Phần 2 20120821_Baytrinenvakhung_p2_1

Đoạn mã trên sẽ tạo 3 khung, được bài trí như dưới đây.

Bày trí nền và khung trong HTML – Phần 2 20120821_Baytrinenvakhung_p2_2

Hình VI.1. Kết quả chạy đoạn code ví dụ.

Khi trình duyệt khách không hỗ trợ khung thì các khung sẽ
không được hiển thị mà thành phần NOFRAMES sẽ được xử lí.

3.2 Thành phần FRAMESET :

Thẻ FRAMESET dùng để phân chia vùng hiển thị trong cửa sổ
trình duyệt thành các khung hình chữ nhật. Mỗi khung hình chữ
nhật gọi là một frame, được định nghĩa bằng thẻ FRAME.

a. Các thuộc tính và ví dụ minh họa

rows = Danh sách các độ cao của các khung.

Danh sách gồm nhiều phần tử, cách nhau dấu phẩy. Mỗi phần
tử xác định độ cao (số dòng !) của một khung. Chia chiều đứng
thành bao nhiêu khung thì danh sách có bấy nhiêu phần tử.

Chiều cao thể hiện bằng :

- số pixel,

- tỷ lệ phần trăm chiều cao màn hình,

- hay tỷ lệ phần chiều cao còn lại.

Giá trị mặc định là 100%, tức chỉ có một khung theo chiều ngang.

cols = Danh sách các độ rộng của các khung.

Ý nghĩa tương tự như trên.

Giá trị mặc định là 100%, tức chỉ có một khung theo chiều dọc.

Thuộc tính row thiết lập việc chia khung theo chiều ngang trong
một frameset. Nếu không định nghĩa, thì các cột trong khung sẽ
chiếm toàn bộ chiều cao vùng hiển thị.

Thuộc tính cols thiết lập việc chia khung theo chiều đứng
trong một frameset. Nếu không định nghĩa, thì các dòng trong khung
sẽ chiếm toàn bộ chiều rộng vùng hiển thị.

Phối hợp hai thuộc tính sẽ tạo ra ô lưới các khung.

Các ví dụ.

1- Chia màn hình thành hai nửa: nửa trên và nửa dưới:

Bày trí nền và khung trong HTML – Phần 2 20120821_Baytrinenvakhung_p2_3

Bày trí nền và khung trong HTML – Phần 2 20120821_Baytrinenvakhung_p2_3

2- Chia màn hình thành 3 cột. Cột giữa rộng 250 pixels. Cột
đầu chiếm 25% của phần còn lại và cột thứ 3 chiếm 75% của
phần độ rộng còn lại.

Bày trí nền và khung trong HTML – Phần 2 20120821_Baytrinenvakhung_p2_4

Bày trí nền và khung trong HTML – Phần 2 20120821_Baytrinenvakhung_p2_4

3- Tạo lưới gồm 2 x 3 = 6 khung.

Bày trí nền và khung trong HTML – Phần 2 20120821_Baytrinenvakhung_p2_5

4- Chia chiều đứng màn hình thành 4 khung. Khung thứ nhất
chiếm 30% của chiều cao vùng hiển thị. Khung thứ hai có chiều
cao cố định 400 pixel. Dấu sao có nghĩa là hai khung thứ 3, thứ 4
chia nhau phần còn lại. Khung thứ 4 có chiều cao là "2*", gấp
đôi khung thứ 3 (vì "*" tương đương với 1*).

Nếu chiều cao vùng hiển thị là 1000 pixel thì độ cao của
các khung 1,2,3,4 lần lượt là: 300, 400, 100, 200 pixel !.

Bày trí nền và khung trong HTML – Phần 2 20120821_Baytrinenvakhung_p2_6

Bày trí nền và khung trong HTML – Phần 2 20120821_Baytrinenvakhung_p2_6

b. Chia khung lồng nhau và thành phần FRAME

Việc chia khung có thể lồng nhau nhiều mức.

Ví dụ: chia chiều rộng thành 3 khung đứng, sau đó khung ở giữa lại được chia thành 2 phần trên và dưới.

Bày trí nền và khung trong HTML – Phần 2 20120821_Baytrinenvakhung_p2_7

Bày trí nền và khung trong HTML – Phần 2 20120821_Baytrinenvakhung_p2_7

Thẻ FRAME định nghĩa một khung hình cụ thể (trong nhiều khung hình của frameset).

Các thuộc tính:

name = Tên của khung.

Có thể dùng tên này để làm đích của mối siêu liên kết.

src = URI

Trỏ đến trang tài liệu sẽ hiển thị trong khung.

noresize

Không cho phép co giãn lại kí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 là giá trị mặc định.

♦ yes: Luôn có thanh cuộn.

♦ no: Luôn không có thanh cuộn.

frameborder = 1 | 0

Thiết lập đường biên.

♦ 1: Có đường biên giữa khung đang xét với các khung kề nó. Đây là giá trị mặc định.

♦ 0: Không có đường biên giữa khung đang xét với các khung kề nó.

marginwidth = số pixel

Thiết lập độ rộng lề chiều rộng = khoảng trống giữa phần
hiển thị nội dung và biên trái, biên phải. Giá trị mặc định
tuỳ theo bộ duyệt.

marginheight = số pixel

Thiết lập độ rộng lề chiều cao = khoảng trống giữa phần
hiển thị nội dung và biên trên, biên dưới. Giá trị mặc định
tuỳ theo trình duyệt.

Lưu ý: Nội dung trong một frame không được thuộc về chính trang tài liệu định nghĩa frameset.

4. Thiết lập Target, thẻ NOFRAME và IFRAME
4.1 Thiết lập Target :

Thuộc tính target là để xác định tệp tài liệu HTML sẽ hiển thị trong khung.

target = tên khung đích.

Thiết lập tên của khung mà tài liệu sẽ mở ra trong khung đó.

Thuộc tính này dùng với các thành phần tạo mối liên kết: (A, LINK), image map (AREA), và FORM.

4.2 Thẻ NOFRAMES :

Thành phần NOFRAMES thiết lập nội dung cần hiển thị khi trình
khách không hỗ trợ frame hoặc đã tắt chức năng hiển thị frame.

Thành phần NOFRAMES đặt ở phần cuối của thành phần FRAMESET.

Ví dụ:

Bày trí nền và khung trong HTML – Phần 2 20120821_Baytrinenvakhung_p2_8

Bày trí nền và khung trong HTML – Phần 2 20120821_Baytrinenvakhung_p2_8

4.3 Nhúng frame - thẻ IFRAME :

Thành phần IFRAME cho phép người thiết kế chèn một frame vào
giữa một khối văn bản text và hiển thị một tài liệu HTML khác
bên trong.

Thuộc tính SRC thiết lập tài liệu nguồn để hiển thị trong frame.

Các thuộc tính:

name = tên. để tham chiếu trong tài liệu.

width = Độ rộng của inline frame.

height = Độ cao của inline frame.

Ví dụ:

Bày trí nền và khung trong HTML – Phần 2 20120821_Baytrinenvakhung_p2_9

Bày trí nền và khung trong HTML – Phần 2 20120821_Baytrinenvakhung_p2_9

Inline frames mặc định là không co giãn được, không cần phải nêu rõ noresize.

Hết

Nguồn: Sưu tầm Internet

1 Bày trí nền và khung trong HTML – Phần 2 Sat Nov 03, 2012 8:31 pm

Admin