Home » The tutorial » Meet Bob

Meet Bob 

There are literally thousands of tutorials out on the internet to help you create a page, and many will use a little bit of CSS to help out.  Why is this one different?  Well, I’m going to go through the process from scratch because often the hardest part is knowing where to start.  And this tutorial is going to use a fictional photographer as the subject.

I’m going to make a few assumptions for this lesson.  First, you have web space that you are planning on using to market your services.   You don’t need the space right now since we’ll be doing straight HTML to start that will be viewable from your computer, but eventually you will want somewhere to upload so the world can see your site.  Second, you are comfortable with HTML and CSS.  You do not need to be proficient, or even have typed a line of either before.  But you cannot be afraid to try.  Many people fail in building their own sites before they start simply because they are afraid to try, or are afraid of messing something up. 

Meet Bob
Bob is a photographer, we’ll say in Cleveland, although it really doesn’t matter for this tutorial.  And Bob has decided that he needs a web site.  Most of y’all that have gone through the process of a web site know the reasons Bob has.  Clients have asked to see samples, but do not want to have to make an appointment.  Bob would like to be able to proof online.  And it’s one more way to get your name out to potential clients. 

I’m going to be using BobSmithPhotography.net as my fictional domain name, mostly because there already is a BobSmithPhotography.com registered to a photographer in New Mexico.

Branding and Colors
First, let’s look at what Bob already has.  It’s important that his future web site be an extension to the branding that he has already done. 

Here’s Bob’s logo.

You’ll notice that Bob’s logo uses a light blue and a light gray.  It’s important that we have similar colors extend into Bob’s design.  We’ll get a little more into colors when we talk about CSS.

We also need to find out what Bob wants his site to look like, so we’ve asked Bob to go and look at other photographers’ sites and come up with a few ideas.  Here’s what Bob decided:

• White background.  Bob likes the clean look of a white background and feels that a background with a strong color takes away from the photographs. 
  
• Margins on the sides.  Bob really doesn’t like pages that but up to the side of the browser window.  He feels that there should be at least a small margin to make the page feel open.
• A line around his main content.  Bob prefers that the ‘meat’ of his page be separated from the white background.
• Centered.  He wants the box that is created by the lines mentioned above to be centered in the page rather than on one side.
• The width to change with the browser window.  The term for this is ‘fluid’.  Bob really doesn’t like pages that are a fixed width and assume everybody is browsing in one resolution. 
• Content.  We’re going to ignore content for this tutorial, although it’s certainly something to think about if you’re doing this for real.
• Search Engines. Same notes as content.  Yes it’s important.  No it’s not part of this tutorial.

The Layout
For those that have done web design before, this layout is remarkably simple.  For those that haven’t you may be at a loss as to where to start.  First, we’re going to break the design up into sections, and we’ll worry about each section individually.

We’ve got 5 areas to worry about – the little black section on top is basically dead space between the logo and graphic. 

And a few things just to keep in the back of your head.  The logo and graphic sections are the only two that are going to be a fixed size.  The footer is going to expand to whatever width the page takes and whatever height is needed for the text inside.  The navigation panel is going to be a fixed width with the content section taking up the remaining width.  And the navigation and content sections are going to expand in height equal to whichever is taller. 

CSS
Now, we start into the code.

The first thing we want to do is create a box for each area, plus one box to hold them all.  In CSS a box is called a DIV.  I personally use classes to separate divs, although you could use ids if you want for this.  If that last sentence didn’t make sense, just follow along and do it the way I do.

body
{
margin-left: 20px;
margin-right: 20px;
}

This will keep the box that we create next from being flush up against the edge of the browser.  You could use any value, but I like about 20 pixels personally, so that’s what I’m going with here.

div.main
{
display: block;
margin-left: auto;
margin-right: auto;
border: 1px solid #cdcdcd;
}

A little explanation before we build the rest of the boxes.  Display: block; is not required because a div is a block level element.  I just prefer to put it to keep myself sane.  Setting margin-left and margin-right to auto centers the div.  The 1px solid #cdcdcd setting for border puts a 1 pixel solid gray line around the div.  The gray is the same color as in Bob’s logo.

div.header
{
height: 100px;
width: 100%;
}

Just making the header 100 pixels tall and set to go across the entire div.main.  100 pixels is the same height as Bob’s logo and the image that he wants in the header.  The logo and graphic are going to be table cells inside this div. 

div.footer
{
width: 100%;
background: #cdcdcd;
color: white;
text-align: center;
font-size: x-small;
}

This sets the footer to go across and makes the background color the same gray as Bob’s logo.  It also makes the text color white, sets the text to center, and makes it a little smaller than the body text.

td.navigation
{
background: white;
color: #cdcdcd;
width: 150px;
vertical-align: top;
}

td.content
{
color: black;
text-align: justified;
vertical-align: top;
}
I’m doing the navigation and content sections as table cells.  CSS purists will tell you this is a major fault and not to do layout this way.  But the ease at which you can do a layout of this type plus the cross-browser issues it clears up make it my preferred way.  The width of the navigation cell is set at 150px which I like as a width, but you can certainly do it whatever width you want.  For that matter, you can leave the width off and have it be totally fluid. 

The vertical-align: top; settings tell the cells that you want the text to be at the top.  For some reason, the default vertical alignment for an HTML table cell is centered, which we don’t want. 

The HTML
Again, I’m going to break this down into sections.

<html>
<head>
<title>Bob Smith Photography</title>
<link rel=”stylesheet” type=”text/css”  href=”style.css”>
</head>
<body>

This is pretty much as minimal of an opening to an HTML file as you can get.  Line 1 tells the browser it’s an HTML file.  Line 2 starts the head section and link 5 ends it.  The head section is where you put things that the visitor won’t see, except of course for the title that they’ll see as the window title – and that’s line 3.  The head section is also where all the meta tags you’ve probably read about go, but that’s beyond this tutorial.  Line 4 links to the style sheet we just created.  And line 6 opens the body section which is where all the visitor viewable content is. 

<div class=”main”>