Tư LVT

Việc thiết kế giao diện web (Xây dựng web tĩnh) phải qua nhiều bước khá phức tạp, trong bài viết này tôi sẽ giới thiệu đến các bạn chi tiết các bước thiết kế một trang web tĩnh. Bắt đầu với việc thiết kế giao diện từ photoshop đến cắt giao diện và cuối cùng là trình bày trang web bằng ngôn ngữ HTML và CSS. Việc thiết kế giao diện web được chia làm 3 phần như sau Phần 1: Thiết kế giao diện web bằng photoshop Phần 2: Cắt giao diện cho web Phần 3: Layout web với HTML & CSS Các bước chuẩn bị cho bài thực hành Download các file trong forder Source để lấy hình và mẫu thiết kế. File thiết kế bằng photoshop phải giữ nguyên Layer để cắt giao diện cho web. Phần mềm sử dụng: 1.      Photoshop > vẽ và cắt giao diện 2.      Dreamweaver > Layout HTML & CSS Bây giờ hãy bắt tay ngay vào công việc Phần 1: Thiết kế giao diện bằng photoshop Hình bên dưới minh họa sản phẩm hoàn thành sau khi thiết kế bằng photoshop, bạn có thể tha...

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 phần 1 tôi đã hướng dẫn bạn cách thiết kế giao diện trang web shop hoa tươi bằng photoshop. Trong phần này, chúng ta sẽ sử dụng một giao diện đã thiết kế ở phần 1 để thực hiện cắt lấy hình ảnh đưa lên tài liệu html. Cắt giao diện web là cắt lấy hình ảnh cho tài liệu html, còn phần văn bản và phần lặp lại các bạn sẽ bỏ đi. (Phần văn bản cho web các bạn sẽ xử lý ở phần lập trình và lấy từ database). Nguyên tắt cơ bản: Mỗi sản phẩm > 1 file hình. Hình nền hay màu chuyển sắc > lấy đúng bước lặp lại và lưu thành 1 file hình. Sử dụng các định dạng hình cho web: *.jpg, *.png, *.gif. Công cụ sử dụng:  Slice tool > vẽ vùng chọn cho hình, mỗi vùng chọn > tạo thành 1 file Slice Select Tool > chỉ...

Ở phần 2 bạn đã cắt giao diện chọ web và kết quả thu được là chỉ là 1 folder hình. ở phần này, tôi sẽ trình bày cách chuyển hình ảnh thành trang web tĩnh sử dụng ngôn ngữ HTML và CSS với phần mềm hỗ trợ thiết kế là Adobe Dreamweaver. Sau khi hoàn thành bước này bạn sẽ có được một trang web tĩnh hoàn chỉnh để Upload lên hosting của mình. Để chuẩn bị cho phần thực hành này bạn phải chuẩn bị folder site_shop_hoatuoi và tạo site trong dreamweaver. Bước 1: Tạo site Shop_hoatuoi Trước hết bạn khởi động Adobe Dreamweaver > chọn site / new site > đặt tên cho site như hình > click next. Check chọn No, … như hình > next Ở bảng này bạn chọn Edit local copies… và chọn folder site_shop_hoatuoi > next Tiếp theo bạn chọn None / next > nhấn Done để tạo Site. Trong site bạn tạo 2 file: index.html và myCSS.css để định dạng tài liệu. Bước 2: Trình bày layout chính cho trang index Để xây dựng trang web, trước tiên ở trang index bạn cần tạo ra các khung div để chứa các th...