SlideShare une entreprise Scribd logo
1  sur  107
Télécharger pour lire hors ligne
THIẾT KẾ WEB VỚI MICROSOFT
FRONTPAGE 2003
Phan Trọng Tiến
Department of Software Engineering
Hanoi University of Agriculture
Office location: 3rd floor, Administrative building
Office phone: (04)38276346, Ext: 132
Website: http://fita.hua.edu.vn/pttien
Email: ptgtien@hua.edu.vn or phantien84@gmail.com
NỘI DUNG
Chương I: Một số khái niệm cơ bản
Chương II: Ngôn ngữ HTML
Chương III: Tạo trang web với FrontPage 2003
Chương IV: Xử lý văn bản & một số đối tượng khác
Chương V: Multimedia hóa trang web
Chương I: CÁC KHÁI NIỆM CƠ BẢN






Mạng Internet là gì?
Các dịch vụ quan trọng trên mạng Internet
 Dịch vụ FTP
 Dịch vụ Telnet
 Dịch vụ Mail
 Dịch vụ Web
Dịch vụ World Wide Web (Web)
 Trình duyệt Web (Web Browser)
 Máy chủ phục vụ Web (Web Server)
Chương I: CÁC KHÁI NIỆM CƠ BẢN (tt)
 Web site, trang web:
 Trang 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 trang Website
 Website là một vị trí trên Internet (nơi cung cấp dịch vụ
web).
 URL (Uniform Resource Location):
 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:
<Giao thức>://<tên miền>[/Path][/Document]
Ví dụ: http://www.pdu.edu.vn/khoacntt/index.php
Chương I: CÁC KHÁI NIỆM CƠ BẢN (tt)
 Mô hình hoạt động của dịch vụ Web:
Xử lý yêu cầu
Internet

Web Server

HTML
…………
…………
…………
……......

http://www.pud.edu.vn
Chương II: NGÔN NGỮ HTML
(Hypertext Markup Language)
Giới thiệu HTML:
 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)
 HTML dùng các thẻ (tag) để thông báo cho các web browser
hiển thị.
 Hầu hết các web browser đều hiểu được ngôn ngữ HTML
 Cú pháp các thẻ (tag) trong HTML:
 <Tên thẻ [TT1 = <GT1> TT2 = <GT2>...]>...</Tên
thẻ>
 Ví dụ: Hiển thị dòng chữ “Chao các bạn !” dạng in
đậm
<B>Chào các bạn</B>

Chương II: NGÔN NGỮ HTML (tt)








Cấu trúc trang web tĩnh:
<HTML>
<HEAD> <TITLE> … </TITLE> </HEAD>
<BODY>
<!-- Nội dung trang web -->
</BODY>
</HTML>
Một số thẻ HTML thông dụng:
Thẻ <HTML>: Trang web tĩnh được bắt đầu bằng :<HTML>
và kết thúc bằng: </HTM>
Thẻ <HEAD>: Phần đầu của trang web
Thẻ <TITLE>: Đặt tiêu đề cho trang web (thẻ này nằm trong
<HEADER>)
Một số thẻ HTML thông dụng (tt)
Ví dụ: Đặt tiêu đề của trang web là: “Thông báo”
<HEAD>
<TITLE>Thông báo</TITLE>
</HEAD>


Thẻ <BODY>: Chứa nội dung trang web.
<BODY [BACKGROUND=url BGCOLOR=color …]>
Nội dung trang web
</BODY>



Chú thích trong HTML: dùng dấu <!-- và dấu -->
<!-- Nội dung chú thích -->
Một số thẻ HTML thông dụng (tt)


Ví dụ: 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êng
<HTML>
<HEAD>
<TITLE>Giới thiệu</TITLE>
</HEAD>
<BODY>
<B><I>Chào các bạn !</I></B>
</BODY>
</HTML>
Một số thẻ HTML thông dụng (tt)


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

Giải thích

Ví dụ

<B>…</B>

Dạng chữ đậm

<B>Hello world !</B>

<I>…</I>

Dạng chữ nghiêng

<I>Hello world !</I>

<U>…</U>

Dạng chữ gạch chân

<U>Hello world !</U>

<S>…</S>

Dạng chữ gạch giữa

<S>Hello world!</S>

<Font
color=RGB
face=tên
font
Size=“N”> ……
</Font>

Định dạng font chữ:
Color: chỉ định màu
Face: Chỉ định font chữ
Size: kích thước

<Font
color=“Blue”
face=“Arial”>Hello
world
</Font>

<Sup>…</Sup>

Tạo chỉ số trên

X<Sup>2</Sup>  X2

<Sub>…</Sub>

Tạo chỉ số dưới

H<Sub>2</Sub>O  H2O
Một số thẻ HTML thông dụng (tt)


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

Giải thích

Ví dụ

<BR>

Xuống dòng

<p align=“…” >
……
</p>

Tạo đoạn văn bản mới
Align: chỉ định hình thức canh lề

<p align=“Left”>
Hello world !
</p>

<HR Align=“…” Color
= “…”
SIZE = “…”
WIDTH = “…” />

Tạo đường gạch ngang
Color: màu
Size: độ dày (tính bằng pixel)
Width: độ dài (tính bằng pixel)

<HR
Color=“Red”
Size=“10”
Width=“200” />
Một số thẻ HTML thông dụng (tt)
Các thuộc tính quan trọng của thẻ <P></P>:
 Align:
 Left: Canh trái
 Center: Canh giữa
 Right: Canh phải
 justify: Canh đều
 Style:
 Margin-top: Canh lề trên của đoạn
 Margin-left: Canh lề trái của đoạn
 Margin-right: Canh lề phải của đoạn
 Margin-bottom: Canh lề dưới của đoạn
 Direction: Chỉ định chiều văn bản (từ trái sang phải “ltr”
hoặc từ phải sang trái “rtl”)
Một số thẻ HTML thông dụng (tt)
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. <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)


Các thẻ hình ảnh và âm thanh:
Chèn hình vào web:
<IMG src=“…" width=“…" height=“…" border=“…" alt=“…“/>
Các thuộc tính (thẻ IMG):
 Scr: là đường dẫn của file ả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.
 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.
 Border: 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.
 Đưa nhạc nền vào web:
<BGSOUND scr = “…” loop = “…”>

Một số thẻ HTML thông dụng (tt)
Các thuộc tính:
 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”
thì sẽ lặp đến khi chuyển sang trang mới web.
web
 Chèn âm thanh, phim:
<EMBED src = “…” autostart = “…” loop = “N” />
Các thuộc tính:
 Scr: 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.
 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.
web
Một số thẻ HTML thông dụng (tt)
 Tạo các liên kết (Hyper link):


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

<A href = “url” target = “…”>Text </A>
Trong đó:
 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:
 “_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.
 Tạo liên kết đến E-mail:
<A href = "mailto:Địa chỉ E-mail“ >Text</A>
Một số thẻ HTML thông dụng (tt)
 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:
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>
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.
Một số thẻ HTML thông dụng (tt)
 Tạo bảng (Table)
<TABLE align = “…” background = “url” bgcolor = “RGB”
border = “…” cellpadding = “…” width = “…” height=“…" >
Trong đó:
 Align: lề của bảng: “left” hoặc “right”
 Background: chỉ định file ảnh 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)
 Cellpadding: khoảng cách từ các cạnh của ô tới nội dung
của ô (tính bằng pixel)
 Width, Height : độ rộng, cao của bảng (tính theo % hoặc
tính bằng pixel)
Một số thẻ HTML thông dụng (tt)
 Tạo bảng (Table)
Thêm dòng vào bảng:
<TR align = “…” background = “url” bgcolor = “RGB”
valign= “…” > … </TR>
Trong đó:
 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 .
 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
dòng: “top”, “bottom”, “middle”.
Chú ý:
Thẻ <Tr> phải nằm trong thẻ <Table></Table>
Một số thẻ HTML thông dụng (tt)
 Tạo bảng (Table)
Thêm ô vào bảng:
<TD align=“…” background = “url“ bgcolor = “RGB”
rowspan = “N” colspan = “M” valign = “…” > … </TD>
Trong đó:
 Align: lề của ô: “left”, “right” hoặc “center”.
 Background: đường dẫn file ảnh nền của dòng .
 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
dòng: “top”, “bottom”, “middle”.
 Rowspan: số ô trải dài trên N dòng
 Colspan: Số ô trải rộng trên M cột
Chú ý: Thẻ <TD> phải nằm trong thẻ <TR></TR>
THIẾT KẾ MỘT WEB SITE THẾ NÀO ?
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 site.
 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:
 Chức năng của từng trang
 Cấu trúc của các trang
 Mố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)
 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.
THIẾT KẾ MỘT WEBSITE THẾ NÀO ? (tt)
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
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 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 đường dẫn tương đối khi đưa hình
ả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 trước khi chèn
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
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.
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.
 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 Internet
 Đưa web site vào vận hành thử nghiệm.
 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, …)
 Chỉnh sửa lần cuối.
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
web site nếu cần thiết.
CHƯƠNG III: TẠO MỘT TRANG WEB VỚI
FRONTPAGE 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

Đóng trang
web hiện tại

Task pane

Vùng thiết kế

Chế độ
làm việc

Thanh cuộn
ngang – dọc
CHƯƠNG III: TẠO MỘT TRANG WEB VỚI
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
1. Click
vào đây

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

 Hộp thoại Web site Templates xuất hiện
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

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

2. Nhập tên thư mục là
“Media”  ấn Enter
CHƯƠNG III: TẠO MỘT TRANG WEB VỚI
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

Click save
để lưu trang
web
Nhập tên
trang web
CHƯƠNG III: TẠO MỘT TRANG WEB VỚI
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
1. Click
vào đây
2.Click vào
để mở web
site

 Hộp thoại Open site xuất hiện
1. Click chọn nơi
chứa web site

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

3. Click Open để
mở web site
CHƯƠNG III: TẠO MỘT TRANG WEB VỚI
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
CHƯƠNG III: TẠO MỘT TRANG WEB VỚI
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
Xem trên trình duyệt web
CHƯƠNG III: TẠO MỘT TRANG WEB VỚI
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
1. Chọn tab General

2. Nhập tiêu đề

3. Click OK
CHƯƠNG III: TẠO MỘT TRANG WEB VỚI
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
1. Chọn tab Advanced

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

3. Click Ok
CHƯƠNG III: TẠO MỘT TRANG WEB VỚI
FRONTPAGE 2003 (tt)
 Định dạng font chữ, kích thướt, màu chữ mặc định:

 Mở hộp thoại Page properties
 Chọn tab Advanced
 Click chọn nút Body style. Hộp thoại Modify style xuất hiện
 Click nút Format  Font

 Chọn các giá trị cần thiết rồi click OK để thiết lập
 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, …

Nhập vào kích cỡ chữ
(ví dụ: 12px)
Chọn màu chữ

Click Ok để thiết đặt
CHƯƠNG III: TẠO MỘT TRANG WEB VỚI
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


CHƯƠNG III: TẠO MỘT TRANG WEB VỚI
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





CHƯƠNG III: TẠO MỘT TRANG WEB VỚI
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



CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢ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
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 (“ ←”)
nằm trên phím “Enter”
 Xoá một ký tự bên phải con nháy: ấn phím “Delete”
 Xoá nhiều ký tự cùng lúc: tô đen (chọn khối) ký tự cần xoá
và ấn phím “Delete”
 Chọn khối (nhiều ký tự):
 Đặt con nháy ở đầu khối cần chọn -> ấn giữ phím “Shift” ->
click chuột vào vị trí kết thúc của khối cần chọn.
 Hoặc ấn giữ phím “shift” và ấn các phím mũi tên: ↑, ↓, →, ←
CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)
 Chọn một dòng:
 Đưa con nháy về đầu dòng  ấn giữ phím “Shift”  ấn
phím “End”
 Hoặc đưa con nháy về cuối dòng  ấn giữ phím “Shift” 
ấn phím “Home”
 Chép (copy) một khối:
 Chọn khối cần chép  R-Click vào khối vừa chọn  Copy
 Hoặc chọn khối cần chép  ấn tổ hợp phím: “Ctrl + C”
 Cắt (cut) một khối:
 Chọn khối cần chép  R-Click vào khối vừa chọn  Cut.
 Hoặc chọn khối cần chép  ấn tổ hợp phím: “Ctrl + X”
 Dán (paste) một khối đã được copy hoặc cắt:
 R-Click vào vị trí cần dán  Paste
 Hoặc ấn tổ hợp phím: “Ctrl + V”
CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)
 Định dạng đoạn: gồm các định dạng sau
 Canh lề đoạn (trái, phải, giữa, đều)
 Khoảng cách giữa các đoạn
 Khoảng cách giữa các dòng
 Thực hiện: Chọn đoạn cần định dạng  Format 
Paragraph

2. Click Format
 Paragraph
1. Chọn đoạn
Canh lề cho đoạn

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

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

Click Ok
CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)
 Định dạng ký tự gồm các định dạng sau
 Font chữ, kiểu chữ, kích thướt
 Màu chữ, màu nền
 Thực hiện: Chọn đoạn cần định dạng  Format  Font.
Hộ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, …

Nhập vào kích cỡ chữ
(ví dụ: 12px)
Chọn màu chữ

Click Ok để thiết đặt
CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)
 Chèn các ký tự đặc biệt (Symbol):
 Click Insert  Symbol  chọn symbol cần chèn  click nút
Insert
Tạo các Bookmark trong trang:
 Bookmark: 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
 Thực hiện: Chọn các ký tự làm tiêu đề của đoạn  Insert
 Bookmark. Hộp thoại Bookmark xuất hiện
Nhập tên Bookmark







Click OK
CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)
 Chè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
trang đó)
 Liê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 các ký tự làm liên kết
 Chọn Insert  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ụ
 Hộp thoại Insert hyperlink xuất hiện  click nút Bookmark
 Chọn tên Bookmark cần liên kết đến  click OK
Front page

1. Click Bookmark
4. Click OK




2. Chọn Bookmark



3. Click OK
CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)
 Chèn liên kết ngoài:
 Chọn các ký tự làm liên kết
 Chọn Insert  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ụ
 Hộp thoại Insert hyperlink xuất hiện  click chọn trang web
cần liên kết  OK
 Hoặc nhập vào địa chỉ (của trang web trên mạng) vào ô
Address  click OK
1. 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ạng




CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)
 Chèn dòng chữ chạy (marquee) trên trang web:
 Chọn các ký tự cần chèn
 Chọn Insert  Web component. Hộp thoại Insert web
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ện
Số lượng

Thời gian trì hoãn

Hướng chuyển
động

Dạng chuyển
động

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

Click OK để thiết
đặt
CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)
 Chèn Layer:
 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ó
 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 ý)
 Chèn layer vào trang web: click Insert  Layers (hoặc click
vào biểu tượng Layer ( ) trên thanh công cụ
CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)
 Nhập văn bản: Click vào một vị trí trên Layer  con nháy
xuấ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: Click vào một vị trí trên
Layer  chèn các đối tượng bình thường
 Điều chỉnh độ rộng và di chuyển Layer: Sau khi chèn Layer
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
Điều chỉnh kích thướt
theo chiều cao
Ấn giữ phím trái chuột và di
chuyển chuột để di chuyển layer
CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)
 Chèn bảng (table):
 Table 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
vị trí của chúng (table chính xác hơn layer)
 Chèn Table vào trang web: click Table  Insert  Table
Hộp thoại Insert table xuất hiện

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

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

Canh lề table (trái,
phải, giữa)
Độ 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
CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)
 Một số thao tác cơ bản với table:
 Di chuyển giữa các ô: ấn phím “Tab” để đi đến ô kế tiếp
hoặc “Shift” + “Tab” để đi lùi về ô phía trước
 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  ấn giữ phím
Shift  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  ấn giữ phím Shift  click vào ô cuối của dòng
cuối cần chọn
 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  ấn giữ phím
Shift  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  ấn giữ phím Shift  click vào ô cuối của cột cuối cần
chọn
CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)
 Thêm dòng mới vào bảng:
 Thêm một dòng mới vào cuối bảng: click vào ô cuối cùng
của bảng (ô dưới phải)  ấn phím “Tab”
 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êm
 Click Table  Insert  Rows or Columns
Hộ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

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

3. Thêm vào phía trên
dòng hiện hành
CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)
 Thêm 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 
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ỳ:
 Click vào vị trí (cột) cần thêm
 Click Table  Insert  Rows or Columns
Hộ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

2. Nhập số cột cần
thêm
Click OK để thêm

3. Thêm vào phía bên
phải cột hiện hành
CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)
 Xóa cột:
 Chọn cột cần xóa
 Click phải vào cột vừa chọn  Delete columns
 Hoặc: Click Table  Delete columns
CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)
 Trộn (Merge) nhiều ô:
 Chọn các ô cần trộn
 Click phải vào các ô được chọn  Merger cells
 Hoặc: Click Table  Merge cells

Click phải vào các ô vừa
chọn  Merge cells
CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)
 Tách (split) một ô thành nhiều ô:
 Chọn ô cần tách
 Click phải vào ô được chọn  Split cells
 Hoặc: Click Table  Split cells

Click phải vào ô cần
tách  Split cells
Hộp thoại Split cells xuất hiện

1. Trộn thành nhiều cột
2. Nhập số lượng
dòng/cột cần trộn
1. Trộn thành nhiều
dòng

3. Click OK để trộn
CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)
 Định dạng table: gồm các dịnh dạng chính
 Định dạng đường viền (border)
 Định dạng ảnh nền, màu nền
 Thực hiện: click vào table cần định dạng  Table
Properties.
Định dạng Border

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

2. 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

Chọn màu nền

Chọn ảnh nền
Click OK để thiết
đặt
CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)
 Làm việc với khung (Frame):
 Một trang web có thể chứa nhiều frame
 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
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ợ frame
 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  Page
 Hộp thoại Page template xuất hiện  Frames pages
Chọn mẫu

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

Click OK
Tạo trang web
mới cho frame

Chèn trang web
đã có vào frame
CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)
 Định dạng khung:
 Click phải vào vùng trống trên khung  Frame Properties
 Hộ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ị

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

Click OK để đồng ý
CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)
 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ạng
 Thực hiện: Click Insert  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
Chỉnh sửa liên kết
Di chuyển thứ tự
liên kết
Click OK
CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI
TƯỢNG KHÁC (tt)
 Chèn đối tượng Calendar:
 FrontPage 2003 hỗ trợ đối tượng Calendar, hiển thị dương
lịch từ năm 1900 đến năm 2100
 Thực hiện: Click Insert  Web component
Chọn
Advanced
controls

Chọn AtiveX control

Click Next
Để lịch hiển thị ngày hiện tại  Thêm
đoạn mã sau vào cuối trang web (trong
chế độ code của FrontPage):
<Script Language = “JavaScript">
var obj =
document.getElementById("Calendar1");
var d = new Date();
obj.Year = d.getFullYear();
obj.Month = d.getMonth()+ 1;
obj.Day = d.getDate();
</Script>
CHƯƠNG V: MULTIMEDIA HÓA TRANG WEB
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
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:
 Insert  Picture
 Chọn “Clip art”: nếu ta muốn chèn từ bộ sưu tập ảnh của
FrontPage
 Chọn “From File”: nếu file ảnh đã tồn tại trên đĩa
 Chú ý: ảnh phải được chép vào thư mục “Images” của web
site
Front page




Click chọn
CHƯƠNG V: MULTIMEDIA TRANG WEB (tt)
 Chú ý:
 Sau khi chèn xong ta phải save trang web lại
 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
ảnh vừa chèn

Đổi tên file nếu
cần thiết
1. Click Change
Folder
4. Click OK

2. Chọn thư
mục Images

3. Click OK
CHƯƠNG V: MULTIMEDIA HÓA TRANG WEB (tt)
 Đư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
web
 FrontPage 2003 hỗ trợ 4 kiểu hiển thị bộ sưu tập ảnh
 Thực hiện: Chọn Insert  Picture  New Photo Gallery.
Hộp thọai Photo Gallery xuất hiện
 Chú ý:
 Ảnh phải được chép vào thư mục “Images” trước khi chèn
vào bộ sưu tập ảnh
 Nếu ảnh chưa có thì sau khi save trang web  xuất hiện
hộp thoại Save embedded files  thực hiện các thao tác
giống như trước
1. Click Add 
Picture from file

2. Sau khi chèn ảnh
xong  Layout

3. Chọn kiểu hiển thị
6. Click OK

4. Click OK
Front page
CHƯƠNG V: MULTIMEDIA HÓA TRANG WEB (tt)
 Chèn chữ nghệ thuật (Word Art):
 Thực hiện: Chọn Insert  Picture  Word art
1. Chọn mẫu

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

Nhập nội dung
5. Click OK để kết
thúc
Điều chỉnh hình
dáng
Điều chỉnh mẫu
WordArt
Điều chỉnh nội
dung dòng chữ
CHƯƠNG V: MULTIMEDIA HÓA TRANG WEB (tt)
 Chèn file âm thanh, video:
 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)
 Các file video được dùng phổ biến là: *.wmv, *.avi
 Thực hiện: Chọn Insert  Web component  Hộp thoại
Web 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ẽ
xuất hiện hộp thoại Save embedded files
 Click chọn Change Folder  chọn thư mục “Media”  OK
 OK






CHƯƠNG V: MULTIMEDIA HÓA VÀ XUẤT BẢN
WEB SITE (tt)
 Chèn file hoạt hình Flash:
 Thực hiện: Chọn Insert  Picture  Movie in flash format
Hộp thoại Select file xuất hiện
CHƯƠNG V: MULTIMEDIA HÓA VÀ XUẤT BẢN
WEB SITE (tt)
 Sử dụng đối tượng MS Window Media Player:
Thực hiện: Chọn Insert  Advanced Controls  ActiveX
control  Windows Media Player  Click nút Finish









Cần chỉ định File Media được thực hiện khi trang web được tải
về trình duyệt
Chú ý: File được thực hiện bắt buộc phải được đặt trong thư
mục “Media” của web site

Click phải vào đối tượng
Media player  ActiveX
Control Properties
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
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

Contenu connexe

Tendances

Bài 1 XHTML: Cấu trúc nội dung web - Giáo trình FPT
Bài 1 XHTML: Cấu trúc nội dung web - Giáo trình FPTBài 1 XHTML: Cấu trúc nội dung web - Giáo trình FPT
Bài 1 XHTML: Cấu trúc nội dung web - Giáo trình FPTMasterCode.vn
 
Nhập môn Css
Nhập môn CssNhập môn Css
Nhập môn CssLy hai
 
Baigiang css
Baigiang cssBaigiang css
Baigiang csshmtsystem
 
Bài 2 Cơ chế làm việc của CSS - Giáo trình FPT
Bài 2 Cơ chế làm việc của CSS - Giáo trình FPTBài 2 Cơ chế làm việc của CSS - Giáo trình FPT
Bài 2 Cơ chế làm việc của CSS - Giáo trình FPTMasterCode.vn
 
Hướng dẫn lập trình web với PHP - Ngày 2
Hướng dẫn lập trình web với PHP - Ngày 2Hướng dẫn lập trình web với PHP - Ngày 2
Hướng dẫn lập trình web với PHP - Ngày 2Nguyễn Tuấn Quỳnh
 
Slide 2 - Thiết kế Web cơ bản
Slide 2 - Thiết kế Web cơ bảnSlide 2 - Thiết kế Web cơ bản
Slide 2 - Thiết kế Web cơ bảnSống Khác
 
Tailieu.vncty.com huong dan nhap mon html
Tailieu.vncty.com   huong dan nhap mon htmlTailieu.vncty.com   huong dan nhap mon html
Tailieu.vncty.com huong dan nhap mon htmlTrần Đức Anh
 
Tai lieu co ban html
Tai lieu co ban htmlTai lieu co ban html
Tai lieu co ban htmlmanhdat270192
 
Slide 1 - Thiết kế Web cơ bản
 Slide 1 - Thiết kế Web cơ bản Slide 1 - Thiết kế Web cơ bản
Slide 1 - Thiết kế Web cơ bảnSống Khác
 
Slide 3 - Thiết kế Web cơ bản
Slide 3 - Thiết kế Web cơ bảnSlide 3 - Thiết kế Web cơ bản
Slide 3 - Thiết kế Web cơ bảnSống Khác
 
Huongdanthuchanhtinhoc
HuongdanthuchanhtinhocHuongdanthuchanhtinhoc
HuongdanthuchanhtinhocVõ Tâm Long
 
Can ban ve css
Can ban ve cssCan ban ve css
Can ban ve csshieusy
 

Tendances (19)

Bài 1 XHTML: Cấu trúc nội dung web - Giáo trình FPT
Bài 1 XHTML: Cấu trúc nội dung web - Giáo trình FPTBài 1 XHTML: Cấu trúc nội dung web - Giáo trình FPT
Bài 1 XHTML: Cấu trúc nội dung web - Giáo trình FPT
 
Nhập môn Css
Nhập môn CssNhập môn Css
Nhập môn Css
 
Baigiang css
Baigiang cssBaigiang css
Baigiang css
 
Bài 2 Cơ chế làm việc của CSS - Giáo trình FPT
Bài 2 Cơ chế làm việc của CSS - Giáo trình FPTBài 2 Cơ chế làm việc của CSS - Giáo trình FPT
Bài 2 Cơ chế làm việc của CSS - Giáo trình FPT
 
Hướng dẫn lập trình web với PHP - Ngày 2
Hướng dẫn lập trình web với PHP - Ngày 2Hướng dẫn lập trình web với PHP - Ngày 2
Hướng dẫn lập trình web với PHP - Ngày 2
 
01b udpt html
01b udpt   html01b udpt   html
01b udpt html
 
Web1012 slide 1
Web1012   slide 1Web1012   slide 1
Web1012 slide 1
 
Slide 2 - Thiết kế Web cơ bản
Slide 2 - Thiết kế Web cơ bảnSlide 2 - Thiết kế Web cơ bản
Slide 2 - Thiết kế Web cơ bản
 
05 web course form
05 web course   form05 web course   form
05 web course form
 
Slide3
Slide3Slide3
Slide3
 
Tai Lieu Html
Tai Lieu HtmlTai Lieu Html
Tai Lieu Html
 
Tailieu.vncty.com huong dan nhap mon html
Tailieu.vncty.com   huong dan nhap mon htmlTailieu.vncty.com   huong dan nhap mon html
Tailieu.vncty.com huong dan nhap mon html
 
Tai lieu html
Tai lieu htmlTai lieu html
Tai lieu html
 
Tai lieu co ban html
Tai lieu co ban htmlTai lieu co ban html
Tai lieu co ban html
 
Slide 1 - Thiết kế Web cơ bản
 Slide 1 - Thiết kế Web cơ bản Slide 1 - Thiết kế Web cơ bản
Slide 1 - Thiết kế Web cơ bản
 
Slide2
Slide2Slide2
Slide2
 
Slide 3 - Thiết kế Web cơ bản
Slide 3 - Thiết kế Web cơ bảnSlide 3 - Thiết kế Web cơ bản
Slide 3 - Thiết kế Web cơ bản
 
Huongdanthuchanhtinhoc
HuongdanthuchanhtinhocHuongdanthuchanhtinhoc
Huongdanthuchanhtinhoc
 
Can ban ve css
Can ban ve cssCan ban ve css
Can ban ve css
 

Similaire à Front page

Html coban
Html coban Html coban
Html coban Cá Cơm
 
Đề tài Tìm hiểu HTML5, CSS3, thiết kết website tin tức
Đề tài Tìm hiểu HTML5, CSS3, thiết kết website tin tứcĐề tài Tìm hiểu HTML5, CSS3, thiết kết website tin tức
Đề tài Tìm hiểu HTML5, CSS3, thiết kết website tin tứcHoward Brakus
 
Chuong3a html-091030201256-phpapp01
Chuong3a html-091030201256-phpapp01Chuong3a html-091030201256-phpapp01
Chuong3a html-091030201256-phpapp01Ta Hormon
 
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdfThnh258575
 
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdfThnh258575
 
Tailieu.vncty.com thiet ke web dai hoc
Tailieu.vncty.com   thiet ke web dai hocTailieu.vncty.com   thiet ke web dai hoc
Tailieu.vncty.com thiet ke web dai hocTrần Đức Anh
 
Tailieu.vncty.com thiet ke web dai hoc
Tailieu.vncty.com   thiet ke web dai hocTailieu.vncty.com   thiet ke web dai hoc
Tailieu.vncty.com thiet ke web dai hocTrần Đức Anh
 
Web1012 slide 1
Web1012   slide 1Web1012   slide 1
Web1012 slide 1Cà Rốt
 
Chuong4 css-091030202240-phpapp02
Chuong4 css-091030202240-phpapp02Chuong4 css-091030202240-phpapp02
Chuong4 css-091030202240-phpapp02Ta Hormon
 
Chuong4 css-091030202240-phpapp02 (1)
Chuong4 css-091030202240-phpapp02 (1)Chuong4 css-091030202240-phpapp02 (1)
Chuong4 css-091030202240-phpapp02 (1)Ta Hormon
 
Tài liệu lập trình jQuery
Tài liệu lập trình jQueryTài liệu lập trình jQuery
Tài liệu lập trình jQueryZendVN
 
[ST] Tài liệu thiết kế website cho người mới bắt đầu
[ST] Tài liệu thiết kế website cho người mới bắt đầu[ST] Tài liệu thiết kế website cho người mới bắt đầu
[ST] Tài liệu thiết kế website cho người mới bắt đầuTin Học KEY
 
Lap trinh assembler
Lap trinh assemblerLap trinh assembler
Lap trinh assemblerleduanmtt
 
Huong dan lap_trinh_voi_android_5
Huong dan lap_trinh_voi_android_5Huong dan lap_trinh_voi_android_5
Huong dan lap_trinh_voi_android_5Nhat Nguyen
 

Similaire à Front page (20)

Html coban
Html coban Html coban
Html coban
 
Đề tài Tìm hiểu HTML5, CSS3, thiết kết website tin tức
Đề tài Tìm hiểu HTML5, CSS3, thiết kết website tin tứcĐề tài Tìm hiểu HTML5, CSS3, thiết kết website tin tức
Đề tài Tìm hiểu HTML5, CSS3, thiết kết website tin tức
 
Tai Lieu Html
Tai Lieu HtmlTai Lieu Html
Tai Lieu Html
 
Tai Lieu Html
Tai Lieu HtmlTai Lieu Html
Tai Lieu Html
 
Chuong3a html-091030201256-phpapp01
Chuong3a html-091030201256-phpapp01Chuong3a html-091030201256-phpapp01
Chuong3a html-091030201256-phpapp01
 
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf
 
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf
 
Tailieu.vncty.com thiet ke web dai hoc
Tailieu.vncty.com   thiet ke web dai hocTailieu.vncty.com   thiet ke web dai hoc
Tailieu.vncty.com thiet ke web dai hoc
 
Tailieu.vncty.com thiet ke web dai hoc
Tailieu.vncty.com   thiet ke web dai hocTailieu.vncty.com   thiet ke web dai hoc
Tailieu.vncty.com thiet ke web dai hoc
 
Css
CssCss
Css
 
Web1012 slide 1
Web1012   slide 1Web1012   slide 1
Web1012 slide 1
 
Chuong4 css-091030202240-phpapp02
Chuong4 css-091030202240-phpapp02Chuong4 css-091030202240-phpapp02
Chuong4 css-091030202240-phpapp02
 
Chuong4 css-091030202240-phpapp02 (1)
Chuong4 css-091030202240-phpapp02 (1)Chuong4 css-091030202240-phpapp02 (1)
Chuong4 css-091030202240-phpapp02 (1)
 
Tài liệu HTML5-CSS3
Tài liệu HTML5-CSS3Tài liệu HTML5-CSS3
Tài liệu HTML5-CSS3
 
Tài liệu lập trình jQuery
Tài liệu lập trình jQueryTài liệu lập trình jQuery
Tài liệu lập trình jQuery
 
[ST] Tài liệu thiết kế website cho người mới bắt đầu
[ST] Tài liệu thiết kế website cho người mới bắt đầu[ST] Tài liệu thiết kế website cho người mới bắt đầu
[ST] Tài liệu thiết kế website cho người mới bắt đầu
 
Lap trinh assembler
Lap trinh assemblerLap trinh assembler
Lap trinh assembler
 
Bài tập HTML/CSS
Bài tập HTML/CSSBài tập HTML/CSS
Bài tập HTML/CSS
 
html/css exercise
html/css exercisehtml/css exercise
html/css exercise
 
Huong dan lap_trinh_voi_android_5
Huong dan lap_trinh_voi_android_5Huong dan lap_trinh_voi_android_5
Huong dan lap_trinh_voi_android_5
 

Front page

  • 1. THIẾT KẾ WEB VỚI MICROSOFT FRONTPAGE 2003 Phan Trọng Tiến Department of Software Engineering Hanoi University of Agriculture Office location: 3rd floor, Administrative building Office phone: (04)38276346, Ext: 132 Website: http://fita.hua.edu.vn/pttien Email: ptgtien@hua.edu.vn or phantien84@gmail.com
  • 2. NỘI DUNG Chương I: Một số khái niệm cơ bản Chương II: Ngôn ngữ HTML Chương III: Tạo trang web với FrontPage 2003 Chương IV: Xử lý văn bản & một số đối tượng khác Chương V: Multimedia hóa trang web
  • 3. Chương I: CÁC KHÁI NIỆM CƠ BẢN    Mạng Internet là gì? Các dịch vụ quan trọng trên mạng Internet  Dịch vụ FTP  Dịch vụ Telnet  Dịch vụ Mail  Dịch vụ Web Dịch vụ World Wide Web (Web)  Trình duyệt Web (Web Browser)  Máy chủ phục vụ Web (Web Server)
  • 4. Chương I: CÁC KHÁI NIỆM CƠ BẢN (tt)  Web site, trang web:  Trang 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 trang Website  Website là một vị trí trên Internet (nơi cung cấp dịch vụ web).  URL (Uniform Resource Location):  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: <Giao thức>://<tên miền>[/Path][/Document] Ví dụ: http://www.pdu.edu.vn/khoacntt/index.php
  • 5. Chương I: CÁC KHÁI NIỆM CƠ BẢN (tt)  Mô hình hoạt động của dịch vụ Web: Xử lý yêu cầu Internet Web Server HTML ………… ………… ………… ……...... http://www.pud.edu.vn
  • 6. Chương II: NGÔN NGỮ HTML (Hypertext Markup Language) Giới thiệu HTML:  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)  HTML dùng các thẻ (tag) để thông báo cho các web browser hiển thị.  Hầu hết các web browser đều hiểu được ngôn ngữ HTML  Cú pháp các thẻ (tag) trong HTML:  <Tên thẻ [TT1 = <GT1> TT2 = <GT2>...]>...</Tên thẻ>  Ví dụ: Hiển thị dòng chữ “Chao các bạn !” dạng in đậm <B>Chào các bạn</B> 
  • 7. Chương II: NGÔN NGỮ HTML (tt)      Cấu trúc trang web tĩnh: <HTML> <HEAD> <TITLE> … </TITLE> </HEAD> <BODY> <!-- Nội dung trang web --> </BODY> </HTML> Một số thẻ HTML thông dụng: Thẻ <HTML>: Trang web tĩnh được bắt đầu bằng :<HTML> và kết thúc bằng: </HTM> Thẻ <HEAD>: Phần đầu của trang web Thẻ <TITLE>: Đặt tiêu đề cho trang web (thẻ này nằm trong <HEADER>)
  • 8. Một số thẻ HTML thông dụng (tt) Ví dụ: Đặt tiêu đề của trang web là: “Thông báo” <HEAD> <TITLE>Thông báo</TITLE> </HEAD>  Thẻ <BODY>: Chứa nội dung trang web. <BODY [BACKGROUND=url BGCOLOR=color …]> Nội dung trang web </BODY>  Chú thích trong HTML: dùng dấu <!-- và dấu --> <!-- Nội dung chú thích -->
  • 9. Một số thẻ HTML thông dụng (tt)  Ví dụ: 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êng <HTML> <HEAD> <TITLE>Giới thiệu</TITLE> </HEAD> <BODY> <B><I>Chào các bạn !</I></B> </BODY> </HTML>
  • 10. Một số thẻ HTML thông dụng (tt)  Các thẻ định dạng văn bản: Tên thẻ Giải thích Ví dụ <B>…</B> Dạng chữ đậm <B>Hello world !</B> <I>…</I> Dạng chữ nghiêng <I>Hello world !</I> <U>…</U> Dạng chữ gạch chân <U>Hello world !</U> <S>…</S> Dạng chữ gạch giữa <S>Hello world!</S> <Font color=RGB face=tên font Size=“N”> …… </Font> Định dạng font chữ: Color: chỉ định màu Face: Chỉ định font chữ Size: kích thước <Font color=“Blue” face=“Arial”>Hello world </Font> <Sup>…</Sup> Tạo chỉ số trên X<Sup>2</Sup>  X2 <Sub>…</Sub> Tạo chỉ số dưới H<Sub>2</Sub>O  H2O
  • 11. Một số thẻ HTML thông dụng (tt)  Các thẻ định dạng văn bản: Tên thẻ Giải thích Ví dụ <BR> Xuống dòng <p align=“…” > …… </p> Tạo đoạn văn bản mới Align: chỉ định hình thức canh lề <p align=“Left”> Hello world ! </p> <HR Align=“…” Color = “…” SIZE = “…” WIDTH = “…” /> Tạo đường gạch ngang Color: màu Size: độ dày (tính bằng pixel) Width: độ dài (tính bằng pixel) <HR Color=“Red” Size=“10” Width=“200” />
  • 12. Một số thẻ HTML thông dụng (tt) Các thuộc tính quan trọng của thẻ <P></P>:  Align:  Left: Canh trái  Center: Canh giữa  Right: Canh phải  justify: Canh đều  Style:  Margin-top: Canh lề trên của đoạn  Margin-left: Canh lề trái của đoạn  Margin-right: Canh lề phải của đoạn  Margin-bottom: Canh lề dưới của đoạn  Direction: Chỉ định chiều văn bản (từ trái sang phải “ltr” hoặc từ phải sang trái “rtl”)
  • 13. Một số thẻ HTML thông dụng (tt) 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. <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
  • 14. Một số thẻ HTML thông dụng (tt)  Các thẻ hình ảnh và âm thanh: Chèn hình vào web: <IMG src=“…" width=“…" height=“…" border=“…" alt=“…“/> Các thuộc tính (thẻ IMG):  Scr: là đường dẫn của file ả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.  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.  Border: 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.  Đưa nhạc nền vào web: <BGSOUND scr = “…” loop = “…”> 
  • 15. Một số thẻ HTML thông dụng (tt) Các thuộc tính:  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” thì sẽ lặp đến khi chuyển sang trang mới web. web  Chèn âm thanh, phim: <EMBED src = “…” autostart = “…” loop = “N” /> Các thuộc tính:  Scr: 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.  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. web
  • 16. Một số thẻ HTML thông dụng (tt)  Tạo các liên kết (Hyper link):  Tạo liên kết đến trang web khác: <A href = “url” target = “…”>Text </A> Trong đó:  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:  “_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.  Tạo liên kết đến E-mail: <A href = "mailto:Địa chỉ E-mail“ >Text</A>
  • 17. Một số thẻ HTML thông dụng (tt)  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: 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>
  • 18. 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)  Tạo bảng (Table) <TABLE align = “…” background = “url” bgcolor = “RGB” border = “…” cellpadding = “…” width = “…” height=“…" > Trong đó:  Align: lề của bảng: “left” hoặc “right”  Background: chỉ định file ảnh 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)  Cellpadding: khoảng cách từ các cạnh của ô tới nội dung của ô (tính bằng pixel)  Width, Height : độ rộng, cao của bảng (tính theo % hoặc tính bằng pixel)
  • 20. Một số thẻ HTML thông dụng (tt)  Tạo bảng (Table) Thêm dòng vào bảng: <TR align = “…” background = “url” bgcolor = “RGB” valign= “…” > … </TR> Trong đó:  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 .  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 dòng: “top”, “bottom”, “middle”. Chú ý: Thẻ <Tr> phải nằm trong thẻ <Table></Table>
  • 21. Một số thẻ HTML thông dụng (tt)  Tạo bảng (Table) Thêm ô vào bảng: <TD align=“…” background = “url“ bgcolor = “RGB” rowspan = “N” colspan = “M” valign = “…” > … </TD> Trong đó:  Align: lề của ô: “left”, “right” hoặc “center”.  Background: đường dẫn file ảnh nền của dòng .  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 dòng: “top”, “bottom”, “middle”.  Rowspan: số ô trải dài trên N dòng  Colspan: Số ô trải rộng trên M cột Chú ý: Thẻ <TD> phải nằm trong thẻ <TR></TR>
  • 22. THIẾT KẾ MỘT WEB SITE THẾ NÀO ? 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 site.  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:  Chức năng của từng trang  Cấu trúc của các trang  Mố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)  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.
  • 23. THIẾT KẾ MỘT WEBSITE THẾ NÀO ? (tt) 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 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 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 đường dẫn tương đối khi đưa hình ả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 trước khi chèn 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 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.
  • 24. 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.  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 Internet  Đưa web site vào vận hành thử nghiệm.  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, …)  Chỉnh sửa lần cuối. 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 web site nếu cần thiết.
  • 25. CHƯƠNG III: TẠO MỘT TRANG WEB VỚI FRONTPAGE 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 Đóng trang web hiện tại Task pane Vùng thiết kế Chế độ làm việc Thanh cuộn ngang – dọc
  • 27. CHƯƠNG III: TẠO MỘT TRANG WEB VỚI 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 1. Click vào đây 2.Click vào để tạo web site mới  Hộp thoại Web site Templates xuất hiện
  • 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 1. Click tạo thư mục mới 2. Nhập tên thư mục là “Media”  ấn Enter
  • 31. CHƯƠNG III: TẠO MỘT TRANG WEB VỚI 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 Click save để lưu trang web Nhập tên trang web
  • 32. CHƯƠNG III: TẠO MỘT TRANG WEB VỚI 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 1. Click vào đây 2.Click vào để mở web site  Hộp thoại Open site xuất hiện
  • 33. 1. Click chọn nơi chứa web site 2. Click chọn web site cần mở 3. Click Open để mở web site
  • 34. CHƯƠNG III: TẠO MỘT TRANG WEB VỚI 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ỚI 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
  • 36. Xem trên trình duyệt web
  • 37. CHƯƠNG III: TẠO MỘT TRANG WEB VỚI 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ỚI 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ỚI FRONTPAGE 2003 (tt)  Định dạng font chữ, kích thướt, màu chữ mặc định:  Mở hộp thoại Page properties  Chọn tab Advanced  Click chọn nút Body style. Hộp thoại Modify style xuất hiện  Click nút Format  Font  Chọn các giá trị cần thiết rồi click OK để thiết lập  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, … Nhập vào kích cỡ chữ (ví dụ: 12px) Chọn màu chữ Click Ok để thiết đặt
  • 44. CHƯƠNG III: TẠO MỘT TRANG WEB VỚI 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ỚI 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ỚI 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Ố ĐỐI TƯỢ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 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 (“ ←”) nằm trên phím “Enter”  Xoá một ký tự bên phải con nháy: ấn phím “Delete”  Xoá nhiều ký tự cùng lúc: tô đen (chọn khối) ký tự cần xoá và ấn phím “Delete”  Chọn khối (nhiều ký tự):  Đặt con nháy ở đầu khối cần chọn -> ấn giữ phím “Shift” -> click chuột vào vị trí kết thúc của khối cần chọn.  Hoặc ấn giữ phím “shift” và ấn các phím mũi tên: ↑, ↓, →, ←
  • 48. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC (tt)  Chọn một dòng:  Đưa con nháy về đầu dòng  ấn giữ phím “Shift”  ấn phím “End”  Hoặc đưa con nháy về cuối dòng  ấn giữ phím “Shift”  ấn phím “Home”  Chép (copy) một khối:  Chọn khối cần chép  R-Click vào khối vừa chọn  Copy  Hoặc chọn khối cần chép  ấn tổ hợp phím: “Ctrl + C”  Cắt (cut) một khối:  Chọn khối cần chép  R-Click vào khối vừa chọn  Cut.  Hoặc chọn khối cần chép  ấn tổ hợp phím: “Ctrl + X”  Dán (paste) một khối đã được copy hoặc cắt:  R-Click vào vị trí cần dán  Paste  Hoặc ấn tổ hợp phím: “Ctrl + V”
  • 49. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC (tt)  Định dạng đoạn: gồm các định dạng sau  Canh lề đoạn (trái, phải, giữa, đều)  Khoảng cách giữa các đoạn  Khoảng cách giữa các dòng  Thực hiện: Chọn đoạn cần định dạng  Format  Paragraph 2. Click Format  Paragraph 1. Chọn đoạn
  • 50. Canh lề cho đoạn Định khoảng cách trên, dưới của đoạn Khoảng các giữa các dòng trong đoạn Click Ok
  • 51. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC (tt)  Định dạng ký tự gồm các định dạng sau  Font chữ, kiểu chữ, kích thướt  Màu chữ, màu nền  Thực hiện: Chọn đoạn cần định dạng  Format  Font. Hộ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, … Nhập vào kích cỡ chữ (ví dụ: 12px) Chọn màu chữ Click Ok để thiết đặt
  • 53. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC (tt)  Chèn các ký tự đặc biệt (Symbol):  Click Insert  Symbol  chọn symbol cần chèn  click nút Insert Tạo các Bookmark trong trang:  Bookmark: 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  Thực hiện: Chọn các ký tự làm tiêu đề của đoạn  Insert  Bookmark. Hộp thoại Bookmark xuất hiện
  • 55. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC (tt)  Chè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 trang đó)  Liê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 các ký tự làm liên kết  Chọn Insert  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ụ  Hộp thoại Insert hyperlink xuất hiện  click nút Bookmark  Chọn tên Bookmark cần liên kết đến  click OK
  • 57.  1. Click Bookmark 4. Click OK   2. Chọn Bookmark  3. Click OK
  • 58. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC (tt)  Chèn liên kết ngoài:  Chọn các ký tự làm liên kết  Chọn Insert  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ụ  Hộp thoại Insert hyperlink xuất hiện  click chọn trang web cần liên kết  OK  Hoặc nhập vào địa chỉ (của trang web trên mạng) vào ô Address  click OK
  • 59. 1. 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ạng  
  • 60. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC (tt)  Chèn dòng chữ chạy (marquee) trên trang web:  Chọn các ký tự cần chèn  Chọn Insert  Web component. Hộp thoại Insert web 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ện Số lượng Thời gian trì hoãn Hướng chuyển độ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Ố ĐỐI TƯỢNG KHÁC (tt)  Chèn Layer:  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ó  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 ý)  Chèn layer vào trang web: click Insert  Layers (hoặc click 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Ố ĐỐI TƯỢNG KHÁC (tt)  Nhập văn bản: Click vào một vị trí trên Layer  con nháy xuấ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: Click vào một vị trí trên Layer  chèn các đối tượng bình thường  Điều chỉnh độ rộng và di chuyển Layer: Sau khi chèn Layer 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 Điều chỉnh kích thướt theo chiều cao Ấn giữ phím trái chuột và di chuyển chuột để di chuyển layer
  • 65. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC (tt)  Chèn bảng (table):  Table 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 vị trí của chúng (table chính xác hơn layer)  Chèn Table vào trang web: click Table  Insert  Table
  • 66. Hộp thoại Insert table xuất hiện Nhập số dòng (rows), số cột vào ô (columns) Thiết đặt độ rrọng và độ cao của table Canh lề table (trái, phải, giữa) Độ 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Ố ĐỐI TƯỢNG KHÁC (tt)  Một số thao tác cơ bản với table:  Di chuyển giữa các ô: ấn phím “Tab” để đi đến ô kế tiếp hoặc “Shift” + “Tab” để đi lùi về ô phía trước  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  ấn giữ phím Shift  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  ấn giữ phím Shift  click vào ô cuối của dòng cuối cần chọn  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  ấn giữ phím Shift  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  ấn giữ phím Shift  click vào ô cuối của cột cuối cần chọn
  • 68. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC (tt)  Thêm dòng mới vào bảng:  Thêm một dòng mới vào cuối bảng: click vào ô cuối cùng của bảng (ô dưới phải)  ấn phím “Tab”  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êm  Click Table  Insert  Rows or Columns
  • 69. Hộ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 1. Nhập số dòng cần thêm Click OK để thêm 3. Thêm vào phía trên dòng hiện hành
  • 70. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC (tt)  Thêm 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  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ỳ:  Click vào vị trí (cột) cần thêm  Click Table  Insert  Rows or Columns
  • 71. Hộ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 2. Nhập số cột cần thêm Click OK để thêm 3. Thêm vào phía bên phải cột hiện hành
  • 72. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC (tt)  Xóa cột:  Chọn cột cần xóa  Click phải vào cột vừa chọn  Delete columns  Hoặc: Click Table  Delete columns
  • 73. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC (tt)  Trộn (Merge) nhiều ô:  Chọn các ô cần trộn  Click phải vào các ô được chọn  Merger cells  Hoặc: Click Table  Merge 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Ố ĐỐI TƯỢNG KHÁC (tt)  Tách (split) một ô thành nhiều ô:  Chọn ô cần tách  Click phải vào ô được chọn  Split cells  Hoặc: Click Table  Split cells Click phải vào ô cần tách  Split cells
  • 75. Hộp thoại Split cells xuất hiện 1. Trộn thành nhiều cột 2. Nhập số lượng dòng/cột cần trộn 1. Trộn thành nhiều dòng 3. Click OK để trộn
  • 76. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC (tt)  Định dạng table: gồm các dịnh dạng chính  Định dạng đường viền (border)  Định dạng ảnh nền, màu nền  Thực hiện: click vào table cần định dạng  Table Properties.
  • 77. Định dạng Border 1. Chọn mẫu đường viền 2. 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 Chọn màu nền Chọn ảnh nền Click OK để thiết đặt
  • 79. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC (tt)  Làm việc với khung (Frame):  Một trang web có thể chứa nhiều frame  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 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ợ frame  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  Page  Hộp thoại Page template xuất hiện  Frames pages
  • 80. Chọn mẫu Hiển thị mẫu của trang Click OK
  • 81. Tạo trang web mới cho frame Chèn trang web đã có vào frame
  • 82. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC (tt)  Định dạng khung:  Click phải vào vùng trống trên khung  Frame Properties  Hộ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ị Xuất hiện các thanh cuộn khi cần thiết Click OK để đồng ý
  • 83. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC (tt)  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ạng  Thực hiện: Click Insert  Navigation 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 Chỉnh sửa liên kết Di chuyển thứ tự liên kết Click OK
  • 86. CHƯƠNG IV: XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC (tt)  Chèn đối tượng Calendar:  FrontPage 2003 hỗ trợ đối tượng Calendar, hiển thị dương lịch từ năm 1900 đến năm 2100  Thực hiện: Click Insert  Web component
  • 88. Để lịch hiển thị ngày hiện tại  Thêm đoạn mã sau vào cuối trang web (trong chế độ code của FrontPage): <Script Language = “JavaScript"> var obj = document.getElementById("Calendar1"); var d = new Date(); obj.Year = d.getFullYear(); obj.Month = d.getMonth()+ 1; obj.Day = d.getDate(); </Script>
  • 89. CHƯƠNG V: MULTIMEDIA HÓA TRANG WEB 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 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:  Insert  Picture  Chọn “Clip art”: nếu ta muốn chèn từ bộ sưu tập ảnh của FrontPage  Chọn “From File”: nếu file ảnh đã tồn tại trên đĩa  Chú ý: ảnh phải được chép vào thư mục “Images” của web site
  • 92. CHƯƠNG V: MULTIMEDIA TRANG WEB (tt)  Chú ý:  Sau khi chèn xong ta phải save trang web lại  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 ảnh vừa chèn Đổi tên file nếu cần thiết 1. Click Change Folder 4. Click OK 2. Chọn thư mục Images 3. Click OK
  • 93. CHƯƠNG V: MULTIMEDIA HÓA TRANG WEB (tt)  Đư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 web  FrontPage 2003 hỗ trợ 4 kiểu hiển thị bộ sưu tập ảnh  Thực hiện: Chọn Insert  Picture  New Photo Gallery. Hộp thọai Photo Gallery xuất hiện  Chú ý:  Ảnh phải được chép vào thư mục “Images” trước khi chèn vào bộ sưu tập ảnh  Nếu ảnh chưa có thì sau khi save trang web  xuất hiện hộp thoại Save embedded files  thực hiện các thao tác giống như trước
  • 94. 1. Click Add  Picture from file 2. Sau khi chèn ảnh xong  Layout 3. Chọn kiểu hiển thị 6. Click OK 4. Click OK
  • 96. CHƯƠNG V: MULTIMEDIA HÓA TRANG WEB (tt)  Chèn chữ nghệ thuật (Word Art):  Thực hiện: Chọn Insert  Picture  Word art
  • 97. 1. Chọn mẫu 2. Click OK để mở hộp thoại Edit WordArt Text Nhập nội dung 5. Click OK để kết thúc
  • 98. Điều chỉnh hình dáng Điều chỉnh mẫu WordArt Điều chỉnh nội dung dòng chữ
  • 99. CHƯƠNG V: MULTIMEDIA HÓA TRANG WEB (tt)  Chèn file âm thanh, video:  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)  Các file video được dùng phổ biến là: *.wmv, *.avi  Thực hiện: Chọn Insert  Web component  Hộp thoại Web 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ẽ xuất hiện hộp thoại Save embedded files  Click chọn Change Folder  chọn thư mục “Media”  OK  OK    
  • 102. CHƯƠNG V: MULTIMEDIA HÓA VÀ XUẤT BẢN WEB SITE (tt)  Chèn file hoạt hình Flash:  Thực hiện: Chọn Insert  Picture  Movie in flash format
  • 103. Hộp thoại Select file xuất hiện
  • 104. CHƯƠNG V: MULTIMEDIA HÓA VÀ XUẤT BẢN WEB SITE (tt)  Sử dụng đối tượng MS Window Media Player: Thực hiện: Chọn Insert  Advanced Controls  ActiveX control  Windows Media Player  Click nút Finish     
  • 105. Cần chỉ định File Media được thực hiện khi trang web được tải về trình duyệt Chú ý: File được thực hiện bắt buộc phải được đặt trong thư mục “Media” của web site Click phải vào đối tượng Media player  ActiveX Control Properties
  • 106. Chọn thư mục Media Chọn file cần chèn Click Open để chèn
  • 107. Sau khi chèn xong ta điều chỉnh lại đường dẫn cho File 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