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>
tantt@gmail.com
</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
|
.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;
.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.
Xem thêm tại :
http://hocweb.com.vn/category/hocweb/photoshop-html-css/html-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!
Đăng nhận xét