BÀI GIẢNG : Microsoft Office FrontPage 2003 docx

BÀI GIẢNG :BÀI GIẢNG :
Microsoft Office FrontPage 2003Microsoft Office FrontPage 2003
Microsoft

Office

FrontPage

2003Microsoft

Office

FrontPage

2003
1
PHẦN II:
THIẾTKẾ WEB VỚI FRONTPAGE 2003
THIẾT

KẾ

WEB

VỚI

FRONTPAGE

2003
Mục tiêu:
- Thiết kế một web site đơn giản ở chế độ design

của FrontPage 2003
của

FrontPage

2003
- Vài ví dụ mẫu:
-
Bài tập 1: trang web đầu tiên
-
Bài tập2
3: mụctiêulàmquen
Bài

tập

2
,

3:

mục

tiêu

làm

quen
-
Bài tập 4, 5: mục tiêu tiếp theo

à ậ ê ố ù
-
B
à
i t
ậ
p 6, 7: mục ti
ê
u cu
ố
i c
ù
n
g
2
PHẦN II:
THIẾTKẾ WEB VỚI FRONTPAGE 2003
THIẾT

KẾ

WEB

VỚI

FRONTPAGE

2003
I. Giới thiệu FrontPage 2003:
Những nội dung chính:

-
Khởi động FrontPage
- Màn hình làm việc của FrontPage
-Giới thiệu các thanh công cụ chính
Các chế độ thiếtkế củaFrontPage
-
Các

chế

độ

thiết

kế

của

FrontPage
3
PHẦN II:
THIẾTKẾ WEB VỚI FRONTPAGE 2003
THIẾT

KẾ

WEB

VỚI

FRONTPAGE

2003
I. Giới thiệu FrontPage 2003:
1. Khởi động và thoát FP
- Khởi động:
Start/ Programs/ MicrosoftOffice/
Microsoft FrontPage 2003
- Thoát FrontPage:
Bấm nút X trên thanh tiêu đề của FP.
- Đóng 1 trang mà không thoát FP: bấm nút X tại
phần ngoài bên phải tên trang web
Lưu
ý
: nếu tran
g
web chưa đư
ợ
c lưu thì sẽ có thôn
g
báo lưu tran
g
web. Bấm Yes nếu cần lưu
ý
g ợ g g
thông tin chỉnh sửa hoặc No nếu hủy bỏ việc hiệu chỉnh trang web.
4
PHẦN II:
THIẾTKẾ WEB VỚI FRONTPAGE 2003
THIẾT

KẾ

WEB

VỚI

FRONTPAGE

2003
I. Giới thiệu FrontPage 2003:
2. Màn hình làm việc của FrontPage
Skhikhởi độ àhìh
-
S
au
khi

khởi

độ
ng, m
à
n
hì
n
h
của FP hiện ra, sẵn sàng
để làm việc
- Để tạo một trang web mới,

bấm nút New, chọn tiếp
Blank Page
ở Task Panel
Blank

Page
ở

Task

Panel
bên khung trái
5
PHẦN II:
THIẾTKẾ WEB VỚI FRONTPAGE 2003
THIẾT

KẾ

WEB

VỚI

FRONTPAGE

2003
I. Giới thiệu FrontPage 2003:
3. Các thanh công cụ của FrontPage
31Cáh àđóáthhô
3

.
1

Cá
c
h
xem v
à

đó
ng c
á
c
th
an
h
c
ô
ng cụ
- Chọn
View
Ch
Tlb
-
Ch
ọn
T
oo
lb
ar

s
- Chọn hoặc bỏ chọn trước tên các
thanh công cụ để hiệnhoặc ẩn chúng
thanh

công

cụ

để

hiện

hoặc

ẩn

chúng
.
- Các thanh công cụ hữu ích:
Standard,
Formatting Drawing Pictures
Formatting
,
Drawing
,
Pictures
…
6
PHẦN II:

THIẾTKẾ WEB VỚI FRONTPAGE 2003
THIẾT

KẾ

WEB

VỚI

FRONTPAGE

2003
I. Giới thiệu FrontPage 2003:
3. Các thanh công cụ của FrontPage
3 2 Thanh công cụ Standard
3
.
2

Thanh

công

cụ

Standard
Là thanh công cụ được dùng
nhiều nhất, tập hợp các
úlệ h ệ ả lý
n

ú
t
lệ
n
h
quan trọng trong vi
ệ
c qu
ả
n
lý
:
-
Tập tin: tạo mới, lưu trữ, mở, sao chép…
Kiểm tra lỗi chính tả in ấnxemkếtquả trang web đãthiếtkế
-
Kiểm

tra

lỗi

chính

tả
,
in

ấn
,

xem

kết

quả

trang

web

đã

thiết

kế
- Các thao tác soạn thảo đơn giản: sao chép, cắt, dán các đối tượng
-
Chèn các thành phần đặcbiệtchènbảng siêu liên kếthìnhảnh
Chèn

các

thành

phần

đặc

biệt
,

chèn

bảng
,
siêu

liên

kết
,
hình

ảnh
…
7
PHẦN II:
THIẾTKẾ WEB VỚI FRONTPAGE 2003
THIẾT

KẾ

WEB

VỚI

FRONTPAGE

2003
I. Giới thiệu FrontPage 2003:
3. Các thanh công cụ của FrontPage

33Th h ô F tti
3
.
3

Th
an
h
c
ô
ng cụ
F
orma
tti
n
g
Là thanh công cụ dùng để định
dạng nhanh vănbản:
dạng

nhanh

văn

bản:
-
Kiểu văn bản, các loại font chữ, kích thước chữ dùng trong thiết kế
-
Các dạng nghiêng, đậm, gạch dưới, canh lề vănbản
Các

dạng

nghiêng,

đậm,

gạch

dưới,

canh

lề

văn

bản
- Tạo số hoặc kí tự đặc biệt đầu mỗi đoạn
-
Kẻ khung, màu nềnvàmàuchữ củavănbản.
Kẻ

khung,

màu

nền

và

màu

chữ

của

văn

bản.
8
PHẦN II:
THIẾTKẾ WEB VỚI FRONTPAGE 2003
THIẾT

KẾ

WEB

VỚI

FRONTPAGE

2003
3.4 Thanh công cụ Pictures
Là thanh công cụ dùng để hiệu chỉnh các đối tượng hình ảnh:
- Chèn hình ảnh, nhập nội dung trực tiếp lên trên ảnh
- Lật ảnh ngang, sang trái, phải, xoay ảnh
- Các hiệu ứng cơ bản: làm mờ hoặc trong suốt, độ sáng, tối, độ tương
hả ủ ả h

p
hả
n c
ủ
a
ả
n
h
.
- Cắt hình ảnh, định kích thước ảnh, tạo bản đồ liên kết ảnh…
9
PHẦN II:
THIẾTKẾ WEB VỚI FRONTPAGE 2003
THIẾT

KẾ

WEB

VỚI

FRONTPAGE

2003
3. Các thanh công cụ của FrontPage
3.5 Thanh công cụ Table
Là thanh công cụ rất quan trọng trong thiết kế web, ngoài chức năng kẻ
bảng và thựchiện các thao tác trựctiếptrênbảng nó còn dùng để
bảng

và

thực

hiện

các

thao

tác

trực

tiếp

trên

bảng
,
nó

còn

dùng

để

định vị vị trí đối tượng trên trang web:
- Giúp kẻ bảng nhanh, thêm hoặc xóa bớt các thành phần trên bảng

- Nối, tách các ô, thêm, xóa dòn
g
cột
- Định vị tương đối văn bản trong từng ô
-
Chọnmàuchobảng hoặcô
-
Chọn

màu

cho

bảng

hoặc

ô
.
10
PHẦN II:
THIẾTKẾ WEB VỚI FRONTPAGE 2003
THIẾT

KẾ

WEB

VỚI

FRONTPAGE

2003
I. Giới thiệu FrontPage 2003:
3. Các thanh công cụ của FrontPage
36Cá th h ô khá
3
.
6

Cá
c
th
an
h
c
ô
ng cụ
khác
- Thanh công cụ DHTML Effect
:giúptạocáchiệu ứng đặcbiệtcho
trang
web
như
nhấp
chuột,
rê
chuột,
…
vào

một
đối
tượng
trang
web
như
nhấp
chuột,
rê
chuột,
…
vào
một
đối
tượng
- Thanh công cụ Positioning
: dùng để nhúng, định vị vị trí đốitượng
-
Thanh
Navigation
:
chọn
View/
Navigation
:
Thanh
Navigation
:
chọn
View/

Navigation
:
Dùng để xem dạng cây phân cấptrongtrangweb,rấthữuíchtrong
trường hợpcầntạo nhanh những nút liên kết các trang trong cùng cấp,
ấ
h
h ặ
ấ
c
ấ
pc
h
a
h
o
ặ
cc
ấ
pcon.
11
PHẦN II:
THIẾTKẾ WEB VỚI FRONTPAGE 2003
THIẾT

KẾ

WEB

VỚI

FRONTPAGE

2003
I. Giới thiệu FrontPage 2003:
4. Các phương thức xem trang:
Trong FrontPage có 4 phương
Trong

FrontPage

có

4

phương

thức xem một trang web
4.1 Chế độ Design:
4.1

Chế

độ

Design:
Chế độ nhập nội dung, bố cục, thiết
kế website. Ở chế độ này có
thể sử dụng hầuhếtcác
thể

sử

dụng

hầu

hết

các

menu lệnh, các biểu tượng
trên những thanh công cụ.
12
PHẦN II:
THIẾTKẾ WEB VỚI FRONTPAGE 2003
THIẾT

KẾ

WEB

VỚI

FRONTPAGE

2003
I. Giới thiệu FrontPage 2003:
4. Các phương thức xem trang:
hế độ l
4.2 C

hế

độ
Sp
l
it
:
Chế độ này sẽ chia đôi màn hình
làm 2
,
m
ộ
t màn hình
, ộ
dùng để nhập nội dung,
bố cục, thiết kế giống
chế độ Design, màn hình
ò ể ế á
c
ò
n lại hi
ể
n thị chi ti
ế
t c
á
c
mã lệnh, các thẻ tag của
ngôn ngữ HTML
13

PHẦN II:
THIẾTKẾ WEB VỚI FRONTPAGE
2003
THIẾT

KẾ

WEB

VỚI

FRONTPAGE

2003
I. Giới thiệu FrontPage 2003:
4. Các phương thức xem trang:
hế độ d
4.3 C
hế

độ
Co
d
e
:
Chế độ này hiển thị chi tiết các mã lệnh, các thẻ tag của ngôn ngữ HTML. Dành riêng cho
nhữn
g
n
g

ười rành về n
g
ôn n
g
ữ thiết kế web HTML
gg gg
14
PHẦN II:
THIẾTKẾ WEB VỚI FRONTPAGE 2003
THIẾT

KẾ

WEB

VỚI

FRONTPAGE

2003
I. Giới thiệu FrontPage 2003:
4. Các phương thức xem trang:
44Chế độ Preview:
4
.
4

Chế

độ

Preview:
Chếđộnày cho phép xem trướckếtquả thiếtkế. Ở chếđộnày hầuhết các thanh
công cụ sẽ bị mờ không hoạt động được, và một vài thành phầncóthể sẽ
hiển
thị
không
chính
xác
Tốt
nhất
nên
xem
kết
quả
thiết
kế
trang
web
bằng
hiển
thị
không
chính
xác
.
Tốt
nhất
nên
xem

kết
quả
thiết
kế
trang
web
bằng
trình duyệtIE
Tóm lại:
Tron
g
4ch
ế
đ
ộ
xem tran
g
này, chún
g
ta sẽ thiếtk
ế
tran
g
web ở ch
ế
đ
ộ
Design, sau đó chuyểnngaysangchếđộPreview để xem kếtquả.Nếukhông
vừa ý thì chuyểnlạichếđộDesign rồitiếptụchiệuchỉnh cho đến khi hoàn
thành

trang
web
của
mình
.
thành
trang
web
của
mình
.
15
PHẦN II:
THIẾTKẾ WEB VỚI FRONTPAGE 2003
THIẾT

KẾ

WEB

VỚI

FRONTPAGE

2003
II. Các thao tác trên trang web:
• Những nội dung chính phần II:
ákhá ệ bả
•
C

á
c
khá
i ni
ệ
m cơ
bản
•
Cách tạo một website
•
Cách tạo một trang web đơn
•
Lưutrữ và hiệuchỉnh
Lưu

trữ

và

hiệu

chỉnh

•
Xem website đã thiết kế
16
PHẦN II:
THIẾTKẾ WEB VỚI FRONTPAGE 2003
THIẾT

KẾ

WEB

VỚI

FRONTPAGE

2003
II. Các thao tác trên trang web:
• Các khái niệm cơ bản:
•
Web
p
a
ge
:
m
ộ
t tran
g
web đơnchứan
ộ
idun
g
c
ụ
th
ể
về m

ộ
tvấn
pg
ộ
g
ộ
g
ụ
ộ
đề nào đó. Trong webpage có chứa liên kếttới các webpage khác
•
Website:
tậphợpcủa các webpage mà mỗitrangđềucóliênkết
với nhau.
•
Trang chủ:
thường được đặttênlàindex.htm,chứaliênkếttới
toàn
bộ
các
webpage
còn
lại
trong
website
Trang
chủ
thường
toàn
bộ

các
webpage
còn
lại
trong
website
.
Trang
chủ
thường
dùng thể hiệncácnội dung quan trọng nhấtmàmuốnngườikhác
phảichúý.Cóthể hình dung trang chủ củamộtwebsitegiống
trang bìa củamộttờ báo.
17
PHẦN II:
THIẾTKẾ WEB VỚI FRONTPAGE 2003
THIẾT

KẾ

WEB

VỚI

FRONTPAGE

2003
II. Các thao tác trên trang web:
1. Cách tạo một website rỗng:
Thườ dù để t ộtbitỗ hư ó ộid

Thườ
ng
dù
ng
để

t
ạo m
ột
we
b
s
it
e r
ỗ
ng, c
hư
a c
ó
n
ội

d
ung:
- Vào menu File, chọn New -> xuất hiện khung thoại bên phải màn hình,
chọn
More website templates
.
chọn

More

website

templates
.
-Chọn một mẫu bất kỳ bên khung trái tùy vào yêu cầu sử dụng, bấm nút
Browse và chọn đường dẫn lưu website, nhấp OK khi hoàn tất.
- Trên FP sẽ xuất hiện một website mới chưa có nội dung và có sẵn 1 tập
tin index.htm, 2 folder mặc định images và _private. Nhấp đúp vào
index.htm để bắt đầu nhập nội dung cho trang web
18
PHẦN II:
THIẾTKẾ WEB VỚI FRONTPAGE 2003
THIẾT

KẾ

WEB

VỚI

FRONTPAGE

2003
II. Các thao tác trên trang web:
1. Cách tạo một website rỗng:
19
PHẦN II:
THIẾTKẾ WEB VỚI FRONTPAGE 2003

THIẾT

KẾ

WEB

VỚI

FRONTPAGE

2003
II. Các thao tác trên trang web:
1. Cách tạo một website rỗng:
Lưuý
:
Lưu

ý
:
- Trong bướcchọnmẫuwebsite,cóthể chọncácmẫu khác nhau cho các
mục
đích
khác
nhau
.
Ví
dụ
với
mẫu
Personal

Web
Site
thì
sẽ
xuất
hiện
mục
đích
khác
nhau
.
Ví
dụ
với
mẫu
Personal
Web
Site
thì
sẽ
xuất
hiện
nhiềumụchơnlàkhichọnmẫu One Page WebSite
-Trongphần này, chúng ta chỉ quan tâm tớiviệctạomột trang web đơn
(webpage), vì việctạowebsitechỉ thựcsự dành cho những dự án lớn
hoặcmột trang web cá nhân cần đầutư nhiềucôngsức, thờigianvà
kiến
thức
.
kiến

thức
.
20
PHẦN II:
THIẾTKẾ WEB VỚI FRONTPAGE 2003
THIẾT

KẾ

WEB

VỚI

FRONTPAGE

2003
II. Các thao tác trên trang web:
2. Cấu trúc tổng quát của một trang web:
Cấutrúctổng quát củamộttrangwebgầngiống vớicấu trúc khi tạomột
Cấu

trúc

tổng

quát

của

một

trang

web

gần

giống

với

cấu

trúc

khi

tạo

một

website, bao gồm:
- Tập tin index.htm làm trang chủ,
ậ à ẽ đ h đầ ê
t
ậ
p tin n
à
y s
ẽ

đ
ược c
h
ạy
đầ
u ti
ê
n
khi mở trang web
-
Các folder con chứa các thành
Các

folder

con

chứa

các

thành

phần khác của website, như
folder images chỉ chứa các tập
tin hình ảnh, folder
webpages
tin

hình

ảnh,

folder

webpages
chứa các trang web con khác …
21
PHẦN II:
THIẾTKẾ WEB VỚI FRONTPAGE 2003
THIẾT

KẾ

WEB

VỚI

FRONTPAGE

2003
II. Các thao tác trên trang web:
3. Tạo một trang web mới
T
ran
g
web mới sẽ đư
ợ
c t

ạ
o theo 2 cách:
g ợ ạ
-Tạo một trang web trắng chưa có nội dung
-
Tạ
o m
ộ
t tran
g
web theo nhữn
g
mẫu có sẵn tron
g
FrontPa
g
e
ạ ộ g g gg
3.1 Tạo một trang web trắng
File > New > ch
ọ
n Blank
p
a
g
e ở khun
g
ch
ọ
n bên

p
hải
ọ
pg
g ọ p
3.2 Tạo trang web mới theo những mẫu có sẵn
File > New > More
p
a
g
e tem
p
lates
,
ch
ọ
n m
ộ
t mẫu có sẵn
pg p
, ọ ộ
trong phần General, OK.
22
PHẦN II:
THIẾTKẾ WEB VỚI FRONTPAGE 2003
THIẾT

KẾ

WEB

VỚI

FRONTPAGE

2003
II. Các thao tác trên trang web:
4. Lưu trang web
Sau khi tạo một trang web,
phải lưu trữ trang web đó lại
để tránh việc mất dữ liệu
bấtngờ
bất

ngờ
-Lưu lần đầu: File > Save
ho
ặ
c nhấ
p
biểu tư
ợ
n
g
ặ p ợ g
- Tiêu đề trang web: bấm
Change title để thay đổi
tiêu đề trang web
23
PHẦN II:

THIẾTKẾ WEB VỚI FRONTPAGE 2003
THIẾT

KẾ

WEB

VỚI

FRONTPAGE

2003
II. Các thao tác trên trang web:
4. Lưu trang web
Thữ lầ lư t ữ tiế th hỉ ầ hấ biể tượ ế ố
T
rong n
hữ
ng
lầ
n
lư
u
t
r
ữ

tiế
p
th

eo, c
hỉ
c
ầ
n n
hấ
p
biể
u
tượ
ng n
ế
u mu
ố
n
lưu đè lên tập tin cũ hoặc chọn File > Save as nếu muốn lưu trữ với
tên khác.
Lưu ý
: nếu trang web cần lưu có kèm
hình ảnh thì khi lưu nó sẽ hỏi có muốn
lưu kèm hình hay không? Bấm OK để xác
nhận việc lưu trữ web với hình ảnh
24
PHẦN II:
THIẾTKẾ WEB VỚI FRONTPAGE 2003
THIẾT

KẾ

WEB

VỚI

FRONTPAGE

2003
II. Các thao tác trên trang web:
5. Xem trang web bằng trình duyệt
- Sau khi thiếtkế và lưu trang web, ta có thể xem kếtquảởchếđộPreview, tuy
nhiên ở chếđộnày đôi khi hiểnthị không chính xác. Do đócáchxemtốtnhất
là
sử
dụng
trình
duyệt
web
.
là
sử
dụng
trình
duyệt
web
.
- Vào File, chọn Preview in browser, sau đó chọn trình duyệt và độ phân giải
màn hình cần xem.
- Hoặc có thể sử dụng nút lệnh Preview
trên thanh công cụ để lựa chọn nhanh
25