What Is Possible

Designing a web page means opening yourself up to the possibilites not the limits. Sure, there are limits to the current versions of HTML and CSS, but the technology is evolving and more freedom is being unleashed in web page design than ever before.

The design before you hosts the innovative layout structure from our web site, Taking Your Camera on the Road, designed and developed by Lorelle VanFossen. The photographs were taken by Lorelle and Brent VanFossen. This is one of four examples of the possibilities that can be done with their non-traditional layout using styles sheets (css).

It's All
in the Details

Many advanced and browser-specific techniques were used to create this example page. We discuss the specifics of these techniques in our It's All In The Details article about our web page design details. All of the code works with Microsoft Internet Explorer since version 4, and it should work with most popular Internet browsers. If what we describe isn't visible, take time to upgrade your Internet browser. Upgrades are usually free and well worth the Internet viewing experience.

You can view more HTML and CSS code that we use on our site in our article Revealed: Our HTML and CSS Codes. You can also view the CSS style sheet for this page's design.

We've added a javascript from Squarefree's Bookmarklets to help you how this page would look if all the CSS presentation styles were gone completely. Hit the F5 key or REFRESH button to reload the page after clicking here to remove styles or click here to reinstate the style sheet.

One
Step At A Time

Here is a step-by-step look at how we changed our layout design for this sample page.

Page Background
The background of this page begins with a closeup photograph of water droplets on grass. It is set within the background property of the container division to be non-repeating. The background color of the container was chosen to match the bottom edge of the photograph so it would appear to be fading into the background.
Non-Traditional Fonts
The second thing you may have noticed next is the use of non-traditional fonts. The choice of fonts for web page designers, without using graphic replacements, is extremely limited. So we used an innovative technique called embedded fonts to create the fonts for this page. If you don't see a hand-written style font on this page, view this page in Internet Explorer, as currently, embedded fonts are only available in Internet Explorer.
Semi-Transparent Box Elements: The Magic of Filters
Notice the sidebar and the first paragraph. These are set in semi-transparent boxes created with CSS filters. You can see the photograph through the white boxes because of their semi-opacity. Using CSS filters, we used a filter called "alpha" which applies an opacity filter resulting in a semi-transparent look.
Headings With Photos
Using the same idea behind our H3 headings of including a photograph, we added a solid color background that compliments the photograph's colors. Taking advantage of the full range of recognizable colors, we choose #4D6545 through our graphics program rather than a standard web color. For browsers which don't recognize this color code, it will default to the nearest web-safe color.
CSS Rollover Menu With Graphic Images!
Below the first box in our sidebar is a photograph of a leaf and a navigation menu. When you move your mouse over the menu choice (rollover), another graphic shows up. The cool thing is that the link text is on top, so it is visible in spite of the graphic, and it looks like we've made buttons out of the graphic below. Very cool! You can find out more about how to do this in our article about the tips and tricks we use on our web site design and layout.

Who Are You?

We are not web page designers. We just thought we should tell you upfront. Lorelle has extensive experience designing web pages and is a former graphic designer, but this is not her job today. Our job is to convince you that our articles, writings, and photography are so fantastic that you will invite us to publish some of our work with your publication, buy our photographs for your commercial and editorial use, and invite us to teach one of our fun workshops or programs to your group or organization.

Birds in flight, Bosque del Apache, New Mexico, photograph by Brent VanFossenWhy do we tell you this? Because if this page is what Lorelle can design within a few hours on her laptop, then what can you create within a few days? This process isn't complicated, it just takes patience and time to learn the structure and elements involved. There are tons of web sites offering very simple and informative (and free!) educational programs for you to learn, step-by-step, how to do this. Some of the best ones are:

And if you are really interested in what we do, based on this example of what we are capable of doing, we have more than 500 articles and stories to share with you about travel, nature and travel photography, and life on the road.

You are welcome to use this layout free of charge, however the images and graphics are ours. You can't have them. But concept and ideas are fine to borrow and use. If you really enjoy what we have to offer, a link to our site would be appreciated:

<a title="Taking Your Camera on the Road"
href="http://www.cameraontheroad.com/">Taking Your 
Camera on the Road</a>