BÀI GIẢNG MÔN THI THIẾT KẾ WEB_2 potx

BàiGiảngMônThiếtKếWeb  Phần1:NgônNgữThiếtKếWebHTML  Biênso ạn:DươngThànhPhết  Trang11 Trongđó: Hiệuứng: +Scroll:Bắtđầutừ1cạnhbiếnmấtởcạnhkia +Slide:Bắtđầutừ1cạnhdừnglạiởcạnhkia +Alternate:Bắtđầutừ1cạnhchuyểnngượclạiởcạnhkia Huớng:Left,Right,Up,DownHướngbắtđầu n1:Sốlầnlặp n2:Khoảngcách(Pixel)giữamỗilầnlặp n3:Thờigianchờgiữamỗilầnlặp. VD:TạotậptinHTMvớinộidungnhưsau     VI.VĂNBẢNDANHSÁCH 1.DanhSáchKhôngĐánhSốThứTự Danhsáchkhôngđánhsốthứtựlà:Tạochỉmục,hoathị(Bullets)đầumỗiđoạn.Mỗi mụcsẽthụtvàođầudòng. a.Tạodanhsáchkhôngđánhsốthứtự <UL>  <LI>Mục1củadanhsách  <LI>Mục2củadanhsách .......  <LI>Mụcncủadanhsách </UL> VD:TạotậptinHTMvớinộidungnhưsau         <HTML> <MarqueeBehavior="alternate"Direction="right">  <Fontcolor="red"Size=5> Chàocácb ạn!Chúccácbạnhọctốt</Font> </Marquee> </HTML>  <HTML> <BODY> <H3>CH ƯƠNGTRÌNHĐÀOTẠOTHIẾTKẾWEB</H3> <UL>  <LI>Ngônng ữHTML&ampFrontPage  <LI>DreamWeaverMX  <LI>KhaithácvàQu ảntrịDomain,Hostting  <LI>Ngônng ữkịchbảnJavaScript;  <LI>Ngônng ữlậptrìnhASP&SQLServer </UL> </BODY> </HTML>  This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb  Phần1:NgônNgữThiếtKếWebHTML  Biênso ạn:DươngThànhPhết  Trang12  b.Thayđổikiểudángchochỉmục <ULType=Trịthuộctính>:  Apdụngchotấtcảcácmục <LIType=Trịthuộctính>:  Apdụngcho1mụcchỉđịnh Cáctrịthuộctính:  Disc:Dấutrònđen(Mặcđịnh)  square:Hìnhvuôngđenđặc  Circle:Hìnhtrònrỗng VD:TạotậptinHTMvớinộidungnhưsau        2.DanhSáchCóĐánhSốThứTự DanhsáchcóđánhsốTTlà:Loạidanhsáchcóđánhthứtựtheosốhaytheokýtự (Numbering)đầumỗiđoạn. a.Tạodanhsáchcóđánhsốthứtự <OL>  <LI>Mục1củadanhsách  <LI>Mục2củadanhsách .......  <LI>Mụcncủadanhsách </OL> <HTML> <BODY> <H3>CH ƯƠNGTRÌNHĐÀOTẠOTHIẾTKẾWEB</H3> <ULTYPE="circle"> <LI>Ngônng ữHTML&FrontPage <LI>DreamWeaverMX <LITYPE="square">Qu ảntrịDomain,Hosting <LITYPE="square">Ngônng ữkịchbảnJavaScript; <LITYPE="disc">Ngônng ữASP&SQLServer </UL> </BODY> </HTML> This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb  Phần1:NgônNgữThiếtKếWebHTML  Biênso ạn:DươngThànhPhết  Trang13 VD:  TạotậptinHTMvớinộidungnhưsau   b.Thayđổicáchđánhsốthứtự  <OLType=Trị>    KiểuSTTchotoànvănbảndanhsách <LIType=Trị>Mụccủadanhsách KiểuSTTcho1mụcchỉđịnh Cáctrịkiểu Trị Kiểuhiểnthị 1 1,2,3... a a,b,c... A A,B,C... i i,ii,iii... I I,II,III... VD:TạotậptinHTMvớinộidungnhưsau   <HTML> <BODY> <H3>CH ƯƠNGTRÌNHĐÀOTẠOTHIẾTKẾWEB</H3> <OL>  <LI>Ngônng ữHTML&ampFrontPage  <LI>DreamWeaverMX  <LI>KhaithácvàQu ảntrịDomain,Hostting  <LI>Ngônng ữkịchbảnJavaScript;  <LI>Ngônng ữlậptrìnhASP&SQLServer </OL> </BODY></HTML> <HTML> <BODY> <H3>CH ƯƠNGTRÌNHĐÀOTẠOTHIẾTKẾWEB</H3> <OLTYPE="A">  <LI>Ngônng ữHTML&ampFrontPage  <LI>DreamWeaverMX  <LI>Ngônng ữkịchbảnJavaScript;  <LI>Ngônng ữASP&SQLServer </OL> </BODY> </HTML>  This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb  Phần1:NgônNgữThiếtKếWebHTML  Biênso ạn:DươngThànhPhết  Trang14 3.Chỉđịnhgiátrịkhởiđầu <OLStart=Trị>:  Tácđộngtấtcảcácmụctrongdanhsáchtrừkhimụctrong dánhsáchchỉđịnhkhác.  <LIValue=Trị>Mụccủadanhsách:Tácđộngmụcchỉđịnhvàcácmụcsauđó nếucácmụcnàykhôngchỉđịnhkhác. VD:TạotậptinHTMvớinộidungnhưsau   3.DanhSáchĐịnhNghĩa Dùngđểlậpdanhsáchthuậtngữ.Mỗimụccủadanhsáchgồm2phần: Kháibáothuậtngữ   Địnhnghĩathuậtngữ <DL> <DT>Khaibáothuậtngữ <DD>Địnhnghĩathuậtngữ1 <DD>Địnhnghĩathuậtngữ2  ....... </DT>  ....... </DL> VD:TạotậptinHTMvớinộidungnhưsau <HTML> <BODY> <H3>CH ƯƠNGTRÌNHĐÀOTẠOTHIẾTKẾWEB</H3> <OLType="1">  <LI>Ngônng ữHTML&ampFrontPage  <LI>DreamWeaverMX  <LI>Ngônng ữkịchbảnJavaScript;  <LI>Ngônng ữASP&SQLServer </OL> <H3>CH ƯƠNGTRÌNHĐÀOTẠOTHIẾTKẾWEBNC</H3> <OLType="1"START="5">  <LI>Ngônng ữXML  <LI>Ngônng ữVisualBasic.Net  <LI>Côngngh ệASP.Net </OL> </BODY> </HTML>  This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb  Phần1:NgônNgữThiếtKếWebHTML  Biênso ạn:DươngThànhPhết  Trang15   4.DanhSáchLồngNhau Kếthợpcácthẻ<UL>,<OL>,<LI>đểlậpdanhsáchlồngnhau VD:TạotậptinHTMvớinộidungnhưsau            <HTML> <BODYText="Blue"> <B>CH ƯƠNGTRÌNHĐÀOTẠO</B> <DL> <DT><FontColor="Red">TINH ỌCVĂNPHỊNG</FONT> <DD>Tinh ọccănbản&WindowsXP  <DD>S ọanThảovănbảnMicroSoftWord  <DD>X ửlýbảngtínhMicroSoftExcel <DT><FONTColor="Red">TINH ỌCQUẢNLÝ</FONT>  <DD>L ậptrìnhCSDLMicroSoftAccess2003  <DD>Thi ếtkếtrìnhchiếuMicroSoftPowerPoint </DL> </BODY> </HTML> <HTML><BODY> <H3>CH ƯƠNGTRÌNHĐÀOTẠONGÀNHWEBSITE</H3> <OLTYPE="I">  <LI><B>THI ẾTKẾWEBSITE</B>  <OLTYPE=“1">   <LI>Ngônng ữHTML&ForntPage   <LI>Ngônng ữkịchbảnJavaScript   <LI>MediaFlashMX   <LI>Thi ếtkếgiaodiệnPhotoShop   <LI>Thi ếtkếWebSiteDreamweaverMX  </OL>   <LI><B>L ẬPTRÌNHWEBSITE</B>  <OLTYPE="1">   <LI>Phântích&Thi ếtkếCSDL   <LI>L ậptrìnhCSDLASP.NET&SQLSever   <LI>Qu ảntrịWebsite   <LI><B> Đềtàitốtnghiệp</B>  </OL> </OL> </BODY></HTML>  This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb  Phần1:NgônNgữThiếtKếWebHTML  Biênso ạn:DươngThànhPhết  Trang16 Chương03 TỔCHỨCWEBSITE, S ỬDỤNGHÌNHẢNH,THIẾTLẬPLIÊNKẾT  o TổchứclưutrữWebsite o S ửdụnghìnhảnh o Thi ếtlậpliênkết o Nhúngt ậptinMedia I.TỔCHỨCLƯUTRỮWEBSITE 1.CáctậptinHTMLcủa1Website • 1WebsitebaogồmrấtnhiềutrangWeb–webpage(tậptinHTML). • Khilưutrữphảitổchứccócấutrúcđểthuậntiệntrongquảnlý,điềuchỉnhvềsau. • KhiđưaWebsitelênWebServerđượccấp1địachỉ(DomainName)và1thưmục. 2.Trangchủcủa1Website • Trangchủ(Homepage)làđượcnạpkhitruycậpmàkhôngrõtậptinnào(Chỉnhập URLcủa1Website) • Thườngquiđịnhlà:index.htm,default.htm,home.htm VD:Truycập:http://www.tuoitre.com.vn Nghĩalà:http://www.tuoitre.com.vn/Index.htm 3.Tổchứclưutrữ1Website a.TổchứcSite1thưmục • TấtcảcáctậptinHTMLvàcáctậptinkhácđềuđặttrongcùng1thưmục. • ThuậnlợichoWebsitenhỏ,íttậptin,khôngcầnquantâmđếnđườngdẫn. b.TổchứcSitethưmụctheochứcnăng • Bêntrongthưmụcchính,tổchứccácthưmụcconchứacáctậptincónộidungliên quanvớinhau. • Tạithưmụcchínhchỉchứatậptinchỉmụcvàcáchìnhảnhcầnthiết.(thưmụcchính chứatrangchủ,mỗithưmụcconlà1hoặc1nhómcáctrangcon) c.TổchứcSitethưmụctheokiểutậptin • Bêntrongthưmụcchính,tổchứccácthưmụcconchứacáctậptincùngkiểu. +Thưmụcchínhchứatrangchủvàcácthưmụccon +1thưmụcconchứacáctrangHTML, +1thưmụcconchứacáctậptinhìnhảnh..... • Thuậnlợisửdụngchungtậptin,dễthaythếbổsungcáctậptinvàosite. d.TổchứcSitehỗnhợp KếthợpcáchtổchứcSitetheochứcnăngvàCáchtổchứcSitetheokiểutậptin. 4.Địachỉtươngđối&Địachỉtuyệtđối. a.Địachỉtuyệtđối Khithamchiếuđến1tậptinphảighiđầyđủđịachỉURL. http://ServerName/Đườngdẫn/Têntậptin VD:http://vietnamnet.vn/Tinkinhte/quocte/tin07.html This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb  Phần1:NgônNgữThiếtKếWebHTML  Biênso ạn:DươngThànhPhết  Trang17 b.Địachỉtươngđối. Khithamchiếuđến1tậptincùngthưmụctậptinchính:Têntậptin Khithamchiếuđến1tậptinkhácthưmụctậptinchính:Đườngdẫn/Têntậptin Ghichú:Sửdụng /đểchỉthưmụccấptrênthưmụcchứatậptinchính: VD:     Sẽghi: / /Images/Logo.jpg II.SỬDỤNGHÌNHẢNH 1.Kháiquát • Cáckiểutậptinhìnhảnhchophép:.jpg,gif,.png,.bmp • Sửdụnghìnhảnhcầncânnhắc:SLảnh/1trang,kíchthướcvàđộphângiải,nhằm cảithiệntốcđộtruycập. • PhảilưuhìnhảnhởvịtrínàođótrongthưmụcchínhcủaWebsite 2.Thiếtlậpảnhnềnchotrang • SửdụngthuộctínhBackgroundtrongthẻBODY <BODYBackground=“Têntậptin”Bgproperties=Fixed> Têntậptin:Làđịachỉtuyệtđốiortươngđốicủatậptinảnh Bgproperties=Fixed:Hìnhảnhmờbấtđộng VD:Bổsungthuộctínhảnhnềnvào1tranghtmlbấtkỳ.Giảsửtậptinảnhlưutrongthư mụcImages.TậptinHtmlưutrongthưmụcHtmls <BODYBackground=" /Images/Bgr06.JPG"> 3.ChènhìnhảnhvàotrangWeb <IMGSrc=“Têntậptin”Alt=“Câuchúthích”> Têntậptin:Làđịachỉtuyệtđốiortươngđốicủaảnh Câuchúthích:HiểnthịtrêntrìnhduyệtkhitrỏMousevàohình VD:<ImgSrc=" /Images/P02.jpg"> <ImgSrc=" /Images/P06.jpg"Alt=“ĐâylàBillGates"> Địnhkíchthướcảnhchèn <IMGSrc=“Têntậptin”Width=“n1”Height=“n2”> n1,n2:Làtỷlệ%sovớikíchthướcđốitượngchứanóhoặckíchthướctínhtheoPixel. VD: < IMSrc=" /Images/P03.jpg"Width="150"Height="100"> Ảnhchènkíchthướcrộng150Pixelcao100Pixel  <IMGSrc="Images/P03.jpg"Width=“30%"Height=“50%"> Ảnhchènkíchthướcrộng=30%chiềurộngcửasổ.50%Chiềucaocửasổ. T ậ p tin HTML T ậ p tin hình ả nh tham chi ế u : Logo.jpg : Logo.jpg: Logo.jpg : Logo.jpg This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb  Phần1:NgônNgữThiếtKếWebHTML  Biênso ạn:DươngThànhPhết  Trang18 Tạokhungviềnchoảnh <IMGSrc=“Têntậptin”Border=“n”> n:Độdàyđườngviền Canhlềhìnhảnh. <IMGSrc=“Têntậptin”Align=“Hướng”> Hướng: Top:PhầnđầuthẳnghàngvớidòngđầuVB. Middle:PhầngiữathẳnghàngvớidòngđầuVB. Bottom:PhầncuốithẳnghàngvớidòngđầuVB. Left:Biêntráiảnhcănthẳnglềtráitrang,VBbaoquanhbênphảiảnh. Right:Biênphảiảnhcănthẳnglềphảitrang,VBbaoquangbêntráiảnh. NếukhôngkhaibáomặcđịnhlàthuộctínhBottom VD:TạotậptinHTMvớinộidungnhưsau         III.THIẾTLẬPLIÊNKẾTTRONGTRANGWEB 1.Kháiquát • Cácsiêuliênkết(HyperLink)làcốtlõicủatậptinHTMLchophéptruycậpđếncác trangkháctrêncùngmáytínhhayởmáytínhkhác. • Tàiliệuliênkếtcóthểlàcáctậptin:Hìnhảnh,âmthanh,Multimedia,HTML... • KhiClickvàoliênkếtsựtruycậptạiđịachỉtruycậpsẽthựchiệntựđộng 2.Liênkếtcụcbộ(LocalLink)  LàliênkếtđếncáctàiliệuTrêncùngmáy.   <AHREF=“Địachỉliênkết”>Nhãnliênkết</A> VD: <AHREF=“/Htmls/Gioithieu.htm”>Giớithiệu</A> <HTML> <BODY> <H3Align=Center>Máytính"bótay"v ớitàisảncủaBillGates</H3> <ImgSrc="Images/Billgates.jpg"Align=RightWidth=120  Alt="BillGates(trái)vàT ổngthốngBồĐàoNha"Border=1> <PAlign=Justify> BillGates,ng ườisánglậpCôngtyphầnmềmMicrosoftvàlàngườigiàunhấtthếgiới,chobiếtcơ quanthu ếcủaMỹphảilưutrữcácdữliệutàichínhcủaôngvàomộtmáytínhđặcbiệt,bởitàisản c ủaôngquánhiều.<BR>Phátbiểutạimộthộinghịdo MicrosofttổchứcởLisbon,thủđôBồĐào Nha,ôngnóir ằngmộtmáytínhthôngthườngkhôngthểxửlýđúngcácsốliệutàichínhcủaông </P> </BOD Y>  This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb  Phần1:NgônNgữThiếtKếWebHTML  Biênso ạn:DươngThànhPhết  Trang19  Đến1vịtrítrêncùngtrangWeb <AHREF=“#Tênđích>Nhãnliênkết</A>  Khaibáođíchđến:  <ANAME=“Tênđích”>...</A> Ghichú:Tênđíchởbấtcứvịtrínàotrêncùngtậptin. VD:TạotậptinHTMvớinộidungnhưsau <HTML> <BODYBackground="Images/bg.jpg"Bgproperties=Fixed>  <AName="#Dau"><H3Align="center">CHƯƠNGTRÌNHĐÀOTẠO</H3></A>  1.Kỹthuậtviêntinhọc<BR>  <AHref="VD13.html">  2.ChuyênngànhWebsite</A> <HR>  <FontSize=4Color=Red>Kỹthuậtvintinhọc</Font><BR>  <AHref="#HP1">HọcphầnI</A><BR>  <AHref="#HP2">HọcphầnII</A><BR>  <AHref="#HP3">HọcphầnIII</A>   <OLType="I">  <AName="#HP1">  <LI>TinHọcCănBản   <OL>    <LI>Tổngquancấutrcmytính    <LI>HệđiềuhànhWindows&Internet   </OL></A>  <AName="#HP2">  <LI>TinHọcVănPhịng   <OL>    <LI>MicrosoftWord    <LI>MicroSoftExcel   </OL></A>  <AName="#HP3"> <LI>TinHọcQuảnLý   <OL>    <LI>MicrosoftAccess    <LI>MicroSoftPowerPoint   </OL></A>  </OL></P>  <Palign=Right><AHref="#Dau">Đầutrang</A></P> </BODY> </HTML>  This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb  Phần1:NgônNgữThiếtKếWebHTML  Biênso ạn:DươngThànhPhết  Trang20 3.Liênkếttừxa(RemoteLink) Làliênkếtđếntàiliệulưutrữtrênmáykhác.  Liênkếtđến1địachỉURL < AHREF=“http://URL”>Nhãnliênkết</A> VD: <AHREF=“http://www.vietnamnet.vn”>Websitetintứcviệtnam</A>  Liênkếtđến1địachỉEmail <AHREF=“Mailto:ĐịachỉEmail”>Nhãnliênkết</A> VD: <AHREF=“Mailto:phetcm@yahoo.com”>GởiMailchotôi</A> Sẽmởchươngtrìnhmailmặcđịnhđểsoạnvàgửithư. 4.Dùnghìnhảnhlàmnhãnliênkết. <AHREF=“http://URL”><ImgSrc=“Tậptinảnh”></A> VD: <AHREF=“http://www.vietnamnet.vn”><ImgSrc= /Images/vietnamnet.jpg></A> 5.Mởliênkếttrong1cửasổriêng. MặcđịnhcácliênkếtđượcmởtrêncửasổhiệntạiĐểmở1cửasổriêngthìsửdụng: <AHREF=....TARGET=“_Blank”>Nhãnliênkết</A> VD:<AHREF=“http://www.vietnamnet.vn”Targer=“_Blank”> <ImgSrc= /Images/vietnamnet.jpg></A> VD:TạotậptinHTMvớinộidungnhưsau            <HTML><BODYBackground="Images/Bgr07.JPG"Bgproperties=FixedLink="Black"link="Blue"> <PAlign="center"> <FontSize=4Color="BLUE"><B>DANHB ẠWEBSITE</B></Font> </P> <DL> <DT><B>TinT ức</B>  <DD><AHref="http://www.vietnamnet.vn">Tint ứcviệtnam</A>  <DD><AHref="http://www.Tuoitre.com.vn">Botu ổitrẻ</A> <DT><B>Gi ảitrí</B>  <DD><AHref="http://www.nhacso.net“target="_balnk">Nh ạcsốOnline</A>  <DD><AHref="http://www.ngoisao.net“target="_balnk">Gi ớithiệungơisao</A> </DL> <B>Link ếtquảngco</B><BR> <AHref="http://www.echip.com.vn"target="_balnk"> <ImgSrc="Images/echip.jpg"width="130"heigh="60"></A> <AHref="http://www.vietnamnet.vn"target="_balnk"> <ImgSrc="Images/vnnet.jpg"width="130"heigh="60"></A><HR> Linh ệ:<AHref="Mailto:phetcm@yahoo.com">Gởimail</A> </BODY></HTML> This is trial version www.adultpdf.com . <Palign=Right><AHref="#Dau">Đầutrang</A></P> </BODY> </HTML>  This is trial version www.adultpdf.com Bài Giảng Môn Thi t Kế Web  Phần1:NgônNgữ Thi t Kế Web HTML  Biênso ạn:DươngThànhPhết  Trang 20  3.Liênkếttừxa(RemoteLink) Làliênkếtđếntàiliệulưutrữtrênmáykhác. . <LI>Côngngh ệASP.Net </OL> </BODY> </HTML>  This is trial version www.adultpdf.com Bài Giảng Môn Thi t Kế Web  Phần1:NgônNgữ Thi t Kế Web HTML  Biênso ạn:DươngThànhPhết  Trang15   4.DanhSáchLồngNhau Kếthợpcácthẻ<UL>,<OL>,<LI>đểlậpdanhsáchlồngnhau VD:TạotậptinHTMvớinộidungnhưsau           . </OL> </OL> </BODY></HTML>  This is trial version www.adultpdf.com Bài Giảng Môn Thi t Kế Web  Phần1:NgônNgữ Thi t Kế Web HTML  Biênso ạn:DươngThànhPhết  Trang16 Chương03 TỔCHỨCWEBSITE, S ỬDỤNGHÌNHẢNH, THI TLẬPLIÊNKẾT  o