I. Lý thuyết trọng tâm

1. Mô hình các trang web liên kết với nhau theo cấu trúc hình cây

a) Vấn đề đặt ra khi thiết kế trang web

Ở các bài trước, các em đã biết cách tạo các khối văn bản giới thiệu về các địa danh (như Thung Nham, Mù Cang Chải) trong trang web đầu tiên – thường được gọi là trang chủ (home page).

Tuy nhiên, khi xây dựng trang web thực tế, chúng ta sẽ gặp phải một số vấn đề:

Câu hỏi đặt ra: Có giải pháp nào để khắc phục vấn đề này không?

b) Giải pháp: Tạo cấu trúc trang web hình cây

Giải pháp hữu hiệu là tạo ra các trang độc lập và sử dụng liên kết để kết nối chúng với nhau.

Cách thực hiện:

• Ở trang chủ, mỗi địa danh chỉ hiển thị phần giới thiệu tóm tắt (hình ảnh, tiêu đề và vài dòng mô tả ngắn)
• Cuối mỗi phần tóm tắt có cụm từ “Đọc tiếp” được gắn liên kết
• Khi người dùng nhấp vào “Đọc tiếp”, họ sẽ được chuyển đến trang web riêng chứa đầy đủ thông tin về địa danh đó

c) Khái niệm trang con

Tương tự như cách tổ chức thư mục trong máy tính, các trang web cũng có thể được tổ chức theo cấu trúc phân cấp:

Trang con là gì?

• Là các trang web được mở từ bảng chọn của trang chủ
• Trang con thuộc về trang chủ, giống như thư mục con thuộc về thư mục cha
• Các trang con cũng có thể có các trang con của riêng nó

d) Cấu trúc hình cây của website

Các trang web được tổ chức theo cấu trúc tương tự cây thư mục, gọi là cấu trúc hình cây:

TRANG CHỦ (Việt Nam - Vẻ đẹp tiềm ẩn)
│
├── Tây Bắc - Đông Bắc
│   ├── Mù Cang Chải
│   ├── Sa Pa
│   └── Hà Giang
│
├── Đồng bằng - Trung du Bắc bộ
│   ├── Thung Nham
│   ├── Tam Cốc - Bích Động
│   └── Tràng An
│
├── Miền Trung
│   └── ...
│
└── Tây Nguyên
    ├── Bản Đôn
    └── ...

Ưu điểm của cấu trúc hình cây:

• Tổ chức nội dung khoa học, dễ quản lý
• Người dùng dễ dàng tìm kiếm thông tin
• Trang chủ gọn gàng, không bị quá tải
• Mỗi trang con tập trung vào một chủ đề cụ thể

2. Tạo và truy cập các trang con

a) Tạo trang con

Để tạo trang con trong Google Sites, thực hiện theo các bước sau:

Bước 1: Mở bảng chọn Trang

• Trong cửa sổ thiết kế của Google Sites, nhìn sang khung bên phải
• Chọn bảng chọn Trang (nằm cạnh bảng chọn Chèn và Giao diện)

Bước 2: Thêm trang con

• Nhấp chuột vào dấu ⋮ (ba chấm dọc) bên cạnh Trang chủ
• Trong menu xuất hiện, chọn Thêm trang con
• Cửa sổ Trang con mới hiện ra

Bước 3: Đặt tên và hoàn tất

• Nhập tên cho trang con vào ô Tên (ví dụ: “Tây Bắc – Đông Bắc”)
• Nhấp nút Xong để hoàn tất

Tạo trang con nhiều cấp:

Tương tự như trên, có thể tạo trang con cho một trang con đã có. Ví dụ:

• Trang Mù Cang Chải là trang con của trang Tây Bắc – Đông Bắc
• Trang Tây Bắc – Đông Bắc là trang con của Trang chủ

Sau khi tạo xong, ở khung bên phải sẽ xuất hiện:

• Trang chủ
• Trang con Tây Bắc – Đông Bắc của trang chủ
• Trang con Mù Cang Chải của trang Tây Bắc – Đông Bắc

b) Truy cập các trang

Sau khi tạo các trang con, cần biết cách truy cập để chỉnh sửa nội dung:

Cách 1: Truy cập qua bảng chọn Trang

• Trong giao diện thiết kế, đưa con trỏ chuột đến Trang chủ trong bảng chọn Trang
• Bảng chọn sẽ mở ra hiển thị các trang con
• Nhấp vào biểu tượng ▶ bên trái tên trang để xem các trang con cấp thấp hơn
• Nhấp vào tên trang để mở và chỉnh sửa trang đó

Cách 2: Truy cập qua thanh điều hướng

• Trên thanh điều hướng của trang web (phía trên), nhấp vào tên trang muốn truy cập

3. Thiết lập thanh điều hướng

Thanh điều hướng (Navigation bar) là thành phần quan trọng giúp người dùng di chuyển giữa các trang trong website một cách dễ dàng.

a) Thanh điều hướng tự động

Google Sites có một tính năng rất tiện lợi: tự động tạo thanh điều hướng dựa trên cấu trúc các trang đã tạo.

Cách hoạt động:

• Khi tạo trang con, Google Sites tự động thêm trang đó vào thanh điều hướng
• Các trang con được hiển thị dưới dạng menu thả xuống
• Người dùng có thể nhấp vào menu để xem và chọn trang con

b) Tùy chỉnh hiển thị trên các thiết bị

Google Sites tự động điều chỉnh giao diện trang web khi người dùng truy cập bằng điện thoại hay máy tính bảng:

Mặc định trên điện thoại:

• Bảng chọn trên thanh điều hướng được chuyển sang phía phải
• Hiển thị dưới dạng biểu tượng ≡ (hamburger menu)
• Nằm ngay trước logo của trang

Tùy chỉnh hiển thị:

Nếu muốn bảng chọn hiển thị trên điện thoại giống như trên máy tính, thực hiện như sau:

Các tùy chọn hiển thị:

4. Thêm nội dung cho các trang con

Sau khi tạo các trang con, bước tiếp theo là thêm nội dung cho chúng.

a) Đặc điểm của trang con mới tạo

Khi vừa tạo xong, trang con có các đặc điểm sau:

• Phần đầu trang: Được tạo tự động với hình nền của trang chủ
• Tiêu đề: Tự động lấy tên trang con làm tiêu đề (ví dụ: “Tây Bắc – Đông Bắc” hoặc “Mù Cang Chải”)
• Phần thân trang: Chưa có nội dung, cần bổ sung

b) Chỉnh sửa phần đầu trang con

Vì đây là trang con (không phải trang chủ), nên cần điều chỉnh phần đầu trang cho phù hợp:

Các điều chỉnh cần thực hiện:

c) Thêm nội dung vào phần thân trang

Áp dụng các kỹ năng đã học ở Bài 25 để thêm nội dung:

Đối với trang giới thiệu vùng miền (ví dụ: Tây Bắc – Đông Bắc):

• Văn bản giới thiệu khái quát về vùng
• Hình ảnh đại diện cho vùng
• Danh sách các địa danh nổi bật trong vùng

Đối với trang chi tiết địa danh (ví dụ: Mù Cang Chải):

• Văn bản mô tả chi tiết về địa danh
• Nhiều hình ảnh minh họa
• Video giới thiệu (nếu có)
• Bản đồ vị trí
• Thông tin hữu ích cho du khách (thời điểm đẹp nhất, cách di chuyển…)

5. Tạo liên kết trong bài giới thiệu

Liên kết (link) là yếu tố quan trọng giúp kết nối các trang với nhau, tạo nên sự liền mạch cho website.

a) Mục đích của việc tạo liên kết

• Kết nối bài giới thiệu tóm tắt ở trang chủ với trang chi tiết tương ứng
• Giúp người dùng dễ dàng chuyển đến trang muốn xem
• Tạo trải nghiệm duyệt web mượt mà, chuyên nghiệp

b) Các bước tạo liên kết

Bước 1: Mở trang chứa văn bản cần gắn liên kết

• Thường là trang chủ, nơi có các đoạn giới thiệu tóm tắt

Bước 2: Chọn văn bản cần gắn liên kết

• Bôi đen cụm từ muốn biến thành liên kết
• Thông thường là cụm từ “Đọc tiếp” ở cuối mỗi đoạn giới thiệu
• Ví dụ: Ở cuối đoạn giới thiệu về Mù Cang Chải, chọn cụm từ “Đọc tiếp”

Bước 3: Chèn đường liên kết

• Nhấp vào biểu tượng 🔗 (chèn đường liên kết) trên thanh công cụ định dạng
• Cửa sổ Chèn đường liên kết xuất hiện

Bước 4: Chọn trang đích

• Trong cửa sổ liên kết, Google Sites sẽ hiển thị danh sách các trang trong website
• Chọn trang đích (ví dụ: trang Mù Cang Chải)
• Hoặc có thể nhập “Đọc tiếp” vào ô Văn bản nếu muốn thay đổi text hiển thị

Bước 5: Áp dụng

• Nhấp nút Áp dụng để hoàn tất

c) Kết quả sau khi tạo liên kết

Sau khi tạo liên kết thành công:

• Cụm từ “Đọc tiếp” sẽ thay đổi định dạng (thường có màu xanh và gạch chân)
• Khi di chuột qua, con trỏ chuyển thành hình bàn tay
• Khi nhấp vào, người dùng được chuyển đến trang Mù Cang Chải

d) Các loại liên kết có thể tạo

Google Sites cho phép tạo liên kết đến nhiều đích khác nhau:

6. Quy trình hoàn chỉnh xây dựng website nhiều trang

Tổng hợp lại, quy trình xây dựng website với cấu trúc nhiều trang như sau:

Bước 1: Lên kế hoạch cấu trúc website

• Xác định các chủ đề chính (sẽ thành trang con cấp 1)
• Xác định các chủ đề phụ (sẽ thành trang con cấp 2, 3…)
• Vẽ sơ đồ cấu trúc hình cây

Bước 2: Tạo trang chủ

• Thiết kế phần đầu trang (logo, tiêu đề, hình nền)
• Tạo các khối giới thiệu tóm tắt cho mỗi chủ đề
• Thêm cụm từ “Đọc tiếp” ở cuối mỗi khối

Bước 3: Tạo các trang con

• Sử dụng bảng chọn Trang → Thêm trang con
• Tạo theo đúng cấu trúc đã lên kế hoạch

Bước 4: Thêm nội dung cho trang con

• Chỉnh sửa phần đầu trang (giảm chiều cao, thay hình nền)
• Thêm nội dung chi tiết vào phần thân trang

Bước 5: Tạo liên kết

• Quay lại trang chủ
• Gắn liên kết cho các cụm từ “Đọc tiếp”
• Kiểm tra tất cả liên kết hoạt động đúng

Bước 6: Kiểm tra và hoàn thiện

• Xem trước website trên nhiều thiết bị
• Điều chỉnh thanh điều hướng nếu cần
• Công bố website

Thầy Phạm Thành Danh

(Người kiểm duyệt, ra đề)

Chức vụ: Trưởng ban biên soạn môn Tin Học THPT

Trình độ: Cử nhân Sư phạm Tin học, Chứng chỉ hạng II, Chứng chỉ Tin học, Ngoại ngữ B1

Kinh nghiệm: 8+ năm kinh nghiệm tại Trường THPT Thuận Hóa