THIẾT kế WEB với FRONTPAGE

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 minh để 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 trong My Web Sites là được. Việc đầu tiên bạn mở Frontpage lên, trang trắng mặc định có

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 mình để 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

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

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

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 ̣a 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ỳ

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

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 +

BackSpace

trở về trạng thái trước khi thực hiện lệnh cuối cùng

Ctrl + Y, Shift +

Alt + BackSpace

lùi lại trạng thái trước khi thực hiện Ctrl + Z

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

Ctrl + Shift + F thay đổi kiểu chữ (font)

Ctrl + Shift + P thay đổi cỡ chữ

Ctrl + dấu cộng

Ctrl + dấu trừ

Ctrl + Shift + C sao chép định dạng

Ctrl + Shift + V dán định dạng

Ctrl + phím cách

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

đang chọn Ctrl + Backspace

() xóa một từ phía trước

Ctrl + C, Ctrl +

Ctrl + X, Shift +

Ctrl + V, Shift +

Ctrl + Shift +

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

Để đư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

- 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

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