Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
CSS gives Web designers control over the appearance of their web sites by separating the visual presentation from the content. It lets them easily make minor changes to a site or perform a complete overhaul of the design. In CSS Web Site Design, instructor and leading industry expert Eric Meyer reviews the essentials of CSS, including selectors, the cascade, and inheritance. The training also covers how to build effective navigation, how to lay out pages, and how to work with typography, colors, backgrounds, and white space. Using a project-based approach, Eric walks through the process of creating a Web page, while teaching the essentials of CSS along the way. By the end of the training, viewers will have the tools to master professional site design. Exercise files accompany the training videos.
Now that we have some basic print styles that we're previewing here on our screen, through the method that was shown in the previous video. What we need to do, is start to think about what it is we actually want to print. For example, should we print the Javaco tea image. The Javaco comes through very nice, but the tea very hard to make out, because it's white text of a white background, and we could put some sort of color background on the masthead but we have absolutely no guarantee that it will be printed. in fact, we can take a pretty strong guess that that background won't be printed. Basically print design people rarely ever set background colors unless there're background colors that don't have to be there in order for the print out to work ok.
A more relevant example though, is the navigation links. We can see they are completely unstyled here, so we can see it's an ordered list of navigation, it's an ordered list of links, except for number two, which is unlinked text, because that's the page that we're on. The question remains, do we really need to print those out at all, because navigation links aren't going to do anybody any good in print. You can stab your finger onto a link on a peace paper all you want and it's not likely to do anything, at least not in 2006. Similarly the stuff in the sidebar, how much of that is really necessary.
The tea of the day, should the tea of the day appear on any page that gets printed out, the post archive, how about that, the search box. So, what we need do is start to think about things that we don't want to print and the way to make a nonprint, the navlink is a pretty easy one, we don't want the navlinks show up. So, all you have to do is say, display none and the element with the id of navlinks will simply not show up. So we hit Reload, it goes away.
Once we are all done with this and we switch this back to being a real print style sheet, when the user prints out this page, the navlinks just won't show up at all and that's probably a good thing because again, you know, why take up space, you know, chew up ink cartridges, laser toner or whatever and make the page longer with stuff that just is completely irrelevant in the print medium. The same thing is true of search box really. So we could start to build a group selector that says, you know, we want to get rid of the search and for that matter the post-archive.
Nobody really needs to know the post-archive, especially since the post-archive might be relevant, the day that the article is printed, or the day page is printed and then six month for now maybe not so much. So, at this point the search box and the post-archive, when we hit Reload will go away. So now we have the masthead, the date, the main content, to tea of the day and the footer. That's what's showing up. And if we further decide that well, it's okay to print the picture of the tea kettle, maybe the tea of the day image, just doesn't need to get printed. It's enough that we're going to include information about the tea of today and so in that case, tea-of-the-day img when we go back, that's gone as well.
What we have now for printing is this information and that's probably enough. That makes for a fairly useful printout and again why the tea of the day should be printed or not that is an interesting question and that it depends to some degree on the clients or your own personal preference if you are your client and what is wanted. do we want the tea of the day to show up on every page that gets printed out, because that's the tea of the day for that day and is it going to look weird for the that tea of the day to still be there on a print out six month from now, and maybe yes, maybe no. We're going to leave it in, we're going to assume what the client says.
Yes, absolutely, I want the tea of the day to be on every print out, we don't have to have a picture, but we should list the tea of the day, because that is a reminder that there are interesting teas and so on and so forth, so we're going to leave it in. That will also allow us to take some interesting challenges in doing sort of sectional style and making certain bits to stand out from certain other bits. So that's just the basics of how you switch off in effect pieces of the layout, that aren't relevant to print when you're going to do print. In the next bit, we're actually going to start pulling this together so it looks a little bit more like professional printout.
There are currently no FAQs about CSS Web Site Design.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.