The Home-Page Structure

The Home-Page Structure


Try to visualize your pages as regions of content, as opposed to rows and columns, and you’ll find it much easier to develop pages that not only conform to standards but are also much more flexible—you want to be able to switch out your style sheets and completely change the layout of the page.

For Foodbox, we want all the content for our sidebar to be in its own region, and we want all the content for our main area to be in its own region. We’re going to do the same thing we did when we created our mock-up—divide the page up into sections. You can divide your mock-up into four basic regions: • header
 • sidebar
 • main
 • footer

 These four regions are easy to identify. However, you can build a flexible structure that you can manipulate easily if you further divide the page into subsections. The key to accomplishing this is to look for logical groupings of content.

For example, let’s express the mock-up’s regions in outline form:
 • Page
 – Header
– Middle
* Sidebar ·
       Search Recipes
    · Browse Recipes
    · Popular Ingredients

 * Main
 – Footer

In this example, we have an overall region called page. We divide this region up into a header region, a middle region, and a footer region. The outer, or parent, region, acts as a point of reference that we can use for positioning, and we can also control the overall page width by changing the width of the outer region.

The sidebar and main regions are wrapped in another region called middle. Like the outer page region, this middle region acts as a reference point, but it also serves another important purpose: it provides flexibility. We might not want a sidebar region for some of our pages; for example, we might want a full-width main region for displaying the content instead. On those pages, we could omit the sidebar and middle regions and place the content right in the main region, using CSS to resize it.

 This structure is fairly common. It’s the structure for your standard two-column layout with a header and a footer, one of the most common website types. The neat thing about standards-based design is that you can reuse this skeleton for another project if you want to, because your style sheets will define your column widths, colors, and other visual elements.

The Header

The content for the header region consists of only the Foodbox logo, which we’ll include with the img tag. This tag has an src attribute that specifies the path to the image. This path works like the href attribute of the tag; it can be a URL or a relative path to a file. We’ll discuss URLs in detail in Section 9.6, The Recipes Tag Cloud, on page 137. When placing an image on a web page, it’s always a good idea to specify the height and width of the image. We don’t have the image right now, so we’ll let that go for the moment; however, we definitely want to come back later and add this. For now, specify the image source and an alt attribute for the text. This alternate text gets displayed if the image can’t be loaded; it’s also extremely helpful for your users who use screenreading software. Place your cursor within the region defined by div id="header", and insert the following code: Download homepage_html/index.html
Now save your work. You’re done with the header region for now, and you can move on to the next region.

The Sidebar

The sidebar region contains quite a bit of content. It has a search area, a tag cloud for recipes, and a tag cloud for ingredients. We will wrap the various sections in their own containers to make positioning easier when we get to that stage. Let’s start by mocking up the HTML form. The Search Form HTML forms are simple. The hardest part about working with them is tying them into your back-end system. The Foodbox site’s simple search form has only two elements: the keyword field and the submit button. A harder problem to solve is that HTML forms need to submit their results to a URL. To create the form, we need to know the URL that the form needs to send its data to, as well as what the server-side code expects the form field to be called, so it can pull out the data. Fortunately, this is as simple as glancing at the code for the existing Foodbox site because it has the information you need:
This code tells us that the form uses a GET request to send data to the recipes URL. It also tells us that we need to call the form keywords. That gets us moving, but we need to clean up some problems with this code. First, the input tags don’t have closing tags. This could be because they were forgotten, or it could be because the version of HTML used originally did not require these tags to have closers. Our doctype does, though, so we need to take care of that. The input tag is self-closing, so that’s an easy fix. Second, the form and the two input tags all should have an id attribute. This will help with the eventual styling we want to do. Finally, we plan to have an image of a magnifying glass instead of a button. Aside from the form itself, the search section needs a heading called Search Results. Report erratum this copy is (P1.0 printing, December 2009) Prepared exclusively for ALESSANDRO

Let’s walk through this code. The search section of the sidebar region is wrapped in its own region with its own ID; this gives you extra flexibility when you add your styles to your document. The search form somewhat resembles the original version of the form from the old site, and it gets an ID that will be useful for styling elements and adding JavaScript behavior. We have placed a div tag around the input fields of the form to make validation happy. When using HTML 4.01 Strict, input tags have to be placed within a div or within a block-level element such as a headline or paragraph. The most significant change you’ll notice is that the form no longer has a submit button; we’ve replaced it with an image button.

Post a Comment