Giáo án Mĩ thuật 12 kết nối - Thiết kế mĩ thuật ĐPT: Bài 2 Thiết kế mĩ thuật giao diện website

Giáo án Mĩ thuật 12 kết nối tri thức: Thiết kế mĩ thuật ĐPT: Bài 2 Thiết kế mĩ thuật giao diện website. Bài được biên soạn đầy đủ, chỉn chu, chất lượng. File tải về là file word, giáo viên dễ dàng sử dụng, chỉnh sửa. Kênh có trọn bộ giáo án Word cả năm.

Nội dung chi tiết

Ngày soạn:…/…/…

Ngày dạy:…/…/…

BÀI 2: THIẾT KẾ MĨ THUẬT GIAO DIỆN WEBSITE

(11 tiết)

I. MỤC TIÊU

1. Kiến thức

Sau bài học này, HS sẽ:

  • Nhận biết được các yếu tố thẩm mĩ, hệ thống cấu trúc và phân cấp nội dung trên website.
  • Lựa chọn được chủ đề, phác thảo và thiết kế mĩ thuật một giao diện website.
  • Phân tích, đánh giá được thiết kế mĩ thuật website phù hợp với đối tượng sử dụng.
  • Yêu thích và hiểu biết cơ bản về thiết kế mĩ thuật website.

2. Năng lực

Năng lực chung:

  • Năng lực giao tiếp và hợp tác: khả năng thực hiện nhiệm vụ một cách độc lập hay theo nhóm; Trao đổi tích cực với giáo viên và các bạn khác trong lớp.
  • Năng lực tự chủ và tự học: biết lắng nghe và chia sẻ ý kiến cá nhân với bạn, nhóm và GV. Tích cực tham gia các hoạt động trong lớp.
  • Giải quyết vấn đề và sáng tạo: biết phối hợp với bạn bè khi làm việc nhóm, tư duy logic, sáng tạo khi giải quyết vấn đề.

Năng lực riêng:

  • Lựa chọn chủ đề, phác thảo và thiết kế mĩ thuật website.
  • Phân tích, đánh giá được thiết kế mĩ thuật website phù hợp với đối tượng sử dụng.

3. Phẩm chất

  • Yêu thích và hiểu biết cơ bản về thiết kế mĩ thuật website.

II. THIẾT BỊ DẠY HỌC

1. Đối với giáo viên

  • SGK, SGV Mĩ thuật 12.
  • Hình ảnh hoặc đường dẫn của một số website với các nội dung và chủ đề khác nhau.
  • Máy tính, máy chiếu.

2. Đối với học sinh

  • SGK Mĩ thuật 12.
  • Giấy vẽ A4, bút chì, màu nước, màu da, màu sáp, thước…
  • Ảnh tư liệu về các website hoặc ảnh tư liệu cho chủ đề website yêu thích.

III. CÁC HOẠT ĐỘNG DẠY HỌC

HOẠT ĐỘNG 1: KHÁM PHÁ

a. Mục tiêu: Thông qua hoạt động, có thông tin về vai trò, nhiệm vụ và sự phát triển của website trên môi trường internet.

b. Nội dung: GV tổ chức cho các nhóm HS tìm hiểu và thuyết trình một số nội dung liên quan đến:

- Vai trò, nhiệm vụ và sự phát triển của website trên môi trường internet. Những dấu mốc và sự xuất hiện của một số website ở Việt Nam.

- Một số website thuộc các nhóm nội dung chủ đề khác nhau ở Việt Nam như: giáo dục, giải trí, báo điện tử, thương mại điện tử, doanh nghiệp.

c. Sản phẩm: Bài thuyết trình của HS.

d. Tổ chức thực hiện:

Bước 1: GV chuyển giao nhiệm vụ học tập

- GV giao nhiệm vụ cho HS và mời các nhóm lên trình bày :

+ Nhóm 1 + 2: Vai trò nhiệm vụ và sự phát triển của website trên môi trường internet.

+ Nhóm 3 + 4: Các website phổ biến thuộc các chủ đề khác nhau.

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

- HS các nhóm phân công nhiệm vụ cụ thể cho thành viên các nhóm.

- GV quan sát việc tham gia hoạt động học tập trên lớp của HS:

+ Chuẩn bị bài thuyết trình của mỗi nhóm.

+ Sự tham gia của mỗi thành viên trong nhóm.

+ Sự tham gia của HS trong lớp.

+ Sự tích cực đặt câu hỏi, trả lời trong phần thảo luận.

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

- GV mời đại diện HS trình bày kết quả thảo luận về nội dung: Vai trò, nhiệm vụ và sự phát triển website trên môi trường internet.

- GV yêu cầu các HS khác lắng nghe, nhận xét, nêu ý kiến bổ sung hoặc đặt câu hỏi cho nhóm bạn (nếu có).

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

GV nhận xét, đánh giá và chuẩn kiến thức:

- Vai trò nhiệm vụ và sự phát triển của website trên môi trường internet: Trên môi trường internet, website là một tập hợp các dữ liệu hiển thị dưới dạng văn bản, hình ảnh mà người dùng tương tác trên các thiết bị máy tính, điện thoại thông minh… Website có cấu trúc dễ dàng thì càng thuận tiện theo dõi và tải thông tin xuống nếu cần.

- Các website phổ biến thuộc các chủ đề khác nhau: Ví dụ chủ đề liên quan đến thông tin: trang báo điện tử, trang thông tin của doanh nghiệp, thương liệu lớn của Việt Nam, chủ đề liên quan đến thương mại gồm có trang bán sản phẩm cụ thể của các doanh nghiệp như thời trang, nội thất, đồ thủ công mĩ nghệ….)

+ Các website cụ thể, trình bày nội dung và cách sắp xếp, nêu ra các đặc điểm nổi bật.

+ Phong cách, thể hiện của các website thông qua hình ảnh, màu sắc, kiểu chữ, bố cục thông tin….

BÀI 2: THIẾT KẾ MĨ THUẬT GIAO DIỆN WEBSITE

Website thương hiệu vàng bạc PNJ

BÀI 2: THIẾT KẾ MĨ THUẬT GIAO DIỆN WEBSITE

Website cổng dịch vụ công quốc gia

BÀI 2: THIẾT KẾ MĨ THUẬT GIAO DIỆN WEBSITE

Website thời trang ELISE

BÀI 2: THIẾT KẾ MĨ THUẬT GIAO DIỆN WEBSITE

Website thương hiệu MUJI

HOẠT ĐỘNG 2: NHẬN BIẾT

a. Mục tiêu: Thông qua hoạt động, HS:

- Biết được đặc điểm và nhiệm vụ của từng thành phần cơ bản trên website.

- Hiểu nội dung và cách hoạt động của từng thành phần.

- Biết và hiểu về đặc điểm các dạng bố cục thông dụng trong thiết kế website.

- Nhận biết phân cấp thông tin trong các loại bố cục website.

- Vận dụng được kiến thức về bố cục cho các nội dung khác nhau của website.

- Biết cách tìm ý tưởng và xây dựng phác thảo cho website.

b. Nội dung: GV tổ chức cho HS thực hành để nhận biết về những nội dung liên quan đến lĩnh vực thiết kế mĩ thuật giao diện website theo mục tiêu đề ra.

c. Sản phẩm: HS nhận biết, có ý tưởng và bản vẽ thiết kế mĩ thuật website theo chủ đề tùy chọn.

d. Tổ chức thực hiện:

HOẠT ĐỘNG CỦA GV - HS

DỰ KIẾN SẢN PHẨM

Nhiệm vụ 1: Một số kiểu bố cục thông dụng trong thiết kế mĩ thuật website

Bước 1: GV chuyển giao nhiệm vụ học tập

- GV yêu cầu HS thảo luận theo cặp, quan sát Hình ảnh, đọc thông tin SGK tr.16 – 21 và cho biết: Em hãy trình bày một số kiểu bố cục thông dụng trong thiết kế mĩ thuật website.

Quy tắc 1/3

BÀI 2: THIẾT KẾ MĨ THUẬT GIAO DIỆN WEBSITE

Tỉ lệ vàng

BÀI 2: THIẾT KẾ MĨ THUẬT GIAO DIỆN WEBSITE

Quy tắc cột

BÀI 2: THIẾT KẾ MĨ THUẬT GIAO DIỆN WEBSITE

Quy tắc khối tiêu chuẩn

BÀI 2: THIẾT KẾ MĨ THUẬT GIAO DIỆN WEBSITE

Quy tắc lưới phân cấp

BÀI 2: THIẾT KẾ MĨ THUẬT GIAO DIỆN WEBSITE

Quy tắc khối lớn

BÀI 2: THIẾT KẾ MĨ THUẬT GIAO DIỆN WEBSITE

- GV yêu cầu HS phân tích những mặt tích cực, hạn chế.

- GV tiếp tục yêu cầu HS ở mỗi dạng bố cục, lựa chọn website phù hợp với dạng bố cục này để phác thảo ra giấy.

- GV trình chiếu cho HS quan sát hình ảnh về các loại bố cục thiết kế trang website (Đính kèm dưới Nhiệm vụ 1).

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

- HS thảo luận theo cặp, quan sát Hình ảnh, đọc thông tin SGK kết hợp sưu tầm thông tin, tư liệu, hình ảnh để tìm hiểu về một số kiểu bố cục thông dụng trong thiết kế mĩ thuật website.

NHẬN BIẾT

1. Một số kiểu bố cục thông dụng trong thiết kế mĩ thuật website

- Quy tắc 1/3:

+ Chia màn hình ra làm 3 phần theo chiều ngang và 3 phần theo chiều dọc. Bố cục các cụm thông tin và nội dung theo các vị trí đã chia.

+ Hình ảnh và thông tin nổi bật ưu tiên hiển thị ở giao điểm của lưới 1/3. Quy tắc 1/3 hay được sử dụng cho bố cục giao diện trang chủ.

- Tỉ lệ vàng:

+ Xác định bằng cách chia đoạn thẳng AB thành 2 phần, trong đó đoạn A dài hơn đoạn B. Lấy tổng A + B chia cho A nếu bằng giá trị 1.618 thì đó là tỉ lệ vàng.

+ Công thức tổng quát xác định tỉ lệ vàng:

A/B = (A+B)/A = 1.618 = Φ

+ Dùng cho trang chủ, những trang tạo ấn tượng có nhiều hình ảnh, lượng thông tin ít.

- Quy tắc cột:

+ Số cột thông thường là 12 cột, nên quy tắc thiết kế dựa trên việc nhóm các cột nhỏ thành 3 hoặc 4 cột lớn cho toàn trang là quy tắc rất phổ biến.

- Quy tắc khối tiêu chuẩn:

+ Phân cấp các phần thông tin tương tự nhau thành các khối bằng nhau về kích thước và giống nhau cách sắp xếp các chi tiết. Các khối này thường được đặt thẳng hàng theo cả chiều dọc lẫn chiều ngang.

+ Các trang có nhiều tin tức, nội dung liệt kê, ví dụ: trang sản phẩm, trang album ảnh,...

- Quy tắc lưới phân cấp:

+ Cách tạo diện tích mới bằng cách nhóm các số lượng cột khác nhau. Số lượng cột được nhóm càng nhiều thì diện tích càng lớn.

+ Diện tích lớn trình bày nội dung quan trọng, nổi bật, các diện tích nhỡ hoặc bé hơn thể hiện nội dung khác ít quan trọng hơn theo kịch bản phân cấp thông tin của trang.

- Quy tắc khối lớn:

+ Dùng để trình bày những trang chi tiết có nội dung thông tin đơn giản như một đoạn văn bản hoặc một bức ảnh đơn lẻ.

+ Nội dung chính ở chính giữa và chiếm diện tích khoảng một phần ba diện tích toàn màn hình.

---------------------------------------

----------------------Còn tiếp---------------------