Giáo trình Thiết kế Web (Bản đẹp)

1 
ỦY BAN NHÂN DÂN THÀNH PHỐ HÀ NỘI 
TRƯỜNG CAO ĐẲNG NGHỀ CÔNG NGHIỆP HÀ NỘI 
Chủ biên: Nguyễn Thị Thanh Xuân 
GIÁO TRÌNH 
THIẾT KẾ WEB 
(Lưu hành nội bộ) 
Hà Nội năm 2013
 Tuyên bố bản quyền 
Giáo trình này sử dụng làm tài liệu giảng dạy nội bộ trong 
trường cao đẳng nghề Công nghiệp Hà Nội 
Trường Cao đẳng nghề Công nghiệp Hà Nội không sử dụng và 
không cho phép bất kỳ cá nhân hay tổ chức nào sử dụng giáo trình 
này với mục đích kinh doanh. 
Mọi trích dẫn, sử dụng giáo trình này với mục đích khác hay ở 
nơi khác đều phải được sự đồng ý bằng văn bản của trường Cao đẳng 
nghề Công nghiệp Hà Nội 
3 
BÀI 1: TỔNG QUAN VỀ WWW – NGÔN NGỮ HTML 
Mã bài: MD38-01 
Giới thiệu: 
Mục tiêu: 
 - Hiểu được lịch sử của WWW; 
 - Hiểu được cấu trúc của một trang HTML và các thẻ HTML cơ bản, cách bố trí, 
xử lý và ứng dụng file CSS; 
 - Có khả năng thiết kế được giao diện; 
 - Biết cách tổ chức được thông tin trong trang chủ và bố trí văn bản trên trang. 
 - Ghi nhớ các lệnh điều khiển của ngôn ngữ đặc tả Script. 
 - Thực hiện các thao tác an toàn với máy tính. 
 Nội dung: 
1. Lịch sử World Wide Web (www) 
1.1. Giới thiệu về World Wide Web (www) 
Ngày nay người ta dùng máy tính như một công cụ rất hữu ích để truy nhập 
Internet, chủ yếu là tìm kiếm thông tin. Các thông tin này có thể là các văn bản, hình ảnh 
âm thanh hay thông tin đa phương tiện 
Nhu cầu tìm kiếm thông tin ngày càng nhiều đã đưa ra vấn đề làm thế nào mọi 
người có thể dễ dàng sử dụng máy tính truy cập Internet như một công cụ phục vụ đắc 
lực cho việc tra cứu tìm kiếm thông tin trên mạng thông tin rộng lớn nhất toàn cục. 
Việc này trở nên dễ dàng hơn bởi ý tưởng siêu văn bản (Hypertext) – văn bản 
thông minh. Khái niệm này do nhà tin học Ted Nelson đề xuất vào năm 1965 nhưng cho 
đến 1989, dự án này mới chính thức được thực hiện bởi một kỹ sư trẻ người Anh tên là 
Tim Berners – Lee. 
Trong thế giới siêu văn bản WWW, người sử dụng có thể dễ dàng đi từ tài liệu này 
sang tài liệu khác thông qua các mối liên kết. Chính nó đã góp phần tạo ra bước phát 
triển bùng nổ của Internet trong những năm gần đây. 
4 
World Wide Web (www) là một mạng các tài nguyên thông tin. WWW dựa trên 3 
cơ chế để các tài nguyên này trở nên sẵn dùng cho người xem càng rộng rãi nhất càng tốt: 
- Cơ chế đặt tên cùng dạng đối với việc định dạng các tài nguyên trên WWW (như 
các URL) 
- Các giao thức, để truy nhập tới các tài nguyên qua WWW (như HTTP) 
- Siêu văn bản, để dễ dàng chuyển đổi giữa các tài nguyên (như HTML) 
Dịch vụ World wide web được xây dựng theo mô hình Client/Server, tức là người 
ta sẽ thiết lập một máy phục vụ cho việc lưu trữ các tài liệu Hypertext gọi là Web Server. 
Phía người sử dụng sẽ có một máy tính cùng với phần mềm có khả năng hiểu được các 
tài liệu Hypertext và giao tiếp được với Web Server gọi là Web Browser hay web client. 
Khi một người sử dụng có một yêu cầu một tài liệu nào đó bằng cách gửi đến Web Server 
một URL thì Web Server sẽ phục vụ tài liệu đó và Web Browser sẽ hiển thị nó lên màn 
hình với khuôn dạng thích hợp. 
1.2. Giới thiệu về URL: 
Mọi tài nguyên sẵn dùng trên WWW – tài liệu HTML, ảnh, video clip, chương 
trình v..v.. - có một địa chỉ mà có thể được mã hóa bởi một URL. 
URL có thể coi là một con trỏ được dùng với mục đích đơn giản là xác định vị trí 
tài nguyên của môi trường Internet. Thông qua các URL mà Web Browser có thể tham 
chiếu đến một Web Server hoặc các dịch vụ khác trên Internet và ngược lại 
Các URL thường gồm 3 phần: 
- Việc đặt tên của các cơ chế dùng để truy nhập tài nguyên 
- Tên của máy tính lưu trữ (tổ chức) tài nguyên 
- Tên của bản thân tài nguyên, như một đường dẫn 
Ví dụ: URL xác định trang W3C Technical Reports là  
URL này có thể được đọc như sau: Có một tài liệu sẵn dùng theo giao thức HTTP, 
đang lưu trong máy www.w3.org, có thể truy nhập theo đường dẫn “/TR”. Các cơ chế 
khác ta có thể thấy trong các tài liệu HTML bao gồm “mailto” đối với thư điện tử và 
“ftp” đối với FTP. 
5 
Ví dụ khác về URL, ví dụ này chỉ tới hộp thư (mailbox) của người dùng: 
Mọi góp ý, xin gửi thư tới 
Joe Cool 
Các định danh đoạn (fragment identifiers): Một số URL chỉ tới việc định vị một tài 
nguyên. Kiểu này của URL kết thúc với “#” theo sau bởi một dấu hiệu kết nối (gọi là các 
định danh đoạn). Ví dụ, đây là một URL đánh dấu một móc tên là section_2: 
Các URL tương đối: không theo cơ chế đặt tên. Đường dẫn của nó thường tham 
chiếu tới một tài nguyên trên cùng một máy như tài liệu hiện tại. Các URL tương đối có 
thể gồm các thành phần đường dẫn tương đối (như “..” nghĩa là một mức trên trong cấu 
trúc được định nghĩa bởi đường dẫn), và có thể bao gồm các dấu hiệu đoạn. 
Các URL được giải quyết để cho toàn các URL sử dụng một URL gốc. Như một 
ví dụ của giải pháp URL tương đối, giả sử chúng ta có URL gốc 
“”. 
URL tương đối trong đánh dấu dưới đây cho một liên kết siêu văn bản: 
 Suppliers 
sẽ mở rộng thành URL đầy đủ 
 “” 
trong khi URL tương đối trong việc đánh dấu cho một ảnh dưới đây 
sẽ mở rộng thành URL đầy đủ “” 
Các URL được dùng để: 
- Liên kết tới tài liệu hoặc tài nguyên khác. 
- Liên kết tới kiểu dạng bên ngoài hoặc kịch bản (script). 
1.3. Giới thiệu về HTTP 
 Web Browser và Web Server giao tiếp với nhau thông qua một giao thức được 
gọi là HTTP. Sự kết nối HTTP qua 4 giai đoạn: 
6 
Hình 1.1: Sự kết nối HTTP 
 - Tạo kết nối: Web Browser giao tiếp với Web Server nhờ địa chỉ URL. 
 - Internet và số cổng (ngầm định là 80) được đặc tả trong URL. 
 - Thực hiện yêu cầu: Web Browser gửi thông tin tới Web Server để yêu cầu phục 
vụ. Việc gửi thông tin ở đây là gửi phương thức GET dùng cho việc lấy một đối tượng từ 
Server, hay POST dùng cho việc gửi dữ liệu tới một đối tượng trên Server. 
 - Phản hồi: Web Server gửi một phản hồi về Web Browser nhằm đáp ứng yêu cầu 
của Web Browser. 
 - Kết thúc kết nối: Khi kết thúc quá trình trao đổi giữa Web Browser và Web 
Server thì sự kết nối chấm dứt. Và như vậy mối liên hệ giữa Client và Server chỉ được 
tồn tại trong quá trình trao đổi với nhau, điều này có lợi điểm rất lớn là giảm được lưu 
thông trên mạng. 
2. Nhập môn ngôn ngữ HTML (Hyper Text Markup Language) 
Ngôn ngữ phổ biến dùng bởi World Wide Web là HTML (Hyper Text Markup 
Language). Nó được dùng cho các mục đích sau: 
 - Phổ biến các tài liệu trực tuyến với các heading, văn bản, bảng, danh sách, 
ảnh,..v.v 
 - Truy tìm thông tin trực tuyến theo các liên kết siêu văn bản bằng việc kích vào 
một nút. 
 - Thiết kế các định dạng cho việc kiểm soát các giao dịch (transaction) với các 
thiết bị từ xa, đối với người dùng trong việc tìm kiếm thông tin, tạo các sản phẩm, đặt 
hàng,.v.v 
7 
 - Bao gồm spread-sheets, video clips, sound clips, và các ứng dụng trực tiếp khác 
trong các tài liệu của họ. 
HTML đánh dấu văn bản dưới dạng các thẻ (Tag). Cấu trúc thẻ HTML có dạng 
như sau: 
- Thẻ đóng: văn bản chịu tác động 
Trong đó: 
 + : bắt đầu hiệu ứng thẻ. 
 + : kết thúc hiệu ứng thẻ. 
Ví dụ: văn bản này được in đậm 
sẽ cho kết quả ở trình duyệt là: 
 văn bản này được in đậm 
- Thẻ mở: văn bản chịu tác động 
Ví dụ: Đoạn 1 Đoạn 2 
sẽ cho kết quả là: 
 Đoạn 1 
 Đoạn 2 
- Về quy tắc các thẻ có thể lồng lẫn nhau nhưng vẫn phải đảm bảo đúng cú pháp 
của thẻ đó. 
3. Trang và văn bản trên trang 
Trang web có hai đặc trưng cơ bản: 
- Siêu văn bản (hypertext): bao gồm các văn bản, hình ảnh tĩnh, hình ảnh động, âm 
thanh, màu sắc và các thành phần khác. 
- Siêu liên kết (hyperlink): có nhiều mối liên kết đa dạng với các trang và các thành 
phần khác ở bất cư một website nào trên phạm vi toàn cầu. 
Website là tập hợp của rất nhiều webpage có cùng chủ đề tại một địa chỉ nhất định. 
Trong một website, người ta có thể “đi lại” giữa các webpage băng con đường hyperlink. 
 Các loại trang chủ yếu của website: 
8 
- Trang chủ, trang gốc (Master page): với mỗi website có một trang chủ. Là nơi thể 
hiện rõ chủ đề của site thông qua cách bố trí danh mục tin, cách trang trí mỹ thuật nổi bật 
- Trang nội dung (content page): là trang chứa nội dung của một mục tin. Ngoài ra 
trên trang cũng có các danh mục tin con theo chủ đề của mục tin cha, các link để liên kết 
tới các trang khác. 
- Trang đầu (home page, start page): là trang xuất hiện ngay sau khi khởi động trình 
duyệt. Có thể là trang chủ hoặc không nhưng không phải là trang đặc biệt. 
- Trang đặc biệt (special page): là trang xuất hiện trên nền trang đầu ngay khi khởi 
động trình duyệt web. Trang này có thể có hoặc không, có thời gian tồn tại ngắn với nội 
dung thong báo, đưa những tin đặc biệt, muốn mọi người quan tâm trước tiên. 
Một trang web thường gồm một vài trang màn hình. 
4. Ngôn ngữ đặc tả Script 
Script hay kịch bản, theo thuật ngữ lập trình, là chương trình chạy với chế độ thông 
dịch trên máy khách (client) hay máy chủ (server) nhằm tạo ra các ứng dụng web (web 
base application). Xét trên phương diện: 
- Client-side : các script bổ sung vào trang web cho phép tạo ra các trang web 
tương tác, có những hiệu ứng động dựa vào mô hình đối tượng trình duyệt (BOM: 
browser object model) 
- Server-side: sử dụng các đối tượng liên quan để chạy các script trên server. 
Có nhiều loại ngôn ngữ đặc tả như JavaScript, VBScript, Jscript,.., trong tài liệu này 
chỉ giới thiệu sơ lược về ngôn ngữ đặc tả VBScript nhằm giúp các học viên tham khảo 
thêm khi thực hiện lập trình chức năng cho web. 
4.1. Khai báo biến: 
VB Script khai báo biến thông qua từ khóa dim, biến trong VBScript không cần xác 
định kiểu, các biến không cấu trúc được xem là biến vô hướng, có thể chứa và tự chuyển 
đổi hầu hết các kiểu dữ liệu. 
Hằng được khai báo bằng từ khóa Const. Ví dụ: 
Const p = 3.14 
9 
Mảng được định nghĩa và truy xuất thông qua chỉ số 
 - Dim x,y,z 
 - Dim a(10) ‘Khai báo mảng một chiều a có 10 phần tử’ 
 - Dim b(5,10) ‘Khai báo mảng hai chiều b’ 
 - Redim a(20) ‘Khai báo lại mảng a tăng thêm 10 phần tử vẫn giữ lại giá trị 
10 phần tử đầu’ 
4.2. Toán tử: 
VBScript cho phép sử dụng các toán tử xử lý chuỗi, so sánh và các phép gán, tính 
toán số học như sau: 
Toán tử Tên gọi Ví dụ 
^ Mũ 2^3 = 8 
+ Cộng x+y 
- trừ 
* Nhân 
/ Chia 
\ Chia phần nguyên 7\3 (kết quả: 2) 
Mod Chia lấy dư 7 mod 3 (kết quả: 1) 
& hoặc + Cộng chuỗi “he” & “llo” (kết quả: “hello”) 
= 
> 
< 
>= 
<= 
bằng 
lớn hơn 
nhỏ hơn 
khác 
lớn hơn hoặc bằng 
nhỏ hơn hoặc bằng 
Not, And, Or, Xor Toán tử logic If(x>2)and(yx)then 
4.3. Các cấu trúc điều kiện 
4.3.1. Lệnh If .. then và If  then  else 
 Cú pháp: 
10 
If then 
End if 
If then 
Else 
End if 
Chức năng: 
- Ở lệnh 1 khối lệnh 1 được thực hiện nếu trả về giá trị True. 
- Ở lệnh 2 khối lệnh 1 được thực hiện nếu trả về giá trị True, 
ngược lại khối lệnh 2 sẽ được thực hiện. 
Ví dụ: 
<% If Trim(Request.Form("Go"))="Tim kiem" then 
 tloai=Request.Form("tuloai") 
 Else 
 tloai = request.QueryString("tloai") 
 End if 
%> 
4.3.2. Lệnh Select case 
Cú pháp: 
 Select Case 
 Case 
 Case Else 
 End select 
 Chức năng: lệnh này cho phép lựa chọn nhiều trường hợp để ra quyết định 
thực thi. Mệnh đề Case Else trong cú pháp dùng cho trường hợp tất cả các phép so sánh 
của mệnh đề Case là không xảy ra. 
1 2 
11 
Ví dụ: 
<% Select Case tuoi 
 Case 1,2,3,4,5 
 Msgbox “bạn là nhi đồng” 
 Case 6,7,8,9,10 
 Msgbox “bạn là thiếu nhi” 
 Case Else 
 Msgbox “bạn là người lớn” 
End select 
%> 
4.4. Các cấu trúc lặp 
4.3.1. Lệnh Do ..Loop Until 
Cú pháp: 
 Do 
 Exit Do 
 Loop Until 
Chức năng: thực hiện trong khi đúng hoặc 
cho đến khi điều kiện trở nên đúng. Lưu ý là điều kiện có thể kiểm tra tại điểm bắt đầu 
hoặc kết thúc của vòng lặp, điều khác biệt ở đây là sẽ thực hiện ít nhất một 
lần nếu điều kiện kiểm tra được đặt ở cuối. Có thể thoát khỏi DoLoop bằng lệnh Exit 
Do. 
Ví dụ: 
<%Do 
 Msgbox “hãy đến trường” 
 If ngay = “chu nhat” then 
 Exit do 
12 
 End if 
Loop until ngay = “thu bay” 
%> 
4.3.2. Fornext: 
Cú pháp: 
 For gán-biến-chạy = giá trị đầu To giá trị cuối 
 Next 
Chức năng: thực hiện khối lệnh với số lần lặp xác định. 
4.3.3. For Each.next: 
Cú pháp: 
 For Each phần-tử In Tập-hợp 
 Next 
Chức năng: lặp lại một đoạn mã cho mỗi phần tử trong mảng hay tập hợp. 
4.3.4.. WhileWend: 
Cú pháp: 
 While 
 Wend 
Chức năng: thực hiện khối lệnh trong khi biểu thức điều kiện còn đúng. 
4.5. Khai báo hàm và thủ tục: 
Bạn dùng cú pháp Sub..End Sub để khai báo thủ tục trong VBScript. Cú pháp 
FuntionEnd Funtion để khai báo hàm. Để thực hiện triệu gọi 1 thủ tục, sử dụng lệnh 
Call. 
4.6. Một số hàm thông dụng trong ASP: 
4.6.1. Hàm xử lý văn bản: 
- TRIM(xâu as string): Bỏ khoảng trắng hai đầu kí tự 
13 
- LEFT(Xâu as string, n as interger): Lấy bên trái xâu n kí tự. 
- RIGHT(Xâu as string, n as interger): Lấy bên phải xâu n kí tự. 
- LCASE(Xâu as string) : Chuyển xâu về chữ thường 
- UCASE(Xâu as string) : Chuyển xâu về chữ hoa 
- MID(xâu as string, n1, n2): Lấy n2 kí tự trong xâu bắt đầu từ vị trí n1. 
- CSTR(Biến): Hàm chuyển đổi biến thành kiểu string 
Hàm JOIN/SPLIT(Xâu as string, kí tự ngăn cách): Sẽ Nối/Cắt xâu thành 
một/nhiều đoạn bằng cách xác định kí tự ngăn cách ở trên và cho các đoạn đó lần lượt 
vào một mảng. 
Ví dụ: 
<% 
 x=”Hà Nội; Hải Phòng; TPHCM” 
 y=split(x,”;”) 
 Response.write y(0) 
 ‘y(0)=”Hà Nội” 
%> 
4.6.2. Các hàm xử lý số: 
- SQR (n): Căn bậc 2 của n. 
- INT (n): Lấy phần nguyên n 
- MOD : phép chia lấy dư. 
- Round (số, n): Làm tròn số với n chữ số thập phân. 
- RND (): Trả về số ngẫu nhiên bất kì trong khoảng [0,1] 
5. CSS (Cascading Style Sheets) 
CSS là các Style dùng định nghĩa cách trình duyệt hiển thị các đối tượng HTML. 
Các Style này được lưu trong Style. Nhiều định nghĩa Style cho cùng một loại đối 
tượng sẽ được sử dụng theo lớp. 
5.1. Cú pháp CSS 
Cú pháp của CSS gồm 3 phần: đối tượng, thuộc tính và giá trị: 
14 
Đối tượng {thuộc tính: giá trị} 
Trong đó: 
+ Đối tượng thường là các tag HTML cần định nghĩa cách hiển thị. 
+ Thuộc tính là thuộc tính hiển thị của đối tượng đó. 
+ Giá trị là cách mà bạn muốn một thuộc tính hiển thị như thế nào. 
+ Các cặp thuộc tính: giá trị sẽ được phân cách nhau bởi dấu “;” 
Ví dụ: 
Để định nghĩa Style cho thẻ p 
p { 
 text-align: center; 
 color: black; 
 font-family: arial 
 } 
5.2. Các thuộc tính trong CSS 
5.2.1. Thuộc tính Class 
Với thuộc tính Class, bạn có thể định nghĩa nhiều Style khác nhau cho cùng một 
đối tượng. Ví dụ, bạn muốn có hai Style cho cùng một tag , nếu tag nào có 
class=right sẽ canh lề bên phải, class=center sẽ canh giữa: 
p.right {text-align: right} 
p.center {text-align: center} 
 Trong trang HTML: 
Đoạn này sẽ được canh phải. 
Bạn cũng có thể bỏ qua tên đối tượng để định nghĩa kiểu Style cho tất cả các thành 
phần có Class mà bạn định nghĩa. 
Ví dụ: 
15 
.center { text-align: center; color: red} 
Trong trang HTML sau, cả H1 và đoạn văn bản đều được canh giữa: 
Tiêu đề này sẽ được canh giữa. 
5.2.2. Thuộc tính ID 
Thuộc tính ID có thể dùng định nghĩa Style theo hai cách: 
 - Tất cả các thành phần HTML có cùng một ID. 
 - Chỉ một thành phần HTML nà ... e: Chọn Browse và duyệt đến tập tin ảnh dùng làm nền cho trang 
web. 
+ Background: Bấm vào nút bảng màu và chỉ ra màu nền cho trang web. 
+ Text: Chỉ định màu chữ mặc định. 
+ Link: Chỉ định màu chữ mặc định khi tạo liên kết cho nó. 
+ Left margin: Nhập vào khoảng cách lề trái so với nội dung trang web. 
+ Top margin: Nhập vào khoảng cách lề trên so với nội dung trang web. 
+ Margin width: nhập vào độ rộng của trang web. 
+ Margin height: nhập vào độ cao của trang web. 
Mục Title/Encoding: 
22 
Hình 3. Tiêu đề và bảng mã 
+ Title: Nhập tiêu đề của trang web. 
+ Các mục khác cứ để mặc định. 
Sau khi tinh chỉnh định dạng trang web xong, chọn OK để thiết lập (hình 3). 
5. Xem trang web trên trình duyệt 
Trong quá trình làm việc, nếu muốn xem thử trang web trên trình duyệt thì bấm Ctrl+S 
để lưu lại, sau đó bấm phím F12 để xem trên trình duyệt đã cài đặt làm mặc định hoặc 
bấm chọn vào biểu tượng có hình trái đất ở bên trên và chọn trình duyệt cần xem. 
6. Tạo bảng trong trang web 
- Chèn bảng 
Nếu muốn tạo một trang web có các nội dung được đặt ở các vị trí phù hợp và dễ tìm ra 
trên các bộ máy tìm kiếm thì cần tạo ra một bảng trước khi nhập nội dung. Để thực hiện, 
vào Menu Insert, chọn Table. 
23 
Hình 4. Thiết lập thuộc tính bảng 
Hộp thoại Table hiện ra, nhập số dòng trong mục Rows, số cột trong mục Columns, độ 
rộng của Table trong mục Table width và trong mục Border thickness nhập vào giá trị 
độ lớn của khung trong bảng sau đó bấm OK (hình 4). 
- Định dạng bảng 
Bấm chuột vào đường khung của bảng, khung thuộc tính của bảng hiện ra bên dưới như 
hình 5 
Hình 5. Định dạng bảng 
Thiết lập bảng thuộc tính gồm các nội dung sau: 
W, H: Chiều rộng và chiều cao của bảng. 
Rows: Số hàng. 
Cols: Số cột. 
CellPad: khoảng cách từ văn bản đến bảng. 
CellSpace: khoảng cách giữa các ô của bảng. 
Border: viền của bảng. 
Align: chế độ canh lề của bảng. 
24 
BgColor: màu nền của bảng hay ô. 
Brdr: màu đường viền. 
- Thay đổi cấu trúc bảng. 
Hình 6. Thêm dòng vào bảng 
Trong quá trình làm việc, bảng tạo ra có thể chưa phù hợp. Có thể thay đổi cấu trúc của 
bảng với những nội dung sau: 
Thêm dòng: chọn dòng muốn chèn thêm một dòng mới phía sau nó. Chọn Modify > 
Table > Insert Rows or Columns . 
Trong cửa sổ hiện ra, đánh dấu chọn trước mục Rows và Below the Selection. Trong 
mục Number of rows, đánh số dòng muốn chèn và bấm OK (hình 6) 
Thêm cột: chọn cột muốn chèn thêm cột mới phía bên phải nó. Thực hiện lại các thao tác 
tương tự như thêm dòng nhưng đánh dấu chọn trước chữ Columns. 
Xóa dòng: chọn dòng muốn xóa, chọn Modify > Table > Delete row (hoặc bấm chuột 
phải vào dòng muốn xóa, chọn Table > Delete row). 
Xóa cột: chọn cột muốn xóa, vào Modify > Table > Delete column (hoặc bấm chuột 
phải vào cột muốn xóa, chọn Table > Delete column). 
- Trộn ô: chọn các ô muốn trộn, chọn Modify > Table > Merge cells (hoặc bấm vào biểu 
tượng trộn ô ở dưới khung thuộc tính) 
- Tách ô: chọn vào ô muốn tách, chọn Modify > Table > Splits cells (hoặc bấm vào biểu 
tượng tách ô ở dưới khung thuộc tính) 
- Canh lề văn bản trong ô. 
Chọn văn bản cần định dạng trong ô hoặc chọn các ô cần định dạng, rồi bấm chuột phải 
vào vùng chọn và chọn Align. Sau đó chọn một trong bốn kiểu canh lề là Left (canh trái), 
Right (canh phải), Center (canh giữa) và Justify (canh đều) (hình 7). 
25 
Hình 7. Canh lề cho văn bản trong ô 
7. Chèn hình vào trang web 
- Chèn ảnh tĩnh 
Trước khi muốn chèn hình ảnh vào trang web, nên chép tất cả các hình ảnh cần chèn vào 
thư mục Image của bộ web. Việc lựa chọn hình ảnh để chèn vào trang web cũng phải chú 
ý đến số lượng và kích thước của ảnh vì nếu chèn quá nhiều hoặc ảnh quá lớn sẽ làm cho 
trang web có dụng lượng lớn, việc tải về xem cũng chậm hơn. Để thực hiện việc chèn 
hình ảnh vào trang web, làm như sau: vào Insert, chọn Image và tìm đến hình ảnh muốn 
chèn . 
Sau khi chèn hình ảnh vào trang web, tiến hành thiết lập các thuộc tính cho hình ảnh vừa 
mới chèn ở khung Properties (hình 8) 
Hình 8. Thuộc tính của hình ảnh 
- Tạo Rollover Images. 
Rollover Images là một hình ảnh sẽ thay đổi khi con trỏ đi ngang qua nó. Khi tạo 
Rollover Images thì hai ảnh phải có kích thước bằng nhau. Nếu hai ảnh có kích thước 
không bằng nhau thì Dreamweaver sẽ tự chỉnh cho chúng bằng nhau. 
Trước tiên đặt con trỏ ở vị trí muốn chèn. Sau đó chọn Insert > Image objects > 
Rollover Image. 
Hộp thoại Insert Image Rollover xuất hiện ta thiết lập các nội dung sau: 
26 
Hình 9. Tạo hiệu ứng ảnh động khi di chuyển trỏ chuột 
- Image name: đặt tên cho Image. 
- Original image: bấm vào nút Browse chỉ định hình đầu tiên xuất hiện. 
- Rollover Images: bấm vào nút Browse chỉ định hình sẽ thay đổi khi di chuyển chuột qua 
nó. 
- When Clicked, Go to URL: bấm vào nút Browse chỉ ra trang web liên kết đến khi bấm 
vào nó. 
Chọn OK để hoàn tất (hình 9). 
- Chèn ảnh động flash, video clip vào trang web. 
Vào Insert > media > chọn SWF hoặc FLV tùy theo định dạng tập tin cần chèn. Sau đó 
duyệt đến File flash hoặc File Video và bấm OK. 
Hình 10. Chèn tập tin đa phương tiện 
27 
8. Tạo menu cho trang web. 
Menu là một phần không thể thiếu cho mọi trang web. Nó là nơi liên kết các trang rời rạc 
của bộ web lại với nhau thành một hệ thống. Việc tạo ra một menu thật đẹp và chuyên 
nghiệp là ước ao của nhiều người thiết kế web. 
Đối với phần mềm thiết kế web Dreamweaver, đã có một cộng cụ tích hợp hỗ trợ tạo 
menu thật chuyên nghiệp là SothinkDHTMLMenu. Có thể dùng phần mềm đó để thiết 
kế menu cho trang web của mình. 
SothinkDHTMLMenu được cung cấp bản dùng thử tại trang chủ 
 Sau khi cài đặt thành công phần mềm 
SothinkDHTMLMenu, trên thanh menu của Adobe Dreamweaver sẽ có thêm menu 
Sothink và với menu này sẽ tạo ra một menu bóng bẩy cho website của mình (hình 11). 
Hình 11. Khởi động DHTML Menu 
Đầu tiên mở trang web cần tạo menu bằng phần mềm Adobe Dreamweaver đặt con trỏ ở 
vị trí cần chèn menu, chọn menu Sothink, trong bảng hiện ra chọn DHTML Menu (hoặc 
bấm tổ hợp phím Alt+Shift+D). Lưu ý, phải lưu trang web trước khi tiến hành tạo menu. 
Trong cửa sổ mở ra của SothinkDHTMLMenu, chọn Blank Menu để thiết kế mới, From 
Template nếu muốn chọn một kiểu menu có sẵn. Trong cửa sổ Menu Tree (menu đứng 
ở bên trái), có thể thực hiện các thao tác như cắt, dán, các chủ đề, chuyên mục cho 
menu thông qua các nút lệnh trên thanh công cụ. 
Toàn bộ quá trình thiết kế trong SothinkDHTMLMenu được thực hiện chủ yếu bởi các 
khung tính năng: Popup Menu, Menu Item. Ngoài ra, trong quá trình thiết kế, có thể tìm 
hiểu thêm về các cửa số: Scrolling và Global Setting (hình 12). 
28 
Hình 12. Các tác vụ thiết kế 
- Khung Menu Item: 
Cửa sổ này cho phép định dạng cho từng chủ đề, từng mục trong menu (hình 13). Trong 
cửa sổ này, có thể điều chỉnh các mục như sau: 
29 
Hình 13. Thuộc tính của menu 
+ Chọn nhãn General để nhập các mục cho menu. 
+ Chọn Text để nhập tên chủ đề. 
+ Chọn mục HTML để nhập tên chủ đề được định dạng trong các cặp thẻ HTML. 
+ Để chèn ảnh vào menu, chọn Image, xác định ảnh từ nút lệnh . 
+ Căn chỉnh vị trí hiển thị nội dung trên các mục menu với Align (left, right, center) hoặc 
Valign (top, middle, bottom). 
+ Đặt liên kết cho các mục menu thông qua mục Link. 
Ngoài ra trong cửa sổ Menu Item còn có thể định dạng font chữ, màu chữ, màu nền, hình 
nền, khung, kiểu cho menu trong các nhãn tương ứng của cửa sổ Menu Item là Font, 
Icon, Background, Border, Condition, Style, Advanced. 
- Khung Popup Menu 
Hình 14. Cửa sổ Popup Menu 
Sau khi tạo xong menu, cửa sổ này sẽ giúp chúng ta thiết kế màu sắc, kiểu hiển thị 
menu và điều quan trọng có thể tạo những hiệu ứng đặc biệt cho menu (hình 14). 
Các bước thực hiện như sau: 
Trong nhãn Genaral của Popup Menu, chọn Horizontally trong khung Display để hiển 
thị menu nằm ngang hoặc chọn Vertically cho kiểu menu dọc (hình 15). 
30 
Hình 15. Chọn kiểu hiển thị 
Tiếp theo chọn nhãn Background, trong mục Bg color, bấm nút và chọn màu nền cho 
menu từ bảng màu, còn nếu muốn menu có nền trong suốt thì bấm đánh dấu chọn trước 
mục Transparent. Cũng có thể chọn ảnh nền của menu bằng cách nhấn nút trong mục 
Bg image (hình 16). 
Hình 16. Chọn màu nền hay hình nền 
Để đặt màu nền cho menu, chọn nhãn Border, bấm chọn nút mũi tên trên nút để đặt màu 
cho mỗi cạnh của Menu. Trong nhãn Effects từ cửa sổ Popup Menu, sẽ đặt hiệu ứng cho 
menu (hình 17). Các hiệu ứng trong mục như sau: 
Hình 17. Chọn hiệu ứng 
31 
+ Đổ bóng cho menu: có thể đổ bóng cho menu bằng cách chọn Simple hoặc Complex 
từ menu con của Drop shadow, chọn đường nét, độ dày cho bóng và màu sắc cho bóng. 
+ Hiệu ứng hiển thị menu (Effects for showing): bấm chọn menu và chọn một hiệu ứng 
đặc biệt từ danh sách. 
+ Hiệu ứng đặc biệt để ẩn menu (Effect for Hiding): bấm chọn mũi tên, chọn hiệu ứng 
để ẩn menu. 
+ Effect Speed: Nhập giá trị vào ô text đặt tốc độ hiển thị cho hiệu ứng menu. 
- Khung Scrolling 
Nếu trong menu có quá nhiều menu con, có thể làm cho các menu con cuộn lại bằng cách 
tuỳ chỉnh trong cửa sổ Scrolling khi trên màn hình không đủ không gian để hiển thị tất cả 
chúng (hình 18). 
Hình 18. Tùy chỉnh kiểu dáng thanh cuộn 
+ Tuỳ chỉnh kiểu dáng cho thanh cuộn theo chiều ngang (Horizontal Popup Menus) hoặc 
theo chiều dọc (Vertical Popup Menus). 
+ Đánh dấu chọn Enable Scrolling. 
Sau khi đã hoàn tất các bước thiết lập cho menu, chọn lệnh Save and close để hoàn tất 
công việc. SothinkDHTMLMenu sẽ tự động đưa menu mà vừa tạo vào trang web của 
mình mà không cần phải làm việc với những đoạn code nữa. Tuy nhiên, 
SothinkDHTMLMenu lại có một nhược điểm là bị lỗi font tiếng Việt Unicode khi chạy 
menu trên trình duyệt và các tập tin do chương trình tạo ra là rất nhiều và nằm cùng thư 
mục với tập tin web vừa tạo nên có phần nào đó làm cho phần thiết kế không có tính 
khoa học. Nhưng hai lỗi trên vẫn có thể được khắc phục dễ dàng bằng cách làm việc với 
những đoạn code. 
Trước tiên, có thể khắc phục lỗi font bằng cách vào đoạn code do chương trình tạo ra 
trong Dreamweaver tìm đến các từ bị lỗi font và sửa lại cho đúng. Tiếp theo, để khắc 
32 
phục các tập tin do SothinkDHTMLMenu tạo ra nằm “mất trật tự” trong thư mục chứa 
trang web tạo ra một thư mục mới trong thư mục chứa trang web (thư mục Menu chẳng 
hạn), tiếp theo sao chép tất cả các tập tin mà SothinkDHTMLMenu tạo ra vào thư mục 
mới này. Sau đó vào cửa sổ soạn thảo code và thêm phần “menu\” vào trước các dẫn cũ 
là xong (các đường dẫn cũ là tên của các tập tin do SothinkDHTMLMenu tạo ra). 
9. Tạo liên kết cho trang web. 
Một trang web được thiết kế ra không chỉ chứa thông tin của nội bộ trang web mà nó còn 
phải được liên kết với nhiều trang web khác để nội dung thêm phong phú. Có thể tạo liên 
kết từ một hình ảnh đến trang web hoặc từ một dòng chữ tùy theo sở thích của người thiết 
kế. Các bước thực hiện như sau: 
- Chèn hình hoặc nhập dòng chữ cần tạo liên kết. 
- Bấm chọn hình hoặc chọn dòng chữ cần tạo liên kết. 
Nhập vào ô Link ở khung Properties địa chỉ trang web cần liên kết tới. 
Hình 19. Thuộc tính địa chỉ liên kết 
Lưu ý, địa chỉ trang web liên kết nhập vào cần ghi đầy đủ tên của trang web. Ví dụ, liên 
kết đến trang Quantrimang thì cần nhập đúng địa chỉ  
10. Cách tạo Template 
33 
Hình 20. Tạo template cho Website 
Trong việc thiết kế web, sẽ thiết kế một trang chủ và hệ thống gồm rất nhiều trang con. 
Để trang chủ và các trang con đều có cấu trúc nhất quán với nhau, phải tạo một trang gọi 
là template. Khi đó muốn thay đổi nội dung cho toàn bộ Website, chỉ cần đơn giản thay 
đổi nội dung ở trang template và cập nhật lại cho toàn bộ Website với những thao tác thật 
đơn giản. 
Tập tin template tạo ra sẽ có phần đuôi là .dwt và nó sẽ mặc định đặt trong Templates 
folder. 
Để tạo một template, tiến hành như sau: 
Khởi động Dreamweaver. Vào menu File, chọn New. Ở Page Type > chọn HTML 
template sau đó bấm vào nút Create để mở một trang mới lên (hình 20). 
Tiếp theo, khai báo các thông tin về website mới bằng cách vào Site, chọn Manage Sites, 
sau đó chọn New trong cửa sổ tiếp theo để khai báo. 
Tối thiểu cần khai báo một số thông tin sau (hình 21) 
- Site name: tên Website. 
- Local root folder: thư mục gốc trên máy. 
34 
- Default images folder: thư mục mặc định dành cho hình ảnh. 
Hình 21. Chọn thư mục lưu trữ Website 
Sau khi khai báo xong chọn Save và bắt đầu tạo template. Khi xác định thành phần nào 
trong web là không thay đổi, sẽ tạo trang web với những thành phần đó, sau đó chọn File 
> Save as Template. 
Ngoài ra, cũng có thể tạo ra một template từ một trang web đã thiết kế trước đó bằng cách 
mở trang web đó lên bằng Dreamweaver, tiến hành khai báo Site mới cho trang web đó 
và chọn File > Save as template. Sau đó đặt tên cho template vừa tạo. 
Tiếp theo, xác định các vùng có thể thay đổi được như sau: 
- Chọn vùng có thể thay đổi được bằng cách bấm chuột vào bảng của vùng đó (vùng 
được chọn sẽ có viền màu đen đậm bao quanh). 
- Chọn Insert > Tenplate > Editable Region (hình 22). 
35 
Hình 22. Chọn vùng thay đổi trên template 
Đặt tên cho vùng vừa chọn và bấm OK trong cửa sổ tiếp theo. 
Cuối cùng, chọn File > Save để lưu lại trang template vừa tạo. 
11. Tạo trang web mới từ template 
Bây giờ, có thể tạo ra trang web đầu tiên từ template vừa tạo. 
Chọn File > New. Trong cửa sổ hiện ra, chọn Page from Template và chọn File 
Template vừa tạo sau đó bấm nút Create (hình 23). 
Lưu ý, các tập tin tạo ra từ template chỉ có thể soạn thảo ở vùng Editable Region mà đã 
chọn lúc tạo template. Còn các vùng khác thì sẽ không được phép thay đổi. 
36 
Hình 23. Tạo trang web mới từ template 
Ngoài ra , khi đã tạo xong template với đầy đủ nội dung và liên kết thì lưu thay đổi trên 
template này. Dreamweaver sẽ xuất hiện hộp thoại nhắc nhở có muốn cập nhật thay đổi 
trên các trang dùng template này hay không, bấm Update để cập nhật. 
12. Đưa website lên hosting 
Sau khi đã hoàn tất việc thiết kế một trang web, tiến hành đưa trang web lên mạng 
Internet để thử nghiệm và chia sẻ thông tin. Đối với trang web thiết kế bằng 
Dreamweaver trong loạt bài này, để đưa website lên mạng làm như sau. 
Dùng phần mềm FileZilla FTP Client đưa trang web lên hosting. Khởi động FileZilla 
FTP Client nhập các thông tin cần thiết để kết nối với hosting. Trong cửa sổ chương trình 
có 4 khung chính như hình 24. 
37 
Hình 24. Cửa sổ chương trình FileZilla 
- Trong khung số 1, tìm đến đường dẫn chứa bộ web (trong hình là thư mục Web server). 
- Trong khung số 2, tìm và duyệt đến thư mục htdocs (đối với byethost) hoặc thư mục 
public_ html đối với 000webhost,. 
- Trong khung thứ 3, lần lượt bấm chuột phải vào từng tập tin, thư mục (hoặc bấm Ctrl + 
A để chọn tất cả) và chọn Upload. 
Đợi cho chương trình tải toàn bộ trang web lên hosting. Thời gian nhanh hay chậm tùy 
theo dung lượng tập tin, số lượng tập tin cần tải lên nhiều hay ít. Lưu ý, đối với Byethost 
thì có nhiều thư mục htdocs, phải duyệt đến thư mục htdocs nằm trong thư mục tên miền 
và tập tin iphải nằm trong thư mục htdocs.