Here is the second part of Slice your Mock-Up to make Website, hopefully you have done and learn Part I of Slice your Mock-Up. Because if you have not done Part I, then this part would be useless for you, goto the First Part of Slice your Mock-Up to make Website then come to this part.

[Goto Slice your Mock-Up Part I] [Goto Slice your Mock Up Part III]

11. I’m going to slice my Logo, Slogan and Top navigation bar where Home | Info | Contact is written. I’ve sliced the header as:

Slice your Mock-Up to make Website

12. As I must be needing two horizontal DIVs for header, so I’m going to make a Common DIV for header. I’ve taken .Header-Common-Div and call it twice under Header-Main as:

<div class=”Header-Main”>

<div class=”Header-Common-Div”></div>

<div class=”Header-Common-Div”></div>

</div>

13. I’m going to take a DIV for Slogan, then for Logo and then for Top Navigation Bar. First of all in Photoshop, select Marquee Selection tool and select the Slogan area:

Slice your Mock-Up to make Website

Press Ctrl+Shift+C (Copy merged layers), then taken new file, don’t change the size  (i.e. 177 x 63px as of image size) and then Press Ctrl+V to paste the slogan, save this file in img folder, then come back to HTML again and take a new DIV (of 177 x 63 px size), having the same size of image file and call it in first COMMON div of Header.

<div class=”Header-Common-Div”>

<div class=”Slogan”><img src=”styles/slogan.jpg” width=”177″ height=”63″ alt=”” title=”” border=”0″></div>

</div>

Note:

To validate this site from W3C Validator, it is essential to use Alt tag alongwith all images.

Now I’m going to take DIV for Logo and pasting it HTML as:

<div class=”Header-Common-Div”>

<div class=”Slogan”><img src=”img/slogan.jpg” width=”177″ height=”63″ alt=”” title=”” border=”0″></div>

<div class=”Logo”><img src=”img/logo.jpg” width=”177″ height=”63″ alt=”Slice your Mock-Up to make Website” title=”” border=”0″></div>

</div>

Interesting part came here. As we need Home | Info | Contact text based in our website, mean we dont’ need these three links as Image based. So in Photoshop hide the layer of Home | Info | Contact text and then select the whole image as (its size is 382x63px):

Slice your Mock-Up to make Website

so this image would be saved in img folder:

Slice your Mock-Up to make Website

We are not going to put in in HTML as we did for Slogan and Logo. In HTML take a new DIV and give the properties as:

Slice your Mock-Up to make Website

Slice your Mock-Up to make Website

Slice your Mock-Up to make Website

After calling it in HTML write Home | Info | Contact in it, but you will get this kind of look:

Slice your Mock-Up to make Website

Now we are going to give Padding for this, some people would say that we should give Padding while making this DIV, but remember Firefox would not be having the proper look. That is why we are going to call it as (This is a tip for Browsers Compatibility):

<div class=”Top-Navigation-Bar”>

<div style=”padding-right:139px; padding-top:34px”>

Home | Info | Contact

</div>

</div>

Now by using this technique, I’m going to complete the header by making DIVs and JPEG files, here would be the code for other Header-Common-Div and also the CSS codes for new DIVS:

<div class=”Header-Common-Div”>

<div class=”Left-Navigation-Full-Area”>

<div class=”Left-Navigation-Common”><img src=”img/left-navigation-bar-top.jpg” width=”177″ height=”12″ alt=”” title=”” border=”0″></div>

<div class=”Left-Navigation-Common”><img src=”img/left-navigation-bar-link1.jpg” width=”177″ height=”27″ alt=”” title=”” border=”0″></div>

<div class=”Left-Navigation-Common”><img src=”img/left-navigation-bar-link2.jpg” width=”177″ height=”31″ alt=”” title=”” border=”0″></div>

<div class=”Left-Navigation-Common”><img src=”img/left-navigation-bar-link3.jpg” width=”177″ height=”31″ alt=”” title=”” border=”0″></div>

<div class=”Left-Navigation-Common”><img src=”img/left-navigation-bar-link4.jpg” width=”177″ height=”31″ alt=”” title=”” border=”0″></div>

<div class=”Left-Navigation-Common”><img src=”img/left-navigation-bar-bottom.jpg” width=”177″ height=”12″ alt=”” title=”” border=”0″></div>

</div>

<div class=”Header-Banner”></div>

</div>

Here is the CSS for New DIVs:

.Left-Navigation-Full-Area {

margin: 0px;

padding: 0px;

float: left;

width: 177px;

height: 144px;

}

.Left-Navigation-Common {

margin: 0px;

padding: 0px;

float: left;

width: 177px;

}

.Header-Banner {margin: 0px;

padding: 0px;

float: left;

width: 559px;

font-family: Tahoma, Geneva, sans-serif;

font-size: 10px;

font-weight: normal;

color: #FFF;

background-image: url(../img/header-banner-bg.jpg);

background-repeat: no-repeat;

text-align: justify;

height: 144px;

background-position: top;

}

Till here, Header is completed. So by using this technique I’m going to complete Body and Footer area. To avoid making you bore, I’ve skipped these steps. But I’ve attached file so far, so you can download and check it. You must be watching No links yet, secondly Bullets are missing, Thirdly Titles are missing. So in the last part I’m going to tell you how to make Links, how to use Bullets, how to give Titles. That lecture would be interesting for you. So please download file so far and practice on this file, it will be convenient for you I’m sure. So last lecture is the most important one, so must read that too. Here is the file view so far:

[Goto Slice your Mock-Up Part I] [Goto Slice your Mockup Part III]

About The Author

5 thoughts on “Slice your Mock-Up to Make Website – Part II

  1. Dear sir/madam
    i saw the css & html file and Photoshop but how to create css menu this file so please send me tutorials
    thanks& regards
    Brajesh pathak

  2. Thanks nice tuts.. We hope that your elegant website provide us such tuts about encoding interfaces (converting PSDs to HTML, CSS and so)
    Thank you again we like your simple way of explation. Greetings

    1. Thanks Mohammad for you precious comments and appreciation… We are trying to come to expectations of our readers, you will find many new things on our blog after regular interval…

  3. thanks for sharing i love this idea and i will check everytime your post:))
    see ya again in new post.wish you continued success

Leave a Reply

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

Select your Language please »