thiet ke web voi frontpage 2003

THIẾT KẾ WEB VỚI MICROSOFT THIẾT KẾ WEB VỚI MICROSOFT FRONTPAGE 2003FRONTPAGE 2003

NỘI DUNGNỘI DUNG

Chương I: Một số khái niệm cơ bảnChương I: Một số khái niệm cơ bản

Chương V: Multimedia hóa trang webChương V: Multimedia hóa trang web

Chương II: Ngôn ngữ HTMLChương II: Ngôn ngữ HTML

Chương III: Tạo trang web với Front003Chương III: Tạo trang web với FrontPage 2003

Chương IV: Xử lý văn bản Chương IV: Xử lý văn bản && một số đối tượng khác một số đối tượng khác

Mạng Internet là gì?Mạng Internet là gì? Các dịch vụ quan trọng trên mạng InternetCác dịch vụ quan trọng trên mạng Internet

Dịch vụ FTPDịch vụ FTP

Dịch vụ TelnetDịch vụ Telnet

Dịch vụ MailDịch vụ Mail

Dịch vụ WebDịch vụ Web Dịch vụ World Wide Web (Web)Dịch vụ World Wide Web (Web)

Trình duyệt Web (Web Browser)Trình duyệt Web (Web Browser)

Phục vụ Web (Web Server)Phục vụ Web (Web Server)

Chương I: Chương I: CÁC KHÁI NIỆM CƠ BẢNCÁC KHÁI NIỆM CƠ BẢN

Web site, trang web:Web site, trang web: Trang Web: trang thông tin có chứa các siêu văn bảnTrang Web: trang thông tin có chứa các siêu văn bản Trang chủ (Homepage): trang đầu tiên của Web siteTrang chủ (Homepage): trang đầu tiên của Web site Web site là một vị trí trên Internet (nơi cung cấp dịch vụ Web site là một vị trí trên Internet (nơi cung cấp dịch vụ web).web).

URL (URL (UUniform niform RResource esource LLocation):ocation): Là địa chỉ để định vị các nguồn tài nguyên trên Web.Là địa chỉ để định vị các nguồn tài nguyên trên Web. Cấu trúc của một URL:Cấu trúc của một URL:

<Giao thức>://<tên miền>[/Path][/Document]<Giao thức>://<tên miền>[/Path][/Document]

Ví dụ: Ví dụ: http://www.pdu.edu.vn/khoacntt/index.phphttp://www.pdu.edu.vn/khoacntt/index.php

Chương I: Chương I: CÁC KHÁI NIỆM CƠ BẢN (tt)CÁC KHÁI NIỆM CƠ BẢN (tt)

Mô hình hoạt động của dịch vụ Web:Mô hình hoạt động của dịch vụ Web:

Chương I: Chương I: CÁC KHÁI NIỆM CƠ BẢN (tt)CÁC KHÁI NIỆM CƠ BẢN (tt)

Internet

HTMLHTML………………………………………………………………...………….........

http://http://www.pud.edu.vnwww.pud.edu.vn

Xử lý yêu cầuXử lý yêu cầu

Web Server

Giới thiệu HTML:Giới thiệu HTML: Là ngôn ngữ dùng để lập trình tạo ra các trang web (ở dạng Là ngôn ngữ dùng để lập trình tạo ra các trang web (ở dạng tập tin văn bản đơn giản)tập tin văn bản đơn giản)

HTML dùng các thẻ (tag) để thông báo cho các web browser HTML dùng các thẻ (tag) để thông báo cho các web browser hiển thị.hiển thị.

Hầu hết các web browser đều hiểu được ngôn ngữ HTMLHầu hết các web browser đều hiểu được ngôn ngữ HTML Cú pháp các thẻ (tag) trong HTML:Cú pháp các thẻ (tag) trong HTML: <Tên thẻ [TT1 = <GT1> TT2 = <GT2>...]>...</Tên <Tên thẻ [TT1 = <GT1> TT2 = <GT2>...]>...</Tên thẻ> thẻ>

Ví dụ: Hiển thị dòng chữ “Chao các bạn !” dạng in Ví dụ: Hiển thị dòng chữ “Chao các bạn !” dạng in đậmđậm

Chào các bạnChào các bạn

Chương II: Chương II: NGÔN NGỮ HTML NGÔN NGỮ HTML ((HHyperyperttext ext MMarkup arkup LLanguage)anguage)

Cấu trúc trang web tĩnh:Cấu trúc trang web tĩnh:<HTML> <HTML> <HEAD> <TITLE> … </TITLE> </HEAD> <HEAD> <TITLE> … </TITLE> </HEAD> <BODY> <BODY>

</BODY> </BODY> </HTML> </HTML>

Một số thẻ HTML thông dụng:Một số thẻ HTML thông dụng: Thẻ <HTML>: Trang web tĩnh được bắt đầu bằng :<HTML>Thẻ <HTML>: Trang web tĩnh được bắt đầu bằng :<HTML>

và kết thúc bằng: </HTM>và kết thúc bằng: </HTM> Thẻ <HEAD>: Phần đầu của trang webThẻ <HEAD>: Phần đầu của trang web Thẻ <TITLE>: Đặt tiêu đề cho trang web (thẻ này nằm trong Thẻ <TITLE>: Đặt tiêu đề cho trang web (thẻ này nằm trong

<HEAD>)<HEAD>)

Chương II: Chương II: NGÔN NGỮ HTML (tt)NGÔN NGỮ HTML (tt)

Ví dụVí dụ:: Đặt tiêu đề của trang web là: “Thông báo” Đặt tiêu đề của trang web là: “Thông báo”

<HEAD><HEAD>

<TITLE>Thông báo</TITLE><TITLE>Thông báo</TITLE>

</HEAD></HEAD> Thẻ <BODY>: Chứa nội dung trang web.Thẻ <BODY>: Chứa nội dung trang web.

<BODY [BACKGROUND=url BGCOLOR=color …]> <BODY [BACKGROUND=url BGCOLOR=color …]>

Nội dung trang webNội dung trang web

</BODY></BODY> Chú thích trong HTML: dùng dấu Chú thích trong HTML: dùng dấu 



Một số thẻ HTML thông dụng (tt)Một số thẻ HTML thông dụng (tt)

Ví dụ:Ví dụ: Tạo trang web với tiêu đề là: “Giới thiệu” và in ra dòng Tạo trang web với tiêu đề là: “Giới thiệu” và in ra dòng chữ: “Chào các bạn !” ở dạng chữ đậm và nghiêngchữ: “Chào các bạn !” ở dạng chữ đậm và nghiêng

<<HTML>HTML>

<HEAD><HEAD>

<TITLE>Giới thiệu</TITLE><TITLE>Giới thiệu</TITLE>

</HEAD></HEAD>

<BODY><BODY>

Chào các bạn !Chào các bạn !

</BODY></BODY>

</HTML></HTML>

Các thẻ định dạng văn bản:Các thẻ định dạng văn bản:


Tên thẻTên thẻ Giải thíchGiải thích Ví dụVí dụ

…… Dạng chữ đậmDạng chữ đậm Hello world !Hello world !

…… Dạng chữ nghiêngDạng chữ nghiêng Hello world !Hello world !

…… Dạng chữ gạch chânDạng chữ gạch chân Hello world !Hello world !

<S>…</S><S>…</S> Dạng chữ gạch giữaDạng chữ gạch giữa <S>Hello world!</S><S>Hello world!</S>

 …… Size=“N”> ……



Định dạng font chữ:Định dạng font chữ:

Color: chỉ định màuColor: chỉ định màu

Face: Chỉ định font chữFace: Chỉ định font chữ

Size: kích thướcSize: kích thước

Hello world face=“Arial”>Hello world 

…… Tạo chỉ số trênTạo chỉ số trên X2 X2 X X22

…… Tạo chỉ số dướiTạo chỉ số dưới H2O H2O H H22OO

Các thẻ định dạng văn bản:Các thẻ định dạng văn bản:


Tên thẻTên thẻ Giải thíchGiải thích Ví dụVí dụ

 Xuống dòngXuống dòng



…… ……



Tạo đoạn văn bản mớiTạo đoạn văn bản mới

Align: chỉ định hình thức canh lềAlign: chỉ định hình thức canh lề



Hello world !Hello world !



<HR Align=“…” <HR Align=“…” Color Color = “…” = “…”

SIZE = “…” SIZE = “…”

WIDTH = “…” /WIDTH = “…” />>

Tạo đường gạch ngangTạo đường gạch ngang

Color: màuColor: màu

Size: độ dày (tính bằng pixel)Size: độ dày (tính bằng pixel)

Width: độ dài (tính bằng pixel)Width: độ dài (tính bằng pixel)

<HR Color=“Red” <HR Color=“Red” Size=“10” Size=“10” Width=“200” />Width=“200” />

Các thuộc tính quan trọng của thẻ :Các thuộc tính quan trọng của thẻ : Align:Align:

Left: Canh tráiLeft: Canh trái Center: Canh giữaCenter: Canh giữa Right: Canh phảiRight: Canh phải justify: Canh đềujustify: Canh đều

Style: Style: Margin-top: Canh lề trên của đoạnMargin-top: Canh lề trên của đoạn Margin-left: Canh lề trái của đoạnMargin-left: Canh lề trái của đoạn Margin-right: Canh lề phải của đoạnMargin-right: Canh lề phải của đoạn Margin-bottom: Canh lề dưới của đoạnMargin-bottom: Canh lề dưới của đoạn Direction: Chỉ định chiều văn bản (từ trái sang phải Direction: Chỉ định chiều văn bản (từ trái sang phải “ltr”“ltr”

hoặc từ phải sang trái hoặc từ phải sang trái “rtl”“rtl”))

Ví dụ:Ví dụ:

1. Định dạng đoạn văn bản thao dạng canh đều, chiều văn bản đi từ phải sang trái, khoảng cách trên: 3, dưới: 3,

trái và phải là mặc định.

2. Sin2x + Cos2x = 1

3. H2 + O2 H2O

Giải

1. ….

2. Sin2x + Cos2x = 1

3. H2 + O2 H2O

Các thẻ hình ảnh và âm thanhCác thẻ hình ảnh và âm thanh::


Chèn hình vào web:Chèn hình vào web:<IMG src=“…" width=“…" height=“…" border=“…" alt=“…“/><IMG src=“…" width=“…" height=“…" border=“…" alt=“…“/>

Các thuộc tính (thẻ IMG):Các thuộc tính (thẻ IMG): Scr: là đường dẫn của file ảnhScr: là đường dẫn của file ảnh Height: Chỉ định chiều cao của ảnh. Nếu không chỉ định Height: Chỉ định chiều cao của ảnh. Nếu không chỉ định thì sẽ lấy chiều cao hiện tại của ảnh.thì sẽ lấy chiều cao hiện tại của ảnh. Width: chỉ định độ rộng của ảnh. Nếu không chỉ định thì Width: chỉ định độ rộng của ảnh. Nếu không chỉ định thì sẽ lấy chiều rộng hiện tại của ảnh.sẽ lấy chiều rộng hiện tại của ảnh. Border: chỉ định độ dày của khung bao quanh ảnhBorder: chỉ định độ dày của khung bao quanh ảnh Alt: là chuỗi văn bản xuất hiện khi đưa trỏ chuột vào ảnh.Alt: là chuỗi văn bản xuất hiện khi đưa trỏ chuột vào ảnh. Đưa nhạc nền vào web:Đưa nhạc nền vào web:

<BGSOUND scr = “…” loop = “…”><BGSOUND scr = “…” loop = “…”>

Các thuộc tính:Các thuộc tính: Scr: là đường dẫn của file âm thanh (*.mid, *.wav, …)Scr: là đường dẫn của file âm thanh (*.mid, *.wav, …) Loop: số lần lặp lại bài nhạc. Nếu loop= -1 hoặc “infinite” Loop: số lần lặp lại bài nhạc. Nếu loop= -1 hoặc “infinite” thì sẽ lặp đến khi chuyển sang trang mới webthì sẽ lặp đến khi chuyển sang trang mới web. Chèn âm thanh, phim:Chèn âm thanh, phim:

<EMBED src = “…” autostart = “…” loop = “N” /><EMBED src = “…” autostart = “…” loop = “N” />Các thuộc tính: Scr: là đường dẫn của file bài hát/phimScr: là đường dẫn của file bài hát/phim Autostart: nếu là true tự động thực hiện bài hát.Autostart: nếu là true tự động thực hiện bài hát. Loop: số lần lặp lại bài nhạc. Nếu loop = true hoặc Loop: số lần lặp lại bài nhạc. Nếu loop = true hoặc “infinite” thì sẽ lặp đến khi chuyển sang trang mới web“infinite” thì sẽ lặp đến khi chuyển sang trang mới web.

Tạo liên kết đến trang web khác:Tạo liên kết đến trang web khác:

<A href = “url” target = “…”>Text </A><A href = “url” target = “…”>Text </A>

Trong đó:Trong đó: Url: là đường dẫn/địa chỉ của của trang web chuyển đến.Url: là đường dẫn/địa chỉ của của trang web chuyển đến. Target có thể là các giá trị sau:Target có thể là các giá trị sau: “_new” hoặc “_blank”: trình duyệt sẽ phải mở trang web đích trong một cửa sổ mới "_top", "_parent", "_self“: dùng cho những trang web có chứa frame. Text: là đoạn văn bản hiển thị để người dùng click vào.Text: là đoạn văn bản hiển thị để người dùng click vào. Tạo liên kết đến E-mail:<A href = "mailto:Địa chỉ E-mail“ >Text</A>

Tạo các liên kết (Hyper link):Tạo các liên kết (Hyper link):

Tạo liên kết bên trong (liên kết nội) của trang web:Tạo liên kết bên trong (liên kết nội) của trang web:

Là liên kết đến từng đoạn văn bản trong trang web.Là liên kết đến từng đoạn văn bản trong trang web.

<A href = “#Tên của đoạn”>Text</A>

Trong đó: Chỉ mục/tên của đoạn được tạo như sau:

<A name = “Tên đoạn”>Text</A>

Được đặt ở đầu đoạn Tạo dòng chữ chạy trên trang web:

<MARQUEE direction = “…” behavior =“…” height = “…” width = “…” scrollamount =“N” scrolldelay = “M”>Text </MARQUEE>

Tạo các liên kết (Hyper link):Tạo các liên kết (Hyper link):


Trong đó:

Direction: hướng chuyển động của dòng chữ “Text”

Behavior: hình thức chuyển động: scroll, alternate, slide

Height, Width: chiều cao và chiều rộng

Scrollamount, Scrolldelay: chỉ định tốc chuyền động.

<TABLE align = “…” background = “url” bgcolor = “RGB” <TABLE align = “…” background = “url” bgcolor = “RGB”

border = “…” cellpadding = “…” width = “…” height=“…" > border = “…” cellpadding = “…” width = “…” height=“…" >

Trong đó: Trong đó: Align: lề của bảng: “left” hoặc “right” Align: lề của bảng: “left” hoặc “right” Background: chỉ định file ảnh nền của bảng Background: chỉ định file ảnh nền của bảng Bgcolor: màu nền của bảng Bgcolor: màu nền của bảng Border: đường viền bảng (tính bằng pixel)Border: đường viền bảng (tính bằng pixel) Cellpadding: khoảng cách từ các cạnh của ô tới nội dung Cellpadding: khoảng cách từ các cạnh của ô tới nội dung của ô (tính bằng pixel)của ô (tính bằng pixel) Width, HeightWidth, Height : độ rộng, cao của bảng (tính theo % hoặc : độ rộng, cao của bảng (tính theo % hoặc tính bằng pixel)tính bằng pixel)

Tạo bảng (Table)Tạo bảng (Table)

Thêm dòng vào bảng:Thêm dòng vào bảng:

<TR align = “…” background = “url” bgcolor = “RGB” <TR align = “…” background = “url” bgcolor = “RGB” valign= “…” > … </TR> valign= “…” > … </TR>

Trong đó: Trong đó: Align: lề của các ô trong dòng: “left”, “right” hoặc “center”.Align: lề của các ô trong dòng: “left”, “right” hoặc “center”.

Background: đường dẫn file ảnh nền của dòng .Background: đường dẫn file ảnh nền của dòng .

Bgcolor: màu nền của dòng Bgcolor: màu nền của dòng

Valign: lề theo chiều dọc của văn bản trong các ô trên Valign: lề theo chiều dọc của văn bản trong các ô trên dòng: “top”, “bottom”, “middle”.dòng: “top”, “bottom”, “middle”.

Chú ý:Chú ý:

Thẻ <Tr> phải nằm trong thẻ <Table></Table>Thẻ <Tr> phải nằm trong thẻ <Table></Table>

Thêm ô vào bảng:Thêm ô vào bảng:

<TD align=“…” background = “url“ bgcolor = “RGB” <TD align=“…” background = “url“ bgcolor = “RGB” rowspan = “N” colspan = “M” valign = “…” > … </TD>rowspan = “N” colspan = “M” valign = “…” > … </TD>Trong đó: Trong đó: Align: lề của ô: “left”, “right” hoặc “center”.Align: lề của ô: “left”, “right” hoặc “center”. Background: đường dẫn file ảnh nền của dòng .Background: đường dẫn file ảnh nền của dòng . Bgcolor: màu nền của ô Bgcolor: màu nền của ô Valign: lề theo chiều dọc của văn bản trong các ô trên Valign: lề theo chiều dọc của văn bản trong các ô trên dòng: “top”, “bottom”, “middle”.dòng: “top”, “bottom”, “middle”. Rowspan: số ô trải dài trên N dòngRowspan: số ô trải dài trên N dòng Colspan: Số ô trải rộng trên M cột

Chú ý:Chú ý: Thẻ <TD> phải nằm trong thẻ <TR></TR> Thẻ <TD> phải nằm trong thẻ <TR></TR>

THIẾT KẾ MỘT WEB SITE THẾ NÀO ?THIẾT KẾ MỘT WEB SITE THẾ NÀO ?

Phân tích hệ thống web site:Phân tích hệ thống web site:

Tìm hiểu đối tượng (khách hàng, người truy cập) của web Tìm hiểu đối tượng (khách hàng, người truy cập) của web site.site.

Tìm hiểu các yêu cầu của khách hàng.Tìm hiểu các yêu cầu của khách hàng.

Xây dựng mô hình hệ thống của web site:Xây dựng mô hình hệ thống của web site:

Chức năng của từng trangChức năng của từng trang

Cấu trúc của các trangCấu trúc của các trang

Mối liên kết giữa các trangMối liên kết giữa các trang

Xây dựng các mô hình cơ sở dữ liệu (nếu cần thiết)Xây dựng các mô hình cơ sở dữ liệu (nếu cần thiết)

Thu thập thông tin cần thiết (do khách hàng cung cấp) để Thu thập thông tin cần thiết (do khách hàng cung cấp) để xây dựng nội dung cho các trang web.xây dựng nội dung cho các trang web.

THIẾT KẾ MỘT WEBSITE THẾ NÀO ? (tt)THIẾT KẾ MỘT WEBSITE THẾ NÀO ? (tt)

Xây dựng từng trang web cụ thể:Xây dựng từng trang web cụ thể:

Cần liên hệ với nhà cung cấp Host để biết được các Cần liên hệ với nhà cung cấp Host để biết được các thông tin về hệ thống mà web site sau này sẽ vận hành.thông tin về hệ thống mà web site sau này sẽ vận hành.

Nếu có nhiều người cùng tham gia: nên quy ước cách đặt Nếu có nhiều người cùng tham gia: nên quy ước cách đặt tên các trang web (tên file), tên các thư mục, tên biến ...tên các trang web (tên file), tên các thư mục, tên biến ...

Cần chú ý sử dụng Cần chú ý sử dụng đường dẫn tương đốiđường dẫn tương đối khi đưa hình khi đưa hình ảnh, âm thanh hay tạo các liên kết giữa các trang (copy các ảnh, âm thanh hay tạo các liên kết giữa các trang (copy các file ảnh/âm thanh vào thư mục của web site file ảnh/âm thanh vào thư mục của web site trước khitrước khi chèn chèn chúng vào các trang web)chúng vào các trang web)

Giao diện: đơn giản, thân thiện, dễ dùng, hình ảnh, âm Giao diện: đơn giản, thân thiện, dễ dùng, hình ảnh, âm thanh, màu sắc, … tuỳ thuộc vào mục đích của web site.thanh, màu sắc, … tuỳ thuộc vào mục đích của web site.

Xây dựng nội dung cho trang web: xúc tích và chính xác.Xây dựng nội dung cho trang web: xúc tích và chính xác.

THIẾT KẾ MỘT WEBSITE THẾ NÀO ? (tt)THIẾT KẾ MỘT WEBSITE THẾ NÀO ? (tt)

Khi lập trình cần chú ý đến thời gian thực hiện.Khi lập trình cần chú ý đến thời gian thực hiện.

Chú ý đến vấn đề bảo mật thông tin (nếu cần thiết).Chú ý đến vấn đề bảo mật thông tin (nếu cần thiết).

Chạy thử trên hệ thống mạng Intranet hoặc InternetChạy thử trên hệ thống mạng Intranet hoặc Internet

Đưa web site vào vận hành thử nghiệm.Đưa web site vào vận hành thử nghiệm.

Phát hiện và khắc phục lỗi.Phát hiện và khắc phục lỗi.

Nhận ý kiến đóng góp (về giao diện, chức năng, …)Nhận ý kiến đóng góp (về giao diện, chức năng, …)

Chỉnh sửa lần cuối.Chỉnh sửa lần cuối.

Bảo trì và nâng cấp:Bảo trì và nâng cấp:

Cần phải tiếp thu các công nghệ mới để có thể nâng cấp Cần phải tiếp thu các công nghệ mới để có thể nâng cấp web site nếu cần thiết.web site nếu cần thiết.

CHƯƠNG III: TẠO MỘT TRANG WEB VỚI CHƯƠNG III: TẠO MỘT TRANG WEB VỚI FRONTPAGE 2003FRONTPAGE 2003

Mở FrontPage 2003: Start Programs Microsoft Office Microsoft FrontPage 2003

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

Thanh tiêu đề Thanh Menu Thanh công cụ chuẩn

Thanh định dạng

Page tab

Chế độ làm việc

Đóng trang web hiện tại

Thanh cuộn ngang – dọc

Task pane

Vùng thiết kế

CHƯƠNG III: TẠO MỘT TRANG WEB VỚI CHƯƠNG III: TẠO MỘT TRANG WEB VỚI FRONTPAGE 2003 (tt)FRONTPAGE 2003 (tt)

Tạo web site mới:

Mở MS.FrontPage

Click vào hình mũi tên bên cạnh biểu tượng New Web site

Hộp thoại Web site Templates xuất hiện

2.Click vào để tạo web site mới

1. Click vào đây

2.Click chọn mẫu web site

1.Nhập đường dẫn chứa web site. Hoặc click vào nút Browse để chọn

3.Click Ok để tạo website mới

Chú ý: Phải tạo thư mục chứa web site trước khi tạo web site

Sau khi tạo web site xong màn hình như sau xuất hiên:

Thư mục chứa các hình ảnh

Trang chủ của web site

Tạo trang web mới

Tạo thư mục mới

Cần tạo thêm thư mục “Media” để chứa các file âm thanh, các đoạn video, các file flash

2. Nhập tên thư mục là “Media” ấn Enter

1. Click tạo thư mục mới


Tạo trang web mới:

Click chọn biểu tượng new

Click chọn biểu tượng save (hình chiếc đĩa mềm). Hộp thoại Save as xuất hiện

Nhập tên trang web

Click save để lưu trang

web


Mở web site đã có:

Mở MS.FrontPage

Click vào hình mũi tên bên cạnh biểu tượng Open Open Site

Hộp thoại Open site xuất hiện

2.Click vào để mở web site

1. Click vào đây

2. Click chọn web site cần mở

1. Click chọn nơi chứa web site

3. Click Open để mở web site


Mở trang web đã có:

Sau khi mở web site xong, màn hình xuất hiện như sau

Click phải vào trang cần mở và chọn Open


Chuyển đổi giữa các chế độ làm việc: Có 3 chế độ làm việc:

Design: chế độ thiết kế

Code: chế độ soạn mã lệnh

Split: chế độ vừa thiết kế vừa viết mã lệnh

Preview: Chế độ chạy thử trang web trong FrontPage

Xem trên trình duyệt web


Thiết đặt thuộc tính cho trang web: Sau khi tạo trang web xong, công việc đầu tiên là ta thiết đặt thuộc tính cho nó. Bao gồm các thuộc tính chính:

Tiêu đề trang web

Định dạng lề cho trang web

Font chữ, kích thướt, màu chữ mặc định của trang web

Màu nền, ảnh nền và nhạc nền (nếu cần thiết)

Để thiết đặt các thuộc tính này ta thực hiện: Click phải vào vùng trống trên trang web Page properties để mở hộp thoại Page properties.

Đặt tiêu đề cho trang web: Chọn tab General nhập nội dung vào mục Title click OK

1. Chọn tab General

2. Nhập tiêu đề

3. Click OK


Định dạng lề cho trang web:

Mở hộp thoại Page properties

Chọn tab Advanced

Định lề trên: nhập giá trị vào ô Top Margin

Định lề trái: nhập giá trị vào ô Left Margin

Định lề dưới: nhập giá trị vào ô Bottom Margin

Định lề phải: nhập giá trị vào ô Right Margin

1. Chọn tab Advanced

2. Nhập giá trị để định lề, trên, trái, dưới, phải

3. Click Ok


Định dạng fĐịnh dạng font chữ, kích thướt, màu chữ mặc địnhont chữ, kích thướt, màu chữ mặc định::

Mở hộp thoại Page propertiesMở hộp thoại Page properties

Chọn tab AdvancedChọn tab Advanced

Click chọn nút Body style. Hộp thoại Modify style xuất hiệnClick chọn nút Body style. Hộp thoại Modify style xuất hiện

Click nút Format Click nút Format Font Font

Chọn các giá trị cần thiết rồi click OK để thiết lậpChọn các giá trị cần thiết rồi click OK để thiết lập

Các bước như sau:Các bước như sau:

Bước 1:

1. Click vào Body style để mở hộp thoại modify style

Bước 2:

2. Click Format Font để mở hộp thoại Font

Chọn font chữ

Chọn kiểu chữ: bình thường, đậm, nghiên, …

Click Ok để thiết đặt

Nhập vào kích cỡ chữ (ví dụ: 12px)

Chọn màu chữ


Chèn ảnh nền: Mở hộp thoại Page properties Chọn tab Formatting Background picture Browse để chọn ảnh nền OK

Chú ý: Phải đảm bảo rằng ảnh đã được lưu trong thư mục Images trước khi chọn nó làm ảnh nền


Thiết đặt màu nền: Mở hộp thoại Page properties Chọn tab Formatting Background Chọn màu OK


Đưa nhạc nền vào trang web: Mở hộp thoại Page properties Chọn tab Formatting Background picture Browse để chọn ảnh nền OK

Chú ý:

Phải đảm bảo rằng file nhạc đã được lưu trong thư mục Media trước khi chọn nó làm nhạc nền

Nếu muốn bài hát tự động lặp lại: Bỏ chọn mục Forever nhập vào số lần lặp lại trong ô Loop

CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁCTƯỢNG KHÁC

Nhập văn bản: Khi ta gõ từng ký tự từ bàn phím thì chúng sẽ xuất hiện bên Khi ta gõ từng ký tự từ bàn phím thì chúng sẽ xuất hiện bên trái con nháy (con trỏ văn bản)trái con nháy (con trỏ văn bản) Xoá một ký tự bên trái con nháy: ấn phím BackSpace (“Xoá một ký tự bên trái con nháy: ấn phím BackSpace (“”) ”) nằm trên phímnằm trên phím “Enter” “Enter” Xoá một ký tự bên phải con nháy: ấn phímXoá một ký tự bên phải con nháy: ấn phím “Delete” “Delete” Xoá nhiều ký tự cùng lúc: tô đen (chọn khối) ký tự cần xoá Xoá nhiều ký tự cùng lúc: tô đen (chọn khối) ký tự cần xoá và ấn phím và ấn phím “Delete”“Delete” Chọn khối (nhiều ký tự):Chọn khối (nhiều ký tự): Đặt con nháy ở Đặt con nháy ở đầu khốiđầu khối cần chọn -> ấn giữ phím cần chọn -> ấn giữ phím “Shift” “Shift” -> -> click chuột vào click chuột vào vị trí kết thúcvị trí kết thúc của khối cần chọn. của khối cần chọn. Hoặc ấn giữ phím Hoặc ấn giữ phím “shift”“shift” và ấn các phím mũi tên: và ấn các phím mũi tên: , , , , , ,

CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC (tt)TƯỢNG KHÁC (tt)

Chọn một dòng:Chọn một dòng: Đưa con nháy về đầu dòng Đưa con nháy về đầu dòng ấn giữ phím ấn giữ phím “Shift”“Shift” ấn ấn phím phím “End”“End” Hoặc đưa con nháy về cuối dòng Hoặc đưa con nháy về cuối dòng ấn giữ phím ấn giữ phím “Shift”“Shift” ấn phím ấn phím “Home”“Home”

Chép (copy) một khối:Chép (copy) một khối: Chọn khối cần chép Chọn khối cần chép R-Click vào khối vừa chọn R-Click vào khối vừa chọn Copy Copy Hoặc chọn khối cần chép Hoặc chọn khối cần chép ấn tổ hợp phím: ấn tổ hợp phím: “Ctrl + C”“Ctrl + C”

Cắt (cut) một khối:Cắt (cut) một khối: Chọn khối cần chép Chọn khối cần chép R-Click vào khối vừa chọn R-Click vào khối vừa chọn Cut. Cut. Hoặc chọn khối cần chép Hoặc chọn khối cần chép ấn tổ hợp phím: ấn tổ hợp phím: “Ctrl + X”“Ctrl + X”

Dán (paste) một khối đã được copy hoặc cắt:Dán (paste) một khối đã được copy hoặc cắt: R-Click vào vị trí cần dán R-Click vào vị trí cần dán Paste Paste Hoặc ấn tổ hợp phím: Hoặc ấn tổ hợp phím: “Ctrl + V”“Ctrl + V”


Định dạng đoạn:Định dạng đoạn: gồm các định dạng sau gồm các định dạng sau Canh lề đoạn (trái, phải, giữa, đều)Canh lề đoạn (trái, phải, giữa, đều) Khoảng cách giữa các đoạnKhoảng cách giữa các đoạn Khoảng cách giữa các dòngKhoảng cách giữa các dòng Thực hiện: Thực hiện: Chọn đoạn cần định dạng Chọn đoạn cần định dạng Format Format ParagraphParagraph

1. Chọn đoạn1. Chọn đoạn

2. Click Format 2. Click Format Paragraph Paragraph

Canh lề cho đoạnCanh lề cho đoạn

Khoảng các giữa các Khoảng các giữa các dòng trong đoạndòng trong đoạn

Định khoảng cách Định khoảng cách trên, dưới của đoạntrên, dưới của đoạn

Click OkClick Ok


Định dạng ký tựĐịnh dạng ký tự gồm các định dạng sau gồm các định dạng sau Font chữ, kiểu chữ, kích thướtFont chữ, kiểu chữ, kích thướt Màu chữ, màu nềnMàu chữ, màu nền Thực hiện: Thực hiện: Chọn đoạn cần định dạng Chọn đoạn cần định dạng Format Format Font. Font. Hộp thoại Font xuất hiện và thực hiện định dạng như trướcHộp thoại Font xuất hiện và thực hiện định dạng như trước

Chọn font chữ

Chọn kiểu chữ: bình thường, đậm, nghiên, …

Click Ok để thiết đặt

Nhập vào kích cỡ chữ (ví dụ: 12px)

Chọn màu chữ


Chèn các ký tự đặc biệt (Symbol):Chèn các ký tự đặc biệt (Symbol): Click Insert Click Insert Symbol Symbol chọn symbol cần chèn chọn symbol cần chèn click nút click nút InsertInsertTạo các Bookmark trong trang:Tạo các Bookmark trong trang: Bookmark: là các điểm đánh dấu của một đoạnBookmark: là các điểm đánh dấu của một đoạn Được dùng để tạo các điểm đến của các liên kết trongĐược dùng để tạo các điểm đến của các liên kết trong Thực hiện: Thực hiện: Chọn các ký tự làm tiêu đề của đoạn Chọn các ký tự làm tiêu đề của đoạn Insert Insert Bookmark. Hộp thoại Bookmark xuất hiệnBookmark. Hộp thoại Bookmark xuất hiện

Nhập tên Bookmark

Click OK


Chèn các siêu liên kết (Hyperlink): có 2 loạiChèn các siêu liên kết (Hyperlink): có 2 loại Liên kết trong (liên kết đến các Bookmark nằm trong chính Liên kết trong (liên kết đến các Bookmark nằm trong chính trang đó)trang đó) Liên kết ngoài: là liên kết đến các trang web khácLiên kết ngoài: là liên kết đến các trang web khác Chèn liên kết trong:Chèn liên kết trong: Chọn các ký tự làm liên kếtChọn các ký tự làm liên kết Chọn Insert Chọn Insert Hyperlink ( hoặc ấn tổ hợp phím “Ctrl” + K) Hyperlink ( hoặc ấn tổ hợp phím “Ctrl” + K) Hoặc click biểu tượng hyperlink ( ) trên thanh công cụHoặc click biểu tượng hyperlink ( ) trên thanh công cụ Hộp thoại Insert hyperlink xuất hiện Hộp thoại Insert hyperlink xuất hiện click nút Bookmark click nút Bookmark Chọn tên Bookmark cần liên kết đến Chọn tên Bookmark cần liên kết đến click OK click OK

1. Click Bookmark

2. Chọn Bookmark

3. Click OK

4. Click OK


Chèn liên kết ngoài:Chèn liên kết ngoài: Chọn các ký tự làm liên kếtChọn các ký tự làm liên kết Chọn Insert Chọn Insert Hyperlink (hoặc ấn tổ hợp phím “Ctrl” + K) Hyperlink (hoặc ấn tổ hợp phím “Ctrl” + K) Hoặc click biểu tượng hyperlink ( ) trên thanh công cụHoặc click biểu tượng hyperlink ( ) trên thanh công cụ Hộp thoại Insert hyperlink xuất hiện Hộp thoại Insert hyperlink xuất hiện click chọn trang web click chọn trang web cần liên kết cần liên kết OK OK Hoặc nhập vào địa chỉ (của trang web trên mạng) vào ô Hoặc nhập vào địa chỉ (của trang web trên mạng) vào ô Address Address click OK click OK

1. Liên kết đến các trang web cùng web site1. Liên kết đến các trang web cùng web site

2. Liên kết đến các trang web khác trên mạng2. Liên kết đến các trang web khác trên mạng


Chèn dòng chữ chạy (marquee) trên trang web:Chèn dòng chữ chạy (marquee) trên trang web: Chọn các ký tự cần chènChọn các ký tự cần chèn Chọn Insert Chọn Insert Web component. Hộp thoại Insert web Web component. Hộp thoại Insert web componet xuất hiện. Thực hiện theo các hình sau:componet xuất hiện. Thực hiện theo các hình sau:

Sau khi click Finish hộp thoại Marquee properties xuất hiệnSau khi click Finish hộp thoại Marquee properties xuất hiện

Hướng chuyển động

Thời gian trì hoãnSố lượng

Dạng chuyển động

Màu nền

Font, màu, kích thướt chữ

Click OK để thiết đặt


Chèn Layer:Chèn Layer: Layer là một đối tượng cho phép ta đặt văn bản, hình ảnh, Layer là một đối tượng cho phép ta đặt văn bản, hình ảnh, âm thanh, … vào trong nóâm thanh, … vào trong nó Layer được đặt ở vị trí bất kỳ trong trang web (ta có thể di Layer được đặt ở vị trí bất kỳ trong trang web (ta có thể di chuyển chúng một cách tùy ý)chuyển chúng một cách tùy ý) Chèn layer vào trang web:Chèn layer vào trang web: click Insert click Insert Layers (hoặc click Layers (hoặc click vào biểu tượng Layer ( ) trên thanh công cụvào biểu tượng Layer ( ) trên thanh công cụ


Nhập văn bản: Nhập văn bản: Click vào một vị trí trên Layer Click vào một vị trí trên Layer con nháy con nháy xuất hiện và ta có thể nhập văn bản một cách bình thườngxuất hiện và ta có thể nhập văn bản một cách bình thường Chèn các đối tượng khác vào Layer: Chèn các đối tượng khác vào Layer: Click vào một vị trí trên Click vào một vị trí trên Layer Layer chèn các đối tượng bình thường chèn các đối tượng bình thường Điều chỉnh độ rộng và di chuyển Layer:Điều chỉnh độ rộng và di chuyển Layer: Sau khi chèn Layer Sau khi chèn Layer vào trang web, layer xuất hiện như sau:vào trang web, layer xuất hiện như sau:

Điều chỉnh kích thướt theo chiều rộng

Điều chỉnh kích thướt theo chiều rộng và cao

Ấn giữ phím trái chuột và di chuyển chuột để di chuyển layer

Điều chỉnh kích thướt theo chiều cao


Chèn bảng (table):Chèn bảng (table): Table cho phép hiển thị danh sách theo dòng, cộtTable cho phép hiển thị danh sách theo dòng, cột Table cho phép ta tạo các ô để đặt các đối tượng vào đúng Table cho phép ta tạo các ô để đặt các đối tượng vào đúng vị trí của chúng (table chính xác hơn layer) vị trí của chúng (table chính xác hơn layer) Chèn Table vào trang web:Chèn Table vào trang web: click Table click Table Insert Insert Table Table

Hộp thoại Insert table xuất hiệnHộp thoại Insert table xuất hiện

Nhập số dòng (rows), số cột vào ô (columns)

Canh lề table (trái, phải, giữa)

Thiết đặt độ rrọng và độ cao của table

Độ rộng và màu của đường viền

Chọn màu nền

Chọn ảnh nền

Click OK để chấp nhận


Một số thao tác cơ bản với table:Một số thao tác cơ bản với table: Di chuyển giữa các ô:Di chuyển giữa các ô: ấn phím ấn phím “Tab” “Tab” để điđể đi đến ô kế tiếp đến ô kế tiếp hoặchoặc “Shift” + “Tab” “Shift” + “Tab” để đi lùi về ô phía trướcđể đi lùi về ô phía trước Chọn một hoặc nhiều dòng:Chọn một hoặc nhiều dòng: Chọn 1 dòng: click vào ô đầu tiên của dòng Chọn 1 dòng: click vào ô đầu tiên của dòng ấn giữ phím ấn giữ phím Shift Shift click vào ô cuối cùng của dòng. click vào ô cuối cùng của dòng. Chọn nhiều dòng: click vào ô đầu tiên của dòng đầu tiên cần Chọn nhiều dòng: click vào ô đầu tiên của dòng đầu tiên cần chọn chọn ấn giữ phím Shift ấn giữ phím Shift click vào ô cuối của dòng cuối click vào ô cuối của dòng cuối cần chọncần chọn Chọn một hoặc nhiều cột:Chọn một hoặc nhiều cột: Chọn 1 cột: click vào ô đầu tiên của cột Chọn 1 cột: click vào ô đầu tiên của cột ấn giữ phím Shift ấn giữ phím Shift click vào ô cuối cùng của cột click vào ô cuối cùng của cột Chọn nhiều cột: click vào ô đầu tiên của cột đầu tiên cần Chọn nhiều cột: click vào ô đầu tiên của cột đầu tiên cần chọn chọn ấn giữ phím Shift ấn giữ phím Shift click vào ô cuối của cột cuối cần click vào ô cuối của cột cuối cần chọnchọn


Thêm dòng mới vào bảng:Thêm dòng mới vào bảng: Thêm một dòng mới vào cuối bảng:Thêm một dòng mới vào cuối bảng: click vào ô cuối cùng click vào ô cuối cùng của bảng (ô dưới phải) của bảng (ô dưới phải) ấn phím ấn phím “Tab”“Tab” Thêm một hoặc nhiều dòng tại vị trí bất kỳ:Thêm một hoặc nhiều dòng tại vị trí bất kỳ: Click vào vị trí (dòng) cần thêmClick vào vị trí (dòng) cần thêm Click Table Click Table Insert Insert Rows or Columns Rows or Columns

Hộp thoại Insert Rows or Columns xuất hiệnHộp thoại Insert Rows or Columns xuất hiện

2. Thêm vào phía bên dưới dòng hiện hành

3. Thêm vào phía trên dòng hiện hành

Click OK để thêm

1. Nhập số dòng cần thêm


Thêm cột mới vào bảng:Thêm cột mới vào bảng: Thêm một cột mới vào bảng:Thêm một cột mới vào bảng: click phải vào cột cần thêm click phải vào cột cần thêm Insert columns. Cột mới sẽ được thêm vào trước cột hiện tại.Insert columns. Cột mới sẽ được thêm vào trước cột hiện tại. Thêm một hoặc nhiều cột tại vị trí bất kỳ:Thêm một hoặc nhiều cột tại vị trí bất kỳ: Click vào vị trí (cột) cần thêmClick vào vị trí (cột) cần thêm Click Table Click Table Insert Insert Rows or Columns Rows or Columns

Hộp thoại Insert Rows or Columns xuất hiệnHộp thoại Insert Rows or Columns xuất hiện

1. Click chọn Columns

3. Thêm vào phía bên trái cột hiện hành

3. Thêm vào phía bên phải cột hiện hành

Click OK để thêm

2. Nhập số cột cần thêm


Xóa cột:Xóa cột: Chọn cột cần xóaChọn cột cần xóa Click phải vào cột vừa chọn Click phải vào cột vừa chọn Delete columns Delete columns Hoặc: Click Table Hoặc: Click Table Delete columns Delete columns


Trộn (Merge) nhiều ô:Trộn (Merge) nhiều ô: Chọn các ô cần trộnChọn các ô cần trộn Click phải vào các ô được chọn Click phải vào các ô được chọn Merger cells Merger cells Hoặc: Click Table Hoặc: Click Table Merge cells Merge cells

Click phải vào các ô vừa chọn Merge cells


Tách (split) một ô thành nhiều ô:Tách (split) một ô thành nhiều ô: Chọn ô cần táchChọn ô cần tách Click phải vào ô được chọn Click phải vào ô được chọn Split cells Split cells Hoặc: Click Table Hoặc: Click Table Split cells Split cells

Click phải vào ô cần tách Split cells

Hộp thoại Split cells xuất hiệnHộp thoại Split cells xuất hiện

1. Trộn thành nhiều cột

1. Trộn thành nhiều dòng

3. Click OK để trộn

2. Nhập số lượng dòng/cột cần trộn


Định dạng table: gồm các dịnh dạng chínhĐịnh dạng table: gồm các dịnh dạng chính Định dạng đường viền (border)Định dạng đường viền (border) Định dạng ảnh nền, màu nềnĐịnh dạng ảnh nền, màu nền Thực hiện:Thực hiện: click vào table cần định dạng click vào table cần định dạng Table Table Properties.Properties.

Định dạng BorderĐịnh dạng Border

2. Chọn màu đường viền

1. Chọn mẫu đường viền

2. Độ rộng đường viền

4. Khoảng cách từ đường viền đến chữ

5. Click OK để thiế đặt

Định dạng ảnh nền, màu nềnĐịnh dạng ảnh nền, màu nền

Chọn màu nền

Click OK để thiết đặt

Chọn ảnh nền


Làm việc với khung (Frame):Làm việc với khung (Frame): Một trang web có thể chứa nhiều frameMột trang web có thể chứa nhiều frame Mỗi Frame chứa một trang web Mỗi Frame chứa một trang web Frame giúp cho trình duyệt cùng một lúc có thể hiển thị một Frame giúp cho trình duyệt cùng một lúc có thể hiển thị một hoặc nhiều trang web trong cùng 1 cửa sổhoặc nhiều trang web trong cùng 1 cửa sổ Tuy nhiên không phải mọi trình duyệt điều hỗ trợ frameTuy nhiên không phải mọi trình duyệt điều hỗ trợ frame Tạo một trang web có frame ta thực hiện:Tạo một trang web có frame ta thực hiện: Click mũi tên bên cạnh biểu tượng New Click mũi tên bên cạnh biểu tượng New Page Page Hộp thoại Page template xuất hiện Hộp thoại Page template xuất hiện Frames pages Frames pages

Chọn mẫu

Hiển thị mẫu của trang

Click OK

Chèn trang web đã có vào frame

Tạo trang web mới cho frame


Định dạng khung:Định dạng khung: Click phải vào vùng trống trên khung Click phải vào vùng trống trên khung Frame Properties Frame Properties Hộp thoại Frame Properties xuất hiệnHộp thoại Frame Properties xuất hiện

Chọn trang web cần chèn vào frame

Chiều cao và chiều rộng của frame

Cho phép điều chỉnh kích thướt của frame khi hiển thị

Click OK để đồng ý

Xuất hiện các thanh cuộn khi cần thiết


Chèn các thanh siêu liên kết:Chèn các thanh siêu liên kết: FrontPage 2003 hỗ trợ các thanh siêu liên kết đa dạngFrontPage 2003 hỗ trợ các thanh siêu liên kết đa dạng Thực hiện: Click Insert Thực hiện: Click Insert Navigation Navigation

Chọn kiểu thanh liên kết

Click Next

Chọn kiểu thanh liên kết

Click Next

Chọn kiểu hiển thị

Click Finish

Chèn thêm liên kết mới

Xóa liên kết đang chọn

Click OK

Chỉnh sửa liên kết

Di chuyển thứ tự liên kết


Chèn đối tượng Calendar:Chèn đối tượng Calendar: FrontPage 2003 hỗ trợ đối tượng Calendar, hiển thị dương FrontPage 2003 hỗ trợ đối tượng Calendar, hiển thị dương lịch từ năm 1900 đến năm 2100lịch từ năm 1900 đến năm 2100 Thực hiện: Click Insert Thực hiện: Click Insert Web component Web component

Chọn Advanced

controls

Chọn AtiveX control

Click Next

Để lịch hiển thị ngày hiện tại Để lịch hiển thị ngày hiện tại Thêm Thêm đoạn mã sau vào cuối trang web (trong đoạn mã sau vào cuối trang web (trong chế độ code của FrontPage):chế độ code của FrontPage):<Script Language = “JavaScript"><Script Language = “JavaScript"> var obj = var obj = document.getElementById("Calendar1");document.getElementById("Calendar1"); var d = new Date();var d = new Date(); obj.Year = d.getFullYear();obj.Year = d.getFullYear(); obj.Month = d.getMonth()+ 1;obj.Month = d.getMonth()+ 1; obj.Day = d.getDate();obj.Day = d.getDate();</Script></Script>

CHƯƠNG V: MULTIMEDIA HÓA TRANG WEBCHƯƠNG V: MULTIMEDIA HÓA TRANG WEB

Multimedia hóa trang web làm cho nó trở nên sinh động, thu Multimedia hóa trang web làm cho nó trở nên sinh động, thu hút nhiều người truy cập hơn. Tuy nhiên, phải chú ý đến dung hút nhiều người truy cập hơn. Tuy nhiên, phải chú ý đến dung lượng của các tập tin media để đảm bảo thời gian tải về hợp lýlượng của các tập tin media để đảm bảo thời gian tải về hợp lý Chèn ảnh vào trang web:Chèn ảnh vào trang web: Insert Insert Picture Picture Chọn “Clip art”: nếu ta muốn chèn từ bộ sưu tập ảnh của Chọn “Clip art”: nếu ta muốn chèn từ bộ sưu tập ảnh của FrontPageFrontPage Chọn “From File”: nếu file ảnh đã tồn tại trên đĩaChọn “From File”: nếu file ảnh đã tồn tại trên đĩa Chú ý:Chú ý: ảnh phải được chép vào thư mục “ ảnh phải được chép vào thư mục “ImagesImages” của web ” của web sitesite

Click chọn

CHƯƠNG V: MULTIMEDIA TRANG WEB (tt)CHƯƠNG V: MULTIMEDIA TRANG WEB (tt)

Chú ý:Chú ý: Sau khi chèn xong ta phải Sau khi chèn xong ta phải savesave trang web lại trang web lại Nếu file ảnh vừa chèn chưa có trong web site thì màn hình Nếu file ảnh vừa chèn chưa có trong web site thì màn hình Save embedded files xuất hiện để yêu cầu chúng ta lưu lại file Save embedded files xuất hiện để yêu cầu chúng ta lưu lại file ảnh vừa chènảnh vừa chèn

2. Chọn thư mục Images

3. Click OK

Đổi tên file nếu cần thiết

1. Click Change Folder

4. Click OK

CHƯƠNG V: MULTIMEDIA HÓA TRANG WEB (tt)CHƯƠNG V: MULTIMEDIA HÓA TRANG WEB (tt)

Đưa bộ sưu tập ảnh vào trang web:Đưa bộ sưu tập ảnh vào trang web: Bộ sưu tập ảnh có thể hiện thị một Album ảnh lên trang Bộ sưu tập ảnh có thể hiện thị một Album ảnh lên trang web web FrontPage 2003 hỗ trợ 4 kiểu hiển thị bộ sưu tập ảnhFrontPage 2003 hỗ trợ 4 kiểu hiển thị bộ sưu tập ảnh Thực hiện:Thực hiện: Chọn Insert Chọn Insert Picture Picture New Photo Gallery. New Photo Gallery. Hộp thọai Photo Gallery xuất hiệnHộp thọai Photo Gallery xuất hiện Chú ý:Chú ý: Ảnh phải được chép vào thư mục “Images” trước khi chèn Ảnh phải được chép vào thư mục “Images” trước khi chèn vào bộ sưu tập ảnhvào bộ sưu tập ảnh Nếu ảnh chưa có thì sau khi save trang web Nếu ảnh chưa có thì sau khi save trang web xuất hiện xuất hiện hộp thoại Save embedded files hộp thoại Save embedded files thực hiện các thao tác thực hiện các thao tác giống như trướcgiống như trước

2. Sau khi chèn ảnh xong Layout

3. Chọn kiểu hiển thị

4. Click OK

1. Click Add Picture from file

6. Click OK


Chèn chữ nghệ thuật (Word Art):Chèn chữ nghệ thuật (Word Art): Thực hiện:Thực hiện: Chọn Insert Chọn Insert Picture Picture Word art Word art

Nhập nội dung

1. Chọn mẫu

2. Click OK để mở hộp thoại Edit WordArt Text

5. Click OK để kết thúc

Điều chỉnh nội dung dòng chữ

Điều chỉnh mẫu WordArt

Điều chỉnh hình dáng


Chèn file âm thanh, video:Chèn file âm thanh, video: Các file âm thanh được dùng phổ biến là: *.wma, *.mid (các Các file âm thanh được dùng phổ biến là: *.wma, *.mid (các file này có dung lượng nhỏ hơn các file *.mp3, *.wav) file này có dung lượng nhỏ hơn các file *.mp3, *.wav) Các file video được dùng phổ biến là: *.wmv, *.aviCác file video được dùng phổ biến là: *.wmv, *.avi Thực hiện:Thực hiện: Chọn Insert Chọn Insert Web component Web component Hộp thoại Hộp thoại Web component xuất hiệnWeb component xuất hiện

Chú ý: File âm thanh, video phải được chép vào thư mục “Media” của web site trước khi chèn

Nếu file âm thanh, video chưa có thì khi save trang web sẽ Nếu file âm thanh, video chưa có thì khi save trang web sẽ xuất hiện hộp thoại Save embedded filesxuất hiện hộp thoại Save embedded files

Click chọn Change Folder Click chọn Change Folder chọn thư mục “ chọn thư mục “MediaMedia” ” OK OK OK OK

CHƯƠNG V: MULTIMEDIA HÓA VÀ XUẤT BẢN CHƯƠNG V: MULTIMEDIA HÓA VÀ XUẤT BẢN WEB SITE (tt)WEB SITE (tt)

Chèn file hoạt hình Flash:Chèn file hoạt hình Flash: Thực hiện:Thực hiện: Chọn Insert Chọn Insert Picture Picture Movie in flash format Movie in flash format

Hộp thoại Select file xuất hiệnHộp thoại Select file xuất hiện

CHƯƠNG V: MULTIMEDIA HÓA VÀ XUẤT BẢN CHƯƠNG V: MULTIMEDIA HÓA VÀ XUẤT BẢN WEB SITE (tt)WEB SITE (tt)

Sử dụng đối tượng MS Window Media Player:Sử dụng đối tượng MS Window Media Player:Thực hiện:Thực hiện: Chọn Insert Chọn Insert Advanced Controls Advanced Controls ActiveX ActiveX control control Windows Media Player Windows Media Player Click nút Finish Click nút Finish

Click phải vào đối tượng Media player ActiveX Control Properties

Cần chỉ định File Media được thực hiện khi trang web được tải Cần chỉ định File Media được thực hiện khi trang web được tải về trình duyệtvề trình duyệt

Chú ý:Chú ý: File được thực hiện File được thực hiện bắt buộcbắt buộc phải được đặt trong thư phải được đặt trong thư mục “mục “MediaMedia” của web site” của web site

Chọn thư mục Media

Chọn file cần chèn

Click Open để chèn

Sau khi chèn xong ta điều chỉnh lại đường dẫn cho File Sau khi chèn xong ta điều chỉnh lại đường dẫn cho File vừa chèn như sau:vừa chèn như sau:

Xóa bỏ phần này để tạo đường dẫn

tương đối

Click OK để kết thúc

thiet ke web voi frontpage 2003

Documents