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

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

1. 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
2. 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
3. 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
4. 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
5. 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
6. 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
7. 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
8. 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
9. 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
10. 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
11. GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Hình1 Hình2 Trang11
12. 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
13. 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
14. 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
15. 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
16. 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
17. 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
18. 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
19. 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
20. 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
21. 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
22. GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Trang22
23. 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
24. 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
25. 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
26. 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
27. 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
28. GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Bưc1:Tomttablethnhtgm1dịngvà2ct Trang28
29. GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Bưc2:totableth2gm3dịngvà2ct Trang29
30. 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
31. 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
32. 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
33. 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
34. 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
35. 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
36. 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
37. 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
38. 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
39. 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
40. 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
41. 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
42. 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
43. 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
44. 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
45. GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Sex Male Female EducationalQualifications Graduate Postgraduate Languageknown English French German PersonalInformation Name: Enteraddress Trang45
46. 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
47. 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
48. 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
49. 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
50. 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
51. 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
52. 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
53. 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
54. 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
55. 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
56. 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
57. 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
58. 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
59. 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
60. 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
61. 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
62. 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
63. 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
64. 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
65. 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
66. 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
67. 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
68. 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
69. 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
70. 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
71. 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
72. 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
73. 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
74. 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
75. 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
76. 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