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

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)

Đâ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ì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

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 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

(Hình 24.13) rồi chọn xem trên điện thoại, máy tính bảng hay máy tính với các biểu tượng tương ứng (Hình 24.14).

Bước 6. Xuất bản và truy cập trang web theo URL.
Nháy chuột vào nút Công bố để xuất bản. Để sao chép địa chỉ URL, nháy chuột và biểu tượng

(Hình 24.13). Dán địa chỉ URL vào thanh địa chỉ của một trình duyệt để nhận được kết quả như Hình 24.5.

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 23 - CHUẨN BỊ XÂY DỰNG TRANG WEB (KNTT - ICT)

Bài 23 - Chuẩn bị xây dựng trang web (kntt)

TÓM TẮT NỘI DUNG:
1. Những đặc điểm chung của trang web
a) Phần đầu trang
b) Phần thân trang
c) Phần chân trang
2. Các bước chuẩn bị để xây dựng trang web
a) Định hình ý tưởng
b) Thiết kế
c) Lựa chọn phần mềm, chuẩn bị tư liệu

1. NHỮNG ĐẶC ĐIỂM CHUNG CỦA TRANG WEB

Dễ nhận thấy mỗi trang web đầy đủ nhất đều có cấu trúc gồm 3 phần chính:
• Phần đầu trang (header) với những thông tin chung nhất về trang.
• Phần phân trang (body) chứa nội dung của trang.
• Phần chân trang (footer) chứa các thông tin ngắn gọn về chủ thể, bản quyền.

a) Phần đầu trang

Phần đầu trang có vai trò như trang bìa thu gọn của một cuốn sách hay là phần trình bày đầu mỗi chương sách: Có hình nền và những thông tin nổi bật trên đó như logo, tên trang, thanh điều hướng (thanh này sẽ bao gồm bảng chọn các chức năng; chức năng tìm kiếm có thể được tách riêng ra khỏi bảng chọn), tiêu đề và thông tin tóm tắt của trang hay là thông tin mới cập nhật.
Lưu ý:

- Khi trang web được tải lên bởi một trình duyệt web, tên của nó sẽ được hiển thị tại tiêu đề của tab, phía sau một logo nhỏ gọi là favicon (viết tắt của favorite icon). Favicon có thể không phải được thu gọn từ logo của trang mà được tạo dựng riêng, không phải chỉ cho một trang mà cho cả website, chứa nhiều trang web liên quan đến nhau.
- Mỗi trang web hay website trên Internet có một địa chỉ truy cập dạng URL (Uniform Resource Locator) để người dùng Internet có thể đọc chúng qua một trình duyệt web như Firefox, Chrom, Edge hay Safari,...
- Tùy theo thiết kế mà đôi khi người ta dành ra một vài dòng trước phần đầu trang để đưa ra những thông báo quan trọng ví dụ như trang đang được xây dựng hay bảo trì,…; phần này gọi là phần thông báo.

b) Phần thân trang

Thân trang là phần chứa nội dung của trang web, thường được bố cục thành các khối hình chữ nhật (Hình 23.2), mỗi khối trình bày một nội dung với tiêu đề riêng.

Mỗi khối nội dung có thể chứa các thông tin dạng văn bản, hình ảnh, âm thanh, biểu mẫu nhập dữ liệu hay là các ứng dụng nhúng khác nhau (ví dụ: ứng dụng bản đồ, ứng dụng dự báo thời tiết,...).

c) Phần chân trang

Phần này có thể bao gồm những thông tin về thương hiệu, bản quyền, bảo mật, tóm tắt những thông tin cần nhấn mạnh thêm, thông tin liên hệ và những liên kết tới các trang mạng xã hội liên quan.

2. CÁC BƯỚC CHUẨN BỊ ĐỂ XÂY DỰNG TRANG WEB

Việc xây dựng trang web cần bắt đầu với việc phân tích, xác lập định hướng về mục đích của trang web và đối tượng người dùng. Mỗi trang web phải bắt nguồn từ một nhu cầu cụ thể. Trang web được xây dựng cho những người đọc nó, vì vậy cần phải xác định được đối tượng người đọc (người dùng), khả năng và mong muốn của họ. Từ đó xác định được mục đích, đối tượng, các yêu cầu về trang web trước khi đi vào các chi tiết thiết kế nội dung và hình thức. Trình tự các bước chuẩn bị cần phải thực hiện có thể tóm tắt như sau:

• Định hình ý tưởng:
- Xác định mục đích và đối tượng phục vụ của trang web.
- Thiết lập các yêu cầu cần đạt được cả về nội dung và hình thức.
• Thiết kế:
- Xây dựng dàn ý.
- Xây dựng kiến trúc nội dung, thiết kế mĩ thuật, chọn bảng màu, phông chữ,...
• Lựa chọn phần mềm chuẩn bị tư liệu:
- Lựa chọn phần mềm để xây dựng trang web.
- Chuẩn bị thông tin cho phần đầu trang: Làm logo, favicon, ảnh nền và đặt tên trang web.
- Chuẩn bị tư liệu cho phần thân và chân trang.

Lưu ý: Cần phân biệt việc xây dựng trang web đơn giản với xây dựng website. Công việc chuẩn bị xây dựng website có thể đòi hỏi thêm một số bước khác, đặc biệt là cách tổ chức vận hành và quản trị website.

a) Định hình ý tưởng

Nội dung chính của bước này là xác định mục đích, đối tượng và các yêu cầu cần đạt được; nói cách khác là tìm được câu trả lời tường minh cho các câu hỏi:

• Mục đích của trang web là gì? Lớp người dùng nào hay là những ai sẽ quan tâm thường xuyên đến trang web này?
• Để đạt được mục đích và đáp ứng được nhu cầu của người dùng thì trang web phải đạt được những yêu cầu như thế nào về nội dung, kiến trúc và mĩ thuật?

Để có thể xác định được rõ mục đích cũng như các yêu cầu cần đặt ra với trang web, cần khảo sát, phân tích các nhu cầu cũng như những đặc điểm của người dùng một cách cẩn thận kĩ lưỡng. Càng hiểu được nhu cầu của người dùng thì sẽ càng xác định được rõ hơn mục đích cũng như các yêu cầu cần đặt ra về nội dung và hình thức của trang web.
Để biết được rõ nhu cầu người dùng, cần phải đặt ra và trả lời những câu hỏi như: Người dùng mong muốn biết những thông tin gì? Những gì sẽ làm nên sự thu hút và gây hứng thú đối với họ? Những gì là đặc điểm văn hóa và thị hiếu của người dùng?
Ví dụ: Dự án xây dựng trang web với chủ đề “Việt Nam - Vẻ đẹp tiềm ẩn” của một nhóm thiện nguyện tâm huyết mong muốn quảng bá những nét đẹp của thiên nhiên, văn hóa, con người Việt Nam.

• Xác định mục đích của trang web và đối tượng sử dụng:
- Mục đích: Giới thiệu vẻ đẹp của thiên nhiên, văn hóa, con người Việt Nam.
- Đối tượng sử dụng: Tất cả những người yêu thích phong cảnh thiên nhiên, những nét đẹp về văn hóa nghệ thuật cũng như ẩm thực các vùng miền Việt Nam.
- Những điều làm nên sức hấp dẫn, thu hút đối với lớp đối tượng này là những bức ảnh đẹp về thiên nhiên, về cuộc sống lao động của người dân, những bài viết và hình ảnh về lịch sử, văn hóa, đặc điểm ẩm thực địa phương. Là những người thích khám phá, họ sẽ muốn biết vị trí trên bản đồ, cách tự đi đến đó, mùa hay thời gian đẹp nhất để đến tham quan mỗi danh lam thắng cảnh,...
- Nếu xác định trang web phục vụ cho cả người nước ngoài thì cần lưu ý những nội dung giúp họ tìm hiểu và khám phá những đặc điểm văn hóa truyền thống dân tộc cùng những vẻ đẹp độc đáo của thiên nhiên và con người Việt Nam.
• Yêu cầu về nội dung và hình thức:
- Những nội dung được giới thiệu phải phản ánh được nét đẹp riêng của thiên nhiên, văn hóa, con người ở mỗi vùng miền.
- Định dạng thông tin đa dạng sinh động: Văn bản, hình ảnh, âm thanh,...
- Những thông tin khác nên được giới thiệu kèm theo như bản đồ, đường đi, mùa thời/ gian đẹp nhất, đặc điểm thời tiết,...
- Hình thức của trang web phải dễ theo dõi, sinh động, đẹp và trang nhã về màu sắc.
- Trang web cũng cần có tương tác với người dùng để biết thêm nhu cầu của họ, từ đó có thể từng bước bổ sung, điều chỉnh nội dung và hình thức cho phù hợp hơn.

b) Thiết kế

Bước này cần phải được bắt đầu với việc xây dựng dàn ý tổng thể, từ đó xây dựng bố cục của trang và đưa ra những chỉ định về thiết kế mĩ thuật.

• xây dựng dàn ý và bố cục:
- Việc xây dựng dàn ý sẽ giúp hình dung toàn bộ về những nội dung sẽ được giới thiệu trong trang web và cách sắp xếp các nội dung này sao cho ấn tượng, mạch lạc, dễ tiếp cận và dễ hiểu nhất.
- Trang web “Việt Nam - Vẻ đẹp tiềm ẩn” sẽ giới thiệu các cảnh đẹp tiềm ẩn ở các vùng miền khác nhau, chẳng hạn Tây Bắc, Đông Bắc, Miền Trung, Tây Nguyên, Miền Đông, Miền Tây. Vì vậy, ở thanh điều hướng cần tạo bảng chọn gồm danh sách các vùng miền và thông tin liên hệ/phản hồi. Phần thân trang sẽ là một số bài viết mới nổi bật về một số địa danh có thể tham khảo một mẫu bố cục như Hình 23.5.

• Thiết kế mĩ thuật: Thiết kế mĩ thuật trang web là việc thiết kế hình thức của trang web sao cho có vẻ đẹp phù hợp với thẩm mĩ của người dùng và phù hợp với nội dung, góp phần gây ấn tượng và tăng sức thuyết phục của nội dung. Vì vậy, về chi tiết, công việc này được tiến hành với từng nội dung, từng bài viết của trang web. Ở mức thiết kế chung, sẽ chỉ giới hạn trong phạm vi lựa chọn các định dạng chữ và bảng màu.
- Định dạng chữ: Cần lựa chọn nhất quán và hài hòa giữa phông chữ, kiểu chữ (nghiêng, đậm,…) và cỡ chữ dùng cho mỗi phần của trang web. Ví dụ:
+ Phông chữ dùng cho các bảng chọn trên thanh điều hướng, nên là các phông Sans Serif (không có chân), hẹp ngang, dễ đọc và tiết kiệm diện tích hiển thị như phông Arial Condensed.
+ Các phông Serif (có chân), như Times New Roman rất ít được dùng để trình bày nội dung của trang web do khó nhận diện trên màn hình và chỉ dùng trong các trường hợp cỡ chữ lớn như tiêu đề. Phần nội dung bài viết nên chọn một không Sans Serif như calibria, Ariral, Verdana, Tahoma,…
+ Kiểu chữ đậm có ý nghĩa nhấn mạnh, thường dùng cho các tiêu đề. Kiểu chữ nghiêng có ý nghĩa phân biệt, thường dùng khi muốn phân biệt từ ngữ, câu chữ hay phần chú thích.
+ Cỡ chữ có thể quy định tối thiểu 4 cỡ: cỡ nhỏ nhất chỉ dùng cho chú thích không cần nhấn mạnh như chân trang; cỡ thường dùng cho phần nội dung bài viết; cỡ lớn cho tiêu đề và cỡ rất lớn cho những tiêu đề nổi bật.
- Bảng màu:
+ Một trang web với những màu sắc tương phản quá gắt hay không hài hòa sẽ gây phản cảm với người đọc. Vì vậy, để gây cảm xúc tốt và thu hút người đọc cần phải chọn một số màu có độ tương phản nhẹ nhàng và hài hòa. Mỗi bảng màu thường có 5 màu pha trộn giữa các màu gam ấm, lạnh và trung bình, chưa kể hai màu trắng và đen (Hình 23.6).
+ Hình 23.7 là một ví dụ về phông chữ, bảng màu trong một trang web của VnExpress. Phông chữ có chân chỉ được dùng ở vòng tiêu đề. Tất cả các phần khác đều dùng phông không chân. Có bốn cỡ chữ khác nhau, kết hợp với các kiểu chữ thường, đậm hay nghiêng; bảng màu gồm 5 màu tương phản vừa phải chuyển dần từ màu ấm đến màu lạnh.

c) Lựa chọn phần mềm, chuẩn bị tư liệu

Hiện nay, có nhiều phần mềm hỗ trợ làm trang web một cách trực quan, nhưng hầu hết chúng là những phần mềm thương mại. Tuy nhiên, Google có cung cấp miễn phí, trong hệ sinh thái của họ, một phần mềm làm trang web với giao diện hoàn toàn trực quan. Phần mềm này có điểm rất mạnh là dễ sử dụng và kết nối một cách dễ dàng với những phần mềm khác của Google như Docs, Sheets, Slides, Maps, Photos, YouTube,… Các trang web sau khi làm xong sẽ được lưu trữ trên Google Drive và có thể chia sẻ, xuất bản ngay trên Google với một địa chỉ URL hỗ trợ bởi Google. Yêu cầu cần có chỉ là người dùng đăng ký để có tài khoản Google Mail.
Vì vậy, sách này sẽ chọn giới thiệu phần mềm làm web của Google và hướng dẫn từng bước tạo dựng trang web với ví dụ cụ thể là làm trang web “Việt Nam - Vẻ đẹp tiềm ẩn”.
Việc chuẩn bị tư liệu cho trang web là việc kéo dài suốt thời gian thực hiện dự án, bắt đầu từ việc thiết kế favicon, logo, lựa chọn hình nền cho phần đầu trang, thực hiện các bài viết cho từng nội dung, lựa chọn hình ảnh minh họa,...

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