Here I’m going to tell you some secrets. I hope these would be very rare and by using these technique anybody can become Web Designer. I’m going to tell you how you can convert your Template into Website by using Slice and Dice technique in CSS. It will be very long tutorial, because I’m going to convert a whole project into Website. So get ready for that. Here is the part 1 of Slice your Mock-Up to Make Website.

[Goto Slice your Mock-up Part II] [Goto Slice your Mock-up Part III]

Note:

This Tutorial would be telling you:

– What thing should you do to validate it from W3C Validator?

– It would be having Browsers Compatibility, it will be giving same look in major browsers.

– It would be telling you how to Convert PSD Template into Website (HTML/CSS).

– A lot of things to learn for Beginners and perhaps experts too.

1. First of all we have to prepare for all this. You must be needing a Template in Photoshop. I’ve chosen this complicated Template, so that you must be having a lot of things to learn:

Then you have to prepare a Folder in which you will be putting your HTML files, Images, Styles Sheets and if Flash Animation then a place for that. Suppose We are going to make the following Sub-Folders in a Folder. Suppose our main Folder has the name, Stunning-Mesh then the following sub-folders must be included in it:

Stunning-Mesh (Main Folder)

styles (All styles sheets would come inside this sub-folder)

img (All Images would come inside this sub-folder)

animation (All Flash animations would come inside this sub-folder)

2. Now Open your Template in Photoshop, then Open Dreamweaver (or any Built in HTML tool, like Front page, etc.) I found Dreamweaver easy to use, that is why using it.

3. Now you have to take an Empty file in Dreamweaver, by running the command File >> New (and select HTML)

Slice your Mock-Up to Make Website

and then you must be needing CSS file, so run the command File >> New and this time select CSS.

Slice your Mock-Up to Make Website

4. Save HTML in main Stunning-Mesh folder and then CSS file in styles sub-folder, suppose we have given the name of HTML file to index.html and css to stunningmesh-styles.css.

5. Now we are going to attach the CSS file with HTML. So goto HTML file and from the Property panel, click Class list menu and select Attach Style Sheet:

Slice your Mock-Up to Make Website

a box will appear, click on Browse button and then select your Style Sheet (which would be inside Styles sub-folder) and hit Ok:

Slice your Mock-Up to Make Website

So stylesheet is now attached with HTML, you will find this code in HTML source code inside <Head></Head> tag:

<link href=”styles/stunningmesh-styles.css” rel=”stylesheet” type=”text/css” />

6. Now better to slice your Mockup. You can use Slice tool and some people use only Guidelines to make slices. I also prefer Guidelines because these are very easy to manage. So press Ctrl+R to show Rulers. Before bringing Guidelines must draw a rectangle by using Rectangular Marquee tool. Because it would be very easy to put Guidelines on you desire location. Simply draw a rectangle and then move mouse pointer to Ruler and hold left click and draw the pointer on the edges of Rectangle, it will bring Blue thin line (Guideline).

7. So now back to HTML file again. You can make CSS DIVs manually and also through using Built-in panels. Run the command Window >> CSS Style or just press Shift+F11 key to open CSS panel. I’m now going to make the Background of this website. As you are watching white bg, but I’m going to give Margins. So in CSS Style panel you must be watching stunningmesh-style.css, right click on it and select New. A box will come, here you will be making a new DIV (Class) so whenever you are using Class Div, hit . (point) and then write the name. Also try not to use Numbers in name. So I’m making background so I’ll be giving the name .background and hit ok:

Slice your Mock-Up to Make Website

Another box will appear, asking different parameters. As we are making the background, so I’ll be only using Margins. From left column hit BOX and then write 0 in Top under Padding and 0 in Top under Margin (don’t forget to switch on Same for all under bother), now if you want to change the background color then hit Background from left column and write color number (by using # before color number) or you can use any image:

Slice your Mock-Up to Make Website

7. As this DIV has been made and now we have to call it. Simply goto Code of HTML and goto <BODY> and inside it write this:

<body class=”background”>

Now save both HTML and CSS file.

8. As our interface would be divided into 3 easy parts, i.e. Header, Body and Footer. So we would be taking 1 Main Div (in which all DIVs would come) and then will be taking Header, Body and Footer main DIVs. So first I’m going to take one DIV for whole website. So first check the Width of your Mockup, here in our case total width of our Website is 736 px. So I’m going to take a Main Div having width 736 px. Right click on background DIV in CSS Style panel and select New. Then write the name .Main-Div and then give the property Width = 736, Padding Top = 0, Margin Top = 0, like:

Slice your Mock-Up to Make Website

9. Now we are going to call it on HTML. Goto Codes of HTML and between <Body></Body> press Enter to take empty space and write this:

<body class=”background”>

<div class=”Main-Div” align=”Center”></div>

</body>

10. Now I’m going to make Header Main div, then Body main div, then Footer main div and calling them in HTML as (but remember this time I’m slect Left from Float, while giving the size):

Slice your Mock-Up to Make Website

<body class=”background”>

<div class=”Main-Div” align=”Center”>

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

<div class=”Body-Main”></div>

<div class=”Footer-Main”></div>

</div>

</body>

Slice your Mock-Up to Make Website

[Goto Slice your Mock-up Part II] [Goto Slice your Mock-up Part III]

About The Author

9 thoughts on “Slice your Mock-up to Make Website – Part I

  1. Hey-
    I just came back to this page (you helped me before) and my firewall stopped two viruses that were going to download off your page. Please check your site, something’s up.

  2. A nice tutorial that’s best for a beginners. I am going to read more articles of your website that’s title looks interesting..

  3. Looks like a great tutorial but the ads are distracting bouncing all over the page as I read and interfering with being able to see some of your text. The image of the ads isn’t showing, so it’s just text – can’t see how to close them.

Leave a Reply

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

Select your Language please »