Boot Camp

Page Layout Code, Part 1
14
Page Layout Code – Part 1
We’ve been learning about HTML elements, attributes, and values in web pages. We’ve
even seen some really basic web pages, but they have been pretty straightforward up-anddown
text that looks very little like anything you like looking at on the web. How do we
get from here to there?
Small steps, grasshopper.
Seriously, we get to start working toward solid web page builds. One big step is in building
web page layout structures, like we discussed eons ago in an earlier chapter. Now that
we’ve covered tables, we’ll learn how to use them to set up a straightforward web page
layout.
A word about this first. HTML/XHTML has been moving towards as much cascading
styling (CS) as possible. Web page layouts are an important part of this movement, and
professional web authors focus on as much CS as possible. Despite this, a web author in
today’s work market is as likely to inherit existing and unstyled work, in content management
systems and company sites that are too big and entrenched to redesign from scratch.
They will inherit small, low-paying freelance gigs where they get to maintain and update
existing websites. And in many of these cases, the site has been built using tables for the
site’s layout structure.
Our goal in this chapter is to learn a clean, efficient, and well-commented way to build
web page layouts using tables, and how to nest other tables inside these page layout tables.
The cool thing is that when we get to the transition from table layout to CS division
layout, your attention to detail here will help you easily translate your table into the CS
format.
Measurements
A key thing the web author needs to decide, when designing a website, is how wide it
will be in relation to the open browser window. As you look at examples on the Internet,
you will see all sorts of layouts, from flexible full-width to fixed 80% width (like many
Wordpress blog layouts).
• Pixel measure results in fixed or static content
131