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...
Trường Đại học Bạc Liêu

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

đường truyền điện thoại thông thường thì tốc độ truyền dữ liệu hạn ch...
Trường Đại học Bạc Liêu

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

4. Web Server (Máy chủ Web)
Web Server là máy chủ trong đó chứa thông...
Trường Đại học Bạc Liêu

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

Chương 2. GIỚI THIỆU VỀ HTML
Web cho chúng ta chia sẻ tài liệu, hình ...
Trường Đại học Bạc Liêu

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

II. Các thẻ định dạng của html
1. Headings
Headings được định dạng vớ...
Trường Đại học Bạc Liêu

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

Mọi khoảng trống, dấu xuống dòng trong HTML được thể hiện trên trang ...
Trường Đại học Bạc Liêu

16.

<a> /<a>

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

Tạo một liên
kết đến một
trang
khác
hoặc đoạn văn
bản ...
Trường Đại học Bạc Liêu

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

<p><i><b><font color="blue">Mot so lien ket:</font></b></i></p>
<p><a...
Trường Đại học Bạc Liêu

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

Tổng số thẻ <td> và <th> bằng số ô của bảng. Dòng có bao nhiêu ô thì ...
Trường Đại học Bạc Liêu

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

<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Sẽ ...
Trường Đại học Bạc Liêu

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

>

lớn hơn

&gt;

>

&

dấu và

&amp;

&

"

ngoắc kép

&quot;

"

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

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

Trước khi đặt bấy kỳ thành phần điều khiển nào lên trang web, bạn phả...
Trường Đại học Bạc Liêu

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

<p><input type="submit" value="Submit" name="B1"><input type="reset"
...
Trường Đại học Bạc Liêu

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

Muốn đọc giá trị của radio được chọn, ta thực hiện trong mã (ngôn ngữ...
Trường Đại học Bạc Liêu

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

<INPUT TYPE = “checkbox” name = “c1” checked>
Cách đọc giá trị của ch...
Trường Đại học Bạc Liêu

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

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

Hình 2.5 Minh h...
Trường Đại học Bạc Liêu

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

Để đọc giá trị của tùy chọn trong danh sách , ta cần làm như sau:
lki...
Trường Đại học Bạc Liêu

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

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

Hình 2.6 Minh h...
Trường Đại học Bạc Liêu

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

<FONT FACE="Arial" size="2">
<b>Giới tính:</b></font><INPUT TYPE=Radi...
Trường Đại học Bạc Liêu

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

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

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

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

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

Microsoft FrontPage là ứng...
Trường Đại học Bạc Liêu

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

chủ, có thể liên kết với các trang con khác trong cùng Website. Thông...
Trường Đại học Bạc Liêu

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

2.2 Tạo một web site dựa trên một web đã có
Vào menu File. chọn new, ...
Trường Đại học Bạc Liêu

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

Xuất hiện bảng

•

Click Finish

FrontPage tạo một Website mới và đặt...
Trường Đại học Bạc Liêu

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

2.3 Tạo một Website mới
- Mở Microsoft FrontPage 2003. Nếu Ô Tác Vụ N...
Trường Đại học Bạc Liêu

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

- Trên thanh công cụ của Bảng New Web Site Location, nhấp Nút Create ...
Trường Đại học Bạc Liêu

•

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

Customer Support Web : Là web cho phép công ty trả lời khách hàng ...
Trường Đại học Bạc Liêu

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

Ở chế độ này khi tạo mới trang Web, FrontPage sẽ cung cấp các mẫu tra...
Trường Đại học Bạc Liêu

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

•

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

•

Bạn có thể...
Trường Đại học Bạc Liêu

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

4. Xóa một trang Web
•

Click chọn mục Folders trên thanh
công cụ chu...
Trường Đại học Bạc Liêu

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

II. Các thao tác chính trong Front Page
1. Đặt nền trang
Nền của một ...
Trường Đại học Bạc Liêu

-

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

Để chơi liên tục bạn đánh dấu kiểm tại Forever. Ngược lại, muốn ch...
Trường Đại học Bạc Liêu

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

dày đường kẻ tùy ý, làm nền bảng bởi một ảnh nào đó, đặt thuộc tính r...
Trường Đại học Bạc Liêu

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

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

Never: không hiển th...
Trường Đại học Bạc Liêu

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

+ New window: Trang sẽ hiển thị trong cửa sổ mới.
+ Parent frame: Tra...
Trường Đại học Bạc Liêu

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

2. Tạo liên kết đến Bookmark
- Đánh dấu chọn từ, chuỗi hay hình hoặc ...
Trường Đại học Bạc Liêu

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

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

3.1 Tạo các Radio Button : Tự Nhiên, ...
Trường Đại học Bạc Liêu

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

3.4 Tạo One-line Text Box
- Chọn InsertFormOne-line Text Box
- Right ...
Trường Đại học Bạc Liêu

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

-

Nhắp nút Option

-

Nhắp nút mũi tên xuống của mục File Format, ch...
Trường Đại học Bạc Liêu

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

Cách tạo:
-

Nhấn

InsertWeb

Component



Interative Button
-

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

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



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



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



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

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

Phía bên trái màn hình là khung Folder List với các trang trong web. ...
Trường Đại học Bạc Liêu

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

Dựa vào màn hình ViewReport giúp ta kiểm tra và chỉnh sửa web site củ...
Trường Đại học Bạc Liêu

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

Nhập địa chỉ Web hay địa chỉ FTP và ô Remote Web site location  Chọn...
Trường Đại học Bạc Liêu

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

Chương 4: THIẾT KẾ WEB ĐỘNG VỚI ASP
1. ASP là gì?
ASP được viết tắt t...
Trường Đại học Bạc Liêu

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

<% response.write(“<h2> Dùng thẻ HTML để định dạng văn bản!</h2>”)
%>...
Trường Đại học Bạc Liêu

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

book(4) = “Active Server Page”
for i = 1 to 4
response.write(book(i) ...
Trường Đại học Bạc Liêu

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

5. Sử dụng Form trong ASP
5.1 Đối tượng Request
Để tương tác với ngườ...
Trường Đại học Bạc Liêu

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

b) Request.Form
Nếu Form dùng phương thức POST (method = post) thì ta...
Trường Đại học Bạc Liêu

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

Ví dụ:
<%
Response.Redirect
“http://localhost/myasp/mymain.asp”
%>
Wr...
Trường Đại học Bạc Liêu

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

strconn=”PROVIDER=Microsoft.Jet.OLEBD.4.0;
DATA SOURCE=c:mydatanorthw...
Trường Đại học Bạc Liêu

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

DATA SOURCE=c:mydatanorthwind.mdb”
‘Mở kết nối conn
Conn.Open.strconn...
Trường Đại học Bạc Liêu

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

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 ...
Trường Đại học Bạc Liêu

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

rs.close
conn.close
%>
</table>
</body>
</html>
6.6 Sắp xếp dữ liệu
Đ...
Trường Đại học Bạc Liêu

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

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...
Trường Đại học Bạc Liêu

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

Chương 5 : Đăng ký Host và sử dụng một số phần mềm hỗ trợ thiết kế we...
Trường Đại học Bạc Liêu

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

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 ...
Trường Đại học Bạc Liêu

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

2. Hiện ra Trang tiếp theo để bạn nhập thông tin trong bước 2 nầy > N...
Trường Đại học Bạc Liêu

-

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

Đánh dấu chọn Internet Information Services (IIS) trong hộp thoại ...
Trường Đại học Bạc Liêu

-

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

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

III. Sử dụng phần mềm xử lý ảnh...
Trường Đại học Bạc Liêu

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

Vào menu Picture để chỉnh sửa hình ảnh:

Chức năng các mục:
-

Bright...
Tailieu.vncty.com   thiet ke web dai hoc
Tailieu.vncty.com   thiet ke web dai hoc
Upcoming SlideShare
Loading in …5
×

Tailieu.vncty.com thiet ke web dai hoc

306 views
227 views

Published on

http://tailieu.vncty.com

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
306
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Tailieu.vncty.com thiet ke web dai hoc

  1. 1. 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
  2. 2. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website đườ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, ... Biên soạn: Huỳnh Huy Tuấn Trang 2
  3. 3. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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ú ý. Biên soạn: Huỳnh Huy Tuấn Trang 3
  4. 4. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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 Biên soạn: Huỳnh Huy Tuấn Trang 4
  5. 5. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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> <h2>Đây là heading</h2> <h3>Đây là heading</h3> <h4>Đây là heading</h4> <h5>Đây là heading</h5> <h6>Đây là heading</h6> 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. <!-- Chú thích ở trong này --> 5. Khoảng cách (&nbsp) Biên soạn: Huỳnh Huy Tuấn Trang 5
  6. 6. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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ã: &nbsp; 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> Biên soạn: Huỳnh Huy Tuấn Đị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
  7. 7. Trường Đại học Bạc Liêu 16. <a> /<a> Bài giảng Thiết kế Website 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"> Biên soạn: Huỳnh Huy Tuấn Trang 7
  8. 8. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website <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> Biên soạn: Huỳnh Huy Tuấn Trang 8
  9. 9. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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à: &nbsp; 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> <td>row 1, cell 2</td> </tr> Biên soạn: Huỳnh Huy Tuấn Trang 9
  10. 10. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> Sẽ hiển thị trên màn hình: Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, 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> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td></td> </tr> </table> Nó sẽ có dạng thế này trên trình duyệt row 1, cell 1 row 1, cell 2 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 (&nbsp;) 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 &nbsp;   nhỏ hơn &lt; < < Biên soạn: Huỳnh Huy Tuấn Trang 10
  11. 11. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website > lớn hơn &gt; > & dấu và &amp; & " ngoắc kép &quot; " ' ngoặc đơn &apos; (does not work in IE) ' ¢ cent &cent; ¢ £ pound &pound; £ ¥ yen &yen; ¥ § Section &sect; § © Copyright &copy; © ® registered trademark &reg; ® × Nhân &times; × ÷ Chia &divide; ÷ 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 Biên soạn: Huỳnh Huy Tuấn Trang 11
  12. 12. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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. Ví dụ 3: tập tin vidu3.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>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> Biên soạn: Huỳnh Huy Tuấn Trang 12
  13. 13. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website <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ữ Biên soạn: Huỳnh Huy Tuấn Trang 13
  14. 14. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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”) Ví dụ 4: tập tin vidu4.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>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" value="Reset" name="B2"></p> </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: Biên soạn: Huỳnh Huy Tuấn Trang 14
  15. 15. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website <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 Ví dụ 5: tập tin vidu5.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>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" value="Reset" name="B2"></p> </form> </body> </html> Biên soạn: Huỳnh Huy Tuấn Trang 15
  16. 16. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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. Biên soạn: Huỳnh Huy Tuấn Trang 16
  17. 17. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website Để đọ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. Ví dụ 6: tập tin vidu6.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>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> <option value="2">2 năm</option> <option value="3">3 năm</option> </select></p> <p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p> </form> </body> </html> Biên soạn: Huỳnh Huy Tuấn Trang 17
  18. 18. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website Trình duyệt hiển thị tập tin vidu6.htm như hình 2.6: 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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </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> Biên soạn: Huỳnh Huy Tuấn Trang 18
  19. 19. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website <FONT FACE="Arial" size="2"> <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> <FONT FACE="Arial" size="2"> <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> Trình duyệt hiển thị tập tin vidu7.htm như hình 2.7: Biên soạn: Huỳnh Huy Tuấn Trang 19
  20. 20. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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 Biên soạn: Huỳnh Huy Tuấn Trang 20
  21. 21. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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 Biên soạn: Huỳnh Huy Tuấn Trang 21
  22. 22. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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. Biên soạn: Huỳnh Huy Tuấn Trang 22
  23. 23. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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 Biên soạn: Huỳnh Huy Tuấn Trang 23
  24. 24. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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 . Biên soạn: Huỳnh Huy Tuấn Trang 24
  25. 25. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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, Biên soạn: Huỳnh Huy Tuấn Trang 25
  26. 26. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website - 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ủ. Biên soạn: Huỳnh Huy Tuấn Trang 26
  27. 27. Trường Đại học Bạc Liêu • Bài giảng Thiết kế Website 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 Biên soạn: Huỳnh Huy Tuấn Trang 27
  28. 28. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website Ở 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. Biên soạn: Huỳnh Huy Tuấn Trang 28
  29. 29. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website • 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. • Biên soạn: Huỳnh Huy Tuấ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
  30. 30. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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. Biên soạn: Huỳnh Huy Tuấn Trang 30
  31. 31. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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. Biên soạn: Huỳnh Huy Tuấn Trang 31
  32. 32. Trường Đại học Bạc Liêu - Bài giảng Thiết kế Website Để 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, đồ Biên soạn: Huỳnh Huy Tuấn Trang 32
  33. 33. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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 Biên soạn: Huỳnh Huy Tuấn Trang 33
  34. 34. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website + 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 Biên soạn: Huỳnh Huy Tuấn Trang 34
  35. 35. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website + 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. Biên soạn: Huỳnh Huy Tuấn Trang 35
  36. 36. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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. Biên soạn: Huỳnh Huy Tuấn Trang 36
  37. 37. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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 Biên soạn: Huỳnh Huy Tuấn Trang 37
  38. 38. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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, Biên soạn: Huỳnh Huy Tuấn Trang 38
  39. 39. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website - 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. Biên soạn: Huỳnh Huy Tuấn Trang 39
  40. 40. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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. Biên soạn: Huỳnh Huy Tuấn Trang 40
  41. 41. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website  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ổ : Biên soạn: Huỳnh Huy Tuấn Trang 41
  42. 42. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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: Biên soạn: Huỳnh Huy Tuấn Trang 42
  43. 43. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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ổ: Biên soạn: Huỳnh Huy Tuấn Trang 43
  44. 44. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website Nhập địa chỉ Web hay địa chỉ FTP và ô Remote Web site location  Chọn OK  . . . Biên soạn: Huỳnh Huy Tuấn Trang 44
  45. 45. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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> <% @ language=”vbscript”%> <body> Biên soạn: Huỳnh Huy Tuấn Trang 45
  46. 46. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website <% 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> <% @ language=”vbscript”%> <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” Biên soạn: Huỳnh Huy Tuấn Trang 46
  47. 47. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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> Biên soạn: Huỳnh Huy Tuấn Trang 47
  48. 48. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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> <% @ language=”vbscript”%> <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: Biên soạn: Huỳnh Huy Tuấn Trang 48
  49. 49. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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 Biên soạn: Huỳnh Huy Tuấn Trang 49
  50. 50. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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”) Biên soạn: Huỳnh Huy Tuấn Trang 50
  51. 51. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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 conn=Server.CreateObject(“ADODB.Connection”) 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=Server.CreateObject(“ADODB.Connection”) 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 conn=Server.CreateObject(“ADODB.Connection”) strconn=”PROVIDER=Microsoft.Jet.OLEBD.4.0; Biên soạn: Huỳnh Huy Tuấn Trang 51
  52. 52. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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> Biên soạn: Huỳnh Huy Tuấn Trang 52
  53. 53. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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 Biên soạn: Huỳnh Huy Tuấn Trang 53
  54. 54. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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 Biên soạn: Huỳnh Huy Tuấn Trang 54
  55. 55. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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. Biên soạn: Huỳnh Huy Tuấn Trang 55
  56. 56. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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 Biên soạn: Huỳnh Huy Tuấn Trang 56
  57. 57. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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) . Biên soạn: Huỳnh Huy Tuấn Trang 57
  58. 58. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website 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 Biên soạn: Huỳnh Huy Tuấn Trang 58
  59. 59. Trường Đại học Bạc Liêu - Bài giảng Thiết kế Website Đá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 Biên soạn: Huỳnh Huy Tuấn Trang 59
  60. 60. Trường Đại học Bạc Liêu - Bài giảng Thiết kế Website 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: Biên soạn: Huỳnh Huy Tuấn Trang 60
  61. 61. Trường Đại học Bạc Liêu Bài giảng Thiết kế Website Vào menu Picture để chỉnh sửa hình ảnh: Chức năng các mục: - Brightness and Contracst. . .: Chỉnh độ sáng, tối và độ tương phản của ảnh - Color: Chọn màu cho ảnh - Crop: Cắt xÀ8ú0

×