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

Giáo trình mô đun Thiết kế web (Mã mô đun: MĐ18, mã biểu mẫu quản lý: ĐTSV/04/04, Ban hành lần: 3) là tài liệu đào tạo chuyên môn được biên soạn bởi tác giả Nguyễn Phạm Ái Hương (Chủ biên), lưu hành nội bộ tại Trường Cao đẳng Kỹ thuật Công nghệ Bà Rịa – Vũng Tàu trực thuộc Ủy ban Nhân dân tỉnh Bà Rịa – Vũng Tàu.

+--------------------------------------------------------------------------------+
|                         THÔNG TIN HỌC THUẬT MÔ ĐUN                             |
+---------------------+----------------------------------------------------------+
| Tên mô đun          | Thiết kế web (Mã mô đun: MĐ18)                           |
| Trình độ đào tạo    | Cao đẳng                                                 |
| Ngành/Nghề          | Quản trị mạng / Công nghệ thông tin                      |
| Đơn vị ban hành     | Trường Cao đẳng Kỹ thuật Công nghệ Bà Rịa – Vũng Tàu     |
| Chủ biên            | Nguyễn Phạm Ái Hương                                     |
| Tổng thời lượng     | 90 giờ (Lý thuyết: 22h | Thực hành: 58h | Kiểm tra: 10h)  |
+---------------------+----------------------------------------------------------+

Vị trí trong chương trình đào tạo

Mô đun MĐ18 thuộc khối kiến thức chuyên ngành của chương trình đào tạo trình độ Cao đẳng nghề Quản trị mạng và Công nghệ thông tin. Về mặt phân phối chương trình, mô đun được bố trí giảng dạy sau khi người học đã hoàn thành các môn học cơ sở ngành và học phần Đồ họa ứng dụng. Vị trí này đảm bảo sinh viên đã có kỹ năng xử lý tư liệu hình ảnh và nền tảng công nghệ thông tin cơ bản trước khi bước vào quy trình xây dựng ứng dụng web.

Mục tiêu học tập (Learning Outcomes)

Chuẩn đầu ra của giáo trình được xác định trên ba phương diện cụ thể:

  • Về kiến thức: Người học nắm vững công dụng của các thẻ HTML, chuẩn HTML5, các thuộc tính định dạng của CSS và CSS3; hiểu nguyên lý lập trình kịch bản với JavaScript, chức năng của thư viện jQuery, cũng như quy trình quản lý dự án trên phần mềm Adobe Dreamweaver và quy trình xuất bản (publish) website lên Internet hoặc máy chủ cục bộ.
  • Về kỹ năng: Người học có năng lực phân chia bố cục, thiết kế giao diện hoàn chỉnh bằng HTML5/CSS3; lập trình nhúng xử lý tương tác cơ bản bằng JavaScript; ứng dụng các thành phần Template, Navigation, Menu trong Dreamweaver; tạo hiệu ứng động và giao diện bằng jQuery; đăng ký dịch vụ lưu trữ (web hosting) miễn phí và triển khai trang web lên máy chủ Web (Web Server/Local IIS).
  • Về năng lực tự chủ và trách nhiệm: Rèn luyện ý thức tổ chức kỷ luật, tác phong công nghiệp, an toàn vệ sinh lao động và thiết bị phòng máy; hình thành tính chủ động, tư duy độc lập, khả năng nghiên cứu tự cập nhật kiến thức chuyên môn và năng lực điều hành, phối hợp làm việc nhóm.

Cấu trúc và phương pháp tiếp cận

Giáo trình có tổng thời lượng 90 giờ, phân bổ thành 8 bài học tích hợp chặt chẽ giữa lý thuyết (22 giờ), thực hành/thảo luận (58 giờ) và kiểm tra định kỳ (10 giờ). Phương pháp tiếp cận của tài liệu đi từ việc thiết lập không gian làm việc cục bộ, nắm bắt cú pháp cốt lõi, hoàn thiện mỹ thuật giao diện, bổ sung tầng xử lý hành vi tương tác, và kết thúc ở khâu triển khai hạ tầng máy chủ thực tế.

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

+-------------------------------------------------------------------------------+
|                   TIẾN TRÌNH 8 BÀI HỌC TRONG GIÁO TRÌNH                       |
+-------------------------------------------------------------------------------+
| Bài 1: Môi trường Dreamweaver & Thẻ HTML (4h)                                  |
| Bài 2: Tạo trang web bằng HTML5 (15h)                                         |
| Bài 3: Hoàn chỉnh giao diện trang web với CSS (13h)                           |
| Bài 4: Tùy biến giao diện web với CSS3 (14h)                                  |
| Bài 5: Xử lý tương tác với JavaScript (12h)                                   |
| Bài 6: Kỹ thuật thiết kế nâng cao (10h)                                       |
| Bài 7: Tạo giao diện chuyên nghiệp bằng jQuery (18h)                          |
| Bài 8: Publish website (4h)                                                   |
+-------------------------------------------------------------------------------+

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

Bài 1: Môi trường tạo trang web tĩnh Dreamweaver, thẻ HTML (4 giờ)

  • Tổng quan môi trường: Giới thiệu công cụ Adobe Dreamweaver; kỹ thuật quản lý bảng điều khiển (palette), quản lý site thông qua hộp thoại Site Setup và Manage Sites.
  • Tổ chức cấu trúc site: Phân chia cây thư mục chuẩn gồm thư mục images (chứa tập tin đồ họa .gif, .jpg), thư mục styles (chứa tập tin .css), thư mục scripts (chứa mã .js) và tập tin gốc index.html.
  • Không gian làm việc: Sử dụng linh hoạt 3 vùng nhìn gồm Code (soạn thảo mã nguồn), Design (giao diện kéo thả trực quan) và Split (chia đôi màn hình đồng bộ mã và giao diện).
  • Cú pháp HTML cơ bản: Cấu trúc thẻ mở/thẻ đóng; các thẻ cấu trúc văn bản và bảng dữ liệu (META, LINK, STYLE, SCRIPT, TABLE, TR, TD, TH, DIV, P, BR, HR, IMG, A, OL, UL, LI, FORM, INPUT, SELECT, OPTION).

Bài 2: Tạo trang web bằng HTML5 (15 giờ)

  • Thẻ ngữ nghĩa (Semantic Tags): Định nghĩa rõ ràng các khu vực chức năng trên trang bằng <header> (vùng đầu trang/banner), <nav> và <menu> (thanh điều hướng), <section> (phân đoạn nội dung), <article> (bài viết độc lập), và <footer> (thông tin chân trang, bản quyền).
  • Mở rộng biểu mẫu Form: Ứng dụng các thẻ mới <datalist>, <keygen>, <output> cùng các kiểu dữ liệu input chuyên biệt: color, date, time, email, month, week, number, range.
  • Đồ họa vector SVG (Scalable Vector Graphics): Sử dụng phần tử <svg> theo chuẩn W3C để hiển thị đồ họa hai chiều không suy giảm chất lượng khi phóng to; thực hành vẽ hình tròn (<circle> với các thuộc tính cx, cy, fill, stroke) và hình elip (<ellipse> với bán kính trục rx, ry).
  • Đa phương tiện HTML Media: Nhúng âm thanh (<audio>) và video (<video>) trực tiếp không cần plugin phụ trợ bên ngoài, thiết lập thuộc tính src, controls và định tuyến nguồn dữ liệu qua thẻ con <source> cho các định dạng .mp3, .ogg, .wav.

Bài 3: Hoàn chỉnh giao diện trang web với CSS (13 giờ)

  • Phân loại CSS: Nghiên cứu 3 phương thức triển khai quy tắc định dạng gồm External (tập tin rời liên kết qua thẻ <link>), Internal (đặt trong khối thẻ <style>), và Inline (nhúng trực tiếp vào thuộc tính style của phần tử).
  • Bộ chọn (Selectors): Cơ chế định danh qua ID Selector (tiền tố #) và Class Selector (tiền tố .).
  • Thuộc tính bố cục: Thiết lập font-family, color, nhóm thuộc tính đường biên (border), khoảng đệm nội dung (padding), khoảng cách lề (margin), và màu/ảnh nền (background-color, background-image).
  • Kỹ thuật dàn trang: Phương pháp canh giữa giao diện trên màn hình rộng (widescreen LCD) bằng thuộc tính căn lề tự động, reset định dạng mặc định của trình duyệt (list-style: none, border: 0), tạo hiệu ứng chuyển đổi trạng thái menu khi di chuột (:hover), và áp dụng bo góc viền từ 1 đến 4 tham số giá trị bán kính.

Bài 4: Tùy biến giao diện web với CSS3 (14 giờ)

  • Xử lý đường viền và hình nền nâng cao: Kỹ thuật bo góc viền (border-radius), sử dụng hình ảnh làm khung kẻ viền (border-image), thiết lập đa lớp ảnh nền và kiểm soát tỷ lệ hiển thị ảnh nền bằng các giá trị contain và cover.
  • Hệ màu và hiệu ứng quang học: Bổ sung độ trong suốt (opacity), hệ màu 4 kênh RGBA (Red-Green-Blue-Alpha), hệ màu không gian hình trụ HSL (Hue-Saturation-Lightness) và HSLA; kỹ thuật đổ bóng văn bản (text-shadow) và đổ bóng khối hộp (box-shadow).
  • Xử lý hiển thị văn bản: Khống chế tràn dòng nội dung với text-overflow, ngắt dòng văn bản dài qua word-wrap và word-break.
  • Biến đổi hình học (Transforms): Thực thi phép biến đổi 2D gồm tịnh tiến (translate), xoay góc (rotate), co giãn tỷ lệ (scale), làm nghiêng (skew), ma trận tổ hợp matrix(scaleX, skewY, skewX, scaleY, translateX, translateY); phép biến đổi không gian 3D quay quanh các trục rotateX, rotateY, rotateZ.
  • Chuyển động và Mô hình hộp: Tạo hiệu ứng chuyển tiếp trạng thái (transition), xây dựng hoạt cảnh tuần tự (animation); áp dụng thuộc tính box-sizing: border-box nhằm cố định kích thước chiều rộng và chiều cao phần tử khi có sự thay đổi của padding và border.

Bài 5: Xử lý tương tác với JavaScript (12 giờ)

  • Tổng quan ngôn ngữ: Cơ chế thực thi kịch bản phía máy khách (Client-side) trên trình duyệt web; các phương thức nhúng mã trực tiếp trong cặp thẻ <script> đặt tại phần <head> hoặc <body>, hoặc viết tách biệt trong tập tin có phần mở rộng .js.
  • Cú pháp cơ sở: Kỹ thuật khai báo biến bằng từ khóa var, quản lý các kiểu dữ liệu cơ bản, xây dựng logic rẽ nhánh điều kiện, vòng lặp xử lý dữ liệu, định nghĩa mảng và khởi tạo hàm chức năng.

Bài 6: Một số kỹ thuật thiết kế nâng cao (10 giờ)

  • Mẫu giao diện Dreamweaver Template: Tạo lập và sử dụng các mẫu trang định dạng chung nhằm tối ưu hóa việc quản lý các trang con trong site.
  • Thanh điều hướng: Xây dựng cấu trúc Menu và Navigation bar đa tầng.
  • JavaScript nâng cao: Khởi tạo và thao tác với các đối tượng nâng cao để kiểm soát dữ liệu trên tài liệu web.

Bài 7: Tạo giao diện chuyên nghiệp bằng jQuery (18 giờ)

  • Tổng quan thư viện: Khái niệm, cơ chế tích hợp thư viện jQuery vào dự án.
  • Bộ lọc và thao tác DOM: Lọc chọn các phần tử trên trang qua bộ chọn (Selectors), thay đổi động nội dung văn bản, cấu trúc HTML và các thuộc tính của thẻ.
  • Xử lý sự kiện và hoạt ảnh: Bắt và xử lý các sự kiện người dùng (click, hover, submit); tạo chuỗi hiệu ứng hiển thị, ẩn hiện và hoạt ảnh giao diện.

Bài 8: Publish website (4 giờ)

  • Triển khai máy chủ Internet: Quy trình đăng ký dịch vụ lưu trữ Web Hosting miễn phí; cấu hình phần mềm tải tập tin mã nguồn lên máy chủ hosting qua giao thức mạng.
  • Triển khai máy chủ cục bộ: Cấu hình và xuất bản website trên môi trường dịch vụ mạng nội bộ Internet Information Services (Local IIS).

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

+-------------------------------------------------------------------------------+
|                       MÔ HÌNH KIẾN THỨC NỀN TẢNG                              |
+-------------------------------------------------------------------------------+
| 1. Cấu trúc ngữ nghĩa (Semantic HTML5)                                        |
| 2. Mô hình hộp (CSS Box Model & Box-Sizing)                                   |
| 3. Lập trình kịch bản Client-side (DOM & Event-Driven)                        |
| 4. Hạ tầng triển khai Web (Deployment & Web Servers)                          |
+-------------------------------------------------------------------------------+
  1. Lý thuyết cấu trúc tài liệu siêu văn bản và tính ngữ nghĩa: Xây dựng tư duy phân tách rành mạch giữa khung dữ liệu văn bản (HTML5) và lớp trình bày mỹ thuật (CSS3), thay thế hoàn toàn cấu trúc phi ngữ nghĩa cũ.
  2. Nguyên lý phân cấp và tính toán kích thước hộp (CSS Box Model): Nắm vững quy tắc tính tổng kích thước hiển thị: $$\text{Chiều rộng} = \text{width} + \text{padding} + \text{border}$$ $$\text{Chiều cao} = \text{height} + \text{padding} + \text{border}$$ Hiểu rõ cơ chế của box-sizing: border-box để khóa cố định kích thước bao ngoài của phần tử trong các thiết kế phức tạp.
  3. Mô hình lập trình hướng sự kiện trên trình duyệt (Event-driven Architecture): Nguyên lý can thiệp vào cây cấu trúc tài liệu (DOM), bắt các tương tác của người dùng để thực thi logic kịch bản thông qua JavaScript và jQuery.
  4. Nguyên lý triển khai và cấu hình máy chủ Web: Quy chuẩn tổ chức đường dẫn tương đối/tuyệt đối giữa các tài nguyên tĩnh (images/, styles/, scripts/, index.html) và nguyên lý phân giải trang web trên máy chủ IIS hoặc Web Hosting.

Kỹ năng phát triển

  • Kỹ năng kỹ thuật (Technical skills): Soạn thảo mã nguồn HTML5 chuẩn W3C; viết mã CSS/CSS3 tuân thủ cú pháp bộ chọn; lập trình cấu trúc điều khiển, mảng, hàm bằng JavaScript; thao tác với thư viện jQuery để can thiệp DOM; cấu hình dịch vụ mạng IIS trên hệ điều hành Windows.
  • Kỹ năng phân tích (Analytical skills): Phân tích bản vẽ thiết kế giao diện tĩnh để bóc tách thành hệ thống khung thẻ ngữ nghĩa; phân tích hành vi người dùng để gắn kết các sự kiện tương tác phù hợp; chẩn đoán lỗi hiển thị giao diện đa màn hình.
  • Kỹ năng thực hành nghề nghiệp (Practical competencies): Quản trị site trên Adobe Dreamweaver; quản lý tập tin và liên kết nội bộ không để xảy ra lỗi đứt gãy đường dẫn (broken links); triển khai hoàn chỉnh một trang web tĩnh từ khâu lập mã đến khâu cấu hình máy chủ Internet.

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

+-------------------------------------------------------------------------------+
|                      PHÂN PHỐI THỜI LƯỢNG MÔ ĐUN (90H)                        |
+-------------------------------------------------------------------------------+
| Lý thuyết:        [███████                     ] 22 giờ (24.4%)               |
| Thực hành/Bài tập:[███████████████████         ] 58 giờ (64.4%)               |
| Kiểm tra đánh giá:[███                         ] 10 giờ (11.2%)               |
+-------------------------------------------------------------------------------+

Tiếp cận sư phạm

Mô đun áp dụng triệt để mô hình dạy học tích hợp (Integrated Vocational Training). Thời lượng thực hành, thảo luận và làm bài tập chiếm tỷ trọng lớn trong toàn bộ chương trình (58/90 giờ, tương đương 64.4%), trong khi lý thuyết chiếm 22 giờ (24.4%) và kiểm tra đánh giá chiếm 10 giờ (11.2%). Giảng viên đóng vai trò hướng dẫn thao tác chuẩn, thị phạm quy trình viết mã và thiết lập cấu hình; sinh viên trực tiếp thao tác trên máy trạm để tiếp thu kiến thức thông qua thực tế thực thi.

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

Các bài tập thực hành được bố trí nối tiếp theo từng bài học cụ thể:

  • Bài tập Bài 1: Thiết kế layout trang chủ cơ bản (TrangChu.html), tạo bảng biểu, lập danh sách liên kết và dựng khung form nhập liệu có các điều khiển chuẩn.
  • Bài tập Bài 2: Chuyển đổi và tái cấu trúc layout của Bài 1 bằng cách khai thác tối đa hệ thống thẻ ngữ nghĩa HTML5, tích hợp các kiểu input mới và nhúng đồ họa vector SVG.
  • Bài tập Bài 3: Viết mã CSS hoàn chỉnh cho phần tiêu đề đầu trang (header), định dạng nút bấm (button), tạo thanh gạch phân cách dạng đứng trong danh sách liên kết và thiết lập hiệu ứng chuyển màu cho menu navigation (#gNav:hover).
  • Bài tập Bài 4: Thiết kế các mẫu giao diện phức tạp có ứng dụng khung bo viền (border-radius), đổ bóng khối (box-shadow), và tùy biến bố cục bằng các thuộc tính biến đổi không gian 2D/3D.
  • Thực hành nâng cao (Bài 5 - Bài 8): Viết script kiểm tra dữ liệu đầu vào biểu mẫu form, tạo chuyển động hoạt cảnh bằng jQuery, tạo trang con từ Dreamweaver Template và đăng tải toàn bộ dữ liệu lên Web Hosting thật.

Phương pháp kiểm tra, đánh giá

Chương trình bố trí 10 giờ kiểm tra định kỳ được chia thành các bài kiểm tra 1 giờ hoặc 2 giờ nằm sau các Bài 2, 3, 4, 5, 6, 7. Tiêu chí đánh giá dựa trên các chuẩn kỹ thuật cụ thể:

  1. Tính hợp lệ của cấu trúc tài liệu HTML (đúng quy tắc lồng nhau: phần tử mở trước phải đóng sau).
  2. Sự chính xác trong việc gán ID, Class và áp dụng các thuộc tính CSS tương thích.
  3. Khả năng vận hành của các đoạn mã tương tác JavaScript/jQuery không sinh lỗi runtime trên trình duyệt.
  4. Mức độ hoàn thiện của giao diện khi hiển thị trên các tỷ lệ màn hình khác nhau.
  5. Khả năng xuất bản và truy cập thành công website thông qua máy chủ web cục bộ hoặc hosting.

Hướng dẫn tự học

Giáo trình định hướng người học tự rèn luyện tính độc lập trong nghiên cứu tài liệu kỹ thuật; thực hành thường xuyên việc gõ mã trực tiếp (Code view) thay vì phụ thuộc vào các công cụ tự sinh mã tự động; tự kiểm tra tính tương thích của mã nguồn trên các trình duyệt web phổ biến và tuân thủ các quy tắc bảo đảm an toàn thiết bị phòng máy.

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

+-------------------------------------------------------------------------------+
|                       ĐẶC TRƯNG NÂNG CẤP CỦA GIÁO TRÌNH                       |
+------------------------------------+------------------------------------------+
| Chuẩn truyền thống cũ (HTML4 / CSS2)| Chuẩn tích hợp trong giáo trình (HTML5/CSS3)|
+------------------------------------+------------------------------------------+
| Dàn trang bằng <table>, <div> vô danh| Cấu trúc thẻ ngữ nghĩa (<nav>, <header>)|
| Dùng Flash Player để chạy media     | Dùng thẻ tự nhiên <audio>, <video>       |
| Ảnh bitmap, dễ vỡ nét khi zoom     | Tích hợp đồ họa vector SVG chuẩn W3C     |
| Cắt ảnh làm góc bo viền, đổ bóng   | Sử dụng border-radius, box-shadow        |
| Dùng mã script nặng cho chuyển động| Khai thác CSS3 Transition & Animation    |
| Thiết kế web tĩnh đơn thuần        | Triển khai thực tế trên IIS & Hosting    |
+------------------------------------+------------------------------------------+
  1. Chuẩn hóa cấu trúc theo chuẩn HTML5: Thay thế hoàn toàn các phương pháp chia khối truyền thống dựa trên các thẻ <div> lồng nhau bằng hệ thống thẻ ngữ nghĩa rõ ràng (<header>, <nav>, <article>, <section>, <footer>), giúp tài liệu có cấu trúc mạch lạc và chuẩn hóa việc lập chỉ mục tìm kiếm thông qua các thẻ META.
  2. Loại bỏ sự phụ thuộc vào Flash: Chuyển đổi toàn diện sang cơ chế truyền thông đa phương tiện tự nhiên thông qua thẻ <audio> và <video>, hỗ trợ trực tiếp các định dạng .mp3, .ogg, .wav mà không đòi hỏi cài đặt plugin mở rộng của bên thứ ba.
  3. Khai thác đồ họa Vector SVG chuẩn W3C: Tích hợp trực tiếp các phần tử đồ họa vector toán học (<svg>, <circle>, <ellipse>), cho phép đồ họa hiển thị sắc nét ở mọi độ phân giải, tối ưu dung lượng tải và hỗ trợ tương tác trực tiếp bằng mã kịch bản.
  4. Kỹ thuật tạo kiểu hiện đại của CSS3: Loại bỏ việc phải cắt ghép các mảnh hình ảnh nhỏ để làm khung bo viền hoặc đổ bóng; sử dụng trực tiếp các thuộc tính hiện đại như border-radius, border-image, box-shadow, text-shadow, các không gian màu mở rộng RGBA, HSLA, và các phép chuyển đổi hình học 2D/3D Transforms kết hợp Transitions/Animations.
  5. Khắc phục lỗi hiển thị kích thước với Box Sizing: Nhận diện trở ngại cố hữu của các nhà thiết kế web khi cộng dồn padding và border vào độ rộng phần tử, từ đó đưa ra giải pháp chuẩn mực thông qua thuộc tính box-sizing: border-box.
  6. Kết nối hạ tầng xuất bản thực tế: Không giới hạn ở việc lập trình giao diện trên máy tính cá nhân, giáo trình đưa việc cấu hình xuất bản trên máy chủ dịch vụ mạng Internet Information Services (IIS) và Web Hosting vào nội dung bắt buộc của mô đun.

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

+-------------------------------------------------------------------------------+
|                       ĐỐI TƯỢNG VÀ ĐIỀU KIỆN SỬ DỤNG                          |
+-------------------------------------------------------------------------------+
| Sinh viên chính quy  | Cao đẳng Quản trị mạng, Công nghệ thông tin (Năm 2)    |
| Điều kiện tiên quyết | Đã hoàn thành Tin học cơ sở và môn Đồ họa ứng dụng     |
| Giảng viên bộ môn    | Làm giáo án tích hợp 90 giờ, thiết kế đề thi thực hành |
| Người tự học         | Làm tài liệu tra cứu cú pháp HTML5/CSS3/jQuery/IIS    |
+-------------------------------------------------------------------------------+
  • Sinh viên chuyên ngành: Giáo trình phục vụ trực tiếp cho sinh viên trình độ Cao đẳng nghề Công nghệ thông tin và nghề Quản trị mạng tại các trường cao đẳng kỹ thuật, thường được bố trí giảng dạy ở giai đoạn chuyên ngành (năm thứ 2).
  • Điều kiện tiên quyết (Prerequisites): Người học cần hoàn thành các môn học cơ sở về công nghệ thông tin và học phần Đồ họa ứng dụng. Nền tảng đồ họa ứng dụng giúp sinh viên nắm vững cách xuất ảnh định dạng .gif, .jpg, .png, tối ưu hóa kích thước hình ảnh để đưa vào thư mục images của site.
  • Giảng viên chuyên môn: Tài liệu là căn cứ pháp lý và chuyên môn để giáo viên bộ môn xây dựng kế hoạch bài giảng tích hợp 90 giờ, thiết kế các đề kiểm tra định kỳ 1 giờ, 2 giờ trên phòng máy và tổ chức đánh giá kết quả học tập của học viên theo bảng kỹ năng chuẩn.
  • Tài liệu tự học và tham khảo: Phù hợp làm tài liệu tra cứu kỹ thuật cho các kỹ thuật viên quản trị mạng muốn bổ sung kỹ năng thiết kế web tĩnh phía Front-end, tra cứu nhanh cú pháp thẻ HTML5, thuộc tính CSS3, các hàm chọn lọc jQuery và các bước thiết lập Local IIS.

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

+-------------------------------------------------------------------------------+
|                        DANH MỤC 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?                                  |
| 2. Cần chuẩn bị những kiến thức nền tảng nào trước khi học?                   |
| 3. Điểm khác biệt cơ bản giữa giáo trình này và các tài liệu lập trình web?   |
| 4. Phương pháp tự học giáo trình này để đạt kết quả tốt nhất?                 |
| 5. Cần chuẩn bị những công cụ phần mềm và tài liệu bổ trợ nào?                |
+-------------------------------------------------------------------------------+

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

Tài liệu được thiết kế chuyên biệt cho sinh viên hệ Cao đẳng nghề Quản trị mạng và Công nghệ thông tin, cũng như những người cần nắm vững quy trình xây dựng giao diện website tĩnh chuẩn mực từ mức cơ bản đến triển khai máy chủ.

2. Cần kiến thức nền nào để học?

Người học bắt buộc phải có kiến thức tin học cơ bản về hệ điều hành, cấu trúc tập tin/thư mục và đã học qua môn Đồ họa ứng dụng để có khả năng chuẩn bị và tối ưu hóa tài nguyên đồ họa trước khi đưa vào mã nguồn web.

3. Điểm khác biệt với giáo trình khác?

Giáo trình kết hợp đồng bộ giữa công cụ thiết kế trực quan chuyên nghiệp (Adobe Dreamweaver) với việc viết mã nguồn thuần túy; cân đối tỷ lệ thực hành lên tới hơn 64%; tích hợp đầy đủ từ chuẩn HTML5/CSS3, tương tác JavaScript/jQuery đến khâu triển khai thực tế trên cả hai hạ tầng: máy chủ web nội bộ (Local IIS) và Web Hosting Internet.

4. Làm sao để tự học hiệu quả?

Người học cần bám sát trình tự 8 bài học: cài đặt phần mềm Adobe Dreamweaver, thực hành tuần tự từng ví dụ mã nguồn trong bài giảng, không sao chép nguyên mẫu mà phải tự tay gõ mã để ghi nhớ quy tắc đóng/mở thẻ và thuộc tính; hoàn thành toàn bộ bài tập tạo layout và kiểm tra kết quả trực tiếp trên trình duyệt.

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

Các công cụ thực hành chính bao gồm: bộ phần mềm Adobe Dreamweaver, các trình duyệt web hiện đại để kiểm thử mã nguồn, gói dịch vụ Internet Information Services (IIS) tích hợp sẵn trên hệ điều hành Windows và dịch vụ Web Hosting miễn phí trên Internet.

Kết luận

Giáo trình mô đun Thiết kế web (Mã mô đun: MĐ18) do tác giả Nguyễn Phạm Ái Hương chủ biên tại Trường Cao đẳng Kỹ thuật Công nghệ Bà Rịa – Vũng Tàu cung cấp cấu trúc chương trình đào tạo mang tính ứng dụng nghề nghiệp rõ nét. Nội dung giáo trình định hình một lộ trình học tập khoa học gồm 4 giai đoạn logic:

+-------------------------------------------------------------------------------+
|                      LỘ TRÌNH PHÁT TRIỂN NĂNG LỰC WEB                         |
+-------------------------------------------------------------------------------+
| Giai đoạn 1: Thiết lập môi trường & Dựng khung chuẩn                          |
| Giai đoạn 2: Định hình mỹ thuật & Tùy biến giao diện                          |
| Giai đoạn 3: Tích hợp logic xử lý & Hành vi tương tác                         |
| Giai đoạn 4: Đóng gói & Triển khai vận hành                                   |
+-------------------------------------------------------------------------------+

Thông qua thời lượng 90 giờ với hơn 64% thời gian dành cho thực hành phòng máy, tài liệu trang bị cho sinh viên năng lực xây dựng hoàn chỉnh một website tĩnh có giao diện hiện đại, khả năng tương tác linh hoạt và sẵn sàng vận hành trên môi trường mạng máy chủ thực tế.