Web Design for Non Web Designers
If you’re reading this, chances are you decided to take on the feat of designing your own website with either a template based application or some type of web design software. Before you get started, here are a few things you may want to consider to help you understand the process.
Boxes
Everything on a web page is organized in boxes. Without putting content in boxes, text and images would follow a web page’s natural “document flow”. In other words, your content would read from left to right and would expand to fit the width of a given browser size. So it would look like lines and lines of content on the screen. The content would expand or contract based on the browser window size. Here’s an example of a Web page without any boxes, formatting or XHTML tags – containing text and images only.
Building a Web Page Layout
An HTML web page is different than working in something like Adobe InDesign or Photoshop. It just doesn’t work the same way, and you need to know this to avoid frustration. You have to set up boxes (commonly known and used as a “div” tag) to lay out your web page so it knows where to put content on the page.
How you position your boxes (or “div” tags) on the web page will determine your web page layout.
Using a combination of XHTML and CSS - the boxes containing your content are formatted onto a webpage.
The content (text and/or images) on your site should be set up in HTML or rather, XHTML. The STYLING AND FORMATTING of how that XHTML content appears, is determined by the CSS markup. For example, HTML mark-up would look something like this (note the Header and Paragraph tags < > which will determine the structure of your XHTML content (that is: text and images).
<h1>This is my Web Page Header 1 </h1>
<h2>This is my Header 2 </h2>
<p>This is some Website text that would go into a basic paragraph. The rest of the text in this paragraph will not make sense. It is just being used as an example. Everything on a web page is organized in boxes. Without putting content in boxes, text and images would follow a web page’s natural “document flow”</p>
<h2> Another Header 2 Here </h2>
<p>This is some Website text that would go into a basic paragraph. The rest of the text in this paragraph will not make sense. It is just being used as an example. Everything on a look like lines and lines of content on the screen.</p>
This XHTML will render in a browser to look something like this:
The XHTML tags give structure to your web page content. Structure should not be confused with styling or formatting which is done using CSS.
Next is an example of this web page XHTML, but we are going to put the content in “boxes” or rather, a DIV tag as part of the XHTML mark-up. We are doing this so that we can later format/style those boxes using CSS mark-up to position them into an organized web page layout.
We are setting up the boxes (divs) to be nested into one main container box (div) as follows:
<div> (this is the opening container box tag)
<div> (this is the opening header box tag)
<h1>This is my Web Page Header 1</h1>
</div> (this tag closes the header box)
<div> (this is the opening left column tag)
<h2>Thank you for looking at my Header 2</h2>
<p>This is some Website text that would go into a basic paragraph. The rest of the text in this paragraph will not make sense. It is just being used as an example. Everything on a web page is organized in boxes. Without putting content in boxes, text and images would follow a web page’s natural “document flow”. In other words, your content would read from left to right and would expand to fit the width of a given browser size. So it would look like lines and lines of content on the screen. The content would expand or contract based on the browser window size. Here’s an example of a Web page without any boxes, formatting or XHTML tags – containing text and images only. </p>
</div> (this is the closing left column tag)
<div> (this is the opening right column tag)
<h2>Another Header 2 Here</h2>
<p>This is some Website text that would go into a basic paragraph. The rest of the text in this paragraph will not make sense. It is just being used as an example. Everything on a web page is organized in boxes. Without putting content in boxes, text and images would follow a web page’s natural “document flow”. In other words, your content would read from left to right and would expand to fit the width of a given browser size. So it would
</p>
</div>(this is the closing right column tag)
<div> (this is another box)
<h2>Another Header 2 Here</h2>
<p>This is some Website text that would go into a basic paragraph. The rest of the text in this paragraph will not make sense. It is just being used as an example. Everything on a web page is organized in boxes. Without putting content in boxes, text and images would follow a web page’s natural “document flow”. In other words, your content would read from left to right and would expand to fit the width of a given browser size. So it would look like lines and lines of content on the screen. The content would expand or contract based on the browser window size. Here’s an example of a Web page without any boxes, formatting or XHTML tags – containing text and images only.
</p>
</div> (closing tag to another box)
</div> (closing tag to the main container box)
If you follow the opening and closing tags closely, you will see the following box structure (NOTE: borders have been added so you can see the actual box when rendered in a browser.)
Now that the XHTML content is set up in boxes (in this case, “div” tags), we can now position those boxes with CSS mark-up. To better explain CSS mark-up, just think of it as a side-kick of XHTML. The two are used hand in hand. Both compliment eachother to deliver a Web Page Layout.
In order to position each box (div) , first, we have to give each div an identity. By giving the box an identity, we can then tell the CSS which box to address. For example:
<div id= “container”> (this is our main container box)
The id would be added or changed within the XHTML mark-up within the respective opening div tag (not the closing tag </div> ).
What we will do first in the CSS, is tell the box/div with the id of “container” to be a certain width, and give it a background color. The CSS would be written in a separate style sheet (external style sheet) and then be “Linked” to the XHTML web page. The CSS mark-up for a certain width and gray background color would look like this:
#container {
width: 990px;
background-color: #CCC;
}
And it would be rendered in the browser to look like this:
Next, we will give a unique id to the rest of the boxes or divs within our Web Page.
<div id=”header”>
<div id= “leftcol”>
<div id= “rightcol”>
<div id= “anotherbox”>
Once the boxes/divs have an identity, we can give them specific formatting through CSS. For example:
#container {
background-color: #CCCCCC;
width: 990px;
}
#header {
background-color: #FFFF00
}
#leftcol {
width: 220px;
background-color: #00CC66;
}
#rightcol {
float: right;
width: 760px;
background-color: #FFFFCC;
height: 550px;
}
#anotherbox {
width: 990px;
height: 175px;
background-color: #FFF;
clear: both;
}
The web page would now render like this:
The purpose of explaining this is not to teach you CSS or XHTML mark-up or best practices– but rather to help you understand how CSS contributes to the style and organization of your XHTML Web Page Design so you are better prepared when working within a template based layout or web software program. Some templates let you edit and/or customize the XHTML and/or CSS. We hope this has given you a foundation for how the two work and interact.