tutorial-psdtohtmlcss75.pdf

7/25/2019 Tutorial-PSDtoHTMLCSS75.pdf

1/28

Convert Burnstudio from PSD to HTML [Very

Detailed]Posted in Coding,HTML & CSS, Tutorials 3 years ago Written byAhmad Hania 1 Comments

!n this arti"le you #ill learn ho# to "on$ert %urnstudio Personal Websiterom PS' to HTML in adetailed ste()by)ste( tutorial* +ou #ill learn ho# to "reate this layout by using a CSS rame#or, some

CSS styles and -a$aS"ri(t* When you.$e "om(leted this tutorial you.ll ha$e a $alid HTML/CSS, "ross

bro#ser "om(atible and dynami" layout* ! ho(e that you "an go through this tutorial and learn a e#

te"hni0ues that #ill hel( you in uture (roe"ts*

2o#, let.s get started #ith this tutorial*

Links you will need to comlete t!is tutorial"

%urnstudio Create An Ama4ing Personal Website 5rom S"rat"h 6sing Photosho(

78 9rid System

SlidessHere.s #hat #e.ll be "reating :Cli" on image to $ie# a ull #oring demo;*
http://www.1stwebdesigner.com/css/psd-to-html-burnstudio/http://www.1stwebdesigner.com/css/psd-to-html-burnstudio/http://www.1stwebdesigner.com/category/css/http://www.1stwebdesigner.com/category/css/html_css/http://www.1stwebdesigner.com/category/css/html_css/http://www.1stwebdesigner.com/category/css/tutorials-css/http://www.1stwebdesigner.com/author/ahmad_hania/http://www.1stwebdesigner.com/author/ahmad_hania/http://www.1stwebdesigner.com/css/psd-to-html-burnstudio/#commentshttp://www.1stwebdesigner.com/tutorials/burnstudio-tutorial-personal-website/http://www.1stwebdesigner.com/tutorials/burnstudio-tutorial-personal-website/http://960.gs/http://slidesjs.com/http://www.1stwebdesigner.com/wp-content/uploads/2011/03/BurnStudio-Tutorial/http://www.1stwebdesigner.com/category/css/http://www.1stwebdesigner.com/category/css/html_css/http://www.1stwebdesigner.com/category/css/tutorials-css/http://www.1stwebdesigner.com/author/ahmad_hania/http://www.1stwebdesigner.com/css/psd-to-html-burnstudio/#commentshttp://www.1stwebdesigner.com/tutorials/burnstudio-tutorial-personal-website/http://www.1stwebdesigner.com/tutorials/burnstudio-tutorial-personal-website/http://960.gs/http://slidesjs.com/http://www.1stwebdesigner.com/wp-content/uploads/2011/03/BurnStudio-Tutorial/http://www.1stwebdesigner.com/css/psd-to-html-burnstudio/http://www.1stwebdesigner.com/css/psd-to-html-burnstudio/


2/28

+ou "an also do#nload this tutorial.s sour"e iles here*
http://www.1stwebdesigner.com/wp-content/uploads/2011/03/BurnStudio-Tutorial.ziphttp://www.1stwebdesigner.com/wp-content/uploads/2011/03/BurnStudio-Tutorial/http://www.1stwebdesigner.com/wp-content/uploads/2011/03/BurnStudio-Tutorial.zip


3/28

Ste # $ Prearation

! you read the Photosho( tutorial or "reating this landing (ageyou (robably noti"ed that 78gsgrid

system #as used to "reate guidelines* Well, in this tutorial #e #ill also need the 78gsCSS rame#or*

6sing CSS rame#ors maes layout and style "reation a lot easier and sa$es time in #ebde$elo(ment* 2o# you should do#nload the 78 9rid system sour"e iles or usage in this tutorial*

+ou #ill also need a "ode editor< you "an use a (lain te=t editor su"h as 2ote(ad* ! al#ays re"ommendyou use a ree "ode editor and get used to it, this hel(s you get things done aster*

'uring this tutorial you should test your layout in dierent bro#sers, you don.t #ant to return to the

beginning be"ause o bro#ser "om(atibility issues* !n this tutorial ! am using some CSS3 styles, but asyou might no#, not all bro#sers su((ort CSS3 eatures* The CSS3 styles used in this tutorial ha$e

been tested #ith 5ireo= $ersion 3*7*

Ste % $ &ettin' (our )iles *eady

The irst thing you should do is "reate a dire"tory or your #ebsite* ! usually "reate an +ima'es+

dire"tory or images and a +styles+dire"tory #hi"h #ill hold e$ery style sheet :CSS; ile and the slider

-a$aS"ri(t ile* The HTML ile goes in the root dire"tory*2o# you need to grab the CSS iles rom the 78gs grid system #e do#nloaded earlier, e=tra"t the >!P

ile and then "o(y the CSS iles rom +code+css+older to your +styles+dire"tory, you should "o(y

,-./css, reset/cssand te0t/cssiles* +ou should noti"e a dire"tory "alled +uncomressed+#hi"h has the

same iles but in a bigger and more readable ormat, ! re"ommend using the "om(ressed CSS iles* +oualso need to "reate a ne# ile in your root dire"tory "alled inde0/!tmland "reate another ile "alled

style/cssin +styles+dire"tory*

!n this tutorial #e need to e=(ort images rom Photosho( to use in our HTML layout* +ou "an e=(ort

these images yoursel i you ha$e the layered PS' ile rom the original Photosho( tutorial, or you "anust grab the sour"e iles #ith this tutorial and you.ll ind the images ! "reated*

Ste 1 $ Simle Starter Layout

We need to start by "reating a Sim(le HTML layout as the basis o our site to be* %y looing at the

Photosho( Layout you should noti"e a e# things

1* The body has a ba"ground image that re(eats hori4ontally and $erti"ally*

?* The layout has a header se"tion #hi"h "ontains the logo, main menu, sear"h bo= and latestt#eets*

3* The layout has a t#o sliders one is the "ontent slider #hi"h "ould be used to dis(lay eatured

items and a (ortolio slider #hi"h dis(lays (ortolio items*

@* There.s a "ontent se"tion #hi"h "ontains about, #hat ! do and "lient testimonials se"tions*

* 5inally, #e ha$e a ooter se"tion #hi"h #ill "ontain ooter lins, ser$i"es, latest (osts rom theblog, so"ial i"ons and "o(yright te=t*

+ou "an ollo# the notes abo$e by looing at this image*
http://www.1stwebdesigner.com/css/tutorials/landing-page-photoshop-tutorial/http://960.gs/http://960.gs/http://www.1stwebdesigner.com/css/tutorials/landing-page-photoshop-tutorial/http://960.gs/http://960.gs/


4/28

2o#, %ased on these notes #e "reate the ollo#ing HTML layout*
http://www.1stwebdesigner.com/wp-content/uploads/2011/03/step-3-1.jpg


5/28

DOCTYPE html PUBC "-#$CDTD %&T'()* TransitionalE+" "http,)$)or.T/0html(DTD0html(-transitional)dtd">0mlns="http,)$)or.(1110html"> B3rnSt3dio Desi.ns css" hre9="st5lesreset)css" rel="st5lesheet" media="all" > css" hre9="st5leste0t)css" rel="st5lesheet" media="all" >

header content .oes here) slider content .oes here)

main content .oes here) port9olio items slider .oes here) 9ooter content .oes here) cop5ri.ht te0t .oes here)

2oti"e that ! added i$e di$isions or the se"tions #e mentioned abo$e ea"h #ith a uni0ue "lass nameso #e "an style it later* The 2!eader3container4has a di$ision inside it #ith "lass 2container3#-5

#hi"h is already styled in ,-./cssile :#hi"h su((orts 17 "olumns; and #e added this di$ision inside it

be"ause #e #ant the header se"tion to o""u(y the ull #idth o the bro#ser and 2container3#-5is

limited to a #idth o ,-.0* This is also used in the ooter di$ision as #ell* The "ontent di$ision has anadditional "lass 2container3#%5:#hi"h su((orts 1? "olumns; and in this #e #ant the style o

2container3#%5to be a((lied to the "ontent "ontainer*2o# let.s add the CSS as ollo#s :all CSS

should be added in style/cssile;

od5 ? color, @AdAdAd6 ac:.ro3nd, @999 3rl))ima.es.)p. repeat6 9ont-9amil5, rial6 9ont-siFe, (p06G

aH a,lin:H a,4isited ? color, @9$;;6 o3tline, none *6G


6/28

h ? 9ont-9amil5, Se.oe U6 9ont-siFe, (8p06 9ont-ei.ht, normal6 color, @***6 paddin., * * (p0 *6 mar.in, * * (p0 *6

order-ottom, $p0 solid @***6G

h span)hi.hli.ht ? color, @9$;;6 G

h span)s3title ? 9ont-siFe, ($p06 color, @AdAdAd6 G

)headercontainer ?

idth, (**I6 hei.ht, (;8p06 ac:.ro3nd, @*** 3rl))ima.esheader.)p. no-repeat top center6 o4er9lo, hidden6G

)slidercontainer ? position, relati4e6 hei.ht, J**p06 idth, 1;*p06 mar.in, * a3to6 mar.in-top, J$p06 ac:.ro3nd, 3rl))ima.esslide.)p. no-repeat ottom center6

o4er9lo, hidden6G

)content ? mar.in-top, J;p06 order-ottom, $p0 solid @***6 paddin., * * $*p0 *6G

)port9olio ? hei.ht, 8;p06 idth, 1;*p06 mar.in, * a3to6

mar.in-top, $*p06 o4er9lo, hidden6 position, relati4e6G

)9ooter ? idth, (**I6 hei.ht, 8Kp06 paddin., $Ap0 * * *6 ac:.ro3nd, 3rl))ima.es9ooter.)p. repeat-06 o4er9lo, hidden6


7/28

te0t-shado, *p0 (p0 (p0 @******6 9ilter, dropshadocolor=@******H o990=*H o995=(6G

)9ooter )container(; ? hei.ht, J*p06 o4er9lo, hidden6 ac:.ro3nd, 3rl))ima.es9ooterseperator)p. repeat-06

ac:.ro3nd-position, *p0 $*p06 G

)9ooter )cop5ri.hts ? hei.ht, JKp06 line-hei.ht, JKp06 ac:.ro3nd, transparent6 color, @AAA6 G

!n the abo$e CSS #e styled the body #ith te=t "olor, ont amily and si4e, and a ba"ground image

re(eating hori4ontally and $erti"ally #ith a w!iteba"ground "olor* 2e=t, ! set lins "olor to 6f1--%%

#ith no outline* Then ! styled !%#ith ont amily, ont si4e, ont #eight to normal, te=t "olor, a bottommargin and (adding o #%0and a bottom border* 2o# ! added the style or header ? highlight and

subtitle #ith te=t "olor and ont si4e* 2e=t, ! styled the 2!eader3container4#ith ull)(age #idth, a

i=ed height, a "entered none re(eating ba"ground image #ith 7lackba"ground "olor and hiddeno$erlo#* The 2slider3container4style is set #ith (osition relative#hi"h #ill be useul #hen #e go

later and add the slider s"ri(t, a i=ed height and #idth, margin set to 2. auto4#hi"h #ill mae the

di$ision "enter hori4ontally in the (age, a hidden o$erlo#, a to( margin or the s(a"e bet#een theslider and the header and a non)re(eating ba"ground image* 2e=t, ! styled the 2content4#ith to(

margin to mae s(a"e bet#een the "ontent and the slider, a bottom border and a bottom (adding* The

2ortfolio4style is set #ith i=ed height and #idth, a margin set to 2. auto4#hi"h #ill mae the

di$ision "enter hori4ontally in the (age, a i=ed to( margin, a hidden o$erlo# and a relative(osition

#hi"h #ill be useul #hen #e go later and add the slider s"ri(t*5inally, the ooter has a style #ith ull)(age #idth, a i=ed height, a to( (adding, a hori4ontally

re(eating ba"ground image, hidden o$erlo# and a te=t shado# #hi"h is a CSS3 eature* The

2container3#-5inside the ooter has a i=ed height #ith hidden o$erlo#, a hori4ontally re(eatingba"ground image #hi"h #ill a"t as a di$ider bet#een ooter headers and "ontent #ith a $erti"al

ba"ground (osition o 1.0* the 2coyri'!ts4di$ision style is set to a i=ed height and an e0ual $alue

o line height to align te=t $erti"ally to "enter, a transarentba"ground and a te=t "olor o 6787878*The result should be the same as the image belo#*


8/28
http://www.1stwebdesigner.com/wp-content/uploads/2011/03/step-3-2.jpg


9/28

Ste 9 $ :ddin' Content to Header

2o# #e need to add the logo, menu items, sear"h te=t bo= and latest t#eets* Here.s the HTML or the

header se"tion*

S3scrie 4ia /SS L 7ollo 'e on Titter L '5 De4iantart B3rnSt3dio Desi.ns

&ome Ser4ices Port9olio Blo. Contact Teet, +3llam 4itae 4elit eratH id pos3ere tell3s) S3spendisse potenti) +3llam 4itae 4elit eratH id pos3ere tell3s) S3spendisse potenti)

! added a di$ision #ith "lass 2'rid3#- to3!eader4to hold all the lins in the to( header, then ! added

a di$ision #ith "lass 2'rid3#. lo'o4or the logo te=t "ontained inside an !#and a lin and a di$ision#ith "lass 2'rid3- searc!4to "om(lete the 17 "olumns and to hold the sear"h te=t ield and submit

button* 2e=t, ! added a di$ision #ith "lass 2'rid3; main3menu4to hold the menu items as lins #ith

the home lin ha$ing a "lass 2active4* 5inally, ! added a di$ision #ith "lass 2'rid3; tweets4or thelatest t#eets* 2o# lets add the CSS or the header "ontent*

)headercontainer )topheader ?

hei.ht, J(p06 te0t-ali.n, ri.ht6 9ont-9amil5, Se.oe U6 9ont-siFe, ((p06 line-hei.ht, J(p06 te0t-shado, *p0 (p0 (p0 @******6 9ilter, dropshadocolor=@******H o990=*H o995=(6G

)headercontainer )topheader a ? te0t-decoration, none6


10/28

color, @AdAdAd6 G

)headercontainer )topheader a,ho4er ? color, @;9;9;96 G

)headercontainer )lo.oH )headercontainer )search ?

hei.ht, 8;p06G

)headercontainer )lo.o h(H )headercontainer )lo.o h( a ? displa5, loc:6 idth, *Ap06 hei.ht, J*p06 ac:.ro3nd, 3rl))ima.es3rnst3diosprite)pn. no-repeat6 ac:.ro3nd-position, *p0 *p06 te0t-indent, -(****p06 mar.in, Jp0 * * *6 G

)headercontainer )search )search9ields ? ac:.ro3nd, 3rl))ima.es3rnst3diosprite)pn. no-repeat6 ac:.ro3nd-position, *p0 -8*p06 idth, $(*p06 hei.ht, J(p06 mar.in, Jp0 * * *6 9ont-9amil5, Se.oe U6 9loat, ri.ht6 G

)headercontainer )search )search9ields inp3tMt5pe=te0tN ? 9loat, le9t6 idth, **p06

hei.ht, 1p06 line-hei.ht, 1p06 paddin., ;p0 1p0 ;p0 (;p06 ac:.ro3nd, transparent6 order, *p0 none6 9ont-st5le, italic6 color, @AdAdAd6 G

)headercontainer )search )search9ields inp3tMt5pe=s3mitN ? 9loat, le9t6 idth, 8*p06 hei.ht, $(p06

paddin., *p06 ac:.ro3nd, transparent6 order, *p0 none6 te0t-indent, -(****p06 c3rsor, pointer6 mar.in, Ap0 * * *6 G

)headercontainer )mainmen3H )headercontainer )teets ? hei.ht, J(p06G


11/28

)headercontainer )mainmen3 a ? 9loat, le9t6 hei.ht, 1p06 line-hei.ht, 1p06 color, @AdAdAd6 9ont-9amil5, Se.oe U6 9ont-siFe, (Jp06

te0t-decoration, none6 paddin., * ((p06 mar.in, Ap0 (*p0 * *6 G

)headercontainer )mainmen3 a,ho4erH )headercontainer )mainmen3 a)acti4e? color, @9996 -e:it-o0-shado, *p0 (p0 *p0 @*;*A*;6 -moF-o0-shado, *p0 (p0 *p0 @*;*A*;6 o0-shado, *p0 (p0 *p0 @*;*A*;6

ac:.ro3nd, @E1;K86 old rosers

ac:.ro3nd, -moF-linear-.radientle9tH @E1;K8 *IH @7B8J A*IH @E1;K8(**I6 9ire9o0 ac:.ro3nd, -e:it-.radientlinearH le9t topH ri.ht topH color-stop*IH@E1;K8H color-stopA*IH@7B8JH color-stop(**IH@E1;K86 e:it 9ilter,pro.id,D%ma.eTrans9orm)'icroso9t).radient startColorstr=@E1;K8HendColorstr=@E1;K8HQradientT5pe=( 6 ie G

)headercontainer )teets ? te0t-ali.n, ri.ht6 line-hei.ht, ;Ap06 9ont-9amil5, '5riad Pro6

9ont-siFe, ($p06G

)headercontainer )teets span ? displa5, loc:6 9loat, le9t6 color, @K1c$6 9ont-9amil5, Se.oe U6 9ont-siFe, (;p06 mar.in, * * * ;Ap06 G

The to( header di$ision is styled #ith a i=ed height, te=t alignment to ri'!t, a ont amily and ont

si4e, a line height e0ual to height to "enter te=t $erti"ally and a te=t shado#* Then ! styled the to(header lins both the normal and ho$er states #ith te=t "olor and no de"oration* The logo and sear"h

di$isions are styled #ith i=ed height* The logo header and lin style is set #ith 7lockdis(lay, a i=ed

height and #idth, a ba"ground image or the logo #hi"h is in"luded inside the CSS s(rites image and !

use ba"ground (osition to sho# the (art ! #ant, a negati$e te=t indent o #....0to mae te=t hidden#hen $ie#ed in bro#sers and a to( margin o %90*

2e=t, ! styled the 2searc!3fields4di$ision holding the sear"h te=t bo= and submit button #ith a

ba"ground image and ba"ground (osition rom the CSS s(rites image, a i=ed height and #idth, a to(


12/28

margin, a ont amily and loating to ri'!t* The sear"h te=t ield has a leftloating #ith i=ed height

and #idth, a line height e0ual to height to "enter te=t $erti"ally, a (adding, ba"ground set to

transarent, no border, a te=t "olor and ont style set to italic* The sear"h submit button styled #ith

leftloating, a i=ed height and #idth, 4ero (adding, trans(arent ba"ground, no border, a negati$e te=tindent o #....0to hide te=t #hen $ie#ed in bro#ser, "ursor set to ointerand a to( margin to

(osition the button "orre"tly* The main menu and t#eets di$ision is styled #ith i=ed height*

2o#, the main menu lins normal state style is set #ith leftloating, a i=ed height and an e0ual lineheight, te=t "olor, a ont amily and ont si4e, no te=t de"oration, a let and right (adding and no to( orbottom (adding and a to( and right margin to mae s(a"e bet#een menu items* The ho$er and a"ti$e

state o menu items has a dierent te=t "olor, a bo= shado# and a gradient ba"ground #hi"h are both

CSS3 eatures*

5inally, the t#eets di$ision is styled to align te=t to right #ith a suitable line height, ont amily andsi4e* The s(an inside the t#eets se"tion style is set #ith leftloating, a 7lockdis(lay, a suitable te=t

"olor, ont amily and si4e, and a let margin to (osition the s(an "orre"tly* The result should be as the

image belo#*

Ste 8 $ :ddin' Slider content< Style and =avascrit

2o#, #e are going to add the slider and or this ! am going to use an already im(lemented s"ri(t, #hi"his Slidess* ! modiied the s"ri(t to mae it suit our layout and no# here.s the HTML or the slider

"ontent*

orem ips3m dolor sit ametH consectet3radipiscin. elit) Donec .ra4ida sem at nisi laoreet placerat)

li23am erat 4ol3tpat) Ri4am3s sa.ittis) orem ips3m dolor sit ametH consectet3radipiscin. elit) Donec .ra4ida sem at nisi laoreet placerat)

li23am erat 4ol3tpat) Ri4am3s sa.ittis)
http://slidesjs.com/http://www.1stwebdesigner.com/wp-content/uploads/2011/03/step-4.jpghttp://slidesjs.com/


13/28




li23am erat 4ol3tpat) Ri4am3s sa.ittis) orem ips3m dolor sit ametH consectet3radipiscin. elit) Donec .ra4ida sem at nisi laoreet placerat)


The 2slider3container4has t#o di$isions inside it a di$ision #ith !' 2slides4or the s"ri(t to use and

a di$ision #ith "lass 2slides3container4#hi"h #ill hold all the slides that are re(resented by a di$ision#ith the slide "ontent inside it, in this "ase an image and te=t "ontained inside a s(an element #ith "lass

2descrition4* 2o# let.s add the CSS style or the slider "ontent and s"ri(t*

)slidercontainer )slidescontainer ? idth, 1;*p06 displa5, none6G

)slidercontainer )slidescontainer di4 ? idth, 1;*p06 hei.ht, J**p06 displa5, loc:6 o4er9lo, hidden6G

)slidercontainer )slidescontainer di4 span)description ? color, @9996 displa5, loc:6 idth, AAAp06 mar.in, -$p0 * * (*p06 paddin., (Ap0 * * *6 o4er9lo, hidden6 G

)slidercontainer )pa.ination ? list-st5le, none6 mar.in, *6 paddin., *6 hei.ht, ;(p06


14/28

position, asol3te6 top, $$1p06 ri.ht, K*p06 F-inde0, (**6G

)slidercontainer )pa.ination li ? 9loat, le9t6

hei.ht, ;p06 idth, ;p06 mar.in, (8p0 Ap0 * *6 te0t-ali.n, center6 G

)slidercontainer )pa.ination li a ? displa5, loc:6 line-hei.ht, ;p06 color, @AdAdAd6 te0t-decoration, none6 9ont-siFe, (;p06 te0t-shado, (p0 (p0 (p0 @******6

9ilter, dropshadocolor=@******H o990=(H o995=(6 G

)slidercontainer )pa.ination )c3rrent aH )slidercontainer )pa.ination lia,ho4er ? color, @9996 ac:.ro3nd, 3rl))ima.es3rnst3diosprite)pn. no-repeat6 ac:.ro3nd-position, *p0 -A*p06 G

)slidercontainer a)ne0t ? position, asol3te6 ri.ht, *p06

top, $AKp06 F-inde0, (**6 displa5, loc:6 hei.ht, 8p06 idth, 8p06 te0t-indent, -(****p06 ac:.ro3nd, 3rl))ima.es3rnst3diosprite)pn. no-repeat6 ac:.ro3nd-position, -$Ap0 -A*p06G

)slidercontainer a)pre4 ? displa5, none6G

The slides "ontainer has a i=ed #idth #ith dis(lay set to none* Ba"h slide di$ision style is set #ithi=ed height and #idth, a blo" dis(lay and hidden o$erlo#* The des"ri(tion inside ea"h slide is set

#ith w!itete=t "olor, a i=ed #idth, a negati$e to( margin or "orre"t (ositioning, a let margin or

s(a"ing, a to( (adding and o$erlo# "ontent hidden*

2o#, the slider (agination style #hi"h is auto generated by the -a$aS"ri(t is set to be (ositionedabsolutely #hi"h #ill be absolute to the "ontaining relati$ely (ositioned element, a to( and right $alues

to "orre"tly (osition it #ith a 4)inde= $alue o #..#hi"h a"ts as a layer $alue maing the (agination on

to( o other deault elements that has a deault 4)inde= $alue o autoand #ors only on (ositioned


15/28

elements* The (agination list element is styled to loat to left, i=ed height and #idth and te=t aligned to

the center*

The style o normal state o the lin inside ea"h list element is set to dis(lay lie a 7lock, a line height

e0ual to list element height to "enter te=t $erti"ally, a "ustom te=t "olor #ith no te=t de"oration, a i=edont si4e and a 7lackte=t shado#* The ho$er and "urrent state o the lin style is set to ha$e a w!ite

te=t "olor #ith a ba"ground image and ba"ground (osition to sho# the (art #e #ant rom the CSS

S(rites image*

5inally, the ne=t and (re$ious elements is styled #hi"h is also generated by the -a$aS"ri(t* ! hid the(re$ious lin #ith dis(lay none, and styled the ne=t lin #ith a ba"ground image #ith a (art rom the

s(rites image set by ba"ground (osition, an a7solute(osition, a to( and right $alues to (osition lin

"orre"tly, a 4)inde= o #.., a i=ed #idth and height and a negati$e te=t indent to hide the te=t in

bro#sers*

2o# let.s add the re0uired uery s"ri(t in the header* +ou "an ind the s"ri(t ile in this tutorial sour"e

ile or rom the uery S"rollable s"ri(t (age* The HTML head se"tion should be lie this :#hi"h #ill

be also used by the (ortolio elements slider;*

B3rnSt3dio Desi.ns

5inally, #e need to add the -a$aS"ri(t "ode that #ill allo# the slider to #or on our layout* +ou should

add this s"ri(t ust beore the "losing tag o the body* Here.s the -a$aS"ri(t*

93nction ? @slides)slides? e99ect, 9adeH preload, tr3eH .enerate+e0tPre4, tr3e G6 G6

2o# our layout should loo lie this*


16/28

Ste - $ :ddin' Main Content and Style

2o# let.s add the "ontent or DAbout %urnstudioE, DWhat ! doFE and DClient TestimonialsE, here.s the

HTML*

o3t B3rnst3dios Donec .ra4ida sem at nisi

orem ips3m dolor sit ametH consectet3r adipiscin. elit) Donec .ra4idasem at nisi laoreet placerat) li23am erat 4ol3tpat) Ri4am3s sa.ittisH erat e.etornare rhonc3sH ma.na leo loortis) /ead 'ore #hat Do Sed 4itae liero diam

C3rait3r tristi23e acc3msan 3rna 23is rhonc3s) Sed et nisi nec arc33ltricies porttitor) n 4ehic3la li.3la a lect3s p3l4inar ali23et) 'a3ris 4itae leoa sapien males3ada sollicit3din) /ead 'ore Clients Testimonials Pellentes23e 3t acc3msan iero diam
http://www.1stwebdesigner.com/wp-content/uploads/2011/03/step-5.jpg


17/28

Proin l3ct3s sem 3t a3.3e l3ct3s hendrerit) 3is23e 4elit 9elisH.ra4ida 9e3.iat 3ltrices idH .ra4ida 23is enim) enean at t3rpis) 'ichaelH )(stedesi.ner)com

2oti"e that the "ontent se"tion "ontains three di$isions #ith "lass D'rid395and another uni0ue "lass

name or ea"h di$ision* Ba"h di$ision has an >!%?title #ith t#o s(ans inside one or the highlighted

te=t and one or the sub)title te=t, a (aragra(h and a read more lin #ith the e="e(tion o the lastdi$ision #hi"h has an image and a lin inside the (aragra(h* Then #e ha$e a di$ision #ith "lass

2clear4and it is used to "lear loated elements and mae the (arent "ontainer e=(and to its "ontent*

2o# let.s add the CSS style or the "ontent*

)content )ao3t ? mar.in-le9t, *p06 mar.in-ri.ht, $*p06G

)content )hat ? mar.in-le9t, *p06 mar.in-ri.ht, $*p06G

)content )testimonials ? mar.in-le9t, *p06 mar.in-ri.ht, *p06

G

)content ).ridJ p ? te0t-ali.n, 3sti956 mar.in, * * (*p0 *6 line-hei.ht, *p06 G

)content ).ridJ p im. ? 9loat, le9t6 mar.in, * (p0 (p0 *6 G

)content ).ridJ p span ? 9loat, ri.ht6 9ont-st5le, italic6 color, @***6 te0t-ali.n, ri.ht6 G

)content ).ridJ a)readmore ? idth, 8(p06 hei.ht, Jp06 displa5, loc:6


18/28

ac:.ro3nd, 3rl))ima.es3rnst3diosprite)pn. no-repeat6 ac:.ro3nd-position, -Ap0 *p06 te0t-indent, -(****p06 G

! started by styling the 2/a7out4, 2/w!at4and 2/testimonials4"lasses #ith 4ero let margin and a 1.0right margin #ith the testimonials set to 4ero let and right margins* 2o#, ! styled the (aragra(h inside

ea"h 2'rid395di$ision #ith ustiied te=t alignment, a bottom margin and a line height o %.0* Theimage inside the (aragra(h is styled #ith leftloating and a right and bottom margin to mae s(a"ebet#een image and te=t* The s(an inside the (aragra(h used in the testimonials te=t is styled to be

itali", loat and te=t aligned to right #ith a "ustom "olor* 5inally, the read more lin is styled #ith a

ba"ground image rom the CSS s(rites image, a i=ed height and #idth, dis(lay set to 7lockand anegati$e te=t indent o #....0to hide te=t in bro#sers* 2o# our layout should loo lie this*


19/28

Ste @ $ :ddin' Portfolio Atems< Style and Scrit

2o# let.s add the (ortolio items* Here.s the HTML*

'5 Port9olio

Client, 7irstclient)nc U/, )5o3rsite3rl)com Client, notherclient

U/, )5o3rsite3rl)com Client, notherclient U/, )5o3rsite3rl)com

Client, notherclient$ U/, )5o3rsite3rl)com Client, 7irstclient)nc U/, )5o3rsite3rl)com

Client, notherclient U/, )5o3rsite3rl)com Client, notherclient


20/28

U/, )5o3rsite3rl)com Client, notherclient$

U/, )5o3rsite3rl)com

The (ortolio items slider is the similar in "onstru"tion as the "ontent slider #e used earlier #ith a e#

things "hanged, the !' used is 2ortfolio3slides4#hi"h must be a uni0ue identiier so that #e "an usein the -a$aS"ri(t* The di$ision that holds ea"h slide "ontains our di$isions #ith "lass 2item4ea"h #ith

an image some te=t and lins* 2o# let.s add the CSS style or the (ortolio items*

)port9olio h ? position, asol3te6 top, *p06 le9t, *p06 order, * none6 paddin., *6 mar.in, *6G

)port9olio )slidescontainer ? idth, 1;*p06 displa5, none6G

)port9olio )slidescontainer di4 ? idth, 1;*p06 hei.ht, 8;p06 displa5, loc:6 o4er9lo, hidden6 G

)port9olio )slidescontainer di4)item ? 9loat, le9t6 idth, (*p06 hei.ht, A*p06 mar.in, * (Ap06 mar.in-top, $;p06 line-hei.ht, *p06 o4er9lo, hidden6 G

)port9olio )slidescontainer di4)item im. ? order, $p0 solid @$Aec6 mar.in, * * *p0 *6 G

)port9olio )slidescontainer di4)item span ?


21/28

color, @***6 G

)port9olio )slidescontainer di4)item a ? 9ont-st5le, italic6 G

)port9olio a)ne0t ?

position, asol3te6 ri.ht, (Ap06 top, *p06 F-inde0, (**6 displa5, loc:6 hei.ht, (Kp06 idth, (;p06 te0t-indent, -(****p06 ac:.ro3nd, 3rl))ima.es3rnst3diosprite)pn. no-repeat6 ac:.ro3nd-position, -1*p0 -A*p06G

)port9olio a)pre4 ?

position, asol3te6 ri.ht, A*p06 top, *p06 F-inde0, (**6 displa5, loc:6 hei.ht, (Kp06 idth, (;p06 te0t-indent, -(****p06 ac:.ro3nd, 3rl))ima.es3rnst3diosprite)pn. no-repeat6 ac:.ro3nd-position, -K*p0 -A*p06G

2oti"e that the header is styled #ith a7solute(osition so that #e "an (la"e it any #here #e #ant in its

"ontainer #hi"h in this "ase a 4ero to( and let $alues, 4ero border, 4ero (adding and margins* the slides

"ontainer style is the same as the one in the "ontent slider #e im(lemented abo$e* The di$ision thatre(resents a slide is styled #ith a i=ed height and #idth and !iddeno$erlo#* 2o#, #e style ea"h

(ortolio item #ith loating to left, i=ed height and #idth, let and right margins o #80, a to( margin

o 1-0, a i=ed line height and !iddeno$erlo#* The image inside ea"h item has a 10border #ith a

bottom margin* The s(an has a dierent "olor and the lins is set to itali"* 5inally, ! added the style orthe ne=t and (re$ious lins #ith almost similar styles, dierent only in right (osition and ba"ground

(osition*

2o# #e need to mae the slider #or by adding the -a$aS"ri(t, #e added ust ater the ne=t s"ri(t #e

added abo$e or the "ontent slider* The s"ri(t blo" should be lie this*

93nction ? @slides)slides? e99ect, 9adeH preload, tr3eH .enerate+e0tPre4, tr3e G6 G6 93nction ? @port9olioslides)slides?


22/28

preload, tr3eH .enerate+e0tPre4, tr3e G6 G6

2o# our layout should loo lie this*

Ste ; $ :ddin' )ooter Content and Style

2o# let.s add the "ontent or the ooter, here.s the HTML or the ooter*

E0plore &ome Ser4ices Blo. Port9olio Contact 7a2s


23/28

Pri4as5Polic5">Pri4as5 Polic5 '5 Ser4ices

orem ips3m dolor sit amet nte.er 4itae p3r3s

Donec sed 4elit lac3s

Sed 9a3ci3s eros

+am hendrerit d3i

4enenatis non liero

atest 7rom The Blo.

*( Vorem ips3m dolor sit ametH consectet3r adipiscin.)

* +3llam elei9end males3ada 3ltrices)

*$ +3llam e.estas t3rpis nec eros

Sta5 Connected 7aceoo: Titter in:edin Cop5ri.ht *(*-*(( (stedesi.ner)com) ll /i.hts /eser4ed)

The ooter "ontains our di$isions #ith "lass names that a""umulates to 17 grid ea"h one has an >!1?

tag* The irst one has an unordered list #ith lins, noti"e that the irst and the last items has a uni0ue

"lass name or later styling* The ne=t one has an unordered list #ith irst and last items ha$ing a uni0ue

"lasses* The blog di$ision has (aragra(hs #ith the irst and last one ha$ing a uni0ue "lasses* The lastdi$ision has the so"ial lins* 5inally, the "o(yrights di$ision has some "o(yright te=t #ith a lin inside

a 2'rid3#-5di$ision* 2o# let.s add the CSS style or the ooter "ontent*


24/28

)9ooter a ? te0t-decoration, none6 te0t-trans9orm, 3ppercase6G

)9ooter h$ ? color, @9996 9ont-9amil5, Se.oe U6

9ont-siFe, (8p06 9ont-ei.ht, normal6 line-hei.ht, p06G

)9ooter )9irst-child ? order-top, *p0 none6G

)9ooter )last-child ? order-ottom, *p0 none6G

)9ooter p ? 9ont-9amil5, '5riad Pro6 9ont-siFe, ($p06 te0t-trans9orm, 3ppercase6 color, @AAA6 hei.ht, Jp06 order-top, (p0 solid @$A$A$A6 order-ottom, (p0 solid @***6 mar.in, *6G

)9ooter p span ? 9ont-9amil5, Se.oe U6

9ont-siFe, Jp06 color, @$K$K$K6 te0t-shado, *p0 *p0 *p0 @******6 9ilter, dropshadocolor=@******H o990=*H o995=*6 9loat, le9t6 line-hei.ht, Jp06 mar.in, * (Ap0 * *6 G

)9ooter 3l ? mar.in, *6 G

)9ooter 3l li ? list-st5le, none6 mar.in, *p06 9ont-9amil5, '5riad Pro6 9ont-siFe, ($p06 te0t-trans9orm, 3ppercase6 line-hei.ht, Ap06 order-top, (p0 solid @$A$A$A6 order-ottom, (p0 solid @***6 G


25/28

)9ooter 3l li a ? color, @AJJ6 displa5, loc:6 G

)9ooter 3l li a,ho4er ? color, @dKdAdA6 G

)9ooter )ser4ices 3l li ? color, @c$KaJ6 paddin., * * * (p06 G

)9ooter )social a ? displa5, loc:6 color, @AAA6 paddin., * * * A*p06 mar.in, * * (8p0 *6 hei.ht, $*p06 line-hei.ht, $*p06

G

)9ooter )social a,ho4er ? color, @dKdAdA6 G

)9ooter )social aMtitle=7aceoo:N ? ac:.ro3nd, 3rl))ima.es9aceoo:)pn. no-repeat le9t center6 G

)9ooter )social aMtitle=TitterN ? ac:.ro3nd, 3rl))ima.estitter)pn. no-repeat le9t center6 G

)9ooter )social aMtitle=in:edinN ? ac:.ro3nd, 3rl))ima.eslin:edin)pn. no-repeat le9t center6 G

! started by styling the lins #ith no te=t de"oration and te=t transorm set to uercase* Then ! styled

header 3 #ith w!itete=t "olor, ont amily and si4e, normalont #eight and i=ed line height* 2oti"e

that ! styled the general 2/firstc!ild4"lass #ith 4ero to( border and the general 2/lastc!ild4#ith 4ero

bottom border, although this "an be done #ith CSS3 but it #ill not #or on !nternet B=(lorer G or $ersions* The (aragra(h is styled #ith ont amily and si4e, uercasete=t, a "ustom "olor, a i=ed

height, a to( and bottom border #ith dierent "olors and 4ero margins*

The s(an inside the (aragra(hs is has a dierent ont amily and si4e, dierent "olor, has no te=tshado#, a loating to the left, a line height e0ual to (aragra(hs height to "enter the te=t $erti"ally and aright margin* 2o# the unordered list has 4ero margins, the list items is styled #ith no list style, 4ero

margins, "ustom ont amily and si4e, uercasete=t, a i=ed line height, and a to( and bottom border

#ith dierent "olors* The lins inside list elements has dierent "olor and 7lockdis(lay, #ith a ho$erdierent ho$er state te=t "olor* The ser$i"es list item "olor is "hanged to 6c17@a9#ith a bottom

(adding*

5inally, the so"ial lins is styled #ith 7lockdis(lay, "ustom te=t "olor, a bottom (adding to mae s(a"e

or the ba"ground image, a bottom margin or s(a"e bet#een lins and an e0ual height and line height


26/28

$alues to "enter te=t $erti"ally* 2o#, ea"h so"ial lin is styled a""ording to its title te=t #ith a

"on$enient ba"ground image as an i"on*

! you ollo#ed this tutorial "orre"tly then you should ha$e a ull #oring HTML/CSS layout rom a

PS' that loos e=a"tly lie this*


27/28
http://www.1stwebdesigner.com/wp-content/uploads/2011/03/burnstudio_final.jpg


28/28

Conclusion

So that.s it* !n this tutorial you learned ho# to "on$ert a layout rom PS' to a ully #oring

HTML/CSS #ebsite, don.t orget to $alidate and "he" or bro#ser "om(atibility :the layout #ill not

$alidate be"ause o -a$aS"ri(t & CSS3 styles, remo$e both to $alidate (ro(erly;* ! there is a (art othis tutorial you didn.t understand, or you ha$e a better te"hni0ue, eel ree to share #ith e$eryone by

"ommenting belo#*

tutorial-psdtohtmlcss75.pdf

Documents