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

Building a Website From Scratch | Part 1 – Slice and Dice

Building a website is a complex endeaver.  It requires a pretty broad skillset that doesn’t come without practice.  To really do it right, you need to have a good eye for graphic design, have a firm understanding of how to structure the files into a coherent sitemap, and have the ability to read and write code in several different flavors.  And that’s just for starters.  Websites can be as simple as a single, static page or as complex as a full-blown, data driven, ajaxified web application.  It’s really up to you and the needs of whoever the site is for, if it’s not for you.

My goal here is to give you the tools you need start with a twinkle in your eye and finish with a solid, interactive website.  Since I’m not a graphic artist, I’m going to leave the graphic design work up to you.  We will start by assuming that you have already created the sweetest design the world has ever known…  From that point, we can start getting into developer land by taking that graphic design and translating it into a web page.  From there we will further elaborate on it until we arrive at a respectable finished product.

To illustrate what we will be doing, I’ve designed what could possibly be one of the worst looking website designs I’ve ever encountered.  Well, I’ve actually seen worse, but this one is pretty bad.  Don’t believe me?

I did this so I wouldn’t have to worry that anyone steals my design and make millions with it.  What this design does have is all the pieces we will need to help you learn how to do the make a website out of your design.

Let’s do this!

The first step is to take your spankin’ new graphic design and cut it all to pieces.  You see, when someone visits your website, they have to wait for every single byte of data that your site has to download before they can see it in it’s entirety.  Since the goal is to minimize download time, we need to minimize the amount of data that they will have to download.  A good website design keeps things stream-lined.  What I mean by that, is it is designed in such a way that the design can be cut into much smaller pieces and assembled to give the illusion of one whole piece.

To help make this a little more clear, let’s look at my graphic design:

If you look at the top of the design, you can see the light blue title bar that spans across the top with a logo on it’s left side.  Below that, there is the menu bar with the main content area taking up the rest of the space.  Each of these three important parts is designed with a specific goal in mind: to be repeatable.  Look again and you will see what I mean.  Ignore the logo for a moment.  The light blue title bar has the bottom two corners rounded and the rest of the space is taken up by a repeating design.  What we can do to make that more efficient to download, is to slice it into three parts: the left side, the right side, and a one-pixel wide sliver that we will repeat across the remaining width of the header.  When I say slice, I mean to take the original design and pull out the three parts that I mentioned into individual images, leaving three separate images (slices) created from the one big one.

The details of how you actually slice up your design are up to you, probably dictated by what application you are working with.  I use Photoshop, but that’s me.  However you do it, I’ve found the easiest whay to slice properly is to zoom way in and make sure that you are grabbing the right size slice.  Too small of a slice and you will be able to notice a definite separation between your side graphics and the repeatable zones.  Too big of a slice is just a waste of data to have to download.  If you don’t get it right the first time, don’t worry too much about it.  You’ll notice soon enough whether your slices blend well together or not.  If they don’t, just make the necessary adjustments to the sliced images and adjust the code accordingly.

There are some things that you should keep in mind when slicing up your design.  You’ll need to decide how the pieces will fit back together again.  With my design, I plan on making four conceptual blocks that will stack on top of each other: the header on the top, the menu bar in the middle,  the body underneath the menu bar and a footer on the bottom.  Knowing this will help me decide how to slice the pieces up.  For the header and the menu bar, the combined slices will each make up a uniform row.  So, I want each slice in a row to be the same height, allowing the whole row will be the same height.   When I get the bare header in place, I plan on positioning the logo in front of it.  So, the logo will have to be sliced on it’s own.

Since the goal is to minimize the amount of image data to download, you’ll want to remove as much text from the graphic design as you are reasonably able to before slicing it up.  With the design we are working with, the only text that will be incorporated into the images is the text that is on the logo.  That is because that text has special effects applied to it that are not possible to display without keeping it in the image.  The rest of the text that you see on the design will be incorporated as part of the html markup that each page will serve.

When all things are said and done, you might be surprised at how little of the overall design you actually need to use to make the web layout complete.  Here’s a representation of the slices I will be using for this series:

Before we go any further, a quick note about transparent .png files.  As you may know, .png files support transparency.  That’s really cool and all, but here’s something you maybe didn’t know: Internet Explorer 6 doesn’t support transparency.  You may be asking: so what?  Well, I guess it is up to you whether you worry about IE6 users or not.  There are still a lot of them out there, even with IE7 pushed down with automatic Windows updates.  My opinion is that it’s about time for them to upgrade to the latest version of IE or, better yet, Firefox.  They are both free and are helping move the future of web development in the right direction.  That being said, I still usually avoid transparent images as much as I am able to, without compromising the design.  In places where the background is unchanging, just leave the background in there rather than having a transparent background and avoid the possiblity of a poorly rendered view provided by IE6.

Well, I think that’s about all I need to say about the slicing phase.  I talked about how the original design will need to be broken up, or sliced, into several smaller pieces to minimized the amout of image data that will need to be downloaded to view your site.  I talked about looking for repeatable zones as a way of streamlining the download process.  I also mentioned that text should be removed from the images whenever possible and added to the html markup.  I even made you aware of the pitfalls of working with .png images with transparency.  It is your homework to take your killer design and slice it up to prepare it for it’s web debut.  In the next part of this series, we will talk about some of the principles that you will need to take those sliced images and run with them.

Here’s the sliced images from my design if you want to play along without creating your own:

Share