Time for action – adding in the semantic structure

The markup for our mockup now needs to go between those body tags we created.

  1. Between your <body> tags in index.html, add the code for a very basic semantic overview of your theme:
    <div id="container"><!--layout container-->
<header>
<em>Header:</em> background image and text elements for header will go inside this div.
</header><!--//header-->

<!-- Begin #container2 this holds the content and sidebars-->
<div id="container2">

<!-- Begin first section holds the left content columns-->
<section>
<!-- Begin content -->
<article>
<em>Main Content:</em> Post content will go here inside this div.
</article>
</section>

<!-- Second section holds the right columns-->
<section>
<!-- #left sidebar -->
<aside class="sidebar1">
<em>Left Side Bar:</em> Will contain WordPress content related links
</aside><!--//.sidebar1  -->

<!-- #right sidebar -->
<aside class="sidebar2">
<em>Right Side Bar:</em> This will include additional ads, or non-content relevant items.
</aside><!--//.sidebar2-->
</section>

</div><!--//#container2-->

<nav id="mainNav">
<em>Top Nav:</em> For reading through straight text, it's best to have links at bottom (css will place it up top, for visual ease of use)
</nav><!--//mainNav-->

</div><!--//container-->

<footer>
<em>Footer:</em> Useful information and quick links for CSS design users who've had to scroll to the bottom plus site information and copyright will go here

</footer>
  2. Save your index.html file.

What just happened?

We added some semantic markup to our HTML file to give us an idea of what will be going where. Note that the actual text won't be the same in our final theme, this is just to give us some direction as we complete our design.

So, what does this page look like if we open it in a browser?

What just happened?

As you can see, it's very simple right now, but it's a start.

If a search engine bot or someone using a text-only/text-to-speech browser or mobile device arrived and viewed our site, the following is the order they'd see things in:

  • Header: Because it's good to know whose stuff you're looking at
  • Main content: Get right to the point of what you're looking for
  • Left column content: Under the main content, we should have the next most interesting items features list, category (sometimes referred to as columns links), and archives (sometimes called "Past Issues" links)
  • Right column content: It is the secondary information such as advertisements and non-content related items
  • Top page navigation: Even though in the design this will be on the top, we've coded it at the bottom in text-only viewing with an anchor link to it for easy access
  • Footer information: If this was a page of real content, it's nice to see whose site we're on again, especially if we've been scrolling or reading down for some time

Attaching our CSS stylesheet

So, now that we have an HTML file set up, the next step is to create a stylesheet for our CSS.

Here's a quick refresher on how to apply the following CSS selectors (if these seem unfamiliar or new to you, you may want to check out the resources in Chapter 1, Getting Started as a WordPress Theme Designer and brush up on your CSS skills):

  • HTML object tags (header, paragraph, list items, div tags, and so on) can just be listed as a CSS selector for example, div{...} p{...}.
  • ID names that are attributes and should only be used once on a page, have a "#" hash mark in front of their CSS selector for example, #container{...} #sidebar{...}.
  • Class names are attributes that can be applied multiple times on a page and combined with other classes, have a period (.) in front of the selector's name for example, .floatLeft{...}.
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset