CHỦ ĐỀ E. ỨNG DỤNG TIN HỌC

BÀI E1: TẠO TRANG WEB, 
THIẾT LẬP GIAO DIỆN VÀ XEM TRƯỚC TRANG WEB

I - MỤC TIÊU BÀI HỌC

• Làm quen được với một số thành phần chính trong màn hình làm việc của phần mềm Google Sites.

• Sử dụng được phần mềm Google Sites để tạo một trang web.

• Tạo được trang web mới và có thể xem trang web trước khi xuất bản.

• Sử dụng được công cụ Themes để tạo giao diện cho trang web.

• Thực hiện được một số thao tác cơ bản như tạo trang web mới và xem trước trang web.

II - KIẾN THỨC CẦN GHI NHỚ

1. PHẦN MỀM GOOGLE SITES

a) Trang web và phần mềm thiết kế web

- Khái niệm: Phần mềm thiết kế web là phần mềm cung cấp các công cụ giúp thiết kế các trang web như hồ sơ cá nhân, tổng hợp thông tin, giới thiệu hoạt động đội nhóm, bán hàng, du lịch hay tin tức,...

- Một số phần mềm thiết kế web từ đơn giản đến phức tạp:

• Google Sites

• Figma

• Wix

• WordPress

• Joomla

• Adobe Dreamweaver

b) Giới thiệu Google Sites

- Khái niệm: Google Sites là ứng dụng trực tuyến, miễn phí cho phép tạo trang web bằng cách kéo thả, dễ dàng hiệu chỉnh nội dung, thay đổi giao diện theo nhu cầu sử dụng. 

- Tính năng:

+ Nhúng trực tiếp các nội dung, video, hình ảnh,… từ các ứng dụng khác trong hệ sinh thái của Google như Google Drive, Google Docs, Google Calendar, YouTube,… và có thể xem trực tiếp các nội dung đó trên trang web.

+ Thiết lập và cho phép nhiều người làm việc cùng nhau bằng cách phân quyền: 

• Owners (sở hữu).

• Collaborators (cộng tác).

• Viewers (chỉ xem). 

+ Tạo tên miền phụ hoàn toàn miễn phí do tích hợp sẵn bộ máy tìm kiếm của Google.

c) Giao diện làm việc của phần mềm thiết kế web Google Sites

Giao diện làm việc của Google Sites gồm 3 phần: 

- Thanh công cụ.

- Vùng làm việc.

- Các thẻ chức năng:

+ Thẻ Insert (Chèn): Cho phép chèn nội dung và các đối tượng vào trang web như hình ảnh, video, biểu đồ, biểu mẫu, bản đồ,...

+ Thẻ Pages (Trang): Tạo và quản lí các trang web.

+ Thẻ Themes (Giao diện): Cho phép tuỳ chỉnh giao diện trang web theo các chủ đề

có sẵn, thêm giao diện mới và tự thiết kế giao diện theo tuỳ chọn cá nhân.

2. TẠO TRANG WEB MỚI

Để tạo trang web bằng Google Sites, em sử dụng tài khoản Google và thực hiện theo một trong hai cách sau để đăng nhập và sử dụng Google Sites:

- Cách 1: Khởi động trình duyệt web, nhập địa chỉ https://sites.google.com/, đăng nhập tài khoản Google. Sau khi đăng nhập thành công, xuất hiện giao diện của Google Sites (Hình 3).

- Cách 2: Đã đăng nhập vào tài khoản Google:

+ Nháy vào biểu tượng ở góc trên bên phải chọn Sites (Hình 4) để mở giao diện của Google Sites.

+ Để tạo mới một trang web:

• Nháy chọn biểu tượng Blank (Trống) ở Hình 3, giao diện một trang web trống sẽ xuất hiện như Hình 5.

Hình 5. Trang web trống được tạo

• Chọn Template gallery ở góc trên bên phải ở Hình 3 để mở thư viện mẫu trang web được thiết kế sẵn do Google Sites cung cấp (Hình 6).

Hình 6. Danh sách các mẫu trang web có sẵn

+ Sau khi chọn mẫu trong danh sách, vùng làm việc sẽ hiển thị trang web mẫu, tuỳ vào mục tiêu em thiết kế lại để tạo một trang web theo yêu cầu đặt ra.

3. THIẾT LẬP GIAO DIỆN CHO TRANG WEB

Các cách thiết lập giao diện cho trang web:

- Sử dụng các mẫu giao diện khác nhau trong thẻ Themes (Hình 7): 

+ Mỗi giao diện có một bố cục, màu sắc và phông chữ khác nhau.

+ Có thể thay đổi màu sắc và phông chữ cho các giao diện.

- Tạo riêng giao diện hoặc nhập thêm giao diện từ bên ngoài:

+ Create Theme: tạo một giao diện tuỳ chỉnh cho trang web (Hình 8).

+ Import Theme: nhập một giao diện được tạo trước. 

4. Xem trước trang web

- Ý nghĩa: Việc xem trước thiết kế trang web giúp người thiết kế xem lại các nội dung đã hiển thị đúng bố cục thiết kế chưa, để có thể hiệu chỉnh lại nội dung hiển thị không đúng thiết kế trước khi thực hiện công bố trang web.

- Cách xem trước trang web:

+ Nháy chọn biểu tượng Preview trên thanh công cụ. 

+ Có ba chế độ xem trước (Hình 9): 

• Chế độ Phone (xem trên thiết bị di động).

• Chế độ Tablet (xem trên máy tính bảng). 

• Chế độ Large screen (xem trên máy tính).

- Cách thoát chế độ xem trước trang web: Nháy chọn biểu tượng Exit preview.