Slice and code your first website – Part 1

So, you are probably new into webdesign and you might just created your first website in Photoshop ever. Congratulations! But what do you have to do now? How do you get your website up and running. In this tutorial I’m explaining how to slice and code your website.

Okay, here is a tutorial about how to slice AND code your website for starters.

I’ll try to explain you how to slice your template in Photoshop and how to code it in Dreamweaver using DIV tags.

You have to start at some point right? So, let’s use DIV’s. In your further development carrier you’ll use more HTML5 tags but once again, you have to start with something.

It’s a very basic template so it won’t be that hard, for now..

The PSD and the HTML of this template is available for download so you can easily follow the steps. Preview of what we will accomplish.

Step 1:

You can start with downloading the Slice and Code PSD.

Open it with Photoshop and select your slice tool.

With the template open, we will start slicing this template. In the future your template will look more complicated but hopefully this tutorial will help you start. You need to begin somewhere right?

Step 2:

I have no idea what you’ve learned before but I want you to just slice only the bits that you really need. In this case it will be the text from the header, NOT the menu since it is just text and some parts of the content box since I used a border.

Start by disabling the background color so it will be transparent.

Drag with your slice tool a selection around the header text, and drag a new selection on your content top. Select it so that you have the red/orange part from the top and a small part from the sides, do the same with the footer and drag a new selection somewhere in your content box from border till border, It can be 2 pixels of height.

Rough sketch:

Step 3:

Next we will save this for web and devices. Go to File > Save for Web & Devices (Alt+Shift+Ctrl+S) and save it as only Images and PNG.

This will save the sliced images to a map called “images” You will notice you have more images then you need but don’t mind that, we will deleted them later.

Step 4:

Now you open your Dreamweaver, We will start of with doing the right thing when we make a new site when using Dreamweaver. In the top menu bar where you find File, Edit,… you will see a menu called “Site” and select “New Site”

Give it a name and a Location. I called it Slice & Code tutorial and I saved it on my desktop in a new map called “tutorial”.

Now select Advanced Settings so you can choose your dir for your images.

Select the folder and create a new map called “images”
and then Save it.

Nothing really happened now, but as you can see on your right your site is there.

We use this method to manage your sites more easy, you will understand it when you make more then 1 site,
I have like 15 of those.

Step 5:

Now you can make a new HTML file by selecting it from that Dreamweaver popup box. First things first, We give it a Title and save it as index.html

I used the title Slice & Code tutorial.

Step 6:

Okay good, we now have a white page with a title and saved as index.

(If not? You skipped step 5! You get punished and have to go back to start!)

On your top right you have a menu called “Insert” and a drop-down menu with possibilities like: Forms, Text, Favorites,.. We are going to use “Lay-Out”

Step 7:

Next we choose the option “Insert Div-Tag”

A box like this one will appear and make sure the first thing is “at selection point”I’m not sure if this is the right translation because my DW is in Dutch, just make sure it isn’t the option: at the beginning or the end of the tag) and give it the ID of wrapper. DO NOT CLICK OK YET!

First we add a new CSS line,

another box will pop-up,

nothing is need to be changed here just click OK and yes, again a box will pop up.

In this menu we can add and change the CSS.

First we go to “Positioning” and use Width 800 px and Height set to auto.

Then we go to option “Box” and use Margin left & Right Auto.

And click OK. The Wrapper div is made to ALWAYS center your website that’s why we have the right & left margin set to auto and the width set to 800 px because that is the size of our website. It can be bigger or smaller according to your website wishes.

OK, So far so good? If not please re-read the steps or ask some help via the comments.

Our CSS code is now:

#wrapper {
    height: auto;
    width: 800px;
    margin-right: auto;
    margin-left: auto
}
Code language: HTML, XML (xml)

Step 8:

From now on everything we do MUST be in the wrapper div.

You can now delete the text that been added in the div and make sure you are still in that div, add a new div the same way we made the
wrapper div. Make sure the insert is “at selection point” and give the ID the name header, click add new CSS line, again that box will popup and click OK.

We are going to add our text logo now, remember those sliced images from Photoshop? I hope so! We now need to copy those images to our other images map we made with Dreamweaver. Only copy the images we need to use for this website, so only the header text, the top and bottom of the content and the middle part too.

Since we are still in that map you can rename them and name it, header, content_top, content_foot and content_mid. Now go back to Dreamweaver and select in the CSS edit box Background and use the “header.png” and set it to “no-repeat”

Go to “Positioning” and use the same width and height of your header. In my case it is 424*51 but Yours can be different. and click OK.

Your CSS will look like:

#wrapper {
    height: auto;
    width: 800px;
    margin-right: auto;
    margin-left: auto
}

#header {
    height: 51px;
    width: 424px;
    background-image: url(images/header.png);
    background-repeat: no-repeat
}
Code language: CSS (css)

And your HTML:

<div id="wrapper">
</div><div id="wrapper">
Code language: HTML, XML (xml)

Step 9:

We are going to make our menu DIV now.

Go to your code and click between the two closing DIV tags ( </div></div>) so between the > and < again add a new div, same as we did before, ID is now menu, add CSS line.. Again in
“Positioning” we give it the width of 800 and give it a height of let’s say 30px. If you want your menu much bigger, you give it more height.

Go to “Block” and set “text align” to right
and in “Box” we change our padding. Only change the top padding so the rest should be blank. Set it to 10. This is just so our menu won’t directly stick to our header.

So now your CSS will look like:

#wrapper {
    height: auto;
    width: 800px;
    margin-right: auto;
    margin-left: auto
}

#menu {
    height: 30px;
    width: 800px;
    text-align: right;
    padding-top: 10px
}

#header {
    height: 51px;
    width: 424px;
    background-image: url(images/header.png);
    background-repeat: no-repeat
}
Code language: CSS (css)

And our HTML:

<div id="wrapper">
    <div id="header"></div>
    <div id="menu">
    </div>
</div>
Code language: HTML, XML (xml)

Step 10:

Step 10, adding our content box, but since we have a border around our content we need to make some div’s for that too. First of all we are going to make a div for our content_top. So after the closing div tag of our menu we are going to insert a new div, name this one “content_top” use in your CSS edit thing your background image: content_top.png and set it to “no-repeat” and in our “Positioning” we use 800 width and our height is the same as your image, mine is 6px and set it to “absolute”.

In placement we change the top to 100px. Since our header is 51px, and our menu is 30px and a padding of 10px we have 91px we need to go down, but of course we want a bit more, so 100 is good.

Still with me?

Ok, now we click again after our closing tag of content_top and we now make a new div named content, use the content_mid.png as background image and repeat it -y (Repeat-y) the “Positioning” is again absolute with a width of of course 800px no height because we want to stretch the content. And for placement we use 106 because now we have to add the height of the content_top. If your height is let’s say 10, you use 110. Get it?

Now we add our content_foot BUT this div MUST be in the content div, so Click BEFORE the closing div tag of your content div. Make a new div called content_foot, use the content_foot.png as background with no-repeat and give it a absolute “Positioning” with a width of,.. yes 800px and the height of your image in my case again 6px.

I’ve added some line breaks(enters) in the content div so you have some space to see the effects.

Your CSS will now look like:

#wrapper {
    height: auto;
    width: 800px;
    margin-right: auto;
    margin-left: auto
}

#content_top {
    background-image: url(images/content_top.png);
    background-repeat: no-repeat;
    height: 6px;
    width: 800px;
    position: absolute;
    top: 100px
}

#content {
    background-image: url(images/content_mid.png);
    background-repeat: repeat-y;
    width: 800px;
    position: absolute;
    top: 106px
}

#content_foot {
    background-image: url(images/content_foot.png);
    background-repeat: no-repeat;
    height: 6px;
    width: 800px;
    position: absolute
}

#menu {
    height: 30px;
    width: 800px;
    text-align: right;
    padding-top: 10px
}

#header {
    height: 51px;
    width: 424px;
    background-image: url(images/header.png);
    background-repeat: no-repeat
}

Code language: CSS (css)

and your HTML:

<div id="wrapper">
    <div id="header">
    </div>

    <div id="menu">
    </div>

    <div id="content_top">
    </div>
    <div id="content">

        <div id="content_foot">
        </div>

    </div>
</div>
Code language: HTML, XML (xml)

Oops! I forgot to add our background color, so here is step 11 for the slice and code tutorial

Step 11:

On your right you have the CSS that you made.

Click on the icon where my big arrow is pointing at.

Now the box will appear where we didn’t had to change a thing in before, Now we will.

Select in the first option TAG and use the Body tag.

Click OK and we are going to add a background color.

The background color I used in the template is: e7e2d2

And that’s basically it!

You can now add your menu and your content. Shall I explain that too?

Hmmm, I will make a part 2 for this, My fingers are feeling numb now.

Please do use the comments option below with any questions and I will try to help you asap.

You can download the full files of this tutorials. (PSD and HTML)

Ok, What you can expect in part 2:

Styling your menu, padding & styling your content and your text, Saving your CSS to a CSS file, saving it as a DWT (Dreamweaver template)

Update!

Continue reading Part 2 of the Slice and Code tutorial.

Find more tutorials