BÀI 23. CHUẨN BỊ XÂY DỰNG TRANG WEB

1. NHỮNG ĐẶC ĐIỂM CHUNG CỦA TRANG WEB

Một trang web đầy đủ thường có cấu trúc gồm 3 phần chính: Đầu trang, Thân trang và Chân trang.

a) Phần đầu trang (Header)

Đặc điểm: Giống như trang bìa thu gọn hoặc phần đầu chương sách. Chứa các thông tin nổi bật như: Logo, tên trang, thanh điều hướng (bảng chọn), thanh tìm kiếm, tiêu đề hoặc tin mới.

Lưu ý về Favicon: Là biểu tượng nhỏ hiển thị trên tab của trình duyệt web (trước địa chỉ web), đại diện cho website.

b) Phần thân trang (Body)

Đặc điểm: Chứa nội dung chính của trang, thường được chia thành các khối hình chữ nhật, mỗi khối có tiêu đề riêng.

Thành phần: Mỗi khối có thể chứa văn bản, hình ảnh, âm thanh, biểu mẫu hoặc ứng dụng nhúng (bản đồ, thời tiết...).

c) Phần chân trang (Footer)

Đặc điểm: Nằm ở dưới cùng, chứa thông tin thương hiệu, bản quyền, bảo mật, thông tin liên hệ và liên kết mạng xã hội.

2. CÁC BƯỚC CHUẨN BỊ ĐỂ XÂY DỰNG TRANG WEB

Quy trình chuẩn bị gồm 3 bước lớn: Định hình ý tưởng, Thiết kế, và Lựa chọn phần mềm/chuẩn bị tư liệu.

a) Định hình ý tưởng

Xác định mục đích và đối tượng: Phải trả lời được trang web làm ra để làm gì và ai là người xem.

Xác định yêu cầu nội dung và hình thức: Dựa vào nhu cầu và sở thích của đối tượng để quyết định trang web cần có gì.

b) Thiết kế

Xây dựng dàn ý và bố cục: Hình dung và sắp xếp vị trí các nội dung trên trang sao cho mạch lạc.

Thiết kế mĩ thuật (Định dạng chữ):

Nên chọn phông chữ nhất quán. Phông không chân (Sans Serif) như Arial, Tahoma thường dùng cho bảng chọn và nội dung vì dễ đọc trên màn hình. Phông có chân (Serif) ít dùng hơn, chỉ dùng cho tiêu đề lớn.

Thiết kế mĩ thuật (Bảng màu):

Chọn màu hài hòa, không tương phản quá gắt. Một bảng màu thường có 5 màu (pha trộn ấm, lạnh, trung tính) cộng với đen và trắng.

c) Lựa chọn phần mềm, chuẩn bị tư liệu

Lựa chọn phần mềm: Có thể dùng phần mềm của Google (Google Sites) vì nó miễn phí, trực quan (kéo thả dễ dàng) và kết nối tốt với Google Drive, YouTube, Maps....

Chuẩn bị tư liệu: Bao gồm thiết kế logo, favicon, hình nền, viết bài, chọn ảnh minh họa....