• Choose a category
• All
• Classic-Fiction

By Root 1344 0

you enough information to create XHTML and CSS code. It needs to start showing some detail, such as the following details:

♦ Draw out each element on the page. Any major page element (headlines, menus, columns) must be delineated.

♦ Include the class or ID identifier for each element. If you have a segment that will be used as a menu, name it “menu,” for example. If you have a content area, identify that name now. Write all names directly on the diagram so that you’re clear about what belongs where.

♦ Include all relevant style information. Describe every font, the width of every element (including measurement units), the foreground and background colors (with hex codes), the background images (including sizes), and anything else you might need in order to code CSS styles for the page.

♦ Build a page sketch following these guidelines for each page template in your site. If you have three page designs, for example, you need three separate diagrams.

Figure 2-4: Here’s a sample sketch for the standard template on this site.

These diagrams are finished only if they give you everything you need to build the XHTML and CSS templates. The idea is to do all your design work on paper and then implement and tweak your project with code. If you plan well, the coding is easy.

The design sketch isn’t a page mock-up. It’s not meant to look exactly like the page. Instead, it’s a sketch that explains with text all the various details you need to code in XHTML and CSS. Often, designers produce beautiful mock-ups that aren’t helpful in development because you need to know sizes and colors, for example. If you want to produce a mock-up, by all means do so, but also make a design sketch that includes things like actual font names and hex color codes so that you can re-create the mock-up with live code.

Building the XHTML template framework

With a page layout in place, you can finally start writing some code. Begin with your standard page layout diagram and create an XHTML template to implement the diagram in working code. The XML template is quite simple because most of the design should happen in the CSS. Keep these guidelines in mind:

♦ Remember that the template is simply a framework. The XHTML is mainly blank. It’s meant to be duplicated and filled in with live data.

♦ It has a reference to the style sheet. External CSS is critical for large Web projects because many pages refer to the same style sheet. Make a reference to the style sheet, even though it may not actually exist yet.

♦ Include all necessary elements. The elements themselves can be blank, but if your page needs a list for a menu, add an empty list. If you need a content div, put it in place.

♦ Create a prototype from the template. You use the template quite a bit, but you need sample data in order to test the CSS. Build a prototype page that contains typical data. The amount of data should be typical of the actual site so that you can anticipate formatting problems.

It’s very possible that you’ll never manually put content in your template. There are several options for automating this process, which can be found in Chapter 4 of this minibook.

The XHTML template should be easy to construct because everything you need is in the page template diagram. Figure 2-5 shows an XHTML prototype.

Figure 2-5:

An XHTML prototype for my site (with no CSS attached yet).

Here’s the XHTML code for my prototype:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

type = ”text/css”

href = ”csStd.css” />