HTML and CSS Reference
In-Depth Information
Listing 10-9. The sidebar on the Power Outfitters home page
<aside class="extra">
<section class="module news">
<h2>Latest News</h2>
<p>Small things, big savings. All shrink rays are on sale,
this week only! <a href="/blog/shrink-sale">Read all about it!</a></p>
<section class="module deal">
<h2>Deal of the Day</h2>
<div class="product">
<a class="url" href="/gear/exotics/V900-shrink-ray">
<img class="product-img" src="images/products/m-v900-shrink-ray.jpg"
alt="The V900 portable shrink ray is pistol shaped with control
dials on one side and a decorative fin on top"
width="260" height="155">
<h3 class="name">V900 Portable Shrink Ray</h3>
<p class="description">Shrink and unshrink inanimate objects
with point-and-shoot simplicity!</p>
<p><s class="reg-price">$10,799</s> <em>marked down to
<strong class="sale-price">$9,799</strong>!</em></p>
<p><button class="cart-add" type="submit" name="product"
value="V900-shrink-ray" form="cart">Add to Cart</button></p>
And with that, the Power Outfitters home page is completely marked up. The masthead, content area, and
footer together form a base template that all pages to come will use as a common foundation. We've filled
in some content for the home page, establishing markup patterns and reusable modules that will reappear
throughout the site (or would reappear if we were going to build the rest of it).
We've only touched the home page but you can easily imagine a much larger and more complex website
beyond this single page. Every other page template would follow a similar process of thinking through the
content, choosing the most semantically appropriate elements, and planning for reusable patterns and
Designing Power Outfitters with CSS
So far we've only shown you the markup for the Power Outfitters home page. We've been thinking ahead
to how we'll eventually style this page, but we haven't yet written a single line of CSS. All our attention has
Search WWH ::

Custom Search