Slide bài giảng Tin học ứng dụng 12 chân trời bài E1: Tạo trang web, thiết lập giao diện và xem trước trang web
Slide điện tử bài E1: Tạo trang web, thiết lập giao diện và xem trước trang web. Trình bày với các hiệu ứng hiện đại, hấp dẫn. Giúp học sinh hứng thú học bài. Học nhanh, nhớ lâu. Có tài liệu này, hiệu quả học tập của môn Tin học ứng dụng 12 Chân trời sáng tạo sẽ khác biệt
Bạn chưa đủ điều kiện để xem được slide bài này. => Xem slide bài mẫu
Tóm lược nội dung
BÀI E1: TẠO TRANG WEB, THIẾT LẬP GIAO DIỆN VÀ XEM TRƯỚC TRANG WEB
A. KHỞI ĐỘNG
HS nghiên cứu nội dung hoạt động Khởi động SGK trang 49, suy nghĩ trả lời câu hỏi theo kiến thức của mình.
B. HOẠT ĐỘNG HÌNH THÀNH KIẾN THỨC
1. Phần mềm Google Sites
a) Trang web và phần mềm thiết kế web
Phần mềm thiết kế web là gì?
Nội dung ghi nhớ:
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...
b) Giới thiệu Google Sites
Google Sites là gì? Google Sites có những tính năng gì?
Nội dung ghi nhớ:
- 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
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 phần mềm thiết kế web Google Sites gồm những phần nào? Phần mềm thiết kế web Google Sites có những thẻ chức năng nào?
Nội dung ghi nhớ:
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); Thẻ Pages (Trang); Thẻ Themes (Giao diện)
2. Tạo trang web mới
Có mấy cách để tạo trang web?
Nội dung ghi nhớ:
Tạo mới trang web bằng mẫu có sẵn hoặc tự thiết kế một trang web mới.
3. Thiết lập giao diện cho trang web
Em có thể thiết lập giao diện cho trang web bằng những cách nào?
Nội dung ghi nhớ:
- Sử dụng các mẫu giao diện khác nhau trong thẻ Themes
- Tạo riêng giao diện hoặc nhập thêm giao diện từ bên ngoài
4. Xem trước trang web
Việc xem trước thiết kế trang web có ý nghĩa như thế nào?
Nội dung ghi nhớ:
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.
THỰC HÀNH
Các bước thiết kế trang web sử dụng giao diện có sẵn
Gợi ý đáp án:
- Bước 1: HS tạo được một trang web trống.
- Bước 2: HS chọn được mẫu giao diện IMPRESSION cho trang web.
- Bước 3: HS thực hiện đặt tên trang web.
- Bước 4: HS chèn được logo theo yêu cầu.
- Bước 5: HS thực hiện nhập và căn chỉnh tiêu đề cho trang web.
- Bước 6: HS thực hiện thay đổi ảnh bìa cho trang.
HOẠT ĐỘNG LUYỆN TẬP
GV giao nhiệm vụ cho HS, HS hoàn thành phiếu bài tập.
Gợi ý đáp án:
| Câu 1 | Câu 2 | Câu 3 | Câu 4 | Câu 5 |
| C | C | D | B | A |
Câu 1. a. Đ; b. S; c. S; d. Đ
D. HOẠT ĐỘNG VẬN DỤNG
Câu 1. Thực hiện hiệu chỉnh trang web portfolio.html trong các ví dụ của bài học để giới thiệu vài thông tin của bản thân. Trong đó, sử dụng các thẻ <h1> và <p>. Hình 8 là một ví dụ kết quả sau khi hoàn thành chỉnh sửa.
Hình 8. Trang web portfolio.html sau khi hoàn thành
Câu 2. Em hãy sử dụng Visual Studio Code để tạo trang web index.html giới thiệu ngắn về lớp em, trong đó sử dụng những thẻ đã học để định dạng cho phần nội dung văn bản.
Câu 3. Em hãy tìm hiểu thêm một số thuộc tính khác của thẻ <body> như background-color, text-decoration, margin-left, margin-top.
Câu 4. Ngoài thẻ <meta> và <title>, hãy kể tên vài thẻ khác có thể có trong cặp thẻ <head></head>.
Slide bài giảng lớp 12 cánh diều
Slide bài giảng lớp 12 chân trời sáng tạo
Slide bài giảng lớp 12 kết nối tri thức
