Yêu Cầu
– Căn bản HTML
– Căn bản Photoshop
– Thời gian thực hiện: 1h ~ 2hCẮ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
Hướng dẫn thiế kế giao diên trang tin tức 1
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.
Save for web
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
|
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
|
<!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
|
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
|
<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
|
1
|
<img src=“img/1.png” />
|
Bước 3: Menu. Thay thế <!– main menu here –> bằng
|
1
2
3
4
5
6
7
|
<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
|
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
|
<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
|
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
|
<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
|
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
|
<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
|
1
2
3
4
5
6
7
8
|
<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ẻ
|
1
2
3
4
5
6
7
8
9
10
|
@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
|
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
|
.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
|
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
95
|
.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
|
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
|
.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
|
1
2
3
4
5
6
7
8
|
.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.
Các bạn có thể lấy file PSD tại đây
http://www.mediafire.com/download/irbqz45z64k7i5g/naturetour.psd