1. THIẾT KẾ WEB VỚI MICROSOFTTHIẾT KẾ WEB VỚI MICROSOFT
FRONTPAGE 2003FRONTPAGE 2003
2. 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 FrontPage 2003Chương III: Tạo trang web với FrontPage 2003
Chương IV: Xử lý văn bảnChương IV: Xử lý văn bản && một số đối tượng khácmột số đối tượng khác
3. 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
4. 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 (UUniformniform RResourceesource 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)
5. 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://www.pud.edu.vnhttp://www.pud.edu.vn
Xử lý yêu cầuXử lý yêu cầu
Web Server
6. 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ạngLà 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 browserHTML 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 inVí dụ: Hiển thị dòng chữ “Chao các bạn !” dạng in
đậmđậm
<B>Chào các bạn</B><B>Chào các bạn</B>
Chương II:Chương II: NGÔN NGỮ HTMLNGÔN NGỮ HTML
((HHyperyperttextext MMarkuparkup LLanguage)anguage)
7. 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>
<!-- Nội dung trang web --><!-- Nội dung trang web -->
</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 trongThẻ <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)
8. 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 <!-- và dấu -->Chú thích trong HTML: dùng dấu <!-- và dấu -->
<!-- Nội dung chú thích --><!-- Nội dung chú thích -->
Một số thẻ HTML thông dụng (tt)Một số thẻ HTML thông dụng (tt)
9. Ví dụ:Ví dụ: Tạo trang web với tiêu đề là: “Giới thiệu” và in ra dòngTạ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>
<B><I>Chào các bạn !</I></B><B><I>Chào các bạn !</I></B>
</BODY></BODY>
</HTML></HTML>
Một số thẻ HTML thông dụng (tt)Một số thẻ HTML thông dụng (tt)
10. Các thẻ định dạng văn bản:Các thẻ định dạng văn bản:
Một số thẻ HTML thông dụng (tt)Một số thẻ HTML thông dụng (tt)
Tên thẻTên thẻ Giải thíchGiải thích Ví dụVí dụ
<B>…</B><B>…</B> Dạng chữ đậmDạng chữ đậm <B>Hello world !</B><B>Hello world !</B>
<I>…</I><I>…</I> Dạng chữ nghiêngDạng chữ nghiêng <I>Hello world !</I><I>Hello world !</I>
<U>…</U><U>…</U> Dạng chữ gạch chânDạng chữ gạch chân <U>Hello world !</U><U>Hello world !</U>
<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>
<Font color=RGB<Font color=RGB
face=tên fontface=tên font
Size=“N”> ……Size=“N”> ……
</Font></Font>
Đị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
<Font color=“Blue”<Font color=“Blue”
face=“Arial”>Hello worldface=“Arial”>Hello world
</Font></Font>
<Sup>…</Sup><Sup>…</Sup> Tạo chỉ số trênTạo chỉ số trên X<Sup>2</Sup>X<Sup>2</Sup> XX22
<Sub>…</Sub><Sub>…</Sub> Tạo chỉ số dướiTạo chỉ số dưới H<Sub>2</Sub>OH<Sub>2</Sub>O HH22OO
11. Các thẻ định dạng văn bản:Các thẻ định dạng văn bản:
Một số thẻ HTML thông dụng (tt)Một số thẻ HTML thông dụng (tt)
Tên thẻTên thẻ Giải thíchGiải thích Ví dụVí dụ
<BR><BR> Xuống dòngXuống dòng
<p align=“…” ><p align=“…” >
…………
</p></p>
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ề
<p align=“Left”><p align=“Left”>
Hello world !Hello world !
</p></p>
<HR Align=“…”<HR Align=“…” ColorColor
= “…”= “…”
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” />
12. Các thuộc tính quan trọng của thẻ <P></P>:Các thuộc tính quan trọng của thẻ <P></P>:
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ảiDirection: Chỉ định chiều văn bản (từ trái sang phải “ltr”“ltr”
hoặc từ phải sang tráihoặc từ phải sang trái “rtl”“rtl”))
Một số thẻ HTML thông dụng (tt)Một số thẻ HTML thông dụng (tt)
13. 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. Sin2
x + Cos2
x = 1
3. H2 + O2 H2O
Giải
1. <P Align=“justify” Style=“Margin-top:3px ; Margin-bottom:
3px ; Direction: rtl”>….</P>
2. Sin<Sup>2</Sup>x + Cos<Sup>2</Sup>x = 1
3. H<Sub>2</Sub> + O<Sub>2</Sub> H<Sub>2</Sub>O
Một số thẻ HTML thông dụng (tt)Một số thẻ HTML thông dụng (tt)
14. Các thẻ hình ảnh và âm thanhCác thẻ hình ảnh và âm thanh::
Một số thẻ HTML thông dụng (tt)Một số thẻ HTML thông dụng (tt)
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ỉ địnhHeight: 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 = “…”>
15. Một số thẻ HTML thông dụng (tt)Một số thẻ HTML thông dụng (tt)
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ặcLoop: 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.
16. Một số thẻ HTML thông dụng (tt)Một số thẻ HTML thông dụng (tt)
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):
17. Một số thẻ HTML thông dụng (tt)Một số thẻ HTML thông dụng (tt)
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):
18. Một số thẻ HTML thông dụng (tt)Một số thẻ HTML thông dụng (tt)
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.
19. Một số thẻ HTML thông dụng (tt)Một số thẻ HTML thông dụng (tt)
<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ảngBackground: chỉ định file ảnh nền của bảng
Bgcolor: màu nền của bảngBgcolor: 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 dungCellpadding: 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)
20. Một số thẻ HTML thông dụng (tt)Một số thẻ HTML thông dụng (tt)
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òngBgcolor: 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ênValign: 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>
Tạo bảng (Table)Tạo bảng (Table)
21. Một số thẻ HTML thông dụng (tt)Một số thẻ HTML thông dụng (tt)
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ênValign: 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>
Tạo bảng (Table)Tạo bảng (Table)
22. 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ủaTìm hiểu đối tượng (khách hàng, người truy cập) của
web site.web 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.
23. 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ácCầ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áchNế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 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ụngCần chú ý sử dụng đường dẫn tương đốiđường dẫn tương đối khi đưa hìnhkhi đư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 sitefile ảnh/âm thanh vào thư mục của web site trước khitrước khi chènchè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, âmGiao 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.
24. 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ấpCầ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.
25. CHƯƠNG III: TẠO MỘT TRANG WEB VỚICHƯƠ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:
26. 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ế
27. CHƯƠNG III: TẠO MỘT TRANG WEB VỚICHƯƠ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
28. 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
29. 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
30. 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
31. CHƯƠNG III: TẠO MỘT TRANG WEB VỚICHƯƠNG III: TẠO MỘT TRANG WEB VỚI
FRONTPAGE 2003 (tt)FRONTPAGE 2003 (tt)
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
32. CHƯƠNG III: TẠO MỘT TRANG WEB VỚICHƯƠNG III: TẠO MỘT TRANG WEB VỚI
FRONTPAGE 2003 (tt)FRONTPAGE 2003 (tt)
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
33. 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
34. CHƯƠNG III: TẠO MỘT TRANG WEB VỚICHƯƠNG III: TẠO MỘT TRANG WEB VỚI
FRONTPAGE 2003 (tt)FRONTPAGE 2003 (tt)
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
35. CHƯƠNG III: TẠO MỘT TRANG WEB VỚICHƯƠNG III: TẠO MỘT TRANG WEB VỚI
FRONTPAGE 2003 (tt)FRONTPAGE 2003 (tt)
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
37. CHƯƠNG III: TẠO MỘT TRANG WEB VỚICHƯƠNG III: TẠO MỘT TRANG WEB VỚI
FRONTPAGE 2003 (tt)FRONTPAGE 2003 (tt)
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
38. 1. Chọn tab General
2. Nhập tiêu đề
3. Click OK
39. CHƯƠNG III: TẠO MỘT TRANG WEB VỚICHƯƠNG III: TẠO MỘT TRANG WEB VỚI
FRONTPAGE 2003 (tt)FRONTPAGE 2003 (tt)
Đị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
40. 1. Chọn tab Advanced
2. Nhập giá trị để định
lề, trên, trái, dưới, phải
3. Click Ok
41. CHƯƠNG III: TẠO MỘT TRANG WEB VỚICHƯƠNG III: TẠO MỘT TRANG WEB VỚI
FRONTPAGE 2003 (tt)FRONTPAGE 2003 (tt)
Đị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 FormatClick nút Format FontFont
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:
42. 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
43. 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ữ
44. CHƯƠNG III: TẠO MỘT TRANG WEB VỚICHƯƠNG III: TẠO MỘT TRANG WEB VỚI
FRONTPAGE 2003 (tt)FRONTPAGE 2003 (tt)
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
45. CHƯƠNG III: TẠO MỘT TRANG WEB VỚICHƯƠNG III: TẠO MỘT TRANG WEB VỚI
FRONTPAGE 2003 (tt)FRONTPAGE 2003 (tt)
Thiết đặt màu nền:
Mở hộp thoại Page properties
Chọn tab Formatting Background Chọn màu OK
46. CHƯƠNG III: TẠO MỘT TRANG WEB VỚICHƯƠNG III: TẠO MỘT TRANG WEB VỚI
FRONTPAGE 2003 (tt)FRONTPAGE 2003 (tt)
Đư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
47. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐICHƯƠ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ênKhi 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ímvà ấ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ímcần chọn -> ấn giữ phím “Shift”“Shift” ->->
click chuột vàoclick 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ímHoặ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: ↑↑,, ↓↓,, →→,, ←←
48. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐICHƯƠ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ímphím “End”“End”
Hoặc đưa con nháy về cuối dòngHoặ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épChọn khối cần chép R-Click vào khối vừa chọnR-Click vào khối vừa chọn CopyCopy
Hoặc chọn khối cần chépHoặ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épChọn khối cần chép R-Click vào khối vừa chọnR-Click vào khối vừa chọn Cut.Cut.
Hoặc chọn khối cần chépHoặ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ánR-Click vào vị trí cần dán PastePaste
Hoặc ấn tổ hợp phím:Hoặc ấn tổ hợp phím: “Ctrl + V”“Ctrl + V”
49. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐICHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)TƯỢNG KHÁC (tt)
Định dạng đoạn:Định dạng đoạn: gồm các định dạng saugồ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ạngChọn đoạn cần định dạng FormatFormat
ParagraphParagraph
1. Chọn đoạn1. Chọn đoạn
2. Click Format2. Click Format
ParagraphParagraph
50. Canh lề cho đoạnCanh lề cho đoạn
Khoảng các giữa cácKhoả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
51. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐICHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)TƯỢNG KHÁC (tt)
Định dạng ký tựĐịnh dạng ký tự gồm các định dạng saugồ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ạngChọn đoạn cần định dạng FormatFormat 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
52. 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ữ
53. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐICHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)TƯỢNG KHÁC (tt)
Chèn các ký tự đặc biệt (Symbol):Chèn các ký tự đặc biệt (Symbol):
Click InsertClick Insert SymbolSymbol chọn symbol cần chènchọn symbol cần chèn click nútclick nút
InsertInsert
Tạ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ạnChọn các ký tự làm tiêu đề của đoạn InsertInsert
Bookmark. Hộp thoại Bookmark xuất hiệnBookmark. Hộp thoại Bookmark xuất hiện
55. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐICHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)TƯỢNG KHÁC (tt)
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ínhLiê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 InsertChọ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ệnHộp thoại Insert hyperlink xuất hiện click nút Bookmarkclick nút Bookmark
Chọn tên Bookmark cần liên kết đếnChọn tên Bookmark cần liên kết đến click OKclick OK
58. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐICHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)TƯỢNG KHÁC (tt)
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 InsertChọ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ệnHộp thoại Insert hyperlink xuất hiện click chọn trang webclick chọn trang web
cần liên kếtcần liên kết OKOK
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 ô
AddressAddress click OKclick OK
59. 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
60. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐICHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)TƯỢNG KHÁC (tt)
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 InsertChọn Insert Web component. Hộp thoại Insert webWeb 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:
61. 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ãn
Số lượng
Dạng chuyển
động
Màu nền
Font, màu, kích
thướt chữ
Click OK để thiết
đặt
62. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐICHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)TƯỢNG KHÁC (tt)
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ể diLayer đượ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 Insertclick Insert Layers (hoặc clickLayers (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ụ
63. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐICHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)TƯỢNG KHÁC (tt)
Nhập văn bản:Nhập văn bản: Click vào một vị trí trên LayerClick vào một vị trí trên Layer con nháycon 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ênClick vào một vị trí trên
LayerLayer chèn các đối tượng bình thườngchè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 LayerSau 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:
64. Đ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
65. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐICHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)TƯỢNG KHÁC (tt)
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 đúngTable 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 Tableclick Table InsertInsert TableTable
66. 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
67. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐICHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)TƯỢNG KHÁC (tt)
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òngChọn 1 dòng: click vào ô đầu tiên của dòng ấn giữ phímấn giữ phím
ShiftShift 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ênChọn nhiều dòng: click vào ô đầu tiên của dòng đầu tiên
cần chọncần chọn ấn giữ phím Shiftấn giữ phím Shift click vào ô cuối của dòngclick vào ô cuối của dòng
cuối cần chọncuối cầ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ộtChọn 1 cột: click vào ô đầu tiên của cột ấn giữ phímấn giữ phím
ShiftShift click vào ô cuối cùng của cộtclick 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ầnChọn nhiều cột: click vào ô đầu tiên của cột đầu tiên cần
chọnchọn ấn giữ phím Shiftấn giữ phím Shift click vào ô cuối của cột cuối cầnclick vào ô cuối của cột cuối cần
chọnchọn
68. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐICHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)TƯỢNG KHÁC (tt)
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ùngclick 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 TableClick Table InsertInsert Rows or ColumnsRows or Columns
69. 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
70. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐICHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)TƯỢNG KHÁC (tt)
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êmclick 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 TableClick Table InsertInsert Rows or ColumnsRows or Columns
71. 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
72. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐICHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)TƯỢNG KHÁC (tt)
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ọnClick phải vào cột vừa chọn Delete columnsDelete columns
Hoặc: Click TableHoặc: Click Table Delete columnsDelete columns
73. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐICHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)TƯỢNG KHÁC (tt)
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ọnClick phải vào các ô được chọn Merger cellsMerger cells
Hoặc: Click TableHoặc: Click Table Merge cellsMerge cells
Click phải vào các ô vừa
chọn Merge cells
74. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐICHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)TƯỢNG KHÁC (tt)
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ọnClick phải vào ô được chọn Split cellsSplit cells
Hoặc: Click TableHoặc: Click Table Split cellsSplit cells
Click phải vào ô cần
tách Split cells
75. 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
76. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐICHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)TƯỢNG KHÁC (tt)
Đị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ạngclick vào table cần định dạng TableTable
Properties.Properties.
77. Đị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
78. Đị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
79. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐICHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)TƯỢNG KHÁC (tt)
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 webMỗ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ộtFrame 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 NewClick mũi tên bên cạnh biểu tượng New PagePage
Hộp thoại Page template xuất hiệnHộp thoại Page template xuất hiện Frames pagesFrames pages
82. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐICHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)TƯỢNG KHÁC (tt)
Định dạng khung:Định dạng khung:
Click phải vào vùng trống trên khungClick phải vào vùng trống trên khung Frame PropertiesFrame 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
83. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐICHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)TƯỢNG KHÁC (tt)
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 InsertThực hiện: Click Insert NavigationNavigation
Chọn kiểu thanh liên
kết
Click Next
84. Chọn kiểu thanh liên
kết
Click Next
Chọn kiểu hiển thị
Click Finish
85. 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
86. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐICHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)TƯỢNG KHÁC (tt)
Chèn đối tượng Calendar:Chèn đối tượng Calendar:
FrontPage 2003 hỗ trợ đối tượng Calendar, hiển thị dươngFrontPage 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 InsertThực hiện: Click Insert Web componentWeb component
88. Để lịch hiển thị ngày hiện tạiĐể lịch hiển thị ngày hiện tại ThêmThê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>
89. 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, thuMultimedia 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 dunghú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:
InsertInsert PicturePicture
Chọn “Clip art”: nếu ta muốn chèn từ bộ sưu tập ảnh củaChọ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
92. CHƯƠNG V: MULTIMEDIA TRANG WEB (tt)CHƯƠNG V: MULTIMEDIA TRANG WEB (tt)
Chú ý:Chú ý:
Sau khi chèn xong ta phảiSau khi chèn xong ta phải savesave trang web lạitrang web lại
Nếu file ảnh vừa chèn chưa có trong web site thì màn hìnhNế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 fileSave 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
93. 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 trangBộ sưu tập ảnh có thể hiện thị một Album ảnh lên trang
webweb
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 InsertChọn Insert PicturePicture 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 webNếu ảnh chưa có thì sau khi save trang web xuất hiệnxuất hiện
hộp thoại Save embedded fileshộp thoại Save embedded files thực hiện các thao tácthực hiện các thao tác
giống như trướcgiống như trước
94. 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
95.
96. CHƯƠNG V: MULTIMEDIA HÓA TRANG WEB (tt)CHƯƠNG V: MULTIMEDIA HÓA TRANG WEB (tt)
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 InsertChọn Insert PicturePicture Word artWord art
97. 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
99. CHƯƠNG V: MULTIMEDIA HÓA TRANG WEB (tt)CHƯƠNG V: MULTIMEDIA HÓA TRANG WEB (tt)
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ácCá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 InsertChọn Insert Web componentWeb component Hộp thoạiHộp thoại
Web component xuất hiệnWeb component xuất hiện
100. 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
101. 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 FolderClick chọn Change Folder chọn thư mục “chọn thư mục “MediaMedia”” OKOK
OKOK
102. CHƯƠNG V: MULTIMEDIA HÓA VÀ XUẤT BẢNCHƯƠ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 InsertChọn Insert PicturePicture Movie in flash formatMovie in flash format
104. CHƯƠNG V: MULTIMEDIA HÓA VÀ XUẤT BẢNCHƯƠ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 InsertChọn Insert Advanced ControlsAdvanced Controls ActiveXActiveX
controlcontrol Windows Media PlayerWindows Media Player Click nút FinishClick nút Finish
105. 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ảiCầ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ệnFile đượ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
107. Sau khi chèn xong ta điều chỉnh lại đường dẫn cho FileSau 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