BÀI HỌC
Bạn có thể tạo khung hay còn gọi là nhiều cửa sổ trong tình duyệt, mỗi cửa sổ là một tập tin HTML nào đấy. Đây là cách thiệt kế bạn thường hay gặp trước đây. Nhưng hiện nay người ta đang có phong trào hạn chế bớt việc tạo khung này. Ty nhiên việc tạo khung mang lại nhiều mặt có lợi như đơn giản hóa việc trình bày trang Web chẳng hạn.
Bạn có thể tạo 2 khung: 1 khung là tóm tắt mục lục (như trong quyển sách chẳng hạn) còn khung kia dùng để hiển tthị những gì bạn chọn trong khung trước. Như vậy sẽ tiện hơn khi thiết kế chọn tiêu đề rồi mở trang sách để đọc, sau đó lại phải nhấn nút Back để quay lại trang mục lục.
Trong trang tạo khung, bạn không được trình bày gì khác ngoài cặp thẻ để tạo khung. Bởi vì nội dung mỗi khung đã được liên kết đến 1 file HTML nào đó rồi. Để tạo khung ta dùng tag <FRAMESET> và </FRAMESET>.

<FRAMESET COLS=x ROWS=x></FRAMESET>
Trong đó x là các giá trị pixel hoặc phần trăm xác định kích thước các cạnh của khung.
Chẳng hạn tạo 1 file mới có nội dung như sau:

<HTML>
<HEAD>
<TITLE>HTMLStudy</TITLE>
</HEAD>
<FRAMESET COLS="30,50,*"></FRAMESET>
</HTML>
Điều này có nghĩa là tạo 3 khung theo chiều đứng, khung đầu rộng 30 pixel, khung giữa rộng 50 pixel và khung thứ ba là phần còn lại của cửa sổ.
 HTMLStudy
 Done
Hoặc 1 file khác

<HTML>
<HEAD>
<TITLE>HTMLStudy</TITLE>
</HEAD>
<FRAMESET ROWS="40%,*"></FRAMESET>
</HTML>
Điều này có nghĩa là tạo 2 khung theo chiều ngang, khung đầu cao 20% chiều rộng cửa sổ và khung thứ 2 là phần chiều cao còn lại của cửa sổ.
 HTMLStudy
 Done
Bạn có thể lồng các cặp thẻ này vào nhau để tạo khung theo chiều ngang và dọc bất kỳ. Sau khi tạo khung xong, bạn phải định dạng từng khung vừa tạo bằng thẻ sau:

<FRAME NAME=framename SRC=URL>
Trong đó framename là tên bạn đặt cho khung để tiện việc chỉ định trong các liên kết sau này. Còn URL là địa chỉ tập tin HTML mà bạn muốn hiển thị trong khung.
Thuộc tính
Ngoài ra bạn còn có thể dùng các thuộc tính sau để định dạng cho thẻ <FRAMESET>:
  • BORDER: Chỉ định độ dày nét của đường ngăn cách các khung bên trong.
  • FRAMESPACING: Chỉ định khoảng cách của đường ngăn cách các khung.
  • FRAMEBORDER: Cho phép hiển thị khung hay không, giá trị của nó là no (0) hoặc yes (1).
Đối với thẻ <FRAME> bạn có thể dùng các thuộc tính sau:
  • MARGINWIDTH và MARGINHEIGHT: Chỉ định khoảng cách lề trái phải và trên dưới của khung so với văn bản bên trong.
  • SCROLLING: Cho phép hiển thị thanh cuốn để cuộn trang hay không. Các giá trị của nó là yesno và auto (tự động xuất hiện thanh cuộn khi nội dung dài hơn cửa sổ).
  • NORESIZE: Không cho phép thay đổi kích thước của khung.
  • FRAMESPACING: Chỉ định chiều rộng của đường ngăn cách khung.
Thẻ NOFRAMES
Thẻ <NOFRAMES> dùng để thông báo dòng văn bản bên trong nó, trong trường hợp trình duyệt không cho phép hiển thị Frame. Nếu bạn thấy dòng này khi chạy chương trình thì bạn hiểu rằng, trình duyệt của bạn không hiển thị được trang Web này bởi vì nó được thiết kế dạng Frame. Muốn sử dụng được bạn phải nâng cấp trình duyệt của bạn lên version cao hơn.

<NOFRAMES>Trình duyệt của bạn không hỗ trợ Frame</NOFRAMES>
Dòng text "Trình duyệt của bạn không hỗ trợ Frame" này chỉ hiển thị khi trình duyệt không hỗ trợ Frame, nếu trình duyệt của bạn hỗ trợ điều này, bạn không thể thấy nó xuất hiện.
THỰC HÀNH
Bạn làm một website dạng sách điện tử, đầu tiên hãy tạo môt trang Web để tạo khung đặt tên là sach.html.
File sach.html:

<HTML>
<HEAD><TITLE>Gioi thieu sach</TITLE></HEAD>
<FRAMESET ROWS="30,*">
  <FRAME NAME="tieude" SRC="tieude.html" NORESIZE>
  <FRAMESET COLS="100,*">
    <FRAME NAME="mucluc" SRC="mucluc.html" NORESIZE>
    <FRAME NAME="noidung" NORESIZE>
  </FRAMESET>
</FRAMESET>
<NOFRAMES>Trình duyệt của bạn không hỗ trợ Frame</NOFRAMES>
</HTML>
Bạn tạo một trang Web dùng làm tiêu đề đặt tên là tieude.html và tạo một trang Web có các danh mục như mục lục của cuốn sách đặt tên là mucluc.html và tạo thêm các trang Web khác chứa nội dung của mỗi đề mục có trong mục lục và đặt tên chúng là trang1.htmltrang2.htmltrang3.html...
File tieude.html:

<HTML>
<HEAD><TITLE>Gioi thieu sach</TITLE></HEAD>
<BODY BGCOLOR=#FFFFFF>
<H3>GIỚI THIỆU SÁCH</H3>
</BODY>
</HTML>
File mucluc.html:

<HTML>
<HEAD><TITLE>Gioi thieu sach</TITLE></HEAD>
<BODY BGCOLOR=#FFFFFF>
<P><A HREF="trang1.html" TARGET="noidung"> Chương 1 </A>
<P><A HREF="trang2.html" TARGET="noidung"> Chương 2 </A>
<P><A HREF="trang3.html" TARGET="noidung"> Chương 3 </A>
</BODY>
</HTML>
Các file trang1.html, trang2.html, trang3.html...:
<HTML>
<HEAD><TITLE>Gioi thieu sach</TITLE></HEAD>
<BODY BGCOLOR=#FFFFFF>
<P>Đây là chương 1
</BODY></HTML>
Tương tự bạn gõ nội dung vào các trang khác.
Cuối cùng, sau khi soạn xong, bạn chạy file sach.html bạn sẽ thấy như hình bên dưới. Khi click vào các liên kết trong trang mucluc bạn sẽ thấy các trang tương ứng hiện lên trong khung noidung. Để làm được việc này, bạn nên chú ý thuộc tính TARGET= trong mỗi liên kết trong thẻ <A> của tập tin mucluc.html. Đó chính là tên khung cửa sổ bạn muốn hiển thị kết quả, tên này chính là tên bạn đã định nghĩa trong thẻ <FRAME> của tập tin sach.html.
Thẻ <NOFRAMES> dùng để thông báo dòng văn bản bên trong nó, trong trường hợp trình duyệt không cho phép hiển thị Frame. Nếu bạn thấy dòng này khi chạy chương trình thì bạn hiểu rằng, trình duyệt của bạn không hiển thị được trang Web này bởi vì nó được thiết kế dạng Frame. Muốn sử dụng được bạn phải nâng cấp trình duyệt của bạn lên version cao hơn.
 HTMLStudy

GIỚI THIỆU SÁCH

Chương 1Chương 2
Chương 3
Đây là chương 1
 Done
by:doan tu tai

Bài viết liên quan

Không có nhận xét nào:

Đăng nhận xét