CSS Cookbook

2.10. Example Design: Setting Up a Dynamic Splash Page

Best suited for entertainment-related and personal web sites, a splash page is a web page typically comprising only an eye-catching image that is designed to entice visitors to enter a web site. Sometimes, however, that additional HTML page actually acts as a barrier to the content of the site. This example design remedies that problem.

The splash page in this example uses HTML elements from the existing main page of the web site. No separate HTML file is involved, so it appears as though there are two pages when there is only one. And with cookie detection built into the script, after a visitor sees the splash page once he won’t see it again for at least another month (unless he deletes the cookie or tells his browser not to accept cookies).

Another benefit of the code in this section is that if the visitor’s user agent doesn’t handle JavaScript or JavaScript has been turned off manually, the visitor sees the default page design instead. He won’t get trapped viewing only the splash page design, thereby locking him out from seeing your premium content on the main page.

Main Page

The first step is to create the design for the main page of your web site. Figure 2-24 shows an example. The code for mainPage.css is shown in Example 2-1.

Example 2-1. mainPage.css

body { margin: 0; background-color: white; padding-left: 0; padding-top: 0; } #logo { padding: 5% 20% 0.5em 5%; position: static; margin: 0; } #header h1 { margin: 0; padding: ...