TỔNG QUAN VỀ GIÁO TRÌNH HƯỚNG DẪN SỬ DỤNG ADOBE DREAMWEAVER 2021
Tổng quan về giáo trình
Tài liệu giảng dạy Adobe Dreamweaver do Khoa Thiết kế Thời trang – Trường Cao đẳng Công nghệ Thành phố Hồ Chí Minh (Vinatex TP.HCM) biên soạn và ban hành lưu hành nội bộ vào tháng 8 năm 2021. Môn học giữ vị trí nền tảng trong khối kiến thức công nghệ và tin học ứng dụng, hỗ trợ sinh viên ngành thời trang và công nghệ tiếp cận quy trình xây dựng giao diện số, phục vụ trực tiếp cho hoạt động giới thiệu sản phẩm và quảng bá thương hiệu trực tuyến.
Về mục tiêu học tập, giáo trình chuẩn bị cho người học khả năng:
- Trình bày và thực hiện quy trình 8 bước lập kế hoạch xây dựng website thương mại/giới thiệu.
- Thao tác thành thạo trên phần mềm Adobe Dreamweaver CC ở các chế độ làm việc (
Code, Split, Design, Live, Inspect).
- Vận dụng các ngôn ngữ đánh dấu và định dạng bao gồm HTML5 và CSS để xây dựng cấu trúc văn bản, bảng biểu, liên kết, biểu mẫu dữ liệu và hình ảnh.
- Quản trị cấu trúc trang, liên kết khung (
frameset), tạo mẫu (template) và nắm vững quy trình đưa website lên máy chủ lưu trữ (hosting).
Cấu trúc tài liệu được thiết kế theo tiến trình 9 chương học đi từ tổng quan công cụ, kế hoạch phát triển web, cú pháp ngôn ngữ nền tảng đến các kỹ thuật triển khai bố cục và điều hướng chuyên sâu. Điểm đặc thù của giáo trình là sự kết hợp song song giữa phương pháp soạn thảo trực quan WYSIWYG (What You See Is What You Get) với việc can thiệp trực tiếp vào mã nguồn HTML/CSS, giúp người học không chuyên về lập trình thuần túy vẫn có thể xây dựng website hoàn chỉnh theo tiêu chuẩn kỹ thuật.
Nội dung kiến thức cốt lõi
Các chương/chủ đề chính
Giáo trình phân bổ dung lượng qua 9 chương trọng tâm với tính liên kết tuần tự:
- 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 (khởi đầu từ Macromedia năm 1997 đến Adobe năm 2005 và các phiên bản Dreamweaver CC). Trình bày quy trình cài đặt 6 bước, quản trị giao diện (Thanh Menu, Thanh Toolbars, Panels Insert, Files, CSS Styles, Tag Selectors, Properties Inspector, Workspace). Đưa ra quy trình lập kế hoạch website gồm 8 bước: xác định khách hàng, xác định mục đích thiết kế, xác định đối tượng truy cập, xây dựng sơ đồ bố cục website dạng cây, chuẩn bị nội dung theo module, chuẩn bị đồ họa hình ảnh, lập kế hoạch thời gian thực hiện, và tìm kiếm nhà cung cấp tên miền, hosting.
- Chương 2: Giới thiệu về Tag HTML: Phân biệt trang web tĩnh và trang web động; giải thích khái niệm siêu văn bản (HyperText), cấu trúc tài liệu HTML (
<html>, <head>, <title>, <body>), các loại thẻ mở/thẻ đóng, thẻ đơn (
<hr>). Cung cấp bảng tra cứu chức năng của hơn 50 thẻ HTML tiêu chuẩn (<h1>-<h6>, <p>, <a>, <img>, <div>, <span>, <ul>, <ol>, <li>, <table>, <form>, <marquee>,...).
- Chương 3: Kỹ thuật định dạng CSS: Khái niệm Style và Style Sheet; các ưu điểm của CSS trong việc tách biệt nội dung và hiển thị. Cấu trúc khai báo định dạng cho tag toàn trang, class (ký hiệu
.), định dạng cho đối tượng cụ thể (ID qua ký hiệu #) và định dạng theo vùng phân cấp. Hướng dẫn sử dụng CSS Panel để kiểm soát 8 nhóm thuộc tính: Font, Background, Block, Border, Box, List, Positioning, Extensions, cùng tính năng kiểm tra độ tương thích trình duyệt (Check Browser Compatibility).
- Chương 4: Hình ảnh và Hyperlink trong DW: Cú pháp thẻ
<img>, quy định các thuộc tính src, alt, width, height; kỹ thuật lồng thẻ ảnh trong thẻ <a> để tạo liên kết hình ảnh. Hướng dẫn thiết lập siêu liên kết qua thanh Properties, liên kết đến tệp Microsoft Word/Excel, liên kết thư điện tử (mailto:), liên kết tải tệp (download). Phân loại và so sánh ưu nhược điểm giữa đường dẫn tuyệt đối (gồm giao thức, máy chủ, đường dẫn tệp) và đường dẫn tương đối.
- Chương 5: Form: Cấu trúc biểu mẫu thu thập thông tin với thẻ
<form>, thuộc tính action, phương thức truyền dữ liệu (method), các phần tử nhập liệu <input> (text, submit, button, checkbox, radio), và kỹ thuật nhóm dữ liệu với <fieldset>.
- Chương 6: Bảng và Trình bày trang trong DW: Sử dụng các thẻ
<table>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot> để tạo bảng và quản lý cấu trúc hiển thị; kỹ thuật tạo và quản lý mẫu giao diện (template), tạo trang mới từ template và quy trình xuất bản web lên hosting.
- Chương 7, 8 & 9: Khung (Frame), Phân tích hành vi (Behaviors) và Framesets nâng cao: Cấu trúc bộ khung với thẻ
<frameset>, <frame>, <noframes>, các thuộc tính name và target (_blank, _self, _parent, _top); phân tích hành vi khách hàng (behaviors) tương tác với biểu mẫu; kỹ thuật tạo menu điều hướng kết hợp pseudo-class trong CSS.
Kiến thức nền tảng được xây dựng
- Lý thuyết cấu trúc tài liệu web (Document Structure): Hệ thống phân cấp DOM cơ bản bắt đầu từ thẻ bao ngoài
<html>, phần khai báo siêu dữ liệu trong <head> và phần nội dung hiển thị trong <body>.
- Mô hình định dạng tách biệt (Separation of Concerns): Nguyên lý xây dựng khung sườn bằng HTML và quản lý toàn bộ diện mạo (màu sắc, kích thước, khoảng cách lề
margin/padding, vị trí position) qua các tập tin CSS riêng biệt (.css).
- Mô hình tham chiếu tài nguyên: Bản chất định tuyến đường dẫn tuyệt đối (Absolute URL) gắn liền với tên miền/máy chủ và đường dẫn tương đối (Relative URL) phụ thuộc vào cấu trúc thư mục cục bộ của dự án.
Kỹ năng phát triển
- Kỹ năng kỹ thuật (Technical Skills): Viết và sửa mã HTML5/CSS chuẩn; quản lý môi trường làm việc thông qua bảng điều khiển
Properties Inspector, Tag Selector, Panel CSS; định dạng mã tự động với lệnh Apply Source Formatting; cấu hình đa trình duyệt trong mục Preview.
- Kỹ năng phân tích (Analytical Skills): Đánh giá đối tượng khách hàng mục tiêu để lựa chọn bố cục, màu sắc phù hợp (ví dụ: phong cách thanh lịch cho thời trang công sở nữ, phong cách năng động cho sinh viên); phân tích ưu - nhược điểm của các loại đường dẫn nhằm tối ưu hóa khả năng di chuyển mã nguồn giữa các máy chủ.
- Kỹ năng thực hành tổng hợp (Practical Competencies): Quy hoạch sơ đồ cây cho website; thiết lập không gian làm việc cá nhân hóa (
My Workspace); kiểm tra tương thích trên nhiều kích thước màn hình qua MultiScreen Preview (Smart Phone, kích thước tùy biến 400x400, Full Size).
Phương pháp giảng dạy và học tập
Phương pháp tiếp cận sư phạm
Giáo trình áp dụng mô hình giảng dạy thực hành trực tiếp trên máy vi tính (Lab-based Learning), kết hợp chặt chẽ giữa nguyên lý thiết kế hệ thống và thao tác công cụ phần mềm. Quy trình truyền đạt đi từ nhận biết trực quan thông qua giao diện đồ họa (WYSIWYG) đến việc giải thích cơ chế hoạt động của mã nguồn tại cửa sổ Code và Split.
Bài tập và hệ thống thực hành
- Thực hành thao tác theo quy trình: Các bài thực hành được module hóa từng bước chi tiết (ví dụ: quy trình 6 bước cài đặt phần mềm, quy trình tạo trang mới qua
Menu File > New > Blank Page > HTML, quy trình tạo CSS Rule mới trong Panel CSS).
- Câu hỏi ôn tập cuối chương: Mỗi chương đều kết thúc bằng hệ thống câu hỏi củng cố lý thuyết và yêu cầu thực hành cụ thể:
- Chương 1: Định nghĩa phần mềm, thực hiện cài đặt và trình bày giao diện Dreamweaver.
- Chương 2: Định nghĩa HTML, viết cấu trúc tài liệu cơ bản và thực hiện cú pháp chèn hình ảnh.
- Chương 3: Viết mã định dạng văn bản bằng CSS và thực hiện thao tác quản lý trên Panel CSS.
- Chương 4: Chèn hình ảnh kết hợp siêu liên kết Hyperlink vào trang web đã thiết kế ở chương trước.
Phương pháp đánh giá và tự học
- Đánh giá năng lực: Kết hợp giữa đánh giá quá trình thông qua các bài tập tạo trang đơn lẻ (tạo form, tạo bảng, tạo liên kết) và đánh giá tổng kết bằng đồ án xây dựng website hoàn chỉnh có sơ đồ cây, bố cục layout và xuất bản lên môi trường hosting.
- Hướng dẫn tự học: Sinh viên sử dụng chức năng kiểm tra chính tả (
Check Spelling), kiểm tra tính tương thích trình duyệt (Check Browser Compatibility), kết hợp xem trước mã nguồn (View Page Source) và tra cứu hệ thống trợ giúp tích hợp của Adobe (Menu Help).
Điểm nổi bật và cập nhật
Giáo trình ghi nhận các tính năng và tiêu chuẩn kỹ thuật hiện đại của phiên bản Adobe Dreamweaver CC:
| Nhóm tính năng |
Chi tiết kỹ thuật được tích hợp trong giáo trình |
| Framework & Tiêu chuẩn Web |
Tích hợp hệ thống lưới Bootstrap 4.0; hỗ trợ các thẻ cấu trúc HTML5 và chuẩn CSS3; hỗ trợ CMS (WordPress, Joomla, Drupal). |
| Tối ưu hóa môi trường lập trình |
Trình biên soạn mã tích hợp Emmet; hỗ trợ PHP 7; cải tiến công cụ tìm kiếm và thay thế; hỗ trợ kiểm soát phiên bản qua GIT. |
| Hiển thị & Đa nền tảng |
Hỗ trợ màn hình độ phân giải cao HiDPI; hỗ trợ đa màn hình trên hệ điều hành Windows; kiến trúc phần mềm 64-bit. |
| Thiết kế Web đáp ứng (Responsive) |
Công cụ MultiScreen Preview cho phép xem trước và giả lập kích thước hiển thị trên Smart Phone, Desktop và các kích thước khung nhìn tùy chỉnh. |
| Xem trước thời gian thực |
Tính năng Live View và Live Code hỗ trợ nạp trang trực tiếp để kiểm tra cấu trúc mã nguồn đang thực thi mà không cần thoát khỏi môi trường làm việc. |
Về mặt ứng dụng thực tiễn, tài liệu liên kết chặt chẽ kiến thức thiết kế web với ngành công nghiệp thời trang và thương mại may mặc. Các ví dụ về xây dựng kế hoạch website (Chương 1) và phân tích hành vi người dùng (Chương 8) đều lấy dữ liệu từ bài toán kinh doanh thời trang thực tế (thời trang công sở, thời trang giới trẻ), giúp sinh viên kết nối trực tiếp kỹ năng tin học với chuyên ngành đào tạo.
Đối tượng sử dụng giáo trình
- Sinh viên chuyên ngành: Sinh viên bậc Cao đẳng và Đại học ngành Thiết kế Thời trang, Công nghệ May, Thiết kế Đồ họa hoặc các ngành kỹ thuật tại Trường Cao đẳng Công nghệ TP.HCM có học phần liên quan đến thiết kế trang web và truyền thông số.
- Yêu cầu kiến thức tiên quyết (Prerequisites):
- Kỹ năng tin học văn phòng căn bản (thao tác quản lý tập tin, thư mục, sao chép, định dạng văn bản tương tự môi trường Microsoft Office/Word).
- Khái niệm cơ bản về xử lý ảnh số (định dạng tệp
.jpg, .png, .gif, kích thước pixel width/height).
- Giảng viên: Sử dụng tài liệu làm đề cương chi tiết cho bài giảng lý thuyết tại lớp và bài tập thực hành tại phòng máy; xây dựng tiêu chí chấm điểm dựa trên danh mục thẻ HTML, thuộc tính CSS và quy trình 8 bước lập kế hoạch.
- Tham khảo và tự nghiên cứu: Phù hợp cho người mới bắt đầu học thiết kế web cần một tài liệu hướng dẫn từng bước (step-by-step) có hình ảnh minh họa thao tác giao diện rõ ràng.
Câu hỏi thường gặp
1. Giáo trình này phù hợp với đối tượng nào?
Giáo trình được biên soạn đặc thù cho sinh viên khối ngành ứng dụng (như Thiết kế Thời trang tại Vinatex TP.HCM) và người mới bắt đầu học thiết kế website muốn kết hợp giữa kỹ năng viết mã cơ bản và thao tác đồ họa trực quan.
2. Cần chuẩn bị kiến thức nền tảng nào trước khi học?
Người học chỉ cần nắm vững kỹ năng sử dụng máy tính cơ bản, thao tác tệp tin và kiến thức đồ họa số sơ cấp. Các khái niệm về lập trình web như HTML, CSS, Form, Frameset đều được hướng dẫn chi tiết từ đầu trong nội dung giáo trình.
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 thuần túy?
Giáo trình tiếp cận theo hướng công cụ kết hợp quy trình: không chỉ dạy viết mã nguồn mà tập trung hướng dẫn sử dụng phần mềm Adobe Dreamweaver CC, đồng thời cung cấp quy trình 8 bước lập kế hoạch xây dựng website từ khâu xác định khách hàng đến mua tên miền và hosting.
4. Phương pháp tự học giáo trình như thế nào để đạt hiệu quả cao?
Người học cần cài đặt phần mềm theo hướng dẫn tại Chương 1, thực hiện tuần tự các bước tạo tệp, thường xuyên chuyển đổi giữa chế độ Code, Split và Live để quan sát sự thay đổi giao diện khi mã nguồn được chỉnh sửa, và 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 được cung cấp kèm theo không?
Tài liệu cung cấp hệ thống bảng tra cứu tổng hợp: Bảng chức năng các thẻ HTML (Chương 2), Bảng cú pháp viết HTML (Bảng 2.2), Bảng phân loại và so sánh đường dẫn (Bảng 4.1, 4.2, 4.3), cùng danh mục Tài liệu tham khảo tại trang 88 để người học tra cứu mở rộng.
Kết luận
Tài liệu giảng dạy Adobe Dreamweaver (lưu hành nội bộ tháng 8/2021) của Khoa Thiết kế Thời trang – Trường Cao đẳng Công nghệ TP.HCM là tài liệu học thuật có cấu trúc hoàn chỉnh, chuẩn hóa toàn bộ kỹ năng xây dựng trang web căn bản. Lộ trình học tập được thiết kế mạch lạc từ khâu hoạch định chiến lược website, làm chủ giao diện Dreamweaver, nắm bắt cú pháp HTML/CSS, đến việc đóng gói biểu mẫu dữ liệu và xuất bản trang web.
Để tối ưu hóa hiệu quả tiếp thu, người học nên kết hợp chặt chẽ việc đọc tài liệu với thực hành trên phần mềm Adobe Dreamweaver CC, đồng thời sử dụng các bảng tra cứu thuộc tính CSS và thẻ HTML được đính kèm trong giáo trình làm tài liệu tham khảo thường trực trong suốt quá trình xây dựng dự án web.
