Làm web (01) - Photoshop và Bootstrap (01)

Bài viết trước: Làm web (00) - DNS & Registering DN
-----

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: Tổng hợp các bài viết về Làm web
Xem thêm: Làm web (02) - Photoshop và Bootstrap (02)