TỔNG QUAN VỀ GIÁO TRÌNH MÔ ĐUN THIẾT KẾ WEB (MĐ18)

Tổng quan về giáo trình (250-300 từ)

  • Tên tài liệu: Giáo trình Mô đun Thiết kế web
  • Mã mô đun: MĐ18
  • Mã quản lý văn bản: ĐTSV/04/04 (Ban hành lần: 3)
  • Cơ quan ban hành: Trường Cao đẳng Kỹ thuật Công nghệ Bà Rịa – Vũng Tàu (trực thuộc UBND Tỉnh Bà Rịa – Vũng Tàu)
  • Chủ biên: Nguyễn Phạm Ái Hương
  • Nghề đào tạo: Công nghệ Thông tin
  • Trình độ: Cao đẳng
                         CHƯƠNG TRÌNH CAO ĐẲNG NGHỀ CNTT
     Các môn học cơ sở                                      Đồ họa ứng dụng
                         MÔ ĐUN THIẾT KẾ WEB (MÃ: MĐ18)
                  [Tổng thời lượng: 90 giờ | LT: 22h - TH: 58h - KT: 10h]

Vị trí trong chương trình đào tạo

Mô đun Thiết kế web (Mã mô đun: MĐ18) là mô đun chuyên ngành bắt buộc thuộc chương trình đào tạo Cao đẳng nghề Công nghệ Thông tin. Môn học được bố trí giảng dạy sau khi người học đã hoàn thành các môn học cơ sở và học phần Đồ họa ứng dụng.

Mục tiêu học tập (Learning Outcomes)

  • Về kiến thức:
    • Trình bày được công dụng của từng thành phần và cách thức quản lý tệp tin, cấu trúc site trong phần mềm Adobe Dreamweaver.
    • Xác định đúng chức năng các thẻ HTML căn bản, hệ thống thẻ ngữ nghĩa của HTML5, các quy tắc định dạng trong CSS và CSS3.
    • Hiểu nguyên lý thực thi kịch bản phía máy khách (client-side) với ngôn ngữ JavaScript và thư viện jQuery.
    • Nắm vững quy trình cấu hình, đóng gói và xuất bản website lên môi trường Internet (Web Hosting) và máy chủ cục bộ (Local IIS).
  • Về kỹ năng:
    • Phân chia bố cục và xây dựng hoàn chỉnh giao diện trang web bằng HTML, HTML5 kết hợp CSS, CSS3.
    • Lập trình nhúng các đoạn mã JavaScript để xử lý tương tác cơ bản trên tài liệu HTML.
    • Ứng dụng kỹ thuật Template, Navigation và Menu trong Adobe Dreamweaver để quản lý và tái sử dụng cấu trúc web.
    • Xây dựng hiệu ứng và hoạt ảnh chuyên nghiệp bằng jQuery.
    • Đăng ký dịch vụ web hosting miễn phí và xuất bản dữ liệu website lên máy chủ web.
  • Về năng lực tự chủ và trách nhiệm:
    • Thể hiện tính kỷ luật, tác phong công nghiệp, năng lực làm việc độc lập và kỹ năng phối hợp nhóm.
    • Tuân thủ quy định bảo đảm an toàn cho người và thiết bị trong phòng máy tính.

Cấu trúc và cách tiếp cận

Giáo trình có tổng thời lượng 90 giờ, bao gồm 22 giờ lý thuyết, 58 giờ thực hành/thảo luận và 10 giờ kiểm tra định kỳ. Tài liệu tiếp cận theo phương pháp phân tích chức năng kết hợp hướng dẫn thực hành từng bước (step-by-step), bám sát yêu cầu công việc thực tế tại doanh nghiệp.

Điểm đặc sắc của giáo trình

Nội dung tài liệu bao quát toàn bộ quy trình phát triển giao diện web (Front-end Development) từ bước khởi tạo môi trường cục bộ, xây dựng cấu trúc ngữ nghĩa (HTML5), thiết lập mỹ thuật và hiệu ứng giao diện (CSS3), xử lý hành vi tương tác (JavaScript, jQuery) cho đến giai đoạn triển khai vận hành trên máy chủ (Web Hosting, Local IIS).

Nội dung kiến thức cốt lõi (500-600 từ)

                            TIẾN TRÌNH NỘI DUNG MÔ ĐUN MĐ18

Các chương/chủ đề chính

  • Bài 1: Môi trường tạo trang web tĩnh DreamWeaver, thẻ HTML (4 giờ): Quản lý palette, khởi tạo và quản lý cấu trúc site chuẩn (images, scripts, styles, tập tin index.html); thao tác trên các vùng nhìn Code, Design, Split; cú pháp cấu trúc tài liệu HTML; sử dụng các thẻ cơ bản: META, LINK, STYLE, SCRIPT, TABLE, TR, TD, TH, DIV, P, BR, HR, IMG, A, OL, UL, LI, FORM, INPUT, SELECT, OPTION.
  • Bài 2: Tạo trang web bằng HTML5 (15 giờ): Hệ thống thẻ ngữ nghĩa (section, article, nav, menu, header, footer); các thẻ và kiểu input mới trong form (datalist, keygen, output, các type: color, date, time, email, month, week, number, range); kỹ thuật vẽ đồ họa vector SVG (<svg>, <circle>, <ellipse> với các thuộc tính cx, cy, fill, stroke, rx, ry); nhúng đa phương tiện tự nhiên qua thẻ <video>, <audio>, <source> (hỗ trợ định dạng .ogg, .mp3, .wav mà không cần Flash).
  • Bài 3: Hoàn chỉnh giao diện trang web với CSS (13 giờ): Phân loại CSS (External, Internal, Inline); bộ chọn ID Selector (#) và Class Selector (.); các thuộc tính định dạng cơ bản (font-family, color, border, padding, margin, background-color, background-image); kỹ thuật canh giữa trang web trên màn hình LCD rộng; chuẩn hóa hiển thị giữa các trình duyệt; thiết lập hiệu ứng đổi định dạng hover cho thanh điều hướng (#gNav); kỹ thuật bo viền nội dung theo 1, 2, 3 và 4 giá trị bán kính.
  • Bài 4: Tùy biến giao diện web với CSS3 (14 giờ): Bo tròn góc (Rounded Corners), tạo đường viền bằng ảnh (Border Images); tùy biến nhiều ảnh nền (Backgrounds với giá trị contain, cover); không gian màu RGBA, HSL, HSLA, Opacity; hiệu ứng đổ bóng text-shadow, box-shadow; xử lý văn bản text-overflow, word-wrap, word-break; biến đổi không gian 2D (translate, rotate, scale, skew, ma trận matrix) và 3D (rotateX, rotateY, rotateZ); thiết lập chuyển cảnh (Transitions), hoạt hình (Animations); kiểm soát kích thước phần tử bằng thuộc tính box-sizing.
  • Bài 5: Xử lý tương tác với Javascript (12 giờ): Tổng quan về JavaScript và cách nhúng mã (nhúng trực tiếp hoặc liên kết tệp tin .js); cú pháp khai báo biến (var); áp dụng các cấu trúc điều khiển rẽ nhánh và vòng lặp; xử lý dữ liệu với mảng và hàm.
  • Bài 6: Một số kỹ thuật thiết kế nâng cao (10 giờ): Xây dựng và áp dụng trang mẫu Template trong Adobe Dreamweaver; thiết lập cấu trúc liên kết Navigation và Menu phân cấp; làm việc với các đối tượng nâng cao trong JavaScript.
  • Bài 7: Tạo giao diện chuyên nghiệp bằng jQuery (18 giờ): Cú pháp bộ chọn jQuery (Selectors); các phương thức thao tác nội dung và thuộc tính DOM; bắt và xử lý sự kiện tương tác người dùng; tạo chuỗi hiệu ứng và hoạt ảnh động trên trang web.
  • Bài 8: Publish website (4 giờ): Quy trình đăng ký dịch vụ lưu trữ web hosting miễn phí; các bước xuất bản mã nguồn website lên hosting từ xa; cấu hình và triển khai website trên máy chủ cục bộ Local IIS (Internet Information Services).

Kiến thức nền tảng được xây dựng

  • Lý thuyết nền tảng: Mô hình phân cấp cây đối tượng tài liệu HTML (DOM - Document Object Model); mô hình hộp CSS (CSS Box Model); nguyên tắc xếp chồng và độ ưu tiên trong quy tắc định kiểu Cascading.
  • Nguyên lý cốt lõi: Phân tách rành mạch ba lớp kiến trúc web: Lớp cấu trúc dữ liệu (HTML5) - Lớp trình bày mỹ thuật (CSS3) - Lớp logic hành vi tương tác (JavaScript/jQuery).
  • Khung công cụ tiêu chuẩn: Môi trường soạn thảo chuyên dụng Adobe Dreamweaver; chuẩn đồ họa vector W3C SVG; dịch vụ máy chủ web Microsoft Local IIS.

Kỹ năng phát triển

  • Kỹ năng kỹ thuật: Viết mã nguồn HTML5/CSS3 chuẩn cú pháp; xây dựng đồ họa vector phẳng bằng SVG; lập trình kịch bản JavaScript/jQuery; thiết lập tham số cho các bộ biến đổi 2D/3D Transform và Animation; cấu hình máy chủ Web Server.
  • Kỹ năng phân tích: Bóc tách bản vẽ thiết kế giao diện thành các khối thành phần ngữ nghĩa; tính toán kích thước hiển thị của khối giao diện dựa trên cơ chế box-sizing; tối ưu hóa việc phân bố cấu trúc thư mục website.
  • Kỹ năng thực hành: Hoàn thiện sản phẩm website tĩnh hoàn chỉnh từ khâu tiếp nhận yêu cầu, viết mã nguồn giao diện, tối ưu tương tác đến khâu xuất bản lên môi trường mạng máy tính.

Phương pháp giảng dạy và học tập (300-350 từ)

                       PHÂN BỔ THỜI LƯỢNG MÔ ĐUN MĐ18

Phương pháp tiếp cận sư phạm

Giáo trình áp dụng mô hình giảng dạy tích hợp giữa lý thuyết cô đọng và thực hành trực tiếp tại phòng máy vi tính. Trong tổng số 90 giờ, thời lượng thực hành và kiểm tra chiếm 68 giờ (tương đương 75.6%), tập trung vào việc hình thành kỹ năng nghề và năng lực xử lý lỗi cú pháp thực tế.

Hệ thống bài tập và thực hành

Các bài tập thực hành được tích hợp ngay sau mỗi bài học với độ phức tạp tăng dần:

  • Bài tập định hình cấu trúc (Bài 1, Bài 2): Xây dựng bố cục trang chủ (TrangChu.html), tạo lập hệ thống biểu mẫu thu thập thông tin với các kiểu dữ liệu color, date, email, range, tích hợp đối tượng đồ họa vector SVG và thẻ <video>, <audio>.
  • Bài tập định kiểu và hiệu ứng (Bài 3, Bài 4): Xây dựng CSS cho khối banner header, định dạng thanh điều hướng menu đa cấp, tạo hiệu ứng chuyển đổi trạng thái khi rê chuột (hover), thiết lập hình vuông chuyển màu và xoay theo thời gian bằng @keyframes.
  • Bài tập tương tác và xuất bản (Bài 5, Bài 6, Bài 7, Bài 8): Xây dựng bộ kiểm tra dữ liệu form bằng JavaScript, áp dụng Template trong Dreamweaver, tạo thư viện ảnh động với jQuery, thực hiện xuất bản dữ liệu lên máy chủ IIS và hosting miễn phí.

Phương pháp đánh giá

Hệ thống kiểm tra định kỳ được phân bổ trực tiếp tại các Bài 2, 3, 4, 5, 6, 7 (tổng cộng 10 giờ kiểm tra). Tiêu chuẩn đánh giá kết quả học tập căn cứ trên các tiêu chí:

  1. Tính chính xác của cấu trúc tài liệu HTML (đúng quy tắc cặp thẻ mở/đóng, phân cấp thẻ hợp lệ).
  2. Độ chuẩn xác của giao diện CSS so với bản mẫu thiết kế.
  3. Khả năng thực thi không lỗi của các kịch bản JavaScript/jQuery trên trình duyệt.
  4. Mức độ hoàn thiện khi vận hành website trên môi trường máy chủ.

Hướng dẫn tự học

Giáo trình trình bày chi tiết các đoạn mã nguồn mẫu kèm theo ảnh chụp kết quả hiển thị của từng thuộc tính (như minh họa kết quả rcorner, box-shadow, text-overflow). Người học tự thực hiện lại các ví dụ, so sánh sai lệch hiển thị và rèn luyện kỹ năng tự tìm lỗi trong mã nguồn.

Điểm nổi bật và cập nhật (250-300 từ)

                            BẢNG ĐỐI CHIẾU CÔNG NGHỆ
  • Cập nhật chuẩn công nghệ HTML5: Giáo trình thay thế hoàn toàn các phương thức nhúng đa phương tiện phụ thuộc vào Adobe Flash bằng các thẻ chuẩn hóa <video> và <audio>. Bổ sung chuẩn đồ họa Scalable Vector Graphics (SVG) theo khuyến nghị của W3C, cho phép hiển thị đồ họa sắc nét trên mọi độ phân giải mà không bị vỡ ảnh.
  • Tích hợp các thuộc tính giao diện CSS3: Cung cấp giải pháp định dạng hiện đại thay thế cho việc cắt ảnh thủ công: kỹ thuật bo góc border-radius, bóng đổ box-shadow, hệ màu RGBA/HSLA, các phép biến đổi hình học 2D/3D và hoạt ảnh Animations. Giải quyết triệt để vấn đề vỡ khung giao diện bằng thuộc tính box-sizing: border-box.
  • Định hướng ứng dụng thực tế: Toàn bộ tiến trình bài học được thiết kế gắn liền với môi trường sản xuất của doanh nghiệp: sử dụng Adobe Dreamweaver để quản trị site tập trung, ứng dụng jQuery nhằm rút ngắn thời gian xử lý DOM và triển khai trực tiếp sản phẩm lên hệ thống máy chủ mạng (Local IIS và Web Hosting).

Đối tượng sử dụng giáo trình (200-250 từ)

  • Sinh viên chuyên ngành: Sinh viên theo học hệ Cao đẳng nghề Công nghệ Thông tin. Giáo trình là tài liệu học tập chính thức cho mô đun Thiết kế web (MĐ18), cung cấp nền tảng để tiếp tục học các mô đun chuyên sâu về lập trình ứng dụng web phía máy chủ (Back-end).
  • Điều kiện tiên quyết (Prerequisites): Người học cần hoàn thành khối kiến thức tin học cơ sở và học phần Đồ họa ứng dụng để có kỹ năng xử lý tệp đồ họa, hiểu về bố cục và hệ màu trước khi bước vào viết mã giao diện.
  • Giảng viên chuyên ngành: Sử dụng làm căn cứ sư phạm để triển khai kế hoạch giảng dạy 90 giờ, biên soạn đề kiểm tra định kỳ và hướng dẫn thực hành trong phòng máy.
  • Người tự học và tham khảo: Phù hợp làm tài liệu tra cứu kỹ thuật cho người bắt đầu tìm hiểu về thiết kế web tĩnh, quy tắc viết mã HTML5/CSS3 và phương thức quản trị máy chủ web cục bộ.

Câu hỏi thường gặp (250-300 từ)

1. Giáo trình này phù hợp với ai?

Giáo trình được biên soạn phục vụ sinh viên trình độ Cao đẳng nghề Công nghệ Thông tin, giảng viên giảng dạy chuyên ngành CNTT và người học có nhu cầu nắm vững kỹ năng xây dựng giao diện website tĩnh.

2. Cần chuẩn bị kiến thức nền tảng nào trước khi học mô đun này?

Người học cần hoàn tất các môn học cơ sở ngành Công nghệ thông tin và học phần Đồ họa ứng dụng để nắm bắt các nguyên lý về xử lý ảnh, màu sắc và tư duy phân chia bố cục giao diện.

3. Giáo trình có điểm gì khác biệt so với các tài liệu thuần lý thuyết?

Tài liệu được xây dựng theo định hướng thực hành kỹ năng nghề, trong đó thời lượng thực hành và kiểm tra chiếm hơn 75% (68/90 giờ). Nội dung đi thẳng vào việc sử dụng công cụ thực tế (Adobe Dreamweaver, Local IIS) và tích hợp các bài kiểm tra đánh giá trực tiếp trên sản phẩm mã nguồn.

4. Phương pháp tự học giáo trình như thế nào để đạt hiệu quả cao nhất?

Người học cần cài đặt môi trường Adobe Dreamweaver, khởi tạo cấu trúc thư mục site chuẩn theo hướng dẫn tại Bài 1, gõ trực tiếp các đoạn mã ví dụ về HTML5, CSS3, JavaScript thay vì sao chép, và đối chiếu kết quả giao diện với các hình ảnh minh họa trong từng bài học.

5. Tài liệu hướng dẫn sử dụng những phần mềm và công cụ bổ trợ nào?

Tài liệu hướng dẫn trực tiếp trên phần mềm Adobe Dreamweaver, máy chủ dịch vụ mạng nội bộ Local IIS, các nhà cung cấp dịch vụ web hosting miễn phí, trình duyệt web tiêu chuẩn để kiểm thử giao diện và thư viện lập trình jQuery.

Kết luận (150 từ)

       LỘ TRÌNH PHÁT TRIỂN NĂNG LỰC TỪ GIÁO TRÌNH THIẾT KẾ WEB (MĐ18)

Giáo trình Mô đun Thiết kế web (Mã mô đun: MĐ18) của Trường Cao đẳng Kỹ thuật Công nghệ Bà Rịa – Vũng Tàu là tài liệu đào tạo nghề chuẩn hóa, cung cấp hệ thống kiến thức toàn diện về xây dựng và triển khai website tĩnh. Giá trị cốt lõi của tài liệu nằm ở cấu trúc bài giảng gắn liền với chuẩn kỹ năng nghề nghiệp, tích hợp đồng bộ giữa lý thuyết và thực hành.

Lộ trình học tập được thiết lập logic qua 8 bài học: bắt đầu từ thiết lập môi trường và cấu trúc dữ liệu cơ bản (Bài 1, 2), hoàn thiện thẩm mỹ và hiệu ứng chuyển động (Bài 3, 4), nâng cao khả năng xử lý tương tác giao diện (Bài 5, 6, 7) và kết thúc bằng quy trình đóng gói, xuất bản website lên máy chủ (Bài 8).

Để mở rộng kiến thức, người học có thể tham khảo thêm các tài liệu đặc tả kỹ thuật chính thức từ tổ chức World Wide Web Consortium (W3C), tài liệu hướng dẫn cấu hình máy chủ Web Server IIS từ Microsoft và thư viện hàm trực tuyến của jQuery.