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:
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 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:
The Logo Wizard opens.
Notice in the upper right corner of the dialog, a sample of the logo as specified is displayed.
The Select Color page opens.
Tip: The other buttons select color types: solid and textured.
Tip: You can change the colors by clicking the Others button on this dialog and create you own gradation.
The Select Outline page opens.
The Select Text Effect page opens.
You return to the WebArt designer window.
Resizing the logo
To resize the logo object on the canvas:
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:
The Save Canvas As window opens. Make sure you see the WebContent
folder in the Save Canvas As window.
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:
The Save Wizard opens.
The Select File Format page opens.
The GIF Format page opens.
The Save As window opens.
Make sure the directory is pointing to the Web Content directory in the workspace where your Web project is located.
Close the WebArt designer.
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:
The mylogo.gif file should appear in the list as shown below. If it doesn't appear, the list might need to be refreshed.
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.
The logo is placed on 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.
(C) Copyright IBM Corporation 1992, 2005. All Rights Reserved.