Learning About Website Building Basics Will Help Ensure
Everything Isn't Built On Top Of A Bed Of Marshmallow
Code Used To Make This Website Design
The Cascading Style Sheet (CSS) Code
Building A Website Structure
When it comes to looking at how to design a website it is important to realize that some website development techniques that were very common in the past are considered "outdated" by today's standards. The most notable of these elements is the use of tables as structural elements. The biggest reason for this is that tables pose a serious problem for people who use other technology to surf the internet (such as the Blind using a Screen Reader). As a result, tables should not be used to create a website's structure.
The current recommended method for creating the structure of a website is with the use of Div Tags which allow each element of the website's structure to be controlled and styles as an independent entity. To help show you how to do this we will take you step-by-step through the process by creating a website structure using only Div Tags. In our example, the structure we will create is the same one as is being used on this website. That way you can see everything in use as we take you through the process.
For the purpose of this demonstration, we will assume you have some sort of WYSIWYG HTML Creation program like Dreamweaver, etc. or at least a basic understanding of coding to be able to follow along.
The very first thing that we want to do is create a container element that will hold all the various parts of our Website Design. To do this we will use Nested Div Tags (Div Tags inside other Div Tags).
The first Div Tag element we will create we will call wrapper because, as the name suggests, it is like a wrapper and holds everything inside. This will also allow us to be able to control all the common style elements of our website without having to create separate style elements for each individual component. All of which we can do very easily with the use of Cascading Style Sheets (CSS).
NOTE: Currently the most common screen resolution for computers today are 1024 x 768 and larger. This is important information in regard to Website Design because you want to make sure the overall width of your website (controlled by the Wrapper) does not exceed someone's browser window. That means you will want to keep your websites overall width to a maximum of between 950 - 980.To get an idea of how big that actually is, this page is 950 pixels wide.
Once we have the Wrapper set up and the basic style elements assigned (such as text size, text color, internal background color, etc.) we can begin adding further elements. The first of these is going to be the thing we see at the very top of almost every website - the Header element. This too is accomplished by using Div Tags. The only difference is that this Div Tag will be used inside of the Wrapper and will be called header.
Because we have already defined the width of our website through the Wrapper's style itself, we don't need to define any width element unless it is different from our current "default" size. For elements like the Header, we do want to define the height as it is a critical part of good Website Design. What we want to do is have the ability to put a decent amount of information "above the fold" (a newspaper terms meaning that it appears on the top half of the paper - or above the fold). The main reason for this is that most people won't scroll down the page if we can't get their attention in the first three seconds. If the Header is too big, it will push our content below the fold, and make it more difficult to get the attention of our visitors.
Right below the Header element we will add another Nested Div Tag called links (we actually used navbar in our website, but wanted to make sure there was no confusion about what the element was for - so for this demonstration we called it "links"). What's important is that this new Div Tag is still inside of the Wrapper, but it is below the Header - not inside of it.
On most websites this element is a common place to put global navigation (links to all the various pages throughout the website). We decided to do something different and use this area for our search tool and to provide a link to our sitemap. Whether you choose to use this element for global navigation or something else (if you decide to even use it at all) is purely a matter of choice.
The next element we are going to add underneath the Links section is again another Div Tag - this one called main-area. The difference here is that this particular Div Tag is Floated to the right side of the Wrapper. The reason we want to do this is because we want the content of our website to be as close to the top of the code itself as possible. By putting this element in a different order than normal allows us to move it up the code, without changing the actual look of the website.
In order to float our Main-Area we simply add a line of code in our Cascading Style Sheets (CSS) specifying that the element is floated to the right. The browser will then take care of everything else. There is more that we want to do with this particular element, but we will come back to that in a moment.
The next thing we want to do is fill in the gap created by the Main-Area by adding another floated Div Tag called left (or left-column in our design). In this case Left is floated to the left so that it sits directly beside the Main-Area. You do have to set the individual widths for these two floated elements so that they don't overlap. If they do, then they can't sit side-by-side as we would like.
As you can see from this page, we are using this area for our global navigation. Depending on the size and complexity of the website you can use this element for "specific navigation" as we have done. You will notice the links on the left in this section are different than those of the main website. This is done to ensure that each section is a self-contained element (also called Siloing - which we discuss on another page in this section).
To round off our the design of our website we can now enter the bottom element of the website by adding another Div Tag called footer. This is the area that is commonly used to display copyright information (as we've done) and possibly basic contact information (like a phone number). Some websites also use this area to add a duplicate set of global navigation. The reason for this is that JavaScript generated "drop-down menus" are not usable by the Search Bots and this provides them text based links that they can use to travel around the website. This isn't needed if the links are already text based (as all of ours are).
Now that we have created our basic Website Design, we can go back and do more things with the Main-Area. What we want to do here is actually nest two more Div Tags inside of it. The first of these we will call content and just like the Main-Area itself will be floated - though this time we are floating it to the left. Because it is inside of the Main-Element it will only float within it's borders (meaning it won't interfere with other floated elements).
This is one of the most important sections of our Website Design because it is where all the actual content will go (like all this text you're now reading). As we did before with Main-Area and Left, we need to control the size of the Content so that it will leave room for the final element we will be adding in a moment. As before, if the elements are too big and overlap they will not be able to sit side-by-side as we want them to. Because we are floating all of these elements in an effort to put Content higher up in the code, this is very important.
This now takes us to the final structural element of our Website Design - another Div Tag called right (or right-column in our design) that we will also be floating to the right. This particular design element is most commonly used to host paid advertising (as we are doing). Some people, especially blogs, etc. also use this area as an additional navigation area to connect to additional material on the website. Because this element is not often used for such things as global navigation, you do need to take care if you plan on doing something like that. As with all things Website Design oriented, each element of your website can be used for whatever purpose you decide. You just need to make sure that visitors to your website know exactly what's going on.
We also wanted you to be able to actually see the code and how it lays out to get a better idea of what everything looks like. As such, we have included two additional sections below - one to show you the HTML code and the other to show you the Cascading Style Sheet (CSS) code. Both of these may be used to develop your own website if you wish. They are very commonly used and as such don't really belong to any one person or group.
The only other thing that you should take note of with regard to the code, is how little of it there actually is to create all of these elements. This is also important because the more code you have it does three things: 1) makes the individual file size for each page bigger, 2) slows down the loading time for each page, and 3) provides more opportunities to make mistakes. As such, the method we used for coding has it's own special name - Clean Coding (which means there is no unnecessary code used at any time through the design of the website).
Code Used To Make This Website Design
As mentioned above here is a look at the specific code that went into creating the structural elements of our sample website (and this one too). As you can see, there really is very little code that went into creating this structure. One of the main reasons for this is that all the various style elements are controlled using Cascading Style Sheets (CSS) and because of the design, allows us to create site wide "default" elements - like text size, background colors, page width, etc. Without this ability we would have to repeat the same basic style information for each individual page element (that will definitely not allow the code to be "clean" for long).
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navbar"></div>
<div id="main-area">
<div id="content"></div>
<div id="right-column"></div>
</div>
<div id="left-column"></div>
<div id="footer"></div>
</div>
</body>
As you can see in the code above (represented by the spacing of the elements) everything except the "Body" element is inside of the Wrapper. Header, NavBar, Main-Area, Left-Column, and Footer are all used in a line within the Wrapper, while Content and Right-Column are used inside of the Main-Area. Once again, the reason for this is so that we can keep the Content of the website as close to the top of the code as possible. In this particular case it is element number Three (the Main-Area and Wrapper are merely containers and don't do anything other than hold or style other elements).
The Cascading Style Sheet (CSS) Code
Before we finish this section off, we need to take a moment to have a look at the Cascading Style Sheet (CSS) code that allowed us to style the various structural elements. Don't worry if you don't understand some of these coding elements. The ones that are most important we will explain beneath the code shown.
#wrapper {
width: 950px;
margin-right: auto;
margin-left: auto;
font-family: Arial, sans-serif;
font-size: 14px;
}
#header {
height: 80px;
font-size: 35px;
font-weight: bold;
}
#navbar {
clear: both;
}
#main-area {
float: right;
width: 808px;
}
#content {
float: left;
width: 625px;
}
#right-column {
float: right;
width: 160px;
}
#left-column {
float: left;
width: 140px;
}
#footer {
clear: both;
}
As you can see in the code above, the code controlling the Wrapper (the lines of code between the first set of { and } ) sets a width of 950 pixels. Directly below that there are two lines of code (margin-right and margin-left) that are both set to "auto". This is a special style element that allows the website to remain in the middle of the browser window no matter how big the browser gets. You will also notice that Wrapper also contains the style element that defines the default text size and color for the entire website.
Below the code for the Wrapper is the code for the Header. Here what is most important is the text-size and font-weight elements. Normally the Header contains an image (as was done here), however, we also need to add another element because not everyone can use images (the the Blind using a Screen Reader). By setting text sizes etc. here it will allow you to display whatever information is defined in the Alt Text of the image as if it were actual text. This allows you to create a false header image from that text.
The last element we want to mention is used in both the NavBar and Footer - the "clear: both" element. This is only used in conjunction with Floated elements and ensures that nothing above can float below. It also acts like hitting the "return" key in typing - it sets everything to begin on a new line (so to speak). With regard to the NavBar the Clear element isn't actually needed - it's added in just as a precaution. With the Footer, however, it is vital. Without it being there the Footer will not begin on a new line (as it were) and could be displayed incorrectly as a result. Also note that you don't need to Clear every Floated item - you only need to do that when you want the next item in line to start on it's own line.
ShareThis
