Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Creating a liquid layout


From:

Web Accessibility Principles

with Zoe Gillenwater

Video: Creating a liquid layout

>> The third type of layout that we're going to make is called a liquid or fluid width layout. This refers to the fact that these layouts aren't rigid and solid, but flexible, like water. Like elastic layouts, they're made with relative units, but their width is dependent on the user's browser window width. A bigger window means a bigger width. And it will scale smoothly down as the window is scaled down in size. We use the same steps to create the layout, so go to the File menu and click new. This time under the layout column, choose two column liquid, left sidebar, header and footer.
Expand all | Collapse all
  1. 2m 0s
    1. Welcome
      1m 3s
    2. Using the exercise files
      57s
  2. 33m 15s
    1. What does accessibility mean?
      5m 51s
    2. How does accessibility help your users?
      3m 30s
    3. Experiencing a website via a screen reader
      5m 46s
    4. How does accessibility help you and your clients?
      3m 9s
    5. Overview of Section 508 standards
      5m 51s
    6. Overview of WCAG standards
      6m 4s
    7. Understanding consistency and semantic markup
      3m 4s
  3. 54m 30s
    1. Understanding screen readers and accessibility tools
      6m 12s
    2. Getting accessible browsers
      5m 40s
    3. Customizing Firefox for accessibility testing
      5m 53s
    4. Using custom accessibility toolbars
      5m 28s
    5. Using Fangs and the Color Contrast Analyzer
      5m 30s
    6. Accessibility tools to bookmark
      5m 53s
    7. Using automated accessibility checking tools
      4m 57s
    8. Setting up the JAWS screen reader on Windows
      6m 42s
    9. Using the VoiceOver screen reader on Mac OS X
      5m 52s
    10. Setting Dreamweaver accessibility preferences
      2m 23s
  4. 26m 10s
    1. Avoiding tables for layout
      3m 30s
    2. Using CSS for layout
      2m 40s
    3. Creating a fixed-width layout
      5m 51s
    4. Creating an elastic layout
      3m 50s
    5. Creating a liquid layout
      3m 4s
    6. Customizing a liquid layout
      7m 15s
  5. 1h 6m
    1. Specifying the language
      3m 42s
    2. Setting page titles
      2m 16s
    3. Setting headings and paragraphs
      9m 55s
    4. Styling headings
      9m 56s
    5. Hiding section headings from sighted users
      6m 41s
    6. Styling text for readability
      6m 40s
    7. Ensuring proper color contrast
      6m 36s
    8. Creating text emphasis
      4m 29s
    9. Indicating quotations
      4m 28s
    10. Creating basic lists
      4m 16s
    11. Styling lists
      7m 15s
  6. 1h 15m
    1. Using lists for navigation
      6m 45s
    2. Creating a horizontal navigation bar
      13m 25s
    3. Creating a vertical navigation bar
      11m 44s
    4. Adding skip navigation links
      11m 59s
    5. Hiding skip navigation links
      6m 16s
    6. Proper link text and title attributes
      6m 10s
    7. Opening new windows
      4m 27s
    8. Accessibility limitations of fly-out menus
      6m 30s
    9. Creating an accessible fly-out menu
      8m 38s
  7. 27m 54s
    1. Proper ALT text for navigation images
      4m 57s
    2. Proper ALT text for decorative images
      5m 19s
    3. Adding ALT text to an existing site
      6m 8s
    4. Adding ALT text to image maps
      5m 58s
    5. Describing complex graphics
      5m 32s
  8. 34m 0s
    1. Using tables for data
      3m 0s
    2. Creating header cells
      4m 4s
    3. Adding table captions and summaries
      9m 9s
    4. Styling tables
      5m 19s
    5. Applying header cells to complex tables
      6m 52s
    6. Adding id and headers attributes
      5m 36s
  9. 42m 0s
    1. Understanding form accessibility issues
      3m 4s
    2. Labeling form fields
      6m 9s
    3. Adding fieldsets and legends
      4m 42s
    4. Moving forms out of tables
      3m 44s
    5. Cleaning up a form's appearance
      4m 53s
    6. Aligning labels and fields using CSS
      9m 39s
    7. Indicating required fields
      6m 11s
    8. Dealing with CAPTCHA
      3m 38s
  10. 7m 29s
    1. The Text-Only technique
      3m 21s
    2. The Access Keys technique
      2m 35s
    3. The Tab Index technique
      1m 33s
  11. 17s
    1. Goodbye
      17s

please wait ...
Watch the Online Video Course Web Accessibility Principles
6h 10m Appropriate for all Oct 16, 2007

Viewers: in countries Watching now:

Accessibility on the web has been an issue for over a decade, and it remains a crucial--but often overlooked--element of web design. Instructor Zoe Gillenwater explains the concept of accessibility as it applies to the web, and describes how it affects the audience. She also covers how to set up accessibility testing, and how to apply accessibility principles to new and existing sites using standards-compliant markup and CSS. Exercise files accompany the tutorials.

Topics include:
  • Understanding Flex programming languages
Subject:
Web
Author:
Zoe Gillenwater

Creating a liquid layout

>> The third type of layout that we're going to make is called a liquid or fluid width layout. This refers to the fact that these layouts aren't rigid and solid, but flexible, like water. Like elastic layouts, they're made with relative units, but their width is dependent on the user's browser window width. A bigger window means a bigger width. And it will scale smoothly down as the window is scaled down in size. We use the same steps to create the layout, so go to the File menu and click new. This time under the layout column, choose two column liquid, left sidebar, header and footer.

For Doc type, choose HTML 4.01 strict and leave layout CSS set to add to head and click create. Let's go straight into previewing this in our browser. Go to the document toolbar and click on the globe icon and select preview in Firefox. When we're asked to save the page, click yes and save the file as liquid.html in the chapter three exercise files folder, then click save. The first thing we'll do is resize the browser window.

However when we resize the width of the window this time, the entire width of the design changes to match. Pulling the browser window back out changes the design to be wider. Let's close Firefox now and go into Dreamweaver to look at how this is done. Open the CSS style panel and click on the all button then click on the plus sign next to the style element to show all the rules for this page. Select the second rule for the container DIV. Here, the width is set to 80 percent. This percentage is relative to the width of the browser window, so the design will always take up 80 percent of that width.

Click on the value and change the width to 60 percent. Now preview the page again. When asked to save changes, click yes. The page is now narrower, but if we resize the browser window, it still changes in width as well. The advantage in terms of accessibility for this type of layout is that the user can resize the window and change the design width to make reading more comfortable or otherwise fit their needs. There is a down side though. Although liquid layouts are just as simple to make as fixed width layouts in terms of their initial structure and CSS, they start becoming more complicated when the design is very complex or when complex content is introduced into the design.

This is because you have to make sure that the graphics of your design hold together at various sizes and you have to make sure that content doesn't overflow its containers. These are all issues that can be successfully addressed with CSS, of course, but they require a higher level of skill and comfort with the language. Also, some designs and types of content just don't work well with liquid layouts, such as if you have a page full of large fixed width images that would overflow their containers if the design became too narrow, so there may be times to turn to fixed width ones instead.

For the rest of this title though, we're going to stick with this liquid layout and work on customizing it to further improve its accessibility. In the next movie we'll start that customization process.

There are currently no FAQs about Web Accessibility Principles.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Web Accessibility Principles.

Return to your organization's learning portal to continue training, or close this page.


OK

Upgrade to View Courses Offline

login

With our new Desktop App, Annual Premium Members can download courses for Internet-free viewing.

Upgrade Now

After upgrading, download Desktop App Here.

Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Start your FREE 10-day trial

Begin learning software, business, and creative skills—anytime,
anywhere—with video instruction from recognized industry experts.
lynda.com provides
Unlimited access to over 4,000 courses—more than 100,000 video tutorials
Expert-led instruction
On-the-go learning. Watch from your computer, tablet, or mobile device. Switch back and forth as you choose.
Start Your FREE Trial Now
 

A trusted source for knowledge.

 

We provide training to more than 4 million people, and our members tell us that lynda.com helps them stay ahead of software updates, pick up brand-new skills, switch careers, land promotions, and explore new hobbies. What can we help you do?

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.