Giáo Trình Thiết Kế Web: Hướng Dẫn Chi Tiết và Thực Hành

Giáo trình nghiên cứu thiết kế web nghề quản trị mạng trình độ cao đẳng, trình bày lý thuyết rõ ràng, minh họa ví dụ thực tế, phù hợp sinh viên kinh tế.

• Tác giả: Nguyễn Phát Minh
• Trường học: Cần Thơ
• Chuyên ngành: Thiết Kế Web
• Đề tài: Giáo Trình Thiết Kế Web: Hướng Dẫn Chi Tiết và Thực Hành
• Loại tài liệu: Giáo Trình
• Năm xuất bản: 2018
• Địa điểm: Cần Thơ

Mục lục chi tiết

• LỜI GIỚI THIỆU
• 1. BÀI 1: TỔNG QUAN VỀ WWW – NGÔN NGỮ HTML
• 1.1. Lịch sử World Wide Web (www)
• 1.2. Giới thiệu về World Wide Web (www)
• 1.3. Giới thiệu về URL
• 1.4. Giới thiệu về HTTP
• 1.5. Nhập môn ngôn ngữ HTML (Hyper Text Markup Language)
• 1.6. Trang và văn bản trên trang
• 1.7. Ngôn ngữ đặc tả Script
• 1.8. Các cấu trúc điều kiện
• 1.9. Các cấu trúc lặp
• 1.10. Khai báo hàm và thủ tục
• 1.11. Một số hàm thông dụng trong ASP
• 1.12. Các thuộc tính trong CSS
• 1.13. Sử dụng CSS trong trang HTML
• 1.14. Bài tập thực hành của học viên
• 2. BÀI 2: THIẾT KẾ WEB TĨNH
• 2.1. Trang và văn bản trên trang
• 2.2. Một số thẻ trình bày và định dạng văn bản
• 2.3. Các thuộc tính của thẻ trình bày trang
• 2.4. Multimedia trên trang Web
• 2.5. Đặt màu nền. Màu chữ của văn bản. Màu của đầu mối liên kết - Thuộc tính LINK, VLINK và ALINK
• 2.6. Thuộc tính và mã màu
• 2.7. Nạp hình ảnh làm nền cho trang văn bản
• 2.8. Chèn ảnh - thẻ <IMG…>
• 2.9. Các yếu tố động trên trang
• 2.10. Đưa âm thanh vào tài liệu
• 2.11. Đưa Video vào tài liệu
• 2.12. Các thành phần trong FORM
• 2.13. Liên kết – Link
• 2.14. Thẻ neo và mối liên kết. Thuộc tính HREF
• 2.15. Liên kết ra ngoài – External Links
• 2.16. Địa chỉ tuyệt đối
• 2.17. Địa chỉ tương đối
• 2.18. Liên kết nội tại – Internal Link
• 2.19. Siêu liên kết – Hyperlink
• 3. BÀI 3: XÂY DỰNG WEB ĐỘNG
• 3.1. Tổng quan về ASP.Net và ADO
• 3.2. Tổng quan về ngôn ngữ ASP
• 3.3. Mô hình ADO
• 3.4. Các đối tượng ASP.Net Web Server Controls
• 3.5. Các đối tượng trong ASP
• 3.6. Biến và các cấu trúc điều khiển
• 3.7. Thủ tục và hàm
• 3.8. Các đối tượng ADO
• 3.9. Các đối tượng trong ADO
• 3.10. Các lớp SqlClient trong mô hình ADO
• 3.11. Các điều khiển dữ liệu ASP
• TÀI LIỆU THAM KHẢO

Tóm tắt

I. Tổng quan về Giáo Trình Thiết Kế Web Hướng Dẫn Chi Tiết

Giáo trình thiết kế web cung cấp kiến thức cơ bản và nâng cao về cách xây dựng và phát triển website. Nội dung giáo trình được biên soạn dựa trên các mô đun học tập, giúp người học nắm vững các nguyên tắc thiết kế và lập trình web. Việc hiểu rõ về giáo trình này sẽ giúp sinh viên có nền tảng vững chắc trong lĩnh vực thiết kế web.

1.1. Mục tiêu của giáo trình thiết kế web

Mục tiêu chính của giáo trình là trang bị cho sinh viên kiến thức về HTML, CSS, và JavaScript. Sinh viên sẽ học cách tạo ra các trang web tương tác và thân thiện với người dùng.

1.2. Cấu trúc của giáo trình

Giáo trình được chia thành nhiều phần, bao gồm lý thuyết và thực hành. Mỗi phần sẽ tập trung vào một khía cạnh cụ thể của thiết kế web, từ cơ bản đến nâng cao.

II. Vấn đề và Thách thức trong Thiết Kế Web Hiện Nay

Thiết kế web hiện nay đối mặt với nhiều thách thức như sự thay đổi nhanh chóng của công nghệ và nhu cầu ngày càng cao từ người dùng. Các nhà thiết kế cần phải cập nhật thường xuyên các xu hướng mới và công nghệ tiên tiến để đáp ứng nhu cầu thị trường.

2.1. Xu hướng thiết kế web hiện đại

Xu hướng thiết kế web hiện đại bao gồm responsive design, UX/UI, và tối ưu hóa tốc độ tải trang. Những yếu tố này ảnh hưởng lớn đến trải nghiệm người dùng.

2.2. Thách thức trong việc tối ưu hóa SEO

Tối ưu hóa SEO là một thách thức lớn trong thiết kế web. Các nhà thiết kế cần phải hiểu rõ về từ khóa, cấu trúc URL và nội dung để cải thiện thứ hạng trên các công cụ tìm kiếm.

III. Phương Pháp Thiết Kế Web Hiệu Quả Hướng Dẫn Chi Tiết

Để thiết kế web hiệu quả, cần áp dụng các phương pháp và công cụ phù hợp. Việc sử dụng các công cụ thiết kế như Adobe XD, Figma hay Sketch sẽ giúp quá trình thiết kế trở nên dễ dàng hơn.

3.1. Sử dụng HTML và CSS trong thiết kế

HTML và CSS là hai ngôn ngữ cơ bản trong thiết kế web. HTML dùng để cấu trúc nội dung, trong khi CSS giúp định dạng và tạo kiểu cho trang web.

3.2. Tích hợp JavaScript để tăng cường tính tương tác

JavaScript là ngôn ngữ lập trình giúp tạo ra các hiệu ứng động và tương tác trên trang web. Việc tích hợp JavaScript sẽ làm cho trang web trở nên sinh động và hấp dẫn hơn.

IV. Ứng Dụng Thực Tiễn của Thiết Kế Web trong Doanh Nghiệp

Thiết kế web không chỉ là một kỹ năng mà còn là một công cụ quan trọng trong kinh doanh. Một trang web được thiết kế tốt có thể giúp doanh nghiệp thu hút khách hàng và tăng doanh thu.

4.1. Vai trò của website trong marketing

Website là một phần quan trọng trong chiến lược marketing của doanh nghiệp. Nó giúp doanh nghiệp tiếp cận khách hàng tiềm năng và xây dựng thương hiệu.

4.2. Kết quả nghiên cứu về hiệu quả thiết kế web

Nghiên cứu cho thấy rằng các doanh nghiệp có website được thiết kế chuyên nghiệp có tỷ lệ chuyển đổi cao hơn so với những doanh nghiệp không có.

V. Kết Luận và Tương Lai của Thiết Kế Web

Thiết kế web là một lĩnh vực đang phát triển mạnh mẽ. Với sự tiến bộ của công nghệ, tương lai của thiết kế web hứa hẹn sẽ có nhiều thay đổi và cải tiến. Các nhà thiết kế cần phải luôn cập nhật và học hỏi để không bị lạc hậu.

5.1. Tương lai của công nghệ web

Công nghệ web sẽ tiếp tục phát triển với sự xuất hiện của các công nghệ mới như AI và machine learning, giúp cải thiện trải nghiệm người dùng.

5.2. Lời khuyên cho các nhà thiết kế mới

Các nhà thiết kế mới nên tìm hiểu và thực hành thường xuyên để nâng cao kỹ năng. Tham gia các khóa học và cộng đồng thiết kế sẽ giúp họ cập nhật kiến thức và xu hướng mới.

Nội dung chính

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

Giáo trình môn học/mô đun Thiết kế Web (Mã môn học/mô đun: MĐ 17) là tài liệu đào tạo nghề bắt buộc thuộc Chương trình khung quốc gia nghề Quản trị mạng máy tính ở trình độ cao đẳng. Về vị trí đào tạo trong chương trình, mô đun này được bố trí giảng dạy sau khi sinh viên đã hoàn thành các học phần tiên quyết bao gồm Cơ sở dữ liệu và Hệ quản trị Cơ sở dữ liệu. Tài liệu do tác giả Nguyễn Phát Minh làm chủ biên, hoàn thành biên soạn tại Cần Thơ vào ngày 17 tháng 06 năm 2018, được xây dựng dựa trên sự kết hợp giữa các tài liệu thiết kế - lập trình web trong và ngoài nước cùng kinh nghiệm thực tế sản xuất.

Mục tiêu học tập của giáo trình được xác định cụ thể trên ba phương diện chuẩn đầu ra:

• Về kiến thức: Trang bị khả năng định hướng kết cấu website; nắm vững cú pháp và cách sử dụng các thẻ HTML; hiểu rõ nguyên lý hoạt động của các giao thức mạng cùng mô hình web tĩnh và web động.
• Về kỹ năng: Thiết kế giao diện website; lập trình cơ bản website; sử dụng thành thạo các công cụ thiết kế web trên môi trường Microsoft Visual Studio; xây dựng các ứng dụng đa phương tiện (Multimedia); cài đặt và cấu hình dịch vụ máy chủ web ảo IIS (Internet Information Services); kết hợp cơ sở dữ liệu để xây dựng các trang web động.
• Về năng lực tự chủ và trách nhiệm: Rèn luyện kỹ năng bố trí không gian làm việc khoa học, tuân thủ các quy chuẩn an toàn lao động và bảo vệ phương tiện học tập.

Cấu trúc giáo trình có tổng thời lượng 90 giờ, được phân bổ theo phương thức tích hợp lý thuyết và thực hành: 30 giờ lý thuyết, 56 giờ thực hành và 4 giờ kiểm tra định kỳ. Nội dung được triển khai tuần tự qua 3 bài học: Bài 1: Tổng quan về WWW – Ngôn ngữ HTML (5 giờ), Bài 2: Thiết kế web tĩnh (25 giờ), và Bài 3: Xây dựng web động (60 giờ). Cách tiếp cận này tạo đường dẫn học tập logic từ kiến trúc mạng cơ sở đến kỹ thuật giao diện tĩnh và phát triển ứng dụng web tương tác cơ sở dữ liệu trên máy chủ.

---

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 triển khai qua 3 bài học trọng tâm:

[Bài 1: Tổng quan WWW & HTML] (5 giờ)
[Bài 2: Thiết kế Web tĩnh] (25 giờ)
[Bài 3: Xây dựng Web động] (60 giờ)

• Bài 1: Tổng quan về WWW – Ngôn ngữ HTML (5 giờ: 2 LT, 3 TH):

  • Giới thiệu bối cảnh lịch sử World Wide Web, bắt đầu từ ý tưởng siêu văn bản (Hypertext) của Ted Nelson năm 1965 đến dự án chính thức của Tim Berners-Lee năm 1989.
  • Phân tích 3 cơ chế nền tảng của WWW: Cơ chế định danh tài nguyên (URL), giao thức truyền tải (HTTP), và định dạng siêu văn bản (HTML).
  • Trình bày cấu trúc URL (giao thức, tên máy chủ, đường dẫn tài nguyên, fragment identifiers #, URL tương đối/tuyệt đối).
  • Chi tiết hóa 4 giai đoạn kết nối HTTP qua cổng 80: Tạo kết nối, Thực hiện yêu cầu (phương thức GET/POST), Phản hồi từ Server, Kết thúc kết nối.
  • Cú pháp thẻ HTML (thẻ đóng, thẻ mở); phân loại các trang web trong một hệ thống (Master page, Content page, Start page, Special page).
  • Khái quát ngôn ngữ kịch bản VBScript (khai báo biến Dim, hằng Const, mảng động ReDim, toán tử, cấu trúc điều kiện If...Then...Else, Select Case, cấu trúc lặp Do...Loop Until, For...Next, While...Wend, thủ tục Sub và hàm Function, các hàm xử lý chuỗi TRIM, LEFT, RIGHT, MID, SPLIT và hàm số học SQR, INT, MOD, Round).
  • Cú pháp Cascading Style Sheets (CSS): Cấu trúc Đối tượng {thuộc tính: giá trị}, thuộc tính Class, ID, cùng 3 phương thức nhúng CSS (file riêng biệt qua thẻ <link>, định nghĩa trong thẻ <style> ở phần <head>, và inline style trực tiếp trong thẻ HTML).

• Bài 2: Thiết kế web tĩnh (25 giờ: 10 LT, 13 TH, 2 KT):

  • Trình bày kỹ thuật định dạng văn bản: Tiêu đề 6 mức (<h1> đến <h6>), đoạn văn <p> kèm thuộc tính căn lề ALIGN, ngắt dòng
kèm thuộc tính CLEAR, đường kẻ ngang <hr> kèm thuộc tính WIDTH, SIZE, ALIGN, NOSHADE, cùng các thẻ <address>, <center>, <pre>, <blockquote>.
  • Thiết kế bảng biểu bằng mã lệnh ASP.NET Table: <asp:Table>, <asp:TableRow>, <asp:TableCell> và các thuộc tính CellPadding, CellSpacing, GridLines, HorizontalAlign, Caption, Rows.
  • Kỹ thuật chia khung màn hình (Frames): Thẻ <frameset> với các thuộc tính phân chia rows và cols, thẻ định nghĩa khung con <frame> (các thuộc tính name, src, noresize, scrolling, frameborder, marginwidth, marginheight), thẻ hiển thị thay thế <noframes>, và thẻ nhúng khung nội tuyến <iframe>.
  • Tích hợp Multimedia: Thiết lập hệ màu sắc HEX #rrggbb cho trang qua các thuộc tính BGCOLOR, TEXT, LINK, VLINK, ALINK của thẻ <body>; tạo hình nền bằng thuộc tính BACKGROUND và cố định nền bằng bgproperties="fixed"; chèn ảnh qua thẻ <img> (các thuộc tính SRC, ALT, WIDTH, HEIGHT, ALIGN, VSPACE, HSPACE); nhúng và liên kết tệp âm thanh/video qua thẻ <a> và <embed> (AUTOSTART, LOOP); nhúng đối tượng Flash qua thẻ <object> và <param>.
  • Thiết kế biểu mẫu nhập liệu (Form): Cấu trúc <form method="POST" action="URL"> và hệ thống điều khiển Server Controls: <asp:TextBox> (thuộc tính TextMode), <asp:RadioButton> (thuộc tính GroupName, AutoPostBack), <asp:CheckBox>, <asp:ListBox>, <asp:Button> (sự kiện OnClick), <asp:Label>.
  • Kỹ thuật tạo siêu liên kết (Link): Cặp thẻ neo <a> kèm thuộc tính HREF, phân biệt liên kết ra ngoài (External Link - địa chỉ tuyệt đối/tương đối), liên kết nội tại (Internal Link với bookmark #), và điều khiển <asp:HyperLink>.

• Bài 3: Xây dựng web động (60 giờ: 18 LT, 40 TH, 2 KT):

  • Tổng quan nền tảng Microsoft .NET Framework, vai trò của Common Language Runtime (CLR) và hệ thống thư viện lớp hợp nhất; môi trường phát triển Microsoft Visual Studio (bộ soạn thảo trực quan Design Editor WYSIWYG và Source Editor).
  • Cài đặt và cấu hình máy chủ web ảo Internet Information Services (IIS): Tạo Virtual Directory, chỉ định IIS Web Project, cơ chế truyền thông giữa Browser, IIS và ASP.NET Script Engine.
  • Quy trình biên dịch trang .aspx: IIS tiếp nhận yêu cầu, gọi trình biên dịch dịch file .aspx và file Code-Behind thành tập tin Class, sau đó Class được biên dịch thành tập tin .dll để thực thi trả kết quả về cho Client.
  • Hai mô hình tổ chức mã nguồn: Single File Page (chứa toàn bộ Markup Code và Programming Code trên cùng một trang) và Code Behind Page (tách biệt file giao diện .aspx và file mã xử lý logic nghiệp vụ .vb hoặc .cs sử dụng cơ chế Partial Class).
  • Cấu trúc lớp Page (dẫn xuất từ namespace System.Web.UI): Các thuộc tính ID, Title, Server, Session, Controls, ErrorPage; các phương thức HasControls, LoadControl, GetValidators, MapPath.
  • Hệ thống các chỉ dẫn trang (Directives): <%@ Page %> (với các thuộc tính Language, CodeFile, Inherits, ErrorPage, Title, AutoEventWireUp), <%@ Import %>, <%@ Assembly %>, <%@ Master %>, <%@ Reference %>, <%@ Register %>.
  • Vòng đời của trang Web (Page Life Cycle) và thứ tự thực thi sự kiện: Init $\rightarrow$ Load $\rightarrow$ PreRender $\rightarrow$ UnLoad; phân tích cơ chế PostBack và ứng dụng thuộc tính IsPostBack để phân biệt trạng thái tải trang lần đầu hay tải lại do sự kiện người dùng gửi về Server.
  • Mô hình truy xuất dữ liệu ADO.NET: Kiến trúc ngắt kết nối (Disconnected Architecture); cơ chế tải dữ liệu vào bộ nhớ đệm thông qua DataSet, DataTable, DataView; tương tác hệ thống cơ sở dữ liệu qua các lớp SqlClient.
  • Phân loại và lập trình các nhóm điều khiển web: Phân biệt Web Server Controls, HTML Server Controls, Validation Controls, User Controls. Bảng tra cứu các thuộc tính, phương thức và sự kiện của các Web Server Controls phổ biến (Label, TextBox, Button, Image, ImageButton, LinkButton, Panel, CheckBox).

Tên điều khiển Web Server	Thuộc tính, phương thức, sự kiện chính	Chức năng kỹ thuật
Label	Text	Hiển thị văn bản tĩnh hoặc kết quả xử lý trên Web Form
TextBox	AccessKey, AutoPostBack, MaxLength, Text, TextMode, sự kiện TextChanged	Nhận chuỗi nhập liệu từ người dùng (hỗ trợ chế độ text, password, multiline)
Button	AccessKey, Text, Enabled, sự kiện Click, Command	Gửi dữ liệu (Submit) từ Web Form lên máy chủ xử lý
Image	ImageUrl, AlternateText, ImageAlign, ToolTip	Hiển thị hình ảnh đồ họa trên trang web
ImageButton	ImageUrl, AlternateText, ImageAlign, OnClientClick, sự kiện Click, Command	Tạo nút nhấn dưới dạng hình ảnh, hỗ trợ bắt sự kiện
LinkButton	PostBackURL, Text, OnClientClick, sự kiện Click, Command	Hiển thị nút lệnh dưới hình thức siêu liên kết (HyperLink)
Panel	Controls, GroupingText	Container chứa và nhóm các điều khiển Web Server khác
CheckBox	AutoPostBack, Checked, Text	Cho phép người dùng chọn hoặc hủy chọn một tùy chọn

Progression logic của giáo trình đi theo tuyến tính chặt chẽ: Thiết lập nền móng giao thức và cú pháp đánh dấu cơ bản (Bài 1) $\rightarrow$ Định hình bố cục, thẩm mỹ và thu thập dữ liệu giao diện tĩnh (Bài 2) $\rightarrow$ Triển khai logic nghiệp vụ phía máy chủ, quản trị vòng đời trang và kết nối cơ sở dữ liệu trên web server (Bài 3).

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

• Lý thuyết mạng và truyền thông Web: Mô hình truyền thông không trạng thái (stateless) qua giao thức HTTP; 4 bước kết nối giữa trình duyệt và máy chủ; nguyên lý định danh tài nguyên qua URL.
• Nguyên lý kiến trúc ứng dụng Web: Sự phân tách giữa mã giao diện (Markup Code) và mã xử lý (Programming Code); mô hình hướng sự kiện và cơ chế quản lý trạng thái qua PostBack; cơ chế biên dịch trang ASP.NET hai tầng (Source $\rightarrow$ Class $\rightarrow$ DLL).
• Mô hình kiến trúc dữ liệu ngắt kết nối (Disconnected Architecture): Nguyên lý truy nạp dữ liệu từ hệ quản trị cơ sở dữ liệu vào bộ nhớ đệm (DataSet/DataTable) để xử lý cục bộ và tự động giải phóng kết nối vật lý, giúp tối ưu hóa băng thông mạng.

Kỹ năng phát triển

• Kỹ năng kỹ thuật (Technical skills): Viết mã HTML chuẩn, cấu hình CSS đa tầng; lập trình kịch bản VBScript; lập trình giao diện và nghiệp vụ web động bằng ngôn ngữ ASP.NET (C# hoặc VB) trên nền tảng .NET Framework; sử dụng các lớp đối tượng Page, SqlClient và các điều khiển Server Controls.
• Kỹ năng cấu hình và quản trị hệ thống (Analytical skills): Cài đặt và cấu hình máy chủ web IIS; tạo và phân quyền thư mục ảo (Virtual Directory); phân tích lưu lượng truyền thông Client-Server qua phương thức GET/POST; gỡ lỗi mã nguồn trong môi trường Visual Studio.
• Kỹ năng thực hành nghề nghiệp (Practical competencies): Xây dựng website hoàn chỉnh tích hợp đa phương tiện (âm thanh, video, flash, hình ảnh); tạo bảng biểu và khung định dạng; thiết kế form thu thập dữ liệu người dùng; lập trình kết nối và hiển thị dữ liệu động từ hệ quản trị cơ sở dữ liệu.

---

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

Giáo trình áp dụng phương pháp đào tạo tích hợp lý thuyết và thực hành nghề nghiệp. Trong tổng số 90 giờ của mô đun, thời lượng thực hành chiếm ưu thế với 56 giờ (62.2%), lý thuyết chiếm 30 giờ (33.3%) và kiểm tra định kỳ chiếm 4 giờ (4.5%). Cấu trúc này buộc quá trình giảng dạy phải lấy thực hành trong phòng lab làm trung tâm.

Hệ thống bài tập và thực hành được thiết kế bám sát nội dung từng bài học:

• Bài tập lý thuyết củng cố: Bố trí ở cuối mỗi bài để kiểm tra khả năng nắm bắt khái niệm (ví dụ: giải thích bản chất URL, chức năng giao thức HTTP, đặc điểm siêu văn bản HTML, cú pháp và 3 cách nhúng CSS).
• Bài tập thiết kế thực hành: Học viên được yêu cầu trực tiếp xây dựng các trang web theo mẫu thiết kế giao diện có sẵn. Ví dụ, bài tập thực hành của Bài 2 yêu cầu áp dụng kỹ thuật phối màu nền, đặt thuộc tính liên kết LINK/VLINK/ALINK, tạo khung trang bằng bảng biểu hoặc thẻ <frameset>, nhúng đối tượng đa phương tiện và xử lý các nút nhấn điều khiển (LinkButton).
• Môi trường triển khai thực hành: Giảng viên và học viên sử dụng môi trường Microsoft Visual Studio IDE tích hợp công cụ thiết kế Web Page Designer (hỗ trợ song song hai chế độ hiển thị mã nguồn Source và giao diện trực quan Design theo nguyên lý "What you see is what you get") kết hợp với máy chủ web ảo IIS cài đặt cục bộ.

Phương pháp đánh giá học phần kết hợp giữa đánh giá quá trình và đánh giá định kỳ:

• Đánh giá quá trình: Thực hiện thông qua mức độ hoàn thành các bài tập thực hành trên máy tính và việc tuân thủ các quy định an toàn lao động trong phân xưởng/phòng máy.
• Đánh giá định kỳ: Được phân bổ qua 2 bài kiểm tra chính thức (2 giờ tại Bài 2 cho phần thiết kế web tĩnh và 2 giờ tại Bài 3 cho phần xây dựng web động tương tác dữ liệu).

Hướng dẫn tự học: Giáo trình cung cấp các gợi ý trả lời và định vị rõ mục tham chiếu lý thuyết tương ứng cho từng câu hỏi bài tập (ví dụ: Câu 1 tham khảo mục 1.3, Câu 2 tham khảo mục 2, Câu 3 tham khảo mục 5), hỗ trợ học viên tự tra cứu, tự kiểm tra kiến thức và lập trình độc lập.

---

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

• Tích hợp sâu nền tảng Microsoft .NET Framework và ASP.NET: Giáo trình không dừng lại ở việc thiết kế web tĩnh bằng HTML/CSS đơn thuần mà mở rộng sang công nghệ web động ASP.NET hướng đối tượng. Việc giới thiệu kiến trúc CLR (Common Language Runtime) và hệ thống thư viện lớp hợp nhất giúp học viên hiểu rõ cơ chế thực thi mã nguồn trên môi trường doanh nghiệp.
• Tiếp cận mô hình kiến trúc phân tách Code-Behind: Phân tích chi tiết sự khác biệt giữa Single File Page và Code Behind Page. Việc ứng dụng từ khóa Partial Class để liên kết tệp giao diện .aspx với tệp logic lập trình (.vb hoặc .cs) phản ánh chuẩn mực thiết kế phần mềm, giúp việc bảo trì và nâng cấp mã nguồn trở nên có hệ thống.
• Cơ chế xử lý dữ liệu ngắt kết nối với ADO.NET: Giáo trình tập trung phân tích mô hình Disconnected Architecture. Thay vì duy trì kết nối cơ sở dữ liệu liên tục gây tiêu tốn tài nguyên máy chủ, ADO.NET kết nối, tải bản sao dữ liệu vào bộ nhớ đệm DataSet (chứa các DataTable, DataView) rồi ngắt kết nối ngay lập tức, chỉ tái lập kết nối khi cần cập nhật dữ liệu.
• Chu trình biên dịch hai cấp tối ưu hiệu năng: Minh họa cụ thể tiến trình tiếp nhận yêu cầu và biên dịch của IIS: Trang .aspx được biên dịch thành Class, Class chuyển thành tệp .dll. Các yêu cầu tiếp theo sẽ thực thi trực tiếp tệp .dll mà không cần biên dịch lại, tối ưu hóa tốc độ phục vụ của hệ thống.
• Định hướng kỹ thuật quản trị hạ tầng máy chủ: Giáo trình tích hợp các nội dung thực hành cấu hình máy chủ web IIS (tạo thư mục ảo Virtual Directory, ánh xạ cổng và xử lý lỗi trang qua ErrorPage), đáp ứng đúng chuẩn kỹ thuật của ngành Quản trị mạng máy tính.

---

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

• Sinh viên:
  • Sinh viên theo học hệ Cao đẳng nghề ngành Quản trị mạng máy tính (sử dụng làm tài liệu học tập cho mô đun bắt buộc MĐ 17).
  • Sinh viên các ngành Công nghệ thông tin, Kỹ thuật phần mềm, Hệ thống thông tin cần nắm vững kiến thức căn bản về công nghệ web tĩnh, giao thức mạng và phát triển web động với ASP.NET.
• Yêu cầu kiến thức tiên quyết (Prerequisites):
  • Đã hoàn thành các môn học: Cơ sở dữ liệu và Hệ quản trị Cơ sở dữ liệu.
  • Có kiến thức nền tảng về cấu trúc dữ liệu, tư duy lập trình căn bản và kỹ năng vận hành hệ điều hành máy tính.
• Giảng viên:
  • Sử dụng làm giáo trình giảng dạy chính thức cho mô đun Thiết kế Web thời lượng 90 giờ.
  • Sử dụng khung chương trình, bảng thông số điều khiển và hệ thống bài tập thực hành trong giáo trình để xây dựng giáo án lý thuyết, bài tập phòng lab và đề thi kiểm tra định kỳ.
• Người tự học và cán bộ kỹ thuật:
  • Kỹ thuật viên quản trị mạng, cán bộ hỗ trợ kỹ thuật cần tra cứu cú pháp thẻ HTML/CSS, cấu trúc tập lệnh VBScript, quy trình cấu hình IIS và các thao tác kết nối dữ liệu qua ADO.NET.

---

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 được biên soạn phục vụ trực tiếp cho sinh viên trình độ cao đẳng nghề ngành Quản trị mạng máy tính, đồng thời phù hợp cho sinh viên các khối ngành công nghệ thông tin hoặc kỹ thuật viên cần nắm vững quy trình thiết kế và triển khai ứng dụng web hoàn chỉnh từ tầng giao diện đến máy chủ.

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

Theo quy định khung chương trình của mô đun MĐ 17, người học bắt buộc phải hoàn thành hai học phần tiên quyết là Cơ sở dữ liệu và Hệ quản trị Cơ sở dữ liệu, đồng thời có kỹ năng sử dụng máy tính và tư duy thuật toán 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 khác là gì?

Giáo trình tích hợp chặt chẽ giữa kỹ thuật lập trình web (HTML, CSS, VBScript, ASP.NET) với kỹ năng quản trị hạ tầng mạng (cài đặt và cấu hình máy chủ dịch vụ IIS). Nội dung dành 62.2% thời lượng cho thực hành và đi sâu vào kiến trúc ngắt kết nối ADO.NET cùng cơ chế biên dịch trang thành file .dll trên máy chủ.

       KỸ THUẬT LẬP TRÌNH WEB                   QUẢN TRỊ HẠ TẦNG MẠNG
  (HTML, CSS, VBScript, ASP.NET)              (Cài đặt & cấu hình IIS)
                      [MÔ ĐUN MĐ 17: THIẾT KẾ WEB]
                     (56 giờ thực hành / 90 giờ)

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

Người học cần tuân thủ lộ trình 3 bài học tuần tự:

1. Nắm chắc lý thuyết giao thức HTTP và cú pháp HTML/CSS ở Bài 1.
2. Cài đặt Visual Studio để làm toàn bộ bài tập thiết kế giao diện tĩnh, form nhập liệu và frame ở Bài 2.
3. Thiết lập máy chủ IIS, tạo Virtual Directory và thực hành viết mã xử lý sự kiện, kết nối dữ liệu ASP.NET/ADO.NET ở Bài 3 theo đúng các gợi ý chỉ dẫn trong sách.

5. Giáo trình có tài liệu bổ trợ nào kèm theo không?

Giáo trình tích hợp sẵn mã nguồn minh họa cho từng thẻ/điều khiển, hệ thống bài tập thực hành thiết kế giao diện mẫu kèm mục gợi ý tham chiếu lý thuyết ở cuối mỗi bài, và danh mục tài liệu tham khảo chuyên ngành được liệt kê chi tiết tại trang 134.

---

Kết luận

Giáo trình Thiết kế Web (Mã mô đun: MĐ 17) do Nguyễn Phát Minh chủ biên cung cấp hệ thống tri thức hoàn chỉnh và chuẩn mực về công nghệ web trong chương trình Cao đẳng nghề Quản trị mạng máy tính. Giá trị cốt lõi của tài liệu nằm ở cấu trúc đào tạo tích hợp lý thuyết và thực hành, kết hợp chặt chẽ giữa ngôn ngữ đánh dấu siêu văn bản, kỹ thuật định dạng giao diện, ngôn ngữ lập trình kịch bản với nền tảng web động ASP.NET và công tác quản trị máy chủ IIS.

Lộ trình học tập 90 giờ được phân định rõ ràng qua 3 giai đoạn: Tiếp cận giao thức WWW và ngôn ngữ HTML (5 giờ) $\rightarrow$ Thiết kế web tĩnh, xử lý đa phương tiện và form dữ liệu (25 giờ) $\rightarrow$ Xây dựng web động tương tác cơ sở dữ liệu trên môi trường .NET và IIS (60 giờ). Để hoàn thiện kỹ năng, người học nên kết hợp thực hành trực tiếp trên môi trường Microsoft Visual Studio và khai thác danh mục tài liệu tham khảo chuyên ngành tại trang 134 của giáo trình.

Trích đoạn nội dung tài liệu

Mở đầu các trang văn bản thường là các tiêu đề cần làm nổi bật từng phần của văn bản như Chương, Mục,. cũng cần có đề mục rõ ràng khác với phần thân để người đọc theo dõi cho thuận tiện. Có 6 mức tiêu đề trong HTML. Cách thể hiện các tiêu đề phụ thuộc vào trình duyệt nhưng thông thường thì:  Tiêu đề mức 1 Thẻ định nghĩa có dạng: <H1>.</H1> Ví dụ: <H1>Tiêu đề 1</H1> cho ta tiêu đề tương ứng Tiêu đề 1 ….

 Tiêu đề mức 6 Thẻ định nghĩa có dạng: <H6>.</H6> Ví dụ: <H6>Tiêu đề 6</H6> cho ta tiêu đề tương ứng Tiêu đề 6 2. Một số thẻ trình bày và định dạng văn bản: Các thành phần trình bày trang để định dạng cả một đoạn văn bản và phải nằm trong phần thân của tài liệu. Có nhiều thẻ được sử dụng nhưng trong tài liệu này chỉ trình bày một số thẻ chính: định dạng phần địa chỉ (<ADDRESS>), đoạn văn bản (<P>), xuống dòng (<BR>), căn chính giữa (<CENTER>), đường kẻ ngang (<HR>), đoạn văn bản đã định dạng sẵn (<PRE>), trích dẫn nguồn tài liệu (<BLOCKQUOTE>) Đoạn văn bản Thẻ này dùng để xác định một đoạn văn bản. Thẻ <P> (Paragraph) có thể dùng kèm thuộc tính để ấn định cách trình bày đoạn văn bản.

<P align=”left|center|right”>.</P> Một đoạn văn bản rỗng là một dòng trắng. Chú ý: một số thẻ khác như các thẻ tiêu đề <H1>,.,<H6>, dòng kẻ ngang <HR>, danh sách, bảng biểu,. đã kèm luôn việc xuống dòng thành một đoạn văn bản mới. Không cần dùng thêm thẻ <P> trước và sau các thẻ này.

Xuống dòng Thẻ này dùng để xuống dòng mới. Bắt buộc xuống dòng tại vị trí gặp từ khóa này. Dòng mới được căn lề như dòng được bẻ tự động khi dòng đó quá dài Thẻ định nghĩa dạng: <BR> Nếu không muốn chèn một dòng trắng mà chỉ đơn thuần muốn xuống dòng mới thì cần sử dụng thẻ <BR> (Break). Thẻ Break không cần có thẻ đóng kèm theo.

Đường kẻ ngang Thẻ này tạo ra đường kẻ ngang (Horizontal Rule) ngăn cách giữa các phần trong tài liệu. Thẻ định nghĩa dạng: <HR> <HR width=n%|n(pixel) size=n align=left|center|righ noshade> Ví dụ: <HR> <ADDRESS>February 8, 1995, CERN</ADDRESS> Kết quả thu được: Căn chính giữa Thẻ dùng để căn chỉnh đoạn văn bản ở giữa chiều rộng trang văn bản. 18 Thẻ định nghĩa dạng: <CENTER>.</CENTER> Thẻ này cũng có tác dụng xuống dòng khi kết thúc đoạn văn bản. Các thuộc tính của thẻ trình bày trang Thuộc tính ALIGN của thẻ Paragraph Thẻ <P> dùng để xác định một đoạn văn bản (như trình bày ở phần trước).

Dưới đây ta tìm hiểu kỹ thêm một số các thuộc tính kèm theo (ALIGN) của nó. Có thể căn lề trái (left - mặc định), căn giữa (center) hoặc căn lề phải (right).  Căn lề trái: <P ALIGN=LEFT>…</P>  Căn giữa: <P ALIGN=CENTER>…</P>  Căn lề phải: <P ALIGN=RIGHT>…</P> Thuộc tính Clear của thẻ xuống dòng Thẻ xuống dòng <BR> cũng có 3 thuộc tính kèm theo như sau: <BR CLEAR=ALL> <BR CLEAR=LEFT> <BR CLEAR=RIGHT> Các thẻ được sử dụng khi chèn hình ảnh, để các dòng chữ xuất hiện bên dưới, bên trái hay bên phải của hình. Các kiểu đường kẻ ngang khác nhau Như ở phần trên đã giới thiệu, thẻ <HR> tạo một đường kẻ ngang chạy suốt chiều rộng cửa sổ màn hình.

Các đường kẻ này có thể được thay đổi độ đậm (mảnh), ngắn, dài, căn lề trái, căn lề phải,… bằng cách sử dụng các thuộc tính của chúng. <HR WIDTH=n% SIZE=n ALIGN=LEFT|RIGHT NOSHADE> Trong đó: Thẻ, thuộc tính Miêu tả <HR> Chèn dòng kẻ ngang suốt chiều rộng cửa sổ màn hình Thay đổi độ dài của đường kẻ, chiếm n% độ rộng cửa sổ WIDTH = n% màn hình. Nếu không có % đằng sau thì độ dài tính theo đơn vị pixcel SIZE = n Thay đổi độ đậm hay mảnh của đường kẻ. n là số pixcel Căn lề trái|phải.

Đường kẻ ngang mặc định được căn chính ALIGN=LEFT|RIGHT giữa NOSHADE Không có bóng mờ, đường kẻ thành màu đen 3. Bảng biểu (Table) và trang khung (Frame) Mục tiêu: Có khả năng tạo được các bảng biểu và các Frame. Bảng biểu Mã lệnh tạo bảng Giới hạn bảng: <asp: Table runat="server" “thuộc tính”. >…</asp:Table> Định nghĩa một hàng: <asp:TableRow>…</asp:TableRow> Định nghĩa một ô: <asp:TableCell>…</asp:TableCell> Các thuộc tính về bảng Thẻ/Thuộc tính Ý nghĩa <ASP:TABLE TABLE - Bắt đầu bảng CELLSPACING=n BORDER - Đặt khung nổi 3D xung quanh bảng.

Đặt CELLPADDING=n BORDER=0 sẽ làm mất biên bao quanh. BackImageUrl="URL" 19 Runat =”server” > CELLSPACING - Đặt độ dày của dòng kẻ ngang trong bảng. CELLPADDING - Đặt kích thước của một ô. BackImageUrl="URL" - Đặt ảnh nền của bảng.

“URL” - địa chỉ ảnh nền <asp:TableRow> Bắt đầu một dòng của bảng – Table row. <asp:TableCell> Bắt đầu một ô của bảng (bắt đầu cột trong một bảng). Caption Tạo tiêu đề cho bảng CaptionAlign Căn lề cho tiêu đề của bảng CellPadding Tạo khoảng cách giữa các ô và nội dung của ô trong bảng CellSpacing Tạo khoảng cách giữa các ô trong bảng GridLines None / Horizontal/ Tạo viền kẻ theo khung của bảng. Vertical/Both HorizontalAlign Center/Justify/ Left/NotSet Căn lề cho bảng (Default)/Right Rows Tập hợp nhiều hàng trong bảng </ASP: TABLE> Kết thúc bảng Ví dụ: CellPadding, GridLines, HorizontalAlign <form runat=server> <asp:Table runat="server" CellPadding="5" GridLines="horizontal" HorizontalAlign="Center"> <asp:TableRow> <asp:TableCell>1</asp:TableCell> <asp:TableCell>2</asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell>3</asp:TableCell> <asp:TableCell>4</asp:TableCell> </asp:TableRow> </asp:Table> </asp:Table> </form> Kết quả thu được bảng như sau: 20 3.

Khung – Frames HTML có các thẻ trình bày cho phép chia vùng hiển thị của cửa sổ trình duyệt thành nhiều khung, mỗi khung là một cửa sổ độc lập, hiển thị một tài liệu HTML khác nhau. Khung cho phép người thiết kế hiển thị đồng bộ nhiều tài liệu HTML khác nhau để tiện theo dõi, so sánh. Ví dụ, trong khung bên trái hiển thị các nút bấm, còn khung bên phải hiển thị tài liệu tương ứng. Trang trí khung Trang HTML thực hiện bày trí các khung (gọi là frameset document) có cấu trúc khác trang thông thường, không có khung.

Trang thường có 2 phần, HEAD và BODY. Trang bày trí khung có HEAD và FRAMESET thay cho BODY. Thành phần FRAMESET tổ chức các khung trong cửa sổ trình duyệt. Nó cũng có thể chứa thẻ NOFRAMES để xử lí trường hợp trình duyệt không hỗ trợ frame.

Các thành phần thông thường khác vốn nằm trong BODY không được xuất hiện trước thẻ mở FRAMESET. Nếu không, thành phần FRAMESET sẽ bị bỏ qua. Ví dụ: Dưới đây là một ví dụ đơn giản. <FRAMESET cols="20%, 80%"> <FRAMESET rows="100, 200"> <FRAME src="frame1.html"> <FRAME src="frame2.gif"> </FRAMESET> <FRAME src="frame3.html"> <NOFRAMES> <P>This frameset document contains: </NOFRAMES> </FRAMESET> Đoạn mã trên sẽ tạo 3 khung, được bài trí như dưới đây.

Kết quả chạy đoạn code ví dụ Khi trình duyệt khách không hỗ trợ khung thì các khung sẽ không được hiển thị mà thành phần NOFRAMES sẽ được xử lí. Các thuộc tính FRAMESET Thẻ FRAMESET dùng để phân chia vùng hiển thị trong cửa sổ trình duyệt thành các khung hình chữ nhật. Mỗi khung hình chữ nhật gọi là một frame, được định nghĩa bằng thẻ FRAME. rows = Danh sách các độ cao của các khung Danh sách gồm nhiều phần tử, cách nhau dấu phẩy.

Mỗi phần tử xác định độ cao (số dòng) của một khung. Chia chiều đứng thành bao nhiêu khung thì danh sách có bấy nhiêu phần tử. Chiều cao thể hiện bằng - Số pixel - Tỷ lệ phần trăm chiều cao màn hình - Tỷ lệ phần chiều cao còn lại. Giá trị mặc định là 100%, tức chỉ có một khung theo chiều ngang.

cols = Danh sách các độ rộng của các khung. Giá trị mặc định là 100%, tức chỉ có một khung theo chiều dọc. Thuộc tính rows thiết lập việc chia khung theo chiều ngang trong một frameset. Nếu không định nghĩa, thì các cột trong khung sẽ chiếm toàn bộ chiều cao vùng hiển thị.

Thuộc tính cols thiết lập việc chia khung theo chiều đứng trong một frameset. Nếu không định nghĩa, thì các dòng trong khung sẽ chiếm toàn bộ chiều rộng vùng hiển thị. Phối hợp hai thuộc tính sẽ tạo ra ô lưới các khung. 1- Chia màn hình thành hai nửa: nửa trên và nửa dưới: 22 <FRAMESET rows="50%, 50%"> .the rest of the definition.

</FRAMESET> 2- Chia màn hình thành 3 cột. Cột giữa rộng 250 pixels. Cột đầu chiếm 25% của phần còn lại và cột thứ 3 chiếm 75% của phần độ rộng còn lại.the rest of the definition. </FRAMESET> 3- Tạo lưới gồm 2 x 3 = 6 khung.

<FRAMESET rows="30%,70%" cols="33%,34%,33%"> .the rest of the definition. </FRAMESET> 4- Chia chiều đứng màn hình thành 4 khung. Khung thứ nhất chiếm 30% của chiều cao vùng hiển thị. Khung thứ hai có chiều cao cố định 400 pixel.

Dấu sao có nghĩa là hai khung thứ 3, thứ 4 chia nhau phần còn lại. Khung thứ 4 có chiều cao là "2*", gấp đôi khung thứ 3 (vì "*" tương đương với 1*). Nếu chiều cao vùng hiển thị là 1000 pixel thì độ cao của các khung 1,2,3,4 lần lượt là: 300, 400, 100, 200 pixel !.the rest of the definition. </FRAMESET> Chia khung lồng nhau và thành phần FRAME Việc chia khung có thể lồng nhau nhiều mức.

Ví dụ: chia chiều rộng thành 3 khung đứng, sau đó khung ở giữa lại được chia thành 2 phần trên và dưới.contents of first frame.contents of second frame, first row.contents of second frame, second row.contents of third frame. </FRAMESET> Thẻ FRAME định nghĩa một khung hình cụ thể (trong nhiều khung hình của frameset). 23 Các thuộc tính: name = Tên của khung: Có thể dùng tên này để làm đích của mối siêu liên kết. src = URI : Trỏ đến trang tài liệu sẽ hiển thị trong khung.

noresize : Không cho phép co giãn lại kích thước scrolling = auto|yes|no : Thiết lập thanh cuộn.  auto: Xuất hiện thanh cuộn khi cần thiết. Đây là giá trị mặc định.  yes: Luôn có thanh cuộn.

 no: Luôn không có thanh cuộn. frameborder = 1|0 Thiết lập đường biên.  1: Có đường biên giữa khung đang xét với các khung kề nó. Đây là giá trị mặc định.

 0: Không có đường biên giữa khung đang xét với các khung kề nó. marginwidth = số pixel Thiết lập độ rộng lề chiều rộng = khoảng trống giữa phần hiển thị nội dung và biên trái, biên phải. Giá trị mặc định tuỳ theo bộ duyệt. marginheight = số pixel Thiết lập độ rộng lề chiều cao = khoảng trống giữa phần hiển thị nội dung và biên trên, biên dưới.

Giá trị mặc định tuỳ theo trình duyệt. Lưu ý: Nội dung trong một frame không được thuộc về chính trang tài liệu định nghĩa frameset. Thiết lập Target, thẻ NOFRAME và IFRAME Thiết lập Target Thuộc tính target là để xác định tệp tài liệu HTML sẽ hiển thị trong khung. target = tên khung đích.

Thiết lập tên của khung mà tài liệu sẽ mở ra trong khung đó. Thuộc tính này dùng với các thành phần tạo mối liên kết: (A, LINK), image map (AREA), và FORM. Thẻ NOFRAMES Thành phần NOFRAMES thiết lập nội dung cần hiển thị khi trình khách không hỗ trợ frame hoặc đã tắt chức năng hiển thị frame.