THÔNG TIN THƯ MỤC VÀ TỔNG QUAN HỌC THUẬT GIÁO TRÌNH THIẾT KẾ WEBSITE (MĐ 19)

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

Giáo trình mô đun Thiết kế Website (Mã mô đun: MĐ 19) được biên soạn bởi tác giả Vương Thị Minh Nguyệt, do Hiệu trưởng Trường Cao đẳng Nghề An Giang ban hành năm 2021 theo quyết định chuyên môn của nhà trường. Tài liệu được thiết kế làm giáo trình chính khóa cho học sinh, sinh viên trình độ Trung cấp thuộc nghề Thiết kế đồ họa và nghề Lập trình máy tính, đồng thời có thể áp dụng cho các khóa đào tạo ngắn hạn và bồi dưỡng công nhân kỹ thuật.

Trong chương trình đào tạo, mô đun MĐ 19 thuộc nhóm môn học chuyên ngành bắt buộc, được bố trí giảng dạy sau khi người học đã hoàn thành hai môn học tiên quyết: Tin học văn phòng và Xử lý ảnh với Photoshop. Thời lượng thực hiện mô đun gồm 120 giờ, được phân bổ cụ thể: 40 giờ lý thuyết, 77 giờ thực hành/thảo luận/bài tập và 3 giờ kiểm tra định kỳ.

Mục tiêu học tập của giáo trình tập trung vào ba chuẩn đầu ra chính:

  • Kiến thức: Trình bày được kiến thức nền tảng về mạng Internet, dịch vụ World Wide Web, giao thức TCP/IP; hiểu rõ chức năng của hệ thống thẻ HTML, vai trò của dịch vụ Internet Information Services (IIS) và nguyên tắc hoạt động của trang ASP.
  • Kỹ năng: Sử dụng thành thạo các thẻ HTML để xây dựng cấu trúc trang; thiết lập bố cục và liên kết trên phần mềm Macromedia Dreamweaver CS5; áp dụng CSS/CSS3 để định dạng kiểu dáng; cài đặt và cấu hình IIS trên môi trường localhost; lập trình các tương tác cơ bản bằng JavaScript.
  • Năng lực tự chủ và trách nhiệm: Phát triển kỹ năng làm việc nhóm, chia sẻ tài nguyên và trách nhiệm trong các dự án xây dựng sản phẩm web.

Cấu trúc giáo trình tiếp cận theo phương pháp kết hợp giữa lý thuyết cú pháp và thực hành trực quan, lấy thời lượng thực hành trên phòng máy (chiếm 64,1% tổng thời gian) làm trọng tâm hình thành kỹ năng nghề nghiệp.

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

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

Giáo trình gồm 4 bài chuyên đề chính và 1 nội dung ôn tập tổng hợp:

  1. Bài 1: Tổng quan về thiết kế website và Ngôn ngữ HTML (20 giờ: 8 LT, 12 TH): Cung cấp kiến thức cơ sở về Internet, mô hình Client - Server, định danh IP, cấu trúc tài liệu HTML (<HEAD>, <BODY>), các thẻ định dạng khối và nội dung văn bản (<Hn>, <P>,
    , <HR>, <FONT>, <B>, <I>, <U>, <STRIKE>, <PRE>, <DIV>, <SPAN>), chèn hình ảnh (<IMG>), âm thanh (<BgSound>), văn bản động (<Marquee>), và các ký tự đặc biệt (&gt;, &lt;, &quot;, &amp;, &nbsp;).
  2. Bài 2: Macromedia Dreamweaver (36 giờ: 12 LT, 23 TH, 1 KT): Hướng dẫn môi trường làm việc Dreamweaver CS5 (Insert Bar, Document Toolbar, Properties Inspector, Panel groups, Status bar với Tag Selector); quy trình quản trị site (Site Definition, Local Root Folder, Default Images folder); tạo và định dạng bảng biểu (<TABLE>, <TR>, <TD>, <TH>, colspan, rowspan); thiết lập siêu liên kết (<A HREF>, Bookmark, Mailto); tạo biểu mẫu (<FORM>, <INPUT>, <SELECT>, <TEXTAREA>, <FIELDSET>, <LEGEND>, thuộc tính tabindex, accesskey); và phân khung tài liệu (<FRAMESET>, <FRAME>, <IFRAME>).
  3. Bài 3: CSS - Cascading Style Sheet (36 giờ: 12 LT, 23 TH, 1 KT): Trình bày khái niệm, ưu - nhược điểm của CSS; 3 phương pháp nhúng kiểu dáng (Inline style, Internal style, External style liên kết qua <LINK>); cú pháp bộ chọn Class (.ClassName), ID (#IDName), tag tùy ý kết hợp DIV/SPAN; và các thuộc tính định dạng font, màu sắc, canh lề văn bản, danh sách (list-style), màu nền và trạng thái liên kết (a:link, a:visited, a:hover, a:active).
  4. Bài 4: JavaScript (24 giờ: 8 LT, 15 TH, 1 KT): Giới thiệu cách nhúng ngôn ngữ JavaScript vào HTML/CSS; nguyên tắc hoạt động của trang ASP; kỹ thuật khai báo biến, cấu trúc điều khiển, xây dựng hàm và thao tác với các đối tượng tích hợp sẵn.
  5. Ôn tập (4 giờ): Củng cố toàn bộ kỹ năng thiết kế, đóng gói và kiểm thử trang web hoàn chỉnh.

Progression logic (Tiến trình nội dung): Đi từ hiểu biết hạ tầng mạng và đánh dấu văn bản thô (HTML) $\rightarrow$ sử dụng môi trường thiết kế tích hợp và cấu hình máy chủ cục bộ (Dreamweaver, IIS) $\rightarrow$ kiểm soát giao diện và tách biệt mã trình bày (CSS) $\rightarrow$ bổ sung hành vi tương tác và logic lập trình (JavaScript/ASP).

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

  • Hệ thống mạng và chuẩn Web: Giao thức TCP/IP, mạng Intranet/Internet; mô hình máy khách - máy chủ (Client - Server); địa chỉ IP (dãy 4 số thập phân 0–255 phân cách bởi dấu chấm do ủy ban quốc tế phân bổ); cổng chuyển tiếp Gateway; nhà cung cấp dịch vụ ISP; máy chủ Web Server; dịch vụ World Wide Web (chuẩn W3C năm 1994 do Tim Berners-Lee sáng lập); cấu trúc địa chỉ URL tuyệt đối và tương đối.
  • Quy tắc ngôn ngữ đánh dấu: Chuẩn SGML/HTML; cấu trúc cú pháp <tagName ListProperties> Object </tagName>; nguyên tắc lồng thẻ; phân định phần tử cấp khối (Block-level elements: <P>, <H1>, <TABLE>, <DIV>) và phần tử cấp hàng (Inline-level elements: <B>, <FONT>, <SPAN>).
  • Xử lý dữ liệu biểu mẫu: Phương thức truyền dữ liệu GET (đính kèm tham số vào URL) và POST (gửi dữ liệu dưới dạng khối dữ liệu độc lập); cơ chế gán nhãn <LABEL> kết nối qua thuộc tính id.
  • Mô hình định dạng kiểu phân cấp: Cơ chế nạp kiểu dáng từ tệp rời .css; bảng mã màu chuẩn 16 màu định danh và hệ màu thập lục phân #RRGGBB.

Kỹ năng phát triển

Nhóm kỹ năng Chi tiết năng lực hình thành trong giáo trình
Kỹ thuật (Technical skills) - Viết mã HTML chuẩn W3C trên trình soạn thảo Notepad hoặc Code view.
- Xây dựng bảng biểu nhiều cấp, hợp nhất ô dữ liệu (colspan, rowspan).
- Thiết lập biểu mẫu thu thập dữ liệu với đầy đủ các trường nhập liệu (text, password, radio, checkbox, submit, reset, select/option, optgroup, textarea).
- Viết tệp CSS độc lập và liên kết với tài liệu web.
- Cài đặt, cấu hình dịch vụ máy chủ IIS để chạy thử nghiệm website trên localhost.
Phân tích (Analytical skills) - Phân tích cấu trúc tổ chức website theo 3 dạng: tuyến tính, phân cấp, hình chóp.
- Phác thảo sơ đồ liên kết giữa các trang đơn trước khi thi công.
- Phân định các khối giao diện trang bằng thẻ <DIV> và <SPAN>.
Thực hành (Practical competencies) - Sử dụng thành thạo thanh công cụ Macromedia Dreamweaver CS5: Insert Bar, Properties Inspector, Panel groups, Tag Selector.
- Quản lý cây thư mục tệp tin (Local Root Folder, thư mục hình ảnh mặc định).
- Kiểm tra mã nguồn (View Source Code) và khả năng tương thích trên các trình duyệt.

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

Giáo trình áp dụng mô hình sư phạm tích hợp lý thuyết với hướng dẫn kỹ thuật cụ thể. Mỗi đơn vị bài học đều được cấu trúc gồm mục tiêu nhận thức, giải thích cú pháp, đoạn mã ví dụ minh họa và bài tập thực hành ứng dụng.

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

  • Soạn thảo mã nguồn trên Notepad: Tạo tệp Welcome.html, lưu chuẩn mã hóa UTF-8, mở xem mã nguồn trên trình duyệt và chỉnh sửa thành Wellcom2.HTML.
  • Định dạng văn bản phi cấu trúc: Ứng dụng thẻ <PRE> giữ nguyên khoảng cách và xuống dòng, sử dụng kết hợp các thẻ định dạng <B><I><U> trên đoạn văn bản mẫu.
  • Xây dựng layout bằng Table: Thiết kế giao diện trang "Computer Model" kết hợp bảng lồng nhau, kiểm soát đường viền (border, bordercolor), căn lề và tỷ lệ chiều rộng (width).
  • Thiết kế form thu thập dữ liệu: Xây dựng mẫu đơn xin việc "Job application" hoàn chỉnh, sử dụng <FIELDSET> và <LEGEND> để phân nhóm vị trí ứng tuyển, giới tính, trình độ học vấn, ngôn ngữ và thông tin cá nhân; cấu hình điều hướng bằng phím Tab (tabindex="1", tabindex="2"...).
  • Định dạng trạng thái liên kết với CSS: Thiết lập màu sắc và kiểu chữ riêng biệt cho các pseudo-classes: liên kết chưa xem (a:link), đã xem (a:visited), rê chuột (a:hover), và đang chọn (a:active).
  • Tạo khung nhìn lồng nhau: Ứng dụng thẻ <IFRAME> để nhúng tài liệu Bester.htm vào trang chính có chứa logo và thông tin giới thiệu.

Phương pháp đánh giá và tự học

  • Đánh giá học phần: Thực hiện thông qua 3 bài kiểm tra định kỳ (thời lượng 1 giờ/bài được bố trí cuối Bài 2, Bài 3, Bài 4) và 4 giờ ôn tập tổng hợp cuối mô đun nhằm đánh giá sản phẩm website tĩnh hoàn chỉnh.
  • Nguyên tắc tự học: Người học thực hành viết mã trực tiếp, sử dụng chức năng View Source Code trên trình duyệt để kiểm tra cấu trúc, tự phát hiện lỗi sai cú pháp thẻ mở/đóng, và kiểm tra tính toàn vẹn của đường dẫn tương đối.

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

Tài liệu thể hiện các đặc điểm kỹ thuật và quy chuẩn phát triển web bao gồm:

  • Môi trường phát triển: Giáo trình tích hợp công cụ Macromedia Dreamweaver CS5, cho phép thao tác đồng thời trên 3 chế độ xem: Design view (giao diện trực quan), Code view (mã nguồn) và Code & Design view (chia đôi màn hình). Công cụ hỗ trợ quản lý thuộc tính đối tượng qua Properties Inspector và kiểm soát cấu trúc phân cấp thẻ qua Tag Selector.
  • Chuẩn hóa kỹ thuật phân tách kiểu dáng: Giáo trình chuyển giao phương pháp thiết kế web từ việc lạm dụng thuộc tính định dạng trực tiếp trong HTML sang việc sử dụng bảng kiểu CSS (Inline, Internal, External). Cung cấp kỹ thuật quản lý danh sách font chữ dự phòng (Edit Font List) nhằm đảm bảo văn bản hiển thị an toàn trên các hệ thống máy tính khác nhau.
  • Quy trình triển khai website: Chuẩn hóa quy trình 3 giai đoạn:
    1. Giai đoạn chuẩn bị: Xác định mục tiêu, chuẩn bị nội dung, phác thảo khuôn mẫu (Template), vẽ sơ đồ liên kết trên giấy theo cấu trúc tuyến tính/phân cấp/hình chóp.
    2. Giai đoạn tổ chức tệp tin: Khai báo Site Definition, thiết lập thư mục gốc (Local Root Folder) và thư mục hình ảnh (Default Images folder).
    3. Giai đoạn kiểm thử: Thiết lập dịch vụ IIS (Internet Information Services) để kết nối và chạy trang web trên máy chủ cục bộ (localhost) trước khi xuất bản.

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

  • Sinh viên và người học nghề: Học sinh, sinh viên theo học trình độ Trung cấp nghề Thiết kế đồ họa và nghề Lập trình máy tính. Giáo trình cũng phục vụ cho các học viên tham gia khóa đào tạo nghề ngắn hạn hoặc công nhân kỹ thuật cần nâng cao kỹ năng thiết kế giao diện web.
  • Điều kiện tiên quyết: Người học bắt buộc phải hoàn thành các môn học:
    1. Tin học văn phòng: Đảm bảo kỹ năng quản lý tệp tin, thư mục và thao tác nhập liệu văn bản.
    2. Xử lý ảnh với Photoshop: Cung cấp kỹ năng cắt ghép, tối ưu hóa kích thước hình ảnh, thiết kế logo, banner và hệ thống nút liên kết trước khi đưa vào bố cục website.
  • Giảng viên chuyên ngành: Sử dụng làm tài liệu giảng dạy chính thức cho mô đun MĐ 19 (120 giờ); làm căn cứ lập kế hoạch bài giảng lý thuyết (40 giờ), tổ chức hướng dẫn bài tập thực hành trên phòng máy (77 giờ) và thiết kế đề kiểm tra định kỳ (3 giờ).
  • Tài liệu tham khảo chuyên môn: Dùng làm tài liệu tra cứu các thẻ HTML, thuộc tính CSS, phần tử Form, bảng biểu Table và quy trình thao tác trên phần mềm Dreamweaver.

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 thiết kế cho học sinh, sinh viên trình độ Trung cấp nghề Thiết kế đồ họa và nghề Lập trình máy tính, học viên các lớp bồi dưỡng ngắn hạn và công nhân kỹ thuật cần học kỹ năng thiết kế trang web tĩnh.

2. Cần kiến thức nền nào trước khi bắt đầu học mô đun này?

Người học cần hoàn thành hai môn học tiên quyết trong chương trình đào tạo: Tin học văn phòng (kỹ năng soạn thảo và tổ chức thư mục) và Xử lý ảnh với Photoshop (kỹ năng chuẩn bị banner, logo và đồ họa cho website).

3. Điểm khác biệt về cấu trúc của giáo trình này là gì?

Giáo trình thiết kế theo kết cấu mô đun nghề nghiệp, dành 64,1% thời lượng cho thực hành (77/120 giờ). Nội dung kết hợp giữa viết mã thủ công (HTML/CSS) với sử dụng công cụ trực quan (Macromedia Dreamweaver CS5) và tích hợp hướng dẫn cấu hình máy chủ cục bộ IIS.

4. Làm sao để tự học hiệu quả với tài liệu này?

Học viên cần gõ trực tiếp toàn bộ các đoạn mã HTML/CSS mẫu vào trình soạn thảo (Notepad hoặc Dreamweaver), kiểm tra kết quả hiển thị trên trình duyệt, xem mã nguồn (View Source Code) để rà soát lỗi cú pháp thẻ, và hoàn thành các bài tập tạo bảng, tạo biểu mẫu theo hình minh họa.

5. Có những tài liệu và công cụ bổ trợ nào kèm theo giáo trình?

Công cụ thực hành gồm phần mềm Macromedia Dreamweaver CS5, dịch vụ Internet Information Services (IIS), trình duyệt web, trình soạn thảo văn bản Notepad và danh mục tài liệu tham khảo chuyên môn được liệt kê tại trang 67 của giáo trình.

Kết luận (150 từ)

Giáo trình mô đun Thiết kế Website (Mã mô đun: MĐ 19) do Trường Cao đẳng Nghề An Giang ban hành cung cấp hệ thống kiến thức nền tảng và kỹ năng thực hành xây dựng giao diện web cho hệ đào tạo Trung cấp nghề. Tài liệu chuẩn hóa nội dung từ khái niệm mạng máy tính, cú pháp HTML cơ bản, kỹ thuật quản lý dự án trên Dreamweaver CS5, phương pháp định dạng tách biệt bằng CSS/CSS3, đến lập trình kịch bản JavaScript và cấu hình máy chủ cục bộ IIS.

Lộ trình học tập được thiết kế tuyến tính: tiếp cận hạ tầng mạng $\rightarrow$ viết mã đánh dấu HTML $\rightarrow$ thiết kế giao diện và quản trị site bằng Dreamweaver CS5 $\rightarrow$ kiểm soát kiểu dáng bằng CSS $\rightarrow$ tích hợp xử lý JavaScript/ASP. Học viên sử dụng giáo trình kết hợp với hệ thống bài tập thực hành trên máy và tài liệu tham khảo kỹ thuật để hoàn thành chuẩn đầu ra mô đun.