If you're adding dummy text, you can either use lorem ipsum text (you can access examples of it at http://www.lipsum.com), or you could add some more descriptive text (an example of which you can find at http://notloremipsum.com). The second approach often helps when building sites for clients as it helps them see what sort of content will go where. For our purpose we'll just use lorem ipsum.
- Still in
index.html, delete any HTML you may have already added in between thebodytags. - Add your semantic elements with their content. A section of the code used in our mockup is shown next (to save space here we've only included a sample, but you can download the full code pack for this chapter from the book's pages on the Packt website):
<div id="container"><!--container goes here--> <header> <hgroup class="screen-text"> <h1>OpenSource</h2> <h2>Online Magazine</h2> <p><em>Using Open Source for work and play</em></p> </hgroup> <div id="date">Current Month and Year</div> </header><!--//header--> <!-- Begin #container2 this holds the content and sidebars--> <div id="container2"> <!-- Begin #container3 keeps the left col and body positioned--> <section class=""> <h2 class="thisMonth">This Month</h2> <!-- Begin #content --> <article class="post"> <h2><a href="#">Really Long Article Title Name The More Text The Better Cause You Never Know</a></h2> <em>Main Content:</em> Post content will go here inside this div. <p>by Author Name for <a href="#">Column Type</a></p> <div class="entry-content"><!--//post--> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a eros nec orci volutpat vestibulum. Ut pellentesque sagittis metus. In euismod tellus id ante. Ut lectus. Nunc adipiscing. Praesent luctus, massa quis vulputate rhoncus, justo turpis mollis dolor, nec blandit nisl mauris et pede.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a eros nec orci volutpat vestibulum. Ut pellentesque sagittis metus.</p> <p><a href="#">Read the rest of this entry »</a></p> </div><!--//.entry-content--> - Save your
index.htmlfile.
We added some semantic elements to our site, with content.
Let's look at some of the elements we've included:
- A
#containerdiv to contain our page content—useful for styling - The
headerelement—containing the site title and description, inside anhgrouptag with a.screen-textclass so we can make it invisible to browsers with CSS turned on - A
#container2div to hold the post or page content and sidebars - A section to contain all of the post or page content
- An
articleelement with a.postclass—it mirrors the class WordPress will eventually assign to this element, as we'll see in Chapter 4, Advanced Theme Features - An
h2element for the title of the post - A
pelement with author information - A div with the
.entry-contentclass to hold the post content itself—this also mirrors the class WordPress will assign once we set that up - More
pelements to contain the content itself, these will eventually be automatically populated by WordPress from the site's database but for now we're using dummy text
Tip
The trick: Start with a lot of text
Use a lot of sample text. It's tempting to create a nice mockup that's got clean, little, two-word headers, followed by trim and tight, one or two-sentence paragraphs (which are also easier to handle if you did the entire mockup in Photoshop, right?).
In this optimally minimalist sample, the design looks beautiful. However, the client then dumps all their content into WordPress and your theme, which includes long, boring, two-sentence headlines and reams of unscannable text. Your beautiful theme design now seems dumpy and all of a sudden the client isn't so happy, and they are full of suggestions they want you to incorporate in order to compensate for their text-heavy site.
Just design for lots of text upfront. If the site ends up having less text than what's in your mockup, that's perfectly fine; less text will always look better. Getting lots of it to look good after the fact is what's hard.
Now let's see what our page looks like when viewed in the browser:
You can see it has a basic structure in place, but it now needs some styling. After all, this isn't 1992!
So, now we're going to add some styling for our text, starting with the fonts, or font families used to display it.
By assigning font families to our CSS rules, we can set up backup font choices. This means if someone doesn't have our preferred font, then they'll probably have the backup we specify, and if they don't have that? Well, at the very least we can rely on their browser's built-in "generic" assigned font. Just specify serif, sans-serif, or mono-space.
Tip
When specifying font families, it's a good idea to include one or more of the fonts which are both commonly held on PCs, Macs, and mobile devices, and which look good on screen (as against on paper). Fonts designed for screens include Verdana and Georgia, and other fonts commonly available on your users' systems will be Arial and Times New Roman.
Our headers will be Helvetica with Arial as a fallback, and the body content of our text will be Trebuchet with Helvetica and then Verdana as a fallback.