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 Tools
Bước 2: Ẩn hết các Layer nên, giữ lại layer mà chúng ta cần cắt.
Ẩn các layer khác
Bước 3: 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.
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
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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<title>Coding a Clean Web 2.0 Style Web Design from Photoshop</title>
</head>
<body>
<div id=“container”>
<div id=“header”>
<!– header–>
<div id=“boxContainer”>
<!–content–>
</div>
<div id=“leftCol”>
<!–content1–>
</div>
<!–search–>
<div id=“footer”>
<!–footer–>
</div>
</div>
</div>
</body>
</html>
|
PHẦN HEADER
Thay thế phần <!—header–>:
|
1
2
3
4
5
6
7
8
|
<h1><a href=“#”>Creativo</a></h1>
<ul>
<li id=“home”><a href=“#”>Home</a></li>
<li id=“about”><a href=“#”>About</a></li>
<li id=“work”><a href=“#”>Work</a></li>
<li id=“contact”><a href=“#”>Contact</a></li>
</ul>
<p id=“featuredText”> We build websites that blow you away. Here at Creativo, we build state-of-the-art and cost-effective website <a href=“#” id=“learnMoreButton”>learn more.</a> <img id=“monitor” src=“img/monitor.jpg” width=“375” height=“370” alt=“monitor” /> </p>
|
PHẦN CONTENT
Thay thế phần <!- – content – -> :
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<div class=“box client”>
<h2>Client list</h2>
<p>We have a wide range of clients from all over the world including the USA, North America, Europe, Asia and Australia.</p>
</div>
<div class=“box work”>
<h2>Our work</h2>
<p>Check out the work we have done for our various clients – from print to web designs.</p>
</div>
<div class=“box work”>
<h2>Book now!</h2>
<p>We are currently available to book new projects. Click here to get a <strong>free quote</strong>!</p>
</div>
|
Thay thế phần <!- – content1 – ->:
|
1
2
|
<h2>Need us say more?</h2>
<p>Creativo is a Web Design and Development company that has been around since 1998. We specialize in clean and corporate design, usability, front and back end development including the building of Content Management Systems and blogs.</p>
|
Thay thế phần <!- – search – ->:
|
1
2
3
4
5
|
<form id=“newsletter” action=“” method=“get”>
<label for=“emailInput”>Sign Up for Our Monthly Newsletter: </label>
<input id=“emailInput” name=“emailInput” type=“text” />
<input id=“submitButton” name=“submitButton” value=“Go” type=“image” src=“img/go.jpg” />
</form>
|
PHẦN FOOTER
Thay thế phần <!- – footer – ->
|
1
|
<p>Creativo Design © 2009. All Rights Reserved. </p>
|
Trang HTML sau khi hoàn thành sẽ như sau
Trang HTML
ĐỊNH DẠNG CSS
Đầu tiên chúng ta import file style và định dạng một số thẻ
|
1
|
* { margin:0; padding:0; }
|
Quy định chung cho toàn bộ trang web:
|
1
2
3
4
5
6
7
|
body {
background:#59d3fa url(img/body_bg.jpg) repeat-x 0 0;
}
#container {
width:1024px;
margin:0 auto;
}
|
Quy định css cho phần heahder:
|
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
#header {
height: 125px;
width: 960px;
margin: 90px auto 0 auto;
}
#header h1 {
display: block;
float: left;
width: 320px;
height: 125px;
background: url(img/logo.jpg) no-repeat 0 0;
text-indent: -10000px;
}
#header h1 a {
display: block;
width: 100%;
height: 100%;
}
#header h1 a:hover {
background: url(img/logo.jpg) no-repeat 0 -125px;
}
span.logoHover {
display: block;
width: 100%;
height: 100%;
background: #ccc url(img/logo.jpg) no-repeat 0 -125px;
}
span.logoHover a {
display: block;
width: 100%;
height: 100%;
}
#header ul {
display: block;
float: right;
width: 640px;
height: 125px;
background: url(img/menu.jpg) no-repeat 0 0;
list-style: none;
}
#header ul li {
display: block;
float: left;
height: 125px;
text-indent: -10000px;
}
#home {
width: 160px;
}
#about {
width: 137px;
}
#work {
width: 129px;
}
#contact {
width: 210px;
}
#header ul li a {
display: block;
width: 100%;
height: 100%;
}
#home a:hover {
background: url(img/menu.jpg) no-repeat 0 -125px;
}
#about a:hover {
background: url(img/menu.jpg) no-repeat -160px -125px;
}
#work a:hover {
background: url(img/menu.jpg) no-repeat -297px -125px;
}
#contact a:hover {
background: url(img/menu.jpg) no-repeat -426px -125px;
}
p#featuredText {
display: block;
position: relative;
float: left;
width: 100%;
height: 375px;
background: url(img/featured_bg.jpg) no-repeat 0 0;
text-indent: -10000px;
}
a#learnMoreButton {
display: block;
width: 280px;
height: 60px;
background: url(img/learnmore.jpg) no-repeat 0 0;
margin: 200px 0 0 132px;
}
a:hover#learnMoreButton {
background-position: 0 -60px;
}
|
Quy định css cho phần content
|
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
#monitor {
position: absolute;
top: 0;
right: 0;
}
.box {
width: 320px;
height: 185px;
float: left;
}
.box h2 {
font: bold 20px Verdana, Geneva, sans-serif;
color: #0f83bc;
text-transform: uppercase;
margin: 35px 0 0 140px;
}
.box p {
font: normal 12px/18px Verdana, Geneva, sans-serif;
color: #0c3b4a;
margin: 0 30px 0 140px;
}
.client {
background: url(img/box1.jpg) no-repeat 0 0;
}
.work {
background: url(img/box2.jpg) no-repeat 0 0;
}
.book {
background: url(img/box3.jpg) no-repeat 0 0;
}
#leftCol {
width: 630px;
float: left;
margin: 20px 0 0 10px;
}
#leftCol h2 {
font: bold 20px/24px Verdana, Geneva, sans-serif;
color: #094e64;
}
#leftCol p {
font: normal 14px/20px Arial, Helvetica, sans-serif;
color: #094e64;
margin-top: 10px;
}
#newsletter {
position: relative;
width: 320px;
height: 110px;
float: left;
background: url(img/newsletter_bg.jpg) no-repeat 0 0;
margin: 20px 0 50px 0;
}
#newsletter label {
font: bold 16px Verdana, Geneva, sans-serif;
letter-spacing: -1px;
margin-top: 26px;
width: 100%;
display: block;
color: #fff;
text-align: center;
}
#emailInput {
position: absolute;
top: 51px;
left: 5px;
width: 200px;
margin: 0px 0 0 30px;
font: bold 20px Verdana, Geneva, sans-serif;
color: #999;
border: 0;
background-color: transparent;
border: none;
}
#submitButton {
position: absolute;
top: 43px;
right: 27px;
width: 50px;
height: 40px;
margin-top: 5px;
padding: 0;
}
|
Quy định css cho phần footer:
|
1
2
3
4
5
6
7
8
9
10
|
#footer {
clear: both;
width: 940px;
border-top: 1px dashed #094e64;
}
#footer p {
margin: 15px 0;
font: bold 12px Arial, Helvetica, sans-serif;
color: #094e64;
}
|
Tiếp theo import file .js:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
$(document).ready(function(){
// Remove default behavior of hover
$(‘#header h1 a:hover’).css(‘background’,‘none’);
// bind a mouseenter event to a element
$(‘#header h1 a’)
.bind(‘mouseenter’,function(){
// Insert a span > a element in DOM that we will fade in
// with class name .logoHover
$(this)
.before(‘<span class=”logoHover”><a href=”#”>home</a></span>’);
// Hide new DOM element immediately, then fade it in
$(‘.logoHover’)
.hide().fadeIn()
// When mouse leaves logoHover, fade out, on complete, remove
// from DOM.
.bind(‘mouseleave’, function(){
$(this).fadeOut(‘normal’, function(){
$(this).remove()
});
});
});
});
|
Kết quả đạt được của bạn sau khi thực hiện
Kết quả
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 căn bản.
các bạn có thể lấy file PSD tại đây
http://www.mediafire.com/download/fhdn19l6x9sx806/web2-mockup-psd.psd