Slice your Mock-Up to Make Website – Part II

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:

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:

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):

so this image would be saved in img folder:

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:

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

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]