Tailieu.vncty.com thiet ke web dai hoc

Trường Đại học Bạc Liêu

Bài giảng Thiết kế Website

Chương 1: Giới thiệu chung
I. Mạng máy tính
Trong quá trình khai thác, sử dụng điện thoại cá nhân, việc trao đổi thông tin ngày càng
phát triển mạnh mẽ, trong khi các máy tính chưa có nối kết với nhau thì việc sao chép dữ liệu
cho nhau gây khó khăn và mất nhiều thời gian. Để giải quyết vấn đề trên với đà phát triển của
máy tính các thiết bị máy tính có nhiều công nghệ mới và mạng máy tính ra đời là tất yếu.
Vì vậy mạng máy tính (network) là tập hợp các hệ thống máy tính và các thiết bị mạng
chia sẻ dữ liệu, chương trình, tài nguyên qua một đường truyền kết nối truyền thông dùng
chung trên cơ sở một hệ điều hành mạng.

Đường truyền là một hệ thống các thiết bị truyền dẫn vật lý gồm có 2 loại:
- Hữu tuyến: Cáp đồng trục, cáp đôi xoắn, cáp quang, cáp điện thoại, . . .
- Vô tuyến: Sóng cực ngắn(viba), tia hồng ngoại, . . .
1. Phân loại mạng
1.1. Mạng cục bộ (LAN)
Là mạng nội bộ kết nối các máy tính của một cơ quan, tổ chức trong phạm vi nhỏ, có bán
kính vài trăm mét. Kiến trúc mạng thường được chọn lựa hình sao, các máy tính kết nối với
thiết bị trung tâm bằng dây cáp xoắn. Theo cách này một máy in có thể được chia sẻ để dùng
cho nhiều máy tính. Tốc độ và độ tin cậy cao (truyền tin ít lỗi)
1.2 Mạng diện rộng (WAN)
Là mạng diện rộng, kết nối các mạng LAN ở xa nhau để có một mạng duy nhất. Phương
tiện truyền thông là yếu tố quan trọng cần được chọn khi xây dựng mạng WAN. Nếu sử dụng

Biên soạn: Huỳnh Huy Tuấn

Trang 1



đường truyền điện thoại thông thường thì tốc độ truyền dữ liệu hạn chế ở mức 56kb/s. Nếu
dùng đường truyền thuê bao riêng thì có thể đăng ký với phía cung cấp dịch vụ một đường
truyền 2Mb/s có chi phí khá cao. Khoảng cách của mạng WAN hàng trăm km, hàng nghìn km.
Tốc độ chậm, kém tin cậy hơn. Phải qua các đường truyền điện thoại hoặc đường truyền thuê
bao riêng…
1.3 Mạng Internet
Internet là liên mạng máy tính toàn cầu.
Về phần cứng: gồm các mạng LAN và WAN của cả thế giới kết nối với nhau.
Về phần mềm: theo một chuẩn chung - giao thức TCP/IP (Transmission Control
Protocol/Internet Protocol) để các máy tính nhận ra nhau. Hay lầm lẫn với các dịch vụ: trang tin
toàn cầu (World Wide Web), thư điện tử (Email – Electronic mail), truyền tệp tin (FTP – File
Transfer Protocol) đã trở thành nhu cầu của hàng trăm triệu người hiện nay.
2. Dịch vụ trang tin toàn cầu WWW(World Wide Web)
Đây là dịch vụ mới và mạnh nhất trên Internet. WWW được xây dựng dự trên một kỹ
thuật có tên gọi là Hypertext(siêu văn bản). Hypertext là kỹ thuật trình bày thông tin trên một
trang trong đó có một số từ có thể liên kết đến một trang thông tin mới có nội dung đầy đủ hơn.
Trên cùng một trang thông tin có thể có nhiều kiểu dữ liệu khác nhau như văn bản, ảnh, âm
thanh, phim,…Để xây dựng được các trang tin với các kiểu dữ liệu khác nhau như vậy WWW
sử dụng một ngôn ngữ có tên là HTML(HyperText Markup Language. Ta có thể Sử dụng
chương trình Internet Explorer để xem tin.
II. Các khái niệm khác
1. URL (Uniform Resource Locator)
Là cách gọi khác của địa chỉ website. URL bao gồm tên của giao thức(thường là http
hoặc ftp), tiếp đến là dấu hai chấm (:) và hai gạch chéo (//), sau đó là tên miền muốn kết nối
đến. Ví dụ một URL: “http://www.blu.edu.vn/cntt” sẽ hướng dẫn trình duyệt web của chúng ta
sử dụng giao thức http để kết nối với máy tính www.blu.edu.vn mở tập tin web mặc định là
index.htm hoặc default.htm trong thư mục cntt.
2. Hyperlink(siêu liên kết)
Là một thành phần cơ bản và rất cần thiết đối với một siêu văn bản world wide web. Siêu
liên kết giúp chúng ta dễ dàng tìm kiếm các thông tin khác nhau về một chủ đề. Một siêu liên
kết là một phần văn bản hay hình ảnh của trang web mà khi click vào nó sẽ liên kết đến: Một
phần khác của trang web, trang web khác trong website hay website khác, cho phép download
một tập tin, chay một ứng dụng, trình diễn môộ đoạn video hay âm thanh.
3. Web Browser (trình duyệt web)
Web Browser là một chương trình cho phép truy xuất và xem thông tin trên web. Có nhiều
Web Browser như: Internet Explorer, Netscape Navigator Communicator, Opera, Mozilla
Firefox, ...


Trang 2



4. Web Server (Máy chủ Web)
Web Server là máy chủ trong đó chứa thông tin dưới dạng Web (trang HTML có thể chứa
âm thanh, hình ảnh, video, văn bản, . . .). Các Web Server được kết nối với nhau thông qua
mạng Internet, mỗi Web Server có một địa chỉ duy nhất trên Internet.
5. Web Page (trang web)
Những thông tin truyền tải trên Internet được sắp xếp trên những trang văn bản đặc biệt
đó là trang web. Những trang web chỉ khác với các dạng văn bản bình thường ở chỗ trong nó
có những mối kết nối (links) tới những đối tượng khác. Những đối tượng này có nhiều loại như
một bức tranh, một văn bản, một file âm thanh, một đoạn video, hoặc là những văn bản khác.
Những đối tượng đó có thể nằm khắp nơi trên thế giới.
Đặc điểm của một trang web là có đuôi HTM hay HTML (Hyper Text Markup Language).
Vì trong trang web có những mối kết nối và nhiều loại đối tượng khác nhau nên người ta
phải xây dựng những công cụ để thể hiện nó. Những công cụ đó gọi là bộ duyệt web như
internet Explorer, Netscape Communicator . . .
6. Web Site
Web site là một tập các trang web có liên quan đến một công ty, một tổ chức, cá nhân
nào đó, . . .được lưu trữ trong một phân vùng náo đó. Các trang web nằm trong web site được
bố trí theo một cấu trúc nào đó. Trong một web site thường có một trang web chủ (home) và là
trang cửa ngõ để khách hàng thâm nhập vào các trang web nằm trong web site đó.
III. Phân loại Web
1. Static pages (Web tĩnh)
Tính chất của trang web này là chỉ gồm các nội dung hiển thị cho người xem.
2. Form pages (Biểu mẩu)
Cho phép nhập các yêu cầu từ phía người sử dụng. Khi người sử dụng điền xong các
thông tin vào biểu mẩu và nhấn nút “Submit”, thì những thông tin đó sẽ được chuyển về Web
Server lưu trữ rồi có thể Web server gửi thông tin về cho người sử dụng.
3. Dynamic Web (Web động)
Nội dung trang web động như trang web tĩnh, có nhúng các mã lệnh cho phép truy cập cơ
sở dữ liệu trên mạng.
IV. Những lời khuyên ban đầu:
Khi trình bày một trang web ta nên chú ý một số điểm sau:
- Tranh ảnh mang lại một nét thẩm mỹ cho trang web và nó cũng làm cho người đọc dịu
bớt sự căng thẳng khi thấy màn hình toàn là chữ. Nhưng ta cũng không nên lạm dụng việc sử
dụng quá nhiều hình ảnh trên trang web sẽ hạn chế rất lớn đến tốc độ truyền tải chúng.
- Thông tin bố trí trên trang web cần gọn gàng. Giúp người đọc dễ tìm, không nên dùng
quá nhiều khoảng trống.
- Vấn đề chọn font tiếng Việt theo chuẩn thống nhất.
- Tô màu những chỗ muốn người đọc chú ý.


Trang 3



Chương 2. GIỚI THIỆU VỀ HTML
Web cho chúng ta chia sẻ tài liệu, hình ảnh,… và điều chuyển qua các trang của một site
(nơi chứa các trang web) hay từ site này sang site khác dễ dàng trên Internet, ngôn ngữ chuẩn
để thể hiện web là HTML (Hypertext Markup Language) là một ngôn ngữ đánh dấu siêu văn
bản cho phép định nghĩa cách hiển thị nội dung của trang web trên trình duyệt. Tất cả các trình
duyệt (Internet Explorer, Opera, Firefox,…) đều hiểu được HTML.
I. Cấu trúc cơ bản
Các tập tin HTML có phần mở rộng .html hoặc .htm thực chất là các tập tin văn bản
ASCII, nghĩa là ta có thể tạo, sửa đổi nó bằng một trình soạn thảo văn bản trong tập tin HTML
xuất hiện như văn bản thường. Để trình bày nội dung tập tin HTML đẹp hơn, ấn tượng hơn ta
cần thêm các cặp thẻ định dạng văn bản, các cặp thẻ sẽ bao đoạn văn bản cần định dạng. Ví
dụ dùng cặp thẻ <b> và </b> để in đậm đoạn văn bản: <b> Hello </b> World
Chữ Hello sẽ in đậm còn chữ World thì bình thường.
Thẻ không phân biệt chữ hoa hay thường, nghĩa là dùng <b> </b> hay <B> </B> đều như
nhau.
Một số thẻ có chứa các thuộc tính bên trong dấu ngoặc nhọn, ví dụ như thẻ <font>
</font> (định font chữ).
Ví dụ 1: tập tin vidu1.htm có nội dung như sau:
<html>
<head> <title> Hello World </title> </head>
<body>
<font face=”Arial”><b> Hello </b> World </font>
</body>
</html>
Khi hiển thị trên trình duyệt sẽ như (hình 2.1)

Hình 2.1 minh họa nội dung trang HTML trên trình duyệt


Trang 4

II. Các thẻ định dạng của html
1. Headings
Headings được định dạng với hai thẻ <h1> đến <h6>. <h1> xác định heading lớn nhất.
<h6> xác định heading nhỏ nhất
<h1>Đây là heading</h1>
Thuộc tính:
Align = “Cách canh lề”
Left: trái ; center: giữa ; right: phải ; justify: đều
Ví dụ: Canh giữa dòng chữ: Chào các bạn
<h1 align = “Center”> Chào các bạn </h1>
HTML sẽ tự động thêm một dòng trắng trước và sau mỗi heading.
2. Đoạn văn - paragraphs
Paragraphs được định dạng bởi thẻ <p>
<p>Đây là đoạn văn</p>
<p>Đây là một đoạn văn khác</p>
Thuộc tính:
Align = “Cách canh lề”
Left: trái ; center: giữa ; right: phải ; justify: đều
Ví dụ: Canh phải dòng chữ: Ngôn ngữ lập trình
<p align = “Right”> Ngôn ngữ lập trình </p>
3. Line Breaks - xuống dòng
Thẻ <br> được sử dụng khi bạn muốn kết thúc một dòng nhưng lại không muốn bắt đầu
một đoạn văn khác. Thẻ <br> sẽ tạo ra một lần xuống dòng khi bạn viết nó.
<p>Đây <br> là một đo<br>ạn văn với thẻ xuống hàng</p>
Thẻ <br> là một thẻ trống, nó không cần thẻ đóng dạng </br>
4. Lời chú thích trong HTML
Thẻ chú thích được sử dụng để thêm lời chú thích trong mã nguồn của HTML. Một dòng
chú thích sẽ được bỏ qua bởi trình duyệt. Bạn có thể sử dụng chú thích để giải thích về code
của bạn, để sau này bạn có phải quay lại chỉnh sửa gì thì cũng dễ nhớ hơn.

5. Khoảng cách (&nbsp)


Trang 5



Mọi khoảng trống, dấu xuống dòng trong HTML được thể hiện trên trang web là 1
khoảng cách duy nhất
Để gõ một số ký tự đặc biệt ta phải sử dụng mã:  
Mục
6.
7.
8.

Thẻ
<b> </b>
<i> </i>
<u> </u>

Diễn giải
Định chữ đậm

Ví dụ
<b> MS Office 2003 </b>

Định
chữ
<i> echip </i>
nghiêng
Định chữ gạch
<u> Giai dap tin hoc </u>
dưới

9.

<sup> </sup>

Chỉ số trên

<b>A<sup>2</sup>B  A2B

10.

<sub> </sub>

Chỉ số dưới

<b>H<sub>2</sub>O  H2O

11.
<font> </font>

12.
<hr>
13.
<img>

14.
<ul> </ul>
15.
<ol> </ol>


Định font chữ.
Thẻ này có
thuộc tính
- face: tên font
- size: cỡ font
- color: màu

<font face= “Arial” size= “2”> Tu dien
Lac Viet </font>
(Định font chữ Arial có kích thước 2
(10pt)

Thêm
dòng
nằm
ngang <hr color= “Red” size= “1” align= “left”>
trong văn bản. (Vẽ đường màu xanh, cao 1 pixel, canh
Thẻ này có trái)
thuộc tính
<img
src=“echip.jpg”
width=“130”
height= “60”>
Chèn ảnh vào (src chứa đường dẫn của tập tin ảnh.
văn bản. Không Trường hợp tập tin ảnh nằm cùng thư
có thẻ đóng
mục chứa trang web thì chỉ cần tên tập
tin ảnh. Ảnh có độ rộng 130 pixel, cao
60 pixel.)
<ul>
Tạo danh sách
<li>Mcrosoft Word 2003 </li>
liệt kê, dùng với
<li>Mcrosoft Excel 2003 </li>
thẻ <li> </li>
</ul>
Tạo danh sách
<ol>
liệt kê có đánh
<li>Tin hoc can ban </li>
số thứ tự, dùng
<li>Tin hoc van phong </li>
với thẻ <li>
</ol>
</li>

Trang 6


16.

<a> /<a>


Tạo một liên
kết đến một
trang
khác
hoặc đoạn văn
bản khác. Giữa
cặp thẻ này có
thể là đoạn văn
bản hoặc ảnh
được gọi là
phần hiển thị.
Đường dẫn chỉ
ra nơi chuyển
đến khi liên kết
(phần hiển thị)
được gọi là
phần ẩn

<a href=“http://www.pcworld.com.vn”>
PC World Viet Nam </a>
(Tạo liên kết trên đoạn văn bản, phần
hiển thị là “PC World Viet Nam”, phần
ẩn là href=”http://www.pcworld.com.vn”.
Khi người dùng bấm lên liên kết “PC
World Viet Nam” sẽ được chuyển đến
trang chủ của PCWorld Việt Nam.
<a href=”http://www.echip.com.vn”>
<img src = ”echip.jpg” width = ”130”
height =”60”> </a>
(Tạo liên kết trên một ảnh, phần hiển thị
sẽ là ảnh trong thẻ <img>, phần ẩn là
href=”http://www.echip.com.vn”
khi
người dùng bấm lên liên kết này thì sẽ
được chuyển đến địa chỉ trang echip.

Để minh họa cho phần giới thiệu các thẻ dùng trong tài liệu HTML, bạn hãy xem cấu
trúc tài liệu HTML sau (Dùng Notepad tạo tập tin có cấu trúc như dưới đây và lưu lại với tên
vidu2.htm.
Ví dụ 2: tập tin vidu2.htm có nội dung như sau
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>San pham Microsoft</title>
</head>
<body>
<h3 align="left"><font face="Arial">SAN PHAM MICROSOFT</font></h3>
<ol>
<li><font face="Arial" size="2">MS Office2003:</font></li>
</ol>
<ul>
<li><font face="Arial" size="2">Microsoft Word 2003</font></li>
<li><font face="Arial" size="2">Microsoft Excel 2003</font></li>
<li><font face="Arial" size="2">Microsoft Access 2003</font></li>
<li><font face="Arial" size="2">Microsoft PowerPoint 2003</font></li>
<li><font face="Arial" size="2">Microsoft FrontPage 2003</font></li>
</ul>
<ol>
<li value="2">Windows XP, Windows Server 2000, Windows Server 2003.</li>
<li>Web server: IIS (Internet Information Server).</li>
<li>Ngon ngu kich ban phia trinh chu: ASP (Active Server Page).</li>
</ol>
<hr color="Green" size="1" align="left">


Trang 7



<p><i><b><font color="blue">Mot so lien ket:</font></b></i></p>
<p><a href="http://www.echip.com.vn"><img border="0" src="echip.jpg"></a>
<a href="http://www.echip.com.vn">Echip</a> Tuan tin cong nghe thong tin</p>
<p><a href="http://www.pcworld.com.vn">
<img border="0" src="logoPCW.gif" width="260" height="64"></a>
<a href="http://www.pcworld.com.vn">PCWorld Vietnam</a></p>
</body>
</html>
Nội dung được hiển thị trên trình duyệt như hình 2.2:

Hình 2.2 Sử dụng kết hợp các thẻ trên trình duyệt
17. Bảng
HTML coi một bảng gồm nhiều dòng, một dòng gồm nhiều ô, và chỉ có ô mới chứa dữ
liệu của bảng.
Các thẻ:
17.1 Tạo bảng: <table>…</table>: Mỗi bảng chỉ có 1 cặp thẻ này.
17.2 Tạo dòng: <tr>…</tr>: Bảng có bao nhiêu dòng thì có bấy nhiêu cặp thẻ này
17.3 Tạo ô:
Ô tiêu đề của bảng: <th>…</th>
Ô dữ liệu: <td>…</td>


Trang 8



Tổng số thẻ <td> và <th> bằng số ô của bảng. Dòng có bao nhiêu ô thì có bấy nhiêu thẻ
<td> và/hoặc <th> nằm trong cặp thẻ <tr>…</tr> tương ứng
Chú ý: Để có được một ô trống trong bảng (ô không có dữ liệu) thì cần đặt nội dung ô là:
 
17.4 <table>
- border=“số”: kích thước đường viền. Đặt bằng 0 (mặc định): không có đường viền.
- width=“rộng”, height=“cao”: độ rộng và độ cao của bảng. Có thể đặt theo 2 cách:
- n: (n là số) Quy định độ rộng, cao là n pixels
- n%: Quy định độ rộng, cao là n% độ rộng, cao của đối tượng chứa bảng.
- cellspacing=“số”: Khoảng cách giữa 2 ô liên tiếp
- cellpadding=“số”: Khoảng cách từ góc ô đến nội dung ô
- bgcolor=“màu”: màu nền của bảng
- background=“địa_chỉ_ảnh”: Địa chỉ của file ảnh làm nền cho bảng. Nên sử dụng đường
dẫn tương đối nếu có thể
17.5 <td>,<th>
- bgcolor=“màu”: màu nền của ô
- background=“địa_chỉ_ảnh”: Địa chỉ của file ảnh làm nền cho ô. Nên sử dụng đường dẫn
tương đối nếu có thể.
- width=“rộng”, height=“cao”: độ rộng và độ cao của ô. Có thể đặt theo 2 cách:
- n: (n là số) Quy định độ rộng, cao là n pixels
- n%: Quy định độ rộng, cao là n% độ rộng, cao của bảng.
- align=“căn_lề”: cách căn chỉnh dữ liệu trong ô theo chiều ngang: left, right, center,
justify.
- valign=“căn lề đứng”: cách căn chỉnh dữ liệu trong ô theo chiều đứng: top, middle,
bottom.
- colspan=“số”: số cột mà ô này chiếm (mặc định là 1)
- rowspan=“số”: số dòng mà ô này chiếm (mặc định là 1)
- nowrap: nếu có sẽ làm cho dữ liệu trong ô không tự xuống dòng
17.6 Ví dụ
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
</tr>


Trang 9



<tr>
</tr>
</table>
Sẽ hiển thị trên màn hình:
Heading

Another Heading

row 1, cell 1 row 1, cell 2
Cột trống trong bảng
Cột trống không có nội dung thì không được hiển thị
<table border="1">
<tr>
</tr>
<tr>
<td></td>
</tr>
</table>
Nó sẽ có dạng thế này trên trình duyệt
row 2, cell 1
Bạn chú ý rằng đường biên bao quanh cột trống bị mất (nhưng trong trình duyệt Mozilla
Firefox nó sẽ hiển thị đường biên)
Để tránh điều này xảy ra, bạn thêm một non-breaking space ( ) vào cột trống đó,
để làm cho đường biên của nó được hiện thỉ.
18. Những ký tự đặc biệt
Kết quả

Loại

Tên của ký tự

Số

một khỏang trắng

 

 

nhỏ hơn

<

<

<


Trang 10



>

lớn hơn

>

>

&

dấu và

&

&

"

ngoắc kép

"

"

'

ngoặc đơn

' (does not work in IE)

'

¢

cent

¢

¢

£

pound

£

£

¥

yen

¥

¥

§

Section

§

§

©

Copyright

©

©

®

registered trademark

®

®

×

Nhân

×

×

÷

Chia

÷

÷

III. HTML FORM
Để cho phép giao tiếp giữa client (trình duyệt) và Web server (như IIS) tốt hơn. HTML
chuẩn được thêm vào các Form và các thành phần điều khiển. Một Form là phần trang web mà
ở đó người dùng có thể nhập thông tin (nhập văn bản, chọn lựa tùy chọn từ danh sách thả
xuống, chọn hộp kiểm hoặc nút radio, …) hoặc thực hiện đặt hàng trên mạng, hay cho phép
người dùng chỉ ra các điều kiện chọn lựa cho các thông tin nhận được từ CSDL,…Những thành
phần điều khiển này dùng thể hiện hoặc chấp nhận thông tin từ Form. Giá trị các thành phần
điều khiển này được gửi đến server thông qua trình duyệt, chúng được xử lý bởi ứng dụng
hoặc script (ngôn ngữ kịch bản) trên Web Server.
HTML cung cấp các thành phần điều khiển sau:
•

Text: Là hộp văn bản chấp nhận một dòng văn bản duy nhất

•

TextArea: Là hộp văn bản chấp nhận nhiều dòng văn bản

•

Radio: Là nút hình tròn có thể chọn hoặc không chọn

•

CheckBox: Là hộp kiểm có thể chọn hoặc không chọn để chỉ ra một sự lựa chọn

•

Password: Là hộp văn bản như Text, nhưng không hiển thị ký tự nhập (chỉ hiển thị dấu
* hoặc dấu ).

•

Select: Là danh sách chọn lựa cho phép chọn một hoặc nhiều giá trị

•

Button: Là nút lệnh.

•

Submit: Là nút lệnh dùng để gửi thông tin từ Form tới Web server

•

Reset: Là nút lệnh dùng để xóa hết thông tin các thành phần điều khiển trên Form


Trang 11



Trước khi đặt bấy kỳ thành phần điều khiển nào lên trang web, bạn phải tạo một Form
bằng cặp thẻ <Form> </Form>. Tất cả thành phần điều khiển phải nằm trong cặp thẻ này:
<FORM NAME = “myForm”>
{thành phần điều khiển đặt ở đây}
</FORM>
NAME là thuộc tính tên của Form, dùng để nhận ra Form. Thuộc tính này là tùy chọn.
Ngoài thuộc tính NAME, thẻ <FORM> còn chấp nhận thuộc tính METHOD và ACTION
để quyết định cách dữ liệu được chuyển về Web server và cách dữ liệu được xử lý. Thuộc tính
METHOD có 2 giá trị là POST và GET. Nếu dùng POST thì dữ liệu gửi đến Web server nằm
trong HTTP header. Nếu dùng GET thì dữ liệu gửi đến Web server sẽ được nối vào đường dẫn
URL của trang đích.
Thuộc tính ACTION chỉ ra trang đích chứa mã xử lý dữ liệu trên Web server (ngôn ngữ
kịch bản phía trình chủ-ASP).
Ví dụ: để chỉ ra rằng nội dung của Form sẽ được gửi tới Web server thông qua HTTP
header và được xử lý bởi mã trong trang ReadValue.asp, ta dùng thẻ <FORM> như sau:
<FORM NAME=“myForm” METHOD=“POST” ACTION= “ReadValue.asp”>
Khi người dùng bấm vào nút Submit thì nội dung của Form sẽ được gửi tới Web server,
Web server sẽ thực thi trang ReadValue.asp để xử lý dữ liệu nhận được.
1. Điều khiển Text
Là hộp văn bản nhận dữ liệu nhập bởi người dùng như tên, địa chỉ hay bất cứ dạng văn
bản nào.
Để đưa điều khiển này vào trang web, bạn dùng thẻ INPUT với thuộc tính TYPE = TEXT như
sau:
<INPUT TYPE=“TEXT” NAME=“NXB” SIZE=45 MAXLENGHT=30 VALUE=“Minh Khai>
Dòng trên sẽ hiển thị hộp văn bản có tên “NXB” trên trang web, có giá trị khởi đầu là
“Minh Khai”, kích thước là 45, số ký tự tối đa là 30.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nha xuat ban</title>
</head>
<body>
<form method="POST" action="" >
<p><font face="Arial" size="2">Nhà xuất bản:</font>
<input type="text" name="NXB" size="35" value="Minh Khai"
maxlength="30"></p>


Trang 12



<p><input type="submit" value="Submit" name="B1"><input type="reset"
value="Reset" name="B2"></p>
</form>
<p></p>
</body>
</html>
Trình duyệt sẽ hiển thị như hình 2.3

Hình 2.3 Minh họa điều khiển Text
Để đọc giá trị của điều khiển “NXB” ta dùng mã sau (gán vào biến PubName):
PubName = Request.Form(“NXB”)
2. Điều khiển TextArea
Cung cấp cho người dùng một điều khiển chấp nhận nhiều dòng văn bản, tương tự như
Text, để đặt điều khiển này vào Form ta dùng như sau:
<TEXTAREA name= “Ghichu” rows =“5” cols=“30”> </TEXTAREA>
Tạo ra hộp văn bản có tên “Ghichu”, hiển thị trên 5 dòng, 30 cột.
Để khởi tạo giá trị ban đầu cho điều khiển này ta dùng:
<TEXTAREA name= “Ghichu” rows =“5” cols=“30”>
Toi dang tim hieu ve HTML
</TEXTAREA>
3. Điều khiển Radio
Để đưa nút Radio vào Form, ta dùng thẻ INPUT với thuộc tính TYPE=radio:
<INPUT TYPE = “radio” name = “gioitinh” value = 1>
Tạo ra một nút radio có tên “gioitinh” và giá trị là 1. Để tạo danh sách các nút chọn lựa thuộc
tính cùng nhóm, ta đưa thêm nút vào:
<INPUT TYPE = “radio” name = “gioitinh” value = 1> Nam
<INPUT TYPE = “radio” name = “gioitinh” value = 0> Nữ
Để khởi tạo một nút được chọn trước, ta thêm thuộc tính CHECKED:
<INPUT TYPE = “radio” name = “gioitinh” value = 1 checked> Nam
<INPUT TYPE = “radio” name = “gioitinh” value = 0> Nữ


Trang 13



Muốn đọc giá trị của radio được chọn, ta thực hiện trong mã (ngôn ngữ kịch bản trình chủ-ASP)
như sau:
Gtinh = Request.Form(“gioitinh”)
<html>
<head>
<title>Xuat ban</title>
</head>
<body>
<p>Giới tính:</p>
<form method="POST" >
<p><input type="radio" value="1" name="gioitinh" checked>Nam
<input type="radio" name="gioitinh" value="0">Nữ</p>
<p><input

type="submit"

value="Submit"

name="B1"><input

type="reset"

</form>
</body>
</html>
Trình duyệt hiển thị như hình 2.4:

Hình 2.4 Minh họa cách dùng nút radio
4. Điều khiển Checkbox
Nút Checkbox được dùng để thể hiện một danh sách cho phép chọn một hoặc nhiều tùy
chọn. Để đưa Checkbox vào Form ta dùng thẻ INPUT với thuộc tính TYPE = CHECKBOX như
sau:
<INPUT TYPE = “checkbox” name = “c1”>
Để hộp kiểm tra được chọn lúc khởi đầu ta dùng thuộc tích Checked như sau:


Trang 14



<INPUT TYPE = “checkbox” name = “c1” checked>
Cách đọc giá trị của checkbox như sau:
if Request.Form(“c1”) = “ON” then
Msg = “Bạn đã chọn hộp kiểm c1”
end if
<html>
<head>
<title>Sở thích của bạn</title>
</head>
<body>
<form method="POST" action="">
<p><b>Sở thích của bạn:</b></p>
<p><input type="checkbox" name="ST1" value="ON">Xem phim<br>
<input type="checkbox" name="ST2" value="ON">Nghe nhạc<br>
<input type="checkbox" name="ST3" value="ON">Chơi game<br>
<input type="checkbox" name="ST4" value="ON">Dã ngoại</p>
<p><input

type="submit"

value="Submit"

name="B1"><input

type="reset"

</form>
</body>
</html>


Trang 15



Trình duyệt hiển thị tập tin vidu5.htm như hình 2.5:

Hình 2.5 Minh họa cách sử dụng nút checkbox
5. Điều khiển Password
Điều khiển này giống như điều khiển Text nhưng nó không hiển thị ký tự người dùng
nhập vào, thay vào đó nó chỉ hiển thị ký tự dấu sao (*). Điều khiển này thường dùng cho mục
đích nhận mật khẩu người dùng:
<INPUT TYPE = “passsword” name = “mkhau” size=20 maxlenght=25>
6. Điều khiển Select
Điều khiển này là một danh sách thả xuống, cho phép người dùng chọn lựa tùy chọn
trong danh sách. Để đưa vào Form ta dùng thẻ <SELECT> </SELECT> như sau:
<SELECT name = “equips” size = 3 multiple> </SELECT>
Để tạo danh sách tùy chọn ta dùng thẻ OPTION trong thẻ SELECT:
<SELECT name = “equips” size = 3 multiple>
<OPTION value = “cpu”> CPU </OPTION>
<OPTION value = “mainboard”> MAINBOARD </OPTION>
<OPTION value = “dvd”> DVD </OPTION>
<OPTION value = “ram”> RAM </OPTION>
<OPTION value = “hdd”> HARD DISK </OPTION>
<OPTION value = “monitor”> MONITOR </OPTION>
</SELECT>
Danh sách trên có 6 tùy chọn, cho phép người dùng chọn nhiều giá trị cùng lúc, có 4 tùy
chọn được hiển thị trong danh sách.


Trang 16



Để đọc giá trị của tùy chọn trong danh sách , ta cần làm như sau:
lkiens = Request.Form(“equips”)
Giá trị của điều khiển SELECT chính là giá trị của các tùy chọn được chọn.
<html>
<head>
<title>Linh kiện</title>
</head>
<body>
<form method="POST" action="">
<p><b>Linh kiện:<br>
</b><select size="4" name="equips" multiple>
<option value="CPU">CPU</option>
<option value="Mainboard">Mainboard</option>
<option value="ASUSDVD">ASUS DVD</option>
<option value="RAMKMax">RAM KingMax</option>
<option value="HDD">Hard Disk</option>
<option value="Monitor">Monitor</option>
</select></p>
<p><b>Thời gian bao hành:</b><br>
<select size="1" name="years">
<option value="1">1 năm</option>
</select></p>
<p><input type="submit" value="Submit" name="B1"><input type="reset"
</form>
</body>
</html>


Trang 17




Hình 2.6 Minh họa cách sử dụng lựa chọn select
7. Nút Submit và Reset
Có 2 kiểu nút ta có thể đặt trên Form. Nút quan trọng nhất là nút Submit dùng để chuyển
dữ liệu (giá trị của các thành phần điều khiển trên Form) về web server. Nút Reset dùng để thiết
lập giá trị của các điều khiển về giá trị ban đầu.
Để đặt nút Submit lên Form ta dùng thẻ INPUT với thuộc tính TYPE=SUBMIT:
<INPUT TYPE = SUBMIT name = “submit” VALUE = “Dang Ky”>
Nút Submit có tên “submit”, chữ “Dang ky” hiển thị trên nút Submit
Để đặt nút Reset trên Form :
<INPUT TYPR RESET value = “Huy bo”>
Ví dụ 7: tập tin vidu7.htm sử dụng kết hợp các điều khiển được trình bày sau
<HTML>
<head>
</head>
<body>
<FORM NAME=Personal ACTION=ReadParameters.asp METHOD=POST>
<FONT FACE="Arial" size="2"><b>Tên tài khoản:</b></font>
<INPUT NAME=username SIZE=25>
<FONT FACE="Arial" size="2">
<b>Mật khẩu:</b></font>
<INPUT TYPE=password NAME=password SIZE=25 maxlength="20">
<BR>
<BR>

Trang 18



<b>Giới tính:</b></font><INPUT TYPE=Radio NAME=Sex VALUE=Male>
<font size="2" face="Arial">Nam</font>
<INPUT TYPE=Radio NAME=Sex VALUE=Female>
<FONT FACE="Arial" size="2">Nữ</font>
<BR>
<BR>
<b>Học lực:</b></font></TD>
<SELECT NAME=education size="1">
<OPTION VALUE="invalid">Chọn mức học lực <br>
<OPTION VALUE="HSchool">Trung Học<br>
<OPTION VALUE="College">Cao Đẳng <br>
<OPTION VALUE="University">Đại Học
</SELECT>
<BR>
<BR>
<TD VALIGN=TOP><font face="Arial" size="2"><b>Sở thích: </b> </font> <br></TD>
<TD VALIGN=TOP>
<INPUT TYPE=CheckBox NAME=Books value="1"><font face="Arial" size="2">Đọc
sách</font><br>
<INPUT TYPE=CheckBox NAME=Music value="2"><font face="Arial" size="2">Nghe
nhạc</font><br>
<INPUT TYPE=CheckBox NAME=Movies value="3"><font face="Arial" size="2">Xem
phim</font><br>
<INPUT TYPE=CheckBox NAME=Cooking value="4"><font face="Arial" size="2">Nấu
ăn</font><br>
</TD>
<BR><BR>
<INPUT TYPE=submit name=submit value="Dang Ky" >
<INPUT TYPE=reset value="Huy">
</body>
</HTML>


Trang 19



Hình 2.7 Minh họa việc kết hợp các thành phần điều khiển trên Form


Trang 20



Chương 3: SỬ DỤNG PHẦN MỀM FRONTPAGE 2003

Microsoft FrontPage là ứng dụng để tạo nên những trang web hay những web site. Qua
đó người dùng không cần quan tâm đến ngôn ngữ HTML. Cách soạn thảo FrontPage cũng gần
giống như trong Microsoft Word nhưng nó có nhiều tính năng hơn trong việc thiết kế một web
site. FrontPage 2003 là phiên bản mới của Microsoft và là một phần mềm khá thân thiện với
những người làm công việc thiết kế, biên tập trang Web. Nếu bạn đã sử dụng FrontPage 2000
thì bạn sẽ dễ dàng hơn với FrontPage 2003. Về nguyên tắc thì FrontPage 2000 và FrontPage
2003 giống nhau, nhưng FrontPage 2003 có những cải tiến đảm bảo cho việc thiết kế và quản
lý trang Web bạn đơn giản và dễ dàng.
Giới thiệu màn hình FrontPage 2003

Các trang web

Cấu trúc thư mục
của website

Vùng thiết kế

I.

I. TẠO WEBSITE
Website là một tập hợp các trang Web có liên quan với nhau. Trên mỗi Website luôn có
một trang Web được gọi là trang chủ. Trang chủ là trang được người sử dụng nhìn thấy đầu
tiên khi truy cập vào WebSite. Từ trang chủ có thể truy cập đến các trang Web khác trên cùng
một site hay các site khác nhau thông qua các liên kết.Ngoài trang chủ, một Websiote còn có
các trang Web khác, thường được gọi là các trang con. Một trang con có thể liên kết với trang


Trang 21



chủ, có thể liên kết với các trang con khác trong cùng Website. Thông thường các trang con có
các liên kết đến các trang con khác dưới nó. Bạn có thể tạo Website trên máy tính của bạn, sau
đó đưa lên một máy dùng để cung cấp các trang Web cho những người truy cập gọi là máy
chủ. Máy chủ thường kết nối với Internet hoặc Intranet.
1. Cấu trúc một Website
Một Website thông thường được tổ chức như sau:

hoặc

Trong đó:
NGUYEN.VAN.XUAN: Thư mục gốc của cấu trúc Website với các thành phần con gồm:
• images: Thư mục chứa các hình ảnh sẽ thể hiện trong các trang web.
• HTML: Thư mục chứa các trang web của cấu trúc website
• index.htm: Trang chủ của cấu trúc Website đó.
• monhoc.htm va trangThu_N.htm: Các trang con của cấu trúc Website.
Do vậy, khi tạo cấu trúc Website bạn nên tổ chức chúng theo cấu trúc trên, qua đó bạn có
thể quản lý chúng một cách dễ dàng.
2. Cách tạo Website
Để tạo một Website, công việc đầu tiên của bạn là xác định mục đích Website, tiếp đến
bạn phải xác định các trang web cần thiết. Trong môi trường FrontPage, có ba cách để tạo một
Website:
•

Sử dụng Wizard

•

Sử dụng Template.

•

Tạo mới một Website ngay từ đầu.

2.1 Sử dụng Wizard để tạo Website
Nếu bạn muốn tạo một Website phức tạp, bạn nên sử dụng các Wizard của FrontPage. Mỗi
Wizard cho phép bạn tạo một dạng Website khác nhau dựa trên những thông tin do bạn cung
cấp.
•

Corporate Presense Wizard: dùng để tạo Website cho một công ty.

•

Discussion Web Wizard: dùng tạo Website thảo luận.

•

Import Web Wizard: dùng để tạo Website dựa trên một Website đã có. Nếu muốn, bạn
có thể thay đổi các trang web hay cấu trúc của Website.


Trang 22



2.2 Tạo một web site dựa trên một web đã có
Vào menu File. chọn new, xuất hiện:
•

Hộp thoại New Page or
Web hiển thị.

•

Click chọn More Web
Site Templates...

Hộp thoại More Web site templates hiển thị:
•

Click chọn Import
Web Wizard

•

Nhập tên thư mục
chứa tập tin Web trong
ô Specify the location
of the new web

•

Click OK

Hộp thoại Import Web Wizard - Choose Source hiển thị.
•

Click chọn From a souce directory of files on a local computer or network

•

Nhập tên thư mục cần sử dụng trong Website Location

•

Click chọn mục Include subsite

•

Click Next


Trang 23



Xuất hiện bảng

•

Click Finish

FrontPage tạo một Website mới và đặt các tập tin sẽ tạo ra trong thư mục bạn đã chọn
.


Trang 24



2.3 Tạo một Website mới
- Mở Microsoft FrontPage 2003. Nếu Ô Tác Vụ New không mở , bạn chọn File > New > Ô
Tác Vụ New sẽ mở ra .
- Nhấp Mục : More Web Site Templates > Hiện ra Bảng Web Site Templates , chọn biểu
tượng : One Page Web site (hình 3.1)

Hình 3.1
FrontPage (FP) cung cấp cho bạn 1 Folder chứa các Websites của bạn, có tên là My
Web Sites . Folder nầy nằm trong Folder My Documents . Website của bạn tạo ra cần
phải đặt tên cho nó và chọn vị trí cho nó.
- Trong vùng Options, nhấp
nút Browse  Bảng New Web
Site Location xuất hiện, trên
Look in chọn ổ đĩa và thư mục
chứa website,


Trang 25



- Trên thanh công cụ của Bảng New Web Site Location, nhấp Nút Create New Folder 
Bảng New Folder hiện ra, nhập tên website ví dụ: OnePage trong hộp nameOk. (Hình 3.2).

Hình 3.2
- Trong Bảng New Web Site Location, nhấp Open .
Trong Bảng Web Site Templates, nhấp Ok (Hình 3.3).

Hình 3.3
FP hiện ra cấu trúc của Website MỘT TRANG (ONE PAGE) mới được tạo ra.
Website OnePage bao gồm :
• 1 File có tên : index.htm.
• 1 Folder trống ( chưa có chứa dữ liệu ) có tên : _private.
• 1 Folder trống ( chưa có dữ liệu ) có tên : images.
Ý nghĩa của các mục trong bảng Web site Templates:
•

One Page Web: web site có 1 trang chủ (index.htm).

•

Corporate Presense Wizard : Dùng để tạo web site cho công ty.

•

Discussion Web Wizard : Dùng để tạo web site thảo luận.

•

Import Web Wizard : Dùng để tạo web site trên một web site đã có trên
máy của ta hay máy chủ.


Trang 26


•


Customer Support Web : Là web cho phép công ty trả lời khách hàng và
tiếp nhận ý kiến đóng góp của khách hàng.

•

Project Web : Là web site chp phép chia sẻ thông tin về một dự án với các
thành viên tham gia dự án.

•

Personal Web : Là web site cho phép biểu thị các thông tin về cá nhân.

•

Empty Web : Tự tạo một cấu trúc web site từ đầu chưa có gì. Khác với
cách tạo web site bằng wizard, với cách tạo này sẽ không có trang web nào được
định sẵn trong cấu trúc web site do vậy ta phải tự tạo các trang web cho chúng bằng
cách Right click tại folder cần tạo trang web và chọn New Page. Sau đó đặt tên cho
trang web này. Thực hiện tương tự để tạo thêm các trang khác cho cấu trúc web
site.

Ta có thể tùy chọn các mục trong cửa sổ của web site sau đó chọn OK. Trừ mục One
Page Web và Empty Web ta phải tự làm lấy từ đầu, Các mục còn lại thì chúng ta được trình
Wizard của FrontPage làm cho ta và ta chỉ chọn các chọn lựa theo ý mình sau đó nhấn nút
“Next” nhiều lần cho đến khi nhấn nút “Finish” để kết thúc quá trình tạo web site.
Lúc này FrontPage tạo một web site mới và đặt các tập tin sẽ tạo ra trong thư mục đã
chọn như (hình 3.4)

Hình 3.4
Tuy nhiên nếu quan sát Folder của Site trong Microsoft Windows Explorer, bạn sẽ thấy nhiều
Files và Folders (Một số bị ẩn) hổ trợ cho trang nầy.
Trong Folder List ( Cột Trái ), nhấp đúp File: index.htm  Đã mở Chế độ hiển thị Page là một
Khung nền trống, bạn sẽ tạo ra nội dung trên đó.
2.4 Tạo mới một trang Web
Trong FrontPage có nhiều cách tạo mới một trang Web, tùy mỗi chế độ khác nhau thì cách tạo
mới trang web cũng có các bước khác nhau.
2.4.1 Tạo mới trang Web trong chế độ Page View


Trang 27



Ở chế độ này khi tạo mới trang Web, FrontPage sẽ cung cấp các mẫu trang web được định
sẵn, bạn có thể chọn các mẫu đó để tạo trang web cho bạn hay chọn Normal Page để tạo trang
Web trắng. Cách thực hiện:
•

Trước tiên, bạn phải chuyển màn hình
FrontPage sang chế độ xem Page bằng
cách click vào biểu tượng Page trên
thanh Views.

•

Vào menu File, chọn New

•

Trong hộp thoại New Page or Web,
click chọn More page Templates.

Xuất hiện bảng Page Templates (hình 3.5)

Hình 3.5
•

Trong hộp thoại Page Templates.


Trang 28



•

Click chọn lớp General, chọn trang web mẫu bạn cần.

•

Bạn có thể xem hình thức trang web mẫu trong khung Preview

•

Click OK để chấp nhận

Với chế độ này, bạn cần lưu lại trang web vừa tạo bằng cách click nút Save trên thanh công
cụ. Trong hộp thoại Save As, nhập tên tập tin trong ô File name. Click nút Save để lưu
trang Web mới vào Website.
2.4.2 Tạo mới trang Web trong chế độ Navigation hay Folder List
Ở hai chế độ này khi tạo mới trang Web thì FrontPage sẽ tạo ra trang trắng, trang đó mặc
định được gắn vào cầu trúc Website hiện hành. Cách thực hiện:
Vào menu File, chọn New, chọn Normal Page
Lúc này FrontPage sẽ tạo ra một trang trống. Bạn đặt tên cho trang Web này thì vào
File Save. Nếu bạn chọn chế độ Navigatior thì trang Web vừa tạo sẽ đưa vào sơ đồ Web
dưới dạng cây.
3. Đưa các trang Web có sẵn vào một website

•

Vào menu File, chọn Import

Hộp thoại Import hiển thị
•

•

Add Folder:
chèn cả thư mục
chứa các trang
web hay các tập tin
vào Website.

•

Click OK để
chấp nhận.

•


Click chọn
Add File: để chọn
trang Web hay các
tập tin cần chèn
vào Website.

Click Save
trên thanh công cụ
để lưu lại những
thay đổi.

Trang 29



4. Xóa một trang Web
•

Click chọn mục Folders trên thanh
công cụ chuẩn

•

Right Click vào trang muốn xóa

•

Chọn Delete
Trang bạn chọn xóa sẽ được xóa
khỏi Website.

5. Mở trang web
Trong FrontPage có 02 cách mở trang web khác nhau, tùy mỗi chế độ mở khác nhau mà
FrontPage sẽ hiển thị khác nhau.
5.1 Mở trang web trong cấu trúc web site:
- Click FileOpen Web hoặc nhấn phím Ctrl+O
- Trong hộp thoại Open Web chọn ổ đĩa và thư mục chứa web site muốn mở trong khung
“Look in”. Click Web site muốn mở và click Open.
- Vào menu View, chọn Folders List.
- Trang danh sách Folder, Double vào tập tin muốn mở, khi đó trang web sẽ được thể
hiện trên màn hình phải.
5.2 Mở trang web bất kỳ
- Chuyển về chế độ xem Page
- Chọn FileOpen
- Trong hội thoại Open chọn ổ đĩa và thư mục chứa file muốn mở trong khung “Look in”,
chọn file muốn mở và click Open. Lúc này các thể hiện của trang web đó được thể hiện.
6. Đóng trang web
Trên menu File, click Close hoặc nhấn tổ hợp phím Ctrl+F4.
7. Tổ chức web site
Chính là việc định lại cấu trúc của tổ chức web site đó. Ứng với mỗi trang web trong cấu
trúc web sẽ tương đương với cấu trúc trong tổ chức web site. Do vậy việc tổ chức web site sẽ
làm cho nó rõ ràng và dễ hiểu. Sau khi Import các trang web vào web site. Cách làm như sau:
-

Click biểu tượng Navigation trên thanh Views để chuyển sang chế độ cây.

-

Click chọn trang web cần đưa vào cấu trúc

-

Drag vào màn hình Navigation bên phải thể hiện dưới dạng hình cây.

Khi muốn trang đưa vào nằm dưới cấp của trang kia (trang này đã tạo cây), bạn chỉ drag
trang đó xuống dưới trang cần tạo.


Trang 30



II. Các thao tác chính trong Front Page
1. Đặt nền trang
Nền của một trang web được xây dựng bởi
một trong ba cách chọn là: từ một file ảnh, áp
một Theme, áp nền của một trang ưa thích khác.
1.1 Từ một file ảnh
- Bạn có thể thiết lập nền của trang web bằng
cách chọn một file ảnh làm mẫu nền và copy về
thư mục làm việc.
- Nhấn phải chuột trên nền soạn thảo, chọn
Page PropertiesFormatting (hình 3.6), sau đó
đánh dấu kiểm mục Background picture và gõ
file ảnh.

tên

Hình 3.6

1.2 Áp một Theme vào trang
Theme là một số mẫu trang web làm sẵn có trong FrontPage. Nó gồm kiểu nền trang,
kiểu font chữ, một số các ảnh gif thường dùng…Ta có thể áp đặt một mẫu Theme vào trang
web của mình. Chúng ta cũng có thể bổ sung thêm những mẫu trang web ưu thích vào danh
sách Theme để dùng sau này. Cách dùng Theme:
Chọn FormatTheme đánh dấu vào hộp Select a theme, chọn mẫu Theme ưu thích.
2. Định dạng Font
Giống như các trình ứng dụng soạn thảo văn bản khác, FrontPage cũng hỗ trợ việc định
dạng font chữ cho một tài liệu trang web.
2.1 Định dạng font chữ cho toàn bộ tài liệu
-

Trong màn hình Normal của trang web, nhấn phải chuột, chọn Page properties
AdvancedBody StyleFormatFont. . .

-

Chọn font chữ, cỡ chữ (size). Chọn OK để chấp nhận

2.2 Định dạng Font cho đoạn văn bản
-

Chọn đoạn văn bản

-

Chọn FormatFont

-

Chọn font chữ và cỡ chữ (size). Chọn OK

3. Các thao tác cắt, dán, sao chép
(Giống như phần mềm soạn thảo Microsoft Word)
4. Cách tạo âm thanh nền
Trước hết bạn phải chọn được một file âm thanh nền ưa thích (thường có đuôi .Wav,
.Mid, .Ram, .Au) rồi thao tác như sau:
-

Nhấn nút phải chuột

-

Chọn Page propertiesGeneral

-

Tại hộp Location gõ tên file âm thanh hoặc nhấn nút Browse để tìm file âm thanh.


Trang 31


-


Để chơi liên tục bạn đánh dấu kiểm tại Forever. Ngược lại, muốn chơi một số lần
file âm thanh này bạn chọn số lần chơi trong hộp Loop.

5. Chèn video vào trang web
Để làm sáng tỏ nội dung cần trình bày, hay để quảng cáo cho sản phẩm nào đó người ta
thường chèn các đoạn video vào trang web. Cách chèn như sau:
- Chọn vị trí cần chèn video.
- Vào InsertPictureVideo
- Chọn thư mục chứa tập tin video
- Chọn OK
Để thay đổi đặc tính của video:
- Chọn hình video trên trang web
- Nhấn phải chuộtchọn Picture properties. Hộp thoại picture properties hiện
- Mục Video source: cho phép thay đổi tên tập tin video
- Mục Repeat: Cho phép thiết lập số lần chạy cho file video tại hộp Loop, có thể chọn
Forever cho phép chay liên tục trong quá trình mở trang web đó. Chọn thời gian dừng giữa các
lần lặp trong hộp Loop delay.
- mục start: chọn chế độ mở file video:
+ On file open: Mở file video khi mở trang web
+ On mouse over: mở file video khi đưa trỏ chuột đến đối tượng đó.
6. Dùng Plug-In để đưa âm thanh và
Video vào trang web
Một đặc điểm không thể thiếu trong
FrontPage đó là dùng Plug-In để đưa file
âm thanh và Video vào trang web. Với
phương thức này người dùng có thể điều
khiển file âm thanh hay Video. Cách thực
hiện như sau:
Vào InsertWeb ComponentAdvanced
ControlPlug-In
-

Trong hộp thoại Plug-In Properties. chỉ đường dẫn đến file âm thanh hay video
trong khung Data source. Có thể nhấp nút Browse để tìm file

-

Chọn OK

III. Xây dựng bảng trong trang web
Bảng là loại văn bản rất thường gặp trong các trang web. Không phải khi nào trong trang
web cần một bảng biểu thì bạn mới xây dựng mà xây dựng bảng còn cho phép bạn bố trí thông
tin rất gọn gàng và có thẩm mỹ cho trang web.
Bảng trong FrontPage được trang bị khá phong phú các công cụ để phục vụ về bảng cho
phép chúng ta tạo một bảng hết sức đẹp mắt, như có nhiều mẫu đường kẻ, nổi hoặc chìm, đồ

Trang 32



dày đường kẻ tùy ý, làm nền bảng bởi một ảnh nào đó, đặt thuộc tính riêng cho một số ô nào
đó. Trong một ô nào đó ta lại có thể kẻ một bảng khác nằm trong ô này. . .
1. Tạo một bảng
* Cách 1:
Chọn TableDraw Table : vẽ tự do
* Cách 2:
Chọn TableInsertTable
Sau đó chọn số dòng (Rows) và số cột (Columns)
2. Kẻ các đường trong bảng
Chọn FormatBorders and Shading
3. Trộn ô, chia nhỏ một ô
- Trộn ô : Chọn các ô cần trộn, chọn TableMerge cells
- Chia ô : Chọn ô cần chia, chọn TableSplit cells
IV. Frame
1. Giới thiệu
Khung (Frames) là trang HTM hay HTML, trang này chia cửa sổ của trình duyệt web
thành những cửa sổ con. Ứng với mỗi cửa sổ con sẽ liên kết đến một trang HTML hay một hình
ảnh khác. Như vậy việc tạo frame chính là tạo trang HTM mà trong đó có dùng cấu trúc lệnh
HTML để chia cửa sổ của trình duyệt web. Mục đích của frame là làm cho một web site trở nên
dễ xem và dễ truy cập hơn. Nhưng cũng đừng quá lạm dụng sẽ làm cho trang web thêm rắc
rối, khó nhìn.
2. Tạo Frames
- Chọn FileNewMore Page Templates. . .Frames Pages
- Trong hộp thoại Page Templates, chọn một kiểu Frames, chọn OK
Để thể hiện nội dung vào khung frames ta thực hiện như sau:
-

Nhấn nút Set Initial Page

-

Trong hộp thoại Select File, chọn file HTM cần load sau đó nhấn OK để thể hiện
trang web.

Nếu muốn tạo một trang web mới ta nhấn nút New Page
3. Thay đổi thuộc tính của Frames
- Chọn Frame muốn thay đổi thuộc tính
- Chọn FramesFrames
Properties: hộp thoại Frames Properties (hình 3.6) xuất hiện có các thuộc tính sau:
+ Name: Đặt tên cho frame
+ Initial page: Thiết lập nội dung sẽ hiển thị trong frame
+ Frame size: Thay đổi kích thước frames
+ Margin: Lề của frame


Trang 33



+ Option: Thay đổi thuộc tính khác cho
frame:
•

Never: không hiển thị thanh trượt

•

If Needed: tự động hiển thị thanh trượt
nếu nội dung của trang web lớn hơn
kích thước frame.

•

Always: Luôn luôn hiển thị thanh trượt

V. Tạo liên kết đến các trang web
Đây là tính chất quan trọng của web site, nó cho phép tạo liên kết từ trang web này đến
trang web khác, hay liên kết đến một địa chỉ web site khác,…Với liên kết này bạn sẽ tạo được
các liên kết trong web site. Có 3 phương thức tạo liên kết.
1. Tạo liên kết văn bản
Để tạo liên kết văn bản ta thực
hiện như sau:
1.1 Đánh dấu chọn từ hay chuỗi
cần tạo liên kết
1.2 Chọn InsertHyperlink
1.3 Trong hôp thoại Insert
Hyprelink:
- Để toại liên kết đến trang
web khác, chọn trang cần liên
kết trong khung name, hay nhập trang cần liên kết trogn khung URL hoặc nhấn nút Browse, và
chọn trang cần liên kết trong hộp thoại Select file, chọn OK để chấp nhận.
- Để tạo liên kết đến địa chỉ web site khác, nhập địa chỉ cần liên kết trong khung URL.
- Để tạo liên kết đến địa chỉ Email, nhấn biểu tượng E-mail Address, nhập địa chỉ mail cần
liên kết đến trong khung E-mail address và nhấn OK.
- Nếu trang hiện hành đang nằm trong frame, để gọi trang khác sẽ năm trong frame hay
trở về cửa sổ chính, nhấn nút Target Frame. Trong hộp thoại Target Frame, xác định Frame
mà trang sẽ hiển thị. Trong đó:
+ Page default (page): Trang sẽ hiển thị trong khung cửa sổ mới.
+ Same frame: Trang sẽ hiển thị cùng frame với trang gọi nó.
+ Whole page(_top): Trang sẽ hiển thị trong cửa sổ chính


Trang 34



+ New window: Trang sẽ hiển thị trong cửa sổ mới.
+ Parent frame: Trang sẽ hiển thị trong frame cha, frame trước đó đã gọi đến frame hiện
hành.
+ Sau cùng nhấn OK để tạo liên kết.
2. Tạo liên kết hình ảnh
Việc tạo liên kết bằng đối tượng hình ảnh cũng tương tự như ta tạo liên kết văn bản.
3. Tạo liên kết bằng điểm nóng trên ảnh
Đây là tiện ích hữu dụng của FrontPage, khi ta muốn tạo chỉ điểm trên ảnh làm điểm liên
kết.
Ví dụ: Ta có hình bản đồ, làm thế nào để tạo liên kết cho mỗi quốc gia trên bản đồ đó. Do
vậy ta cùng dùng Hotspot để tạo chỉ điểm. Để tạo Hotspot ta thực hiện như sau:
3.1 Chọn hình mà ta cần tạo Hotspot
3.2 Lúc này thanh Drawing sẽ xuất hiện phía dưới cửa sổ FrontPage. Nhấn chọn dạng chỉ điểm
cần tạo trên thanh Drawing như:
- Rectangular Hotspot : Tạo chỉ điểm là hình chữ nhật
- Cicular Hotspot : Tạo chỉ điểm là hình tròn hay ellipese.
- Polygonal Hotspot : Tạo chỉ điểm là hình đa giác bất kỳ
3.3 Sau khi chọn kiểu tạo Hotspot, đưa trỏ chuột đến hình đã chọn trước đó (lúc này trỏ chuột
sẽ biến thành hình cây bút vẽ). Nhấn và kéo để tạo điểm liên kết. Để kết thúc vẽ, ta chỉ nhả
chuột.
3.4 Sau khi kết thúc vẽ, FrontPage sẽ tự động mở hộp thoại Create Hyperlink. Lúc này bạn sẽ
chọn trang web cần liên kết đến. Các bước thực hiện tương tự như phần 1.3, 1.4 (tạo liên kết
văn bản).
Lưu ý:
Với kiểu tạo Hotspot là Polygonal Hotspot, khi vẽ ta nhấn chuột ở các điểm neo của đỉnh
đa giác, đa giác chỉ kết thúc khi điểm neo cuối cùng trùng với điểm neo đầu.
VI. Bookmark và liên kết Bookmark
- Bookmarrk: là hình thức đặt tên cho chuỗi được chỉ định.
- Liên kết Bookmark: là tạo liên kết đến Bookmark đã được chỉ định (đặt tên). Đây là tính
chất thông dụng của web site khi bạn muốn liên kết đến các nội dung khác trong cùng trang
web. Để tạo liên kết Bookmark trước hết ta phải tạo Bookmark.
1.Tạo Bookmark
- Chọn từ hoặc chuỗi văn bản cần tạo bookmark.
- Vào trình đơn InsertBookmark
- Trong hộp thoại Bookmark, đặt tên cho đối tượng vừa
chọn trong khung Bookmark name.
- Click OK để tạo bookmark.


Trang 35



2. Tạo liên kết đến Bookmark
- Đánh dấu chọn từ, chuỗi hay hình hoặc Hotspot cần tạo liên kết.
- Vào trình đơn InsertHyperlink hay Right click và chọn Hyperlink, hoặc click biểu tượng
Hyperlink trên thanh công cụ
- Trong hộp thoại Create Hyperlink, chỉ định Bookmark sẽ liên kết đến trong khung
Boomark của mục Optional (hình 3.9).
- Click OK để chấp nhận tạo liên kết.
VII. Tạo Form trong Front Page
1. Tạo Form
Form là một tập hợp các text và formfield cho phép người sử dụng lấy hoặc cập nhật thông
tin tên nó.
Có 3 cách tạo Form:
1.1 Sử dụng Form Page Wizard
Với hình thức này, FrontPage sẽ đưa ra các câu hỏi, rồi dựa vào câu trả lời của bạn để tạo
Form tương ứng. Sau khi Form được tạo, nếu cần thiết bạn có thể sửa đổi lại cho phù hợp với
yêu cầu của mình.
1.2. Sử dụng Form mẫu
Khác với hình thức trên, FrontPage sẽ tạo ra một Form theo mẫu đã chọn, sau đó bạn có
thể chỉnh sửa lại Form cho phù hợp với yêu cầu của mình.
1.3 Tạo Form từ đầu
Đầu tiên, bạn tạo một trang web trống, sau đó thêm form vào trang và thêm vào các vùng
mà bạn cần.
2. Các đối tượng trên Form
Trong môi trường FrontPage, trên Form có thể có các đối tượng sau:
- One-line text box: thêm vào hộp văn bản chỉ có một dòng.
- Scrolling text box: Thêm vào hộp văn bản có thanh cuộn. Với hộp văn bản này, ta có thể
nhập vào văn bản có chiều dài tùy ý.
- Check box: thêm vào ô kiểm.
- Radio button: thêm vào nút chọn lựa.
- Drop-down menu: Thêm vào menu thả xuống.
- Push button : Thêm vào nút nhấn để thực hiện một tác động nào đó, chẳng hạn: hiển thị
các hộp thông báo, thực hiện một script lệnh trên trang web,…
- Label : Làm cho một trường và nhãn của nó đang được chọn trở thành một nhãn có thể
Click được.


Trang 36



3. Hướng dẫn tạo form như sau:

3.1 Tạo các Radio Button : Tự Nhiên, Xã Hội, Tiểu Học
- Chọn InsertFormRadio Button
- Right Click vào Radio Button vừa tạo, chọn mục Form Field Properties
- Trong hộp thoại Radio Button Properties:
+ Nhập tên nhóm trong ô Group Name
+ Nhập giá trị vào ô Value
+ Chọn ô selected
- Chọn OK
Thực hiện tương tự để tạo các Radio Button tiếp theo, tuy nhiên với các Radio Button này
bạn chọn mục Not Selected
3.2 Tạo các Check Box:
- Chọn InsertFormCheck Box
- Right Click vào Check Box vừa tạo, chọn mục Form Field Properties
- Trong hộp thoại Check Box Properties:
+ Nhập tên Check Box trong ô Name
+ Nhập giá trị vào ô Value
- Chọn OK
3.3 Tạo Drop-Down Menu
- Chọn InsertFormDrop-Down Menu
- Right Click vào Drop-Down Menu vừa tạo, chọn mục Form Field Properties
- Trong hộp thoại Drop-Down Properties:
+ Nhập tên Menu trong ô Name
+ Nhắp nút Add để mở hộp thoại Add Choice, nhập giá trị vào ô Choice, Chọn ô
kiểm Speccify Value, chọn ô Selected. Tiếp tục như thế cho các mục chọn khác nhau cho DropDown Menu
- Chọn OK


Trang 37



3.4 Tạo One-line Text Box
- Chọn InsertFormOne-line Text Box
- Right Click vào One-line Text Box vừa tạo, chọn mục Form Field Properties
- Trong hộp thoại One-line Text Box Properties:
+ Nhập tên Text Box trong ô Name
+ Nhắp nút Style. Trong hộp thoại Modify Style, nhắp nút Format, sau đó chọn mục
cần chỉnh sửa trong menu thả xuống.
- Chon OK . . .
3.5 Tạo Scrolling Text Box
- Chọn InsertFormScrolling Text Box
- Right Click vào Scrolling Text Box vừa tạo, chọn mục Form Field Properties
- thực hiện các thao tác còn lại tương tự như thực hiện One-line TextBox
3.6 Tạo Push Button
- Chọn InsertFormPush Button
- Right Click vào Push Button vừa tạo, chọn mục Form Field Properties
- Trong hộp thoại Push Button Properties:
+ Nhập tên Push Button trong ô Name
+ Nhập nhãn trong ô Value/Label.
+ Chọn dạng hiển thị của Push Button là một trong các tùy chọn của Button type.
- Chon OK
4. Gửi dữ liệu của Form đến địa chỉ Email hoặc tập tin
Chúng ta có thể gửi dữ liện trên Form đến một địa chỉ Email hoặc một tập tin trên Web
Server.
4.1 Gửi dữ liệu trên Form đến một địa chỉ Email
Để gửi dữ liệu trên Form đến một địa chỉ Email thì Web Server phải được thiết lập để hỗ
trợ thao tác này.
Cách thức tiến hành:
-

Right Click vào vùng trống của Form. Sau đó chọn mục Form Properties.

-

Trong hộp thoại Form Properties, nhập địa chỉ Email bạn muốn gửi dữ liệu của Form
đến trong ô Email Address, xóa tên tập tin mặc định trong ô File Name, chọn OK để
đóng hộp thoại Form Properties lại.

-

Chọn No trong hộp thoại vừa hiện ra và chấp nhận địa chỉ Email mà bạn vừa nhập
vào. FrontPage sẽ gửi dữ liện từ Form đến địa chỉ đó.

4.2 Gửi dữ liệu trên Form đến một tập tin văn bản
Cách thức tiến hành
-

Right Click vào vùng trống của Form. Sau đó chọn mục Form Properties.

-

Trong hộp thoại Form Properties, nhập tên tập tin văn bản bạn muốn gửi dữ liệu của
Form đến trong ô File Name, xóa tên địa chỉ Email mặc định trong ô Email Address,


Trang 38



-

Nhắp nút Option

-

Nhắp nút mũi tên xuống của mục File Format, chọn Format Text, Chọn OK

-

Chọn OK để đóng hộp thoại Form Properties lại.

Khi bạn nhấn nút Submit, dữ liệu của Form sẽ gửi đến tập tin bạn đã nhập trên Web
Server, nếu tập tin này chưa có sẽ được tự động tạo ra.
VIII. Các thành phần Component
1. Sơ lược về thành phần component
Để trang web thêm phần sinh động, linh hoạt và lôi cuốn người xem. Bạn nên chèn thêm
các Component của FrontPage vào trang web như: tạo chữ chạy(marquee), tạo nút đa
sắc(Interactive Button)
Thực ra đây là các mã lệnh được tạo sẵn trong FrontPage, khi bạn tạo các Component
thì FrontPage sẽ chèn các đoạn mã lệnh vào code HTML. Các mã lệnh này có thể là Java
Script, java Applet hay cấu trúc thẻ Tag của HTML.
Với các Component trong FrontPage là các lớp của java Applet, lớp này được gọi đến
trong từ khóa <Applet code = “tên lớp”>. Do vậy tạo Component cho trang web, bạn cần chép
các lớp này cùng cấp thư mục với trang web (file HTML)

sử dụng Component đó. Với

FrontPage khi bạn lưu lại trang web có sử dụng Component thì lớp tương ứng với Component
đó sẽ tự động sao chép vào thư mục của trang web gọi chúng.
Nếu mở trang web có sử dụng Component mà Component đó không thi hành, bạn hãy
kiểm tra lại lớp Component đó có nằm cùng cấp thư mục của trang web đó hay không. Hay đã
có lớp Component đó không?
Lưu ý: Với trang web có sử dụng Component, trong môi trường FrontPage khi bạn xem thể
hiện Preview thì Component đó sẽ không hoạt động. Do vậy bạn cần lưu lại sau đó dùng trình
duyệt web và mở trang web cần xem.
2. Sử dụng các thành phần Component
2.1 Tạo nút Interactive Button
Để trang web được linh hoạt, sinh động và lôi cuốn người sử dụng bạn có thể tạo các
liên kết bằng các nút Interactive Button. Nút Interactive Button cho phép thay đổi trạng thái
của nút khi ta di chuyển chuột lên chính nó.
Khi ta di chuyển chuột trên nút Interactive Button, nó sẽ chuyển sang màu khác hoặc
được chuyển sang dạng được nhấn xuống. Nếu nút Interactive Button có tạo liên kết web, khi
nhấn chuột vào nút Interactive Button trang web liên kết sẽ được gọi đến.


Trang 39



Cách tạo:
-

Nhấn

InsertWeb

Component

Interative Button
-

Trong hộp thoại Interative Button, hãy
đặt lại các giá trị của nút trong các ô.

-

Ngăn Button:
o

Text: nội dung hiển thị trên text

o

Link: nhập vào địa chỉ trang web
hay web site mà nút cần liên kết
Button: chọn kiểu nút

o
-

Ngăn Font: chọn font, size, color,...

-

Ngăn Image
o

Width: thiết lập chiều dài cho nút

o

Height: thiết lập chiều cao cho
nút

2.2 Tạo chữ chạy Marquee
Để tạo dòng chữ chạy trong trang web ở bất cứ vị trí nào trong trang, bạn có thể dùng
Component Marquee. Component này sẽ tạo ra thẻ Tag<Marquee> trong code HTML với các
tham số cho phép ta định vị kiểu chạy chữ trong trang.
Cách tiến hành:
- Chọn InsertWeb ComponentDynamic EffectMarquee
- Trong hộp thoại Marquee Properties, bạn có thể chỉnh nội dung văn bản, hướng di chuyển
của dòng văn bản, tốc độ di chuyển cũng như kích thước và kiểu chữ thể hiện trên Marquee
trong các ô:
o

Text : nội dung văn bản của Marquee

o

Direction : chọn giá trị Left nếu muốn dòng văn bản chạy từ phải qua trái,
chọn giá trị Right nếu muốn dòng văn bản chạy từ trái qua phải.

o

Speed : đặt lại tốc độ
chạy của Marquee.

Lưu ý: giá trị trong ô Delay càng lớn thì
tốc độ chạy của dòng văn bản càng
chậm. Giá trị trong ô Amount biểu thị
bước dịch chuyển của Marquee
o

Behavior : tùy thuộc
giá trị bạn chọn mà Marquee có
cách chạy khác nhau.


Trang 40





Scroll : chạy theo dạng cuộn



Slide : chạy theo dạng trượt



Alternate : chạy sang phải từ trái sang phải và ngược lại



Repeat : xác định số lần lặp của Marquee, nếu mục Continuously
được chọn thì Marquee sẽ lặp liên tục, ngược lại sẽ lặp theo số lần lặp được xác
lập trong khung Times.



Background color : đặt màu nền cho Marquee



Style : các định dạng khác của Marquee

IX. Dynamic HTML Effect
Dynamic HTML(DHTML-HTML động): là ngôn ngữ HTML mở rộng làm tăng hiệu ứng
trình bày văn bản và đối tượng khác. Trong FrontPage, bạn có thể sử dụng thanh công cụ
DHTML Effects để làm tăng cường hiệu ứng cho các thành phần của mà không cần lập trình.
- Vào menu view, chọn Toolbas, chọn DHTML Effect, công cụ DHTML Effect xuất hiện:

Ý nghĩa các mục trên thanh DHTML Effect:
- On: Chọn sự kiện: click (Nhấn chuột); Double click (nhấp đúp); Mouse over(chuột vào
vùng chọn); Page load (mở trang).
- Apply: Hiệu ứng (Formatting)
- Choose setting (định dạng)
X. Xuất bản web
Trước khi xuất bản web chúng ta sẽ kiểm tra lại các lỗi chính tả, nhận diện và chỉnh sửa các
siêu liên kết và xem trước các trang web trong trình duyệt và trên trên giấy. Sau đó chúng ta sẽ
tìm một máy chủ chứa web (Web server) để xuất bản.
1. Kiểm tra các siêu liên kết
Kiểm tra các siêu liên kết có thể đến các địa điểm thích hợp hay không. Hãy nhớ rằng các
trang web luôn thay đổi và một siêu liên kết dẫn tới một web site khác ngày hôm nay có thể còn
đúng, nhưng ngay mai có lẽ không còn đúng nữa. Để kiểm tra các siêu liên kết, ta phải tìm hiểu
hai View khác của Front Page: Hyperlinks View (màn hình siêu liên kết) và Reports View (màn
hình báo cáo).
1.1 Kiểm tra trong màn hình siêu liên kết
Màn hình siêu liên kết cho ta một cái nhìn toàn cục về tất cả các siêu liên kết trong web.
Hãy thao tác như sau:
- Trở về trang chủ, từ menu chính nhấn vào ViewHyperlinks, xuất hiện cửa sổ :

Trang 41



Phía bên trái màn hình là khung Folder List với các trang trong web. Phía bên phải là sơ đồ các
liên kết.
1.2 Kiểm tra trong màn hình báo cáo
Như ta biết màn hình siêu liên kết là rất hữu dụng cho việc nhìn bao quát toàn bộ các siêu
liên kết, nhưng nó không nói cho bạn biết liệu tất cả những siêu liên kết này có hoạt động đúng
đắn hay không. Để kiểm tra chức năng và tình trạng hoạt động của tất cả các siêu liên kết đúng
đắn hay không. Để kiểm tra chức năng và tình trạng hoạt động của tất cả các siêu liên kết trong
một web, bạn phải sử dụng màn hình báo cáo. Thao tác như sau:
Từ menu chính nhấn vào ViewReportsSite Sumary, xuất hiện:


Trang 42



Dựa vào màn hình ViewReport giúp ta kiểm tra và chỉnh sửa web site của hình cho đúng.
2. Xuất bản một web
Sau khi quá trình thiết kế web đã hoàn thành thì chúng ta phải chia sẻ nó với những
người khác qua việc đưa web lên máy chủ (Web server). Sau đó web của chúng ta sẽ là web
site có thể được truy cập và được xem qua một trình duyệt web (Web Browser). Để xuất bản
web, ta phải biết được địa chỉ của máy chủ mà mình muốn đưa nó lên. Ta cũng có thể tạo web
trên một máy tính đang hoạt động với tư cách là máy chủ.
Để có thể biến một web của Front page thàng một web site hoàn chỉnh trong trình duyệt,
máy chủ giữ web đó cần phải được cài đặt Microsoft Front Page Server Extension, dù máy chủ
này ở trong mạng Internet hay trong mạng nội bộ.
Trong trường hợp muốn đưa lên mạng nội bộ, quá trình xuất bản web là rất đơn giản và
chắc chắn sẽ có người chuyên trách trong tổ chức chỉ rõ từng bước cho ta biết. Trong trường
hợp muốn đưa lên Internet, công việc phức tạp hơn một chút là ta phải liên hệ với một nhà
cung cấp dịch vụ Internet (ISP) để tiến hành làm thủ tục gửi web của mình lên Internet.
Sau khi liên hệ thành công với một nhà cung cấp và có được các thông số để xuất bản
web, chúng ta tiến hành các bước như sau:
-

Trở về trang chủ web

-

Vào menu chinh File, chọn Publish Web, xuất hiện cửa sổ:


Trang 43



Nhập địa chỉ Web hay địa chỉ FTP và ô Remote Web site location  Chọn OK  . . .


Trang 44



Chương 4: THIẾT KẾ WEB ĐỘNG VỚI ASP
1. ASP là gì?
ASP được viết tắt từ Active Server Page. ASP là một chương trình chạy trên IIS. IIS được
viết tắt từ Internet Information Services. Đây là một Web server do Microsoft phát triển.
Một trang ASP chứa ngôn ngữ kịch bản phía trình chủ và có thể chứa HTML. Các trang
ASP cũng có thể xuất kịch bản phía trình khách về cho trình duyệt, bạn cũng có thể trộn mã
ngôn ngữ kịch bản phía trình khách và trình chủ với HTML.
2. Tập tin ASP chứa gì?
Tập tin ASP giống như tập tin HTML
3. Cú pháp cơ bản của ASP
Một tập tin ASP thông thường chứa các thẻ HTML giống như tập tin HTML. Tuy nhiên
một tập tin ASP cũng có thể chứa ngôn ngữ kịch bản phía trình chủ, phần ngôn ngữ này được
bao trong cặp dấu phân cách <% và %>. Ngôn ngữ này được thực thi trên Web server, nó có
thể chứa bất kỳ biểu thức, phát biểu, thủ tục hoặc toán tử hợp lệ nào.
Để gửi nội dung đến trình duyệt bạn dùng phương thức Write của đối tượng Response.
Ví dụ 1: gửi câu thông báo “Xin chào” đến trình duyệt:
<html>
<head> <title> Hello World </title> </head>
<% @ language=”vbscript”%>
<body>
<% response.write(“Xin chào”)
%>
</body>
</html>
Lưu tập tin này với tên vidu01.asp trong thư mục myasp rồi nhập địa chỉ tại trình duyệt:
http://localhost/myasp/vidu01.asp
Ngôn ngữ kịch bản trong ASP là VBScript, do đó khi ta không chỉ rõ ngôn ngữ kịch bản sẽ
dùng trong ASP thì mặc định là VBScript được dùng. Nếu dùng ngôn ngữ kịch bản là Javascript
thì ta dùng lệnh: <% language=”javascript”%>
Ta có thể thêm thẻ HTML vào trong đoạn văn bản gửi đến trình duyệt để định dạng văn
bản. Xem ví dụ sau:
Ví dụ 2:
<html>
<head> <title> Vi du 2 </title> </head>
<body>


Trang 45



<% response.write(“<h2> Dùng thẻ HTML để định dạng văn bản!</h2>”)
%>
</body>
</html>
Kết quả hiển thị trên màn hình:

4. Biến trong ASP
Biến dùng để lưu trữ thông tin. Nếu được khai báo bên ngoài thì nó có thể được thay đổi
bởi bất kỳ mã kích bản nào trong tập tin ASP. Nếu biến được khai báo bên trong thủ tục thì nó
được tạo ra và bị hủy mỗi khi thủ tục được thực thi.
a) Khai bái biến
Ví dụ 3:
<html>
<head> <title> VI DU 3 </title> </head>
<body>
<%
Dim fullname = “Huỳnh Huy Tuấn”
response.write(“Xin chào, tôi tên là: “& fullname”)
%>
</body>
</html>
b) Khai báo mảng
Ví dụ 4:
<html>
<body>
<%
Dim book(4), i
book(1) = “MS FrontPage”
book(2) = “Dream Weaver”
book(3) = “MS Access”


Trang 46



book(4) = “Active Server Page”
for i = 1 to 4
response.write(book(i) & “<br>”);
next
%>
</body>
</html>
c) Sử dụng vòng lặp
Ví dụ 5:
<html>
<body>
<%
Dim i
i=1
Do while i < 7
Response.write(“<h” & i & “>” & i & “ : ASP” & “</h” & i & “>”)
i=i+1
Loop
%>
</body>
</html>
d) Sử dụng phát biểu điều kiện
<html>
<body>
<%
Dim a,b
a = 11
b=7
if a < b then
response.write(a & “ nhỏ hơn “ &b)
else
response.write(a & “ lớn hơn “ &b)
endif
%>
</body>
</html>


Trang 47



5. Sử dụng Form trong ASP
5.1 Đối tượng Request
Để tương tác với người dùng ta cần sử dụng form để thu thập dữ liệu hoặc thực hiện truy
vấn dữ liệu dựa trên yêu cầu của người dùng . Trong ASP để nhận thông tin từ form ta có thể
dùng lệnh Request.QueryString hoặc Request.Form
Ví dụ 6:
<html>
<head> <title> Form6a </title> </head>
<body>
<form method = “get” action = “Form6b.asp”>
First Name : <Input type = “text” name = “fname”>
<br>
Last Name: <Input type = “text” name = “lname”>
<br> <br>
<input type = “submit” value = “Submit”>
</form>
</body>
</html>
Khi người dùng nhấn nút Submit thì trang Form6a.asp được gọi để xử lý dữ liệu từ form
là fname và lname.
a) Lệnh Request.QueryString
Nếu Form dùng phương thức GET (method = get) thì ta dùng phương thức QueryString
của đối tượng Request để nhận dữ liệu từ form.
Tập tin Form6b.asp:
<html>
<body>
Xin chào
<%
Response.write(request.querystring(“fname”))
Response.write(“ “ & request.querystring(“lname”))
%>
</body>
</html>
Kết quả nhận được như hình:


Trang 48



b) Request.Form
Nếu Form dùng phương thức POST (method = post) thì ta dùng phương thức Form của
đối tượng Request để nhận dữ liệu từ form.
Tập tin Form6c.asp:
<html>
<body>
Xin chào
<%
Response.write(request.form(“fname”))
Response.write(“ “ &request.form(“lname”))
%>
</body>
</html>
5.2 Đối tượng Response
Đối tượng Response thể hiện đáp ứng của Web server tới trình duyệt máy khách, cho
phép bạn gửi thông tin đến máy khách, cũng như quyết định khi nào thông tin này được gửi đi.
Các thuộc tính của đối tượng Response:
Expires
Thuộc tính này thiết lập thời gian(phút) mà một trang sẽ được lưu trên trình duyệt trước
khi nó hết hạn lưu.
Cú pháp: Response.Expires[=number]
Number là thời gian lưu(phút)
Status
Thuộc tính này trả về giá trị dòng trạng thái của Web server.
Cú pháp: Response.Status=statusdescription
Statusdescription gồm 1 trong 3 kí số và phần mô tả.
Ví dụ:
<%
Ip=request.ServerVariables(“REMOTE_ADDR”)
if ip<>”198.162.1.122” then
response.Status = “401 Unauthorized”
response.Write(response.Status)
response.End
end if
%>
Các phương thức của đối tượng Response
Redirect
Phương thức này chuyển người dùng sang một địa chỉ URL khác.
Cú pháp: Response.Redirect URL
URL: là địa chỉ chỉ đến trang web khác


Trang 49



Ví dụ:
<%
Response.Redirect
“http://localhost/myasp/mymain.asp”
%>
Write
Phương thức này ghi chuỗi dữ liệu bất kỳ ra kết xuất gửi đến trình duyệt. Cú pháp:
Response.write <thông báo>
Ví dụ:
<%
Response.Write “Xin chào <br>”
name = “Các bạn sinh viên”
Response.Write name
Response.Write”<a href=’http://www.echip.com.vn’>E chip Tin hoc </a>”
%>
6. Đối tượng ADO
Đối tượng ADO được dùng để truy cập cơ sở dữ liệu(CSDL) từ trang Web của bạn.
6.1 ADO là gì?
ADO được viết tắt từ ActiveX Data Objects. Đây là công nghệ do Microsoft phát triển, tự
động được cài đặt khi bạn cài IIS. ADO là một giao tiếp lập trình để truy cập dữ liệu trong
CSDL.
Cách chung để truy cập CSDL từ trong trang ASP như sau:
1. Tạo một kết nối ADO với CSDL
2. Mở kết nối vừa tạo
3. Tạo một recordset từ ADO
4. Mở recordset này
5. Lấy dữ liệu bạn cần từ recordset
6. Đóng recordset
7. Đóng kết nối ADO
6.2 Kết nối CSDL bằng ADO
Trước khi có thể truy cập CSDL từ trang Web, bạn cần thiết lập một kết nối tới CSDL
a. Kết nối CSDL Access
Giả sử ta có một CSDL Access là northwind.mdb trong thư mục C:mydata. Bạn sử dụng
cú pháp sau để kết nối tới CSDL Access này:
<%
set
conn=Server.CreateObject(“ADODB.Connection”)


Trang 50



strconn=”PROVIDER=Microsoft.Jet.OLEBD.4.0;
DATA SOURCE=c:mydatanorthwind.mdb”
Conn.Open.strconn
%>
Để kết nối tới một CSDL Access bất kỳ khác, bạn chỉ cần trở lại đường dẫn chứa tên tập
Access trong tham số DATA SOURCE
b. Kết nối CSDL SQL Server
Giả sử server của bạn đã cài đặt SQL Server 2000, user sa có mật khẩu là test, để kết nối
vào CSDL Northwind (đây là CSDL mẫu có sẵn khi bạn cài SQL Server) bạn sử dụng cú pháp
sau:
<%
set
strconn=”PROVIDER=SQLOLEDB.1;SERVER=local;
USER ID=sa; PASSWORD=test; DATABASE=Northwind”
Conn.Open.strconn
%>
Nếu bạn muốn kết nối vào CSDL SQL Server trên một máy khác, bạn thay local trong
tham số SERVER bằng tên máy server bạn muốn kết nối tới. Tham số USER ID là tên user bạn
dùng để kết nối, PASSWORD là mật khẩu dùng để kết nối. DATABASE là CSDL bạn muốn kết
nối.
c. Kết nối CSDL bất kỳ dùng ODBC
Bạn có thể kết nối tới một CSDL bất kỳ thông qua kết nối ODBC dùng tên nguồn dữ
liệu(DSN). Giả sử bạn đã tạo một DSN với CSDL Access northwind.mdb có tên là “AccNorth”
bạn thực hiện kết nối như sau:
<%
set
conn.Open “AccNorth”
%>
6.3 Tạo Recordset
Sau khi mở kết nối CSDL, để đọc được dữ liệu bạn phải nạp dữ liệu vào recordset
Giả sử để mở bảng Customers trong CSDL northwind.mdb bạn thực hiện như sau:
<%
‘Tạo kết nối conn
set
strconn=”PROVIDER=Microsoft.Jet.OLEBD.4.0;


Trang 51



DATA SOURCE=c:mydatanorthwind.mdb”
‘Mở kết nối conn
Conn.Open.strconn
‘Tạo recordset rs
Set rs=Server.CreateObject(“ADODB.recordset”)
‘Nạp dữ liệu vào rs
Rs.Open “Customers”, conn
%>
Hoặc bạn có thể dùng lệnh SQL để truy vấn dữ liệu trong bảng Customers như sau:
<% rs.Open “select * from Customers”, conn %>
Thực hiện tương tự khi bạn đọc dữ liệu từ SQL Server.
6.4 Hiển thị dữ liệu
Sau khi nạp dữ liệu vào recordset, chúng ta sẽ thấy cách hiển thị dữ liệu trong bảng
Customers lên trang web như sau:
<html>
<body>
<%
‘Kết nối Access:
Strconn=”provider=Microsoft.Jet.OLEDB.4.0;data
source=”C:mydatanorthwind.mdb”
mySQL=”select * from customers”
set conn=server.creatobject(“ADODB.connection”)
conn.open strconn
set rs=Server.CreateObject(“ADODB.recordset”)
rs.Open mySQL, conn
do until rs.EOF
for each x in rs.Fields
Response.Write(“<b>”&x.name&”</b>”)
Respone.Write(“=”)
Respone.Write(x.value & “br>”)
Next
Response.Write(“<br>”)
Rs.MoveNext
Loop
Rs.close
%>
</body>
</html>


Trang 52



6.5 Truy vấn dữ liệu
Thay vì nạp hết tất cả dữ liệu trong tất cả các cột của bảng, ta có thể giới hạn bớt kết quả
đọc bằng cách thực hiệnh truy vấn dữ liệu theo một số điều kiện. Giả sử ta chỉ cần lấy dữ liệu
của các cột “CompanyName”, “ContactName” và “Phone” với điều kiện CustomerID=”ANTON”,
ta viết mệnh đề truy vấn trong tham số mySQL như sau:
<%
mySQL = “select CompantName, ContactName, Phone from Customers
where CustomerID = “ANTON”
%>
Ví dụ:
<html>
<body>
<%
‘Kết nối Access:
Strconn=”provider=Microsoft.Jet.OLEDB.4.0;data
source=”C:mydatanorthwind.mdb”
mySQL = “select CompantName, ContactName, Phone From Customers
where CustomerID = “ANTON”
set conn=server.creatobject(“ADODB.connection”)
conn.open strconn
set rs=Server.CreateObject(“ADODB.recordset”)
rs.Open mySQL, conn
%>
<table border=”1” width=”100%” cellspacing=0>
<tr>
<% for each x in rs.Fields
Response.write(“<th>” & x.name & “</th>”)
Next
%>
</tr>
<% Do until rs.EOF %>
<tr>
<% for each x in rs.Fields %>
<td> <% Response.write(x.value) %> </td>
<% Next
rs.MoveNext %>
</tr>
<% loop


Trang 53



rs.close
conn.close
%>
</table>
</body>
</html>
6.6 Sắp xếp dữ liệu
Để dữ liệu trả về được sắp xếp theo thứ tự, ta sử dụng mệnh đề ORDER BY.
Ví dụ: sắp xếp giá trị cột CompanyName tăng dần:
<% mySQL = “select CompantName, ContactName, Phone from Customers
ORDER BY CompanyName desc
%>
Để sắp xếp nhiều cột, ta thêm các cột vào sau mệnh đề ORDER BY, các cột cách nhau
dấu phẩy.
6.7 Thêm mới mẩu tin
Để thêm một mẩu tin mới vào bảng dữ liệu quản lý bới đối tượng Recordset, ta gọi
phương thức AddNew như sau:
mySQL = “Select * From Customers”
rs.open mySQL, conn
rs.AddNew
With rs

.Fields (“CompanyName”) = ‘NewCompanyName’
.Fields (“ContactName”) = ‘NewContactName’
.Fields (“Phone”) = ‘NewPhone’
End With
‘Lưu giá trị cho mẩu tin’
rs.Update
6.8 Chỉnh sửa nội dung mẩu tin
Để chỉnh sửa mẩu tin đã có ta gán nội dung mới cho trường tương ứng sau đó gọi
phương thức Update. Ví dụ:
mySQL = “Select * From Customers Where CompanyName=’Cname’”
rs.open mySQL, conn
‘Thay đổi nội dung phone của mẩu tin’
With rs

.Fields (“Phone”) = ‘newPhone’
End With
‘Lưu giá trị’
rs. Update

Trang 54



6.9 Xóa mẩu tin hoện hành
Nếu muốn xóa mẩu tin hoện hành, đơn giản ta chỉ cần gọi phương thức Delete của
Recordset. Ví dụ:
mySQL = “Select * From Customers Where CompanyName=’Cname’”
rs.open mySQL, conn
‘Xóa mẩu tin có CompanyName=’Cname’
rs.Delete
6.10 Tìm kiếm trên recordsets
Tìm kiếm recordset được thực hiện thông qua câu lệnh SQL. Ví dụ để tìm số điện thoại
của khách hàng của một công ty
<%
mySQL = “Select * From Customers
Where CompanyName=’ “+Cname++” ‘
rs.open.mySQL, conn
‘Nếu tìm thấy
If (not rs.EOF) then
Response.write(“Tìm thấy”)
Else
Response.write(“Không tìm thấy”)
Endif
%>
7. Kết chương
Truy cập vào cơ sở dữ liệu từ trang web là một trong những tính năng quan trọng nhất khi
xây dựng ứng dụng web. Bằng việc kết hợp mã kịch bản ASP và thành phần ADO, ta có thể dễ
dàng thực hiện tương tác cơ sở dữ liệu để thêm, sửa đổi hoặc xóa dữ liệu trong cơ sở dữ liệu
như Access, SQL.


Trang 55



Chương 5 : Đăng ký Host và sử dụng một số phần mềm hỗ trợ thiết kế web

I. Đăng ký một Host Free và cách upload bằng FTP
Sử dụng website cho phép đăng ký host free: http://www.110mb.com
- Mở truyệt duyệt web sau đó nhập địa chỉ web http://www.110mb.com, xuất hiện giao
diện:

1. Nhấp lên Start Now > Hiện ra rang 110MB Panel > Bạn điền các thông tin theo
hình( H2).
Nhớ gõ nhập đoạn Text nầy vào Khung màu xám không Copy > Paste : I will never
engage in phishing or abusive actions pn 110mb


Trang 56



1. Ra thông b áo bạn đã hoàn tất bước 1 , yêu cầu bạn mở Email > Bạn đã có thư
của Host Server gởi cho bạn , yêu cầu bạn nhấp lên Link để kích hoạt . (H2) .


Trang 57



2. Hiện ra Trang tiếp theo để bạn nhập thông tin trong bước 2 nầy > Nhấp Create My Account
Now !

3.
Ra

Trang tiếp theo có chữ: ACCOUNT CREATED SUCCESSFULLY . Bạn đã đăng ký hoàn tất để
tạo Account trong Host Free : http://www.110mb.com/
II Cấu hình IIS (Internet Information Service) trên máy chủ cục bộ để đưa trang lên
1. Internet Information Services (IIS)
IIS là một thành phần (một host server) của Windows server 2003 cho phép chứa và quản
lý các Web site. IIS là một Web server mạnh, hỗ trợ các chuẩn Web mới nhất như Extend
Markup Language (XML), ASP.Net, cho phép bạn dễ dàng xây dựng, triển khai và quản lý các
ứng dụng Web. IIS còn cho phép bạn điều khiển truy cập vào web site.
Trong phần học này chúng ta sẽ tìm hiểu IIS cung cấp dịch vụ Wold Wide Web (www):
dịch vụ này cung cấp web cho IIS client
2. Cài đặt IIS
- Vào StartSettingsControl PanelAdd/Remove Programs
- Trong cửa sổ Add/Remove Program, chọn Add/Remove Windows Components
- Trong hộp thoại Windows Components, chọn Application Server và chọn Details


Trang 58


-


Đánh dấu chọn Internet Information Services (IIS) trong hộp thoại Application Server,
chọn OK.

3. Cấu hình và quản lý IIS
Khi IIS cài đặt thành công, ta truy cập vào IIS bằng cách:
Vào StartSettingsAdministrative ToolsInternet Information Services(IIS) Manager


Trang 59


-


Thiết lập thuộc tính cho Website:

III. Sử dụng phần mềm xử lý ảnh Microsoft Office Picture Manager
1. Khởi động:
Vào startProgramMicrosoft OfficeMicrosoft Office ToolMicrosoft Office picture manager,
xuất hiện màn hình:


Trang 60

Tailieu.vncty.com thiet ke web dai hoc

Tailieu.vncty.com thiet ke web dai hoc

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (15)

Andere mochten auch

Andere mochten auch (7)

Ähnlich wie Tailieu.vncty.com thiet ke web dai hoc

Ähnlich wie Tailieu.vncty.com thiet ke web dai hoc (20)

Mehr von Trần Đức Anh

Mehr von Trần Đức Anh (20)

Tailieu.vncty.com thiet ke web dai hoc