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

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

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

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ếu dùng đường truyền thuê bao riêng thì có thể đăng ký với phía cung cấp dịch vụ một đường truyền 2Mb/s có chi phí khá cao Khoảng cách của mạng WAN hàng trăm km, hàng nghìn km Tốc độ chậm, kém tin cậy hơn Phải qua các đường truyền điện thoại hoặc đường truyền thuê bao riêng…

1.3 Mạng Internet

Internet là liên mạng máy tính toàn cầu

Về phần cứng: gồm các mạng LAN và WAN của cả thế giới kết nối với nhau

Về phần mềm: theo một chuẩn chung - giao thức TCP/IP (Transmission Control

Protocol/Internet Protocol) để các máy tính nhận ra nhau Hay lầm lẫn với các dịch vụ: trang tin

toàn cầu (World Wide Web), thư điện tử (Email – Electronic mail), truyền tệp tin (FTP – File

Transfer Protocol) đã trở thành nhu cầu của hàng trăm triệu người hiện nay

2 Dịch vụ trang tin toàn cầu WWW(World Wide Web)

Đây là dịch vụ mới và mạnh nhất trên Internet WWW được xây dựng dự trên một kỹ thuật có tên gọi là Hypertext(siêu văn bản) Hypertext là kỹ thuật trình bày thông tin trên một trang trong đó có một số từ có thể liên kết đến một trang thông tin mới có nội dung đầy đủ hơn Trên cùng một trang thông tin có thể có nhiều kiểu dữ liệu khác nhau như văn bản, ảnh, âm thanh, phim,…Để xây dựng được các trang tin với các kiểu dữ liệu khác nhau như vậy WWW

sử dụng một ngôn ngữ có tên là HTML(HyperText Markup Language Ta có thể Sử dụng chương trình Internet Explorer để xem tin

II Các khái niệm khác

1 URL (Uniform Resource Locator)

Là cách gọi khác của địa chỉ website URL bao gồm tên của giao thức(thường là http hoặc ftp), tiếp đến là dấu hai chấm (:) và hai gạch chéo (//), sau đó là tên miền muốn kết nối đến Ví dụ một URL: “http://www.blu.edu.vn/cntt” sẽ hướng dẫn trình duyệt web của chúng ta

sử dụng giao thức http để kết nối với máy tính www.blu.edu.vn mở tập tin web mặc định là index.htm hoặc default.htm trong thư mục cntt

2 Hyperlink(siêu liên kết)

Là một thành phần cơ bản và rất cần thiết đối với một siêu văn bản world wide web Siêu liên kết giúp chúng ta dễ dàng tìm kiếm các thông tin khác nhau về một chủ đề Một siêu liên kết là một phần văn bản hay hình ảnh của trang web mà khi click vào nó sẽ liên kết đến: Một phần khác của trang web, trang web khác trong website hay website khác, cho phép download một tập tin, chay một ứng dụng, trình diễn môộ đoạn video hay âm thanh

3 Web Browser (trình duyệt web)

Web Browser là một chương trình cho phép truy xuất và xem thông tin trên web Có nhiều Web Browser như: Internet Explorer, Netscape Navigator Communicator, Opera, Mozilla Firefox,

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

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ử

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

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

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à 1 khoả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, canh trái)

13.

<img>

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

60 pixel.)

14.

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

<ul>

<li>Mcrosoft Word 2003 </li>

<li>Mcrosoft Excel 2003 </li>

</ul>

15.

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

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

</li>

<ol>

<li>Tin hoc van phong </li>

</ol>

Trang 7

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

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

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

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 Mozilla Firefox nó sẽ hiển thị đường biên)

Để tránh điều này xảy ra, bạn thêm một non-breaking space ( ) vào cột trống đó,

để làm cho đường biên của nó được hiện thỉ

18 Những ký tự đặc biệt

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ị

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

{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 HTTP header 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ă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:

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ộc tính cùng nhóm, ta đưa thêm nút vào:

<INPUT TYPE = “radio” name = “gioitinh” value = 1> Nam

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ùy chọ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ậ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:

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:

Để 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ùy chọ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ế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:

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

I

I TẠO WEBSITE

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áy chủ Máy chủ thường kết nối với Internet hoặc Intranet

1 Cấu trúc một Website

Một Website thông thường được tổ chức như sau:

hoặc

Trong đó:

NGUYEN.VAN.XUAN: Thư mục gốc của cấu trúc Website với các thành phần con gồm:

•images: Thư mục chứa các hình ảnh sẽ thể hiện trong các trang web

•HTML: Thư mục chứa các trang web của cấu trúc website

•index.htm: Trang chủ của cấu trúc Website đó

•monhoc.htm va trangThu_N.htm: Các trang con của cấu trúc Website

Do vậy, khi tạo cấu trúc Website bạn nên tổ chức chúng theo cấu trúc trên, qua đó bạn có thể quản lý chúng một cách dễ dàng

2 Cách tạo Website

Để tạo một Website, công việc đầu tiên của bạn là xác định mục đích Website, tiếp đến bạn phải xác định các trang web cần thiết Trong môi trường FrontPage, có ba cách để tạo một Website:

• Sử dụng Wizard

• Sử dụng Template

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

2.1 Sử dụng Wizard để tạo Website

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

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

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

• Import Web Wizard: dùng để tạo Website dựa trên một Website đã có Nếu muốn, bạn

có thể thay đổi các trang web hay cấu trúc của Website

Trang 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

• Nhập tên thư mục chứa tập tin Web trong

ô Specify the location

of the new web

• Click OK

Trang 24

Xuất hiện bảng

• Click Finish

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

Trang 25

2.3 Tạo một Website mới

- Mở Microsoft FrontPage 2003 Nếu Ô Tác Vụ New không mở , bạn chọn File > New > Ô Tác Vụ New sẽ mở ra

- Nhấp Mục : More Web Site Templates > Hiện ra Bảng Web Site Templates , chọn biểu

tượng : One Page Web site (hình 3.1)

Hình 3.1

FrontPage (FP) cung cấp cho bạn 1 Folder chứa các Websites của bạn, có tên là My Web Sites Folder nầy nằm trong Folder My Documents Website của bạn tạo ra cần phải đặt tên cho nó và chọn vị trí cho nó

- Trong vùng Options, nhấp

nút Browse  Bảng New Web

Site Location xuất hiện, trên

Look in chọn ổ đĩa và thư mục

chứa website,

Trang 26

- Trên thanh công cụ của Bảng New Web Site Location, nhấp Nút Create New Folder 

Bảng New Folder hiện ra, nhập tên website ví dụ: OnePage trong hộp nameOk (Hình 3.2).

Hình 3.2

- Trong Bảng New Web Site Location, nhấp Open

Trong Bảng Web Site Templates, nhấp Ok (Hình 3.3).

Hình 3.3

FP hiện ra cấu trúc của Website MỘT TRANG (ONE PAGE) mới được tạo ra

Website OnePage bao gồm :

• 1 File có tên : index.htm

• 1 Folder trống ( chưa có chứa dữ liệu ) có tên : _private

• 1 Folder trống ( chưa có dữ liệu ) có tên : images

Ý nghĩa của các mục trong bảng Web site Templates:

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

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

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

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

Trang 27

• 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 đã

Trang 28

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

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

• Vào menu File, chọn New

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

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

Hình 3.5

• Trong hộp thoại Page Templates

Trang 29

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

• 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 tin vào Website

• Click OK để

chấp nhận

Trang 30

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

Trang 31

II Các thao tác chính trong Front Page

- 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 Properties\Formatting (hình 3.6), sau đó

file ảnh

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 Format\Theme\ đá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\

(Giống như phần mềm soạn thảo Microsoft Word)

4 Cách tạo âm thanh nền

Hình 3.6

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

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

Xây dựng bảng trong trang web

Tạo liên kết đến các trang web