Your ads will be inserted here by
AdSense Now!.
Please go to the plugin admin page to paste your ad code.
Hello everybody today il be showing you how to code the web design layout #9 PSD. I recently setup a poll to see which one you all wanted to see as a coded tutorial, and this one won. Thanks to everyone who took part in the submission process.
I promised to do this layout as a 5page full site build BUT ive changed my mind, dont fret though there will be a very intresting complete 5 page website sitebuild coming soon which will also include a screencast. Right lets get started, the first thing you need to do is create a new folder somewhere on your desktop, give it a name. Inside your folder create another folder called “images”. Create a blank CSS & HTML document, save the files as index.HTML and styles.CSS inside your main folder.
Open up your index file and style sheet in your favourite code editor, im going to be using adobe dreamweaver CS3. The first thing we need to do is set our website title and link our stylesheet.
<title>Web Design Layout #9 | Welcome...</title> <link href="styles2.css" rel="stylesheet" type="text/css" />
Inside our BODY tag we can start to mockup our layout, were going to need a main container which our whole template will sit inside, we then need a DIV for our header, logo and menu. The code for it all looks like this.
</head> <body> <div id="container"><!--container starts--> <div id="header"><!--header starts--> <div id="logo"><!--logo starts--> </div><!--logo ends--> </div><!--header ends--> <div id="menu"><!--menu starts--> </div><!--menu ends--> </div><!--container ends--> </body> </html>
With the top area mocked up we can begin to add some styles to each DIV. But first were going to need a background image and color. Open up your PSD file and hide all your layers apart from the background layer, the wood texture in our header, the navigation bar and our grey box on our background.
Once you’ve got something like the image above goto “layer > flatten image” (make sure you dont save your PSD file). Select the rectangular marquee tool and make a selection like this.
Start the selection from the start of one of the grains in the wood texture, then end the selection on another part of a grain.
Selecting / slicing on the grains will ensure the background image is repeated properly, making the slice in the middle of a grain will cause the background image to have inapropriate lines. Save your background as “bg.PNG” inside your images folder. Open up our CSS file and add 0 margin and padding to the whole document, inside the body tag add your background that you just created. The code looks like this.
*{ padding:0; margin:0; } body { /*--WEBSITE BODY--*/ background-image: url(images/bg.png); /*sets background image*/ background-repeat: repeat-x; /*repeats background image horizontally*/ background-color: #e9e9e9; /*color of our background */ font-family: Arial, Helvetica, sans-serif; /*font family*/ }
Refer to the comments within the style sheet, each style is comment coded on what it does. The next styles we need to add are for our main container, header and logo.
#container { /*--WEBSITE CONTAINER--*/ margin: auto; /*centers our website*/ width: 850px; /*gives our website a width of 850px*/ } #header { /*--HEADER CONTAINER--*/ float: left; /*floats our header left*/ height: 123px; /*gives our header a height of 123px*/ width: 850px; /*gives our header a width of 850px same as our container*/ } #logo { /*--LOGO CONTAINER--*/ float: left; /*floats our logo left*/ height: 123px; /*height of the actual image used for the logo*/ width: 279px; /*width of the actual image used for the logo*/ }
To determine the height of our header measure the height of the wood texture used in our PSD file. The logo container’s height will also be the same as the header eles our logo will overlap our navigation. To make the logo goto your PSD file and make a selection like this.
Once you’ve made the selection goto “layer > flatten image”, then goto “image > crop” save the logo as “logo.PNG” inside your images folder. Goto your HTML file inside the “logo DIV” insert your image.
<div id="logo"><!--logo starts--> <a href="http://www.hv-designs.co.uk"><img src="images/logo.png" alt="Welcome..." border="0" /></a> </div><!--logo ends-->
Double check the dimensions of your logo.PNG file and update the height and width of the logo container within the CSS file. Before we add our styles for our menu lets quickly mockup our menu. Create an unordered list with a class of menu-links, then add in your 5 links. For the first link we’ll add a list ID of current. The current ID will basically keep one of the menu items in hover state to show the user what page there on. The code for the menu looks like this.
Your ads will be inserted here by
AdSense Now!.
Please go to the plugin admin page to paste your ad code.
<div id="menu"><!--menu starts--> <ul class="menu-links"><!--menu links start--> <li id="current"><a href="#">Home</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Digital Portfolio</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact Us</a></li> </ul><!--menu links end--> </div><!--menu ends-->
We style the menu like this.
#menu { /*--NAVIGATION CONTAINER--*/ float: left; /*floats our menu left*/ width: 850px; /*gives our menu a width of 850px same as our container*/ height: 57px; /*height of our menu*/ } .menu-links li { /*--NAVIGATION LINKS--*/ list-style:none; /*removes bullets from our list*/ display:block; /*displays links as a block*/ font-size: 14px; /*font size*/ float: left; /*floats our links left*/ font-weight: bold; /*gives our links a bold look*/ } .menu-links li#current a { /*--NAVIGATION CURRENT STATE--*/ background-image: url(images/menu_hover.png); /*image for the link current state*/ background-repeat: no-repeat; /*image doesnt repeat*/ background-position: center; /*centers our background image*/ color: #ff9833; /*text color*/ } .menu-links a { /*--NAVIGATION LINKS--*/ text-decoration: none; /*removes underscore from our links*/ color: #707070; /*sets our link colors*/ display: block; /*displays each link as a block*/ height: 35px; /*gives our block a height of 35px*/ padding-top: 22px; /*adds 22px padding to the top*/ padding-right: 17px; /*adds 17px padding right*/ padding-left: 17px; /*adds 17px padding left*/ text-transform: uppercase; /*transforms text into uppercase*/ } .menu-links a:hover { /*--NAVIGATION HOVER--*/ background-image: url(images/menu_hover.png); /*link hover image*/ background-repeat: no-repeat; /*stops hover image repeating itself*/ background-position: center; /*sets the position of the background image*/ color: #ff9833; /*text color when hovered*/ }
On the right side of our navigation on our PSD file we had an RSS icon with some text. We can easily achieve this in CSS by simply adding another DIV inside the navigation which is floated right. We’ll need a DIV for our logo then another DIV for the text next to it. Firstly lets create our RSS icon, open up your PSD file and save your RSS icon as a single image called “rss.png”, save the image into your images folder. The code inside our menu DIV will now look like this.
<div id="menu"><!--menu starts--> <ul class="menu-links"><!--menu links start--> <li id="current"><a href="#">Home</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Digital Portfolio</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact Us</a></li> </ul><!--menu links end--> <div id="rss-text"><!--rss text starts--> <p class="rss-header">Subscribe Via RSS</p> <p class="text-rss">Updates in your reader</p> </div><!--rss text end--> <div id="rss"><!--rss icon starts--> <a href="#"><img src="images/rss.png" alt="Subscribe" border="0" /></a> </div><!--rss icon ends--> </div><!--menu ends-->
We then style our RSS DIV’s like this.
#rss { /*--RSS ICON CONTAINER--*/ float: right; /*floats our rss div to the right*/ height: 31px; /*gives our rss div a height of 31px exactly the same as the rss icon*/ width: 31px; /*gives our rss div a width of 31px exactly the same as the rss icon*/ margin-top: 15px; /*adds a top marhin of 15px*/ margin-right: 10px; /*adds a right margin of 10px*/ } #rss-text { /*--RSS TEXT CONTAINER--*/ float: right; /*floats our rss text right*/ height: 31px; /*gives our div a height of 31px*/ margin-top: 15px; /*adds a 15px top margin*/ } .rss-header { /*--RSS SUBSCRIBE TEXT--*/ color: #707070; /*sets color of the subscribe text*/ font-weight: bold; /*sets subscribe text to bold*/ font-size: 14px; /*adds a font size of 14px*/ } .text-rss { /*--RSS DESCRIPTION TEXT--*/ color: #828282; /*sets the color of our rss description text*/ font-size: 11px; /*sets font size of our rss description text*/ }
Give the HTML a blast in your favourite browser and see how things pan out. The layout has been tested in both IE7 and FF and works fine without any hiccups. The next part of the template we need to mockup is our featured area, for now we’ll be using a static background which will contain our drop shadow, then inside we’ll add our featured image. The mockup for the featured area is relatively simple, we first make a container which will hold our elements. Inside the container we’ll have two DIV’s, one for the text on the left and one for our image on the right.
<div id="featured"><!--featured starts--> <div id="content-featured"><!--content starts here--> <h1>Portfolio Layout</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac justo vel enim congue accumsan. Fusce ut metus quis lorem consequat mollis. Pellentesque eleifend interdum diam. Phasellus adipiscing ligula sit amet erat consectetur fringilla. Vestibulum viverra eleifend enim. Ut congue pharetra nibh. Suspendisse feugiat, turpis ac ornare ullamcorperd bibendum, dolor. Phasellus at dui. Sed lectus.</p> </div><!--content ends here--> <div id="content-featured-image"><!--featured image starts--> <img src="images/featured-example.png" alt="Featured Example" /> </div><!--featured image ends--> </div><!--featured ends-->
In the code above we have our first DIV of featured, this is our container for the featured area. We then have an ID of content-featured, this DIV is for our image description. As you can see from the code above inside the content-featured DIV we have a h1 tag and a big paragraph. We then move onto our image, which is a simple DIV of content-featured-image which contains our sample image. Our sample image does not contain our drop shadow, we need to cut the drop shadow from our PSD file and set it as a background in our CSS file. Our featured image will then go straight over the top. This is what my featured image background looks like.
The code for our featured area looks like this.
#featured { /*--FEATURED CONTENT CONTAINER--*/ float: left; /*floats our featured div left*/ width: 850px; /*adds a width of 850px same as our container*/ margin-top: 30px; /*adds a top margin of 30px*/ clear: both; /*clears left and right floats*/ } #content-featured { /*--FEATURED CONTENT TEXT BOX--*/ float: left; /*floats our featured text left*/ height: 195px; /*gives us a height of 195px*/ width: 292px; /*gives us a width of 292px*/ } #content-featured h1{ /*--FEATURED CONTENT HEADER--*/ color: #707070; /*sets our featured area h1 tag text color*/ text-transform: uppercase; /*transform our h1 tag to uppercase*/ font-family: Impact; /*sets our font family to impact*/ font-size: 26px; /*gives our h1 tag a font size of 26px*/ } #content-featured p{ /*--FEATURED CONTENT BOX TEXT--*/ color: #9f9e9e; /*sets our paragraph text color*/ font-family: Arial, Helvetica, sans-serif; /*sets our font family for the p tag*/ font-size: 10px; /*sets our paragraph font size*/ line-height: 18px; /*increases our line height to 18px*/ text-align: justify; /*justifys our paragraph*/ } #content-featured-image { /*--FEATURED CONTENT BACKGROUND--*/ height: 241px; /*sets our featured image div height to 241px*/ width: 501px; /*sets our featured image width to 501px*/ float: left; /*floats left*/ margin-left: 35px; /*adds a left margin to 35px*/ background-image: url(images/featured-bg.png); /*adds our background image for our featured images*/ background-repeat: no-repeat; /*sets background to no repeat*/ padding-top: 19px; /*sets top padding to 19px*/ padding-left: 22px; /*sets top padding-left of 22px*/ }
On our PSD file underneath our featured area we have two blocks of text with simple headers. We start with a simple DIV of left and a DIV of right, all the left content in the left DIV and right content in the right DIV. We then create a class for our header tag to sit into and a class for our paragraph. Because we’ve used classes we can apply them to both the left and right content.
<div id="left"><!--left content starts--> <div class="info-header"> <h1>What can i do for you?</h1> </div> <div class="information"><!--information starts--> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac justo vel enim congue accumsan. Fusce ut metus quis lorem consequat mollis. Pellentesque eleifend interdum diam. Phasellus adipiscing ligula sit amet erat consectetur fringilla. Vestibulum viverra eleifend enim. Ut congue pharetra nibh. Suspendisse feugiat, turpis ac ornare ullamcorperd bibendum, dolor. Phasellus at dui. Sed lectus.</p> <p> </p> <p> Phasellus adipiscing ligula sit amet erat consectetur fringilla. Vestibulum viverra eleifend enim. Ut congue pharetra nibh. Suspendisse feugiat, turpis ac ornare ullamcorperd bibendum, dolor. Phasellus at dui. Sed lectus. </p> </div><!--information ends--> </div><!--left content starts--> <div id="right"><!--right content starts--> <div class="info-header"> <h1>Who am i?</h1> </div> <div class="information"><!--information starts--> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac justo vel enim congue accumsan. Fusce ut metus quis lorem consequat mollis. Pellentesque eleifend interdum diam. Phasellus adipiscing ligula sit amet erat consectetur fringilla. Vestibulum viverra eleifend enim. Ut congue pharetra nibh. Suspendisse feugiat, turpis ac ornare ullamcorperd bibendum, dolor. Phasellus at dui. Sed lectus.</p> <p> </p> <p> Phasellus adipiscing ligula sit amet erat consectetur fringilla. Vestibulum viverra eleifend enim. Ut congue pharetra nibh. Suspendisse feugiat, turpis ac ornare ullamcorperd bibendum, dolor. Phasellus at dui. Sed lectus. </p> </div><!--information ends--> </div><!--right content ends-->
The styles for our boxes are.
.information { /*--CONTENT CONTAINER--*/ width: 400px; /*sets a width of 400px*/ float: left; /*floats our information class left*/ color: #9f9e9e; /*sets our font color for our information class*/ font-size: 12px; /*sets our font size*/ text-align: justify; /*justify's our text*/ line-height: 18px; /*sets a line height of 18px*/ margin-right: 25px; /*adds a right margin of 25px*/ } .info-header { /*--CONTENT BOX TITLE CONTAINER--*/ width: 400px; /*sets our header width to 400px same as our information class*/ float: left; /*floats left*/ margin-right: 25px; /*adds a 15px margin right*/ margin-bottom: 10px; /*adds a bottom margin of 10px*/ } .info-header h1 { /*--CONTENT BOX TITLE--*/ color: #ff9833; /*sets our text color*/ text-transform: uppercase; /*transforms our text to uppercase*/ font-family: Impact; /*sets font family to impact*/ font-size: 18px; /*sets font size to 18px*/ line-height: 20px; /*increases line height to 20px*/ border-bottom-width: 1px; /*adds a bottom border with a width of 1px*/ border-bottom-style: solid; /*sets border style to solid*/ border-bottom-color: #c9c9c9; /*sets border color*/ } #left { /*--LEFT CONTENT TEXT BOX--*/ float: left; /*floats left*/ width: 400px; /*sets a width of 400px*/ margin-top: 30px; /*adds a top margin of 30px*/ margin-bottom: 40px; /*adds a bottom margin of 40px*/ } #right { /*--RIGHT CONTENT TEXT BOX--*/ float: right; /*floats right*/ width: 400px; /*sets a width of 400px*/ margin-top: 30px; /*adds a top margin of 30px*/ margin-bottom: 40px; /*adds a bottom margin of 40px*/ }
Now finally for our footer, we need to create the footer outiside our container DIV as the background will be repeating across the screen. Open up your PSD file and make a small selection on your footer area.
Crop the image then save it as “footer_bg.PNG” inside your images folder. We mock our footer up like this.
</div><!--container ends--> <div id="footer"><!--footer starts--> <div id="footer-content"> <p> Copyright © yoursite.com All Rights Reserved</p> </div> </div><!--footer ends-->
Pretty simple, our styles for our footer are.
#footer { /*--FOOTER CONTAINER--*/ background-image: url(images/footer-bg.png); /*sets our footer background8*/ background-repeat: repeat-x; /*sets background to repeat horizontally*/ clear: both; /*clears left and right floats*/ } #footer-content { /*--FOOTER CONTENT--*/ width: 850px; /*adds a width of 850px same as our container*/ margin-top: 50px; /*adds a top margin of 50px*/ margin-right: auto; /*sets right margin to auto*/ margin-bottom: auto; /*sets bottom margin to auto*/ margin-left: auto; /*sets left margin to auto*/ padding-top: 50px; /*adds 50px top padding*/ padding-bottom: 50px; /*adds bottom padding of 50px*/ color: #9F9E9E; /*sets color of footer text*/ text-align: center; /*aligns text center*/ }
Finally give your template a blast in your browser to see how it looks. Thats all from me, dont forget to subscribe via RSS and twitter.
Your ads will be inserted here by
AdSense Now!.
Please go to the plugin admin page to paste your ad code.