Blog

My Random Thoughts and What Not.

Simple and Professional Blog Layout PSD/HTML Conversion

This tutorial will show you how to take a PSD template and turn it into a HTML/CSS template.

This is part two of creating a simple and professional blog layout. This part will focus on slicing and coding the PSD template created in the first part.

Final Result

Here is what we are looking to create. Click on the screenshot below to see a working demonstration of the HTML template.

Final Result

Getting Started

Make sure to grab the PSD template from part one as you will need it to extract the images we will be using for tutorial.

For this tutorial, I am assuming you have a basic understanding of HTML and CSS. However, if you experience any problems, just leave a comment below and I’ll do my best to answer your questions.

Designing Your Directory Structure

Create an empty folder on your computer called “website”. Inside of that folder, create two folders called “images” and “js”. Then create two files and name them index.html, style.css. Lastly we will be using jquery to animate an effect so make sure to download that and place it in the js folder.

Add the Basic HTML Structure

We begin by opening index.html with your choice of a code editor. I’ll be using Dreamweaver for this tutorial, as that is what I prefer. Most code editing applications will do this automatically for you when you create a new page. Here is what the code block should look like for the required HTML 5 tags.

Link CSS and JS Files

Inside the <head> tags, you need to add the following code to reference our stylesheet.

The code to reference the external jquery script will be placed right before the </body> tag.

The Layout Elements

Below, you can see the different layout elements of the HTML/CSS template. These will be the main sections of our website layout. This is how our website will be setup, with the exception of the footer element being divided into two separate sections.

The Layout Elements

Code the Basic Layout Structure

We will start by coding the basic layout structure of our index.html. Add the following code inside the <body> tags to create the main sections of our website.

<div id=”container”> is used in combination with <div id=”main”> to achieve a sticky footer. <div class=”centering”> is there to make it easier to center our web page. <header>, <section id=”content”>, <aside>, and <footer> make up the four main sections of our website layout.

Code the Header

No image slicing is needed for the header background, so add the following code to your style.css file to set the background.

Here we have set a black background to the <header>, as well as setting the page width for the main sections and centering them on the screen. Also included is a basic reset style which is used to help with browser inconsistencies. You could also use a more advanced variation, such as Eric Meyer’s reset.

Now, we want to add the logo to the header. To do this, we will need to extract it from the PSD. Select the layer the logo is on and then Ctrl + left-click the thumbnail next the the layer name. This will select the logo, then copy and paste the text into a new document with a transparent background. Go to File > Save for Web & Devices, choose PNG-24 as the file type and save it as logo.png in the images folder.

Now add the following code to the index.html to setup the logo for our site.

Now we add a bit of CSS to our style.css to position the logo correctly.

To create the main navigation, add the following HTML to your index.html.

Now add the following CSS to your style.css.

The navigation is floated to the right of the page and placed 31px from the top using the padding property. The individual list items are then floated to the left so they appear next to each other instead of on separate rows. The rest of the code sets up the styles for the links and the rounded rectangle that appear when you hover over a list item.

Code the Main Content

As with the header, very little image slicing is needed to create this section. So return to the PSD and extract the post preview image and comment bubble the same way you did the logo. Again choose the Save for Web Devices and name the images, preview.jpg and comment_bubble.png.

Now that we have the images required, we need to add our HTML. Add the following code inside the <section id=”content”> container of your index.html.

Now add the following CSS to your style.css.

We start by simply setting the width of the <section id=”content”> container and then using the article element with the class post to separate each post by 25px. We then limit the width of the post-title to 585px so that the comment bubble is able to appear on the same row as the title. The <div class=”comment-box”> container uses comment_bubble.png as its background with a height of 31px and a width of 34px. It is floated right so it appears at the end of the row and the 3px top padding is used to vertically center the comment number text.

Next is the p element with the class date which is given a 4px top border to serve as a divider. The post image styling is very simple, we then place post text within a <div> container so we can prevent the text from wrapping around the image with overflow:hidden. The text itself is justified as I think it happens to look better in this case. After the <div> container we clear the floats, so that the read more link and second divider appear below both the image and text.

Code the Aside

For this section, we only need to extract one image from the PSD. Extract the magnifying glass icon for the search box by Ctrl + left-clicking and copy and paste the image into a new document with a transparent background. Again use the Save for Web Devices and name the image searchbutton.png.

Now we add the following code inside the <aside> element of your index.html.

In this code, we begin with the search box which is contained within a <div> container. The other three menu items are comprised of a list and a <div> container, which is used for the hover effect to display a bubble with additional information. The format of the comments differs from the other two items in that it has an avatar image and an additional row of text. For the most part the setup of the aside should be straightforward.

With that out of the way, add the following CSS to your style.css.

We start by setting the background color of the <aside> to #012b3e and use the margin property to separate it from the content section by 75px. The menu item headings are simple <h2> tags with little formatting and 20px padding. The first input that makes up the search box consists of a white box with a width of 226px. The second input is our magnifying glass image sliced earlier and is displayed with the background property. Next we have the “Categories” and “Popular Posts” items which are the basic lists that have a top and bottom dotted border. We then set the height of each list item to 35px and do the same to the line-height as it will then center the text. The next few lines of code are just used to style the links. .bubbleInfo and .popup are used for the additional bubble that appears on hover using the coda bubble jquery effect. Given this wasn’t included in the first part, I am considering this an additional feature and will not discuss it but it will be included in the download. The comments list differ from the other two lists so we set the height to auto as we won’t be using the same technique to center the text and we also adjust the line-height to help position the text.

Code the Footer

This is the section where we need to extract the most images from our PSD. So first up is the footer background, so all that is need is to make a selection of the entire footer bg that is only 1px wide. Then go to Edit > Copy Merged and create a new document and save the image as footer_bg.jpg. The next image we want to create is the list heading bg. For this one we want to select both the bg layer and the border layer and then again go to Edit > Copy Merged and create a new document and save the image as footer_title_bg.jpg. Repeat this for the list item bg and save it as footer_links_bg.jpg. Lastly we grab the mini logo the same way we did the header logo and save it as minilogo.png.

Now to add the following code to the <footer> element of your index.html.

We place both the main and secondary footer within the <footer&gt element to make sure both appear at the bottom of the page. The main footer consists of a 3 column footer with 7 list items per column. The secondary footer mimics the header, but also contains the copyright notice, W3C validation, and social icons. The social icons used in the secondary footer are called Social.me and are made by jwloh.

Now add the following code to your style.css.

The first bit of code added to the general elements section is related to the sticky footer concept created by Steve Hatcher. Now moving on to the footer css, the first line of code sets up our background image and gives the footer a height of 487px. The top margin of -487px is the last bit of code related to the sticky footer. The next two lines set up a 310px column for each of our lists and the second line removing the left padding from the first element as it isn’t needed. The next line is for the headings of the lists, we set the background image, set the width to 290px instead of 310px because of the 20px left padding, and finally use the height/line-height method to center the text. The next several lines deal with the column lists nothing really differs from the other lists created throughout the layout. Now we move on to the secondary footer.

The secondary footer is position correctly by giving it a top margin of 27px. The logo is again position with a top margin of 27px and also given a right margin of 50px. Next we add our navigation links in the form of yet another list which is given a height of 47px so that the right border is the appropriate height to act as a divider. The 11px left and right padding on the list links is for spacing of the vertical lines between the links. The W3C validation and copyright notice is just a simple paragraph. The social icons are very simple as well, floated to the right so that they are flushed up against the right side of the layout.

Finished!

Well that is everything, hopefully you ended up with something similar to the screenshot below. I know my explanations on certain aspects of the code could use some work but hopefully the tutorial was still useful and helpful.

Final Result

Download Source Files

Leave a Reply

Your email address will not be published. Required fields are marked *