Bạn muốn viết một trang Web?
Bài 9. Frames
Bạn muốn viết một trang Web?
Bài 9. Frames |
|
Sau đây là liên kết tới một trang Web có dùng frames, bạn hãy click vào liên kết để xem trang Web đó. Sau khi xem xong bạn nhớ nhấn nút Back trên toolbar của browser để trở lại bài học này.
Bạn cũng thấy là trong ví dụ vừa rồi cửa sổ browser được chia làm hai cột, mỗi cột như vậy được gọi là một frame. Để tạo một trang Web có hai frames như vậy, bạn phải viết tới ba trang Web khác nhau: một trang chính làm khung chứa hai frames và hai trang phụ cho hai frames.
Trước hết bạn hãy viết ba trang để làm frames cho các phần thực tập trong bài này. Bạn mở trang khuon.html và thêm vào phần BODY chữ "Trang 1", save nó dưới tên gọi là trang01.html vào một folder con tên là vidu (ví dụ) ở trong folder làm việc của bạn. Tương tự như vậy, viết một trang với chữ "Trang 2" và một trang với chữ "Trang 3" trong phần BODY, rồi save chúng trong folder vidu, đặt tên là trang02.html và trang03.html
Bây giờ chúng ta hãy bắt tay vào viết một trang chính để chứa hai frames. Bạn hãy mở trang khuon.html trong Notepad, xoá đi các tags <BODY></BODY> và thay thế chúng bằng các tags <FRAMESET></FRAMESET> như sau:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
Đó là các tags dùng để tạo nên bộ khung chứa các frames. Bạn nhớ cho kỹ nghe: trang chính để chứa frames không có phần <BODY></BODY> nữa, mà thay vào đó là <FRAMESET></FRAMESET>.
Tiếp theo đây bạn sẽ đưa hai frames vào khung nói trên bằng cách dùng tag <FRAME>:
<FRAMESET COLS="50%,50%">
<FRAME SRC="vidu/trang01.html">
<FRAME SRC="vidu/trang02.html">
</FRAMESET>
Viết như vậy có nghĩa là frame thứ nhất là trang trang01.html, còn frame thứ hai là trang trang02.html. Ở đây tôi đã đẩy các dòng chứa tag FRAME sang phải một chút để cho dễ đọc.
Ngoài ra bạn đừng quên attribute COLS="50%,50%" trong tag <FRAMESET>. Attribute này dùng để báo cho browser biết rằng trang chính sẽ được chia thành hai cột (COLS là chữ viết tắt của Columns, tức là cột), mỗi cột có chiều rộng bằng 50% chiều rộng của cửa sổ chính.
Đến đây bạn hãy save trang vừa soạn vào folder làm việc của bạn, đặt tên cho nó là trang09.html. Mở trang09.html trong browser, bạn sẽ thấy nó giống như thế này: trang frames của bạn.
Thay vì cho chiều rộng của frame bằng giá trị phần trăm như trên, bạn cũng có thể cho bằng pixels, như trong đoạn sau:
<FRAMESET COLS="170,*">
<FRAME SRC="vidu/trang01.html">
<FRAME SRC="vidu/trang02.html">
</FRAMESET>
Viết như trên có nghĩa là cột thứ nhất có chiều rộng bằng 170 pixels, còn lại bao nhiêu thì dành hết cho cột thứ hai.
Sau khi Save và Refresh, bạn sẽ thấy như thế này: trang frames của bạn.
Cứ như thế bạn muốn chia trang chính làm bao nhiêu frames cũng được, chỉ việc chèn thêm tag <FRAME SRC="file"> vào trong các tags <FRAMESET></FRAMESET>, trong đó file là đường dẫn và tên trang Web của frame mới.
Nếu muốn chia trang chính làm hai phần nằm ngang (hai hàng) thay vì hai cột, thì trong <FRAMESET> bạn dùng attribute ROWS thay vào chỗ của COLS, như trong ví dụ sau:
<FRAMESET ROWS="170,*">
<FRAME SRC="vidu/trang01.html">
<FRAME SRC="vidu/trang02.html">
</FRAMESET>
Bạn sẽ thấy như thế này: trang frames mới của bạn.
Bạn cũng có thể chia mỗi frame thành các frames nhỏ hơn nữa bằng cách lồng các tags <FRAMESET></FRAMESET> vào nhau. Như trong ví dụ sau, chúng ta sẽ chia frame phía dưới thành hai cột, cột thứ nhất là trang02.html, cột thứ hai là trang03.html.
<FRAMESET ROWS="170,*">
<FRAME SRC="vidu/trang01.html">
<FRAMESET COLS="25%,75%">
<FRAME SRC="vidu/trang02.html">
<FRAME SRC="vidu/trang03.html">
</FRAMESET>
</FRAMESET>
Trong browser bạn sẽ thấy: trang frames mới của bạn.
Bạn lưu ý là dùng nhiều frames quá làm cho trang Web của bạn trở nên rất khó coi. Thông thường chỉ nên dùng hai frames thôi. Trên thực tế, người ta hay chia một trang làm hai cột, cột bên trái được dùng làm mục lục, gồm các liên kết tới những phần khác nhau trên website. Khi người xem click lên một liên kết trong mục lục ở frame bên trái thì trang Web tương ứng sẽ được mở ra ở frame bên phải, như trong ví dụ sau:
Để làm được như trong ví dụ vừa rồi, bạn viết một trang với phần FRAMESET như sau:
<FRAMESET COLS="170,*">
<FRAME SRC="vidu/mucluc.html">
<FRAME SRC="vidu/trang01.html" NAME="main">
</FRAMESET>
Trong đó frame thứ nhất chứa trang mucluc.html (bạn sẽ viết trang này ngay sau đây), còn frame thứ hai chứa trang01.html. Ngoài ra tôi đã dùng attribute NAME="main" để đặt tên cho frame thứ hai là "main". Bạn muốn đặt tên gì cũng được, ở đây tôi dùng "main" để chỉ rằng đó là frame chính.
Bạn hãy save trang này vào folder làm việc của bạn, đặt tên cho nó là trang09b.html.
Tiếp theo bạn viết trang mục lục, gồm các liên kết tới ba trang là trang01.html, trang02.html và trang03.html.
<BODY>
<P><FONT FACE="Arial" SIZE="4" COLOR="#0000ff">Mục lục</FONT></P>
<P><A HREF="vidu/trang01.html" TARGET="main">Trang 1</A></P>
<P><A HREF="vidu/trang02.html" TARGET="main">Trang 2</A></P>
<P><A HREF="vidu/trang03.html" TARGET="main">Trang 3</A></P>
</BODY>
Tôi dùng tags <A></A> để tạo liên kết như thường lệ. Tuy nhiên trong đó có một attribute mới là TARGET="main". Ý nghĩa của nó là trang Web liên kết sẽ được mở ra trong frame mang tên là "main". Nếu không có attribute này thì khi click lên một liên kết, trang Web liên kết sẽ được mở ra ngay trong frame chứa liên kết đó.
Bạn hãy save trang này vào folder làm việc của bạn, đặt tên cho nó là mucluc.html. Như vậy là xong rồi đó, bạn hãy mở trang09b.html trong browser và thử click lên các liên kết trong frame mục lục xem sao.
<-- Trang trước
|
Tiếp theo -->
|
|
 nguyen-chi@hcm.vnn.vn
|