Exercise 9.4: Designing and adding a logo

Before you begin, you must complete Exercise 9.3: Linking a cascading style sheet to the 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. Make sure the Page Designer is in focus.
  2. Click Tools > WebArt Designer in the workbench 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 large white area in middle of the dialog is the canvas that is used to work with objects that you want to create or change. Now you will create a logo from scratch.

    You could also select one from the template gallery as the base for your own logo.

Creating the logo

To create the logo:

  1. Click the Create Logo button above the canvas or click Object > Create Logo.

    The Logo Wizard opens.
    Logo wizard dialog

  2. In the Text field, type your company name and in the next line in the Text field, type WSSLABxx.
  3. In the Font name list, select Comic Sans MS.
  4. In the Font size list, select 46.
  5. Under Alignment, select the Center radio button.

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

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

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

  7. Select the gradation type button; the middle one of the three type push buttons.

    Tip: The other buttons select color types: solid and textured.

  8. 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 button on this dialog and create you own gradation.

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

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

  10. Select the Seal outline from the list, or any outline you like best.
  11. Click Next.

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

  12. Select the Emboss text effect, or one that you like best.
  13. Click Finish.

    You return to the WebArt designer window.
    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 corner of the object; watch the cursor changing shape.
  3. Drag the rectangle up and to the left so the object becomes smaller.

Saving the object as a WebArt object

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

To save this object:

  1. Click File > Save Canvas As on the WebArt Designer menu.

    The Save Canvas As window opens. Make sure you see the WebContent folder in the Save Canvas As window.
    WebArt Designer save dialog

  2. In the File name field, type mylogo.
  3. Click Save.

    Now you need to 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 for a Web page:

  1. Click the logo object on the canvas.
  2. Click File > Save Wizard for Web from the WebArt Designer menu.

    The Save Wizard opens.
    Save wizard with Specific Objects page

  3. Click the Save the selected object radio button.
  4. Click Next.

    The Select File Format page opens.
    Save wizard with Select File Format page

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

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

  7. Click Finish.

    The Save As window opens.
    Save dialog

    Make sure the directory is pointing to the Web Content directory in the workspace where your Web project is located.

  8. In the File name field, type mylogo.
  9. Click Save.

    Close the WebArt designer.

  10. Select File > Exit from the menu.

    You return to the workbench in the Web perspective and see the Project Explorer.

Placing the logo on the Design page

To place the logo on the Design page:

  1. Make sure you switch from the Gallery view to the Project Explorer.
  2. Expand the WSSLABxx Web project.
  3. Expand the Web Content folder.
    View of WebContent directory with mylogo.gif

    The mylogo.gif file should appear in the list as shown below. If it doesn't appear, the list might need to be refreshed.

  4. Right-click the Web Project WSSLABxx folder icon.
  5. Select Refresh.

    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 location as shown above, do a search for the workspace and the WSSLABxx directory in it. Move the mylogo.gif file into the Web Content sub directory under the WSSLABxx directory. 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 inquiry.jsp file.

    Note:
    Make sure your are on the Design page, not the Preview page.
  6. In the Project Explorer view select the mylogo.gif file.
  7. Hold the left mouse button down.
  8. Drag the file to the upper left side 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, created a logo, resized a logo, saved the object as a WebArt object, saved the logo for a Web page, placed the object on the Design page and now you are ready to begin Exercise 9.5: Adding a heading 1 tag to the page.