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