Xin Chào Các Bạn
EDU hôm nay. COM>VN sẽ hướng dẫn các bạn Convert file mẫu website PSD sang HTML/CSS. Mẫu trang chúng ta sẽ thực hiện là trang Exponet
Yêu Cầu
– Căn bản HTML/CSS – Bootstrap
– Căn bản Photoshop
– Thời gian thực hiện 1h~1h30p
CẮT ẢNH PHOTOSHOP
Các bạn tải file PSD của trang Exponet tại đây. Sau khi tải xuống, bạn mở tệp bằng Photoshop. Chúng ta sẽ sử dụng công cụ Crop Tool để cắt ảnh. Công việc đầu tiên đó là xác định các thành phần cần cắt cho trang web, ví dụ. logo, biểu ngữ nền, biểu tượng v. v
Chúng ta cùng nhau thực hiện Logo
Bước 1. Chọn công cụ Crop Tool trên thanh công cụ, phím tắt C. Chọn một vùng xung quanh Logo cần cắt. Sau đó nhấn Enter để hoàn thành
Crop Tool, select field Logo
Bước 2. Ẩn hết tất cả các Layer khác, giữ lại Group Logo Box
Ẩn hết các Layer khác, trừ hộp Logo Nhóm
Bước 3. Để bỏ phần thừa xung quanh Logo, chúng ta chọn menu Image -> Trim. Hộp thoại Trim xuất hiện, chọn thông số như hình, nhấn Ok để hoàn tất
Hộp thoại Trim
Bước 4. Lưu tệp với định dạng tối ưu cho trang web. Chọn menu File -> Save for Web…. Phím tắt Alt + Shift + Ctrl + S. Hộp Thoại Lưu cho Web xuất hiện, chọn định dạng như hình sau đó nhấn Lưu… và lưu vào thư mục chứa hình ảnh của trang web
Hộp thoại Save for Web
Sau khi cắt các cấu hình cần thiết, chúng ta sẽ nhận được một thư mục chứa hình ảnh cho trang web
Thư mục hình ảnh của trang web
XÂY DỰNG CẤU TRÚC HTML hiển thị BOOTSTRAP
Sau khi đã chuẩn bị xong cấu hình ảnh, bước tiếp theo chúng ta xây dựng cấu trúc HTML kết hợp với Bootstrap
Đầu tiên chúng ta phải up cấu trúc cho file HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Exponet
Trên là cấu trúc cơ bản của một trang HTML. Chúng ta sẽ lần lượt code từng phần và theo trình tự từ trên xuống
THÀNH PHẦN HEADER
Bước 1. Constructor Grid of Header section
1
2
3
4
5
6
7
8
9
10
11
12