PSD to HTML/CSS: Part 3

In part 2 we looked at the basic HTML structure for the desired theme. This time we will add some content, finish it in part 4 and start to style the in part 5. Before we start styling it is a good idea to add some dummy content to the document. The thumbnail image on the left (click on it to get a larger version) shows what we would like to end up with.

Firstly let's add a title to the actual document. Change the header section to:

1
2
3

<div id="header">
  <h1>My Cool Site</h1>
</div>

Fairly simple! Now let's think about navigation. Bearing in mind this is for an historical society, then perhaps the following are most appropriate items to have; Home, About, Contact, Enquiries, Events and News. There are several ways in which a menu can be created, personally I like using lists. This is for a few reasons, it makes sense to me semantically, a list of pages you can visit on my site, and also seems to fit nicely with screen readers. As for Search Engine Optimisation (SEO), some will tell you to put navigation at the bottom of the code and use CSS to position it. We may come back to this later, but for the moment let's stick with simplicity. So change the navigation section to:

1
2
3
4
5
6
7
8
9
10

<div id="navigation">  
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Enquiries</a></li>
    <li><a href="#">Events</a></li>
    <li><a href="#">News</a></li>
  </ul>
</div>

Now lets add a mission, this will appear on the front page of the site only. Change the mission section to:

1
2
3

<div id="mission">   
  <p>The society exists to blah blah blah . . .</p>
</div>

Now to add some dummy nodes. For each node we need a title, date it wass added, body and a thumbnail image. Change the first node section to:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div class="node">     
  <h3>Long Live Lorem Ipsum</h3>
  <span class="submitted">Wed 4th Jan 2012 | by <strong>Nick</strong></span>
  <div class="content">
    <img src="images/1.jpg" width=120 height=120 />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin luctus odio ac sapien volutpat rhoncus. Morbi consectetur sapien sed lectus gravida porttitor. Etiam dui sapien, accumsan eu venenatis molestie, aliquet sit amet est. Donec sit amet ligula vitae nibh mattis ullamcorper ut eu quam. Ut id libero eu mauris hendrerit interdum. Donec id quam sit amet sapien mollis aliquam a ac eros. Praesent at purus eget mi pretium faucibus quis ut orci. Morbi auctor quam eu ligula cursus ac suscipit ante consectetur. Sed quam urna, ultrices at eleifend nec, cursus sed nibh. Integer quis est eget nibh suscipit iaculis id id mauris. </p>
  </div>
  <div class="meta">
    <div class="terms">
      <span>Tags:</span>
        <ul class="links">
          <li><a href="#">Speaker Meeting</a></li>
          <li><a href="#">Astronomy</a></li>
        </ul>      
    </div>
    <ul class="links">
      <li class="read_more"><a href="#">Read more</a></li>
    </ul>
  </div>
</div>

Before going any further, let me expline some of that. Line 2 prints the node title. Under the node title, line 3, is the date the node was submitted and who submitted it. This has been enclosed by a span tag and a class attached to it. The class is to aid with CSS formatting later, essentially it allows us to specifically format/style any item with that class.

Lines 5 and 6 contain the image and main content of the node. I like to include, on the front page, only a snippet rather than the whole node and provide a link to the whole node. Note Lorem Ipsum text can be generated at the Lorem Ipsum website.

Lines 8 to 19 contain the tags and links that will appear at the bottom of the node. Note there are two sets of links here, terms or tags associated with the node and additional links such as Read more or add comment. Again I prefer to use lists to create tag links and additional links.

Repeat this last step a few more times so you have several nodes. We will complete the dummy content in part 4, soon.