• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Lesson 2. Designing a Page Interface > Finalizing the Whole-Page Design

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 from the Tools panel. Use the Property inspector to set the Stroke to 1-Pixel Hard, the Size to 1.

We need to further divide the main content area into two columns: 2/3 on the right for page content and 1/3 on the left will be reserved for special events advertisement or other promotional materials.

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 are done, 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 Jade Valley's 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 event 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 on the top of the left segment of the content area. Once you have 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 caps. Use the Property inspector to change the text color to white (#FFFFFF). Use Arial Narrow for the font, 14 for the size, and Bold type for the text, and set 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 now provide one more method 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 and 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 content-sensitive elements (depending on which page you are on in the Web site). The file banana.png is imported in this step 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.

Since the banana photo and the text are separate, it's difficult to move both at the same time. Grouping them makes it more convenient to move both elements without damaging or leaving an element while you position it.

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 info is located):

In an effort to 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.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint