Tổng quan về giáo trình

Giáo trình Mô đun Thiết kế Web thuộc hệ thống tài liệu đào tạo nghề Công nghệ Thông tin ở trình độ Trung cấp và Cao đẳng, do Phan Hữu Phước làm chủ biên, ban hành theo quyết định của Hiệu trưởng trường Cao đẳng nghề tỉnh Bà Rịa – Vũng Tàu. Trong khung chương trình đào tạo chuyên ngành, mô đun này có vị trí tiếp nối sau học phần Đồ họa ứng dụng. Học phần đóng vai trò cung cấp kiến thức nền tảng và kỹ năng tác nghiệp chuyên biệt về tầng máy khách (client-side) trong quy trình phát triển website, chuẩn bị năng lực cần thiết để người học tiếp tục học các mô đun xây dựng web động nâng cao như PHP và ASP.

Mục tiêu học tập của giáo trình được thiết kế nhằm trang bị cho người học khả năng xây dựng website tĩnh hoàn chỉnh. Học viên được trang bị hệ thống kiến thức từ cấu trúc ngôn ngữ đánh dấu siêu văn bản (HTML, HTML5), định dạng giao diện (CSS, CSS3), đến xử lý logic tương tác phía trình duyệt (JavaScript, DOM) và thư viện mở rộng jQuery. Chuẩn đầu ra yêu cầu người học làm chủ cấu trúc layout, tổ chức và điều khiển các phần tử tài liệu web, nhúng mã tương tác, đồng thời thực hiện đúng quy trình triển khai xuất bản (publish) website đảm bảo tính an toàn kỹ thuật.

Giáo trình có tổng thời lượng 120 giờ, được kết cấu thành 9 bài học lý thuyết kết hợp thực hành tích hợp và các đợt kiểm tra định kỳ. Cách tiếp cận của giáo trình đi từ việc sử dụng phần mềm hỗ trợ Adobe DreamWeaver để quản lý cấu trúc site, sau đó đi sâu vào bản chất mã nguồn thuần và nâng cấp dần lên các chuẩn công nghệ mới. Điểm đặc thù của tài liệu là phương pháp tích hợp lý thuyết gắn liền với các ví dụ cú pháp cụ thể và tiêu chí đánh giá thao tác thực tế.

Nội dung kiến thức cốt lõi

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

Cấu trúc giáo trình phân bổ thời lượng 120 giờ cho 9 bài học chính cùng 3 đợt kiểm tra thực hành:

  • Bài 1: Môi trường tạo trang web tĩnh DreamWeaver (5 giờ): Hướng dẫn vận hành ứng dụng Adobe DreamWeaver; quản lý các thanh công cụ (palette) qua menu Window; thiết lập cấu trúc site chuẩn gồm các thư mục images (chứa tập tin đồ họa như .gif), styles (chứa tập tin định dạng .css), scripts (chứa mã thực thi .js) và tập tin gốc index.html; chuyển đổi giữa ba vùng nhìn làm việc: Code, Design và Split.
  • Bài 2: Tạo trang web bằng HTML (15 giờ): Trình bày cấu trúc tài liệu cơ bản (<html>, <head>, <body>, <meta charset="utf-8" />, <title>); quy tắc đóng - mở thẻ và thiết lập thuộc tính trong dấu nháy kép; nhóm thẻ chức năng: cấu trúc bảng (<table>, <tr>, <td>, <th>), phân vùng và văn bản (<div>, <p>,
    , <hr />), liên kết và hình ảnh (<a>, <img>), danh sách (<ol>, <ul>, <li>), biểu mẫu nhập liệu (<form>, <input>, <select>, <option>).
  • Bài 3: Tạo trang web bằng HTML5 (13 giờ): Tiếp cận hệ thống thẻ ngữ nghĩa (<section>, <article>, <nav>, <menu>, <header>, <footer>); bổ sung các phần tử biểu mẫu mới (<datalist>, <keygen>, <output>) và các kiểu dữ liệu đầu vào mở rộng của thẻ input (color, date, time, email, month, week, number, range).
  • Bài 4: Hoàn chỉnh giao diện trang web với CSS (15 giờ): Phân loại các hình thức áp dụng định dạng (External thông qua thẻ <link>, Internal trong thẻ <style>, và Inline style); cú pháp bộ chọn định danh (ID Selector #) và bộ chọn lớp (Class Selector .); các thuộc tính định dạng cơ bản (font-family, color, border, padding, margin, background-color, background-image).
  • Bài 5: Tùy biến giao diện web với CSS3 (14 giờ): Kỹ thuật định dạng nâng cao gồm bo góc (border-radius), ảnh viền (border-image), đa nền (backgrounds với contain, cover), hệ màu nâng cao (RGBA, HSL, HSLA, opacity), đổ bóng (text-shadow, box-shadow), ngắt dòng văn bản (text-overflow, word-wrap, word-break), biến đổi không gian 2D/3D (transform: translate, rotate, scale, skew, matrix, rotateX/Y/Z), hiệu ứng chuyển tiếp (transitions), hoạt ảnh (animations), và thuộc tính kiểm soát kích thước hộp phần tử box-sizing.
  • Bài 6 & 7: Lập trình tương tác với JavaScript cơ bản và nâng cao (27 giờ): Phương thức nhúng mã trực tiếp hoặc thông qua tập tin .js; khai báo biến với từ khóa var; hệ thống kiểu dữ liệu (number, string, boolean, array, object); cấu trúc điều khiển (if, if...else, switch, for, while, break, continue); đối tượng toán học và thời gian (Date); thao tác trên mô hình đối tượng tài liệu HTML DOM (cập nhật nội dung, thuộc tính, xử lý sự kiện element) và JS Browser DOM.
  • Bài 8 & 9: Tạo giao diện với jQuery (20 giờ) và Publish website (5 giờ): Cú pháp bộ chọn jQuery theo phân cấp và thuộc tính; các phương thức duyệt, thêm, sửa, xóa phần tử DOM; quản lý sự kiện; hiệu ứng trực quan (fade-in, fade-out, tạo hoạt hình); quy trình đóng gói và xuất bản website tĩnh.
Tiến trình nội dung:
DreamWeaver (Bài 1) -> HTML/HTML5 (Bài 2-3) -> CSS/CSS3 (Bài 4-5) -> JavaScript/DOM (Bài 6-7) -> jQuery & Publish (Bài 8-9)

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

Giáo trình cung cấp các nguyên lý nền tảng của phát triển web phía máy khách:

  • Mô hình tài liệu siêu văn bản (HTML/HTML5 Structure): Thiết lập tư duy tổ chức mã nguồn có cấu trúc ngữ nghĩa phân cấp, chuẩn hóa bảng mã hiển thị UTF-8 và phân tách rõ ràng giữa phần khai báo header với nội dung hiển thị body.
  • Mô hình hộp và tầng định dạng (CSS Cascade & Box Model): Làm rõ cơ chế kế thừa, độ ưu tiên của các selector và nguyên lý tính toán kích thước phần tử qua công thức: $\text{Kích thước} = \text{Width/Height} + \text{Padding} + \text{Border}$, từ đó áp dụng thuộc tính box-sizing để chuẩn hóa layout.
  • Mô hình hướng sự kiện và cây đối tượng (DOM Architecture): Cung cấp nền tảng xử lý dữ liệu động, truy xuất và can thiệp trạng thái phần tử web thông qua sự kiện người dùng trên giao diện trình duyệt.

Kỹ năng phát triển

  • Kỹ năng kỹ thuật (Technical skills): Viết mã HTML/HTML5 hợp chuẩn; tổ chức cây thư mục lưu trữ website khoa học; viết kịch bản CSS/CSS3 tối ưu; lập trình JavaScript và sử dụng thư viện jQuery để thao tác DOM.
  • Kỹ năng phân tích (Analytical skills): Phân tích layout giao diện từ bản vẽ đồ họa để chuyển đổi thành cấu trúc khối thẻ ngữ nghĩa; phân tách thuộc tính hiển thị để xây dựng file CSS dùng chung; chẩn đoán các lỗi hiển thị do tràn nội dung (text-overflow) hoặc sai lệch kích thước vùng chứa.
  • Năng lực ứng dụng thực tế (Practical competencies): Xây dựng biểu mẫu thu thập dữ liệu đúng chuẩn kỹ thuật; tạo lập giao diện trang chủ website tin tức và cổng thông tin trường học; xử lý hiệu ứng hoạt họa và triển khai xuất bản website hoàn chỉnh.

Phương pháp giảng dạy và học tập

Tiếp cận sư phạm (Pedagogical approach)

Giáo trình được biên soạn phục vụ hình thức đào tạo tích hợp (kết hợp đồng thời giữa bài giảng lý thuyết và hướng dẫn thực hành thao tác). Quy trình giảng dạy đi từ việc minh họa công dụng của từng câu lệnh, thẻ cú pháp, sau đó cung cấp đoạn mã mẫu (code snippet) và đối chiếu trực tiếp với kết quả hiển thị trên trình duyệt hoặc phần mềm Adobe DreamWeaver.

Hệ thống bài tập và nghiên cứu tình huống

Nội dung thực hành được thiết kế gắn liền với các yêu cầu kỹ thuật cụ thể:

  • Bài tập biểu mẫu dữ liệu: Xây dựng trang web hiển thị danh sách học sinh - sinh viên (HSSV) và trang đăng ký thông tin HSSV sử dụng các thẻ table, form, input, select, option cùng các kiểu dữ liệu mới trong HTML5 như date, email, color, range.
  • Bài tập thiết kế giao diện: Thiết kế hoàn chỉnh trang chủ website trường học (http://brtvc...) và trang thông tin thư viện điện tử (http://thuvien.vn) đòi hỏi phối hợp toàn diện HTML5, bộ chọn CSS, bố cục đa nền, hiệu ứng bóng đổ và chuyển động CSS3.
Tiêu chuẩn đánh giá bài tập thực hành:
1. Đúng cấu trúc phân cấp tài liệu HTML/HTML5
2. Tuân thủ nguyên tắc đóng/mở thẻ (mở trước - đóng sau)
3. Các trường nhập liệu phải nằm trong thẻ <form>
4. Áp dụng chuẩn semantic HTML5 và các thuộc tính định dạng CSS/CSS3

Phương pháp kiểm tra, đánh giá

Giáo trình thiết lập 3 đợt đánh giá thực hành định kỳ (mỗi đợt 2 giờ, tổng cộng 6 giờ kiểm tra trên phòng máy):

  • Đợt 1 (sau bài 3): Đánh giá kỹ năng dựng khung tài liệu HTML và ứng dụng thẻ ngữ nghĩa HTML5.
  • Đợt 2 (sau bài 5): Đánh giá kỹ năng định dạng layout, tạo kiểu giao diện với CSS và CSS3.
  • Đợt 3 (sau bài 8): Đánh giá kỹ năng nhúng mã JavaScript, xử lý DOM và hiệu ứng jQuery.

Điểm nổi bật và cập nhật

Giáo trình tích hợp các tiêu chuẩn công nghệ web trong chương trình đào tạo nghề:

  • Cập nhật cấu trúc ngữ nghĩa HTML5: Thay thế việc lạm dụng thẻ phân vùng không định danh <div> bằng các thẻ mang ý nghĩa ngữ cảnh rõ ràng như <header>, <footer>, <nav>, <section>, <article>, giúp tối ưu hóa cấu trúc cây tài liệu và hỗ trợ trình duyệt nhận diện thành phần trang web chính xác.
  • Tích hợp hệ thống thuộc tính CSS3 hiện đại: Bổ sung các giải pháp tạo hình đồ họa không phụ thuộc vào ảnh cắt sẵn, bao gồm: hệ màu trong suốt RGBA/HSLA, đổ bóng khối box-shadow, biến đổi hình học 2D/3D (translate, rotate, scale, skew, matrix), và điều khiển chuyển động động lực học qua transition và animation.
  • Chuẩn hóa mô hình hộp với box-sizing: Giải quyết trực tiếp trở ngại của người thiết kế web khi xử lý xung đột kích thước giữa width/height với padding và border, bảo đảm giao diện hiển thị đồng nhất trên các môi trường hiển thị.
  • Mở rộng khả năng xử lý client-side bằng jQuery: Bổ sung bài học chuyên sâu về jQuery (chiếm thời lượng lớn nhất với 20 giờ), cung cấp các phương thức chọn phần tử tương tự CSS, tinh gọn cú pháp xử lý sự kiện và tích hợp hoạt ảnh phức tạp (fade-in, fade-out) so với JavaScript thuần.

Đối tượng sử dụng giáo trình

Giáo trình Mô đun Thiết kế Web được thiết kế cho các nhóm đối tượng cụ thể trong hệ thống giáo dục nghề nghiệp:

  • Sinh viên chuyên ngành: Người học trình độ Trung cấp và Cao đẳng nghề Công nghệ Thông tin. Tài liệu đóng vai trò là giáo trình chính thức cho môn học chuyên ngành thiết kế web tĩnh.
  • Điều kiện tiên quyết (Prerequisites): Người học cần hoàn thành mô đun Đồ họa ứng dụng, có kiến thức căn bản về xử lý hình ảnh, tư duy bố cục thị giác và kỹ năng sử dụng máy tính cơ bản trước khi bắt đầu học phần.
  • Giảng viên chuyên ngành: Dùng làm tài liệu tham khảo chuẩn để xây dựng giáo án tích hợp 120 giờ, tổ chức hướng dẫn bài tập phòng máy và biên soạn đề thi thực hành theo thang tiêu chí kỹ thuật đã ban hành.
  • Người tự học và tham khảo: Phù hợp cho lập trình viên mới bắt đầu muốn nắm bắt có hệ thống các công nghệ nền tảng phía client-side (HTML/CSS/JS) trước khi chuyển tiếp sang học các ngôn ngữ lập trình web động phía máy chủ (server-side).

Câu hỏi thường gặp

1. Giáo trình này phù hợp với đối tượng nào?

Tài liệu được biên soạn phục vụ trực tiếp cho học sinh, sinh viên học nghề Công nghệ Thông tin trình độ Trung cấp, Cao đẳng tại các cơ sở giáo dục nghề nghiệp, cũng như người học cần trang bị kiến thức cơ bản về thiết kế web tĩnh.

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

Người học cần hoàn thành mô đun Đồ họa ứng dụng để có kiến thức về xử lý đồ họa, chuẩn bị các tập tin hình ảnh (như định dạng .gif lưu trong thư mục images) phục vụ chèn vào trang web.

3. Giáo trình này có điểm gì khác biệt về mặt cấu trúc?

Tài liệu phân chia thời lượng theo phương thức tích hợp 120 giờ; kết hợp giữa công cụ trực quan (Adobe DreamWeaver) và viết mã nguồn thuần; nội dung bao phủ liền mạch từ HTML sang HTML5, CSS sang CSS3, và JavaScript sang jQuery kèm 3 bài kiểm tra thực hành định kỳ.

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

Người học cần thực hành tuần tự theo từng bài: bắt đầu từ việc khởi tạo cấu trúc site chuẩn (images, scripts, styles, index.html) trên DreamWeaver, viết mã tuân thủ quy tắc mở/đóng thẻ, hoàn thành các bài tập tạo form HSSV và dựng lại giao diện thực tế của website http://brtvc và http://thuvien.vn.

5. Giáo trình có những yêu cầu bắt buộc nào trong bài kiểm tra?

Các bài kiểm tra yêu cầu người học phải đảm bảo đúng cấu trúc tài liệu, tuân thủ nguyên tắc mở thẻ trước - đóng thẻ sau, toàn bộ điều khiển nhập liệu phải đặt trong thẻ <form>, đồng thời khai thác tối đa các thẻ mới của HTML5 và định dạng bằng CSS/CSS3.

Kết luận

Giáo trình Mô đun Thiết kế Web của trường Cao đẳng nghề tỉnh Bà Rịa – Vũng Tàu do Phan Hữu Phước chủ biên là tài liệu học thuật hoàn chỉnh về lập trình web máy khách (client-side). Giá trị cốt lõi của giáo trình thể hiện ở cấu trúc 120 giờ tích hợp chặt chẽ, dẫn dắt người học qua từng tầng công nghệ từ quản trị site trong DreamWeaver, chuẩn hóa cấu trúc với HTML/HTML5, tạo kiểu với CSS/CSS3, cho đến lập trình tương tác qua JavaScript/DOM và thư viện jQuery.

Lộ trình học tập trong giáo trình đóng vai trò là mắt xích trung gian quan trọng, kết nối kỹ năng xử lý đồ họa từ học phần Đồ họa ứng dụng để hoàn thiện năng lực xây dựng website tĩnh, từ đó tạo nền tảng vững chắc để người học tiếp tục làm chủ các mô đun phát triển ứng dụng web động nâng cao như PHP và ASP.