-----
1
Chọn giao diện
– Chọn giao diện cho website tại https://themeforest.net/ cho lấy miễn phí,
tuy nhiên chỉ là tập tin dạng .jpg
– Mở trang https://themeforest.net/,
vào mục UI Design, lấy một giao diện mẫu tùy ý, mở hình ảnh ra, chuột phải và
Save image as… về máy
2
Cài đặt PS và Bootstrap
– Tải và cài đặt Photoshop, có thể chọn bản PS6 portable cho
nhẹ
– Cách tạo actions trong Photoshop để làm tự động một số
thao tác
– Học về cách tạo lưới 12 cột
– Photoshop CC có sẵn chức năng tạo layout 12 cột
– Tạo trang web: vào File\New chọn kích thước của trang web,
ví dụ width: 960px, height: 1800px.
– Tạo lưới: View\New Guide Layout\ chọn 12 column, Gutter:
15px, Margin left, right: 15px.
– Tạo mới layer: vào Layer\ New\ Layer
– Nhúng ảnh vào layer: File\ Place Embedded, chọn hình ảnh cần
chèn, bấm place, sau đó chuột phải vào hỉnh ảnh trên giao diện Photoshop chọn
Place.
– Nếu hình bị vỡ, hoặc nhỏ -> chỉnh lại kích thước của
canvas đúng bằng kích thước của hình ảnh: Image\Canvas Size
– Bấm Ctrl + T để chọn đối tượng (hình ảnh) -> chỉnh lại
kích thước
3
Chuyển từ photoshop sang bootstrap
– Một số website cho lấy ảnh chất lượng, miễn phí:
– Cấu trúc thư mục của dự án:
- lgc\
-- vendor\
-- images\
-- css\
-- js\
--
index.html
– Tải Bootstrap 3.3.7 tại đây: https://getbootstrap.com/ (ở phía trên góc
phải có ô để chọn phiên bản, mặc định là V4.1)
– Sau khi tải Bootstrap về máy, giải nén và chép các thư mục
css, fonts và js bỏ vào thư mục lgc\vendor
– Tải và cài đặt Sublime Text 3 (miễn phí), vào trang này để
tải về máy: https://www.sublimetext.com/
– Cài đặt Sublime Text 3
– Trước khi cài Emmet, Snippets,…cần cài Packet Control
– Để cài Packet Control: bấm Ctrl + Shift + P, gõ Install
Packet Control, Enter để cài
– Cài gói Emmet cho Sublime Text 3 để viết mã cho nhanh: Vào
Preferences\ chọn Packet Control, gõ Emmet, enter để cài
– Để kiểm tra cài Emmet được hay chưa: mở tập tin index.htm
(tập tin này đang trống), gõ kí tự !, phím tab, nếu xuất hiện cấu trúc của tài
liệu html là được
– Cài gói Bootstrap 3 Snippets để viết mã Bootstrap cho
nhanh: Vào Preferences\ chọn Packet Control, gõ Bootstrap 3 Snippets, enter để
cài
– Nếu sử dụng Bootstrap 4 thì cài gói Bootstrap 4x Snippets,
ví dụ: sau khi cài xong, gõ b4-navbar để tạo thanh navbar tự động.
– Với Visual Studio Code, để cài Bootstrap4 snippets đọc bài
viết sau: https://marketplace.visualstudio.com/items?itemName=thekalinga.bootstrap4-vscode
– Vào google gõ từ khóa slogan maker để tạo slogan, hoặc vào
luôn trang này: https://www.shopify.com/tools/slogan-maker
4
CSS cho header và slide
– CSS chuyên nghiệp nhất là làm trực tiếp trên trình duyệt
Chrome. Sau đó copy toàn bộ mã CSS của phần đang định dạng tại trình duyệt, lưu
lại vào tập tin CSS nguồn.
– Sử dụng công cụ Slice Tool của Photoshop để lấy kích thước
hoặc khoảng cách của các thành phần trên giao diện (chọn vùng rồi nhấp đôi chuột),
– Tự động sắp xếp lại mã nguồn theo cấu trúc cha-con: Ctrl +
Shift + P, chọn Indentation: Reindent Lines, bấm phím Enter để thực thi
– Để tạo nền trong suốt:
nav.navbar.navbar-default {
background:
transparent;
border: 1px solid
transparent;
}
– Phủ một lớp màu mờ nên hình nền của giao diện, giúp che bớt
sự ảnh hưởng của ảnh nền lên nội dung của trang. Ví dụ, tạo màu mờ cho
top-header,
top-header {
padding-top: 63px;
background:
url(../images/bg01.jpeg);
min-height: 1068px;
position: relative;
}
.top-header::after {
content: "";
width: 100%;
height: 1068px;
background: #00000036;
position: absolute;
top: 0;
}
Chuyển “lớp màu phủ” xuống dưới để người dùng có thể thao
tác với nội dung, sử dụng z-index:
nav.navbar.navbar-default {
background: transparent;
border: 1px solid
transparent;
position: relative;
z-index: 2;
}
Cách lấy mã màu trong Photoshop: trong thanh Tools bar, bấm
chuột vào mục Set foreground color (gần cuối), rồi bấm vào vùng cần lấy mã màu.
Cách lấy mã màu trong Chrome, bấm chuột vào ô vuông màu
(trong cửa sổ style), di chuyển chuột vào vùng màu cần lấy.
Sau đây là đoạn mã mẫu cho Menu và Slide:
[HTML – index.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<title>Document</title>
<link rel="stylesheet"
href="vendor/css/bootstrap.min.css">
<link
rel="stylesheet" href="css/main-style.css">
<script
href="vendor/js/bootstrap.min.js"></script>
</head>
<body>
<div
class="top-header">
<nav
class="navbar navbar-default" role="navigation">
<div
class="container">
<!--
Brand and toggle get grouped for better mobile display -->
<div
class="navbar-header">
<button
type="button" class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span
class="sr-only">Toggle navigation</span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
</button>
<a
class="navbar-brand" href="#"><img
src="images/logo.png" alt=""></a>
</div>
<!--
Collect the nav links, forms, and other content for toggling -->
<div
class="collapse navbar-collapse navbar-ex1-collapse">
<ul
class="nav navbar-nav navbar-right">
<li
class="active"><a
href="#">Home</a></li>
<li><a
href="#">About us</a></li>
<li><a
href="#">Our Work</a></li>
<li><a
href="#">Our Blog</a></li>
<li><a
href="#">Our Services</a></li>
<li><a
href="#">Contact</a></li>
</ul>
</div><!--
/.navbar-collapse -->
</div>
</nav>
<!-- end main menu -->
<!--
begin slide -->
<div
class="container">
<div
class="col-sm-12 slide-content">
<div
class="slide-text">
<div
class="line1">Any Time, Any Place, <span
class="green-color">Langbiang</span></div>
<div
class="line2">Stop. Go. Langbiang</div>
<div
class="line1">Go On, <span class="green-color">Get
Your Langbiang Out</span></div>
</div>
<div
class="slide-button">
<div
class="btn btn-default button-buy">Buy Theme</div>
<div
class="btn btn-info button-contact">Contact Us</div>
</div>
</div>
</div>
<!--
end slide -->
</div>
<!-- end top-header -->
</body>
</html>
[CSS – main-style.css]
* {
margin: 0;
padding: 0;
}
.btn.btn-default.button-buy, .button-contact {
border-radius: 20px;
font-size: 18px;
font-weight: bold;
padding: 10px 30px;
width: 190px;
margin-top: 30px;
}
.green-color {
color: #5ae9cd;
}
.line2 {
font-size: 60px;
}
.slide-content {
position: relative;
z-index: 2;
margin-top: 330px;
font-size: 35px;
font-family: cursive;
color: white;
font-weight: bold;
}
.navbar-default .navbar-nav>li>a {
color: white;
font-family:
"Roboto Thin";
font-size: 15px;
text-transform: uppercase;
position: relative;
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default
.navbar-nav>li>a:hover {
color: #82c5b8;
}
.navbar-default .navbar-nav > .active > a::after {
content: "";
width: 35%;
height: 2px;
background: #55cfb8;
position: absolute;
bottom: 11px;
left: 23px;
}
.navbar-default .navbar-nav>.active>a, .navbar-default
.navbar-nav>.active>a:focus, .navbar-default
.navbar-nav>.active>a:hover {
background: none;
color: #55cfb8;
}
.top-header {
padding-top: 63px;
background:
url("../images/bg01.jpeg");
min-height: 1068px;
}
nav.navbar.navbar-default {
background:
transparent;
border: 1px solid
transparent;
}
.top-header::after {
content: "";
width: 100%;
height: 1068px;
background: #73747730;
position: absolute;
top: 0;
}
nav.navbar.navbar-default {
background:
transparent;
border: 1px solid
transparent;
position: relative;
z-index: 2;
}
[Giao diện]
-----------
Cập nhật [20/08/2019][21/09/2018]
-----------
Xem thêm: Làm web (02) - Photoshop và Bootstrap (02)