Ngày nay việc thiết kế web đã trở nên quen thuộc và cần thiết cho mọi người. với những bạn không có điều kiện theo học các khóa học tại các trung tâm đào tạo vẫn có thể tự học và thiết kế website cho riêng mình. Từ các mẫu trang web ưa thích muốn chuyển nó thành giao diện Web cơ bản thì phải làm như thế nào? Tài liệu sẽ hướng dẫn từng bước chi tiết để các bạn có thể chuyển từ giao diện trong photoshop thành mẫu trang web một cách nhanh chóng mà không cần phải có kiến thức nhiều về lập trình web. Với tài liệu này bạn có thể vừa học, vừa thực hành thiết kế Web cơ bản, là nền tảng để bạn chuyển đổi giao diện trên các phần mềm thiết kế Web hiện nay. Đây là cách mà các nhà thiết kế Web hay làm. Sau khi đọc và thực hành theo tài liệu này chắc chắn bạn sẽ tự tay thiết kế cho mình một mẫu trang Web ưng ý và từng bước phát triển khả năng lập trình Web của bạn.
Trang 1PSD 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 :
Trang 3Vì 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"
"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" />
<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>
Trang 4<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ỏ :
code này trong div#slide :
<img src="images/banner.jpg" alt="banner" />
<a href="#" class="read_more">Continue reading </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>
Trang 5<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>
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>
Trang 6<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 :
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>
Trang 7<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>
<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>
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 {
Trang 8Trong 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
Trang 9Trong 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 :
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 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 :
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;
Trang 10font-family: "tahoma", arial, sans-serif;
font-size: 15px; color: white;
Đế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;
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 :
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 {
#primary #content #banner #slide #new_tours_wrap {
Trang 11width: 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 {
Đến a.read_more, mình chỉ tạo hiệu ứng hover :
#primary #content #banner #slide #new_tours p#intro a.read_more {
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 {
text-align: center; line-height: 22px;
font-family: "arial", tahoma, sans-serif;
Trang 12Vậ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;
#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 {
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 {
text-align: center; line-height: 39px;
background: url(images/nav_postitem_bg.jpg) repeat-x top left;
border-right: 1px solid #dad9d3;
Trang 13Cuố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 {
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 {
#primary #content #post_content div.post_item h3 a,
#primary #content #post_content div.post_item p {
font-family: "arial", tahoma, sans-serif;
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.