Từ PSD sang HTML (phần 5/5)
Một trang web luôn cần phải có Contact Form để người dùng có thể liên hệ với bạn. Bạn có thể sử dụng rất nhiều script có sẵn để làm contact form, hoặc bạn có thể để lại địa chỉ email để người đọc liên hệ. Tuy nhiên bạn cũng có thể tự làm một contact form trong PHP. Trong bài này tôi sẽ hướng dẫn bạn cách làm contact form đơn giản.
Cách sử dụng Texter
Như đã được giới thiệu trước đây, Texter là phần mềm miễn phí, gọn nhẹ nhưng giúp bạn tiết kiệm kha khá thời gian khi viết code. Thay vì phải copy và paste thì bạn chỉ việc gõ một từ khóa đặt trước và nó sẽ tự động “gõ” nốt những phần còn lại. Hơn nữa, Texter cho phép bạn sử dụng Script để tự động hóa những tác vụ phức tạp hơn.
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” nhưng bạn vẫn có thể kết hợp với PHP để giúp bạn tự động hóa nhiều tác vụ mà nếu không, bạn sẽ phải làm đi làm lại nhiều lần. Trong bài này, tôi sẽ hướng dẫn bạn cách sử dụng PHP ở mức cơ bản nhất nhưng cũng đủ cho bạn biết được sức mạnh của PHP trong thiết kế web.
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 nữa. Nhưng nó cũng rất quan trọng. Tôi cũng mất khá nhiều thời gian cho phần này, do vậy hy vọng các bạn thích tutorial này.
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 làm.
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à việc đầu tiên bạn phải làm. Trong Series tutorial trước, tôi đã hướng dẫn bạn cách chuyển từ PSD sang HTML. Trong lần này, chúng ta sẽ sử dụng một giao diện tương đối phức tạp hơn.
Giao diện liquid với CSS – Phần 2
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 hạn chế khác nhau, do vậy bạn nên quyết định xem dạng giao diện nào phù hợp với trang web của mình nhất.
Giao diện với CSS – Phần 1
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 này, tôi sẽ hướng dẫn bạn cách tạo ra giao diện bằng CSS. Tuy chúng ta sẽ không sử dụng hình ảnh mà chỉ tập trung vào phần chính là các thành phần trong giao diện. Nhưng nó sẽ là khung sường cho những giao diện phức tạp hơn sau này.
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 CSS.









