Hướng dẫn thiết kế giao diện tĩnh HTML/CSS trang tin tức du lịch

Hôm nay EDU.COM.VN sẽ hướng dẫn các bạn chuyển file thiết kế Cắt template PSD thành HTML/CSS – giao diện Naturetour. Với bài viết này, các bạn sẽ biết được các bước để tạo thành trang web tĩnh, chuyển từ một thiết kế photoshop thành một trang web HTML và định dạng CSS.
Hôm nay EDU.COM.VN sẽ hướng dẫn các bạn chuyển file thiết kế Cắt template PSD thành HTML/CSS – giao diện Naturetour. Với bài viết này, các bạn sẽ biết được các bước để tạo thành trang web tĩnh, chuyển từ một thiết kế photoshop thành một trang web HTML và định dạng CSS.

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

huong-dan-thiet-ke-giao-dien-tinh-html-css-trang-tin-tuc-du-lich

Hướng dẫn thiế kế giao diên trang tin tức 1

Hướng dẫn thiế kế giao diên trang tin tức 2

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

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

Trim các layer

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

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

thu muc cac hinh cua website

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

 

PHẦN ROW1

Bước 1: Grid cho phần Row1

 

Bước 2: Hình hinh. Thay thế <!—img hinh here –> bằng

 

Bước 3: Menu. Thay thế <!–  main menu here –> bằng

 

Phần Row1 sau khi đã hoàn thành

 

PHẦN ROW2

 

PHẦN ROW3

 

PHẦN ROW4

 

Trang HTML sau khi hoàn thành sẽ như sau

Trang HTML chua co css

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ẻ

 

Tiếp theo thiết lập  cho Row1

 

Tiếp theo là phần Row2

 

Kế tiếp là phần Row3

 

Cuối cùng là phần Row4

 

Hoàn thành trang web

Hoan thanh trang web tin tuc du lich co css day du

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