Phần 1: Chuyển PSD thành xHTML

Thủ thuật Thiết kế website
Nguồn: izwebz.com
Ở những bài trước bạn đã học được những kiến thức căn bản về CSS và
xHTML. Trong bài này tôi sẽ hướng dẫn bạn cách chuyển một file PSD sang
xHTML. Đây cũng là giai đoạn cuối cùng trong cả hành trình học CSS và
xHTML của bạn.

Chúng ta cũng phải thực sự cảm ơn thế mạnh của CSS, nhờ nó chúng ta
có thể tạo ra trang web với code xHTML “sạch sẽ” chứ không còn như mớ
bòng bong với hàng trăm dòng code của bảng và các thành phần font face,
color … như trước đây.

Đây là phần thứ nhất trong series gồm 3 phần. Trong phần này tôi sẽ
nói sơ qua về cách xây dựng trang web trong Photoshop và cách lấy những
tấm hình mình cần cho phần 2 là phần viết code xHTML.

Thời lượng: 24:39
Lưu ý: Bạn cần Hjsplit để join các file lại (phần mềm miễn phí)

Link MediaFire: Phần 1, Phần 2, Phần 3, Phần 4.
File size: 318.47 MB
Download file PSD, html và CSS: Clean ‘n’ Clear

Đây là phần thứ hai trong series gồm 3 phần. Trong phần này tôi sẽ
cùng bạn xây dựng code xHTML của trang web. Chúng ta sẽ bắt đầu từ dòng
code đầu tiên. Bạn có thể download file html của tutorial này về tham
khảo thêm cho rõ ràng. Nhớ là đọc file ReadMe.txt


Thời lượng: 29:37

Download file PSD, html và CSS: Clean ‘n’ Clear

Đây là phần 3 và cũng là phần cuối cùng của series tutorial chuyển
file PSD thành xHTML. Trong phần trước bạn đã xây dựng xong code HTML và
đã validate thành công. Bây giờ tới công đoạn dùng CSS để tạo dang cho
giao diện cho giống với mockup trong photoshop.

Khi chuyển từ mẫu thiết kế sang HTML, bạn nên làm càng giống càng tốt
với mẫu thiết kế. Kể cả là font chữ, khoảng cách, màu sắc … vì đó là ý
tưởng thiết kế của người làm. Chúng ta phải có trách nhiệm làm giống y
như trong thiết kế ban đầu.

Phần này khá dài, do vậy bạn nên đi lấy ly nước, đem theo ít bắp rang rồi mới vô cinema coi được =p

Thời lượng: 46:39

Link download định dạng .avi chất lượng cao: MediaFire Phần 1, Phần 2
File size:
Link reset CSS: Eric Meyer CSS Reset