16. HTML - Frame

Thảo luận trong 'HTML' bắt đầu bởi admin, 15/9/15.

Tags:
  1. admin

    admin Administrator Thành viên BQT

    Tham gia ngày:
    5/9/15
    Bài viết:
    42
    Đã được thích:
    0
    Điểm thành tích:
    6
    Frame được sử dụng để phân chia cửa sổ trình duyệt của bạn thành các khu vực khác nhau, mỗi khu vực tải một tài liệu HTML riêng. Một tập hợp các frame trong cửa sổ trình duyệt là một Frameset. Cửa sổ được chia vào các frame theo cách tương tự như các bảng: bên trong các hàng và cột.

    Hạn chế của frame

    Frame được khuyên là không nên dùng, bởi nó có nhiều hạn chế.
    • Thường thì một vài thiết bị nhỏ không đủ lớn để chia thành các frame.
    • Đôi khi trang web của bạn có thể hiển thị khác nhau trên các máy tính khác nhau do độ phân giải của màn hình.
    • Nút back có thể không làm việc như người dùng mong muốn.
    • Vẫn còn có một vài trình duyệt không hỗ trợ công nghệ frame.
    Tạo frame

    Để sử dụng các frame trên trang web, chúng ta sử dụng thẻ <frameset> thay cho thẻ <body>. Thẻ <frameset> xác định cách chia cửa sổ thành các frame. Thuộc tính rows trong thẻ này xác định chiều ngang của frame còn thuộc tính cols xác định chiều dọc của frame. Mỗi frame được chi phối bởi một thẻ <frameset> và nó xác định tài liệu nào sẽ được mở trong frame.

    Ví dụ:
    PHP:
    <!DOCTYPE html>
    <
    html>

    <
    frameset cols="25%,*,25%">
      <
    frame src="frame_a.html">
      <
    frame src="frame_b.html">
      <
    frame src="frame_c.html">
      <
    noframes>
      <
    body>
          
    Your browser does not support frames.
      </
    body>
      </
    noframes>
    </
    frameset>

    </
    html>
    Nhìn vào ví dụ trên, ta thấy có 3 frame tương ứng với 3 files html:

    + frame_a.html:
    PHP:
    <html>
    <
    body style="background-color:#8F8FBD">
        <
    h3>Frame A</h3>
        <
    p><strong>Note:</strongThe framesetframe, and noframes elements are not supported in HTML5.</p>
    </
    body>
    </
    html>
    + frame_b.html:
    PHP:
    <html>
    <
    body style="background-color:#EBC79E">
        <
    h3>Frame B</h3>
    </
    body>
    </
    html>
    +frame_c.html:
    PHP:
    <html>
    <
    body style="background-color:#FFFFCC">
        <
    h3>Frame C</h3>
    </
    body>
    </
    html>
    Kết quả:

    upload_2015-10-5_22-11-57.jpeg


    Các thuộc tính của thẻ <frameset>


    Dưới đây là các thuộc tính quan trọng của thẻ <frameset>:

    cols
    Xác định số cột được chứa trong frameset và kích cỡ của mỗi cột. Bạn có thể xác định độ rộng của mỗi cột theo một trong 4 cách sau:
    • Theo giá trị tuyệt đối pixels. Ví dụ để tạo ra 3 cột dọc, sử dụng cols="100, 500,100".
    • Phần trăm của cửa sổ trình duyệt. Ví dụ để tạo ra thiết lập 3 frame dọc: cols="10%, 80%,10%".
    • Sử dụng biểu tượng gán giá trị (wildcard). Ví dụ để tạo 3 frame dọc, bạn sử dụng cols="10%, *,10%". Trong trường hợp này thì wildcard sẽ chiếm phần còn lại.
    • Độ rộng quan hệ của cửa sổ trình duyệt. Ví dụ để tạo 3 frame dọc, sử dụng cols="3*,2*,1*". Đây là cách thay thế cho việc sử dụng phần trăm. Ở trường hợp này, cửa sổ windows sẽ được chia thành 6 phần, cột đầu sẽ chiếm một nửa màn hình, cột thứ hai chiếm 1/3 và cột thứ ba chiếm 1/6.
    rows

    Thuộc tính này giống như thuộc tính cols và sử dụng các giá trị tương tự, nhưng nó được sử dụng để xác định các hàng của frameset. Ví dụ để tạo 2 frame ngang, bạn sử dụng rows="10%, 90%". Bạn có thể xác định chiều cao của mỗi hàng theo cách tương tự như các cột.

    border
    Thuộc tính này xác định độ rộng của đường viền border của mỗi frame theo pixel. Ví dụ như border="5". Một giá trị bằng không có nghĩa là không có border.

    frameborder

    Thuộc tính này xác định có hiển thị border hay không giữa các frame. Nó nhận giá trị 1 hoặc 0. Ví dụ frameborder=”0” thì xác định là không có border.

    framespacing

    Xác định số lượng khoảng cách giữa các frame trong frameset. Nó nhận giá trị nguyên. Ví dụ framespcing=”10” nghĩa là có 10 pixel khoảng cách giữa các frame.

    Các thuộc tính của thẻ <frame>


    src

    Thuộc tính này được sử dụng để đặt tên của file sẽ được tải trong frame. Giá trị là bất cứ địa chỉ URL. Ví dụ, src=”../html/top_frame.html” sẽ tải một file HTML có trong thư mục HTML.

    name

    Thuộc tính này cho phép bạn đặt tên cho một frame. Nó được sử dụng để chỉ rõ frame nào của tài liệu sẽ được tải trong đó. Nó đặc biệt quan trọng khi bạn muốn tạo các link trong một frame mà tải các trang web trong một frame khác, trong trường hợp đó, frame thứ hai cần một tên để xác định chính nó như là đích tới của link.

    frameborder


    Thuộc tính xác định có hay không border trong frame đã được chỉ; thuộc tính này được quyền ưu tiên trước giá trị được gán trong thuộc tính frameborder của thẻ <frameset>. Và nó nhận giá trị 1 (Yes) hoặc 0 (No).

    marginwidth

    Thuộc tính này cho phép bạn xác định độ rộng của khoảng cách giữa bên trái và phải của border với nội dung trong frane. Giá trị là pixel. Ví dụ marginwidth=”10”.

    marginheight

    Thuộc tính cho phép bạn xác định chiều cao của khoảng cách giữa trên và dưới của border và nội dung của nó. Giá trị là pixel. Ví dụ marginheight=”10”.

    noresize

    Theo mặc định thì bạn có thể đặt lại kích thước cho frame bằng cách nhấn chuột vào border và kéo. Thuộc tính noresize ngăn cản người sử dụng đặt lại kích cỡ. Ví dụ noresize=”noresize”.

    scrolling

    Thuộc tính này điều khiển sự xuất hiện của thanh cuốn xuất hiện trên frame. Nó nhận giá trị “yes”, “no”, hoặc “auto”. Ví dụ scrolling=”no” nghĩa là sẽ không có thanh cuốn (scrollbar).

    longdesc

    Thuộc tính này cho phép bạn cung cấp một đường link tới trang web khác chứa một sự miêu tả dài trong nội dung của frame. Ví dụ longdesc=”framedescription.html”.

    Trình duyệt hỗ trợ cho các frame


    Nếu một người dùng đang sử dụng một trình duyệt cũ hoặc trình duyệt mà không hỗ trợ frame thì khi đó phần tử <noframes> sẽ được hiển thị tới người dùng.

    Vì thế bạn phải đặt một phần tử <body> bên trong phần tử <noframes> bởi vì phần tử <frameset> được hỗ trợ để đổi vị trí của phần tử <body>, nhưng nếu một trình duyệt không hiểu phần tử <frameset> thì nó sẽ hiểu những gì bên trong của phần tử <body> mà có chứa trong phần tử <noframes>.

    Bạn có thể đặt một vài thông báo lịch thiệp tới người dùng của bạn mà đang sử dụng các trình duyệt cũ. Ví dụ Sorry!! your browser does not support frames, như ví dụ trên.

    Các thuộc tính name và target của frame


    Một trong các cách phổ biến về sử dụng các frame là để đặt ví trí các thanh điều hướng trong một frame và sau đó là tải các trang chính trong một frame riêng biệt.

    Ví dụ:

    PHP:
    <!DOCTYPE html>
    <
    html>
    <
    head>
    <
    title>HTML Target Frames</title>
    </
    head>
    <
    frameset cols="200, *">
      <
    frame src="menu.html" name="menu_page" />
      <
    frame src="main.html" name="main_page" />
      <
    noframes>
      <
    body>
      
    Your browser does not support frames.
      </
    body>
      </
    noframes>
    </
    frameset>
    </
    html>
    Tại đây bạn có thể tạo 2 cột để chứa 2 frame. Frame thứ nhất rộng 200 pixel và chứa thanh menu điều hướng được thực hiện bởi file menu.html. Cột thứ hai trong phần trống còn lại và chứa phần chính của trang và được thực hiện bởi file main.html. Đối với ba link có trong thanh menu, chúng ta đã đề cập đến frame mục tiêu như là main_page, vì thế bất cứ khi nào bạn nhấn chuột vào các link trên menu thì link có sẵn sẽ mở trong main_page.

    Dưới đây là nội dung trong menu.html:

    PHP:
    <!DOCTYPE html>
    <
    html>
    <
    body bgcolor="#d5d7f3">
    <
    a href="http://www.vnexpress.net" target="main_page">VNExpress</a>
    <
    br /><br />
    <
    a href="http://www.tuoitre.vn" target="main_page">Tuổi trẻ Online</a>
    <
    br /><br />
    <
    a href="http://www.bbc.com" target="main_page">BBC News</a>
    </
    body>
    </
    html>
    Và nội dung trong main.html:

    PHP:
    <!DOCTYPE html>
    <
    html>
    <
    body bgcolor="#b5dcb3">
        <
    h3>This is main page and content from any link will be displayed here.</h3>
        <
    p>So now click any link and see the result.</p>
    </
    body>
    </
    html>
    Kết quả khi load trang test.html:

    upload_2015-10-6_0-22-31.jpeg


    Bây giờ bạn có thể thử nhấn chuột vào các link có trong menu nhé. Thuộc tính target có thể nhận một trong các giá trị sau:


    Tùy chọnMiêu tả
    _selfTải trang web trong frame hiện tại.
    _blankTải một trang trong cửa sổ trình duyệt mới.
    _parentTải trang trong cửa sổ chính, trong trường hợp frameset đơn là cửa sổ trình duyệt chính.
    _topTải trang trong cửa sổ trình duyệt, thay cho các trang hiện tại.
    targetframeTải trang trong một frame mục tiêu đã đặt tên.
     
    Chỉnh sửa cuối: 6/10/15

Chia sẻ trang này