Building a Website From Scratch | Part 3 – Stand It Up

In Part 1 of the Building a Website Series, we talked about taking a graphic design and prepping it for the web by slicing it up.  In Part 2, we dove into a crash course on CSS to prep you for actually coding the website.  In this part, it’s time to take what we’ve done/learned so far and make something useful out of it.  Are you ready for this action?  Hope so…

Foundation

For starters, we need just some simple markup:

That is the foundation of a web page.  You’ve got your DOCTYPE definition (we’ll go with XHTML 1.0 Transitional), you’ve got your (the root of all the content), you’ve got your (where we will put our CSS includes) and (which defines what the browsers will display as the page’s title), and you’ve got your <body> (where all the visible elements go).

Go ahead and save that markup with a filename of your choosing, ending with .htm or .html.  I’ll be using SweetDesign.html.  Next, we need to get our external css file created.  For that you can just create an empty file with a name of your choosing that ends in .css.  I’ll be using SweetStyle.css.  These can be in the same directory, if you like.  On bigger projects, you’ll probably want to put the css in it’s own sub-folder, but that isn’t a big deal here.

Now that you have the css file created, you’ll need to link it into the html file.  You do that by modifying the <head> as follows:

What we have done here is tell the browser to load the file SweetStyle.css and use it as the stylesheet definition.  Before we go any further, we also want to include a reset stylesheet.  Why?  Because every browser adds default styling to elements and that styling may differ across browsers.  If we include a reset stylesheet, that eliminates all the default styles and puts us on the right track for cross-browser compatibility.  We’ll use the one defined on Eric Meyer’s Blog:

Go ahead and copy that into a file called reset.css, right next to your other css file.  With that we will need to further tweak our <head> as follows:

Notice that I have added the include for reset.css *BEFORE* the original css file include.  That is very important because we want the reset file to be applied first, clearing the default styles for all browsers.  Then our styles can be applied, trumping the reset styles that we want to change.

Now that we have the style sheet and html foundation in place, make sure to copy your sliced images from Part 1 into a subdirectory of your choosing.  Then we can start using the images on the page.

Time to Rock

Before we go any further, a quick disclaimer…  My goal here is to help you get your feet wet by creating your first table-free (or maybe just first) web page.  I don’t want to overwhelm you with complex details, so don’t assume that this approach is the only way to mark up a page.  I will try to keep the markup as clean and simple as possible, but there will definitely be room for improvement once you start to understand the concepts.  I will leave it as an exercise for you to make those improvements.

Now that we have the foundation in place, it’s time to do this thing.  Take a look at the graphic design from Part 1.  You will notice that there distinct vertical sections (rows, if you will).  One is the blue bar at the top, including the logo.  The next is the menu bar.  Finally, there is the gray body section.  Those sections are there for a reason, and I will now show you that reason.  To get the markup of our design started, we will modify the <body> tag as follows:

Notice that I have added one div tag, with the id layout, containing three <div> tags to the, each with an id (header, body, footer).  These tags will make up the logical sections of the page.  From this foundation, we will further elaborate to make the page begin to take shape.  layout will define the styles for sizing for the whole design and the other tags will define elements for their own individual sections.

We’ll throw down some foundation styles to get the ball rolling:

This sets up the background color and gradient as well as the width and positioning of the actual layout.  Now, it’s time to drill down a bit.

Header

Let’s start with the top and work our way down, shall we?  The header is pretty straight-forward in this case.  Still, we will need to elaborate on our foundation a bit to make it happen.  Modify your header tag as follows:

Note that I am using compass directions, W for west (left) and E for east (right), to signify the elements location.  Now, let’s add some style to those tags and see if we can pull this thing together.  Go back into your style sheet (mine is SweetStyle.css) and add the following:

Now, if you view the page in a browser, you should see just the blue header and the gradient background.  If so, you are in good shape.  If not, check your image reference.  Recall that the path defined in the url(…) is relative to the location of the css file that it is defined.

Now lets add a little polish to the left side of the header:

That defines a width and a height, so the image fits perfectly in where it is supposed to go, then it floats it to the left side of the header.  Viewing the page now, you should see a nice rounding out of the bottom left of the header.  Let’s do the same thing for the right side:

This is basically doing the same thing as the left side, but for the right.  Right?  Viewing your page again should show a nice rounding out of both bottom corners of the header.

Let’s round out the header by adding the style for the logo:

This positions the logo absolutely within the header, so that it goes exactly where we want it.  There we have it: header == done.

Body

The next stop in our tour is the body of the layout.  Go ahead and modify the body div as follows:

And add this to your style sheet:

A little explanation here, the body div will be the container for the menu and the actual content.  This is because these are the two things that can actually vary once the design is in place.  So, we have a parent <div> for both of them and add a new <div> for both the menu and the the content.  The menu is where we will put the navigational menu, so let’s start there.  Elaborate on that tag as follows:

That sets up the left and right finishing to the menu, just like in the header, as well as starts an unordered list with links for the actual menu items.  Now apply the following style to your style sheet:

That sets up the background for the menu and both of it’s sides.  It also sets up the styling for the unordered list items by floating them to the left so they play well with our horizontal menu.

For the actual hyperlinks (anchor tags) in the menu, add the following:

That gets us set up with some initial state for the menu links as well a state for when the mouse is hovering over a link.  Notice that there is a margin of 1px on the initial state and the margin is removed on the hover state, BUT a 1px border is added to the hover state.  That is because borders are added to the *outside* of the element.  Since there is no border on the initial state, we need to add a margin (padding would work in this case also) so that we don’t have any bizarre jumping things happening from borders being added and making the link elements bigger when the mouse is over it.  To see what we are trying to avoid, comment out the margin in the initial state, reload the page, then mouse over a link.  You should notice that it the text jumps a pixel.

That wraps up our menu.  Now, any content we add to the page will go inside the content div.  We’ll gloss over that for the moment and come back to is shortly.  Let’s finish up the layout with some quick additions to the footer.  Add this to your html:

And add this to your stylesheet:

We just added a simple footer that has some text (or links) of your choosing at the bottom of the page.  The footer will get pushed down to make room for whatever content you add to the page.

Containers

Now, lets get back to the content of the page.  In our awesome design, there is a container for each section of content to reside in.  It gives the content definite separation.  So, let’s get that bad boy standing up as well!

This is going to look like a lot, but go ahead and add this markup to your content div:

Let’s start from the outside and work our way in…  The class box is the outermost element for the whole container.  From there, we have three logical rows: the header, the content, and the footer.  The header has the classes boxN* (Note that the use of the compass notation again), the footer has the classes boxS* and the content has the remaining ones.  If you look at each logical row, you will see the usual definitions for left, right, and center.  Note that there is a div at the bottom with the class clearboth.  That is a simple way to make sure that the content element contains all the containers the page may have by clearing all floats.  That should stay at the bottom and any additional containers will be added above it.  Now add the following to your stylesheet:

That’s a lot of css, but each definition is pretty simple if you look at them closely.  The key point to take note of here is that the elements on the left and right have their background images starting in various locations and repeating in various ways.  That is what makes this container look correct.

Now that you’ve got your container set up, copy that markup and drop a few of them in the content element.  You’ll notice a three column layout, which is a pretty good place to start.

Conclusion

This post was a doozy!  There was a lot of info to cover here, but none of it is too complex.  If you take each part as a section, you’ll see that things break down into manageable parts.

We covered the initial markup required for a html page and how to include your external stylesheets.  Then we covered how to break the layout down into logical parts to tackle individually, starting from the top and working your way down the page.  Then we covered how to create your containers to give your content a way to have separation.

I hope that this has proven useful for you get get your graphic design translated into a real web page.  You can use this spankin’ new web page as your template (or master page) for all the pages in your website.  Other things that you can do from there include using Javascript and Ajax to make the navigation animated, smooth and flicker-free.  But, that is a topic for another conversation!

Get the code for my design here

Share