Hướng dẫn PSD sang HTML
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 :ấ ủ ệ đượ ọ ư 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 :ế ẻ ướ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <!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 > 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 </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 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) : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <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> 23 24 <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 Trong div#banner chúng ta g m 2 div nh :ồ ỏ 1 2 3 4 5 <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 :Đ ạ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <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 :ế ư 1 2 3 4 5 6 7 8 9 <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 </p> <img src="images/people.png" alt="people" /> </div><! end #welcome > Bước 2 : POST_CONTENT 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 :ạ ế ư 1 2 3 4 5 6 7 8 9 1 0 11 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 <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 > 2 0 2 1 2 2 2 3 2 4 2 5 2 6 2 7 2 8 2 9 3 0 3 1 3 2 3 3 3 4 3 5 3 6 3 7 3 8 3 9 4 0 4 1 <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 :ồ ỏ 1 2 3 4 5 6 7 8 9 10 11 <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 Mình c n 1 tag h3, 1 tag p và 1 cái form :ầ 1 2 3 4 5 6 7 8 9 10 <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 Ph nầ div#quick c ng gi ng nhũ ố ư div#holiday : 1 2 3 4 5 6 7 <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 1 2 3 4 5 6 7 8 <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 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 :ỗ ồ đề đ ạ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <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 : 1 2 3 <div id="info_footer"> </div><! end #info_footer > 4 5 <ul id="coryright"> </ul> Bước 1 : INFO_FOOTER 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 :để ủ ầ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 <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> [...]... bold">izwebz.com All rig 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,... 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 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ì... 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) : 1 #primary #content #banner #welcome img { position: absolute; 2 top: -50px; right: 46px; 3 } 4 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 : 1 #primary #content #post_content... 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 : 1 #primary #content #post_content div.clear /*div.post_item*/ { clear: left; 2 3 } Đến ph ần img của m ỗi post, mình cho radius, padding và background cho gi ống v ới file PSD : 1 2 3 4 5 6 #primary #content #post_content div.post_item img { border-radius:... "Trebuchet MS", tahoma, arial, sans-serif; font-size: 14px; color: #3f3b30; 3 } 4 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ó : 1 #sidebar p.choose { 2 font-family: "arial", tahoma, sans-serif; font-size: 12px; color: #3f3b30; 3 margin-top: 10px; 4 } 5 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 ỏ... sans-serif; 4 font-size: 24px; 5 line-height: 1.3em; } 6 7 Đế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 ự: 1 #primary #content #banner #slide #new_tours p#our_new_tours span { 2 display: block; 3 color: #28b028; 4 font-size: 32px; } 5 6 #primary... #content #banner #slide #new_tours p#intro a.read_more { 2 color: #28b028; 3 display: block; } 4 5 #primary #content #banner #slide #new_tours p#intro a.read_more:hover { 6 color: #5383fd; 7 } 8 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é... 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 : 1 #primary #content #banner #welcome { position: relative; 2 margin-top: 30px; 3 } 4 Đến tag h1, mình đơn thu... #header ul#tel { 6 position: absolute; 7 top: 14px; right: 0px; 8 } 9 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 { 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 font-family: "tahoma", arial, sans-serif; font-size: 12px; color: #585755; } #header ul#tel li a { font-family: "Trebuchet MS", tahoma,... 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 . 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"> . ng code HTML nào !!!ắ đầ đ ự Phần 1 : Mình vi t các th div tr c :ế ẻ ướ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0. 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