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

Giáo trình Thiết kế Web (Mã môn học: MH 18) do Bộ môn Tin học thuộc Trường Cao đẳng Kinh tế Kỹ thuật Vinatex TP.HCM biên soạn vào tháng 08 năm 2019. Trong chương trình đào tạo ngành Công nghệ thông tin trình độ Cao đẳng (đầu vào 12/12), môn học có tính chất chuyên môn bắt buộc và được bố trí giảng dạy sau khi sinh viên đã hoàn thành môn Đồ họa ứng dụng cùng các môn học cơ sở bắt buộc. Tổng thời lượng thực hiện môn học là 45 giờ, bao gồm 15 giờ lý thuyết, 27 giờ thực hành/thảo luận/bài tập và 3 giờ dành cho kiểm tra đánh giá.

+-------------------------------------------------------------------------+
|                  CƠ CẤU THỜI LƯỢNG MÔN HỌC (MH 18)                      |
|                                                                         |
|  [ Lý thuyết: 15 giờ ]  [ Thực hành / Bài tập: 27 giờ ]  [ KT: 3 giờ ]  |
|  |===================|  |================================|  |======|    |
|                                                                         |
|  Tổng thời lượng: 45 giờ (Thực hành chiếm 60% khối lượng đào tạo)       |
+-------------------------------------------------------------------------+

Mục tiêu học tập (learning outcomes) của giáo trình được xác định trên ba phương diện cụ thể:

  • Về kiến thức: Trang bị các khái niệm nền tảng trong lĩnh vực Internet và mạng Web; trình bày quy trình các giai đoạn phát triển website và thiết kế layout; làm rõ cấu trúc trang HTML cùng cách thức kết hợp HTML với bảng mã kiểu Cascading Style Sheets (CSS); nắm vững hệ thống công cụ định dạng và quản trị trên phần mềm Adobe Dreamweaver.
  • Về kỹ năng: Triển khai quy trình thiết kế bố cục; tự xây dựng website tĩnh hoàn chỉnh bằng ngôn ngữ HTML và CSS; vận hành các công cụ thiết kế giao diện trên Dreamweaver.
  • Về năng lực tự chủ và trách nhiệm: Rèn luyện phương pháp làm việc cẩn trọng, kỷ luật kỹ thuật, năng lực làm việc nhóm và kỹ năng tự nghiên cứu tài liệu kỹ thuật.

Cấu trúc giáo trình gồm 10 chương, tiếp cận theo lộ trình từ bản chất mã nguồn đánh dấu (HTML/CSS thuần túy) đến kỹ năng thao tác trên phần mềm trực quan (WYSIWYG Dreamweaver). Điểm đặc trưng của tài liệu là phân bổ dung lượng thực hành chiếm 60% tổng thời lượng (27/45 giờ), gắn kết cú pháp lý thuyết với các ví dụ thực thi trực tiếp trên trình duyệt web.


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

+-----------------------------------------------------------------------------------+
|                        TIẾN TRÌNH 10 CHƯƠNG GIÁO TRÌNH                            |
|                                                                                   |
|  [Chương 1-5: HTML Căn bản] -> [Chương 6: Cú pháp CSS] -> [Chương 7-10: Dreamweaver]|
|  - Cấu trúc trang, thẻ định dạng  - Bảng kiểu: Inline, Internal,  - Môi trường DW |
|  - Hyperlink, hình ảnh, Table     External                       - Quản trị CSS   |
|  - Biểu mẫu Form & điều khiển     - Class & ID Selectors         - Layout Table   |
|                                                                  - Template (.dwt)|
+-----------------------------------------------------------------------------------+

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

Nội dung giáo trình được phân bổ chi tiết qua 10 chương chuyên đề:

  • Chương 1: Giới thiệu về Web (6 giờ: 2 LT - 4 TH): Khái quát mô hình mạng Client-Server, giao thức TCP/IP, địa chỉ IP, Gateway, World Wide Web, trình duyệt, phân biệt URL tuyệt đối và URL tương đối. Trình bày cấu trúc tài liệu <HTML>, phân tách phần <HEAD> và <BODY>, cùng các tag định dạng văn bản cơ bản (<HN>, <P>,
    , <HR>, <FONT>, <DIV>, <SPAN>), các thẻ nhúng đa phương tiện (<BGSOUND>, <EMBED>, <MARQUEE>), thẻ cấu hình <META> (charset UTF-8, tìm kiếm, chống lưu cache, tự động chuyển trang) và thẻ liên kết kịch bản <SCRIPT>.
  • Chương 2: Hyperlink – Hình ảnh (3 giờ: 1 LT - 2 TH): Phân loại liên kết nội bộ (Internal Hyperlink) và liên kết ngoài (External Hyperlink); tạo dấu liên kết nội bộ (Bookmark) bằng thẻ <A NAME> và <A HREF="#...">; kỹ thuật liên kết gửi thư điện tử qua giao thức mailto:. Khảo sát định dạng hình ảnh số trên web (GIF, JPEG, PNG) và kỹ thuật tạo bản đồ ảnh tương tác với thẻ <MAP>, <AREA> theo các vùng tọa độ hình chữ nhật (rect), tròn (circle), đa giác (poly).
  • Chương 3: Danh sách (3 giờ: 1 LT - 2 TH): Cấu trúc danh sách không có thứ tự (<UL> với thuộc tính hình dạng disc, circle, square), danh sách có thứ tự (<OL> với kiểu chữ số, chữ cái la-tinh, số la-mã qua các thuộc tính type, start, value) và danh sách định nghĩa tra cứu (<DL>, <DT>, <DD>).
  • Chương 4: Bảng và trình bày trang (4 giờ: 1 LT - 3 TH): Cú pháp tạo bảng với thẻ <TABLE>, <TR>, <TD>, <TH>, <CAPTION>. Kỹ thuật xử lý bảng nâng cao: thiết lập độ dày đường viền, màu viền (bordercolor, bordercolordark, bordercolorlight), khoảng cách lề ô (cellpadding), khoảng cách giữa các ô (cellspacing), kỹ thuật trộn ô theo chiều ngang (colspan) và chiều dọc (rowspan) nhằm mục đích phân chia layout trang tin tức, thương mại.
  • Chương 5: Form (3 giờ: 1 LT - 2 TH): Cơ chế thu thập dữ liệu biểu mẫu qua hai phương thức truyền tải GET và POST. Thiết lập các phần tử điều khiển: <INPUT> (loại text, password, checkbox, radio, submit, reset, button, hidden), danh sách chọn thả <SELECT>, <OPTION>, <OPTGROUP>, khung nhập nhiều dòng <TEXTAREA>, liên kết nhãn <LABEL>, nhóm logic dữ liệu bằng <FIELDSET> và <LEGEND>, điều hướng phím thông qua tabindex và accesskey.
  • Chương 6: Cascading Style Sheet - CSS (5 giờ: 2 LT - 2 TH - 1 KT): Khái niệm và nguyên lý hoạt động của bảng kiểu. Ba cơ chế nhúng CSS: Kiểu nội dòng (Inline style), kiểu nội bộ (Internal style trong thẻ <STYLE>), và kiểu liên kết ngoài (External style liên kết tệp tin .css qua thẻ <LINK>). Định nghĩa vùng chọn theo lớp (Class Selector .classname), vùng chọn định danh (ID Selector #idname), phân biệt định dạng khối (DIV) và nội dòng (SPAN), cùng các thuộc tính kiểm soát văn bản (font-family, font-size, font-weight, color, text-align, word-spacing) và cấu trúc danh sách (list-style).
  • Chương 7: Giới thiệu Dreamweaver (3 giờ: 1 LT - 2 TH): Môi trường làm việc của Adobe Dreamweaver trên nền thiết kế (Design mode), quy trình lập kế hoạch site, quản lý tệp tin và tạo liên kết giữa các trang web đơn lẻ.
  • Chương 8: CSS trong Dreamweaver (6 giờ: 2 LT - 4 TH): Kỹ thuật định dạng văn bản và tích hợp các bảng kiểu CSS trực tiếp thông qua thanh công cụ chuyên dụng của Dreamweaver.
  • Chương 9: Hình ảnh và Hyperlink trong DW (3 giờ: 1 LT - 2 TH): Quy trình chèn và tinh chỉnh thuộc tính hình ảnh, kỹ thuật chèn khung ảnh, hiệu ứng chuyển đổi hình ảnh khi rê chuột (Insert Rollover Image), cấu hình ảnh nền trang và hệ thống siêu liên kết trong Dreamweaver.
  • Chương 10: Bảng và trình bày trang trong DW (9 giờ: 3 LT - 4 TH - 2 KT): Xây dựng bảng và dàn trang nâng cao bằng công cụ Layout Table và Layout Cell; quy trình thiết kế, quản lý và cập nhật trang đồng bộ bằng khuôn mẫu dùng chung (Template).

Progression logic của giáo trình đi từ việc hiểu rõ bản chất mã nguồn HTML tĩnh, tiếp cận kỹ thuật định dạng giao diện tập trung bằng CSS, sau đó chuyển dịch sang việc ứng dụng công cụ phần mềm Adobe Dreamweaver để tăng tốc độ triển khai giao diện theo chuẩn layout công nghiệp.

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

Giáo trình củng cố các khối kiến thức kỹ thuật hệ thống:

  1. Mô hình kiến trúc mạng: Hoạt động của mô hình Client-Server, chức năng của máy chủ Internet Server (Web, Mail, FTP), cơ chế phân giải định danh địa chỉ IP (4 nhóm số thập phân từ 0-255), chức năng chuyển tiếp gói dữ liệu của Gateway và cú pháp định vị tài nguyên URL.
  2. Nguyên lý phân cấp văn bản HTML: Tổ chức cây phân cấp thẻ đóng/mở; phân định phạm vi chức năng giữa phần khai báo metadata (<HEAD>) và phần hiển thị trực quan (<BODY>); phân biệt phần tử cấp khối (Block-level elements: P, DIV, TABLE) với phần tử cấp hàng (Inline elements: B, I, SPAN, FONT).
  3. Nguyên tắc phân tầng CSS: Cơ chế xếp chồng kiểu mẫu, phân chia mức độ ưu tiên áp dụng giữa Inline, Internal và External styles; cấu trúc khai báo bộ chọn (Selector), thuộc tính (Properties) và giá trị (Values).

Kỹ năng phát triển

  • Kỹ năng kỹ thuật (Technical skills): Viết đúng chuẩn ngữ pháp các tag HTML; định dạng chuẩn bảng mã ký tự tiếng Việt Unicode (UTF-8); lập trình trang biểu mẫu Form đầy đủ thành phần nhập liệu; cấu hình tệp định dạng CSS bên ngoài phục vụ toàn bộ website.
  • Kỹ năng phân tích (Analytical skills): Phân tích bố cục giao diện mỹ thuật thành các khối bảng (Table) hoặc khung định vị (Div); tính toán thông số căn chỉnh (Colspan, Rowspan, Cellpadding, Cellspacing) để trình bày trang dạng nhiều cột; xác định luồng dữ liệu biểu mẫu qua phương thức GET hoặc POST.
  • Kỹ năng thực hành nghề nghiệp (Practical competencies): Vận hành phần mềm Adobe Dreamweaver trên các chế độ Design và Code; xây dựng hiệu ứng đồ họa tương tác Rollover Image; tối ưu hóa quy trình thiết kế nhiều trang bằng khuôn mẫu Template (.dwt).

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

Hoạt động giảng dạy và học tập của môn học Thiết kế Web được tổ chức tích hợp giữa bài giảng lý thuyết và phiên thực hành tương ứng, cụ thể hóa qua bảng danh mục thiết bị và hình thức kiểm tra:

+-------------------------------------------------------------------------+
|                  QUY CHUẨN ĐÁNH GIÁ MÔN HỌC (MH 18)                     |
|                                                                         |
|  [ ĐIỂM QUÁ TRÌNH: TRỌNG SỐ 0,4 ]        [ ĐIỂM THI KẾT THÚC: 0,6 ]     |
|  - Điểm Tự nghiên cứu:       Hệ số 1     - Hình thức: Tiểu luận         |
|  - Điểm KT Thường xuyên:     Hệ số 1     - Thời gian làm bài: 10 ngày   |
|  - Điểm KT Định kỳ (Ch 6,10):Hệ số 2                                    |
|                                                                         |
|  Điều kiện dự thi: Tham dự >= 70% lý thuyết & 100% giờ thực hành lab    |
+-------------------------------------------------------------------------+
  • Phương pháp sư phạm (Pedagogical approach): Giảng viên đóng vai trò phân tích nguyên lý cấu trúc mã lệnh, hướng dẫn thao tác mẫu trên phần mềm Dreamweaver trong phòng lab tin học, sau đó sinh viên trực tiếp thực hành viết mã và kiểm thử giao diện trên trình duyệt web. Giảng viên kết nối các bài học với yêu cầu thực tế trong việc vận hành các trang tin điện tử và hệ thống website của doanh nghiệp.
  • Hệ thống bài tập và Case Studies: Giáo trình cung cấp các mẫu bài tập tình huống thực hành rõ ràng:
    • Bài tập dàn trang hiển thị sản phẩm mẫu máy tính (Computer Model) kết hợp bảng lồng bảng và chèn hình ảnh.
    • Thiết kế Form nộp hồ sơ xin việc (Job Application Form) phân nhóm logic qua thẻ <FIELDSET> (chứa thông tin chức danh, giới tính, bằng cấp, ngoại ngữ, địa chỉ cá nhân).
    • Xây dựng trang danh mục liên kết đào tạo đa cấp bằng thẻ danh sách lồng nhau (<OL>, <UL>).
    • Thực hành định vị tọa độ cho bản đồ ảnh tương tác (Image Map) trên các tệp đồ họa.
  • Phương pháp đánh giá học phần: Kết quả học tập được đánh giá tổng hợp theo quy chế đào tạo nghề nghiệp:
    • Điểm tổng kết môn học gồm: Điểm trung bình kiểm tra quá trình (trọng số 0,4) và Điểm thi kết thúc môn học (trọng số 0,6).
    • Điểm quá trình là trung bình cộng theo hệ số của: Điểm tự nghiên cứu (hệ số 1), Điểm kiểm tra thường xuyên (hệ số 1), Điểm kiểm tra định kỳ (hệ số 2, bố trí kiểm tra thực hành 1 giờ tại Chương 6 và 2 giờ tại Chương 10).
    • Hình thức thi kết thúc môn học: Thực hiện bài tiểu luận tổng hợp xây dựng website trong thời gian 10 ngày (được công bố vào đầu mỗi học kỳ).
  • Quy định tự học và điều kiện dự thi: Người học phải tham dự tối thiểu 70% thời lượng bài học lý thuyết và 100% các giờ học thực hành tại phòng máy vi tính. Sinh viên cần chủ động nghiên cứu trước nội dung tài liệu, chuẩn bị bài tập thực hành theo hướng dẫn trước khi lên lớp và tự lập kế hoạch học tập cá nhân/nhóm.

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

Nội dung giáo trình phản ánh các đặc điểm kỹ thuật và tính thực tiễn tại thời điểm biên soạn:

  • Chuẩn hóa quy chuẩn Web thời kỳ HTML/CSS chuyển tiếp: Giáo trình hướng dẫn chi tiết cách cấu hình thẻ <META> phục vụ khai báo bảng mã tiếng Việt UTF-8 (<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">), cơ chế quản lý bộ nhớ đệm trình duyệt (no-cache, expires, cache-control) và khai báo từ khóa phục vụ công cụ tìm kiếm (keywords, author).
  • Khai thác công cụ chuẩn công nghiệp Adobe Dreamweaver: Thay vì chỉ lập trình thủ công trên trình soạn thảo Notepad, tài liệu hướng dẫn vận hành toàn diện quy trình thiết kế website trực quan thông qua màn hình Design của Dreamweaver, tích hợp các tính năng tự động sinh mã, chèn hiệu ứng tương tác Rollover Image và đồng bộ hóa layout qua cơ chế Dreamweaver Template.
  • Kế thừa nguồn tài liệu kỹ thuật chuẩn xác: Tài liệu được tổng hợp, đối chiếu từ 6 bộ giáo trình tham khảo chuyên ngành xuất bản trước đó, bao gồm tài liệu của Nhà xuất bản Thống Kê, Nhà xuất bản Đại học Quốc Gia, Đề cương bài giảng của Trường CĐ KT-KT Vinatex TP.HCM và giáo trình của tác giả Chu Văn Hoành.
+-------------------------------------------------------------------------+
|                  DANH MỤC NGUỒN TÀI LIỆU THAM KHẢO                      |
|                                                                         |
|  [1] Giáo trình Thiết Kế Web - NXB Thống Kê                             |
|  [2] Đề cương bài giảng Thiết Kế Web - Trường CĐ KT-KT VINATEX TP.HCM    |
|  [3] Giáo trình Thiết Kế Web - Chu Văn Hoành                            |
|  [4] Tự học Thiết kế Trang Web - NXB Thống Kê                           |
|  [5] Thực hành Thiết kế Web - NXB Đại học Quốc Gia                      |
|  [6] Thiết kế và Xuất bản Trang Web - NXB Thống Kê                     |
+-------------------------------------------------------------------------+
  • Định hướng ứng dụng thực tế tại doanh nghiệp: Các cấu trúc layout bảng (Table), biểu mẫu thu thập thông tin khách hàng (Form), menu điều hướng phân cấp (List/CSS) được biên soạn gắn liền với các thành phần giao diện thực tế cần thiết cho các doanh nghiệp, cơ sở sản xuất và bán hàng.

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

Giáo trình Thiết kế Web được thiết kế cho các nhóm đối tượng sử dụng chuyên môn cụ thể:

  • Học sinh, sinh viên ngành Công nghệ thông tin: Sinh viên hệ đào tạo Cao đẳng (trình độ 12/12) tại Trường Cao đẳng Kinh tế Kỹ thuật Vinatex TP.HCM và các trường đào tạo nghề kỹ thuật có đào tạo học phần thiết kế website căn bản.
  • Điều kiện tiên quyết (Prerequisites): Người học cần hoàn thành học phần Đồ họa ứng dụng để có kỹ năng xử lý ảnh (sử dụng phần mềm như Adobe Photoshop CS để cắt ghép giao diện) và các môn cơ sở ngành bắt buộc trước khi bước vào học phần này.
  • Giảng viên chuyên ngành: Giảng viên sử dụng tài liệu làm căn cứ giảng dạy chuẩn, triển khai bài giảng 15 giờ lý thuyết kết hợp 27 giờ thực hành phòng lab, thiết lập ngân hàng câu hỏi kiểm tra định kỳ cho Chương 6 (CSS), Chương 10 (Layout Table/Template) và phân công đề tài tiểu luận 10 ngày kết thúc môn học.
  • Kỹ thuật viên và người tự học: Lập trình viên web sơ cấp tại các doanh nghiệp hoặc người tự nghiên cứu có thể sử dụng giáo trình như tài liệu tra cứu nhanh về cú pháp thẻ HTML, bảng thuộc tính CSS và quy trình thao tác dàn trang trên phần mềm Adobe Dreamweaver.

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

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

Giáo trình phục vụ trực tiếp cho giảng viên và sinh viên ngành Công nghệ thông tin trình độ Cao đẳng hệ chính quy, cũng như các kỹ thuật viên web sơ cấp tại doanh nghiệp cần nắm vững quy trình tạo website tĩnh.

2. Cần kiến thức nền nào để học giáo trình này?

Theo quy định vị trí môn học trong chương trình đào tạo, người học bắt buộc phải hoàn thành học phần Đồ họa ứng dụng (để phục vụ xử lý đồ họa, biểu tượng, hình ảnh giao diện) và các môn học cơ sở ngành bắt buộc của ngành Công nghệ thông tin.

3. Điểm khác biệt của giáo trình so với các tài liệu khác là gì?

Tài liệu kết hợp song song giữa việc học bản chất mã nguồn HTML/CSS (Chương 1 đến Chương 6) với kỹ năng sử dụng công cụ thiết kế chuyên nghiệp Adobe Dreamweaver (Chương 7 đến Chương 10). Thời lượng thực hành chiếm ưu thế với 27/45 giờ và bài thi kết thúc môn được tổ chức dưới dạng tiểu luận thực tế trong 10 ngày.

                  SO SÁNH 2 PHẦN HỌC CHÍNH TRONG GIÁO TRÌNH
+-----------------------------+-------------------------------------------+
| Giai đoạn 1: Mã nguồn thuần | Giai đoạn 2: Tự động hóa qua Dreamweaver   |
| (Chương 1 - Chương 6)       | (Chương 7 - Chương 10)                    |
+-----------------------------+-------------------------------------------+
| - Viết mã qua Notepad/Code  | - Thao tác trên giao diện Design (WYSIWYG)|
| - Cú pháp thẻ HTML & CSS    | - Quản lý Site, chỉnh sửa thuộc tính ảnh  |
| - Tự tính toán Table & Form | - Dàn trang bằng Layout Table & Template  |
+-----------------------------+-------------------------------------------+

4. Làm sao để tự học và thực hành hiệu quả theo giáo trình?

Người học cần trang bị máy vi tính có cài đặt phần mềm Adobe Dreamweaver và trình duyệt web. Cần tuân thủ quy trình: gõ mã nguồn các ví dụ mẫu, quan sát kết quả hiển thị trên trình duyệt, thực hiện đầy đủ các bài tập tình huống (như trang Computer Model, Form ứng tuyển việc làm) và tuân thủ định dạng bảng kiểu qua tệp tin CSS độc lập.

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

Người học có thể tham khảo 6 tài liệu được trích dẫn trong danh mục tham khảo của giáo trình: Giáo trình Thiết Kế Web, Tự học thiết kế trang Web, Thiết kế và xuất bản trang Web (NXB Thống Kê); Thực hành thiết kế Web (NXB Đại học Quốc Gia); Giáo trình thiết kế web của Chu Văn Hoành và Đề cương bài giảng Thiết Kế Web của Trường Cao đẳng Kinh tế Kỹ thuật Vinatex TP.HCM.


Kết luận

Giáo trình Thiết kế Web của Bộ môn Tin học - Trường Cao đẳng Kinh tế Kỹ thuật Vinatex TP.HCM cung cấp hệ thống kiến thức có cấu trúc chặt chẽ về ngôn ngữ đánh dấu siêu văn bản HTML, bảng kiểu Cascading Style Sheets và kỹ thuật ứng dụng phần mềm Adobe Dreamweaver trong thiết kế website.

Lộ trình học tập được thiết kế mạch lạc:

  1. Nắm bắt các khái niệm mạng Internet và cú pháp thẻ HTML căn bản (Chương 1-3).
  2. Xây dựng bố cục giao diện qua Table và thiết kế Form thu thập dữ liệu (Chương 4-5).
  3. Chuẩn hóa định dạng hiển thị với công nghệ CSS (Chương 6).
  4. Khai thác công cụ thiết kế, dàn trang nâng cao và quản lý khuôn mẫu Template trên phần mềm Dreamweaver (Chương 7-10).
  5. Hoàn thiện năng lực qua bài tiểu luận xây dựng website tĩnh hoàn chỉnh trong thời gian 10 ngày.

Hệ thống tài liệu tham khảo đồng bộ từ NXB Thống Kê, NXB Đại học Quốc Gia và nguồn học liệu nội bộ của nhà trường là cơ sở hỗ trợ sinh viên hoàn thành các mục tiêu chuẩn đầu ra của môn học.