Convert psd to html5

  • Published on
    17-Aug-2015

  • View
    15

  • Download
    0

Embed Size (px)

Transcript

  1. 1. Convert PSD to HTML5&CSS3 Ti liu tham kho Forum: http://nhatnghe.com/forum --> ha Facebook: http://facebook.com/dohoa247 Video: youtube.com/lopdohoa Mail: tulamvan@gmail.com Mobi: 090 7 799 627
  2. 2. TRUNG TM O TO MNG MY TNH NHT NGH I TC O TO CA MICROSOFT TI VIT NAM 105 B Huyn Thanh Quan, Q3, TP. HCM www.nhatnghe.comTel: 3.9322.735 0913.735.906 Fax: 3.9322.734 Convert PSD to HTML5/CSS3 Mt s th HTML5 Chn nhc mp3 thay cho Flash Chn video mp4 khng cn dng Flash Kim tra thuc tnh form bng html5 khng dung Javascript Kim tra email 2 Kim tra s nhp
  3. 3. TRUNG TM O TO MNG MY TNH NHT NGH I TC O TO CA MICROSOFT TI VIT NAM 105 B Huyn Thanh Quan, Q3, TP. HCM Tel: 3.9322.735 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com Phin Bn Th Nghim Lu Hnh Ni B Kim tra URL Tham kho thm: http://w3schools.com/html5/ Lm vic vi CSS3 nh ngha cc th HTML5 l cc block. header, footer, section, aside, nav, article { display: block; } Style ca Introduction #intro { position: relative; margin-top: 66px; padding: 44px; background: #467612 url("images/intro_background.png") repeat-x; /* Them thuoc tinh (TT) trinh duyet vao TT background-size */ -webkit-background-size: 100%; /* Safari browsers */ -o-background-size: 100%; /* Opera browsers */ 3
  4. 4. TRUNG TM O TO MNG MY TNH NHT NGH I TC O TO CA MICROSOFT TI VIT NAM 105 B Huyn Thanh Quan, Q3, TP. HCM Tel: 3.9322.735 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com Convert PSD to HTML5/CSS3 /* Them thuoc tinh (TT) trinh duyet vao TT border-radius */ -moz-border-radius: 22px; /* Firefox browsers */ -webkit-border-radius: 22px; /* Safari browsers */ } Ti id intro ny, chng ta nhn thy c 2 thuc tnh mi l: background-size v boder-radius. Background-size: c s dng thit lp kch c ca hnh nn so vi box ( y l intro), n s gin n theo rng ca box. Boder-radius: c s dng nh ngha bn knh ng trn ca gc bo khung vin ca id intro, thit lp cc thng s cho thuc tnh ny, c th lm cho gc bo ng vin ca cc bn tr nn trn tra hn. y u l cc thuc tnh CSS3. (-moz, -webkit) l thng bo cho trnh duyt tng ng vi n hiu c. V cc thuc tnh CSS 3 hin nay cn rt t trnh duyt h tr, nn hu ht cc thuc tnh CSS 3 u phi thm vo cc thuc tnh trnh duyt vo trc n. Style ca Content v Sidebar #content { display: table; } #mainContent { display: table-cell; width: 620px; padding-right: 22px; } 4
  5. 5. TRUNG TM O TO MNG MY TNH NHT NGH I TC O TO CA MICROSOFT TI VIT NAM 105 B Huyn Thanh Quan, Q3, TP. HCM Tel: 3.9322.735 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com Phin Bn Th Nghim Lu Hnh Ni B aside { display: table-cell; width: 300px; } Khu vc mainContent v sidebar theo thit k l s nm cnh nhau. Thng thng theo truyn thng chng ta s s dng thuc tnh float nh ngha n nm trn cng 1 dng, nhng trong CSS3, chng ta s s dng table. Trong CSS 3, thuc tnh display c gi tr table dng h tr x l vic chia bng, ct, v dng, c th chia dng v ct bng CSS v d nh hnh hn cho nhng bn khng quen vi float . y s thit lp display:table v display:table-cell c ngha l nh ngha#content l 1 bng, #mainContent v aside s tng ng l 1 v nm trn cng 1 dng, thuc bng #content. column-count: s dng cn chia. column-gap: khong cch gia 2 ct. HTML

    Lorem ipsum dolor sit amet...

    Pellentesque ut sapien arcu...

    Vivamus vitae nulla dolor...

    ...
    CSS 5 .blogPost div {
  6. 6. TRUNG TM O TO MNG MY TNH NHT NGH I TC O TO CA MICROSOFT TI VIT NAM 105 B Huyn Thanh Quan, Q3, TP. HCM Tel: 3.9322.735 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com Convert PSD to HTML5/CSS3 6 /* Them thuoc tinh (TT) trinh duyet vao TT Column-count */ -moz-column-count: 2; -webkit-column-count: 2; /* Them thuoc tinh (TT) trinh duyet vao TT Column-gap */ -moz-column-gap: 22px; -webkit-column-gap: 22px; } Thc hnh HTML5 & CSS3 Bo gc hnh trn web vi CSS3 Trong thit k web, c bit l cc trang bn hng vic trnh by sn phm n tng s thu ht khch hng chn mua sn phm. Cc bn c th lm ni bt sn phm bng nhiu cch khc nhau trong vic trnh by hnh nh c bo gc rt hay c chn la, nu bn thm hiu ng bng th cng n tng hn. C 2 cch bo gc cho nh trn web: Cch 1: S dng photoshop thit k hnh, cch ny hay ch ph hp cho mi trnh duyt v th c s dng ph bin tnh n thi im ti vit bi vit ny (thng 06/2012). Tuy nhin cch ny s lm mt nhiu thi gian ca bn y. Cch 2: S dng hon ton bng code CSS3, vi cch ny s tit kim thi gian cho cc bn hn. Tuy nhin n ch th hin trn cc trnh duyt mi (IE 10.0, firefox, Chrome,), u ny bn cng ng qu bn tm v cc trnh duyt ang cp nht lin tc v hon ton min ph. Yn tm s dng nha bn. Trong bi vit ny ti s minh ha vi cc bn cch trnh by sn phm cho trang web bn hng (bn hoa ti) vi hnh nh c bo gc v bng rt chuyn nghip ch vi CSS3. Bc 1: Trc khi thc hin bn download source bi thc hnh y, gii nn folder trn Desktop (hoc bt c u bn mun) ri to site bng dreamweaver, y ti minh ha bng bng Dreamweaver CS5.5. Bn double click vo file spmoi.html m ra nh sau:
  7. 7. .com TRUNG TM O TO MNG MY TNH NHT NGH I TC O TO CA MICROSOFT TI VIT NAM 105 B Huyn Thanh Quan, Q3, TP. HCM Tel: 3.9322.735 0913.735.906 Fax: 3.9322.734 www.nhatnghe Phin Bn Th Nghim Lu Hnh Ni B y ti trnh by sn cho cc bn mt khung
    cha tt c sn phm, v trnh by 1 sn phm vi hnh minh ha, tn sn phm c class=tensp, gi sn phm c class=giasp, nu xem ch thit k cc bn thy cc thnh phn cha c nh dng nh sau: Bc 2: 7 Cng vic tip theo ca bn l copy > Paste thnh nhiu sn phm (6,9, 12,.. ty bn). ng thi thay i hnh, tn sn phm, gi tng ng. y ti s copy thm 5 sn phm na minh ha.
  8. 8. TRUNG TM O TO MNG MY TNH NHT NGH I TC O TO CA MICROSOFT TI VIT NAM 105 B Huyn Thanh Quan, Q3, TP. HCM Tel: 3.9322.735 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com Convert PSD to HTML5/CSS3 8 Nu chuyn sang mn hnh thit k th bn on c cc sn phm c trnh by nh th no ri phi khng, d nhin chng cha c nh dng nn ch l mt ct t trn xung xem chng ging trang web t no c.
  9. 9. O TO MNG MY TNH NHT NGH TO CA MICROSOFT TI VIT NAM anh Quan, Q3, TP. HCM 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com TRUNG TM I TC O 105 B Huyn Th Tel: 3.9322.735 Phin Bn Th Nghim Lu Hnh Ni B Bc 3: By gi l lc cc bn nh dng cho cc sn phm ca mnh bng CSS, cc bn phi ch n tn ca tng i tng nha: - div cha tt c sn phm: class=spmoi - Hnh sn phm: class=sp - Tn sn phm: class=tensp 9 - Gi sn phm: class=giasp
  10. 10. O TO MNG MY TNH NHT NGH TO CA MICROSOFT TI VIT NAM anh Quan, Q3, TP. HCM 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com TRUNG TM I TC O 105 B Huyn Th Tel: 3.9322.735 Convert PSD to HTML5/CSS3 Trc ht ti s quy nh khung cha tt c cc sn phm c chiu rng: 450px (.spmoi), div cha mi sn phm c chiu rng: 150px (.spmoi div) v canh tri sn phm sp xp theo dng v ct. Tng t ti s nh cho tn sn phm in m, size:18px, mu text xanh m ( .tensp), tng t bn c th nh dng cho gi sn phm. Bc 4: 10 Gi n lc bo gc v to bng cho hnh sn phm
  11. 11. TRUNG TM O TO MNG MY TNH NHT NGH .com I TC O TO CA MICROSOFT TI VIT NAM 105 B Huyn Thanh Quan, Q3, TP. HCM Tel: 3.9322.735 0913.735.906 Fax: 3.9322.734 www.nhatnghe Phin Bn Th Nghim Lu Hnh Ni B Bn thm code nh sau bo gc cho cc sn phm: Trong : border-radius: 10px; > bo gc trn u 10px cho cc gc ca hnh. border: solid 1px #666666; > nh kiu ng vin, size, v mu cho ng vin. box-shadow: 2px 2px 2px #FF0000; > Cc tham s theo th t: V tr bng theo trc x, y, size v tham s cui cng l mu ca bng . By gi bn hy nhn F12 xem thnh qu c mnh trn trnh duyt (nh l xem bng trnh duyt Firefox, Chrome, Opera hoc IE version mi nha). 11 n tng khng cc bn, hy bt tay lm th mi bit mnh tht s am m!@?
  12. 12. TRUNG TM O TO MNG MY TNH NHT NGH I TC O TO CA MICROSOFT TI VIT NAM 105 B Huyn Thanh Quan, Q3, TP. HCM Tel: 3.9322.735 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com Convert PSD to HTML5/CSS3 To nn chuyn sc cho web vi CSS3 m khng dng hnh to nn chuyn sc cho web bn c 2 cch thc hin: Cch 1: Theo phng php c in th cc bn s s dng hnh v t photoshop kt hp vi CSS, cch ny tuy mt thi gian nhng hay ch xem c trn mi trnh duyt. Cch 2: Dng code CSS3, cch ny mt thi gian (Copy code > Paste l xong) web duyt nhanh hn, tuy nhin ch chy tt trn cc trnh duyt mi, cc trnh duyt c b tay. Vi cc bn lm web ti tin chc bn bit cch 1 v vy hm nay ti gii thiu vi cc bn cch to nn chuyn sc cho web m khng cn dng hnh (Cch 2), cch ny gip web ca bn chy nhanh hn, lm rt n gin (Copy code > paste). Tuy nhin n khng h tr cc trnh duyt c c bit l IE phi t Version 10.0+, Firefox, Opera, Chrome th OK. No ta bt u nha: Bc 1: To file *.html mi bng bt c phn mm son tho web no bn mun, ti dng Dreamweaver CS5. phn code CSS bn copy > Paste on code sau vo th Phn ni dung web bn t lo nha, mun vit g cng c. 12 Sau khi c ni dung bn nhn F12 xem trn trnh duyt (nh dng Firefox th nghim nha, dng IE l b tay lun nha bn).
  13. 13. T NGH T NAM hatnghe.com TRUNG TM O TO MNG MY TNH NH I TC O TO CA MICROSOFT TI VI 105 B Huyn Thanh Quan, Q3, TP. HCM Tel: 3.9322.735 0913.735.906 Fax: 3.9322.734 www.n Phin Bn Th Nghim Lu Hnh Ni B Qu p ng khng no, chng cn dng ci hnh no c. Trong mu chuyn sc c 3 tham s: - top: kiu t linear thng t trn xung (C th s dng: left, right, bottom) - #F9F: mu 1 - #FFF: mu 2 - repeat-x: mu chuyn sc lp theo trc x. Bc 2: Thay i cc tham s c cc kiu nn chuyn sc nh : T chuyn sc t tri sang phi, repeat-y 13
  14. 14. TRUNG TM O TO MNG MY TNH NHT NGH I TC O TO CA MICROSOFT TI VIT NAM 105 B Huyn Thanh Quan, Q3, TP. HCM Tel: 3.9322.735 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com Convert PSD to HTML5/CSS3 T chuyn sc t tri sang phi, repeat-y T chuyn sc kiu trn t tm 14 Cc bn th nghim nha, rt n gin@!#
  15. 15. TRUNG TM O TO MNG MY TNH NHT NGH I TC O TO CA MICROSOFT TI VIT NAM 105 B Huyn Thanh Quan, Q3, TP. HCM Tel: 3.9322.735 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com Phin Bn Th Nghim Lu Hnh Ni B Thc hnh: Thit k giao din shop hoa ti Vic thit k giao din web (Xy dng web tnh) phi qua nhiu bc kh phc tp, trong bi vit ny ti s gii thiu n cc bn chi tit cc bc thit k mt trang web tnh. Bt u vi vic thit k giao din t photoshop n ct giao din v cui cng l trnh by trang web bng ngn ng HTML v CSS. Vic thit k giao din web c chia lm 3 phn nh sau Phn