bài giảng thiết kế website

Hypertext là kỹ thuật trình bày thông tin trên mộttrang 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ó n

Trang 1

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àngphá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ệucho 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ủamá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ạngchia 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ùngchung 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ánkí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ớithiế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ùngcho 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ươngtiệ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

Trang 2

đườ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ếudù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 đườngtruyề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ộttrang 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, âmthanh, 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ụngchươ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à httphoặ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êuliê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ênkế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ộtphần khác của trang web, trang web khác trong website hay website khác, cho phép downloadmộ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ềuWeb Browser như: Internet Explorer, Netscape Navigator Communicator, Opera, MozillaFirefox,

Trang 3

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 quamạ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 taphả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à trangcử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ácthô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ề WebServer 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ịubớ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ùngquá 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 4

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ănbả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ìnhduyệ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ảnASCII, 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 HTMLxuấ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 tacầ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>

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 5

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

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>

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 đầumộ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òngchú 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ề codecủ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)

Trang 6

Mọi khoảng trống, dấu xuống dòng trong HTML được thể hiện trên trang web là 1khoảng cách duy nhất

Để gõ một số ký tự đặc biệt ta phải sử dụng mã:  

dưới <u> Giai dap tin hoc </u>

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  H

- face: tên font

Thẻ này cóthuộc tính

<hr color= “Red” size= “1” align= “left”>(Vẽ đường màu xanh, cao 1 pixel, canhtrái)

13.

<img>

Chèn ảnh vàovăn bản Không

60 pixel.)

14.

Tạo danh sáchliệt kê, dùng vớithẻ <li> </li>

<ul>

<li>Mcrosoft Word 2003 </li>

<li>Mcrosoft Excel 2003 </li>

</ul>

15.

Tạo danh sáchliệt kê có đánh

số thứ tự, dùngvới thẻ <li>

</li>

<ol>

<li>Tin hoc van phong </li>

</ol>

Trang 7

Tạo một liênkết đến mộttrang kháchoặc đoạn vănbản khác Giữacặp thẻ này cóthể là đoạn vănbả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

PC World Viet Nam </a>

(Tạo liên kết trên đoạn văn bản, phầnhiể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 “PCWorld Viet Nam” sẽ được chuyển đếntrang chủ của PCWorld Việt Nam

Để 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>

<title>San pham Microsoft</title>

<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>

Trang 8

<a href="http://www.echip.com.vn">Echip</a> Tuan tin cong nghe thong tin</p>

<a href="http://www.pcworld.com.vn">PCWorld Vietnam</a></p>

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 9

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

Trang 10

Heading Another Heading

row 1, cell 1 row 1, cell 2

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 MozillaFirefox 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

Trang 11

> lớn hơn > >

' ngoặc đơn ' (does not work in IE) '

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 12

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 Formbằ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:

{thành phần điều khiển đặt ở đây}

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 HTTPheader và được xử lý bởi mã trong trang ReadValue.asp, ta dùng thẻ <FORM> như sau:

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ănbả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:

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>

</head>

<body>

<input type="text" name="NXB" size="35" value="Minh Khai"

maxlength="30"></p>

Trang 13

<p><input type="submit" value="Submit" name="B1"><input type="reset"

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:

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:

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:

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ộctí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 14

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>

<p><input type="radio" value="1" name="gioitinh" checked>Nam

</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ùychọn Để đưa Checkbox vào Form ta dùng thẻ INPUT với thuộc tính TYPE = CHECKBOX nhưsau:

Để hộp kiểm tra được chọn lúc khởi đầu ta dùng thuộc tích Checked như sau:

Trang 15

Cách đọc giá trị của checkbox như sau:

if Request.Form(“c1”) = “ON” then

<title>Sở thích của bạn</title>

</head>

<body>

<p><b>Sở thích của bạn:</b></p>

<input type="checkbox" name="ST4" value="ON">Dã ngoại</p>

</form>

</body>

</html>

Trang 16

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ậpvà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 đíchnhận mật khẩu người dùng:

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ọntrong danh sách Để đưa vào Form ta dùng thẻ <SELECT> </SELECT> như sau:

Để tạo danh sách tùy chọn ta dùng thẻ OPTION trong thẻ SELECT:

<OPTION value = “mainboard”> MAINBOARD </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ùychọn được hiển thị trong danh sách

Trang 17

Để đọ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>

<option value="RAMKMax">RAM KingMax</option>

<option value="Monitor">Monitor</option>

</select></p>

Trang 18

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ếtlậ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:

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 :

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

<FONT FACE="Arial" size="2"><b>Tên tài khoản:</b></font>

<BR>

Trang 19

</body>

</HTML>

Trang 20

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 21

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ầngiố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 website 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ớinhữ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 2000thì 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

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 đầutiê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ùngmộ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

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

Các trang web

Vùng thiết kế

Trang 22

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áychủ 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 đếnbạ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ộtWebsite:

• 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ỗiWizard 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 cungcấ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 23

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

Trang 24

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

• Click chọn mục Include subsite

Trang 26

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à MyWeb Sites Folder nầy nằm trong Folder My Documents Website của bạn tạo ra cầnphả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 27

- 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áycủa ta hay máy chủ

Trang 28

• 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ácthà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ớicá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ằngcách Right click tại folder cần tạo trang web và chọn New Page Sau đó đặt tên chotrang web này Thực hiện tương tự để tạo thêm các trang khác cho cấu trúc website

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 OnePage 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ìnhWizard 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 đã

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ạomớ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 29

Ở chế độ này khi tạo mới trang Web, FrontPage sẽ cung cấp các mẫu trang web được địnhsẵ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 trangWeb 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 30

• 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ị

Trang 31

• Click chọn

Add File: để chọn

trang Web hay các tập tin cần chèn vào Website

• Add Folder:

chèn cả thư mục chứa các trang web hay các tập tinvào Website

Trang 32

4 Xóa một trang Web

• Click chọn mục Folders trên thanh

5.1 Mở trang web trong cấu trúc web site:

- Click File\Open 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 File\Open

- 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.

- 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ỉ dragtrang đó xuống dưới trang cần tạo

Tiêu đề	Bài giảng Thiết kế Website
Tác giả	Nhóm tác giả
Trường học	Trường Đại học Bạc Liêu
Chuyên ngành	Công nghệ thông tin
Thể loại	Bài giảng
Năm xuất bản	2023
Thành phố	Bạc Liêu

Định dạng
Số trang	64
Dung lượng	2,14 MB