Sy
Thém Multimedia vào trang Web
Trong bài học này, bạn sẽ học cách thức: : Chèn hình ảnh và clip-art vao trang Web
Taq cae thumbnail cho cac hinh anh trong trang Web Soan thao các :hình ảnh trong trang Web
Thêm âm thanh nền vào trang Web Thêm các trình ảnh động vào trang Web Tao, nut hover trong trang Web
s=
Cho đến giờ, các nhà quản lý của Lakewood Mountains Resort đã rất hài lòng với công việc của bạn Tuy nhiên, bạn thích tạo cho họ có nhiều ấn tượng bằng cách kết hợp các hình ảnh, âm thanh, hình ảnh động vào các trang Web của họ Có thể nói: Web là một cách thức sử dụng dé hoa để gửi thông tin trên Internet Một Web site cần phải sử dụng đặc
điểm này
Các cộng sự của bạn nói rằng FrontPage làm cho việc đưa các loại multimedia vào trang Web trở nên dễ dàng, vì thế bạn quyết định thử nghiệm Trong bài học này, bạn sẽ học cách chèn các hình ảnh và clip-art vào trang Web, chèn các hình ảnh vào trong các ô bảng trên trang Web, và tạo các thumbnail Bạn cũng sẽ học cách đưa một âm thanh nến vào trang Web và cách chèn một ảnh động vào trang Web như thế nào Cuối cùng, bạn sẽ học cách tạo các nút hover — nút sẽ thay đổi hình thức thể
hiện mỗi khi di chuyển con trỏ chuột lên trên nó Chuẩn bị Web thực hành bài 6
Trong bài tập này, bạn sẽ tạo một Web mới dựa vào các tập tin trong folder “Lesson06” trong folder “FrontPage 2000 SBS Practice” Ban sé dùng Web này cho tất cả các bài tập trong bài 6
\ Trên menu File, chọn New và sau đó click Web
Trang 2GAG ThémfMattimedia vaotrang Web - 419!
2 Click vao biéu tugng “Import Web Wizard” Trong hop “Specify Th
Location Of The New Web’, nhập vào C:\My Webs\Lessun06, vi
sau đó click OK ,
FrontPage hién thi hép thoai “Import Web Wizard” dau tién 3 Click vao muc “From A Source Directory Of Files”, click 6 kiếr
“Include Subfolders” va click vao nut Browse
4 Duyét dén folder “Lesson06” trong folder “FrontPage 2000 SBi Practice” va click OK
5 Click Next hai lan va sau 46 click Finish
FrontPage tạo ra một Web mới đựa vào các tập tin thực hanh v đật nó trong folder Lesson06
Sử dụng hình ảnh trong trang Web
Công việc đầu tiên của bạn là học cách chèn các ảnh khác nhau và
trang Web Thực chất, 6S Hai Toll aah aah wa Baws ding trong cd
trang Web: tập tin ảnh và-clip-art Tập tin ảnh có thể có nhiều đạn khác nhau, nhưng thông thường nhất là GIE (Graphics Tnterchange Format hay JPEG (Joint Photographic Experts Group) Tap tin GIF va JPEG s dung các kỹ thuật nén ảnh, cho phép kích thước tập tin tương ứng nh hơn so với các định dạng khác Điều này cho phép các tập tin GIF v
JPEG tải xuống máy tính của người dùng nhanh hơn
Tương tự, các ảnh clip-art cũng có một số định dạng khác nhau, bao gồi
GIF, JPEG, BMP (Windows bitmap), va PNG (Portable Network Graphics
Tuy nhién, GIF va JPEG van 1a dang phé bién hon ‘ca FrontPage c
kem theo mét “Clip Art Gallery” véi hang trăm ảnh có sẵn bao gồm cá
nút, ánh động, hình ảnh, ảnh nên, và nhiều ảnh khác nữa Clip Ai
Gallery thậm chí còn có cả các tập tin âm thanh và video
Dù cho tập tin hình ảnh ở dang nao ởi nữa thì cách chèn hình ảnh ha clip-art vào trang Web cũng như nhau Trong ProntPage, đó chỉ lă vá để của việc lựa chọn các chức năng trên menu Một khả nắng đặc bié có giá trị của FrontPage là tạo các thumbnail - các phiên bản nhỏ hơ của các ảnh mà có thế tải xuống rất nhanh Để tạo một.thumbnall, đả tiên bạn chèn vào một tập tin hình ảnh ở dạng nguyên gốc Sau đó bạ
chọn hình và click vào nút “Auto Thưmbnail” trên thanh công cụ Tinag
Trên trang Web, FrontPage thay thế ảnh nguyên gốc bạn đầu bằng phiê
than thumbnail Bang cach click vao.thumbnail, ngudi sử dụng có thể hié
Trang 3406 - PHANG Binh dang va cai tién cac trang Web cia bạn
Chèn một ảnh vào trang Web
Trong bài tập này, bạn sẽ chèn một ảnh vào trang Lakewood Mountains Resort Welcome
1 Trong Folder List, double-click vao tap tin Welcome01.htm
FrontPage hién thi trang Lakewood Mountains Resort Welcome 6 ché do Page ,
2 Click vào dòng trống phía dưới dòng Lakewood Mountains Resort và phía trên địa chỉ của khu nhà nghỉ
Con trỏ sẽ nằm ở giữa dòng
3 Trên menu Insert, chọn Picture va sau d6 click vao muc From File FrontPage hién thi hép thoai Picture
4 Trong danh sách tap tin, click Main_Building jpg FrontPage hién thị ảnh trong 6 xem trước (hình 6-1) Coffeeshop_sign pg Concietgipg
TR] FrontPagel ogo git FrontPageLogo gf
[B] Grocery.ing Grocery ipg
‘ (Bi Harbor_townipg Hatbor_tovn ipo
1B) Ltehousips Litehous.ipg 1) Location ipg Location ies
l tes Main budding jpg
[B)Manages.ing Manager jpg
lÑlMin Ika na Min baler ines
epi on Bard viện
URL: fen balding bo x al al
Bee HỆ Ay để PB BA deeds SAPS er ed a “ i
TRO] real | nan” | Pxmee | Sen: |
Hinh 6-1
5 Click OK - :
FrontPage chén hinh vào vị trí đã chọn ó Trên thanh công cụ, click vào nút Save
FrontPage sẽ lưu lại các thay đổi của bạn
Gợi ý : Bằng cách giảm kích thước các tập tin, bạn sẽ làm giảm thời gian tải các tập tín này xuống máy tính của người dùng Ngoài cách giảm kích thước của bản thân ảnh, một cách thức làm giảm kích thước tập tin là sử dụng các chương trình soạn thảo hình ảnh, chẳng hạn như Paint
Trang 4BAIG: Them Multimedia vaotranglleb - 107
Kham pha “Clip Art Gallery”
Trong bài tập này, bạn sẽ khám phá “Clip Art Gallery” cua FrontPage 1 Trong Folder List, double-click vào tập tin Sights01.htm
FrontPage hién thi trang Web
2 Trên menu Insert, chon Picture va click vao muc Clip Art
FrontPage hiến thị cửa số Clip Art Gallery Trén thé Picture, ban có thể chọn clip-art để chèn vào trang Web (hình 6-2)
EXChy Act Gallery New Categay Favorites le Hinh 6-2
3 Click vao thé Sound
Trén thé Sound, ban cé thé chon cde hiéu tng 4m thanh để chèn vap trang Web
4 Click vao thé Motion Clips
"Trên thẻ Motion Clips, ban có thể chọn các ảnh động để chèn vào trang Web
5 Trong ô Categories, click biểu tượng Academic
FrontPage hiến thị các clip ảnh động có trong nhóm này
Ghi chú : nếu không có clip ảnh động nào hiện ra thì bạn có thể tải xuống các clip này tu “Microsoft Clip Gallery Live”,
6 Click vào một trong các bức hình của clip ảnh động
Trang 5408 - PHANZ Binh dang va cdi tién cdc trang Wed cia ban Hinh 6-3
Ghi chu : Mét tập tin ảnh GIF động chứa một số ảnh nối tiếp nhau Khi người sử dụng xem tập tin GIF động, các ảnh này sẽ được hiến thị nối
tiếp nhau với tốc độ nhanh và tạo ra mội hình ảnh dộng 7 Trên menu thả xuống, click nút “Play Clip”
FrontPage hiển thị clip động trong cửa sé GIF Player 8 Click nút Close ở góc phải phía trên của cửa số GIE Player
FrontPage sẽ đóng cửa sổ GIF Player
9 Trên thanh công cu Clip Art Gallery click nut Back
FrontPage hién thị lại thé Motion Clips cia cửa s6 Clip Art Gallery
10 Click nt Close ở góc phải phía trên cửa sổ Clip Art Gallery
FrontPage sẽ đóng cửa số này lại
Gợi ý : Để tải xuống các clip-art, âm thanh và các clip động từ Web, hay kết nối với Internet và click vào nút © is Online trên thanh công c(
trong cửa sổ Clip Art Gallery FrontPage sé kết nơi với site Microsof
Clip Gallery cho phép ban tal sudrg cdc cys art Bạn cùng có thể tả
xuống clip-an, âm thanh chị: đông tử các nhóm tin tren Internet, ví dụ
như alt.binaries.sounds.mtdli
Tim kiém trong Clip Art Gallery
Trong bai tap nay, ban sé tim kiém clip-art trong Clip Art Gallery
| Trong trang Web Sight01, click vào dòng trống phía dưới tiêu đi
và phía trên bảng i -
Trang 6t6 ThemfMultimedavaotrangled - 409 Clip Art "FrontPage bh , 3 CHek vào hộp “Search For Clips”,, nhap vao Arrow va sau đó nhấn Enter
FrontPage sé tim kjém gác ả ảnh mũi tên trong “Clip Art Gallery” va hiển thị :kế quả, trên thé, Pictures, (hinh 6- 4) E]hp An B Hinh 6-4
Chén clip-art vao trang Web
Trong bai tap mày, bạn, chọn một ảnh lip- art, chen, nó vào: trang ,Wab và sau đó lưu trang Web này ‘Jai
Click vao hinh qua | địa cầu có mũi tận n - FrontPage hién thị menu: thả xuống cho ảnh, slip-art a
Ghi chú :: Bạn có thể chọn một ảnh dlip-art: bất kỳ
2 Trén menu tha xuống, click vào nút Insert Clip
5 FrontPage sẽ chèn clip-art dia cầu 66 mũi tên vào vì trí đã cliọn trên trang Web vá, đóng cửa số Clip, Art Gallery lai (hình 6-5) 3 Trén thanh cong cụ, click nút Save, và sau đó click ‘OK trong hop
thoai Save Embedded Files
Trang 7110 - PHAN Binh dang va cải tiến các trang llish của bạn | M Vm, phi Tết Tnh lêk Tuyên" hệt /D:#:H 8jmi@ia 2| mm - Tem) vŸ@eamlel Normal xi 87 Paki SE Em E Cï EAywebrtenorEl mm iAlBeisig7 : NHI 27 `
Fun and Sightseeing
at Lakewood Mountains Resort
Hinh 6-5
Gợi ý : Bạn có thể tạo liên kết Với bất kỳ một ảnh nào trong trang Web, kể cả các clip-ar Để tạo một liên kết với một ảnh clip-art, click nti + phải vào ảnh, và click vào mục Hyperlink trên menu truy cập nhanh
Trong hộp thoai Create Hyperlink, duyệt đến tập tin cần liên kết, click
tập tin và click OK
Chèn hình ảnh vào các ô của bảng và tạo các thumbnail
Trong bài tập này, bạn sẽ sắp xếp các hình ảnh trên trang Web bằng cách chèn chúng vào trong các ô của bảng Bạn có thể co các hình lại bằng cách chuyển chúng sang dạng thumbnail liên kết với các ảnh gốc
1 Trong Folder List, double-click vao tập tin Sights02.htm FrontPage sẽ mở trang Web ở chế độ xem Page
2 Clíck vào ô bên trên phía trái của hàng trống đầu tiên trong bảng Trén menu Insert, chon Picture va sau dé click muc From File FrontPage hién thi hép thoai Picture (hinh 6-6)
3 Trong danh sách tập tin, click Bry_gap.jpg va click OK
FrontPage chan hình vào 6 bang Chú ý rằng kích thước ảnh lớn hơn so với 4 bang
4 Clíck vào ảnh trong ô bảng
Trang 8BAIG; Thém Muttimedia vàn tranglleb - 141 iootei: [EICAMWebsesofE 2]: #|Bgjf - Wi BS a Tee C3 private Cy images 4
lÑjBoat tọspo Boat_tips.ipg JÏBu sao.pg Biy.gap.iog
(B]81y_oap_smalting Bry_gap_small pg
[B)8utes.ipg Butes.ipg {RlButes_smalling Buttes, smalljog
(3) Butes_smait.ing Buttes_smalll jog B)Chinatwwnpg Chinatwning JB Coftenchon sian iy Trlieeehnn, san lne ap i js wey ¬ = el sal 2) t1 Bế a ia eet | | Hinh 6-6
5 Trên thanh công cụ Image, click nút Auto Thumbnail
FrontPage chuyển ảnh sang một thumbnail nhỏ hơn liên kết với ảnh nguyên gốc (hình 6-7) /HÌE ME
2 Fun and Sightseeing
II || at Lakewood Mountains Resort {8} Bry_oap_smat [B) Buttes ng Bl Buttes_emalls §) Buttes sma [8] Chinatoning (2) Closowin avi (R] Cofieoehop_s oe ¬ - - ề ng [fo see the full-sized picture, click the trumbnail ; gì) co dmage [De ? pope ence nnn pensar rn Dị mix 4 a f © iphove ccs Ị ` Ị Ị 1 proven class | { | i B) Frond 01 rie ị H a Fronbak02 hire Ỉ HỆ] FiontPepedox s 4 $2 = Hinh 6-7
6 Click vào ô giữa cùng hàng Trên menu Insert, chon Picture va click muc From File, click Shore.jpg va sau dé click OK
Trang 9-_ i: ih dang vt atin trang eb cia ban 7 8 Di Khi Click’ vào ảnh ở ô giữa, và trên thanh côn cụ Image, click nút Auto Pai ee FrontPage igo! mot ảnh thumbnail và liên kết nó với ảnh nguyên gốc
Trên thanh công cụ click nút Save,- và click OR trong hộp thoại Save Embedded Files
FrontPage sẽ lưu lại các thay đổi của bạn
chuyển các tập tin ảnh vào folder ảnh
bạn tạo một Web, FrontPage tự động tạo một folder ảnh Nếu Web của bạn có một lượng ảnh quá lớn thì việc di chuyển toàn bộ các tập tỉn ảnh vào folder ảnh sẽ làm cho việc quản lý Web trở nên dé dang hon Trong bài tập này, bạn sé di chuyển các tập tin ảnh từ folder chính vào các folder ánh của nó và quan sát xem FrontPage cap nhật các liên kết như
1
thế nào
Trên thanh View, click biểu tượng Folders
FrontPage hiển thị một danh sách các tập tin và folder trong-Web
Lesson06
Click nút Type ở phía trên danh sách tập tỉn
FrontPage ign thị, các tap tin theo.thit.ty chit cdi,
Ghi chú : Nếu các tập tinhiển thị theo một trật tự ngược, click nút Type
3
+ thêm một lần nda
“Trong danh sách, tập tin, click Boat, “trips Jpg Cuén xuống cho đến khi bạn thấy, YỊo Fats small jpg, giữ phím Shift và click vào tập tin đó
Kéo các tập tin (hiến chọn vào folder ảnh trong Folder List FrontPage sé di chegéa tất cả các tap tin JPEG vào ‘folder anh va cập nhật các liên kết giữa các trang Web và các tập tin JPEG dé phan ánh vị trí mới của các tập tin
- Trong danh sách tập tin,Ÿ ;
click mOt tap tin GIF Mà: oy
Các tập tia GIF được chọn
Kéo các tập tin GIF vào folder anh :
FrontPage sẽ dĩ đhuyển các tập tin GIE vào folder ảnh v và cập nhật
các liên kết
Trên thanh Views, click biểu ¡tượng Page, va sau dé double-click tap
tin Sight03.htm trong Folder List: ,
FrontPage "hiến thị trang Web o chế độ, xem Page
Trang 10
Ate BAG ThemfRuttimediawaetrang Web - 4+43-
8 Click ‘Hiit” ftren ber trai VÀ sau đó trên
menu truy cập' nhanh, click mục Hyperlink Properties
FrontPage hiển thị hộp thoại Edit Hyperlinks Chú ý rằng, đích của liên kết (trong hộp URL) đã được cập nhật và tró tới folder ảnh 9 Click nit Cancel trong hộp thoai Edit Hyperlinks
FrontPage déng hép thoai Edit Hyperlinks lai
Sta d6éi các ảnh trong trang Web
bi trong trang Web thi dé, nhưng thông thường các ảnh thường lớn ‡ hiểu bay nhỏ hơn nhiều so với trang Web Hơn nữa, một số nguŠ g thiết lập trình duyệt của họ tải các trang Web
xuống mà không tải hình ảnh kèm theo: Điểu này giúp cho việc tải trang
Web nhanh hơn, nhưng đông thời cũng sẽ tạo ra những chỗ hở trong trang Web ở các vị trí của hình Thay vì hình ảnh, người đùng sẽ thấy các dòng mô tả ở vị trí của hình Việc đặt các ản|
Thay đổi kích thước ảnh
Trong bài tập này, bạn sẽ thay đổi kích thước ảnh trên một trang Web 1 Trong Folder List, double-click tập tin Welcome02.htm
FrontPage hiển thị trang Web Welcome02.htm ở chế độ xem Page Ảnh khách sạn quá lớn và \ đẩy phần địa chỉ và số điện thoại khỏi
màn hình + ? , -
2 Click vào ảnh khách sạn, và sau đó cuộn xuống góc phải phía dưới của hình
Một ö vuông nhỏ 'xuất hiện ở góc của ảnh 3 Di chuyén con trả chuột vào ô vuông nhỏ này
Con trỏ chuột chuyển sang dạng mũi tên hai chiều theo đường chéo
4 Kéo con trỏ chuột lên trên và về phía trái để co nhỏ ảnh lại
FrontPage thay đổi kích thước: ảnh:-khách.sạn trong khi vẫn giữ tỉ lệ gốc như được minh họa,trong hình 6-8
Fae 0-3!
Trang 11114 - pHi Binh dang va cditién cactrang Web cia ban
‘te’ EO Sow inate Parat Toole Table Fuaies Whew! tes 0
Do hel She: Re @ tho si km k : ‘ sora [BAU a we ứ = Mews TE HS = Lakewood Mountains Resort
1501 Bryant's Gap Trail, Rrewkan, CA 9450)
Welcome to Lakewood Mountains Resort, your luxur Call 1-800-555-3411 today! àl ÉP lens (G0M-EPSED/AI goer se me TN of Hinh 6-8
Dinh van ban thay thé cho hinh anh
Trong bài tập này, bạn sẽ định văn bản thay thế cho một hình troi trạng Web
1 Click nút phải vào hìi khách sạn, va sau dé tri menu truy cập nhan click vào mục Pictu Properties
Trang 12BAI6 Tham Multimedia vio trangleb - 415 2 Click vào hộp Text phía dưới mục Alternative Representation, nhập
vao "Lakewood Mountains Resort main building” va click OK FrontPage chèn vào đoạn văn được dùng trong trường hợp trình duyệt của người dùng không hiển thị được các hình trong trang Web 3 Trên thanh công cụ, click nút Save
trontPage sẽ lưu lại các thay đổi của bạn
Đưa các hiệu ứng âm thanh va nhac vào các
trang Web
Phần lớn nội dung của trang Web là thông tin, tuy nhiên người dùng còn quan tâm đến nhiều vấn dé khác ngồi thơng tin khi truy cập Web Bạn cũng muốn Web site Lakewood Mountains Resort là một nơi hấp dẫn để thu hút người dùng Một cách để làm cho Web site của bạn hấp dẫn là đưa âm thanh nền vào trang chủ Âm thanh nên này sẽ phát ra chừng nào trang chủ còn được hiện ra trong trình duyệt
Chú ý : Khi bạn sử dụng các bước này để chèn một tập tin âm thanh vào trang Web, tập tin âm thanh sẽ chỉ phát ra khi trang Web được mở ra trong trình duyệt Internet Explorer của Microsoft, còn đối với trình duyệt Navigator của Netscape thì không có tác dụng Trình duyệt Netscape
Nayigator dùng cách thức mã hóa HTML khác để tạo âm thanh nên
Thêm âm thanh nền vào trang Web
Trong bài tập này, bạn sẽ thêm âm thanh nền vào trang Web và kiểm tra âm thanh phát ra trong trình duyệt Web của ban
1 Trong Folder List, double-click vao tap tin Welcome03.htm FrontPage hiến thị trang Web Welcome03.htm trong chế độ Page 2 Click nút phải vào vùng trống trên trang Web và sau đó click vào muc Page Properties
FrontPage hién thi hép thoai Page Properties (xem hinh 6-10) 3 Click nút Browse
FrontPage hiển thị h6p thoai Background Sound 4 Click tập tin Tolizt01.mid và click OK hai lan
Trang 13446 ~ PHANG: Binh dang o3 cai tién cde trang Web lia ban oH: Hinh 6-10 5 Trên thanh công cụ, click nut Save va sau a6 click nút Preview In Browser
FrontPage lưu lại trang Web và hiển thị nó trong trình duyệt Nếu bạn dùng Mierosoft Internet Explorer, âm thanh nên sẽ được phát
ra tự động số
6 Click nút Close ở phía trên :góc phải của trình duyệt Trình duyệt đóng lai va FrontPage lại hiện ra
Gợi ý : Mặc định, âm thanh nên sẽ được phát ra liên tục chừng nào trang
Web con dược hiển thị trong trình duyệt Tuy nhiên, bạn có thể định
_.để Am thanh nên chỉ phát ra một số lần tôi thôi Trong hộp thoại Page
_ Properties, bd chọn hộp kiém Forever Trong hép Loop nhập vào,,số
` lần lặp lại âm thanh nên và sau đỏ click OK `
Thêm video vòo trang Web :
Đến đây, bạn đã có nhiều tiến bộ trong việc sử dụng ErontPage để chèn các ảnh tĩnh vào trang Web Tuy: nhiên, ruột :điều thật, sự: có ấn tượng
là:bạn có thể dễ dàng: thêm các clip ánh động vào tran§ Web Khi người
dùng tải một trang Web với các clip ảnh động, video sẽ ty động thực
hiện (cả âm thanh lẫn hình ảnh) Bạn cũng có thể tạo các liên kết đến
Trang 14GANG: Them Multimedia vantranglled - 117
2
Chèn vào một clip ảnh động
Trong: bài: tâp:này: bạn ;sẽ: chàn: một:chp: ánh, động vào lrang Web và
xem qua nó trong trình duyệt
1 Trong Folder List, double-clicek Pc_help01.htm
FrontPage hiển thị trang Web ở chế độ Page
Click vào dòng trống phía dưới phân văn bản của trang Web Trên menu Insert, chon Picture va sau d6 click vao muc Video
FrontPage hiển thị hộp thoại Video (xem hình 6-11)
Hinh 6-11
Click vao tép tin Closewin.avi trong folder Lesson06 va sau dé click OK
FrontPage chèn clip ảnh động vào trang Web Khi trang Web được hiển thị trong trình duyệt, video sẽ tự động thực hiện (xem hình `
6-12) ‘
Trên thanh công cu, click nut Save va sau đó click nút Preview In Browser
FrontPage lưu lại trang Web và hiển thị nó trong trinh duyệt lip
Trang 15448 - PRAN2: Binh dang va cditién cac trang Web cia ban
Computer Help is Available
At Lakewood Mountains Resort, our technical staff can help with any computer problems you encounter during your stay Gur hotel network-also features many informative belp videos such as the folowing: » Herat mn RTA tn 714 Soe ⁄ of Hinh 6-12 Liên kết đến một clip ảnh động
Trong bài tập này, bạn sẽ tạo một liên kết đến một tập tin clip ảnh động thay vì chèn nó trực tiếp vào trang Web
1 Trong Folder List, double-click tap tin Pc_help-htm FrontPage hién thi trang Web ở chế độ Page 2 Chọn đoạn văn “How to drag and drop"
3 Click nút phải vào đoạn văn được chọn và trên menu truy cập nhanh, click mục Hyperlink
FrontPage hiển thị hộp thoại Create Hyperlink như hình 6-13 4 Trong danh sách tập tin, click Dragdrop.avi và click OK
FrontPage chèn vào một liên kết
5 Trên thanh công cụ, click nút Save và sau đó click vào nút Preview In Browser
FrontPage luu lai trang Web va hiển thị nó trong trình duyệt 6 Click vào lién két "How to drag and drop"
Trang 16BAIG: Tham Multimedia vaotrangitleb - a R CWMywabfLseonGE 3 al ct efi : “the
fo lekcomeÐ2 hìm Lakewood Mountains Resat
2ÏWecome03hlim Lakewood Mountains Flesoit _ ĐẬPc henD1 lim Compater Help is Available
1 ÄPc hep0aim Computer Help is Avaiable C3 private {images :| Boat tipsing Boat_tips.ipg eo ipa Bugera BB}8q_gap_smalting Biy_gap_smallieg + TBR ates ina Ruttag inn il xa PT ma tune eke nae Hinh 6-14
Trang 17420 - PHANZ: Binh dang va cai tién cac trang Web cia ban
Sử dụng bdng kiéu (style sheet) để bố trí các phôn
tử củo trang Web
Một trong số các kỹ thuật hấp dẫn tuy hơi phức tạp được hỗ trợ bởi FrontPage 2000 là khả năng sử dụng bảng kiểu để kiếm soát cách thể hiện của trang Web Một bảng kiểu của một trang Web là một tập tin văn bản mà trong đó bạn qui định cách thể hiện cho cdc phan tử khác nhau trong trang Web Kỹ thuật tạo bảng kiểu - còn gọi là Cascading Style Sheet (CSS) vi ban sử dụng nhiều bảng kiểu cho cùng một trang Web - được định nghĩa bởi tổ chức World Wide Web Consortium (www.w3.org)
FrontPage cho phép bạn dễ dàng sử dụng các đặc điểm rất mạnh của bảng kiểu với sự hỗ trợ cho các phiên bản mới nhất cia CSS: vị trí tuyệt đối và tương đối của các phần tử trong trang Web Trước đây, bạn đã
biết cách dùng bảng để bố trí các phần tử vào các vị trí khác nhau trên trang Web Đó có thể được coi là một cách làm được sử dụng trong phần lớn lịch sử hình thành Web Tuy nhiên, với các bảng kiểu, bạn có thể
định vị trí của các trang Web chính xác vào các vị trí bạn mong muốn
mà không cần phải dùng bảng
Với FrontPage, bạn không cẩn phải viết mã bảng kiểu để định vị các phần tử trong trang Web Bạn chỉ việc chọn menu và các hộp thoại để
xác định vị trí cho các phần tử FrontPage sẽ làm hết các công việc còn
lại và bạn thậm chí còn không thấy mã bảng kiếu
Sử dụng báng kiểu để định vị hình ảnh
Từng bước sau sẽ giúp bạn sử dụng bảng kiểu để định vị trí cho hình ảnh \ Trên thanh Views, click vào biểu tượng Page
FrontPage hiển thị Web ở chế độ xem Page
2 Trên thanh céng cu, click nút New
FrontPage tạo một trang Web mới và hiển thị nó ở chế độ Page 3 Trén menu Insert, chon Picture va click vào mục From File
FrontPage hiển thị hộp thoại Picture (xem hình 6-15)
4 Double-click vao folder Images, click tap tin Bry _gap_small jpg và click OK
Trang 18BAIS ThemfMlultimedia vaotrangWeb - 121
lÑ|Boat to bọ Boat_uips ipo ~ IÃ|8I9 oap.pg Biy_gep.ipg
[B}Bry_ gap_smalliog Bry_gap_emat.iog [R|Butesipg Buttes pg"
[ÑjButes smalpg Buttes_smalling (Ä|Buttes, smattt jpg Buttes_smallt pg {3} Chinawn jpg Chinatun.jeg Pas Hinh 6-15
§ Trén menu Insert, chon Picture va sau dé click muc From File
FrontPage hién thi hép thoai Picture
6 Trong phần danh sách tập tin của hộp thoại, click tập tin Shore smalljpg và click OK
ErontPage chèn hình mới vào bên phải của hình thứ nhất 7, Click nut phải vào hình thứ
hai Trên menu truy cập nhanh, click mục Picture Properties Click nut Style, click nit Format va trong menu thả xuống, click mục Position
FrontPage hién thi hép
thoai Position (xem hinh 6- 16)
8 Trong phần Positioning
Style của hộp thoại, click
Trang 19422 - PuiiN2: Binh dang va caitién cdc trang Web cia ban 9 Click OK ba lần / FrontPage'đóng lại tất cá các hộp thoại và định vị hình theo vị trí bạn đã định
10 CHek nút phải vào hình thứ nhất Trên menu truy cập nhanh, click vào mục Picture Properties Click nút Style, click nút Format và trong menu thả xuống, click mục Position
FrontPage hién thi hép thoai Position
11 Trong phan Positioning Style, click biểu tượng Absolute Nhập 50
vào hộp Left và 50 vào hộp Top
FrontPage sẽ định lại vị trí của bình cách lễ trái 50 pixels và lề trên 50 pixels 12 Click OK ba lần ErontPage đóng lại tất cả các hộp thoại và định lại vị trí của hình theo vị trí bạn đã định (xem hình 6-17) D s 2B) By gạp, mai ‘ Folders 13 toners | Secor aa
BEETS aero arash
maaan rber or eS aos
Hinh 6-17
13 Trên thanh công cụ, click nút Save, nhập CSS01.htm vào hộp File
Name va sau đó click nút 8ave
FrontPage sé luu lai cdc thay đổi của bạn
Gợi ý : Bạn có thể dùng các bằng kiểu để định vị các phần tử trong trang
Trang 20
BAlE: Them Multimedia vaotrangleb - “fi
đó đã có một phân tử khác Định vị tương đối là di chuyển phần
xuống và về phía phải một khoảng xác định so với vị trí đáng lẽ ¡ được thế hiện, mà không phải so với các lễ của trang Web Như vệ định vị tương đối an toàn hơn tuy nhiên khó kiểm soát
Thêm một bước nia: Tao cde nút Hover
Các clip ảnh động không phải là cách duy nhất để tạo các ảnh chuy( động trong FrontPage Còn có một hiéu tng multimedia khác tương đ phổ dụng là nút hover - là nút sẽ thay đổi hình thái khi người dùng chuyển con trỏ chuột lên nó
Nút hover thực chất là một Java applet được tạo bởi FrontPage Bạn ¡
thể dùng nút hover để liên kết với một trang Web khác Khi người dùi
di chuyển chuột lên một nút hover, nút này hoặc sẽ chuyển sang mì khác hoặc chuyển sang dạng được nhấn xuống Khi người dùng click vị nút hover, trang Web liên kết sẽ được hiện ra
Tạo một nút hover
Trong bài tập này, bạn sẽ tạo một nút hover và thiết lập các thuộc tín của nó
+ Trong Folder List, double-click tap tin Frontdr01.htm FrontPage sé md trang Web va hién thi n6 @ ché độ Page 2 Click vào dòng phía
đưới dòng văn bản Wei- come Trén menu In-
sert, chon Component TS :
và click vao muc Hover '994% -JMNMjE]: siilmywôni LJNE
Hoyer đưượn Propeities
Button Riese) [Gon Sly Ee
FrontPage hiénthihép ar fia Height
thoai Hover Button Properties
(xem hinh 6-18) Hinh 6-18
3 Nhap "Enter the Web Site" vio hộp Button Text Nhap 300 tron hép Width va 50 trong hép Height
FrontPage thiết lập kích thước và tiêu dé cho nút 4 Click vào mũi tên thả xuống của mục Effect
Trang 21424 - PAA? Biph dang va caitién cdc trang led cia ban
5 Click chon muc Bevel In
FrontPage tao mét nut vdi trang thái bị nhấn xuống khi di chuyển con trd chuột lên trên nó
6 Click nút Browse
FrontPage hiển thị hộp thoại Select Hover Button Hyperlink
7 Cuộn xuống va chon Index.htm, click OK hai lần
FrontPage tạo một nút hover với các thuộc tính bạn chọn 8, Trên thanh công cụ, click nút Save, và sau đó click nút Preview
In Browser
FrontPage lưu lại các thay đổi và hiển thị trang Web trong trình duyệt
9 Di chuyển con trỏ chuột lên trên nút hover
Phân văn bản của nút bị đi chuyển một chút giống như là nút bị nhấn vào
10 Click nút hover
Trình duyệt sẽ tải và hiển thị trang chủ
Gợi ý : Còn một cách khác để tạo liên kết cho nút hover là chck nút phải vào nút và click mục Hover Button Properties trong menu truy cập nhanh H6p thoai Hover Button hién ra Trong 6 Link To, duyệt đến tập tin liên
kết và click OK
Kết thúc bởi học
1 Click nút Close ở góc phải phía trên cửa số trình duyệt
Trình duyệt đóng lại và FrontPage hién ra 2 Trên menu File, click Close Web
3 Với mỗi trang Web, khi FrontPage nhắc bạn lưu lại trang Web, thì
click Yes
FrontPage sẽ lưu lại các thay đổi và đóng Web Lesson06
Thơm khdo nhanh bai 6
Chèn một hình vào Cliek vào vị trí cẩn chèn trên trang Web Trên trang Web menu Insert, chọn Picture và click myc From File,
duyệt đến tập tin mong muốn và click OK
Tìm kiếm Clip Art Gallery “Trên menu Insert, chọn Picture và click muc Clip Art Trong hop Search For Clipart, nhập vào phân văn bản cần tìm và nhấn Enter
Trang 22BAG Them Multimedia vaotrangleb - 125 Chèn clip trang Web art vào Chèn một hình vào ô trong bảng Di chuyển hình vào folder Images
‘Tao cdc thumbnail hinh
Thay đổi kích thước hình
Thêm âm thanh nên vào trang Web Định phan văn bản thay thí cho hình Chèn một video vào trang Web Liên kết với một clip ảnh động Tạo một nút hover
Click vào vị trí mong muốn trên trang Web Trên menu Insert, chọn Picture va click mục Clip Art Click một phân loại thích hợp, click vào
clipart mong muốn và click nút
Insert Clip
Click vào ô cần chèn hình Trên menu Insert, chon Picture va click mục From File Trong danh sách tập tin, click tập tin hình mong muốn và click OK Click biểu tượng Folders trên thanh Views, và click vào nút Type ở đầu danh sách tập tin Chọn các
tập tin hình và kéo chúng vào folder Images trong
Folder List
Click vao mét hinh trén trang Web, a
va sau đó click nút Auto Thumbnail trên thanh công cụ Image
Click hình và sau đó kéo một trong các điểm kiểm soát để thay đổi kích thước của hình
Click nút phải vào vùng trống trên trang Web và trên menu truy cập nhanh, click mục Page Properties Clíck nút Browse, chọn tập tín âm thanh và click OK hai lần ,
Click nút phải vào hình, trên menu truy cập nhanh, click myc Picture Properties: Click vao 6 Text va nhập vào phần văn bản thay thé, sau dé click OK Click vào vị trí mong muốn trên trang Web Trên menu Insert, chọn Picture và click mục Video Chọn clip ảnh động mong muốn và sau dé click OK Chon và click nút phải vào phần văn bản hay hình ảnh cho liên kết Trên menu truy cập nhanh, click muc Hyperlink Chọn tập tin videø mong muốn và click OK
Trang 23On va thuc hanh phan 2 Bạn sẽ ôn và thực hành cách thức: Sử dụng các theme cia FrontPage Sử dụng các phần tử của FrontPage Tạo các danh sách dạng nút và dạng đánh số
Sử dụng bâng để bố trí các thành phần của trang Web
Chèn hình ảnh và clip-art vao trang Web Tạo các ảnh thumbnail
Đưa âm thanh nền vào trang Web Chèn video-clip vào trang Web
Trước khi sang phần 3 - phần nói về cách tạo các form cho phép người dùng gửi ý kiến phản hồi và các khung để cải tiến Web site - bạn cần phải ôn lại các kỹ năng mà bạn đã học trong phần 2 bằng cách hồn thành phần ơn và thực hành này Bạn sẽ ôn lại cách thức sử dụng các theme của FrontPage, sử dụng các phần tử của FrontPage, tạo các danh sách, chèn các bảng để sắp xếp các phân tử của trang Web, chèn hình ảnh và clip-art, tạo các ảnh thumbnail, thêm âm thanh nên và chèn các video-clip
Kịch bản
Các đồng sự của bạn đang ham hở sử dụng FrontPage cho các dự án của họ, và họ đã sản đón bạn với các câu hỏi về thiết kế Web Một trong số các câu hỏi thờng gặp là "Bạn có thể làm gì khác nữa với FrontPage?” Để trả lời câu hỏi này, bạn đồng ý trình bày một số kỹ thuật của FrontPage ở mức vừa phải Bạn quyết định minh họa cách thức sử dụng các theme của FrontPage, sử dụng các phần tử của ErontPage, chèn hình ảnh, và một số kỹ năng khác
Bước 1: Cải tiến trang Web
Trang 24Ínuathựchành phản? - 427
2 Hiển thị Web ở chế độ Navigation và sử dụng theme Citrus Punch cho tất cả các trang trong Web vừa tạo Sử dụng một theme kháa chỉ cho một trang Web được lựa chọn
Hiển thị trang chủ ở chế độ Page Thay thế đoạn văn cuối cùng với một bộ đếm Sau khi chèn vào bộ đếm, thay đổi các thuộc tính của nó bằng cách chọn các kiểu bộ đếm khác nhau, và thiết lập sao cho bộ đếm chỉ hiển thị 7 chữ số
4 Lưu trang chủ với các thay đổi của bạn và đóng trang chủ này lại Thông tin tham khảo
Tạo 1 Web Xem bài 2
Su dung wizard va Web mdu Xem bai 2 Sw dung cée theme cia FrontPage Xem bai 4 Chèn các phân tit cia FrontPage Xem bai 4 Thay đổi các thuộc tính của phan ti Xem bài 4 Bước 2: Bịnh dạng trang Web 1 2 Trên thanh công cụ, click nút New Trong trang mới tạo, tạo một danh sách dạng đánh số với các bước sau: l
1 Tạo một trang mới
2 Click nit Numbering trén thanh công cụ 3 Nhập các mục của danh sách
Nhấn phím Enter hai lần để tạo một dòng trống phía dưới danh sách Tạo một danh sách đạng nút với cac mục sau:
« Themes + Components * Templates
Nhấn phím Enter hai lần để tạo một dòng trống phía dưới danh sách Chèn vào một bảng gồm hai hàng và hai cột
Trong ô bên trên phía trái, nhập vào "Min Building" Trong 6 bên trên phía phải, nhập vào “Swimming pool”
Chọn hai ô ở dòng đầu Thay đổi các thuộc tính của ô để canh giữa
nội dung ô theo phương nằm ngang `
Trang 25428 - PHAN2 Dinh dang va cdi tién cac trang Web cia ban Thông tin tham khảo
Tạo một trang Web mới Xem bài 2
Lưu trang Web Xem bài 2
Tạo danh sách dạng đánh số Xem bai 5 Tạo danh sách dạng nút Xem bài 5
Chèn một bảng Xem bài 5
Thay đổi các thuộc tính của ô bảng Xem bài 5
Thuy đối các thuộc tinh cua trang Xem bai 5
Bước 3: Thêm hình ảnh, âm thanh và video
1 Trong ô dưới phía trái, chèn và tập tín hình ảnh Main_building.jPpE trong folder Review02\images trong folder FrontPage 2000 SBS Practice
2 Tạo một ảnh thumbnail cho ảnh toà nhà Lặp lại các bước để chèn hình Pool01jpg vào ô dưới bên phải và tạo một ảnh thumbnail tương ứng
3 Ty folder Review02 trong folder FrontPage 2000 SBS Practice, lay tap tin The Microsoft Sound.wav lam 4m thanh nén cho trang Web Thiét lap dé cho 4m thanh chi phát một lần khi trang Web mở ra
lần đầu :
4 Chén tap tin video CloseWin.Avi ti trong folder Review02 trong folder FrontPage 2000 SBS Practice vào phía dưới bảng
8 Xóa video-cip khỏi trang Web, sau đó thay nó bằng một liên kết tới một video-clip
Thông tin tham khảo
Chèn hình ảnh ào ô bằng Xem bài 6
Tạo ảnh thumbngi Xem bài 6
Chèn âm thanh nên Xem bài 6 Chen mét video-clip, Xem bai 6 Tạo một liên hết dén một video-clip Xem bài 6
Két thic phdn ô/ va thie hanh
4 2u cất thank di trén trang FormatOl
Trang 26PHAN 3 CAC KY THUAT TIÊN TIEN
VỨI WEB SITE
Grp ¬
Tạo form để nhận ý kiến phản hồi của người dùng
Trong bài này chúng ta sẽ học cách thức: ˆ® Sử dụng Form Page Wizard
e Tạo một Form từ đầu
e Thêm các trường (fields) và văn bản vào form
e Sửa đổi các trường (fields) của form
4 e Chuyển dữ liệu của form thành một tập tin văn bả hay gửi đến một địa chỉ email ˆ
e Tạo một sổ khách hang
Trong các phân trước, chúng ta đã tạo một Web site khá ấn tượng đ trình bày sự hấp dẫn của Lake Mountains Resort Nhưng người dùng We ngày càng trở nên sành điệu, do đó không thể chỉ dừng ở việc thể hiệ
các thông tin “tĩnh” Người dùng Web thường mong muốn có thể gửi thén
tin hoặc các góp ý đến Web site và nhận được thông tin trả lời từ ch nhân của Web site Người quản lý của Lakewood Mountains Resort mué chúng ta tạo khả năng để người truy cập Web site của ho có thể tra đổi thông tin và kế hoạch cho kỳ nghỉ, đặt phòng, hoặc yêu câu các thôn
tin khác hơn về khu du lịch
Trang 27130 - PHAN3 Cac hy thuat tien tién uti lleb site
một cơ sở dữ liệu (database), hoặc chương trình của Web server Cuối cùng, chúng ta sẽ học cách tạo một sổ khách hàng cho phép người dùng ghi lại các ý kiến đóng góp
Chuẩn bị Web thực hành bài 7
Trong bài tập này, chúng ta sé tao m6t Web mới dựa trên các tập tin trong thư mục Ù,esson07 trong thư mục “FrontPage 2000 SBS Practice” Chúng ta sẽ dùng Web này cho tất cả các bài tập trong bài 7
1 Trên Menu “File”, trỏ đến “New”, rồi click Web, FrontPage sé hién một hộp thoại New
2 Click vào biểu tượng “Import Web Wizard” Trong hộp “Location Of The New Web”, xóa các thông tin mặc dinh va nhap vao C:\My Webs\Lesson07, réi click OK
Fronpage sẽ hiện hộp đối thoai “Import Web Wizard”
3 Click vào tiy chon “Form A Source Directory Of File”, click vao 6 kiém “Include Subfolders” Réi click vad nút Browse
4 Duyét dén thu muc Lesson07 trong thu muc “FrontPage 2000 SBS Practice”, réi click OK
5 Cliek nút “Next” hai lần, rồi nhấn “Finish”
tronPage tạo một Web mới dựa trên các tập tin trong thư mục “LeŠson07”
Tìm hiểu vê Form
Các form có mặt khắp nơi Chúng ta điển vào một.form ở ngân hàng để
rút tiên từ tài khoản của mình, chúng ta điển vào các form đăng ký dự
thi và ngay cá khi mua hàng chúng ta cũng có, thể phải điển vào các form của đơn đặt hàng Hầu hết các form trên giấy đều có một đạng chung là một danh sách các câu hỏi kèm theo các ô trống mà chúng ta sẽ điển câu trả lời vào đó Một vài form có một đanh sách các ô kiểm cho phép chúng ta chọn nhiều mục trong danh sách đó Sau khi điển xong form chúng ta sẽ chuyển cho nhân viên ngân hàng, người bán để
họ xử lý dựa vào thông tin mà chúng ta đa điển
Trang 28
BAL’ Tao form để nhận ( kiến phản hủi của người đừng -
sẽ nhấn vào nút “Submit” để gửi dữ liệu của form đến Web server mà ở đó nó sẽ được xử lý (xem hình 7-1) Nhãn (Label) Reserve arcom
Lakewood Mountains Resort will be hepby to process your room request over the Web Please complete the entire farm, your full name, street number, and @-meil edciress | Hộp văn bản Nam (Text bax) Sweet address œw] State/Province! | Nút chọn lựa
Zi/Posdsi code | (Radio button)
‘What type of room ate you equesting? © Standard © Deluxe Suite
Any addiional sequ6sla? [” Mountain view Gcean wew
T” Kichanatie rome 7 Hộp kiểm
febrile sate (Check box)
eal _ |
(BRE SRE LETT IT MTT TST TE oa Copan OPE ET tT Hinh 7-1
Tao ‘Form trong FrontPage
Nếu không tạo form bằng FrontPage chúng ta phải hiểu ngôn ngữ HTML cũng như phải sử dụng các thẻ khác nhau như <FORM>, <INPUT> .Với
FrontPage, chúng ta không cần phải có kiến thức về HTML để tạo form
mà chỉ cần sử dụng bàn phím và chuột
Có ba cách để tạo form: sử dụng Eorm Page Wizard, sử dụng một form
mẫu, hoặc tạo form từ đầu Khi tạo form bằng Eorm Page Wizard, FrontPage sẽ hỏi chúng ta các câu hỏi về form mà chúng ta cần tạo và
dựa vào các câu trả lời để tạo form Sau đó chúng ta có thể sửa đổi form vừa tạo cho hợp với yêu cầu của mình Sử dụng form mẫu thì đơn giản hơn: thay vì hỏi các câu hỏi, FrontPage sẽ tạo form dựa vào một mẫu cho sẵn mà chúng ta chọn, rồi chúng ta sẽ sửa đổi cho phù hợp với yêu
cầu của mình
Trang 29132 - PHAN Cachythuat tien tién uti Web site
Các kiểu của các đối tượng trên form
Form của Web sử dụng các đối tượng được định nghĩa trong ngôn ngữ HTML Các đối tượng của form trong FrontPage được tóm tắt trong
bảng sau:
Đổi tượng Diễn giải
Form Thêm một vùng Form vào trang Wcb One-line text box
Scrolling text box Check box Radio button Drop-down menu Push button Picture Label
Thêm một hộp văn bản có một dòng vào form (vào vùng phía trong đường biên của form trên trang Web)
Thêm một hộp văn bản có các thanh cuộn vào form Người dùng có thế nhập văn bản với chiều dài tùy ý
Thêm một ô kiểm tra vào form Người đùng có thể cliek chọn nhiều ô kiểm để chọn nhiều tùy chọn cho trước Thêm một nút chọn lựa Người dùng chỉ có thế click chọn một trong một nhóm các nút chọn lựa để chọn một tùy chọn cho trước
Thêm một Menu thả xuống vào form - tương tự như một nhóm các nút chọn Mặc định, người dùng có thể chỉ chọn một trong số các tùy chọn cho trước Loại này tốt hơn so với các nút chọn trong trường hợp có nhiều tùy chọn; Menu thả xuống cũng có thể thiết lập cho phép chọn nhiều mục Thêm một nút nhấn vào form Người dùng có thể cHck vào nút nhấn này để thực hiện một tác động nào đó Thông thường nút nhấn ít được dùng vì FrontPage đã tự động tạo ra nút Submit va Reset khi ban tao mét form Ban có thể thêm vào các nút nhấn để hiển thị các hộp thông báo, thực
hiện một script lệnh trên trang web, hay thực hiện các
công việc khác không liên quan trực tiếp đến việc gửi dữ liệu của form lên máy chủ
Thêm một hình ảnh vào form Chúng ta có thể sử dụng một hình ảnh như một nút nhấn
Trong khi một trường và nhãn của nó đang được chọn, hãy chọn nhãn “có thể click được” để kích hoạt trường (fñield) ứng với nó
Tạo một Form với Form Page Wizard
Trang 30
BAI: Tao form 46 nhan g kiến phản hôi của ngườiđùng - 133
1 Đảm báo rằng trang Web của chúng ta đang được hiện trong chế độ xem Page Trên menu File, trỏ đến New, rồi click Page Hộp thoại New sẽ xuất hiện
ca
2 Click vao biéu tugng “Form Page Wizard”
FrontPage sẽ hiện hộp thoại đầu tiên của Form Page Wizard (xem hình 7-2)
3 Click nut “Next”
FrontPage sé hién hép thoai thi hai cia Form Page Wizard nhu hinh 7-3 Hinh 7-2 4 Click nút “Add” để thêm thông tìn vào form
Hộp thoại chứa danh sách các kiểu thông tín khác nhau mà Wizard có
thể tạo lên form (xem hình 7-4) Sa lo bia Pol,leoaole bú Andgg Ý Hình 7-3
Chú ý : Khi bạn tạo một form, một thanh chỉ thị tiến trình xuất hiện ở phía dưới của hộp thoại Form Page Wizard Thanh chỉ thị này báo cho
bạn biết quá trình đang diễn ra đến dâu
Trang 31
134 - PHIN3.Cachy that tien tign vei Web site
5 Trong hép thoai nay, click vao muc “Contact Information” Trong khung “Edit the prompt for this question”, xoá dữ liệu hiện sẵn và nhập vào “Please enter your full name and street address.” Click nut Next
Wizard sẽ hỏi các thông tin muốn thể hiện trên form (xem hình 7-5)
Chú ý : Nếu bạn chấp nhận các câu hỏi mặc định, bạn luôn có thể thay đối nó sau này
Hình 7-5
6 Trong hộp thoại, xóa các ô kiểm Title, Organization, Work Phone, Fax, E-mail Address va Web Address Click 6 kiém “Postal Address” va “Home Phone”, réi click nut Next
Hộp thoại sẽ hiện danh sách các câu hỏi sẽ xuất hiện trên form
Thêm các nút chọn lựa với Form Page Wizard
Trong bài tập này, chúng ta dùng Form Page Wizard để thêm vào các nút chọn lựa cho phép người dùng chọn loại phòng thích hợp
1 Trong hộp đối thoại Form Page Wizard, click nút Add
Danh sách các loại thông tin , yên khác nhau để tạo form cho phép : cone ban chon lya
2 Trong hép “Select The Type Of Input To Collect For This Ques-
tion”, cuốn xuống phía dưới va
chon “One Of Several Options” Xóa dòng văn bản hiện thời trong hép “Edit The Prompt For This Question” va nhap vao “What type of room would you like?” Click
nuit Next Hinh 7-6
PR
Trang 32
BAL: Tao Form dé nhận iến phan hdi của người dùng - 135 3 Trong hép van ban “Enter The Lables For The Option”, nhập vào
danh sách sau, nhấn phím Enter khi hết một dong: Standard Room
Deluxe Suite Honeymoon Suite
4 Click vao chon lua Radio buttons : Trong hép “Enter The Name Of ; A Variable To Hold This Answer”
nhap vao “Roomtype”
Hiệp đối thoại giống như hình 7-7 5 Click nút Next
Wizard sé hién lại danh sách câu hỏi sẽ hiện trên form
Ggi y : FrontPage cho phép ching ta thể hiện các chọn lựa theo ba cách: menu thả xuống, nhóm các nút chọn lựa hoặc một danh sách Cả
ba cách này đều nhằm giúp người
dùng chọn một trong nhiều chọn Hình 7-7
lựa Chúng ta chọn cách nào là tùy sở thích nhưng nếu chúng ta cần thếthiện nhiều chọn lựa thì nên sử dụng menu thà xuống
Thêm vào các ô kiểm bằng Form Page Wizard
Trong bài tập này, chúng ta sẽ thêm vào các ô kiểm - cho phép người dùng chọn các vật dụng trong phòng - bằng Form Page Wizard
1 Trong hộp thoại FrontPage Wizard, click nút Add
Hộp thoại liệt kê nhiều dạng thông tin khác nhau mà wizard có thể thiết lập form để thu thập dữ liệu
2 Trong hép “Select the Type Of Input To collect For This Question”, cuộn xuống phía dưới và chọn “Any Of several Options” Xoá dòng văn bản mặc định trong hộp văn bản “Edit The Prompt for This Question”, nhaép vao “What extra features would you like?” va click nút Next
Trang 33436 - PHAN Cacky thuat tien tidn vied site
3 Trong hộp văn bản “Enter The La- pels For The Options”, nhap danh sách sau, nhấn Enter khi hết một dòng:
Kichenette Office
Intenet Connection
4 Click 6 kiém “Use Multiple Columns To Present The Options”, x6a dong van ban trong hép van ban “Enter The Base Name For This Group Of Variables” rồi nhập vào “extras”
Hộp thoại sẽ giống như hình 7-9
Hình 7-8 5 Click nut Next
Wizard sé hién lai danh sách các câu hỏi sẽ thể hiện trên form Chọn lựa giữa nút chọn và ô kiểm Nút chọn và ô kiểm có vẻ tương tự nhau, tuy nhiên chúng khác nhau về bản chất Nút chọn được dùng để thể i hiện một nhóm các giải pháp và người | dùng chỉ được chọn một giải pháp Ví t | dụ, nếu chúng ta muốn người dùng phải chỉ rõ ngày sẽ đến khu nghỉ mát thì
người dùng chỉ chọn một ngày Ô kiểm Hình 7-9
thể hiện một nhóm các chọn lựa mà người dùng có thể chọn một hay nhiều Nếu chúng ta muốn người dùng chọn các hoạt động giải trí thì phải cho phép người ta chọn nhiều hoạt động khác nhau eo
Kết thúc việc tạo form với Form Page Wizard
Trong bài tập này, chúng ta sẽ đặt tên cho form và lưu nó lên đĩa
1 Trong hộp thoại Form Page Wizard, click nút Finish
Trang 34Bal) -Taa formaé nhgn Gin phanbéi cia người đùng - 137 Hinh 7-10
2 Trên mục File của menu, click mục Save As FeontPage sé hién hộp thoại Save As
3 Trong 6 File Name, nhap vao Roomres01.htm 4 Click nut Change
FrontPage sé hién hép thoai Set _ Page Title (xem hình 7-11)
_ 5 Trong hép van ban Page Title, nhap vao “Room Request Form”, click OK,
rồi click nút Save
FrontPage sẽ lưu form vừa tạo Hình 7-11
6 Sử dụng thanh cuộn di chuyển lên xuống để kiểm tra form vừa được tạo
Trang 35438 - PHIND.Cachy thuat tien tién vtiWeb site haat type of room would you like: i @ Standard roorn | © Dette Suite © Honeymoon Suite | [tbat exara Geabures would you hice: PF Ritchenette
Auther indhrwation goes Mere
Copyright © 1959 [OxgsnizatinaTtgnn) AU rights reserved
Ravied: Gocember 04, 1999
Hinh 7-12
Sửa đổi văn bản trên form
Trong bài tập này, chúng ta sẽ thêm các dòng văn bản vào form bằng Form Page Wizard
1 Chọn dòng tiêu để New Page, réi nhap vao “Request a Room”
Dữ liệu vừa nhập vào sé thay thế cho văn bản vừa chọn
2 Ngay trên khung của form, xóa dòng văn ban “This is an explanation of” the purpose ofthe form ”, và nhập vào dòng sau “Lakewood Mountains Resort wili:by happy to process your room request over the Web”
3 Click dong đầu tiên bên trong khung của form ngay sau tit full name Nhập vào một dấu phẩy và nhập thêm vào “phone number”
để dong nhắc sẽ là:
“Please enter your full name, phone number, and street address.” 4 Trên thanh công cụ, click nút Save
FrontPage sé lưu lại các hiệu chỉnh vừa thực hiện
Tạo một form từ đầu
Trong bài tập này, chúng ta sẽ tạo một trang Web trống và sau đó sẽ tạo form trên trang Web này
1 Click nút “New” trên thanh công cụ
Trang 36
BAI: Tao form dé nhan Gkién phan hdi của người dùng - 139
2 Click vào mũi tên thả xuống của hộp Style Click vào muc Heading 1, nhập vào “Giue us your suggerstions”, rồi nhấn Enter
FrontPage tao tua (heading) cho Form va déi déu nhay đến dòng kế tiếp
3 Trên Menu Insert, chọn mục Form
FrontPage tao mét from trên trang Web Form đã có sẵn hai nút lệnh Submit và Reset
4 Nhấn Enter 5 lần rồi click vào dòng dưới đường kẻ biên phía trên của form
Việc này sẽ tạo ra khoảng trống để đưa vào các phần tử của form
ME: bá em, bpd Fhe look Sige Mind Ca ICBC ER? (GOD OMT CRO
2 Balalaer|seeadio-s ROB ele els ]OF
© (def out Fort) ý Moml + 7 H]RE ae! EE Pa ae a HEENEIERHEDEDEHGI oe id ayy i 3 CR CAMy Wobs\Leasonis, oO) owe Give us your suggestions Dy comin FO T7 TU TT] lamskhm TC 1 [8] FrontageLogo.of | BB) Inde has B) Location him | lRjtacepe Mar tustinvion | | FF) Mersin @} Poomes.nin Ị (B] Roomos01 him scenes || SuggestD1.hìm e Suggent2 him Louet{ pest] 7 7 7 7 7 7] 2) Suggestions tot 3B) suena BY Welcome him Bf >|}\Neaat (HÍML A Beenie] Le 4 sa 2 : — 4 EMIT second ove 28 RUM 2 Hinh 7-13
5 Trén thanh céng cu, click vao nut Save Nhap vao Suggest.htm trong hộp văn bản File name rồi nhấn nút Save
FrontPage sé lưu form vừa tạo
Sửa đổi form
Khi bạn đã tạo một form pằng Form Page Wizard hoặc bằng thủ công,
bạn có thể sửa đổi form này theo bất cứ cách nào bạn thích Bạn có thể
Trang 37440 - PHAN Cac hy thwat tien tién uti led site
Thêm văn bản diễn giải và vùng nhập liệu
Trong bài tập này chúng ta sẽ thêm văn bản giải thích và một hộp cuốn vào form
1 Click vào dòng phía dưới đường kẻ phía trên của form,
nhập vào “We always hear from you!” va nhén Enter
FrontPage sé chén dong này vào đầu form
2 Nhập vào “What’s most important about a resort?” rồi nhấn thanh Spacebar
3, Trén menu Insert đi con trổ chuột đến form rồi chon “Scrolling Text Box”
FrontPage sé thém mot hộp cuốn vào bên phải câu hỏi Người dùng có thể nhập một đoạn văn bản không bị hạn chế độ dài vào hộp này (xem hình 7-14)
Give us your suggestions
Five always ie tohear Bom youl —————"" ìñ | qa | What's most important about a resort? i {) | ‘ | # | | | 1 | |
Thêm một menu thả xuống
Trong bài tập này, chúng ta sẽ thêm vào form một menu thả xuống Chú ý : Để xem phan minh hoa cho viéc thém một menu tha xuống '
một form, hãy double-click vào biểu tượng AddMenu trong folder À
timedia trên đĩa CD Bài tập của cuốn sách này ,
Trang 38BAN’ Tao form dé nhdn (¡kiến phản hỏi của người dùng - 144
2 Trên menu Insert, trỏ đến mục Form, rồi click Drop-Down Menu FrontPage sẽ chèn một menu thả xuống vào bên phải dòng chúng ta vừa nhập vào
3 Click chuột phải vào menu thả xuống, trên menu truy cập nhanh vừa xuất hiện, click Form Field Proper- ties FrontPage hién hép thoại chứa các thuộc tính của menu thả xuống (xem hình 7-15) Hình 7-15
4 Clich nit Add
FrontPage hién hép thoai Add Choice Chúng ta sẽ nhập các mục của menu thông qua hộp thoại này (xem hình 7-16) 5 Trong hép van ban Choice, nhap vao “Fine
food”, rai click OK
FrontPage thêm mục này vào menu thả xuống Hình 7-16 6 Tương tự, chúng ta thêm vào menu thả xuống các mục “Hiking”, “Swimming”, “Snoozing”
- FrontPage thêm ba mục này vào menu thả xuống
Chú ý : Nếu bạn muốn một trong số các mục của menu thả xuống được chọn mặc định, hãy click vào muc Selected trong phan “Initial State” của hộp thoại “Add Choice”
7 Trong danh sách các mục của menu, click “Snoozing”, rồi chck nút Remove
FrontPage sé toại mục này ra khỏi menu
8 Trong danh sách các mục của menu, click “Swimming”, rồi click nút “Move Up” hai lần
FrontPage sé di chuyển mục “Swimming” lén dau menu 9 Click OK
Trang 39
442 - PHAN Cocky thuat tien tign v6i led site
Gợi ý : Menu thả xuống làm việc giống như các nút chọn; người dùng ch có thể chọn một mục Tuy vậy, chúng ta có thể sửa đổi menu thâ xuốn,
để cho phép người dùng chọn nhiễu mục Chí cân click chuột phải vàu
mềnù thả xuống, click Form Field Properties, r6i trong hdép thoai Drop Down Menu Properties, chon Allow Multiple Sections
Thêm các ô kiểm
Trong bài tập này, chúng ta sẽ thêm các ô kiểm vào form
1 Cliek vào đòng bên đưới menu thả xuống, nhập vào “lndoor Pastimes: rêi nhấn thanh Spacebar
FrontPage sẽ di chuyển điểm chèn đến ngay sau dòng chúng t vừa nhập
Trên Menu Insert, trỏ chuột đến Eorm, réi click Check Box FrontPage chèn một ô kiểm vào sau dòng văn bản
Nhập vào “Biíngo” rồi nhấn Spacebar hai lần ErontPage chèn thêm nhãn cho 6 kiểm vừa tạo
Trên Menu Insert , trỏ chuột đến Form, rồi click Check Box, va rỉ nhập “Bridge”
FrontPage sé tao thém mé6t 6 kiểm và một nhãn nữa Kéo chuột để chon ca ti “Bridge” va 6 kiém bên cạnh Ô kiểm và nhãn của nó đã được chọn
Trên Menu Insert, trổ chuột đến Form rồi click Label
FrontPage sé lam cho doan van bản được chọn trở thành một nhã
có thể cliek được Người dùng có thể click vào ô kiếm hoặc và nhãn của nó để chọn hoặc hủy chọn (xem hình 7-17)
Xoá các trường của form
Trong bài tập này, chúng ta sẽ xoá các trường và nhãn của nó khỏi fon 1 Chọn toàn bộ đồng chứa các ô kiểm
Nhấn Delete
Các ô kiểm tra nhãn của chúng sẽ bị xóa Click nút Save trên thanh công cụ
Trang 40BAI‘ Tao Form dé nhan ghién phan bbi cua nguiiding - 143 hưng ` (default Noma = A Cty Weba\Leceonds couse Give us your suggestions ] Coonghhim EY tomes re BR FromPagelogo.o¢ Ị (desta, Location him Ị fvhate most important about a resort? + Hbdoox Pastines rBngo - AR Hinh 7-17 Gửi dữ liệu từ Form đến một địa chỉ e-mail hoặc tap tin
Sau khi đã thiết kế một form trên Web, chúng ta sẽ xem xét bằng cách
nào chúng ta có thể nhận được đữ liệu mà người dùng nhập trên form Thông thường, FrontPage sẽ gửi dữ liệu trên form đến một tập tin văn bản hoặc một trang Web trên server Để lấy thông tin của form chúng ta chỉ cần mở trang Web này Mặc định tên của trang này là Form_results.txt Tuy nhiên, chúng ta có thể thay đổi các giá trị mặc định này Chúng ta có thể chuyển dữ liệu của form đến một tập tin khác trên Web server hoặc một địa chỉ e-mail, hoặc cả hai, hoặc đến một cơ sở dữ liệu trên Web server hoặc một chương trình chạy trên Web server
Gửi đữ liệu của form đến một địa chỉ e-mail
Trong bài tập này, chúng ta sẽ chuyển dữ liệu của form đến địa chỉ e-mail của chính chúng ta
Ghi chú : Bài tập này hướng dẫn từng bước phải thực hiện để chuyển dữ
liệu của form đến một địa chỉ e-mail Tuy nhiên, Web server phải được thiết lập để hỗ trợ cho thao tác này Hãy hỏi người quản trị hệ thống hoặc Webmaster để định thông số thiết lập này
1 CHek chuột phải vào vùng trống của form, trên menu xuất hiện, click muc “Form Properties’ `