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

Giới thiệu FrontPage 2003:Những nội dung chính: - Khởi động FrontPage - Màn hình làm việc của FrontPage - Giới thiệu các thanh công cụ chính Các chế độ thiết kế của FrontPage - Các chế

Trang 2

Mục tiêu:

- Thiết kế một web site đơn giản ở chế độ design

của FrontPage 2003

- Vài ví dụ mẫu:

- Bài tập 1: trang web đầu tiên

- Bài tập 2 3: mục tiêu làm quen

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

Trang 3

I Giới thiệu FrontPage 2003:

Những nội dung chính:

- Khởi động FrontPage

- Màn hình làm việc của FrontPage

- Giới thiệu các thanh công cụ chính Các chế độ thiết kế của FrontPage

- Các chế độ thiết kế của FrontPage

Trang 4

Bấm nút X trên thanh tiêu đề của FP

- Đóng 1 trang mà không thoát FP: bấm nút X tại

phần ngoài bên phải tên trang web

Trang 5

2 Màn hình làm việc của FrontPage

- Sau khi khởi động, màn hình

của FP hiện ra, sẵn sàng

để làm việc

- Để tạo một trang web mới,

bấm nút New, chọn tiếp

Blank Page ở Task Panel

Blank Page ở Task Panelbên khung trái

Trang 6

3 Các thanh công cụ của FrontPage

- Chọn hoặc bỏ chọn trước tên các

thanh công cụ để hiện hoặc ẩn chúng.

- Các thanh công cụ hữu ích: Standard,

Trang 7

3 2 Thanh công cụ Standard

Là thanh công cụ được dùng

nhiều nhất, tập hợp các

nút lệnh quan trọng trong việc quản lý:

- Tập tin: tạo mới, lưu trữ, mở, sao chép…

Kiểm tra lỗi chính tả in ấn xem kết quả trang web đã thiết kế

- Kiểm tra lỗi chính tả, in ấn, xem kết quả trang web đã thiết kế

- Các thao tác soạn thảo đơn giản: sao chép, cắt, dán các đối tượng

- Chèn các thành phần đặc biệt chèn bảng siêu liên kết hình ảnhChèn các thành phần đặc biệt, chèn bảng, siêu liên kết, hình ảnh …

Trang 8

3 3 Th h ô F tti

3.3 Thanh công cụ Formatting

Là thanh công cụ dùng để định

dạng nhanh văn bản:

- Kiểu văn bản, các loại font chữ, kích thước chữ dùng trong thiết kế

- Các dạng nghiêng, đậm, gạch dưới, canh lề văn bản

- Tạo số hoặc kí tự đặc biệt đầu mỗi đoạn

Trang 9

Là thanh công cụ dùng để hiệu chỉnh các đối tượng hình ảnh:

- Chèn hình ảnh, nhập nội dung trực tiếp lên trên ảnh

- Lật ảnh ngang, sang trái, phải, xoay ảnh

- Các hiệu ứng cơ bản: làm mờ hoặc trong suốt, độ sáng, tối, độ tương

phản của ảnh

- Cắt hình ảnh, định kích thước ảnh, tạo bản đồ liên kết ảnh…

Trang 10

3.5 Thanh công cụ Table

Là thanh công cụ rất quan trọng trong thiết kế web, ngoài chức năng kẻ

bảng và thực hiện các thao tác trực tiếp trên bảng nó còn dùng để

bảng và thực hiện các thao tác trực tiếp trên bảng, nó còn dùng để định vị vị trí đối tượng trên trang web:

- Giúp kẻ bảng nhanh, thêm hoặc xóa bớt các thành phần trên bảng

- Nối, tách các ô, thêm, xóa dòng cột

- Định vị tương đối văn bản trong từng ô

- Chọn màu cho bảng hoặc ô

Trang 11

3 6 Cá th h ô khá

3.6 Các thanh công cụ khác

- Thanh công cụ DHTML Effect: giúp tạo các hiệu ứng đặc biệt cho

trang web như nhấp chuột, rê chuột, … vào một đối tượng

- Thanh công cụ Positioning: dùng để nhúng, định vị vị trí đối tượng

- Thanh NavigationThanh Navigation: chọn View/ Navigation: : chọn View/ Navigation:

Dùng để xem dạng cây phân cấp trong trang web, rất hữu ích trong trường hợp cần tạo nhanh những nút liên kết các trang trong cùng cấp,

cấp cha hoặc cấp con.

Trang 12

4 Các phương thức xem trang:Trong FrontPage có 4 phương

Trong FrontPage có 4 phương

thức xem một trang web

4.1 Chế độ Design:

Chế độ nhập nội dung, bố cục, thiết

kế website Ở chế độ này có thể sử dụng hầu hết các

thể sử dụng hầu hết các menu lệnh, các biểu tượng trên những thanh công cụ.

Trang 13

4 Các phương thức xem trang:

hế độ l

4.2 Chế độ Split:

Chế độ này sẽ chia đôi màn hình

làm 2, một màn hình , ộ dùng để nhập nội dung,

bố cục, thiết kế giống chế độ Design, màn hình

còn lại hiển thị chi tiết các

mã lệnh, các thẻ tag của ngôn ngữ HTML

Trang 14

hế độ d

4.3 Chế độ Code:

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

những người rành về ngôn ngữ thiết kế web HTML g g g g

Trang 15

4 4 Chế độ Preview:

Chế độ này cho phép xem trước kết quả thiết kế Ở chế độ này hầu hết các thanh

công cụ sẽ bị mờ không hoạt động được, và một vài thành phần có thể sẽ hiển thị không chính xác Tốt nhất nên xem kết quả thiết kế trang web bằng trình duyệt IE

Tóm lại:

Trong 4 chế độ xem trang này, chúng ta sẽ thiết kế trang web ở chế độ Design, sau đó chuyển ngay sang chế độ Preview để xem kết quả Nếu không vừa ý thì chuyển lại chế độ Design rồi tiếp tục hiệu chỉnh cho đến khi hoàn thành trang web của mình.

Trang 16

II Các thao tác trên trang web:

• Những nội dung chính phần II:

á khá ệ bả

• Các khái niệm cơ bản

• Cách tạo một website

• Cách tạo một trang web đơn

• Lưu trữ và hiệu chỉnh Lưu trữ và hiệu chỉnh

• Xem website đã thiết kế

Trang 17

• Các khái niệm cơ bản:

• Webpage: p g một trang web đơn chứa nội dung cụ thể về một vấnộ g ộ g ụ ộ

đề nào đó Trong webpage có chứa liên kết tới các webpage khác

• Website: tập hợp của các webpage mà mỗi trang đều có liên kết

với nhau

• Trang chủ: thường được đặt tên là index.htm, chứa liên kết tới

toàn bộ các webpage còn lại trong website Trang chủ thườngdùng thể hiện các nội dung quan trọng nhất mà muốn người khácphải chú ý Có thể hình dung trang chủ của một website giốngtrang bìa của một tờ báo

Trang 18

1 Cách tạo một website rỗng:

Thường dùng để tạo một website rỗng, chưa có nội dung:

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

chọn More website templates.chọn More website templates

- Chọn một mẫu bất kỳ bên khung trái tùy vào yêu cầu sử dụng, bấm nút

Browse và chọn đường dẫn lưu website, nhấp OK khi hoàn tất

- Trên FP sẽ xuất hiện một website mới chưa có nội dung và có sẵn 1 tập

tin index.htm, 2 folder mặc định images và _private Nhấp đúp vào

Trang 19

Trang 20

Lưu ý:

- Trong bước chọn mẫu website, có thể chọn các mẫu khác nhau cho các

mục đích khác nhau Ví dụ với mẫu Personal Web Site thì sẽ xuất hiệnnhiều mục hơn là khi chọn mẫu One Page WebSite

- Trong phần này, chúng ta chỉ quan tâm tới việc tạo một trang web đơn

(webpage), vì việc tạo website chỉ thực sự dành cho những dự án lớnhoặc một trang web cá nhân cần đầu tư nhiều công sức, thời gian và

Trang 21

2 Cấu trúc tổng quát của một trang web :

Cấu trúc tổng quát của một trang web gần giống với cấu trúc khi tạo một

- Các folder con chứa các thànhCác folder con chứa các thành

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

tin hình ảnh, folder webpages

Trang 22

3 Tạo một trang web mới

Trang web mới sẽ được tạo theo 2 cách:g ợ ạ

- Tạo một trang web trắng chưa có nội dung

- Tạo một trang web theo những mẫu có sẵn trong FrontPageạ ộ g g g g

3.1 Tạo một trang web trắng

File > New > chọn ọ Blank pagep g ở khung chọn bên phảig ọ p

3.2 Tạo trang web mới theo những mẫu có sẵn

Trang 23

4 Lưu trang web

Sau khi tạo một trang web,

phải lưu trữ trang web đó lại

để tránh việc mất dữ liệu

bất ngờ

- Lưu lần đầu: File > Save

hoặc nhấp biểu tượng ặ p ợ g

- Tiêu đề trang web : bấm

Change title để thay đổi

tiêu đề trang web

Trang 24

4 Lưu trang web

Trong những lần lưu trữ tiếp theo, chỉ cần nhấp biểu tượng nếu muốn

lưu đè lên tập tin cũ hoặc chọn File > Save as nếu muốn lưu trữ với tên khác

Lưu ý: nếu trang web cần lưu có kèm

hình ảnh thì khi lưu nó sẽ hỏi có muốn

lưu kèm hình hay không? Bấm OK để xác

nhận việc lưu trữ web với hình ảnh

Trang 25

5 Xem trang web bằng trình duyệt

- Sau khi thiết kế và lưu trang web, ta có thể xem kết quả ở chế độ Preview, tuy

nhiên ở chế độ này đôi khi hiển thị không chính xác Do đó cách xem tốt nhất

Trang 26

Trang 27

6 Mở lại trang web cũ

Để mở lại một trang web cũ

Để mở lại một trang web cũ hoặc hiệu chỉnh một website tải về

từ Internet, ta làm như sau:

Chọn File>Open , chọn đường dẫn lưu trang web trong ô Look in ,

chọn trang web cần mở ở khung

trống bên dưới, bấm nút Open Sau

đó tiến hành hiệu chỉnh bình thường

Trang 28

III Chèn nội dung văn bản vào trang web:

Các nội dung chính:

- Tìm hiểu cách nhập văn bản vào trang web

- Lựa chọn font chữ, định dạng văn bản

- Thay đổi màu nền, màu chữ, kẻ khung … Tạo danh sách dạng liệt kê

- Tạo danh sách dạng liệt kê

- Tìm kiếm và thay thế kí tự

Trang 29

- Nội dung văn bản là phần thiết yếu của một trang web, nên viết rõ ràng,

dễ hiểu, ngắn gọn nhưng phải đầy đủ thông tin

- Để gây chú ý hơn đến những tiêu đề những nội dung quan trọng thiếtĐể gây chú ý hơn đến những tiêu đề, những nội dung quan trọng, thiết

yếu, nên:

- Làm cỡ chữ đậm hoặc nghiêng ở tiêu đề

- Thay đổi màu sắc so với các văn bản thường

- Canh lề hợp lý: trái, giữa, phải

- Lựa chọn font chữ: nên chọn font chữ Unicode : Arial, Tahoma, hoặc

Times New Roman

Trang 30

III Chèn nội dung văn bản vào trang web:

1 Xuống dòng: Shift Enter hay Enter

2 Sao chép di chuyển nội dung văn bản

2 Sao chép, di chuyển nội dung văn bản

3 Hủy bỏ thao tác vừa thực hiện

ộ

4 Định dạng font chữ - Hộp thoại Font

5 Thay đổi màu nền, màu văn bản, kẻ khung

6 Paragraph, danh sách liệt kê, tìm kiếm và thay thế

Trang 31

Đặc điểm:

- Hình ảnh là thành phần làm cho trang web trở nên sinh động, hấp

dẫn và bắt mắt hơn có thể thay thế cho đoạn văn bản dài bằng mộthình minh họa đơn giản và dễ hiểu

- Có dung lượng lớn nên cần nhiều thời gian để hiển thị trên trang

web Vì vậy ảnh nên có nội dung hay ý nghĩa nhất định, có màu sắchợp tông màu trang web Định vị hình ảnh hợp với từng chủ đề

- Không nên lạm dụng quá nhiều hình ảnh

- Không nên dùng ảnh gốc có dung lượng lớn, tốt nhất là tạo một ảnh

thu nhỏ (thumbnail) và liên kết nó với ảnh gốc

Trang 32

IV Chèn hình ảnh vào trang web:

1 Phân loại hình ảnh

2 Chèn ảnh: từ tập tin và thư viện CilpArt

Trang 33

V Chèn bảng vào trang web:

Trang 34

V Chèn bảng vào trang web:

2 Chèn các thành phần vào bảng

Chèn văn bản hình ảnh chèn bảng vào ô

3 Thanh công cụ Table

4 Hộp thoại Table Properties

Hộp thoại Table Properties

Hộp thoại Cell Properties

Màu nền từng ô

Trang 35

VI Chèn một số thành phần đặc biệt:

1 Chèn nhạc nền trang web

File > Properties

2 Tạo dòng chữ chạy Marquee

Insert/ Web Component/ Marquee

3 Chèn các nút nhấn tương tác

Insert/ Interactive Button

Trang 36

1 Siêu liên kết

Các bước tạo một liên kết

Liê kết tới tậ ti

Liên kết tới tập tin

Liên kết tới trang web khác

Liên kết tới địa chỉ e-mail

Liên kết ra bên ngoài

Kiểm tra liên kết bằng trình duyệt

ệ hỉ h l ê kế

2 Hiệu chỉnh liên kết

3 Liên kết bằng hình

Trang 37

[1] N ễ Thiê Bằ ( hủ biê ) H à Đứ Hải Phươ L I t t h i

[1] Nguyễn Thiên Bằng (chủ biên), Hoàng Đức Hải, Phương Lan, Internet cho mọi

người, Nhà xuất bản Lao Động Xã Hội, 2008.

Định dạng
Số trang	38
Dung lượng	0,99 MB