Welcome, in this tutorial il teach you how to convert my “creative design layout” into a working CSS/HTML valid website.

Firstly id do the tutorial on creating the layout or skip it and download the PSD file from the hv-designs shop, if you do my tutorial try and get it as close to my design as possilable, changes you wish to make can be done easily once coded. Right lets begin…

Create a folder on your desktop call it what ever you want, within the folder create another folder called “images”. Open up notepad then just goto “file > save as” then enter “styles.css” as the filename make sure you include the .css bit. Open up dreamweaver and click HTML under create new column.

You should now have a blank HTML document in dreamweaver, goto “file > save as” then save it as “index.html”. You should now be all set to go. In dreamweaver you need to be in code view and the CSS panel should be open. The CSS panel is the box on the right, if you cant see it click the little grey arrow. Also in dreamweaver there are 3 views available code, split and design, let me just explain what these are. Code is to view the code to the HTML document that is open. Split is a split screen version half design and half code. Design is how your website looks BUT dont go by what is actually in the design view as sometimes layouts look split up, not aligned properly etc… its very rare i used the design view, i always check what the layout looks like in my browsers, IE and Firefox. You can do this by pressing F12 on the keyboard.

Right enough explaining lets get on, once the CSS panel is open click the “attach style sheet” button.

Click browse in the box that pops up and navigate to the style sheet you created (the styles.css file).

Notice in the HTML code in your index.html file you have a new line of code.

This line of code is VERY important as it tells the HTML file to look in this file (styles.css) to style the actual document. But most of you new that right…! Okay the way i code my templates are i work from the top of the PSD file and work my way down, i also slice this way also, most people slice everything first the start coding each item. I find it easier my way, but feel free to experiment.

Lets start by laying out the 1st foundations of our website, we need a container, header, navbar and logo. The container is the box which will basically hold our layout, the header is the header the navbar is the navbar and the
logo is the logo. Pretty simple ah?! All these elements will be wrapped in divs and looks like this.

  Untitled Document  <!--CONTAINER--> <div id="container"> <!--HEADER BACKGROUND--> <div id="header"> <!--MENU BAR--> <div id="nav"></div> <!--MENU BAR END-->  <!--HEADER LOGO-->  <!--HEADER LOGO END--></div> <!--HEADER BACKGROUND END--></div> <!--CONTAINER END-->

Lets explain the code above in more detail now you no what it looks like. The 1st div is the the container which like i said above is the box that basically holds the website. Everything for the website will be inside this div. Then theres the header div, now this div will only hold a background image as you will see when we add the styles. Now beacuse we want the background image behind the menu bar and logo we need to place these item inside the header div and as you can see the header div ends at the bottom of the html file with the container. When we add our website content we must place it after the header end div but before the container end div. Now lets being to style our divs. Open up your styles.css file in dreamweaver, use the tabs to flick between the two files.

The first bit of CSS code we need to add is to style the body of the document which looks like this.

 *{ padding:0; margin:0; }  body { font-family:Verdana, Arial, Helvetica, sans-serif; background-image:url(images/bg.png); background-repeat:repeat-x; background-color:#eae5cf; padding:0; margin:0; }

We dont want any margin or padding around the edges of the website so we set the padding and margin to 0, we need to add our font family which is the fonts were going to be using through out the layout. Then theres a background image which is our background, il show you how to create that in a minute. We want our background image to repeat along the X axis which is horizontally. Background color is the color of our background which relates to the background on the PSD file. To create the background image header over to your PSD file and create a 1 or 2 pixel selection like this. Make sure all your layers are flattened, BUT DONT SAVE IT THE PSD FILE, just copy and paste the selection to a new document then undo everything on your PSD file. Save the image you copied as “bg.PNG” save it in your images folder.

Head back over to your HTML file and press F12, you should see your background in action.

Now lets create our container and the background image for the header. We’l create the background image 1st, hide all your header elements on your PSD file then just select the background part of the header (again make sure you flatten your PSD file when you’ve hidden the header elements, but dont forget to undo once the image is made). Copy and paste the header background to a new document then save as “header_bg.png” in your images folder.

Now lets add the CSS styles for our container and header divs.

My PSD file width is 900pixels, so we’ll use a container of 900px, again with no padding, BUT set margin to auto this will center our webpage in the browser. For the header div we need to add the header image which is the “header_bg.png” image. We dont want the header background to repeat as its a fixed item. You need to check the width and height of your image that you saved, mine is 900px wide and 298px high. Yours might be different so adjust accordingly. Save our css file then head back to your HTML file press F12 and take alook. You should be able to see your background image where the header is surposed to be.

Now lets add our logo which will be our website title, slogan and the man image. Head back over to PSD file and copy and paste your logo to a new document and save as “logo.png” heres my mine.

Lets add the CSS styles to the css file for the logo image.

Again pretty much the same as the header styles apart from the filename is different and the width and height corrospond to the image you just saved (logo.png). Save your CSS file then head back over to your HTML file press F12. Heres what mine looks like in the browser.

Time to code our navigation in your HTML code under the nav div you need to add your menu code which looks like this.

The new bit code “ul class=”menu” means unordered list, all the navigation items have a “li id” which means list id. The links have a list id beacause we wont be using plain text for our navigation we will be using images. Head over to your PSD file copy and paste each navigation item and save as seperate images label them according to the image as it will make it easier. You should have 4 images in total. Also big tip when saving PNG files, make sure the images are on transparant backgrounds. The CSS code for the navigation is as follows.

The nav div is the box that holds the navigation images. So we need to add a width, the width should be the size of all the images together so for EXAMPLE: if each image is 200px thats 200px x 4 = the width of the box. Then we need to add some padding to the top of the box so it isnt stuck right at the top of the browser. Height is the height of the navigation images which should all be the same. Then we need to stick it more to the right so add a margin of 40 pixels to the right. Now the next part is of code relates to the ul and li tags which are both classes not divs, a class starts with a period (.) the difference between a class and div is that a class can be used over and over and a div should be unique and used once. The most important styles on the ul and li classes are the list-style ones, these styles remove the bullets from the list and place the images in a line next to each other opposed to being displayed vertically. The span style is also important as span allows us to add styles to the content, or manipulate the content with for example JavaScript. Next comes the actual code for our navigation images, as you can see each li id relates to each style, keeping the names of items simple and straight to the point will make your life more easier. Each background URL relates to the navigation images we created previously. Width & height relate to the dimensions of each image. The display:block style means “The element will be displayed as a block-level element, with a line break before and after the element”. Save your CSS file then head back over to your HTML file press F12.

The next part is to create the welcome text under the navigation bar. We need to add some new HTML code for this part so in your HTML file code in between and

add this code.

So we basically need another box for our text which is the div id featured, the h1 tag means header#1 you can have as many of these as you want. i called it h1 beacause its the 1st header we’ve done so far. The p tag means paragraph which is where our text will be. So in this chunk of HTML code there are 3 elements we need to style the div tag “featured”, the h1 tag and the p tag. The CSS code looks like this.

The height and width in the #featured tag corrospond to the height and width of the box that the text will be in. Margin -top push’s the block of text down 90px and the margin-left moves it to the right 380px. The other styles corrospond to the text being displayed, here you can set which ever font you want, in any color you want and what ever size you want. Viewing your HTML file in your browser should now look like this.

The next part we need to do is create our content area which has one snazy title and 6 content boxes which need to be expandable. So the first we need code is the snazy header. Goto your PSD file and copy and paste the snazy title to a new a document and save it in your images folder.

Goto your HTML document and add this code between and the last div which is the container end div.

The div id content will represent the big box in which our content boxes and sidebar boxes will sit, at the moment though there is only a h2 tag which we’l use for our snazy title we just sliced and saved. Add this CSS code for your content div and h2 tag.

The content box which will hold our content only needs to be 800px wide as the content boxes arnt that wide them selves you can set it at 900px if you want to but that means the gao between the content boxes and sidebar boxes will be greatly increased. We have set 20px padding at the top of the div content so that it isnt stuck right beneath the header. Then we set the margin to auto, this will center everything that falls in the content div. The h2 styles are for our snazy title we just sliced up background url is the filename and path to the image. Width and height have to be the same as the actual image itself. Then finally we add our 20px margin to the bottom so that the content boxes dont sit right underneath the snazy title, the margin-left simply push’s the snazy title over to the right. View your HTML file and you should have something like this.

Now for the content boxes themselves. The content boxes all have top and bottom rounded corners so basically there will be 3 elements to each content box. The top rounded corners, the middle bit which will be expandable then the bottom rounded corners.

Slice these parts of the content boxes into 3 individual files save them as .png on a transparant background in the images folder.

Lets add our HTML code for the content boxes. Now because these content boxes will be repeated we need to use classes not div’s remember when i said before div’s should only be used once. Well nows a perfect example. Inside the content div inbetween the h2 tags and the end div you need to add this code.

the 1st class is content_box, this will be the box our content box sits in, so it will be a content box inside a box. Then theres a class content_top, thats our top bit of the content boxes. In the top half of the content box i want to be able to add a header so i can label each content box so ive used a h3 tag. The content_main class is our expandable bit of the box so the box will adjust to the amount of text and images that inside. Then finally content_bottom…. you’ve guessed it, its the bottom half of the box. The p tag in the bottom half the box is just like a content box footer that ive added. So the CSS code to go with these elements are as follows.

The class content_box has a style width:480px the width of our content boxes image are all 485px so that should be sufficient to hold it all in, we also want it on the left side so we float it left, we also want the content boxes to lye equally in the middle of the surrounding div so we set a margin of auto. The next set of classes are our actual content boxes and these classes contain our images that form the box. The 2nd class is content_top this will represent the top rounded corners of our box so we set the background image to the top box image we created in photoshop, we dont want the background to repeat and the width and height are the actual dimensions of our content top image. Our content_bottom class is exactly the same, the only difference is it has a bottom marhin of 10px. Ive added this so there is a 10px gap inbetween each box eles there boxes will just be right underneath each other. The class content_main is where our main content will be, now this is a little bit different from the others, the background image is the image we created in photoshop but because we want the background to repeat we set the repeat on the y axis, also notice there is only a width and no height the width should be the same width as the image. There is no height because we want it to expand if we did set a height then you wouldnt see all the text and it wouldnt expand it would be like a fixed object. Then theres the padding, we need to pad the top and left so the text lie’s nicely inside our box. If you save your HTML and CSS files press F12 and preview in your browser you should see you content box.

To add more content boxes all’s you need yo do is copy HTML code and paste the html classes. So three content boxes would look like this.

Now for the right sidebar, its constructed in exactly the same way as the main content boxes, they contain 3 images, sidebar_top, middle and bottom open up your PSD file and begin to chop up your sidebar box. The markup will be the same just different div and class names. Lets start preping it in our HTML file. The markup looks like this.

The starting div is sidebar which will be the box that all our sidebar boxes sit in, the first class is the top bit of the sidebar. The h4 tag is our header 4 then theres the sidebar_main which will be our expandable area then last but not least the sidebar_bottom which is the bottom of our sidebar content box.

The styles to go with all this is also pretty much the same minus a few little options. The CSS looks like this.

The 1st thing to be styled is the div sidebar two simple styles, the width of our box in which the content boxes will sit, pretty easy that will be the same width as our images which are all 305px. Then we need to float it right so it will sit inline next door to our main content boxes. Sidebar_top and sidebar_bottom are pretty much the same apart from bottom has the margin as like the main content boxes. The class sidebar_main is the same as the others but again like our main content boxes it has no height and the background is repeated. Once you’ve added your code give it and preview it with F12. Heres mine.

Just copy the classes to add more boxes in your sidebar, the code for three boxes looks like this.

Now its time for the footer, the footer div should be placed outside the container div as we want the footer to be like the header and repeat all the way across. The footer code looks like this.

Pretty simple just a simple div with a p tag for the text. The CSS for the footer looks like this.

The footer div has a height of 101 pixels as thats what the dimensions of the image is there is no width as we want the footer to span right the way across the browser, so we also set background repeat to x. The clear:both style is important, this means we dont want any items either side of our header. The footer p style is the styles for the paragraph which are pretty much self explanetry. Thats it all done, The only things left to do now is style things like rollovers if you want any, active, visited, rollover links, additional headers and font colors. Heres how mine looks in the browser.

Thank you for reading, dont forget to subscribe to our RSS feeds.

Today I will be walking you through the process of turning our Freelance Home Page PSD into a working HTML / CSS template.

The Live Version

You can check out the Live Version of the template by clicking here. The template has been tested in the following browsers without any problems; however, due to our use of CSS3 the website will render a bit differently in each web browser that you choose.

• Firefox 2.0, 3.0 and 3.5
• Internet Explorer 7 and 8
• Chrome 3.0
• Safari 3.0 and 4.0

Preparing Your Files

You will need to create a new folder on your desktop titled “Coming Soon”. Please create the following files: index.html, style.css, and a folder titled images. It should be set up like below:

Begin Slicing Your Images

Before we begin working on coding our website we need to slice our images. Since we can use CSS for most of our website we will only be slicing a few images to use in our website.

Start out slicing your logo image. Make a selection like below:

Hide your background layer and save it as logo.PNG

For our navigation we only need to slice a portion of the hover state, as the rest of it can be accomplished with CSS. Make a selection like below:

Now save your document as nav_hover.PNG

Your Search Bar is a little bit more difficult to do because there is an extra step added in there. You need to select your search box layer, right click, and choose “Convert to Smart Object”; like below:

Now hide your Search My Site Text Layer and your Search Icon. Make a selection like below:

Now save that as search_bg.png

Like I said this part is complicated because now we have to slice our input layers background. Unhide your Search Icon Layer. Now make a selection like below:

Now save is as search.png

Now leave your layers the way there were and make a selection like below:

Now save that selection as search_submit_bg.PNG

Time to start working on our Center Content. We will only need to slice two images for our center content; our image collage and our spacer.

For our image collage make a selection like below:

Now save that as center_images.png

For your spacers make a selection like below:

Now save that as center_spacers.PNG

Now we will be working on slicing our three icons. Make three selections like below:

We will now be slicing our white content background. Make a selection like below:

Now save this as white_box_overlay.png

For our last two images we will be slicing we will be working in the newsletter group. We will be slicing out our newlsetter input area and our submit button.

To slice your input layer you will need to right click your document again and choose “Convert to Smart Object” again. Now make a selection like below:

Save this as newsletter_input.png

Now make a selection like below for your submit button:

Save your image as newsletter_submit.png.

And we are done, that’s all we need to slice for our document. Time to start coding!

Set Up Main Document

To set up our main document we need to get our body and .container CSS setup as well as the beginning to our HTML file. The container class will have the width and height of our page. You can get this measurement from photoshop, but I always add a little bit more because things never add up exactly. You could also set the height to auto for right now, but your document will not be auto centered by our left and right auto margins until you set a definite height.

And our HTML:

Set Up The Logo

Setting up our logo is really simple. We get all our CSS measurements from our logo.png file and then we need to add a few other tidbits to make it work. Of course you can take out the Text Indent attribute if you don’t want to put any text in your logo and just want to stick to the title.

The CSS:

The HTML:

The Upper Navigation

Our upper navigation is going to be where our CSS3 comes into play. In our photoshop document we had rounded corners for our navigation, and we can accomplish this with a simple snidbit of CSS. This will render without rounded corners in documents that don’t support CSS3 and may render differently between Safari, Firefox, Opera, and IE.

We will be using the ul and li attributes in CSS to create our navigation. Here is our full navigation CSS:

Now our html is going to be very simple. We will just be setting up our ul class and then the lines. Here it is:

Set Up the Search Bar

Now we get a little bit complicated. We need to set up our overall search bar to be a bit taller and wider than our actual inputs so there are no discrepancies in our design. This will be accomplish with a simple bit of CSS, but we had to use a lot of trial and error to get it just right with the input and submit fields. Here is our CSS:

Now our CSS is the full CSS styling for what we used. There are several areas, like the border style, that you could shorten to make less CSS code and faster load times while you are working on your own website.

The HTML for our inputs are very easy. We are not going to have a working Search Bar in this tutorial, but you can use a free one from Google or create on in PHP yourself and still style it simply with the CSS above and some slight additions.

Here is our HTML:

STOP! Lets see what you have so far!

I just wanted to stop here to make sure that your CSS and HTML is matching up so far. This is what you should have, so far, for both your CSS and your HTML:

Ok, now that everything is straight we can move on again

Setting Up Your Center Content

Time to start working on setting up our main content. We will accomplish most of the main content through CSS with only two images being placed into the document (via the CSS). Our CSS for all parts should look like this:

And the HTML will be even easier. We have our container div, our two empty image divs, and then our div to display our text. Now we have used the font Qlassik but have found that it does not render well with the web so you may want to change it.

Setting Up Our Main Business Content

Now we are going to start working on our three boxes, with our three icons. I see these boxes being used to draw attention to the three most important things that you want to draw attention to on your website (ie. pricing, cms/wordpress, development). The CSS for our main content is simple CSS that will bring everything within a container div.

The CSS:

And the HTML:

The Blog Post and Contact Box

Our “White Box” as we call it is an area on our home page where we can show off our Latest Blog Post so that people can see and drive more traffic to the website and blog. In this tutorial we will not be creating the PHP to show you how to accomplish this and will be merely placing static content in the container.

We can accomplish the styling we need on this with just one image and the rest will be CSS and HTML. Here is our CSS:

Time For Our Footer

Now our footer will be set up in two different areas, the Bottom Navigation and the Newsletter.

Our Bottom Navigation will be using the ul and li attributes in CSS as well and will be full CSS styling, no images. To get the proper color we used our color picker tool in Photoshop to grab the right Hex Code for our bottom navigation. Here is our bottom nav CSS:

And our HTML:

Now our Newsletter is a matter of an overall container, an input container, two simple inputs, and a right aligned submit button. All will be accomplished with CSS and background images. Again we will not be actually setting up the PHP for the newsletter form, but you can find a nice mail form on our Coming Soon PSD to HTML Tutorial.

The CSS:

Now in our final HTML to finish out the newsletter we will also need to close out our main container div. Here is our HTML:

The Copyright

The copyright for our website will actually be placed in its own div, outside our main container div. You will see most of the same styles from our container div used in our copyright CSS. Overall though the copyright is one simple CSS class and one simple line of HTML coding.

The CSS:

The HTML:

Conclusion

As you can see you can use CSS to create a good majority of most sites you design in Photoshop. Having to rely less on images and more on CSS will greatly improve your page load speeds. Keep the HTML short and to the point, not adding in meaningless tidbits of HTML.

Good evening everybody, today i’ll be walking you through the process of coding your “Digital Curriculum Vitae” into a working HTML/CSS Template. Lets get started.

The Live Version

You can check out the Live Version of the template by clicking the image below. The template has been tested in the following browsers without any problems.

• Firefox 2.0, 3.0 and 3.5
• Internet Explorer 7 and 8
• Chrome 3.0
• Safari 3.0 and 4.0

Preparing Your Files

Create a new folder on your desktop called “Digital Curriculum Vitae”, within this folder create three more folders called “fonts”, “images” and “Stylesheets”.

The “Fonts” folder will be used for our fonts, if you can remember from part #1 of the tutorial we used a font called “Myriad Pro”. This font won’t work on a live webpage unless we use some CSS3 (@font Face), more on this later.

The “Images” folder will be for our template images, all images will be saved in PNG format.

Finally the “Stylesheets” folder will contain our stylesheets, i this template there will be two stylesheets. A “Reset.CSS” and “Styles.CSS”.

Once you’ve created your folders, create a blank HTML file called “Index.HTML”. Save the blank HTML file inside the main folder. Next create two blank CSS files inside your stylesheets folder.

Setting Up The HTML File

Open your HTML file in your favorite code editor, in the “HEAD” section of the HTML file add your template title and link your CSS document.

<title>Digital Curriculum Vitae - Richard Carpenter - HV-Designs.co.uk</title>
<link href="stylesheets/styles.css" rel="stylesheet" type="text/css" />

In the “BODY” of your document add a DIV called “Container”, the container will be our main DIV in which our template will be held.

<div id="container">
</div><!--CONTAINER ENDS-->

Inside the container DIV were going to create 3 more DIV’s, “Frame-Top”, “Frame-Middle” and “Frame-Btm”.

<div id="container">

<div id="frame-top">
</div><!--FRAME TOP ENDS-->

<div id="frame-middle">
</div><!--FRAME MIDDLE ENDS-->
<div id="frame-btm">
</div><!--FRAME BOTTOM ENDS-->

</div><!--CONTAINER ENDS-->

The 3 DIV’s will each contain the top, middle and bottom portions of the transparent box which is behind the white rectangle on our layout.

Finally the actual white rectangle on our layout we can do all in CSS, so we’ll just create 1 more DIV called “Page”. Place the DIV inside the “Frame-Middle” DIV.

<div id="container">

<div id="frame-top">
</div><!--FRAME TOP ENDS-->

<div id="frame-middle">

<div id="page">
</div><!--PAGE ENDS-->

</div><!--FRAME MIDDLE ENDS-->
<div id="frame-btm">
</div><!--FRAME BOTTOM ENDS-->

</div><!--CONTAINER ENDS-->

So just to recap then we have our “Container DIV” which will contain a whole template, “Frame-Top”, “Frame-Middle” and “Frame-Btm” which will contain our transparent rectangle cut into 3 separate images. Then finally our “Page” DIV which will contain our white main rectangle for our content.

Slicing The Background Image

Now our HTML mark-up is finished lets start slicing our images, We’ll start with the background. Select the rectangular marquee tool then drag out a selection about 50 pixels wide and the whole length of your background.

Once the selection has been made go to “Edit > Copy Merged”, then go to “File > New” and create a new document. (The size of your selection should automatically be entered into the dimension boxes)

Save the background image as “bg.PNG” inside the images folder.

Slicing The Transparent Rectangle

Hide all your layers apart from the background layers and the transparent rectangle. Select the rectangular marquee tool then make a selection around the top half of the rectangle.

In the selection include your drop shadow, but don’t include the content rectangle. Once you’ve made the selection hide the background layers and go to “Edit > Copy Merged”, paste the selection into a new document then save the file as “frame_top.PNG”.

Repeat the process for the bottom of the rectangle and also the middle, make sure all slices are the same width.

Slicing The Template Title

Still with the rectangular marquee tool make a selection around your website title.

Once you’ve made the selection hide all your layers apart from the title layer itself then go to “Edit > Copy Merged”. Create a new document by going to “File > New” and then paste your selection into the new document.

In your new document hide the background layer then go to “File > Save As”, save the image as “title.PNG” inside the images folder.

Slicing The Navigation

For our little 3 button navigation were going to keep all the buttons as one image, we’ll then use CSS to adjust the background image for our template.

Start off by making a selection around all 3 buttons using the rectangular marquee tool.

Hide all your layers apart from the 3 button icons and there text, once you’ve hidden your layers go to “Edit > Copy Merged”.

Paste your copied selection to a new document, hide the background layer then save the images as “right_navigation.PNG” inside your images folder.

Slicing The Page Background

Using the rectangular marquee tool make a selection 1 pixel wide starting from the top of your white rectangle. The starting point should be underneath the 1 pixel white border.

Drag the selection all the way down until you come into the white portion of the rectangle. You can use the eye dropper tool to make sure the selection ends on white (#ffffff). The reason for this is because where the background image ends the color white will continue on down the page which will be set in our stylesheet.

Slicing The Bullet Points And Divider Line

Make a selection around one of your bullet points using the rectangular marquee tool.

Once you’ve made the selection hide all your layers apart from the bullet layer itself then go to “Edit > Copy Merged”. Create a new document by going to “File > New” and then paste your selection into the new document.

In your new document hide the background layer then go to “File > Save As”, save the image as “bullet.PNG” inside the images folder.

For our divider line you only need to make a 1 x 2 pixel selection as the image will be repeated using CSS. Make a selection on your divider line as shown in the image below.

Once the selection has been made go to “Edit > Copy Merged”. Paste the selection into a new document then save the image as “divider.png” inside the images folder.

Slicing The Social Icons

Finally we need to slice our individual social icons. Using the same methods listed above slice each button, then save each button on a transparent background inside your images folder.

Once your finished thats all the slicing done. Here’s a screen shot of all my images inside the images folder.

The Background CSS

Open up your styles.CSS stylesheet inside your favorite code editor, then add the body as your first style.

body {
}

Inside your body style we need to set our background image, to do this we add your “bg.PNG” image as a background then repeat the background horizontally (X-Axis).

We don’t want the background to move when scrolling down the page so we also set the background to fixed. Finally we need to push our template downwards so its not flush with the top of our browser, we do this by adding a top margin. The CSS code looks like this.

body {
background-image: url(../images/bg.png);
background-repeat: repeat-x;
background-attachment: fixed;
margin-top: 35px;
}

Styling The Container

The next set of DIV’s we need to style are the foundations of our template, these DIV’s are the main container and the transparent rectangle which goes all the way around our template. We’ll start with the container DIV.

We first set our container width, to find out the width of the container you can check the size of your transparent rectangle images.

Notice the width of 861px, this will be our container width. We then set our containers margins to auto, doing this will center our template in the browser.

#container {
margin: auto;
width: 861px;
}

Styling The Transparent Rectangle

Inside your HTML file locate the DIV’s “frame-top” and “frame-btm”. Inside the frame top DIV insert your frame top image from your images folder.

<div id="frame-top">
<img src="images/frame_top.png" alt="Curriculum Vitae" />
</div><!--FRAME TOP ENDS-->

Repeat the same for the frame btm DIV.

<div id="frame-btm">
<img src="images/frame_btm.png" alt="Curriculum Vitae" />
</div><!--FRAME BOTTOM ENDS-->

For our top and bottom frame DIV’s we need to float them left then add a fixed height and width. The width and height of our DIV should be the same width and height as images which we sliced earlier.

Instead of creating two separate styles for frame top and frame btm we can join them together as both DIV’s share the same styles. We do this by separating the DIV’s with comma’s in our stylesheet.

#frame-top, #frame-btm {
float: left;
height: 25px;
width: 861px;
}

Styling Frame Middle DIV

Our “frame-middle” DIV is styled in a similar way as body background, the only difference being we repeat the background vertically (Y Axis), float the DIV to the left and add a fixed width. The fixed width should match the frame middle image, which should also be the same width as our container DIV.

#frame-middle {
background-image: url(../images/frame_middle.png);
background-repeat: repeat-y;
float: left;
width: 861px;
}

Styling The Page DIV

This DIV is the final DIV we need to style, we should then have the foundations of our template ready for our content.

Float the DIV left, add a fixed width of 809px (the width is the same size as our content rectangle in our PSD file) then set a white solid 1 px border.

#page {
float: left;
width: 809px;
border: 1px solid #FFFFFF;
}

Set your “page_bg.PNG” as the DIV’s background repeating it horizontally (X Axis), set the DIV’s background color to white (#ffffff) then set a top and bottom margin of 30px.

#page {
float: left;
width: 809px;
margin-left: 25px;
border: 1px solid #FFFFFF;
background-image: url(../images/page_bg.png);
background-repeat: repeat-x;
background-color: #FFFFFF;
padding-top: 30px;
padding-bottom: 30px;
}

Adding Some Content

In your HTML file inside the “#page” DIV add a “H1″ heading tag then insert your “title.PNG” file inside. Add a link to your image if you wish.

<h1><a href="#"><img src="images/title.png" alt="Richard Carpenter CV" /></a></h1>

Underneath your “H1″ tag add an unordered list “UL” with a class of “right-nav”. Inside your list add your 3 list items also known as your 3 button navigation each with there own classes to represent that list (LI) Item.

<ul class="right-nav">
<li class="save"><a href="#" title="Save">Save</a></li>
<li class="print"><a href="#" title="Print">Print</a></li>
<li class="contact"><a href="#" title="Contact">Contact</a></li>
</ul>

Underneath your small navigation add a simple paragraph “P” tag with a class of “job-title”. Inside your “P” tag add your desired text.

<p class="job-title">Web Designer / Developer</p>

Finally we need to add our intro text, create another “P” tag but with a class of “intro”.

<p class="intro">INTRO TEXT GOES HERE</p>

Styling Our Header Content

We’ll start with our “H1″ tag, set a fixed width and height the same dimensions as your title image, float the title left then add a bottom margin of 10px. To push the tag over from the left add a left margin of 30px.

We could of added the left padding to the “page” DIV which would automatically push everything from the left over 30px, but if we used this method then our little lined divider would also have 30px padding which we don’t want. We want the divider to start and end at either side of the page layout. We’ll add the 30px left margin to all items inside the “page” DIV.

h1 {
height: 47px;
width: 334px;
margin-bottom: 10px;
float: left;
margin-left: 30px;
}

Styling Our P Tag Classes

There are two “P” tag classes we need to style, “P class job-title” and “P class intro”. The styles for these classes are just changes in the way the text looks. Notice we haven’t set any font-family yet as we’ll be doing this at the as it requires some CSS3.

The “P” class “job-title” looks like this.

p.job-title {
color: #b1b1b1;
font-size: 20px;
letter-spacing: -1px;
font-style: italic;
clear: both;
margin-left: 30px;
}

The “P” class “intro” styling looks like this.

p.intro {
font-style: italic;
color: #646464;
font-size: 12px;
margin-top: 20px;
text-align: justify;
margin-left: 30px;
margin-right: 30px;
line-height: 18px;
}

Styling The Navigation

For our navigation start off by styling the unordered-list “UL”. Simply float the navigation to the right then add 30px of right margin.

ul.right-nav {
float: right;
margin-right: 30px;
}

The next few styles are for our navigation list “LI” items and the link “A” associated with our buttons. For our list “LI” items we float each of them left, to add spacing in between each button we add a left margin of 22px.

For our list “LI A” links we display each of them as a block and add a text-indent which will push the text off the page (We’ll be using images don’t forget).

Finally we need to add a fixed width and height to our buttons to find out how big you need to set them you have to measure each button then use the biggest one as your fixed width and height.

.right-nav li {
float: left;
margin-left: 22px;
}

.right-nav li a {
display: block;
height: 46px;
text-indent: -9999px;
width: 38px;
}

We now have to style our list “LI” classes, each list class will have our navigation background image set as a background. You can merge these styles into one by separating each style with a comma.

li.save a, li.print a, li.contact a {
background-image: url(../images/right_navigation.png);
background-repeat: no-repeat;
}

All’s we have to do now is adjust our list background image position so that the buttons display correctly. Your positions might be different to mine depending on how big your buttons are.

li.save a {
background-position: 5px top;
}

li.print a {
background-position: -44px top;
}

li.contact a {
background-position: -101px top;
}

Adding The Divider

Inside your HTML file create an empty DIV with a class of divider. The DIV should live underneath your intro text inside the “page” DIV.

<div class="divider"></div>

Inside your stylesheet add the divider class then set the “divider.PNG” image as a background repeated horizontally (X Axis). Float the DIV left with a top and bottom margin of 27px. Finally add a fixed width and height, the height should be 2px the same height as the image the width should be the same width as the “page” DIV.

.divider {
clear: both;
background-image: url(../images/divider.png);
background-repeat: repeat-x;
float: left;
height: 2px;
width: 809px;
margin-top: 27px;
margin-bottom: 27px;
}

Adding Your Section Titles

Inside your HTML file, underneath your divider simply add an “H2″ tag. Inside the “H2″ tag add one of your section titles I.E – Technical Skills.

<h2>Technical Skills</h2>

Inside your stylesheet add your “H2″ tag then set the text color, font size, letter spacing and some bottom margin to separate the title from the content which will lie underneath. Finally add a left margin of 30px to push the title over inline with everything else.

h2 {
margin-left: 30px;
font-size: 25px;
color: #414141;
letter-spacing: -1px;
margin-bottom: 15px;
}

All your section titles should be wrapped within the “H2″ tag.

Adding Your CV Details

All the CV information/details will be added using an unordered list “LI”. In your HTML file underneath your H2 tag create an unordered list “LI” with a class of “details”.

<ul class="details">
</ul>

Inside the unordered list add a list “LI” item containing an “H3″ tag. Inside the “H3″ tag add your title E.G XHTML & CSS – 4 Years, Intermediate to Advanced.

<ul class="details">
<li>
<h3>XHTML & CSS - 4 Years, Intermediate to Advanced</h3>
</li>
</ul>

Inside the “H3″ tag where you have the details of the “H3″ tag E.G 4 Years, Intermediate to Advanced, add a span class of “color2″. Doing this will enable us to add additional styling to that specific bit of text.

<ul class="details">
<li>
<h3>XHTML & CSS - <span class="color2">4 Years, Intermediate to Advanced</span></h3>
</li>
</ul>

Underneath the “H3″ tag create a “P” tag will your text.

<ul class="details">
<li>
<h3>XHTML & CSS - <span class="color2">4 Years, Intermediate to Advanced</span></h3>
<p>TEXT GOES HERE</p>
</li>
</ul>

When adding more details simply create another list containing the “H3″ and “P” tags.

<ul class="details">
<li>
<h3>XHTML & CSS - <span class="color2">4 Years, Intermediate to Advanced</span></h3>
<p>TEXT GOES HERE</p>
</li>

<li>
<h3>Adobe Photoshop - <span class="color2">8 Years, Advanced</span></h3>
<p>TEXT GOES HERE</p>
</li>
</ul>

Styling Our Details

Inside your stylesheet you need to add your unordered list classes, start with the “UL” Attribute.

Float your list to the left then add left and bottom margins. The left margin will push the list over inline with everything else and the bottom margin will space out the lists.

ul.details {
float: left;
margin-left: 30px;
margin-bottom: 10px;
}

For your list elements add your “bullet.PNG” image as a background then using some left padding push the list elements over so the text is by the side of the bullet. Finally add a bottom margin which will space out the list elements.

.details li {
background-image: url(../images/bullet.png);
background-repeat: no-repeat;
background-position: left 6px;
padding-left: 35px;
margin-bottom: 20px;
}

Finally, we need to style our “P” tags within our list. Set your font size and color along with any thing else you want to add. Don’t forget to add a right margin of 30px which will push the text over from the right.

.details li p {
margin-right: 30px;
text-align: justify;
color: #646464;
font-size: 12px;
line-height: 18px;
}

Using a combination of H2, H3 and the list items make up the rest of your CV details.

Adding Your Custom Font With CSS3

Move your desired font to your desktop then go to “Font Squirrel” and convert your font into a “TrueType”, “EOT” and “SVG” file. These 3 types of fonts are needed for the custom font to work in our browsers.

Once you’ve converted the font move the 3 files into your fonts folder. Open your CSS file then add the @fontface code to the top.

Also inside your CSS file add the font family to your “page” DIV.

Test your template in your browser and see how it looks. I’ll be releasing the template for download soon along with the PSD file.

Take care and thanks for reading.

Hello everybody welcome to the second part of the vCard layout tutorial. In today’s tutorial we’ll be converting the vCard into a 4 page template, if you haven’t already id download the free PSD file i released earlier OR feel free to follow along with your own PSD FILE.

Setting Up Our Local Files

Create a new folder on your hard drive labeled “vCard”, inside the folder called “vCard” create two more folders “images” and “stylesheets”.

Inside the stylesheets folder create 3 separate CSS files with the following names. “ie.css”, “reset.css” and “styles.css”.

You can easily create CSS files using notepad, just open up a blank notepad document and save it as “filename.css” inside the stylesheets folder. Alternatively you can probably use your favorite code editor.

Finally in your favorite code editor create a blank HTML document called “index.html”, save the HTML file inside the main folder with your two folders.

Linking Our Stylesheets

Inside your HTML file add your own personal title within the “TITLE” tags.

 <title>Personal vCard - HV-DESIGNS.CO.UK By Richard Carpenter</title>

Next we need to link our stylesheets the first one we’ll link will be our main one “styles.css”.

 <link href="stylesheets/styles.css" rel="stylesheet" type="text/css" />

The next stylesheet will be our internet explorer specific stylesheet “ie.css”, we’ll link this stylesheet using a conditional statement. Basically the way it works is if someone browses the site using internet explorer 7 then the elements within the “ie.css” stylesheet will become active.

 <!--[if IE 7]> <link href="stylesheets/ie.css" rel="stylesheet" type="text/css" /> <![endif]-->

We have one more style sheet to link (reset.css), but we wont link the stylesheet within the HTML file. Instead the stylesheet will be imported into our “styles.css”. Open up your “styles.css” stylesheet, at the top add the following code.

 @import url(/files/includes/quot-reset.css-quot-.css);

Drafting Some Div’s

Inside the “BODY” tag of your HTML document start off with a DIV of “container”, this DIV will be our main box which will contain all our website elements.

 <body>  <div id="container"> </div><!--CONTAINER ENDS-->  </body>

We now need to add 3 more DIV’s which will make up our layout, because the way our layout is designed we can’t make the framework using CSS. So instead we’ll be using 3 separate images.

The first DIV will contain our top rounded corners, the middle DIV will be our main DIV where we add all our content, the middle DIV will also contain a 1 pixel background image which will repeat over and over again. Finally the last DIV will contain our bottom rounded corners and reflection.

We draft the DIV’s out like this.

We draft the DIV’s out like this.

Slicing Our Main Images

Open up your PSD file, hide your background layer then select the rectangular marquee tool and make a selection around the top half of your layout including some of the drop shadow. My selection is “856 pixels x 18 pixels”.

Once you’ve made the selection and your happy with it go to “edit > copy merged”. Create a new document, the dimensions of the copied selection should automatically be inputted into the new document box.

Paste the selection into the new document, delete the background layer then save the document as “vcard_top.PNG” inside the images folder.

You need to do the steps listed above for every image your create unless stated otherwise. Remember the steps as i wont be repeating the steps for every image we slice.

Head back over to your original PSD document, select the rectangular marquee tool once again and a make a selection any where across the middle part of your layout. The selection should be equal width to the last image you created and the selection should contain the same amount of drop shadow.

Once you’ve made the selection and your happy with it go to “edit > copy merged”. Create a new document, the dimensions of the copied selection should automatically be inputted into the new document box.

Paste the selection into the new document, delete the background layer then save the document as “vcard_middle.PNG” inside the images folder.

Finally repeat the steps above only this time for the bottom part of the layout including the reflection. Remember to include the same amount of drop shadow into the selection.

Last but not least we need to slice our background image. Hide all the layout elements in your PSD file leaving the background layer un-hidden. Make a 1 pixel high selection spanning 850 pixels wide across the middle part of the radial gradient.

Copy the selection then save it as “bg.PNG” inside the images folder.

Bringing It Together With Some CSS

Open up your “styles.css” file inside your code editor, the first tag we need to style is our body tag. The body tag contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.

Our body styles look like this.

We add our background image “bg.PNG” as our body background, we then repeat our background along the Y-Axis (vertically). For our background to be situated in the middle of our browser we need to set the background position to center. Finally we set our main background color, font color and font size.

The next DIV we add CSS styles to is our container DIV.

 #container { margin: auto; width: 856px; padding-top: 50px; }

Our container should have a width of 856 pixels the same as our images we created earlier. To center the layout in our browser we set our margins to auto, finally I’ve added 50 pixels of top padding which will push the layout down away from the top of the browser.

Finally we can add our CSS styles to the last 3 DIV’s. The reason why I’m showing all 3 together is because there basically all the same.

For our 3 left over DIV’s we add our background images, the top and bottom DIV’s the background should be set to no repeat, where as the middle background we need it to repeat vertically. Each element is floated left and has a width and height that corresponds to the images we created earlier, apart from the “vcard-middle” DIV, there should be no height set as we want the DIV to expand with our content.

Test your layout inside your browser to see how it looks. Hopefully you should have something that looks like this.

Creating Our Sidebar And Content Div’s

For use to add our sidebar elements and content we need to create two DIV’s inside the “vcard-middle” DIV. To determine the width and margins of each DIV we have to do some measuring in photoshop.

We need to measure from our drop shadow to the sidebar area.

From the start of our drop shadow to the sidebar area is “15 pixels”, so we know that we need to add 15 pixels of left margin to our sidebar DIV. We now need to measure our actual sidebar area.

Our sidebar area will need a width of 162 pixels. We create our DIV for the sidebar like this.

The styles for our sidebar DIV look like this.

The styles for our sidebar DIV look like this.

 #sidebar { float: left; width: 162px; margin-left: 15px; }

We first float the DIV left so that the content DIV will align-up next to it. We then add our width of 162px and add a left margin of 15px. The sidebar DIV should now be perfectly aligned up.

We do exactly the same for the content area. We know there are three 1 pixel lines in between the sidebar and content area, so the margin for our content area will be 3 pixels.

Next measure the content area but don’t include the right frame and drop shadow. Just measure to the end of the white area.

Our content DIV HTML looks like this.

The CSS for our content DIV looks like this.

Your content area should now all be aligned up nicely, lets add some content.

Creating The Sidebar Menu

Inside the “sidebar” DIV create a simple unordered list with a class of navigation. Add the names for your links including the title attribute. Each list item you also have its own CLASS relating to that list link. Your list should look like this.

Before we start adding the styles for our navigation we first need to slice our icons, the hover state for our buttons and the little navigation dividers.

The way I’m going to style the navigation in this tutorial is going to be slightly different from all the rest of my tutorials, as in this tutorial we’ll be using sprites. The way it works is we have one big image of all the navigation buttons in there normal state and hover state. The image looks like this.

The image can be either in vertical form or horizontal form, we can adjust the position of the background using CSS. Each button should be equal height and length, all mine are 162px 65px.

Lets add the CSS for our navigation.

We’ll start with styling our list items. Each list item will be displayed as a block and floated left.

Each list item link will also be displayed as a block and must have a width and height which match our buttons, which were 162px X 65px. I’ve added a text indent to shift our text descriptions off the page, the text descriptions will still be accessible by search engines.

We then add our navigation divider image as a background and repeat it horizontal (X axis), positioning the background at the bottom will ensure the background image is displayed at the bottom of each button.

The above code adds our navigation “sprite” image as a background to each one of our list classes. We can merge styles that are the same saving space and loads times.

All’s we have to do now is adjust the background position on a list classes. The code looks like this.

The math’s arn’t that hard too work out, we also style our hover states in the same way.

Test the navigation in your browser to see how it looks.

Adding Our Textual Content

We’ll now add our text for our content area, all our text will go inside the “content” DIV. We’ll start off with our main title and slogan. We’ll start by creating an H1 tag with our title then we’ll add our slogan within the H1 tag wrapped inside a span class of slogan. The HTML looks like this.

On the next line underneath our H1 tag we’ll add an H2 tag with our welcome message.

To finish off the page we’ll add the rest of our text wrapped in P tags.

The CSS for our H1, H2 and P tags look like this.

Done

Test your layout inside your browser, you should have something like the image below.

Still not convinced, you can view the live demo by clicking the image below. All that’s left for you to do now is create your additional pages which shouldn’t be too hard. Look out for the complete layout which il be giving away for free soon.

PART TWO of the PSD sitebuild for Hosting Layout #2. If you havent already download the FREE PSD here.

Welcome to part two, lets get started.

Slicing And Marking-Up The Content Area

The content area will be sliced and coded similar to the navigation, there will be top part, a middle part and a bottom part. The top and bottom parts will contain one image, while the middle part will contain a small image which will repeat over and over with the flow of content.

The only dis-advantage of doing it this way is the sidebar will always be as big as the content area, but because the layout has the 3D part seperating the sidebar from the content area, i dont see how else it can be done.

Open up your PSD file, then hide all sidebar and content text layers, leaving just the content box and sidebar. Select the rectangular marquee tool then make a selection around the top half of the main content area and also the sidebar.

Repeat the same process for the bottom area, then save both images as “content_top.png” and content_bottom.png” inside the images folder, if both images are the same dimensions it will make life alot easier. Next, make a selection around the middle part of both the content and sidebar area. The selection doesnt need to be any bigger than 1 pixel high, just as long as its 900 pixel’s wide.

In your HTML file create 3 class, “content-top”, “content-middle” and “content-bottom”. In the top and bottom classes insert your top and bottom images.

We can now add our CSS styles, because our top and bottom styles will be the same we can group our top and bottom set of styles just like we did on our navigation. Both styles should be floated left and have a fixed width and height which match the dimensions of the images. If your images are different dimensions you’ll have to seperate the styles.

For the middle class we do exactly the same only this time remove the fixed height and apply the content_middle.png image as a background. Finally the background should be repeated vertically.

Creating The Sidebar

Now all our images are setup we can begin to add template content. All our content will be adding inside a DIV inside the content-middle class. We’ll start with the sidebar.

Inside the content-middle class create a new DIV called sidebar. Inside the DIV sidebar create an H2 tag with a class of plan, this is where we add our plan number (PlanOne). Around the number add a span class of “plan-color2″.

Before we add the CSS for our sidebar elements we must first slice our little icons. Make a selection around the plan and list icons using the rectangular marquee tool.

Save each icon in PNG format on transparent backgrounds inside the images folder. Now for the sidebar CSS.

Give the sidebar a fixed width of 229px, i know the size of the sidebar as it was measured in photoshop before hand. Add 10px padding all the way around the DIV then finally float the DIV left.

The span class we added inside the H2 tag is just to change the color of the text. The 2H2 tag styles you should already be familar with so il move straight onto the the H2 class “plan”. In the class we need to add our little icon, we simply set it as a background then use padding to shift the text over away from the icon.

Creating The Sidebar Plan Lists

Before we attempt to style and code the sidebar plan lists, lets slice our final image from the PSD file, the learn more button. Slice the learn more button from the PSD file using the methods already explored, then save it inside the images folder.

The HTML mark-up for the plan lists is quite easy, we first create an unorderlist with a class of “plan-list”, then add our individual list items (LI).

We can also add our learn more image inside the actual list, underneath th last list item create a new list item with a class of “learn-more”. Inside the learn more list item just insert the image using the normal image code. Finally, add a class of “learn-more-image” to the actual image.

The CSS for our list looks like this.