Chuẩn bị :
Dreamwaver
cs6
Cấu hình các thứ cần thiết trước khi bắt đầu làm.
File psd cần
cắt tải tại đây : http://adf.ly/sl46i
Nếu ai chưa cắt thì tải về các file hình mình đã cắt tại đây: http://adf.ly/sl4GS
Nhận định giao diện mà chúng ta cần cắt ở đây có 3 phần :
Header: gồm
5 cột.
Main: gồm 2
cột.
Footer: gồm
5 cột.
Đến với header:
Phần background(bg -> phần hình nền) header bao trùm toàn bộ website
giống như là 1 phần của thẻ body trong website, chính vì vậy chúng ta không được
khai báo phần header trong class : container .Lý do rất đơn giản , trong
bootstrap đã mặc định class container sẽ tự động canh giữa của website, nếu
chúng ta đặt vào trong container thì phần bg sẽ nhảy vào trong giữa như hình :
Mình sẽ nói
rõ hơn về các class và cấu trúc của bootstrap vào 1 bài chi tiết, ở đây mình chỉ
giải thích sơ qua về cấu trúc mà mình sử dụng trong temp này.
Tạo 1 file
có tên là index.php trong thư mục website của bạn, nhúng các file cần thiết vào.
Khai báo mặc
định trong trang index giữ nguyên, ta được cấu trúc như sau:
<!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>Nhà
hàng</title>
<link
rel="stylesheet" type="text/css"
href="css/style.css"/>
<link
rel="stylesheet" type="text/css"
href="css/font-awesome.min.css"/>
</head>
<body>
</body>
</html>
Khai báo 3
tag div cần thiết cho 1 trang web:
<div id=”header”></div>
<div id=”main”></div>
<div id=”footer”></div>
Chúng ta được
cấu trúc cho phần body như sau :
<div
id="header" class="row">
<div id=”main”
class="container">
<div class="col-lg-3">left</div>
<div class="col-lg-9">right</div>
</div>
<div id=”footer”
class=”row”></div>
</body>
Giải thích :
Class row
có tác dụng gì trong các tag div này ?
Class row
khai báo 1 thuộc tính cho div đó là 1 hàng , nghĩa là tất cả những div con hay
tag con trong div chứa class này đều nằm trong một hàng và các thuộc tính còn kế
thừa cho các tag khác như float, border .v..v sẽ bị triệt tiêu khi vươt quá
ngoài div chứa class này.
Đơn giản nó
là khai báo 1 hàng dành cho riêng div này.
Class container
: khai báo kích thước cho div và có giá trị mặc định tùy thuộc vào kích thước
màn hình bạn sử dụng, và thuộc tính mặc dịnh của các div này sẽ canh giữa
website.
Class col-lg-1
à col-lg-12 : khai báo tag div đó chiếm
bao nhiêu cột trong 1 row mà bạn đã khai
báo.
Mặc định
theo thứ tự để có được 1 kết cấu hoàn hảo là từ container -> row ->
col-lg
Ví dụ:
<div
class=”container”>
<div class=”row”>
<div class=”col-lg-6”></div>
<div class=”col-lg-6”></div>
</div>
</div>
Quay lại phần
header, chúng ta có 5 phần cần hiển thị trong header, khai báo cho các thành phần
này là 1 tag div có class như sau
<div id="header-top"
class="row">
<div
class="col-lg-2">1-888-123-4567</div>
<div
class="col-lg-4">Free Ground Shipping for Products over
$100</div>
<div class="col-lg-2">Social</div>
<div class="col-lg-2">My account</div>
<div
id="btn-cart" class="col-lg-2 btn btn-default">
<a href="" class="btn" >Shop</a>
<a href="" class="btn" >0.00$</a>
</div>
</div>
</div
Tại sao
chúng ta phải khai báo thêm 1 div có id là “header-top” nhìn vào hình bạn sẽ thấy
phần header có 2 thành phần là header-top và header.
Bạn cứ tưởng
tượng phần header-top chiếm ¼ chiều cao header nằm chồng lên phần header do đó
chúng ta sẽ thấy được phần nền của header còn dư ra.
Giải thích:
Class btn :
khai báo div là 1 button.
Class btn-default
: khai báo cho 1 tag có thuộc tính là button
có đường viền mặc định, nếu bạn muốn khai báo là 1 button thì trước đó bạn phải
khai báo thêm class btn . ví dụ :
<a href=”” class=”btn btn-default”>
Sau khi
code như trên,test thử bạn sẽ thấy phần header chữ luôn canh lề trái, mặc dù
cho bạn có khai báo bất cứ thuộc tính nào ghi đè lên vẫn không có tác dụng.
Lúc này bạn
phải sử dụng đến class container : code như sau
<div
id="header" class="row">
<div id="header-top"
class="row">
<div class="container">
<div
class="col-lg-2">1-888-123-4567</div>
<div
class="col-lg-4">Free Ground Shipping for Products over
$100</div>
<div class="col-lg-2">Social</div>
<div class="col-lg-2">My account</div>
<div
id="btn-cart" class="col-lg-2 btn btn-default">
<a href="" class="btn" >Shop</a>
<a href="" class="btn" >0.00$</a>
</div>
</div>
</div>
</div
Giải thích:
do class container bao toàn bộ các thành phần text trong header nên chỉ các
thành phần này bị ảnh hưởng của class container à canh giữa được các thành phần này;
Đến đây thì
đã gần hoàn tất phần header.
Các button
mạng xã hội các bạn có thể tham khảo các image trên mạng hoặc sử dụng font http://fontawesome.io/ như mình đang sử dụng.
Sẽ có 1 bài viết hướng dẫn các bạn sữ dụng các font này.
Khai báo
css cho các thuộc tính này như sau:
Trong file
style.css các bạn nhúng vào index.php các bạn code như sau:
@import
url("bootstrap.min.css");
body{
margin:auto;
}
#header{
background-image:url(../image/head_bg.png);
/* Đường dẫn hình nền của header */
background-size:cover; /* tự co giãn
kích thước phù hợp */
}
#header-top{
padding-top:2px;
background-image:url(../image/header_bg.png);
background-size:cover;
background-repeat:no-repeat;
padding-bottom:10px;
}
Trong phần
header phía dưới tag header-top chúng ta khai báo như sau :
<div
id="main" class="container">
<div
class="col-lg-2"><img src="image/logo.png"
width="116" height="117" /></div>
<div class="col-lg-8">Menu </div>
<div class="col-lg-2">Sign-up</div>
</div>
Cuối cùng chúng ta được 1 cấu trúc hoàn chỉnh như file sau:
Còn phần định
dạng cho giống hoàn toàn với file mẫu thì bạn vui lòng tự css để nâng cao tay
nghề nhé.
Đón xem hướng dẫn cắt layout từ psd với bootstrap phần 2 : Full Header CSS
