TÀI LIỆU HƯỚNG DẪN Frontpage

N

gày nay, Internet và đặc biệt là World Wide Web đã trở thành một dịch vụ

thông tin gắn chặt với đời sống kinh tế-xã hội. Trong giáo dục, việc truy cập
thông tin và tạo ra thông tin trở thành một công việc thường xuyên của thầy giao
và học sinh Ngoài các chương trình trong MS Office như Word, Excel, chương
trình Frontpage cho phép mọi người dễ dàng tạo ra các trang Web sinh động đầy
màu sắc, đồng thời chuyển tải các trang đó lên mạng Internet một cách thuận
tiện nhanh chóng..


FrontPage Editor
TÀI LIỆU GIẢNG DẠY CHO SINH VIÊN

2

FrontPage Editor


FrontPage Editor

Mục lục
Mục lục......................................................................................................................................................................3
Bắt đầu với FrontPage.................................................................................................................................11
Không gian làm việc FrontPage ....................................................................................................... 13
Menu (Thực đơn).................................................................................................................................................14
Thanh ToolBar.....................................................................................................................................................14
Màn hình soạn thảo..............................................................................................................................................15
Các vùng điều khiển............................................................................................................................................15
Các lệnh đơn giản của FrontPage..................................................................................................... 16

Các lệnh làm việc với tệp (file)...........................................................................................................................16
Các lệnh soạn thảo...............................................................................................................................................16
Ngôn ngữ HTML và tổng quan về trang Web...................................................................................16
Tạo trang mới..................................................................................................................................... 18
Cất nội dung trang hiện thời vào file................................................................................................ 18
Cất nội dung của trang tại FrontPage web hiện thời..........................................................................19
Tạo trang mẫu ................................................................................................................................... 19
Mở một trang trong FrontPage Editor.................................................................................................19
Thuộc tính trang................................................................................................................................ 20
Lựa chọn trên Margin..........................................................................................................................................21
Lựa chọn Custom.................................................................................................................................................21
Làm việc với trang Web................................................................................................................................22
Để chuyển giữa các chế độ hiển thị.....................................................................................................................22
Sự khác nhau giữa tài liệu Word và tài liệu HTML.........................................................................22
Cấu trúc trang Web............................................................................................................................. 23
Địa chỉ trang Web............................................................................................................................... 23
Tạo màu nền, màu text và ảnh nền cho trang..............................................................................24
Định dạng text và đoạn...............................................................................................................................26
Định dạng text.................................................................................................................................... 26
Đặt text lui vào so với lề của đoạn hiện thời (To indent text) ...........................................................27
Đặt lề text lùi ra so với lề của đoạn hiện thời (To outdent text) .........................................................28
Làm việc với Paragraphs.................................................................................................................. 28
Tạo một dòng mới mà không có khoảng trắng với dòng trên đó........................................................................28
Tạo một đoạn mới................................................................................................................................................28
Dóng lề cho đoạn.................................................................................................................................................28
Thay đổi style cho đoạn.......................................................................................................................................29

FrontPage Editor

3

FrontPage Editor
Chèn một ngắt dòng.............................................................................................................................................29
.............................................................................................................................................................................29
Chèn kí tự đặc biệt...............................................................................................................................................29
Làm việc với danh sách.................................................................................................................................31
Tạo danh sách bullet.......................................................................................................................... 32
Tạo danh sách definition.................................................................................................................... 32
Tạo danh sách directory..................................................................................................................... 32
Tạo danh sách menu.......................................................................................................................... 33
Tạo danh sách lồng nhau................................................................................................................... 33
Tạo danh sách có thứ tự.................................................................................................................... 33
Thay đổi thông số của danh sách...................................................................................................... 33
Bookmark và HyperLink..............................................................................................................................34
Các loại siêu liên kết............................................................................................................................................34
Tạo các Text Link............................................................................................................................... 35
Tạo text hyperlink từ FrontPage Explorer...........................................................................................................35
Tạo text hyperlink tới trang mới..........................................................................................................................35
..............................................................................................................................................................................36
Tạo text hyperlink tới một trang trên World Wide Web.....................................................................................36
Tạo text hyperlink tới trang hoặc file trong FrontPage web hiện thời................................................................37
Tạo Picture Link.................................................................................................................................. 37
Tạo picture hyperlink tới một trang mới.............................................................................................................37
Tạo picture hyperlink tới một trang trên World Wide Web................................................................................38
Tạo picture hyperlink tới trang hoặc file trong FrontPage web hiện thời...........................................................38
Thay đổi HyperText và Hypermedia................................................................................................. 38
Lần theo follow text hyperlink trở về sau (forward)...........................................................................................38
Lần theo picture hyperlink về sau (forward).......................................................................................................39
Lần theo một hyperlink ngược về phía trước (backward)...................................................................................39

Xoá và thay đổi các Hyperlink........................................................................................................... 39
Thay đổi text hyperlink........................................................................................................................................39
Thay đổi picture hyperlink..................................................................................................................................40
Xoá text hyperlink...............................................................................................................................................40
Xoá picture hyperlink..........................................................................................................................................40
Kiểm tra các hyperlinks.......................................................................................................................................40
Sửa một hyperlink hỏng.......................................................................................................................................40

4

FrontPage Editor


FrontPage Editor
Sắp đặt lại (recalculate) các hyperlinks...............................................................................................................41
Tạo e-mail hyperlink...........................................................................................................................................42
Tạo hyperlink tới file của Microsoft Word, Excel, hoặc PowerPoint.................................................................43
Bookmark........................................................................................................................................... 43
Tạo Bookmark.....................................................................................................................................................43
Tạo link với BookMark.......................................................................................................................................43
Xoá Bookmark.....................................................................................................................................................44
Chuyển tới bookmark..........................................................................................................................................44
Làm việc với ảnh.................................................................................................................................................45
Các loại ảnh được hỗ trợ trong HTML............................................................................................... 45
Chèn một hình ảnh........................................................................................................................... 46
Chèn ảnh từ một file............................................................................................................................................46
Chèn ảnh từ FrontPage web hiện thời.................................................................................................................46
Chèn ảnh từ World Wide Web............................................................................................................................47
Chèn clip art.........................................................................................................................................................47
Chèn một video clip.............................................................................................................................................47

Cách chèn một video clip từ Microsoft Clip Gallery của Microsoft Office 2000...............................................48
Sửa ảnh.............................................................................................................................................. 48
Cách sử dụng các nút trên thanh công cụ Picture................................................................................................48
Thay đổi cách sắp đặt ảnh....................................................................................................................................49
Tạo thumbnail picture.........................................................................................................................................49
Tuỳ biến video clip..............................................................................................................................................50
Thay đổi kích thước (Resample) file ảnh...........................................................................................................51
Thay đổi kích thước ảnh......................................................................................................................................51
Tạo ảnh trong suốt............................................................................................................................. 51
Chuyển đổi ảnh.................................................................................................................................. 51
Chuyển thành ảnh GIF.........................................................................................................................................51
Chuyển thành ảnh JPEG......................................................................................................................................53
Các chức năng khác .......................................................................................................................... 53
Import ảnh vào FrontPage web............................................................................................................................53
Chỉ định độ ảnh có độ phân giải thấp.................................................................................................................54
Đặt hyperlink ngầm định cho ảnh........................................................................................................................54

FrontPage Editor

5


FrontPage Editor
Tạo text thay thế cho ảnh.....................................................................................................................................55
Hospot......................................................................................................................................................................56
Tạo Hotspot........................................................................................................................................ 57
Tạo Circular Hospot............................................................................................................................................57
Tạo Polygon Hospot............................................................................................................................................57
Tạo Rectangle Hospot.........................................................................................................................................57
Tạo Text Hospot..................................................................................................................................................57

Thay đổi Hospot................................................................................................................................. 58
Chọn hotspot........................................................................................................................................................58
Highlight hotspot.................................................................................................................................................58
Di chuyển hotspot................................................................................................................................................58
Làm việc với Table............................................................................................................................................59
Tạo Table........................................................................................................................................... 59
Tạo bảng trong bảng khác................................................................................................................ 60
Thuộc tính của table.......................................................................................................................... 60
Điều chỉnh bảng................................................................................................................................. 61
Chọn cả bảng hoặc một phần của nó...................................................................................................................61
Chèn một ô...........................................................................................................................................................61
Chèn hàng hoặc cột..............................................................................................................................................62
Phân tách ô..........................................................................................................................................................62
Trộn các ô............................................................................................................................................................62
Dãn ô....................................................................................................................................................................62
Thay đổi kích thước bảng...................................................................................................................................63
Thay đổi kích thước ô..........................................................................................................................................64
Phân bố các hàng và cột đều nhau.......................................................................................................................65
Xoá bảng và một phần của nó.......................................................................................................... 65
Xoá ô, hàng, cột...................................................................................................................................................65
Xoá bảng..............................................................................................................................................................65
Xoá caption của bảng..........................................................................................................................................65
Định dạng table.................................................................................................................................. 65
Thay đổi màu nền của một hoặc nhiều ô.............................................................................................................65
Thay đổi màu nền của bảng.................................................................................................................................66
Bổ sung ảnh nền cho một ô ................................................................................................................................66

6

FrontPage Editor

FrontPage Editor
Bổ sung ảnh nền cho toàn bảng...........................................................................................................................66
Thay đổi màu các đường viền ô...........................................................................................................................67
Thay đổi màu đường viền bảng...........................................................................................................................67
Thay đổi hình dạng của ô....................................................................................................................................67
Thay đổi layout của bảng.....................................................................................................................................68
Các thao tác khác............................................................................................................................... 68
Bổ sung caption cho bảng....................................................................................................................................68
Sửa caption của bảng...........................................................................................................................................68
Bổ sung tiêu đề ô.................................................................................................................................................68
Chuyển bảng thành text.......................................................................................................................................68
Làm việc với Frame...........................................................................................................................................70
Tạo trang frame.................................................................................................................................. 70
Đặc tả trang khởi tạo cho một frame...................................................................................................................71
Cất trang frame....................................................................................................................................................72
Thay đổi bố cục của frame – Chia nhỏ frame – Xóa frame.................................................................................72
Thuộc tính của frame...........................................................................................................................................73
Thay đổi khoảng cách giữa các frame.................................................................................................................74
Tạo viền cho frame..............................................................................................................................................74
Tạo liên kết từ một frame và hiển thị đích liên kết trên một frame khác............................................................74
Làm việc với form ............................................................................................................................................75
Tạo Form............................................................................................................................................ 76
Thêm trường vào form....................................................................................................................... 76
Thuộc tính của form.......................................................................................................................... 77
What to do with form results?.............................................................................................................................77
Sử dụng tạo form bằng Wizard.......................................................................................................... 78
Contact Information: Thông tin để liên hệ với người sử dụng............................................................................79
Product Information: Thông tin sản phẩm..........................................................................................................80

Ordering Information: Thông tin về yêu cầu.......................................................................................................83
Personal Information: Thông tin cá nhân............................................................................................................84
One of several options: Lựa chọn duy nhất trong tuỳ chọn.................................................................................84
Any of several option: Một vài lựa chọn trong tuỳ chọn.....................................................................................84
Boolean: Lựa chọn Có hoặc Không.....................................................................................................................84

FrontPage Editor

7


FrontPage Editor
Date: Kiểu dữ liệu nhập vào là ngày ..................................................................................................................84
Range: Kiểu dữ liệu trên form là một miền các giá trị để chọn lựa....................................................................84
Number: Dữ liệu nhập trên form là số.................................................................................................................84
String: Dữ liệu nhập trên form là dòng text.........................................................................................................84
Paragraph: Dữ liệu nhập là text nhiều dòng........................................................................................................84
Thêm thành phần của form......................................................................................................................85
Hộp text chỉ có một dòng để người sử dụng gõ dữ liệu text trong đó.................................................................85
Một hộp text cuộn nhiều dòng để người sử dụng có thể nhập các dòng text tại đó............................................85
Một nút là radio cho phép người sử dụng chỉ được chọn duy nhất bằng cách kích chuột vào nút này..............85
Nút là check box cho phép người sử dụng chọn nhiều tuỳ chọn bằng cách kích chuột vào nhiều nút check box.
..............................................................................................................................................................................85
Một thực đơn cuộn xuống cho phép người sử dụng có thể chọn từ một hay nhiều dòng thực đơn cùng một thời
điểm......................................................................................................................................................................85
Một nút nhấn cho phép người sử dụng đăng kí form hoặc khởi tạo lại trạng thái ban đầu của form..................85
Một trường ảnh hiển thị một ảnh trên form. Bằng cách kích chuột vào ảnh này, người sử dụng có thể đăng kí
form......................................................................................................................................................................85
Các thao tác với trường...................................................................................................................... 86
Sao chép một trường............................................................................................................................................86

Xóa một trường trên form....................................................................................................................................86
Hiển thị trường xác nhận.....................................................................................................................................86
Text Boxes.......................................................................................................................................... 86
Tạo trường Text Box...........................................................................................................................................86
Tạo trường mật khẩu............................................................................................................................................87
Thay đổi thuộc tính của trường text box..............................................................................................................87
Scrolling Text Boxes........................................................................................................................... 90
Tạo trường scrolling text box .............................................................................................................................90
Thay đổi thuộc tính của trường scrolling text box...............................................................................................90
Hạn chế giá trị nhập tại trường............................................................................................................................90
Check Boxes...................................................................................................................................... 90
Tạo trường check box .........................................................................................................................................90
Thiết lập thuộc tính cho trường check box .........................................................................................................91
Radio Buttons..................................................................................................................................... 91
Tạo trường radio button ......................................................................................................................................91

8

FrontPage Editor


FrontPage Editor
Thay đổi thuộc tính của trường radio-button ......................................................................................................92
Drop-Down Menus.............................................................................................................................. 92
Tạo trường drop-down menu...............................................................................................................................93
Qui định việc nhập dữ liệu cho trường drop-down menu....................................................................................95
Trường Push Buttons và Picture ...................................................................................................... 95
Tạo trường push button .......................................................................................................................................95
Thay đổi thuộc tính của trường push button .......................................................................................................96
Tạo trường Picture...............................................................................................................................................96

Trường ẩn - Hidden ........................................................................................................................... 97
Thay đổi trường ẩn .............................................................................................................................................97
Khái niệm và thuật ngữ................................................................................................................................98
Lab1.................................................................................................................................................. 121
...........................................................................................................................................................................121
Tạo trang chủ ....................................................................................................................................................121
Thực hiện chèn hình vào trang chủ. ..................................................................................................................122
Tạo liên kết từ hình ảnh. ..................................................................................................................................123
Canh giữa các thành phần trên một trang .........................................................................................................125
Lưu trang hiện hành ..........................................................................................................................................125
Các tùy chọn cuả Page View ........................................................................................................... 125
Hiển thị các thẻ HTML trên trang hiện hành. ...................................................................................................125
Hiển thị mã nguồn HTML của trang hiện hành ..............................................................................................125
Chế độ xem trước trang Web (preview) ...........................................................................................................126
Lab2.................................................................................................................................................. 126
Tăng cường các định dạng cho Web site .......................................................................................126
Mở một Web site ..............................................................................................................................................126
Taọ liên kết đến các trang khác ........................................................................................................................126
Tạo Shared Borders và thanh di chuyển (Navigation Bar) .............................................................127
Tạo shared border của Web site .......................................................................................................................128
Thử nghiệm hyperlink trên thanh liên kết ........................................................................................................128
Hiệu chỉnh thanh liên kết (link bar) ..................................................................................................................128
Chủ đề định dạng (theme) .............................................................................................................. 130
Để áp đặt theme đối với Web site .....................................................................................................................130
Hiệu chỉnh Theme ........................................................................................................................... 131

FrontPage Editor

9

FrontPage Editor
Xem trước Web site ....................................................................................................................... 133
Xem trước Web site trong Web browser .........................................................................................................133
Tổ chức file trong web site ............................................................................................................... 134
Di chuyển các file hình ảnh vào thư mục Pictures .........................................................................................134
Tạo thư mục ( folder) mới ...............................................................................................................................135
Xuất bản (publishing) Web site Hsph .............................................................................................135
Xuất bản Web site đang làm việc .....................................................................................................................135

10

FrontPage Editor


FrontPage Editor
T
Bắt đầu với FrontPage

Bắt đầu với
Frontpage
Chào mừng các bạn khi đến với Microsoft FrontPage, một
bộ công cụ tạo và điều hành web site một cách lí tưởng mà
người thiết kế không nhất thiết phải biết những kiến thức về
lập trình, FrontPage có mọi thứ mà bạn cần để thiết kế và
xây dựng trang Web và Web site cho bạn.
FrontPage bao gồm FrontPage Explorer, tại đây, bạn có thể
tạo, thiết kế, quản lí toàn bộ Web site và FrontPage Editor,
nơi mà bạn có thể tạo và sửa đổi các trang Web mà không
cần phải biết ngôn ngữ đánh dấu siêu văn bản (HTML).

FrontPage bao gồm nhiều tính năng hỗ trợ cho việc tạo Web
site một cách dễ dàng nhất, chẳng hạn như bộ thư viện thiết
kế đồ hoạ chuyên nghiệp, một tập hợp đầy đủ các các wizard
và các mẫu để tạo trang và FrontPage web, những phần tử
active cung cấp những chức năng và hàm phức tạp mà không
cần lập trình, và một danh sách các nhiệm vụ dành cho việc
kiểm soát và tạo FrontPage web.



Trong bài này, bạn
học về:



Các đặc điểm cơ bản
của FrontPage



Vùng làm việc của
FrontPage



Một số thành phần màn
hình của FrontPage



Các thao tác với file



Thuộc tính trang Web

Bạn có thể dùng FrontPage Explorer để tạo cấu trúc của Web
site, áp dụng các bố cục đồ hoạ cho trang, tổ chức các file và
folder, nhập và xuất các file, kiểm tra và so sánh các siêu liên
kết, quản trị quyền truy nhập, giám sát các nhiệm vụ, và đặc
biệt là cho phép tiếp cận với FrontPage Editor để thiết kế và
sửa đổi nội dung của trang Web. Bạn có thể dùng FrontPage
Explorer để xuất bản các trang web trên máy tính của mình,
trên một một tổ chức intranet hoặc World Wide Web.
FrontPage Editor hỗ trợ cho bạn việc tạo, thiết kế và sửa đổi
các trang Web. Chẳng hạn như đưa text, ảnh, bảng, các mẫu
biểu và các phần tử khác nữa vào trang web, FrontPage Editor
sẽ hiển thị chúng như khi chúng xuất hiện trên trình duyệt. Mặc
dù là một
công cụ có tính năng hoàn hảo, FrontPage Editor lại rất dễ dàng cho việc sử dụng bởi vì nó
trở nên thân thiện khi có giao diện của một trình xử lí văn bản. Bạn không cần phải học ngôn

FrontPage Editor

11


FrontPage Editor
ngữ HTML để sử dụng FrontPage Editor bởi vì nó có thể tạo mọi thẻ HTML cho bạn, các
thẻ mở rộng như style-sheet, frame, các điều khiển ActiveX.

Nếu bạn muốn soạn trực tiếp các mã lệnh HTML, bạn có thể sử dụng chế độ view HTML
của FrontPage. Trong chế độ này, bạn có thể vào text, soạn các thẻ HTML và các mã kịch
bản, sử dụng các lệnh chuẩn của trình soạn thảo văn bản như cắt, dán, tìm kiếm và thay thế.
FrontPage là một thành viên trong họ sản phẩm của Microsoft Office và chia sẻ nhiều tính
năng của Microsoft Word và Microsoft Excel, chẳng hạn như thư viện ClipArt, kiểm tra lỗi
chính tả và tạo bảng một cách dễ dàng. Ngoài ra, FrontPage cũng quản lí các siêu liên kết
được tạo trong tài liệu Microsoft Office 2000. Dưới đây là một vài đặc điểm của FrontPage
Editor:
- Bạn có thể tạo một trang HTML mơi dựa trên các wizard và template. FrontPage Editor
đưa ra nhiều lựa chọn về định dạng trang, và bạn có thể tạo mẫu thiết kế của chính mình.
- Bạn có thể áp dụng một hay nhiều các bố cụ đồ hoạ của FrontPage, chúng được tạo bởi
các nhà thiết kế chuyên nghiệp, tạo cho bạn các trang web sống động và hấp dẫn. Bạn
cũng có thể đưa vào và thiết kế viền trang, chèn các thanh định hướng liên kết, giúp
người sử dụng lướt trên Web site của bạn.
- Bạn cũng có thể mở bất kì file HTML nào trong FrontPage Editor và toànbộ tag của
chúng sẽ được dịch và hiển thị trên màn hình của FrontPage hoặc mở các file với nhiều
khuôn dạng khác nhau và FrontPage Editor tự động chuyển đổi chúng thành HTML,
chẳng hạn như Microsoft Word, Microsoft Excel, WordPerfect,...FrontPage Editor tự
động nhận ra các siêu liên kết từ tài liệu Microsoft Office 2000.
- Bạn có thể chèn text trong mọi style HTML, tạo các danh sách đa cấp, thay đổi kích
thước và màu sắc của text, áp dụng các khuôn dạng cơ bản cho text. Sử dụng style sheet,
bạn có thể điều khiển lề, khoảng cách giữa các dòng, màu sắc, font và kích thước của
chữ.
- Bạn có thể đưa các ảnh với bất kì định dạng nào, và FrontPage Editor tự động chuyển đổi
chúng sang dạng GIF hoặc JPEG. Kích đúp vào ảnh, bạn có thể sử dụng chương trình tạo
ảnh tương ứng. Bạn cũng có thể tạo ánh xạ ảnh bằng cách thêm các Hotspot trên ảnh
chứa siêu liên kết. Sử dụng các lệnh sửa đổi ảnh, bạn có thể cắt xén, quay, thay đổi kích
thước, tạo ảnh đen trắng, tạo độ sáng tối cho ảnh. FrontPage cũng hỗ trợ một thư viện
phong phú ClipArt, các ảnh, và các video clip.

Bạn có thể tạo form chứa các trường text, check box, radio button, thực đơn drop-down, và
push button. Khi bạn tạo form, điều khiển form mặc định tự động cất thông tin trên form vào
một file hoặc gửi chúng tới một địa chỉ e-mail. Bạn có thể chọn một điều khiển từ tập các
điều khiển form của FrontPage hoặc thêm điều khiển của mình cho form.
Sử dụng các lệnh về tạo bảng, bạn có thể tạo, chèn hàng và cột, dóng lề cho chúng, tạo màu
nền,...
12

FrontPage Editor


FrontPage Editor
Bạn có thể thêm các chức năng mạnh vào trang bằng cách chèn các cấu thành FrontPage.
Chúng sẽ thêm các khả năng tương tác chẳng hạn như thanh định hướng, nhóm thảo luận,
tìm kiếm, và điều khiển form. Ví dụ, cấu thành mục lục (Table of Contents) tự động tạo
outline của FrontPage web với các siêu liên kết đến từng trang...
Bạn có thể tạo một trang frame mới, thay đổi hiển thị của chúng và gán trang khởi tạo cho
mỗi frame. FrontPage hiển thị trang frame của bạn dưới dạng những gì bạn nhìn thấy là
những gì bạn có (WYSIWYG).
Bạn có thể chèn các điều khiển ActiveX, plug-ins, và các Java applet trên FrontPage Editor.
Bạn cũng có thể tiếp cận tới một phiên soạn các kịch bản, tạo và chèn các kịch bản
JavaScript và VBScript.

Không gian làm việc FrontPage
Không gian làm việc của FrontPage bao gồm hai phần chính trên màn hình giao diện của nó,
FrontPage Explorer và FrontPage Editor. Cả hai bao gồm:
- Thực đơn
- Thanh công cụ
- Màn hình soạn thảo
- Các vùng điều khiển

FrontPage Explorer chỉ cho bạn các chế độ hiển thị khác nhau của FrontPage web:
- Folders View
- All Files View
- Navigation View
- Hyperlinks View
- Hyperlink Status View
- Themes View
- Tasks View
Màn hình làm việc của FrontPage Editor:

FrontPage Editor

13


FrontPage Editor



Menu (Thực đơn)
Các thực đơn cơ bản của FrontPage bao gồm:
- File: các lệnh làm việc với file và tổng thể trên trang Web.
- Edit: Các lệnh soạn thảo thông dụng (tương tự các lệnh trong mọi hệ soạn thảo văn bản
khác ngoại trừ một vài lệnh đặc thù).
- View: Hiển thị các thanh công cụ.
- Go: Các lệnh sắp xếp các đối tượng đồ họa tương đối với nhau.
- Insert: Chèn các đối tượng vào trang Web.
- Format: Các lệnh tạo khuôn.
- Tools: Các công cụ và lựa chọn.
- Table: Các lệnh tạo bảng trên trang.

- Frame: Các lệnh làm việc với Frame.
- Windows, Help: Các thực đơn truyền thống của Windows.



Thanh ToolBar
FrontPage có một số ToolBar có thể hiện hoặc ẩn trên màn hình.
Các lệnh trong thực đơn View dùng để làm ẩn hoặc hiện các Toolbar này.
Một hình ảnh đầy đủ của các ToolBar

14

FrontPage Editor


FrontPage Editor



Màn hình soạn thảo
Màn hình soạn thảo nằm ở trung tâm. FrontPage có hai chế độ soạn thảo cho mỗi trang (file)
Web: Normal và HTML.
Chế độ Normal là chuẩn và là mặc định của FrontPage. Trong chế độ HTML, FrontPage cho
phép làm việc trực tiếp với các Tag theo chuẩn của HTML. Kết hợp hài hòa giữa hai chế độ
soạn thảo này sẽ tạo ra các trang Web vừa ý.
Chế độ Preview cho phép xem trực tiếp kết quả của trang Web trên các browser mà không
cần phải có thêm các phần mềm này.



Các vùng điều khiển
Bao gồm các nút điều khiển cửa sổ, thanh cuốn và dòng trạng thái.
Các thành phấn

Mô tả

Page Tab

Dùng để chọn trang làm việc.

Title Bar

Hiển thị tên cuả trang Web và vị trí cuả trang trong
Web site.

Menu Bar

Chứa các thực đơn lệnh.

Ask a Question Box

Hổ trợ người sử dụng khi cần hướng dẫn thực hiện
các thao tác

Close Page

Đóng trang hiện hành.

Scroll Bars

Dùng để di chuyển trên trang hiện hành.

Status Bar

Thanh trạng thái, thường dùng để quan sát đích cuả
các liên kết.

Page View Panes

Các khung hiển thị trang: Gồm 3 chế độ normal, html
và preview.

Progress Indicator

Chỉ thị cuả tiến trình.

FrontPage Editor

15


FrontPage Editor
Estimated Download Time

Thời gian tải trang ước lượng.

Task Pane

Khung tác vụ

Thanh công cụ Standard và
Formatting

Các thanh công cụ thường sử dụng.

Views bar

Thanh chuyển đổi chế độ views.

Các lệnh đơn giản của FrontPage
Các nhóm lệnh sau trên trang soạn thảo FrontPage có ý nghĩa và kết quả tương tự như đối với
các phần mềm soạn thảo khác (ví dụ WinWord, Lotus WordPro, ....).


Các lệnh làm việc với tệp (file)
Các lệnh trên thực đơn File hoặc trên Standard Toolbar: New, Open, Close, Save, Save As,
Page Setup, PrintPreview, Print.



Các lệnh soạn thảo
Các lệnh soạn thảo cơ bản trên thực đơn Edit: Copy, Cut, Paste, Clear (delete), Select All,
Find, Replace

Ngôn ngữ HTML và tổng quan về trang Web
Thông tin chính mà chúng ta truy nhập trên dịch vụ World Wide Web là các trang Web.
Trang là tài liệu cơ bản trên dịch vụ World Wide Web. Chúng được viết theo một ngôn ngữ
gọi là ngôn ngữ đánh dấu siêu văn bản Hypertext Markup Language –HTML. Một trang
HTML bao gồm text và các tag của HTML được nhúng trong tài liệu, các tag này cung cấp
thông tin về cấu trúc trang, hình thức hiển thị và nội dung của nó. Thực chất, một tài liệu

HTML là một file được lưu dưới dạng .htm hoặc .html mà nội dung của nó tuân theo nguyên
tắc của ngôn ngữ HTML.
Ngôn ngữ HTML (Hyper Text Markup Language) là tập hợp các nguyên tắc và qui định
dùng để mô tả và thể hiện các trang Web. Các qui tắc này được thể hiện thành những "Tag"
được chèn vào các vị trí thích hợp của trang Web. Các tag này sẽ qui định cách mà dữ liệu
sẽ hiển thị trên trình duyệt. Một tag HTML bao gồm hai phần: phần mở và phần đóng tag
(phần này là tuỳ chọn).
Dữ liệu nằm sau phần mở sẽ chịu ảnh hưởng của tag, có nghĩa là nó sẽ xuất hiện với hiệu
ứng phụ thuộc vào các thuộc tính đi kèm với tag.

16

FrontPage Editor


FrontPage Editor
Một vài tag HTML xây dựng một đặc tả về cấu trúc các phần tử của trang, chẳng hạn như
bảng và mẫu biểu, những phần tử này được tạo bởi từ nhiều phần tử. Trình duyệt Web
(chương trình hiển thị các trang Web) sử dụng những thông tin này để nhận ra cách mà dữ
liệu hiển thị dựa trên mối liên hệ giữa các phần tử này. Ví dụ, tag HTML đặc tả bảng miêu tả số
dòng, số cell trên một dòng,...

Cáctag
tagmiêu
miêutảtảhàng,
hàng,cột
cột
Các
của
bảng

của bảng

Hiển thị của tag bảng trên trình duyệt
Các tag HTML cũng cung cấp các thuộc tính đi kèm với giá trị. Ví dụ, tag dùng để chèn ảnh
tại trang có một thuộc tính chỉ ra tên của file ảnh cần chèn. Một vài thuộc tính cung cấp các
giá trị tham chiếu về sự hiển thị của phần tử trên trang. Ví dụ, bảng có những thuộc tính mô
tả độ dày và khoảng cách giữa các ô...
Để trợ giúp bạn thiết kế trang được nhanh chóng, FrontPage hỗ trợ hơn 50 bài trí thiết kế chuyên
nghiệp, chúng sẽ giúp bạn trang trí những trang Web của mình bằng những phần tử có sẵn như
bullet, font, ảnh, thanh định hướng...

FrontPage Editor

17


FrontPage Editor
Tạo trang mới
1. Tại FrontPage Editor, thực hiện lệnh File/New. Hiển thị hộp hội thoại New.
2. Chọn Page, chọn template hoặc wizard để tạo trang mới, mẫu thu nhỏ của chúng xuât
hiện trên vùng Preview.

Mẫu tương
ứng xuất hiện
trên Preview

3. Kích OK.

Cất nội dung trang hiện thời vào file
1. Tại FrontPage Editor, thực hiện lệnh File/Save As.

2. Kích nút File

.

3. Tại hộp hội thoại Save As, chọn ổ đĩa và thư mục để cất trang.

Chọn vị trí để cất
nội dung trên trang

4. Gõ tên file trong hộp File Name và kích OK.
5. Kích OK khi xuất hiện hộp hội thoại với danh sách các phần tử như tranh ảnh, âm thanh, các
điều khiển ActiveX và những phần tử khác chứa trong trang.

18

FrontPage Editor


FrontPage Editor
Cất nội dung của trang tại FrontPage web hiện thời
1. Nếu trang được mở từ web hiện thời hoặc từ World Wide Web, tại FrontPage Editor,
thực hiện lệnh File/Save. Nếu trang được mở từ một file, để cất dưới tên khác, thực hiện
lệnh File/Save As.
2. Nếu là lần đầu cất trang tại FrontPage web, gõ tiêu đề trang tại Title.
3. Gõ URL tương đối tới gốc của FrontPage web đang mở hiện thời, hoặc chấp nhận URL
mặc định của FrontPage. Ví dụ, nếu bạn gõ tại URL là music/index.htm, trang sẽ được
cất tại folder Music là con trực tiếp của folder gốc của FrontPage web hiện thời và kích
OK.

Vào tiêu đề và

URL tương đối
của trang

4. Kích OK khi xuất hiện hộp hội thoại với danh sách các phần tử như tranh ảnh, âm thanh, các
điều khiển ActiveX và những phần tử khác chứa trong trang.

Tạo trang mẫu
Trong FrontPage Editor, bạn có thể cất một trang dưới dạng mẫu. Sau đó, mẫu này sẽ được hiển thị
cùng với mẫu trang FrontPage chuẩn tại hộp hội thoại New.
5. Thực hiện lệnh File/Save As.
6. Chọn As Template.
7. Tại hộp hội thoại Save As Template, gõ tiêu đề trang tại Title, tên trang tại Name, đặc tả
ngắn cho trang tại Description.
8. Kích OK.

Mở một trang trong FrontPage Editor
9. Thực hiện lệnh File/Open.
10. Tại hộp hội thoại Open, thực hiện một trong các bước dưới đây:
- Mở một trang trên FrontPage web hiện tại, kích chọn một trang. Để xem nội dung của folder,
kích đúp vào folder này và chọn trang trong đó. Kích OK.
- Mở một trang từ hệ thống file của bạn, kích nút File, và chọn file mà bạn muốn từ hộp
hội thoại Select File.

FrontPage Editor

19


FrontPage Editor
- Mở một file từ World Wide Web, chọn nút World Wide Web

. FrontPage khởi tạo trình
duyệt Web, chuyển đến trang mà bạn muốn mở và trở lại ứng dụng FrontPage. Vị trí của
trang mà bạn đã xem được hiển thị tại URL của hộp hội thoại Open. Kích OK để mở
trang.

Thuộc tính trang
Thực hiện lệnh File/Page Properties. Xuất hiện hộp hội thoại

Các tuỳ chọn của hộp hội thoại Page Properties:
Tại General:
- Location: URL đầy đủ của trang. Nếu trang được mở từ một file, URL bắt đầu bởi
“File://”. Nếu trang chưa được cất, URL sẽ là “FrontPage:///Editor/New Page n.htm.”
- Title: Tiêu đề của trang.
- Base Location: URL cơ sở của trang.
- Default Target Frame: Nếu bạn muốn mọi đích liên kết của trang được hiển thị trên
một frame khác của một trang frame, gõ tên của đích frame mặc định, hoặc kích vào
nút Target Frame để chọn frame đích.
- Nếu siêu liên kết không được đặc tả tới một frame đích khác, trang đích của siêu liên
kết sẽ được hiển thị tại frame đích mặc định.
Background Sound:
- Location: Gõ tên của file âm thanh nền cho trang. Trình duyệt Web sẽ chạy file này
khi trang được hiển thị. Bạn có thể đặc tả một file trên FrontPage web hiện tại hoặc từ
hệ thống file của bạn.
- Browse: Kích nút này để duyệt file trong FrontPage web hiện tại hoặc tại hệ thống
file.
- Loop: Gõ số lần lặp lại của file âm thanh này.
- Forever: Chọn để đặt chế độ chạy file âm thanh cho đến khi trang không được hiển thị
nữa.

20

FrontPage Editor


FrontPage Editor
- Style: Kích nút này để thay đổi thuộc tính style sheet cho phần tử được chọn. Khuôn
dạng của Style-sheet cho phép điều khiển khoảng cách, lề, font, màu sắc mà với
những thuộc tính của HTML cơ bản, bạn không thể điều khiển được.


Lựa chọn trên Margin
Đặc tả các thuộc tính để điều khiển lề của trang. Nếu trang hiện thời sử dụng chung đường
viền, lề thiết lập được áp dụng cho những cạnh chung đường viền (thay cho cạnh của trang).
Specify Top Margin: Chọn lề trên và lề dưới cho trang bằng điểm.
Specify Left Margin: Chọn lề trái và lề phải cho trang bằng điểm.



Lựa chọn Custom
Tại đây thiết lập các tag meta (biến hệ thống và biến được định nghĩa bởi người sử dụng),
chúng sẽ có ảnh hưởng tới trang hiện thời.
System Variables (HTTP-EQUIV): Phần này liệt kê các tag meta dùng thuộc tính HTTPEQUIV như một phần cặp tên và giá trị. Những tag này cung cấp những giới thiệu đặc biệt
tới trình duyệt, chẳng hạn như thời hạn hiển thị hoặc nạp lại của trang.
- Name: Tên của tag
- Value: Giá trị tương ứng với tag
- Add: Kích nút này để thêm tag mới
- Modify: Kích nút để sửa thuộc tính của tag được chọn
- Remove: Kích nút này để bỏ tag được chọn
- User Variables: Phần này liệt kê các tag meta do người sử dụng định nghĩa.

FrontPage Editor

21


FrontPage Editor
T
Làm việc với trang Web

Làm việc với
trang web
FrontPage Editor là công cụ giúp cho việc tạo các trang
Web một cách dễ dàng mà không đòi hỏi ở bạn kiến thức
về ngôn ngữ HTML. Trang Web là những đơn vị thông tin
cơ bản mà người dùng truy cập trên dịch vụ WWW, chúng
được tạo ra dựa theo ngôn ngữ đánh dấu siêu văn bản
HTML. Chính vì vậy, để tạo giao diện thuận tiện cho người
thiết kế khi tạo trang Web, FrontPage Editor cung cấp các
chế độ hiển thị khác nhau, bao gồm:



•

Normal: Đây là chế độ hiển thị nội dung của trang Web
khi bạn đang tạo và chỉnh sửa nó

•

HTML: Chế độ hiển thị trang Web dưới các mã tag

HTML

•

Preview: Xem trước nội dung của trang Web ngay tại ứng
dụng FrontPage mà không nhờ trình duyệt



Trong bài này, bạn
học về:



Các chế độ hiển thị
của Front-Page Editor



Sự khác nhau giữa
Word page và HTML
page



Thay đổi một số thuộc
tính của trang

Để chuyển giữa các chế độ hiển thị
Kích chuột vào nút tương ứng phía dưới ở màn hình

FrontPage Editor.

Sự khác nhau giữa tài liệu Word và tài liệu HTML
Việc tạo các trang Web tại chế độ hiển thị Normal sẽ trở
nên thân thiện khi bạn đã sử dụng họ sản phẩm soạn thảo
trong bộ Office của Microsoft. Thuật ngữ “WYSIWYG”
chứng tỏ phần nào việc dễ sử dụng các công cụ của
FrontPage Editor trong việc thiết kế các trang Web.
Với giao diện không khác gì lắm màn hình soạn thảo thông
thường (với những ứng dụng kiểu như Microsoft Word),
bạn hoàn toàn có thể tạo các trang HTML dễ dàng như việc
tạo trang soạn thảo vậy.
Tuy việc hiển thị nội dung của trang HTML và trang soạn thảo Word trong hai ứng dụng
tương ứng là Word và FrontPage Editor không khác nhau lắm, nhưng về thực chất thì thông
tin chứa đựng trong chúng là khác hẳn. Những trang tài liệu được tạo bởi Word bao gồm thực
sự những thông tin mà tài liệu đó sẽ hiển thị. Chúng được lưu dưới một khuôn dạng riêng,
22

FrontPage Editor


FrontPage Editor
phân biệt với các tài liệu của ứng dụng khác, tại đó, thông tin được lưu sẽ có cấu trúc liên quan
với nhau một cách nhất định. Chẳng hạn, trang tài liệu Word hiển thị một bức ảnh (không có
liên kết) cùng với text đi kèm, tài liệu đó được cất dưới một file, trong file này, ngoài những
thông tin đặc trưng cho khuôn dạng của file Word (thường nằm trong phần đầu của file) còn có
những thông tin về text và ảnh đã nói ở trên. Và như vậy, dung lượng của file Word cũng phụ
thuộc vào độ lớn các thông tin mà chúng hiển thị.
Với tài liệu HTML thì khác. Thực chất, tài liệu HTML là một file dạng text, bạn có thể xem
nội dung của nó bằng các ứng dụng soạn thảo thông thường. Nội dung của nó khi đọc bởi

các trình soạn thảo dạng này sẽ bao gồm các tag HTML đi kèm với nó là text (sẽ được hiển
thị) và các thông số cùng các giá trị đi kèm. Những cặp thuộc tính và giá trị này bổ sung cho
tag, và toàn bộ thông tin này sẽ được trình duyệt giải mã để hiển thị dữ liệu theo cách mà tài
liệu HTML chỉ định.
Vậy, sự khác biệt lớn giữa tài liệu Word và tài liệu HTML là ở chỗ, trang Word thực sự
chứa thông tin mà nó hiển thị, còn trang HTML chỉ chứa những thông tin dạng text và chỉ ra
cách mà dữ liệu được hiển thị trên trình duyệt. Và vì vậy, trình duyệt chỉ hiểu khuôn dạng của tài
liệu HTML mà thôi.

Cấu trúc trang Web
Trang Web bao gồm những phần sau:
Phần đầu trang: Thường nằm trong cặp tag <HEAD> và </HEAD>. Phần này thông
thường được tự động tạo khi thiết kế trang. Tuy nhiên, bạn có thể thay đổi các thông số của
trang tại phần này bằng cách dùng lệnh File/Page Properties và chọn General, Language,
hoặc Custom để vào các thông số, các tag cần thiết (mà FrontPage chưa hỗ trợ).
Phần thân: Nằm trong cặp tag <BODY> và </BODY> của HTML. Tương ứng với phần
này của tài liệu HTML, chúng được hiển thị tại chế độ Normal gần giống như cách mà
chúng hiển thị trên trình duyệt.
Phần không có ở HTML chuẩn: Đây là những chương trình, những kịch bản, những plugin được nhúng trong tài liệu HTML. Chúng hỗ trợ cho việc tạo các trang Web động và tất nhiên
sẽ không được nhắc đến kĩ trong tài liệu này.

Địa chỉ trang Web
Một trang Web là một tài nguyên trên dịch vụ WWW của Internet, chính vì vậy, để truy cập
đến nó, bạn phải biết:
- Vị trí của máy chủ chứa trang Web này, thực chất đây chính là địa chỉ IP của Web site
- Đường dẫn đến trang web tại máy chủ này
- Tên giao thức của dịch vụ mà bạn đang truy nhập: http
Khuôn dạng tổng quát của địa chỉ một trang Web như sau:
http://địa chỉ IP của máy chủ/tên thư mục/.../tên tài liệu HTML

FrontPage Editor

23


FrontPage Editor

Chẳng hạn: />
Tạo màu nền, màu text và ảnh nền cho trang
Thực hiện các bước sau:
11. Thực hiện lệnh Format/Background.

- Specify Background and Colors: Phần này chứa các thông tin điều khiển màu nền cho
trang.
- Background picture: Chọn check box này để sử dụng một ảnh nền. ảnh sẽ trải theo dạng
lát gạch trên nền trang. Gõ tên của đường dẫn đến file ảnh hoặc kích nút Browse để tìm
file này.
- Watermark: Chọn để hiển thị ảnh như một “watermark”.
- Properties: Kích nút này để mở hộp hội thoại Picture Properties để xem hoặc sửa thuộc
tính của ảnh nền. Bạn chỉ có thể xem thuộc tính của ảnh tại FrontPage web hiện tại mà
thôi.
- Background: Đặc tả màu nền của trang bằng cách chọn màu từ danh sách. Để chọn một
màu chưa xuất hiện trên danh sách, kích Custom và chọn một màu tại hộp hội thoại
Color.
Chú ý: Bạn có thể kết hợp ảnh nền với màu nền. Nếu ảnh nền có màu trong, màu nền sẽ hiển
thị qua ảnh.
- Text: Đặc tả màu của text trên trang bằng cách chọn màu từ danh sách.
- Hyperlink: Đặc tả màu của siêu liên kết trên trang.
24

FrontPage Editor


FrontPage Editor
- Visited Hyperlink: Đặc tả màu liên kết đã được tham chiếu đến.
- Active Hyperlink: Đặc tả màu của siêu liên kết đang kích hoạt.
- Get Background and Colors From Page: Chọn nền và màu từ một trang khác bằng cách
gõ đường dẫn đến trang tại đây hoặc kích nút Browse để tìm trang.

FrontPage Editor

25