Giáo án Tin học ứng dụng 12 kết nối bài 23: Chuẩn bị xây dựng trang web

Từ kiến thức đã học, em đã biết khái niệm về trang web. Trong cuộc sống, học tập hằng ngày, em đã từng thấy nhiều trang web và sự phổ biến của chúng, chẳng hạn khi xem tin tức trên các báo điện tử, mạng xã hội,… Các trang web này có những đặc điểm chung gì? Cần chuẩn bị những gì khi muốn xây dựng một trang web?

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS làm việc cá nhân, thực hiện Hoạt động 1 – Thảo luận khám phá cấu trúc và đặc điểm chung của trang web SGKtr.126:

+ Có thể chia một trang web thành các phần chính như thế nào?

+ Mỗi phần có những đặc điểm nào chung (nhìn thấy ở nhiều trang web)? 

- GV yêu cầu HS quan sát hình ảnh sau và trả lời các câu hỏi:

Phần đầu trang web https://moet.gov.vn/

+ Trong một trang web, phần đầu trang có vai trò như thế nào?

+ Phần đầu trang thường bao gồm những thông tin gì?

- GV đưa ra ví dụ và chỉ rõ cho HS thấy được các thành phần có thể có trong phần đầu trang.

Bước 2: HS thực hiện nhiệm vụ học tập:  

- HS tìm hiểu nội dung mục 1a SGK tr.126 – 127 và trả lời các câu hỏi mà GV đưa ra.

- GV quan sát và trợ giúp HS (nếu cần thiết).

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- HS lần lượt trả lời các câu hỏi.

- HS khác nhận xét, bổ sung.

Bước 4: Đánh giá kết quả thực hiện nhiệm vụ học tập: 

- Từ câu trả lời của HS, GV nhận xét, đánh giá quá trình HS thực hiện nhiệm vụ.

- GV chính xác hoá lại các nội dung trả lời của HS.

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

Mỗi trang web đầy đủ nhất đều có cấu trúc gồm ba phần chính:

• Phần đầu trang (header) với những thông tin chung nhất về trang.

• Phần thâ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

- 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 đề.

+ 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, Chrome, Edge hay Safari,…

• Tuỳ 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.

Hình 23.1. Đầu trang của trang web HARVARD UNIVERSITY

1 – Logo, 2 – Tên trang, 
3 – Biểu tượng của bảng chọn,

4 – Biểu tượng của chức năng tìm kiếm, 
5 – Tiêu đề, 6 – Tóm tắt thông tin nổi bật

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS quan sát Hình 23.2 và trả lời các câu hỏi:

+ Trong một trang web, phần thân trang thường có bố cục như thế nào?

+ Nội dung trong phần thân trang có thể chứa những dạng  thông tin gì?

Bước 2: HS thực hiện nhiệm vụ học tập:  

- HS tìm hiểu nội dung mục 1b SGK tr.127 – 128 và trả lời các câu hỏi mà GV đưa ra.

- GV quan sát và trợ giúp HS (nếu cần thiết).

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- HS lần lượt trả lời các câu hỏi.

- HS khác nhận xét, bổ sung.

Bước 4: Đánh giá kết quả thực hiện nhiệm vụ học tập: 

- Từ câu trả lời của HS, GV nhận xét, đánh giá quá trình HS thực hiện nhiệm vụ.

- GV chính xác hoá lại các nội dung trả lời của HS.

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, mỗi khối trình bày một nội dung với tiêu đề riêng.

Hình 23.2. Cấu trúc phần thân trang

- 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,…).

Hình 23.3. Ví dụ phần thân trang web Đại học Quốc gia TP. Hồ Chí Minh

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS quan sát hình ảnh sau và trả lời các câu hỏi:

Phần chân trang web https://moet.gov.vn/

+ Trong một trang web, phần chân trang có thể bao gồm những thông tin gì?

- GV đưa ra ví dụ và chỉ rõ cho HS thấy được các thành phần có thể có trong phần chân trang.

- GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, thực hiện hoạt động Củng cố kiến thức tr.128 SGK:

Câu 1. Tên trang web và logo trang được đặt ở phần nào của trang web?

Câu 2. Phần thân trang web thường có bố cục như thế nào?

Câu 3. Thông tin liên hệ của chủ thể của trang web được đặt ở phần nào của trang web?

Bước 2: HS thực hiện nhiệm vụ học tập:  

- HS tìm hiểu nội dung mục 1c SGK tr.128 và trả lời các câu hỏi mà GV đưa ra.

- GV quan sát và trợ giúp HS (nếu cần thiết).

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- HS lần lượt trả lời các câu hỏi.

- HS khác nhận xét, bổ sung.

Bước 4: Đánh giá kết quả thực hiện nhiệm vụ học tập: 

- Từ câu trả lời của HS, GV nhận xét, đánh giá quá trình HS thực hiện nhiệm vụ.

- GV chính xác hoá lại các nội dung trả lời của HS.

- GV chốt kiến thức theo Hộp kiến thức: 

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

- Những liên kết tới các trang mạng xã hội liên quan.

Hình 23.4. Phần chân trang web 
Báo Lao Động (laodong.vn)

Hướng dẫn trả lời câu hỏi Hoạt động 1 SGK tr.126:

Có thể chia một trang web thành ba phần chính:

- Phần đầu trang là nơi hiển thị logo, tên trang, thanh điều hướng bao gồm bảng chọn các chức năng, tiêu đề và thông tin tóm tắt của trang.

- Phần thân trang được tổ chức theo cấu trúc nhiều khối hình chữ nhật, mỗi khối giới thiệu một nội dung.

- Phần chân trang được dành để đưa 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.

Hướng dẫn thực hiện hoạt động Củng cố kiến thức tr.128 SGK:

Câu 1. Tên trang web và logo trang được đặt ở phần đầu của trang web.

Câu 2. Phần thân trang web thường có bố cục là các khối hình chữ nhật.

Câu 3. Thông tin liên hệ của chủ thể của trang web được đặt ở phần chân của trang web.

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS đọc Hoạt động 2 – Cần làm gì khi bắt đầu xây dựng một trang web? SGKtr.129:

Hãy thảo luận và trả lời câu hỏi: Để xây dựng một trang web chúng ta nên bắt đầu từ đâu?

Gợi ý:

+ Chuẩn bị những thông tin cho phần đầu trang.

+ Chuẩn bị những thông tin cho phần chân trang.

+ Chuẩn bị các bài viết và hình ảnh đẹp.

+ Phân tích, xác lập định hướng về mục đích trang web, đối tượng người dùng và định hướng thiết kế trang web.

- Từ Hoạt động 2, GV giới thiệu khái quát các bước chuẩn bị cần phải thực hiện để xây dựng trang web.

- GV chia lớp thành các nhóm 3 – 4 HS, mỗi nhóm tìm hiểu một bước:

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

+ Nội dung chính của bước này là gì?

+ Người xây dựng trang web cần làm gì để:

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

• Biết được rõ nhu cầu của người dùng?

+ GV cùng HS phân tích ví dụ tr.130 SGK. 

b) Thiết kế

+ Vì sao cần xây dựng dàn ý khi thiết kế trang web?

+ Thế nào là thiết kế mĩ thuật trang web?

+ Ở mức thiết kế chung, người xây dựng trang web cần chú ý đến những yếu tố nào?

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

+ GV giới thiệu phần mềm xây dựng trang web của Google.

+ Việc chuẩn bị tư liệu cần thực hiện như thế nào?

- GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, thực hiện hoạt động Củng cố kiến thức tr.133 SGK:

Câu 1. Để định hình được ý tưởng xây dựng một trang web cần phải thực hiện những công việc gì?

Câu 2. Công việc thiết kế trang web bao gồm những nội dung gì?

Bước 2: HS thực hiện nhiệm vụ học tập:  

- HS tìm hiểu nội dung mục 2 SGK tr.129 – 132 sau đó trao đổi, thảo luận trả lời các câu hỏi mà GV đưa ra.

- GV quan sát và trợ giúp HS (nếu cần thiết).

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- GV mời đại diện các nhóm báo cáo kết quả thảo luận.

- Các nhóm khác đưa ra ý kiến nhận xét.

Hướng dẫn thực hiện hoạt động Củng cố kiến thức SGK tr.133:

...........................................

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 hoá 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 hoá, 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 hoá, 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 hoá 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: 

...........................................