Combining methods to create website designs
Creating a blog layout
Creating a storefront layout
Creating a homepage layout
Creating an online gallery
Working with style sheets for print output

Putting the pieces together

The majority of this tutorial intentionally works in a modular manner. The idea is that you can work on the various components as you wish and then combine them to form all manner of websites. This chapter shows how this process can work. Three layouts will be explored, and elements from each one will be heavily based on exercises from elsewhere in this tutorial. You’ll see the Photoshop mock-up, a breakdown of its structure, and instructions for how the completed files were put together—mostly using techniques you’ve already worked with in this tutorial. In all cases, the completed files are available in the download files (in the chapter 10 folder). Note that these layouts are mock-ups of websites, with a single page designed, not complete websites. However, there’s enough material here to use as the basis for your own designs, although you shouldn’t use them as is—after all, you’re not the only person with a copy of this tutorial!

Managing style sheets

In the download files, there are two sets of boilerplates. The basic-boilerplates folder is the one used for the exercises throughout the tutorial. The XHTML document contains only a single wrapper div, while the CSS document has a handful of rules that are designed to reset margins and padding and define a default font. Projects in this chapter are instead based on the documents from the advanced-boilerplates folder. This contains a more complex web page and a style sheet that uses CSS comments to split the document into sections. The “Creating boilerplates” section in tutorial 2 provided an overview of the reasoning behind this technique, and the “CSS boilerplates and management” section in Appendix D (CSS Reference) does largely the same thing. However, because this section will examine CSS rules within certain sections of each style sheet, a brief overview is required here, too.

Essentially, you can use CSS comments for writing notes within a style sheet—whatever’s between CSS comments (which begin /* and end */) is ignored by browsers. Comments can be multiline or single-line, and you can therefore use comments to create sections in the style sheet for various “groups” of rules. For example, you can use the following to introduce a group of rules on forms:

/* ---------- forms ---------- */

Taking things further, a multiline comment can be added at the start of the document. This can include a table of contents, and the various section headers within the style sheet can be numbered, thereby making navigation and editing even easier. As also explained elsewhere, I indent both property/value pairs and the closing quote of the declaration, as shown in the following code block (with a tab being represented by four spaces):

#sidebar {
float: right;
}

This makes it simpler to scan the left-hand side of the document for selectors. Note that although the rules within the remainder of this chapter are not formatted in this manner, the rules within the download file style sheets are.

Creating a portfolio layout

This section will show how I created a layout for an online portfolio, suitable for a designer or photographer (professional or otherwise) to show off their wares. The Photoshop file for the document is gallery-layout.psd, in the PSD mock-ups folder within the chapter 10 folder of the download files. The completed web page (along with associated files) is within the gallery-website folder, within the chapter 10 folder. The following image shows the Photoshop mock-up of the page.

About the design and required images

As you can see from the previous screenshot, this page has a simple structure. The fixedwidth layout has a masthead that contains the name of the portfolio and is bordered on the bottom, creating a visual separator between the site’s name and its contents. The main content area is split into two columns. On the right are thumbnail images, and on the left are the main image, a caption, and basic instructions regarding how to use the page.

From the mock-up, only one image was exported: the site’s heading from the masthead. Although it would be possible to approximate this in HTML text, the size of the heading and the nonstandard font used (Helvetica Neue) means it made more sense to export it as a GIF. Image replacement was used to ensure the heading remains accessible. The other images—the thumbnails and full-size ones—aren’t in the mock-up, but were fine-tuned, optimized, and exported separately and placed in the assets folder, along with the heading image. Note that I used a convention for file names: thumbnails share the name of their full-size parent, but with -t appended.

Putting the gallery together

When putting this page together, techniques were used from the following exercises and sections in this tutorial:

Creating a fixed-width wrapper (tutorial 7)
Placing columns within a wrapper (tutorial 7)
Manipulating two structural divs for fixed-width layouts (tutorial 7)
Styling semantic markup: A traditional example with serif fonts and a baseline grid
(tutorial 3)
Image-replacement techniques (tutorial 3)
Switching images using JavaScript (tutorial 5)
Adding captions to your image gallery (tutorial 5)

I also took on board various techniques discussed in tutorial 4 regarding working with images.

Open index.html and examine the code. The head section imports a style sheet, uses a conditional comment to link to an IE 5–specific style sheet (because once the layout was done, there were layout issues in Internet Explorer 5.5) and the JavaScript file gallery.js. The JavaScript document is identical to the one from the “Adding captions to your image gallery” exercise in tutorial 5.

The page’s basic structure is simple: the page is contained within a wrapper div. Within that, there is a masthead and a content area, the latter of which has two columns, formed from div elements with id values of mainImageContainer and thumbnailsContainer. If the content were removed, this structure would look like that in the following code block:

<div id="wrapper">
<div id="masthead"></div>
<div id="content">
<div id="mainImageContainer"></div>
<div id="thumbnailsContainer"></div>
</div>
</div>

If you’ve read through tutorial 7, you’ll see that this layout is formed using techniques shown in the “Creating a fixed-width wrapper,” “Placing columns within a wrapper,” and “Manipulating two structural divs for fixed-width layouts” exercises. Within the masthead div is a level-one heading with an empty span element. This is as per the image-replacement method shown in the “Image-replacement techniques” section of tutorial 3. The CSS applied to the elements (shown later in this section) effectively places the span over the text and sets the heading image exported from the mock-up as its background.

<h1 class="mainHeading"><span></span>Pictures of Padstow</h1>

In the mainImageContainer div, there’s an image, a caption, and explanatory text. Note the id value for the image—this is a hook for both the JavaScript and CSS, as explained in the “Switching images using JavaScript” and “Adding captions to your image gallery” exercises in tutorial 5.

The thumbnailsContainer div contains an unordered list, each item from which contains a linked thumbnail image, and an example of which is shown in the following code block:

<li><a href="assets/boat.jpg" onclick="javascript:swapPhoto
å('boat.jpg','A docked boat, with distant clouds rolling in.');
å return false;"><img src="assets/boat-t.jpg" alt="A docked
å boat." width="80" height="60" /></a></li>

Again, the various elements of the code are explained in the aforementioned exercises from tutorial 5. The only difference here is the use of the list, which is used to provide structure for the 18 images—as you’ve seen elsewhere in the book, CSS makes it possible to style lists in any manner of ways.