Join Eric Meyer for an in-depth discussion in this video Design tour, part of CSS Web Site Design.
- View Offline
Like to introduce you to the design with which will be working throughout the rest of the title, throughout the other videos all the exercises and so on. This is basically the end result, what you'll see in a lot of cases is an exercise file were some portion of the style has been turned off and then will fill it back in. And that's how the exercise will be done, but this is overall what we'll be looking at. Now you have of course all the fonts and colors which are set through CSS.
The background of the masthead, the background of the navlinks and the sidebars and the whole background and the setting fonts as well. There's the fact of the overall layout. The fact that we have two columns side-by-side, that's something else that will be addressed through the CSS. As you may notice, here we have navigation links, and this is actually an ordered list. It is a list of links that have been made into a horizontal navbar through the power of CSS and we will talk about that. The other interesting thing is that these vertical separators here are not actually part of the document source that's another stylistic effect that we'll discuss when we'll get there.
Similarly, this green separator underneath the legendary origins of tea that you might see that, and if you've been doing each theme all for a while, you might think of a horizontal rule, but again that's not a horizontal rule, that's simply a style applied to the legendary origins of t heading. There is also aspects such as aligning text such as putting the July 16, 2006 over to one side, that we'll discuss and how this image sits off to one side and has the text flow around it. That's something else, that we want to pay attention to before we're done. We also have these boxes as it were in the sidebar, these separate, boxes each of which has its own title, and here's a table down here, if we scroll down a bit, so post archive is actually a table that's been styled, and we'll talk about that in one of the later chapters. In addition, we have this nice lovely footer across the bottom and we'll also in one of the last chapters talk about how to have this same document appear completely different when it's printed, so that when it's printed out, it doesn't look like it does here on screen, instead it has a set of print styles applied to it. So those are the, at least the high points of things that we'll be talking about in the rest of the videos here and things we'll be addressing as the exercises are done.