Finalizing the Whole-Page Design
Now that the banner for the Jade Valley Web site has been developed, you can start adding other elements to the interface and finalize the whole-page design.
1. | Select the Rectangle tool in the Tools panel. Use the Property inspector to set the Stroke to 1-Pixel Hard and the Size to 1. |
We need to further divide the main content area into two columns:


The rectangle you just drew is the content area for the Jade Valley Web site.
[View full size image]

3. | Select the Line tool and draw a line from the top of the rectangle down to the bottom. Use the Property inspector to set the X value of the line to 160. |
The line you just drew serves as a visual divider to separate the special events area and the page content space.

To improve usability, the yellow rectangle will be another indicator for visitors to know where they are on the Jade Valley Web site.
5. | Using the Text tool, type the word PRODUCT in all capital letters. Use the Property inspector to change the font Color to white (#FFFFFF). Use Arial Narrow for the Font, 14 for the font Size, and Bold type for the text, and set the alignment to Right-aligned. Finally, the X and Y coordinates of the word PRODUCT should be 74 and 123, respectively. |
With the completion of this yellow indicator, you've provided one more way for your visitors to go through the Jade Valley Web site.
[View full size image]

6. | Choose File > Import and select banana.png from the Start folder of this lesson. Place the file underneath the yellow indicator. |
As explained earlier, the left segment of the content area is reserved for marketing, promotional events, or other such elements (depending on which page you're on in the Web site). You've imported the file banana.png as a placeholder for the special element.

7. | With all the elements of the file banana.png still selected, choose Modify > Group to group the background banana image and the text in the foreground into one entity. |
The banana photo and the text are separate, so it's difficult to move both at the same time. Grouping them makes it easier to move both elements without damaging an element while you position it or moving one element but not the other.
The placeholder is now finished.

8. | Select the Text tool and use the Property inspector to set the Font to Arial, Size to 10, Color to charcoal (#333333), and alignment to Center. Then type, using all capital letters, ABOUT US | PRODUCTS | RECIPES | NUTRITION | ORGANIC | EVENTS right above the gray horizontal bar (where the copyright information is located): |
To help make the Jade Valley Web site more user-friendly, this step provides another way for visitors to navigate through the site. When visitors reach the end of a lengthy page, they won't have to scroll all the way up to the navigation bar in order to move to a different page. The text-based navigation in the footer area of every page makes it easy for visitors to move beyond the current page.
[View full size image]

9. | Choose File > Save to save the file. |
We will develop the page-slicing scheme in the next section.