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

Giáo trình Thiết kế Web (mã hiệu lưu hành nội bộ phục vụ đào tạo ngành Tin học ứng dụng trình độ Trung cấp và Cao đẳng) được biên soạn bởi tập thể giảng viên Trường Cao đẳng Giao thông Vận tải Trung ương I (tiền thân là Trường Cao đẳng nghề GTVT Trung ương I), hoàn thiện dựa trên kết quả nghiệm thu đề tài Nghiên cứu khoa học cấp cơ sở năm 2018 và chính thức ban hành vào tháng 9 năm 2019. Trong chương trình đào tạo chuyên ngành Công nghệ thông tin và Tin học ứng dụng, môn học Thiết kế Web đóng vai trò là học phần cơ sở ngành quan trọng, cung cấp nền tảng đầu tiên về kiến trúc siêu văn bản, cách thức xây dựng giao diện và nguyên lý vận hành của các trang web tĩnh trên môi trường mạng Internet.

Mục tiêu học tập của giáo trình hướng tới việc trang bị cho người học hệ thống kiến thức căn bản về ngôn ngữ đánh dấu siêu văn bản HTML (HyperText Markup Language), quy trình thiết lập cấu trúc trang, định dạng văn bản, xử lý bảng biểu, biểu mẫu (form) và tích hợp các thành phần đa phương tiện (hình ảnh, âm thanh, video). Đồng thời, tài liệu rèn luyện kỹ năng thực hành xây dựng website thông qua hai công cụ soạn thảo trực quan theo cơ chế WYSIWYG (What You See Is What You Get) là Microsoft FrontPage và Macromedia Dreamweaver.

Cấu trúc giáo trình được thiết kế theo lộ trình sư phạm tuyến tính gồm 3 chương lớn:

  • Chương I: Giới thiệu ngôn ngữ HTML (tập trung vào cú pháp thẻ và cấu trúc mã nguồn thuần).
  • Chương II: Thiết kế Web bằng chương trình Microsoft FrontPage (ứng dụng phần mềm tạo lập trang web và bộ web đóng gói).
  • Chương III: Thiết kế Web bằng Dreamweaver (sử dụng môi trường thiết kế đồ họa nâng cao, quản lý site và kiểm tra dữ liệu biểu mẫu).

Điểm đặc thù của tài liệu là phương pháp tiếp cận đi từ bản chất mã lệnh (code-level) ở tầng mã nguồn HTML cơ bản, sau đó chuyển dịch dần sang tư duy quản trị dự án web cục bộ (Local Site) và thao tác tự động hóa trên giao diện thiết kế chuyên dụng.

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

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

Cấu trúc nội dung giáo trình được phân bổ chi tiết qua 3 chương chuyên đề với tiến trình logic chặt chẽ:

[Chương I: Ngôn ngữ HTML] ➔ [Chương II: Microsoft FrontPage] ➔ [Chương III: Macromedia Dreamweaver]
  - Cấu trúc tài liệu         - Giao diện WYSIWYG/Code/Preview - Quản trị hệ thống Site cục bộ
  - Thẻ định dạng, danh sách  - Tạo bộ web & Web Wizards       - Trình biên soạn bảng biểu, form
  - Bảng biểu, biểu mẫu       - Quản lý khung Frameset         - Ràng buộc Behavior/Validate Form
  - Liên kết, đa phương tiện  - Tích hợp ActiveX & Themes      - Quản lý tài nguyên Assets

Chương I: Giới thiệu ngôn ngữ HTML (Trang 9 – 53)

Chương này cung cấp toàn diện các thẻ đánh dấu chuẩn do tổ chức World Wide Web Consortium (W3C) quy định, bao gồm:

  • Cấu trúc tài liệu chuẩn: Phân định phạm vi bằng cặp thẻ <html>, phần khai báo tiêu đề và thông tin meta <head>, <title>, cùng phân vùng thân trang <body> với các thuộc tính quản lý màu nền (BGCOLOR), hình nền (BACKGROUND), màu văn bản (TEXT), màu liên kết (LINK, ALINK, VLINK) và căn chỉnh lề (TOPMARGIN, LEFTMARGIN, RIGHTMARGIN).
  • Khối và định dạng văn bản: Thẻ đoạn văn <p> (thuộc tính align: left, right, center, justify), hệ thống tiêu đề phân cấp <h1> đến <h6>, thẻ ngắt dòng
    , thẻ giữ nguyên định dạng <pre>, cùng thẻ kẻ đường phân cách ngang <hr> (size, width, color, noshade).
  • Định dạng ký tự và ký tự đặc biệt: Các thẻ in đậm <b>, in nghiêng <i>, gạch chân <u>, gạch ngang <strike>, chỉ số trên <sup>, chỉ số dưới <sub>, thiết lập phông chữ <font> (face, size, color), thẻ căn giữa <center> và mã thực thể ký tự khoảng trắng không ngắt (&nbsp;).
  • Danh sách có thứ tự và không thứ tự: Thẻ <ol> (với các kiểu đánh số type="1|A|a|I|i" và chỉ số khởi đầu start), thẻ <ul> (type="disc|circle|square"), kết hợp thẻ phần tử con <li>.
  • Siêu liên kết (Hyperlink): Thẻ <a> với thuộc tính href hỗ trợ liên kết tuyệt đối (URL hoàn chỉnh), liên kết tương đối nội bộ thư mục, điểm neo nội trang (bookmark/anchor) và giao thức thư điện tử (mailto:), cùng thẻ định vị cơ sở <base>.
  • Đa phương tiện: Tích hợp âm thanh ngầm bằng <bgsound>, trình phát đa phương tiện nhúng <embed> (các định dạng wav, midi, mp3), chèn hình ảnh bằng thẻ <img> (src, alt, width, height, border, align, hspace, vspace).
  • Cấu trúc bảng biểu (<table>): Phân chia dòng <tr>, ô dữ liệu <td>, ô tiêu đề <th>; các thuộc tính gộp ô rowspan, colspan, căn khoảng cách đệm cellpadding, khoảng cách ô cellspacing và kỹ thuật dàn khung trang web bằng bảng lồng nhau.
  • Biểu mẫu tương tác (<form>): Khai báo form với phương thức truyền dữ liệu method="GET|POST", địa chỉ xử lý action; các trường nhập liệu <input> (type="text", password, radio, checkbox, hidden, file, submit, reset, button), khung văn bản nhiều dòng <textarea> (rows, cols), danh sách chọn <select> / <option> và gom nhóm trường bằng <fieldset> / <legend>.

Chương II: Thiết kế Web bằng Microsoft FrontPage (Trang 54 – 77)

Chương thứ hai tập trung vào việc hiện thực hóa các trang web thông qua công cụ Microsoft Office FrontPage:

  • Môi trường làm việc: Khảo sát các thanh công cụ và 3 chế độ hiển thị gồm Normal (soạn thảo trực quan), HTML (chỉnh sửa mã nguồn) và Preview (xem trước trên trình duyệt).
  • Tạo lập và xuất bản Web: Thao tác tạo trang đơn, tạo bộ web từ hệ thống mẫu có sẵn (Customer Support Web, Discussion Web Wizard, Bibliography), xuất bản web thông qua máy chủ tích hợp FrontPage Server Extensions.
  • Tùy biến nâng cao: Định dạng Theme, cấu hình thuộc tính trang Page Properties (chèn nhạc nền, gán bảng mã tiếng Việt Unicode UTF-8), chèn hoạt ảnh chuyển trang (Page Transition), chữ chạy (Marquee), hiệu ứng chuột (Hyperlink Rollover Effects) và nhúng đối tượng ActiveX (Windows Media Player).
  • Phân chia khung với Frameset: Tạo cấu trúc trang khung bằng thẻ <frameset> và <frame> (rows, cols, name, src, noresize, scrolling), cấu hình thuộc tính target chuyển hướng nội dung liên kết vào khung chỉ định (target="body").

Chương III: Thiết kế Web bằng Macromedia Dreamweaver (Trang 78 trở đi)

Chương cuối cùng hướng dẫn sử dụng phần mềm Macromedia Dreamweaver trong thiết kế chuyên nghiệp:

  • Tổ chức không gian làm việc: Quản lý bảng điều khiển (Panels), thanh Insert, Document toolbar, cửa sổ thuộc tính Properties inspector và thanh trạng thái.
  • Quy trình quản lý Site: Thiết lập thư mục gốc cục bộ (Local root folder) bằng tính năng Site > Manage Sites, tổ chức cây thư mục lưu trữ tài nguyên hình ảnh (Assets), tạo lập, đổi tên, sao chép và quản lý các tập tin HTML.
  • Thiết kế trực quan và kiểm soát mã: Chèn và căn chỉnh bảng biểu trong chế độ Standard Mode, chèn hình ảnh, tạo form nhập liệu trực quan.
  • Ràng buộc hành vi (Behaviors): Sử dụng tính năng Validate Form để kiểm tra tính hợp lệ của dữ liệu đầu vào người dùng (kiểm tra trường bắt buộc, định dạng E-mail Address, giá trị số Number hoặc khoảng số Number From... To...) mà không cần viết mã lệnh JavaScript thủ công.
  • Quản lý trang khung (Frames): Thao tác trực quan trên bảng điều khiển Frames, thiết lập đường viền, thanh cuộn và căn lề cho từng phân vùng hiển thị.
Tiến trình học tập theo giáo trình:
Viết mã HTML thủ công ➔ Quản lý trực quan bằng FrontPage ➔ Quản trị Site & Kiểm tra lỗi với Dreamweaver

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 cốt lõi phục vụ lập trình giao diện web:

  1. Mô hình kiến trúc siêu văn bản: Nguyên lý tổ chức dữ liệu dạng cây của tài liệu HTML, nguồn gốc kế thừa từ ngôn ngữ đánh dấu chuẩn tổng quát SGML (Standard Generalized Markup Language) và các tiêu chuẩn định dạng do W3C ban hành (HTML 4.01, XHTML và định hướng HTML5).
  2. Nguyên lý phân chia tài liệu: Cơ chế phân tách ranh giới giữa phần khai báo chỉ thị (<head>) và phần hiển thị nội dung trực quan (<body>).
  3. Mô hình phối màu kỹ thuật số: Cơ chế biểu diễn không gian màu RGB qua hệ đếm thập lục phân (Hexadecimal) dạng #RRGGBB (với các kênh màu Red, Green, Blue từ 00 đến FF).
  4. Cơ chế truyền nhận dữ liệu HTTP trong Form: Bản chất hoạt động của giao thức web khi xử lý form:
    • Phương thức GET: Đính kèm tham số nhập liệu trực tiếp lên thanh địa chỉ (URL).
    • Phương thức POST: Đóng gói dữ liệu vào phần thân của thông điệp yêu cầu (HTTP Request Body), đảm bảo tính bảo mật cho thông tin nhạy cảm như mật khẩu hay mã PIN.

Kỹ năng phát triển

Sau khi hoàn thành các nội dung trong giáo trình, người học được củng cố các nhóm năng lực kỹ thuật:

  • Kỹ năng lập trình mã nguồn tĩnh: Khả năng tự tay soạn thảo cây cấu trúc HTML chuẩn cú pháp, tổ chức bảng biểu lồng nhau để chia cột/chia dòng và xây dựng các form tương tác hoàn chỉnh.
  • Kỹ năng tổ chức và quản trị cấu trúc website: Kỹ năng phân cấp thư mục dự án cục bộ (Local Site Architecture), phân bổ tài nguyên tĩnh (Assets, Images), kiểm soát đường dẫn tương đối và tuyệt đối nhằm hạn chế lỗi đứt gãy liên kết (broken links).
  • Kỹ năng sử dụng công cụ thiết kế đồ họa (WYSIWYG): Năng lực phối hợp giữa chế độ trực quan và chế độ mã nguồn trên Microsoft FrontPage và Macromedia Dreamweaver; khả năng cấu hình Frameset để chia tách giao diện cố định (banner/menu) và vùng dữ liệu thay đổi linh hoạt.
  • Kỹ năng tiền xử lý và kiểm tra dữ liệu: Ứng dụng các bảng kiểm tra hành vi (Behaviors) để tự động hóa khâu xác thực dữ liệu phía máy khách (Client-side validation).

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

Giáo trình được biên soạn phục vụ mô hình đào tạo thực hành tích hợp trong các trường cao đẳng kỹ thuật và dạy nghề, kết hợp giữa lý thuyết cấu trúc và bài tập thao tác trực tiếp trên phòng máy tính:

(Cú pháp thẻ HTML)      (Thao tác công cụ phần mềm)     (Tạo lập hệ thống website cục bộ)
  • Tiếp cận sư phạm tích hợp: Giáo trình áp dụng phương pháp đối chiếu song song: người học trước tiên phải nắm vững cú pháp thẻ lệnh thô trong Notepad hoặc trình biên tập text (Chương I), sau đó mới thực hành các thao tác tương đương bằng chuột trên thanh công cụ đồ họa của FrontPage và Dreamweaver (Chương II, III). Cách tiếp cận này giúp sinh viên hiểu rõ bản chất mã nguồn được sinh ra đằng sau các giao diện đồ họa.
  • Bài tập tình huống và quy trình mẫu: Mỗi nội dung đều đi kèm các ví dụ thực hành cụ thể kèm đoạn mã minh họa, từ việc thiết lập trang web cá nhân kích thước chuẩn (Header 800x100 pixel, Banner 800x40 pixel), định dạng phông chữ tiếng Việt Unicode, đến việc ghép nối một hệ thống website hoàn chỉnh chứa đầy đủ trang chủ (index.html), trang giới thiệu, danh mục sản phẩm, biểu mẫu liên hệ và trang nhúng video/audio.
  • Phương pháp đánh giá: Kết quả học tập được đánh giá dựa trên hai tiêu chí: (1) Khả năng ghi nhớ và sử dụng chính xác các cặp thẻ định dạng HTML thuần; (2) Kỹ năng tổ chức hệ thống site cục bộ, xây dựng giao diện hoàn chỉnh, chia khung trang web không lỗi liên kết và thiết lập thành công các bộ kiểm tra biểu mẫu (Validation).
  • Hướng dẫn tự học: Giáo trình định hướng người học tự rèn luyện bằng cách thực hiện tuần tự các bài tập từ dễ đến khó: bắt đầu từ việc gõ trực tiếp mã nguồn để làm quen với cấu trúc cú pháp, sau đó nhập văn bản thô vào phần mềm thiết kế, áp dụng các Theme/CSS có sẵn, và cuối cùng là kiểm tra sản phẩm hoàn thiện trên nhiều trình duyệt web khác nhau.

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

  • Tính thực tiễn cho hệ đào tạo nghề: Giáo trình lược bỏ các nội dung lý thuyết trừu tượng, tập trung đi sâu vào các cấu trúc thẻ có tính ứng dụng cao trong việc dựng layout thực tế của trang web tĩnh (như kỹ thuật phân chia khung bằng <frameset>, kỹ thuật căn chỉnh tỷ lệ bảng <table> theo phần trăm hoặc pixel cố định).
  • Đóng gói công cụ trực quan giai đoạn chuyển tiếp: Tài liệu phản ánh giải pháp giảng dạy công nghệ web giai đoạn chuyển đổi, tích hợp hai phần mềm thiết kế web đồ họa kinh điển là Microsoft FrontPage 2003 và Macromedia Dreamweaver, hỗ trợ người học nhanh chóng tiếp cận quy trình xuất bản website mà không bị rào cản quá lớn về mặt lập trình thuật toán phức tạp.
  • Tích hợp quản lý truyền thông đa phương tiện: Cung cấp hướng dẫn chi tiết về việc tích hợp âm thanh ngầm (<bgsound>), xử lý đối tượng nhúng nhị phân (<embed>, <object>), cấu hình điều khiển ActiveX (Windows Media Player) và tối ưu hóa các định dạng đồ họa chuyên dụng trên web như GIF (ảnh động, ít màu) và JPEG (ảnh thực tế, dải màu rộng).
  • Chuẩn hóa dữ liệu hiển thị: Giáo trình chú trọng hướng dẫn người học cấu hình chuẩn bảng mã tiếng Việt Unicode (UTF-8) ngay trong phần khai báo thuộc tính trang và cấu hình phông chữ, giải quyết triệt để lỗi vỡ phông hiển thị trên các trình duyệt web.

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

Giáo trình được thiết kế chuyên biệt cho các nhóm đối tượng cụ thể trong hệ thống giáo dục nghề nghiệp và đại học kỹ thuật:

Nhóm đối tượng Mục đích sử dụng Phạm vi nội dung trọng tâm
Học sinh, sinh viên (Hệ Trung cấp, Cao đẳng Tin học ứng dụng) Tài liệu học tập chính khóa trên lớp và thực hành xưởng máy tính. Toàn bộ 3 chương: Ngôn ngữ HTML, thực hành FrontPage và Dreamweaver.
Giảng viên chuyên ngành Đề cương chi tiết và tài liệu chuẩn để soạn bài giảng, thiết kế bài tập thực hành và đề thi học phần. Các cấu trúc thẻ quy chuẩn, bài tập tình huống và quy trình quản trị site.
Người tự học lập trình web Tài liệu tham khảo nhập môn để nắm bắt cấu trúc siêu văn bản và phương pháp tạo trang web tĩnh cơ bản. Chương I (Mã nguồn HTML) và Chương III (Tổ chức Site với Dreamweaver).

Yêu cầu kiến thức tiên quyết (Prerequisites): Người học trước khi tiếp cận giáo trình cần nắm vững các kỹ năng cơ bản về Tin học văn phòng (soạn thảo văn bản, quản lý tệp và thư mục trên hệ điều hành Windows), hiểu biết đại cương về mạng máy tính và cách thức sử dụng các trình duyệt Internet thông dụng.

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 dành riêng cho học sinh, sinh viên theo học ngành Tin học ứng dụng trình độ Trung cấp và Cao đẳng tại các trường đào tạo nghề, cũng như người mới bắt đầu tìm hiểu về thiết kế web tĩnh.

2. Người học có cần biết trước ngôn ngữ lập trình nào để tiếp cận tài liệu không?

Người học không cần có kiến thức lập trình từ trước. Giáo trình bắt đầu từ mức độ cơ bản nhất với ngôn ngữ đánh dấu siêu văn bản HTML, giải thích chi tiết cấu trúc từng thẻ lệnh và cung cấp hướng dẫn thao tác đồ họa từng bước trên phần mềm.

3. Giáo trình này có điểm gì khác biệt so với các tài liệu thiết kế web khác?

Khác với các tài liệu thuần túy lý thuyết hoặc chỉ dạy viết mã code, giáo trình kết hợp chặt chẽ giữa việc hiểu sâu bản chất mã lệnh HTML thô và kỹ năng vận hành các công cụ thiết kế trực quan WYSIWYG (FrontPage và Dreamweaver), giúp người học nhanh chóng xây dựng được sản phẩm website hoàn chỉnh.

4. Làm sao để tự học hiệu quả theo nội dung cuốn giáo trình này?

Người học nên thực hành gõ trực tiếp các đoạn mã mẫu trong Chương I trên trình soạn thảo đơn giản để hiểu cách thức hoạt động của các cặp thẻ trước khi chuyển sang thao tác kéo thả trên FrontPage (Chương II) và Dreamweaver (Chương III). Sau mỗi phần lý thuyết, cần hoàn thành đầy đủ các bài thực hành tạo trang khung và biểu mẫu.

5. Tài liệu có đề xuất các nguồn tham khảo bổ trợ nào không?

Giáo trình được xây dựng dựa trên sự kế thừa và đối chiếu với các tài liệu tham khảo chính thống, bao gồm:

  1. Tự học thiết kế Web – Tác giả Nguyễn Hữu Tuấn.
  2. Giáo trình Thiết kế Web – Nhà xuất bản Thông tin và Truyền thông.
  3. Giáo trình Thiết kế Web – Nhà xuất bản Giáo dục.
  4. Báo cáo đề tài Nghiên cứu khoa học năm 2018 – Trường Cao đẳng Giao thông Vận tải Trung ương I.

Kết luận

Giáo trình Thiết kế Web (Trường Cao đẳng Giao thông Vận tải Trung ương I) là tài liệu học tập chuẩn mực và có cấu trúc sư phạm rõ ràng dành cho hệ đào tạo Trung cấp và Cao đẳng ngành Tin học ứng dụng. Giá trị cốt lõi của tài liệu nằm ở khả năng hệ thống hóa toàn diện các thành phần đánh dấu của ngôn ngữ HTML nền tảng, kết hợp với quy trình hướng dẫn trực quan thông qua hai phần mềm Microsoft FrontPage và Macromedia Dreamweaver.

Lộ trình học tập đề xuất là nắm vững cấu trúc thẻ mã nguồn (HTML) $\rightarrow$ thành thạo thao tác đóng gói giao diện (FrontPage) $\rightarrow$ làm chủ quy trình quản lý site và kiểm soát biểu mẫu nâng cao (Dreamweaver). Để nâng cao kiến thức, người học được khuyến nghị tiếp tục nghiên cứu các tài liệu bổ trợ về ngôn ngữ định dạng CSS, ngôn ngữ kịch bản JavaScript và tiêu chuẩn HTML5 hiện đại từ các nguồn tham khảo của W3C và các nhà xuất bản chuyên ngành.