GIÁO TRÌNH MÔ ĐUN: THIẾT KẾ TRANG WEB (MÃ MÔ ĐUN: MĐ20)

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

Giáo trình mô đun Thiết kế trang web (Mã mô đun: MĐ20) là tài liệu đào tạo chuyên môn thuộc chương trình đào tạo nghề Quản trị mạng máy tính ở trình độ Cao đẳng, do Trường Cao đẳng Cộng đồng Đồng Tháp biên soạn và ban hành theo quyết định năm 2017. Trong cấu trúc khung chương trình, mô đun MĐ20 giữ vị trí học phần chuyên môn bắt buộc, được bố trí giảng dạy sau khi người học đã hoàn thành các môn học tiên quyết bao gồm Cơ sở dữ liệu và Hệ quản trị Cơ sở dữ liệu.

Về mục tiêu học tập (learning outcomes), giáo trình trang bị cho sinh viên năng lực định hướng phương pháp thiết kế website, xây dựng hoàn chỉnh giao diện web tĩnh, vận dụng hệ thống thẻ HTML/HTML5, cấu trúc CSS/CSS3 và ngôn ngữ lập trình JavaScript/JQuery. Đồng thời, sinh viên được hình thành kỹ năng tích hợp các ứng dụng đa phương tiện (Multimedia), thiết lập cấu hình dịch vụ máy chủ web cục bộ IIS (Internet Information Services), xuất bản website lên không gian lưu trữ mạng và nắm vững nguyên lý kết hợp ngôn ngữ ASP.NET cùng ADO.NET với hệ quản trị cơ sở dữ liệu để vận hành các trang web động.

Giáo trình có tổng thời lượng đào tạo là 90 giờ, được phân bổ thành: 30 giờ lý thuyết, 56 giờ thực hành/thí nghiệm/thảo luận/bài tập và 4 giờ kiểm tra đánh giá. Cấu trúc nội dung tiếp cận từ các khối kiến thức nền tảng về môi trường phát triển trực quan (Adobe Dreamweaver) và mã nguồn tĩnh, tiến dần đến lập trình kịch bản tương tác phía máy khách (Client-side scripting), sau đó hoàn thiện ở khâu triển khai máy chủ và phát triển ứng dụng web động.

Điểm đặc trưng của giáo trình là sự kết hợp chặt chẽ giữa việc sử dụng công cụ soạn thảo trực quan chuyên dụng và kỹ thuật viết mã thủ công theo chuẩn khuyến nghị của Tổ chức Web Toàn cầu (W3C), đảm bảo tỷ trọng thực hành chiếm hơn 62% tổng khối lượng thời gian học tập.

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

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

Giáo trình MĐ20 được cấu trúc thành 8 bài học chuyên đề tương ứng với 3 khối nội dung tổng quát: Tổng quan về www – ngôn ngữ HTML (5 giờ), Thiết kế web tĩnh (25 giờ), và Thiết kế web động (60 giờ).

  • Bài 1: Môi trường tạo trang web tĩnh Dreamweaver, thẻ HTML (Mã: MĐ 20.1): Hướng dẫn cấu hình môi trường Adobe Dreamweaver, quản lý bảng điều khiển (palette), khởi tạo và quản lý cấu trúc thư mục Site chuẩn (gồm các thư mục chức năng images, scripts, styles và tệp tin gốc index.html). Giới thiệu các định dạng tệp tin .html, .gif, .css, .js. Hướng dẫn 3 chế độ hiển thị vùng làm việc: Code, Design, Split. Thiết lập các thẻ HTML cơ bản gồm cấu trúc tài liệu, thẻ siêu dữ liệu <meta>, <link>, <style>, <script>, thẻ tổ chức dữ liệu dạng bảng <table>, <tr>, <td>, <th>, thẻ phân chia khối và văn bản <div>, <p>,
    , <hr />, thẻ liên kết và hình ảnh <a>, <img>, danh sách <ol>, <ul>, <li>, cùng cấu trúc biểu mẫu <form>, <input>, <select>, <option>.
  • Bài 2: Tạo trang web bằng HTML5 (Mã: MĐ 20.2): Giới thiệu chuẩn cấu trúc ngữ nghĩa mới giúp tinh giản mã nguồn thông qua các phần tử <section>, <article>, <nav>, <menu>, <header>, <footer. Cập nhật các kiểu dữ liệu đầu vào mới cho form gồm color, date, time, email, month, week, number, range, cùng các phần tử <datalist>, <keygen>, <output>. Trình bày kỹ thuật đồ họa vector SVG (Scalable Vector Graphics) thông qua các phần tử <svg>, <circle>, <ellipse>. Hướng dẫn nhúng đa phương tiện âm thanh và hình ảnh trực tiếp không phụ thuộc Flash qua thẻ <audio> và <video> hỗ trợ các định dạng .mp3, .ogg, .wav.
  • Bài 3: Hoàn chỉnh giao diện trang web với CSS (Mã: MĐ 20.3): Phân loại các hình thức nhúng định dạng CSS (External, Internal, Inline). Hướng dẫn cú pháp định danh ID Selector (#) và Class Selector (.). Thiết lập các thuộc tính định dạng cốt lõi: font-family, color, border, padding, margin, background-color, background-image. Hướng dẫn kỹ thuật căn giữa bố cục trang web trên các tỷ lệ màn hình LCD mở rộng và bo tròn khung viền nội dung (border-radius) với quy tắc từ 1 đến 4 giá trị tham số.
  • Bài 4: Tùy biến giao diện web với CSS3 (Mã: MĐ 20.4): Chuyên sâu về các đặc tả CSS3 gồm tạo đường viền bằng hình ảnh (Border Images), quản lý đa ảnh nền (Multiple Backgrounds), thiết lập kích thước nền bằng contain và cover. Ứng dụng các hệ màu mở rộng RGBA, HSL, HSLA và độ trong suốt opacity. Thiết lập hiệu ứng đổ bóng cho chữ (text-shadow) và khối (box-shadow). Xử lý hiển thị văn bản với text-overflow, word-wrap, word-break. Thực thi phép biến đổi hình học 2D Transforms (translate, rotate, scale, skew, matrix) và 3D Transforms (rotateX, rotateY, rotateZ). Tạo chuyển động mượt với transition, animation và kiểm soát mô hình hộp kích thước bằng thuộc tính box-sizing.
  • Bài 5: Xử lý tương tác với JavaScript (Mã: MĐ 20.5): Khái quát về ngôn ngữ kịch bản JavaScript thực thi trên trình duyệt. Các phương thức nhúng mã script nội tuyến hoặc liên kết tệp tin ngoại vi .js. Quy tắc khai báo biến var, đặc điểm kiểu dữ liệu động, các kiểu dữ liệu cơ bản (number, string, boolean, array, object), toán tử kiểm tra kiểu typeof, trạng thái undefined và null. Vận dụng các nhóm toán tử số học, toán tử gán, toán tử nối chuỗi, toán tử so sánh, cấu trúc điều khiển, mảng và hàm xử lý sự kiện.
  • Bài 6: Một số kỹ thuật thiết kế nâng cao: Hướng dẫn xây dựng và tái sử dụng trang mẫu (Template) trong môi trường Adobe Dreamweaver nhằm nhất quán giao diện và tối ưu hóa thời gian phát triển; lập trình hướng đối tượng nâng cao trong JavaScript.
  • Bài 7: Tạo giao diện chuyên nghiệp bằng JQuery: Khái quát thư viện JQuery; phương thức truy xuất và thay đổi nội dung, thuộc tính của các phần tử DOM; kỹ thuật xử lý sự kiện người dùng và khởi tạo các hiệu ứng, hoạt ảnh tương tác nâng cao trên giao diện.
  • Bài 8: Publish Website: Hướng dẫn quy trình đăng ký tài khoản lưu trữ trực tuyến (Free Web Hosting); quy trình tải và cấu hình website lên máy chủ hosting; thiết lập, biên dịch và chạy thử nghiệm website trên máy chủ dịch vụ Internet Information Services (IIS) cục bộ.
  • Khối kiến thức thiết kế web động (Nội dung tổng quát 3): Khái quát về công nghệ ASP.NET, cấu trúc thư viện ADO.NET, phương thức tương tác các đối tượng trong ASP và ADO.NET để kết nối và truy xuất cơ sở dữ liệu.

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

Giáo trình thiết lập hệ thống lý thuyết nền tảng vững chắc qua ba trục kiến thức:

  1. Lý thuyết cấu trúc tài liệu siêu văn bản: Nguyên lý phân cấp DOM (Document Object Model), quy tắc đóng/mở thẻ lồng nhau, hệ thống phân loại thẻ ngữ nghĩa của chuẩn W3C, cơ chế mã hóa vector 2D thông qua toán học tọa độ trục X/Y của SVG.
  2. Nguyên lý mô hình hộp (Box Model) và không gian hiển thị: Cơ chế phân định vùng nội dung, khoảng đệm (padding), đường viền (border), lề ngoài (margin). Bản chất thuộc tính box-sizing trong việc cố định kích thước hiển thị phần tử (width = border + padding + content width), các hệ màu kỹ thuật số (RGB, RGBA, HSL, HSLA).
  3. Hệ thống thực thi kịch bản Client-side: Cơ chế thông dịch dòng lệnh trên trình duyệt của JavaScript, nguyên lý kiểu dữ liệu động (loosely typed), xử lý logic điều kiện, vòng lặp, mảng chỉ số bắt đầu từ 0 và phương thức xử lý sự kiện bất đồng bộ thông qua JQuery.

Kỹ năng phát triển

Thông qua hệ thống bài học và bài tập, sinh viên được rèn luyện các nhóm kỹ năng cụ thể:

  • Kỹ năng kỹ thuật (Technical skills): Viết mã HTML/HTML5 chuẩn W3C; định dạng bố cục giao diện web tương thích đa màn hình bằng CSS/CSS3; nhúng tệp tin đa phương tiện không dùng plugin phụ trợ; lập trình tương tác người dùng bằng JavaScript và JQuery; cấu hình dịch vụ web server IIS trên hệ điều hành Windows.
  • Kỹ năng phân tích (Analytical skills): Đọc hiểu và phân tích cấu trúc layout giao diện mẫu; phân đoạn bố cục thành các khối chức năng (header, nav, section, article, footer); tính toán kích thước viền và lề trong CSS3 để tránh vỡ giao diện; debug lỗi logic trong mã nguồn JavaScript.
  • Kỹ năng thực hành nghề nghiệp (Practical competencies): Quản trị thư mục site theo tiêu chuẩn kỹ thuật; vận hành thành thạo phần mềm Adobe Dreamweaver ở các chế độ Code/Design/Split; xuất bản và cấu hình website hoàn chỉnh lên môi trường lưu trữ thực tế.

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

Giáo trình áp dụng mô hình tiếp cận sư phạm tích hợp lý thuyết với thực nghiệm kỹ thuật, trong đó thời lượng thực hành chiếm ưu thế tuyệt đối (56 giờ thực hành trên tổng số 90 giờ của toàn mô đun).

Phương pháp triển khai theo tiến trình 4 bước:

  1. Thuyết giảng chuyên đề: Giảng viên giới thiệu cú pháp, thuộc tính, các tham số kỹ thuật và hiển thị trực quan qua trình duyệt.
  2. Thao tác mẫu (Demonstration): Giảng viên thực hiện mẫu trên công cụ Adobe Dreamweaver, minh họa việc quản lý palette, khởi tạo site, cấu hình thẻ và viết mã định dạng.
  3. Luyện tập ứng dụng (Practical exercises & Case studies): Sinh viên trực tiếp thực hiện các bài tập xây dựng layout trang chủ (TrangChu.html), thiết kế biểu mẫu đăng ký thành viên với các trường nhập liệu chuyên biệt (date, color, email, range), viết bộ mã CSS hoàn chỉnh cho thanh điều hướng (#gNav), tạo hiệu ứng chuyển đổi trạng thái khi rê chuột (:hover), vẽ biểu đồ tọa độ bằng SVG.
  4. Đánh giá và phản hồi (Assessment methods): 4 giờ kiểm tra định kỳ được phân bổ để đánh giá năng lực tổng hợp của sinh viên. Tiêu chí kiểm tra bám sát yêu cầu kỹ thuật:
    • Mã nguồn tuân thủ đúng cấu trúc tài liệu HTML/HTML5.
    • Tuân thủ quy tắc đóng mở phần tử: phần tử nào mở trước thì đóng sau.
    • Biểu mẫu nhập liệu phải được bao gói chính xác trong phần tử <form>.
    • Giao diện hiển thị đúng layout yêu cầu và chạy ổn định trên trình duyệt.

Về hướng dẫn tự học (Self-study guidelines), sinh viên cần tổ chức không gian lưu trữ cá nhân theo đúng cấu trúc cây thư mục chuẩn (images, scripts, styles), chủ động viết lại các khối mã CSS3 (transition, transform, box-sizing) để nắm vững cơ chế hiển thị, kiểm tra tương thích trình duyệt và tự thiết lập môi trường máy chủ cục bộ IIS để rèn luyện kỹ năng triển khai tệp tin.

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

Nội dung giáo trình phản ánh sự chuyển giao công nghệ quan trọng trong lĩnh vực phát triển giao diện web tại thời điểm biên soạn năm 2017:

  • Tích hợp toàn diện tiêu chuẩn HTML5: Thay thế phương pháp bố cục truyền thống dựa hoàn toàn vào thẻ <div> vô nghĩa bằng hệ thống thẻ ngữ nghĩa rõ ràng (<header>, <nav>, <section>, <article>, <footer). Bổ sung các điều khiển form mới (datalist, keygen, output) và các kiểu input chuyên dụng (color, date, month, week, range), giúp giảm tải việc phải sử dụng JavaScript để xác thực dữ liệu cơ bản.
  • Loại bỏ phụ thuộc plugin Flash: Ứng dụng trực tiếp các phần tử chuẩn hóa <video> và <audio> hỗ trợ đa nguồn tệp tin (<source>), cho phép trình duyệt phát trực tiếp các tệp tin đa phương tiện .mp3, .ogg, .wav thông qua thuộc tính điều khiển controls.
  • Ứng dụng đồ họa vector SVG của W3C: Cung cấp giải pháp nhúng trực tiếp đồ họa hai chiều vào tài liệu HTML qua thẻ <svg>. Hình ảnh SVG giữ nguyên chất lượng hiển thị sắc nét ở mọi độ phân giải màn hình, hỗ trợ nén, lập chỉ mục tìm kiếm và có thể can thiệp xử lý hoạt ảnh qua JavaScript.
  • Khai thác các tính năng mở rộng của CSS3: Đưa vào các kỹ thuật thiết kế hiện đại như bo tròn đa góc (border-radius), khung viền bằng ảnh (border-image), phủ nhiều lớp hình nền (multiple backgrounds), thiết lập kích thước nền linh hoạt (contain, cover). Mở rộng không gian màu với kênh trong suốt RGBA và HSLA. Xử lý hoạt ảnh phức tạp bằng transition và animation mà không cần đến mã lập trình phức tạp.
  • Giải quyết triệt để lỗi vỡ khung hình với Box-sizing: Cung cấp giải pháp xử lý tính toán kích thước phần tử trang web, loại bỏ xung đột cộng dồn kích thước giữa width/height với padding và border.
  • Triển khai thực tế trên hạ tầng máy chủ: Giáo trình không dừng lại ở môi trường máy khách cục bộ mà hướng dẫn chi tiết quy trình đưa ứng dụng lên hệ thống lưu trữ đám mây miễn phí và cấu hình dịch vụ web chuyên nghiệp Microsoft IIS.

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

Giáo trình mô đun Thiết kế trang web (MĐ20) được thiết kế chuyên biệt phục vụ các nhóm đối tượng và mục đích học thuật xác định:

  1. Sinh viên chuyên ngành: Là tài liệu học tập chính khóa bắt buộc dành cho sinh viên năm thứ hai hoặc năm thứ ba trình độ Cao đẳng nghề Quản trị mạng máy tính tại Trường Cao đẳng Cộng đồng Đồng Tháp và các cơ sở giáo dục nghề nghiệp có khung chương trình tương đương.
  2. Yêu cầu đ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 về tin học cơ sở, môn học Cơ sở dữ liệu và Hệ quản trị Cơ sở dữ liệu nhằm đảm bảo khả năng tiếp thu phần kiến thức tích hợp ứng dụng web động với ASP.NET và ADO.NET ở giai đoạn sau của mô đun.
  3. Giảng viên chuyên ngành: Sử dụng giáo trình như khung chuẩn để biên soạn đề cương bài giảng, thiết kế hệ thống bài tập thực hành phòng máy, xây dựng ngân hàng đề kiểm tra 4 giờ và định hướng chuẩn đầu ra kỹ năng nghề.
  4. Người học tự nghiên cứu và tham khảo: Dành cho kỹ thuật viên quản trị mạng, lập trình viên mới bắt đầu cần một tài liệu kỹ thuật có tính hệ thống để nắm bắt quy trình xây dựng website từ khâu giao diện tĩnh (HTML5/CSS3), viết kịch bản tương tác (JavaScript/JQuery) cho đến công đoạn cấu hình dịch vụ máy chủ web IIS.

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

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

Giáo trình được biên soạn chuẩn hóa cho sinh viên hệ Cao đẳng ngành Quản trị mạng máy tính. Nội dung phù hợp cho người học bắt đầu tiếp cận lĩnh vực thiết kế và phát triển website, từ nền tảng xây dựng trang web tĩnh đến các kỹ thuật triển khai máy chủ web cơ bản.

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

Theo khung chương trình đào tạo, người học bắt buộc phải hoàn thành hai môn học tiên quyết là Cơ sở dữ liệu và Hệ quản trị Cơ sở dữ liệu, đồng thời có kỹ năng sử dụng máy tính và quản lý hệ thống tệp tin trên hệ điều hành Windows.

3. Điểm khác biệt của giáo trình này so với các tài liệu lập trình web thông thường là gì?

Giáo trình tích hợp phương pháp thiết kế trực quan trên phần mềm Adobe Dreamweaver song song với việc viết mã nguồn thuần chuẩn W3C (HTML5/CSS3). Ngoài việc rèn luyện kỹ năng lập trình giao diện, giáo trình còn chú trọng kỹ năng quản trị thực tế thông qua việc hướng dẫn cấu hình dịch vụ máy chủ web nội bộ IIS và xuất bản website lên hosting.

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

Người học nên cài đặt phần mềm Adobe Dreamweaver, thiết lập cấu trúc thư mục Site chuẩn mực ngay từ Bài 1. Trong quá trình học, cần thực hành song song trên cả hai chế độ Code và Design, tự giải quyết các bài tập thiết kế giao diện mẫu ở cuối mỗi bài học và kiểm tra kết quả hiển thị trên các trình duyệt web khác nhau.

5. Giáo trình có cung cấp các bài tập và ví dụ thực hành cụ thể không?

Có. Giáo trình tích hợp hệ thống ví dụ mã nguồn chi tiết cho từng thuộc tính kỹ thuật và cung cấp bài tập thực hành sau mỗi bài học (như thiết kế layout TrangChu, tạo biểu mẫu form đăng ký thành viên, viết CSS cho menu đa cấp, tạo hiệu ứng chuyển động và xuất bản trang web).

Kết luận

Giáo trình mô đun Thiết kế trang web (MĐ20) của Trường Cao đẳng Cộng đồng Đồng Tháp là một tài liệu học thuật có cấu trúc hoàn chỉnh, chuẩn hóa về mặt phương pháp sư phạm kỹ thuật. Giá trị cốt lõi của giáo trình thể hiện ở việc kết nối liền mạch giữa kiến thức cấu trúc siêu văn bản, kỹ thuật định dạng giao diện hiện đại và quy trình vận hành dịch vụ máy chủ mạng.

Lộ trình học tập được thiết kế khoa học theo 4 chặng: $$\text{Cấu trúc HTML/HTML5} \longrightarrow \text{Định dạng CSS/CSS3} \longrightarrow \text{Tương tác JavaScript/JQuery} \longrightarrow \text{Triển khai Hosting/IIS/ASP.NET}$$

Tài liệu là căn cứ chuyên môn phục vụ giảng dạy chính khóa và là nguồn tham khảo kỹ thuật chuẩn xác cho sinh viên khối ngành kỹ thuật công nghệ thông tin.