Hình minh họa khi thiết kế bố cục tiện ích
Về căn bản giao diện của Blog bạn cứ phân ra làm 3 phần: Đầu trang (Header), Thân trang (Page Body) và Chân trang (Footer) Chẳng hạn tôi sẽ thiết kế bố cục tiện ích bào gồm các tiện ích như sau:
+ Đầu trang (Header): Tôi tạo 3 section
- 1 section để thêm 2 tiện ích header logo bên trái và 1 tiện ích HTML bên phải chèn mã quảng cáo.
- 1 section thêm 1 tiện ích Liên kết để tạo menu
- 1 section thêm 1 tiện ích HTML đặt mã quảng cáo
+ Thân trang (Page Body) tôi tạo 3 section:
- 1 Section bên trái đặt tên Main Wrapper lưu tiện ích Blog1 và các tiện ích khác
- 1 Section bên phải đặt tên Sidebar lưu các tiện ích PopularPost, HTML đặt mã quảng cáo
- 1 section dưới chân thêm tiện ích HTML đặt mã quảng cáo chân trang
+ Chân trang (Footer) tôi chia đều ra làm 3 cột với 3 section và với với mỗi section tôi sẽ thêm các tiện ích.
Như vậy tôi đã viết nháp ra ý tưởng, tiêp theo tôi cần đặt tên các id và class cho các vùng để lưu trữ các section, tôi sẽ viết nháp như sau:
Lưu ý quan trọng: Các b:section hay b:widget có thể hoặc không thêm class bên trong nhưng bắt buộc phải đăng ký cho mỗi b:section và b:widget một id khác tên nhau
+ Đầu tiên tôi sẽ sử dụng 1 class chung lấy đồ rộng đều nhau cho cả 3 phần với thuộc tính max-width ví dụ tôi lấy class .container {max-width:1128px;margin:auto}
+ Tiếp theo tôi sẽ đặt HTML theo ý tưởng thiết kế như sau:
- Phần đầu trang (Header)
<header id='header-wrapper'>
<div class='container'>
<!-- section 1 đặt tiện ích logo và tiện ích HTML1 đặt quảng cáo bên phải -->
<b:section class='header' id='header' name='Header' showaddelement='fasle'>
<b:widget id='Header1' title='' lock='true' title='' type='Header'>...</b:widget>
<b:widget id='HTML1' locked='true' title='' type='HTML' >...</b:widget>
</b:section>
</div>
</header>
<section class='container'>
<!-- section 2 đặt tiện ích Danh sách liên kết tạo menu -->
<b:section id='menu' name='Menu' showaddelement='fasle'>
<b:widget id='LinkList1' locked='true' title='Menu' type='LinkList' >...</b:widget>
</b:section>
</section>
<section class='container'>
<!-- section 3 đặt tiện ích HTML2 chèn mã quảng cáo đầu trang ngay trên bài viết -->
<b:section id='top-banner' name='Quảng cáo đầu trang' showaddelement='fasle'>
<b:widget id='HTML2' locked='true' title='' type='HTML' >...</b:widget>
</b:section>
</section>
- Phần thân trang
<section class='container'>
<!-- section 1 lưu tiện ích Blog1 và các tiện ích khác bên trái -->
<b:section class='main-wrapper' id='main' name='Page Body' showaddelement='true'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog' version='1'>...</b:widget>
<b:widget id='HTML3' locked='true' title='' type='HTML' >...</b:widget>
...
</b:section>
<!--section 2 bên phải lấy tên Sidebar lưu các tiện ích -->
<b:section class='sidebar-wrapper' id='sidebar' name='Sidebar' showaddelement='true'>
<b:widget id='PopularPosts1' locked='true' title='Phổ biến' type='PopularPosts' version='1'>...</b:widget>
<b:widget id='HTML4' locked='true' title='' type='HTML' >...</b:widget>
....
</b:section>
<!-- section 3 lưu tiện ích HTML đặt mã quảng cáo chân trang -->
<b:section id='qc_bottom' name='Quảng cáo chân trang' showaddelement='false'>
<b:widget id='HTML5' locked='true' title='' type='HTML' >...</b:widget>
</b:section>
</section>
- Chân trang tạo 3 section lưu tiện ích
<footer id='footer'>
<div class="container">
<!-- section 1 -->
<b:section class='footer' id='footer1' name='Footer 1' showaddelement='true'>
<b:widget id='HTML6' locked='true' title='' type='HTML' >...</b:widget>
</b:section>
<!-- section 2 -->
<b:section class='footer' id='footer2' name='Footer 2' showaddelement='true'>
<b:widget id='HTML7' locked='true' title='' type='HTML' >...</b:widget>
</b:section>
<!-- section 3 -->
<b:section class='footer' id='footer2' name='Footer 3' showaddelement='true'>
<b:widget id='HTML8' locked='true' title='' type='HTML' >...</b:widget>
</b:section>
</div>
</footer>
Khi đặt bố cục tiện ích xong khi tải trang cho ra HTML khi kiềm tra phần tử như sau:
<!-- Đầu trang -->
<header id="header-wrapper">
<div class="container">
<div class="header" id="header" name="Tiêu đề">
<div class="widget Header" id="Header1">...</div>
<div class="widget HTML" id="HTML1">...</div>
</div>
</header>
<!-- Menu -->
<section class="container">
<div class="section" id="menu" name="Menu">
<div class="widget LinkList" id="LinkList1">...</div>
</div>
</section>
<!-- Quảng cáo đầu trang -->
<section class="container">
<div class="section" id="top-banner" name="Quảng cáo đầu trang">
<div class="widget HTML" id="HTML2">...</div>
</div>
</section>
<!-- Thân trang -->
<section class="container">
<div class="main-wrapper section" id="main" name="Phần chính của trang">
<div class="widget Blog" data-version="1" id="Blog1">...</div>
<div class="widget HTML" id="HTML3">...</div>
</div>
<div class="sidebar-wrapper section" id="sidebar" name="Thanh bên">
<div class="widget PopularPosts" data-version="1" id="PopularPosts1">...</div>
<div class="widget HTML" id="HTML4">...</div>
</div>
<div class="section" id="qc_bottom" name="Quảng cáo chân trang">
<div class="widget HTML" id="HTML5">...</div>
</div>
</section>
<!-- Chân trang -->
<footer id='footer'>
<div class="container">
<div class="footer section" id="footer1" name="Footer 1">
<div class="widget HTML" id="HTML6">...</div>
</div>
<div class="footer section" id="footer2" name="Footer 2">
<div class="widget HTML" id="HTML7">...</div>
</div>
<div class="footer section" id="footer3" name="Footer 3">
<div class="widget HTML" id="HTML8">...</div>
</div>
</div>
</footer>
+ Thiết kế css cho các id và class
Đặt các id và class này trong <b:skin> ví dụ:
<b:skin><![CDATA[
#header-wrapper {}
...
]]></b:skin>
và đặt bốc cục ngoài trong <b:template-skin>
<b:template-skin><![CDATA[
body#layout #header-wrapper {}
...
]]></b:template-skin>
Chấm hết bài!!!
