BÀI GIẢNG MÔN THIẾT KẾ WEB_6 doc

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 7 77 78 88 8  Chương01 TỔNGQUANVỀMACROMEDIADREAMWEAVER  SơlượcvềMacroMediaDreamweaver  Mànhìnhlàmviệc  ĐịnhnghĩaSite  SửdụngbảngđiềukhiểnSite  I.SơLượcVềDreamweaver Làmộtchươngtrìnhdùngđểtạoravàquảnlýcáctrangweb.Phầncốtlõicủanólà HTML(HyperTextMarkupLanguage-Ngônngữđánhdấusiêuvănbản) Làmộtcôngcụmạnh,dễdùng,mộtcôngcụtrựcquan:CóthểbổsungJavascrip, biểumẫu,bảngbiểuvànhiềuloạiđốitượngkhácmàkhôngcầnphảiviết1dòngmãnào. CungcấpchếđộlàmviệcDesignWYSIWYG(nhữnggìthấylànhữnggìcóđược). vàchếđộlàmviệcmã–Code. II.MànHìnhLàmViệc 1.Khởiđộng: StartProgramsMacroMediaMacroMediaDreamWeaverMX2004 CreateNewHTML 2.Mànhìnhlàmviệc  1. Thanhtiêuđề:Chứatêntậptinđangthiếtkê 1.Thanhtiêuđ ề  2.Thanhtrình đơn  3.Thanhcôngc ụInsert  4.ThanhcôngcụDocument 7.B ảngđiềukhiển  5.Thanhtrạngthái 6.Cửasổthuộctính Vùng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 7 77 79 99 9  2. Thanhtrìnhđơn:Chứacáctậplênhthựchiệncácchứcnăng 3. ThanhcôngcụInsert:Chứanhómcáccôngcụtạovàđịnhdạngcácđốitượng. 4. ThanhcôngcụDocument:Cáchìnhthứctrìnhbàytrangđangthiếtkế 5. Thanhtrạngthái:Báokhuvựctrêntrangđangchọnlàmviệcvàkíchthướctrang. 6. Cửasổthuộctính(Properties):CácthuộctínhcủađốItươngđangđượcchọn. 7. Bảngđiềukhiển:Trìnhbàycácbảngđiềukhiển III.ĐịnhNghĩaSite 1.Kháiquát Sitelàvùnglưutrữcụcbộtrênmáytínhchứacáctậptincủa1websitebaogồm cácthưmụcconchứacáctậptinâmthanh,hìnhảnh... 2.ThiếtLậpCấuTrúcSite Việc tổ chức site cẩn thận ngay từ lúc đầu sẽ tiết kiệm thời gian về sau. Thông thườngđểxáclập1sitelàtạo1thưmụcgốctrongđĩacụcbộchứatấtcảcácfiletrongweb site,sauđósaochépcácfilenàyđếnwebserver 3.TạoMớISite ChọnmenuSite/ManageSitesNew/Site  Hộp thoại Site Definition for Unnamed Site 1 hiển thị, có hai lớp (Basic và Advanced).LớpAdvancedtrìnhbàytổngquát,cònlớpBasictrìnhbàydạngtừngbước(sẽ khôngcósựkhácbiệtnhaugiữahailớpnày.) XétlớpAdvanced  1 2 3 4 5 6 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 80 00 0  Xácđịnhcácmụctronghộpthoại: • [1]Sitename:Nhậptênchosite(VD:CLBTinHoc) • [2]LocalRootFolder:Xácđịnhthưmụctrênổđĩacụcbộnơilưutrữcáctậptin. • [3]RefreshLocalFileListAutomaticaly:TựđộngtinhchỉnhmỗikhithayđổIcác tậptincóliênquantronglocalsitehaykhông. • [4]DefaultImagesFolder:Chỉđịnhthưmụcmặcđịnhlưutrữcáctậptinảnhtrong site. • [5]Cache:ChỉđịnhCachecụcbộcóđượctạohaykhôngđểcảithiệntốcđộliênkết vàquảnlýtàinguyêncủasite.Khuyênnênchọnmụcnày,tuynhiênnếumáykhông đủbộnhớRAMcóthểbỏquatùychọnnày. Xácđịnhxongcácmụctronghộpthoại,clickOKđểtạositeTrởvềcửasồManage SitesclickDone  IV.SửDụngBảngĐiềuKhiểnSite 1.BảngđiềukhiểnSite SửdụngcửasổSitechocácthaotácquảnlýtậptintrongSitenhư:tạotrangHTML, xem,mởvàdichuyển;tạocácthưmụcvàxóacácthưmục. ĐểmởbảngđiềukhiểnSitetrongnhómcácbảngđiềukhiểnchọnFiles  2.CácthaotácquảnlýLocalSite CácthaotácquảnlýthưmụcvàtậptintạIcửasổLocalSiteđượcánhxạtrựctiếpđấncây thưmụctrongđĩacứng. a.TạothưmụctrongSite Clickphảitênsite(Hoặcthưmục)muốntạothưmụccon NewFolderNhậptên b.TạotậptinHTMLtrongSite ClickphảItênsite(Hoặcthưmục)chứatrangHTML 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 81 11 1  NewFileNhậptên. c.ĐổitênThưmụchoặctậptin ClickphảItênthưmục(Hoặctậptin)EditRename Nhậptênkhác. d.Nhânđôitậptin ClickphảitêntậptinEditDuplicateNhậptênkhác. e.XóathưmụctậptinHTML ClickphảItêntậptin(hoặcthưmục)EditDelete 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 82 22 2  Chương02 THIẾTKẾTRANGWEB  CácthaotácquảnlýtrangWeb  Thiếtlậpcácthuộctínhtrang  Tạovàđịnhdạngvănbản  Tậptinhìnhảnh  TậptinMedia  TậptinFlash I.CácThaotácQuảnLýTrangWeb Khiđãtạo1sitecụcbộ,tacóthểtạocáctrangwebđểđưavàosite.Khitạovàlàm việcvớicáctrangweb,DreamweaversẽtựđộngphátsinhmãnguồnHTML. Cócáccáchkhácnhauđểtạo:Tạomớitrangwebtrốnghaytạomớidựavàocác trangwebmẫu(template) 1. Tạomớitrangtàiliệu: ChọnmenuFile/New  HộpthoạiNewDocumenthiểnthị, ChọnlớpGeneral,chọnBasicpagechọnkiểudạngHTML.NhấnvàonútCreate,  2. Lưumộttrangtàiliệu: • ChọnmenulệnhFile/Save • Nhậptênchotậptinvàchọnthưmụcchứatậptincầnlưu. • ClicknútSaveđểlưu. Nếumuốnlưutậptinvớitênkhác, chọnmenulệnhFile/Saveas..  3. MởmộttậptinHTMLđangtồntại: ChọnmenuFile/Open,chọnfilecầnmởvànhấnOpenđểmở. 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 83 33 3  II.ThiếtLậpThuộcTínhTrang Tiêuđềtrang,ảnhvàmàunền,màuvănbảnvàliênkết,cáclềvàcácthuộctínhcơ bảncủatrangweb. • ChọnmenuModify/PageProperties...Hoặcclickchuộtphảitrêntrêntrangđang thiếtkếchọnPageProperties... • HộpthoạiPagePropertieshiểnthị: 1.Thuộctínhchungchotrang:LớpAppearance  (1)-PageFont:Fontchữmặcđịnhchotrang (2)-Size:Cỡchữmặcđịnhchotrang (3)-Textcolor:Màuchữmặcđịnhchotrang (4)-Backgroundcolor:Màunềntrang (5)-BackGroundImage:Ảnhnềnchotrang(ẢnhphảInằmtrongthưmụccủaSite) (6)-Left/Right/Top/BottomMargin:Lềtrang 2.Cácthuộctínhchungcholiênkết:LớpLink   (1)-LinkFont:Fontchữchovănbảnliênkết  (2)-Size:Cỡchữchovănbảnliênkết  (3)-Linkcolor:Màuchữchovănbảnliênkết  -Visitedlinks:Màuchữchovănbảnliênkếtkhiđãviếngthăm  -Rolloverlinks:Màuchữchovănbảnliênkếtkhirêchuộtqua  -Activelinks:MàuchữchovănbảnliênkếtkhiClickchuột (4)-Underlinestyle:Kiểugạchchânchovănbảnliênkết   +Never....:Khôngbaogiờcógạchchân 1 2 3 4 5 6 1 2 3 4 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 84 44 4    +Always...:Luôncógạchchân   +Show....:Hiệnthịđườngkẽngangkhirêchuộtvào   +Hide.....:Ẩngạchchânkhirêchuộtvào 3.Tạomẫuvănbảnđềmục:LớpHeadings Tạocácmẫuvănbảnđềmục(Heading1,...)đểdùngkhiđịnhdạng.  4.Tiêuđềtrang:ChọnmụcTitle/Encoding  Title:Nhậptiêuđềchotrangvàomục. Encoding:ChọnUTF-8(nếutrêntrangcósửdụngvănbảnUniode) III.TạoVàĐịnhDạngVănBản ViệcnhậpvàđịnhdạngvănbảntrongDreamweaverMXhoàntoàngiốngnhưtrình soạnthảovănbảnthôngthường. 1.Tạovàđịnhdạngvănbản • NhậpvănbảntrựctiếptrongcửasổDocument. • ĐểthayđổiFont,kíchthước,màusắcvàsựcanhlềchocácvănbảnđượcchọncó thểsửdụngtrìnhđơnTexthoặctruycậpcácthuộctínhtrênProperties.  ĐểnhậpvănbảntiếngViệt,nênsửdụngcácfontvàbảngmãtươngứng.Thông thườngnênsửdụngfonttheomãUnicodeđểcóthểxemtrênmọimáy. 2.ThiếtlậpvàthayđổicácFontvàStyle: • Chọnvănbản. • Thiếtlậpcáctùychọnsau: o ĐểthayđổiFont:ChọntổhợpfonttừProperties(HaytừmenuText/Font) o ĐểthayđổikiểuFont:ClickBold/ItalictrênProperties(HaychọnkiểuFont trênmenuText/Style) 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 85 55 5  o Đểthayđổicỡchữ:Chọn1kíchcỡtừProperties(HaytừmenuText/Size) cáckíchcỡtừ1đến7l(Mặcđịnhlà3) o Đểtănggiảmkíchcỡcủavănbảnđượcchọn:Chọnkíchcỡtươngđối(+1 hay-1chođến+7hay-7)từProperties(HaytừmenuText/Size) SửdụngcácParagraphvàcácHeading:  Đặtđiểmchènvàotrongđoạnvănbản. DùngFormattrênProperties(HaymenuText/ParagraphFormat)đểápdụngđoạn vănbảnchuẩnvàcácthẻHeading. 3.Đổimàuvănbản: • Chọnvănbảnmuốnđổimàu. • Thựchiện:ClickôTextColortrênProperties(HaychọnMenuText/Color)đểmở bảngmàu,chọn1màutrongbảng.      4. 4. 4. 4. Canhchỉnhvănbản: • Chọnvănbảnmuốncanhchỉnhhayđặtđiểmchènvàotrongđoạnvănbản. • ClickchọnmộtdạngcanhlềtrênProperties(HaychọnmenuText/Align) 5.ThayđổitổhợpFont: Sử dụng lệnh Edit Font List để thiết lập các tổ hợp font được hiển thị trên PropertiesvàmenuText/Font. Chọn tổhợpfont từdanhsáchởphíatrêncủahộpthoại EditFontList.Cácfont trongtổhợpđượcliệtkêtrongdanhsáchChosenFonts.DanhsáchAvailablechứacác fontchophépcàiđặt.NếukhôngcóFontnàotrongtổhợpđượccàiđặtthìsẽhiểnthịFont mặcđịnhcủatrìnhduyệt.       6.Tạomộtdanhsáchmới: • Đặtđiểmchènởvịtrímuốntãtạodanhsách(Hoặc1nhómcácdòng) • ClicknútUnorderedListhayOrderedListtrênProperties  (HayMenuText/Listvàchọnkiểucủadanhsách) ấnEnterđểchuyểnsang. Đểhoànthànhdanhsách,ấnEnterhailần. 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 86 66 6  Cácthuộctínhcủadanhsách:Đểxemhayhiệuchỉnhcácthuộctínhcủadanhsách. • ChọnmộthạngmụctrongdanhsáchvàchọnText/List/Properties(HayclickList ItemtrênProperties)  TronghộpthoạiListPropertiescócácthuộctính. o ListType:Kiểuđánhdấucủadanhsách. o Style:Kiểucủakýtựdùngđánhdấudanhsách. o StartCount:Đặtbiếnbắt đầuđánh dấuchohạngmụcđầutiêntrongdanh sách. o NewStyle:Chophépchọnmộtkiểukýtựmớiđánhdấubắtđầutừhạngmục đượcchọn. o ResetCountTo:Đặtgiátrịbắtđầuđánhdấutừhạngmụcđượcchọn       7.Tạodanhsáchkếttổ: o Chọndanhsáchcáchạngmụcmuốnkếttổ. o ClicknútTextIndent/TextOuttrênProperties(HaychọnText/IndentHoặc Text/Outdent) 8.Sửdụngđườngkẻngang: Cácđườngkẻngangrấthữuíchchoviệctổchứcthôngtin.Trên1trang,cóthểtách rờicácvănbảnvàcácđốitượngvớimộthaynhiềuđườngkẻngang. • Đặtđiểmchèntạivịtrímuốntạođườngkẻngang. • Chọn Insert / Horizontal Rule (Hay Click nút Insert Horizontal Rule trong Panel Objects/HTML) Chỉnhsửađườngkẻngang: • Chọnđườngkẻngang. • ChọnvàđiềuchỉnhcácthuộctínhcủađườngkẻngangtrênProperties: o WvàH:địnhchiềucaovàbềdày. o Align:chọnchếđộcanh. o Shanding:chọnkiểubóngđổ.  9.Chèncáckýhiệuđặcbiệt • Đặtđiểmchèntạivịtrímuốnchènkíhiệuđặcbiệt • ChọnInsert/HTML/SpecialCharcters/Orter(HayClicknútCharactertrongPanel Objects/Text) 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 87 77 7  ChọnkýhiệuOk IV.TậpTinHìnhẢnh 1.Kháiquátvềhìnhảnh Hìnhảnhlàthànhphầnquantrọnggópphầntrangtrítrangwebthêmhấpdẫnvàlinh động.TuynhiênlạIlànhântốgâycảntrởtốcđộhiểnthịtrangweb.Vìvâycầncânnhắc theocácnguyêntăcsau:  MàusắcphảIphùhợpvớITonemàuchungcủatrangweb  Đừnglạmdụngquánhiềuhìnhảnhtrêncùng1trang.  Khôngsửdụngảnhcókíchthướcquálớn(Nếucầnnêntạoliênkếtphóngto)  Độphângiảiảnhthôngthường72dpi  ChọnđịnhdạngảnhphùhợptheodạngthứccủatừngloạIảnh: Jpeg–Jpg:Ảnhtĩnh,hỗtrợ16triệumàu,phùhợpvớicácảnh Gif:Ảnhtĩnhhoặcđộnghỗtrợ256màu Swf(MacromediFlash):Ảnhđộngvéctơ,hỗtrợ16triệumàutuynhiênđể xemmáytínhphảicàiFlashPlugin. Ghichú:Cáchìnhảnhphảiđượclưutrữvào1thưmụctrongSite. 2.ChènẢnhVàoTrangWeb a.Chènhìnhảnhvàotrang  ĐặtđiểmchènởvịtrímuốnchènClickbiểutượngImageImagetrênthanh côngcụCommon.(HoặctrìnhđơnInsert/Image)  Hoặc  TìmchọnảnhClickOk 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 8 88 82 22 2  Chương02 THIẾTKẾTRANG WEB  Cácthaotácquảnlýtrang Web .  (HayMenuText/Listvàchọnkiểucủadanhsách) ấnEnterđểchuyểnsang. Đểhoànthànhdanhsách,ấnEnterhailần. 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 86 66 6  Cácthuộctínhcủadanhsách:Đểxemhayhiệuchỉnhcácthuộctínhcủadanhsách. • ChọnmộthạngmụctrongdanhsáchvàchọnText/List/Properties(HayclickList ItemtrênProperties)  TronghộpthoạiListPropertiescócácthuộctính. o ListType:Kiểuđánhdấucủadanhsách. o Style:Kiểucủakýtựdùngđánhdấudanhsách. o StartCount:Đặtbiếnbắt. và Advanced).LớpAdvancedtrìnhbàytổngquát,cònlớpBasictrìnhbàydạngtừngbước(sẽ khôngcósựkhácbiệtnhaugiữahailớpnày.) XétlớpAdvanced  1 2 3 4 5 6 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