BÀI GIẢNG MÔN THIẾT KẾ WEB pdf

BàiGingMônThitKWeb  Phn4:MacroMediaDreamWeaver   Biênson:DngThànhPht  Trang 8 88 88 88 8  b.Cácthaotácđịnhdạng  [1]-Src:Đườngdẫntậptinảnh. [2]-Alt:Câuchúthíchkhirêchuộtvàoảnh. [3]-Border:ĐộdàyKhungviềnquanhảnh. [4]-Cáchìnhthứccanhlềảnhsovớitrang. [5]-Align:Cáchìnhthứccanhlềảnhsovớivănbảntrêntrang. [6]-LowSrc:Đườngdẫntậptinảnhchấtlượngthấp(tảItrướcảnhthật) [7]-Vspace:Khoảngtrống(Pixel)bêntrái/phảIảnh [8]-Hspace:Khoảngtrống(Pixel)phíatrên/dướIảnh. c.Giữtọađộvịtríchoảnh  GiúpchongườIthiếtkếđịnhvịtrướcvịtrícủacácảnhsẽchènbổsungsaunày:  ĐặtđiểmchènởvịtrímuốnđịnhvịClickbiểutượngImageImagePlacehoder trên thanh công cụ Common. (Hoặc trình đơn Insert/ Image Object/ Images Placeholder) Hoặc    Xuấthiện    Name:Đặttên  Width/Height:Độrộng/Height:Độcao Color:Màunền AlternateText:Câuchúthích  BổsunghìnhảnhvàđịnhdạngtạIvịtríđãgiữchổ ChọnvịtríđãgiữchổTạIcửasổthuộctínhPropertiesthựchiệnbổsungảnhvàkhai báocácthuộctínhđịnhdạng 1 2 3 4 5 6 7 8 This is trial version www.adultpdf.com BàiGingMônThitKWeb  Phn4:MacroMediaDreamWeaver   Biênson:DngThànhPht  Trang 8 88 89 99 9  V.TậptinMedia(Audio,Video) 1.KháiquátvềcácdạngtậptinMultiMedia: • Dạng.midi(hay.mid)đượccungcấpbởinhiềutrìnhduyệtvàkhôngyêucầuPlug-in. • Dạng.wavcóchấtlượngâmthanhtốt,đượccungcấpbởinhiềutrìnhduyệt,không yêucầuPlug-in.Tuynhiênkíchthướctậptinlớn. • Dạng.aiftươngtựdạngwav,chochấtlượngâmthanhtốt,cóthểchạyhầuhếtcác trìnhduyệtmàkhôngyêucầuPlug-in,Tuynhiênkíchthướctậptinlớn • Dạng.mp3,.avi,wma,wmv...làdạngnénlàmtậptinâmthanhnhỏhơnnhiều.Chất lượngâmthanhtốt.Côngnghệmớichophép"phânluồng"tậptinnênkhôngphảiđợi toànbộtậptinđượctảitrướckhinghenó.Đểchạycáctậptinnày,ngườisửdụng phảicàiđặttrìnhứngdụngnhưWindowsMedia. • Dạng.ra,.ram, .rpm,..cóđộnén rất cao,kíchthướctập tin nhỏ hơn. Côngnghệ phầnluồngtậptin.ChấtlượngâmthanhkémhơncáctậptinMP3Phảicàiđặttrình ứngdụngnhưRealPlayer. 2.LiênkếtđếntậptinMedia LiênkếtđếntậptinMedialàcáchđơngiảnvàhiệuquảđểthêmâmthanhchotrangWeb. • ChọnvănbảnhayhìnhảnhmuốnsửdụngđểliênkếtvớitậptinMedia. Trênthanhproperties,ởtrườngLinkclickvàobiểutượngthưmụcđểtìmtậptinâm thanhmuốnliênkếtOk(hoặcgõvàođườngdẫnvàtêntậptin). 3.NhúngtậptinMediavàotrang: NhúngMediakếthợpvớitrìnhchạyâmthanhtrựctiếpvàotrang. • Đặttrỏchèntạivịtrímuốnnhúngtậptin. • ClickvàonútPlug-in trênCommon,haychọnlệnhInsert/Media/Plugin Hay  • HộpthoạiSelectFilehiểnthị,clickchọntìmtậptinMedia.Ok • TrênthanhProperties,xácđịnhđộrộng,chiềucaovàcanhlềchoMediacontrol.  Ghichú:TậptinMedianhúngvàotrangphảinằmcùngthưmụcvớitrangdangthiếtkế.  This is trial version www.adultpdf.com BàiGingMônThitKWeb  Phn4:MacroMediaDreamWeaver   Biênson:DngThànhPht  Trang 9 99 90 00 0  VI.CácTậpTinFlash 1ThêmcáctậptinFlashvàotrang • Đặttrỏchèntạivịtrímuốnnhúngtậptin. • ClickvàonútFlashtrênCommon,haychọnlệnhInsert/Media/Flash  Hay  • HộpthoạiSelectFilehiểnthị,clickchọntìmtậptinFlash,Ok • TrênthanhProperties,xácđịnhđộrộng,chiềucaovàcanhlề,chokhunghiểnthị hayxemthửkếtquả(Play)  2.ThiếtkếcácchuỗikítựcóhiệuứngFlash • ĐặttrỏchèntạivịtrímuốntạochuổIhiệuứngFlash. • ClickvàonútFlashTexttrênCommon,haychọnlệnhInsert/Media/FlashText  Hay  • HộpthoạiSelectFilehiểnthị,clickchọntìmtậptinFlash, Font:Fontchữ Size:Cỡchữ Color:Màu RolloverColor:Màukhirêchuộtvào Text:NhậpnộIdung Link:URLcủatậptinliênkết Tartget:Hìnhthứchiểnthịchotrangliênkết BgColor:Màunền Saveas:Vịtrílưutrữtậptinảnhcủanút  This is trial version www.adultpdf.com BàiGingMônThitKWeb  Phn4:MacroMediaDreamWeaver   Biênson:DngThànhPht  Trang 9 99 91 11 1  Ok • TrênthanhProperties,xácđịnhđộrộng,chiềucaovàcanhlềchochuỗIFlash.  This is trial version www.adultpdf.com BàiGingMônThitKWeb  Phn4:MacroMediaDreamWeaver   Biênson:DngThànhPht  Trang 9 99 92 22 2  Chương03  LIÊNKẾTVÀĐỊNHHƯỚNGTRANG  Cácloạiliênkếtvàđịnhhướng  Tạoliênkết  BổsungNavigationBar  BổsungRollover  Tạobảnđồảnh  TạonútFlash I.CácLoạILiênKếtVàĐịnhHướng 1.Kháiquátvềcácđườngdẫnvàvịtrícủatàiliệu: MỗitrangWebcóduynhấtmộtđịachỉ,đượcgọilàURL(UniformResourceLocator). Tuynhiênkhitạomộtmốiliênkếtcụcbộ,thôngthườngkhôngxácđịnhtoànbộURL,Thay vào đó  xác định đường dẫn liên quan từ thư mục gốc của site. Sau đâylà 3 giai đoạn đườngdẫnliênkết: 2.Đườngdẫntuyệtđối(Absolutepaths): LoạiđườngdẫnnàycungcấpmộtURLhoànchỉnhđếntàiliệuđượcliênkết. Vídụ:http://www.macromedia.com/support/dreamweavermx/contents.html/ • Sửdụngđườngdẫntuyệtđốiđểkếtnốiđếntàiliệuđặttrênmộtserverkhác. 3.Đườngdẫntươngđối(Documentrelativepaths): • LoạiđườngdẫnnàythíchhợpchocácliênkếtcụcbộtronghầuhếtcácWebsite.Để kếtnốivới1trangbằngcáchchỉđịnhđườngdẫnquahệphâncấpthưmụctừtàiliệu hiệnhànhđếntàiliệumuốnliênkết. NếutạođườngdẫnnàytrướckhilưutàiliệuthìDreamweaverMXsẽsửdụngtạm thờiđường dẫntuyệtđốibắtđầuvới"file://"chođến khilưutậptin,DreamweaverMX chuyển"file://"thànhđườngdẫntươngđối. 4.Cácđườngdẫntươngđốisovớigốc(Root-relativepaths) Loạiđườngdẫnnàycungcấpđườngdẫntừthưmụcgốccủasiteđếntàiliệu.cóthể sửdụngloạiđườngdẫnnàynếuđanglàmviệctrênWebsitelớnsửdụngvàiserverhoặc mộtservermàgiữnhiềusitekhácnhau. • Loạiđườngdẫnnàybắtđầubằngdấu"/"ámchỉthưmụcgốccủasite. Vídụ:/support/tips.html:làđườngdẫnđếntậptintrongthưmụcconsupporttrongthư mụcgốccủasite. 5.Liênkếtrỗng:Làliênkếtkhôngđượcchỉđịnh.TrongtrườngLinknhậpvàodấu"#". II.TạoLiênKết Thựcchấtviệcbổsungcácliênkếtrấtdễdàng.Mộtliênkếtlàmộtbehaviorbáocho trìnhduyệtrằng"khingườidùngnhấpvàođây,hãymởtrangWebnàyhoặcđiđếnphần nàycủatrang". 1. Tạomộtliênkết: • Chọndòngvănbảncầntạoliênkết: • ClickchuộtphảivàchọnMakeLinkhayvàotrìnhđơnModify/MakeLinkhaykhai báotạitrườngLinktrênProperties • HộpthoạiSelectfilehiểnthị,clickchọntênfilecầnliênkếthaynhậpmộtđịachỉWeb SitemàđịnhliênkếtvàohộpthoạiURL. This is trial version www.adultpdf.com BàiGingMônThitKWeb  Phn4:MacroMediaDreamWeaver   Biênson:DngThànhPht  Trang 9 99 93 33 3  2.Tạoliênkếtthưđiệntử: Vớiliênkếtthưđiệntử,khingườidùngnhấpvàoliênkếtnày,trìnhquảnlýthưđiện tửmặcđịnhcủangườisửdụngsẽđượcmởra. • Đặtvịtrícontrỏchuộttạinơimuốnđặtdòngliênkết.ClickchọnvàobiểutượngMail linktrênthanhcôngcụCommonhay(HayvàotrìnhđơnInsert/EmailLink • HộpthoạiEmailLinkhiểnthị:NhậpnhãnhiểnthịvàoôTextvàđịachỉthưđiệntử vàoôE-mail.clickOK,  III.BổSungNavigationBar 1.Kháiquát Navigation Bar bao gồmmột ảnh (hoặc một tập ảnh) hiểnthị nhữngthay đổitheo thaotáccủangườisửdụng. TrướckhisửdụnglệnhInsertNavigationBar,phảitạomộttậpcácảnhđểhiểnthị cáctrạngtháicủamỗiphầntửtrongthanhNavigation.gồmcó4trạngthái: • Up:Ảnhxuấthiệnkhingườisửdụngchưaclickhoặcđãtácđộngvàonó. • Over:ảnhxuấthiệnkhitrỏchuộtdichuyểnlênnó. • Down:ảnhxuấthiệnkhiclickchuột. • OverWhileDown:ảnhxuấthiệnkhitrỏchuộtdichuyểnrangoàisaukhiclickchọn. khôngnhấtthiếtphảicóảnhcho4trạngthái,cóthểchỉtạotrạngtháiUpvàDown. 2.ChènthanhNavigationBar  ĐặtđiểmchènởvịtrímuốnchènClickbiểutượngImageImageNaigationBar trênthanhcôngcụCommon.(HoặctrìnhđơnInsert/ImageObject/NavigationBar)  [1]-:Thêmmới/loạIbỏ1mục [2]-:Thayđổitrậttựcácmục. [3]-:Elementname:ĐặttênchomỗImục. [4]-:UpImage:Hìnhhiểnthịbanđầu. 1 4 5 2 3 6 7 9 10 8 This is trial version www.adultpdf.com BàiGingMônThitKWeb  Phn4:MacroMediaDreamWeaver   Biênson:DngThànhPht  Trang 9 99 94 44 4  [5]-:OverImage:Hìnhsẽhiểnthịkhirêchuộtvào [6]-:DownImage:HìnhhiểnthịkhiClickvào. [7]-:OverwhiledownImage:ẢnhsẽhiểnthịkhiClickvàohìnhvàrêchuộtquahình [8]-:Alternatetext:Câuchúthíchkhirêchuộtvàoảnhtrang. [9]-:WhenClick,GotoURL:Tậptinliênkết [10]-:In:Hìnhthứchiệnthịchotrangliênkết 3.HiệuchỉnhthanhNavigationBar Khiđãtạomộtthanhđiềuhướng,cóthểbổsunghoặcxóacácảnhởcáctrạngthái. • ChọnModify/NavigationBar. • TrêndanhsáchNavBarElements,chọnphầntửmàmuốnchỉnhsửa. • Thaotáchiệuchỉnhxong,clickchọnOK. IV.BổsungRollover 1.Kháiquát Rolloverlàmộtbehaviorlàmchohìnhảnhbịthayđổibởimộthìnhảnhkháckhicon trỏchuộtdichuyểnlênphíatrênnó.Thôngthườngngườisửdụngsẽnhậnbiếtđượcrằng mộthìnhảnhthayđổichínhlàmộtliênkếtđếnmộttrangwebkhác. 2.TạoảnhRollover  ĐặtđiểmchènởvịtrímuốnchènClickbiểutượngImageImageRollovertrên thanhcôngcụCommon.(HoặctrìnhđơnInsert/ImageObject/RolloverImage)  [1]-ImageName:Đặttên. [2]-OrignialImage:Anhgốc. [3]-RolloverImage:Ảnhsẽhiểnthịkhirêchuộtvào [4]-Alternatetext:Câuchúthíchkhirêchuộtvàoảnhtrang. [5]-URL:Tậptinliênkết V.TạoBảnĐồẢnh 1.Kháiquát Mộthìnhảnhvớinhiềuliênkếtvớinósẽtạoramộtbảnđồảnh.Cácliênkếtđược gắn với các vùng khác nhau của cùng một hình ảnh bằng cách sử dụng các điểm nóng (hotspot).Việcnhấpvàocácđiểmnóngsẽđưangườisửdụngđếncácliênkếttươngứng. 2.Tạobảnđồảnh • ViệctrướctiênlàphảichènmộtảnhcầntạoHotspotvàotrangđangthiếtkế. • TrênthanhInsert,chọnlớpCommon.LúcnàythanhPropertiestrêntrangthiếtkế sẽhiểnthịcôngcụHotspot. 1 4 5 2 3 This is trial version www.adultpdf.com BàiGingMônThitKWeb  Phn4:MacroMediaDreamWeaver   Biênson:DngThànhPht  Trang 9 99 95 55 5   - RectangularHotspot:tạovùngnónghìnhchữnhật. - OvalHotspot:tạovùngnónghìnhtrònhoặcElip. - PolygonHotspot:tạovùngnóngtheocáchvẽtựdocủa.     Chọnmộttrongcáccôngcụvẽnàysaochotươngứngvớihìnhcủavàdùng chuộtrê,vẽlênbứcảnh.Cóthểvẽtạoranhiềuvùngđiểmnóngtrênbứcảnh.  Khaibáocácthôngsốsau  Link:ĐịachỉcủatrangcầnliênkếttớI Target:Hìnhthứchiểnthị Alt:Câuchúthíchkhirêvàoliênkết. Ghichú:Đểhủybỏphânvùngđãtạo:Clickchọnvùngđ1oDelete VI.BổSungNútFlash 1.Kháiquát ĐốitượngnútFlashchophépthayđổitùyývàchènmộttậpcácnútFlashđãđược địnhnghĩatrước. 2.TạonútFlash • Đặttrỏchèntạivịtrímuốntạonútnhấn. • ClickvàonútFlashButtontrênCommon,hay chọnlệnhInsert/Media/FlashButton • HộpthoạiSelectFilehiểnthị,clickchọntìmtậptinFlash,   This is trial version www.adultpdf.com BàiGingMônThitKWeb  Phn4:MacroMediaDreamWeaver   Biênson:DngThànhPht  Trang 9 99 96 66 6   Style:ChọnmẫuNút ButtonText:Nhậpnhãnchonút Font:Fontchữchonhãn Size:Cõơchữnhãn Link:URLcủatậptinliênkết Tartget:Hìnhthứchiểnthịchotrangliênkết BgColor:Màunền Saveas:VịtrílưutrữtậptinFlashcủanút 3.ChỉnhsửacácđốitượngnútFlash: • ChọnđốitượngnútFlash. • TrênProperties,hiểnthịcácthuộctínhcủanútFlash.  • Đểthayđổinộidung,mởhộpthoạiInsertFlashButtonbằngcácphươngphápsau: - ClickđôivàođốitượngnútFlash - ClickvàonútEdittrênPropertiesinspector. - ClickphảilênđốitượngvàchọnEdittừtrìnhđơnPop-up. • TrênhộpthoạiInsertFlashButton,tạonhữngchỉnhsửachođốitượng. This is trial version www.adultpdf.com BàiGingMônThitKWeb  Phn4:MacroMediaDreamWeaver   Biênson:DngThànhPht  Trang 9 99 97 77 7  Chương04 THIẾTKẾBỐCỤCTRANGTABLE&LAYER  Thiếtkếbảngbiểu-Table  Thiếtkếlớp-Layer  Thiếtkếbốcụctrang–PageLayout  I.TTHIẾTKẾBẢNGBIỂU-TABLE Bảnglàmộtcôngcụrấttiệnlợiđểsắpđặtcácảnhvàcácdữliệutrêntrang.Bảng baogồm3thànhphầncơbản:  Row:hàng  Column:cột  Cell:ô         1. Chènbảng: • ChuyểnsangchếđộStandardmode • ChọnbiểutượngInsertTabletrênthanhcôngcụCommonhayLayout(hoặcchọn menuInsert/Table)đểtạomộtbảngmới • HộpthoạiInsertTablehiểnthị,nhậpcácgiátrịvàotronghộpthoại. - Rows:Chọnsốhàngchobảngcầnchèn. - Columns:Chọnsốcộtchobảngcầnchèn. - Width:Chọnđộrộngcủacột.phầntrăm(Percent)haypixel. - Border:Chọnđộdàyđườngviền. - CellPaddingvàCellSpacing:Địnhkhoảngcáchđệmgiữacácôvàkhoảng cáchnộidungtrongôsovớiviềnô.Mặcđịnhlà1pixelvà2pixel. • Saukhichọnxongcácgiátrịthíchhợp,clickOKđểtạomộtbảng.        This is trial version www.adultpdf.com . version www.adultpdf.com Bài Ging Môn ThitK Web  Phn4:MacroMediaDreamWeaver   Biênson:DngThànhPht  Trang 9 99 97 77 7  Chương04 THIẾTKẾBỐCỤCTRANGTABLE&LAYER  Thiết kế bảngbiểu-Table . Tạomộtliênkết: • Chọndòngvănbảncầntạoliênkết: • ClickchuộtphảivàchọnMakeLinkhayvàotrìnhđơnModify/MakeLinkhaykhai báotạitrườngLinktrênProperties • HộpthoạiSelectfilehiểnthị,clickchọntênfilecầnliênkếthaynhậpmộtđịachỉ Web SitemàđịnhliênkếtvàohộpthoạiURL. This is trial version www.adultpdf.com Bài Ging Môn ThitK Web  Phn4:MacroMediaDreamWeaver   Biênson:DngThànhPht. version www.adultpdf.com Bài Ging Môn ThitK Web  Phn4:MacroMediaDreamWeaver   Biênson:DngThànhPht  Trang 9 99 92 22 2  Chương03  LIÊNKẾTVÀĐỊNHHƯỚNGTRANG  Cácloạiliênkếtvàđịnhhướng 