This is the third and final part of Slice your Mock-Up to Make Website. In this part I would be telling you how to make Link having Mouse over behavior, how to give Bullets in CSS, how to put Flash while it will be Validated through W3C Validator, also how you can Float Pictures on DIV. So this is also very important tutorial, hope like the two tutorials before, you have practiced a lot. These techniques are used to Slice your Mock-Up to make website.

[Goto Slice Your Mock-UpPart I] [Goto Slice Your Mock-UpPart II]

1. First of all I’m going to tell you how you can apply Fonts to titles. I’m making a DIV in CSS but not giving it size, just giving the Font color only, as:

.Golden-Title{

color:#c6b182;

font-weight:bold;

}

2. Now I’m going to apply this settings for the Titles in Golden, like in the body at News area, so I’m going to select the text and from the Property Panel in Class list box, just select Golden-Title and it will apply the settings to that text, so code will be:

<span class=”Golden-Title”>06/03/2010</span>

Note:

I’ve not called class=”Golden-Title” in the <p> tag because I just wanted to change the font of date and as date is included in the paragraph with other text, so If we apply this DIV in <p> then it will change the whole text.

3. Now I’m going to make some links and then changing its normal and mouse over colors. I’m selecting each ‘Read More’ text and then giving ‘#’ as link and then applying the settings to it. So first go to CSS and make this div for Red Links:

.Red-Link{

color:#cc0000;

text-decoration:underline;

}

.Red-Link:hover{

color:#cc0000;

text-decoration:underline;

}

4. Now select each ‘Read More’ one by one and then apply ‘Red-Link’ from Class list box in Property Panel.

Slice your Mock Up to Make Website

5. So I’ve created all the titles and links by using this technique. Here are the codes which I used to make DIVs for each. I’ve also make another DIV for bottom navigation bar. So I named the DIV as ‘Golden-Link-Bold’.

.Golden-Title{

color:#c6b182;

font-weight:bold;

}

.Red-Title{

color:#cc0000;

font-weight:bold;

}

.Red-Link{

color:#cc0000;

text-decoration:underline;

}

.Red-Link:hover{

color:#cc0000;

text-decoration:none;

}

.Golden-Link{

color:#c6b182;

text-decoration:none;

}

.Golden-Link:hover{

color:#c6b182;

text-decoration:underline;

}

.White-Link{

color:#ffffff;

text-decoration:underline;

}

.White-Link:hover{

color:#ffffff;

text-decoration:none;

}

.Golden-Link-Bold{

color:#c6b182;

text-decoration:none;

}

.Golden-Link-Bold:hover{

color:#c6b182;

text-decoration:underline;

}

How to Apply Bullets for Mock-Up?

6. Now I’m going to tell you how to make Bullets using CSS. As we have Four Bullets under QUICK LINKS GETTING HELP section. So first of all make the JPEG of the Bullet from Photoshop. Save it in IMG folder. I’ve given the name ‘bullet1.jpg’. Now go to CSS and make a new DIV, having name and property as follows:

.Bullet-Icon{

background-image:url(../img/bullet1.jpg);

background-repeat:no-repeat;

background-position:left;

padding-left:30px;

margin-left:30px;

}

7. Now to apply it, simply go to your HTML file, select your desire text and then select ‘Bullet-Icon’ from Class in Property Panel. As I’ve already given 44px left margin when I made this DIV, but now I’ve reduce its margin to 15px to have same Photoshop look. See below:

How to Float a Picture in CSS for Mock-Up?

8. Its time to tell you how you can float any picture on DIV. Normally we make Class DIVs, but if you want to float any picture, then make Advance DIV, it would be called by ID, but remember for Advance DIV you have to start the name of DIV by ‘#’, instead of ‘.’ we normally use for Class. So suppose you want to float any Picture towards the right side of text, simply take a new DIV, but this time instead of selecting Class, select Advanced or ID and name it as:

#Float-Picture-Right

Hit ok and then give its property. As this DIV would be floated towards the right side of text, so don’t forget to give Right Align in Block box in Align Text option and also in Box, select Float = Right (instead of left). Also try to give some extra space in width so your text would not be touching your picture. So you can call this DIV anywhere within the text. Like I’m going to show it to you:

In CSS this DIV would be:

#Float-Picture-Right {

text-align: right;

float: right;

width: 150px;

}

and to call this DIV, you can write following code anywhere within the text:

<div id=”Float-Picture-Right”><img src=”img/new-services-picture.jpg” width=”129″ height=”169″></div>

So I’ve made two DIVs, one for Left and other for right, I’ve called both and got the following result:

Slice your Mock Up to Make Website

HOW TO CALL FLASH?

Normally we call any flash in HTML by inserting SWF file from Insert >> Media >> SWF, but remember W3C validator would not be validating it, so to call SWF file you can use the following code:

<script type=”text/javascript” src=”swfobject.js”></script>

<div id=”flashcontent”>

<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0″ width=”560″ height=”400″>

<param name=”movie” value=”your-flash-file-name.swf”>

<param name=”quality” value=”high”>

</object>

</div>

<script type=”text/javascript”>

var so = new SWFObject(“your-flash-file-name“, “mymovie”, “560”, “400”, “8”, “#000000”);

so.write(“flashcontent”);

</script>

Now you need ‘swfobject.js‘ JavaScript file, so I’ve attached this file alongwith the Source PSD, HTML and CSS file.

Hopefully you have enjoyed my this tutorial, if so then drop a comment in the following box. I’ll really love your comments.

[Goto Slice Your Mock-UpPart I] [Goto Slice Your Mock-UpPart II]

About The Author

4 thoughts on “Slice Your Mock Up to Make Website – Part III

  1. I read all 3 parts of your tutorial and also
    downloaded.part 1&2 are easy to understand
    3rd one takes time to understand.any how
    thanks for sharing.

    Thanks,

Leave a Reply

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

Select your Language please »