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

Giáo trình môn học Thiết kế & quản trị Website là tài liệu đào tạo chuyên môn thuộc bộ giáo trình nghề Công nghệ thông tin (chuyên ngành Ứng dụng phần mềm). Tài liệu được biên soạn và nghiệm thu bởi Hội đồng thẩm định Trường Cao đẳng nghề Yên Bái, căn cứ theo chương trình khung đào tạo nghề do Bộ Lao động – Thương binh và Xã hội ban hành.

Về mục tiêu học tập, giáo trình trang bị cho người học hệ thống kiến thức nền tảng về hạ tầng web (máy chủ, máy khách, tên miền, dịch vụ lưu trữ hosting, cấu trúc địa chỉ URL); kỹ năng lập trình cấu trúc giao diện bằng ngôn ngữ đánh dấu siêu văn bản (HTML); phương pháp định kiểu với Cascading Style Sheets (CSS); kỹ thuật sử dụng môi trường phát triển tích hợp (IDE) Macromedia Dreamweaver 8; và quy trình cấu hình, quản trị, xuất bản website lên máy chủ Internet.

Cấu trúc môn học được thiết kế với tổng thời lượng 90 giờ, phân bổ cụ thể thành 35 tiết lý thuyết và 41 giờ thực hành (thời lượng còn lại dành cho kiểm tra và ôn tập). Toàn bộ nội dung phân bổ thành 5 bài học chính:

  1. Bài 1: Khái quát về Website
  2. Bài 2: Tạo các trang Web với HTML
  3. Bài 3: Thiết kế và quản trị Website với Dreamweaver
  4. Bài 4: CSS
  5. Bài 5: Xuất bản và quản trị Website

Cách tiếp cận của giáo trình tuân thủ nguyên tắc đào tạo nghề: kết hợp truyền đạt lý thuyết nguyên lý với thực hành mẫu có sẵn mã nguồn. Giáo trình được xây dựng dựa trên các tiêu chí: tính định hướng thị trường lao động, tính hệ thống và khoa học, tính ổn định và linh hoạt, đáp ứng khả năng liên thông giữa các bậc đào tạo, bám sát các tiêu chuẩn nghề nghiệp trong nước và quốc tế.

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

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

Nội dung học thuật trong giáo trình được tổ chức tuần tự theo tiến trình từ nguyên lý hạ tầng, xây dựng mã nguồn cơ bản, sử dụng công cụ thiết kế chuyên dụng đến quản trị vận hành:

  • Bài 1: Khái quát về Website:

    • Mô hình hoạt động: Cung cấp định nghĩa ứng dụng Web chạy theo kiến trúc Server-Client trên mạng Internet; định nghĩa Website là tập hợp các trang web liên kết dưới một tên miền hoặc tên miền phụ.
    • Phân loại Website: Phân biệt Web tĩnh (Static pages - nội dung hiển thị cố định, chỉnh sửa trực tiếp trên mã HTML) và Web động (Dynamic Web - tích hợp mã lệnh truy xuất cơ sở dữ liệu và có phần mềm quản lý nội dung).
    • Web Server và Web Browser: Phân loại máy chủ web thành 4 nhóm (truyền thông thông thường, thương mại, nhóm làm việc, mục đích đặc biệt); tiêu chuẩn đánh giá máy chủ qua hiệu năng, bảo mật qua IP/thư mục, giao diện CGI/API/SQL và quản trị từ xa. Trình bày các trình duyệt thông dụng (Internet Explorer, Mozilla Firefox, Opera, Netscape Communicator).
    • Hệ thống tên miền và Hosting: Phân loại tên miền quốc tế (ICANN quản lý) và tên miền quốc gia (.vn), cấu trúc subdomain; bảng phân loại đuôi tên miền (.com, .biz, .edu, .gov, .net, .org, .ac, .pro, .info, .health, .name); phân loại gói hosting theo dung lượng (100MB, 200MB, 300MB, 1GB).
    • Cấu trúc URL và công cụ thiết kế: Cú pháp URL tuyệt đối và tương đối; giới thiệu các công cụ biên soạn mã (Notepad, Notepad++, Microsoft FrontPage, Macromedia Dreamweaver, Microsoft Visual Studio).

  • Bài 2: Tạo các trang Web với HTML:

    • Bản chất HTML: Phân tích bốn yếu tố Hyper - Text - Markup - Language; cấu trúc thẻ tag chuẩn với cặp mở/đóng; cấu trúc cây tài liệu <html>, <head>, <title>, <meta>, <link>, <script>, <body>.
    • Thẻ định dạng khối và ký tự: Cú pháp thẻ đoạn văn <p>, 6 cấp đề mục <h1> đến <h6>, thẻ ngắt dòng
      , đường kẻ <hr/>, khối giữ nguyên định dạng <pre>, thẻ phân vùng trung hòa <div> (nhóm khối) và <span> (nhóm phần tử inline); các thẻ định dạng văn bản <b>, <strong>, <i>, <em>, <small>, <sub>, <sup>, <del>, <u>, <font> và bảng ký tự đặc biệt (&nbsp;, &lt;, &gt;, &amp;, &copy;, &reg;...).
    • Danh sách và liên kết: Danh sách không thứ tự <ul>, danh sách có thứ tự <ol> với các kiểu đánh số (1, a, A, i, I); cú pháp thẻ liên kết <a> (thuộc tính href, target="_blank", liên kết nội bộ Bookmark #name, liên kết thư điện tử mailto:).
    • Đa phương tiện và bảng biểu: Thẻ chèn âm thanh <embed> và <bgsound>, thẻ nhúng Flash <object>, thẻ hình ảnh <img> (thuộc tính src, alt, border, width, height, nhúng video bằng dynsrc); cấu trúc bảng <table>, hàng <tr>, ô <td> cùng các tham số colspan, rowspan, cellpadding, cellspacing.
    • Biểu mẫu và khung: Cấu trúc thẻ <form> (phương thức GET/POST); các phần tử <input> (loại text, password, button, submit, checkbox, radio), <textarea>, danh sách chọn <select>, <option> và nhóm <optgroup>; hiệu ứng chuyển động <marquee>; cấu trúc chia khung hình <frameset>, <frame> và khung nội tuyến <iframe>.

  • Bài 3: Thiết kế và quản trị Website với Dreamweaver:

    • Tổng quan phần mềm: Giới thiệu Macromedia Dreamweaver 8, hỗ trợ công nghệ Macromedia Roundtrip HTML, tích hợp môi trường viết mã và thiết kế trực quan.
    • Giao diện và không gian làm việc: Phân biệt hai chế độ không gian làm việc Designer Workspace (tối ưu hóa giao diện thiết kế trực quan) và Coder Workspace (hướng tới lập trình viên làm việc trực tiếp với mã nguồn).
    • Thành phần điều khiển: Thanh tiêu đề (Title bar), thanh trình đơn (Menu bar), thanh công cụ chuẩn (Standard bar), thanh tài liệu (Document bar), thanh trạng thái (Status bar); cửa sổ điều khiển thuộc tính (Properties inspector); thanh chèn đối tượng (Insert toolbar).
    • Chế độ hiển thị: Ba chế độ làm việc gồm Design View (chỉnh sửa trực quan), Code View (làm việc với mã nguồn), Split View (chia đôi cửa sổ, đồng bộ tức thì giữa mã nguồn và hiển thị).
    • Quản lý Site: Quy trình thiết lập Local Site (tổ chức tệp tin trên ổ đĩa cục bộ) và xuất bản lên Remote Site (máy chủ web từ xa) qua công cụ Manage Sites.

  • Bài 4: CSS: Hệ thống quy tắc định kiểu tầng (Cascading Style Sheets) phục vụ việc chuẩn hóa bố cục, màu sắc và kiểu dáng hiển thị cho các phần tử HTML.

  • Bài 5: Xuất bản và quản trị Website: Quy trình đóng gói mã nguồn, chuyển giao dữ liệu lên môi trường máy chủ và các thao tác bảo trì, cập nhật nội dung website.

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

  • Lý thuyết kiến trúc mạng ứng dụng: Mô hình Server-Client, cơ chế truyền tải siêu văn bản qua giao thức HTTP/FTP, nguyên lý phân giải địa chỉ và điều hướng tài nguyên trên Internet.
  • Quy chuẩn cấu trúc siêu văn bản: Tiêu chuẩn tài liệu HTML hợp thức, phân cấp cấu trúc thông tin qua hệ thống thẻ đóng/mở, cơ chế hiển thị tài liệu của các bộ duyệt web.
  • Nguyên lý tổ chức dữ liệu cục bộ và phân tán: Quy tắc phân định đường dẫn tương đối và đường dẫn tuyệt đối, nguyên tắc tổ chức cây thư mục chuẩn cho dự án web.

Kỹ năng phát triển

  • Kỹ năng kỹ thuật (Technical skills): Viết mã nguồn HTML thủ công đúng cú pháp; xử lý chèn và cấu hình đa phương tiện (âm thanh, ảnh, Flash); xây dựng biểu mẫu thu thập dữ liệu; thiết lập bảng biểu phân cấp; sử dụng thành thạo IDE Dreamweaver 8 để tạo trang và quản lý website.
  • Kỹ năng phân tích (Analytical skills): Phân tích yêu cầu lưu trữ để lựa chọn gói hosting (100MB, 300MB, 1GB); phân tích cấu trúc bố cục giao diện trước khi chuyển hóa thành bảng (<table>) hoặc khối định vị (<div>, <span>); phân định cấu trúc liên kết URL tương đối theo phân cấp thư mục.
  • Năng lực thực hành nghề nghiệp (Practical competencies): Khởi tạo và thiết lập Local Site; đóng gói tài nguyên dự án theo bảng mã chuẩn UTF-8; cấu hình kết nối và đồng bộ dữ liệu giữa máy trạm và máy chủ từ xa.

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

Giáo trình triển khai phương pháp giảng dạy tích hợp giữa thuyết giảng lý thuyết và rèn luyện kỹ năng thực hành tại phòng máy tính. Tiến trình sư phạm được thiết kế theo mô hình chuyển giao kỹ năng từng bước: giảng viên truyền đạt cú pháp/nguyên lý, minh họa mẫu, sau đó sinh viên trực tiếp thao tác viết mã và đối chiếu kết quả hiển thị trên trình duyệt.

Hệ thống 10 bài tập thực hành mẫu trong Bài 2 được thiết kế bám sát các dạng bài toán thực tế:

  1. Bài tập 1: Sử dụng trình soạn thảo Notepad, cấu hình bảng mã UTF-8 để tạo trang Wellcome.html, kiểm tra kết quả và xem mã nguồn (Source Code) trên trình duyệt.
  2. Bài tập 2: Ứng dụng các thẻ tiêu đề, thẻ đoạn văn <p>, thẻ ngắt dòng
    , đường kẻ <hr width="20%"> và căn lề văn bản để trình bày nội dung bài thơ "Mẹ !".
  3. Bài tập 3: Định dạng văn bản chuyên ngành với công thức hóa học (H2O, H2SO4 dùng <sub>), công thức toán học (ax2 + bx + c = 0 dùng <sup>), và đoạn mã lệnh tin học vòng lặp For dùng thẻ <pre>.
  4. Bài tập 4: Thiết kế danh sách chương trình đào tạo thiết kế website ở hai dạng: danh sách không thứ tự (<ul>) và danh sách có thứ tự số học (<ol type="1">).
  5. Bài tập 5: Xây dựng cấu trúc danh sách lồng nhau nhiều cấp kết hợp chữ số La Mã (<ol type="I">) và số nguyên (<ol type="1">) phân tách hai mảng "Thiết Kế Website" và "Lập Trình Website".
  6. Bài tập 6: Thiết lập liên kết liên trang giữa 3 tệp Giaotrinh.html, Gioithieu.html, Danhsach.html và sử dụng thuộc tính target="_blank" để mở cửa sổ mới.
  7. Bài tập 7: Chèn ảnh nền trang web (<body background="03.jpg">) và nhúng hình ảnh sản phẩm điện thoại kèm tham số căn lề align="top".
  8. Bài tập 8: Tạo bảng biểu hiển thị kết quả kiểm tra học kỳ gồm các cột STT, Họ và tên, Toán, Lý, Hóa với các thông số kích thước ô và căn lề dữ liệu.
  9. Bài tập 9: Thiết kế bảng báo giá linh kiện phần cứng (Đĩa cứng, RAM, CPU) sử dụng các thuộc tính nâng cao: colspan="5", bgcolor="yellow", align="right".
  10. Bài tập 10: Xây dựng biểu mẫu "Đăng ký thành viên" với các trường nhập họ tên, tên truy cập, mật khẩu (<input type="password">), chọn giới tính (<select>), nhập địa chỉ (<textarea>) và nút gửi dữ liệu (<input type="button">).

Quy trình tự học yêu cầu sinh viên tuân thủ cấu trúc lưu trữ chuẩn: tạo cây thư mục có phân loại riêng cho từng dạng tệp tin (hình ảnh, âm thanh, mã nguồn), lưu toàn bộ tệp HTML tại thư mục gốc, và kiểm thử giao diện trên nhiều trình duyệt khác nhau.

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

  • Khung chương trình chuẩn hóa: Giáo trình được xây dựng theo chương trình khung của Bộ Lao động – Thương binh và Xã hội, bảo đảm tính pháp lý và tính liên thông trong hệ thống giáo dục nghề nghiệp.
  • Tích hợp công nghệ IDE chuyên dụng: Giáo trình hướng dẫn chi tiết phần mềm Macromedia Dreamweaver 8 – công cụ thiết kế web phổ biến trong giai đoạn phát triển tài liệu. Phần mềm tích hợp công nghệ Macromedia Roundtrip HTML giúp bảo toàn mã nguồn viết tay khi chuyển đổi giữa chế độ biên tập trực quan và chế độ mã lệnh.
  • Hỗ trợ đa dạng môi trường phát triển: Cung cấp hướng dẫn sử dụng từ các trình soạn thảo thuần văn bản (Notepad, Notepad++) phục vụ việc nắm chắc cú pháp, đến các phần mềm thiết kế đồ họa trực quan (Microsoft FrontPage, Dreamweaver, Visual Studio).
  • Gắn kết với thị trường lao động: Bổ sung các nội dung thực tế về quy trình đăng ký tên miền tại ICANN và tổ chức quản lý tên miền Việt Nam, phương pháp đánh giá thông số hosting (100MB cho web tĩnh, 1GB cho web dữ liệu lớn), tiêu chuẩn đánh giá hệ thống máy chủ phục vụ nhu cầu triển khai thực tế tại doanh nghiệp.

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

  • Sinh viên: Học sinh, sinh viên theo học trình độ Cao đẳng nghề và Trung cấp nghề ngành Công nghệ thông tin (nghề Ứng dụng phần mềm).
  • Điều kiện tiên quyết (Prerequisites): Người học cần có kiến thức cơ bản về tin học văn phòng, kỹ năng quản lý tệp tin và thư mục trên hệ điều hành Windows, cùng hiểu biết căn bản về cách sử dụng mạng Internet và trình duyệt web.
  • Giảng viên: Sử dụng làm tài liệu giảng dạy chính thức, làm căn cứ xây dựng đề cương bài giảng chi tiết, kế hoạch giảng dạy lý thuyết (35 tiết) và tổ chức các bài thực hành (41 giờ) trên phòng máy.
  • Cán bộ kỹ thuật và người tự học: Tài liệu tham khảo cho các nhà quản lý, cán bộ phụ trách công nghệ thông tin tại các cơ quan, đơn vị, cơ sở sản xuất có nhu cầu tìm hiểu nguyên lý xây dựng và quản trị trang thông tin điện tử nội bộ.

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

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

Tài liệu phục vụ trực tiếp cho học sinh, sinh viên các hệ đào tạo Cao đẳng nghề và Trung cấp nghề Công nghệ thông tin (ứng dụng phần mềm), đồng thời là tài liệu tham khảo cho cán bộ quản lý hệ thống thông tin tại các đơn vị cơ sở.

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

Người học cần nắm vững kỹ năng sử dụng máy tính căn bản, thao tác trên hệ điều hành Windows, hiểu biết sơ bộ về mạng Internet và sử dụng các trình duyệt web. Giáo trình không yêu cầu kiến thức lập trình chuyên sâu từ trước do toàn bộ cú pháp HTML được hướng dẫn từ mức cơ bả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 thuần lý thuyết?

Giáo trình dành hơn 45% thời lượng cho giờ thực hành (41/90 giờ), tích hợp hệ thống 10 bài tập thực hành mẫu có sẵn mã nguồn chi tiết, hướng dẫn quy trình tạo lập thư mục chuẩn và thao tác trực quan trên phần mềm Macromedia Dreamweaver 8.

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

Người học cần thực hiện tuần tự việc viết mã thô trên Notepad hoặc Notepad++ để ghi nhớ cú pháp thẻ HTML trước khi chuyển sang sử dụng công cụ trực quan Dreamweaver; đồng thời phải tuân thủ việc tổ chức cây thư mục chuẩn (lưu tệp HTML tại thư mục gốc, phân loại thư mục đa phương tiện).

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

Giáo trình đi kèm danh mục hướng dẫn sử dụng các phần mềm công cụ (Notepad, Notepad++, Dreamweaver 8, FrontPage, Visual Studio), hướng dẫn tra cứu qua hệ thống trợ giúp Dreamweaver Tour, Reference panel, và diễn đàn trực tuyến Macromedia Online Forums.

Kết luận

Giáo trình Thiết kế & quản trị Website của Trường Cao đẳng nghề Yên Bái cung cấp hệ thống kiến thức hoàn chỉnh về quy trình xây dựng và quản trị trang web ở trình độ cao đẳng/trung cấp nghề. Nội dung tài liệu kết hợp đồng bộ giữa kiến thức hạ tầng Internet, cú pháp ngôn ngữ HTML, kỹ thuật định kiểu CSS và kỹ năng vận hành công cụ Dreamweaver 8.

Lộ trình học tập khuyến nghị:

  1. Nắm vững khái niệm Web Server, Domain, Hosting, URL (Bài 1).
  2. Hoàn thành toàn diện 10 bài tập thực hành cú pháp HTML (Bài 2).
  3. Ứng dụng Dreamweaver 8 để thiết kế và quản lý cấu trúc Local Site (Bài 3).
  4. Áp dụng CSS để chuẩn hóa giao diện và thực hiện quy trình xuất bản website lên Remote Site (Bài 4 & Bài 5).

Nguồn tài liệu bổ trợ phục vụ nghiên cứu gồm hệ thống tài liệu tham khảo từ các trường chuyên ngành, tài liệu kỹ thuật của các chuyên gia công nghệ, cùng các kênh hỗ trợ kỹ thuật trên Dreamweaver Support Center và hệ thống Help tích hợp sẵn trong phần mềm.