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:
The WebArt Designer opens.
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:
The Logo Wizard opens.
Notice in the upper right corner of the dialog, a sample of the logo is displayed.
The Select Color page of the wizard opens.
Tip: You can change the colors by clicking the Others push button on this dialog and create your own gradation.
The Select Outline page opens.
The Select Text Effect page opens.
You return to the WebArt Designer window with the new logo object.
Resizing the logo
To resize the logo object on the canvas:
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:
The Save Canvas As dialog opens.
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:
The Save Wizard dialog opens.
Now the Select File format page opens.
The GIF Format page opens.
The Save As dialog opens.
Next you close the WebArt Designer.
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.
Placing the logo on the Design page
To place the logo on the Design page:
The mylogo.gif file should appear in the list. If it doesn't appear, refresh the list.
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.
The logo is placed on 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.
(C) Copyright IBM Corporation 1992, 2005. All Rights Reserved.