Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
CSS: Page Layouts introduces basic layout concepts, gives advice on how to create properly structured HTML based on prototypes and mockups, and goes into critical page layout skills such as floats and positioning. Author James Williamson shows how to combine these techniques to create fixed, fluid, and responsive layouts. Designers are also shown how to enhance their pages through the creative use of CSS techniques like multi-column text, opacity, and the background property. Exercise files are included with this course.
For this chapter's lab, I want to do something a little different. Instead of opening one of my partially completed sites and then finishing it, I want you to create a fixed-width layout from scratch. Well, almost from scratch. There's a little bit of a catch here. I actually want to find one of your favorite layouts and then re-create it. By examining an existing layout and then breaking down its grid, you'll gain a greater insight into the planning and structuring that goes into creating sites. Just as the way of showing you kind of the workflow that I want you to do for this lab, I have the lynda.com site open here.
Pick one of your favorite layouts; it could be any site you want, or just a layout that you like. If it's a site that you can get into and kind of look through the CSS, that's even better. So in the case of lynda.com site, sometimes it's kind of hard to pick out exactly which CSS file I should be looking at. So you might want to try to find one that is a little bit easier to go into and look into the appropriate CSS, but that's not critical for what we are doing here. You don't absolutely have to be able to know what's going on with their CSS. So when you go to one of your favorite sites, just go ahead and take a screenshot of that.
Now I have taken the screenshot of the lynda site, and I'm dropped this in to an Illustrator document. And I know, I am in Illustrator again, right, but it does not matter which page- layout program you're using here. You can even print out a copy of the site that you're working with and then just sort of draw the things that I'm talking about on the screen. So the first thing you should do is find out what the underlying grid is for this particular site, and the way that I did this here was just place guidelines on the page, where it's obvious that a column or a gridline is.
I am looking and making sure that these columns are equal width so I can really determine what the grid structure of the page is, and once I do that, I then come in and overlay shapes where I think of the page regions. So obviously this is a two-column layout from the standpoint of the fact that I have a right column over here and left column over here, but the left column itself is broken into three separate columns as well. I needed to sort to know sort of the spacing requirements for those. So at this point, I would go in, I'd start taking some measurements, I'd start thinking about the initial structure of this page, and then I'll have what I need to create the initial HTML and CSS.
Don't get me wrong. I'm not asking you to re-create these layouts pixel perfect; I'm asking you to recreate the structure of these layouts and then place your own content inside of them. To that end, if you go into the exercise files, if you look in the 05_07 folder, I have a bunch of images that you can use. You can resize those images any way that you want to fit within your layout. Again, just make sure they adhere to the grid that you have established for that layout. And then I have a couple of text files. As a matter of fact, these are all Mark Twain's, A Dog's Tale.
There is a lot of text there that you can copy and paste and use for dummy text. I can't stand using Loren Ipsum text, so I am just giving you some old copyright-free, I might add, Mark Twain text, it's fun to read as well. So pay attention to the grid, what the grid is based on. You want to go ahead and establish a target resolution, which doesn't necessarily have to match the layout that you are kind of basing your site off of. And then when you get into placing assets in that, really concentrate on making the typography fit with that layout grid as well. Now when you're finished, go back to the site.
If you can, find its CSS. Compare your layout styles to theirs. Again, on more complex sites like this one, they might be a little hard to find the CSS. Coming through the styles and isolate and layout might be a little difficult, but you should be able to at least compare the basic structure and styles. In fact, you may want to do that stage before you get started, just to make sure that comparing styles is possible once you're done. Just don't evaluate the styles too much before you begin. The whole point of this lab is to see how closely you can match the desired styles. Keep in mind that you are only comparing styles just to compare and evaluate your approach to layout.
The overall goal of this lab is to gain experience in planning and executing desired layouts, not making sure that you're matching somebody else's files exactly. I know this is a big, broad, open-ended lab. Go have fun with it.
There are currently no FAQs about CSS: Page Layouts.
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.