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

Bản đồ ảnh 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à

Trang 1

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

Email: huynhducviet@gmail.com

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

Trang 2

MỘT SỐ KHÁI NIỆM CƠ BẢN

Bài 1

Trang 3

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

Trang 4

1 Các khái niệm cơ bản (tt)

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

Internet (Web Server, Mail Server, FTP Server…)

chứa tài nguyên dùng chung cho nhiều máy Client

4

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

5

Trang 6

Một tập hợp nhiều web page, thể hiện thông tin của một tổ chứchoặc một chủ đề nào đó

6

Trang 7

Trang 8

2 Mô hình hoạt động của dịch vụ web

Trang 9

3 Phân loại web

 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

Trang 10

4 Xây dựng và công bố website

 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

10

Trang 11

NGÔN NGỮ HTML

Bài 2

Trang 12

sai chỉ dẫn đến kết quả hiển thị không đúng với dự định.

12

Trang 14

2 Thẻ (tag) (tt)

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

Trang 15

3 Cấu trúc trang web

Trang 16

4 Trang web đầu tiên

 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

 …

16

Trang 17

4 Trang web đầu tiên (tt)

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

Trang 18

4 Trang web đầu tiên (tt)

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

18

Trang 19

5 Soạn thảo văn bản

 Văn bản được soạn thảo bình thường trong file HTML

 Dấu nhỏ hơn (<) và lớn hơn (>): < >

 Dấu ngoặc kép (“): "

 Ký hiệu : ©

 …

 Ghi chú trong HTML: <! Ghi chú >

19

Trang 20

6 Thẻ định dạng ký tự

… Dạng chữ đậm Hello world !

… Dạng chữ nghiêng Hello world !

… Dạng chữ gạch chân Hello world !

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

Hello world

… Tạo chỉ số trên X2  X 2

… Tạo chỉ số dưới H2O  H2O

20

Trang 21

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

21

Trang 22

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

22

Trang 23

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

23

Trang 24

10 Siêu liên kết (Hyperlink)

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

 Đố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>

24

Trang 25

10 Siêu liên kết (Hyperlink) (tt)

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

25

Trang 26

11 Bản đồ ảnh

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

Trang 27

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

27

Trang 28

</map>

</body>

</html>

28

Trang 29

behavior= “alternate” | “ slide” | “ scroll”

direction= “right“ | “left” | “up” | “down”

Trang 30

13 Đa phương tiện

 Âm thanh nền: <bgsound>

• src=“địa chỉ file âm thanh”

• loop=“n” : số lần lặp -1: mặc định: mãi mãi.

Trang 31

14 Flash

<object

classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"

width=“số" height=“số">

<param name="movie" value="ten_file.swf">

<embed src="ten_file.swf" quality="high"

pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"

width="số " height="số "></embed>

</object>

31

Trang 32

15 Bảng biểu

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

32

Trang 33

15 Bảng biểu (tt)

 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%: 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ể.

33

Trang 34

15 Bảng biểu (tt)

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

34

Trang 35

MICROSOFT OFFICE FRONTPAGE 2003

Bài 3

Trang 36

1 Giới thiệu

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

36

Trang 37

2 Môi trường làm việc

 Start  Programs  Microsoft Office  Microsoft FrontPage 2003

37

Thanh tiêu

đề

Thanh Menu Thanh công cụ chuẩn

Thanh định dạng Page tab

Chế độ làm việc

Đóng trang web hiện tại

Thanh cuộn ngang – dọc Task pane

Vùng thiết kế

Trang 38

3 Tạo mới trang web

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

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

38

2.Click vào

để tạo web site mới

1 Click vào đây

Trang 39

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

3.Click Ok để tạo website mới

Trang 40

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

40

Thư mục chứa các hình ảnh Trang chủ của web site

Tạo trang web mới

Tạo thư mục mới

Trang 41

4 Lưu trang web

 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

41

Nhập tên trang web

Click save

để lưu trang

web

Trang 42

1 Click

vào đây

Trang 43

5 Mở trang web (tt)

43

2 Click chọn web site cần mở

1 Click chọn nơi chứa web site

3 Click Open để

mở web site

Trang 44

5 Mở trang web (tt)

44

Click phải vào trang cần mở và chọn Open

Trang 45

6 Chuyển đổi chế độ làm việc

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

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

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

 Split: chế độ vừa thiết

kế vừa viết mã lệnh

 Preview: Chế độ chạy thử trang web trong FrontPage

45

Chế độ làm việc

Trang 46

7 Thiết lập thuộc tính

 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

Trang 47

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

 Đị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

47

1 Chọn tab Advanced

2 Nhập giá trị

để định lề, trên, trái, dưới, phải

3 Click Ok

Trang 48

 Định dạng font chữ, kích cỡ, màu sắc mặc định:

 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

48

Trang 49

Bước 2:

2 Click Format Font

để mở hộp thoại Font

49

Trang 50

Chọn font chữ

Chọn kiểu chữ: bình thường, đậm, nghiên, …

Click Ok để thiết đặt

Nhập vào kích cỡ chữ (ví dụ: 12px)

Chọn màu chữ

50

Trang 51

 Chèn ảnh nền:

 Chọn tab Formatting

 Background picture

 Browse để chọn ảnh nền  OK

trước khi chọn nó làm ảnh nền

51

Trang 52

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

 Chọn tab Formatting

 Background Chọn màu  OK







52

Trang 53

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

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

53

Trang 54

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

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

click chuột vào vị trí kết thúc của khối cần chọn

Trang 55

Click Ok để thiết đặt

Nhập vào kích cỡ chữ (ví dụ: 12px)

Chọn màu chữ

Trang 57

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 trong đoạn

Định khoảng cách

trên, dưới của

đoạn

Click Ok

Trang 58

9 Định dạng Theme

 Vào Format  Theme

 Kích vào mẫu để áp dụng 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

58

Chọn mẫu theme

Trang 59

Click OK

Trang 60

11 Chèn liên kết

 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

3 Click

OK

Trang 61

11 Chèn liên kết (tt)

 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

Trang 64

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

Website thực thi trên Web Server

Trang 65

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

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

 Click Insert  Navigation

65

Chọn kiểu thanh liên kết

Click Next

Trang 66

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

66

Chọn kiểu thanh liên kết

Click Next

Chọn kiểu hiển thị

Click Finish

Trang 67

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

67

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

Xóa liên kết đang chọn

Click OK

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

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

Trang 68

13 Table

 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

68

Trang 69

Độ rộng và màu của đường viền

Click OK để chấp nhận

Trang 70

14 Frame

 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

70

Trang 73

14 Frame (tt)

 Đị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

73

Chọn trang web cần chèn vào frame

Chiều cao và chiều

Trang 74

 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

74

Trang 75

15 MultiMedia (tt)

 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

75

2 Chọn thư mục Images

3 Click OK

Đổi tên file nếu

cần thiết

1 Click Change Folder

4 Click OK

Trang 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

76

Trang 77

77

2 Sau khi chèn ảnh xong  Layout

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

4 Click OK

1 Click Add  Picture from file

5 Click OK

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