Your Project PSD to HTML / CSS Tutorial

Author: | Posted in CSS, HTML 5 Comments

html-css-source

hvdesigns.com helping for make a complete website design with source. Hello welcome to part 2 of the 5 page template series. Today we’ll be converting our PSD to HTML / CSS template. In part 3 we’ll begin to add our additional pages. Right lets get started, the first thing you need to do is create a empty HTML and blank CSS file inside a folder called “your project”, save your blank HTML file as index.html and your blank CSS file as styles.css. Also inside your folder create an empty folder called images.

step1

Open up your blank HTML file and add your website title inbetween the title tag, underneath the title tag link your css file.

Before we start to add our styles in the style sheet we need to create a few images from our PSD file. Open up your PSD file in photoshop, hide all the layers associated with the featured area then make a selection like this.

step2

Make sure you select the background beneath the divider line, the selection should also be the whole width of your canvas (900px). Save the file as “bg.png” inside your images folder. You also need to make a selection around your website logo.

step3

Acquire your selection around the logo has tight as you can get it. Copy and paste your logo to a new canvas with a transparent background then save the image as “logo.png”. We now also need the background in the header, so make a selection around the top part of the header including the divider line.

You don’t have to use the big image if you don’t want to, if you favor you can use a chunk of the background and replicate it then code the divider line separately. Right now we have some images to work with lets begin to add our css styles, head over to your css style sheet and add the following code. (Refer to commented code for each style)

Save your work and test your layout in firefox and internet explorer, the navigation should now work as planned. Also in our navigation code you will notice the “home” link has an ID of current this ID of current will principally keep the link hover styling for that precise page, so if your on the home page the medium solid blue line will stay under the link “home” when we create our additional pages later on we’ll need to remove the ID of current from the home link and add it to another link which ever page your making next.

Moving on… we now have to code up our featured section, head over to your PSD file, the images we need to slice are the little bullet point in the featured title area, our featured image with frame, our left button and our right button.

step5

Save all images unconnectedly on transparent backgrounds within your images folder. We can now begin to add our div’s for our featured area. Add the following code beneath our ending div for our top rudiments but above our header ending div. I’ve also added dummy text and titles for our featured area.

step6

Time to move onto our main content area, we’ll be start with the left content first. The boxes for our content will all be made using css. If you look at the PSD file you will see the boxes have two strokes in two different colors we can accomplish this by creating a div with one of the borders, then inside that div create another div slightly smaller with the other border added. We mock it up like this.

step7

View Complete Tutorial

Comments
  1. Posted by Micky
  2. Posted by R Aflec
  3. Posted by 3TurtleStudios
  4. Posted by Brett Widmann
  5. Posted by Justin Albert

Add Your Comment