Angelfish Background Textures: Sample Page 4

This page uses four texture tiles from the Eos Development Angelfish texture series. There are more tile choices in the complete series. Many other combinations and layouts are possible.

This page's format was created using a cascading style sheet (CSS). You can have many pages on a web site all sharing the same layout style. If you want to change your look, only one set of instructions needs to be updated to alter all the pages sharing that style.

The page background

The body formatting information is described on the stylesheet. The font type and colors are chosen and a background image can be added. This is the graphic that appears below everything else and across the entire screen, like a desk blotter. On this page, it is a dark green embossed texture.

The decorative border around the content area

Next in the CSS, a class is created that surrounds the content area, creating a decorative border on all four sides. Its width is proportional; it will take up 80% of the screen, within maximum and minimum limits that are also defined in the CSS code. On this page, its background is set to the wild green wallpaper.

Its padding is set to 24 pixels -- that's important since it is the padding area that shows as a border. Increasing or decreasing the padding will widen or narrow the border.

The writing paper texture

Next is a class called "container" which surrounds the header, content area, and footer. Its background is set to the light writing paper texture. Its padding is set to 2 pixels, which puts a thin border around the interior contents, including the header and footer.

The header

Next is a class called "header." It contains the medium dark texture.

The content

Next is a class called "content." It has no background image or color -- that allows the light paper texture added in the "container" class to show through. All the writing you see on this page happens in this area.

The footer

Next is a class called "footer." It contains the same medium dark texture as the header though it could contain a different background image.

Conclusion

This style of layout has quite a few advantages: it's easy to work with, its proportional sizing makes it work well on many different viewing devices, and you can create a never-ending variety of web pages just by using different texture tiles and small variations in layout to change the overall look-and-feel.