Site Design: Testing 1 2 3

STEP NINE: TWEAK AND TEST

Once you have the index page mostly done, you want to make sure you save it and then preview it in a browser. At this point, I usually just use IE, since I am still working on making it look the way I want it to look and will tweak for cross-browser issues later.

To preview a page, just hit F12, or look for the little earth along the top of the page and click there to see the list of possible preview browsers.

Once you look at the page, you start tweaking. That means refining things little by little—changing the color of the background by a shade, increasing the text size by a point, shifting the table by just a percentage.

Once the page looks good to you in IE, test it in NN. It probably won't look exactly the same, but given their pitiful market share now, that's OK. Just make sure it looks good enough. You'll also want to check at both 1024x768 and 800x600 (see the GetIT Screen Resolution Tutorial for info on how to change between these settings). Again, I'd privilege 1024x768, but the design should still hang together in 800x600, even if it doesn't look perfect.

There's a final step once you have all that in place. Make sure you've added two things to the index page: a small copyright notice, and an email link. To get the "©" symbol, click Insert --> Special Characters --> Copyright.

If you'd like to have this text smaller than your normal content, create a new style, called perhaps "small." Just click Text --> Css Styles --> New Style. This time select Make Custom Style (class). A class can be applied to any piece of text, or to any tag, which makes it pretty versatile. Give the class a name in the blank and make sure it starts with a period, thus ".small" not "small"—the period is what lets the browser know it's a class and not a tag redefinition. To apply the class, highlight the text you want and then click Text --> CSS Styles --> Whatever-you-named-your-class.

As you start creating classes, you may want to use the styles palette. To access it, click the silver-medallion looking thing in the bottom right of the page (here, highlighted in blue):

The style palette lists all your styles and has buttons to create new styles or edit existing ones. To apply a style, select the text and click the style you want.

Well, you should have your index page about done now. So now it's time to think about your inner pages.