Problem
For years, designers have used tables-based layouts to create Web pages, although
the original purpose of tables was not to lay out a Web page
but to contain rows and columns of data. Web purists maintain
that the use of tables in Web design is no longer needed, and
adds unnecessary code and download time to a Web page. Tables
can also make it more difficult to design accessible Web pages
for use with assistive
technologies
such
as screen
readers.
With
Cascading Style Sheets (CSS), designers can control layout
of page elements without placing them into tables. Many designers
are intimidated by CSS, and struggle with changing their
workflow to eliminate use of layout tables and incorporate
CSS for positioning
of page elements. This site will illustrate a simple work
flow to convert a basic tables-based layout to a similar CSS-based
layout.
This site is a tutorial course to help Web designers
who are familiar with using tables to lay out Web pages to
convert
their pages to Cascading Style Sheets (CSS) or to create
new
pages using CSS instead of tables. The pages themselves
are constructed using CSS, and contain links to resources about
using CSS.
Background
The intended audience for the project is Web designers who are familiar with
using tables to lay out Web pages, and who wish to convert
their pages to Cascading Style Sheets (CSS) or to create new
pages using CSS instead of tables. The learner should be familiar
with basic HTML including tables. Knowledge of Web design software
such as Macromedia Dreamweaver is optional but could be useful.The
audience could be college students or professionals in an online
Web design class.
The program is designed to be viewed online
using a browser. There are no conditions of use, rules, or
regulations. The
course is designed to take place over six weeks with the
learner working independently online.
Constraints for the learner
would include the need for them to have basic computer skills,
and a computer available with
the ability to access the Internet. Projects will need
to be uploaded to a server for the class to review, so the
learner
will need to have a server to upload to, and knowledge
about how to upload files and post the URL.
Reflection
When planning my final project, I wanted to make it something
useful that designers such as the students in the Designs
for Online Learning class would find helpful. In the discussion
threads for the class, I received positive feedback that
my fellow ILT students would find this type of tutorial helpful.
I
found a lot of online CSS examples and tutorials, but some
of them seemed overly complex and others incomplete. I wanted
to combine ideas from the best of them, but simplify the
content so that it would cover just the basics. I included
some of the better existing Web sites as assigned reading
and virtual field trips.
I included hands-on activities so
the learner would get experience in creating and editing
the CSS and HTML files. I would like
to add more interactive examples so that the learner could
click on links to see pop-up examples, or enter text into
a field and submit it to see if their example is correct
or not. At some point I want to make the discussion threads
interactive.
The process of going through the pages, and
thinking of how a learner would approach acquiring the new
skills on
each
page, helped me to improve my CSS skills. |
