This tutorial will teach you how to slice the CleantPortfolio psd layout. Your web site design is now finished. But this result is only a simple picture you cannot update to change or to add actions. It is the reason you need now to cut it off in several graphical parts, one for the icons, one to illustrate the buttons etc.... These graphical parts will be added to your HTML web site pages using CSS proprieties, even you are going to create a web site with HTML5/CSS, CSS proprieties are going to take place of several pictures (internal shadow, shadow, gradient etc...).
Step 1 Creation of HTML file
It is time now to enter into the HTML part of this tutorial. Start to create the needed files,in this way, access your work folder, create a new folder, name it mytemplate. Open your favorite edit code software (by my side, I work with Notepad++) and go to menu File>New. Select HTML as type of file and press the "Create" key. Go back right now to the menu File and this time, select "save-as". Enter name "index.html" and save your file in your folder.
Step 2 Basic tags
Take care on the source code to be visible on your screen (as well as your software is put on mode "to edit source code") In case of HTML code lines displayed on screen, select all of them, then delete them (to be able to create an HTML type file). On line 1, enter the type of document: <!DOCTYPE html>, then, just under, enter the language used on the page: <html lang="fr"> (do not forget to close the <html> tag on line 3). Add now inside, the tags <head> and <body>. To finish, add the tag <metacharset="utf-8?> into the header of the page and the tag <title>. See below the code you have to get:
Step 3 First HTML5 tag
Code back to the code source located in your index.html file, drop some lines between the tags. Declare now a new tag <section> which will include the whole content of the web site (it will also center the Template). Add inside this tag, the ID: content. See below the line to add into your HTML file.
Step 4 The Top
Enter now into the high import step of the subject. Start first to create the top of the web site, including 3 blocks: the logo, a links list and a search engine. Group the 3 blocks in a tag <header>, this tag is needed to create the area of the top of the web site (as well as for the top area of all other blocks: footer, article, section etc...). See below the code source updated.
Step 5 The links
Drop some links between the tags <header>,then declare a new tag <nav>. Then, create a new tag <a> and add inside the properties href and title. Now, copy/paste several times the line regarding the link to get a list of links.
Step 6 The searchengine
To finish the top of the page, continue with the creation of the search engine. To do it, drop a ligne under the tag </nav> then then enter a new tag <form>to initialize the form.
Declare inside a first tag <input/> then put properties name and type. Create a second tag input with type: button. See below the code lines to add to your index.html file.
Step 7 Block dark grey
A dark grey rectangle is located under the header (just under the caroussel). To create this area, use a tag div. Drop a line under the form, then declare a new tag div. Addinside the ID dark. Seebelow the HTML code to add.
Step 8 The carousel 1/2
The caroussel is created a sort list which is located in a HTML5 tag section. Go back to the source code of your index.hmtl file, then drop a line under the div created orevously and declare a new tag <section>. Add now inside the ID, the tag slideshow. See below the lines to add to your HTML file.
Step 9 The carousel 2/2
Drop a line between the tags <section> and declare a new tag <ul></ul>to create a new list. Declare inside a tag to create a line and to add the picture of the carousel. To do it, use the HTML tag <img/> with properties src (path to access the graphical file) alt and tittle. Repeat it 3 times to create 4 lines in the list. See below the code to add to your index.html file.
Step 10 Complex shadow
To create the complex shadow under the carousel, you need to create a new div. Drop one line under the section and create a new tag div, then add inside the ID shadow. See below the lines of code to add to your index.html file.
Step 11 Introduce
You mist now create the main block of the web site : an introduce, three little blocks to display the last published articles on the the web site, and a block to display the last Twitter messages. To create the Introduce block, declare a tag <section>, then, add inside an ID intro. Inside again, add fake text, with the tag <strong>around the first sentence. To create the small arrow on the right side of the hypertext link, use the HTML codes:et
Step 12 Last articles
To create the three blocks including the articles (pictures, tilte and text), declare first a new tag <section>, then add an ID Thumbnail. Inside this new tag, declare a new tag . See below the few lines to add to your index.html file.
Step 13 Contents
The tag article previously created will be useful to receive the article content; the logo, the title, the chapter and the button. Then, drop some lines between the article tag and declare a new picture (using the graphical filecontent_photo1.png) with the tag <img/>.
Using now the fake text LoremIpsum, create a title (with the tag h2), then a chapter of text (tag p) and create the button with the tag of hypertext link a. See below the updated code.
Step 14 Twitter messages 1/3
The lastblock is regarding the Twitter messages. Go to the code source of your page, then drop some lines after the last tag section previously created. Declare a new tag section and add inside an ID Twitter. Enter a message inside (use again a fake text LoremIpsum).
Step 15 Twitter messages 2/3
Fill out the tag section with two pictures. Start to declare two new tags <img and insert the sources : oiseau.png (bird) , then twitter_quote.png. Add now in the first tag, class: bird and in the second one, class :apos. Regarding the pictures, you can find them in the work folder delivered on the CD. See below the lines to add into the tag section create during the previous step.
Step 16 Twitter message 3/3
To finish with the Twitter block, drop one ligne under the pictures and declare a new tag <div>. Add inside the class: at. Add now, between the tag div, the author name of the Twitter message. See below the line to insert to finish the Twitter block.
Step 17 Footer
We are already arrived on the creation step of the footer, this step is the last creation for this web site. Drop one/two line(s) under the tag section (of the Twitter block), then declare a new tag footer. This tag HTML5 is useful to create the bottom of the complete block (page, article, section etc...).
Step 18 1st block of the footer
You need now to create different blocks for the footer. Drop some lines between the tags footer, then declare a new tag article and insert inside an ID: foot1. Drop a line and declare an hypertext link with a class t (to create the title). Insert now, under a tag chapter including another hypertext link. Seebelow the code to add to your index.html file.
Step 19 2nd block
Same thing to apply to create the second block. Drop one line under the first block, then declare a new tag article and insert inside an ID: foot2. Create now a new title with a tag of hypertext links and declare under it a new chapter.
Step 20 Social links
For the conclusion of the second block of the footer, add a list including icons which will be useful to manage the links forwarding to the social networks. To insert the pictures, use the tags <img/>,then put an hypertext link all around these pictures (use the tags <a href => </a>). See below the source code to add to finish the second block.
Step 21 The 3rd block
The third block is simple. Drop a line under the tag article previously created, then create a new tag article. Insert inside the ID foot3, then start to create the title of the block with the tag <a> and class: t. Declare now a list with 5 lines, using the tags <ul> et <li> (remind that the closing tag li is now optional with the version HTML5). See below the lines of code to insert to your HTML file, to create the last block of the footer.
Step 22 Last tags of the page
To really finish the Template, the last tags HTML to be used are located under the footer, they are needed to add the Copyright on the page. To do it, drop a line under the tag footer, then declare a new tag article, add now inside an ID copy. Add at least the Copyright.
Step 23 First test
The HTML structure of the web site is now finished. In your HTMLeditor, press on keys Ctrl/Cmd + S to save work. Explore and open your folder " tuto18 " then double click on your HTML file to open your Internet Explorer (better to select Chrome) and check the result of the display of your web site. For sure, for the moment it is not really nice to watch, but you can now appreciate the evolution between this version without CSS and a version with CSS3!
Step 24 Create a layer style
Go back to your HTML editor, then go to menu File>new and select CSS for the type of file. It opens a blank layer style. Press keys Ctrl/Cmd + S to " save-as ". Put this file into same folder than index.html file (folder " tuto4 "). To finish, create the link between the HTML file and your layer style SS. To do it, copy the code line below between the tags in index.html.
Step 25 General Styles
It is time now to apply a style. Go back to your layer style, then type body { }, and between { and }, use the CSS properties to change the background color of the page by :#fff (background-color), apply the pictures bg_header.png et bg_footer.png (background-image), the background position, first one on the top, second one on the bottom (background-position), background repate of the picture on x axe (background-repeat), the font Verdana, the color #101331 and the size to 12px (font-family, font-size, color).
Step 26 Add the fonts
Advice you do not use exotic fonts with the web, except using HTML5 which can support ttf or otf files to be able to use all type of polices you want. To do it, put the files in the folder of your website, then use the property @font-face to include the useful files.
Step 27 Put the website in the center
To put the website in the center, write in the layer style #content { } then update the width of the div to 960 pixels using the property width. Update the external margings right and left to auto, then, update the relative position. See below the faw lines to add to your CSS file.
Etape 28 Put the website in the center
It is now the step dedicated to the customization of the elements. Write in your style layer, header { } then use the poperties to change the background color to #d8d8e8 (background-color), then width to 940 pixels and height to 35 pixels. Add an internal margin of 20 pixels on the left side, and on the top of 15pixels (padding-left et padding-top). To finish, update the raltiv position (position). See below the lines to add to your layer style.
Step 29 Create the logo 1/2
The logo is created with 2 words, with a different police for each of them using: Titilliumfor the first one and Tizafor the second one. In real, first word is customized with the tag h1 and the second one with the tag span. With CSS, you write: header h1 { }, then between { and } apply propretyfont-family to update the characters size to 25 pixels, to update color to and margin-top to add an external negative margin to 10 pixels.
Step 30 Create the logo 2/2
To customize the second word, write in your layer style header h1 .blog { }, then update the font to Tiza (font-family), the color to #afafbd (color), the left internal marging to 5px (padding-left), the bold to 100 (font-weight) and finish creating a shadow with values: horizontal row 0px, vertical row -1px, size 0px and color #000. See below the lines to add to your CSS file.
Step 31 Customize the menu 1/2
To go ahead with the header customizing, it is time now for the list of links. In your layer style, enter nav { } and start first to update the position of the block to the right (float), then add a margin on the right (170 pixels) and a margin on the top (25 pixels) (margin-right and margin-top).
Step 32 Customize the menu 2/2
As soon as the menu is at the correct position, start to work on the links. To do it, type nav a { } and update the left and right external margins to 12 pixels (margin-left and margin-right) as well as the color of the text #8b8b99 (color) and remove the underline of the links (text-decoration), light reduce the lines space (letter-spacing). To finish with this step, add a shadow with these values: horizontal and vertical alignment to 1px, size to 1px, color #fff. See below the lines making perfect the style of the menu.
Step 33 The search engine 1/3
To finish th header, you have to customize the search engine. This one includes an input (text field) and a button. These two fields need different styles you will discover soon in next steps, because the first thing to do is to customize the form. Type in your CSS file .search { } and change the form to absolute to 10 pixels from the top and 0 droit the right border.
Step 34 The search engine 2/3
Write now .searchinput[type=text] { } to indicate the styles of the text fields. Use the properties to change to height to 25 pixels and the width to 110 pixels (height et width), then the color of the text to the black with a size of 12 pixels (color et font-size), left internal margin to 30 pixels, right external margin to 20 pixels (margin-right). Add a border with a radius of 4 pixels, un border of 1px solid #c2c2c2. To finish, create a gradient in the background using color: from #ededed to #fff (gradient). See below all the lines added to your file to customize the text filed of the search engine.
Step 35 The search engine 3/3
Drop a line and type .searchinput[type=button] { } for the botton type input. Change height to 15 pixels and width to 17 pixels (height et width). Add the picture loupe.png in the background (background-image), then change the background properties: no-repeat, bottom, transparent (background-repeat, background-position, background-color). Init the border to 0, put botton to absolute on the top (5px), on the left (10 px) (position, top, left). See below the last lines used to customize the search engine. That's all regarding the header customizing.
Step 36 The block under the carousel
Under the header, you can see a very big rectangle block, color dark grey, created previously with a tag div. Customize it now, entering #ombre { } in your CSS file.
Use now the CSS properties to change the color of the background to #343843, the height to 200 pixels and the width to 960 pixels. To finish, update the position to relative.
Step 37 The slideshow 1/5
It is certainly the biggest part of CSS, building of the slideshow.
The slideshow is located in a section, which is over the dark block. To do it, go back to the code of your layer style and type #slideshow{ }, change the right and left margins to automatic mode (margin-right et margin-left), add a negative margin to 180 pixels (margin-top) and change the position to relative, then define the z-index at 9.
Step 38 The slideshow 2/5
Once the slideshow located at the correct place, update the look of the pictures which are going to be displayed. In this case, you only need to round the angles adding a radius. To do it, enter #slideshowimg { }, then define a radius from 7 pixels (border-radius).
See below the lines to add to your CSS file.
Step 39 The slideshow 3/5
Enter #slideshowul { } and change the position to relative (position), overflow to hidden (overflow) and init the internal and external margins to 0 (margin et padding). Enter now #slideshowul li { } and change the position to absolute (positrion), then put the block on the top to the left side (top -left), init the external and internal margins to 0 (padding et margin) and cancel the chips (list-style).
Step 40 The slideshow 4/5
Last action regarding the slideshow customization is the page numbering. Write first #pagination { } and force the drop to next line with clear:both, update width to 75 pixels, add on the top an external margin (margin) from 35px and an internal to 0 px 0 (padding). Enter #pagination li { } and cancel the chips (list-style), align the lines on the left (float) and add an external margin on the right side and one on the left side from 3px (margin).
Step 41 The slideshow 5/5
To finish the page numbering, enter #pagination li a { } and change height and width (width et height), then, defineaverybigtext-indenttodisappearthetext(text-indent).Tofinish,addthepicturespagination.pngandbackground(background).Toupdatethelookwhenthechipisactive,youhavetocreateanewclasswhichwillchangethedefaultstyleofthelink.Inthiscase,enter#paginationli.active{}andchangethebackroundpositiontomoveitfrom10pixelstothebottom(background-position).
Step42Complexshadow
Youneednowtocreatethecomplexshadowlocatedundertheslideshow.Then,applysamemethodthantheoneusedforthedarkrectangle.Gobacktothesourcecodeofyourlayerstyleandenter#ombrage{}andusepropertiestochangewidthto915pixelsandheightto50pixels.Addapictureasbackgroundslider_ombre.png,andapplythepositionasrelative.
Step43Introduce
Itistimenowtoworkonthemaincontentofthewebsite,meaningtheintroduce,thelastarticlesandtheTwitterblock.Regardingtheintroduce,gobacktoyourlayerstyleandenter#intro{}.Changetextalign,widthto920pixels,applya10pxexternalmarginonthetopandoneonthebottomfrom40px,positiontorelativeandthez-indexto4.Tofinish,easyupdatechangethecolourofthelinkspresentinthisintroduce,bythegrey:#786880(color),removetheunderline(text-decoration).
Step44Telastarticles
Threeblocksarelocatedundertheintroduce,theyincludesthethreelastarticlesofthewebsite.Theseblocksarecreatedwiththetagsectionandthreetagsarticle.Herenow,thewaytocustomizethem:gobacktothesourcecodeofyourlayerstyleandenter#vignette{},changetheexternalmarginfromtheleftto20px,heightto350pxandthepositiontorelative.Enter#vignettearticle{}andchangethewidthto292px,aligntotheleft(float),text-aligntojustify,andamarginontherightto21pixels.Tofinish,addaninternalmarginonthebottom20pixelsonthechapterincludingthethumbnailsblocks.
Step45Createthebutton
Tocreatethebuttonlocatedunderthetexts,enterinyourlayerstyle#vignettea{}then
UsetheCSSpropertiestoadd"roundingtheangles"witharadiusof7pixels(border-radius),tochangethebackgroundcolourto#e2e2e2(background-color),tochangethetextcolourby#787889,toremovetheunderline(text-decoration),toaddaninternalshadowonthetopandonthebottomfrom5pixels,onytheleftandontherightfrom7pixels.Tofinish,addashadowfollowingthesetting:verticalandhorizontalalignfrom1pixel,size1pixelandcolour#fff.
Step46Hovereffect
Tofinish,addashadowtotheblockwhenthemouseofyourvisitorishoveronthebutton.Write#vignettea:hover{}thenaddtheshadowusingthepropertybox-shadowAswellasthevalues:verticalandhorizontalalign0px,size4pixelsandcolour#666.
Step47TwitterBlock1/2
ItistimenowtocustomizetheTwitterblock.Todoit,enterinyourlayerstyle#twitter{},thenchangethewidthto670pixels,theheightto80pixels(widthandheight).Addaleftexternalmarginof20pixelsandoneonthebottom,80pixels(margin-leftetmargin-bottom),aninternalontheleftandonthetopfrom250et30pixels(padding-leftetpadding-top).
Step48TwitterBlock2/3
Continuetoworkonthesylesroundingtheangleswith10pixelsofradius(border-radius).Changethebackgroundcolourto#b8ddf3(background-colour),usetheGeorgiafont(font-family).Changethesizeandcolourofthefont(font-sizeetcolour),applytheitalicmode(font-style),changetherelativepositionoftheblock(position)andaddashadowonthetextfollowingthesetting:verticalandhorizontalalign1pixel,size1pixelandcolour#fff.
Step49TwitterBlock3/3
TofinishthisTwitterstep,findnowsomestyletoputthebirdicon,thebraceandtheauthorofthemessageatthecorrectplace.Gobacktothesourcecodeofyourlayerstyleandenter#twitter.oiseau{}changethepositiontoabsolute(position),puttheblockat50pxfromtheleftsideandat20pxfromthetop(leftettop).Similarregardingthebrace,butputitat180pxfromtheleftsideandat0pxfromthetop(leftettop).Writenow#twitter.at{}andputtheblockat240pxfromtheleftsideinabsoluteandat120pxfromthetop(position,leftettop).ChangethefontasArialaswellasthecolourto#0e4C8b,thesize12px(font-family,colouretfont-size).Forthelastoperation,removetheshadow(text-shadow).
Step50Footer
Tostartworkingonthefooter,youhavefirsttocustomizethemaincontent.Todoit,enterfooter{}andusetheCCSpropertiestochangethewidthto960px,theheightto200px(widthandtheight)andupdatethecolourandthesizeofthetexts(font-sizeetcolour)andaddagradientinthebackgroundoftheblock,usingthecolours:#343844->#25292F.Tofinish,changethepositiontorelativemode(position).
Step51Customizethelinks
Inthefooter,manyhypertextlinksareused,youaregoingtocustomizeallofthembyoneuniqueoperation.Firthis,enterinthefootera{}andupdatecolourby#d8d8e8,thenforthecolourregardingthecolourusedbythemousemovementoverthelink,writefootera:hover{}andchangethecolourby#fff(color).SeebelowthelinestoaddintoyourCSSfile.
Step52TheChapters
Puttheblocksarticlesatthecorrectplace,writefooterarticle{}andchangealignoftheblocktotheleft(float),adda20pxinternalmarginonthetopandontheleft(padding-topetpadding-left).Updatenowthechapters(balisep)locatedinthefooterwritingfooterarticlep{}andupdatethewidthofthelinesto17px(line-height),updatetheinternalmarginbytop20pxandbottom15px(padding-topetpadding-bottom).
Step53Thelistes
Theblockontherightincludesalistofhypertextlinks.Toupdatethislist,easywritefooterarticleul{}inyourCSSfileandupdatetheinternalmarginto20pixels(padding-top).Updatethelineswithfooterarticleli{}andheightto17pixels(height).Seebelowthetwolinestoaddtoyourlayerstyles.
Step54Astyleforeachblock
Eachblockgetitsownwidthyouneedtoindicateinyourlayerstyle.InthesourcecodeofyourCSSfile,writefooter#foot1{}andupdatewidthto(width),adda50pxexternalmarginontheright(margin-right).Similaractionisrequiredfortheblock2withwidthof370pixels.Regardingblock3,applyawidthof175pixels(withoutmargin).
Step55Thetitles
Thereisatitlebeforeeachblockcustomizelike:(inyourlayerstyle)footerarticle.t{},usepropertiestoupdatecolourby#fff(color),backgroundcolour#24272c(background-colour).Removeunderline(text-decoration),thenadda10pxinternalmarginontherightandontheleft,and5pxonthetopandonthebottom,roundtheanglesusinga12pxradius(border-radius).SeebelowthefewlinestoaddtoyourCSSfile
Step56Copyright
Toclosethereworkofthelayerstyle,youneedtocustomizethebarwhichwillgettheCopyright.Inyourlayerstyle,enter#copy{}andusetheCSSpropertiestoupdatethebackgroundcolourby#d8d8e8(background-colour),thesizeto11pxandthetextcolourto#3d4151.Definenowthewidthto940pixels(width),addaninternalmargin(20px)ontheleftandoneof12pxonthetop(padding-leftetpadding-top).Tofinish,updateheightto28px.Seebelowthelinestoaddtoyourlayerstyle.
Step57InserttheJavascript
TheTemplateisnowdone,youhaveonlyonemorethingtodo:toanimatetheslideshow.Todoit,youaregoingtousethejavascriptnamedCraftyslide.Gototheofficialpagetodownloadthefiles:http://projects.craftedpixelz.co.uk/craftyslide/thencreateanewfolderjs/da,sotre(workfolder)andunzipbothjavascriptfiles.Gobacktothesourcecodeofyourindex.htmlfileandcopythefollowingtwolines(betweenthetags<header>ofyourfile).
1.<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"><!--mce:0--></script>Step58ActivatetheSlideshow
Toactivatetheslideshow,dropalineanddeclareanewtag<script>.Copyoutthelineyoucanfindafterchapter.Donotforgettosaveyourbothfilesindex.htmlandstyles.css(pressonkeysCtrl/Cmd+S).
Step59Finaltests
TheTemplateisfinished,youcantestitnow.Exploreyourfilesandfromyourworkfolder,double-clickonindex.htmlfiletoopenitinyourinternetbrowser(bettertochooseoneofthelastversionsofChromeorFirefox).Checktheslideshowandallblocks.Incasesomethingdoesnotworkperfect,refertothecorrectstep.
