Xin chào tất cả các bạn, rất vui được gặp lại các bạn trên izwebz, mình là Tommy. Lời đầu tiên tôi xin chân thành cảm ơn tất cả những comments góp ý cũng như ủng hộ của các bạn trong tutorial trước của tôi. Sau này tôi sẽ cố gắng làm thật nhiều tutorials hơn nữa để đáp lại sự ủng hộ nhiệt tình của các bạn.

Trong tutorial thứ hai này, chúng ta sẽ convert từ PSD sang HTML một trang web môi giới du lịch. Dưới đây là giao diện lần này của chúng ta :

demo nature

Cấu trúc div của giao diện này được minh họa như hình sau :

cau truc nature

Vì trong hình trên vẫn chưa thể hiện hết cấu trúc div nên mình xin nói thêm về việc chia div trong giao diện này. Đầu tiên mình có 2 div lớn là div#header_wrapper dùng bao quanh div#headerdiv#wrapper để bao quanh toàn bộ phần còn lại của trang web (mục đích mình để div#header_wrapper nằm ngoài div#wrapper thì đợi qua phần code CSS các bạn sẽ rõ), trong div#wrapper này gồm 2 div là div#primarydiv#footer.

Trong div#primary bao gồm 2 div là div#contentdiv#sidebar. Trong div#content gồm 2 div nhỏ là div#bannerdiv#post_content. Trong div#banner gồm 2 div nhỏ hơn nữa là div#slidediv#welcome. Trong div#post_content gồm các bài post, đối với mỗi post mình sẽ dùng 1 div với class là post_item. Trong div#sidebar mình sẽ dùng thêm một vài div nhỏ nữa là div#holiday, div#quick, div#newsletterdiv#lastest_new.

Cuối cùng là trong div#footer mình sẽ thêm một div nữa là div#info_footer.

Bắt đầu đi xây dựng code HTML nào !!!

#Phần 1: CHUẨN BỊ

Mình viết các thẻ div trước :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Nature layout</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
	
	<div id="header_wrap">
		<div id="header">
		</div><!--end #header-->	
	</div><!--end #header_wrap-->
	
	
	<div id="wrapper">	
		<div id="primary">		
			<div id="content">
				<div id="banner">
				</div><!--end #banner-->
				
				<div id="post_content">
				</div><!--end #post_content-->
			</div><!--end #content-->
			
			<div id="sidebar">
			</div><!--end #sidebar-->
	
		</div><!--end #primary-->
	
		<div id="footer">
		</div><!--end #footer-->
		
	</div><!--end #wrapper-->

</body>
</html>

#Phần 2 : HEADER

Demo của phần 2
Cái phần header này cũng hao hao giống như phần header trong bài bussiness layout, mình sẽ cần một img với file hình logo.png (nằm trong tag a để sau này làm link về homepage) để làm logo. Sau đó cần 3 tag ul, ul#tel ghi thông tin về contact, ul#pages là các pages, ul#nav làm menu của trang. Phần code này bạn đặt trong div#header (nằm trong div#header_wrap) :

<a href="#"><img src="images/logo.png" alt="logo" /></a>
			
<ul id="tel">
	<li>Contact Us by the telephone number bellow</li>
	<li><a href="#">12 (0) 1234 567890</a></li>
</ul>

<ul id="pages">
	<li><a href="#" class="uppercase bold">Home</a></li>                     
	<li><a href="#" class="uppercase bold">About</a></li>
	<li><a href="#" class="uppercase bold">Donate</a></li>
	<li><a href="#" class="uppercase bold">Videos</a></li>
	<li><a href="#" class="uppercase bold">Contact</a></li>
</ul>

<ul id="menu">
	<li><a href="#" class="uppercase bold">Home</a></li>
	<li><a href="#" class="uppercase bold">Donate</a></li>
	<li><a href="#" class="uppercase bold">About us</a></li>
	<li><a href="#" class="uppercase bold">Tour</a></li>
	<li><a href="#" class="uppercase bold">Nature</a></li>
	<li><a href="#" class="uppercase bold">Tips</a></li>
	<li><a href="#" class="uppercase bold">Contact us</a></li>
</ul>

Đó là phần div#header nằm trong div#header_wrap, chúng ta chuyển sang phần div#primary, đầu tiên là phần div#content :

#Phần 3 : CONTENT

Trong div#content chúng ta gồm 2 div nhỏ :

Bước 1 : BANNER (demo)

Trong div#banner chúng ta gồm 2 div nhỏ :


<div id="slide">
</div><!--end #slide-->

<div id="welcome">
</div><!--end #welcome-->

Thứ nhất là div#slide dùng để làm slider, mình cần 1 tag img với hình banner.jpg để làm hình slide, một div#new_tours để ghi thông tin bên phải hình banner, tuy nhiên ở đây mình lại bao quanh div#new_tours bằng 1 div#new_tours_wrap vì sau này code CSS mình sẽ set width cho div#new_tours_wrap rồi khi chỉnh margin, padding cho div#new_tours sẽ ko ảnh hưởng gì đến độ lớn của box div#new_tours_wrap. Đoạn code này trong div#slide :


<img src="images/banner.jpg" alt="banner" />
						
<div id="new_tours_wrap">
	<div id="new_tours">
		<p id="our_new_tours">Our<span>New tours</span></p>
		<p id="intro">
			Đến với <span class="uppercase">nature tours</span> bạn có thể tham quan hoặc tìm kiếm thông tin về các thắng cảnh ở bất kì nơi nào trên thế giới mà bạn muốn.
			<a href="#" class="read_more">Continue reading...</a>
		</p>
		
		<ul id="nav_slide">
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
		</ul>
	</div><!--end #new_tours-->
</div><!--end #new_tours_wrap-->

Chuyển đến div#welcome chúng ta viết code như sau :


<div id="welcome">
	<h1 class="uppercase">Lorem ipsum dolor sit amet</h1>
	
	<p>
		Blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis <a href="#" class="bold">tutorials guides</a>.
	</p>
	
	<img src="images/people.png" alt="people" />
</div><!--end #welcome-->

Bước 2 : POST_CONTENT (demo)

Đối với phần tabbed navigation (bạn thấy trong file PSD), mình dùng 1 tag ul#nav_post, đối với mỗi bài post mình sẽ bao quanh bằng div class là post_item, trong mỗi div.post_item gồm các tag là tag a img (mình lấy img làm link) để làm thumbnail cho mỗi bài post, tag h3 bao quanh tag a làm tiêu đề, cuối cùng là tag p cho đoạn paragraph. Trong div#post_content, bạn viết code như sau :


<ul id="nav_post">
	<li><a href="#">By Destination</a></li>
	<li><a href="#">By Species</a></li>
	<li><a href="#">By Tour Type</a></li>
</ul>

<div class="post_item">
	<a href="#"><img src="images/post_item_1.jpg" alt="post item" /></a>
	<h3><a href="#">Lorem ipsum dolor</a></h3>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
</div><!--end .post_item-->

<div class="post_item">
	<a href="#"><img src="images/post_item_2.jpg" alt="post item" /></a>
	<h3><a href="#">Sed diam nonummy</a></h3>
	<p>Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.</p>
</div><!--end .post_item-->

<div class="post_item">
	<a href="#"><img src="images/post_item_3.jpg" alt="post item" /></a>
	<h3><a href="#">Nam liber tempor</a></h3>
	<p>Nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait.</p>
</div><!--end .post_item-->

<div class="post_item clear">
	<a href="#"><img src="images/post_item_4.jpg" alt="post item" /></a>
	<h3><a href="#">Ut wisi enim</a></h3>
	<p>Lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur.</p>
</div><!--end .post_item-->

<div class="post_item">
	<a href="#"><img src="images/post_item_5.jpg" alt="post item" /></a>
	<h3><a href="#">Duis autem vel</a></h3>
	<p>Legere me lius quod ii est etiam processus dynamicus, qui seacula quarta decima et quinta decima. Modo typi luptatum zzril delenit augue.</p>
</div><!--end .post_item-->

<div class="post_item">
	<a href="#"><img src="images/post_item_6.jpg" alt="post item" /></a>
	<h3><a href="#">Eodem modo typi</a></h3>
	<p>Anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
</div><!--end .post_item-->

#Phần 4 : SIDEBAR

Trong div#sidebar này, mình gồm 4 div nhỏ :


<div id="holiday">
</div><!--end #holiday-->

<div id="quick">
</div><!--end #quick-->

<div id="newsletter">
</div><!--end #newsletter-->

<div id="lastest_new">
</div><!--end #lastest_new-->

Bước 1 : HOLIDAY (demo)

Mình cần 1 tag h3, 1 tag p và 1 cái form :


<h3 class="uppercase bold">Holiday search</h3>
<p class="chosse">Chọn nơi bạn muốn tham quan :</p>

<form action="">
	<p><input type="text" value="Chọn khu vực ..." /></p>
	<p><input type="text" value="Chọn ngày du lịch ..." /></p>
	<p><input type="text" value="Chọn chủ đề ..." /></p>
	<p><input type="text" value="Chọn mức giá ..." /></p>
	<p><input type="submit" value="Search holidays" class="uppercase submit" /></p>
</form>

Bạn thấy với cái input submit tôi thêm class submit, vì sau này trong CSS tôi sẽ định dạng riêng cho các input này.

Bước 2 : QUICK (demo)

Phần div#quick cũng giống như div#holiday :


<h3 class="uppercase bold">Quick search</h3>
<p class="choose">Tìm thông tin nơi bạn tham quan :</p>

<form action="">
	<p><input type="text" value="Country/Code..." class="short" /></p>
	<p><input type="submit" value="Search" class="uppercase submit" /></p>
</form>

Lần này tôi lại cho trường input text có class là short vì bạn nhìn trong file PSD thì thấy những trường input này có width ngắn hơn những trường input khác.

Bước 3 : NEWSLETTER (demo)

<h3 class="uppercase bold">Newsletter search</h3>
<p class="choose">Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet :</p>

<form action="">
	<p><input type="text" value="Country/Code ..." /></p>
	<p><input type="text" value="Search ..." class="short" /></p>
	<p><input type="submit" value="Sign up" class="uppercase submit" /></p>
</form>

Bước 4 : LASTEST_NEW (demo)

Mình dùng một tag ul với id là new, đối với mỗi bài lastest post mình dùng 1 tag li, trong mỗi li gồm 1 tag h4 tiêu đề và đoạn tag p :


<h3 class="uppercase">Lastest new</h3>
					
<ul id="new">
	<li>
		<h4><a href="#">Lorem ipsum dolor sit amet</a></h4>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut claritatem. Investigationes.
		</p>
	</li>
	
	<li>
		<h4><a href="#">Lorem ipsum dolor sit amet</a></h4>
		<p>
			Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores.
		</p>
	</li>
	
	<li>
		<h4><a href="#">Lorem ipsum dolor sit amet</a></h4>
		<p>
			Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero.
		</p>
	</li>
</ul>

#Phần 5 : FOOTER

Trong div#footer mình gồm div#info_footerul#coryright :


<div id="info_footer">
</div><!--end #info_footer-->

<ul id="coryright">
</ul>

Bước 1 : INFO_FOOTER (demo)

Mình đặt tag h3 với id là title để làm cái đầu đề cho phần footer. Mình còn cần 1 tag ul#info để ghi các thông tin của phần footer :


<h3 id="title">
	Lorem ipsum dolor sit amet consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
</h3>

<ul id="info">
	<li id="twitter">
		<h3 class="uppercase bold">Follow on twitter</h3>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat
		</p>
		<a href="#"><img src="images/face.jpg" alt="facebook" /></a>
	</li>
	
	<li id="link">
		<h3 class="uppercase bold">liên kết</h3>
		
		<ul>
			<li><a href="#">Lorem ipsum</a></li>
			<li><a href="#">Duis autem</a></li>
			<li><a href="#">Typi non habent</a></li>
			<li><a href="#">Odio dignissim</a></li>
			<li><a href="#">Accumsan et</a></li>
		</ul>
		
		<ul>
			<li><a href="#">Dolor sit amet</a></li>
			<li><a href="#">FAQs</a></li>
			<li><a href="#">Home</a></li>
			<li><a href="#">Clients</a></li>
			<li><a href="#">Donate</a></li>
		</ul>
		
		<ul>
			<li><a href="#">BBC Vietnamese</a></li>
			<li><a href="#">Quarta decima et</a></li>
			<li><a href="#">Legere me lius</a></li>
			<li><a href="#">Contact Us</a></li>
		</ul>
		
	</li>
	
	<li id="contact">
		<h3 class="uppercase bold">Contact Us</h3>
		
		<p id="tel_number">
			<span class="bold">Tel :</span> 12345 67890
		</p>
		
		<p id="email">
			<span class="bold">Email :</span> jerry2099tom@gmail.com
		</p>
		
		<p id="address">
			Nature tours. Your city. <span>Your state. 123 456 789</span>
		</p>
	</li>
</ul>

Bước 2 : COPYRIGHT (demo)

Trong ul này chỉ cần 2 list để ghi copyright và design :


<ul id="coryright">
	<li>&copy; Nature tours 2013.</li>
	<li>Copyright and design by <span class="uppercase bold">izwebz.com</span>. All right reserved.</li>
</ul>

Vậy là xong code HTML, chúng ta được demo. Các bạn hãy tự validate code HTML nhé !!!

Chúng ta chuyển sang phần tiếp theo là code CSS :

Phần 1 : RESET CSS

Phần reset này mình đã giải thích rất kĩ trong bài bussiness layout rồi nên bây giờ mình không nói lại nữa, nếu có gì không hiểu bạn có thể xem lại bài đó hoặc comment ở phía dưới để hỏi nha !!!


html,body,div,span,h1,h2,h3,h4,h5,h6,
p,a,font,img,b,u,i,ol,ul,li,fieldset,form {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

body {
font-size: 62.5%;
font-family: tahoma, arial, sans-serif;
line-height: 2em;
background: url(images/bg.jpg) repeat left top;
}

ol,ul {list-style: none;}

a {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a img {
border: none;
}

img {
vertical-align: center;
}

:focus {
outline:0;
}

.uppercase {
text-transform: uppercase;
}

.bold {
font-weight: bold;
}

input[type="submit"]:hover {
cursor: pointer;
}

#wrapper {
width: 990px;
margin: 0px auto;
}

Trong phần trên mình có thêm phần input[type="submit"]:hover vì mình muốn khi hover các input submit thì con trỏ có dạng bàn tay. Width của giao diện này là 990px nên mình đặt width cho div#wrapper là 990px (bạn lưu ý là div#wrapper không có phần header, lát nữa mình style cho phần header sau).

Phần 2 : HEADER (demo)

Mình bước sang div#header_wrap, bạn nhìn trong file psd thì thấy phần background dài ra hết cả giao diện luôn, nghĩa là mình sẽ dùng file header_bg.jpg làm background cho repeat-x hết cả màn hình, do đó set width cho nó là auto thì width sẽ dài ra hết chiều ngang màn hình, mà div#wrapper đã có width 990px rồi, chính vì vậy mình phải đặt div#header_wrap nằm ngoài div#wrapper.


#header_wrap {
width: auto;
background: url(images/header_bg.jpg) repeat-x top left;
}

Đến div#header, mình sẽ cho width bằng với div#wrapper (990px), height là 150px (bằng chiều cao của file header_bg.jpg). Mình cho position là relative vì mình sẽ apply absolute position cho các thành phần con của nó :


#header {
width: 990px; height: 150px;
margin: 0px auto;
position: relative;
}

Đến phần logo a img và ul#tel, mình cho position là absolute :


#header a img {
position: absolute;
top: 19px; left: 26px;
}

#header ul#tel {
position: absolute;
top: 14px; right: 0px;
}

Trong ul#tel, mình chỉ định dạng text cho các list, bạn lưu ý là mình cho các tag a float right để nó nằm ngang như trong file PSD :


#header ul#tel li {
font-family: "tahoma", arial, sans-serif;
font-size: 12px;
color: #585755;
}

#header ul#tel li a {
font-family: "Trebuchet MS", tahoma, arial, sans-serif;
font-size: 20px;
color: #373737;
float: right;
}

#header ul#tel li a:hover {
color: #18991e;
}

Trong phần code trên mình có sử dụng font Trebuchet MS, có thể máy bạn không có font này nên mình đã để nó vào trong source code luôn rồi !!!

Đến ul#pages, mình cũng apply absolute position cho nó, còn các li thì mình cho display inline để cho nó nằm ngang :


#header ul#pages {
position: absolute;
top: 70px; right: 0;
}

#header ul#pages li {
display: inline;
}

Đến phần ul#pages li a, mình biến nó thành block để set height, các li lại nằm dọc nên mình cho float right. Mình set height và line-height là 27px (bằng với height của file pages_bg.jpg làm background khi hover cho tag a), định dạng text font-family, size, color, margin, padding và border radius cho giống với file PSD :


#header ul#pages li a {
display: block;
float: left;
height: 27px; line-height: 27px;
font-family: "tahoma", arial, sans-serif;
font-size: 13px;
color: #209a28;
border-radius: 4px; 
behaviour: url(border-radius.htc);
padding: 0px 8px;
margin-left: 14px;
}

Sau đó mình tạo hiệu ứng hover cho tag a và set background cho tag a đầu tiên :


#header ul#pages li a:hover, #header ul#pages li:first-child a{
background: url(images/pages_bg.jpg) repeat-x top left;
color: white;
text-decoration: none;
}

Đến ul#menu, mình cũng áp dụng absolute position, set width 100% để bằng width của phần div#header (tức bằng 990px).

Về phần background, tôi set background là file menu_bg.jpg, ở đây mình dùng kĩ thuật sprite image. Mình cho background repeat-x với background-position là bottom left (phần dưới của tấm hình menu_bg.jpg). Cuối cùng là style về border và radius :


#header ul#menu {
position: absolute;
top: 107px; left: 0;
width: 100%;
background: url(images/menu_bg.jpg) repeat-x bottom left;
border-radius: 5px; 
behaviour: url(border-radius.htc);
border-left: 1px solid #0c932f; border-right: 1px solid #0c932f;
}

Đến li, mình cũng cho display inline :


#header ul#menu li {
display: inline;
}

Đến phần tag a, mình cũng style tương tự như phần ul#pages và định dạng thêm radius :


#header ul#menu li a {
display: block;
float: left;
padding: 0px 22px;
height: 41px; line-height: 41px;
font-family: "tahoma", arial, sans-serif;
font-size: 15px; color: white;
} 

#header ul#menu li:first-child a {
border-radius: 5px 0px 0px 5px; 
behaviour: url(border-radius.htc);
}

Đến hiệu ứng hover, mình cũng dùng file menu_bg.jpg nhưng cho background-position là top left :


#header ul#menu li a:hover {
background: url(images/menu_bg.jpg) repeat-x top left;
color: #0c932f;
text-decoration: none;
}

Phần 3 : PRIMARY

Một vài định dạng cơ bản cho div#primary như width 990px, margin top 33px, overflow hidden (vì mình sẽ float div#contentdiv#sidebar bên trong nó), cuối cùng là border radius :


#primary {
width: 990px;
margin-top: 33px;
overflow: hidden;
border-radius: 6px;
behaviour: url(border-radius.htc);
}

Bước 1 : CONTENT

Mình cho div#content (trong div#primary) có width là 705px (mình đo trong photoshop), float là left, background white và padding 17px :


#primary #content {
width: 705px;
float: left;
background: white;
padding: 17px;
}

Chuyển đến div#banner trong div#content, mình cho width 100% (bằng với width của div#content là 705px) :


#primary #content #banner {
width: 100%;
}

Với div#slide này mình cho width 100% (bằng với width của div#banner là 705px), height là 266px (đo trong photoshop), overflow hidden vì mình sẽ float các thành phần con của nó. Cuối cùng background color là cái màu đen có mã #251d14 :


#primary #content #banner #slide {
width: 100%; height: 266px;
overflow: hidden;
background: #251d14;
}

Đến cái hình slide img, tấm hình này có width là 470px và mình float left :


#primary #content #banner #slide img {
float: left;
width: 470px;
}

Đến div#new_tours_wrap, mình muốn nó float right nên cần phải set width sao cho tổng các width của hình img và div#new_tours_wrap này bằng với width thành phần parent div#slide, tức có tổng là 705px. Như vậy mình lấy width của div#slide trừ width của div#slide img, tức lấy 705px – 470px = 235px, đó chính là width của div#new_tours_wrap :


#primary #content #banner #slide #new_tours_wrap {
width: 235px;
float: right;
}

Bây giờ mình thêm padding cho div#new_tours (nằm trong div#new_tours_wrap) :


#primary #content #banner #slide #new_tours {
padding: 15px;
}

Bạn lưu ý là nếu trong code HTML bạn không thêm div#new_tours_wrap và set width cho div#new_tours thì khi thêm padding vào width thật sự của nó sẽ không còn là 235px ở trên nữa mà sẽ cộng thêm cái padding 15px 2 bên left và right, kết quả là tổng width của div#slide imgdiv#new_tours sẽ lớn hơn width của div#slide !!! Kết quả là div#new_tours sẽ bị tràn, mà lại chịu thêm ảnh hưởng overflow: hidden của div#slide nên nó sẽ biến luôn. Do vậy mình bắt buộc phải thêm div#new_tours_wrap bao ngoài div#new_tours, khi mình thêm bất cứ padding hay margin ở chỗ nào thì vẫn không ảnh hưởng đến width 235px của div#new_tours_wrap.

Đến p#our_new_tours nằm trong div#new_tours, mình định dạng text cho nó :


#primary #content #banner #slide #new_tours p#our_new_tours {
color: white;
font-family: "tahoma", arial, sans-serif;
font-size: 24px;
line-height: 1.3em;
}
 

Đến cái span nằm trong p#our_new_tours, mình muốn nó nằm trên 1 hàng nên cho display: block, định dạng thêm color và size cho giống với file PSD. Tương tự cái p#intro mình cũng định dạng text tương tự:


#primary #content #banner #slide #new_tours p#our_new_tours span {
display: block;
color: #28b028;
font-size: 32px;
}

#primary #content #banner #slide #new_tours p#intro {
color: white;
font-family: "arial", tahoma, sans-serif;
font-size: 12px;
margin: 13px 0px 27px 0px;
}

Đến a.read_more, mình chỉ tạo hiệu ứng hover :


#primary #content #banner #slide #new_tours p#intro a.read_more {
color: #28b028; 
display: block;
}

#primary #content #banner #slide #new_tours p#intro a.read_more:hover {
color: #5383fd;
}

Chuyển sang ul#nav_slide, mình sẽ biến các li của nó thành inline. Đến tag a trong li, các thuộc tính định dạng mình đã giải thích nhiều rồi nên giờ không giải thích nữa, chúng ta lướt nhanh qua nhé :


#primary #content #banner #slide #new_tours ul#nav_slide li {
display: inline;
}

#primary #content #banner #slide #new_tours ul#nav_slide li a {
display: block;
float: left;
width: 21px; height: 22px;
text-align: center; line-height: 22px;
font-family: "arial", tahoma, sans-serif;
font-size: 12px;
color: #cbcbcb;
background: transparent url(images/nav_banner_bg.png) no-repeat top left;
margin-right: 9px;
}

#primary #content #banner #slide #new_tours ul#nav_slide li a:hover {
width: 27px; 
height: 26px; line-height: 26px;
background: transparent url(images/nav_banner_bg_hover.png) no-repeat top left;
text-decoration: none;
}

Vậy là xong phần div#slide nằm div#banner, mình chuyển sang phần div còn lại là div#welcome, mình cho position là relative và margin top là 30px :


#primary #content #banner #welcome {
position: relative;
margin-top: 30px;
}

Đến tag h1, mình đơn thuần cũng chỉ cần style text như font-family, size và color :


#primary #content #banner #welcome h1 {
font-family: "tahoma", arial, sans-serif;
font-size: 24px;
color: #444137;
}

Cái tag p cũng tương tự, ở đây mình cho thêm width là 470px vì mình không muốn width của nó dài ra bằng cái div#banner :


#primary #content #banner #welcome p {
font-family: "arial", tahoma, sans-serif;
font-size: 12px; color: #595447;
margin-top: 19px;
width: 470px;
}

Sau đó tạo hiệu ứng hover cho đường link a trong p :


#primary #content #banner #welcome p a {
color: #28b028;
}

#primary #content #banner #welcome p a:hover {
text-decoration: underline;
}

Còn phần tag img, mình cho nó position: absolute, giá trị top -50px thì thay vì bị đẩy xuống cái img sẽ bị đẩy lên trên, nằm vào phần div#banner (giống với file PSD) :


#primary #content #banner #welcome img {
position: absolute;
top: -50px; right: 46px; 
}

Xong phần div#banner, bạn xem demo phần này.

Chúng ta chuyển sang div#post_content !!!

Set margin top để div#post_content cách ra với div#banner :


#primary #content #post_content {
margin-top: 4px;
}

Đến ul#nav_post, mình cho overflow hidden vì sẽ float các tag a của nó, sau đó thêm radius, còn các li mình muốn nó nằm ngang nên cho nó display thành inline :


#primary #content #post_content ul#nav_post {
overflow: hidden;
border-radius: 6px;
behaviour: url(border-radius.htc);
}

#primary #content #post_content ul#nav_post li {
display: inline;
}

Bây giờ đến tag a, cũng style tương tự như mấy lần trước thôi, lưu ý khi set background mình sử dụng sprite image nhé :


#primary #content #post_content ul#nav_post li a {
display: block;
float: left;
font-family: "Trebuchet MS", tahoma, arial, sans-serif;
font-size: 18px;
color: #444137;
width: 230px; height: 39px;
text-align: center; line-height: 39px;
background: url(images/nav_postitem_bg.jpg) repeat-x top left;
border-right: 1px solid #dad9d3;
}

Mình còn cần thêm border radius cho cái li đầu tiên và cuối cùng, tương ứng với 2 bộ chọn li:first-child ali:last-child a :


#primary #content #post_content ul#nav_post li:first-child a {
border-radius: 6px 0px 0px 6px;
behaviour: url(border-radius.htc);
} 

#primary #content #post_content ul#nav_post li:last-child a {
border-radius: 0px 6px 6px 0px;
behaviour: url(border-radius.htc);
} 

Cuối cùng là tạo hiệu ứng hover cho tag a :


#primary #content #post_content ul#nav_post li a:hover, 
#primary #content #post_content ul#nav_post li:first-child a {
background: url(images/nav_postitem_bg.jpg) repeat-x bottom left;
color: white;
text-decoration: none;
}

Chuyển sang style phần div.post_item, đầu tiên là margin, rồi đến width, bạn cần set width và margin một cách thích hợp sao cho cứ 3 div sẽ nằm trên cùng một hàng, quên mất, để nằm trên một hàng thì phải float chứ !!!


#primary #content #post_content div.post_item {
margin-top: 26px;
margin-right: 13px;
width: 222px;
float: left;
}

Tuy nhiên cái div.post_item thứ 4 nó lại nằm một cách “tréo hèo” giống như demo, lí do vì nó bị ảnh hưởng của thuộc tính float. Bây giờ mình muốn div này xuống hàng mới, có nghĩa cần phải bỏ ảnh hưởng của cái float, tức là dùng thuộc tính clear. Mình float các div về phía left nên phải cho div.post_item thứ 4 này clear là left.

Nhưng vẫn chưa giải quyết xong, mình mới chỉ fix được cái div thứ 4 thôi, còn lỡ như sau này bạn đưa giao diện này vào CMS để sử dụng thì lại bị rất nhiều div sau này nữa. Để khắc phục ổn thoả phần này, trong phần viết code HTML, mình sẽ thêm vào các thẻ div cần clear có class là clear :


#primary #content #post_content div.clear /*div.post_item*/ {
clear: left;
}

Đến phần img của mỗi post, mình cho radius, padding và background cho giống với file PSD :


#primary #content #post_content div.post_item img {
border-radius: 6px;
behaviour: url(border-radius.htc);
padding: 5px;
background: #e9e6df;
}

Okay, đến phần h3 tiêu đề và đoạn văn p thì mình style text giống nhau về font-family, size, color và margin, sau đó tạo hiệu ứng hover cho h3 :


#primary #content #post_content div.post_item h3 a, 
#primary #content #post_content div.post_item p {
font-family: "arial", tahoma, sans-serif;
font-size: 14px;
color: #3a3731;
margin-left: 5px;
}

#primary #content #post_content div.post_item h3 a:hover {
color: #0c932f;
}

Mình cần định dạng lại tag p một chút cho giống với phần design :


#primary #content #post_content div.post_item p {
font-size: 12px;
margin-top: 10px;
}

Bạn xem demo phần post_content.

Bước 2 : SIDEBAR (demo)

Với div#sidebar này, mình set background là #f4f2ec, mình cần float right (div#content mình đã cho float left), tuy nhiên vấn đề ở đây là mình cần xác định được width của nó để khi float right thì nó không bị chui xuống dưới.

Ta thấy rằng width div#sidebar = width div#primary – width div#content,
tuy nhiên cái vấn đề ở đây là khi style mình đã cho rất nhiều padding và margin cho các div này nên cần phải xác định được độ lớn thật sự của chúng.

Thật ra bạn có thể xem qua tất cả các thành phần để cộng các margin và padding của chúng lại để ra width, nhưng làm vậy nó rất mất thời gian. Có một cách nhanh hơn là dùng jQuery !!! Đầu tiên, tất nhiên là bạn phải thêm vào thẻ head trong code HTML một thẻ script để link tới thư viện jQuery bất kì, và một thẻ script gồm code của mình :


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
	
</script>

Sau đó chúng ta viết code như sau :


<script type="text/javascript">
	$(document).ready(function(){
		var w_pri = $('#primary').outerWidth();
		alert(w_pri);
	});
</script>

Trong đoạn code jQuery trên, mình hướng đến đối tượng là div#primary với phương thức là outerWidth, có nghĩa là sẽ lấy cái width của nó bao gồm tất cả padding và margin, kết quả gán vào biến w_pri và alert chúng ra màn hình. Bạn load lại trang thì nó in ra số 990, tức width của div#primary là 990px.

Làm tương tự để xác định width của div#content :


<script type="text/javascript">
	$(document).ready(function(){
		//var w_pri = $('#primary').outerWidth();
		//alert(w_pri);
		
		var w_con = $('#primary #content').outerWidth();
		alert(w_con);
	});
</script>

Kết quả của đoạn code trên là trình duyệt alert ra 739, tức width của div#content. Từ đó ta tính được width của div#sidebar bằng 990px – 739px = 251px.

 

#sidebar {
background: #f4f2ec;
width: 251px;
float: right;
}

Mình sẽ thêm padding cho tất cả các div con của div#sidebar (gồm 4 div là div#holiday, div#quick, div#newsletterdiv#lastest_new) :

 

#sidebar #holiday, 
#sidebar #quick, 
#sidebar #newsletter, 
#sidebar #lastest_new {
padding: 20px;
}

Các tag h3 trong div#sidebar mình style giống nhau :

 

#sidebar h3 {
font-family: "Trebuchet MS", tahoma, arial, sans-serif;
font-size: 14px; color: #3f3b30;
}

Trong phần code HTML, mình có cho một số tag p có class là choose, bây giờ mình style cho nó :

 

#sidebar p.choose {
font-family: "arial", tahoma, sans-serif;
font-size: 12px; color: #3f3b30;
margin-top: 10px;
}

Chuyển sang các tag input trong các form, một vài thuộc tính như margin, font, … thì mình xin bỏ qua, chủ yếu là phần width thì là 202px (cái này phải đo trong photoshop), về height thì mình cho height là 25px bằng height của hình input_bg.jpg, sau đó mình set background là file input_bg.jpg cho repeat-x :

 

#sidebar form input {
margin-top: 19px;
width: 202px; height: 25px; line-height: 25px;
background: url(images/input_bg.jpg) repeat-x top left;
font-family: "arial", tahoma, sans-serif;
font-size: 11px;
color: #999; 
border: 1px solid #cfcdc5; 
border-radius: 5px;
behaviour: url(border-radius.htc);
text-indent: 7px;
}

Mình muốn khi người dùng click vào input thì màu chữ thay đổi, do đó phải dùng bộ chọn input:focus :

 

#sidebar form input:focus {
color: #231f20;
}

Bây giờ mình style tiếp cho những cái input submit (mình đã thêm class là submit), đầu tiên là input submit nằm trong div#holiday. Mình sẽ dùng file s_holidays_bg.jpg để làm background cho nó, mình cần chỉnh lại một vài thứ như width, height, font,… :

 

#sidebar #holiday form input.submit {
width: 196px; height: 34px; 
text-align: left;
line-height: 34px; text-indent: 12px;
border: none; 
background: url(images/s_holidays_bg.jpg) no-repeat top left;
font-family: "Trebuchet MS", tahoma, arial, sans-serif;
font-size: 15px; 
color: white;
}

Đến các input submit trong div#quick, div#newsletter, mình dùng file submit.jpg làm background và chỉnh lại một vài thứ giống như ở trên :

 

#sidebar #quick input.submit, 
#sidebar #newsletter input.submit {
text-align: left;
height: 28px; line-height: 28px;
background: url(images/submit.jpg) repeat-x top left;
font-family: "Trebuchet MS", tahoma, arial, sans-serif;
font-size: 15px; 
color: white;
width: auto;
}

Tiếp đến input với class là short, chúng có width ngắn hơn các input khác :

 

#sidebar form input.short {
width: 118px;
float: left;
margin-right: 10px;
}

Phần cuối của div#sidebardiv#lastest_new, tag h3 thì mình không cần style, chỉ có phần ul#new thôi, cũng chỉ một vài style đơn giản về text, mình cũng đã nói nhiều rồi nên giờ xin lướt qua luôn phần này (bài viết dài quá cũng hơi mỏi tay, hihihihi :D) :


#sidebar #lastest_new ul#new li {
margin-top: 20px;
}

#sidebar #lastest_new ul#new li h4 a, #sidebar #lastest_new ul#new li p {
font-family: "arial", tahoma, sans-serif;
font-size: 14px;
color: #3f3b30;
}

#sidebar #lastest_new ul#new li h4 a:hover {
color: #0c932f;
}

#sidebar #lastest_new ul#new li p {
font-size: 12px;
} 

Mình đã làm hết phần div#primary chưa nhỉ ? Vẫn còn một vấn đề nữa cần phải giải quyết, đó là 2 div content và sidebar có height không bằng nhau. Rất đơn giản, ở đây mình sẽ áp dụng kĩ thuật faux column với file faux_column.jpg, bạn quay lại phần div#primary ở trên và gõ thêm dòng lệnh như sau là sẽ khắc phục được cái này :


#primary {
background: url(images/faux_column.jpg) repeat-y top left;
}

Chúng ta chuyển qua phần cuối cùng của giao diện !!!

Phần 4 : FOOTER

Div#footer thì có width là 990px và thêm margin top :


#footer {
width: 990px;
margin-top: 20px;
}

Bước 1 : INFO_FOOTER (demo)

Mình thêm background và border radius cho div#info_footer :


#footer #info_footer {
background: #f4f2ec;
border-radius: 6px;
behaviour: url(border-radius.htc);
}

Với tag h3#title, mình cho width bằng với width của div#info_footer luôn, height là 41px (bằng height của file footer_title.jpg), mình muốn dòng chữ in nghiêng nên cho font-style: italic, tag h3 mặc định là in đậm, mình muốn bỏ đi cái in đậm này nên cho font-weight: normal :


#footer #info_footer h3#title {
width: 990px; text-align: center;
height: 41px; line-height: 41px;
font-family: "arial", tahoma, sans-serif;
font-size: 16px; font-style: italic; font-weight: normal;
background: url(images/footer_title.jpg) repeat-x top left;
color: white;
border-radius: 6px 6px 0px 0px;
behaviour: url(border-radius.htc);
}

Mình sẽ overflow: hidden vì mình sẽ float các li con của nó :


#footer #info_footer ul#info {
overflow: hidden;
}

Mình float left và thêm border right cho các li con của ul#info, do đó cần dùng bộ chọn ul#info > li :


#footer #info_footer ul#info > li {
float: left;
border-right: 1px solid #d8d6ce;
}

Tiếp theo mình style cho các tag h3 và p trong từng li :


#footer #info_footer ul#info li h3 {
font-family: "tahoma", arial, sans-serif;
font-size: 14px;
color: #64522a;
}

#footer #info_footer ul#info li p {
font-family: "arial", tahoma, sans-serif;
font-size: 11px;
color: #757268;
}

Bây giờ mình style cho từng li con một của ul#info. Theo như design trong PSD, mình cần chỉnh width, margin và padding thích hợp cho các li để chúng nằm trên một hàng khi được float như mình đã làm ở trên.

Đầu tiên là ul#info li#twitter, mình set width, margin, padding right và cho luôn padding cho tag p của nó :


#footer #info_footer ul#info li#twitter {
width: 230px;
margin: 17px;
padding-right: 10px;
}

#footer #info_footer ul#info li#twitter p {
margin: 13px 0px 18px 0px;
}

Với ul#info li#link, mình thêm margin và padding, ngoài ra cần cho thêm overflow là hidden vì mình sẽ float các tag ul của nó :


#footer #info_footer ul#info li#link {
overflow: hidden;
margin: 17px;
padding-right: 10px;
}

Mình style cho các ul của li#link, một vài style cơ bản nên có lẽ mình không cần nói nhé :


#footer #info_footer ul#info li#link ul {
float: left;
margin-right: 70px;
margin-top: 14px;
}

#footer #info_footer ul#info li#link ul li {
line-height: 20px;
}

#footer #info_footer ul#info li#link ul li a {
font-family: "arial", tahoma, sans-serif;
font-size: 12px;
color: #757268;
}

#footer #info_footer ul#info li#link ul li a:hover {
color: black;
}

Cuối cùng là ul#info li#contact :


#footer #info_footer ul#info li#contact {
margin: 17px;
border: none;
}

#footer #info_footer ul#info li#contact p#address {
margin: 30px 0px 0px 0px;
}

Với tag span trong p#address, mình muốn nó nằm riêng trên một hàng nên biến nó thành block :


#footer #info_footer ul#info li#contact p#address span {
display: block;
}

Bước 2 : COPYRIGHT (demo)

Phần cuối cùng của layout này – phần ul#coryright, mình thêm margin và text-align là center vì muốn tất cả text của nó đều căn chỉnh ra giữa :


#footer ul#coryright {
text-align: center;
margin-top: 16px;
margin-bottom: 36px;
}

Cuối cùng là style text cho li :


#footer ul#coryright li {
font-family: "arial", tahoma, sans-serif;
font-size: 11px;
}

#FINALLY: REVIEW RESULT

Okay, bạn xem kết quả cuối cùng, mình đã hoàn thành layout của tutorial này.

Nếu bạn có bất kì thắc mắc hoặc ý kiến đóng góp nào, ngoài việc comment ra các bạn cũng có thể liên lạc với mình qua gmail : jerry2099tom@gmail.com hoặc bạn cũng có thể vào facebook của mình.

Okay, I hope you like this tutorial. Thank you for your time and talk to you soon. Goodbye !!!