hot Tuyển gấp 03 vị trí lập trình viên - cơ hội việc làm hấp dẫn!

Thiết kế Template cho Joomla 1.5 (phần 5 - tạo layout)

Posted on April 19, 2008
by Blog.thegioiwebsite.Net Thiết kế web với Joomla |




Phần 5: Tạo Layout
Bước 5.1: Phác thảo trên giấy về bố cục (layout) của template.
Giả sử chúng ta có giao diện với layout như sau:

Joomla-Template-Layout

Bước 5.2: Viết mã HTML để tạo layout nói trên.

Trước đây người ta hay sử dụng kỹ thuật dàn trang bằng bảng (dùng thẻ <table>). Việc dàn trang bằng bảng có ưu điểm là dễ làm nhưng lại có nhược điểm là tốc độ nạp trang chậm và không tối ưu cho các máy tìm kiếm. Do vậy ngày nay chúng ta sử dụng kỹ thuật dàn trang bằng thẻ <div>.

Mở file "index.php" của template "vinaora_template" và gõ vào nội dung sau:

Joomla-Template-Layout

Hoặc copy đoạn mã sau:

<html>
<head>
<title>WELCOME TO VINAORA.COM</title>
</head>
<body>
<div id="top">|-TOP-|</div>
<hr />
<div id="user3-user4">
<div id="user3" style="float:left; width:350px;">|-USER3-|</div>
<div id="user4">|-USER4-|</div>
</div>
<hr />
<div id="main">
<div id="left" style="float:left; width:150px;">|-LEFT-|</div>
<div id="component" style="float:left; width:400px;">|-COMPONENT-|</div>
<div id="right">|-RIGHT-|</div>
</div>
<hr />
<div id="footer">|-FOOTER-|</div>
</body>
</html>

Bước 5.3: Kiểm tra lại layout
Mở trang web và xem template vừa được tạo.

Comments

Leave a Reply