Cấu trúc tổng quan của project nhóm
Trong một trang web sẽ có 4 phần thứ nhất là page thứ hai là style thể hiện được phong cách của trang web thứ ba là làm như thế nào cho trang web chạy và cuối cùng là hình ảnh cho trang web sinh động. Dưới đây là cấu trúc của project:
asset
├── style/ # Thư mục chứa tất cả các file CSS
│ ├── login.css # Style cho trang login
│ ├── location.css # Style cho trang vị trí
│ ├── introduction.css # Style cho trang giới thiệu
│ ├── index.css # Style cho trang Chủ
│ ├── demo1.css # Style cho trang loại bánh
│ ├── demo.css # Style cho trang chi tiết mỗi bánh
│ ├── cart.css # Style cho trang giỏ hàng
│ ├── banh1.css # Style cho trang bánh
├── img/ v # Thư mục chứa tất cả hình ảnh
│ ├── logo.png # Logo của website
│ ├── background.jpg # Hình nền chung của website
│ ├── sp1 # Hình ảnh sản phẩm 1
│ ├── sp2 # Hình ảnh sản phẩm 2
├── js/ # Thư mục chứa tất cả các file JavaScript
│ ├── login.js # Chức năng trang login
│ ├── cart.js # Chức năng trang giỏ hàng
│ ├── banh1.js # Chức năng trang bánh
(và các chức năng khác)
├── login.html # Trang đăng nhập(đăng ký)
├── location.html # Trang tìm kiếm vị trí
├── introduction.html # Trang giới thiệu
├── index.html # Trang Chủ
├── demo1.html # Trang tổng hợp các loại bánh
├── demo.html # Trang chi tiết các loại bánh
├── cart.html # Trang giỏ hàng
├── banh1.html # Trang chi tiết mỗi loại bánh
├── README.md # File tài liệu hướng dẫn sử dụng project
Quy tắc đặt tên
Thư mục
Tạo một thư mục lớn có tên có nghĩa để lưu trữ các thư mục gốc như style js img. Sử dụng tiếng Anh để dễ làm việc với nhau vì tiếng Anh là tiếng quốc tế. Không dấu, không khoảng trắng, tốt nhất lên viết thường.
File
Tên file phải có nghĩa với chủ đề nội dung của nó và sử dụng chữ thường
Chức năng của các thư mục
Tùy vào các thư mục sẽ có các chức năng khác nhau, thư mục js/ sẽ có chức năng làm cho cái gì đó hoạt động được, thư mục style/ sẽ làm cho trang sống động hơn, thân thiện với người dùng hơn, thư mục img/ chứa các ảnh liên quan đến trang web
Chức năng của các file
Tạo ra các nền móng cơ bản của trang web nhưng chưa được sống động, nhưng bootrap 5 có thể làm nó sống động hơn.
Màu Sắc
Màu cơ bản:
Nâu ấm: #CA7F5C
Trắng: #FFFFFF
Màu phụ:
Xám nhạt: #F8F9FA
Trắng kem nhạt: #F6F4EF
Màu nhấn:
Nâu ấm đậm: #DC3545
Xanh biển: #007BFF
Màu trung tính:
Xám: #6C757D
Xám nhạt: #E9ECEF
Sử dụng màu sắc:
Chữ chính: Đen (#000000) trên nền trắng (#FFFFFF)
Chữ phụ 1: Trắng (#FFFFFF) trên nền nâu ấm (#CA7F5C)
Chữ phụ 2: Đen (#000000) trên nền trắng kem nhạt (#F6F4EF)
Nút và liên kết:
Nút chính 1: Nền nâu ấm (#CA7F5C) với chữ trắng (#FFFFFF)
Nút chính 2: Nền xanh biển (#007BFF) với chữ trắng (#FFFFFF)
Viền và đường kẻ:
Viền và đường kẻ: #6C757D
Màu chữ:
#333: Chủ yếu dùng cho tiêu đề và văn bản chính, tạo sự rõ ràng và dễ đọc.
#777: Dùng cho văn bản phụ, giảm bớt sự chú ý so với nội dung chính.
#fff: Dùng cho nền và chữ trắng, thường cho thông báo quan trọng hoặc tiêu đề nổi bật.
#A57C68: Màu đỏ đậm dùng để làm nổi bật các yếu tố như biểu tượng và tiêu đề.
Typography Style Guide
1. Font chữ
Font chính: Nunito, sans-serif (import từ Google Fonts).
Font chữ này được sử dụng trên toàn bộ website, đem lại cảm giác hiện đại và thân thiện, phù hợp với chủ đề tiệm bánh.
Định dạng chữ đậm (font-weight)
Chữ tiêu đề: sử dụng font-weight: bold (700), tạo điểm nhấn.
Nội dung thông thường: sử dụng font-weight: 400.
2. Kích thước chữ
Chữ nội dung: Kích thước chữ mặc định: 1rem (16px trên phần lớn trình duyệt).
Chữ tiêu đề:
- Tiêu đề sản phẩm: 16px.
- Tiêu đề lớn như "MamMam Cake Favourites": 3rem (48px).
3. Màu sắc chữ
Màu chữ chính: Sử dụng màu sắc trung tính như: #333 (nội dung thông thường) và #A57C68 (tiêu đề ở footer).
Chữ trên thanh thông báo: Màu trắng (#FFFFFF) kết hợp nền nâu nhạt (#CA7F5C) tạo sự nổi bật.
4. Khoảng cách và căn chỉnh
Khoảng cách giữa các dòng chữ: Không được xác định cụ thể trong CSS nhưng mặc định của font-family Nunito đã tối ưu khoảng cách giữa các dòng, đem lại cảm giác thoải mái khi đọc.
Căn lề: Chủ yếu sử dụng text-align: center hoặc căn chỉnh đều (justify).
5. Hiệu ứng liên quan đến typography
Hover text: Khi người dùng rê chuột qua các liên kết, màu chữ thay đổi hoặc được nhấn mạnh:
Hãy thử rê chuột qua liên kết này để xem hiệu ứng.
Hiệu ứng mờ chữ trong ảnh chính (Hero Section):
Đây là văn bản trong Hero Section. Khi rê chuột qua sẽ thay đổi độ mờ.
Đây là một thanh thông báo với chữ trắng trên nền nâu nhạt.
