Hôm nay Hocweb.com.vn sẽ hướng dẫn các bạn chuyển file thiết kế Photoshop trang naturetour thành HTML/CSS. Với bài viết này, các bạn sẽ biết được các bước để tạo thành trang web tĩnh, chuyển từ một thiết kế photoshop thành một trang web HTML và định dạng CSS. Yêu Cầu - Căn bản HTML - Căn bản Photoshop - Thời gian thực hiện: 1h ~ 2h CẮT PHOTOSHOP Bước 1: Chọn công cụ Crop Tool ( Phím tắt C ), chọn vùng có hình cần cắt, sau đó bấm enter để hoàn thành  Công cụ Crop Tool – Cắt hình Sau khi cắt chúng ta được một hình như sau Sau khi cắt hình Bước 3: Ẩn hết các Layer nên, giữ lại layer mà chúng ta cần cắt. Sau khi ẩn các layer không cần thiết Bước 4: Bỏ phần thừa xung quanh hình cần cắt, chọn menu Image -> Trim… Hộp thoại Trim xuất hiện, chọn như hình và bấm OK
Hộp thoại Trim Bước 5: Lưu file với định dạng tối ưu cho Website. Vào menu File -> Save for Web… Hộp thoại Save for Web xuất hiện, chọn các thông số như hình, bấm Save… và lưu vào thư mục chứa hình ảnh của Website. Hộp thoại Save for Web… Sau khi chúng ta đã cắt các hình ảnh cần thiết cho website, chúng ta sẽ được một thư mục hình như sau
Thư mục các hình cho Website Sau khi đã chuẩn bị xong các hình dành cho website, chúng ta lên cấu trúc HTML CẤU TRÚC HTML Cấu trúc chung cho trang HTML của chúng ta <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Demo</title> <!-- CSS HERE --> <link href="css/bootstrap.css" rel="stylesheet"/> <link href="css/css.css" rel="stylesheet"/> </head> <body> <div> <div> <!-- row1 here --> </div> <div> <!-- row2 here --> </div> <div> <!-- row3 here --> </div> <div> <!-- row4 here --> </div> </div> </body> </html>
PHẦN ROW1 Bước 1: Grid cho phần Row1 <div> <div> <div> <!-- img hinh here --> </div> <div> <div> For Friendly, Expert advice call </div> <div> 12 (0) 1234 567890 </div> <div> <!-- main menu here --> </div> </div> </div> <div> <div> <a href="">detinations</a> <a href="">species</a> <a href="">tour types</a> <a href="">tour leaders</a> <a href="">late availability</a> <a href="">latest news</a> <a href="">about us</a> </div> </div> <div> Home </div> </div>
Bước 2: Hình hinh. Thay thế <!—img hinh here –> bằng Bước 3: Menu. Thay thế <!– main menu here –> bằng <ul> <li><a href="">Home</a></li> <li><a href="">Home to book</a></li> <li><a href="">Faqs</a></li> <li><a href="">Vsit Us</a></li> <li><a href="">Contact Us</a></li> </ul>
Phần Row1 sau khi đã hoàn thành <div> <div> <div> <img src="img/1.png" /> </div> <div> <div> For Friendly, Expert advice call </div> <div> 12 (0) 1234 567890 </div> <div> <ul> <li><a href="">Home</a></li> <li><a href="">Home to book</a></li> <li><a href="">Faqs</a></li> <li><a href="">Vsit Us</a></li> <li><a href="">Contact Us</a></li> </ul> </div> </div> </div> <div> <div> <a href="">detinations</a> <a href="">species</a> <a href="">tour types</a> <a href="">tour leaders</a> <a href="">late availability</a> <a href="">latest news</a> <a href="">about us</a> </div> </div> <div> Home </div> </div>
PHẦN ROW2 <div> <div> <div> <img src="img/5.png" /> </div> <div> <div> <div> naturetour wild life holidays </div> <div> A select of worldwide bird watching, wild fower and natural history holidays (including will dirfe, treks and cruises), all led by expert <a href="">naturatist guides.</a> </div> </div> <div> <div> <img src="img/6.png" /> </div> </div> </div> <div> <img src="img/9.png" /> </div> <div> <div> <img src="img/i1.png" /> <div> Africa Holidays </div> <div> Few wildlife enthusiasta can resit Africa. Its exceptional abundance and variety of wild animals make it one of the world's top holidays destinations </div> </div> <div> <img src="img/i2.png" /> <div> Americas Holidays </div> <div> Few wildlife enthusiasta can resit Africa. Its exceptional abundance and variety of wild animals make it one of the world's top holidays destinations and variety of </div> </div> <div> <img src="img/i3.png" /> <div> Antarctica Holidays </div> <div> Few wildlife enthusiasta can resit Africa. Its exceptional abundance and variety of wild animals make it one of </div> </div> </div> <div> <div> <img src="img/i4.png" /> <div> Africa Holidays </div> <div> Few wildlife enthusiasta can resit Africa. Its exceptional abundance and variety of wild animals make it one of the world's top holidays destinations </div> </div> <div> <img src="img/i5.png" /> <div> Americas Holidays </div> <div> Few wildlife enthusiasta can resit Africa. Its exceptional abundance and variety of wild animals make it one of the world's top holidays destinations and variety of </div> </div> <div> <img src="img/i6.png" /> <div> Antarctica Holidays </div> <div> Few wildlife enthusiasta can resit Africa. Its exceptional abundance and variety of wild animals make it one of </div> </div> </div> </div> <div> <div> holidays search </div> <div> Star your holdays sarech here </div> <div> <select id="Select1"onchange="window.open(this.options[this.selectedIndex].value,'_blank');this.options[0].selected=true" style="width:150;" name="select"> <option selected="selected">Select Region</option> <option value="#">A</option> <option value="#">B</option> <option value="#">C</option> </select> <br /> <select id="Select1"onchange="window.open(this.options[this.selectedIndex].value,'_blank');this.options[0].selected=true" style="width:150;" name="select"> <option selected="selected">Select Category</option> <option value="#">Music</option> <option value="#">Game</option> <option value="#">Video</option> </select> <select id="Select1"onchange="window.open(this.options[this.selectedIndex].value,'_blank');this.options[0].selected=true" style="width:150;" name="select"> <option selected="selected">Select Date</option> <option value="#">1</option> <option value="#">2</option> <option value="#">3</option> </select> <select id="Select1"onchange="window.open(this.options[this.selectedIndex].value,'_blank');this.options[0].selected=true" style="width:150;" name="select"> <option selected="selected">Select Price</option> <option value="#">100</option> <option value="#">200</option> <option value="#">300</option> </select> </div> <div> <a href=""><img src="img/10.png" /></a> </div> <div> quick search </div> <div> Enter a country or tour code: </div> <div> <input type="text" value="Country/Code..."> <div> <a href=""> <img src="img/11.png" /></a> </div> </div> <div> quick search </div> <div> Enter a country or tour code: </div> <div> <input type="text" value="Enter Email..."><br /> <input type="text" value="Enter Name..."> <div> <a href=""> <img src="img/12.png" /></a> </div> </div> <div> latest news </div> <div> Watch Brown Bears in Sweden 11/05/2010 </div> <div> Expericence the forest at night and watch Brown Bear - join one of our short breaks i... </div> <div> Watch Brown Bears in Sweden 11/05/2010 </div> <div> Expericence the forest at night and watch Brown Bear - join one of our short breaks i... </div> <div> Watch Brown Bears in Sweden 11/05/2010 </div> <div> Expericence the forest at night and watch Brown Bear - join one of our short breaks i... </div> </div> </div>
PHẦN ROW3 <div> <div> Naturetour has 25 years expenrience in openrating widife hodidays. Contact Us for friend traval advice </div> <div> <div> <div> Follow us on twiter <img src="img/7.png" /> </div> <div> 4 days ago The new website is now live. We hope you enjoy it and feesback is welcome </div> <div> <a href=""><img src="img/8.png" /></a> </div> </div> <div> <div> quick links </div> <div> <div> Holidays by destination<br /> Holidays by species<br /> Holidays by tour type<br /> Late availabiliti<br /> Tour leaders </div> <div> How to book<br /> FAQs<br /> Vistit Us<br /> Term & condition<br /> Privacy Policy </div> <div> Latest<br /> Request a brochure<br /> Subscribe to newsletter<br /> Contact Us </div> </div> </div> <div> <div> Contact Us </div> <div> <span>Tel:</span> 1234567890<br /> <span>Email:</span> </div> <div> Naturetour Your City<br /> Your site 123467990 </div> </div> </div> </div>
PHẦN ROW4 <div> <span> Naturetour 2010.<br /> </span> <span> No portion of this website may be reproduced without prior writen consent of Naturetour. All right reserved </span> </div>
Trang HTML sau khi hoàn thành sẽ như sau Trang sau khi xong cấu trúc HTML Sau khi hoàn thành trang HTML, chúng ta cùng nhau định dạng CSS cho trang web ĐỊNH DẠNG CSS Đầu tiên chúng ta import Bootstrap và định dạng một số thẻ @import url("bootstrap.css"); body{ background-image:url(../img/bg.png); height:1500px; } .ct{ width:990px; padding-left:30px; }
Tiếp theo thiết lập cho Row1 .row1{ padding-top:30px; } .row1-1-0{ float:right; text-align:right; } .row1-1-1{ color:#666; font-size:13px; } .row1-1-2{ font-size:21px; color:#666; } .row1-1-3{ font-size:14px; text-transform:uppercase; padding-top:20px; float:right; margin-right:-15px; color:#0C0!important; } .row1-1-3 ul{ list-style:none; color:#0C0!important; } .row1-1-3 ul li a{ color:#0C0!important; } .row1-1-3 ul li a:hover{ color:#060!important; text-decoration:none; } .row1-2{ margin-top:100px; background-image:url(../img/2.png); height:41px; width:990px; } .row1-2-1{ padding-top:10px; margin-left:20px; text-transform:uppercase; font-weight:bold; font-size:15px; } .row1-2-1 a{ color:#FFF; } .row1-3{ padding-top:10px; color:#0C0; padding-bottom:10px; padding-left:20px; }
Tiếp theo là phần Row2 .row2{ background-image:url(../img/3.png); height:968px; width:990px; } .row2-0{ padding-top:18px; padding-left:18px; } .row2-2{ padding-top:20px; } .row2-3{ text-transform:uppercase; font-size:20px; } .row2-4{ padding-top:10px; font-size:12px; padding-right:20px; } .row2-4 a{ color:#0C0; text-decoration:underline; } .row2-5{ margin-top:-35px; position:absolute; margin-left:-20px; margin-bottom:50px; } .row2-6{ margin-top:100px; } .row2-7{ margin-top:20px; } .row2-8{ font-size:16px; font-weight:bold; padding-top:10px; } .row2-9{ font-size:13px; padding-top:7px; height:100px; } .row2-10{ padding-top:15px; } .row2-11{ padding-top:5px; text-transform:uppercase; font-size:14px; } .row2-12{ padding-top:5px; font-size:13px; width:200px; } .row2-13{ margin-top:10px; } .row2-14{ margin-top:10px; margin-bottom:10px; } .row2-15{ margin-top:10px; margin-bottom:30px; font-size:12px!important; } .row2-16{ margin-top:-40px; margin-left:150px; } .rw{ width:130px; } .row2-17{ padding-top:15px; text-transform:uppercase; font-size:14px; padding-bottom:5px; } .row2-18{ font-weight:bold; } .row2-19{ padding-top:-5px; font-size:13px; width:200px; padding-bottom:10px; }
Kế tiếp là phần Row3 .row3{ margin-top:20px; background-image:url(../img/4.png); height:207px; width:990px; margin-bottom:20px; } .row3-1{ color:#FFF; text-align:center; padding-top:8px; font-style:italic; } .row3-2-5{ padding-top:30px; padding-left:20px; } .sp3-3-2{ text-transform:uppercase; font-weight:bold; } .sp3-3-1-0{ padding-top:10px; } .sp3-3-1-1{ font-weight:bold; } .sp3-3-1-2{ padding-top:20px; } .sp3-3-1-3{ padding-left:20px; }
Cuối cùng là phần Row4 .row4{ text-align:center; } .row4-1{ font-weight:bold; } .row4-2{ }
Hoàn thành trang web Trang web sau khi hoàn thành. TỔNG KẾT Sau bài viết này, các bạn đã biết được các bước để tạo thành trang web tĩnh, từ cắt hình bằng photoshop đến định dạng css. ---------------------------------------------------------------------------------------------------------------------------------------------------------- Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn! |
