PHP bài 2

Yêu cầu bài tập:

Layout giao diện website sử dụng CSS

Thực hiện:

I. Giới thiệu

Trước đây việc layout cấu trúc giao diện website thường được sử dụng thẻ table trong ngôn ngữ HTML, dần dần phát triển theo thời gian CSS với những ưu điểm của mình đã thay thế cách layout bằng table như trước đây. Quả thực với tính năng ưu việt của mình CSS đã thể hiện rõ vai trò của mình như "linh hồn của website". Các hỗ trợ mạnh trong hiển thị giao diện, tính tái sử dụng,.. khiến chúng ta nhận thấy ngày nay thật khó khăn để tìm kiếm một website mà không sử dụng CSS để định dạng. Ngày nay không khó để tìm một giao diện miễn phí hoặc tính phí trên mạng để lập trình (download một mẫu website). Tuy nhiên trong bài tập này không quá chú trọng đến mức độ hoàn thành cuối cùng của thiết kế, nó như một minh họa cụ thể nhất để chung ta nắm được các tính chất cơ bản của layout.

II. Yêu cầu

Sử dụng CSS layout cấu trúc giao diện website gồm các phần hiển thị nội dung cơ bản:
  • Banner: đặt một tấm hình cở lớn nói về đặc trưng kinh doanh của công ty
  • Menu ngang: thể hiện những thông tin chủ yếu nhất như trang chủ, liên hệ, góp ý, các dự án mẫu...
  • Phần menu trái: thể hiện danh mục các sản phẩm công ty đang kinh doanh
  • Phân vùng bên phải: xuất ngắn gọn danh sách các sản phẩm mà công ty đang kinh doanh.
  • Footer: thể hiện thông tin ngắn gọn công ty, bản quyền...
III. Thực hiện

  • Bước 1: tạo file html đặt tên index.html nếu muốn tạo project html. Trong series bài tập này chủ yếu nói về lập trình PHP nên demo được thực hiện trực tiếp trên file PHP. Vậy bạn có thể tạo file index.php
  • Bước 2: tạo thư mục CSS để lưu trữ file CSS. Bạn có thể không tạo file này nhưng để project của bạn được gọn gàn hơn nên tôi khuyên các bạn nên tạo. Tiếp theo tạo file CSS đặt tên style.css lưu trong thư mục CSS.
  • Bước 3: tạo liên kết giữa file style.css và file index.php. Bạn có thể dùng thẻ để tạo liên kết hoặc nhanh hơn có thể kéo thả file CSS bỏ vào vùng head của file PHP
  • Bước 4: tiến hành layout. Bạn nên tìm hiểu về layout giao diện kiểu fixed, liquid, hay elastic trong tài liệu này, chương 9
layout website

dù ngày nay các cấu trúc website hết sức sáng tạo nhưng các thiết kế cơ bản vẫn là nền tảng để tiếp cận các thiết kế phức tạp hơn.

IV. Hướng dẫn chi tiết

Video hướng dẫn chi tiết, tường bước từng bước kỹ thuật layout:




Kết quả layout:

kết quả layout



Chúc các bạn học tốt, một số đề xuất cho bạn: