Tạo trang Web

Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close
Thiết kế Web site
trên FrontPage
Nguyễn Đình Thắng
TTGDTX tỉnh Phú Thọ
Email:
Điện thoại: 0210.843726
2
Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close
I. Giới thiệu về Website
II. Khởi động và thoát khỏi chương trình FrontPage
III. Cấu tạo và giao diện cửa sổ chương trình FrontPage
Chương 1:
Cấu tạo và giao diện cửa sổ
chương trình FrontPage
3
Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close
1- Website là gì
- Là tập hợp các trang web do người làm việc tạo nên. Các trang web
được xây dựng bằng các trình soạn thảo riêng.
- Mỗi trang web có một địa chỉ Internet riêng gọi là URL
- Các trang web được kết nối với nhau bằng các siêu liên kết
- Website được đặt trên các máy phục vụ web (dịch vụ web server)
- Khi vào Internet người sử dụng truy cập vào các máy phục này
2- Xây dựng trang web
- Người làm việc xây dựng các trang web bằng các chương trình soạn
thảo riêng
- FontPage là một trình soạn thảo để xây dựng trang web
I. Giới thiệu về Website
4
Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close

II. Khởi động và thoát khỏi chương trình FrontPage
1/Khởi động:
- Start – Program
- Microsoft FrontPage
2/Thoát:
- Nhấn nút góc phải trên
- Hoặc File - Exit
- Hoặc Alt + F4
Nhấn nút X
góc phải
trên
Microsoft
FontPage
Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close
5
III. Cấu tạo và giao diện cửa sổ chương trình FrontPage
Chế độ
cửa sổ
soạn thảo
Tên file
đang xây
dựng
Thanh
Pictures
Phần soạn
thảo nội
dung
Thanh
tiêu đề
Menu

lệnh
Thanh
Standa
Formatting
Hộp đk
cửa sổ
Chế độ cửa
sổ soạn thảo
HTML
Hiện thị nội
dung đã
soạn thảo
6
Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close
Menu và Các thanh công cụ
Thao tác
nội dung
Các hiển
thị
Thao tác
chèn
Các định
dạng
Công cụ
hỗ trợ
Bảng
biểu
Cửa sổ
soạn
thảo

Mở file
mới
Lệnh
ghi
Cây và
cửa sổ con
Xem trình
duyệt
Sao chép
địn dạng
Tạo các
thành phần
Mở file
đã có
Đưa lên
web server
Lệnh
in
Chính
tả
Di chuyển
sao chép
Bảng
biểu
Chèn
tranh ảnh
Liên
kết
kiểu định
dạng

Font
chữ
cỡ
chữ
Kiểu
chữ
Canh
lề
Số thứ tự
tự động
Lý tự đầu
các đoạn
Tạo
nền
Màu
chữ
Dịch chuyển nội dung
về bên trái, phải
7
Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close
I. Mục đích và yêu cầu bố cục của website
II. Tạo các thư mục lưu trữ trang web
III. Bảng biểu và tranh ảnh trong cấu trúc trang web
Chương 2:
Chuẩn bị xây dựng các trang
web trên FrontPage
8
Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close
I. Mục đích và yêu cầu bố cục của website
1- Mục đích xây dựng web

- Mở rộng quan hệ trong hợp tác phát triển
- Trao dổi thông tin
- Quảng cáo, giới thiệu sản phẩm
- Hỗ trợ đối tác, khách hàng …
2- Yêu cầu bố cục của website
- Bố cục chung
+ Trang tiêu đề
+ Trang chủ
+ Các trang khác
- Số trang
- Nội dung bố cục từng trang
9
Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close
Yêu cầu bố cục của website ( tiếp )
T r a n g t h o
T r o n g n u o c
N g o a i n u o c
T r a n g t i n
L i e n k e t
K i e n t h u c
H e t h o n g
u n g d u n g
P h a n m e m
T i n h o c
P h a n m e m
T i e u d u n g
C o n g n g h i e p
S a n p h a m
D a n h n g o n
T r a n g c h u

C ¸ c t h « n g t i n q u ¶ n g b ¸ g i í i t h i Ö u
Ví dụ: Sơ đồ bố cục website
1
0
Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close
II. Tạo các thư mục lưu trữ trang web
1- Tạo thư mục chính lưu trữ trang web
- Mở ổ đĩa muốn lưu trang các trang web ( ví dụ ổ D: )
- Tạo thư mục chính để lưu các trang web (ví dụ: HTML)
+ Kích chuột phải vào nền cửa sổ
+ Chọn New - Folder - đăt. tên ( HLML ) - nhấn Enter
Thư mục
HTML
1
1
Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close
2- Tạo các thư mục con lưu trữ trang web
- Trong cửa sổ thư mục chính ( HTML ) tạo các thư mục sau:
+ Anhdong: Để lưu ảnh động
+ Anhtinh: Để lưu tranh ảnh tĩnh
+ Nutweb: Để lưu các nút
+ ungdung: Để lưu các phần mềm ứng dụng
1
2
Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close
III. Bảng biểu và tranh ảnh trong cấu trúc trang web
1- Cách tạo bảng biểu
- Đặt dấu nhắc nơi tạo - Table trên menu - chọn Insert - table
Chọn số
dòng

Chọn số
cột
Vị trí
bảng biểu
Nét khung
của bảng
Khoảng
cách giữa
các ô
Khoảng
cách nội
dung đến
cạnh ô
Độ rộng
cột
Kích thước
bảng biểu
1
3
Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close
2- Công cụ thiết lập lại thông số bảng biểu
- Đánh dấu bảng biểu - Table - properties - Table
Vị trí
bảng biểu
Nét viền
của bảng
Khoảng cách
giữa các ô
Nền của
bảng

Độ rộng
cột
Kích
thước cột
Khoảng cách nội
dung đến cạnh ô
Kích thước
dòng
Dùng hình ảnh
làm nền của
bảng
màu viền
khung bảng
Chuyển bảng
biểu sang văn
bản và ngược lại
1
4
Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close
3- Sử dụng công cụ bảng biểu
- Chọn Table xuất hiện menu công cụ
Bút
kẻ
Chèn
dòng
Chèn
cột
Chia cột,
dòng
Nội dung

ở giữa
Chia đều
dòng, cột
Xoá nét
kẻ
Xoá
các ô
Sát
nhập ô
Nội dung
lên trên
Màu
nền
Kích thước
cột đủ ký tự
Bút
kẻ
Chia cột,
dòng
Sát
nhập ô
Xoá
các ô
Chia đều
dòng, cột
Kích thước
cột đủ ký tự
Kiểm tra và
thiết lập lại
Chèn

bảng biểu
1
5
Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close
4. Chuẩn bị hình ảnh tĩnh và động đẻ đưa vào trang web
a- Các File tranh, ảnh động và tĩnh
- Các file tranh ảnh có đôi là GIF, JPG, ảnh động có đuôi là GIF
- File có đuôi là PNG hỗ trợ nhiều chương trình, nhưng không tất cả
1
6
Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close
b- Sao chép theo lựa chọn các tranh, ảnh vào 2 thư mục
1- Kích đúp bức
tranh, ảnh muốn
sao chép trong
thư mục nguồn
- Bức tranh, ảnh được mở
trong Internet Explorer
2- Kích chuột phải
vào bức tranh, ảnh -
Chọn save picture
3- Mở vào thư mục
ảnh tĩnh để lưu lại
4- Đặt tên ở File name
5- Save
- Cách sao chép bức tranh động,
tĩnh khác tương tự
1
7
Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close

c- Sao chép theo trực tiếp các tranh, ảnh vào 2 thư mục
- Mở ổ đĩa – thư mục có tranh ảnh muốn lấy – sao chép chúng vào
2 thư mục Ảnh tĩnh, Ảnh động
- Cách sao chép
này lỗi, thì phải
dùng cách b-
1
8
Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close
5. Sửa chữa tranh ảnh tĩnh để đưa vào trang web
- Sử dụng trình sửa ảnh PhotoFiltre
Tranh ảnh
trong thư mục
Công cụ sửa
Công
cụ
màu
Ẩn hiện t.mục ảnh
Xoay
hình
Khung
hình
Độ
ảo
Cắt
xén
Kích
thước
Ảnh
sửa

Độ
sáng
và độ
tương
phản
Xem
thử
1
9
Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close
I. Định dạng mô hình cấu trúc trang web
II. Xây dựng cấu trúc cho file tiêu đề
III. Xây dựng cấu trúc file nội dung
Chương 3:
Xây dựng bố cục trang web
trên FrontPage
2
0
Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close
I. Định dạng mô hình cấu trúc trang web
1- Chọn mô hình trang web theo mẫu
a- Chọn mẫu trang web
- File - New - Trong New ta chọn kiểu ( ví dụ: Header )
2.
New
1.
File
3.
Page
5. Chọn

kiểu
4. Chọn
Frames Pages
6.
OK
2
1
Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close
b- Chọn thiết lập xây dựng trang web
- Chọn thiết lập ( nên chọn New để tạo mới - rồi nhấn Save )
Chọn Set để tạo liên
kết đến mẫu đã có
Chọn New để
tạo mới
Chọn New để
tạo mới
Chọn Set để tạo liên
kết đến mẫu đã có
2
2
Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close
c- Lưu lại mô hình cấu trúc trang web
- Chọn thư mục chính đã tạo để lưu lại ( Tên cho file tiêu đề )
- Ví dụ: Đặt tên file là Header ở dòng Name - Nhấn Save
2
3
Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close
Lưu lại mô hình cấu trúc trang web ( tiếp )
- Chọn thư mục chính đã tạo để lưu lại ( Tên cho file nội dung )
- Ví dụ: Đặt tên file là center ở File Name - Save

2
4
Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close
Lưu lại mô hình cấu trúc trang web ( tiếp )
- Chọn thư mục chính đã tạo để lưu lại ( Tên cho file trang chủ )
- Ví dụ: Đặt tên file là trangchu (index) ở dòng Name - Nhấn Save
- Tất cả
các file
được lưu
kiểu file
có đuôi
là HTM
2
5
Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close
d- Điều chỉnh các frame
- Kích phải chuột vào frame muốn điều chỉnh – frame propertes
2. Ẩn
thanh cuốn
1. Từ khung
đến nội dung
5. Hiện, ẩn
khung
4. Khoảng cách
giữa các fame
3. Chọn
6. Chọn
7. Chọn
Chọn nếu cho người
duyệt chỉnh khung