Hướng dẫn thiết kế VBB Style

Author:Kusanagi – StylesVN

Lesson 4 : Coding In VB Template

Hãy chắc rằng bạn đã thông suốt 3 lesson đầu để bước vào phần cam go nhất để định hình 1 template hoàn chỉnh Công việc đầu tiên
hãy xem lại 3 bài cũ ,khi bạn đã chuẩn bị xong 1 file xml đã tinh chỉnh ,1 file css với thiết lập màu sắc đã được định hình và dĩ nhiên
ko thể thiếu các img cần thiết cho bộ skin .Lesson4 ta sẽ đi trực tiếp việc making skin AquaMedia thay vì chỉ là lý thuyết như những
skin đầu .Tuy nhiên có 1 số chuyện cần lưu ý
Trong việc coding sẽ thường sử dụng các table và div ,theo kus đối với những bạn mới vào tập làm skin nên bắt đầu từ table trước vì
dùng div sẽ kết hợp thêm với css khi kiến thức về css chưa đủ và còn hạn chế sẽ rất dễ dàng bị lỗi hoặc vỡ toàn bộ skin.Vài lưu ý nhỏ
thế là đủ .Các bạn down img trong file về và chỉnh lại đường dẫn css ,chúng ta sẽ hoàn thiện nó trong chốc lát nữa thôi
*Navbar in AquaMedia:

Vào template header tìm đoạn

Trích:
<a name="top"></a>
Chèn xuống dưới
Trích:
<table border="0" cellpadding="0" cellspacing="0" width="80%" align="center" >
<tr>
<td valign="top" width="52" height="32" align="left"><img src="styles/media/media/head_01.gif" border="0"></td>
<td valign="middle" background="styles/media/media/head_02.gif" width="100%">
[navbar]
</td>
<td valign="top" width="62" height="32" align="left"><img src="styles/media/media/head_03.gif" border="0"></td>
</tr>
</table>
<!-- /logo -->

Vào navbar template .Kiếm:

Trích:
<!-- nav buttons bar -->
Move toàn bộ đoạn code từ chỗ <!-- nav buttons bar --> đến <!-- / nav buttons bar --> và thay vào [navbar] trong header

Lúc này sẽ có 1 chuyện phát sinh class vbmenu_control mang bg xanh => copy vào sẽ đè lên phần navbar cho trước ,kus đã del cái bg
đó tạo có ở 1 class riêng là vbmenu2_control ,bạn hãy đổi các class trong phần vừa copy ấy từ vbmenu_control => vbmenu2_control
Vậy là xong phần này
*Chèn phần banner:
Trong template header ,phía dưới đoạn navbar vừa chèn bạn thêm vào

Trích:
<!--banner -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" >
<tr>
<td width="409" valign="top" height="150" align="left"><img src="styles/media/media/banner_01.gif" border="0"></td>
<td valign="top" background="styles/media/media/banner_02.gif" width="100%">

</td>

Author: Kusanagi - StylesVN

 <td width="177" valign="top" height="150" align="left"><img src="styles/media/media/banner_03.gif" border="0"></td>
</tr>
</table>
Đây là cách thức tạo và chèn banner tự co giãn cơ bản nhất ,banner 3 mảnh ,có thể giãn ra khi site view ở độ phân giải cao hơn .Có thể
xem mẫu và thuộc nằm lòng cái cấu trúc này ,banner sở dĩ co giãn được nhờ phần bg ở giữa lặp lại bao nhiêu lần tùy ý

*Bộ khung bao toàn site:

Tại header phía dưới phần banner vừa chèn .Thêm vào
Trích:
<div style="padding: 10px;" border="0">
<div class="pagetop1" border="0">
<div class="pagetop3" border="0">
<div class="pagetop2" border="0">
</div></div></div>
<table class="tborder2" width="100%" cellpadding="0" cellspacing="0">
<tr><td>
Vào footer add xuống cuối cùng :
Trích:
</td></tr></table>
<div class="pagebottom2">
<div class="pagebottom1">
<div class="pagebottom3">
</div></div></div>
</div>
Ở phần này kus sẽ dùng luôn div để các bạn so sánh .Div sẽ lẹ hơn nhưng việc đặt các thiết lập trong css cũng sẽ khó hơn .Bạn vào file
css để xem thử cách đặt các class này trong css thế nào....Giờ thì phân tích 1 chút công dụng
+<div style="padding: 10px;" border="0">=> Bóp nội dung site nhỏ lại
+<div class="pagetop1" border="0"><div class="pagetop3" border="0"><div class="pagetop2" border="0">=> Phần viền cong của
khung bao
+<table class="tborder2" width="100%" cellpadding="0" cellspacing="0"> => Tạo 2 đường biên dọc (xem class tborder2 trong css)
+3 div phía dưới footer như header

Rồi ta có thể thông qua

*Tạo khung cho các box:

Vào forumhome ,tìm

Trích:
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%"
align="center">
Chèn lên trên đoạn này(Đoạn số 1):
Quote:
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" >
<tr>
<td valign="bottom" width="321" height="80" align="left"><img src="styles/media/media/box_top1.gif" border="0"></td>
<td class="bghead" width="100%"></td>
<td valign="bottom" width="13" height="80" align="left"><img src="styles/media/media/box_top3.gif" border="0"></td>
</tr>
</table>

Author: Kusanagi - StylesVN

 Xuống dưới 1 chút có đoạn:
Trích:
<!-- /main -->
Add xuống dưới (Đoạn số 2):
Trích:
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" >
<tr>
<td valign="bottom" width="149" height="58" align="left"><img src="styles/media/media/box_bottom1.gif" border="0"></td>
<td background="styles/media/media/box_bottom2.gif" width="100%"></td>
<td valign="bottom" width="259" height="58" align="left"><img src="styles/media/media/box_bottom3.gif" border="0"></td>
</tr>
</table>

Đây cũng là cách làm như banner ,sơ đẳng nhất và hiệu quả cũng chẳng tồi tí nào ^^ À nói luôn skin này kus sẽ ko tách box rời ra nên
các bạn khi đọc bài viết số 1 có phần tách rời box có thể cho qua giai đoạn này

Chèn trong phần các box ta sẽ chèn Đoạn số 1 và Đoạn số 2 ở 1 số chỗ thông thường khác : thống kê ,forumdisplay , postbit ......
-Phần thống kê trong forumhome thì chèn Đoạn số 1 trước <!-- what's going on box --> và Đoạn số 2 trên <br /> <!-- end what's going
on box -->

-Ở forumdisplay thì chèn Đoạn số 1 phía dưới <!-- / controls above thread list --> và Đoạn số 2 phía trên <!-- controls below thread
list -->
Okie thế là tạm ổn
*Bỏ info vào khung trong postbit
Cái này cực kì đơn giản bạn kiếm thẻ div phần info muốn bỏ vô khung và thêm vào class="info2" là xong
VD: Phần số bài post của thành viên trong postbit_legency
<div>$vbphrase[posts]: $post[posts]</div>
Sửa thành
<div class="info2">$vbphrase[posts]: $post[posts]</div>
Class info2 bạn vào css để xem chi tiết hơn
Cứ như vậy lần lượt thêm hết khung info thì thôi
*Cơm thêm:
-Các table có class="tborder"=> đoạn này là khung bao của table đó ,bạn xóa nó đi table sẽ mất khung bao và bg bên dưới trong suốt
,áp dụng trong khá nhiều trường hợp
-Phần code trong "postbit_legency" từ đoạn <td class="alt2" width="175"> đến cái </td> gần nhất là phần cột info trái => Áp dụng
cách chèn div ở trên để tạo khung bao
-Việc sử dụng thêm trình duyệt Fire Fox sẽ giúp cho bạn tiết kiệm đáng kể thời gian vì có thể view source chỉ riêng vùng được chọn
,source có màu sắc rất rõ ràng dễ thực hiện hơn so với IE
-Dùng kèm 1 cái notepad và colorspy sẽ là 2 công cụ đắc lực trong việc thiết kế ,coding
-Cuối cùng đừng quên save xml khi làm việc ,chỉ cần 1 sơ xuất nhỏ cả cái styles có thể đi tong ,nhớ chú ý kĩ mấy cái table + div ,mở
ra thì phải đóng lại 1 cái thẻ dư đủ làm site biếng dạng
Giờ thưởng thức thành quả đi nào :D

Author: Kusanagi - StylesVN

Author: Kusanagi - StylesVN