Home
Username:
Password:
Adobe Dreamweaver: Creating CSS Layouts Tutorials

Types of Web Page Layouts / Variable Fixed-Width Layouts




Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com’s entire library of video tutorials.


Learn More

Subtitles of the Movie

Continuing my review of the various types of web page layouts, we get to the last, the fourth type, relatively new way of doing here page layouts and that is variable fixed-width layouts. These layouts use a script like JavaScript to assess the width of the browser window and you change the CSS in the page as a result to create what some are calling variable fixed-width layouts. In this case the layout changes to accommodate the user's browser window size. If it's wide enough, it will accommodate fixed widths such as three columns, but if the width of the browser is smaller, the third column will be placed under another column. Now, this type of scripting to create these widths in these layouts is beyond the scope of this course. But if you're curious, here's an article where you can start learning more. This is on the site FlatNet.com, blog 1663. Notice that the author here mentions that this is a different approach to web page layouts. It's gradually getting some traction and the idea again is that the layout is changed to best accommodate the window size of your user. So in this example, a two-column layout is changed to a three-column layout under certain conditions when the browser is wide enough. In this case they're explaining that the script changes the Class on a Wrapper DIV Tag. So there are more details here in this article on how to create these types of layouts. Pretty interesting, but again, this scripting that's required is beyond the scope of this tutorial. Let me wrap up this section of the tutorial with a few last words here about what's at stake when you do choose the page layout method that you want to use for your website design. Now, the method you choose, whether you want to go with a static or fixed width, a liquid or fluid approach or maybe you want to do an elastic or one of these new variable fixed-width layouts, the method that you choose will have an impact on more than just your web page design depending on which method you choose to layout your pages. It will affect your reader's ability to read your text, find what they're looking for or sometimes just even use your site altogether. As well, the layout style will affect your efforts at marketing your website through branding, real estate availability and the aesthetics of your site. Most importantly, which method you choose to lay out your pages will require careful consideration. You need to consider your audience, the browsers that your audience will be using, as well as the screen size of their monitors as well as the resolution. Often you'll have to choose based not on your own sensibilities, but to the lowest common denominator of your users. So in this section I've reviewed some of the possibilities you have available to you when you lay out your pages with CSS, but let me now move on to the last section of the course and discuss some of the most common approaches to CSS formatting, with an emphasis on flexibility and consistency. This will also give me a chance to review and place in better context much of the material on CSS that I've covered in this tutorial up to this point.

Tutorial Information

Course: Adobe Dreamweaver: Creating CSS Layouts
Author: James Gonzalez
SKU: 33914
ISBN: 1-934743-99-2
Release Date: 2008-09-21
Duration: 8 hrs / 92 lessons
Work Files: Yes
Captions: Available on CD and Online University
Compatibility: Vista/XP/2000, OS X, Linux
QuickTime 7, Flash 8

VTC Sign up & Benefits

  • Unlimited Access
  • 98,729 Video Tutorials (23,265 free)
  • Video Available as Flash or QuickTime
  • Over 1026 Courses
  • $30 for One Month Access
  • Multi-User Discounts Available