THIET KE WEB VOI MICROSOFT FRONTPAGE 2000 (PHAN4)
Trong phần 4 hướng dẫn các bạn tạo hiệu ứng cho các nút Nghĩa là khi di chuyển chuột đến
các nút sẽ thay đổi
Tuy nhiên, khi đưa chuột lên các nút (Mouse Over) phía dưới thanh tiêu đề thì không thấy
có sự thay đổi nào thay vì vòng tròn phía trước chữ phải đổi màu (như đã thấy trong phần Preview của cửa sổ Xara WebStyle) Dé hiệu chỉnh điều này, bạn hãy thực hiện các thao tác
sau: Trước tiên, bạn phải đảm bảo rằng: Ngồi các thanh cơng cụ có sẵn trên cửa sổ Frontpage như: Standard, Formating, Picture, v.v còn phải có thêm thanh công cụ DHTML Effects
lon < Choose an event > « Apply ° ~ | K, Remove Effect BỊ
Trong trường hợp không thấy có thanh công cụ này, bạn hãy nhấp phải chuột vào phần trống bên phải chữ Help sau đó nhấp chọn vào mục DHTML Effects (Nếu phía trước chữ này có dấu v, chứng tỏ thanh công cụ này đã được mở) Help eee ——-'ự Standard ars |¥ Formatting -———————————- | v ae Navigation ~ Ic i " = -|¥ Pictures Positioning Reporting Style Tables mets Customize
Hoặc bằng cách chọn Format > Dynamic HTML Effects từ thanh trình đơn
Format Tools Table Frames A Font = Paragraph «= Bullets and Numbering Borders and Shading Position | Wa Dynamic HTML Effects
Tiếp theo, bạn nhấp chọn nút Giới thiệu
Trang 2Lúc này, mục thứ hai hiển thị với nội dung là Apply < Choose an Effect > Bạn nhấp vào mũi tên hướng xuống sau đó chọn Swap Picture
On Mouse over ~ Apply < Choose an effect > * + | Ky Remove Effect | BH
Normal = (default font) LS 7 ye wee ii eel e- A
E:\1 CD LOGO\homepage top.him - E:\1 CD LOGO\homepage htm
GIÁO TRÌNH ĐIỆN TU - HƯỚNG DÂN SỬ DỤNG LO@Ø
* Githieu (© aAaœ&.ẻœ& saŒG€ằĐẪốẼ7Ẫằ)!CG ?)Œ@&%& a = Khi thực hiện xong bước trên, mục thứ ba của thanh công cụ này sẽ hiện thị với nội dung ban đầu la < Choose Settings > Bạn nhấp vào mũi tên hướng xuống và chọn Choose picture On Mouse over ~ Apply Swap Picture ~ < Choose Settings > ~ | K, Remove Effect | Bà — TENổ na | RS A E:\1 CD LOGO\homepage top htm - E:\1 CD LOGO \homepage_hia Khi đó, bạn thấy xuất hiện hai hộp thoại la Picture va Select File Picture 2) x]
Look in! ý] mỉ axÌ cm
meee) Select File 2 | x L—
Nai
Look in: IE images | Al ce
Stl logo homepage top 1 gioi thieu i thoat over File name: [gioi thieu over 0K ' P * ~lÉ‹X ƒ * “* M kiỆ.X - Cancel URL: Files of type: {Ail Pictures [* gií;*.Ipg;*.png;* brnp;* tif: wont: > | y 3 | ⁄ | OF | Cancel Clip Art | Parameters | Scan |
Trong hộp thoại Select File, bạn hãy chỉ đường dẫn đến thư mục chứa bộ nút Danh sách các nút hiển thị trong khung bên dưới, bạn nhấp chọn file gioi thieu over (tên file này xuất hiện trong mục File name) Xong nhấp chọn OK để hoàn tất
Để lưu trữ lại kết quả thực hiện, bạn nhấp chọn File > Save hoặc nhấn tổ hợp phím Ctrl + S
Xong, việc kế tiếp là hiển thị chúng lên trình duyệt Web để xem nút Giới thiệu có sự thay đổi
Trang 3Cửa sổ Microsoft Internet Explore xuất hiện Bạn hãy đưa chuột lên nút Giới thiệu Lúc này, con trỏ chuột có hình bàn tay và vòng tròn trước chữ Giới thiệu cũng đổi màu
AR New Page 2 - Microsoft Internet Explores
Fle Edt View Favortes Tools Help
+ » + a > »
Ta Ñ 2) a} a i 3
Back Fotwesd Edit Stop Reltresh Home Search Favorites History
Address [) E:\1 CD LOGO\homepage htm _*| @Go
GIÁO TRÌNH ĐIỆN TỬ - HƯỚNG DẪN SU DUNG LOG®
(jiđi thiệu Cài đạt Lý thuyết Bài tập On l4 1
Tương tự, bạn hãy nhấp chọn lần lượt các nút còn lại và thực hiện tuần tự các bước thao tác trên cho chúng Tuy nhiên, thay vì chọn file gioi thieu over thì bạn lần lượt chọn: cai dat over, ly thuyet over, bai tap over, xem phim over, tham khao over và thoat over
Khi thực hiện xong, bạn nhấn Ctrl + S để lưu lại Và một lần nữa, bạn nhấp chọn vào biểu
tượng Preview in Browser để kiểm tra các thao tác đã thực hiện trên những nút này
Bnew Page ee eae mHH
Fle Edt View Favortes Tools Help - + 4 ao @ @& : Back Focweard ` Edit Stop Relresh Home Search Favorites History xs
Address |) £:\1 CD LOGO\homepage htm _*| @Go
GIÁO TRÌNH ĐIỆN TỬ - HƯỚNG DAN SU DUNG LOG®
ere Cài đại ed 21/12 ™ Xem phim Tham khao
Bây giờ, bạn có thể thay su thay đổi trên mỗi nút mỗi khi đưa chuột đến
Cuối cùng, điêu đơn giản nhưng lại quan trọng nhất trong việc hình thành cấu trúc trang Web là bạn phải tạo liên kết (Hyperlink) cho các nút Điêu này có nghĩa là khi nhấp vào một nút thì một trang Web được mở ra và trang này sẽ chứa một số nội dung cần thiết (do yêu cầu thiết kế)
Để dễ hình dung công việc, bạn sẽ thao tác cụ thể trên nút Giới thiệu với yêu cầu như sau:
Nhấp vào nút Giới thiệu để mở một trang Web có tên gioi thieu.htm
Yêu cầu này sẽ gồm hai việc xử lý chính là tạo ra trang Web có tên gioi thieu.htm và tạo một liên kết từ nút Giới thiệu đến trang htm này
Trước tiên, chúng ta sẽ tạo trang gioi thieu.htm:
Trang 4Trang homepage bottom.htm (trang Frame bên dưới) được mở rộng
XS Microsoft FrontPage = |e] x)
file Edit Yiew Insert Format Tools Table Frames Window Help
O-@- GBalDi6@ary\i: eOdio -|\9GORBelBDols/@
On > Apply ° « |, Remo«ve Effect
(None) + (default font) - Normal -|/B / U | @ B@il= i= eR 2-A-
E:\1 CD LOGO \homepage bottom him x
|
Nhớ rằng bạn sé không thao tác gì trên trang này cả Bạn hãy tạo một trang Web mới bằng cách nhấp chọn File > New > Page trên thanh trình đơn hoặc nhấn tổ hợp phím Ctrl + N
File Edit ¥Yiew Insert Format Tools Table Fra a) © OAC Œ Open Ctrl+0 = Web me Ctrl+F4 % - “F7 Folder @ Open Web i) Task
Hộp thoại New xuất hiện
Trong hộp thoại này, tab General là tab hiện hành cho bạn sẵn một số mẫu Web thông
dụng Tuy nhiên, bạn hãy nhấp chọn mẫu đầu tiên (mẫu này có tên Normail Page) Xong, nhấp chọn OK
Một trang Web mới được tạo ra với tên mặc định là new_ page_ 1.htm Bạn hãy lưu lại trang
này bằng cách nhấp chọn File > Save hoặc nhấn tổ hợp phím Ctrl+S
Trang 5li) General | Frames Pages | Style Sheets | wW 5j 5) s6 ga Bibliography Confirmation Form S| Form Page Frequently Guest Book Wreard Asked
Narrow, One-column One-colurnn Right-align Body Body vath oe @ © One-column One-column [ne-coằimn Body with < Body with Body with T S| BỊ a | A} [Po EE Feedback Option
Form tuat add Web task
L Open in currert frame = | Description = Natrow, Create a blank web page Left-align One-column Preview Body with One-column Body with S| | Cancel | Savein: [2] 1 CDLOGO iv] @ | Q@ X C4 EB- took - images ay - }homepage bottom Histo homepage top homepage Ấ My Documents 7) Desktop Favorites
Page title: New Page 1 Change
2 | Filename: |goithieu iy]
Web Folde
oNmers | Save as type: |Web Pages | Cancel
Trong hộp thoại này, tại mục Look in, bạn hãy chỉ đường dẫn đến thư mục lưu trữ (thư mục da luu trif cac trang homepage top, homepage bottom va homepage)
Trang 6Tiếp tục, trên trang này, bạn nhập vào chữ GIỚI THIỆU và tô đen nó CS 2 02v mMHH File Edit View Insert Format Tools Table Frames Window Help D-;Œ-H@‡m @oởÿ xA&@®c = ‹-'9nvg 8 À@ 140
On < Choose an event > * Apply ° XK, Remove Effect
Normal ~ (default font) -Nomal ~|(B 7 U | @ii= t= ie 7? -A-
E:\1 CD LOGO\gioi thieu Nim x TT Š Bạn nhấp chọn Font VNTI-Bodon-Poster và chọn cỡ chữ là 7 (36 pt) Normal - TS) ~Normat |» |B 2 U | ME @ Wif= i= He -A- pI YN -Barncitl a E:\1 CD LOGO\: 9p ¥NI-Bauhaus x ——————''tVMI-Bengus a SCIRNET caer VNI.Bodon ` iil 'T ¥NI-Book tệ ‘PD YNI-Broad - Normal + ¥NI-Bodon-Poster -\Normal („| B J U | B@ Bilt i= te te #7 - A 5 — 1I(8pt) + E-\1 CD LOGO\gtoi thieu_htm 2 (10 pt) 3 (12 pt) ^^ ” 4 (14pt) LỚI THIẾU 5 (18pt) % Tiếp theo, bạn nhấp vào nút canh giữa Sau đó, nhấp vào mũi tên hướng xuống bên phải chữ A và chọn màu đỏ (Red) file Edit View Insert Format Tools Table Frames Window Help D-œ-H ®|m|# ð # | šx to & | ° - ‹‹ -|'# 'a| ®| à @| 4 |@
On < Choose an event > « Apply + « | Ky Remove Effect
Normal - VMI-Bođon-Poster - 7p) - 'B 7 U|EXSX.!E::(FŒ -A-
Trang 7LE) x '®) Microrolt FrontPage file Edit View Insert Format Tools Table Frames Window Help D - œ - B8 | 9 | @ @ Ÿ | x ta & |5 - c - |8 1°z|@&| à @| + |@-
On sane] « Apply - « !X, Remove Effect
(None) ~ (default font) ~Nomal [-|B J U | # Mii= i= Se -A-
E:\1 CD LOGO\gi0i thieu him
GIỚI THIẾU
(Với trang gioi thieu.htm này, trong phần trống phía dưới tiêu đề GIỚI THIỆU bạn sẽ đưa những nội dung cần thiết vào.)
Khi đã nhấn Ctrl + S để lưu lại, bạn nhấp vào dấu x để đóng trang gioi thieu.htm lại
(None) ~ (default font) ~ Normal |-|B J U |M W@W if= i= eZ -A-
tìm » Apply ° | K, Remove Effect là
E:\1 CD LOGO\gioi thiew htm xi + A a GIỚI THIẾU Tiếp tục, bạn nhấp vào dấu x một lần nữa để đóng trang homepage bottom.htm lại C1 r0 2v wmMHH
File Edit Yiew Insert Format Tools Table Frames Window Help
O-@- BB @erY | 3š aOVio -'PGOBelVolis |e
(None) + (default font) -Nomat |- |B ZU | @ @if= i= Ft 7 -A- On — - * XQ Remove Effect E:\1 CD LOGO\homepage bottom him x AN
Khi thực hiện xong việc đóng hai trang gioi thieu.htm và homepage bottom.htm, bạn được
Trang 8"s) Mictosolt FrontPage BoE file Edit Yiew Insert Format Tools Table Frames Window Help
D @'m|@Z|* %&|: -'3ơ's|đ @|.1|0
(None) = (default font) - Norma |-|B ZU |M # MW il= i= RZ -A-
On ° Apply * + | % Remove tffect | R
E- au CD AT bottom him - E:VI CD L0GUYhomepage htm
Use OirleCick to folow a hypecink
\\Normal { No Frames KHTML X Frames Page HTML £ Preview /] «| |
Tiếp theo, bạn sẽ tạo một liên kết để khi nhấp vào nút Giới thiệu trang gioi thieu.htm (vừa được tạo) sẽ được hiển thị trong trang Frame bên dưới bằng cách thực hiện tuần tự các thao tác sau:
Trước tiên, bạn nhấp chọn nút Giới thiệu Khi nhấp chọn, bạn sẽ thấy xuất hiện một khung bao quanh nút này như hình minh họa 76 hx**x sé
Tiếp theo, bạn nhấp chọn Insert > Hyperlink tr6n thanh trình đơn hoặc nhấn tổ hợp phím
Trang 9Insert Format Tools Tall Break Horizontal Line Date and Time Symbol Éa Comment Navigation Bar Page Banner "2 Component > Database ` Form rk Advanced > Picture > File Bookmark hedliyperlink _Ctrl+K
Hộp thoại Edit Hyperlink xuất hiện Trong hộp thoại này, theo thói quen bạn sẽ nhấp vào mục Look in để chỉ đường dẫn đến trang Web có tên gioi thieu.htm Tuy nhiên, trong trường hợp này, bạn sẽ không thực hiện được (Look in rỗng)
Look in: x =) ier [ii Ww Name | AEM AEM AEM URL jiavascrpt: void{0} xÌ el al | BI r Optional
| Bookmark [Inone) v] Target frame [Page Defauk (main) /] | OK | Cancel | Parameters | Style |
Trang 10URL: (ESP =] | al ‘| |B]
- Optional | Make a hyperlink to a file on your computer Bookmark |Inone) | Target frame [Page Defau# (main) ~-|
0K | Cancel | Pararneters | Stule | Hộp thoại Select File xuất hiện và nằm chồng lên hộp thoại Edit Hyperlink 25x
Look in: | Sy Windows 1 BỊ | fay
_IAll Users, Config
_) Application Data Cookies ] Applog Corel ]BBStore Crystal ] Catroot C] Eursors _] ECommand C`]Desktop | File name: |
Files of type: |All Files (*.*) x| Cancel |
Trên hộp thoại Seclect File, trong mục Look in, bạn chỉ đường dẫn đến thư mục chứa trang Web có tên gioi thieu.htm (Trong bài tập này, trang gioi thieu.htm được lưu trong thư mục là 1 CD LOGO) Select File BEI xe [EQTEDTOGS EFFEFE
images 3] animate mì huong
=) |~$ong dan thiet ke web 1 arin
©) “~wWRLOOO4 #) homepage bottom
©) ~WRLO498 €) homepage top ©) ~WRL3142 € | homepage ©] ~WRL3506 (1) huong dan thiet ke web 1 <| | i) Filename: — [gioithieu Files of type: |All Files (*.*) x| Cancel 4
Khi chọn đúng đường dẫn, danh sách các trang Web đã lưu trữ xuất hiện trong khung bên dưới Bạn nhấp chọn file gioi thieu (Tên file này sẽ xuất hiện trong mục File name) Khi chọn xong, bạn nhấp nút OK Sau khi chọn OK, cả hai hộp thoại Select File và Edit Hyperlink ngay lập tức đóng lại Tiếp tục, bạn hãy nhấn Ctrl + S dé lưu lại những thao tác đã thực hiện
Trang 11mm | & @|Ÿ | š 3a ấA ny = b Boron fos Preview in Browser | (36 F
Hoặc bằng cách nhấp chọn File > Preview in Browser từ thanh trình đơn Hộp thoại Preview in Browser xuất hiện Bạn chấp nhận các thông số mặc định sau đó nhấp chọn Preview (Hộp thoại này chỉ xuất hiện khi bạn chọn File > Preview in Browser ) File Edit View Insert For New (at Open Close Ctrl+0 Ctrl+F4 > @, Open Web Close Web LA Save Save As Ctrl+S Publish Web Import Preview in Browser s Page Setup Preview in Browser Browser - Microsoft Internet Explorer 5.0 Window size @ Default C 800x600 © | Preview Ql Close ry Sau khi nhấp chọn nút Preview, cửa sổ Microsoft Internet Explorer xuất hiện © 640 x 480 1124 x FBS [ˆ Autamaticallu save page
1 New 'sœe 2 - M+wcsosoít lntesnet E xpiotet
Ede Eda View Favorites Toole Help 6a = a a Seach 2 Stop ce Eda Favontes
Addeot |) £-\1 CD LOGO\homepage, him
Trang 12Nội dung trang Web hiển thị trên màn hình trình duyệt Bạn hãy nhấp chuột vào nút Giới thiệu (Lúc này con trỏ chuột có hình bàn tay, vòng tròn trước chữ Giới thiệu đổi màu) Và điêu quan trọng là trang gioi thieu.htm đã hiển thị trong trang Frame dưới với tiêu đề GIỚI
THIẾU (như đã được thiết kế trước đó) AI (UIT sa TP x Fae Eat Voew Favottes: [Tools Help je
Back loswed fda Step Retiesh a a J 3
Se+ch Favostes Histesy » Ađđe++ |} E-V1 CD LOGO \homepage btm GIAO TRINH A tn phéer ĐIỆN TỬ - HƯỚNG D MA 1 [ = 4 Ciđ( thiệ t Cài đật Peary N SU DU =| Go NG LOGØ m khac GIOI THIEU 2) Dore Zz My Comenter
Ngoài ra, bạn cũng có thể kiểm tra thao tác thực hiện bằng cách nhấp vào tab Preview trên
cửa sổ FrontPage (không phải mở màn hình trình duyệt) Ie] Normal { NoFrames £ HTML 4 Frames Page HTML £ Preview Ot Qi et eu fst @ mÌ A 4 : Eà |á° 23A 4k S
Sau khi nhấp chọn Preview (chữ Preview được in đậm lên hơn so với các chữ trên các tab bên cạnh), bạn nhấp nút Giới thiệu và bạn cũng nhận được kết quả hiển thị giống như khi chạy trên màn hình trình duyệt
Zzí
Trang 13io ec Frontf?aqœe file Edit View Insert Format Tools Table Frames Window Help D;œ-Đ®|m| # ê ý | 3 ® & # | = - c- - | {4 'ø | ® | @| 1 |@ 1 ÃÌ1 ‹ ° * 1B 7ƒ U he > LE) x On ° Apply ° X, Remove Effect ` E:\1 CD LOGO\homepage him GIOI THIEU \ Noes 4 NoFrames XHTML £ Frames Page HTML Preview / | «| Bi AB BSRSRILAATTAHealt/VaAaoaAx "1.% Bz 22 seconds ovet 28.8 NUM
Tuy nhiên, bạn có thể thấy trong hai cách hiển thị trên đầu không đẹp mắt lắm vì có một
thanh ngang phân cách giữa hai trang Frame trên và dưới Để che không cho hiển thị thanh phân cách này, bạn hãy thực hiện thêm một số thao tác đơn giản sau:
Đầu tiên, bạn hãy nhấp chọn vào tab Normail trên cửa sổ FrontPage
Normal dý No Frames A HTML A Frames Page HTML £ Preview / |4 | Im| A 4| 5 R | ¿ 32 á S |đ@f @Ị ét ei | # v2
Lưu ý: Cửa sổ Preview chỉ dùng để hiển thi kết quả Nếu bạn muốn có bất kỳ sự thay đổi hay chỉnh sửa nào lên trên Web thì bắt buộc phải trở lại cửa sổ Normail
Sau khi nhấp chọn tab Normai để trở về cửa sổ thiết kế, bạn hãy đưa chuột vào đường phân
cách giữa hai trang Frame cho đến khi thấy con trỏ chuột có hình mỗi tên ở hai đầu Bạn nhấp chuột phải Một menu xuất hiện với duy nhất một chọn lựa là Frame Properties Bạn hãy nhấp chọn nó Bải tập Xem phim là Frame Properties | Hộp thoại Frame Properties xuất hiện
Trang 14Frame Properties Name: Initial page: [homepage bottom htm Browse | Frame size Column width Ï = [Relative [~] Height i= | Relative x] Margins Width: 12 Height: [1E = Options IV Resizable in Browser Show scrollbars: |I Needed vÌ Frames fase | Style | [ oK | Cancel | Page Properties |? x General | Margins | Custom | Language Frames | Frame Spacing: r1 IY Show Borders | OK | Cancel
Trong tab này, bạn thấy hộp kiểm phía trước chữ Show Boders đã được chọn Bây giờ bạn
hãy nhấp vào hộp kiểm này để loại bỏ nó đi
Sau khi nhấp vào hộp kiểm Show Boders, số trong
được trả về giá trị 0 Bạn hãy giữ nguyên mặc định nà ô
Trang 15Page Properties KH IX| General | Margins | Custom | Language Frames | Frame Spacing: 0 = OK Cancel by
Sau khi nhấp chon OK, ban được đưa trở lại hộp thoại Frame Properties Bạn giữ nguyên các thông số mặc định và nhấp chọn nút OK Lúc này, trên cửa sổ FrontPage, đường phân cách
Trang 16E:\1 CD LOGO\homepage him x
Bạn nhãn Ctrl + S để lưu lại sau đó cho trang Web này hiển thị lên trình duyệt Nhấp chon
nút Giới thiệu Lúc này, trang Web của bạn trông đẹp mắt hơn với sự *biến mất” của đường phân cách giữa hai trang Frame
3 New Page 2 - Microsoft Internet Explorer | || x
Fide Edt View Favortes Tools Help “® + 8 Ơ 2) a a isi JI Back Forveard Edit Stop Rettesh Home Search Favorites History Address [@) E:\1 CD LOGO\homepage htm =} @ Go 2) Dore SJ My Computer
Cuối cùng, để hoàn chỉnh cấu trúc các trang Web nay, bạn hãy tiến hành tạo các trang cai dat.htm, ly thuyet.htm, bai tap.htm, xem phim.htm, thamkhao.htm và thoat.htm Sau đó, lân lượt nhấp vào các nút Cài đặt, Lý thuyết, Bài tập, Xem phim, Tham khảo và Thoát để tạo liên kết đến từng trang theo các bước hướng dẫn đã trình bày trước đó
