Nội dung chính Tin học ứng dụng 12 kết nối bài 18: Thực hành tổng hợp thiết kế trang web

BÀI 18: THỰC HÀNH TỔNG HỢP THIẾT KẾ TRANG WEB

1. DỰ ÁN: XÂY DỰNG WEBSITE GIỚI THIỆU CÁC CÂU LẠC BỘ NGOẠI KHOÁ CỦA TRƯỜNG

- Website cần một trang chủ và các trang riêng cho từng nhóm hoặc từng câu lạc bộ tuỳ theo số lượng và thông tin hoạt động chi tiết của các câu lạc bộ. 

- Ở mức đơn giản, có thể thiết kế website với ba thành viên trang tương ứng với:

+ Trang chủ.

+ Trang giới thiệu các câu lạc bộ thể thao.

+ Các câu lạc bộ nghệ thuật.

- Trang chủ sẽ chứa các thông tin chung nhất về các câu lạc bộ và liên kết tới các trang thành viên.

+ Minh hoạ có thể tuỳ chọn vào các tài nguyên sẵn có – thường là ảnh và video. 

+ Các trang thành viên đăng thông tin chi tiết, lịch hoạt động, thành tích,... tuỳ nhu cầu. 

+ Ngoài ra, có thể tạo thêm một trang chứa biểu mẫu để các bạn đăng kí tham gia.

- Các trang nên tuân theo phong cách trình bày chung bằng cách sử dụng liên kết tới cùng một tệp tin CSS.

- Để thực hiện ý tưởng này, trước hết ta cần lên ý tưởng về bố cục của từng phần trong một trang web rồi sử dụng CSS để định dạng (kích thước, vị trí, màu sắc, cỡ chữ,...) của mỗi phần.

* Cấu trúc trang web: Một trang chủ, hai trang con giới thiệu về 2 câu lạc bộ:

- Trang chủ: chứa thông tin chung, giới thiệu về trường và các câu lạc bộ, chứa các liên kết đến các trang con.

- Mỗi trang con: Chứa thông tin giới thiệu về một câu lạc bộ, hình ảnh minh hoạ.

* Tiêu chí đánh giá sản phẩm:

(Mỗi tiêu chí được đánh giá theo thang điểm từ 1 – 5, theo mức độ từ chưa tốt đến rất tốt)

a) Cấu trúc: Đảm bảo cấu trúc tối thiểu gồm một trang chủ và hai trang con có liên kết với nhau.

b) Nội dung

- Đúng chủ đề được yêu cầu, nội dung bài viết chính xác.

- Trên trang chủ có nội dung giới thiệu, logo, banner, slogan, các nội dung giới thiệu sơ bộ về tên và logo của CLB.

- Trên trang con có phần đầu trang tương tự trên trang chủ. Có bài viết về hoạt động của CLB có ảnh minh hoạ.

- Tạo được liên kết từ trang chủ tới các trang con.

- HS tự lựa chọn giới thiệu 2 CLB nào.

c) Hình thức

- Bố cục: khoa học, phù hợp, đẹp mắt.

- Hình ảnh và video: chất lượng tốt, phù hợp với nội dung, không vi phạm bản quyền (có trích dẫn đầy đủ nếu cần).

- Các phần nội dung văn bản: trình bày hợp lý, khoa học, đẹp mắt.

2. THỰC HÀNH 

Nhiệm vụ 1: Tạo tệp CSS

- Nhiệm vụ quan trọng trong việc tạo tệp css là xác định được các khối và cách sắp xếp các khối này trong cấu trúc chung; định dạng cho các thành phần chữ và màu chữ của các đề mục và nội dung trong trang.

- Mỗi khối trong bố cục đều được tạo bởi cặp thẻ div trong tệp tin HTML (từ khối to chứa nhiều phần tử bên trong đến các khối nhỏ nhất không chứa khối con nào). Tức là tệp tin HTML sử dụng thẻ div để tạo các loại khối khác nhau trong khi cách trang trí của mỗi loại khối được định nghĩa trong tệp tin CSS.

- Những khối có nội dung tương đồng (ví dụ như bốn khối màu vàng Hình 18.2) được khai báo bởi cùng một class (định nghĩa của class được viết trong tệp tin CSS). Nếu một trong các đối tượng tương đồng có thêm một số đặc điểm riêng so với các đối tượng còn lại thì ta có thể sử dụng mã định danh id cho từng phần tử riêng biệt.

- Lưu ý: Mặc định, các thẻ div sẽ tạo thành các khối xếp lần lượt từ trên xuống dưới (theo phương thẳng đứng). Để xếp các khối theo hàng ngang, ta cần tạo thẻ div lớn bao quanh các khối nhỏ dự định xếp hàng ngang. Các khối này cần được xác định chiều rộng sao cho tổng chiều rộng không quá 100%.

Nhiệm vụ 2: Tạo các tệp HTML

- Các khối được biểu diễn bằng thẻ div trong tệp tin HTML. Khi viết mã, các thẻ div được viết lần lượt từ trên xuống dưới, trừ trái sang phải theo bố cục đã xác định.

- HS có thể viết bố cục lớn trước (tương ứng với thẻ div định nghĩa đầu trang, phần nội dung chính và cuối trang) sau đó thêm vào chi tiết của mỗi phần (thêm banner, khẩu hiệu slogan trong cặp thẻ div đầu trang, thực hiện tương tự cho phần nội dung chính).

- Khi chưa có tệp tin CSS, tệp tin html sẽ hiển thị theo thứ tự từ trên xuống dưới theo phương thẳng đứng, chưa có màu trang trí được định nghĩa trong tệp tin CSS. Khi bổ sung CSS, tệp tin html mới hiển thị đúng như ý tưởng thiết kế.