Exercise 11.4: Designing and adding a logo

Before you begin, you must complete Exercise 11.3: Linking a cascading style sheet to a Web page.

Now that you have the overall Web page look specified, you will use the WebArt Designer to create a Logo that you then will add to this page.

Starting the WebArt Designer

To start the WebArt Designer:
Tools menu with WebArt Designer

  1. Click Tools in the workbench menu.
  2. Click WebArt Designer on the pop-up menu.

    The WebArt Designer opens.
    WebArt Designer dialog

    The WebArt Designer shows the Template Gallery on the left, where you find samples of logos, buttons, rollovers, images and more. The big white area in middle of the dialog is the canvas that is used to work with objects that you want to create or change. Although you could select a logo from the template gallery as the base for your own logo, you will instead create you own.

Creating the logo

To create the logo:

  1. Click the Create Logo button above the canvas or use the Object > Create Logo menu options.
    Logo wizard

    The Logo Wizard opens.
    Logo wizard dialog

  2. Enter your company name in the Text field and in the next line of the Text field enter the project name.
  3. Select Comic Sans MS in the Font name list.
  4. Select 46 in the Font size list.
  5. Under Style, select Bold and Italic check boxes.
  6. Leave the Antialias check box selected.
  7. Click the Center radio button under Alignment.

    Notice in the upper right corner of the dialog, a sample of the logo is displayed.

  8. Click Next to go to the next page of the wizard.

    The Select Color page of the wizard opens.
    Logo wizard with Select Color page

  9. Click the gradation Type push button, the middle one of the three type push buttons.
    Note:
    The other push buttons select color types: solid and textured.
  10. Select beer from the colors available, or any other color you like best, just scroll through the list to find a gradation you like.

    Tip: You can change the colors by clicking the Others push button on this dialog and create your own gradation.

  11. Click Next to move forward to the next page.

    The Select Outline page opens.
    Logo wizard with Select Outline page

  12. Select the Seal outline from the list, or any outline you like best.
  13. Click Next.

    The Select Text Effect page opens.
    Logo wizard with Select Text Effect page

  14. Select the Emboss text effect or one that you like best.
  15. Click Finish.

    You return to the WebArt Designer window with the new logo object.
    WebArt Designer with new logo object

Resizing the logo

To resize the logo object on the canvas:

  1. Click the logo object to select it.
  2. Move the cursor to the rectangle at the right bottom corners of the object, watch the cursor changing shape.
  3. Drag the rectangle up and to the left so the object becomes smaller.

    Now you need to save this object. First you want save it as a WebArt object, that allows you later on to work with the object again in WebArt Designer. However you can't use that format for your Web page, so you will also save it in another format.

Saving the logo as a WebArt object

To save the logo as a WebArt object:

  1. Click File on the WebArt Designer menu.
  2. Click Save Canvas As on the pop-up menu.

    The Save Canvas As dialog opens.

    Note:
    Make sure you save the canvas in your workspace.
    path to saving logo

    Save dialog
  3. Type mylogo in the File name field.
  4. Click Save.

    Now you save the object in a form that can be displayed on a Web page.

Saving the object for a Web page

To save the logo object for a Web page:

  1. Click File from the WebArt Designer menu again.
  2. Click Save Wizard for Web on the pop-up menu.

    The Save Wizard dialog opens.
    Save wizard with Specify Objects page

  3. Leave the Save the selected objects radio button selected.
  4. Click Next.

    Now the Select File format page opens.
    Save wizard with Select File format page

  5. Leave the GIF radio button selected.
  6. Click Next.

    The GIF Format page opens.
    Save wizard with GIF Format page

  7. Click Finish.

    The Save As dialog opens.
    Save dialog

  8. Type mylogo in the File name field.
  9. Click Save.

    Next you close the WebArt Designer.

  10. Click File from the menu.
  11. Click Exit on the pop-up menu.

    You are back in the workbench in the WebFacing perspective showing the WebFacing Projects view.

    Next you switch to the Navigator view to locate the logo object mylogo.gif and to place the logo on the Design page.

    Note:
    You may have to click Window > Show view > Navigator from the workbench menu.

Placing the logo on the Design page

To place the logo on the Design page:

  1. Click the Navigator tab.
  2. Expand the wflabxx Web project if not already expanded.
  3. Expand the WebContent folder if not already expanded.
    View of Web Content directory with mylogo.gif

    The mylogo.gif file should appear in the list. If it doesn't appear, refresh the list.

  4. Right-click the WebContent folder icon.
  5. Click Refresh on the pop-up menu.

    Hopefully you can see the file now in the Web Content folder; if not, go to Windows Explorer and search for the mylogo.gif on your hard drive. Move it to the Web Content folder in the product workspace. If you didn't use the default workspace location, do a search for the workspace and the wflabxx directory in it. Move the mylogo.gif into the WebContent directory under the wflabxx directory. Refresh the Navigator view again.

    Now you can take the logo and put it on your Web page that is still open in Page Designer. If Page Designer has been closed just open the index.jsp file. Make sure you are on the Design page, not the Preview page.

  6. In the Navigator view, select the mylogo.gif file.
  7. Hold the left mouse down.
  8. Drag the file to the upper left corner in the Page Designer window.
  9. Release the mouse button.

    The logo is placed on the Design page.
    Dragging the mylogo.gif file onto the design page

You have started WebArt Designer, added a logo, resized the logo, saved the logo, and placed the logo on the Design page, and now you are ready to Exercise 11.5: Adding a heading 1 tag to the page.