CHỦ ĐỀ 9. THIẾT KẾ WEBSITE BẰNG PHẦN MỀM
I. Chuẩn bị xây dựng trang web
1. Cấu trúc chung của một trang web
Một trang web hoàn chỉnh thường gồm 3 phần chính:
- Phần đầu trang (Header):
Chứa logo, tên trang, thanh điều hướng (menu), tiêu đề, nút tìm kiếm.
+ Lưu ý:
Favicon là biểu tượng nhỏ (favorite icon) đại diện cho website, hiển thị trên tab trình duyệt (trước địa chỉ web).
- Phần thân trang (Body):
Chứa nội dung chính, được chia thành các khối (blocks) hình chữ nhật.
- Phần chân trang (Footer):
Chứa thông tin bản quyền, liên hệ, liên kết mạng xã hội.
2. Quy trình chuẩn bị xây dựng trang web
Gồm 3 bước lớn theo trình tự sau:
- Định hình ý tưởng:
Xác định mục đích, đối tượng người dùng, yêu cầu về nội dung và hình thức.
- Thiết kế:
Xây dựng dàn ý, kiến trúc nội dung, bố cục, bảng màu, phông chữ.
+ Mỹ thuật: Phông chữ không chân (Sans Serif) thường dùng cho menu/nội dung để dễ đọc; phông có chân (Serif) dùng cho tiêu đề lớn. Bảng màu cần hài hòa, tương phản vừa phải.
- Lựa chọn phần mềm và chuẩn bị tư liệu:
Chọn công cụ (dùng Google Sites), chuẩn bị logo, hình ảnh, bài viết.
GHI NHỚ
- Phân biệt kỹ 3 phần của trang web.
- Nhớ khái niệm Favicon và vị trí của nó.
- Thứ tự quy trình: Ý tưởng → Thiết kế → Chuẩn bị phần mềm/tư liệu.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM ĐÚNG/SAI
Câu 1: Trước khi bắt tay vào thiết kế một trang web trên máy tính, việc hiểu rõ cấu trúc chung của trang web cũng như nắm vững quy trình chuẩn bị xây dựng trang web là bước vô cùng quan trọng để tạo ra một sản phẩm hoàn chỉnh và chuyên nghiệp.
a) Một trang web hoàn chỉnh thường được chia thành 3 phần chính bao gồm phần đầu trang (Header), phần thân trang (Body) và phần chân trang (Footer).
b) Favicon là một biểu tượng có kích thước lớn thường được đặt ở phần thân trang (Body) để người dùng dễ dàng chú ý đến thương hiệu của website.
c) Trong quy trình chuẩn bị xây dựng trang web, công đoạn lựa chọn phần mềm thiết kế và chuẩn bị tư liệu phải được thực hiện sau khi đã định hình ý tưởng và thiết kế xong dàn ý, bố cục.
d) Khi thiết kế một trang web tin tức với nhiều bài viết dài, người thiết kế nên sử dụng phông chữ có chân (Serif) cho toàn bộ nội dung bài viết và thanh menu để người đọc dễ dàng quan sát và không bị mỏi mắt.
II. Xây dựng phần đầu trang web
1. Làm quen với Google Sites
- Google Sites là ứng dụng miễn phí giúp tạo website trực quan, lưu trữ trên Google Drive.
- Truy cập: sites.google.com/new.
2. Các thành phần phần đầu trang (Header)
Trong giao diện thiết kế, phần đầu trang bao gồm:
- Tên tệp lưu trữ: Tên file quản lý trong Google Drive.
- Tên trang web: Hiển thị trên web, kèm theo Logo và Favicon.
- Tiêu đề trang: Tên bài viết hoặc nội dung chính của trang đó.
- Hình nền & Loại tiêu đề: Có thể chọn các loại kích thước: Bìa (lớn nhất), Biểu ngữ lớn, Biểu ngữ, hoặc Chỉ có tiêu đề.
3. Thao tác chính
- Thêm Logo/Favicon: Vào cài đặt "Hình ảnh thương hiệu".
- Thay đổi hình nền: Chọn "Thay đổi hình ảnh" → Tải lên hoặc chọn từ Drive.
- Chỉnh độ sáng: Có chức năng tự động điều chỉnh độ sáng để dễ đọc chữ, có thể tắt/bật.
GHI NHỚ
- Phân biệt "Tên trang web" (hiển thị cho người xem) và "Tên tệp" (lưu trong Drive).
- Các loại kích thước tiêu đề (Bìa (lớn nhất), Biểu ngữ lớn, Biểu ngữ, hoặc Chỉ có tiêu đề).
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM ĐÚNG/SAI
Câu 2: Google Sites là một ứng dụng miễn phí giúp người dùng tạo website trực quan và lưu trữ trên Google Drive. Khi làm việc với phần đầu trang (Header) trên Google Sites, người dùng cần phân biệt rõ các thành phần và thao tác tùy chỉnh giao diện.
a) Trên giao diện thiết kế phần đầu trang, người dùng có thể tùy chọn các loại kích thước cho phần tiêu đề như: Bìa, Biểu ngữ lớn, Biểu ngữ, hoặc Chỉ có tiêu đề.
b) Tên tệp lưu trữ của trang web (lưu trong Google Drive) luôn luôn phải đặt giống hệt với tên trang web hiển thị cho người xem trên trình duyệt.
c) Chức năng tự động điều chỉnh độ sáng hình nền ở phần đầu trang giúp tăng độ tương phản giữa hình ảnh và văn bản tiêu đề, từ đó làm cho chữ hiển thị trên nền ảnh dễ đọc hơn.
d) Nếu muốn thêm Logo của trường học và biểu tượng Favicon cho trang web lớp học trên Google Sites, học sinh cần truy cập vào thẻ Giao diện (Themes) thay vì sử dụng mục cài đặt "Hình ảnh thương hiệu".
III. Xây dựng phần thân và chân trang web
1. Bảng chọn "Chèn" (Insert)
Đây là công cụ chính để xây dựng nội dung, gồm 3 nhóm lệnh:
- Nhóm chèn cơ bản: Hộp văn bản (Text box), Hình ảnh, Nhúng (Embed), Drive.
- Nhóm bố cục (Layouts): Các mẫu khối nội dung có sẵn (ảnh kèm văn bản).
- Nhóm đối tượng khác: Mục lục, băng chuyền hình ảnh, nút, YouTube, Lịch, Bản đồ (Map).
2. Thao tác với bản đồ (Google Maps)
- Cách chèn: Chọn "Bản đồ" trong bảng chọn Chèn → Nhập địa điểm → Chọn (Select).
- Chỉnh sửa: Có thể thay đổi kích thước, di chuyển vị trí bản đồ như một hình ảnh.
3. Tạo chân trang (Footer)
- Di chuyển xuống cuối trang → Nhấn nút "Thêm chân trang" (Add footer).
- Nội dung chân trang sẽ hiển thị giống nhau trên tất cả các trang của website.
GHI NHỚ
- Muốn thêm nội dung (ảnh, text, map...) thì tìm ở đâu? → Bảng chọn Chèn (Insert) bên phải.
- Chân trang thường dùng để làm gì? (Thông tin bản quyền, liên hệ,...).
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM ĐÚNG/SAI
Câu 3: Khi thiết kế phần thân và phần chân trang web bằng Google Sites, người dùng chủ yếu sử dụng bảng chọn "Chèn" (Insert) để thêm các đối tượng nội dung đa phương tiện, cũng như thiết lập các thông tin cố định ở cuối trang web.
a) Bảng chọn "Chèn" (Insert) cung cấp nhóm bố cục (Layouts) với các mẫu khối nội dung được thiết kế sẵn để người dùng dễ dàng chèn ảnh kèm theo văn bản.
b) Khi tạo phần chân trang (Footer), nội dung được thêm vào khu vực này sẽ chỉ hiển thị ở trang chủ mà không xuất hiện trên các trang con khác của website.
c) Bản đồ Google Maps sau khi được chèn vào phần thân trang web có thể được điều chỉnh kích thước và di chuyển vị trí linh hoạt tương tự như thao tác với một hình ảnh thông thường.
d) Để tiết kiệm thời gian khi thiết kế một trang web giới thiệu du lịch với nhiều hình ảnh lướt ngang liên tục, học sinh cần sử dụng công cụ Hộp văn bản (Text box) kết hợp với công cụ Nhúng (Embed) thay vì dùng tính năng Băng chuyền hình ảnh.
IV. Liên kết và thanh điều hướng
1. Cấu trúc trang web (Mô hình cây)
- Website gồm một Trang chủ (Home page) và các Trang con (Sub-pages).
- Các trang con có thể chứa các trang con khác tạo thành cấu trúc phân cấp (giống cây thư mục).
2. Thao tác với trang (Pages)
- Tạo trang con: Vào bảng chọn Trang (Pages) → Nhấn dấu + hoặc dấu ba chấm cạnh trang chủ → "Thêm trang con".
- Thanh điều hướng (Navigation bar): Hệ thống tự động cập nhật tên các trang mới tạo lên thanh menu.
Trên thiết bị di động, thanh điều hướng sẽ tự động thu gọn thành biểu tượng 3 gạch ngang (hamburger menu).
3. Tạo liên kết (Hyperlink)
Cách làm: Bôi đen văn bản hoặc chọn ảnh → Nhấn biểu tượng Liên kết (Link) → Chọn trang đích hoặc dán địa chỉ web → Áp dụng.
GHI NHỚ
- Hiểu bản chất cấu trúc cây của website.
- Thanh điều hướng tự động thay đổi thế nào khi thêm trang mới? (Tự động cập nhật).
- Giao diện menu trên điện thoại khác máy tính thế nào?
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM ĐÚNG/SAI
Câu 4: Một trang web hoạt động hiệu quả không thể thiết hệ thống thanh điều hướng giúp người xem di chuyển giữa các trang con, đồng thời việc tích hợp biểu mẫu cũng rất cần thiết để thu thập ý kiến phản hồi từ người truy cập.
a) Cấu trúc của một trang web thường được tổ chức theo mô hình phân cấp, bao gồm một trang chủ (Home page) và các trang con (Sub-pages) tạo thành cấu trúc giống cây thư mục.
b) Dữ liệu và các thông tin phản hồi thu thập được từ biểu mẫu nhúng trên Google Sites sẽ được hệ thống lưu trữ trực tiếp ngay trên giao diện của nền tảng Google Sites.
c) Khi truy cập website trên các thiết bị di động có màn hình nhỏ, thanh điều hướng chứa tên các trang con sẽ tự động thu gọn lại thành biểu tượng có 3 gạch ngang (hamburger menu) để tối ưu không gian hiển thị.
d) Để thu thập thông tin đăng ký tham gia câu lạc bộ, học sinh cần tạo bảng câu hỏi trên Google Forms, sau đó mở bảng chọn "Trang" (Pages) trên Google Sites để nhúng trực tiếp biểu mẫu này vào trang web.
V. Biểu mẫu trên trang web
1. Mục đích:
Dùng để thu thập thông tin, ý kiến phản hồi, khảo sát từ người dùng.
2. Quy trình tạo và nhúng biểu mẫu
Bước 1: Tạo biểu mẫu bằng Google Forms (forms.google.com). Thiết lập câu hỏi (Trắc nghiệm, trả lời ngắn...).
Bước 2: Nhúng vào Google Sites. Tại bảng chọn Chèn → Chọn Biểu mẫu (Forms) → Chọn file vừa tạo.
3. Xem kết quả
- Dữ liệu không lưu trên Google Sites mà lưu trong Google Forms (hoặc liên kết sang Google Sheets - Bảng tính).
- Có thể xem thống kê dưới dạng biểu đồ hoặc câu trả lời chi tiết.
GHI NHỚ
- Công cụ tạo biểu mẫu là gì? (Google Forms).
- Cách đưa biểu mẫu lên web? (Dùng menu Chèn trong Sites).
- Dữ liệu phản hồi nằm ở đâu? (Trong Forms/Sheets, không phải trực tiếp trên giao diện Sites).
TÓM LẠI:
Khi gặp câu hỏi về Google Sites, các em hãy tưởng tượng lại giao diện bên phải màn hình:
- Muốn thêm ảnh, chữ, map, form → Nghĩ ngay đến thẻ Chèn (Insert).
- Muốn thêm trang mới, sửa tên menu → Nghĩ đến thẻ Trang (Pages).
- Muốn đổi màu, font chữ toàn trang → Nghĩ đến thẻ Giao diện (Themes).
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM ĐÚNG/SAI
Câu 5: Biểu mẫu trên trang web đóng vai trò vô cùng quan trọng trong việc tương tác trực tiếp với người truy cập. Việc tạo và quản lý biểu mẫu đòi hỏi người thiết kế phải sử dụng đúng công cụ nền tảng và hiểu rõ mục đích của chúng trong hệ thống.
a) Mục đích chính của việc sử dụng biểu mẫu trên trang web là dùng để thu thập thông tin, ý kiến phản hồi hoặc thực hiện các khảo sát từ người dùng.
b) Công cụ trực tiếp được sử dụng để tạo ra các biểu mẫu trước khi đưa lên trang web Google Sites chính là nền tảng Google Forms.
c) Người thiết kế có thể tiến hành thiết lập các câu hỏi cho biểu mẫu trực tiếp trên giao diện của phần mềm Google Sites mà không cần truy cập vào trang web của Google Forms.
d) Khi muốn xây dựng một trang web nhằm mục đích đăng ký tham gia sự kiện ngoại khóa của trường, học sinh cần tạo bảng câu hỏi trên Google Forms trước, sau đó mở Google Sites và dùng bảng chọn "Chèn" để nhúng biểu mẫu này vào trang web.
🏁 KẾT THÚC BÀI HỌC