Download Study Guide B PDF

Study Guide – Week 5
Templates and Tables
Contents
Contents
1
Introduction
2
Aims and learning outcomes
2
Activities for the week
2
Templates and tables
3
Summary
3
Building toward the ECA
3
Glossary
4
TT280 Web Basics: Design, Development and Management
Introduction
Providing your web pages with a distinctive structure or form, is key to fulfilling
your goals for Web design. At present there are two tools available to control the
position of page content and this week we shall be looking at the ‘table’.
Aims and learning outcomes
Our aims this week are to:
• Explore different approaches to using tables to control page layout.
On successfully completing this week’s study you will have demonstrated your
ability to:
•
Create a variety of page templates using XHTML table elements and
attributes, including global, row-level and cell-level attributes.
Activities for the week
During the course of the week you should work through the following:
•
PWD Chapter 5: Creating Page Templates.
•
Complete the Review Questions.
•
Complete the Hands-on Projects 1, 2, 3, 4, 6, 7 and 8.
Originally tables were used in HTML for presenting tabular data only. However,
Web designers soon realised that tables could equally be used for creating
structure in web pages. The use of tables still holds a significant position in Web
Design and, as such, there are design choices which need to be taken when
developing any website. The goal of using XHTML in conjunction with CSS is to
separate as far as possible page content from its presentation and part of your
challenge over the next two weeks will be to investigate the differences and
consequences of using both methods (tables and CSS) for controlling page
layout.
To find out more, visit our website at www.open.ac.uk
| 2
TT280 Web Basics: Design, Development and Management
Templates and tables
Tables feature prominently in many template designs and form layouts. Take a
look at the source code of any web page you browse and see how many tables
you can identify.
There are numerous attributes that can be defined to control the size, shape and
colour of individual rows and cells.
As a goal for this week you need to ensure that you can create some form of grid
to hold the content of your pages. Figure 1 shows some typical examples that
you might try. Sample (a) provides the ‘areas of importance’ discussed by Sklar.
Sample (b) provides a banner area at the top, a navigation panel at the left and
the main content area. Sample (c) provides a banner area, horizontal navigation
and search panels, and multiple columns.
(a)
(b)
(c)
Figure 1 Table-based layout templates
One thing to bear in mind as you design grid-based templates is browser
incompatibility. Whilst Internet Explorer is very forgiving if you miss out
something. Netscape is the opposite, and may display nothing if your table is
incomplete. So do remember to test all your designs in more than one browser.
Equally, remember to validate your XHTML code by using the W3C validator at
http://validator.w3.org/.
Summary
Tables were originally developed to support the display of tabular data – recall
that the World Wide Web came out of CERN, a scientific research centre that no
doubt had a lot of such data. Today, tables have been hijacked and are still
frequently used to create grid structures to hold all forms of content – text,
images, animations or video.
There is no doubt that as the absolute and relative positioning elements of CSS
continue to gain greater support within mainstream browsers, CSS will be used
as an alternative method of controlling page display. In Week 6 we shall start the
journey of looking at using CSS ultimately for structuring web pages.
Building toward the ECA
Now that you have encountered the basics of using tables to control page layout
you should take some time to look at the web page requirements for the ECA
Project. With a pencil and paper, make brief sketches of your approach to the
required template pages for the ECA and use the opportunity to practise your
skills using tables for layout. Find some time to build and test your skills, using
your TT280 FirstClass Webspace for posting non-ECA related test coding for
peer review. Don’t forget to consider the navigational issues covered earlier in
the course when producing your draft template designs.
Remember that it is a requirement of the ECA that your final template designs do
validate. If you find the validator a little daunting, first create a blank XHTML
To find out more, visit our website at www.open.ac.uk
| 3
TT280 Web Basics: Design, Development and Management
document with an appropriate XHTML DTD and appropriate character encoding
before you start any coding. If you build up your designs in stages and validate at
logical intervals then it is relatively easy to rectify any syntax mistakes as you go
along, rather than having to dig through a completed page line by line.
Glossary
Below are a few terms to include in your glossary for Week 5. You are
encouraged to add your own terms.
•
•
•
•
•
•
•
•
•
•
•
•
•
•
Align attribute
Border attribute
Cell-level attributes
Centering tables
Fixed width
Nesting tables
Page template
Relative width
Row-level attributes
Stacking tables
Table element
Table data cells
Table row element
White space
To find out more, visit our website at www.open.ac.uk
| 4