post image

Phần 3: Tạo dáng với CSS

Đâ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: MegaUpload, MediaFirePhần 1, Phần 2
File size:
Các phần trước: Phần 1, Phần 2.
Link reset CSS: Eric Meyer CSS Reset

Get the Flash Player to see this content.

«

»

  1. hoangnm says:

    anh cũng edit nốt cái link phần 4 vào bài phần 2,3 cho mọi người tiện down

  2. ntphong says:

    Trước tiên xin cám ơn anh về tut.Bài này thật sự hay em coi hết tut 3 phần nhưng hong chán như anh nói đâu. em mới học css nên phần này em thấy rất hấp dẫn :) . nhưng góp ý anh tí. em đeo tai nghe để nghe anh nói rỏ hơn. nhưng đối lúc máy anh phát ra những tiếng tít(lúc anh tắt mà chưa save hay gì đó) nó làm em đuối(quá lớn). vì chỉnh âm thanh nhỏ không nghe rỏ lúc nói nên chỉnh lớn tới lúc có âm thanh đó thì nó lại lớn quá. Lần nữa cám ơn anh.

  3. duocvang9999 says:

    Thật tuyệt! cám ơn anh rất nhiều.

  4. Trí says:

    Anh DW ơi em làm theo anh thì firefox chạy tốt.Mà qua IE thì cái footer nó hỏng.Em down file của anh về xem thấy cũng bị.Cái hình bubble.png góc trái nó bị choảng màu bên IE. Anh fix giúp em nhé :)

  1. BB
  2. BB
  3. BB

arrow

Lưu ý khi post comment:

  • Không "bóc tem" topic
  • Dùng lời lẽ có văn hoá và lịch sự
  • Xem trang FAQs trước khi hỏi
  • Bạn có thể dùng thẻ HTML như:<strong>, <em>, <a>
  • Wrap code trong dấu `backtick` (dấu trên phím Tab)

Chọn kiểu gõ: Tự động TELEX VNI Tắt