PSD to HTML
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.18 MB, 27 trang )
PSD sang HTML – NATURE LAYOUT
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 :
Cấu trúc div của giao diện này được minh họa như hình sau :
1
2
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#header và div#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#primary
và div#footer.
Trong div#primary bao gồm 2 div là div#content và div#sidebar. Trong div#content gồm 2 div nhỏ là
div#banner và div#post_content. Trong div#banner gồm 2 div nhỏ hơn nữa là div#slide và div#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#newsletter và
div#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 :
Mình viết các thẻ div trước :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
" /><html xmlns=" 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á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>
3
<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>
4
<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>
5
<form action="">
<p><input type="text" value="Country/Code " class="short" /></p>
<p><input type="submit" value="Search" 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_footer và ul#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>
6
<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>
</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>© 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 {
7
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;
8
}
#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;
9
}
Đế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#content và div#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 {
10
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 img và div#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;
}
11
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
a và li:last-child a :
#primary #content #post_content ul#nav_post li:first-child a {
border-radius: 6px 0px 0px 6px;
12
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.
13
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=" /><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#newsletter và div#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;
14
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#sidebar là div#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
15
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 {
16
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 : hoặc bạn cũng có thể vào facebook của mình.
PSD sang HTML – BUSSINESS LAYOUT
Trong bài tut này thì mình sẽ hướng dẫn bạn convert một giao diện website doanh nghiệp từ PSD sang
HTML. Tuy trên izwebz đã có vài tut về PSD sang HTML nhưng mình nghĩ đây là bước quan trọng trong
thiết kế website nên nếu làm thêm vài tutorial nữa chắc cũng không sao.
17
Đây là giao diện chúng ta sẽ làm trong lần này :
Bạn download phần source code về, trong đó folder images đã có file psd để bạn xem thêm. Toàn bộ các hình
cần thiết mình đã slice hết rồi.
Phần đầu tiên, ta sẽ xây dựng code HTML :
Bước 1 :
Đầu tiên, chúng ta viết các thẻ div trước để định ra cấu trúc trang, các bạn hãy xem hình sau để hình dung ra
cấu trúc của trang web :
Theo hình trên, code của chúng ta như sau :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
18
" /><html xmlns=" xml:lang="en" lang="en">
<head>
<title>Business</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="wrapper">
<div id="top_page"></div><! end #top_page >
<div id="header">
<div id="banner"></div><! end #banner >
<div id="featured_post"></div><! end #featured_post >
</div><! end #header >
<div id="content"></div><! end #content >
<div id="footer"></div><! end #footer >
</div><! end #wrapper >
</body>
</html>
Bước 2 : TOP PAGE
Theo như hình trên, các bạn thấy phần top page bao gồm logo của trang, phần phone number và các pages của
trang web. Đối với logo, chúng ta dùng thẻ img ; đối với pages, ta dùng ul ; còn đối với phone, các bạn thấy
nó có background là hình cái phone, do đó chúng ta dùng thẻ a (sau này làm link đến trang contact) để đặt
background, còn cái background xám xám ở ngoài thì cần phải dùng một block element bao ngoài cái tag a để
set width và height, ở đây mình dùng p (vì p là 1 block element). Code của chúng ta như sau (phần code này
bạn đặt trong div#top_page):
<img src="images/logo.png" alt="logo" />
<p id="telephone"><a href="#" class="bold">123-456-7890</a></p>
<ul id="pages">
<li><a href="#" class="bold uppercase">Home</a></li>
<li><a href="#" class="bold uppercase">About</a></li>
<li><a href="#" class="bold uppercase">Services</a></li>
<li><a href="#" class="bold uppercase">Portfolio</a></li>
<li><a href="#" class="bold uppercase">Contact</a></li>
</ul>
Trong code HTML của giao diện này tôi có đặt class bold và uppercase vào một số tags (như các bạn thấy
trong phần code trên), để sau này chúng ta style trong CSS class bold có font-weight là bold và class
uppercase text-transform là uppercase.
Đến đây, chúng ta được giao diện như demo.
Bước 3 : HEADER
Bên trong div#header này sẽ gồm 2 div nhỏ :
a) BANNER
Đối với câu “We have what it takes to take your website to the new height of success” thì ta dùng tag p với id
là success. Đối với câu “Get started here” thì dùng tag p với id là started, ngoài ra trong p#started này mình
cần thêm một tag span nữa nhằm để đặt background là cái hình mũi tên. Cuối cùng là một tag img để để đưa
hình banner vào. Phần code này bạn đặt trong div#banner :
<p id="success">
We have what it takes to take your website to the <span class="uppercase bold">new
height of success</span>
</p>
<p id="started" class="uppercase bold"><span>Get started here</span></p>
<img src="images/banner.png" alt="banner" />
b) Phần FEATURED POST
Ta sẽ dùng tag ul, mỗi bài featured post là một tag li. Mặc dù tag ul đã là block element, nhưng mình phải
dùng thêm thẻ div để bao quanh ul này để khi style CSS, mình đặt padding cho ul thì không ảnh hưởng đến
độ lớn của thẻ div bên ngoài (bạn nên xem lại bài Độ lớn thật sự của box của anh Demon Warlock để hiểu rõ
vấn đề này). Trong mỗi li, chúng ta cần một img và p. Bạn đặt phần code sau trong div#featured_post :
<ul>
<li>
19
<img src="images/post-icon1.png" alt="post icon" />
<p><span class="bold">Save big with us</span>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p>
</li>
<li>
<img src="images/post-icon2.png" alt="post icon" />
<p><span class="bold">Always on time</span>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p>
</li>
<li>
<img src="images/post-icon3.png" alt="post icon" />
<p><span class="bold">Contact Us</span>Lorem ipsum dolor sit amet, consectetur
adipiscing elit.</p>
</li>
</ul>
Bạn có thể xem demo.
Bước 4 : CONTENT
Các post item có style giống nhau nên đối với mỗi post thì chúng ta dùng một tag div có class là post_item.
Phần tiêu đề thì mình dùng thẻ h1 lồng thêm thẻ a link tới post đó.
Một img là tấm hình của mỗi post. Một thẻ p là đoạn paragraph, cuối cùng là thẻ a với class là read_more.
Riêng đối với bài post ở giữa thì nó ko có thẻ a read more và có một unorder list. Trong div#content, code của
chúng ta như sau :
<div class="post_item">
<h1><a href="#">Who we are ?</a></h1>
<img src="images/post-image1.jpg" alt="post image" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tristique tristique
lacus in varius. Donec nec vestibulum ligula. Aenean turpis diam, feugiat a luctus in,
rhoncus eget risus. Maecenas consequat porttitor dui, vitae consequat massa imperdiet
ut. elit ut tempus lobortis, eros leo molestie velit, non egestas augue nulla eget erat.
</p>
<a href="#" class="uppercase bold read_more">Read more</a>
</div><! end .post_item >
<div class="post_item">
<h1><a href="#">What we do ?</a></h1>
<img src="images/post-image2.jpg" alt="post image" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tristique tristique
lacus in varius. Donec nec vestibulum ligula. Aenean turpis diam, feugiat a luctus in,
rhoncus eget risus. Maecenas consequat porttitor dui, vitae consequat massa imperdiet
ut. elit ut tempus lobortis, eros leo molestie velit, non egestas augue nulla eget erat.
</p>
<ul>
<li><a href="#">Website Design</a></li>
<li><a href="#">Blog Design</a></li>
<li><a href="#">Branding design</a></li>
</ul>
</div><! end .post_item >
<div class="post_item">
<h1><a href="#">Why hire us ?</a></h1>
<img src="images/post-image3.jpg" alt="post image" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tristique
tristique lacus in varius. Donec nec vestibulum ligula. Aenean turpis diam, feugiat a
luctus in, rhoncus eget risus. Maecenas consequat porttitor dui, vitae consequat massa
imperdiet ut. elit ut tempus lobortis, eros leo molestie velit, non egestas augue nulla
eget erat.
</p>
<a href="#" class="uppercase bold read_more">Read more</a>
</div><! end .post_item >
Bước 5 : FOOTER
20
Đối với phần cuối cùng này, chúng ta cần 2 tag ul. Tag ul thứ nhất có id là info_footer nêu một vài thông tin
thêm, tag ul thứ 2 có id là copy_power ghi copyright và power bởi WordPress. Trong div#footer, chúng ta
viết nốt phần code cuối cùng :
<ul id="info_footer">
<li>
<h3>Browse Site</h3>
<ul>
<li><a href="#">About our company</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Our Portfolio</a></li>
<li><a href="#">Our Prices</a></li>
<li><a href="#">Online quote form</a></li>
<li><a href="#">Client Testimonials</a></li>
</ul>
</li>
<li>
<h3>Our Testimonials</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tristique
tristique lacus in varius. Donec nec vestibulum ligula. Aenean turpis diam, feugiat a
luctus in, rhoncus eget risus. Maecenas consequat porttitor dui, vitae consequat massa
imperdiet ut. elit ut tempus lobortis, eros leo molestie velit. <span class="bold">Rafi,
GraphicsFuel.com</span>
</p>
</li>
<li>
<h3>From Our Blog</h3>
<p>
<span class="date">July 6, 2013</span>
<span class="bold">Lorem ipsum dolor sit amet, consectetur</span> adipiscing
elit. Etiam tristique tristique lacus in varius. Donec nec vestibulum ligula. Aenean
turpis diam
</p>
<p>
<span class="date">July 6, 2013</span>
<span class="bold">Lorem ipsum dolor sit amet, consectetur</span> adipiscing
elit. Etiam tristique tristique lacus in varius. Donec nec vestibulum ligula. Aenean
turpis diam
</p>
</li>
</ul><! end #info >
<ul id="copy_power">
<li>Copyright © 2013 Business. All rights reserved. Designed by izwebz.com</li>
<li class="uppercase bold">Power by WordPress</li>
</ul><! end #copy_power >
Như vậy là chúng ta đã dựng xong code HTML cho giao diện của mình. Việc còn lại là mình sẽ validate code
“Hát Tê Mờ Lờ”, phần này các bạn hãy tự làm, mình đã validate code rồi.
FINALLY: REVIEW RESULT
Kết hợp các phần code trên, giao diện HTML hoàn chỉnh của chúng ta đã hoàn thành.
Thừa thắng xông lên, chúng ta chơi luôn phần CSS.
Bước 1 : RESET CSS
Đầu tiên ta phải cho tất cả các thẻ có giá trị mặc định trở về 0 hết. Font-size là 100%, vertical-align là baseline
(cái này chắc cũng ko cần vì mặc định đã là baseline rồi), background là transparent.
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;
21
}
Tiếp theo mình sẽ đi reset cái thẻ body. Mình cho font-size là 62.5%, cái này nếu bạn đã xem hết các tut khác
về psd sang html rồi thì chắc đã biết, nhưng mình xin nói lại lần nữa.
Khi cho 62.5% thì ví dụ như nếu là 1em thì bằng 10px, 1.4em = 14px (giá trị px gấp 10 giá trị em). Nói chung
cái này làm cho việc đổi đơn vị từ px sang em hay các đơn vị khác thì dễ hơn thôi. Font-family thì font chính
của mình là tahoma, tiếp đến là arial, cuối cùng luôn phải là sans-serif vì sans và serif là họ của tất cả các font
khác (hơi khó hiểu, nôm na là thế !!). Line-height là 2em nhằm làm cho khoảng cách giữa các dòng giãn ra tí
cho dễ đọc. Chúng ta viết tiếp :
body {
font-size: 62.5%;
font-family: tahoma, arial, sans-serif;
line-height: 2em;
background: #0e0e0e url(images/body_bg.jpg) no-repeat left top;
}
Mình cho màu của background vì các bạn thử bỏ cái màu đi thì background của cả cái màn hình phần trên là
các hình body_bg.jpg còn phần dưới trắng bốc, do đó cho màu nền là #0e0e0e (trùng với cái màu phần dưới
của hình body).
Ngoài ra chúng ta còn cần định dạng thêm một vài cái cơ bản khác nữa :
ol,ul {list-style: none;} /*Bỏ đi mấy cái list style của ol và ul*/
a {
text-decoration: none; /*Bỏ hiệu ứng gạch chân*/
}
a img {
border: none; /*Bỏ border img nếu dùng ảnh làm link*/
}
img {
vertical-align: center;
}
:focus {
outline:0;
}
Bạn có nhớ ở phần trước, mình có cho một số tag có class là uppercase và bold ko ? Mục đích là để định dạng
như sau :
.uppercase {
text-transform: uppercase;
}
.bold {
font-weight: bold;
}
Cuối cùng là div#wrapper bao quanh toàn bộ nội dung trang web. Mình đã đo trong photoshop width và
margin của nó :
#wrapper {
width: 960px;
margin: 37px auto;
}
Sau bước reset này, chúng ta được kết quả như demo.
BƯỚC 2 : TOP_PAGES
Bây giờ chúng ta bước sang style div#top_page :
#top_page {
background: white;
position: relative;
overflow: hidden;
border-radius: 5px 5px 0px 0px;
behaviour: url(border-radius.htc);
}
Ở đây mình cho position là relative vì lát nữa mình sẽ apply absolute positioning cho các children element của
nó. Vì cái logo mình cho float left nên phải đặt overflow là hidden.
Các bạn nhìn kĩ trong psd thì nó có radius ở phía trên nên đặt border-radius. Ngoài ra xin giới thiệu với các
bạn cách hack cái border radius này trong IE, đó chính là file border-radius.htc (file này mình để trong source
code, các bạn có thể down về). Các bạn chỉ cần thêm lệnh behaviour: url(border-radius.htc) là IE sẽ hiển thị
được cái border-radius.
Tiếp theo là đến cái logo, ở trên mình đã nói là cho float left, ngoài ra còn chỉnh margin cho nó nữa chứ :
#top_page img {
22
margin: 36px 0px 25px 41px;
float: left;
}
Kế đến là p#telephone, mình sẽ áp dụng absolute cho tag này, nó nằm ở góc trên bên phải nên ta đặt top và
right là 0. Mình đặt file phone_bg.png làm background, size file này là 221 x 31 px nên đặt width là 221px,
height là 31px. Cuối cùng là đặt background, vì là định dạng png nên màu nền là transparent :
#top_page p#telephone {
position: absolute; top: 0px; right: 0px;
width: 221px; height: 31px;
background: transparent url(images/phone_bg.png) no-repeat top left;
}
Đến cái thẻ a nằm trong p#telephone, đầu tiên mình biến nó thành block. Sau đó chỉnh margin cho nó ra chính
giữa. Đặt background là cái hình phone, để tránh số và hình đè lên nhau thì thêm text-indent. Ngoài ra còn
cần chỉnh size và color khi không di chuột và khi di chuột lên nó nữa nhỉ :
#top_page p#telephone a {
display: block;
font-size: 18px; color: #c9c9c9; text-indent: 30px;
margin: 6px 0px 6px 54px;
background: transparent url(images/phone.png) no-repeat top left;
}
#top_page p#telephone a:hover {
color: #585858;
}
Đến cái ul#pages, mình áp dụng position cho nó :
#top_page ul#pages {
position: absolute;
bottom: 21px; right: 31px;
}
Đến li bên trong ul#pages mình cho nó thành inline để nó thành hàng ngang :
#top_page ul#pages li {
display: inline;
}
Tiếp theo là a bên trong li, mình cần đặt height cho tag a là 24px vì lát nữa khi tạo hiệu ứng hover mình sẽ đặt
background cho a là pages_bg.jpg (file này có height là 24px). Muốn thế thì mình phải biến a thành block
element, nhưng làm thế thì ul của mình lại nằm dọc mất, cho nên mình phải cho float left. Định dạng thêm
font-family, size, color, một chút margin, padding và border radius nữa. Chúng ta viết tiếp :
#top_page ul#pages li a {
font-family: "arial", tahoma, sans-serif;
font-size: 12px; color: #808080;
display: block; height: 24px; float: left;
line-height: 24px; margin-right: 37px;
padding: 0px 15px;
border-radius: 5px; behaviour: url(border-radius.htc);
}
Bây giờ mình tạo hiệu ứng hover như tôi nói ở trên. Tuy nhiên cái tag a đầu tiên tôi muốn nó luôn có
background, nên mình thêm bộ chọn li:first-child nữa :
#top_page ul#pages li a:hover, #top_page ul#pages li:first-child a {
background: url(images/pages_bg.jpg) repeat-x top left;
color: white;
}
OK, đến bước này mình đã làm xong phần top page. Mình được như demo.
BƯỚC 3: HEADER
Mình cho header có width là 100%, một thành phần được cho width 100% thì sẽ có width bằng với thành
phần parent element của nó. Ở bước reset CSS mình cho div#wrapper width là 960px, do đó div#header sẽ có
width 960px. Thật ra bạn cũng có thể đặt trực tiếp 960px luôn cho div#header, nhưng khi đặt 100% thì nếu
mình thay đổi width của div#wrapper thì width của div#header cũng thay đổi theo mà khỏi phải đặt lại nữa :
#header {
width: 100%;
}
a) BANNER
Mình sẽ đặt file header_bg.jpg (size 960 x 335px) làm background, do đó đó mình đặt width 960px và height
335px. Cuối cùng là position relative để apply absolute cho các element trong nó :
#header #banner {
23
width: 960px; height: 335px;
background: url(images/header_bg.jpg) no-repeat top left;
position: relative;
}
Đối với p#success, mình áp dụng absolute positioning, sau đó đặt size, font-family, color, width và line-height
:
#header #banner p#success {
position: absolute; top: 84px; left: 51px;
font-size: 29px;
font-family: "Trebuchet MS", tahoma, sans-serif;
color: white; width: 370px; line-height: 1.3em;
}
Đến p#started, mình cũng dùng absolute, mình đặt background là file started.jpg (size 254 x 51px) nên cần
đặt width và height tương ứng là 254px và 51px, đặt thêm line-height cho khoảng cách giữa các dòng cách ra
một chút. Thêm indent cho nó ra giữa chút và cuối cùng là border radius. Code của chúng ta :
#header #banner p#started {
position: absolute; top: 221px; left: 55px;
width: 254px; height: 51px; line-height: 51px;
background: url(images/started.jpg) repeat-x top left;
text-indent: 26px;
border-radius: 5px; behaviour: url(border-radius.htc);
}
Mục đích mình thêm span vào p#started trong HTML là để đặt background là cái hình mũi tên (bạn view file
psd ấy). Mình sẽ biến nó thành block để chỉnh margin là auto cho nó, cho nó căn ra trái bằng text-align là left.
Cuối cùng là đặt background, bạn lưu ý với phần background-position mình cho 219px 50%, 219px tức là cho
cái hình cách lề trái 219px, còn 50% là để nó căn giữa theo chiều dọc :
#header #banner p#started span {
margin: auto; display: block; text-align: left;
font-family: "Trebuchet MS", tahoma, sans-serif;
color: #b90016; font-size: 20px;
background: transparent url(images/started.png) no-repeat 219px 50%;
}
Đến cái img trong div#banner, mình sẽ áp dụng absolute cho nó. Mình cho bottom là giá trị âm, thay vì đẩy
lên trên thì nó sẽ bị đẩy xuống dưới, vượt ra ngoài cái div#banner mình đã design ban đầu trong photoshop :
#header #banner img {
position: absolute; bottom: -28px; right: 30px;
}
b) FEATURED POST
Đầu tiên, ta style width và màu nền của div#featured_post :
#header #featured_post {
width: 100%;
background: #ededed;
}
Đến cái ul, đầu tiên mình thêm padding, nhưng nếu có padding thì độ lớn của ul sẽ bị thay đổi, đây là lí do
mình phải dùng div#featured_post bao quanh cái ul (mặc dù ul đã là block element), khi thêm padding cho ul
thì độ lớn của div#featured_post sẽ ko bị ảnh hưởng (nếu bạn vẫn chưa hiểu cái này, xem lại bài Box Model).
Vì mình cho các li trong ul float nên phải cho overflow là hidden :
#header #featured_post ul {
padding: 38px 0px 22px 53px;
overflow: hidden;
}
Đến li trong ul, mình cho float left, width là 245px, margin-right để các list cách ra cho dễ nhìn :
#header #featured_post ul li {
float: left; width: 245px;
margin-right: 40px;
}
Trong từng li, mình định dạng như sau :
#header #featured_post ul li img {
float: left; margin-right: 18px;
}
#header #featured_post ul li p {
font-size: 12px; font-family: "arial", tahoma, sans-serif;
color: #4f4f4f;
}
24
#header #featured_post ul li p span {
display: block; font-size: 15px;
}
Bạn xem demo để thấy kết quả sau bước này.
BƯỚC 4 : CONTENT
Với phần div#content, mình đặt background là white và thêm padding. Lưu ý là mình phải cho overflow
hidden vì mình sẽ cho các div.post_item bên trong nó float :
#content {
background: white;
padding: 41px 20px 52px 20px;
overflow: hidden;
}
Đến các div.post_item, như mình vừa nói ở trên là sẽ cho float left, đặt margin left để cách các div ra. Nhưng
các bạn thấy mỗi div lại trên 1 hàng, do đó đặt width 265px (mình đo trong photoshop) để các div được ngang
hàng với nhau. Cuối cùng là đặt font-family :
#content .post_item {
float: left; margin-left: 33px;
width: 265px;
font-family: "arial", tahoma, sans-serif;
}
Với cái phần tiêu đề h1, đơn giản chỉ cần chỉnh size và hiệu ứng hover tag a trong nó :
#content .post_item h1 a {
font-size: 25px;
color: #585858;
}
#content .post_item h1 a:hover {
color: #0f4db6;
}
Đến cái img của mỗi post, mình đặt margin top và bottom để nó cách ra với cái tag h1 và đoạn paragraph ở
dưới :
#content .post_item img {
margin: 24px 0px 20px 0px;
}
Với cái tag p ở dưới, mình cũng chỉ cần chỉnh size và color :
#content .post_item p {
font-size: 12px;
color: #4f4f4f;
}
Đến cái a class read_more này hơi phức tạp một chút. Đầu tiên mình chỉnh margin top để nó cách ra với cái
tag p ở trên. Với tag a này mình cần đặt background, do đó cần phải đặt width và height cho nó. Vậy mình
cần phải cho nó display là block (tag a mặc định là inline), sau đó đặt width 96px và height 27px (bằng với
kích thước của hình làm background 96 x 27px). Đặt text-align center để text căn ra giữa theo chiều ngang,
đặt line-height bằng với height, tức 27px để text căn ra giữa theo chiều dọc (khi bạn cho line-height bằng với
height của một thành phần thì text của nó sẽ căn ra giữa theo chiều dọc). Thêm style font-family, size và color
cho nó giống với design trong file PSD. Đặt background là file readmore_bg.jpg, mình muốn nó lặp lại theo
chiều ngang nên cho repeat-x. Cuối cùng là thêm border và radius. Bạn lưu ý mình chỉ cần border left và right
thôi, còn border top và bottom thì trong hình background đã có rồi, do đó mình cho border top và bottom là
none. Tóm lại code của mình :
#content .post_item a.read_more {
margin-top: 20px;
display: block;
width: 96px; text-align: center;
height: 27px; line-height: 27px;
font-size: 12px; font-family: "tahoma", sans-serif;
color: #6c6c6c;
background: url(images/readmore_bg.jpg) repeat-x top left;
border: 1px solid #ccc;
border-radius: 5px; behaviour: url(border-radius.htc);
border-top: none; border-bottom: none;
}
Chuyển sang tag ul có trong div post_item thứ 2, mình chỉnh margin top, còn cái list-style ở bên trong nên
cho là inside, mình sẽ lấy file list_style.png làm list-style-image :
25
