Khóa học cắt HTML CSS từ PSD kéo dài 2 buổi, tập trung vào lý thuyết và thực hành với Photoshop và Dreamweaver để xây dựng website chuẩn HTML5. Học viên sẽ chuẩn bị file PSD, cài đặt phần mềm cần thiết và học cách phân tích bố cục, cắt ảnh, và quản lý project. Cuối cùng, khóa học sẽ hướng dẫn hoàn thiện giao diện cho trang web và các trang con đi kèm.

1. Cắt HTML CSS từ PSD
1
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í …)
2

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 .
3

4. II . Chuẩn bị .
(Học viên chuẩn bị trước ở nhà )
1 . File giao diện website (PSD)
4

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/v
iew?pli=1
Link download , hướng dẫn cài đặt Photoshop CS6
http://sinhvienit.net/forum/adobe-photoshop-cs6-full-crack.208139.html
5

6. II . Chuẩn bị .
(Học viên chuẩn bị trước ở nhà )
2 . Công cụ lập trình – Dreamwear CC
Link 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
6

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 …
7

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 …
8

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 .
9
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 .
10
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
11

12. III. Các bước tiến hành
Bước 4 : CSS mặc định cho toàn trang (t)
12

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 .
13
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
14

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 . 15

16. THANK YOU FOR YOUR ATTENTION !
16