Thiet ke web bang frontpage

THIẾT KẾ WEB VỚI MICROSOFT FRONTPAGE 2003
Võ Quang Trung – Khoa Công nghệ Thông tin – Trường ĐHSP Đồng Tháp
E-mail: [email protected]
NỘI DUNG
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)
 Phục vụ Web (Web Server)
Chương I: CÁC KHÁI NIỆM CƠ BẢN
 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 Web site
Web site 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:
://[/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:
Chương I: CÁC KHÁI NIỆM CƠ BẢN (tt)
Internet
http://www.pud.edu.vn
Xử lý yêu cầu
Web Server
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:
TT2 = ...]>...
Ví dụ: Hiển thị dòng chữ “Chao các bạn !” dạng in đậm
Chào các bạn
Chương II: NGÔN NGỮ HTML
(Hypertext Markup Language)
Cấu trúc trang web tĩnh:






Một số thẻ HTML thông dụng:
Thẻ : Trang web tĩnh được bắt đầu bằng : và kết thúc bằng:
Thẻ : Phần đầu của trang web
Thẻ

Thẻ : Chứa nội dung trang web.

Nội dung trang web

Chú thích trong HTML: dùng dấu

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





Chào các bạn !


Một số thẻ HTML thông dụng (tt)
Các thẻ định dạng văn bản:
Một số thẻ HTML thông dụng (tt)
Các thẻ định dạng văn bản:
Một số thẻ HTML thông dụng (tt)
Các thuộc tính quan trọng của thẻ

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

….

2. Sin²x + Cos²x = 1
3. H₂ + O₂  H₂O
Một số thẻ HTML thông dụng (tt)
Các thẻ hình ảnh và âm thanh:
Một số thẻ HTML thông dụng (tt)
Chèn hình vào web:

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:

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.
Chèn âm thanh, phim:

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.
Một số thẻ HTML thông dụng (tt)
Tạo liên kết đến trang web khác:
Text
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:

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)
Tạo bảng (Table)
Một số thẻ HTML thông dụng (tt)
Thêm dòng vào bảng:
…
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ẻ phải nằm trong thẻ
Tạo bảng (Table)
Một số thẻ HTML thông dụng (tt)
Thêm ô vào bảng:
    rowspan = “N” colspan = “M” valign = “…” > …
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ẻ phải nằm trong thẻ
Tạo bảng (Table)
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:
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






 Hộp thoại Web site Templates xuất hiện
2.Click vào để tạo web site mới
1. Click vào đây
2.Click chọn mẫu web site
1.Nhập đường dẫn chứa web site. Hoặc click vào nút Browse để chọn
3.Click Ok để tạo website mới
Chú ý: Phải tạo thư mục chứa web site trước khi tạo web site
Sau khi tạo web site xong màn hình như sau xuất hiên:
Thư mục chứa các hình ảnh
Trang chủ của web site
Tạo trang web mới
Tạo thư mục mới
Cần tạo thêm thư mục “Media” để chứa các file âm thanh, các đoạn video, các file flash
2. Nhập tên thư mục là “Media”  ấn Enter
1. Click tạo thư mục mới
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
Nhập tên trang web
Click save để lưu 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






 Hộp thoại Open site xuất hiện
2.Click vào để mở web site
1. Click vào đây
2. Click chọn web site cần mở
1. Click chọn nơi chứa web site
3. Click Open để mở web site
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
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:
1. Click vào Body style để mở hộp thoại modify style
2. Click Format Font để mở hộp thoại Font
Chọn font chữ
Chọn kiểu chữ: bình thường, đậm, nghiên, …
Click Ok để thiết đặt
Nhập vào kích cỡ chữ (ví dụ: 12px)
Chọn màu chữ
CHƯƠ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
1. Chọn đoạn
2. Click Format  Paragraph
Canh lề cho đoạn
Khoảng các giữa các dòng trong đoạn
Định khoảng cách trên, dưới của đ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, …
Click Ok để thiết đặt
Nhập vào kích cỡ chữ (ví dụ: 12px)
Chọn màu chữ
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




1. Click Bookmark
2. Chọn Bookmark
3. Click OK
4. 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
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
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
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
Ấn giữ phím trái chuột và di chuyển chuột để di chuyển layer
Điều chỉnh kích thướt theo chiều cao
CHƯƠ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)
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
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
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
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
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
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
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
Hộ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
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
2. Chọn màu đường viền
1. Chọn mẫu đường viền
2. Độ rộng đường viền
4. Khoảng cách từ đường viền đến chữ
5. Click OK để thiế đặt
Định dạng ảnh nền, màu nền
Chọn màu nền
Click OK để thiết đặt
Chọn ảnh nền
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
Chèn trang web đã có vào frame
Tạo trang web mới cho 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ị
Click OK để đồng ý
Xuất hiện các thanh cuộn khi cần thiết
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
Click OK
Chỉnh sửa liên kết
Di chuyển thứ tự liên kết
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):

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
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
2. Chọn thư mục Images
3. Click OK
Đổi tên file nếu cần thiết
1. Click Change Folder
4. Click OK
CHƯƠNG V: MULTIMEDIA HÓA TRANG WEB (tt)
Đư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
2. Sau khi chèn ảnh xong  Layout
3. Chọn kiểu hiển thị
4. Click OK
1. Click Add  Picture from file
6. Click OK
CHƯƠ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
Nhập nội dung
1. Chọn mẫu
2. Click OK để mở hộp thoại Edit WordArt Text
5. Click OK để kết thúc
Điều chỉnh nội dung dòng chữ
Điều chỉnh mẫu WordArt
Điều chỉnh hình dáng
CHƯƠ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
Click phải vào đối tượng Media player  ActiveX Control Properties
Cần chỉ định File Media được thực hiện khi trang web được tải 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
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