|
|
|
|
|
|
|
|
|
 |
A Cool Web Design Tip Using Background TilesThe full potential of background tiles in web page design is seldom utilized! They can be a powerful way of enhancing your web page with more creative layouts while still maintaining cross-platform compatibility. Here is one of my favorite design tricks using a background tile. I used this method to build the ..\marketingindex.htm page of this website. The page comprises two key elements. 1. The first is a 780 pixel wide table with cells that contain all text and three small graphics. The image below shows how the page would look with no background image and the table borders visible.
2. The second is a background tile that is also 780 pixels wide. Key design elements including the logo and main graphic elements are placed on the background tile shown below.
The tile is controlled by a (css) style sheet that makes the background a non-repeating tile, left aligned on the page. The code is placed in the header of the html page. Here is the code for placing the background:
The end result is what you see at ..\marketingindex.htm. If you design the page in Photoshop or any other program that allows exact positioning of elements on layers it will be very easy create precise layouts that are converted to html tables. Using a style sheet is the only way to position the background image without it tiling. The style sheet code is compatible with IExplorer and Netscape browsers version 4 and up. 3. In order to keep the same look of your pages at greater resolutions, utilize your background tiles in tables. The main trick is to design for text in the minimum resolution that you would want your page to display in. Next set the size limit of the table or cells to that of the background tile. Once this is accomplished you can add your text at the minimum resolution and regardless of whether someone views at 700 X 800 or at 1024 X 1200 your design will look great. |
THE USE OF FORM: A cool web design tip using backgrounds... Converting printed brochures to web site designs... Develop classic web site designs... Flash animation and search engines... Need more graphics? Here is a trick... The new romantics in website design. What is it? Why you need it... Web site makeover of the month... For a Free No Obligation Consultation on your best web design ever... Click here... Contact Information:
Telephone:
|
|
Copyright © 2003 ESG Associates. All rights reserved. |
