Học Làm Web

Tự học thiết kế trang web từng bước từng bước một – bài 10 + 11

Bài này chúng ta sẽ học lại các thẻ và học bổ sung thêm các thuộc tính của chúng để có thể canh lề, chỉnh màu sắc chữ, màu nền cho một vùng văn bản, đường viền của table trong trang thiết kế của chúng ta.

MÃ: CHỌN TẤT CẢ
<body bgcolor="#0000FF">
<p>Đây sẽ là ví dụ trang web có nền màu xanh</p>
</body>

Giả sử bạn có đoạn mã trên, thì khi xem trang, màu nền sẽ đỏ rực. Đó là bởi vì thuộc tính bgcolor, ở đây ta đặt bgcolor=”#0000FF” để chỉnh màu nền thành màu đỏ.

#0000FF chính là mã màu theo hệ thập lục (hệ 16). Bạn xem thêm bảng mã màu cho web

Thuộc tính bgcolor có giá trị màu và có thể áp dụng cho thẻ body, thẻ p, thẻ span, thẻ table hoặc td

Tuy nhiên, thuộc tính này bị phản đối, vì vậy, bạn cũng cần học cách thiết kế theo kiểu mới, thay thuộc tính này bằng style=”background-color:#0000FF” , mã màu của bạn có thể khác màu xanh, hãy tra bảng để sử dụng.

Trong bài này chúng ta sẽ “nghiên cứu” dạng trang web có chia khung. Kỹ thuật thiết kế trang web dạng này ngày nay không còn được ưa chuộng bởi tính thẩm mỹ của nó. Tuy nhiên, không vì thế mà bạn không cần biết. Nó sẽ hữu ích trong những trường hợp cần thực hiện trang web chú trọng nội dung và có thể thiết kế nhanh gọn trong một vài ngày (đặc biệt là nếu bạn trình bày một cuốn sách theo kiểu có mục lục bên trái / bên phải trang, nội dung là phần còn lại) hơn là loay hoay với việc thiết kế dạng không chia khung. Vì vậy, trang web có chia khung cũng vẫn còn hữu ích. Nào, ta bắt đầu:

Bạn thử khám phá trang web này: http://khoancatbetong.com/tuts/thiet-ke-web/frames.html . Bạn có để ý thấy rằng trang web được chia làm 3 phần rõ ràng: 1. Đỉnh trang; 2. Phần bên trái (menu / navigator). 3. Phần thể hiện nội dung chính.

Bây giờ bạn thử vào menu View -> Source để xem thử trang web này thiết kế kiểu chi mà hay quá vậy ta? Ngạc nhiên thay, trang web gì chỉ có ngắn ngủn sau:

MÃ: CHỌN TẤT CẢ
<html>
<head>
<title>Trang web co su dung frame</title>
</head>
<frameset rows="20%,*">
<frame src="title.html" name="topframe" />
<frameset cols="22%,*">
<frame src="menu.html" name="menuframe" />
<frame src="content.html" name="mainframe" />
</frameset>
</frameset>
</html>

Với đoạn mã trên bạn không hề tìm thấy dòng “Chuc mung ban! Day la tieu de trang” nằm ở đâu, thế mà nó lại hiển thị khi xem trang. Rồi nguyên cả đoạn:

Day la trang mac dinh ban dau khi nap frame 

Ban se quay tro lai bai hoc cua ban sau khi quan sat ky phan frame nay

Chuc ban co nhung phut giay thu gian

Bam nut Back tren thanh cong cu trinh duyet de quay ve bai hoc hoc bam Vao day

Cũng không thấy ở đâu cả.

Bạn sẽ không hiểu tác giả làm cách nào mà trang web gọn trơn như vậy? Đó chính là kỹ thuật chia khung(dùng Frame) mà bài học này đề cập. Cuối bài này bạn sẽ thực hiện việc chia khung nhuần nhuyễn.

Lưu ý quan trọng: TRANG WEB CÓ DÙNG FRAME BẠN KHÔNG TÌM THẤY THẺ <BODY>, điều đó không có gì sai cả. Thẻ <frameset> là thẻ mẹ của thẻ <frame> và bắt buộc phải có, thẻ <frameset> xem như thay thể cho thẻ <body>, vì thế thẻ <body> không xuất hiện là điều có thể hiểu được.

Cái trang chính của thực ra là một trang web có chia khung. Bản thân nó không chứa nội dung gì có thể gọi là nội dung cả, mà chỉ chứa thông tin về các trang con trong khung của nó, chính những trang con chứa trong các frame mới là nội dung để tạo thành hình hài và nội dung trang. Chúng ta sẽ lần lượt mổ xẻ xem xét.

Các dòng đầu từ <html> đến </head> bạn đã rõ, chúng tôi không cần phải giải thích lại. Ta xem xét dòng:

MÃ: CHỌN TẤT CẢ
<frameset rows="20%,*">

Dòng trên được diễn giải như sau: khởi tạo một trang web dạng khung, chia trang thành hai phần theo chiều ngang dạng dòng (rows) (tức là kẻ ngang / chia ngang màn hình). Mỗi phần được gọi là một khung (frame – đọc là phờ rem :D ), khung thứ nhất có độ rộng là 20% (của màn hình) (đoạn mã <frameset rows=”20% ) và khung thứ hai chiếm hết chiều dài còn lại của trang (đoạn mã *”>).

Như vậy, ta có thể lờ mờ hình dung trang web của ta (từ trước đến giờ bạn biết nó là một trang dài nguyên vẹn) như một tờ giấy A4, ta dùng bút kẻ một đường ngang qua, đường này cách đỉnh trang tính xuống bằng 20% chiều cao của tờ A4.

chia-khung-80-20.png
chia-khung-80-20.png (4.06 KiB) Đã xem 1561 lần.

Thực tế, chưa có phần chia nào được tạo ra nếu chỉ có mỗi đoạn thẻ:

MÃ: CHỌN TẤT CẢ
<frameset rows="20%,*">
...
</frame>

Thẻ <frameset> có phần nào đó giống với thẻ <table> mà ta từng học ở bài 7, bản thân nó chỉ khởi tạo việc chia khung mà chưa thực sự làm gì.

Chúng ta còn phải thực sự đặt tên cho các phần chia để trình duyệt hiểu được các phần chia này, để làm việc này ta áp dụng thẻ <frame>.

MÃ: CHỌN TẤT CẢ
<frame src="title.html" name="topframe" />

Ta có thể hiểu rằng phần chia 20% giờ có tên name=”topframe” và src=”title.html” nghĩa là khi trang web được chia khung nạp lên, phần topframe sẽ có một trang web mặc định chứa trong file title.htmlđược nạp vào rồi hiển thị lên màn hình.

Vậy phần 80% còn lại thì thế nào? Bạn sẽ hỏi ngay điều này. Ta tiếp tục phân tích:

MÃ: CHỌN TẤT CẢ
<frameset cols="22%,*">
<frame src="menu.html" name="menuframe" />
<frame src="content.html" name="mainframe" />
</frameset>

Phần 80% này ta không để nguyên vẹn mà nó lại được chia làm hai phần. Nếu ta không xẻ đôi thì thay vì đoạn code trên ta chỉ cần đơn giản làm một dòng đại loại như:

MÃ: CHỌN TẤT CẢ
<frame src="main.html" name="mainframe" />

Rồi kết thúc với một </frameset> là xong việc chia khung, và như thế lúc đó trang web chúng ta chỉ gồm có 2 phần như hình minh họa trang A4 bên trên là phản ánh trung thực.

Nhưng như vậy là đơn giản hóa vấn đề thái quá, và bạn sẽ không ngồi đây đọc mấy thứ này.

Sự thực đoạn của ta phân tích kỹ ta thấy cái phần 80% (giờ ta gọi nó là khúc đi hén) mà ta đề cập (giờ ta xem nó là 100%):

MÃ: CHỌN TẤT CẢ
<frameset cols="22%,*">
...
</frameset>
chia-khung-80-tiep.png
chia-khung-80-tiep.png (2.81 KiB) Đã xem 1559 lần.

Khúc này được xẻ dọc thành hai phần theo tỉ lệ 22% và 78% (thể hiện bằng dấu *). Sau khi xẻ trông nó giông giống như sau:

chia-khung-80-tt2.png
chia-khung-80-tt2.png (3.82 KiB) Đã xem 1559 lần.

Vì sao ta biết nó là đường xẻ dọc? Trả lời: vì <frameset cols=”22%,*”> có chữ cols. Quy tắc đọc và vẽ khung của trình duyệt máy tính khá giống với người: từ trên xuống dưới và từ trái sang phải.

MÃ: CHỌN TẤT CẢ
<frame src="menu.html" name="menuframe" />

Phần xẻ dọc nhỏ chiếm 22% chiều ngang màn hình mang tên name=”menuframe”, nó nạp một trangmenu.html làm mặc định src=”menu.html”.

MÃ: CHỌN TẤT CẢ
<frame src="content.html" name="mainframe" />

Phần còn lại chiếm 78% chiều rộng màn hình mang tên name=”mainframe”, nó nạp trang content.htmllàm nội dung mặc định src=”content.html”.

Thực sự, tên các frame là do bạn tự đặt, các tên trên không phải là bắt buộc khi bạn chia khung. Miễn là các tên này là một cụm từ không có chứa khoảng trắng. Nếu thích, phần đỉnh trang bạn có thể đặt làname=”chantrang” cũng không có gì sai trái, nhưng bạn đừng nên tự làm khó mình.

Như vậy, ta hình dung trang web của ta sau 2 lần kẻ (được chia khung) giống như hình minh họa sau đây:

chia-khung.png
chia-khung.png (13.47 KiB) Đã xem 1561 lần.

Đây cũng là hình phản ánh đúng ví dụ ta đang xét tại: http://khoancatbetong.com/tuts/thiet-ke-web/frames.html

Chúng ta sẽ nâng cao hơn với các ví dụ và đoạn mã sau:

MÃ: CHỌN TẤT CẢ
<frameset rows="30%,20%,50%">
<frame src="a.html" name="dong1" />
<frame src="b.html" name="dong2" />
<frame src="c.html" name="dong3" />
</frameset>
frame3ku8.gif
Minh họa trang web chia 3 phần theo chiều ngang
frame3ku8.gif (1.38 KiB) Đã xem 1559 lần.

Nhìn ví dụ trên, căn cứ vào chữ rows ta biết nó kẻ đường chia theo chiều ngang.

Thêm một ví dụ khác:

MÃ: CHỌN TẤT CẢ
<frameset cols="200,*">
<frame src="trai.html" name="menutrai" />
<frame src="phai.html" name="noidungchinh" />
</frameset>
chiakhung-220px.png
Kết quả chia dọc thành hai phần
chiakhung-220px.png (3.93 KiB) Đã xem 1559 lần.

Bạn chú ý lúc thì cols, lúc thì rows để biết rằng cols là để chia theo chiều dọc xuống của màn hình, vàrows để chia theo chiều ngang.

Độ rộng của phần được chia, bạn có thể sử dụng đơn vị đo là phần trăm % hoặc pixel (sử dụng số nguyên không có đơn vị kèm theo) đều được, tùy theo ý đồ thiết kế của bạn. Nếu muốn dùng hết phần còn lại, ta dùng dấu hoa thị *

MÃ: CHỌN TẤT CẢ
<frameset cols="25%,25%,50%">
<frame src="a.html" name="cot1" />
<frame src="b.html" name="cot2" />
<frame src="c.html" name="cot3" />
</frameset>

Sẽ cho kết quả trang web được chia làm 3 phần theo chiều dọc:

chiakhung_252550.png
Chia khung theo chiều dọc
chiakhung_252550.png (1.36 KiB) Đã xem 1559 lần.

Giờ thì ta phối hợp chia theo chiều dọc lẫn chiều ngang để được một trang web chia khung khá phức tạp nhưng thường thấy trong thực tế. Trang này ở dạng có tiêu đề bên trên, bên trái là menu, bên phải là nội dung chính, cuối trang có phần chân trang.

MÃ: CHỌN TẤT CẢ
<frameset rows="20%,*,15%">
<frame src="menu_ngang_tren_cung.html" frameborder="yes" name="header" />
<frameset cols="160,*">
<frame src="menu_ben_trai.html" frameborder="no" name="menu" />
<frame src="phan_chinh_ben_phai.html" frameborder="0" name="noidung" />
</frameset>
<frame src="chantrang.html" frameborder="yes" name="footer" />
</frameset>
chia-khung-phuc-tap.png
Chia khung gồm có đỉnh, trái, phải và chân
chia-khung-phuc-tap.png (1.53 KiB) Đã xem 1559 lần.

Với các ví dụ trên bạn cần thử các thuộc tính cho thẻ <frame> như frameborder, resize hay noresize, độ rộng, framespacing… và mỗi lần chỉnh thì save lại, xem với trình duyệt và ấn F5 để thấy được những chỉnh sửa của bạn có tác dụng gì? => hiểu rõ hơn về cách thiết kế bạn đang thực hiện.

Chú ý: bạn cần phải thiết kế trước các trang để “nhét” / lấp đầy các khung thiết kế và nhớ gõ tên cho đúng để nó có thể nạp vào thì mới xem được hoàn chỉnh trang chia khung của bạn, nếu sai nó sẽ trắng toát hoặc báo lỗi không tìm thấy trang.

<< Quay Lại – Tiếp Theo>>

%d bloggers like this: