Setting up the design

Saturday, September 20th, 2008 | CSS, Designing, HTML

Introduction
Welcome to the second part, in the tutorial that shows you how to create a CMS. In this part we’re going to set up the design, which means we’re going to code some HTML and some CSS, to make it look like the design we wanted. First I’m going to show you the sliced version of our design, and then we start coding it! I recommend you to read the other parts of this tutorial, which you’ll find under the tutorials section.

I’m not going to dig this point out (Setting up the design (Est: Approximately 30 minutes)) since the “only” thing we’re going to do is to set the design up, but I promise you that we will look into them in the further parts. Enjoy!

Starting off small
Well, I’m not going to do a step by step tutorial of how to slice our design, therefore you can download my sliced version. Open the file and get the slice tool (K). Now you should see the slices. Go to File->Save for web. Make sure in the appeared popup box that every slice is in GIF format and not JPG. I prefer to use GIF because of the file size. When you’ve checked all the images, press save and make sure that you only save the pictures.

Now that we have saved all the pictures, we’ll start setting it up. This is what we aim for!

Setting the design up
We’re going to need two kinds of document in order to set it up. Here is our so far, small tech-tree:

  • index.html
    Our index file which acts as our main file
  • stylesheet.css
    This is our stylesheet. I’m going to use CSS for applying the design. The code is well commented, by this tutorial does not teach you how to code CSS!

Yes, it’s very small.

As you probably can guess, open up a new text-document in your text-editor - we call it index.html. I prefer to use Komodo IDE 4 as editor, but others like Dreamviewer is also fine. First of all we’re going to declare a doc-type. I’m not going to write an essay about it, but at least I can tell you that it is really important to declare one. If you wanna know more about it read this excellent tutorial.

index.php

1
2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Okay, good. Now we add the head section. I think you know all the parameters given, if you don’t, you’re not ready to read the rest of this tutorial (go and learn the basics of HTML instead!).

index.php

3
4
5
6

<head>
    <title>Vectorized - Frederikbrinck.com</title>
    <link rel="stylesheet" href="stylesheet.css">
    </head>

Then we add the body tag, followed by the code to the design. I like to do it with the div tags because they’re easy to handle, also you get a much cleaner code than if you for instance used tables. When you start to set up a design, you need to analyze it and think of how you’re going to do. In our case it’s pretty simple. Our design consist of three parts: The upper vector strokes, the content, and the lower vector strokes. So, for our next line we’re going to place the image “v_up.gif”, which is the upper vector strokes.

index.php

7
8

<body>
    <div id="v_up"></div>

We have now placed our first div tag, using the attribute id. Therefore open up a new document and save it as stylesheet.css. In that document we first declare some standards (how links should look like), and after that we construct the id “v_up”.

stylesheet.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

/* Standards */
body{
    margin:0px;
}
a{
    color:#878787;
    font-family:palatino linotype;
    font-size:11px;
    text-decoration:none;
}
a:hover{
    color:#878787;
    font-family:palatino linotype;
    font-size:11px;
    text-decoration:none;
}
a:link{
    color:#878787;
    font-family:palatino linotype;
    font-size:11px;
    text-decoration:none;
}
a:active{
    color:#878787;
    font-family:palatino linotype;
    font-size:11px;
    text-decoration:none;
}
/* ID's */
#v_up{
    background-image:url("images/Vectorized_up.gif");
    background-repeat:no-repeat;
    width:100%;
    height:150px;
}

To the v_up id we apply a background image, which is our upper vector strokes (Image name Vectorized_up.gif). After that we set the background to no-repeat and give it a height of 150px.

The next task is to add the content itself. It’s done pretty easy, if you know how to handle div tags. You should always be aware of the way they’re placed, which is beneath each other unless you’ve given them a float attribute. Therefore, it is time to add a “container” or what I in this case call a “layout” div. The layout div is followed by v_heading that has a float attribute applied, so our next div isn’t placed beneath.

In v_heading we place our headlines. The v_heading consist of 2 div tags. One that act as the markline which is the red line, and one there act as the text holder. After that, we close the div.

index.php

9
10
11
12
13

    <div id="v_layout">
        <div id="v_heading">
            <div style="background-color:#FF0000;width:10px;height:33px;float:left;"></div>
            <div>FREDERIKBRINCK.VECTORIZED</div>
            </div>

Notice that we don’t close the v_layout div yet, and also that we add the style manually to the markline (that is because we’d like to give the admin the opportunity to decide it’s color). Here is our stylesheet for v_layout and v_heading:

stylesheet.css

36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

#v_layout{
    margin:0px;
    padding:0px;
    background-color:#eaeaea;
    width:100%;
    height:278px;
}
#v_heading{
    color:#878787;
    font-family:palatino linotype;
    font-size:20px;
    float:left;
    width:50%;
    background-color:#eaeaea;
}

Well, the next thing we’re going to add is the menu div. It should be placed left to v_heading, which is why v_heading has a float attribute applied. In v_menu we add some random menus, just to get a hang of the look.

We also add the div tag v_space, which is the space between the line that contains the menu and the heading, and the content div.

index.php

14
15
16
17
18
19
20

        <div id="v_menu">
            <a href="index.php">HOME</a>
            <a href="index.php">PORTFOLIO</a>
            <a href="index.php">ABOUT</a>
            <a href="index.php">CONTACT</a>
            </div>
        <div id="v_spacer"></div>

And the CSS for v_menu and spacer:

stylesheet.css

51
52
53
54
55
56
57
58
59
60

#v_menu{
    width:50%;
    float:left;
    background-color:#eaeaea;
}
#v_spacer{
    background-color:#eaeaea;
    width:100%;
    height:33px;
}

Last task
Good. We’ve nearly reached the end. The final task is to add the v_content div. I’m not going to do that, since then it’s just a copy-paste tutorial and I don’t like that. Therfore you’re going to do it on your own! I can tell you that what we need to add are, a content holder, a markline that can change color (meaning that you should apply a style; look in v_heading), the content which you fill with text, and last an image.

Try to do this by yourself, and ask for help if needed, else this is the tutorial-parts end. Download the files unfinished or finished, depending on what you want to try. Good luck!

code.rar
code-finished.rar

No comments yet.

Leave a comment

You must be logged in to post a comment.

Options

Categories