Thầy Cải - Quốc Thái

BÀI 27 - BIỂU MẪU TRÊN TRANG WEB (KNTT - ICT)

Bài 27 - Biểu mẫu trên trang web (kntt)

Đây là bài soạn lý thuyết tin học 12 - sách Kết nối tri thức. Bài học này thuộc định hướng Tin học ứng dụng (ICT). Quý Thầy Cô và các em học sinh truy cập để làm tài liệu tham khảo nhé. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

TÓM TẮT NỘI DUNG:
Nhiệm vụ 1: Tạo biểu mẫu
Nhiệm vụ 2: Nhúng biểu mẫu vào trang web
Nhiệm vụ 3: Xem dữ liệu thống kê phản hồi

Nhiệm vụ 1: Tạo biểu mẫu

Việc tạo biểu mẫu (form) trên trang web để lấy ý kiến phản hồi của người dùng về bản chất là tạo biểu mẫu bằng ứng dụng Forms của Google rồi nhúng vào trang web được thiết kế bằng Google Sites.
Yêu cầu: Xây dựng được biểu mẫu với ứng dụng Forms (biểu mẫu) trong Google.
Hướng dẫn:
Bước 1. Chuẩn bị biểu mẫu.
Trước hết phải chuẩn bị biểu mẫu là một bộ câu hỏi có thể là các câu hỏi trắc nghiệm hoặc là câu hỏi trả lời ngắn. Ví dụ về một câu hỏi như sau:

Những thông tin chúng tôi cung cấp trên trang web này có hữu ích đối với bạn không?
A. Rất hữu ích với tôi và có thể với nhiều người khác.
B. Có nhiều thông tin hữu ích.
C. Có một số thông tin hữu ích.
D. Rất ít thông tin có ý nghĩa đối với tôi.

Bước 2. Tìm hiểu giao diện ứng dụng form.
Vào kho ứng dụng của Google, chọn ứng dụng Forms (Hình 27.1). Giao diện của Forms tương tự Google Sites. Có thể chọn một trong số kiểu biểu mẫu được tạo sẵn như: Yêu cầu đặt hàng, Thông tin liên hệ,… (Hình 27.2).

Bước 3. Tạo biểu mẫu.

- Để tạo một biểu mẫu mới, nháy chuột vào biểu tượng

.
- Biểu mẫu mới không có tiêu đề được khởi tạo. Nháy chuột vào Mẫu không có tiêu đề để nhập tiêu đề của biểu mẫu (chẳng hạn, Ý kiến phản hồi của bạn). Sau đó nhập mô tả ngắn gọn về biểu mẫu.
- Tạo câu hỏi: Chọn câu hỏi Trắc nghiệm, bật kiểu câu hỏi là Bắt buộc. Sau đó nhập câu hỏi. Nháy chuột vào Tùy chọn 1 và nhập nội dung cho tùy chọn 1. Nháy chuột vào Thêm tùy chọn hoặc thêm “Câu trả lời khác” để thêm tùy chọn khác (Hình 27.3).

- Nháy chuột chọn nút

trong bảng chọn bên phải để tiếp tục nhập câu hỏi khác tương tự (Hình 27.4).

Nhiệm vụ 2: Nhúng biểu mẫu vào trang web

Yêu cầu: Nhúng được Forms trong Google vào trang web.
Hướng dẫn:

Để nhúng biểu mẫu đã tạo vào cuối trang chủ, ta thực hiện như sau:
- Mở trang chủ. Nháy chuột vào nút lệnh Biểu mẫu trong bảng chọn Chèn (Hình 27.5).

- Chọn biểu mẫu Ý kiến phản hồi của bạn, nháy chuột vào nút Chèn ở góc dưới bên phải (Hình 27.6).

- Biểu mẫu sẽ được thêm vào cuối trang chủ (Hình 27.7).

- Xuất bản trang web.
- Mở trang web bằng địa chỉ URL, trả lời các câu hỏi trong biểu mẫu Ý kiến phản hồi của bạn.

Nhiệm vụ 3: Xem dữ liệu thống kê phản hồi

Yêu cầu: Biết cách xem dữ liệu thống kê phản hồi.
Hướng dẫn:
Để xem và thống kê ý kiến phản hồi của người dùng sau khi trang web được xuất bản, cần thực hiện các bước sau:

- Mở ứng dụng Forms và mở lại biểu mẫu Ý kiến phản hồi của bạn.
- Dòng đầu tiên có thông tin về số câu trả lời cho biểu mẫu này.

Nháy chuột vào Câu trả lời để xem chi tiết: bản tóm tắt thống kê câu Trả lời dạng biểu đồ, Câu hỏi cho biết thông tin chi tiết cho từng câu hỏi, Cá nhân cho biết thông tin chi tiết về câu trả lời của từng người (Hình 27.9) hay chọn Xem trong trang tính để thấy được toàn bộ (Hình 27.10).

CÙNG CHUYÊN MỤC:

PHẦN I. KIẾN THỨC CỐT LÕI CHUNG CHO CẢ HAI ĐỊNH HƯỚNG (CS) VÀ (ICT) - 21 bài.

CHỦ ĐỀ 1. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài 1. Làm quen với Trí tuệ nhân tạo
Bài 2. Trí tuệ nhân tạo trong khoa học và đời sống

CHỦ ĐỀ 2. MẠNG MÁY TÍNH VÀ INTERNET

Bài 3. Một số thiết bị mạng thông dụng
Bài 4. Giao thức mạng
Bài 5. Thực hành chia sẻ tài nguyên trên mạng

CHỦ ĐỀ 3. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài 6. Giao tiếp và ứng xử trong không gian mạng

CHỦ ĐỀ 4. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

Bài 7. HTML và cấu trúc trang web
Bài 8. Định dạng văn bản
Bài 9. Tạo danh sách, bảng
Bài 10. Tạo liên kết
Bài 11. Chèn tệp tin đa phương tiện và khung nội tuyến vào trang web
Bài 12. Tạo biểu mẫu
Bài 13. Khái niệm, vai trò của CSS
Bài 14. Định dạng văn bản bằng CSS
Bài 15. Tạo màu cho chữ và nền
Bài 16. Định dạng khung
Bài 17. Các mức ưu tiên của bộ chọn
Bài 18. Thực hành tổng hợp thiết kế trang web

CHỦ ĐỀ 5. HƯỚNG NGHIỆP VỚI TIN HỌC

Bài 19. Dịch vụ sửa chữa và bảo trì máy tính
Bài 20. Nhóm nghề quản trị thuộc ngành Công nghệ thông tin
Bài 21. Hội thảo hướng nghiệp

PHẦN II. ĐỊNH HƯỚNG KHOA HỌC MÁY TÍNH (CS) - 9 bài.

CHỦ ĐỀ 6. MẠNG MÁY TÍNH VÀ INTERNET

Bài 22. Tìm hiểu thiết bị mạng
Bài 23. Đường truyền mạng và ứng dụng
Bài 24. Sơ bộ về thiết kế mạng

CHỦ ĐỀ 7. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

Bài 25. Làm quen với Học máy
Bài 26. Làm quen với Khoa học dữ liệu
Bài 27. Máy tính và Khoa học dữ liệu
Bài 28. Thực hành trải nghiệm trích rút thông tin và tri thức
Bài 29. Mô phỏng trong giải quyết vấn đề
Bài 30. Ứng dụng mô phỏng trong giáo dục

PHẦN III. ĐỊNH HƯỚNG TIN HỌC ỨNG DỤNG (ICT) - 7 bài.

CHỦ ĐỀ 6. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài 22. Thực hành kết nối các thiết bị số

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

Bài 23. Chuẩn bị xây dựng trang web
Bài 24. Xây dựng phần đầu trang web
Bài 25. Xây dựng phần thân và chân trang web
Bài 26. Liên kết và thanh điều hướng
Bài 27. Biểu mẫu trên trang web
Bài 28. Thực hành tổng hợp

CÁC CHUYÊN MỤC LIÊN QUAN:

☞ Kiểm tra tin học 12 - Kết nối tri thức
☞ Lý thuyết tin học 12 - Kết nối tri thức
☞ Thực hành tin học 12 - Kết nối tri thức
☞ Gợi ý trả lời tin học 12 - Kết nối tri thức
☞ Trắc nghiệm tin học 12 - Kết nối tri thức
☞ Bài giảng điện tử tin học 12 - Kết nối tri thức

BÀI 26 - LIÊN KẾT VÀ THANH ĐIỀU HƯỚNG (KNTT - ICT)

Bài 26 - Liên kết và thanh điều hướng (kntt)

TÓM TẮT NỘI DUNG:
Nhiệm vụ 1: Tìm hiểu mô hình các trang web liên kết với nhau theo cấu trúc hình cây
Nhiệm vụ 2: Tạo và truy cập các trang con

Nhiệm vụ 1: Tìm hiểu mô hình các trang web liên kết với nhau theo cấu trúc hình cây

Yêu cầu: Hiểu được mô hình tổ chức các trang web theo cấu trúc hình cây.
Hướng dẫn: Giải pháp hữu hiệu để có thể trình bày đầy đủ văn bản mà không làm hỏng sự cân đối trong trình bày của trang web là tạo ra các trang độc lập và sử dụng các liên kết đến chúng từ phần giới thiệu ở trang chủ. Chẳng hạn, ở trang chủ mỗi địa danh có hình ảnh, tiêu đề cùng ba dòng giới thiệu tóm tắt và kết thúc với Đọc tiếp. Cụm từ này được gắn liên kết (link) đến trang web với đầy đủ thông tin về địa danh đó. Khi duyệt web, người dùng nháy chuột vào Đọc tiếp để mở trang web có đầy đủ thông tin về địa danh tương ứng.

Tương tự, trên thanh điều hướng, cũng có thể đưa vào các cụm từ mang liên kết đến các trang khác, làm thành một bản chọn trên thanh điều hướng. Từ đó, xuất hiện khái niệm trang con. Các trang web được mở từ bảng chọn của trang chủ được gọi là trang con của trang chủ. Các trang con của trang chủ cũng có thể có các trang con của mình,… (Hình 26.2). Như vậy, các trang web có thể được tổ chức, sắp xếp theo cấu trúc tương tự cây thư mục.

Nhiệm vụ 2: Tạo và truy cập các trang con

Yêu cầu: Xây dựng được các trang con của trang chủ.
Hướng dẫn:
Bước 1. Tạo trang con.

- Chọn bảng chọn Trang trong khung bên phải trong cửa sổ thiết kế của Google Sites. Nháy chuột vào dấu

cạnh Trang chủ và chọn Thêm trang con. Nhập tên trang con Tây Bắc - Đông Bắc và chọn Xong (Hình 26.3).

- Tương tự, em có thể tạo trang con của trang Tây Bắc - Đông Bắc, chẳng hạn là trang Mù Cang Chải. Ở khung bên phải sẽ xuất hiện trang chủ và trang con Tây Bắc - Đông Bắc của trang chủ và trang con Mù Cang Chải của trang Tây Bắc - Đông Bắc (Hình 26.4).

Bước 2. Truy cập các trang.

- Trong giao diện thiết kế trang web, đưa con trỏ chuột đến Trang chủ, sẽ có bảng chọn mở ra với lựa chọn Tây Bắc - Đông Bắc. Nháy chuột vào biểu tượng

bên trái Tây Bắc - Đông Bắc, sẽ thấy lựa chọn Mù Cang Chải (Hình 26.4). - Muốn truy cập một trang con thì nháy chuột vào tên trang đó ở bảng chọn được mở ra từ Trang chủ. - 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. Theo đó, bảng chọn trên thanh điều hướng được tự động chuyển sang phía phải, ngay trước logo của trang và có dạng

. Nếu muốn bảng chọn này hiển thị trên máy tính giống như trên điện thoại thì chọn Cài đặt → Điều hướng → Phần tử xuất hiện nhiều nhất → Bên (Hình 26.5).

Bước 3. Thêm nội dung cho các trang con.

- Các trang Tây Bắc - Đông Bắc, Mù Cang Chải đã được khởi tạo nhưng chưa có nội dung. Phần đầu của các trang này được tạo tự động với hình nền của trang chủ và tiêu đề tương ứng là Tây Bắc - Đông Bắc hay Mù Cang Chải. - Công việc tiếp theo phải làm là chỉnh sửa phần đầu các trang này và thêm vào nội dung. Chẳng hạn, vì là các trang con nên giảm chiều cao của phần đầu trang, thay hình nền để phân biệt. Trang Mù Cang Chải chứa thông tin đầy đủ chi tiết về Mù Cang Chải bao gồm văn bản, hình ảnh, âm thanh, video,… Trang Tây Bắc - Đông Bắc sẽ chứa thông tin giới thiệu khái quát về vùng Tây Bắc - Đông Bắc.

Bước 4. Tạo liên kết trong bài giới thiệu.

- Mở trang chủ, nháy chuột ở cuối đoạn giới thiệu về Mù Cang Chải, nháy chuột vào biểu tượng

(chèn đường liên kết). Chọn đường liên kết là trang Mù Cang Chải, nhập Đọc tiếp vào ô Văn bản, nháy chuột chọn Áp dụng (Hình 26.6).

- Hãy lập trang con Đồng bằng - Trung du Bắc bộ và lập trang con Thung Nham của trang này.
- Tạo liên kết trong bài Thung Nham ở trang chủ đến trang Thung Nham.

CÙNG CHUYÊN MỤC:

PHẦN I. KIẾN THỨC CỐT LÕI CHUNG CHO CẢ HAI ĐỊNH HƯỚNG (CS) VÀ (ICT) - 21 bài.

CHỦ ĐỀ 1. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài 1. Làm quen với Trí tuệ nhân tạo
Bài 2. Trí tuệ nhân tạo trong khoa học và đời sống

CHỦ ĐỀ 2. MẠNG MÁY TÍNH VÀ INTERNET

Bài 3. Một số thiết bị mạng thông dụng
Bài 4. Giao thức mạng
Bài 5. Thực hành chia sẻ tài nguyên trên mạng

CHỦ ĐỀ 3. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài 6. Giao tiếp và ứng xử trong không gian mạng

CHỦ ĐỀ 4. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

CHỦ ĐỀ 5. HƯỚNG NGHIỆP VỚI TIN HỌC

Bài 19. Dịch vụ sửa chữa và bảo trì máy tính
Bài 20. Nhóm nghề quản trị thuộc ngành Công nghệ thông tin
Bài 21. Hội thảo hướng nghiệp

PHẦN II. ĐỊNH HƯỚNG KHOA HỌC MÁY TÍNH (CS) - 9 bài.

CHỦ ĐỀ 6. MẠNG MÁY TÍNH VÀ INTERNET

Bài 22. Tìm hiểu thiết bị mạng
Bài 23. Đường truyền mạng và ứng dụng
Bài 24. Sơ bộ về thiết kế mạng

CHỦ ĐỀ 7. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

PHẦN III. ĐỊNH HƯỚNG TIN HỌC ỨNG DỤNG (ICT) - 7 bài.

CHỦ ĐỀ 6. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài 22. Thực hành kết nối các thiết bị số

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

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI 25 - XÂY DỰNG PHẦN THÂN VÀ CHÂN TRANG WEB (KNTT - ICT)

Bài 25 - Xây dựng phần thân và chân trang web (kntt)

TÓM TẮT NỘI DUNG:
Nhiệm vụ 1: Tìm hiểu giao diện tạo phần thân trang web
Nhiệm vụ 2: Tạo phần thân trang web
Nhiệm vụ 3: Thêm bản đồ vào trang web
Nhiệm vụ 4: Chỉnh sửa các đối tượng đã có
Nhiệm vụ 5: Thiết lập chân trang

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

Yêu cầu: Nhận biết các chức năng trong giao diện tạo hpần thân trang web.
Hướng dẫn:
Bước 1. Xác định vị trí ba bảng chọn các lệnh tạo Phần thân trang web.
Có ba bảng chọn Chèn, Trang và Giao diện ở khung bên phải cửa sổ thiết kế trang web (Hình 25.1). Trong bài này chúng ta chỉ làm việc với bảng chọn Chèn.

Bước 2. Tìm hiểu các nhóm lệnh của bảng chọn Chèn.
Bảng chọn Chèn có ba nhóm lệnh sau:

- Nhóm lệnh đầu tiên: Hộp văn bản, Hình ảnh, Nhúng, Drive.
Nếu muốn chèn văn bản hay hình ảnh vào trang web thì nháy chuột vào biểu tượng Hộp văn bản hay Hình ảnh tương ứng. Nếu muốn chèn thông tin từ Google Drive (văn bản, hình ảnh, video, các tư liệu khác được tạo bằng các ứng dụng của Google) thì nháy chuột vào Drive. Nếu muốn chèn các dữ liệu nhúng từ các ứng dụng Internet khác như thời tiết, âm nhạc,… thì nháy chuột vào Nhúng.
- Nhóm lệnh thứ hai: Các thành phần nội dung.
Google Sites cho phép thực hiện tạo phần thân trang theo kiến trúc khối với các mẫu được hỗ trợ sẵn (Hình 25.1).
- Nhóm lệnh thứ ba: Các đối tượng khác.
Cho phép chèn các đối tượng khác như khối văn bản có thể thu gọn, mục lục, băng chuyền hình ảnh, bản đồ, đoạn video từ YouTube, liên kết,...

Nhiệm vụ 2: Tạo phần thân trang web

Yêu cầu: Thiết lập được các khối nội dung trong phần thân trang web như Hình 25.2.
Hướng dẫn:
Bước 1. Thiết lập cấu trúc nội dung có hai khối.
Ở nhóm Thành phần nội dung của bảng chọn Chèn, nháy chuột chọn biểu tượng

, phần thân trang sẽ có cấu trúc hai khối nội dung.
Bước 2. Thêm ảnh, tiêu đề và văn bản.
Đối với mỗi khối, nháy chuột vào biểu tượng

để thêm ảnh vào trang web. Bên dưới ảnh thêm tiêu đề và nội dung bài viết (Hình 25.2).

Nhiệm vụ 3: Thêm bản đồ vào trang web

Yêu cầu: Nắm vững được các thao tác bổ sung đối tượng (ví dụ bản đồ) và chỉnh sửa.
Hướng dẫn:
Bước 1. Chèn bản đồ.

- Việc thêm bản đồ vào trang web thực chất là những ứng dụng bản đồ vào trang web. Có thể sử dụng lệnh Nhúng trong bảng chọn Chèn để chèn bản đồ. Tuy nhiên, nếu muốn nhúng Google Maps vào trang web thì chỉ cần chọn Bản đồ (Hình 25.3) ở nhóm thứ ba của bảng chọn Chèn.

- Trong cửa sổ Chọn bản đồ, nhập tên (chẳng hạn Thung Nham) vào ô Nhập vị trí rồi xác định một địa điểm hoặc chọn Đặt dấu vị trí để xác định địa điểm trên bản đồ bằng cách nháy chuột. Sau khi có địa điểm trên bản đồ (có dấu

thì nháy chuột vào nút Chọn để thêm bản đồ vào trang web (Hình 25.4).

Bước 2. Thay đổi kích thước và di chuyển bản đồ.

- Có thể thay đổi kích thước của bản đồ bằng cách chọn bản đồ rồi kéo thả chuột tại các nút trên khung để được kích thước mong muốn (Hình 25.5).

- Kéo thả chuột để di chuyển bản đồ vào vị trí mong muốn (Hình 25.6).

Nhiệm vụ 4: Chỉnh sửa các đối tượng đã có

Yêu cầu: Nắm vững được các thao tác chỉnh sửa trang web.
Hướng dẫn:

- Các thao tác thay đổi kích thước, di chuyển các đối tượng đã có (khối văn bản, hình ảnh, bản đồ,…) tương tự đối với bản đồ: chọn khối và kéo thả chuột. - Nếu muốn sao chép hay xóa một đối tượng: chọn đối tượng đó và quan sát bảng chọn tắt tương ứng, trong đó các nút lệnh

(sao chép) và

(xóa). Nháy chuột vào nút lệnh tương ứng nếu muốn sao chép hoặc xóa đối tượng đã chọn (Hình 25.7).

Lưu ý: Có thể hủy bỏ một lệnh vừa thực hiện

(undo) hay thực hiện lại một lệnh trước đó

(redo) (Hình 25.8).

Nhiệm vụ 5: Thiết lập chân trang

Yêu cầu: Nắm vững được các thao tác thiết lập phần chân trang.
Hướng dẫn: Di chuyển xuống cuối trang, sẽ thấy xuất hiện nút Thêm chân trang. Nháy chuột vào lúc này, không gian cho phần chân trang sẽ xuất hiện. Tương tự như với phần thân trang, có thể chèn vào phần này các khối văn bản và sắp xếp chúng theo ý muốn của người dùng. Chẳng hạn, nội dung phổ biến nhất là tuyên bố về bản quyền, thông tin liên lạc như địa chỉ email, số điện thoại,… (Hình 25.9, Hình 25.10). Cũng có thể chèn vào các liên kết đến mạng xã hội của chủ thể trang web bằng cách nháy chuột vào Đường liên kết đến mạng xã hội, sau đó nhập vào các địa chỉ liên kết (Hình 25.10).

CÙNG CHUYÊN MỤC:

PHẦN I. KIẾN THỨC CỐT LÕI CHUNG CHO CẢ HAI ĐỊNH HƯỚNG (CS) VÀ (ICT) - 21 bài.

CHỦ ĐỀ 1. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài 1. Làm quen với Trí tuệ nhân tạo
Bài 2. Trí tuệ nhân tạo trong khoa học và đời sống

CHỦ ĐỀ 2. MẠNG MÁY TÍNH VÀ INTERNET

Bài 3. Một số thiết bị mạng thông dụng
Bài 4. Giao thức mạng
Bài 5. Thực hành chia sẻ tài nguyên trên mạng

CHỦ ĐỀ 3. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài 6. Giao tiếp và ứng xử trong không gian mạng

CHỦ ĐỀ 4. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

CHỦ ĐỀ 5. HƯỚNG NGHIỆP VỚI TIN HỌC

Bài 19. Dịch vụ sửa chữa và bảo trì máy tính
Bài 20. Nhóm nghề quản trị thuộc ngành Công nghệ thông tin
Bài 21. Hội thảo hướng nghiệp

PHẦN II. ĐỊNH HƯỚNG KHOA HỌC MÁY TÍNH (CS) - 9 bài.

CHỦ ĐỀ 6. MẠNG MÁY TÍNH VÀ INTERNET

Bài 22. Tìm hiểu thiết bị mạng
Bài 23. Đường truyền mạng và ứng dụng
Bài 24. Sơ bộ về thiết kế mạng

CHỦ ĐỀ 7. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

PHẦN III. ĐỊNH HƯỚNG TIN HỌC ỨNG DỤNG (ICT) - 7 bài.

CHỦ ĐỀ 6. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài 22. Thực hành kết nối các thiết bị số

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

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI 24 - XÂY DỰNG PHẦN ĐẦU TRANG WEB (KNTT - ICT)

Bài 24 - Xây dựng phần đầu trang web (kntt)

TÓM TẮT NỘI DUNG:
Nhiệm vụ 1: Làm quen với giao diện đầu tiên của Google Sites
Nhiệm vụ 2: Tìm hiểu giao diện tạo phần đầu trang
Nhiệm vụ 3: Tạo phần đầu trang

Nhiệm vụ 1: Làm quen với giao diện đầu tiên của Google Sites

Yêu cầu: Nhận diện được ba phần trong giao diện đầu tiên của Google Sites.
Hướng dẫn:
Bước 1. Đăng nhập vào tài khoản Google.
Tại thanh địa chỉ của trình duyệt nhập site.google.com để vào giao diện tạo trang web mới của Google: site.google.com/new.
Bước 2. Nhận biết ba phần của giao diện.

❶ Phần trên cùng có ô tìm kiếm và biểu tượng để truy cập vào danh sách các ứng dụng khác của Google.
❷ Phần thứ hai có các lựa chọn để tạo một trang web mới là một trang web trắng hoặc một trang web theo mẫu có sẵn (Hình 24.1).
❸ Phần thứ ba là danh sách các trang mà người dùng mới mở trước đó.

Nhiệm vụ 2: Tìm hiểu giao diện tạo phần đầu trang

Yêu cầu: Nhận diện được các chức năng của giao diện tạo phần đầu trang.
Hướng dẫn:
Bước 1. Tạo trang web mới. Chọn biểu tượng

(Hình 24.1) để tạo một trang web mới. Giao diện tạo trang web mới sẽ xuất hiện như Hình 24.2.

Bước 2. Làm quen với giao diện và các chức năng tạo phần đầu trang.

- Phần đầu trang (Hình 24.3) có thể có logo, tên trang, hình nền của phần đầu trang, tiêu đề trang, bảng chọn trên thanh điều hướng.
- Dòng Trang web không có tiêu đề là nơi thao tác nhập/hiển thị tên tệp lưu trữ trang web. Các tệp này sẽ được lưu trữ ở Google Drive của người dùng.
- Dòng Nhập tên trang web là nơi nhập/hiển thị logo, favicon và tên trang web.
- Dòng Thay đổi hình ảnh, Loại tiêu đề là các bảng chọn kích thước phần đầu trang và hình ảnh nền. Phần đầu trang có các kích thước tùy chọn: Bìa, Biểu ngữ lớn, Biểu ngữ hay Chỉ có tiêu đề (không có ảnh nền). Các kích thước này chỉ khác nhau về chiều cao. Tùy chọn Bìa có dạng tương tự bìa sách, có chiều cao lớn nhất, chiếm toàn bộ màn hình (Hình 24.4).

- Dòng Tiêu đề trang là nơi nhập/hiển thị tiêu đề trang và nội dung tóm tắt trang.
Lưu ý: Nội dung liên quan đến Thanh điều hướng sẽ được xem xét ở những bài sau.

Nhiệm vụ 3: Tạo phần đầu trang

Yêu cầu: Thiết lập được phần đầu trang web và xuất bản trang. Ví dụ như phần đầu trang web “Việt Nam - Vẻ đẹp tiềm ẩn” sau đây:

Hướng dẫn:
Bước 1. Nhập tên tệp lưu trữ trang web.
Nháy chuột vào dòng Trang web không có tiêu đề, nhập tên tệp gợi nhớ, ví dụ VN – Ver1. Sau đó nếu mở Google Drive sẽ thấy có tệp mới VN – Ver1.
Bước 2. Thiết lập logo, favicon, nhập tên trang và thông báo đầu trang.

- Định dạng các tệp ảnh logo và favicon có thể là png hay gif. Logo có thể có dạng hình chữ nhật, favicon dạng hình vuông với kích thước 16 x 16, 32 x 32 hay 48 x 48 pixel.
- Nháy chuột vào ô Nhập tên trang web rồi nháy chuột vào Thêm biểu tượng (Hình 24.6). Phần mềm sẽ hiển thị cửa sổ Cài đặt như Hình 24.7. Chọn Hình ảnh thương hiệu ở khung bên trái, khung bên phải xuất hiện các tùy chọn để thiết lập logo và favicon. Nháy chuột vào nút Chọn để chọn ảnh từ Google Drive (trong các thư mục như thư một ảnh Được chia sẻ với tôi, Bộ nhớ dùng chung (thư mục dùng chung của nhóm làm việc) hay thư mục Ảnh gần đây) hoặc nháy chuột vào nút Tải lên để tải lên ảnh từ thiết bị của người dùng (Hình 24.7).

- Nếu muốn đưa thông báo vào đầu trang, ví dụ “Trang web đang được xây dựng” thì nháy chuột vào Phần thông báo ở Hình 24.8. Nhập nội dung thông báo vào ô Lời nhắn, chọn màu chữ thông báo và bật Hiển thị phần thông báo. Khi cần thay đổi hoặc tắt thông báo, người dùng chỉnh sửa ở bảng chọn này (Hình 24.8).

- Sau khi thiết lập logo và favicon, nhập tên trang là Tiềm ẩn - Việt Nam. Lưu ý tên trang web nên ngắn gọn vì được gán vào địa chỉ URL của trang.

Bước 3. Thiết lập kích thước phần đầu trang, ảnh nền và tiêu đề trang.

- Thiết lập kích thước phần đầu trang: Nháy chuột vào Loại tiêu đề và chọn một kích thước.
- Thiết lập ảnh nền: Nháy chuột vào Thay đổi hình ảnh, rồi chọn Tải lên (ảnh từ máy tính) hoặc Chọn để chọn ảnh từ Google Drive, Google Photos hay từ Internet (Hình 24.9).

- Khi thiết lập ảnh nền, độ sáng của ảnh được tự động điều chỉnh để vẫn đọc được phần chữ trên nền. Trường hợp người dùng muốn giữ nguyên độ sáng của ảnh, nháy chuột vào biểu tượng

ở góc dưới bên phải để hủy bỏ chế độ tự động điều chỉnh độ sáng của ảnh (Hình 24.10).

- Ảnh gốc làm nền có thể có kích thước lớn hơn so với khung tiêu đề. Để điều chỉnh phần ấn tượng nhất của ảnh hiển thị trọn vẹn trong đầu trang, nháy chuột vào biểu tượng

ở góc dưới bên phải, sau đó chọn các mũi tên điều hướng để điều chỉnh vị trí của ảnh (Hình 24.11).

Bước 4. Thiết lập tiêu đề trang.
Nháy chuột vào Tiêu đề trang, nhập tiêu đề trang. Có thể thay đổi phông chữ, cỡ chữ, màu sắc hay căn lề, dãn dòng,… cho tiêu đề trang ở các bảng chọn tương ứng (Hình 24.12). Nếu tiêu đề dài thì có thể thay đổi kích thước khung văn bản hoặc nhắn phím Shift + Enter để ngắt xuống dòng. Có thể định dạng các dòng là Tiêu đề (cỡ chữ lớn), Tiêu đề (cỡ chữ nhỏ),… ở bảng chọn bên trái (Hình 24.12).

Bước 5. xem trước chỉnh sửa.
Tương tự các ứng dụng khác của Google, Google Sites sẽ tự động lưu trang web đang tạo vào Drive. Trước khi xuất bản trang web có thể xem trước bằng cách nháy chuột vào biểu tượng Xem trước