Professional Web Design: Techniques and Templates, Fourth Edition

Building the Structure 275
rule would need to be changed from center to left. The margin-left and
margin-right properties in the a5-body rule ensure that the extra white
space is split evenly on both sides. While this system tends to be more
complex, it allows the designer flexibility when more than one site is going
to be built. By adding this code to every design, it does not take much work
to quickly modify a design to fit a client’s needs.
■
Both the a5-body-center and a5-body rules have their borders turned on
using the following code: border:1px solid #000000;. For demonstration
purposes, the code was added to both rules to show what the structure of the
tags looks like without content added. Turning on the borders helps
a designer when building a site because it is not always apparent where elements
are placed or expanding. Rather than remove these rules, it is easier to
change the value of 1px to 0px, turning the borders off rather than removing
them. Troubleshooting often involves turning the borders back on, so it
saves times and takes up very little download size to keep them in the style
sheet.
■
Because the is nested inside the
tag, it is indented. This allows for quicker recognition of tags that
are nested inside each other, which becomes a useful technique when the
page has more code added to it.
Adding the Header Row
Once the XHTML and basic CSS framework have been added, the header area is
then added into the code. Listing 11.2 is the code that is used to create the updated
page in Figure 11.6.
Figure 11.6
The header row that is added to the design.
Game Developing GWX