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:
2.
| Click and draw a rectangle anywhere in the Document window. Don't worry about the size and placement of the rectangle when you first draw it. When you're finished, use the Property inspector to set the W, H, X, and Y coordinates to 680, 415, 10, and 121, respectively.
|
The rectangle you just drew is the content area for the Jade Valley Web site.
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.
4.
| Select the Rectangle tool. Use the Property inspector to set the Fill Color to bright yellow (#EBCF10) with No stroke. Then click and draw a rectangle at the top of the left segment of the content area. Once you've drawn a rectangle on the canvas, use the Property inspector to set the W, H, X, and Y coordinates to 150, 24, 11, and 122, respectively.
|
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.
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.
9.
| Choose File > Save to save the file.
|
We will develop the page-slicing scheme in the next section.
![[View full size image]](/image/library/english/13887_058fig01_alt.jpg){kind=link}
![[View full size image]](/image/library/english/13887_060fig01_alt.jpg){kind=link}
![[View full size image]](/image/library/english/13887_061fig02_alt.jpg){kind=link}