Bài giảng Thiết kế web với microsoft frontpage 2003

THI T K WEB V I MICROSOFT Ế Ế Ớ FRONTPAGE 2003 N I DUNGỘ Ch ng I: M t s khái ni m c b nươ ộ ố ệ ơ ả Ch ng V: Multimedia hóa trang webươ Ch ng II: Ngôn ng HTMLươ ữ Ch ng III: T o trang web v i FrontPage 2003ươ ạ ớ Ch ng IV: X lý văn b n ươ ử ả & m t s đ i t ng khácộ ố ố ượ  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 trang Websiteủ ầ ủ  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 : ụ 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 HTML… …………… …………… ………...... 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 : Đ t tiêu đ cho trang web (th này n m trong ẻ ặ ề ẻ ằ ) Ch ng II: ươ NGÔN NG HTML (tt)Ữ Ví dụ: Đ t tiêu đ c a trang web là: “Thông báo”ặ ề ủ Thông báo  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ữ ạ ở ạ ữ ậ Gi i thi uớ ệ 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)ộ ố ẻ ụ Tên thẻ Gi i thíchả Ví dụ … D ng ch đ mạ ữ ậ Hello world ! … D ng ch nghiêngạ ữ Hello world ! … D ng ch g ch chânạ ữ ạ Hello world ! … D ng ch g ch gi aạ ữ ạ ữ Hello world! <Font color=RGB face=tên font Size=“N”> …… Đ nh d ng font ch :ị ạ ữ Color: ch đ nh màuỉ ị Face: Ch đ nh font chỉ ị ữ Size: kích th cướ <Font color=“Blue” face=“Arial”>Hello world … T o ch s trênạ ỉ ố X2  X2 … T o ch s d iạ ỉ ố ướ H2O  H2O  Các th đ nh d ng văn b n:ẻ ị ạ ả M t s th HTML thông d ng (tt)ộ ố ẻ ụ Tên thẻ Gi i thíchả Ví dụ Xu ng dòngố …… T o đo n văn b n m iạ ạ ả ớ Align: ch đ nh hình th c canh lỉ ị ứ ề Hello world ! <HR Align=“…” Color  = “…”  SIZE = “…”  WIDTH = “…” /> T o đ ng g ch ngangạ ườ ạ Color: màu Size: đ dày (tính b ng pixel)ộ ằ Width: đ dài (tính b ng pixel)ộ ằ <HR Color=“Red” Size=“10” Width=“200” / > 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. <P Align=“justify” Style=“Margin-top:3px ; Margin-bottom: 3px ; Direction: rtl”>…. 2. Sin2x + Cos2x = 1 3. H2 + O2  H2O 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:ạ ế ế Text  T o các liên k t (Hyper link):ạ ế M t s th HTML thông d ng (tt)ộ ố ẻ ụ  T o liên k t bên trong (liên k t n i) c a trang web:ạ ế ế ộ ủ Là liên k t đ n t ng đo n văn b n trong trang web.ế ế ừ ạ ả Textủ ạ Trong đó: Ch m c/tên c a đo n đ c t o nh sau:ỉ ụ ủ ạ ượ ạ ư Textạ Đ c đ t đ u đo nượ ặ ở ầ ạ  T o dòng ch ch y trên trang web:ạ ữ ạ <MARQUEE direction = “…” behavior =“…” height = “…” width = “…” scrollamount =“N” scrolldelay = “M”>Text  T o các liên k t (Hyper link):ạ ế M t s th HTML thông d ng (tt)ộ ố ẻ ụ Trong đó:  Direction: h ng chuy n đ ng c a dòng ch “Text”ướ ể ộ ủ ữ  Behavior: hình th c chuy n đ ng: scroll, alternate, slideứ ể ộ  Height, Width: chi u cao và chi u r ngề ề ộ  Scrollamount, Scrolldelay: ch đ nh t c chuy n đ ng.ỉ ị ố ề ộ M t s th HTML thông d ng (tt)ộ ố ẻ ụ <TABLE align = “…” background = “url” bgcolor = “RGB” border = “…” cellpadding = “…” width = “…” height=“…" > Trong đó:  Align: l c a b ng: “left” ho c “right” ề ủ ả ặ  Background: ch đ nh file nh n n c a b ng ỉ ị ả ề ủ ả  Bgcolor: màu n n c a b ng ề ủ ả  Border: đ ng vi n b ng (tính b ng pixel)ườ ề ả ằ  Cellpadding: kho ng cách t các c nh c a ô t i n i dung ả ừ ạ ủ ớ ộ c a ô (tính b ng pixel)ủ ằ  Width, Height : đ r ng, cao c a b ng (tính theo % ho c ộ ộ ủ ả ặ tính b ng pixel)ằ  T o b ng (Table)ạ ả M t s th HTML thông d ng (tt)ộ ố ẻ ụ Thêm dòng vào b ng:ả <TR align = “…” background = “url” bgcolor = “RGB” valign= “…” > … 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:ả <TD align=“…” background = “url“ bgcolor = “RGB” 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:ệ ủ Thanh tiêu đ ề Thanh Menu Thanh công c chu nụ ẩ Thanh đ nh d ngị ạ Page tab Ch đ ế ộ làm vi cệ Đóng trang web hi n t iệ ạ Thanh cu n ộ ngang – d cọ Task pane Vùng thi t kế ế 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ế ộ ạ ử Xem trên trình duy t webệ CH NG III: T O M T TRANG WEB V I ƯƠ Ạ Ộ Ớ FRONTPAGE 2003 (tt)  Thi t đ t thu c tính cho trang web: ế ặ ộ Sau khi t o trang web ạ xong, công vi c đ u tiên là ta thi t đ t thu c tính cho nó. Bao ệ ầ ế ặ ộ g m các thu c tính chính:ồ ộ  Tiêu đ trang webề  Đ nh d ng l cho trang webị ạ ề  Font ch , kích th t, màu ch m c đ nh c a trang webữ ướ ữ ặ ị ủ  Màu n n, nh n n và nh c n n (n u c n thi t)ề ả ề ạ ề ế ầ ế  Đ thi t đ t các thu c tính này ta th c hi n: ể ế ặ ộ ự ệ Click ph i vào vùng ả tr ng trên trang web ố  Page properties đ m h p tho i Page ể ở ộ ạ properties.  Đ t tiêu đ cho trang web:ặ ề Ch n tab General ọ  nh p n i dung ậ ộ vào m c Title ụ  click OK 1. Ch n tab Generalọ 2. Nh p tiêu đậ ề 3. Click OK CH NG III: T O M T TRANG WEB V I ƯƠ Ạ Ộ Ớ FRONTPAGE 2003 (tt)  Đ nh d ng l cho trang web:ị ạ ề  M h p tho i Page properties ở ộ ạ  Ch n tab Advancedọ  Đ nh l trên: nh p giá tr vào ô Top Marginị ề ậ ị  Đ nh l trái: ị ề nh p giá tr vào ô Left Marginậ ị  Đ nh l d i: nh p giá tr vào ô Bottom Marginị ề ướ ậ ị  Đ nh l ph i: nh p giá tr vào ô Right Marginị ề ả ậ ị 1. Ch n tab Advancedọ 2. Nh p giá tr đ đ nh ậ ị ể ị l , trên, trái, d i, ph iề ướ ả 3. Click Ok CH NG III: T O M T TRANG WEB V I ƯƠ Ạ Ộ Ớ FRONTPAGE 2003 (tt)  Đ nh d ng fị ạ ont ch , kích th t, màu ch m c đ nhữ ướ ữ ặ ị :  M h p tho i Page propertiesở ộ ạ  Ch n tab Advancedọ  Click ch n nút Body style. H p tho i Modify style xu t hi nọ ộ ạ ấ ệ  Click nút Format  Font  Ch n các giá tr c n thi t r i click OK đ thi t l pọ ị ầ ế ồ ể ế ậ  Các b c nh sau:ướ ư B c 1:ướ 1. Click vào Body style đ m h p tho i modify ể ở ộ ạ style B c 2:ướ 2. Click Format Font đ m h p tho i Fontể ở ộ ạ Ch n font chọ ữ Ch n ki u ch : bình ọ ể ữ th ng, đ m, nghiên, …ườ ậ 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 1. Liên k t đ n các trang web cùng web siteế ế   2. Liên k t đ n các trang web khác trên m ngế ế ạ   CH NG IV: X LÝ VĂN B N & M T S Đ I ƯƠ Ử Ả Ộ Ố Ố T NG KHÁC (tt)ƯỢ  Chèn dòng ch ch y (marquee) trên trang web:ữ ạ  Ch n các ký t c n chènọ ự ầ  Ch n Insert ọ  Web component. H p tho i Insert web ộ ạ componet xu t hi n. Th c hi n theo các hình sau:ấ ệ ự ệ    Sau khi click Finish h p tho i Marquee properties xu t hi nộ ạ ấ ệ 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 Click ph i vào các ô v a ả ừ ch n ọ  Merge cells CH NG IV: X LÝ VĂN B N & M T S Đ I ƯƠ Ử Ả Ộ Ố Ố T NG KHÁC (tt)ƯỢ  Tách (split) m t ô thành nhi u ô:ộ ề  Ch n ô c n táchọ ầ  Click ph i vào ô đ c ch n ả ượ ọ  Split cells  Ho c: Click Table ặ  Split cells Click ph i vào ô c n ả ầ tách  Split cells H p tho i Split cells xu t hi nộ ạ ấ ệ 1. Tr n thành nhi u c tộ ề ộ 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):ế ộ ủ var obj = document.getElementById("Calendar1"); var d = new Date(); obj.Year = d.getFullYear(); obj.Month = d.getMonth()+ 1; obj.Day = d.getDate(); 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