Upload
hieu3210
View
220
Download
1
Embed Size (px)
DESCRIPTION
Hướng dẫn tạo Template cho Joomla...
Citation preview
Tm hiu v Responsive Web Design, Fluid Grids, Fluid Image v CSS3 Queries p dng to TemplatechoJoomla3
T cc trnh duyt in thoi n netbook v my tnh bng (tablets), ngi s dng s gh thm site t mt s lng ln cc thit b v trnh duyt. Bn sn sng thit k trang web ca mnh? Lm th no thit k trang web hin th p hn v ph hp hn trn tt c cc trnh duyt ca cc thit b khc thay v ch hin th ph hp trn mn hnh desktop ca my tnh (hoc phi thit k nhiu chng loi web cho tng thit b) l cu hi cn phi tr li. Nhng cng ngh nh CSS v cc nguyn tc thit k (bao gm fluid grids, flexible image v media queris) s em li nhng cng ngh gip chngtalmnniu
1. ResponsiveWebDesignResponsive Web Design l thit k web ph hp vi cc kiu mn hnh khc nhau, trn cc thitbkhcnhauvkchcmnhnh,trngthimnhnh(LandscapehayPortraint).
Hin nay trn th trng cng ngh c rt nhiu cc thit b vi mi loi kch c khc nhau, vic to ra mt trang web ph hp vi tt c cc thit b trn l hon ton cn thit. Do Responsive Web Design c xut, khi nim ct li ca tnh nng ny c th hin trong3tnhnngcngngh(ltritimcaResponsiveWebDesign):
1. Mediaqueriesandmediaquerylisteners 2. Aflexiblegridbasedlayoutthatusesrelativesizing 3. Flexibleimagesandmedia,throughdynamicresizingorCSS
ResponsiveWebDesignyucuttc3tnhnngtrntonnmttrangwebphhp.
2. FluidGridsiu quan trng trc tin l phi bit Fluid Grids l g trc khi bt u i vo thit k. Tt nht hiu c, chng ta tham kho li gii ca Wikipedia v Fluid (Cht lu): A fluid is a substance that continually deforms (flows) under an applied shear stress Wikipedia tm dchl:Mtdngchtcthchusbindnglintcditcdngcamtngsutct.
Trong thit k web th: fluid s c thit k hoc b tr v cn ng sut ct s l cc kch thc ca mn hnh hoc kch thc ng dng ca ngi s dng. Bt k thit b hay kch thc mn hnh l g, cc thnh phn trong thit k s bin dng p ng vi mi trng ngisdng.
Chng ta c th hnh dung mt mng li Fluid nh sau, mt mn hnh c th chia lm 12 phnvmiphnl1nvvtasthitkvbtrtrangwebtheonvnhvy:
V trong mi phn da vo n v ta c th chia tip ra cc n v nh hn. V d nh hnhdiy(utinchiatranglm12nv)sau:
hng trn ta chia trang lm i thnh 2 ct mi ct 6 n v trang. Trong tng ct mi talichiatipthnh12nvrichialm4ctmict3nv.
hng di ta chia mn hnh l 3 ct mi ct 4 n v. Trong tng ct mi ta li chia tipthnh12nvrichialm3ct,mict4nv.
C nhiu cch chia trang thnh cc n v ct c th chia lm 2, 3,, 12, t c nhngktqunhthitkmongmun:
3. FluidImage(FlexibleImages)Fluid Image l mt quy tc thit k: khng cho hnh nh vt qu chiu rng ca container chanvhnhnhcththayitheokchthccacontainerchan.
VtinttlnhltnhnngmaxwidthcaCSShtriu:
img{
maxwidth:100%
}
Quy tc ny ln u tin c khm ph bi Richard Rutter. N s cho php hnh nh c th hin th ti bt c kch c no, min l n hp hn so vi container cha n. Nu nh xy ra vichnhnhlnhncontainerchanthmaxwidth:100%scnhnvongvtr.
Nhng trnh duyt hin i ngy nay pht trin ti mc cc hnh nh c th thu nh hoc phngtomtlhnhnhvncnnguynvnvscnt.
Chng ta c th t chiu rng c nh cho image bng tnh nng width: ?px nhng mt khi image c chiu rng ln hn container cha n th maxwidth s t ng iu chnh v chiu rngscchnhlichongbngvichiurngcacontainer.
Thc t th, chng ta c th p dng tnh nng ny cho tt c cc loi media khc (image, embed,object,video)vsdnggingnhsau:
img,embed,object,video{
maxwidth:100%
}
Lu : vi trnh duyt Internet Explorer 6 v cc phin bn IE trc khng h tr maxwidth,nhngktIE7trvsauhtrytnhnngmaxwidth.
4. CSS3QueriesCSS2 tr gip mt phn ca media type (Screen, Print,...). V d vi Print Type th mt ti liu c th s dng font sansserif hin th trn 1 mn hnh v s dng font serif in. Media queries trong CSS3 (CSS3 Queries) l m rng cc chc nng ca media type bi vic cho php s dng cc biu thc cho tng media type kim tra mt s iu kin v p dng nhng stylesheet khc nhau cho tng iu kin c th. V d, chng ta c th c 1 stylesheet cho kiu hin th rng v mt kiu stylesheet c bit khc cho thit b di ng. S mnh m ca n l cho php chng ta thit k ph hp vi cc thit b khc nhau m khng lmthayinidungcatiliu.
1. Media Type TrckhiisuvoMediaQuerychngtasxemcnhngloiMediaTypenothngquabngsau:
Ch : Tn loi media khng phn bit ch hoa ch thng (not case-sensitive)
Media Type M t
all S dng cho tt c cc thit b (all media type devices)
aural S dng cho cc thit b m thanh v li ni (speech and sound synthesizers)
braille S dng cho cc thit b phn hi ch ni (braille tactile feedback devices)
embossed S dng cho cc thit b in ch ni (paged braille printers)
handheld S dng cho cc thit b nh hoc cm tay (small or handheld devices)
print S dng cho in n (printers)
projection S dng cho cc d n thuyt trnh, ging nh l slide
screen S dng cho cc mn hnh my tnh (computer screens)
tty S dng cho cc thit b s dng li k t c nh (like teletypes and terminals)
tv S dng cho cc thit b tivi (television-type devices) 2. Media Query
Chng ta s tm hiu Media Query qua cc v d hiu r v cch lm vic ca media query:
Vd1:
Giithchvd:
Nukiumedialmnhnh(screen)thpdngstylesansserif.css Nukiumedialin(print)thspdngstyleserif.css
Vtrongsansserif.cssscnidunggingnhsau,tngtlcaserif.css:
@mediascreen{
*{fontfamily:sansserif}
}
Vd2:
V d ny biu th rng mt style sheet c tn l example.css s c p dng ti thit b c chakiulscreen(mnhnh)vchatnhnng(nphil1mnhnhmu).
Vd3:
@importurl(color.css)screenand(color)
V d ny c kiu khai bo theo cch khc @importrule, l mt biu thc so snh l true hoc false. Nu tt c ng (tc l mn hnh mu) th s s dng import v s dng file color.css.
Vd4:Haionkhaibosausctruyvnmediaginghtnhau
@mediaalland(minwidth:500px){}
@media(minwidth:500px){}
Gingvitruyvnmediasau
@media(orientation:portrait){}
@mediaalland(orientation:portrait){}
V d 5: Trong c php truy vn media, du phy ( , ) biu th mt logical OR, trong khi and biuthchologicalAND:
@mediascreenand(color),projectionand(color){}
Mt vi media querie c th kt hp to thnh mt danh sch truy vn media. Mt du phy ( , ) phn tch danh sch truy media. Nu mt hoc nhiu truy vn media s c phn tch bi du phy, nu 1 hoc nhiu truy vn l ng th danh sch tr v true, ngc li th false.
V d 6: Nu danh sch truy vn media l rng (empty) th n tr v gi tr true tc l lun lunthchintrong{}truyvnnhdiy:
@mediaall{}
@media{}
Vd7:SdngtkhanotbiuthchologicalNOT:
Vd8:Sdngtkhaonlypstylesheetcho1sitngxcnh:
V d 9: C php truy vn media c th c s dng vi HTML, XHTML, XML, @import v @mediarulecaCSS3
@importurl(ex.css)screenand(color),projectionand(color)
@mediascreenand(color),projectionand(color){}
Vd10:Xthaitruyvnmediasau:
@mediaall{body{background:lime}}
@mediaexample{body{background:red}}
Th ch c truy vn u tin l ng bi v truy vn th 2 c kiu media khng tn ti l example do cu trc truy vn media l @media media_type { } vi iu kin media_typecnhnghatrongCSS3.
3. Media features
Media feature bao gm 12 feature: Width Color Height Colorindex Deviceheight Monochrome Orientation Resolation Aspectratio Scan Deviceaspectratio Grid
Chng ta s i su vo tng loi media feature v cc v d c th
1. Width: Gitr:|Quynhkhngthm pdngvi:kiumediacthnhnthyvoc(visualandtactilemediatypes) Chpnhncctintmaxvmin
Tnh nng width m t chiu rng vng hin th trn thit b u ra. V nh chiu rng ca trnhduyt.
Vd3.1:Truyvnmediasaussdngstylesheetex.csskhiinvichiurnghn25cm:
V d 3.2: Truy vn media sau s s dng style sheet cho thit b c chiu rng ca ch xemnmtrongkhong400v700pixels
@mediascreenand(minwidth:400px)and(maxwidth:700px){}
V d 3.3: Truy vn media sau s s dng style sheet khi s dng mn hnh hoc thit b cmtaycchiurngcachxemlnhn20em(emlnvgitrcafontsize)
@mediahandheldand(minwidth:20em),screenand(minwidth:20em){}
2. Height: Gitr:|Quynhkhngthm pdngvi:kiumediacthnhnthyvoc Chpnhncctintmaxvmin
Tnh nng height m t chiu cao vng hin th trn thit b u ra, s dng height nh width.Vdnhchiucaocatrnhduyt.
3. Devicewidth: Gitr:|Quynhkhngthm. pdngvi:kiumedianhnthyvoc Chpnhncctintmaxvmin
Tnh nng: devicewidth m tat chiu rng ca b mt thit b u cui. V d nh chiu rngcamnhnh(yninchiurngvtlthctcathitb)s
Vd3.4:Vdnyspdngstylesheetchomnhnhcchiurnglng800pixel
@mediascreenand(devicewidth:800px){}
4. Deviceheight: Gitr:|Quynhkhngthm pdngvi:kiumedianhnthyvoc Chpnhncctintmaxvmin
Vd3.5:Vdnyspdngstylesheetkhimnhnhcchiucaongbng600px
5. Orientation: Gitr:portrait|landscape pdngvi:kiumediacnhbitmap Khngccctint
Tnh nng orientation s l portrait khi chiu cao cao hn hoc bng vi chiu ngang. V ngclisllandscape
Vd3.6:
@mediaalland(orientation:portrait){}
@mediaalland(orientation:landscape){}
6. Aspectratio: Gitr: pdngvi:kiumediacnhbitmap Chpnhncctintmaxvmin
Tnhnngaspectratiosgipphthintlcagitrchiurngvichiucaocamedia.
7. Deviceaspectratio: Gitr:
pdngvi:kiumediacnhbitmap Chpnhncctintmaxvmin
Tnhnngdeviceaspectratiosgipphthintlchiurngvichiucaocathitb
V d 3.7: Nu mt thit b mn hnh c s pixel ngang l 1280 v chiu dc l 720 (thng gilmnhnh16:9),4ontruyvnmediadiyungvithitb:
@mediascreenand(deviceaspectratio:16/9){}
@mediascreenand(deviceaspectratio:32/18){}
@mediascreenand(deviceaspectratio:1280/720){}
@mediascreenand(deviceaspectratio:2560/1440){}
8. Color: Gitr: pdngvi:kiumedianhnthyc Chpnhncctintmaxvmin
Tnh nng color pht hin s thnh phn bit mu ca thit b u ra. Nu thit b khng l mtthitbmuthgitrlzero(0)
Quynhkhngthm
Vd3.8:Haitruyvnmediasauspdngstylesheetchottcccthitbmu
@mediaalland(color){}
@mediaalland(mincolor:1){}
V d 3.9: Truy vn media sau s p dng style sheet cho cc thit b mu c bng hoc ln hn2thnhphnmusc:
@mediaalland(mincolor:2){}
Mt thnh phn mu c i din bi mt s lng bit v tnh nng color tr v s lng bitnhnhtcsdng.
Vd3.10:Chomtvd:
Nu mt h thng 8bit mu thnh phn: mu (R) vi 3 bit s dng, mu xanh dng (G) vi 3 bit s dng v xanh da tri (B) vi 2 bit s dng, th tnh nng color strvgitrl2.
Trong mt thit b m mu sc c lp ch mc (index) th s bit nh nht ca thnh phnmusctrongbngtcu(lookuptable)csdng.
9. Colorindex: Gitr: pdngvi:kiumedianhnthy Chpnhncctintmaxvmin
Tnh nng colorindex pht hin s ch mc mu trong bng my ca thit b u ra. Nu thitbkhngsdngmtbngmuthgitrtrvlzero(0).
V d 3.11: y l 2 cch m t style sheet p dng ti tt c cc thit b c ch mc mu (colorindex)
@mediaalland(colorindex){}
@mediaalland(mincolorindex:1){}
Vd3.12:Truyvnmediachothitbmuvinhiuhnhocbng256chmcmu
10. Monochrome: Gitr: pdngvi:kiumedianhnthy Chpnhncctintmaxvmin
Tnh nng monochrome pht hin s lng bit ca trong pixel ca thit b en trng. Nu thitbkhnglmtthitbentrngthgitrtrv0.
Vd3.13:Haicchbiuthstylesheetchottcccthitbentrng
@mediaalland(monochrome){}
@mediaalland(minmonochrome:1){}
Vd3.14:Truyvnmediachothitbentrngvinhiuhn2bittrn1pixel
@mediaalland(minmonochrome:2){}
Vd3.15:Truyvnmediachotranginmuv1stylesheetkhcchoinentrng
11. Resolution: Gitr: pdngvi:kiumediacnhbitmap Chpnhncctintmaxvmin
Tnh nng resolution pht hin phn gii ca thit b u ra, v nh mt pixel. Khi truy vn n thit b c pixel khng vung th truy vn minresolution v maxresolution phi csdngthayth.
Vd3.16:Truyvnmediachoccthitbcphngiilnhn300imtrn1inch
@mediaprintand(minresolution:300dpi){}
Vd3.17:Truyvnmediachoccthitbcphngiilnhn118imtrn1centimet
@mediaprintand(minresolution:118dpcm){}
12. Scan: Gitr:progessive|interlace pdngvi:kiumedialtivi Khngccctintmaxvmin
Tnhnngscanphthinqutrnhqutcathitburaltivi
Vd3.18:Truyvnmediachothitbtivicchqutlprogessive
@mediatvand(scan:progressive){}
13. Grid: Gitr:0|1(Ch0v1lgitrhpl) pdngvi:kiumedianhnthyvoc
Tnh nng media s dng truy vn n thit b u ra l grid hay bitmap. Nu thit b u ra c c s l grid (v d nh l tty mt thit b u cui hoc handheld mt in thoi chhinthchvimtfontcnh)thgitrtrvl1.Ngclithtrv0.
Vd3.19:
@mediahandheldand(grid)and(maxwidth:15em){}
@mediahandheldand(grid)and(devicemaxheight:7em){}
4. Kt lun: Media Queries em n cho chng ta cch thc thit k web theo chun tt hn v tin lihnchonhiuthitb,nhiuchngloikhcnhau.Nhvdsau(hnhdi)chotathy:
ViLargesize:thanhiuhngphatrnv1hnglnh ViMediumsize:thanhiuhngbntri,3ctlnh ViSmallsize:thanhiuhngphatrn,khngcnhlogov3cthinthnh
Kt lun: l vic lm rt tuyt vi i vi thit k web, trang web hin th p hn trn mi thit b. Nhng cng cn ch rng c s iu chnh stylesheet cho thit b di ng khng c ngha l site ca chng ta s c iu chnh trn thit b di ng. iu chnh ng ngha
chothitbdingthnhtrnsitecngcncctloadngkchcmongmun.
5. ToTemplatechoJoomla31. Joomla Template l g?
Joomla Template l mt gi bao gm cc file PHP, HTML, CSS, JS (Javascript),... v cc tm hnh, nh, biu tng, video, flash km theo to nn giao din (b cc v hnh hi) ca Website Joomla.
y l th mc template beez3 mt template mc nh ca joomla 3.0
y l mt th mc template ti gin
Thc cht Joomla Template dng to b cc v hnh hi trang do nhng thnh phn c bn bt buc phi c l nhng file to nn b cc ca template (index.php) cn nhng thnh phn khc ch l b tr cho file b cc. Mt thnh phn khng km quan trng l (templateDetails.xml)y l file xml nh ngha nhng thnh phn c trong template v nhng thng tin ci t.
Di y l list chc nng ca cc file v th mc beez3
toc 1 Joomla Template chng ta cn phi bit to mt Basic Template. T Basic Template ta s k tha cc tnh nng ca Joomla hon thin thnh mt Joomla Template
2. Cc bc to mt Joomla Template Bc1:Thitkbcctrang
y l bc to b cc trang trn giy, phc tho trn nn ha hnh dung ra hnhhitrangwebmunthhinnhthno?
binystotemplatetheophcthosau
Bc2:Toccthmc
TothmcchaTemplate,ttnbtk TothmcCSS:chaccfilecss TothmcJS:chaccfilejavascript Cthtothm1sthmckhc
Bc3:Thmccfilehtml,php,css,rng
Index.html (Thc cht l cc file rng nhm trnh vic view cc file trong th mc template)
Index.php(Filebcctrang,thnhphnquantrngnht) css/style.css templateDetails.xml (File nh ngha thnh phn ca Template v cu hnh cc thng s
citchoJoomlaTemplate)
Bc4:Thmnidungchoccfile Vdtofileindex.phptheobccthitk
LOGO BANNER MENU CONTEXT FOOTER
NidungfileStyle.css .container { width:90% margin:auto } .logo { width:10% float:left backgroundcolor:yellow } .banner { width:90% float:left backgroundcolor:green } .menu { backgroundcolor: orange } .context { backgroundcolor:#E1E2E4 } .footer
{ backgroundcolor:#E3E2E5 }
NidungfiletemplateDetails.xml
Mytemplateforjoomla3.0 4/4/2013 VuQuynh [email protected] http://www.facebook.com/vuvanquynh Copyright(C)2013 Changbiet 1.0 Template css index.html index.php templateDetails.xml debug position0 position1 position2 position3 position4 position5 position6 position7 position8 position9 position10 position11 position12 position13 position14 Giithchfilexml
Ccthname,creationDate,author,authorEmail,authorUrl,copyright,license,version,desciptionlnhngthmtchitittemplate
Cpthmtccthmc,cctptinnmtrongthmcgccatemplate
Cpththhinccvtrkhaibotrntemplatevnscjoomlasdngchoviccpphtccvngvtr
Bc5:ThmcclnhphpcaJoomlachoindex.php
Saukhithitktheoccbctrntathuc1templatechnhdngnhsau:
Bc6:ThmcclnhphpvoTemplate
Nu nguyn dng Template ci t th Joomla s khng nhn din c cc v tr v ccfilecssnhnghado:
Bcnylbcrtquantrng. V Joomla Template s hin th chun khi chng ta thm cc lnh php ng v ph hp
viccchuncaJoomlaara. Trctinchngtatmhiuvcclnhphpgnvojoomla 1. s t v tr mun hin th cc thng bo cho ngi
dng, thng thng chng ta s dng dng ny mt v tr bt k trong thn trang
2. s t v tr mun hin th cc component, thng thngnntdngny1lntrongthntrang
3. s t v tr mun hin th cc module, c th xut hin nhiu nitrongthntrang
4. s t trong th v thm cc dng php tng t nhsauutrangnhngccfilecss(chnitfilecsskhilinkbngJoomla)
Trong Joomla 3 c sn bootstrap trong /media/jui/css/bootstrap/ nn dng khai bo css trnlunngtrongJoomla3.
dng khai bo css th 2 s ng khi file style.css t trong th mc css ca template, gingnhtemplatechngtaanglm.
Cthpdngluncctnhnngcabootstrapreponsivevittemplate.
Sauqutrnhnysthucnidungnhsau:
LOGO
BANNER
MENU
CONTEXT
FOOTER
Bc7:NnzipthmcTemplate
Bc8:UploadJoomlaTemplate
Bc8:EditTemplate
Qu trnh ny c th thc hin bng cch browser thng vo th mc ci t template chnhsavbxung,nnsaolulithmccnchnhsatrckhithchin.
ThamKhohttp://webdesignerwall.com/tutorials/css3mediaqueries
http://www.w3.org/TR/css3mediaqueries/
http://www.w3schools.com/css/css_mediatypes.asp
http://alistapart.com/article/fluid-images
http://clagnut.com/sandbox/imagetest3/
http://www.responsivegridsystem.com/
http://www.1stwebdesigner.com/tutorials/fluid-grids-in-responsive-design/
http://vi.wikipedia.org/wiki/Ch%E1%BA%A5t_l%C6%B0u
http://en.wikipedia.org/wiki/Fluid
http://www.websitedep.com.vn/blog/thiet-ke-web/joomla-template-la-gi.html