Cắt giao diện website từ file photoshop

1

Cắt HTML CSS từ PSD

Giảng viên : Lương Bá Hợp

2

Thời lượng : 2 buổi

Buổi 1 : Tìm hiểu lý thuyết , làm việc với photoshop để đo kích thước , mã màu , font chữ , cỡ chữ , cắt ảnh . Tạo , quản lý project với Dreamwear , xây dựng cấu trúc chuẩn html5 và tạo các css mặc định . (Demo chi tiết vùng header)

Buổi 2 : Chi tiết html css từng vùng trên website , hoàn thiện giao diện website . (Xây dựng thêm các trang con : Liên hệ , chi tiết , danh mục , đăng nhập , đăng kí …)

3

I . Giới thiệu

Giao diện của một website bất kì sẽ được Web Designer xây dựng trên phần mềm Photoshop và xuất ra file có đuôi .PSD

Sau khi nhận bản thiết kế (.psd) , Lập trình viên sẽ sử dụng kiến thức HTML CSS để tạo ra giao diện website (.html) từ bản thiết kế .

Đây là kiến thức nền tảng mà bất kì lập trình viên website nào cũng không thể bỏ qua .

4

II . Chuẩn bị .(Học viên chuẩn bị trước ở nhà )

1 . File giao diện website (PSD)

5

II . Chuẩn bị .(Học viên chuẩn bị trước ở nhà )

2 . Phần mềm Photoshop

Link tải bản cài sẵn : https://drive.google.com/file/d/0ByHXd2OzhedWUEIxTTN6Z01oU0U/view?pli=1

Link download , hướng dẫn cài đặt Photoshop CS6

http://sinhvienit.net/forum/adobe-photoshop-cs6-full-crack.208139.html

6

II . Chuẩn bị .(Học viên chuẩn bị trước ở nhà )

2 . Công cụ lập trình – Dreamwear CCLink cài đặt , crack : https://drive.google.com/file/d/0ByHXd2OzhedWeFNLbnlTeFNoMlk/view?pli=1

Link download , hướng dẫn cài đặt Dremwear CC đây là công cụ lập trình hỗ trợ HTML5

http://sinhvienit.net/forum/download-adobe-dreamweaver-cc-full-crack-phan-mem-thiet-ke-web-chuyen-nghiep.265000.html

7

II . Chuẩn bị .(Học viên chuẩn bị trước ở nhà )

3 . Trình duyệt và các ADD-ON hỗ trợ lập trình web Firefox là trình duyệt tuyệt vời vì : bảo mật, load

khá nhanh và không chiếm dụng nhiều CPU như Chrome của Google.

Ngoài ra Firefox còn có kho Add-on khổng lồ giúp các bạn có thể mở rộng được chức năng cho Firefox

Các add-on hữu ích : Firebug , ColorZilla , Measurelt , Awesome Screenshot Plus , Font Finder …

8

III. Các bước tiến hành

Bước 1 : Phân tích bố cục , đo kích thước , lấy mã màu , font chữ , cỡ chữ , cắt file ảnh .

Lưu ý : Tìm hiểu sử dụng các công cụ cơ bản trong photoshop .

- Từ bản psd , nhiệm vụ quan trọng nhất là phân tích bố cục của website cần xây dựng . Tương ứng với các vùng trên bản thiết kế là những cặp thẻ nào cần sử dụng …

9

III. Các bước tiến hành

Bước 2 : Xây dựng project , cấu trúc thư mục sử dụng Dreamwear .

Cấu trúc thư mục Khởi tạo file index.html

10

III. Các bước tiến hành

Bước 3 : Xây dựng cấu trúc website theo chuẩn HTML5 .

Lưu ý : -  Có comment kết thúc các thẻ phân vùng lớn trên website . - Thẻ wrapper là thẻ bao quanh các thẻ còn lại nếu website không full màn hình . - Với các thẻ phân vùng lớn trên website , khi đặt class nên thêm tiền tố để phân biệt với các thẻ phân vùng tương tự nhưng là thẻ phân vùng nhỏ .

11

III. Các bước tiến hành

Bước 4 : CSS mặc định cho toàn trang

12

III. Các bước tiến hành

Bước 4 : CSS mặc định cho toàn trang (t)

13

III. Các bước tiến hành

Bước 5 : Chi tiết HTML CSS từng vùng trên website - Sau khi chia các vùng lớn trên website , ta tiến hành làm việc với chi tiết từng vùng .Ví dụ : Trong vùng Header : gồm có logo , banner , menu chính … Ta sử dụng kiến thức từ đầu khoá học đến giờ để viết html chi tiết từng cặp thẻ ra sao , css cho nó như thế nào . Để hoàn thiện từng vùng trên website - Đây là bước lâu nhất , khó nhất , công đoạn chính .Lưu ý : Khi làm việc ở bước này , có quy tắc như sau : Hoàn thiện lần lượt từ trên xuống dưới và từ trái sang phải . 

14

III. Các bước tiến hành

Bước 5 : Xây dựng các trang con . - Một website thông thường bao gồm : trang chủ

(Home page ) và các trang con của nó .- Vì vậy sau khi hoàn thiện được trang chủ của

website việc tiếp theo là hoàn thiện các trang con

15

TỔNG KẾT

- Để xây dựng một trang website động giống như các website đang vận hành thực tế trên internet .- Đối với lập trình viên có 2 phần công việc lớn như sau

:     Một là : Xây dựng giao diện website (đầy đủ trang con)  sử dụng html , css , javascript .    Hai là : Nhúng ngôn ngữ lập trình điều khiển  . Cụ thể trong chương trình học đó là PHP - Kết thúc bài hôm nay , chúng ta đã xong phần thứ nhất .

16

THANK YOU FOR YOUR ATTENTION !