From Photoshop to HTML

Part 5: Creating the About page

The about page will represent the majority of your content on your website. Most of it will be broken up into two columns with the main content on the left and supporting content on the right.

Step 1: Paste the foundation code

1. Open index.htm and copy everything in that file.
2. Open about.htm and paste it there.

Step 2: Change the page title

Change the page title to About between the title tags in the header.

<title>About</title>

Step 3: Create the left column

3. Paste the following code into about.htm inside the #content div.

<div id = "left-column">
    <h1>About</h1>
    <div class = "content">
    <h2>What we do</h2>
    <p>Phasellus sollicitudin adipiscing luctus. Vestibulum suscipit, velit ac pharetra malesuada, risus enim lacinia nunc, vel rhoncus metus libero quis erat. Etiam porta est id tellus ultricies quis accumsan ligula interdum. Cras quis velit nulla, non pellentesque metus. </p>
    <ul>
        <li>Mauris neque nulla, rutrum eu rutrum.</li>
        <li>Duis magna erat, luctus et accumsan</li>
        <li>Phasellus sollicitudin adipiscing luctus.</li>
        <li>Mauris ut ultricies ligula. </li>
        <li>Cras molestie pretium orci nec laoreet. </li>
    </ul>
    
    <h2>Why choose us?</h2>
    
    <p>Mauris neque nulla, rutrum eu rutrum ac, mattis in nibh. Suspendisse ornare vehicula justo, faucibus mollis tortor iaculis vitae. Duis magna erat, luctus et accumsan non, fringilla sed libero. Mauris luctus tincidunt libero, ut consequat eros accumsan a. Nunc volutpat hendrerit lectus, et eleifend dui eleifend nec. Nulla porta condimentum sem.</p>
    <dl>
        <dt>In eget mauris neque</dt>
        <dd>Morbi vitae egestas purus. Donec pharetra volutpat dapibus. Sed urna risus, convallis vel tincidunt vel, pharetra at nulla.</dd>
        <dt>In eget mauris neque</dt>
        <dd>Morbi vitae egestas purus. Donec pharetra volutpat dapibus. Sed urna risus, convallis vel tincidunt vel, pharetra at nulla.</dd>
        
     </dl>
     </div>
</div>

4. Inside layout.css paste the following after the #content block.

#left-column
{
	width:640px; 
	float:left;  
}

The Content Class Div

5. Inside layout.css paste the following code

.content
{
	float:left;
	padding:10px; 	
}

The content class (class = “content”) should not be confused with the content id (id = “content”).
The content class adds a padding to each column and makes sure that the content flows correctly. The content id adds a background image and sets the default height of the content.

6. If done correctly it should look like this

Step 4: Create the right column

1. Paste the following code right below the #left-column div

<div id = "right-column">
    <div class = "content">
        <h2>Our Mission</h2>
        <p><em>Mauris eu sapien risus. Nunc vel mi dui. Nunc velit felis, iaculis ac iaculis vitae, volutpat vitae est. Donec vitae felis ac nunc interdum malesuada non ac tellus. Aliquam eros dolor, bibendum ac. </em></p>
        
        <h2>Contact Us</h2>
        <span>Toll Free Number:</span>
        <h3>1-800-555-INFO</h3>
        <br />
        <span>Email Us</span>
        <h3>info@companywebsite.com</h3>
        <br />
        <h2>Recent Events</h2>
        <div class = "event">
                <span>August 9th, 2009</span>
                <a href = "">Vivamus sed lectus est, sagittis iaculis. condimentum hendrerit feugiat </a>
                <p>Sed quis ipsum est. Cras dapibus nisi eu arcu adipiscing eget faucibus mauris tempus.</p>
         </div>
        <div class = "event">
            <span>August 9th, 2009</span>
            <a href = "">Vivamus sed lectus est, sagittis iaculis. condimentum hendrerit feugiat </a>
            <p>Sed quis ipsum est. Cras dapibus nisi eu arcu adipiscing eget faucibus mauris tempus.</p>
        </div>
    </div>
</div>

2. Paste the following code into layout.css right below the #left-column block.
It should be pretty self-explanatory.

#right-column
{
	float:left; 
	width:280px;
	padding:10px; 
}

We haven’t styled the event divs yet though, so let’s do that.

Styling the Events

3. Open general.css
4. Paste the following into general.css

/*======================
   EVENTS
========================*/
/*
Each event should have some space below it
*/
.event
{
	float:left; 
	margin-bottom:10px;	
}
/*
Each event div has a title with a calendar icon. 
*/
.event span 
{ 
	background:url(../images/calendar.png) no-repeat; 
	display:block; 
	padding: 2px 0 2px 20px; 
	font-size:10px; 
	color:#717171; 	
}
.event a
{
	display:block; 
	margin-bottom:7px;	
}
/*
We're going to make the news text smaller and 
lighter because we want more emphasis on the title. 
*/
.event p
{ 
	font-size:10px; 
	color:#4a4a4a; 
}

5. Save and close general.css

6. It should look like this (click for a larger view).



Did you notice that we didn’t do a lot of styling to create this page? That’s the advantage of creating default styles before we start building the pages. It reduces the work you need to do as you switch back and forth tweaking the styles for each page.