This code is also quite complicated, but working through it is just a matter of
looking through the code for the
class
and
id
attributes and noting the tables in
the middle. By now, you should be quite good at this, so you won’t do that here.
The next section, after all, provides a map of all of the
class
es and
id
s you need.
The Bottom Section Now we come to the last remaining section of the Gmail screen: the bottom of
the screen, as shown in Figure 4-9. Again, the drudgework is left out here; you
see only the code. In the tradition of software textbooks, the figuring out of the
names of the divs and spans within the bottom section is left as an exercise to the
reader. Listing 4-4 shows you the code if you want to do this, or you can skip past
Listing 4-4 to Figure 4-10, which outlines the whole page’s structure in CSS.
F IGURE 4-9: The bottom section of the screen 09_59611x ch04.qxp 11/28/05 11:12 PM Page 42
43 Chapter 4 — Skinning Gmail Listing 4-4: The Bottom Section of the Screen in HTML
Use the id=”fsb”
style=
“color: rgb(0, 0, 204); text-decoration: underline; cursor:
pointer; white-space: nowrap;”>
search box or “color: rgb(0, 0, 204); text-decoration: underline; cursor:
pointer; white-space: nowrap;”>
search options to find messages quickly!
“c s b”>You are currently using 0 MB (0%) of your 1000
MB.
class=”lc”>Terms of Use -
“/gmail/help/privacy.html” target=”_blank” class=
“lc”>Privacy Policy -
“/gmail/help/program_policies.html” target=”_blank” class=
“lc”>Program Policies -
“http://www.google.com/” target=”_blank” class=”lc” id=
“googh”>Google Home
