Hôm nay Hocweb.com.vn sẽ hướng dẫn các bạn chuyển file thiết kế
Photoshop trang Six Studios 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"/>
<lin
</head>
<body>
<div>
<div
>
<!-- row1 here -->
</div>
<div
>
<!-- row2 here -->
</div>
<div
>
<!-- row3 here -->
</div>
<div
>
<!-- row4 here -->
</div>
<div
>
<!-- row5 here -->
</div>
</div>
</body>
</html>
|
|
|
|
PHẦN ROW1
Bước 1: Grid cho phần Row1
|
<div>
<div
>
<div
>
<div
>
<div>
<!--
img hinh here -->
</div>
<div>
<!-- main menu here -->
</div>
</div>
</div>
</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="">Services</a></li>
<li><a
href="">Porotfolio</a></li>
<li><a
href="">Blog</a></li>
<li><a
href="">contact</a></li>
</ul>
|
|
|
|
Phần Row1 sau khi đã hoàn thành
|
<div>
<div
>
<div
>
<div
>
<div>
<img
src="img/h3.png" />
</div>
<div
>
<ul>
<li><a
href="">Home</a></li>
<li><a
href="">Services</a></li>
<li><a
href="">Porotfolio</a></li>
<li><a
href="">Blog</a></li>
<li><a
href="">contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
|
|
|
|
PHẦN ROW2
|
<div>
<div
>
<div
>
<div
>
<div>
Why
Choose Six Studios?
</div>
<div
>
Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum
imperdiet hendrerit. Quisque tincitin alimam justo, eiu volutpat odio
tempus nec. Fusce semper tortor a tellus ornare sed consequat diam
alementum. In porta lacinia lacus id porttior.
</div>
<div
>
<a
href=""> <img src="img/h10.png" /></a>
<img src="img/h9.png" />
</div>
</div>
<div>
<img
src="img/h8-.png" />
</div>
</div>
</div>
</div>
|
|
|
|
PHẦN ROW3
|
<div>
<div
>
</div>
</div>
|
|
|
|
PHẦN ROW4
|
<div>
<div
>
<div
>
<div
>
<img
src="img/h16.png" />
Our
Services
</div>
<div
>
<img
src="img/h17.png" />
</div>
<div
>
<div>
Web
Design
</div>
<div
>
Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum
imperdiet hendrerit. Quisque tincitin alimam justo, eiu volutpat odio
tempus nec. Fusce semper tortor a tellus ornare sed consequat diam
alementum.
</div>
<div
>
-------------------------------------------<img
src="img/h15.png" />
</div>
</div>
<div
>
<div>
Identity
and Branding
</div>
<div
>
Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum
imperdiet hendrerit. Quisque tincitin alimam justo, eiu volutpat odio
tempus nec. Fusce semper tortor a tellus ornare sed consequat diam
alementum. In porta lacinia lacus id porttior.
</div>
<div
>
-------------------------------------------<img
src="img/h22.png" />
</div>
</div>
<div
>
<div>
Search Engine Optimization
</div>
<div
>
Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum
imperdiet hendrerit. Quisque tincitin alimam justo, eiu volutpat odio
tempus nec. Fusce semper tortor a tellus ornare sed consequat diam
alementum. In porta lacinia lacus id porttior.
</div>
<div
>
-------------------------------------------<img
src="img/h15.png" />
</div>
</div>
</div>
<div
>
<div
>
<img
src="img/h18.png" />
Latest
Project
</div>
<div
>
<img
src="img/h17.png" />
</div>
<div
>
<div>
<img
src="img/h19.png" />
</div>
</div>
<div
>
<div
>
Dervices
Function
</div>
<div
>
Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum
imperdiet hendrerit. Quisque tincitin alimam justo, eiu volutpat odio
tempus nec.
</div>
<div
>
-------------------------------------------<img
src="img/h22.png" />
</div>
</div>
<div >
<div>
<img
src="img/h19.png" />
</div>
</div>
<div
>
<div>
Design
Studio
</div>
<div
>
Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum
imperdiet hendrerit. Quisque tincitin alimam justo, eiu volutpat odio
tempus nec.
</div>
<div
>
-------------------------------------------<img
src="img/h15.png" />
</div>
</div>
</div>
<div
>
<div
>
<img
src="img/h23.png" />
Recent
Entries
</div>
<div
>
<img
src="img/h17.png" />
</div>
<div
>
<div>
<ul>
<li><a
href="">Lorem ipsum dolor sit amet</a></li>
<li><a
href="">Morbi vestibulum imperrdiet hen</a></li>
<li><a
href="">Fusce semper tortor a tellus</a></li>
<li><a
href="">Quisque tincitin alimam justo</a></li>
<li><a
href="">In porta lacinia lacus id
porttior</a></li>
<li><a
href="">Consectetur adipiscing elit</a></li>
<li><a
href="">Eiu volutpat odio tempus nec</a></li>
<li><a
href="">Fusce semper tortor a tellus</a></li>
<li><a
href="">Morbi vestibulum imperdiet hendrerit</a></li>
</ul>
</div>
<div
>
<div
>
<div
>
<div>
<div
>
<img
src="img/29.png" /> Newsletter
</div>
<div
>
Subcribe
to get the latest updates delievered right to your inbox. What's not to
love?
</div>
<div
>
<div
>
<input
type="text" value="matt@devisefuntion.com">
<a
href=""><img src="img/30.png" /></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
|
|
|
|
PHẦN ROW5
|
<div>
<div
>
<div
>
<div
>
<div>
<img
src="img/h31.png" />
<img
src="img/h32.png" />
<img
src="img/h33.png" />
<img
src="img/h34.png" />
<img
src="img/h35.png" />
<img
src="img/h36.png" />
<img
src="img/h37.png" />
</div>
<div
>
<div>
<div
>
<div
><a href="">Home</a></div>
</div>
</div>
<div
>
<div
>
<div
><a href="">About</a></div>
</div>
</div>
<div
>
<div
>
<div
><a href="">Blog</a></div>
</div>
</div>
</div>
<div >
<div>
<div
>
<div
><a href="">Services</a></div>
</div>
</div>
<div
>
<div
>
<div
><a href="">Portfolio</a></div>
</div>
</div>
<div
>
<div
>
<div
><a href="">Contact</a></div>
</div>
</div>
</div>
</div>
<div>
<div>
<div
><img src="img/h3.png" /></div>
<div
>
Copyright
c 2010 SixStudios Design. All right reserved.
</div>
</div>
</div>
</div>
</div>
</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");
.ct{
width:1100px;
padding-left:40px;
}
|
|
|
|
Tiếp theo thiết lập cho Row1
|
.row1{
background-image:url(../img/h1.png);
height:70px;
}
.row1-1{
background-image:url(../img/h2.png);
height:70px;
}
.rowc{
width:980px;
height:100%;
margin-left:60px;
}
.row1-2{
padding-top:20px;
}
|
|
|
|
Tiếp theo là phần Row2
|
.row2{
background-image:url(../img/h5.png);
height:300;
}
.row2-1{
background-image:url(../img/h6.png);
height:300px;
}
.rowc1{
padding-top:20px;
}
.row2-2{
padding-top:20px;
font-size:30px;
}
.row2-3{
padding-top:20px;
width:400px;
font-size:17px;
}
.row2-4{
padding-top:10px;
}
.row2-5{
padding-top:10px;
}
|
|
|
|
Kế tiếp là phần Row3
|
.row3{
background-image:url(../img/h11.png);
height:35px;
}
.row3-1{
background-image:url(../img/h12.png);
height:30px;
}
|
|
|
|
Sau đó là phần Row4
|
.row4{
background-image:url(../img/h13.png);
height:720px;
}
.rowcc{
width:1020px;
height:100%;
margin-left:40px;
}
.row4-1{
padding-top:30px;
}
.row4-1-1{
font-size:18px;
}
.row4-1-2{
}
.row4-1-3{
padding-top:20px;
}
.row4-1-4{
font-size:17px;
font-weight:bold;
}
.row4-1-5{
padding-top:10px;
width:300px;
}
.row4-1-6{
}
.row4-1-7{
margin-left:-15px;
margin-bottom:-20px;
}
.roww ul li a{
color:#000;
}
.roww ul li{
color:#000;
list-style:url(../img/h26.png);
line-height:35px;
}
.row4-1-8{
background-image:url(../img/27.png);
height:135px;
width:274px;
}
.row4-1-9{
background-image:url(../img/28.png);
height:135px;
width:274px;
}
.row4-1-10{
margin-left:20px;
padding-top:15px;
color:#FFF;
}
.row4-1-11{
font-size:18px;
}
.row4-1-12{
font-size:12px;
padding-top:8px;
line-height:15px;
}
.row4-1-13{
padding-top:10px;
}
.row4-1-14{
margin-left:200px;
padding-top:-50px;
}
.row4-1-15{
background-image:url(../img/30-.png);
height:30px;
width:250px;
}
.rw{
size:100px !important;
}
|
|
|
|
Cuối cùng là phần Row5
|
.row5{
background-image:url(../img/h24.png);
height:130px;
color:#FFF;
}
.row5-1{
background-image:url(../img/h25.png);
height:130px;
}
.row5-2{
padding-top:20px;
}
.row5-4{
padding-top:20px;
}
.row5-5{
background-image:url(../img/h38-.png);
height:20px;
width:128px;
}
.row5-6{
margin-left:5px;
}
.row5-8{
margin-left:131px;
margin-top:-20px;
}
.row5-9{
margin-left:263px;
margin-top:-20px;
}
.row5-10{
margin-top:3px;
}
a{
color:#FFF;
}
.row5-11{
padding-top:45px;
}
.rowtk{
float:right;
margin-right:-20px;
}
.rowkt0{
float:right;
}
.rowkt{
float:right;
}
|
|
|
|
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