THIẾT KẾ WEB VỚI MS FRONTPAGE 2003

Tổng hợp & Biên soạn: Huỳnh Đức Việt

Email: huynhducviet@gmail.com
Bài 1
MỘT SỐ KHÁI NIỆM CƠ BẢN
 1. Các khái niệm cơ bản
3

 Internet là mạng máy tính toàn cầu, bao gồm các máy
tính kết nối với nhau nhằm trao đổi thông tin.
 Các dịch vụ cơ bản trên internet gồm:
 WWW (World Wide Web): dịch vụ cung cấp thông tin
 Trình duyệt Web (Web Browser)
 Phục vụ Web (Web Server)
 E-mail: thư điện tử
 FTP (File Transfer Protocol): truyền tệp tin
 1. Các khái niệm cơ bản (tt)
4

 Internet Server: là các Server cung cấp các dịch vụ

Internet (Web Server, Mail Server, FTP Server…)
 Mô hình Client-Server: mô hình khách-chủ. Server
chứa tài nguyên dùng chung cho nhiều máy Client
 1. Các khái niệm cơ bản (tt)
5

 Giao thức (Protocol):

 Tập hợp các quy tắc được thống nhất giữa các máy tính trong
mạng nhằm thực hiện trao đổi dữ liệu được chính xác
 Ví dụ: TCP/IP, HTTP

 URL (Uniform Resource Locator)

 Là địa chỉ để định vị các nguồn tài nguyên trên Web.
 Cấu trúc của một URL:
<Giao thức>://<tên miền>[/Path][/Document]
 Ví dụ: http://www.vietnamnet.vn/tintuc/index.htm
 1. Các khái niệm cơ bản (tt)
6

 Web
Là một ứng dụng chạy trên mạng Client-Server, khách và chủ web
liên lạc nhau bằng giao thức http (HyperText Transfer Protocol)

 Web Page
Là một file văn bản chứa những tag HTML hoặc những đoạn mã
đặc biệt mà trình duyệt web có thể hiểu và thông dịch được, file
được lưu với phần mở rộng là .html hoặc .htm

 Website
Một tập hợp nhiều web page, thể hiện thông tin của một tổ chức
hoặc một chủ đề nào đó
 1. Các khái niệm cơ bản (tt)
7

 Web Server
Là dạng phần mềm cài trên máy server để phục vụ quản lý các
website. Ví dụ : apache, iis...

 Web Browser
Là trình duyệt Web. Dùng để truy xuất các tài liệu trên các Web
Server
Internet Explorer
Nestcape

Mozilla Firefox
…
 2. Mô hình hoạt động của dịch vụ web
8

Xử lý yêu cầu

Internet

Web Server

HTML…
……………
……………
………......

http://www.duytan.edu.vn
 3. Phân loại web
9

 Dựa vào công nghệ phát triển, có 2 loại:

 Web tĩnh: là trang web được tạo sẵn trên máy phục
vụ trước khi người dùng yêu cầu
 Dễ phát triển
 Tương tác yếu
 Sử dụng HTML
 Web động: là trang web không có sẵn, chỉ được tạo
theo yêu cầu của người sử dụng
 Khó phát triển hơn
 Tương tác mạnh
 Sử dụng nhiều ngôn ngữ khác nhau, viết nhiều mã lệnh
 4. Xây dựng và công bố website
10

 Xây dựng website

Sử dụng các chương trình hỗ trợ để thiết kế và xây dựng các trang
web

 Công bố website: cần 2 yếu tố

 Domain name
 Địa chỉ IP rất khó nhớ và khó sử dụng, do đó cần phải xây dựng hệ
thống địa chỉ Internet khác gọi là hệ thống tên miền DNS để đặt tên cho
các máy tính trên Internet

 Hosting
 Web hosting là một loại hình lưu trữ trên Internet cho phép các cá nhân,
tổ chức truy cập được webiste của họ thông qua World Wide Web
Bài 2
NGÔN NGỮ HTML
 1. Giới thiệu
12

 HTML = HyperText Markup Language – Ngôn ngữ đánh

dấu siêu văn bản – Ngôn ngữ để viết các trang web.
 Do Tim Berner Lee phát minh và được W3C (World Wide
Web Consortium) đưa thành chuẩn năm 1994
 Đặc điểm:
 HTML sử dụng các thẻ (tags) để định dạng dữ liệu
 HTML không phân biệt chữ hoa, chữ thường
 Các trình duyệt thường không báo lỗi cú pháp HTML. Nếu viết
sai chỉ dẫn đến kết quả hiển thị không đúng với dự định.
 2. Thẻ (tag)
13

 Có nhiều thẻ, mỗi thẻ có 1 tên và mang ý nghĩa khác

nhau.
 Có 2 loại thẻ: thẻ đóng và thẻ mở
 Cách viết thẻ:
 Thẻ mở: <tên_thẻ>
Ví dụ: <u>, <p>, <img>…
 Thẻ đóng tương ứng: </tên_thẻ>
Ví dụ: </u>, </p>
Chú ý: luôn có thẻ mở nhưng có thể không có thẻ đóng tương
ứng. Ví dụ: <img> không có thẻ đóng
 2. Thẻ (tag) (tt)
14

 Một thẻ có thể có các thuộc tính nhằm bổ sung tác dụng
cho thẻ
 Mỗi thuộc tính có tên thuộc tính (tên_TT)
 Viết thẻ có thuộc tính:
<tên_thẻ tên_TT1=“giá trị 1” tên_TT2=“giá trị 2”…>
 Chú ý:
 Có thể thay đổi thứ tự, số lượng các thuộc tính mà không gây ra
lỗi cú pháp
 Sự hỗ trợ các thẻ, thuộc tính ở mỗi trình duyệt là khác nhau. Chỉ
giống nhau ở các thẻ, thuộc tính cơ bản.
 Thẻ đóng của thẻ có thuộc tính vẫn viết bình thường
(</tên_thẻ>)
 3. Cấu trúc trang web
15

<HTML>
<HEAD>
<TITLE>
Tiêu đề trang web
</TITLE>
</HEAD>
<BODY>
Nội dung thông tin của trang web
</BODY>
</HTML>
 4. Trang web đầu tiên
16

 Trang HTML có phần mở rộng (đuôi) là .HTM hoặc

.HTML
 Có thể tạo trang HTML bằng bất cứ trình soạn thảo “văn
bản thuần” nào (Notepad, EditPlus,…)
 Có nhiều trình soạn thảo HTML cho phép người dùng
soạn thảo trực quan, kết quả sinh ra HTML tương ứng
như:
 Microsoft FrontPage
 Macromedia Dreamweaver
 …
 4. Trang web đầu tiên (tt)
17

 Soạn thảo:
 Mở trình soạn thảo văn bản thuần (VD Notepad) gõ nội dung dưới
 Ghi lại với tên “CHAO.HTM”

<html>

<head>

<title>Chao hoi</title>

</head>

<body>

Chao mung ban den voi <U>HTML</U>!

</body>

</html>
 4. Trang web đầu tiên (tt)
18

 Thử nghiệm:
 Mở trình duyệt web (IE)
 Vào File/Open, chọn file
CHAO.HTM vừa ghi
 Nhấn OK → Có kết quả như hình
bên
 Thay đổi:
 Quay lại Notepad, sửa lại nội dung
trang web rồi ghi lại
 Chuyển sang IE, nhấn nút Refresh
(F5) → thấy kết quả mới

Ghi chú: Các thẻ được nêu tiếp theo mặc định đặt ở trong phần
<body>…</body>
 5. Soạn thảo văn bản
19

 Văn bản được soạn thảo bình thường trong file HTML
 Lưu ý:
 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 trống duy nhất
 Để gõ một số ký tự đặc biệt ta phải sử dụng mã:
 Khoảng trống (trong trường hợp muốn có nhiều hơn 1 ký tự trống):
&nbsp;
 Dấu nhỏ hơn (<) và lớn hơn (>): &lt; &gt;
 Dấu ngoặc kép (“): &quot;
 Ký hiệu : &copy;
 …
 Ghi chú trong HTML: <!-- Ghi chú -->
 6. Thẻ định dạng ký tự
20

Tên thẻ Giải thích Ví dụ

<B>…</B> Dạng chữ đậm <B>Hello world !</B>

<I>…</I> Dạng chữ nghiêng <I>Hello world !</I>

<U>…</U> Dạng chữ gạch chân <U>Hello world !</U>

<S>…</S> Dạng chữ gạch giữa <S>Hello world!</S>

<Font color=RGB Định dạng font chữ: <Font size=18
face=tên font Color: chỉ định màu face=“Arial” color=“red”>
size=“N”> …… Face: Chỉ định font chữ Hello world
</Font> Size: kích thước </Font>
<Sup>…</Sup> Tạo chỉ số trên X<Sup>2</Sup>  X2

<Sub>…</Sub> Tạo chỉ số dưới H<Sub>2</Sub>O  H2O

 7. Tiêu đề, đoạn văn, ngắt dòng
21

Tên thẻ Giải thích Ví dụ

<BR> Xuống dòng

<p align=“…” > Tạo đoạn văn bản mới <p align=“Left”>
…… Align: chỉ định hình thức canh lề Hello world !
</p> </p>

<HR Tạo đường gạch ngang <HR Color=“Red”

Color = “…” Color: màu Size=“10” Width=“200”
SIZE = “…” Size: độ dày (tính bằng pixel) />
WIDTH = “…” /> Width: độ dài (tính bằng pixel)
 8. Danh sách
22

 Dùng để liệt kê các phần tử

 Có 2 loại: Danh sách có thứ tự 1,2,3,… (Ordered List) và
không có thứ tự (Unordered List).
 Một danh sách gồm có nhiều phần tử
 Tạo danh sách:
 Có thứ tự: <OL>Các phần tử</OL>
 Không có thứ tự: <UL>Các phần tử</UL>
 Tạo 1 phần tử: <LI>Tiêu đề phần tử</LI>
 Một phần tử có thể là 1 danh sách con.
 9. Chèn ảnh
23

 Thẻ <img>, không có thẻ đóng

 Các thuộc tính:
 src=“địa chỉ ảnh”: Nếu chèn ảnh trong cùng web site thì nên sử dụng
đường dẫn tương đối.
 alt=“chú thích cho ảnh”: sẽ được hiển thị khi trình duyệt không hiện
ảnh hoặc ảnh lỗi hoặc khi di chuyển chuột lên ảnh
 width=“rộng”, height=“cao”: độ rộng và độ cao của ảnh:
 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 ảnh.
 border=“n”: n là số: kích thước đường viền ảnh. =0: ảnh không có
đường viền
 align=“căn chỉnh ảnh”: left, right, middle, top, texttop,…
 Ví dụ: <img src=“images/phongcanh.jpg” witdh=400 height=100>
 10. Siêu liên kết (Hyperlink)
24

 Là khả năng cho phép tạo liên kết giữa 1 đối tượng với
một phần nội dung. Khi ta kích chuột vào đối tượng thì
phần nội dung sẽ được hiện ra.
 Ta gọi:
 Đối tượng sử dụng để kích chuột vào là: Đối tượng liên kết. Đối
tượng có thể là: văn bản, hình ảnh, một phần của ảnh.
 Địa chỉ nội dung sẽ được hiện ra là Đích liên kết
 Thẻ tạo liên kết:
<a href=Đích liên kết> Đối tượng liên kết </a>
 Ví dụ: <a href=“gioithieu.htm”> Giới thiệu</a>
 10. Siêu liên kết (Hyperlink) (tt)
25

 Thuộc tính:
 href=“đích liên kết”: Nếu trong cùng web nên sử dụng đường
dẫn tương đối.
 target=“tên cửa sổ đích”. Tên cửa sổ phân biệt chữ
hoa/thường. Có một số tên đặc biệt:
 _self: cửa sổ hiện tại
 _blank: cửa sổ mới
 Ví dụ: <a href=“lienhe.htm” target=“_blank”> Liên hệ</a>
 Chú ý:
 Liên kết với địa chỉ e-mail thì đặt href=“mailto:địa_chỉ_e-mail”
 Thực hiện lệnh JavaScript khi kích chuột vào thì đặt
href=“javascript:lệnh”
 11. Bản đồ ảnh
26

 Bản đồ ảnh là một ảnh trong trang web được chia ra

làm nhiều vùng, mỗi vùng khi click vào sẽ liên kết đến
một địa chỉ URL
 Cách tạo: Trước hết phải chèn vào trang một ảnh và
đặt nhãn cho ảnh
<IMG UseMap=”Label”>
<Map Name=”Label”>
<Area Shape = “type” coords=”x1,y1,x2,y2, …”
href=”URL”>
</Map>
 11. Bản đồ ảnh (tt)
27

 Trong đó:
Label: tên của bản đồ ảnh
Type: hình dạng của các vùng trên ảnh, gồm các loại:
Rect: Vùng hình chữ nhật
Circle: Vùng hình tròn
Poly: Vùng hình đa giác
Coords: toạ độ các đỉnh của hình
Rect: (x1, y1, x2, y2) là toạ độ 2 đỉnh chéo của vùng hình CN
Circle: (x, y, r) lần lượt là toạ độ tâm và bán kính của hình tròn
Poly: (x1, y1, x2, y2, x3, y3, …) là các đỉnh của vùng hình đa giác
 11. Bản đồ ảnh (tt)
28

 Ví dụ:
<html>
<head><title>Image</title></head>
<body>
<img src="../image/BlueHills.jpg" width="150" height="150"
border="0" usemap="#Map1">
<map name="Map1">
<area shape="rect" coords="73,3,149,66" href="B1.htm">
<area shape="poly" coords="152,81,71,75,62,109,97,123"
href="B2.htm">
<area shape="circle" coords="37,32,27" href=“B3.htm">
</map>
</body>
</html>
 12. Marquee
29

 Tạo dòng chữ cuốn trên trang web

 <marquee
width=“n” height=“m”
scrolldelay=“k”
scrollamount=“i”
behavior=“alternate” | “slide” | “scroll”
direction=“right“ | “left” | “up” | “down”
bgcolor=“#xxyyzz”
loop=-1 | j >
Dòng chữ / Hình ảnh
</marquee>
 13. Đa phương tiện
30

 Âm thanh nền: <bgsound>

 Thuộc tính:
• src=“địa chỉ file âm thanh”
• loop=“n”: số lần lặp. -1: mặc định: mãi mãi.

 Video: <embed>
 Thuộc tính:
• src=“địa chỉ file video”
• width=“n”: độ rộng
• height=“m”: chiều cao
 14. Flash
31

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000"
codebase="http://download.macromedia.com/pub/shock
wave/cabs/flash/swflash.cab#version=6,0,29,0"
width=“số" height=“số">
<param name="movie" value="ten_file.swf">
<param name="quality" value="high">
<embed src="ten_file.swf" quality="high"
pluginspage="http://www.macromedia.com/go/getflash
player" type="application/x-shockwave-flash"
width="số " height="số "></embed>
</object>
 15. Bảng biểu
32

 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ẻ:
 Tạo bảng: <table>…</table>: Mỗi bảng có 1 cặp thẻ này.
 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
 Tạo ô:
 Ô tiêu đề của bảng: <th>…</th>
 Ô dữ liệu: <td>…</td>
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;
 15. Bảng biểu (tt)
33

 Thuộc tính của thẻ <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ể.
 15. Bảng biểu (tt)
34

 Thuộc tính các thẻ <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ó 2 cách chọn:
 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ăn chỉnh theo chiều ngang: left, right, center, justify.
 valign=“căn lề đứng”: căn chỉnh 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
Bài 3
MICROSOFT OFFICE FRONTPAGE 2003
 1. Giới thiệu
36

 FrontPage(FP) 2003 là phần mềm của Microsoft được

phát triển để giúp cho công việc thiết kế web trở nên
nhẹ nhàng đối với những người mới bắt đầu hay đã là
người chuyên nghiệp.
 2. Môi trường làm việc
37

 Start  Programs  Microsoft Office  Microsoft FrontPage 2003

Thanh tiêu Thanh
Thanh công cụ chuẩn
đề Menu

Thanh định dạng

Đóng
Page tab trang web
hiện tại

Task pane
Vùng thiết kế

Thanh
Chế độ làm
cuộn
việc
ngang –
dọc
 3. Tạo mới trang web
38

Click vào hình mũi tên bên cạnh biểu tượng New  Web site

1. Click
vào đây

2.Click vào
để tạo web
site mới

 Hộp thoại Web site Templates xuất hiện

 3. Tạo mới trang web (tt)
39

1.Nhập
đường
dẫn chứa
web site.
Hoặc click
vào nút
Browse để
2.Click chọn
chọn
mẫu
web
site 3.Click Ok để
tạo website
mới
 3. Tạo mới trang web (tt)
40

Tạo trang
web mới
Thư mục chứa
các hình ảnh

Trang chủ của Tạo thư

web site mục mới
 4. Lưu trang web
41

 Click chọn biểu tượng save (hình chiếc đĩa mềm). Hộp thoại Save as
xuất hiện

Click save
để lưu trang
web
Nhập tên
trang web
 5. Mở trang web
42

 Click vào hình mũi tên bên cạnh biểu tượng Open  Open Site

1. Click
vào đây
2.Click vào
để mở web
site
 5. Mở trang web (tt)
43

1. Click chọn nơi

chứa web site

2. Click chọn web

site cần mở

3. Click Open để
mở web site
 5. Mở trang web (tt)
44

Click phải vào

trang cần mở và
chọn Open
 6. Chuyển đổi chế độ làm việc
45

 Có 4 chế độ làm việc:

 Design: chế độ thiết kế

 Code: chế độ soạn mã

lệnh
Chế độ làm việc
 Split: chế độ vừa thiết
kế vừa viết mã lệnh

 Preview: Chế độ chạy

thử trang web trong
FrontPage
 7. Thiết lập thuộc tính
46

 Tiêu đề trang web

 Click phải vào vùng trống trên trang web  Page properties để
mở hộp thoại Page properties
 Đặt tiêu đề cho trang web: Chọn tab General  nhập nội dung
vào mục Title  click OK

1. Chọn tab 2. Nhập tiêu đề

General

3. Click OK
 7. Thiết lập thuộc tính (tt)
47

 Định dạng lề trang web

 Mở hộp thoại Page properties
 Chọn tab Advanced  nhập giá trị canh lề vào các ô tương ứng
 click OK

2. Nhập giá trị

để định lề, trên,
1. Chọn tab trái, dưới, phải
Advanced

3. Click Ok
 7. Thiết lập thuộc tính (tt)
48

 Định dạng font chữ, kích cỡ, màu sắc mặc định:
 Mở hộp thoại Page properties
 Chọn tab Advanced
 Click chọn nút Body style. Hộp thoại Modify style xuất hiện
 Click nút Format  Font
 Chọn các giá trị cần thiết rồi click OK để thiết lập
 7. Thiết lập thuộc tính (tt)
49

Bước 1: Bước 2:
49

2. Click Format Font

1. Click vào Body style để mở hộp thoại Font
để mở hộp thoại modify
style
 7. Thiết lập thuộc tính (tt)
50

Chọn font chữ

Chọn kiểu chữ: bình

thường, đậm, nghiên, …

Nhập vào kích cỡ chữ

(ví dụ: 12px)

Chọn màu chữ

Click Ok để thiết đặt

 7. Thiết lập thuộc tính (tt)
51

 Chèn ảnh nền:


 Mở hộp thoại Page
properties 

 Chọn tab Formatting
 Background picture
 Browse để chọn
ảnh nền  OK

Chú ý: Phải đảm bảo

rằng ảnh đã được lưu
trong thư mục Images 
trước khi chọn nó làm
ảnh nền
 7. Thiết lập thuộc tính (tt)
52

 Thiết lập màu nền:

 Mở hộp thoại Page
properties
 Chọn tab Formatting
 Background  
Chọn màu  OK



 8. Nhập & định dạng văn bản
53

 Nhập văn bản:

 Khi ta gõ từng ký tự từ bàn phím thì chúng sẽ xuất
hiện bên trái con nháy (con trỏ văn bản)
 Xoá một ký tự bên trái con nháy: ấn phím BackSpace
(“”) nằm trên phím “Enter”
 Xoá một ký tự bên phải con nháy: ấn phím “Delete”
 Xoá nhiều ký tự cùng lúc: tô đen (chọn khối) ký tự
cần xoá và ấn phím “Delete”
 8. Nhập & định dạng văn bản (tt)
54

 Chọn khối (nhiều ký tự):

 Đặt con nháy ở đầu khối cần chọn -> ấn giữ phím “Shift” 
click chuột vào vị trí kết thúc của khối cần chọn.
 Hoặc ấn giữ phím “shift” và ấn các phím mũi tên: , , ,

 Chọn một dòng:
 Đưa con nháy về đầu dòng  ấn giữ phím “Shift”  ấn
phím “End”
 Hoặc đưa con nháy về cuối dòng  ấn giữ phím “Shift” 
ấn phím “Home”
 8. Nhập & định dạng văn bản (tt)
55

 Định dạng ký tự: Chọn đoạn cần định dạng  Format  Font.
Hộp thoại Font xuất hiện và thực hiện định dạng như trước
Chọn kiểu chữ:
bình thường, đậm,
nghiêng, …

Nhập vào kích cỡ

Chọn font chữ (ví dụ: 12px)
chữ

Chọn màu chữ

Click Ok để thiết đặt

 8. Nhập & định dạng văn bản (tt)
56

 Định dạng đoạn: Chọn đoạn cần định dạng  Format 

Paragraph

1. Chọn 2. Click
đoạn Format 
Paragraph
 8. Nhập & định dạng văn bản (tt)
57

Canh lề cho đoạn

Khoảng các
giữa các dòng
Định khoảng cách trong đoạn
trên, dưới của
đoạn

Click Ok
 9. Định dạng Theme
58

 Vào Format  Theme

 Kích vào mẫu để áp dụng Chọn mẫu
theme
cho trang đang chọn
 Kích chuột phải hoặc chuột
trái vào mũi tên bên cạnh
mẫu theme:
 Chọn Apply as default theme để
áp dụng cho tất cả các trang
 Chọn Apply to selected page(s)
để áp dụng cho các trang được
chọn
 10. Tạo Bookmark
59

Bookmark: là các điểm đánh dấu của một đoạn, được dùng để tạo
các điểm đến của các liên kết trong
 Thực hiện: Chọn các ký tự làm tiêu đề của đoạn  Insert 
Bookmark. Hộp thoại Bookmark xuất hiện

Nhập tên Bookmark




Click OK


 11. Chèn liên kết
60

 Liên kết trong: Bookmark

 Chọn các ký tự làm liên kết
 Chọn Insert  Hyperlink ( hoặc ấn tổ hợp phím “Ctrl” + K)
 Hoặc click biểu tượng hyperlink ( ) trên thanh công cụ
 Hộp thoại Insert hyperlink xuất hiện  click nút Bookmark
 Chọn tên Bookmark cần liên kết đến  click OK


 2. Chọn
Bookmark

4. Click 3. Click
OK OK

 
 11. Chèn liên kết (tt)
61

 Liên kết ngoài:

 Chọn các ký tự làm liên kết
 Chọn Insert  Hyperlink ( hoặc ấn tổ hợp phím “Ctrl” + K)
 Hoặc click biểu tượng hyperlink ( ) trên thanh công cụ
 Hộp thoại Insert hyperlink xuất hiện  click chọn trang web cần
liên kết  OK
1. Liên kết đến các trang web cùng web site 2. Liên kết đến các trang web khác trên mạng

  
 12. Chèn các đối tượng thành phần
62

 Marquee
 Chọn các ký tự cần chèn
 Chọn Insert  Web component. Hộp thoại Insert web componet
xuất hiện. Thực hiện theo các hình sau:





 12. Chèn các đối tượng thành phần (tt)
63

Số lượng bước
thay đổi Thời gian trì hoãn

Hướng chuyển
động

Màu nền
Font, màu, kích
thước chữ

Click OK để thiết
đặt
 12. Chèn các đối tượng thành phần (tt)
64

 Hit Counter
 Chọn Insert  Web component. Hộp thoại Insert web componet
xuất hiện. Thực hiện theo các hình sau:



Chọn
mẫu

Ghi chú: Hit Count chỉ hoạt động khi Kích OK

Website thực thi trên Web Server
 12. Chèn các đối tượng thành phần (tt)
65

 Các thanh siêu liên kết

 Click Insert  Navigation
Chọn kiểu thanh liên
kết

Click Next
 12. Chèn các đối tượng thành phần (tt)
66

 Các thanh siêu liên kết (tt)

Chọn kiểu thanh

liên kết

Chọn kiểu hiển thị

Click Next

Click
Finish
 12. Chèn các đối tượng thành phần (tt)
67

 Các thanh siêu liên kết (tt)

Chèn thêm liên kết mới

Xóa liên kết đang

chọn

Chỉnh sửa liên kết

Di chuyển thứ tự
liên kết

Click OK
 13. Table
68

 Chèn bảng (table):

 Table cho phép hiển thị danh sách theo dòng, cột
 Table cho phép ta tạo các ô để đặt các đối tượng vào đúng vị trí
của chúng
 Chèn Table vào trang web: click Table  Insert  Table
 13. Table (tt)
69

Thiết đặt độ
Nhập số dòng rộng và độ
(rows), số cột cao của table
vào ô (columns)

Canh lề table
(trái, phải, giữa) Độ rộng và màu
của đường viền

Chọn màu nền Chọn ảnh nền

Click OK để chấp
nhận
 14. Frame
70

 Làm việc với khung (Frame):

 Một trang web có thể chứa nhiều frame
 Mỗi Frame chứa một trang web
 Frame giúp cho trình duyệt cùng một lúc có thể hiển thị một hoặc
nhiều trang web trong cùng 1 cửa sổ
 Tuy nhiên không phải mọi trình duyệt điều hỗ trợ frame
 Tạo một trang web có frame ta thực hiện:
 Click mũi tên bên cạnh biểu tượng New  Page
 Hộp thoại Page template xuất hiện  Frames pages
 14. Frame (tt)
71

Chọn mẫu

Hiển thị mẫu của

trang

Click OK
 14. Frame (tt)
72

Tạo trang web

mới cho frame

Chèn trang web

đã có vào frame
 14. Frame (tt)
73

 Định dạng khung

 Click phải vào vùng trống trên khung  Frame Properties
 Hộp thoại Frame Properties xuất hiện
Chọn trang web
cần chèn vào
frame

Chiều cao và chiều

rộng của frame Xuất hiện các thanh
cuộn khi cần thiết
Cho phép điều chỉnh
kích thước của
frame khi hiển thị

Click OK để đồng ý
 15. MultiMedia
74

 Chèn ảnh vào trang web:

 Insert  Picture
 Chọn “Clip art”: nếu ta muốn chèn từ bộ sưu tập ảnh của
FrontPage
 Chọn “From File”: nếu file ảnh đã tồn tại trên đĩa
 Chú ý: ảnh phải được chép vào thư mục “Images” của web site
 15. MultiMedia (tt)
75

 Sau khi chèn xong ta phải save trang web lại

 Nếu file ảnh vừa chèn chưa có trong web site thì màn hình Save
embedded files xuất hiện để yêu cầu chúng ta lưu lại file ảnh vừa
chèn

2. Chọn thư
Đổi tên file nếu mục Images
cần thiết

1. Click Change
Folder
3. Click OK

4. Click OK
 15. MultiMedia (tt)
76

 Đưa bộ sưu tập ảnh vào trang web:

 Bộ sưu tập ảnh có thể hiển thị một Album ảnh lên trang web
 FrontPage 2003 hỗ trợ 4 kiểu hiển thị bộ sưu tập ảnh
 Thực hiện: Chọn Insert  Picture  New Photo Gallery. Hộp thoại
Photo Gallery xuất hiện
 Chú ý:
 Ảnh phải được chép vào thư mục “Images” trước khi chèn vào bộ sưu tập ảnh
 Nếu ảnh chưa có thì sau khi save trang web  xuất hiện hộp thoại Save
embedded files  thực hiện các thao tác giống như trước
 15. MultiMedia (tt)
77

1. Click Add 
Picture from file 2. Sau khi chèn ảnh
xong  Layout

3. Chọn kiểu hiển thị

5. Click OK
4. Click OK
 15. MultiMedia (tt)
78
 15. MultiMedia (tt)
79

 Chèn file âm thanh, video:

 Các file âm thanh được dùng phổ biến là: *.wma, *.mid (các file này có dung
lượng nhỏ hơn các file *.mp3, *.wav)
 Các file video được dùng phổ biến là: *.wmv, *.avi
 Thực hiện: Chọn Insert  Web component  Hộp thoại Web
component xuất hiện




 
 15. MultiMedia (tt)
80

Chú ý: File âm thanh, video phải được

chép vào thư mục “Media” của web site
trước khi chèn
 15. MultiMedia (tt)
81

 Nếu file âm thanh, video chưa có thì khi save trang web sẽ xuất
hiện hộp thoại Save embedded files

 Click chọn Change Folder  chọn thư mục “Media”  OK

 
 15. MultiMedia (tt)
82

 Chèn file hoạt hình Flash

 Thực hiện: Chọn Insert  Picture  Movie in flash format
 15. MultiMedia (tt)
83
 15. MultiMedia (tt)
84

 Sử dụng đối tượng MS Window Media Player

Thực hiện: Chọn Insert  Advanced Controls  ActiveX control 
Windows Media Player  Click nút Finish




 
 15. MultiMedia (tt)
85

 Cần chỉ định File Media được thực hiện khi trang web được tải về
trình duyệt

 Chú ý: File được thực hiện bắt buộc phải được đặt trong thư mục
“Media” của web site

Click phải vào

đối tượng
Media player 
ActiveX Control
Properties
 15. MultiMedia (tt)
86

Chọn thư mục

Media
Chọn file cần
chèn

Click Open để
chèn
 15. MultiMedia (tt)
87

Xóa bỏ phần này

để tạo đường dẫn
tương đối

Click OK để kết
thúc
Bài 4
CASCADING STYLE SHEET-CSS
 1. Giới thiệu
89

 Bảng kiểu (style sheet) nhằm thoả mãn nhu cầu:

– Thẩm mỹ
– Giữ tính thống nhất cho trang HTML
– Định dang một số tính chất thông thường cùng một lúc cho tất
cả các đối tượng trên trang

 Tiện ích của CSS:

– Tiết kiệm thời gian
– Khi thay đổi định dạng chỉ cần thay đổi CSS, các trang khác sẽ
tự động cập nhật sự thay đổi đó
– Có thể dùng các CSS cùng với JavaScript để tạo các hiệu ứng
đặc biệt
 2. Phân loại
90

 Có 3 loại CSS:
– Inline style: Là kiểu được gán cho một dòng hoặc một đoạn
văn bản, bằng cách sử dụng thuộc tính style bên trong tag
muốn định dạng
– Internal style: Là bảng mẫu thích hợp cho trang riêng lẻ với
nhiều văn bản
– External style: Là một bảng kiểu được lưu trữ thành một file
bên ngoài và được liên kết với trang HTML
Bảng kiểu này sẽ được áp dụng và ảnh hưởng cho tất cả các
trang của một website
 2.1. Inline style
91

 Cú pháp:
<TagName Style=”property1:value1;property2: value2; …”>
Nội dung văn bản muốn định dạng
</TagName>

 Ví dụ:
<P style = “color:aqua ; font-Style:italic; text-Align:center”>
This paragraph has an inline style applied to it
<P>
<SPAN style = color:red> difference </SPAN>
 2.2. Internal style
92

 Cách tạo: Tạo bảng mẫu chung trên phần đầu trang trong cặp tag
<head>
 Sử dụng: Trong phần body, nội dung nào muốn sử dụng định dạng
theo bảng mẫu trên thì đặt trong tag được định nghĩa trong phần
head
 Cú pháp:
<Head>
<Style TYPE=”text/css”>
TagName{property1:value1;property2:value 2 …}
(lặp lại cho mỗi tag có thuộc tính cần định dạng)
</Style>
</Head>
 2.2. Internal style
93

 Ví dụ:
<HTML>
<HEAD>
<STYLE TYPE=”text/css”>
H1,H2 { color: limegreen; font-family: Arial }
</STYLE>
</HEAD>
<BODY>
<H1>This is the H1 element</H1>
<H2>This is the H2 element</H2>
<H3>This is the H3 element with its default style </H3>
</BODY>
</HTML>
 2.3. External style
94

 Cách tạo:
– Tạo một tập tin văn bản mới
– Nhập tên các tag muốn định dạng thuộc tính theo mẫu:
TagName{property1: value1; property2:value2;…}
– Lưu tập tin với định dạng Text Only và có phần mở rộng .css

 Ví dụ:
 Tạo tập tin Sheet1.css

H2 {color:blue; font-style:italic}
P{text-align:justify; text-indent:8pt;
font:10pt/15pt “Myriad Roman”,”Verdana”}
 2.3. External style
95

 Cách dùng:
<HTML>
<HEAD><TITLE> Changing the rules</TITLE>
<LINK REL=stylesheet HREF=”sheet1.css” TYPE=”text/css”>
</HEAD>
<BODY>
<H2> Changing the rules is fun</H2>
<P> Changing the rules may not be such fun
<H2>The H2 element again</H2>
</BODY>
</HTML>
 3. Định dạng mẫu cho lớp (class)
96

 Có thể chia các yếu tố trong HTML thành các lớp để áp

dụng kiểu mẫu hiệu quả hơn
 Cú pháp:
<STYLE>
.ClassName{property1: value1; property2:value2;…}
</STYLE>

Trong phần <Body>, đánh dấu phần nằm trong lớp bằng cú pháp:
<TagName Class=”ClassName”>
Nội dung
</TagName>
 3. Định dạng mẫu cho lớp (class)
97

 Ví dụ:
<HTML>
<HEAD>
<STYLE>
.water{color:blue}
.danger{color:red}
</STYLE>
</HEAD>
<BODY>
<P class=“water”>test water</P>
<P class=“danger”>test danger </P>
</BODY>
</HTML>
 4. Các thuộc tính định dạng
98

 Định dạng văn bản

 Chọn bộ font:
font-family: familyname1, familyname2…
 Tạo chữ nghiêng:
Font-style: italic
 Tạo chữ đậm:
Font-weight: bold
 Định cỡ chữ:
Font-size: xx-small hoặc x-small, small, medium, large, x-
large, xx-large hoặc Font-size:12pt (giá trị cụ thể)
 4. Các thuộc tính định dạng (tt)
99

 Định dạng văn bản (tt)

 Màu của chữ:
Color: colorName hoặc #rrggbb
 Màu nền của chữ:
Background: colorName hoặc #rrggbb
 Định khoảng cách giữa các từ, các ký tự:
Word-spacing:n (n: khoảng cách giữa các từ, tính bằng pixel)
Letter-spacing:n (n: khoảng cách giữa các từ, tính bằng pixel)
 Canh lề cho văn bản:
Text-Align: left, right, center, justify
 Thay đổi dạng chữ:
Text-transform: capitalize, uppercase, lowercase
 4. Các thuộc tính định dạng (tt)
100

 Định dạng danh sách

 List-style:circle chấm tròn rỗng
 List-style: disc chấm tròn đen
 List-style: square chấm đen vuông
 List-style: decimal đánh số ả rập
 List-style: lower-alpha thứ tự alpha
 List-style: upper-alpha thứ tự alpha chữ in hoa
 List-style: upper-roman số la mã hoa
 List-style: lower-roman số la mã thường
 List-style-image:url: hình làm bullet
 4. Các thuộc tính định dạng (tt)
101

 Định dạng nền trang

 bacground-color: màu nền
 background-image: ảnh nền
 background- position: vị trí đặt ảnh nền gồm các giá trị:left,
right, center, top, bottom,inherit
 background-repeat: ảnh lặp
– Repeat: lặp trên cả trang
– Repeat-x: lặp theo chiều ngang
– Repeat-y: lặp theo chiêù đứng
 background-attachment: giữ ảnh cuộn /không cuộn theo
trang của trình duyệt
 4. Các thuộc tính định dạng (tt)
102

 Định dạng đường viền

 border-style: kiểu đường viền
 border-collapse: collapse: đường viền lún
 border-bottom-style
 border-left-style:double
Định dạng từng cạnh
 border-right-style:double của khung
 border-top-style
 border-left-color
 4. Các thuộc tính định dạng (tt)
103

 Định dạng hypertext link

 Text-Decoration:none: không gạch dưới
 A:visited {styles cho vị trí đã được xem}
 A:link {styles cho vị trí chưa được xem}
 A:active {style cho những link đang click}
 A:hover {style khi trỏ lướt qua link}
Bài 5
FORM TRÊN TRANG WEB
 1. Các đối tượng nhập dữ liệu
105

 Cho phép người sử dụng nhập dữ liệu trên trang web. Dữ liệu này
có thể được gửi về server để xử lý.
 Người sử dụng nhập dữ liệu thông qua các điều khiển (controls). Có
nhiều loại control:
1. Form
2. Oneline Textbox
3. Checkbox
4. Radio Button
5. Button
6. Combo box (drop-down menu)
7. Listbox
8. Hộp nhập văn bản nhiều dòng (TextArea)
9. …
 1. Các đối tượng nhập dữ liệu (tt)
106

 Tất cả các điều khiển đều có tên được quy định qua
thuộc tính name. Tuy nhiên có một số điều khiển thì
name không quan trọng (các điều khiển mà sau này
không cần lấy dữ liệu)
 Các điều khiển từ số 2. đến số 5 được định nghĩa nhờ
thẻ <input> và thuộc tính type sẽ xác định là điều khiển
nào sẽ được tạo ra.
 2. Form
107

 Sử dụng để chứa mọi đối tượng khác

 Không nhìn thấy khi trang web được hiển thị
 Quy định một số thuộc tính quan trọng như method, action.
 Thẻ tạo form:
<form>…</form>
 Các thuộc tính:
 name=“tên_form”: Không quan trọng lắm
 action=“địa chỉ nhận dữ liệu”: Nên sử dụng đường dẫn tương đối nếu
nằm trong cùng 1 web
 method=“phương thức gửi dữ liệu”. Chỉ có 2 giá trị:
 GET (mặc định)
 POST
 3. Hộp nhập văn bản 1 dòng (Textbox)
108

 Sử dụng để nhập các văn bản ngắn

(trên 1 dòng) hoặc mật khẩu
 Thẻ: <input>
 Thuộc tính:
 name=“tên_đt”: định danh đối tượng
 type=“text”:Ô nhập văn bản thường
 type=“password”: ô nhập mật khẩu
 value=“giá trị mặc định”
 4. Checkbox
109

 Cho phép chọn nhiều lựa chọn trong

một nhóm lựa chọn được đưa ra bằng
cách đánh dấu (“tích”).
 Thẻ: <input>: mỗi ô nhập cần 1 thẻ
 Thuộc tính:
 name=“tên_ĐT”: định danh đối tượng
 type=“checkbox”
 value=“giá trị”: đây là giá trị chương trình sẽ
nhận được nếu NSD chọn ô này.
 checked: nếu có thì nút này mặc định được
chọn
 5. Radio Button
110

 Cho phép chọn một lựa chọn trong một nhóm

lựa chọn được đưa ra.
 Trên 1 form có thể có nhiều nhóm lựa chọn kiểu
này.
 Thẻ: <input>: Mỗi ô cần 1 thẻ
 Thuộc tính:
 name=“tên_đt”: định danh đối tượng. Các đối
tượng cùng tên thì thuộc cùng nhóm.
 type=“radio”
 value=“giá trị”: đây là giá trị chương trình sẽ nhận
được nếu NSD chọn ô này.
 checked: nếu có thì nút này mặc định được chọn
 6. Nút lệnh (Button)
111

 Sử dụng để NSD ra lệnh thực hiện công việc.

 Trên web có 3 loại nút:
 submit: Tự động ra lệnh gửi dữ liệu
 reset: đưa mọi dữ liệu về trạng thái mặc định
 normal: người lập trình tự xử lý
 Thẻ: <input>
 Thuộc tính:
 name=“tên_ĐT”: thường không quan trọng
 type=“submit”: nút submit
 type=“reset”: nút reset
 type=“button”: nút thông thường (normal)
 value=“tiêu đề nút”
 7. Combo Box
112

 Bao gồm một danh sách có nhiều phần tử. Tại một thời điểm chỉ có 1
phần tử được chọn
 NSD có thể chọn 1 phần tử trong danh sách xổ xuống bằng cách
kích vào mũi tên bên phải hộp danh sách.
 Thẻ tạo hộp danh sách:
<select>Danh sách phần tử</select>
 Thuộc tính:
 name=“tên_ĐT”: quan trọng
 Thẻ tạo 1 phần tử trong danh sách:
<option>Tiêu đề phần tử</option>
 Thuộc tính:
 value=“giá trị”: giá trị chương trình nhận được nếu phần tử được chọn
 selected: nếu có thì phần tử này mặc định được chọn
 8. Listbox
113

 Tương tự như Combo box, tuy nhiên

có thể nhìn thấy nhiều phần tử cùng
lúc, có thể lựa chọn nhiều phần tử
 Thẻ: <select>…</select>
 Thuộc tính: tương tự của combo tuy
nhiên có 2 thuộc tính khác:
 size=“số dòng”
 multiple: cho phép lựa chọn nhiều phần tử
cùng lúc
 Thẻ <option>…</option> tương tự của
combo box
 9. TextArea
114

 Cho phép nhập văn bản dài trên nhiều dòng.

 Thẻ:
<textarea>
Nội dung mặc định
</textarea>
 Thuộc tính:
 name=“tên_ĐT”: quan trọng
 rows=“số dòng”
 cols=“số cột”
rows tính theo số dòng văn bản, cols tính theo số ký tự
chuẩn trên dòng.
 Kết thúc
115