Designing the App - Realtime Web Apps: With HTML5 WebSocket, PHP, and jQuery - page 89

Creating the Footer
Next up, let's add the site footer. Draw another rectangle (like the one you made for the header) at 1024px wide by
50px tall and align it with the bottom and left sides; this will be the background of the footer.

1. Using the Horizontal Type Tool, draw a text area centered on the footer background; then

change the settings in the Character panel to the following:

• Font: News Gothic Light

• Size: 13 pt

• Tracking: 25

• Color: #FBF7E7

• Antialiasing: Strong

Add the copyright info, © 2013 Jason Lengstorf & Phil Leggetter ; then press Tab and
choose the right align option. The tab allows the copyright info to align left while the text
after the tab aligns right. Now add the rest of the footer text: Part of Realtime Web Apps:
With HTML5 WebSocket, PHP, and jQuery . Get the Topic | Source Code (on GitHub) .

2.

3. For the links Get the Book and Source Code (on GitHub), select each one in turn and set

the font to News Gothic Medium, turn on underlining, and set the color to your accent
color, #E06F00 .

Save again; the footer is good to go (see Figure 6-7 ).

Figure 6-7. The footer for the app