You are on page 1of 11

THIẾT KẾ WEB VỚI FRONTPAGE

BIÊN SOẠN: NGUYỄN DUY TƯỞNG

Thiế t kế website dễ dàng với MS Frontpage (cơ bản)

Chuẩ n bi:̣

Máy của bạn cần cài phần mềm Frontpage trong bộ Office
Giao diện gồ m: một Banner, vài hình ảnh, một vài ca khúc yêu
thích, nội dung web... Tự u chung lại Bồ Câu sẽ thự c hiện với chính
website của min ̀ h để mọi người tham khảo nhé.

Bắ t đầ u:

Một Banner đượ c thiết kế chiều rộng khoảng 800 x 150 pixels, một file hình làm nền
Cells có chiều rộng 800 x 4 pixels, hoặc một file hình nhỏ khác làm nề n web, tấ t cả các
hình ảnh phải được đưa vào thư mục ...\My Documents\My Web Sites\images. Nội
dung cần chuẩn bị sẵn lưu bằng file word trong My Web Sites là được.

Việc đầu tiên bạn mở Frontpage lên, trang trắng mặc định có tên new_page_1.htm.
Bạn chưa cần quan tâm, nhấn chuột phải vào nền trang bắt đầu tạo các mục cơ bản
cho website: chọn Page Properties > General thẻ này nếu bạn muốn có âm thanh nổi
lên ngay khi khách mở trang, thì bạn chọn mục Browser tại Background sound, nên
dùng file âm thanh .midi cho nhẹ và chuẩn bị sẵn trong thư mục my web sites.

Tại thẻ Formatting chọn màu nền trang, hoặc có thể dùng file ảnh để làm nền ngay
mục Browser của Background picture. Thẻ Advanced bạn chỉnh phần Magrins =0 hết
thảy, thẻ custom mục add bạn có thể nhập tên và một số từ khoá nội dung web. Sang
thẻ language > chọn Unicode (UTF-8) và nhấn OK.

1
lytuongspk@gmail.com
__________________________________________

Tiếp đến phần tạo bảng cho web cực kỳ quan trọng, nếu bạn muốn định dạng trang
web của mình luôn luôn thể hiện giữa màn hình. Thao tác rất đơn giản, nhấn vào
Table > Insert để tạo bảng cho web, chọn trong size cột, hàng. Phần Alignment chọn
center, Float: Default, đánh dấu kiểm Specify width: gõ vào 800 In pixels. Phần
dưới chọn background picture > Browser tìm hình nền và nhấp OK. Vậy là xong phần
tạo bảng của web, lúc này bạn nên save as bằng tên dễ nhớ như web_mau chảng
hạn.

2
lytuongspk@gmail.com
Tiếp đến bạn chèn banner bằng cách dùng chuột nhấn vào dòng đầu tiên, định dạng
giữa tất cả rồi vào insert > picture > From file, chọn banner có sẵn trong images (Nếu
bạn để hình ảnh nơi khác, khi lên mạng website sẽ không thể hiện hình ảnh vì thiếu
đường dẫn).

Làm chữ chạy Marquee

Ở dòng thứ hai bạn nhấn vào Insert > Insert web Component > chọn Marquee > Finish
bảng mới hiện ra mục text gõ dòng chữ: Welcome to Company (tuỳ ý), nhấn OK.
(Nhấn vào Preview góc trái màn hình để xem trước các hiệu ứng web)

Tạo nút Button tuỳ biến

Đến phần nội dung và danh mục địa chỉ web, bạn cần chia dòng thứ ba thành hai cột
bằng cách nhất chuột vào vùng cần chia, sau đó vào Table > Split Cells > OK. Định
vùng cho ô danh mục bằng cách nhấn chuột phải vào vùng, chọn Cell Propreties >
đánh dấu kiểm vào Specify gõ vào 140pixels > OK. Lúc này ta được phía trái 140
pixels, phía phải 660 pixels.

3
lytuongspk@gmail.com
Vào Format > Paragraph > định dạng Align Right, chọn tất cả các mục khác = 0, chuẩ n
bị làm button cho danh mục web. Chọn Insert > Interactive Button, bảng mới hiện ra
bạn chọn kiểu Button ưng ý, cỡ chữ, size... tuỳ thích! Phầ n text button bạn thay vào
nội dung Trang chủ, mục link bạn gõ vào đầy đủ địa chỉ trang web, nhấ n OK. Bạn làm
tiế p các nút Button khác tiế p theo, phầ n text thay thế tương ứng với điạ chỉ web...

Đế n đây cơ bản bạn đã có một trang mẫu "rỗng", nội dung bây giờ bạn sẽ phải nhập
vào cho đúng và lưu lại bằng cách đặt tên cho file với địa chỉ web sau này thể hiện.

Tạo trang nghe nhạc

Với trang rỗng mẫu ở trên, bạn có thể chèn window media player để nghe nhạc, xem
video... bằ ng cách: đặt chuột nơi muố n chèn > Insert > Web Component > Advanced
Ctrols - ActiveX Ctrols > Next > dùng chuột kéo xuống phía dưới cùng chọn mục
Window Media Player, nế u không thấ y bạn nhấ n vào thẻ Customize > chọn trong
đó và nhấn OK.

Màn hình WMP quen thuộc xuấ t hiện, bạn click đôi vào nó bảng Media Properties hiện
ra, trong phầ n URL bạn dùng bấ t cứ một link nhạc nào còn xài đượ c và dán vào, thí
dụ: http://bocau.com.googlepages.com/KATYKATY.wma các mục Auto, volum... tuỳ
4
lytuongspk@gmail.com
thích chỉnh sửa rồi nhấn OK, (không cầ n phải đưa cả bản nhạc lên web) nế u muố n
bạn copy lời ca khúc dán phía dưới nhìn cho chuyên nghiệp và nhấn Preview để nghe
thử(máy có nối mạng internet). Nhớ lưu lại bằ ng tên amnhac vào trong My web sites.

Kế t nố i với Flash (.swf)

Cũng với trang rỗng đó bạn chèn flash vào bằng cách: (chuẩ n bi ̣ một file .swf) Đặt
chuột nơi muố n chèn, vào Insert > Web Component > Advanced Ctrols > Plug in hoặc
Movie in Flash Format > next chọn file .swf, có thể chỉnh chiều rộng, cao của flash và
nhấ n Preview để xem thử.

Còn nhiều chức năng khác như: mục phản hồi khách thăm web, ô tìm kiế m... các bạn
có thể tìm hiểu thêm. Chắ c rằ ng người mới làm quen việc này sẽ rấ t bỡ ngỡ với việc
đăng ký tên miề n, hosting và xuấ t bản website. Các bạn cứ yên tâm thiết kế web, có gì
chưa hiể u xin mạnh dạn hỏi sẽ có người giúp đỡ bạn.

Tổ ng kế t

Một trang web đơn lẻ không thể thu hút khách tham quan, bạn phải làm nhiều trang
khác nhau sau đó liên kết chúng lại tạo sự đa dạng và gây sự chú ý của mọi người.
Khi họ thăm trang của bạn họ sẽ tìm thấ y những điề u họ mong muố n và hơn thế
nữa, lúc đó mới mong khách hàng của bạn quay trở lại để khám phá những điều mới
mẻ và hấp dẫn do chính bạn tạo nên.

Phím tắt dùng trong MS Fontpage

Phím tắt Chức năng

Ctrl + N tạo mới một trang web

Ctrl + O mở một trang web

Ctrl + F4 đóng một trang web

5
lytuongspk@gmail.com
Ctrl + S lưu một trang web

Ctrl + P in một trang web

F5 cập nhật, làm tươi nội dung một trang web

Ctrl + Tab chuyển đổi qua lại giữa các trang Web

Ctrl + Shift + B xem trang web bằng trình duyệt web

Alt + F4 thoát khỏi Frontpage

Ctrl + Shift + 8 hiển thị những ký tự không được in ra

Ctrl + / hiển thị các thẻ HTML

Ctrl + F tìm kiếm

Ctrl + H thay thế

F7 kiểm tra chính tả một trang web

Shift + F7 tìm một từng đồng nghĩa

Esc bỏ qua một thao tác đang thực hiện

Ctrl + Z, Alt + trở về trạng thái trước khi thực hiện lệnh cuối
BackSpace cùng

Ctrl + Y, Shift + lùi lại trạng thái trước khi thực hiện Ctrl + Z
Alt + BackSpace

Định dạng ký tự và đoạn


Phím tắt Chức năng
Alt + Enter Hiển thị cửa sổ định dạng Font
Ctrl + Shift + F thay đổi kiểu chữ (font)
Ctrl + Shift + P thay đổi cỡ chữ
Ctrl + B định dạng in đậm
Ctrl + U định dạng gạch chân
Ctrl + I định dạng in nghiêng
Ctrl + dấu cộng định dạng chỉ số trên
(bàn phím số)
Ctrl + dấu trừ định dạng chỉ số dưới
(bàn phím số)
Ctrl + Shift + C sao chép định dạng
Ctrl + Shift + V dán định dạng
Ctrl + Shift + Z, xóa định dạng trở về định dạng mặc định

6
lytuongspk@gmail.com
Ctrl + phím cách
Ctrl + E canh giữa đoạn
Ctrl + L canh trái đoạn
Ctrl + R canh phải đoạn
Ctrl + M thụt lề đoạn từ biên trái
Ctrl + Shift + M thụt lề đoạn từ biên phải
Ctrl + Shift + S áp dụng một kiểu cho đoạn
Ctrl + Shift + N áp dụng kiểu mặc định
Ctrl + Alt + 1 áp dụng kiểu Heading 1
Ctrl + Alt + 2 áp dụng kiểu Heading 2
Ctrl + Shift + L áp dụng kiểu danh sách liệt kê
Chỉnh sửa, di chuyển, xóa văn bản, hình ảnh.
Phím tắt Chức năng
Backspace () xóa một ký tự phía trước
Delete xóa một ký tự phía sau con trỏ hoặc các đối tượng
đang chọn
Ctrl + Backspace xóa một từ phía trước
()
Ctrl + Delete xóa một từ phía sau
Ctrl + C, Ctrl + sao chép một nội dung, hình ảnh
Insert
Ctrl + X, Shift + cắt một nội dung, hình ảnh
Delete
Ctrl + V, Shift + dán một nội dung, hình ảnh
Insert
Shift + Enter chèn thêm một dòng trống
Ctrl + Shift + chèn một ký tự không phải là khoảng trống
Phím cách

Thủ thuật thiết kế với FRONTPAGE

01.Kiểm tra các kết nối

Để kiểm tra các đường link trên trang web thiết kế bởi FrontPage, hãy chắc chắn rằng
bạn đang hiển thị trang web ở chế độ FrontPage Explorer. Kích vào nút Hyperlink Status
trên ô Views. Sau vài giây, một danh sách các đường link trong trang web của bạn sẽ
được hiển thị trong phần chính của cửa sổ FrontPage Explorer. Để bắt đầu việc kiểm tra
các kết nối, sử dụng menu Tools > Recalculate Hyperlinks. FrontPage sẽ kết nối vào
Internet và truy cập vào tất cả các site bạn link tới. Quá trình kiểm tra này sẽ hiện ra ở
thanh trạng thái phía dưới cửa số FrontPage Explorer.

02. Hiển thị banner quảng cáo

Hãy marketing cho doanh nghiệp của bạn bằng việc bổ sung Nội dung web tự động
(Automatic Web Content) vào trang web của bạn với bCentral Banner Ad của
Microsoft. Với mỗi hai quảng cáo bạn đăng trên trang của mình, bạn sẽ có được một
banner quảng cáo của chính bạn trên một site của thành viên khác.
7
lytuongspk@gmail.com
Để đưa một Banner Ad vào website của mình từ bCentral, mở hoặc tạo một trang web
với Microsoft FrontPage version 2002 và làm theo các bước sau:

- Trong chế độ hiển thị trang (Page view), chọn Web Component từ menu Insert,
- Dưới mục Component Type, chọn bCentral Web Components,
- Dưới mục Choose a bCentral component: chọn bCentral Banner Ad,
- Kích Finish.

Cửa sổ bCentral Banner Ad Properties sẽ hiện ra. Làm theo các chỉ dẫn trong
LinkExchange Banner Network wizard để trao đổi và tạo ra banner quảng cáo của bạn.

03. Tạo ra một trang điều tra trực tuyến

Hãy sử dụng Microsoft FrontPage 2002 để tạo và thêm một trang điều tra trực tuyến
động với các nút, hộp kiểm và menu sổ có sẵn. Người sử dụng website của bạn có thể
tham gia điều tra từ trình duyệt của họ và có thể xem kết quả từ trang hiển thị tự động
dưới dạng đồ thị. Bạn có thể đơn giản hoá trang điều tra của mình bằng các tệp mẫu
(template) hoặc tạo ra một điều tra mới chỉ trong vài giây với New Survey Wizard. Các
trang điều tra trực tuyến động có thể được thực hiện từ dịch vụ SharePointT Team
Services của Microsoft.

Để tạo ra một trang web điều tra động, bạn có thể sử dụng New Survey Wizard, hãy mở
một website của SharePoint bằng FrontPage 2002 và sửa trực tiếp trên máy chủ này theo
hướng dẫn sau:

- Trong chế độ hiển thị Folder List, chọn Lists,


- Từ menu File, tới New và kích Survey,
- Trong New Survey, chọn New Survey Wizard và kích OK,
- Kích Next và gõ vào tên và mô tả nội dung điều tra,
- Kích Next, chọn nút Add để đưa vào các câu hỏi, dạng thông tin và các câu trả lời lựa
chọn. Kích Finish cho mỗi câu hỏi đặt ra.
- Lặp lại bước thứ 5 cho tới khi tất cả có đủ các câu hỏi, sau đó kích Next,
- Đặt quyền truy nhập là đọc, hiệu chỉnh và thay đổi (read, edit và modify) và lựa chọn
các chế độ hiển thị, sau đó kích Finish.

04. Bổ sung thêm cơ sở dữ liệu

Database Interface Wizard trong Microsoft FrontPage 2002 là một tiện ích cho phép bạn
tạo ra hệ thống cơ sở dữ liệu trong website của mình, bao gồm một cơ sở dữ liệu, mẫu
biểu và các trang web cần thiết. Với một giao diện web của cơ sở dữ liệu của bạn, người
sử dụng có thể hiệu chỉnh hoặc xoá các bản ghi (record) từ cơ sở dữ liệu thông qua trang
web được tạo bởi Database Interface Wizard. Và bạn cũng có thể cho phép người sử
dụng bổ sung thêm các bản ghi và hiển thị các bản ghi có sẵn cũng như đặt các chế độ
lọc cơ sở dữ liệu để nhanh chóng tìm ra dữ liệu cần thiết.

Để bổ sung thêm chức năng cơ sở dữ liệu trong website của bạn bằng FrontPage 2002,
hãy làm theo các bước sau:

- Chọn menu File > New > Page or Web


8
lytuongspk@gmail.com
- Từ cửa sổ Task Pane, chọn Web Site Templates
- Kích vào Database Interface Wizard
- Chọn Add to current Web box và kích OK, sau đó làm theo hướng dẫn để tạo lập cở sử
dữ liệu và trang web.

05. Thay đổi chế độ mặc định

Khi bạn chạy Microsoft FrontPage 2002, chương trình này sẽ tự động mở lại tệp mà bạn
đã làm việc cuối cùng trong phiên hoạt động trước. Bạn có thể bỏ chế độ này như sau:

- Chọn menu Tools > Options


- Kích tab General và bỏ chọn Open last Web automatically when FrontPage starts

Lại nói vế thiết kế web với Front Page


.

Kiểm tra các kết nối


Để kiểm tra các đường link trên trang web thiết kế bởi FrontPage,
hãy chắc chắn rằng bạn đang
hiển thị trang web ở chế độ FrontPage Explorer. Kích vào nút
Hyperlink Status trên ô Views. Sau
vài giây, một danh sách các đường link trong trang web của bạn sẽ
được hiển thị trong phần
chính của cửa sổ FrontPage Explorer. Để bắt đầu việc kiểm tra các kết nối, sử
dụng menu Tools
> Recalculate Hyperlinks. FrontPage sẽ kết nối vào Internet và truy cập vào tất
cả các site bạn
link tới. Quá trình kiểm tra này sẽ hiện ra ở thanh trạng thái phía dưới cửa số
FrontPage
Explorer.
Hiển thị banner quảng cáo
Hãy marketing cho doanh nghiệp của bạn bằng việc bổ sung Nội dung web tự
động (Automatic
Web Content) vào trang web của bạn với bCentral Banner Ad của Microsoft. Với
mỗi hai quảng
cáo bạn đăng trên trang của mình, bạn sẽ có được một banner quảng cáo của
chính bạn trên
một site của thành viên khác.
Để đưa một Banner Ad vào website của mình từ bCentral, mở hoặc tạo một
trang web với
Microsoft FrontPage version 2002 và làm theo các bước sau:
- Trong chế độ hiển thị trang (Page view), chọn Web Component từ menu
Insert,
- Dưới mục Component Type, chọn bCentral Web Components,
- Dưới mục Choose a bCentral component: chọn bCentral Banner Ad,
- Kích Finish.

9
lytuongspk@gmail.com
Cửa sổ bCentral Banner Ad Properties sẽ hiện ra. Làm theo các chỉ dẫn trong
LinkExchange
Banner Network wizard để trao đổi và tạo ra banner quảng cáo của bạn.
Tạo ra một trang điều tra trực tuyến
Hãy sử dụng Microsoft FrontPage 2002 để tạo và thêm một trang điều tra trực
tuyến động với
các nút, hộp kiểm và menu sổ có sẵn. Người sử dụng website của bạn có thể
tham gia điều tra
từ trình duyệt của họ và có thể xem kết quả từ trang hiển thị tự động dưới dạng
đồ thị. Bạn có
thể đơn giản hoá trang điều tra của mình bằng các tệp mẫu (template) hoặc tạo
ra một điều tra
mới chỉ trong vài giây với New Survey Wizard. Các trang điều tra trực tuyến
động có thể được
thực hiện từ dịch vụ SharePointT Team Services của Microsoft.
Để tạo ra một trang web điều tra động, bạn có thể sử dụng New Survey Wizard,
hãy mở một
website của SharePoint bằng FrontPage 2002 và sửa trực tiếp trên máy chủ
này theo hướng dẫn
sau:
- Trong chế độ hiển thị Folder List, chọn Lists,
- Từ menu File, tới New và kích Survey,
- Trong New Survey, chọn New Survey Wizard và kích OK,
- Kích Next và gõ vào tên và mô tả nội dung điều tra,
- Kích Next, chọn nút Add để đưa vào các câu hỏi, dạng thông tin và các câu trả
lời lựa chọn.
Kích Finish cho mỗi câu hỏi đặt ra.
- Lặp lại bước thứ 5 cho tới khi tất cả có đủ các câu hỏi, sau đó kích Next,
- Đặt quyền truy nhập là đọc, hiệu chỉnh và thay đổi (read, edit và modify) và lựa
chọn các chế độ
hiển thị, sau đó kích Finish.
Bổ sung thêm cơ sở dữ liệu
Database Interface Wizard trong Microsoft FrontPage 2002 là một tiện ích cho
phép bạn tạo ra
hệ thống cơ sở dữ liệu trong website của mình, bao gồm một cơ sở dữ liệu,
mẫu biểu và các
trang web cần thiết. Với một giao diện web của cơ sở dữ liệu của bạn, người sử
dụng có thể
hiệu chỉnh hoặc xoá các bản ghi (record) từ cơ sở dữ liệu thông qua trang web
được tạo bởi
Database Interface Wizard. Và bạn cũng có thể cho phép người sử dụng bổ
sung thêm các bản
ghi và hiển thị các bản ghi có sẵn cũng như đặt các chế độ lọc cơ sở dữ liệu để
nhanh chóng tìm
ra dữ liệu cần thiết.
Để bổ sung thêm chức năng cơ sở dữ liệu trong website của bạn bằng
FrontPage 2002, hãy làm
theo các bước sau:
- Chọn menu File > New > Page or Web
- Từ cửa sổ Task Pane, chọn Web Site Templates
10
lytuongspk@gmail.com
- Kích vào Database Interface Wizard
- Chọn Add to current Web box và kích OK, sau đó làm theo hướng dẫn để tạo
lập cở sử dữ liệu
và trang web.
Thay đổi chế độ mặc định
Khi bạn chạy Microsoft FrontPage 2002, chương trình này sẽ tự động mở lại tệp
mà bạn đã làm
việc cuối cùng trong phiên hoạt động trước. Bạn có thể bỏ chế độ này như sau:
- Chọn menu Tools > Options
- Kích tab General và bỏ chọn Open last Web automatically when FrontPage
starts

11
lytuongspk@gmail.com

You might also like