Thomas Wallace: Lectures and Resources - A collection of website design lectures and resources

Creating Code Blocks

At this point we are ready to begin laying the groundwork for our new web site. The first step in the physical creation of the site, is to create blocks of code that we can reference externally via style sheets. To create these blocks we surround the content with a <div> tag


<div>Your Content Goes Here.</div> 

While this gives us a way to create code blocks, there is still no way to address a specific block unless we give it a name. To give a <div> tag a name, also known as an ID, we would write is like this.

<div id="mydivname"> Your Content Goes Here.</div> 

Code blocks can also be nested inside one another which provides additional flexiblity and control when styling our document.

Code Blocks for Your Website

  1. Open Dreameaver and create a new html document with the document type set to XHTML 1.0 Transitional

NEw Document Window

  1. Change View to Code View at the top of the document window.
  2. In between the <body></body> tags enter the following code:
<div id="container">
   <div id="header">Header</div>
   <div id="wrapper">
     <div id="content">Content</div>
   <div id="navigation">Navigation</div>
   <div id="extra">Extra stuff</div>
   <div id="footer">Footer</div>

To get an idea of what this looks like visually see below.
Div Structure

  1. Save the document as index.html in the root of your website (inside the Personal Webpage folder)


What I'm Reading

RSS Feed IconView More


  • 1.24.2012
    Structure, Content, Design, Behavior
My Calendar