Ngôn ngữ đánh dấu siêu văn bản HTML - Thiết kế Web bằng FrontPage2000

 liệu HTML 
• : 
Có 9 thuộc tính: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING, 
NORESIZE, FRAMEBORDER, FRAMESPACING and BORDERCOLOR. 
SRC="url": Chỉ định file sẽ được hiển thị trong Frame. 
NAME="frame_name": Đặt tên cho Frame. Tên nầy dùng làm đích khi cần hiển thị 
file trong 1 Frame nhất định. 
Thí dụ: 
Theo mặc nhiên các Frame sẽ không có tên. 
MARGINWIDTH="value"/ MARGINHEIGHT="value": Chỉ định giá trị tính bằng 
Pixels cho lề trái, phải (Width) và trên, dưới (Height). 
SCROLLING="yes/no/auto": Chỉ định cho thanh cuộn cửa sổ trong trường hợp nội 
dung vượt quá sức chứa của Frame. 
NORESIZE: Theo mặc nhiên, tất cả Frame có thể điều chỉnh được kích thước. Thuộc 
tính nầy không cho điều chỉnh. 
FRAMEBORDER="yes/no/0": Chỉ định việc hiển thị khung viền cho Frame. Chọn 
"yes/0" cho Internet Explorer và "yes/no" cho Netscape. 
FRAMESPACING="value": Chỉ định khoảng cách giữa các Frame. Tính theo Pixels. 
Thí dụ: 
• : 
Đây là thẻ chính của Frame.Các thuộc tính như sau: 
ROWS="row_height_value_list": Chỉ định chiều dọc Frame theo Pixels, phần trăm 
hay tỷ lệ. 
Thí dụ: Tạo 3 Frame theo chiều dọc, Frame đầu tiên có kích thước 20% cửa sổ, 
Frame 2 có kích thước 100 pixels và Frame 3 dùng toàn bộ khoảng trống còn lại của cửa 
sổ. 
Thí dụ: Chia 2 Frame có kích thước 1/4 và 3/4 cửa sổ. 
 Hay 
COLS="column_width_list": Giống như ROWS nhưng tính theo chiều ngang. 
BORDER="pixel value": Kích thước đường viền 
BORDERCOLOR="#rrggbb hay colour name": Chỉ định màu cho đường viền 
Thí dụ: 
The HTML Reference Library - HTMLib 
 11
The HTML Reference Library - HTMLib 
1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
 Các Frame trên được hiển thị như sau: 
Số thứ tự dòng chỉ để phân tích, không có trong file: 
1 : Chia 2 Frame 1, 2 theo chiều ngang có kích thước 
1=25% và 2=75%. 
2 : Trong Frame 1 chia thành 2 Frame 3, 4 theo chiều 
dọc. Có kích thước 3=100 pixels chiều cao, 4=kích thước Frame 1 còn lại. 
3 <FRAME SRC="buttons.htm" NORESIZE SCROLLING="yes" 
NAME="buttons"> : Chỉ định file sẽ nạp vào Frame 3 là buttons.htm. Frame nầy không 
cho resizing và luôn luôn hiển thị thanh cuộn. Tên Frame là BUTTONS 
4 : 
Giống dòng 3, nạp vào Frame 4 file qr.htm. Frame nầy có tên là QR. 
5 : Dòng nầy dùng kết thúc FRAMESET trong dòng 2. 
6 : Dòng nầy chia Frame 2 còn lại thành 2 Frame 5, 6 có 
kích thước 5=75 pixels, 6=khoảng trống còn lại. 
7 : 
Nạp file vào Frame 5, không Resize, không thanh cuộn. Đặt tên cho Frame 5 là TITLE. 
8 : 
Giống như trên nhưng có tên là MAIN và thanh cuộn tự động xuất hiện nếu cần thiết. 
 12
 9 : Đóng FRAMESET trong dòng 6 
 10 : Đóng FRAMESET trong dòng 1 
 Khi cần nạp liên kết vào Frame nào bạn chỉ cần dùng thuộc tính Target="tên Frame". 
 Thí dụ: 
 Hiển thị vị trí #QRM của file qr.htm trong Frame có tên QR khi bấm vào hình m.gif 
B. THIẾT KẾ WEB BẰNG FRONTPAGE 2000 
 1. CÀI ĐẶT FRONTPAGE 2000 
 FrontPage 2000 là ứng dụng trong bộ Microsoft Office 2000. Khi cài đặt Office 2000, 
ta chỉ việc chọn FrontPage 2000 để có thêm ứng dụng này trong hệ điều hành Windows. 
 Để mở FrontPage 2000, chọn Start->Program->Microsoft FrontPage 
 2. TẠO WEB SITE 
 - Sau khi mở FrontPage 2000, để tao web site chọn File->New->Web 
 - Lựa chọn One Page Web và thư mục trên máy tính để tao web site. Sau đó nhấp vào 
 OK để tạo một web site mới: 
 13
 - Hiện tại FrontPage 2000, sẽ mở một trang trắng, có dạng như sau: 
 - Nhấp vào nút Navigation View: 
 - Bạn sẽ thấy cấu trúc của web site hiện hành 
 Bạn thấy chỉ có một trang web trên web site hiện hành gọi là Home Page. Trang web 
này có tên là index.htm (thông thường phần mở rộng là *.htm hoặc *.html). 
 Nhấp chuột phải vào Home Page và chọn Properties nếu bạn muốn biết tên và vị trí 
của file này. 
 - Để tạo trang web mới, nhấp chuột phải vào Home Page và chọn New Page 
 14
 - Bạn có thể đổi tên tựa (title) của các trang web bằng cách nhấp chuột phải vào nó và 
 chọn Rename. 
 - Để sửa trang web (Home Page) chẳng hạn, nhấp double vào trang đó và gõ nội dung: 
 Chúng ta thấy trên cửa sổ FrontPage 2000 có 3 chế độ hiển thị. Thông thường ta soạn 
thảo trực tiếp ở chế độ NORMAL. Khi soạn thảo FrontPage 2000 tự sinh mã thành và ta có 
thể thấy ở chế độ HTML. PREVIEW để hiển thị thử như trên trình duyệt web. 
 3. SỬ DỤNG THEME 
 Nếu muốn thay đổi “diện mạo” của toàn bộ web site hay một vài trang web, bạn có thể 
sử dụng Theme từ menu Format: 
 15
 Khi đó bạn có thể chọn bất cứ Theme nào nếu thấy “được mắt”. 
 Ngoài các theme có sẵn khi cài đặt FrontPage 2000, ta có thể tự thiết kế hay chỉnh sửa 
một số các đối tượng trên theme hiện hành. Để làm điều này, bạn nhấp chọn Modify: 
 4. THÊM HÌNH ẢNH VÀO TRANG WEB 
 Để xen hình ảnh vào trang web, bạn hãy chọn Insert->Picture->From File 
 16
 Nếu ảnh đã tồn tại trong thư mục của web site, bạn chỉ việc chọn nó; Nếu ảnh ở một vị 
trí khác, nhấp vào để chọn ảnh ở một nơi bất kỳ trên máy của bạn 
 - Để xen hình ảnh vào trang web, bạn đặt con trỏ ngay vị trí cần xen 
 - Hình ảnh lưu trên trang web thường ở 2 dạng 
 o JPG: Ảnh muốn lưu có hơn 256 màu 
 o GIF: Ảnh cần lưu có ít hơn 256 màu 
 Ví dụ xen vào ảnh: 
 - Ta có thể thay đổi kích thước của ảnh bằng cách nhấp chọn ảnh và drag một trong 8 
 nút bao quanh ảnh 
 - Nếu ảnh được xen từ Clip art (hoặc ảnh không phải dạng GIF, JPG), khi lưu trang web 
 nó sẽ tự động chuyển về dạng GIF hoặc JPG 
 - Thuộc tính của ảnh: 
 o Để thay đổi thuộc tính của ảnh, nhấp chuột phải vào ảnh và chọn Picture 
 Properties, hộp hội thoại Picture Properties xuất hiện như sau: 
 17
 o Ở tab General: 
 ƒ Picture Source: Cho biết vị trí của ảnh 
 ƒ Alternative Representations->Text: Để hiển thị thông tin về ảnh đó mỗi 
 khi đưa chuột đến, ví dụ: 
 o Ở tab Appearance: 
 ƒ Layout: Để canh lề, xác định đường viền xung quanh ảnh 
 ƒ Size: Xác định kích thước ảnh thay vì drag chuột 
 5. TẠO SIÊU LIÊN KẾT 
 Siêu liên kết (Hyperlink) dùng để liên kết đến vị trí khác trong web. Có 2 dạng liên 
kết: 
 - Liên kết trong: Là liên kết đến vị trí khác trong cùng trang web 
 - Liên kết ngoài: Là liên kết đến trang web khác (hoặc một vị trí của trang web khác) 
 Để tạo liên kết, ta làm như sau: 
 o Chọn đối tượng làm liên kết (có thể là văn bản hoặc hình ảnh) 
 o Từ menu Insert, chọn Hyperlink 
 o Nếu đích đến của liên kết thuộc web site của bạn, chọn file từ “Look in”; 
 Ngược lại chọn một trong tác vụ dưới đây: 
 18
 Chọn file liên kết tại các 
 vị trí này 
 Hoặc chọn 
 một trong 
 các nút này 
 Hoặc gõ 
 tên file 
 Bookmarks 
 Bookmarks được sử dụng để tạo liên kết đến một vị trí bất kỳ trong trang web. Người 
ta thường sử dụng để “nhảy” về đầu một trang trong trang web lớn bằng nhiều trang màn 
hình. 
 - Để thêm bookmarks ta làm như sau: 
 o Lựa chọn văn bản hoặc hình ảnh làm đích đến của liên kết 
 o Từ menu Insert, chọn Bookmarks, gõ vào tên Bookmarks, sau đó chọn OK 
 - Sau khi tạo Bookmarks, tạo liên kết đến Bookmarks đó: 
 o Chọn văn bản hoặc hình ảnh làm liên kết 
 o Từ menu Insert, chọn Hyperlink 
 o Ta chọn tên Bookmarks từ cửa sổ Edit Hyperlink 
 19
 6. TẠO BẢNG TRONG TRANG WEB 
 Bảng (table) là phương tiện giúp ta trình bày thông tin trên web được rõ ràng và hấp 
dẫn hơn. Để thêm bảng vào trang web, ta thực hiện như sau: 
 - Chọn Table->Insert->Table 
 - Chọn số dòng và số cột của bảng từ mục Size: 
 - Ở mục Layout, cần xác định một số thuộc tính: 
 o Alignment: Xác định vị trí của bảng 
 o Border size: Độ dày của đường viền 
 o Cell padding: Khoảng cách giữa đường viền và ô (cell) 
 o Cell spacing: Khoảng cách giưuã các ô 
 o Specify width: Xác định độ rộng của bảng (bằng pixel hoặc bằng phần trăm) 
 Ví dụ về bảng: Tạo bảng 1 dòng, 4 cột 
 20
 Nhấp chuột phải vào bảng và chọn Table properties, sau đó xác định lại Borders, 
Cell Padding và Cell Spacing. 
 Với bảng này, khi ta xen ảnh và văn bản vào, 
 do độ cao của các ảnh không bằng nhau nên văn 
 bảng không được thẳng hàng. Để giải quyết vấn đề 
 này, ta cần thêm một hàng cho bảng, bằng cách chọn 
 Table->Insert->Rows or Columns vaÌ lựa chọn 
 thêm một dòng. 
 Thực hiện thao tác cắt, dán để được trang như 
 dưới đây: 
 7. TẠO KHUNG (FRAME) 
 21
 * Tạo khung : 
 Khung trang là dạng trang web đặc biệt dùng để chia cửa sổ ra thành nhiều khung 
khác nhau. 
 Để tạo khung trang, từ cửa sổ FrontPage 2000: 
 - Chọn File->New và nhấp vào mục Frames Pages 
 - Chọn một kiểu Frame, khi đó FrontPage 2000 sẽ hiển thị trước cho chúng ta xem: 
 - Khi thực hiện chọn OK, khung trang màn hình sau sẽ xuất hiện: 
 22
 Mỗi khung có 2 nút chọn: 
 o Set Initial Page: Để lựa chọn một trang web có sẵn làm khung 
 o New Page: Tạo trang mới cho khung đó 
 Khi lưu lại, mỗi khung sẽ là một trang web + một trang web cho khung trang. Ví dụ, 
khung trang trên sẽ gồm 4 trang web. 
 Trên khung trang ta có thể thay đổi độ rộng cho các khung rất đơn giản bằng cách drag 
chuột. 
 * Tạo liên kết cho khung : 
 Trên khung trang, thường các danh mục được bố trí bên trái. Đó là các mục được liên 
kết đến các trang web khác. Khi nhấp vào, nội dung sẽ được hiển thị ở khung bên phải. Để 
làm điều này, khi tạo liên kết cần chú ý: 
 o Ở cửa sổ Edit Hyperlink, chọn mục Target frame: 
 Nhấp chọn 
 Target frame 
 o Sau đó, chọn Page Dèfault (main) 
 Chọn New 
 Windows để mở 
 cửa sổ mới 
 Ở bất kỳ khung nào, khi tạo liên kết, nếu chọn thuộc tính của Target Frame là New 
Windows thì liên kết đó sẽmơr ra một cửa sổ mới khi được nhấp vào 
 * Chia khung thành nhiều khung khác : 
 23
 Sau khi chia khung, bạn có thể cắt khung (split frame) thành nhiều khung nhỏ theo 
chiều ngang hay chiều dọc. 
 o Kích chọn khung cần cắt 
 o Từ menu Frame chọn Split Frame 
 o Chọn kiểu cắt (ngang hoặc dọc) 
 * Xóa khung :
 o Chọn khung cần xóa 
 o Chọn Delete Frame từ menu Frame 
 * Thuộc tính của khung :
 Để thay đổi các thuộc tính của khung, nhấp chuột phải vào khung và chọn Frame 
Properties: 
 24