Giáo trình thiết kế web

pdf

171 trang vanle 3390

Download

Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình thiết kế web", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

giao_trinh_thiet_ke_web.pdf

Nội dung text: Giáo trình thiết kế web

GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) CHƯƠNGI: GIITHIUVWEB I.1. CÁCKHÁINIMCƠBN: – Internet làmtmngmáytínhtồncutrongđĩcácmáytruynthơngvinhautheo mtngơnngchunglàTCP/IP. – Intranet đĩlàmngccbkhơngnivàoInternetvàcáchtruynthơngcachúng cũngtheongơnngchunglàTCP/IP. – Mơ hình Client Server :làmơhìnhkháchch.Serverchatàinguyêndùngchung chonhiumáykhách(Client)nhưcáctptin,tàiliu,máyin Ưuđimcamơ hìnhnàylàtitkimvthigian,tàichính,dquntrhthng Cáchhotđng camơhìnhnàylàmáyServertrangtháihotđng(24/24)vàchyêucutphía Client.KhiClientyêucuthìmáyServerđápngyêucuđĩ. – Internet Server làcácServercungcpcácdchvInternet(WebServer,MailServer, FTPServer ) – Internet Service Provider (ISP):LànơicungcpcácdchvInternetchokháchhàng. MiISPcĩnhiukháchhàngvàcĩthcĩnhiuloidchvInternetkhácnhau. – Internet Protocol :CácmáysdngtrongmngInternetliênlcvinhautheomt tiêuchuntruynthơnggilàInternetProtocol(IP).IPAddressđachIP:đvic traođithơngtintrongmngInternetthchinđưcthìmimáytrongmngcn phiđnhdanhđphânbitvicácmáykhác.Mimáytínhtrongmngđưcđnh danhbngmtnhĩmcácsđưcgilàđachIP.ðachIPgm4sthpphâncĩ giát0đn255vàđưcphâncáchnhaubiduchm.Víd192.168.0.1ðachIP nàycĩgiátrtrongtồnmngInternet.UbanphânphiđachIPcathgiis phânchiacácnhĩmđachIPchocácqucgiakhácnhau.ThơngthưngđachIP camtqucgiadocáccơquanbưuđinqunlývàphânphilichocácISP.Mt máytínhkhithâmnhpvàomngInternetcncĩmtđachIP.ðachIPcĩth cptpthihoccpvĩnhvin.ThơngthưngcácmáyClientktnivàomng InternetthơngquamtISPbngđưngđinthoi.Khiktni,ISPscptmthi mtIPchomáyClient. – Phương thc truyn thơng tin trong Internet : Khi mt máy tính cĩ đa ch IP là x(máyX)gitinđnmáytínhcĩđachIPlày(máyY)thìphươngthctruyntin cơbndinranhưsau:NumáyXvàmáyYcùngnmtrênmtmngconthìthơng tinsđưcgiđitrctip.CịnmáyXvàYkhơngcùngnmtrongmngconthì thơngtinsđưcchuyntimtmáytrunggiancĩđưngthơngvicácmngkhác rimichuyntimáyY.MáytrunggiannàygilàGateway. – WorldWideWeb(WWW): làmtdchvphbinnhthinnaytrênInternet.Dch vnàyđưaracáchtruyxutcáctàiliucacácmáyphcvddàngthơngquacác giaotipđha.ðsdngdchvnàymáyClientcncĩmtchươngtrìnhgilà WebBrowser. – Web Browser(trìnhduyt ):làtrìnhduytWeb.Dùngđtruyxutcáctàiliutrêncác WebServer.CáctrìnhduythinnaylàInternetExplorer,Nestcape – Home page :làtrangwebđutiêntrongwebsite – Hosting provider :làcơngtyhoctchcđưacáctrangcachúngtalênweb – Hyperlink :tênkháccahypertextlink – Publish :làmchotrangwebchyđưctrênmng – URL(Unioformresourcelocator): mtđachchđnmtfilecthtrongnguntài nguyênmng. Trang1
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Minguntrênwebcĩduynhtmtđachrtkhĩnh.Vìvy,ngưitas dng URL là mt chui cung cp đa ch Internet ca mt web site hoc nguntrênWorldWideWeb.ðnhdngđctrưnglà: www.nameofsite.typeofsite.countrycode Víd: 207.46.130.149đưcbiudintrongURLlàwww.microsoft.com URLcũngnhnbitgiaothccasitehocngunđưctruycp.Giaothc thơngthưngnhtlà“http”,mtvàidngURLkháclà“gopher”,cungcp đachInternetcamtthưmcGopher,và“ftp”,cungcpvtrímngca ngunFTP. CĩhaidngURL: URLtuytđi –làđachInternetđyđcamttranghocfile,bao gmgiaothc,vtrímng,đưngdntuỳchnvàtênfile. Víd,http://www.microsoft.com/ms.htm. URLtươngđi mơtngngnđachtptinktnicĩcùngđưng dnvitptinhinhành,URLtươngđiđơnginbaogmtênvàphn mrngcatptin. Víd:index.html – Web server làmtchươngtrìnhđápnglicácyêucutruyxuttàinguyênttrình duyt. I.2. GIITHIUKHÁIQUÁTVWEB – Web làmtngdngchytrênmng(ClientServer),đưcchiaskhptồncu. – Trang web làmtfilevănbnchanhngtagHTMLhocnhngđanmãđcbit màtrìnhduytweb(Webbrowser)cĩthhiuvàthơngdchđưc,fileđưclưuvi phnmrnglà.htmlhochtm. – HTML (HyperTextMarkupLanguage), gmcácđonmãchunđưcquyưcđ thitkWebvàđưchinthbitrìnhduytWeb(WebBrowser) Hypertext (Hypertextlink),làmtthaymtcmtđcbitdùngđto liênktgiacáctrangweb Markup :làcáchđnhdngvănbnđtrìnhduythiuvàthơngdchđưc. Language :đâykhơnglàngơnnglptrình,màchlàtpnhnhngquylut đđnhdngvănbntrêntrangweb. – Trình son tho trang web :Cĩthsonthowebtrênbtkỳtrìnhsonthovănbn nào. Các trình son tho ph bin hin nay là: Notepad, FrontPage hoc Dreamweaver. I.3. TAGHTML: TagHTMLlànhngcâulnhnmgiacptag“ ”,dùngđđnhdngcácvăn bntrêntrangweb.DngchungcamttagHTMLlà: Object Trongđĩ: – TagName :làtênmttagHTML,vitlinvidu“ Object – Giátrcathuctínhđưcđttrongnháyđơn‘hocnháyđơi“.(cĩthbqua) Trang2
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) – :gilàtagm – :gilàtagđĩng.Thơngthưngthìcáctagđucĩtagđĩng.Tuy nhiêncĩmtstagkhơngcĩtagđĩng Víd: nidung TagName(m ) Properties TagName(đĩng) – Cĩthcĩnhiutaglngvàonhau,theonguyêntctagnàomtrưcthìtagđĩ đĩngsau Víd: Object Object1 Object2 – TrongtrangHTML,numttagbsaithìnidungbêntrongTagđĩkhơnghin thtrêntrìnhduyt I.4. CUTRÚCCƠBNCATRANGWEB: 1. Cutrúctrangweb – Phnđu( ):làphnchathơngtincatrangWeb. – Phnthân( ):làphnchanidungcatrangWeb. – Phnđuvàphnthânđưcđttrongcptag Nidungthơngtincatrangweb Nidunghinthtrêntrìnhduyt 2. Hinthtrangweb: – KhiđngtrìnhduytInternetExplorer – Chnmenufile,open,dùngbrowsetìmtptinhtmlmito – Hocdoubleclickvàotêntptin.htm I.5. CÁCTAGHTMLCƠBN: I.5.1. :Hinthnidungtiêuđcatrangwebtrênthanh tiêuđcatrìnhduyt. – Cptag đưcđttrongphn catrangHTML – Cúpháp : Nidungtiêuđ I.5.2. :Toheader,gm6cpheader,đưcđttrongphn BODY – Cúpháp: NidungcaHeader Trongđĩ: – Direction:gmcácgiátrleft,right,center,dùngđcanhlchoheader,mcđnh làcanhtrái Trang3
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) – Víd: Heading1 Heading2 Heading3 Heading4 Heading5 Heading6 I.5.3. : – Dùngđngtđonvàbtđuđonmi – Cúpháp : Nidungcađon – Tag khơngbtbuc. – Tag ktipstđngbtđumtđonmi. I.5.4. : – Ngtdịngtivtrícacatag. Víd: Maryhadalittlelamb It’sfleecewaswhiteassnow EverywherethatMarywent Shewasfollowedbyalittlelamb I.5.5. : – Dùngđkđưngngangtrang,khơngcĩtagđĩng – Cúpháp : Trongđĩ: Direction:gmcácgiátrleft,right,center Width:đdàiđưngk,tínhbngPixelhoc% Size:đdàycađưngk,tínhbngpixel Color:màuđưngk,cĩthdùngtênmàuhocdùngmã#rrggbb Víd: WelcometoHTML MyfirstHTMLdocument Thisisgoingtoberealfun Trang4
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) I.5.6. : – Dùngđnhdngfontch – ðnhdngFontchchoctàiliuthìđttag trongphn – ðnhdngtngphnhoctngtthìđttivtrímunđnhdng – Cúpháp : Nidunghinth Víd: WelcometoHTML MyfirstHTMLdocument Thisis going toberealfun I.5.7. : – Chanidungcatrangweb – Cúpháp: Nidungchínhcatrangweb – Cácthuctínhca BgColor:thitlpmàunncatrang Text:thitlpmàuch Link:màucasiêuliênkt Vlink:màucasiêuliênktđãxemqua Background:dùngloadmthìnhlàmnnchotrang LeftMargin:Canhltrái TopMargin:Canhltrêncatrang Víd: LearningHTML WelcometoHTML Màusc: InternetExplorercĩthxáclp16màutheotênnhưsau : – Black, Silver, Gray, White, Maroon, Red, Purple, Fuchsia, Green, Lime, Olive, Yellow,Navy,Blue,Teal,Aqua. – Mtsmãthplcphâncamàu:#RRGGBB Trang5
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Mãthplcphân Màu #FF0000 RED #00FF00 GREEN #0000FF BLUE #000000 BLACK #FFFFFF WHITE I.5.8. : – DùngđchènmthìnhnhvàotrangWeb – Cúpháp : o Src:xácđnhđưngdntptincnload,sdngđưngdntươngđi . o Alt:chanidungvănbnthaythchohìnhnhkhihìnhkhơngloadv đưc,nuloadvđưcthìsxuthinnidungtrongtextboxmikhi ngưidùngđưachuttihình. o Width,Height:dùngđxácđnhchđphĩngtothunhhìnhnh. o Align=”left/right/top/bottom”:sohànggiahìnhnhvàtext I.5.9. : – DùngđchènmtâmthanhvàotrangWeb.Âmthanhnàysđưcphátmikhi ngưisdngmtrangWeb. – Cúpháp : o Srcchađachfilenhc,filenàycĩphnmrng.mp3,mdi, o Loopxácđnhchđlpđilplicabàihát,nuvalue : – ChophépđưaâmthanhtrctipvàotrangWEB. – Cúpháp : Víd: I.5.11. : – DùngđđiukhinđitưngchymtcáchtđngtrêntrangWeb – Cúpháp : Object – CácthuctínhcaMarquee: o Direction =up/down/left/rightdùngđđiukhinhưngchy. o Behavior =alternate:đitưngchytlnàysanglkiavàngưcli. Víd: ðitưngchylên I.5.12. :Nidungtrongcptagnàykhơnghinth trongtrang Trang6
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Cúpháp : I.5.13. :đnhdngchđm – Cúpháp Nidungchđm Víd: Thisisgoodfun I.5.14. Tag :ðnhdngchnghiêng – Cúpháp : Nidungchnghiêng I.5.15. Tag :Gchchânvănbn – Cú pháp : Nidungchgchchân Víd: ðnhdngkhivănbnvađm,nghiêngvàgchchân TrưngðHCNTPHCM I.5.16. Tag và : – Chnhcchtohocnhhơncchxungquanh – Cúpháp Nidungchto Nidungchnh I.5.17. Tag và : – ðưachlêncaohocxungthpsovivănbnbìnhthưng – Cúpháp : Nidungchdưalêncao Nidungchđưaxungthp Víd: a 2 H 2 O I.5.18. : – Gchngangvănbn – Cúpháp : Nidungvănbnbgchngang I.5.19. : – Dùngđnhpmtdịngmãcĩđnhdngkýtriêng.Dịngmãnàykhơngđưc thchinmàđưchinthdưidngvănbnbìnhthưng – Cúpháp : Nidungvănbnmunđnhdng Trang7
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Víd: If(x>0) x=x+1 else y=y+1 I.5.20. :Vănbnđưcnhnmnh(gingtag ) – Cúpháp : Vănbnđưcnhnmnh I.5.21. :ðnhdngchđm(ging ) – Cúpháp : Vănbnđưcnhnmnh I.5.22. : – Dùngphâncáchmtkhivănbnđnhnmnh,đonvănbnnàyđưctáchra thànhmtparagraphriêng,thêmkhongtrngtrênvàdưiđonđngthithtvào soviltrái(tươngđươngchcnăngcaphímtab) – Cúpháp : Nidungkhivănbnnhnmnh Víd: LearningHTML HumptyDumptysatonawall HumptyDumptyhadagreatfall AlltheKing’shorses AndalltheKing’smen CouldnotputHumptyDumtytogetheragain I.5.23. : – Gi nguyên các đnh dng như: ngt dịng, khong cách,thíchhpvivicto bng – Cúpháp : Nidungvănbncnđnhdngtrơcvittcđnhdngkhongcách, xungdịngvàngthàng Trang8
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Víd: LearningHTML HumptyDumptysatonawall HumptyDumptyhadagreatfall AlltheKing’shorses AndalltheKing’smen CouldnotputHumptyDumtytogetheragain I.5.24. : – Chiavănbnthànhcáckhi,cĩchungmtđnhdng chiavănbnthànhmtkhibtđutmtdịngmi. táchkhinhưngkhơngbtđutmtdịngmi – Cúpháp : Nidungcakhibtđutmtdịngmi Nidungcakhitrong1dịng Víd: LearningHTML Division1 TheDIVelementisusedtogroupelements. Typically,DIVisusedforblocklevelelements Division2 Thisisaseconddivision Areyouhavingfun? Theseconddivisionisrightaligned. Commonformatting isappliedtoalltheelementsinthedivision Trang9
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) I.5.25. Cáckýtđcbit: a. Lnhơn(>):> Víd: IfA>B Then A=A+1 b. Nhhơn( IfA<B Then A=A+1 c. Cpnháy””:" Víd: "Tobeornottobe?"Thatisthequestion d. Kýtvà&:& Víd: William&Grahamwenttothefair e. Kýtkhongtrng : I.6. MTSTHAOTÁCTRONGCASTRÌNHDUYT – CáchloadlitrangWeb:ClickbiutưngRefresh(F5)trênthanhcơngc. – Chnhsasizechhinthtrêntrang:ChnMenuView>Textsize – Chnhlifontch:ChnMenuView>EnCoding – TrongtrưnghptrangWebkhơnghinthđưcFonttingVit: – ChnmenuToolchnInternetOptions>ChnTabFonts chnFonttingVit – NuchnrimàkhơnghinthđưcfonttingVitthìchnMenu View >EnCoding chncácfontnhưUserdefined,Vietnamese . – CáctuỳchnkhácchotrangWeb:Tools Internetoption:KhơngLoadhìnhxung, đnhdngliênkt, – Chntrangwebmcđnhkhimtrìnhduyt Trang10
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Hình1 Hình2 Trang11
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) – TabGeneral(Hình1):thitlpcáctùychnchotrìnhduyt – ClicknútUseCurrent :chntranghintiđloadlênmilnkhiđngIE – Use Default : đa ch trang Web mc đnh mi khi m trình duyt VídmikhimIEthìtđnghinthtrangWebYahootrongơAddress nhp: ,nuchnUseBlankthìhinthtrangtrng. – History :lưulicáctrangwebđãduytquatimáyClientvàthơngtinđăng nhpcauserhinhành – Nukhngmunlưuli:ChnDeleteCookiesvàDeleteFiles. – Cĩththitlpkhongthigianlưutrtrangtrong đi tưng History bngcáchthayđigiátrtrongơ“Daystokeeppagesinhistory”. – NumunxốđitưngnàythìnhnClearhistory. – TabAdvance (Hình 2):cĩthchncáctùychnkhácnhư: – Ngănchnkhơngchotihìnhxungtrangweb – Màuliênkt,cáchthhinliênkttrêntrang – CopyhìnhnhttrangWeb:Clickphivàohìnhnhcnsaochépri chnSavepictureas,hocSavebackgroundas, – LoadvtrangWebbaogmcáchiung,script,hình nh cha trên trang:ChnMenuFile SaveAs Chnvtrílưufile Save. – HiuchnhtrangWeb:Viewsource>hiuchnh chnFile Saveđlưu li F5đcpnhtlinidungvahiuchnh Trang12
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) CHƯƠNGII: SIÊULIÊNKT HÌNHNH II.1. GIITHIUSIÊULIÊNKT II.1.1. Siêuliênkt: KhnăngchínhcaHTMLlàhtrcácsiêuliênkt.Mtsiêuliênktchophépngưi truycpcĩthđittrangwebnàyđntrangwebkhác.Mtliênktgm3phn: – Ngun :chanidunghinthkhingưidùngtruycpđn,cĩthlàmttrangweb khác,mtđonfilm,mthìnhnhhocmthpthoiđgimail – Nhãn :cĩthlàdịngvănbnhochìnhnhđngưidùngclickvàokhimuntruycp đnliênkt,nunhãnlàvănbnthìthưngđưcgchdưi – ðích đn (target):xácđnhvtríđngunhinth. II.1.2. Cácloiliênkt – InternalHyperlink :(Liênkttrong)làcácliênktvicácphntrongcùngmttàiliu hocliênktcáctrangtrongcùngmtwebsite. – ExternalHyperlink (Liênktngồi)làcácliênktvicáctrangtrênwebsitekhác. II.2. TOSIÊULIÊNKT Cúpháp : Nhãn – DùngURLtươngđiđliênktđncáctrangtrongcùngmtwebsite Víd: Usinglinks Clickheretoviewdocument2 – DùngURLtuytđiđliênktđncáctrangtrongwebsitekhác Víd: liênktđnGoogle II.2.1. Liênktvicácphntrongcùngmttrangweb – NunidungcatrangquádàithìnêntocácBookmarkđnhyđnmtphnc thnàođĩtrênchínhtrangwebhinhành. – Cáchtoliênktđncácphntrongcùngtrang:gm2bưc Trang13
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) ToBookMark : Nhãn Nidung ToliênktđnBookmark : Nhãncatextliênkt Víd: Usinghtmlinks Internet IntroductiontoHTML Internet Internetlàmtmngcacácmng.Nghĩalà,cácmngmáytính đưcliênktvicácmngkhác,nicácnưcvàngàynaylàtồn cu.GiaothctruynthơnglàTCP/IPcungcpliênktvittc cácmáytínhtrênthgii IntroductiontoHTML Ngơnngđánhdusiêuvănbnlàngơnngchunmàweb s dngđtovànhnratàiliu.Mcdùkhơngphilàmttpcon cangơnngnângcptiêuchuntngquát(SGML),ngơnng đánhdusiêuvănbncũngcĩliênquanviSGML.SGMLlàmt phươngpháptrìnhbàycácngơnngđnhdngtàiliu.HTMLlà ngơnngđánhduđưcsdngđtotàiliuHTML.Cáchưng dnchrõmttrangwebnênđưchinthnhưthnàotrongtrình duyt Ktqutrêntrìnhduyt Trang14
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) II.2.2. LiênktvimtBookmarkmttàiliukhác Cúpháp : Víd: – Trangmain.htm Maindocument Internet Introductionto HTML – TrangDoc1.htm UsingLinks Internet Internetlàmtmngcacácmng.Nghĩalà,mngmáytínhđưc liênktvicácmngkhác,nivicácnưcvàngàynaylàtồn cu.GiaothctruynTCP/IPcungcpliênktvittccácmáy tínhtrênthgii. IntroductiontoHTML Ngơnngđánhdusiêuvănbnlàngơnngchunmàweb s dngđtovànhnratàiliu.Mcdùkhơngphilàmttpcon cangơnngnângcptiêuchuntngquát(SGML),ngơnng đánhdusiêuvănbncũngcĩliênquanviSGML.SGMLlàmt phươngpháptrìnhbàycácngơnngđnhdngtàiliu.HTMLlà ngơnngđánhduđưcsdngđtotàiliuHTML. II.2.3. Liênktđnhpthưemail Cúpháp : Nhãn – Nusiêuliênktđtcuitrangthìdùngtag Cúpháp: Nhãn II.3. HÌNHNHTRÊNTRANGWEB: II.3.1. Cácloinh: a) nh.Gif (GraphicsInterchangeFormat):đưcsdngphbinnhttrongcáctài liuHTML,dchuynti,ngayccácktnisdngMODEMtcđchm,h tr256màuGIF.CácfileGIFđưcđnhdngkhơngphthucphnnn b) nhJPEG (JointPhotoGraphicExpertGroup)cĩphnmrng.JPG,làloinh nénmtthơngtin,nghĩalànhsaukhibnénkhơnggingnhưnhgc. Tuynhiên, trongquátrìnhphátlithìnhcũngttgnnhưnhgc.JPEGhtrhơn16triu màuvàthưngđưcsdngchocácnhcĩmàuthc. Trang15
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) c) nhPNG (PortableNetworkGraphics)nénkhơngmtdliu II.3.2. Chènhìnhnh Cúpháp : URL:đachcatptinhìnhnh,thưngsdngđachtươngđi,víd: khơngphthucvtrícatptinnhtrênđĩa n:đdàycađưngvin,tínhbngpixel Alt:Nidungthaythshinthkhihìnhkhơngloadđưc,hockhiđưachutngang quahình II.3.3. Cácthuctínhcanh: a) Dànvănbnquanhhìnhnh: Nidungvănbnquanhhìnhnh Nidungvănbnquanhhìnhnh Víd: b) Kíchthưcnh: Víd: Image c) Chnvănbnbaoquanhhình: Canhlkhidànvănbnxungquanhmtnhstácđngđnttccácvănbnsau đĩnukhơngchènvàomtdịngkđcbit.ThuctínhCLEARtrongtagBRlàm chovănbnkhơngbtđunulcthkhơngbxĩađi(nghĩalàticnhdưica nh) Cúpháp : :Ngănchnvănbndànbênlphicanh :Ngănchnvănbndànbênltráicanh :Ngănchnvănbndànhaibênlcanh Trang16
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) d) Thêmkhongtrngxungquanhnh Nukhơngmunvănbndànxungquanhltráicanhthìtacĩththêmkhong trngxungquanhnh Cúpháp: HSPACE=n: Khongtrngđưctínhbngpixelsthêmvàocbênphivàbên tráicanh VSPACE=m: Khongtrngđưctínhbngpixelsthêmvàocbêntrênvàbên dưicanh e) Canhlchonh: Cĩthcanhlchonhsovimtdịngvănbntrongmtđan Cúpháp: Vănbnmuncanhlsovinh Direction:gmcácgiátr:top,bottom,middle,texttop Víd: II.3.4. Dùngnhlàmliênkt: Cĩthdùnghìnhnhđtomtliênktđnmttrangkhác,hocnucĩmtnhln, bncĩthtonhnhhơnhocmtbiutưngchonĩđnĩcĩthhinthnhanh chĩngtrêntrangweb,sauđĩtoliênktđđưangưitruycpđnnhcĩkíchthưc tht Cúpháp : Nhãn II.3.5. Bnđnh: Bnđnhlàmtnhtrongtrangwebđưcchiaralàmnhiuvùng,mivùngkhiclick vàosliênktđnmtđachURL Cáchto :Trưchtphichènvàotrangmtnhvàđtnhãnchonh Trang17
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Trongđĩ: - Label :têncabnđnh - Type: hìnhdngcacácvùngtrênnh,gmcácloi: • Rect:Vùnghìnhchnht • Circle:Vùnghìnhtrịn • Poly:Vùnghìnhđagiác - Coords :tođcácđnhcahình • Rect:(x1,y1,x2,y2)làtođ2đnhchéocavùnghìnhCN • Circle:(x,y,r)lnlưtlàtođtâmvàbánkínhcavùnghìnhtrịn • Poly:(x1,y1,x2,y2,x3,y3, )làcácđnhcavùnghìnhđagiác y y x Víd: x Image II.3.6. Hìnhnn: Tronghuhtcáctrangwebthưngsdngnnmàu,vimcđíchlàlàmnibtni dungtrangđĩ.Tuynhiêncũngcĩthsdnghìnhnhđlàmnnbngthuctính BACKGROUNDcathBODY. Trang18
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) CHƯƠNGIII: DANHSÁCH III.1. DANHSÁCHKHƠNGCĨTHT(UnorderListUL) Cúpháp : Nidung1 Nidung2 − Shape1,Shape2làloibullettđngđtđudịngtrongdanhsách − Shape1:nhhưngđntồndanhsách − Shape2:nhhưngđnmtmctrongdanhsách − Cácloishape: o Circle:Bullettrịn,rng o Square:Bulletvuơng o Disc:Bullettrịnkhơngrng Víd: LearningHTML Monday IntroductiontoHTML CreatingLists Tuesday CreatingTables InsertingImages Wednesday Thursday Friday III.2. DANHSÁCHCĨTHT(OrderList–OL) Cúpháp : Nidung1 Nidung2 Trang19
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) − x:loikýtmunsdngtrongdanhsáchgm: A:Chhoa a:Chthưng I:Slamãhoa i:Slamãthưng 1:Chosmcđnh − n:giátrđutiêncadanhsách − x1 :làloikýtsdngchodịngnàyvàdịngtiptheo,làmmtnhhưngcax − m:giátrđutiêncadịngnày,làmthayđigiátrcan Víd1: LearningHTML Monday IntroductiontoHTML CreatingLists Tuesday CreatingTables InsertingImages Wednesday CreatingForms WorkingwithFrames Thursday Friday Víd2 :Cĩthlng2loidanhsáchcĩthtvàkhơngcĩthtvàonhau LearningHTML Monday IntroductiontoHTML CreatingLists Tuesday CreatingTables InsertingImages Trang20
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Wednesday CreatingForms WorkingwithFrames Thursday Friday III.3. DANHSÁCHðNHNGHĨA: TrongHTMLcĩmttagđcbitdùngđtodanhsáchđnhnghĩadànhriêngchovictra cu,nhưngcũngthíchhpchodanhsáchnàođnimttvimtdingiidài. Cúpháp : Nhptmunđnhnghĩa Nhâpnidungđnhnghĩa Víd: LearningHTML DefinitionList Pixel Shortforpictureelement.Apixelreferstothesmalldotsthat makeupanimageonthescreen.Pixeldepthreferstothenumberof colourswhichmaybedisplayed. Resolution The quality of the display on a monitor. The higher the resolution,thesharpertheimage.Thenumberofpixelsthatcanbe displayedonascreendefinesresolution. Scanner A hardware device that allows the user to make electronic copiesofgraphicsortext. Trang21
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Trang22
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) CHƯƠNGIV: BNGVÀTRÌNHBÀYTRANG IV.1. BNG Bngthưngđưcsdngđtocácvănbnnhiucthocphânchiatrangthànhnhiu vùngkhácnhaurttinlitrongthitkvàtrìnhbàytrangweb Cúpháp : Nidungtrongơ1 Ct1 Nidungtrongơ2 Ct2 Dịng1 Nidungtrongơn Nidungtrongơ1 Dịng2 Nidungtrongơ2 Nidungtrongơn – Tag :chthmtbng – Tag :xácđnhmtdịngcabng – Tag :xácđnhmtơchadliucabng.Dliutrongơcĩthlà vănbnhochìnhnh Víd1 : TABLE Cell1 Cell2 Cell3 Cell4 Trang23
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Víd2 : TABLE Cell1 Cell2 Cell3 Cell4 Víd3 : TABLE Cell1 Cell2 Cell3 Cell4 IV.2. CÁCTHUCTÍNH: IV.2.1. Thuctínhcabng f) Thêmkhungvin : n:đdàycakhungvintínhbngPixel g) ðnhmàucakhungvinvàmàunn: Trang24
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) h) Tobĩng: : Bĩngđcnhdưivàphicabng : Bĩngđcnhtrêntráicabng i) ðnhchiurngvàchiucaocabng : , nlàchiurngtínhbngPixel j) Canhlbng: k) ThuctínhCellpaddingvàCellSpacing: : Khongcáchgiađưngvincacácơ : Khongcáchgiađưngvincaơvivăn bn l) TagtiêuđcaTable: tiêuđ Tag nmtrongcpTag IV.2.2. Thuctínhcact a) Canhltheochiungang: b) Canhltheochiuđng: c) Trnơ: :trnnct :trnndịng d) Tag : Cĩtácdngnhư nhưnglàmchodliutrongơđưcinđmvàcanhgia Nidung Víd: Cell1 Cell2 Trang25
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Víd: TABLE Cell1 Cell2 Cell3 Cell4 Víd: PropertiesofTable Colspan Rowspan Cell1 Cell2 Cell3 Cell4 Víd:Thitkmttrangwebnhưmu Trang26
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Trinhbaytrang ComputerModel Tintuc Giaitri Quangcao Thethao IV.3. TRÌNHBÀYTRANG Trongthct,bngthưngđưcsdngđtrìnhbàybccchotồnbtrangweb.Nu munthitkmttrangthhinvănbntrongctdngbáochíhocphântrangthành nhngvùngcĩchđkhácnhau,thìbnglàmtcơngccnthit.Mttrongnhngnét đctrưnghudngcabngđĩlàtrongmitablecellbncĩthsdngbtkỳtag HTMLnào,vídbncĩthchènmttag trongmtcellhocmtdanhsáchcĩth tcácmchoccĩthchènmtbngcontrongmtbngkhác Víd: Cnthitktrangwebgmnhiuvùngvinhngchđkhácnhaunhưhình dưiđây,thìbnglàcơngchuhiu Trang27
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Bưc1:Tomttablethnhtgm1dịngvà2ct Trang28
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Bưc2:totableth2gm3dịngvà2ct Trang29
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) CHƯƠNGV: FRAME V.1. KHÁIQUÁTVFRAME −−− Cĩthphânchiamttrangthànhcáckhung,chophépngưitruycpcùngmtlúccĩ thxemnhiutrangmàkhơngcncunmànhình,mikhungchamttrangwebriêng −−− NutàitrangsdngFramethìkhơngstagBody V.2. CÁCHTOMTFRAMELAYOUT PageTitle FrameDefinitions V.2.1. Cácdngframe:Tag cĩ2thuctínhROWSvà COLS a) Toframetheodịng Cúpháp: Nidungtiêuđ Trongđĩ: a,b :làđcaocacácdịngth1,th2 ,cĩthtínhbngpixelhocbng% Name :tênkhung,(xácđnhchcnăngcakhung) Content.htm :đachtrangwebxuthinđutiêntrongkhung Víd: 20 % Frame 60 % 20 % Trang30
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) b) Toframetheoct Cúpháp: Nidungtiêuđ Víd: Frame 30% 30% * V.2.2. CácthuctínhcaFrame: a) Noresize :Khơngđikíchthưc b) Scrolling :cĩ/khơngcĩthanhcun Auto :Xuthinthanhcunkhinidungdài Yes :luơnxuthinthanhcun No:khơngxuthinthanhcun Víd: c) Frameborder :đưngvincakhungmcđnhlà1,mungiacáckhungkhơng cịnđưngvinthìtrongtagFramesetnhpthêmBorder=0, d) Marginwidth: hiuchnhkhongcáchtnidungđnltráivàphicakhung (tínhbngpixel) e) Marginheight :hiuchnhkhongcáchtnidungđnltrênvàdưicakhung (tínhbngpixel) Trang31
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) V.2.3. Cácframelngnhau: V.2.4. Liênktframe: TrangđutiêncakhungđưcchratrongthuctínhSRC,tacĩthchnhcáctrang kháccùngxuthintrongkhungđĩbngcáchchravtrítrangđích Titrangmuntoliênktvikhung,tanhpcúpháp: Nhãnmcliênkt Trongđĩ: Target=Name: têncakhungmàtrangmunliênktđntrongtag Page.htm :tranghinthtrongkhungliênkt Tag : Nucĩnhiuliênktđncáctrangxuthintrongcùngmtkhungthìthuctính targetmcđnhđttrongtag Nhãnliênkt Topframe Víd:Thitktrangwebnhưsau: Leftframe Mainframe Trang32
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Cáchthchin: Trangchính :Chiatrangthành3khung:topframe,leftframevàmainframe.Trang Photo.htmđttrongleftframe,logo.htmđttrongTopframe,Bester.htm,DuMont.htm, Jacobs.htmđttrongmainframe StaffofTheColoradoExperience Logo.ht topfram leftfram Bester.htm DuMont.ht m Photo. mainfra TrongđĩcáctrangLogo.htm,Photos.htm,Bester.htmphiđưctotrưc Photos .htm Staffhypertextlinks JeffBester BrianDuMont DennisJacobs Trang33
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) TrangPhotos.htm Bester.htm JeffBester Name: JeffBester Age: 37 Experience: Twelveyearsclimbing.ThreeyearswithTheColorado Experience EMT: Yes JeffhasledroutesinYosemite,Eldorado,MountRanierandRocky MountainNationalPark.HehasparticipatedinexpeditionsinDenali, MexicoandNepal.WearehappytowelcomebackJeffforhisfourth yearwithTheColoradoExperience.JeffwillbeleadingtourstoEldorado Canyon. Trang34
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) CáctrangDuMont.htm,Jacobs.htmcũngthitktươngt. Logo.htm HEAD V.2.5. PhntNOFRAMES PhntNOFRAMESđưcsdngđchnidungthaythchoframekhitrìnhduyt khơnghtrframe. Cúpháp : Pagetitle FrameDefinitions PageLayout Trang35
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) V.2.6. PhntIFRAME Numuntrnvănbnvàkhungtrongcùngmttrangthìphitomtkhungbêntrong trangbngtag , khitrìnhduêtkhơnghtrthìnidungtrongIFRAMEsb trli Cúpháp : – Tivtrímunchènframe,nhpcúpháp: Nidungthaythkhitrìnhduytkhơngchpnhnkhung Trongđĩ: − Page.htm :làtrangđutiênxuthintrongkhung − Name :têncakhung − x,y :kíchthưccakhung − Align :canhl Víd:thitktrangwebcĩdngsau: PhntIframe UntitledDocument Staff The staff at the Colorado Experience is here to helpwith all of your climbing needs. All of our instructors are fully qualified, with yearsof climbing and teaching experience. Scroll through the biographies at the rightformoreinformation Trang36
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) CHƯƠNGVI: FORM VI.1. GIITHIUFORM VI.1.1. SdngForm:Formđưcsdngkhicn: – Thuthpthơngtintên,đach,sđinthoi,email, đđăngkýchongưidùng vàomtdichvhocmtskin – Tphpthơngtinđmuahàng – ThuthpthơngtinphnhivmtWebsite – Cungcpcơngctìmkimtrênwebsite VI.1.2. Cáchto: Cúpháp : NidungcaForm Trongđĩ : Method :xácđnhphươngthcđưadliulênmáych,cĩ2giátr:PostvàGet • NugiátrlàGETthìtrìnhduytstomtcâuhichatrangURL,mtduhivà cácgiátrdobiumutora.Trìnhduytsđiscriptcacâuhithànhkiuđưc xácđnhtrongURLđxlý. • NugiátrlàPOSTthìdliutrênbiumusđưcgiđnscriptnhưmtkhid liu Action :làđachcascriptsthchinkhiformđưcsubmit VI.2. CÁCPHNTCAFORM: Cácphntcaformthưngsdngtrêntrangwebgm • Inputboxes :nhpdliudngtextvànumber • Radiobuttons :dùngđchnmttùychntrongdanhsách • Selectionlists :dùngchomtdanhsáchdàicáclachn,thưnglàtrongDrop downlistbox • Checkboxes :chđnhmtitemđưcchnhaykhơng • Textarea: mttextboxcĩthchanhiudịng • SubmitvàResetbutton :đgiformđnCGIscriptvađresetformvtrng tháibanđu VI.2.1. Inputboxes Làmthpdịngđơndùngđnhpvănbnhocs.ðtocácinputboxes,sdngtag ,tag cịnđưcsdngchonhiuloifieldkháctrênform. Cúpháp : CácgiátrcathuctínhTYPE :McđnhgiátrcaTYPElàtext,nutrongtag khơngnhpthuctínhTYPEthìloiinputboxeslàtext Trang37
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) • TEXT • PASSWORD • CHECKBOX • RADIO • HIDDEN • RESET • SUBMIT • TEXTAREA • BUTTON • IMAGE Víd: Form FirstName: LastName: Address: text 1. Textbox : Hpvănbn,dongưisdngnhpvào Cúpháp : − Name:têndliuđuvàoserver − Value:Dliubanđucĩsntrongtextbox − Size:chiurngcatextboxtínhbngskýt(mcđnhlà20) − Maxlength:skýttiđacĩthnhpvàotextbox Trang38
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) 2. TohpPassword: Nhngkýtnhpvàohinthdưidngduchm,thơngtin skhơngbmãhốkhigilênserver Cúpháp: − Size:chiurngcahpPassword,tínhbngkýt − Maxlength:SkýttiđacĩthnhpvàohpPassword Víd: Form UserName Password: password 3. Checkbox: Hpchn,ngưixemcĩthđánhdunhiucheckboxtrongcùng1b Cúpháp : Nhãn − Name:têncacheckbox − Value:xácđnhmigiátrchomihpcheckboxđưc gi cho server khi ngưixemđánhduvàocheckbox − Checked:thuctínhđhpcheckboxđưcchnmcđnh Víd: Form Hobby: Music Trang39
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Film Sport checkbox 4. Radiobutton : Chophépngưixemchchnmttuỳchntimithiđim Cúpháp: Nhãn − Name:têncaradio,ktnicácradiobuttonvinhau − Value:Nhngdliusgiđnserverkhiradiobuttonđưcchn − Checked:thuctínhđradiobuttonđưcchnmcđnh Víd: Form Userfor Home Business Government EducationalInstitution Other 5. SubmitButton : Ttcthơngtincangưixemnhpvàosđưcgiđnserver khingưixemclicknútSubmit Cúpháp: Trang40
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) − SubmitMessage:LàchxuthintrênButton − Name:têncabutton 6. ResetButton :Thitlpgiátrbanđucattccácđiukhintrênform Cúpháp: CĩthtonútResetvàSubmitbnghìnhnhvicúpháp: Nhãnchltrái Nhãnchlphi Víd: 7. Button : Nútdùngđthchincáclnhdongưisndngđưara Cúpháp: 8. Hidden: làcácfieldmàngưixemkhơngnhìnthytrêntrìnhduyt,nhưngvnlà mtphnttrênform.Hiddenfielddùngđlưutrthơngtintrongcácformtrưc, cácthơngtinnàycnđikèmvicácdliutrongformhinhànhmàkhơngmun ngưixemnhpli Cúpháp: Name :tênmơtngngnthơngtincnlưutr Value :Thơngtincnlưutr VI.2.2. SelectionList: 1. Dropdownmenu: Cúpháp : Option1 Option2 - Nhãn:GiithiuMenu - Name:têndliuđuvàoserver - Size:làchiucaocamenutínhbnghàngch - Multiple:làthuctínhchophépchnnhiuđmc(listbox) - Selected:đmcđưcchnmcđnh - Value:xácđnhdliugichoservernuđmcđưcchn Trang41
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Víd: Dropdownmenu ScanMaster ScanMasterII LaserPrint1000 LaserPrint5000 Print/scan150 Print/scan250 2. NuthêmthuctínhMultiplethìtađưcdng listbox Dropdownmenu ScanMaster ScanMasterII LaserPrint1000 LaserPrint5000 Print/scan150 Print/scan250 3. PhntOPTGROUP:đưcsdngđnhĩmcácchnlathànhcácnhĩmriêng. Víd: UsingtheOptionGroup IntroductiontotheInternet IntroductiontoHTML Introductiontothewebpagedesigning VisualBasic–AnIntroduction VisualBasic–ApplicationDevelopment Trang42
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) optgroup VI.2.3. TextArea:Hpvănbnchophépnhpnhiudịng Cúpháp : Defaulttext − Rows :sdịngcĩthnhpvàoTextArea(mcđnhlà4) − Cols :đrngcatextarea(tínhbngskýt,mcđnhlà40) − Wrap :cácdịngchtđngdànratronglcavùngtextarea,Value: virtual,physical Víd: Textarea Comments? Trang43
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) VI.2.4. Nhãn:Dùngđtonhãnliênktvithànhphnđikèm Cúpháp: Nidunglabel Idname :làgiátrcathơctínhIDtrongthànhphnFormtươngng Víd: UsingLabels Firsname: Lastname: Label VI.2.5. Fieldset:Nhĩmcácđitưnggingnhauvàomtphnlogic Cúpháp: Chúthích Cácthànhphntrongnhĩm Tag :tochúthíchchonhĩm Align=left,right:chvtrícachúthích Víd: Jobapplication Application Form Position Applicationforthepostof: Trang44
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Sex Male Female EducationalQualifications Graduate Postgraduate Languageknown English French German PersonalInformation Name: Enteraddress Trang45
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) VI.2.6. ðiukhincácphnttrênform: 1. ðnhthtTab : Dùngphímtabđdichuyngiacácđitưngtrongform,mcđnhtheothtca mãHTML,munđnhlithttadùngthuctính TabIndex=n trongtagtocác thànhphncaform,trongđĩnlàthtcatab,cĩgiátrt0đn32767 Trongmtformtathưngđnhthttabchocácthànhphn:textbox,password, checkbox,radiobutton,textarea,menuvàbutton 2. Tophímtt : −−− Cáchto : Trongtagtocácphntcaformtadùngthuctính Accesskey=”Phímtt” −−− Sdngphímtt :Nhnthpphím Alt+Phímtt Trang46
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) CHƯƠNGVII: CASCADINGSTYLESHEETCSS VII.1. GIITHIU – Bngkiu(stylesheet)nhmthomnnhucuthmm,tindngnhưnggitính thngnhtchotrangHTML.CSSchophépđnhdangmtstínhchtthơng thưngcùngmtlúcchottccácđitưngtrêntrangđưcđánhdubngtagđc bit – TiníchcaCSSlà: Titkimthigian KhithayđiđnhdngchcnthayđiCSS,cáctrangkhácstđngcp nhtsthayđiđĩ CĩthdùngcácCSScùngviJavaScriptđtocáchiungđcbit – BtlicaCSS: Khơngmttrìnhduytnàochpnhnnĩhồntồn Phimtthigianđhccáchsdng VII.2. CÁCHTO: Mtbngmuđưctobngmttêntagvàmthaynhiucácđnhnghĩađxácđnhcách thchinthcacácđitưngđưcđánhdubngtagđĩ VII.2.1. Phânloivàcáchto: Cĩ3loi: – Inlinestyle – Internalstyle – Externalstyle a. Inlinestyle: Làkiuđưcgánchomtdịnghocmtđonvănbn,bngcáchsdngthuc tínhstylebêntrongtagmunđnhdng Cúpháp: Nidungvănbnmunđnhdng Víd: SettingProperties Thisparagraphhasaninlinestyleappliedtoit Thisparagraphisdisplayedinthedefaultstyle. Canyouseethe difference inthisline b. Internalstyle: Làbngmuthíchhpchotrangriênglvinhiuvănbn,bngcáchtobng muchungtrênđutrangvàdùngchoctrangHTML Trang47
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Cúpháp: TagName{property1:value1;property2:value2 } (lplichomitagcĩthuctínhcnđnhdng) Víd: H1,H2{color:limegreen;fontfamily:Arial} ThisistheH1element ThisistheH2element ThisistheH3elementwithitsdefaultstyleasdisplayedin thebrowser c. Externalstyle: Làmtbngkiuđưclưutrthànhmtfilebênngồivàđưcliênktvitrang HTML.Bngkiunàysđưcápdngvànhhưngchottccáctrangcamt website. – Cáchto: Tomttptinvănbnmi Nhptêncáctagmunđnhdngthuctínhtheomu: TagName{property1:value1;property2:value2; } LưutptinviđnhdngTextOnlyvàcĩphnmrng .css – CáchdùngExternalstyle : Cúpháp : Víd: Totptin Sheet1.css H2{color:blue;fontstyle:italic} P{textalign:justify;textindent:8pt;font:10pt/15pt“MyriadRoman”,”Verdana”} Trang48
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Trang1.htm Changingtherules Changingtherulesisfun Changingtherulesmaynotbesuchfun TheH2elementagain Trang2.htm Changingtherules Thisdocumentuesthesheet1stylesheet Selectingthisoptioncoulddeleteallyourfiles TheH2elementagain VII.3. ðNHBNGMUCHOLP(CLASS): CĩthchiacácyuttrongHTMLthànhcáclpđápdngkiumuhiuquhơn Cúpháp: −−− Trongphn nhpcúpháp: .ClassName{thuctính1:giátr1;thuctính2:giátr2; } −−− Trongphn ,đánhduphnnmtronglpbngcúpháp: Nidung Víd: .water{color:blue} .danger{color:red} testwater testdanger Trang49
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) VII.3.1. ðnhcáctagriêngbit: DùngápdngchomtphàntriêngbittrêntrangWeb Cúpháp : −−− TrongTagStylenhp: TagName#IDName{th/tính1:giátr1;thuctính2:giátr2; } −−− TrongtagBodynhp: Nidung Víd1: IDSelectors #control{color:red;FONTWEIGHT:BOLD} Fireisthiscolor Thisparagraphhas nostyleapplied Víd2 : combiningIDandclassSelector .forest{color:green;fontweight:bold} .danger{color:red;fontweight:bold} #control{color:blue;fontweight:bold} greenthings firehazards moregreenthings morefirehazards thingsthatburn thingsthatdon’tburn water Trang50
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) VII.3.2. Tocáctagtuỳý: Cĩ2loitagchungcĩthktniClasshaycácIDđtocáctagtuỳý.cnphânbitđi tưngcpkhivàcphàng: - ðitưngcpkhinhưmtđonvăn,thưngbtđumtdịngmivàcĩthcha cácđitưngcpkhikhácgmcáctag:P,H1,Body,table - ðitưngcphàngthưngkhơngtodịngmi,thưngchavănbnvàcácyut tronghàngkhácgncáctag:B,Font - CáctagDIVvàSPAN:cĩthktnivicácphntcpkhivàIDđtoracáctag tuỳý.TrongđĩDIVphùhpvicácđitưngcpkhi,SPANphùhpvicácđi tưngcphàng 1. Totagcpkhituỳý: Cúpháp :BngcáchthêmmtlphocIDvàotagDIVvàđnhmucncĩ − TrongphnStylehocmtbngmubênngồitanhp : DIV.ClassName{th/tính1:giátr1;thuctính2:giátr2 } viClassNamelàtênlpssdng.hoc: DIV#Idname{thuctính1:gtr1;thuctính2:giátr2 } viIDNamelàtêncábitcatagDIV − ÁpdngtagcpkhituỳývàotrangHTML :Tiđuphnvănbnmunđnh dng,nhpcúpháp Nidung (bêntrongcĩthchacáctag hoc ) 2. Tocáctagtronghàngtuỳý: Ktninhiukiuđnhdngvănbntrongmttag Cúpháp : − TrongphnStyle,nhpcúpháp : SPAN.Classname{th/tính1:giátr1;th/tính2:giátr2 } Hoc: SPAN#IDname{th/tính1:giátr1;th/tính2:giátr2 } − ÁpdngtagtronghàngtuỳývàotrangHTML :Tiđuđonvănbnmunđnh dng,nhpcúpháp: nidungvănbn Hoc: Nidungvănbn 3. Cácthuctínhđnhdngvănbn: a) Chnbfont: fontfamily:familyname1,familyname2 b) Toch nghiêng : Fontstyle:italic c) Tochđm : Fontweight:bold d) ðnhcch : Trang51
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Fontsize:xxsmallhocxsmall,small,medium,large,xlarge,xxlargehoc Fontsize:12pt(giátrcth) Cĩthđnhdngcácthuctínhchnghiêng,đmvàcchcùngmtlúc: Font:italicboldsize e) Màu ca ch: Color:colorName/#rrggbb f) Màu nn cach : Background:colorName/#rrggbb g) ðnh khong cácgiacáct,cáckýt: Wordspacing:n (n:khongcáchgiacáct,tínhbngpixel) Letterspacing:n (n:khongcáchgiacáct,tínhbngpixel) h) Canhl cho vănbn : TextAlign:left,right,center,justify i) Thayđidngch: Texttransform:capitalize,uppercase,lowercase 4. ðnhdngdanhsách : Liststyle:circlechmtrịnrng Liststyle:discchmtrịnđen Liststyle:squarechmđenvuơng Liststyle:decimalđánhsrp Liststyle:loweralphathtalpha Liststyle:upperalphathtalphachinhoa Liststyle:upperromanslamãhoa Liststyle:lowerromanslamãthưng 5. ðnhdngmàunn : Body{color:#rrggbb} blockquote{backgroundcolor:#rrggbb} background:bacgroundcolor background:backgroundimage background:background–position background:backgroundrepeat background:backgroundattachment 6. ðnhdngHypertextlink A{TextDecoration:none}:khơnggchdưi A:visited{color:#rrggbb} A:link{styleschovtríchưađưcxem} A:active{stylechonhnglinkđangclick} A:hover{stylekhitrlưtqualink} Trang52
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) CHƯƠNGVIII: GIITHIUDREAMWEAVER VIII.1. GIITHIU − MacromediaDreamweaverMX2004làmtcơngcthitkwebchuyênnghip,phn ctlõicanĩlàHTML(HyperTextMarkupLanguage),làmtcơngcmnh,ddùng, bncĩthddàngthitkvàpháttrinmttrangwebhocmtwebsiteln − DreamweaverMX2004làmtcơngctrcquan,trongđĩcĩthbsungJavascrip, biumu,bngbiuvànhiuloiđitưngkhácmàkhơngcnvitmtđonmãnào. − DreamweaverMX2004sdngcáccơngnghweb,chunHTMLvàcungcpkh năngtươngthíchvicáctrìnhduytwebcũ,viDreamweaverMX2004bncĩth thitkbngchđDesignviewhocCodeviewhocCodeandDesign VIII.2. CÀIðT − MacromediaDreamweaverMX2004làmtchươngtrìnhtrongbMacromediaMX, bnnêncàiđttrênmáytrnbMacromediaMXđcĩđyđcácchươngtrìnhhtr choDreamweaverthitktrangwebđpvàsinhđnghơn − Saukhicàiđt,bnkhiđngMacromediaDraemvaerverMX2004theođưngdn Start Programs Macromedia MacromediaDreamweaverMX2004 VIII.3. MÀNHÌNHDREAMWEAVER: 1. InsertBar :Gmcácchcnăngtiníchdùngđchèncácđitưngvàotrangweb,và đnhcácthuctínhchođitưng − Common:Chèncácđitưng:Image,Flash,Date,Template, − Layout: Cha các cơng c trình bày trang, gm 3 ch đ: Standard, Expended, Layout − Forms:ChacáccơngctoForm − Text:Dùngđnhdngvănbn − HTML:chacáccơngctotrangwebbngcodeview 2. Document Toolbar :ChacácnútchophépxemtrangwebdngDesignhaydng Code − Showcodeview:XemdngtrangHTML − ShowDesignview:Xemtrangdngthitk,sdngcáccơngccaDreamwerver − Showcodeanddesignview:Chiacaslàm2phn: phn trên dng code view, phndưidngDesignview − Title:tiêuđcatrangWeb − Preview/DebuginBrowser:Xemktqutrangwebthơngquatrìnhduytweb − DocumentWindow:CasdùngđtovàhiuchnhtrangWeb 3. PropertiesInspector :Hinthcácthuctínhcacácđitưngđangđưcchn,đng thichophépchnhsacácthuctínhđĩ 4. Panelgroups :LànhĩmcácPanelchophépqunlýcácđitưngtrongtrangWeb − Bt/ttcácthanhPanel:ChnmenuWindow ChnthanhPaneltươngng − MrngcácthanhPanel:ClickvàomũitêngĩctráicamiPanel Trang53
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Insertbar Documenttoolbar Documentwindow Panelgroup Sitepanel TagSelector PropertiesInspector Windowsize Downloadtime 5. SitePane l: Chophépqunlýcáctptin,thưmctrongbWeb(gingWindows Explorer). ThanhcơngccaSitePanel Connect/Disconnect:Chcnăngktni/ngtktniviRemotesite,chcĩtác dngviRemotesitesdngphươngthctruynFTP,WebDAVhocSourcesafe,mc đnhDreamweaverMX2004sngtktnikhiremotesitenunĩtrngtháich30 phút.Cĩththayđithigiannàybngcáchchn:Edit/Preferences/Site Refresh:Chcnăngcpnhttptin,thưmcchoRemotesitegingviLocal Site ca chính nĩ. Thưng khơng s dng chc năng này vì khi to Site mi Dreamweaver MX 2004 luơn đánh du check vào mc Refresh Remote File list Automatically GetFile:chcnăngchépFiletremoteSitevàoLocalSite.TuỳthucvàoEnable FileCheckinvàCheckoutmàcáctptinchépvàocĩthuctínhđơcphépghi haychđc PutFile:ChéptptintLocalSitelênRemoteSite Checkoutfiles:KimtratptinRemoteSitechépvàohaychépchnglêntp tinLocalSite Trang54
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Checkinfiles:KimtratptinLocalSitechépvàohaychépchnglêntptin RemoteSite Expand/Collapse:hinth2casLocalSitevàRemoteSite 6. Status bar : Thanh trng thái, nm dưi đáy ca Document Window, hin th Tag Selector,Windowsize,DocumentsizevàDownloadtime. − TagSelector:HinthcáctagHTMLtivtríhinhànhcacontr,khitotrang WebmithìphntduynhthinthtrongTagSelectorlàBODY. − DocumentsizeandDownloadtime:Kíchcưcchngcatàiliuvàthigianti tàiliuxung,cĩthđiuchnhtcđdownloadbngcách: o ChnEdit Preferences ChnmcStatusbar o TimcConnectionspeed Chntcđtươngng − Windowsize:Hinthkíchthưchinticatàiliu,đưctínhbngPixel.Khi đnhkíchthưccatrangwebphitínhđnvicsaochoantồnđivimiđ phângii.Cáchthayđikíchthưccatàiliutheomttrongcáckíchthưcđnh snhoctheomtgiátrkhác:ClickchutvàomũitênbêncnhWindowsize o Chnmtkíchthưccĩsn,hoc o ChnEditsizeđđnhmtkíchthưckhác o TronghpthoiPreferences o Width:đnhchiurng o Height:đnhchiucao VIII.4. KHOCHTHITKMTWEBSITE VIII.4.1. Cácyêucucơbnkhithitkwebsite: − XácđnhyêucuvàmcđíchcaWebsite − Chunbnidungchocáctrang − Phácthokhuơnmu(Template)chotrang,thưngcáctrangcĩcùngchđthìs dngchungmttemplate − XácđnhcutrúccaWebsite,cĩ3kiucutrúc: o Tuyntính o Phâncp o Hìnhchĩp − TuỳtheomcđíchcaWebsitemàchnkiuphùhp VIII.4.2. ThaotáctobWebcơbn: 1. KhithitkmtWebsitecnquantâmđn2vnđ: − Ni dung ch đ chính, t đĩ chn b cc, h màu cho tương ng, (ví d: Websitethươngmiphisángsa,rõràngvbcc, )sauđĩthuthpđyđ tàiliu,phânnhĩmtheonidung,tđĩquytđnhcnbaonhiêutrang,nidung catngtrang − Chnhìnhnh,logo,Banner,hthngnútliênkt,nhminhho,nhbcc, nhtrangtrí − Pháchosơđliênkttrêngiyđthyrmiliênktgiacáctrangđơn trong mtwebsite 2. CáchtomtWebsitemi : − TrongDocumentWindow,chnSite Managesites New Site xuthin hpthoiSiteDefinition ChnTabAdvance,trongmcLocalinfo: Trang55
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) − Site name :đttênSite,tênnàyxuthintronghpthoiEditSite − Local Root Folder :KhaibáođưngdncafolderlưutrWebsitetrênđĩa cngbngcáchnhpđưngdnđnthưmchocClickvàobiutưngFolder vàchđưngdnđnfolder − Default Imagesfolder :khaibáođưngdnđnthưmcchacáchìnhnhca trangWeb,thưmcnàyphinmtrongLocalrootFolderđãkhaibáotrên,tât ccáchìnhnhtrongtrangwebmcđnhđưclưutrongthưmcnày − Refresh LocalfilelistAutomatically :khiđưcchn,Dreamweavertđngcp nhtctrúcfiletrongbngLocalFoldercaSitePanel,viccpnhtnàyss dngmtíttàinguyêncahthng,tacĩthcpnhtkhicnbngcáchchn View RefreshLocaltrongSiteWindow − HTTP Address :Nhpđachcasite,Dreamweaverssdngđachnàyđ qunlýsitevàliênktcácfiletrongsite − Enable Cache :khiđưcchn,Dreamweavertomtfilelưutrcácthơngtinv linkgiacácfiletrongsite.SaukhichnxongClickOK ClickDoneđhồn ttcơngvictositemi 3. KimtraWebsiteđãto : Trang56
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) − MsitePanel:bngcáchchnWindow FiletathyđưcthưmcchaSite, nuchưatoFolderchahìnhnhthìtiđâybnClickphichutvàotênSite ChnNewFolder NhptênthưmclàImages.Trongwebsitephicha2 folder : folder HTML gm các file .htm và folder image cha hình nh ca website − ðmrngcasSitePanel ClickchnnútExpand/Collapse chntên Expan d/Collapse sitecnm 4. Mmtsitecĩsn : − Cách1:ClickvàomenuhinthtênSitetrênToolbarcaSitePanel,chntên Sitemunmtrongdanhsáchxxung − Cách2:ChnmenuSite ManageSites ChntênSitemunm Done 5. HiuchnhSite : − ChnmenuSite ManageSites − ChntênSitecnhiuchnh ClicknútEdit − XuthinhpthoiSiteDefinition thchinhiuchnh OK Done To m tSitem i HiuchnhSite TomtSitemigingsiteđangchn XốSite XutthơngtinmtSiteratptin.ste Dnnhpthưmc,tptinvàoSite Trang57
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) 6. DùnghìnhBitmaplàmnhnnchotrangWeb: − TrongcasDocument,chnModify PageProperties,xuthinhpthoi PagePropeties,chnmcAppearance − TextColor:chnmàuchotext − BackgroundColor:Chnmàunnchotrang − BackgroundImage:ChntptinnhlàmnnbngcáchclicknútBrowse VIII.4.3. ThitkcáctrangWebđơn − TimànhìnhkhiđngchnmcCreatenew ChnHTML Trang58
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) − XuthinDocumentWindow,đâylànơithitktrìnhbàynidungcatngtrangweb đơn,saukhithitkxongmitrangtrangwebđưclưudưidngmttptincĩphn mrng.HTM(hoc.HTML)trongthưmcđãđưckhaibáotrongmcLocalRoot Folder VIII.4.4. ToliênktcáctrangWebđơnthànhmtWebsite 1. Cáchto : − ðtoliênkt,cnphânbittrangngunvàtrangđích. • Trangngunlàtrangchacácnútliênkt(cĩthlàđitưngnh hocch) • Trangđíchlàtrangcnliênktđn − Mtrangngun − Chnnútliênkt − Trong Properties Inspector, ti mc link, thc hin mt trong hai cách sau: • Cách 1:Clicknút kéomũitênchđntêntptincnliênkt trongSitePanel • Cách 2:Clicknút mhpthoiSelectFile o Lookin:ChntênSite o Filename:ChntêntrangWebcnliênktđn 2. KimtrahthngliênkttrongSite : −−− File CheckPage Checklinks −−− XuthinResultinspector,ChnnhĩmLinkChecker −−− TimcShow,chnBrokenLinks −−− CtFileslàdanhsáchcáctptincĩchaliênktgãy −−− CtBrokenlink:Chatêntptinkhơngliênktđưc −−− Phíadưithngkêstrangkimtra,tngsliênkt,sliênkttt, sliênktgãyvàsliênktngoi Cácdngkimtraliênkt: −−− ChecklinksinCurrentDocument:kimtraliênkttrongtranghin hành −−− −−− ChecklinksforentireSite:kimtraliênktchottccáctrang trongsite −−− ChecklinksforSelectedfiles/foldersinSite:kimtranhĩmtptin/ thưmcđưcchntrongSite Trang59
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) 3. Xemktqubngtrìnhduytvàhiuchnh − ChnFile/PreviewinBrowser/iexplore − HocClicknútPreview/DebuginBrowser 4. KtnivàđưaWebsitelênWebServer CnphilưulittccáctptintrưckhixutbnWebsite.XutbnWebsite là chép thư mc gc (root) ca Site lên Server cacác nhà cung cp dch v Internet(ISP). TrongMacromediaDremwearverMX2004,xutbnWebsitecncĩbưckt niviServertrưcrimiPutFilelênsau Cáchthchin: − TrongSitePanel,chnSitecnxutbn − ClicknútPutFiles,đđưaSitelênServer − KtniviRemoteSite:NukhitoSitemitachưaxácđnhRemoteSite (ThưmcchaSitetrênServer),nênsaukhiclickPutFilesxuthinthơng báoyêucuktniviRemoteSite Trang60
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) ClickChnthưmcmichaSite − ChnYes,XuthinhpthoiSiteDefinition − ChnmcRemoteInfo,trongkhungAccess,chnLocal/Network(gilp mtthưmctrênmngccb,hoctrênmtthưmckháccađĩacng) − TimcRemoteFolder,ClickbiutưngFolder,đtìmthưmcmicha Site 5. XutbnSitelênRemoteSite : − TrongSitePanel,chnlitênSitecnxutbn − ClicknútPutFile − Xuthinhpthoi:Areyousureyouwishtoputtheentiresite? − ClickOK − Xuthinhpthoiktni,cáctptinvàthưmccaSitelnlưtđưc chéptsitelênRemoteSite 6. KimtralitrênRemoteSite − ClicknútExpandtrongSitePanel:Mànhìnhchialàm2phn:Bêntráilà RemoteSite,BênphilàLocalSite VIII.4.5. SiteMap: 1. XemmtSiteMap: − SitemaplàmtsơđcutrúcSite,nĩhinthvtrívàsphâncpcacác tptintrongSite.MtSitekhiđưctođyđliênkt,cĩthxemdưi dngSitemap − CnphiđnhnghĩatrangHomePagetrưchoctrongSitephicĩtrang Index.htm − TrongSitePanel,chnMapviewtrongkhungSiteview Trang61
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) − HocclicknútExpand/Collapse ClickchnSiteMap 2. ToliênkttrongSiteMap :Cĩthtoliênkttrangmtcáchtrcquanvà đơnginbngcáchsdngSiteMap.Cáchthchinnhưsau: −−− ToSitemitrongđĩphicĩtrangIndex.htmhocHomePage o ChnSite ManageSites ClicknútEdit o XuthincasDefinition ChnSiteMapLayout o HomePage:đưngdnđntptinIndex OK Done −−− ToliênktbngSiteMap o ClicknútExpand/CollapseđmrngSitePanel o ClickchnnútSiteMap o MànhìnhxuthintrangIndex.htmtrongsite −−− Toliênktphâncp: o ClickphitrênfileIndex chnLinktonewFile Trang62
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) LiênktđnFilemi LiênktđnFileđã o XuthinhpthoiLinktoNewFile: o FileName:Nhptênfile o Title:tiêuđcatrang o TextofLink:dịngtextđliênkt −−− Toliênktnhanh: o Chntptincntoliênkt o Clickbiutưngliênktbêncnhtptinđưcchn o Kéomũitênliênktđntptinliênktđn o Saukhiliênkt,đưcSiteMap Trang63
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) CHƯƠNGIX: ðNHDNGVĂNBNSDNGCSS IX.1. ðNHDNGVĂNBN −−− Cáchnhpgingnhưcáctrìnhsonthovănbnkhác,miphnnidungđưcphân cáchbngcáchxungdịng,nuxungdịngtrongcùngmtđon(Paragraph)thì nhnShift+Enter,nungtđonthìnhnEnter. −−− ðhiuchnhvănbnthưngsdngthanhcơngcPropertiesInspector.Cáchtng quátlàđánhdukhivănbn chnkiuđnhdng −−− SdngthanhcơngcPropertiesInspector: IX.1.1. Font: − Cách1 :TimcformatChncácheading,đâylàcácđnhdngmu,baogm Fontch,kiuch,size, thưngdùnglàmtiêuđ − CáchchnnhĩmFontch :Chnvănbn,richnnhĩmFonttrênFontmenu caPropertiesInspectorhocchnmenuText Font.TrongDreamweaver,kiu Fontchđưcđnhthànhtngnhĩm,minhĩmgmnhiufont,mtFontchính vàcácFontdphịng.CĩthtoracácnhĩmFonttuỳ ý bng cách ti muc Font ChnEditFontList ChnFonttrongkhungAvailableFonts,Clicknút đưacácfontđưc chnquakhungChosenfonts TothêmnhĩmFontmi XốnhĩmrakhiFontList SpxpcácnhĩmFonttheotht Trang64
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) 1. Fontsize : − Chnkhivănbn,ChncchtrongmcSizecaPropertiesInspector,hoc chnText Size.SizechtrongDreamweavergm17FontSize,trongđĩcĩ8 mcthhinbngs,t9đn36và9mcthhinbngch 2. FontColor : Chnkhivănbn,ClicknútTextColor,chnmàuhocchnText Color Clickn útTextcolorc hn 3. Canhlđonvănbn − ChnText AlignhocClickcơngc IX.1.2. Danhsáchdnglitkê: − ChnTextList − UnorderedList:ChènBullettedđudịng − OrderedList:ðánhsthtđudịng Thayđithuctínhlitkê: − ðtdunháytrongdanhsáchlitkê − ChnText List PropertieshocclicknútListItem.XuthinhpthoiList Properties − ListType:Chnkiudanhsách(BulletshocNumbered) − Style:LoiChmtrịnhocvuơng − Startcount:Sbtduchodanhsáchlitkê Listitem: − NewStyle:litkênhiucp − Resetcountto:sbtđuchodanhsáchcon Trang65
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) IX.2. SDNGCSS(CASCADINGSTYLESHEETS) − CSS(CascadingStyleSheets)cũnglàmtdngHTMLStyle.Nhưngphongphúhơn vthuctínhvàngdng.MtCSSkhơngnhngtphpcácđnhdng,màcịncĩ thgiúpđnhv,vinkhung,đtmàunn − CSScĩthđínhkèmtrongtranghoclưuriêngthànhmttptinkiuCSSphcv cùnglúcchonhiutrang IX.2.1. ToCSSccb: 1. Cáchto : − ChnText CSSStyles New XuthinhpthoiNewCSSStyle: − HocWindow CSSStyle,mCSSPanel,ClicknútNewCSSStyle − Name:TêncaCSSmi,phibtđubngduchm(.) − SelectorType:ChnloiCSS − Definein:NewStyleSheetFile:tomttptinCSS − Thisdocumentonly:ChsdngCSSchotrangccb − ChnOK,xuthinhpthoiCSSStyledefinition − Trongmccategory,chnType,sauđĩchncácđnhdngchoCSS − Chnxong,ClickApply OK − TrongCSSPanelxuthinStylevato 2. ÁpdngCSSccb : − Chnnidungvănbncnđnhdng − TrongCSSStylePanel,chntênCSS Trang66
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) IX.2.2. TomttptinCSS: TptinkiuCSSlàmttptinphtrchoSite,nmtrongthưmcrootcaSite 1. Cách to : −−− Text CSSStyles New −−− TronghpthoiNewCSSStyle −−− SelectorType:ChnAdvanced −−− Definein:NewStyleSheetfile,OK −−− HpthoiyêuculưutptinCSS,cĩphnmrng.CSS 2. ÁpdngCSSttptinCSS : −−− MtrangHTMLcnsdngtptinCSS −−− ChnText CSSStyle AttachStyleSheet. −−− HocClicknútAttachStyleSheettrongStylePanel. −−− ChntptinCSScnktni,ClicknútBrowse −−− Addas: o Link:ChliênktvitptinCSSđsdng o Import:ChéptptinCSSvàotrang 3. HiuchnhmtCSS: −−− ClickphitrntênCSStrongCSSStylePanel −−− ChnEdit,thchinhiuchnh 4. XốmtCSSStyles: KhixốmtCSSStylethìnhngnidungápdngCSSStylebxốstrv trngtháibanđu −−− ChnCSSStylecnxố −−− ClicknútDeleteCSSStyletrongCSSStylePanel −−− HocClickchutphi,chnDelete AttachStyleSheet DeleteStyle NewStyleSheet Trang67
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) CHƯƠNGX: HÌNHNHVÀLIÊNKTTRANGTRONG DREAMWEAVER X.1. CHÈNHÌNHNHVÀOTRANGWEB: X.1.1. Chènnhvàotrang: − nhtrongthưmcImagescaSite: ðtdunháytivtrícnchènnh DragchutkéotptinnhtrongSitePanelthvàotrang − nhngồiSite: ChnInsert Image XuthinhpthoiSelectImageSource Chntptinnhcnchèn OK X.1.2. Hiuchnhthuctínhcanh: − Chnnhđãchèn − Window Properties Image:ðttênchonh W(Width),H(Height):ðrngvàchiucaocanh,tínhbngPixel Src:đưngdntươngđiđntptinnh Alt:câuthơngbáoxuthintrêntrìnhduytkhirêchutvàonh Link:ðachURLnơicnliênktđn Edit:ChuynquaMacromediaFireWorkshiuchnhnh Crop:Ctxénnh Brightness/Contrast:Chnhđsángticanh Sharpen:Chnhđscnétchonh Resample:Lưulikíchthưcđãđiuchnh OptimizeinFireworks:chuynquaMacromediaFireWoksđhiuchnh Map:bngđliênktnh VSpace,Hspace:Khongcáchtrên,dưi,trái,phigiaphnnidung vănbnđnnh Target:Khungchatrangliênktđn LowSrc:têntptinnhphcĩđphângiithp,làmnhthaythkhi chhinthnhchínhtrêntrìnhduyt Border:đưngvinnh Align:canhltrái,phi,gia Trang68
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) X.1.3. Chènkhungnh: Trongthitk,nhiulúccndphịngtrưcchonhtrangtrí,nhưngchưacĩnh thíchhp,tacĩthchèntrưcmtkhungnhvikíchthưcxácđnhđgich − ChnInsert ImageObjects ImagePlaceholder − XuthinhpthoiImagePlaceholder − Nhptên,kíchthưc,màuchokhungnh Chènnhvàokhungnh: − Doubleclickvàokhungcnchènnh − XuthinhpthoiSelectImageSource,chntptinnhcnchènvàokhung X.1.4. InsertRolloverImage: − Insert ImageObjects RolloverImage,XuthinhpthoiRolloveerImage OriginalImage:nhgc RolloverImage:nhkhirêchutvào X.1.5. ChènFlash: − Insert Media Flash − Chntptinkiu.swf − TivtríchènxuthinbiutưngFlahs HiuchnhthuctínhcaFlash Trang69
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Flash:TênđitưngFlash W(Width),H(Height):ChiurngvàchiucaocanhFlash File:têntptinShockwarecaFlash Src:têntptingccaFlash Edit:HiuchnhtrongMacromediaFlash Resetsize:trvkíchthưcbanđu Loop:nhFlashlpvơtn AutoPlay:tđngdinhotkhimtranng Vspace,Hspace:khongcáchtrên,dưi,trái,phicađitưngFlash đnvănbn Quality:chtlưngkhihinth ShowAll:hinthttcđitưngtrongkhung NoBorder:khơnggiihntrongkhungvin Exactfit:vkhíttrongkhungvin Align:canhl Bg:màunndưinhFlash X.1.6. nhnntrang − nhnnlànhhtđnglpđytrangWeb.Khithitk,bnnênchnnhngmu nnthtnht,chsmhocnnthtsm,chmàusángđngưixemdđc − Tuỳthucvàotngloinnmàxácđnhkíchthưcnhnnchophùhp,tonh nnvisKbcàngnhthìtranghinthcàngnhanh 1. Cáchtonhnn: ðttrtrongtrang chnModify PageProperties BacgroundImages:nhpđưngdnđntptinnhlàmnn 2. nhnntrangcđnhkhơnglp ðâylàdngnnkhĩthchin,kíchthưcnhthưngrtln,nênphinénđgim sKbtiđa, Tonhnncđnh,khơnglpbngCSS: − Thitknhcnlàmnn − ChnText CSSStyles NewCSSStyle,TronghpthoiNewCSSStyle: − Selector:NhptênStyle − SelectorStyle:ChnmcAdvanced − Definein:Thisdocumentonly OK,XuthinhpthoiCSSStyle definition: − TrongmcCategory,chnBackground − BackgroundImage:têntptinnhlàmnn − Repeat:NoRepeat(khơnglp) − Attachment:fixed(nncđnhkhơngbcun) − Horizontal,verticalPosition:center OK SdngCSSnhnn − KhitoCSSStyle,trongCSSStylePanelxuthintênStylevato − ðđưaCSSStylenhnnvatolàmnnchotrang,ClickphitrênTag catrang,chnSetClass ChntênStylevato X.1.7. ToWebPhotoalbum: Trang70
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) 1. Chcnăng :TobsưutpcáchìnhnhhaycunAlbumgiúpngưisdngqun lývàchnxemtnghìnhmtcáchnhanhnht 2. Cáchto : ðthchinchcnăngnàycnphicàiđtMacromediaFireworksvà mtthưmcchacáchìnhphoto − ChnCommands CreateWebPhotoalbum − XuthinhpthoiCreateWebPhotoAlbum − Nhpcácthơngs: − PhotoAlbumTitle:NhptiêuđcaAlbum − SubheadingInfo:Nhptiêuđph(Xuthindưitiêuđchính) − OtherInfo:Nhngthơngtinbxung − SourceImagesFolder:ðachcafolderchahình − Destinationfolder:ðachcaPhotoAlbumsaukhito − Thumbnailsize:Kíchthưccahìnhtrongtrangchính − Showfilesname:Ghi/Khơngghitênfiledưimihình − Column:scthìnhcĩtrongtrangchính − Thumbnailformat:ChnkiuđnhdnghìnhtrongtrangIndex − Chnkiuđnhdnghìnhtrongtrangcon − Scale:tlhìnhsovitrangIndex − Creatnavigationpageforeachphoto:Cĩ/khơngtochomihìnhmttrang riêngđbxungthêmtrongtin NhpxongclickOK,chktqu,xuthinthơngbáoAlbumđãđưcto,Vào casSitePanelxuthinthêmcácfolder: − FolderThumbnail:chacácfileJPG − FolderPagechacácfile.HTMchomiImagetươngng(trangcon) − TptinIndex.htmtrongFolderchaWebsite,đâylàtptinAlbumchính M tp tin Index.htm và di chuyn gia các trang bng các Hyperlink Next Previous,Home 3. Bsungthơngtinchomitrangcon: − TrongSitePanel,mtptinmunbsungthơngtintrongFolderPage − Nhpthơngtin,trìnhbàytheoýmun,lưuli − ðitêntptinnàythànhGallery.htm Trang71
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) − GánđnhdngTemplatevàochoFileGallery.htm,mtptinIndex,xemkt qu X.1.8. ToLibraryItem: 1. Kháinim : Librarychacácthànhphncatrangnhưhìnhnh,vănbnvà cácđitưngkhácmàtacĩnhucusdnglihoccncpnhtthưng xuyên.CácthànhphnnàygilàLibraryItems.CáchtoLibraryItem: 2. Cách to :M AssetsPanel (Window Assets), trong Assets Panel, Click nútLibrary,ChnthànhphnmuntoLibraryItemvàthchinmttrong cácbưcsau DragchutkéothànhphnđưcchnthvàokhungLibrary ðttên ClicknútNewLibraryItemvàđttên ChnModify Library AddObjecttoLibraryvàđttên 3. NhpLibraryItemvàotrangmi : − ðtdunháyvàonơimunnhpLibraryItem − KéoLibraryItemtAssetsPanelthvàodocumentWindow,hocclicknút InserttrongAssetsPanel 4. HiuchnhLibraryItem : − ChnLibraryItemtrongkhungLibrary ClicknútEdit − XuthinhpthoichophéphiuchnhlibraryItem − ClickSave xuthinhpthoibncĩmuncpnhtttctrangWebcĩ sdngLibrarytrongsitekhơng,Yes:đcpnht,No:khơng. − SaunàycĩthcpnhtbngcáchchnModify Library Updatepages: cpnhtttcnhngtrangcĩsdngLibraryItem 5. TáchLibraryItemtrongDocumentkhiLibrary : − ChnLibraryItemtrongtrangWebhinhành − Click nút Detach from Original trên Properties Inspector, khi đĩ library b táchrathànhtngđitưngvàkhơngcịnliênquanđnLibrary,tacĩth hiuchnhtngđitưng − ToliLibraryItembngmtlibraryđangsdngtrongtrang − CĩthdùngmtLibrarytrongtrangđtolimtLibraryItem,nuLibrary Itembmt − ChnLibrarytrêntrangWebhinhành − ClicknútRecreatetrênPropertiesInspector,LibraryItemsđưctoli Trang72
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) X.2. LIÊNKTTRANGTRONGDREAMWEAVER: X.2.1. Liênkt: Mtliênktnittrangngunđntrangđíchgm2thànhphn − ðitưngđưcchnlàmnútliênktcĩthlàvănbn(Text),hìnhnh(Image)hoc nút(Button).TrongMacromediaDreamweaverMX2004cịncungcpthêmmts đitưngđcbitlàmnútliênktnhưFlashText, Flash Button, Navigation bar, RolloverImages − ðachURLcatrangcnliênktđn:TuỳthucvàođachURLmàcĩthchia làm3loiliênkt Liênktni:LàliênktnibcáctrangtrongcùngmtWebsite. Liênktngoi:LàliênktđntrangthucmtWebsitekhác. LiênktEmail:Làliênktđnchươngtrìnhgithưtínđint. X.2.2. Cácdngliênkt: − Dngliênktvịng:Làdngliênktniđuơinhau,trang1liênktđntrang2, trang2liênktđntrang3, trangnliênktđntrang1,dngliênktnày đmbongưixemcĩthxemttccáctrang,nhưngbtlilàphiduyt htmtvịng. − Dngliênktđyđ:Timitrangđutoliênkt đy đ đn tt c các trangcịnli,đâylàadngliênkttrongsitecĩđphâncpthp.NuSitecĩ nhiuphâncpthìnênchndngliênktcâyphâncp. − Dngliênktcâyphâncp:TrongcácSiteln,mcđquantrongcatng trangđưcphâncptheotngmc,vitranggclàtrangch,mc1lànhĩm chđchính,mc2lànhĩmchđcon,mc3làtrangchacácthơngtin chitit, dngnàytntiliênktgiacáctrangcùngmc(SameLevel), liênktvmctrên(ParentLevel),liênktvmcdưi(Childlevel). − Dngliênkttinnghi:Ngồicácdngliênkttrên,đthuntinchongưi xemkhilttrang,cĩthtothêmmtsliênktph,nhưliênktđnđim dng (Bookmark) trong trang cĩ ni dung dài, nhiu phân đon, hoc to thêmmththngliênkttextcuimitrang,khingưixemđn cui trangcĩthnhanhchĩngltsangtrangkhácmàkhơngcntrv − Liênkttrangch:Trangchthưngchacácnútliênktđncáctrangcon, dođĩcnphitoliktttrangcontrvtrangch Trang73
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) X.2.3. Cáchto: − Mtrangngun − ChnInsert Hyperlink Text:nidungvănbnlàmnútliênkt Link:ðachURLcatrangcnliênktđn Target:Khungchatrangđích Title:Câughichúkhichutchmvàonút AccessKey:Khixemtrang,nhnthpphímAlt+Kýtnhpđ chnnútvànhnEnterđliênkt. TabIndex:trìnhtchnnútkhinhnphímTab 1. Toliênktni: LiênktgiacáctrangtrongnibSite,đâylàliênktđơngin,chcnchntên tptintrangđích,sdngđachtươngđi,hoctrongmcLinknhptêntptin đích 2. Toliênktngoi Toliênktđncáctptinngồisite,cnphinhpđach a trangđích thucSitekhác Khitoliênktngoi,ngưixemcĩthquasitekháccĩthkhơngtiptcxemsite cabnna,đtránhtrưnghpnày,cĩththchinmttrongcáccáchsau: − Liên h vi ngưi ch ca Site ngồi, hp đng to quan h qua li gia 2 Website − ðưaSitengồivàotrongkhung(Frame)caSitemình − Mthêmmtcasmi,sauđĩđưaWebSitenàyvào.Cáchmcasmicho liênktviWebSitengồi − TrongPropertiesInspector,TimcTargetnhptêncakhungchatrangđích. Chn_blank:mmtcaskhungtrngđchatrangđích LiênktvitrangYahootrong cas kh ác 3. ToliênktđachEmail: ðâylàliênktđnchươngtrìnhginhnthưđint,giúpngưixemcĩthliênh, traođivingưichcaWebsite Cách1: ChnđitưnglàmnútliênktEmail TrongơLinknhptrctipdịngmailto:theosaulàđachEmailcangưi chWebsite Cách2: Trang74
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Khơngcntođitưnglàmnútliênkt ChnInsert EmailLink TronghpthoiEmaillink: Text :nhpnidungvănbnlàmnút EMail :nhpđúngđachEmail 4. Toliênktđntptinđngưixemtixungmáyccb: Cĩnhngtptinbnmuncungcpchongưixemtrangnhưngchúngkhơngphi làcáctrangHTML,vídmtsdngfontchmi,tptinnén,hoccácchương trìnhnh.EXE Cáchto: − Mtrangcntoliênkt − Chnđitưnglàmnútliênkt − Trong Properties Inspector, trong mc Link, nhp vào tên tp tin cn liên kt (hoc Click nút đmhpthoiSelectFiletìmtptincncungcp cho ngưixem.NutptinnàykhơngcùngSitethìxuthinhpthoiyêucu chéptptinnàyvàosite 5. Liênktđimdng(NamedAnchor) a) Toliênktđimdngcùngtrang: ðivicáctrangWebdài,hoctrangcĩnhiumc,thìvicdùngthanhcun khơngđưctiên,dođĩcĩthgiúpngưixemđntngmcmtcáchnhanh chĩng,chínhxácnhvàovicđtsncácđimdng.Cáchtogm2bưc: o ðttênchođimdng: − TrongDocumentwindow,đtdunháytivtríslàmđimdng − Chn Insert Named Anchor (Ctrl+Alt+A) hoc Click nút Insert NamedAnchortrongbngCommoncathanhInsert − Trong hp thoi Insert Anchor: Nhp tên cho Anchor (khơng tha khongtrng,khơngcĩkýtl) o Toliênktđimdng: − TrongDocumentWindows,chnmtđonvănbnhocmthìnhđ tolinkđnđimdng − Nuđimdngnmcùngtrangthìtiơlinknhp#tênAnchor b) Toliênktđimdngcatrangkhác: Thaotáctoliênktđnđimdngtrangkhácgingnhưliênktđntrang khác,nhưngtimclinkphichrađimdngnào.Theocutrúc : # X.2.4. Kimtraliênkt: 1. KimtraliênktbngCheckLink: TacĩthsdngCheckLinksđcĩmtbngthngkê tt c các liên kt trong Website. − Mtrangcnkimtraliênkt − ChnFile CheckPage Checklinks − TrongResultsinspector ChnmcLinkChecker − TrongmcShow:ChnBrokenLink hinthdanhsáchliênktgãy − ChnExternallinks:hinthdanhsáchliênktngồi 2. Kimtraliênkétbngtrìnhduyt − ChnFile PreviewinBrowser Trang75
GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) − Cĩ th thay đi trình duyt bng cách chn File Preview in Browse Edit BrowserList − ChntêntrìnhduyttrongphnBrowser,chniexplorer.Nukhơngtìmthythì clicknút(+)đthêmtrìnhduytmivàodanhsáchBrowser,clickdu()đb bttrìnhduyttrongdanhsách o Default:Mcđnhđưutiêntrìnhduytkhixemtrang o Option:PreviewUsingTemporaryfile:chnchcnăngnàyđtotptintam tươngngvitrangcnxem.Trìnhduytshinthtrangtm,nukhơng chn,bnsxemtrctiptrangtrêntrìnhduyt. X.2.5. Hiuchnhliênkt: − Chnnútliênktcnthayđi − ChnmenuModify ChangeLink − HpthoiSelectfilechophépchntptintrangcnliênktđn − NubitrõtptinliênktmithìcĩthnhptrctiptrongơlinkcaProperties Inspector 1. Xốliênkt − Chnnútmunloibliênkt − ChnModify RemoveLink.Hocxốtêntrangliênkttrongơlinkca PropertiesInspector 2. Chnkhungchotrangliênkt Khiliênktthưngsdngtrangkhung(Frameset) − Chnnútmunthayđikhungliênkt − ChnmenuModify LinkTarget − Chntênkhungphùhp 3. Chnmàucholiênkt Thưngmtliênktdngvănbnsđưcgchdưivàcĩmàuxanh,đơikhimàu nàykhơngphùhpvimàusáchtrongtrangthitk,cĩthchnlimàuliênkt bngcách: − ChnModify PageProperties,trongmcCategory,chnLink Trang76