I think the page you are seeing now has one of the very best formats there is. You'll see it used many different ways throughout this site. It's perfect for using a vivid background texture while letting folks read text easily. It's easy to tweak and simple to add content. If you become bored with your site's look, you can change its ambiance by playing with the background and paper textures without changing the page content, at all. Most importantly, you can count on it to look good to all your visitors. For instance, with this format, the paper area with your content stays centered on any monitor, no matter what its resolution. Start by selecting a texture that is as wild or as subtle as you want. It doesn't matter if you can read text against it; it only matters that you like it. Think of it as your desk blotter. Now, select a low-contrast, papery texture that text will be clear against. Choose one that coordinates well with your desk blotter. Create a new, blank web page. Format its basic background properties. Select a background color, a font type, and most especially, a font color that will read easily against your background color. Now add your desk blotter selection as its background graphic. Your page may suddenly be eye-popping if you've selected a bold texture for your page background, but that's OK. Add a single table to your page, with only one cell. (One row and one column.) Center the table. Add a border, if you want, or set the border width to 0 if you prefer an unadorned edge. On this page, the table border is 3 pixels thick, and is set to be black. The cell padding is set to 32, so there's a margin around the writing the table contains. The cell spacing is set to 2, because that makes the table border look a little fancier on Internet Explorer, go figure. You will probably fiddle with border width, color, and cell padding choices as your page comes together because each tweak changes the style a little. That's fine. That's creativity. Next, set the table's width to a maximum of 690 pixels. It can be much narrower if you want more of your desk blotter to show around your paper. Don't make the table wider than 690 pixels or most folks will need to scroll left and right to see all of your page. Visitors really don't like that. This page's table is set to a width of 690 pixels. You have the option of setting the table width to be a given percentage of the viewer's browser, instead of a set number of pixels. That can be a good choice since it adapts to each visitor's equipment. Setting the table's width to anywhere from 80% to 95% of the page's width will usually give good results. It's time to fill in your paper color and texture by setting the table's background image. Your software added the table with a background of "default" which lets the wild texture show through. Now, set both the table background and its one cell's background to your choice of a legible paper texture. Setting the table and its cell's background to the same image may seem like overkill, but different browsers want different table commands. Setting both should present your page correctly to both Netscape and Internet Explorer visitors, with many different versions of those browsers. OK, you've laid down your desk blotter by adding a page background, and you've set your paper on it, ready for writing. Add your content inside the table you created. You can type in text, add photos and play with the font and hyperlink colors so they coordinate perfectly with your color scheme. You've tamed a wild texture, congratulations! To show you how wide a range of looks you can get with this format, there are some variations on this page linked below. Texture, color, and pattern can create big differences in look-and-feel, as you will see.
FAQ: Print
Tip: What
About Fonts? Usually this is fine but if your page layout is measured to the pixel and a slight shift in the lines would mean disaster, then you may want to stick to one of the four fonts that almost every computer has installed: Arial, Times New Roman, Verdana, and Comic. Even so, variations will occur between visitors using PCs or Macs, and Netscape or Internet Explorer. Be prepared for your page to be more dynamic than it would be in print. Treading
The Edge - Adding Extras: Can you use even more textures as backgrounds in those nested tables? We've done quite a bit of that in Cafe Eos and we think it looks pretty nice. You might want to browse those demonstration pages. It does require more care when laying out your initial design. If you decide to nest tables and want to use more than one paper texture in those tables, keep in mind that Netscape:
This can remove table cells that are only for decoration or spacing, so make sure that each cell of your table contains something. A copy of the texture image works fine. Display it at a very small size - even one pixel by one pixel is enough to add content to a cell and cause its background image to be displayed. A small invisible graphic, totally transparent, usually called spacer.gif could be used instead. Each texture you add will also add a little load time to your page. Keep an eye on memory sizes for the graphics - we've marked them on the Eos textures. Under 20K is really best for a page textures budget and under 10k can look fantastic and will really please your visitors because your page will come up very quickly. Many of the monochromatic textures in our library, like the embosses, are the fastest loading, so if you want to use lots of textures, look for simple ones and concentrate on color-coordinated your choices. If you're just starting to experiment with the format, we strongly suggest you stick to a page background image and one paper texture in one containing table because, by golly, that looks great and always works! The HTML code for this page's table. If you are writing the code directly, these lines for a table with a texture in it go under your page heading tags, between the <BODY> and </BODY> commands. Fill in your data where the text is highlighted in red. <div
align="center"><center>
Taming Wild Textures © c kirkpatrick 2002
|