• fans
  • 1036 reader
  • followers

Category: CSS/HTML

Từ PSD sang HTML (phần 4/5)

Từ PSD sang HTML (phần 4/5)...

Đến bây giờ bạn đã có một trang web HTML hoàn chỉnh và có thể sử dụng được. Tuy nhiên còn nhiều việc bạn có thể làm để sau này việc quản lý trang web được dễ dàng hơn và tiết kiệm thời gian hơn. Cho dù trang web của bạn sẽ là web "tĩnh"

Từ PSD sang HTML (phần 3/5)

Từ PSD sang HTML (phần 3/5)...

Đây là phần thứ 3 trong series chuyển file PSD sang HTML. Trong phần thứ hai, chúng ta đã xây dựng xong code HTML cho giao diện. Trong phần 3 này chúng ta sẽ sử dụng CSS để định dạng cho giao diện. Phần này rất dài, 52 phút OMG! cũng khá là nhàm chán

Từ PSD sang HTML (phần 2/5)

Từ PSD sang HTML (phần 2/5)...

Đây là phần thứ 2 trong series chuyển file PSD sang HTML. Trong phần thứ nhất, tôi đã hướng dẫn bạn cách cắt hình trong Photoshop và trong phần này, chúng ta sẽ xây dựng code HTML cho giao diện. Phần này hơi chán và buồn tẻ :p, nhưng lại là phần bắt buộc phải

Từ PSD sang HTML (phần 1/5)

Từ PSD sang HTML (phần 1/5)...

Việc biến một giao diện được thiết kế trong Photoshop thành HTML là một phần rất quan trọng trong thiết kế web. Sau này nếu bạn muốn tự tạo giao diện cho trang web của mình cho dù nó động hay là web tĩnh, thì việc chuyển một thiết kế từ PSD sang HTML là

Giao diện liquid với CSS

Giao diện liquid với CSS...

Trong phần trước của tutorial này, tôi đã hướng dẫn bạn cách tạo ra giao diện 2 cột và 3 cột cố định. Trong phần này chúng ta sẽ tạo ra trang web có thể giãn nở tùy theo kích thước của màn hình. Mỗi loại giao diện đều có điểm mạnh và mặt

Giao diện với CSS

Giao diện với CSS...

Tạo giao diện trong CSS là điều cuối cùng mà bạn muốn làm khi học CSS để hoàn toàn thoát khỏi bảng như những cách thường làm trước đây. CSS cho phép bạn tạo ra rất nhiều loại giao diện khác nhau như 2 cột, 3 cột, cố định, co giãn ... Trong video tutorial

Flyout Menu với CSS

Flyout Menu với CSS...

Giống như Drop Down menu Flyout menu cũng được sử dụng rộng rãi trên nhiều trang web. Đặc biệt là những trang web có nhiều nội dung và cần nhiều tầng menu để trình bay hết nội dung. Trong tutorial này, tôi sẽ hướng dẫn bạn cách tạo ra flyout menu hoàn toàn bằng

Clear và Float (video)

Clear và Float (video)...

Clear và Float là một khái niệm rất quan trọng trong CSS và sử dụng rất nhiều trong thiết kế giao diện với CSS. Tôi đã có bài viết về Clear và Float, nhưng vì đây là một khái niệm quan trọng, do vậy tôi muốn làm một video tutorial để giải thích những

Nút giãn nở

Nút giãn nở...

Nút giãn nở là dạng nút có thể co gian và bao lấy nội dung khi nội dung của nó to ra hoặc nhỏ lại. Đây là dạng nút được sử dụng rất nhiều làm Tab như trên Izwebz bạn cũng thấy. Nếu chỉ là web tĩnh thì không thành vấn đề, nhưng là web

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

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.

Phần 2: Xây dựng code xHTML

Phần 2: Xây dựng code xHTML...

Đâ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

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

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

Ở 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. (more…)

Display Property

Display Property...

Ở bài trước bạn đã biết rằng tất cả các thành phần xhtml đều có Position Property. Cũng tương tự như vậy tất cả các thành phần xhtml đều có Display Property. Thực tế có khá nhiều giá trị Display Property, nhưng những thành phần hay được sử dụng nhất thường có một giá trị

Tạo menu 3 trạng thái

Tạo menu 3 trạng thái...

Menu ba trạng thái là dạng menu khi không có ai click nó một màu, khi người dùng dùng di chuột lên nó, no biến sang trạng thái khác và khi người dùng đang ở một trang, trạng thái liên quan đến trang đó sẽ được hiển thị. Có 2 cách bạn có thể dùng

Dropdown Menu với CSS

Dropdown Menu với CSS...

Hiện nay Dropdown menu là dạng menu rất phổ biến trên nhiều trang web đặc biệt là những trang web có cấu trúc phức tạp và cần nhiều Categories để hiển thị hết nội dung của trang. Do vậy Dropdown menu là dạng menu lý tưởng để giải quyết vấn đề này. Trước đây nếu

Newbie

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.

Izwebz facebook group

Social connect

Recent Comments

Archives