Xin Chào Các Bạn!
Hôm nay EDU.COM>VN sẽ hướng dẫn các bạn Convert một file mẫu website PSD thành HTML/CSS. Mẫu trang chúng ta sẽ thực hiện là trang Exponet.
Yêu Cầu
– Căn bản HTML/CSS – Bootstrap
– Căn bản Photoshop
– Thời gian thực hiện 1h~1h30p
CẮT ẢNH PHOTOSHOP
Các bạn tải file PSD của trang Exponet tại đây. Sau khi tải về các bạn mở file bằng Photoshop. Chúng ta sẽ sử dụng công cụ Crop Tool để cắt ảnh. Công việc đầu tiên đó là xác định các thành phần cần cắt cho trang web, ví dụ: logo, background banner, icon v.v
Chúng ta cùng thực hiện cắt Logo.
Bước 1: Chọn công cụ Crop Tool trên thanh công cụ, phím tắt C. Chọn một vùng quanh Logo cần cắt. Sau đó bấm Enter để hoàn thành
Công cụ Crop Tool, chọn vùng Logo.
Bước 2: Ẩn hết tất cả các Layer khác, giữ lại Group Logo Box.
Ẩn hết các Layer khác, trừ Group Logo box
Bước 3: Để bỏ phần thừa xung quanh Logo, chúng ta chọn menu Image -> Trim. Hộp thoại Trim xuất hiện, chọn thông số như hình, bấm Ok để hoàn thành
Hộp thoại Trim
Bước 4: Lưu file với định dạng tối ưu cho website. Chọn menu File -> Save for Web… . Phím tắt Alt + Shift + Ctrl + S. Hộp Thoại Save for Web xuất hiện, chọn định dạng như hình sau đó 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 cắt các hình cần thiết, chúng ta sẽ được một thư mục chứa hình ảnh cho website.
Thư mục hình ảnh của website
XÂY DỰNG CẤU TRÚC HTML KẾT HỢP BOOTSTRAP
Sau khi đã chuẩn bị xong hình ảnh, bước tiếp theo chúng ta xây dựng cấu trúc HTML kết hợp với Bootstrap
Đầu tiên chúng ta phải lên cấu trúc cho file HTML.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
<html>
<head>
<title>Exponet</title>
<meta charset=“UTF-8”>
<!– CSS HERE –>
<link rel=“stylesheet” type=“text/css” href=“css/styles.css”>
</head>
<body>
<header>
</header> <!– end header –>
<div id=“banner-wrapper”>
</div> <!– end banner –>
<div id=“main”>
</div> <!– end main –>
<footer>
</footer> <!– end footer –>
</body>
</html>
|
Trên là cấu trúc căn bản của một trang HTML. Chúng ta sẽ lần lượt code từng phần và theo trình tự từ trên xuống.
PHẦN HEADER
Bước 1: Cấu trúc Grid của phần Header.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<header>
<div class=“container”>
<div class=“row”>
<div class=“col-lg-3”>
<!– logo here –>
</div>
<div class=“col-lg-9”>
<!– main menu here –>
</div>
</div>
</div>
</header>
|
Bước 2: Phần Logo, thay thế <!– logo here –> bằng
|
1
|
<img src=“img/logo.png” alt=“” id=“logo” />
|
Bước 3: Phần menu, thay thế <!– main menu here –> bằng
|
1
2
3
4
5
6
7
8
9
10
|
<nav id=“top-nav”>
<ul>
<li class=“active”><a href=“” title=“”>Home</a></li>
<li><a href=“” title=“”>Portfolio</a></li>
<li><a href=“” title=“”>Blog</a></li>
<li><a href=“” title=“”>Services</a></li>
<li><a href=“” title=“”>Case Studies</a></li>
<li><a href=“” title=“”>Contact US</a></li>
</ul>
</nav>
|
Phần Header sau khi đã hoàn chỉnh
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<header>
<div class=“container”>
<div class=“row”>
<div class=“col-lg-3”>
<img src=“img/logo.png” alt=“” id=“logo” />
</div>
<div class=“col-lg-9”>
<nav id=“top-nav”>
<ul>
<li class=“active”><a href=“” title=“”>Home</a></li>
<li><a href=“” title=“”>Portfolio</a></li>
<li><a href=“” title=“”>Blog</a></li>
<li><a href=“” title=“”>Services</a></li>
<li><a href=“” title=“”>Case Studies</a></li>
<li><a href=“” title=“”>Contact US</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
|
PHẦN BANNER
Bước 1: Cấu trúc Grid của phần Banner
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<div id=“banner-wrapper”>
<div class=“container”>
<div class=“row”>
<div id=“banner”>
<div id=“banner-container”>
<div class=“col-lg-6”>
<!– Text Content –>
</div>
<div class=“col-lg-6”>
<!– Banner IMG –>
</div>
</div>
</div>
</div>
</div>
</div> <!– end banner –>
|
Bước 2: Phần nội dung chính của banner, thay thế <!– Text Content –>
|
1
2
3
4
5
6
|
<h1>Make Your Online Presence<br />Felt With the Help of Provus</h1>
<p id=“slogan”>We not only prove our results…we can guarantee them too!</p>
<div id=“button-container”>
<a href=“#” title=“” class=“btn-banner”>Take The Tour</a>
<a href=“#” title=“” class=“btn-banner”>Portfolio</a>
</div>
|
Bước 3: Phần hình ảnh của banner, thay thế <!– Banner IMG –>
|
1
|
<img src=“img/banner-img.png” alt=“” />
|
Phần Banner hoàn chỉnh
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<div id=“banner-wrapper”>
<div class=“container”>
<div class=“row”>
<div id=“banner”>
<div id=“banner-container”>
<div class=“col-lg-6”>
<h1>Make Your Online Presence<br />Felt With the Help of Provus</h1>
<p id=“slogan”>We not only prove our results…we can guarantee them too!</p>
<div id=“button-container”>
<a href=“#” title=“” class=“btn-banner”>Take The Tour</a>
<a href=“#” title=“” class=“btn-banner”>Portfolio</a>
</div>
</div>
<div class=“col-lg-6”>
<img src=“img/banner-img.png” alt=“” />
</div>
</div>
</div>
</div>
</div>
</div> <!– end banner –>
|
PHẦN MAIN
Bước 1: Cấu trúc Grid
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<div id=“main”>
<div class=“container”>
<div class=“col-lg-5 left-side”>
<div class=“row box”>
<!– Box 1 –>
</div>
<div class=“row box”>
<!– Box 2 –>
</div>
</div><!—- end left side –>
<div class=“col-lg-6 col-lg-offset-1”>
<div class=“row box”>
<div class=“col-lg-12”>
<!– Main Box 1 –>
</div>
</div>
<div class=“box”>
<!– Main Box 2 –>
</div>
</div><!—- End main content –>
</div>
</div> <!– end main –>
|
Bước 2: Cột bên trái
|
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
|
<div class=“col-lg-5 left-side”>
<div class=“row box”>
<div class=“col-lg-9”>
<h3>Connect With Your Clients</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam.</p>
<a href=“#” title=“”>Forest Nessit Allumn</a>
</div>
<div class=“col-lg-3”>
<img src=“img/speaker-icon.png” alt=“” />
</div>
</div>
<div class=“row box”>
<div class=“col-lg-9”>
<h3>Editing Made Easy</h3>
<p>Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. </p>
<a href=“#” title=“”>Nessit Allumn</a>
</div>
<div class=“col-lg-3”>
<img src=“img/scissors.png” alt=“” />
</div>
</div>
</div>
|
Bước 3: Phần nội dung chính <!– Main Box 1 –>
|
1
2
3
4
5
6
7
|
<h3>What We Are All About At </h3>
<p>Lorem ipsum dolor sit amet, ctur adipisicing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad veniam. Nevus
magnu wuisit abre. Sed dest enim sit amet laborest
doorest at dolor ajorem magna.</p>
<a href=“#” title=“”>Sed Ut Perspiciatis Unde</a>
|
Bước 4: Phần <!– Main Box 2 –>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<div class=“row”>
<div class=“col-lg-12”>
<h3>ExponetWorking for Your Clients</h3>
<p>Many desktop publishing packages and web
page editors now use Lorem Ipsum as their
default model text, and a search for ‘lorem
ipsum’ will uncover many web sites still
in their infancy.</p>
</div>
</div>
<ul class=“row service-list”>
<li class=“col-lg-4”>Web Designers</li>
<li class=“col-lg-4”>Ad Agencies</li>
<li class=“col-lg-4”>Small Firms</li>
<li class=“col-lg-4”>Bloggers</li>
<li class=“col-lg-4”>Programmers</li>
<li class=“col-lg-4”>New Clients</li>
</ul>
|
Hoàn thành phần main
|
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
<div id=“main”>
<div class=“container”>
<div class=“col-lg-5 left-side”>
<div class=“row box”>
<div class=“col-lg-9”>
<h3>Connect With Your Clients</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor ut labore et dolore magna
aliqua. Ut enim ad minim veniam.</p>
<a href=“#” title=“”>Forest Nessit Allumn</a>
</div>
<div class=“col-lg-3”>
<img src=“img/speaker-icon.png” alt=“” />
</div>
</div>
<div class=“row box”>
<div class=“col-lg-9”>
<h3>Editing Made Easy</h3>
<p>Ut enim ad minim veniam. Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. </p>
<a href=“#” title=“”>Nessit Allumn</a>
</div>
<div class=“col-lg-3”>
<img src=“img/scissors.png” alt=“” />
</div>
</div>
</div>
<div class=“col-lg-6 col-lg-offset-1”>
<div class=“row box”>
<div class=“col-lg-12”>
<h3>What We Are All About At </h3>
<p>Lorem ipsum dolor sit amet, ctur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad veniam. Nevus magnu wuisit abre. Sed
dest enim sit amet laborest doorest at dolor ajorem
magna.</p>
<a href=“#” title=“”>Sed Ut Perspiciatis Unde</a>
</div>
</div>
<div class=“box”>
<div class=“row”>
<div class=“col-lg-12”>
<h3>ExponetWorking for Your Clients</h3>
<p>Many desktop publishing packages and web
page editors now use Lorem Ipsum as their
default model text, and a search for ‘lorem
ipsum’ will uncover many web sites still
in their infancy.</p>
</div>
</div>
<ul class=“row service-list”>
<li class=“col-lg-4”>Web Designers</li>
<li class=“col-lg-4”>Ad Agencies</li>
<li class=“col-lg-4”>Small Firms</li>
<li class=“col-lg-4”>Bloggers</li>
<li class=“col-lg-4”>Programmers</li>
<li class=“col-lg-4”>New Clients</li>
</ul>
</div>
</div>
</div>
</div> <!– end main –>
|
PHẦN FOOTER
Bước 1: Cấu trúc Grid
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<footer>
<div class=“container”>
<div class=“row”>
<div class=“col-lg-4” id=“sugestion”>
<!– sugestion –>
</div>
<div class=“col-lg-4” id=“last-blog”>
<!– last-blog –>
</div>
<div class=“col-lg-4” id=“recent-work”>
<!– recent-work –>
</div>
</div>
</div>
<div id=“nav-wrapper”>
<div class=“container”>
<nav id=“footer-nav”>
<!– footer nav –>
</nav>
</div>
</div>
</footer> <!– end footer –>
|
Bước 2: Phần <!– sugestion –>
|
1
2
3
4
5
|
<h2>Suggestions for <span class=“gray”>Exponet</span> ?</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam. <br />
<br />Eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo est magna quisit.</p>
|
Bước 3: Phần <!– last-blog –>
|
1
2
3
4
5
6
7
|
<h2>Latest From the <span class=“gray”>Blog</span></h2>
<ul>
<li><a href=“#” title=“”>Provus Attends Design Conference</a></li>
<li><a href=“#” title=“”>Business Apps Made Easy</a></li>
<li><a href=“#” title=“”>Interview With Provus President</a></li>
<li><a href=“#” title=“”>Programmers Unite</a></li>
</ul>
|
Bước 4: Phần <!– recent-work –>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<h2>Most Recent <span class=“gray”>Work</span></h2>
<ul class=“row”>
<li class=“col-lg-4”>
<img src=“img/screenshot-1.png” alt=“” class=“img-responsive” />
</li>
<li class=“col-lg-4”>
<img src=“img/screenshot-2.png” alt=“” class=“img-responsive” />
</li>
<li class=“col-lg-4”>
<img src=“img/screenshot-3.png” alt=“” class=“img-responsive” />
</li>
<li class=“col-lg-4”>
<img src=“img/screenshot-4.png” alt=“” class=“img-responsive” />
</li>
<li class=“col-lg-4”>
<img src=“img/screenshot-5.png” alt=“” class=“img-responsive” />
</li>
<li class=“col-lg-4”>
<img src=“img/screenshot-6.png” alt=“” class=“img-responsive” />
</li>
</ul>
|
Bước 5: Phần<!—footer nav –>
|
1
2
3
4
5
6
7
8
|
<ul>
<li><a href=“#” title=“”>HOME</a></li>
<li><a href=“#” title=“”>PORTFOLIO</a></li>
<li><a href=“#” title=“”>BLOG</a></li>
<li><a href=“#” title=“”>SERVICES</a></li>
<li><a href=“#” title=“”>CASE STUDIES</a></li>
<li><a href=“#” title=“”>CONTACT US</a></li>
</ul>
|
ĐỊNH DẠNG STYLE CSS
Đầu tiên chúng ta import Boostrap và thiết đặt một số style áp dụng tổng thể như thẻ <a>, thẻ <ul>. Lưu ý file bootstrap.min.css các bạn đặt cùng thư mục với file styles.css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
@import url(“bootstrap.min.css”);
.container{
max-width: 960px;
}
ul{
padding: 0;
list-style-type: none;
}
a:hover, a:active{
text-decoration: none;
outline: none;
}
|
PHẦN HEADER
|
1
2
3
4
|
header{
height: 106px;
background: url(../img/header-background.png);
}
|
PHẦN NAVIGATION
|
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
|
#top-nav{
margin-top: 50px;
float: right;
}
#top-nav li{
float: left;
margin-left: 2px;
}
#top-nav li a{
text-transform: uppercase;
color: #fff;
display: block;
height: 32px;
line-height: 32px;
padding: 0 15px;
border-radius: 10px;
-moz-border-radius: 5px;
transition: background 0.4s ease-out;
-o-transition: background 0.4s ease-out;
-moz-transition: background 0.4s ease-out;
-webkit-transition: background 0.4s ease-out;
}
#top-nav li.active a,#top-nav li a:hover {
background: #929e21;
}
|
PHẦN BANNER
Đầu tiên chúng ta định dạng hiển thị cho phần viền, wrapper
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
#banner-wrapper{
padding-top: 108px;
height: 360px;
border-bottom: 1px solid #ccc;
position: relative;
}
#banner{
height: 342px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
-moz-border-radius:5px;
background:#fff;
}
#banner-container{
background: url(../img/banner-background.png);
height: 320px;
padding: 25px 40px;
}
|
Sau đó định dạng phần nội dung bên trong
|
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
|
#banner-container h1{
font-size: 30px;
color: #fff;
font-weight: bold;
text-shadow: 0px 0px 4px rgba(0,0,0,0.4);
}
#banner-container #slogan{
margin: 36px 0;
width: 310px;
font-size: 18px;
color: #fff;
}
#banner-container .btn-banner{
color: #fff;
font-size: bold;
display: block;
float: left;
width: 158px;
height: 45px;
margin-right: 35px;
background: url(../img/banner-button-background.png);
text-align: center;
line-height: 45px;
font-size: 20px;
font-weight: bold;
}
#banner-container img{
margin-left: 20px;
}
|
PHẦN MAIN
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
#main{
border-top: 1px solid #fff;
border-bottom: 1px solid #ccc;
background: #e9e9db;
padding-top: 148px;
}
#main .box{
height: 165px;
padding: 20px 0;
margin-bottom: 34px;
font-size: 13px;
line-height: 20px;
letter-spacing: -75;
color:#6b6b6c;
}
|
Định dạng riêng cho các box nằm bên left-side
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
#main .box h3{
font-size: 16px;
color: #6d7808;
margin: 0;
letter-spacing: 1px;
}
#main .left-side .box{
border: 1px solid #cbcbcb;
border-radius: 5px;
background: #fff;
box-shadow: inset 0px 0px 5px 5px #f2f2f2;
padding: 20px 20px;
}
|
Danh sách các dịch vụ nằm trong Main Box 2
|
1
2
3
4
5
6
7
8
9
|
.service-list{
font-size: 16px;
letter-spacing: -1px;
}
.service-list li{
background: url(../img/ticker.png) no-repeat;
padding-top: 5px;
padding-left: 40px;
}
|
PHẦN FOOTER
Định dạng tiêu đề của các box
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
footer{
margin-top: 20px;
background: url(../img/footer-background.png) repeat-x;
padding: 120px 0;
height: 480px;
}
footer h2{
font-size: 23px;
color: #f5f5f5;
font-weight: bold;
margin-bottom: 20px;
}
footer h2 .gray{
color: #999;
}
|
Box đầu tiên của Footer: Sugesion
|
1
2
3
4
|
footer #sugestion{
color: #fff;
line-height: 23px;
}
|
Box tiếp theo: Last Blog
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
footer #last-blog{
padding: 0 35px;
}
footer #last-blog a{
color:#fff;
line-height: 40px;
padding-left: 5px;
}
footer #last-blog a:hover{
text-decoration: underline;
}
footer #last-blog li{
height: 40px;
border-bottom: 1px dotted #fff;
}
|
Box cuối cùng Recen Work
|
1
2
3
|
footer #recent-work li{
margin-bottom: 20px;
}
|
Phần cuối cùng trong Footer là Menu footer.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
footer #nav-wrapper{
margin-top: 70px;
height: 90px;
background: #333;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}
#footer-nav{
float: right;
}
#footer-nav li{
float: left;
line-height: 90px;
padding-right: 26px;
}
#footer-nav li a{
color: #fff;
}
#footer-nav li a:hover{
text-decoration: underline;
}
|
Chúng ta đã hoàn thành trang Exponet
TỔNG KẾT
Qua bài viết này, các bạn đã biết được các bước cơ bản để hoàn thành một trang HTML/CSS kết hợp với Bootstrap, các bước này gồm cắt hình, xây dựng cấu trúc HTML và định dạng CSS. Các bạn có thể tải source code trang Exponet tại đây.
———————————————————————————————————————————————————-
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!