August 6th, 2012 in Photoshop Tutorials by Peter Kinney
Short-Run Booklet Design Pt. 1
1 Votes, Rating: 5.00
Loading ...Good evening welcome to another tutorial by the hv team, in todays tutorial il be showing you how to slice and dice the dark layout #2 PSD into a working template.
Right lets get started, the first thing you need to do is create a new folder on your desktop called dark layout, inside this folder you need three more folders “images”, “js” and “styles”. Inside the “styles” folder create two blank CSS files “style.css” and “ie.css”, then in the main folder create your blank HTML file “index.html”.
The “js” folder will remain empty untill we come to our jquery jflow slider towards the end of the tutorial. The next part we need to tackle are our image slices, the first slice your going to need to make is for our background. (all images are .png files on a transparent backgrounds).
You dont need to slice a big part of the bits that will be repeated, you can use as little as a 1 pixel wide slice. Save the first slice as “bg.png”. The next slice is for our metal looking navigation bar, again the slice doesnt have to be massive as it will be repeated when we code our css.
Also on our navigation bar we have our little seperators, your also going to need to slice one of these into a seperate image.
Hide all your header elements in your layers pallette than make a selection around the whole of your header pattern, save the file as header_bg.png.
We also have a pattern background in our featured area, hide all your featured elements and make a selection around your featured background, ideally the selection needs to end when the pattern disapears eles you will get unexpected lines in the background.
If i wanted the content boxes to be rounded across all browser types id slice up our content boxes, but this time im not going to bother, instead il be rounding them off using CSS, the only trouble is some browsers do no support the border-radius style yet. So people using firefox, mozilla and safari will benifit from the rounded corners but everybody eles who isnt using them browser types will get square boxes.
The next slices we need to make are for our footer, we need to make two slices, the actual footer and the repeated background. We’ll start with the background that needs to be repeated.
Then our actual footer box.
Thats all the background slices taken care off we now need to start slicing some of the additional elements like our search submit button, our icons and our featured arrows. We’ll start with our search submit button.
Our RSS button.
We also need to slice both left and right arrow buttons on our featured slider.
Our actual featured image for our featured slider. It might be a good idea to note the size of your background selection you made on the featured background mine was about 300px in height so really your featured images shouldnt exceed 300px in height.
Now for our individual icons, try and keep the selection as tight as you can get it, also to make life easier make sure there icons are all the same width which means you may need to resize some by a traction or two. All mine are 39px wide.
Also in ouor sidebar content box inbetween our list items we have a divider seperating each item, you will also need to slice that, dont slice it all you just need a fraction of it as it will be repeated horizontally via css when we code it.
You should now have 17 images in your image folder, here’s a screenshot of my images folder.
We can now start coding our layout, open up your html file and both css files into your code editor il be using dreamweaver. In the head of your html file link your stylesheet style.css, for the ie.css file we need to use some special code which looks like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HV-Designs.co.uk - Dark Layout #2 PSD Sitebuild</title> <link href="styles/style.css" rel="stylesheet" type="text/css" /> <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="styles/ie.css" /> <![endif]--> </head> <body> </body> </html>
We can now begin to start mocking up our layout we’ll start with our header, logo, search and navigation.
The code looks like this.
<div id="container"><!--CONTAINER STARTS--> <div id="header"><!--HEADER STARTS--> <div id="logo"><!--LOGO STARTS--> </div><!--LOGO ENDS--> <div id="search"><!--SEARCH STARTS--> </div><!--SEARCH ENDS--> </div><!--HEADER ENDS--> <div id="navigation"><!--NAVIGATION STARTS--> </div><!--NAVIGATION ENDS--> </div><!--CONTAINER ENDS-->
Our css looks like this, please refer to the commented code next to each style.
/* ----------MAIN BODY STYLES---------- */ * { margin: 0px; /*SETS 0 MARGIN*/ padding: 0px; /*SETS 0 PADDING*/ } body { color: #bababa; /*MAIN WEBSITE TEXT COLOR*/ font-family: Verdana, Arial, Helvetica, sans-serif; /*SIZE OF TEXT 0.69EM = 11PX*/ background-image: url(../images/bg.png); /*OUR BACKGROUND IMAGE*/ background-repeat: repeat-x; /*REPEATS BACKGROUND HORIZONTALLY*/ background-color: #000000; /*SETS THE COLOR OF OUR BACKGROUND WHEN THE BACKGROUND IMAGE COMES TO AN END*/ } /* ----------CONTAINER STYLES---------- */ #container { width: 950px; /*MAXIMUM WIDTH OF OUR LAYOUT*/ margin-top: 13px; /*ADDS A TOP MARGIN TO THE TOP OF OUR CONTAINER*/ margin-right: auto; /*AUTO MARGIN*/ margin-left: auto; /*AUTO MARGIN*/ } /* ----------HEADER STYLES---------- */ #header { float: left; /*FLOATS HEADER LEFT*/ height: 155px; /*ADDS A FIXED HEIGHT*/ width: 950px; /*ADDS A FIXED WIDTH, SHOULD BE SAME AS CONTAINER*/ background-image: url(../images/header_bg.png); /*OUR HEADER BACKGROUND IMAGE*/ background-repeat: no-repeat; /*STOPS HEADER BACKGROUND REPEATING */ } #logo { float: left; /*FLOATS LOGO LEFT*/ margin-top: 45px; /*ADDS TOP MARGIN*/ } /* ----------HEADER SEARCH STYLES---------- */ #search { float: right; /*FLOATS SEARCH RIGHT*/ margin-top: 55px; /*ADDS TOP MARGIN*/ } /* ----------NAVIGATION STYLES---------- */ #navigation { float: left; /*FLOATS NAV LEFT*/ height: 45px; /*ADDS FIXED HEIGHT*/ width: 950px; /*ADDS FIXED WIDTH SAME AS OUR CONTAINER*/ background-image: url(../images/nav_bg.png); /*OUR NAV BACKGROUND IMAGE*/ background-repeat: repeat-x; /*REPEATS NAVIGATION BACKGROUND HORIZONTALLY*/ }
When tested in your browser you should have something like this.
Now lets begin to add some of the elements to our header. We’ll start with our website title and slogan. Inside your logo div add a simple h1 tag with your website title, because on our PSD file one of the words are in bold we need to add a span tag with a class of bold to the word we want in bold. Underneath our h1 tag add a simple p tag with a class of slogan then your slogan inbetween. The code looks like this.
<div id="logo"><!--LOGO STARTS--> <h1>your<span class="bold">website</span></h1> <p class="slogan">fancy slogan here</p> </div><!--LOGO ENDS-->
We can now style these tags using our css. Add these styles to your stylesheet.
h1 { font-size: 36px; /*H1 FONT SIZE*/ color: #FFFFFF; /*H1 FONT COLOR*/ font-weight: normal; /*SETS FONT WEIGHT TO NORMAL*/ letter-spacing: -3px; /*DECREASES LETTER SPACING (the space between each letter)*/ } .slogan { text-align: right; /*ALIGNS SLOGAN TEXT RIGHT*/ text-transform: capitalize; /*CAPITALIZES THE FIRST LETTER ON EACH WORD*/ } .bold { font-weight: bold; /*ADDS BOLD FONT WEIGHT*/ }
You should now have a your website title and slogan nicely presented on your template.
Lets start building our search form, please note the search has to actually be connected up for it work, im just demonstrating the styling side. Inside your search div add a simple form with just a text field and submit button. On your submit button you’ll need to change the input type to “image” then add an addition attribute called “src” with the url to the button. Once you’ve done that add a class of search-field to the search field and a class of “search-btn” to the submit button, the code looks like this.
<div id="search"><!--SEARCH STARTS--> <form action="" method="get"> <input type="text" class="search-field" value="Search..." size="35" /><input type="image" class="search-btn" value="Go" src="images/search_btn.png" /> </form> </div><!--SEARCH ENDS-->
The css for our search field and button are.
.search-field { font-style: italic; /*SETS FONT TO ITALIC*/ color: #FFFFFF; /*SEARCH TEXT COLOR*/ border: 1px solid #2a2a2a; /*ADDS 1 PX BORDER IN COLOR SPECIFIED*/ background-color: #000000; /*CHANGES BACKGROUND COLOR IN SEARCH FIELD*/ padding: 7px; /*ADDS PADDING*/ margin-right: 10px; /*ADDS RIGHT MARGIN*/ } .search-btn { vertical-align: top; /*CHANGES VERTICAL ALIGNMENT ON SEARCH BUTTON*/ }
You should now have something like this.
Now for our navigation bar, we’ll start with a simple list creating each item in the list a block element. Each list item will also have our little seperator image after each link.
<div id="navigation"><!--NAVIGATION STARTS--> <ul class="nav-links"> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">work</a></li> <li><a href="#">forum</a></li> <li><a href="#">services</a></li> <li><a href="#">contact</a></li> </ul> </div><!--NAVIGATION ENDS-->
Here’s the css for our navigation.
.nav-links li { list-style-type: none; /*REMOVES BULLET POINTS FROM THE LIST*/ float: left; /*FLOATS LEFT*/ text-align: center; /*ALIGNS TEXT CENTER*/ letter-spacing: -1px; /*DECRESES LETTER SPACING*/ background-image: url(../images/seperator.png); /*SEPERATOR IMAGE*/ background-repeat: no-repeat; /*STOPS SEPERATOR REPEATING*/ background-position: right; /*ALIGNS THE SEPERATOR RIGHT OF EACH NAVIGATION LINK*/ } .nav-links li a { text-decoration: none; /*REMOVES UNDERSCORE FROM LINK ITEMS*/ color: #000000; /*COLOR OF OUR NAVIGATION LINKS*/ text-transform: uppercase; /*TRANSFORMS NAVIGATION LINKS TO ALL CAPITAL LETTERS*/ font-size: 12px; /*ADDS FONT SIZE*/ display: block; /*DISPLAYS THE NAV LINKS AS A BLOCK ELEMENT*/ height: 29px; /*ADDS A FIXED HEIGHT TO NAV LINKS*/ width: 100px; /*ADDS A FIXED WIDTH TO NAV LINKS*/ padding-top: 15px; /*ADDS TOP PADDING TO EACH LINK*/ } .nav-links li a:hover { color: #666666; /*COLOR OF LINK WHEN HOVERED*/ }
Also on our navigation in our PSD file we had a little rss icon on the right of the navigation, we can create that the same we did our navigation above.
<ul class="rss"> <li><a href="#"><img src="images/rss_icon.png" alt="Subscribe Via RSS" /></a></li> </ul> </div><!--NAVIGATION ENDS-->
The css for our rss icon is similar too.
.rss li { list-style-type: none; /*REMOVES BULLET POINTS FROM THE LIST*/ float: right; /*FLOATS RSS LINKS RIGHT*/ margin-right: 10px; /*ADDS RIGHT MARGIN*/ margin-top: 5px; /*ADDS TOP MARGIN*/ } .rss li img { border: none; /*REMOVES BORDER FROM IMAGE*/ }
You should now have something like this.
Thats the header part of our website done, lets move onto our featured area. We’ll mock the featured area up like this.
The code looks like this.
<div id="featured-area"><!--FEATURED AREA STARTS--> <div class="featured-control-left"><!--LEFT ARROW START--> </div><!--LEFT ARROW END--> <div class="featured-content"><!--FEATURED CONTENT STARTS--> <div class="featured-text"><!--FEATURED TEXT STARTS--> </div><!--FEATURED TEXT ENDS--> </div><!--FEATURED CONTENT ENDS--> <div class="featured-control-right"><!--RIGHT ARROW STARTS--> </div><!--RIGHT ARROW END--> </div><!--FEATURED AREA ENDS-->
The css for the code above looks like this.
#featured-area { background-repeat: no-repeat; /*STOPS BACKGROUND REPEATING*/ background-image: url(../images/content_bg.png); /*ADDS OUR CONTENT BACKGROUND IMAGE*/ float: left; /*ADDS A FIXED HEIGHT*/ width: 950px; /*ADDS A FIXED WIDTH*/ margin-bottom: 20px; /*ADDS BOTTOM MARGIN*/ } .featured-control-left { float: left; /*FLOATS LEFT*/ height: 170px; /*ADDS A FIXED HEIGHT*/ width: 33px; /*ADDS A FIXED WIDTH*/ padding-top: 130px; /*ADDS TOP PADDING*/ } .featured-text { float: right; /*FLOATS RIGHT*/ width: 425px; /*ADDS A FIXED WIDTH*/ height: 260px; /*ADDS A FIXED HEIGHT*/ padding-top: 40px; /*ADDS TOP PADDING*/ padding-right: 20px; /*ADDS RIGHT PADDING*/ } .featured-content { float: left; /*FLOATS LEFT*/ height: 300px; /*ADDS A FIXED HEIGHT*/ width: 884px; /*ADDS A FIXED WIDTH*/ } .featured-control-right { float: right; /*FLOATS RIGHT*/ height: 170px; /*ADDS A FIXED HEIGHT*/ width: 33px; /*ADDS A FIXED WIDTH*/ padding-top: 130px; /*ADDS PADDING TOP*/ }
You should now have some solid foundations for your featured area, lets insert some of our graphic elements. Inside the div’s featured-control-right and featured-control-left insert your arrow icons.
<div id="featured-area"><!--FEATURED AREA STARTS--> <div class="featured-control-left"><!--LEFT ARROW START--> <img src="images/left_arrow.png" alt="Slide Left" /> </div><!--LEFT ARROW END--> <div class="featured-content"><!--FEATURED CONTENT STARTS--> <div class="featured-text"><!--FEATURED TEXT STARTS--> </div><!--FEATURED TEXT ENDS--> </div><!--FEATURED CONTENT ENDS--> <div class="featured-control-right"><!--RIGHT ARROW STARTS--> <img src="images/right_arrow.png" alt="Slide Right" /> </div><!--RIGHT ARROW END--> </div><!--FEATURED AREA ENDS-->
Underneath the class “featured-content” insert your featured image. Insde the class “featured-text” add a h2 tag with a header then add a paragraph wrapped in a p tag.
<div id="featured-area"><!--FEATURED AREA STARTS--> <div class="featured-control-left"><!--LEFT ARROW START--> <img src="images/left_arrow.png" alt="Slide Left" /> </div><!--LEFT ARROW END--> <div class="featured-content"><!--FEATURED CONTENT STARTS--> <img src="images/featured_image01.png" alt="Featured Image 01" /> <div class="featured-text"><!--FEATURED TEXT STARTS--> <h2>lorem ipsum dolor</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a elit risus, in pretium dolor. Nullam egestas lacus ante. Integer cursus elementum nunc in convallis. Praesent condimentum justo vel nunc vestibulum vitae vehicula purus dignissim. Integer cursus elementum nunc in convallis. Praesent condimentum justo vel nunc vestibulum vitae vehicula purus dignissim.</p> </div><!--FEATURED TEXT ENDS--> </div><!--FEATURED CONTENT ENDS--> <div class="featured-control-right"><!--RIGHT ARROW STARTS--> <img src="images/right_arrow.png" alt="Slide Right" /> </div><!--RIGHT ARROW END--> </div><!--FEATURED AREA ENDS-->
You now need to add some addtional styles in your style sheet, because we’ve added an image into the featured area we need to make sure that no browser adds a border to it, we also need to style our h2 tag.
h2 { color: #FFFFFF; /*H2 FONT COLOR*/ text-transform: uppercase; /*TRANSFORMS TEXT TO UPPERCASE*/ font-size: 18px; /*H2 FONT SIZE*/ } .featured-content img { margin-left: 20px; /*ADDS A LEFT MARGIN*/ margin-right: 20px; /*ADDS A RIGHT MARGIN*/ float: left; /*FLOATS LEFT*/ }
Your featured area should now look something like this.
We’ll add our jquery slider towards the end of the tutorial. The wireframe for our content boxes is really easy, we just create two classes “left-content” and “right-content”.
<div class="left-content"><!--LEFT CONTENT STARTS--> </div><!--LEFT CONTENT ENDS--> <div class="right-content"><!--RIGHT CONTENT ENDS--> </div><!--RIGHT CONTENT ENDS-->
The styles for these classes are as follows.
/* ----------LEFT CONTENT STYLES---------- */ .left-content { float: left; /*FLOATS LEFT CONTENT BOX LEFT*/ width: 560px; /*ADDS A FIXED WIDTH*/ -moz-border-radius: 15px; /*ADDS A BORDER RADIUS (applys to Mozilla/Firefox and Safari 3 users ONLY)*/ -webkit-border-radius: 15px; /*ADDS A BORDER RADIUS (applys to Mozilla/Firefox and Safari 3 users ONLY)*/ background-color: #0a0a0a; /*LEFT CONTENT BACKGROUND COLOR*/ border: 1px solid #181818; /*LEFT CONTENT 1 PX BORDER AND BORDER COLOR*/ padding: 20px; /*ADDS PADDING ALL THE WAY AROUND*/ } /* ----------RIGHT CONTENT STYLES---------- */ .right-content { float: right; /*FLOATS RIGHT CONTENT BOX RIGHT*/ width: 290px; /*ADDS FIXED WIDTH*/ -moz-border-radius: 15px; /*ADDS A BORDER RADIUS (applys to Mozilla/Firefox and Safari 3 users ONLY)*/ -webkit-border-radius: 15px; /*ADDS A BORDER RADIUS (applys to Mozilla/Firefox and Safari 3 users ONLY)*/ background-color: #0a0a0a; /*RIGHT CONTENT BACKGROUND COLOR*/ border: 1px solid #181818; /*RIGHT CONTENT 1 PX BORDER AND BORDER COLOR*/ padding: 20px; /*ADDS PADDING ALL THE WAY AROUND*/ }
Included in the styles above are the css styles for border-radius which makes the corners on your content boxes round, as stated in the comments it only applys to Mozilla/Firefox and Safari 3 users ONLY every other browser will see square corners. Inside our left-content box were just going to add some simple paragraphs with a h2 tag.
<div class="left-content"><!--LEFT CONTENT STARTS--> <h2>lorem ipsum dolor</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a elit risus, in pretium dolor. Nullam egestas lacus ante. Integer cursus elementum nunc in convallis. Praesent condimentum justo vel nunc vestibulum vitae vehicula purus dignissim. Integer cursus elementum nunc in convallis. Praesent condimentum justo vel nunc vestibulum vitae vehicula purus dignissim.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a elit risus, in pretium dolor. Nullam egestas lacus ante. Integer cursus elementum nunc in convallis. Praesent condimentum justo vel nunc vestibulum vitae vehicula purus dignissim. Integer cursus elementum nunc in convallis. Praesent condimentum justo vel nunc vestibulum vitae vehicula purus dignissim.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a elit risus, in pretium dolor. Nullam egestas lacus ante. Integer cursus elementum nunc in convallis. Praesent condimentum justo vel nunc vestibulum vitae vehicula purus dignissim. Integer cursus elementum nunc in convallis. Praesent condimentum justo vel nunc vestibulum vitae vehicula purus dignissim.</p> </div><!--LEFT CONTENT ENDS-->
Our h2 tag is already styled in the style sheet but our p tags aren’t so add these simple styles in your style sheet.
p { font-size: 12px; /*TEXT FONT SIZE*/ line-height: 22px; /*TEXT LINE HEIGHT*/ text-align: justify; /*JUSTIFYS OUR PARAGRAPHS*/ margin: 5px 0 10px; /*ADDS TOP MARGIN OF 5PX AND BOTTOM MARGIN OF 10PX NO MARGIN LEFT OR RIGHT*/ padding: 0; /*ADDS NO PADDING*/ }
Our right content box looks tricky to really it isnt, for our right-content box we just create a simple list, each list item will have its very own class, the code looks like this.
<div class="right-content"><!--RIGHT CONTENT ENDS--> <ul class="right-content-list"> <!--RIGHT CONTENT LIST STARTS--> <li class="lock"><!--LOCK ICON STARTS--> <h3>lorem ipsum dolor</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a elit risus, in pretium dolor. Nullam egestas lacus ante.</p> </li><!--LOCK ICON ENDS--> <li class="cog"><!--COG ICON STARTS--> <h3>lorem ipsum dolor</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a elit risus, in pretium dolor. Nullam egestas lacus ante.</p> </li><!--COG ICON ENDS--> <li class="coins"><!--COINS ICON STARTS--> <h3>lorem ipsum dolor</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a elit risus, in pretium dolor. Nullam egestas lacus ante.</p> </li><!--COINS ICON ENDS--> <li class="mail"><!--MAIL ICON STARTS--> <h3>lorem ipsum dolor</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a elit risus, in pretium dolor. Nullam egestas lacus ante.</p> </li><!--MAIL ICON ENDS--> </ul><!--RIGHT CONTENT LIST ENDS--> </div><!--RIGHT CONTENT ENDS-->
We then style out list as normal but with a few extra styles for our list classes.
.right-content-list li { list-style-type: none; /*REMOVES BULLET POINTS FROM THE LIST*/ } .right-content-list li p { font-size: 11px; /*LIST P TAG FONT SIZE*/ line-height: 18px; /*LIST P TAG FONT LINE HEIGHT*/ background-image: url(../images/divider.png); /*OUR DIVIDER IMAGE UNDERNEATH EACH LIST*/ background-repeat: repeat-x; /*REPEATS DIVIDER IMAGE HORIZONTALLY*/ background-position: bottom; /*PLACES THE DIVIDER AT THE BOTTOM OF THE P TAG*/ padding-bottom: 15px; /*ADDS PADDING TO THE BOTTOM OF THE P TAG IN THE LIST*/ } li.lock { background-image: url(../images/lock_icon.png); /*OUR LOCK ICON*/ background-repeat: no-repeat; /*STOPS ICON REPEATING*/ background-position: left top; /*KEEPS THE ICON IN THE TOP LEFT CORNER*/ padding-left: 50px; /*ADDS LEFT PADDING*/ } li.cog { background-image: url(../images/cog_icon.png); /*OUR COG ICON*/ background-repeat: no-repeat; /*STOPS ICON REPEATING*/ background-position: left top; /*KEEPS THE ICON IN THE TOP LEFT CORNER*/ padding-left: 50px; /*ADDS LEFT PADDING*/ } li.coins { background-image: url(../images/coins_icon.png); /*OUR COINS ICON*/ background-repeat: no-repeat; /*STOPS ICON REPEATING*/ background-position: left top; /*KEEPS THE ICON IN THE TOP LEFT CORNER*/ padding-left: 50px; /*ADDS LEFT PADDING*/ } li.mail { background-image: url(../images/mail_icon.png); /*OUR MAIL ICON*/ background-repeat: no-repeat; /*STOPS ICON REPEATING*/ background-position: left top; /*KEEPS THE ICON IN THE TOP LEFT CORNER*/ padding-left: 50px; /*ADDS LEFT PADDING*/ }
Test your template in your browser and you should have something like this.
Now for our footer, we want our footer to span across the browser just like our background/navigation does, to do this we need create our footer outside the container div.
</div><!--CONTAINER ENDS--> <div id="footer"><!--FOOTER STARTS--> <div id="footer-content"><!--FOOTER CONTENT STARTS--> <P>copyright © yoursite.com | all rights reserved | design & coded by <a href="http://www.richard-carpenter.co.uk">richard carpenter</a></P> </div><!--FOOTER CONTENT ENDS--> </div><!--FOOTER ENDS--> </body> </html>
The footer div is the background that will repeat across the browser, the footer-content div will be where our footer content goes. The css looks like this.
/* ----------FOOTER STYLES---------- */ #footer { background-image: url(../images/footer_bg.png); /*ADDS OUR BACKGROUND IMAGE*/ background-repeat: repeat-x; /*REPEATS BACKGROUND HORIZONTALLY*/ clear: both; /*CLEARS BOTH FLOATS*/ height: 82px; /*ADDS A FIXED HEIGHT*/ background-position: bottom; /*PLACES BACKGROUND AT THE BOTTOM OF THE DIV*/ } #footer-content { background-image: url(../images/footer_bg2.png); /*ADDS OUR BACKGROUND IMAGE*/ background-repeat: repeat-x; /*REPEATS BACKGROUND HORIZONTALLY*/ height: 82px; /*ADDS A FIXED HEIGHT*/ width: 950px; /*ADDS A FIXED WIDTTH*/ margin: auto; /*AUTO MARGIN CENTERS OUR FOOTER*/ background-position: bottom; /*PLACES BACKGROUND AT THE BOTTOM OF THE DIV*/ } #footer-content p { text-transform: capitalize; /*TRANSFORMS THE FIRST LETTER IN EVERY WORD TO A CAPITAL LETTER*/ color: #000000; /*COLOR OF FOOTER TEXT*/ padding-top: 50px; /*ADDS TOP PADDING*/ padding-left: 20px; /*ADDS LEFT PADDING*/ }
Your template should now be complete, there’s just some styles id recommend adding to get you started. We need to style our hyper links, h3 and h4 tags just incase you use them.
a:link { color: #333333; /*COLOR OF A LINK*/ text-decoration: none; /*REMOVES UNDERSCORE*/ } a:visited { text-decoration: none; /*REMOVES UNDERSCORE*/ color: #333333; /*COLOR OF A VISITED LINK*/ } a:hover { text-decoration: underline; /*ADDS UNDERSCORE*/ color: #666666; /*COLOR OF A HOVERED LINK*/ } a:active { text-decoration: none; /*REMOVES UNDERSCORE*/ color: #333333; /*COLOR OF A ACTIVE LINK*/ } h3 { color: #FFFFFF; /*H3 FONT COLOR*/ text-transform: uppercase; /*TRANSFORMS TEXT TO UPPERCASE*/ font-size: 14px; /*H3 FONT SIZE*/ font-weight: normal; /*REMOVES BOLD*/ } h4 { color: #FFFFFF; /*H4 FONT COLOR*/ text-transform: uppercase; /*TRANSFORMS TEXT TO UPPERCASE*/ font-size: 11px; /*H4 FONT SIZE*/ }
There are also some styles you need to add to the “ie.css” file, the styles listed below are just minor fixes for items that dont quite lineup.
/* INTERNET EXPLORER HACKS */ /* ----------HEADER SEARCH STYLES---------- */ .search-btn { margin-top: 1px; /*ADDS A TOP MARGIN TO SEARCH BUTTON*/ } /* ----------FOOTER STYLES---------- */ #footer-content p { padding-top: 45px; /*ADDS TOP PADDING*/ }
Were now going to intergrate the jflow plugin for jquery on our featured area. The featured once done should slide across to any other items you wish to add in there. The first we need to do is download jflow and the jquery libary file, please note im using the jquery libary 1.2.6 NOT the new one as i had trouble with the latest libary. Link the files in the head of your document.
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HV-Designs.co.uk - Dark Layout #2 PSD Sitebuild</title> <link href="styles/style.css" rel="stylesheet" type="text/css" /> <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="styles/ie.css" /> <![endif]--> <script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script> <script src="js/jquery.flow.1.1.min.js" type="text/javascript"></script> </head>
Also inside the head section add this bit of javascript.
<script type="text/javascript"> $(function() { $("div#controller").jFlow({ slides: "#slides", width: "950px", height: "300px" }); }); </script>
The width and height should be set to the dimensions of the featured area, you will also notice the div “slides” you will need to ad this div into your featured area. Above the featured-area div add the jflow controller code.
<div id="controller" class="hidden"> <span class="jFlowControl">No 1</span> <span class="jFlowControl">No 2</span> <span class="jFlowControl">No 3</span> </div>
In your style sheet we need to an additional style which will hide our 2nd and third slides.
.hidden { display: none; /*hides our 2nd and 3rd featured images*/ }
Underneath our featured-area div add a div id of slides then add an empty div.
<div id="featured-area"><!--FEATURED AREA STARTS--> <div id="slides"> <div><!--SLIDE #1 STARTS-->
Dont forget to close the div at the bottom. Now everything inbetwwen the blank div and the end of the blank div will slide, for the slide to actually work though you need 3 slides in total. Make sure the 2nd and third slides all start and end with a blank div. I find it best just copy everything from the blank div to the closing blank div then edit the content accordingly.
For the buttons to work on the featured area you need to add the jflow classes to the buttons.
<div class="featured-control-left"><!--LEFT ARROW START--> <img src="images/left_arrow.png" class="jFlowPrev" alt="Slide Left" /> </div><!--LEFT ARROW END--> <div class="featured-control-right"><!--RIGHT ARROW STARTS--> <img src="images/right_arrow.png" class="jFlowNext" alt="Slide Right" /> </div><!--RIGHT ARROW END-->
You can see a live work demo by clicking the button below.
Thats it hope you enjoyed this tutorial, any questions just give me a shout, dont forget to subscribe via rss and twitter, your help and support is much appreciated.
Be Part Of The Community!
Become part of the hv-designs community.
Subscribe Via RSS or Follow Us On Twitter.
10 Responses to “Coming Soon Page :: PSD Sitebuild”