THÔNG TIN TỔNG QUAN VÀ PHÂN TÍCH HỌC THUẬT: GIÁO TRÌNH ADOBE DREAMWEAVER

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

Giáo trình Môn học/Mô đun: Adobe Dreamweaver (Mã môn học: 17) là tài liệu đào tạo chuyên ngành do tác giả Nguyễn Minh Thuận chủ biên, được ban hành phục vụ chương trình đào tạo trình độ Cao đẳng cho ngành Thiết kế đồ họa (TKĐH) thuộc Khoa Thiết kế thời trang, Trường Cao đẳng Công nghệ TP.HCM (theo quyết định ban hành của Trường Cao đẳng Kinh tế - Kỹ thuật Vinatex TP.HCM, năm 2021). Trong chương trình khung, mô đun này được bố trí giảng dạy vào học kỳ 3, đóng vai trò trang bị các nguyên tắc và kỹ thuật nền tảng về thiết kế giao diện web cho sinh viên đồ họa.

Về mục tiêu đào tạo (Learning Outcomes), giáo trình xác định chuẩn đầu ra theo ba nhóm năng lực:

  • Kiến thức: Người học trình bày được các công cụ của phần mềm Dreamweaver; cấu trúc chuẩn của một tài liệu HTML; phương pháp ứng dụng các thẻ (tag) cơ bản; nguyên lý kết hợp HTML với CSS; cấu trúc các bảng kiểu định dạng và hệ thống bộ chọn (selector), thuộc tính (properties) trong CSS.
  • Kỹ năng: Người học có khả năng sử dụng phần mềm Dreamweaver để xây dựng hoàn chỉnh website tĩnh bằng HTML và CSS; làm chủ các thao tác định dạng và sắp xếp bố cục trang web.
  • Năng lực tự chủ và trách nhiệm: Rèn luyện tính tỉ mỉ, kỹ luật học tập và tinh thần chủ động trong thao tác kỹ thuật chuyên môn.

Giáo trình có kết cấu gồm 9 chương, được biên soạn theo nguyên tắc tích hợp: kết hợp giữa việc tìm hiểu mã nguồn siêu văn bản với các thao tác trực quan trên giao diện đồ họa (WYSIWYG - What You See Is What You Get) của phần mềm Dreamweaver CC. Điểm đặc sắc của tài liệu là cung cấp quy trình lập kế hoạch dự án bài bản song song với các hướng dẫn kỹ thuật chi tiết theo từng bảng thuộc tính và trình đơn điều khiển.

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

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

Nội dung giáo trình được triển khai theo tiến trình logic từ thiết lập môi trường làm việc, nắm bắt cú pháp ngôn ngữ nền tảng, đến xây dựng các thành phần tương tác và đóng gói layout:

  • Chương 1: Giới thiệu Dreamweaver: Cung cấp thông tin tổng quan về lịch sử phát triển của Dreamweaver (từ Macromedia năm 1997 đến Adobe năm 2005), quy trình cài đặt phần mềm và thiết lập không gian làm việc (Workspace: Coder, Designer, Classic). Chương này chuẩn hóa quy trình 8 bước lập kế hoạch xây dựng một website: (1) Xác định khách hàng; (2) Xác định mục đích thiết kế; (3) Xác định đối tượng truy cập; (4) Xây dựng sơ đồ cây và bố cục; (5) Chuẩn bị nội dung theo module; (6) Chuẩn bị đồ họa, hình ảnh; (7) Lên kế hoạch thời gian; (8) Tìm nhà cung cấp tên miền và hosting.
  • Chương 2: Giới thiệu về Tag HTML: Định nghĩa ngôn ngữ đánh dấu siêu văn bản HTML, cấu trúc tài liệu cơ bản (<html>, <head>, <title>, <body>), phân biệt thẻ mở - thẻ đóng và thẻ đơn (
    , <hr>). Cung cấp bảng tra cứu hơn 40 thẻ HTML cơ bản gồm các khối định dạng tiêu đề (<h1>-<h6>), phân đoạn (<p>), danh sách (<ul>, <ol>, <li>), bảng (<table>), liên kết (<a>), hình ảnh (<img>), marquee và các thẻ phân chia cấu trúc (<div>, <span>, <header>, <footer>, <nav>, <main>).
  • Chương 3: CSS: Trình bày kỹ thuật phân tầng Style Sheets nhằm định dạng giao diện độc lập với cấu trúc HTML. Giới thiệu các loại định dạng: định dạng theo thẻ (Tag Selector), định dạng theo định danh ID (#TênĐốiTượng), định dạng theo lớp Class (.TênClass) và định dạng vùng kết hợp. Hướng dẫn sử dụng CSS Panel để quản lý 8 nhóm thuộc tính hiển thị: Font, Background, Block, Border, Box, List, Positioning, Extensions.
  • Chương 4: Hình ảnh và Hyperlink trong DW: Hướng dẫn cú pháp thẻ <img> với các thuộc tính bắt buộc và tùy chọn (src, alt, width, height); kỹ thuật biến hình ảnh thành liên kết; tạo siêu liên kết văn bản, liên kết email (mailto:), liên kết tải tập tin (download), liên kết tài liệu Word/Excel. Phân loại và so sánh ưu - nhược điểm giữa đường dẫn tuyệt đối (Absolute Path) và đường dẫn tương đối (Relative Path).
  • Chương 5: Form: Kỹ thuật tạo biểu mẫu thu thập dữ liệu bằng thẻ <form> với thuộc tính action và method. Cách chèn và cấu hình các điều khiển biểu mẫu: trường nhập văn bản (<input type="text">), nút gửi dữ liệu (submit), nhóm tùy chọn duy nhất (Radio Group), nhóm dữ liệu với <fieldset>.
  • Chương 6: Bảng và trình bày trang trong DW: Khai thác hệ thống thẻ bảng (<table>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot>) để quản lý dữ liệu; kỹ thuật tạo trang mới từ mẫu (Template) và các bước đưa website lên hosting.
  • Chương 7: Frame, Chương 8: Behaviors - Form và Chương 9: Framesets: Cung cấp giải pháp phân chia bố cục giao diện đa khung (<frameset>, <frame>), cấu hình thuộc tính điều hướng target (_blank, _self, _top, _parent), phân tích hành vi người dùng (Behaviors), cấu hình điều khiển Check Box và thiết lập trạng thái liên kết động qua CSS Pseudo-class cho thanh điều hướng menu.
TIẾN TRÌNH LOGIC CỦA GIÁO TRÌNH:
[Chương 1: Lập kế hoạch & Thiết lập DW]
[Chương 2 & 3: Cấu trúc HTML & Định dạng CSS]
[Chương 4: Đa phương tiện & Hệ thống siêu liên kết]
[Chương 5 & 6: Xử lý dữ liệu Form & Bố cục Table/Template]
[Chương 7, 8 & 9: Bố cục Frame, Hành vi tương tác & Điều hướng nâng cao]

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

  1. Mô hình tài liệu siêu văn bản (HyperText Markup): Người học nắm vững nguyên lý hoạt động của các trang web tĩnh (lưu trữ tập tin .html trên máy chủ webserver và hiển thị qua trình duyệt) đối chiếu với trang web động (phát sinh mã nguồn từ server-side scripts như PHP, C#).
  2. Nguyên lý phân tách Cấu trúc và Định dạng (Separation of Concerns): Tách biệt tầng dữ liệu HTML khỏi tầng hiển thị CSS, cho phép tối ưu hóa khả năng tái sử dụng mã nguồn, đồng bộ giao diện toàn trang và hỗ trợ làm việc nhóm trong các dự án quy mô lớn.
  3. Hệ thống định tuyến tài nguyên mạng: Hiểu rõ cơ chế định danh vị trí tài nguyên qua việc phân tích cấu trúc giao thức (Protocol), máy chủ (Host) và đường dẫn (Path) trong đường dẫn tuyệt đối và tương đối.

Kỹ năng phát triển

  • Kỹ năng kỹ thuật: Viết mã HTML/CSS đúng chuẩn ngữ nghĩa; sử dụng các chế độ hiển thị Code, Design, Split View, Live Code và Inspect Panel; thiết lập không gian làm việc cá nhân (Workspace); kiểm tra tính tương thích trình duyệt (Browser Compatibility).
  • Kỹ năng phân tích: Khảo sát và phân loại nhóm người dùng mục tiêu; xây dựng cấu trúc sơ đồ cây cho website; phân tích hành vi thao tác của người dùng trên biểu mẫu.
  • Năng lực thực hành: Tạo dựng giao diện website tĩnh hoàn chỉnh, cấu hình các trường nhập liệu an toàn, xử lý tối ưu hóa hình ảnh hiển thị và chuyển giao dữ liệu lên môi trường máy chủ (Hosting).

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

Giáo trình được thiết kế theo phương pháp sư phạm tiếp cận trực quan, kết hợp song song giữa lý thuyết cú pháp và quy trình thực hành từng bước (Step-by-step tutorial). Mọi thao tác đều được minh họa bằng các sơ đồ điều hướng lệnh thực tế từ thanh Menu (File, Edit, View, Insert, Modify, Format, Commands, Site, Window, Help) và bảng thuộc tính (Properties Inspector).

MÔ HÌNH TIẾP CẬN SƯ PHẠM:
  • Bài tập và Thực hành: Cuối mỗi chương đều tích hợp hệ thống "Câu hỏi ôn tập" đòi hỏi người học vừa phải trình bày bản chất khái niệm (ví dụ: HTML là gì, CSS là gì, phân biệt đường dẫn), vừa phải thao tác trực tiếp trên máy tính (ví dụ: tạo cấu trúc tài liệu HTML, viết mã định dạng CSS, chèn ảnh có liên kết, tạo bảng và cấu hình Radio Group).
  • Phương pháp đánh giá: Đánh giá thông qua sản phẩm đầu ra bao gồm độ chính xác của cú pháp mã nguồn, tính tương thích của giao diện trên các trình duyệt khác nhau và khả năng hoàn thiện bố cục trang theo bản kế hoạch đề ra.
  • Hướng dẫn tự học: Người học được hướng dẫn tận dụng chế độ xem song song (Tab Split) để quan sát sự thay đổi tức thì giữa dòng lệnh và giao diện hiển thị. Đồng thời, giáo trình định hướng người học sử dụng tính năng Apply Source Formatting trong menu Commands để tự động chuẩn hóa định dạng mã nguồn và dùng công cụ Check Spelling để rà soát lỗi văn bản.

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

Giáo trình ghi nhận các nâng cấp kỹ thuật của phiên bản phần mềm Adobe Dreamweaver CC so với các phiên bản tiền nhiệm:

  • Tích hợp công nghệ hiện đại: Hỗ trợ Bootstrap 4.0, kiến trúc phần mềm 64-bit, hỗ trợ viết mã nhanh với Emmet, tích hợp Git để quản lý phiên bản mã nguồn, tương thích PHP 7 và kho phông chữ trực tuyến Adobe Edge Web Fonts.
  • Thiết kế đáp ứng (Responsive Web Design): Cung cấp hệ thống lưới (Grid System) và công cụ MultiScreen Preview, cho phép người học xem trước và hiệu chỉnh giao diện trên nhiều kích thước màn hình khác nhau (màn hình Smart Phone, kích thước tùy biến 400x400 pixel, hoặc Full Size).
  • Xem trước thời gian thực (Real-time Preview): Cho phép kết nối và kiểm tra giao diện trực tiếp trên trình duyệt hoặc thiết bị di động, hỗ trợ màn hình độ phân giải cao HiDPI và môi trường đa màn hình trên hệ điều hành Windows.
  • Hỗ trợ hệ quản trị nội dung (CMS): Khả năng đọc và làm việc trực tiếp với các cấu trúc giao diện mẫu của WordPress, Joomla và Drupal.
Tính năng truyền thống Cập nhật trên Dreamweaver CC trong giáo trình
Thiết kế kích thước cố định Hỗ trợ Responsive Web Design, MultiScreen Preview
Viết mã thủ công từng thẻ Hỗ trợ Emmet, chèn nhanh phần tử HTML5
Soạn thảo độc lập Tích hợp Git, kết nối Adobe Creative Cloud
Quản lý CSS cơ bản Trình chỉnh sửa CSS trực quan, phân nhóm thuộc tính chi tiết

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

  • Sinh viên: Phục vụ trực tiếp cho sinh viên năm thứ hai (Học kỳ 3) thuộc ngành Thiết kế đồ họa (TKĐH) và ngành Thiết kế thời trang trình độ Cao đẳng. Tài liệu cũng phù hợp làm tài liệu học tập cho sinh viên các ngành Công nghệ thông tin, Truyền thông đa phương tiện cần trang bị kiến thức nền tảng về Web Layout.
  • Yêu cầu kiến thức tiên quyết (Prerequisites): Người học cần có kỹ năng sử dụng máy tính cơ bản, quản lý tệp tin và thư mục trên hệ điều hành Windows/macOS; hiểu biết cơ bản về xử lý hình ảnh số (Photoshop, Illustrator) là một lợi thế khi chuẩn bị tài nguyên đồ họa cho trang web.
  • Giảng viên: Sử dụng giáo trình làm đề cương bài giảng chuẩn cho học phần Adobe Dreamweaver (Thời lượng tương ứng 17 mô đun/bài học), khai thác hệ thống bảng thẻ HTML, bảng thuộc tính CSS và bài tập mẫu để biên soạn bài giảng lý thuyết và bài thực hành xưởng (Lab).
  • Tự học và Tham khảo: Là tài liệu tham cứu cho người mới bắt đầu học thiết kế web tĩnh, hỗ trợ tra cứu nhanh các cú pháp thẻ, thuộc tính CSS và quy trình xuất bản website lên môi trường Internet.

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

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

Giáo trình được biên soạn riêng cho sinh viên bậc Cao đẳng ngành Thiết kế đồ họa và Thiết kế thời trang, đồng thời phù hợp với mọi đối tượng bắt đầu tiếp cận thiết kế giao diện web cơ bản.

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

Người học chỉ cần kỹ năng tin học văn phòng cơ bản và khả năng quản lý tệp tin trên máy tính. Các kiến thức về ngôn ngữ HTML, CSS và kỹ thuật sử dụng phần mềm đều được giảng dạy từ mức độ nhập môn.

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 khác là gì?

Tài liệu tiếp cận từ góc nhìn của ngành Thiết kế đồ họa: không đi sâu vào logic lập trình phức tạp phía máy chủ (Back-end) mà tập trung tối ưu hóa quy trình thiết kế bố cục trực quan (Front-end Static), kết hợp giữa việc chỉnh sửa mã nguồn và thao tác kéo thả trên môi trường WYSIWYG của Adobe Dreamweaver.

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

Người học nên tuân thủ quy trình 8 bước lập kế hoạch ở Chương 1 trước khi bắt tay vào viết mã. Trong quá trình học, nên bật chế độ xem song song Tab Split hoặc Live Code để đối chiếu trực tiếp giữa dòng lệnh và kết quả hiển thị giao diện, đồng thời hoàn thành đầy đủ các bài tập ôn tập cuối mỗi chương.

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

Giáo trình tích hợp sẵn các bảng tra cứu cú pháp HTML (Bảng 2.1, 2.2), bảng thuộc tính CSS, bảng so sánh đường dẫn liên kết và hệ thống bài tập thực hành. Ở trang 88, giáo trình cung cấp danh mục tài liệu tham khảo trong và ngoài nước để người học mở rộng nghiên cứu.

Kết luận

Giáo trình Môn học/Mô đun: Adobe Dreamweaver cung cấp hệ thống kiến thức toàn diện về kỹ thuật xây dựng giao diện web tĩnh, định hình chuẩn mực kỹ năng cho sinh viên ngành Thiết kế đồ họa trình độ Cao đẳng. Lộ trình học tập được thiết lập chặt chẽ từ khâu lập kế hoạch dự án 8 bước, cấu trúc tài liệu HTML, định dạng giao diện bằng CSS, cho đến quản lý dữ liệu bảng, biểu mẫu và xuất bản website lên hosting. Để củng cố năng lực chuyên môn, người học cần kết hợp việc nghiên cứu lý thuyết trong giáo trình với việc thực hành liên tục trên phần mềm Adobe Dreamweaver CC và tra cứu thêm các tài liệu chuyên ngành được giới thiệu tại danh mục tham khảo (trang 88).