Slice and code your first website – Part 2

Hi again and I’d like to welcome you back to my Slice and code tutorial. This is part 2. In this tutorial I want to learn you how to style your menu, how to set your content properly, change the standard font, how to save your CSS to a file and how to save it as a Dreamweaver template.

A quick Preview of what we will accomplish with this slice and code tutorial.

If you missed part 1 of slice and code, you can go back and read it first.

Step 1:

Ok, we will start with styling our menu. Click into your menu div and add your menu buttons for example: Home Info About Contact.

Add your URL or use ” # ” for none existing pages.

The menu links will now turn to that ugly blue standard links.

The HTML code of the menu div will look like:

<div id="menu">
    <a href="#">Home</a>
    <a href="#">Info</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
</div>
Code language: HTML, XML (xml)

Step 2:

Now we will give it some style, you should always remember LoVe HAte

a:link

a:visited

a:hover

a:active

Code language: HTML, XML (xml)

Do you remember how we added our body tag in our CSS from part 1?

First click anywhere into your menu-buttons and then click the add CSS line button.

You will now get this box:

BEFORE you click OK you should change ‘#wrapper #menu a‘ to ‘#wrapper #menu a:link‘ and then click OK.

First thing we do is give it a color, I used: #bf3415

I’ve set it to small caps and used none for text decoration so it won’t be underlined. The small caps won’t take effect in Dreamweaver but will have it’s effect when you preview it (f12)

Next we are going to add a right padding. Go to “Box” and set right padding to 10px and click OK. If you gave your menu’s a URL you will see the effects.

Step 3:

Duplicating, we are going to duplicate the a:link CSS line. Right click it and choose the option duplicate.

Change a:link to a:visited and click OK. There is nothing to be changed here so you can duplicate it again. Now change it to a:hover (#wrapper #menu a:hover)

This needs to be changed so double click the CSS line and give it a darker color, something like this color code: #941c02. That enough for now. You can always play around with other settings like give it more padding or underline it or what so ever.

Now duplicate the a:hover line and change it to a:active

Also, nothing needs to be changed here. The a:active is when you click your link, you can give that another color too but since you click in less then a second it is possible you won’t even notice it.

So this will be added in your CSS:

#wrapper #menu a:link {
    font-variant: small-caps;
    color: #bf3415;
    text-decoration: none;
    padding-right: 10px
}

#wrapper #menu a:visited {
    font-variant: small-caps;
    color: #bf3415;
    text-decoration: none;
    padding-right: 10px
}

#wrapper #menu a:hover {
    font-variant: small-caps;
    color: #941c02;
    text-decoration: none;
    padding-right: 10px
}

#wrapper #menu a:active {
    font-variant: small-caps;
    color: #941c02;
    text-decoration: none;
    padding-right: 10px
}
Code language: CSS (css)

Step 4:

Padding your content, As you may noticed when you added some text into your content your text sticks to the left and right side, and that doesn’t look nice.

So double click your content div, go “box” and use a left and right padding of let’s say 10px. But now our content box gets wider with 20px so we need to change our width from 800 to 780px

(Sometimes it can be useful to add a padding to your top and bottom too)

But then there is another problem to fix. Our content_foot is out of place. No worries, just double click your content_foot CSS line and add a -10px left margin.

There, that fixed it!

Step 5:

We are still using the standard font, but we can change that too. Double click your body CSS line and choose any font you like. You can also use Google Fonts.

By changing this in the body tag, it will take effect for everything. You can also change the font for your menu if you like to have a different font then your content. Then you need to change your “LoVe HAte”and specify your font. (Same for H1 tags and so on..)

Step 6:

Allright, I think we’re almost done here!

Now we can export our CSS.

Click on your first CSS line (probably #wrapper) and hold shift and click your last CSS line.

Right click it and choose to move your CSS, then choose the option to make a new CSS file and click OK. Make a new map named CSS, and save it that map. I named it style.css

Now your CSS is moved from your HTML to a CSS file. You should notice that the css in your HTML is gone and there’s a new line:

<link href="slice-code-first-website-part-2/CSS/style.css" rel="stylesheet" type="text/css">
Code language: HTML, XML (xml)

And you should notice the new page too style.css. Save it!

Step7:

Your doing great! Now we are going to save it as a Dreamweaver template.

This means that the page you made is your standard page. If you save it as a dw template it is going to be very easy to change your lay out. for example, you have more then 20 pages and you didn’t save it as a template, this means if you want to change a menu link or add a link you have to edit 20 pages! If you saved as a template you only have to edit the template and it will change the 20 pages automatically.

But first things first,

If you didn’t add any text in your content you should do it now, use some lipsum text to fill it. Select ALL and ONLY the text and go to:

Insert – template objects – editable region (CTRL + ALT + V)

I named it CONTENT.

Click OK and you will notice your text has a green border now. GOOD!

If we save it now as a template it will only be possible to edit that part, since we only need to add content it is perfect! If you had more things you need to edit you can add another region. Things that doesn’t need to be changed often like the menu does not need that. If we should edit the menu we edit the template so everything will be changed at the same time.

OK, now you should save it as template: File – Save as template. give it a name and that’s it, it changed from HTML to DWT.

Now, if you want to make a new page you go to File – New – Page of template

ALWAYS do it like this, for every page you make always start from a new template page, ALWAYS! Also if Dreamweaver asks you to edit the links you should also ALWAYS click yes, if you don’t click yes it will not edit your pages you already made and it is very possible your changes will not be made on your pages.

So that’s it, first thing you do now is make a new template page save that one to index.html and start making new pages like info.html, about.html and contact.html go your DWT (Dreamweaver template) and change your menu links to the pages links. Save it and click YES when it asks to edit the links, and see for yourself if it worked!

Well that’s about it for this slice and code tutorial, I think I’ve got it all now, If not you can always use the comments below to ask for help or show your own result.

Download the HTML.

Find more tutorials.