Bài 25: Xây dựng phần thân và chân trang web bằng Google Sites

Trang web có cấu trúc nội dung hai cột (Ảnh Sách KNTT)

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

1. Tìm hiểu giao diện tạo phần thân trang web

Ở bài trước, các em đã xây dựng được phần đầu trang web “Việt Nam – Vẻ đẹp tiềm ẩn”. Bây giờ chúng ta sẽ tiếp tục hoàn thiện trang web bằng cách thiết kế phần nội dung chính (thân trang) và phần chân trang.

a) Vị trí các bảng chọn

Trong cửa sổ thiết kế của Google Sites, ở khung bên phải có ba bảng chọn quan trọng:

  • Chèn: Dùng để thêm các đối tượng vào trang web
  • Trang: Quản lý các trang trong website
  • Giao diện: Tùy chỉnh giao diện tổng thể

Trong bài học này, chúng ta tập trung làm việc với bảng chọn Chèn – đây là công cụ chính để đưa mọi nội dung vào trang web.

Bảng chọn Chèn trong giao diện tạo phần thân trang web (Ảnh Sách KNTT)
Bảng chọn Chèn trong giao diện tạo phần thân trang web (Ảnh Sách KNTT)

b) Các nhóm lệnh trong bảng chọn Chèn

Bảng chọn Chèn được tổ chức thành ba nhóm lệnh với các chức năng khác nhau:

Nhóm lệnh thứ nhất: Hộp văn bản, Hình ảnh, Nhúng, Drive

Thành phần Chức năng
Hộp văn bản Chèn khối văn bản vào trang web
Hình ảnh Chèn hình ảnh từ máy tính hoặc Internet
Nhúng Chèn nội dung từ các ứng dụng Internet khác (thời tiết, âm nhạc, mã nhúng từ website khác…)
Drive Chèn văn bản, hình ảnh, video và các tài liệu được tạo bằng ứng dụng Google

Nhóm lệnh thứ hai: Các thành phần nội dung

Google Sites cung cấp nhiều mẫu bố cục có sẵn giúp người dùng nhanh chóng tạo cấu trúc cho phần thân trang. Các mẫu này bao gồm bố cục 1 cột, 2 cột, 3 cột với nhiều kiểu sắp xếp hình ảnh và văn bản khác nhau.

Nhóm lệnh thứ ba: Các đối tượng khác

Đối tượng Mô tả
Nhóm có thể thu gọn Tạo khối văn bản có thể mở rộng/thu gọn
Mục lục Tạo mục lục tự động cho trang
Băng chuyền hình ảnh Trình chiếu nhiều hình ảnh dạng slideshow
Bản đồ Chèn Google Maps vào trang
YouTube Nhúng video từ YouTube
Lịch Chèn Google Calendar
Tài liệu Chèn Google Docs
Trang trình bày Chèn Google Slides
Trang tính Chèn Google Sheets
Biểu mẫu Chèn Google Forms

2. Tạo phần thân trang web

Phần thân trang (hay phần nội dung chính) là nơi chứa đựng thông tin quan trọng nhất của trang web. Đây là phần mà người dùng sẽ đọc và tương tác nhiều nhất.

a) Thiết lập cấu trúc nội dung

Bước 1: Chọn cấu trúc khối nội dung

Thay vì chèn từng hình ảnh và hộp văn bản riêng lẻ, cách làm khoa học và hiệu quả hơn là sử dụng các mẫu bố cục có sẵn trong nhóm Thành phần nội dung.

Cách thực hiện:

  • Trong bảng chọn Chèn, tìm đến nhóm Thành phần nội dung
  • Nhấp chuột chọn biểu tượng cấu trúc phù hợp với nhu cầu (ví dụ: cấu trúc 2 cột)
  • Phần thân trang sẽ tự động tạo ra các khối nội dung theo mẫu đã chọn

Bước 2: Thêm hình ảnh, tiêu đề và văn bản

Sau khi có cấu trúc khối, tiến hành điền nội dung vào từng khối:

  • Đối với mỗi khối, nhấp chuột vào biểu tượng + để thêm hình ảnh
  • Bên dưới hình ảnh, thêm tiêu đề cho nội dung
  • Viết nội dung bài viết mô tả chi tiết
Trang web có cấu trúc nội dung hai cột (Ảnh Sách KNTT)
Trang web có cấu trúc nội dung hai cột (Ảnh Sách KNTT)

b) Chỉnh sửa các khối nội dung

Khi thêm các khối nội dung vào trang, Google Sites sẽ hiển thị các công cụ cho phép chỉnh sửa. Dưới đây là các thao tác chỉnh sửa cơ bản:

Định dạng văn bản:

Khi nhấp vào khối văn bản, thanh công cụ định dạng sẽ xuất hiện với các tùy chọn:

  • Chọn kiểu chữ (phông chữ)
  • Thay đổi cỡ chữ
  • In đậm, in nghiêng, gạch chân
  • Đổi màu chữ
  • Căn lề văn bản (trái, giữa, phải)
  • Tạo danh sách đánh số hoặc dấu đầu dòng
  • Chèn liên kết

Thay đổi kích thước đối tượng:

  • Nhấp chuột để chọn đối tượng cần thay đổi (hình ảnh, khối văn bản, bản đồ…)
  • Các nút điều chỉnh sẽ xuất hiện xung quanh đối tượng
  • Kéo thả các nút này để thu nhỏ hoặc phóng to theo ý muốn

Di chuyển đối tượng:

  • Chọn đối tượng cần di chuyển
  • Kéo thả đối tượng đến vị trí mới trên trang

Sao chép và xóa đối tượng:

Khi chọn một đối tượng, bảng chọn tắt sẽ xuất hiện với các tùy chọn:

  • Bảng màu: Thay đổi màu nền của khối
  • Sao chép: Tạo bản sao của đối tượng
  • Xóa: Loại bỏ đối tượng khỏi trang
Bảng chọn tắt để sao chép, xóa đối tượng được chọn (Ảnh Sách KNTT)
Bảng chọn tắt để sao chép, xóa đối tượng được chọn (Ảnh Sách KNTT)

c) Những lưu ý quan trọng khi thiết kế thân trang

Để trang web có tính thẩm mỹ và chuyên nghiệp, cần chú ý các nguyên tắc sau:

Về bố cục:

  • Tạo bố cục cân đối, hợp lý
  • Sắp xếp nội dung theo thứ tự ưu tiên (quan trọng nhất đặt ở vị trí dễ nhìn nhất)
  • Điều chỉnh kích thước và vị trí các đối tượng một cách hài hòa

Về nội dung:

  • Chọn nội dung phù hợp với nhu cầu người dùng
  • Sử dụng ngôn ngữ ngắn gọn, súc tích, dễ hiểu
  • Tránh viết quá dài dòng gây mất tập trung

Về hình ảnh và video:

  • Chọn hình ảnh chất lượng cao, sắc nét
  • Không lạm dụng quá nhiều hình ảnh gây rối mắt
  • Đặt hình ảnh và video đúng vị trí, kích thước phù hợp với nội dung

Về phông chữ và màu sắc:

  • Chọn phông chữ dễ đọc, phù hợp với chủ đề trang web
  • Màu sắc hài hòa giữa các đối tượng
  • Đảm bảo sự thống nhất với màu logo và các thành phần ở phần đầu trang

3. Thêm bản đồ vào trang web

Đối với các trang web về du lịch, nhà hàng, khách sạn hoặc giới thiệu địa điểm, việc chèn bản đồ giúp người xem dễ dàng xác định vị trí và tìm đường đến địa điểm đó.

a) Chèn bản đồ

Bước 1: Mở lệnh chèn bản đồ

  • Vào bảng chọn Chèn
  • Tìm đến nhóm lệnh thứ ba (Các đối tượng khác)
  • Nhấp chọn Bản đồ
Lệnh thêm bản đồ vào trang web (Ảnh Sách KNTT)
Lệnh thêm bản đồ vào trang web (Ảnh Sách KNTT)

Bước 2: Chọn địa điểm trên bản đồ

Cửa sổ Chọn bản đồ sẽ xuất hiện với hai cách xác định vị trí:

Cách 1: Nhập tên địa điểm

  • Gõ tên địa điểm vào ô Nhập vị trí (ví dụ: “Thung Nham, Ninh Bình”)
  • Hệ thống sẽ tự động tìm kiếm và hiển thị địa điểm phù hợp
  • Chọn địa điểm chính xác từ danh sách gợi ý

Cách 2: Đặt dấu vị trí trực tiếp

  • Nhấp chọn Đặt dấu vị trí
  • Di chuyển bản đồ đến khu vực mong muốn
  • Nhấp chuột để đánh dấu vị trí chính xác

Sau khi xác định được địa điểm (có biểu tượng dấu đỏ trên bản đồ), nhấp nút Chọn để thêm bản đồ vào trang web.

Chọn địa điểm trên bản đồ (Ảnh Sách KNTT)
Chọn địa điểm trên bản đồ (Ảnh Sách KNTT)

b) Thay đổi kích thước bản đồ

Sau khi chèn bản đồ vào trang, có thể điều chỉnh kích thước cho phù hợp:

  • Nhấp chuột vào bản đồ để chọn
  • Các nút điều chỉnh xuất hiện ở các góc và cạnh của khung bản đồ
  • Kéo thả các nút này để thay đổi kích thước theo chiều ngang hoặc chiều dọc
Thay đổi kích thước của bản đồ (Ảnh Sách KNTT)
Thay đổi kích thước của bản đồ (Ảnh Sách KNTT)

c) Di chuyển bản đồ

Để đặt bản đồ vào vị trí mong muốn trong bài viết:

  • Nhấp giữ chuột vào bản đồ
  • Kéo thả bản đồ đến vị trí phù hợp (ví dụ: bên cạnh đoạn văn bản mô tả địa điểm)
Di chuyển bản đồ vào trong bài viết (Ảnh Sách KNTT)
Di chuyển bản đồ vào trong bài viết (Ảnh Sách KNTT)

4. Chỉnh sửa các đối tượng đã có

Trong quá trình thiết kế, việc chỉnh sửa các đối tượng đã chèn vào trang là điều thường xuyên cần thực hiện. Google Sites cung cấp các công cụ giúp thao tác này trở nên đơn giản.

a) Thay đổi kích thước và di chuyển đối tượng

Các thao tác thay đổi kích thước và di chuyển áp dụng tương tự cho mọi đối tượng trên trang (khối văn bản, hình ảnh, bản đồ, video…):

Thay đổi kích thước:

  • Chọn đối tượng cần thay đổi
  • Kéo thả các nút điều chỉnh ở góc hoặc cạnh của khung

Di chuyển:

  • Chọn đối tượng
  • Kéo thả đến vị trí mới

b) Sao chép và xóa đối tượng

Khi cần tạo bản sao hoặc loại bỏ một đối tượng:

  • Nhấp chuột để chọn đối tượng
  • Quan sát bảng chọn tắt xuất hiện bên cạnh
  • Nhấp vào biểu tượng Sao chép (hình hai ô vuông chồng lên nhau) để tạo bản sao
  • Nhấp vào biểu tượng Xóa (hình thùng rác) để loại bỏ đối tượng

c) Hoàn tác và làm lại thao tác

Nếu thực hiện nhầm một thao tác nào đó, Google Sites cho phép hoàn tác hoặc làm lại:

Chức năng Biểu tượng Phím tắt Mô tả
Undo (Hoàn tác) Mũi tên cong sang trái Ctrl + Z Hủy bỏ lệnh vừa thực hiện
Redo (Làm lại) Mũi tên cong sang phải Ctrl + Y Thực hiện lại lệnh đã hoàn tác

Các biểu tượng Undo và Redo nằm ở góc trên bên phải của cửa sổ thiết kế.

Các biểu tượng undo, redo (Ảnh Sách KNTT)
Các biểu tượng undo, redo (Ảnh Sách KNTT)

5. Thiết lập chân trang

Chân trang (Footer) là phần nằm ở cuối cùng của trang web, thường chứa các thông tin liên hệ và bản quyền. Đây là thành phần quan trọng giúp người dùng biết cách liên lạc với chủ sở hữu trang web.

a) Tạo không gian chân trang

Bước 1: Di chuyển xuống cuối trang web

Cuộn trang xuống phía dưới cùng, nơi kết thúc phần thân trang.

Bước 2: Thêm chân trang

  • Tìm nút Thêm chân trang ở cuối trang
  • Nhấp chuột vào nút này
  • Không gian cho phần chân trang sẽ được tạo ra
Thiết lập không gian cho chân trang và chèn khối văn bản vào phần chân trang (Ảnh Sách KNTT)
Thiết lập không gian cho chân trang và chèn khối văn bản vào phần chân trang (Ảnh Sách KNTT)

b) Thêm nội dung vào chân trang

Tương tự như phần thân trang, có thể chèn các khối văn bản vào chân trang và sắp xếp theo ý muốn.

Các nội dung phổ biến trong chân trang:

Nội dung Ví dụ
Tuyên bố bản quyền “Bản quyền của website này thuộc về nhóm thực hiện dự án Việt Nam – Vẻ đẹp tiềm ẩn”
Địa chỉ email tieman_vietnam@gmail.com
Số điện thoại 0123 456 789
Địa chỉ 123 Đường ABC, Quận XYZ, TP. Hồ Chí Minh

c) Chèn liên kết đến mạng xã hội

Ngày nay, việc kết nối trang web với các trang mạng xã hội là rất quan trọng để tăng tương tác với người dùng.

Cách thực hiện:

  • Trong phần chân trang, tìm tùy chọn Đường liên kết đến mạng xã hội
  • Nhấp chuột vào tùy chọn này
  • Nhập địa chỉ URL của các trang mạng xã hội:
    • Facebook
    • Twitter (X)
    • YouTube
    • Instagram
    • Các mạng xã hội khác

Sau khi thêm, các biểu tượng mạng xã hội sẽ hiển thị trong chân trang. Người xem có thể nhấp vào để truy cập trực tiếp đến các trang này.

Chèn các liên kết đến trang mạng xã hội của chủ thể trang web (Ảnh Sách KNTT)
Chèn các liên kết đến trang mạng xã hội của chủ thể trang web (Ảnh Sách KNTT)

6. Chèn các đối tượng khác

Ngoài văn bản, hình ảnh và bản đồ, Google Sites còn hỗ trợ chèn nhiều loại đối tượng khác giúp trang web thêm phong phú và hấp dẫn.

a) Chèn video YouTube

Video là cách hiệu quả để truyền tải thông tin sinh động đến người xem.

Cách thực hiện:

  • Vào bảng chọn Chèn → Chọn YouTube
  • Tìm kiếm video bằng từ khóa hoặc dán đường link video
  • Chọn video phù hợp và nhấp Chèn

b) Chèn băng chuyền hình ảnh

Băng chuyền hình ảnh (Image Carousel) cho phép hiển thị nhiều hình ảnh trong một khung, tự động chuyển đổi như slideshow.

Cách thực hiện:

  • Vào bảng chọn Chèn → Chọn Băng chuyền hình ảnh
  • Tải lên các hình ảnh muốn hiển thị
  • Điều chỉnh thứ tự và thời gian chuyển đổi

c) Chèn lịch Google Calendar

Phù hợp với các trang web sự kiện, lịch học, lịch làm việc.

Cách thực hiện:

  • Vào bảng chọn Chèn → Chọn Lịch
  • Chọn lịch từ tài khoản Google của bạn
  • Điều chỉnh kích thước và chế độ hiển thị

d) Chèn trang tính Google Sheets

Hữu ích khi cần hiển thị bảng dữ liệu, thống kê trên trang web.

Cách thực hiện:

  • Vào bảng chọn Chèn → Chọn Trang tính
  • Chọn file Google Sheets từ Drive
  • Bảng tính sẽ được nhúng vào trang và tự động cập nhật khi có thay đổi

e) Nhúng nội dung từ website khác

Tính năng Nhúng cho phép chèn nội dung từ các trang web khác thông qua mã nhúng (embed code).

Cách thực hiện:

  • Vào bảng chọn Chèn → Chọn Nhúng
  • Dán mã nhúng hoặc đường link của nội dung cần chèn
  • Nhấp Chèn để hoàn tất

Ví dụ nội dung có thể nhúng:

  • Widget thời tiết
  • Bản đồ tương tác
  • Trình phát nhạc
  • Bài đăng mạng xã hội
  • Các ứng dụng web khác
Thầy Phạm Thành Danh

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