You are in: Home Thiết kế Template Thiết kế Template cho Joomla 1.5 (phần 5 - tạo layout)

Download Joomla 1.0.15

joomla-1-0-back-end.png

Download Joomla 1.5.6

joomla-1-5-front-end.png
Thiết kế Template cho Joomla 1.5 (phần 5 - tạo layout)
User Rating: / 8
PoorBest 
Written by VINAORA   
Sunday, 16 December 2007 13:06

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.

Keyword:

  • joomla, template, layout, div
Last Updated ( Friday, 11 January 2008 00:40 )