BÀI 23. CHUẨN BỊ XÂY DỰNG 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.

Đặ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.

Ví dụ:

Khi vào trang báo điện tử, phần trên cùng luôn có Logo toà báo, bên cạnh là các mục như "Thời sự", "Thể thao", "Giải trí" để em bấm vào.

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.

Ví dụ:

Khi em mở Facebook trên máy tính, em thấy chữ "f" nhỏ xíu nằm ở trên cái "thẻ" (tab) trình duyệt, đó chính là favicon.

Đặ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.

Ví dụ:

Trên trang web bán hàng, phần giữa màn hình chia thành các ô vuông: ô "Sản phẩm mới", ô "Sản phẩm bán chạy", ô "Khuyến mãi".

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...).

Ví dụ:

Trong bài viết về du lịch, ngoài chữ viết mô tả, người ta chèn thêm một cái bản đồ Google Maps nhỏ để em biết địa điểm đó ở đâu.

Đặ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.

Ví dụ:

Kéo xuống tận cùng trang web của trường mình, em sẽ thấy dòng chữ "Bản quyền thuộc về Trường THPT Quốc Thái", kèm theo số điện thoại phòng công tác và biểu tượng Facebook của trường.

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.

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.

Ví dụ:

Em làm trang web để bán trà sữa (Mục đích) cho các bạn học sinh trong trường (Đối tượng).

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ì.

Ví dụ:

Vì bán trà sữa cho học sinh (đối tượng thích sự trẻ trung), trang web cần có hình ảnh trà sữa thật hấp dẫn, màu sắc tươi sáng, không dùng quá nhiều chữ nhàm chán.

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.

Ví dụ:

Em vẽ phác thảo ra giấy: Logo nằm góc trái, Menu nằm ngang, Ảnh món trà sữa "Best seller" nằm to ở giữa, danh sách giá nằm bên phải.

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.

Ví dụ:

Em chọn phông Arial cho toàn bộ bài viết giới thiệu món ăn để khách dễ đọc, chỉ dùng phông nghệ thuật cho tên quá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.

Ví dụ:

Trang web về "Môi trường xanh" nên dùng chủ đạo màu Xanh lá cây, nền Trắng, chữ Đen và một chút màu Nâu đất để tạo cảm giác thiên nhiên.

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....

Ví dụ:

Em dùng Google Sites vì em chỉ cần kéo thả ảnh từ Google Photos vào là xong, không cần biết viết mã lệnh (code).

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....

Ví dụ:

Trước khi bắt tay vào làm web lớp, em đi chụp ảnh tập thể lớp, viết sẵn bài giới thiệu về thành tích của lớp và lưu vào một thư mục trên máy tính.