29.01.2013 Views

WebSphere Application Server - IBM Redbooks

WebSphere Application Server - IBM Redbooks

WebSphere Application Server - IBM Redbooks

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

5.2 Adding HTML pages to the Online Catalog sample<br />

This example will illustrate how to use the Web Site Designer and page<br />

templates to build application pages. A standard template will be used as the<br />

basis for the Web pages. The template we chose has a place for a company logo<br />

at the top and a navigation bar to the left. In this example, we will update the<br />

standard template to hold our company logo, then create two pages for the<br />

application. The first page, index.html, is the entry point for the application. The<br />

second page, aboutus.html, is a company information page. It will be created as<br />

a child page of index.html, automatically creating a link from the navigation bar.<br />

This link is reflected in all pages using the page template.<br />

Tip on finding the default welcome page for a Web application: The Web<br />

deployment descriptor contains a list of file names that will be used to<br />

determine the initial application welcome page. This list is seeded with default<br />

file names, including index.html, when you create the Web project. To see the<br />

list, open the Web deployment descriptor by double-clicking it in the Project<br />

Navigator view. When it opens in the editor area, select the Pages view.<br />

5.2.1 Creating HTML pages using Web Site Designer<br />

Web Site Designer will be used to create the index.html page and to layout the<br />

first child page for the Online Catalog sample. Creating pages using the Web Site<br />

Designer is an alternative to the method used in previous releases (New -><br />

HTML/XHTML File or New -> JSP File). That method is still valid and available.<br />

5.2.2 Customizing a page template<br />

In our sample, we have created a Web project and specified the B-01_blue.htpl<br />

page template as a default. Because this is a standard template supplied with<br />

Studio, we will need to customize it to include our company logo and name<br />

before creating our Web pages. All of the files related to the template are stored<br />

in the theme folder under the Web Content directory.<br />

1. Expand the Web Content folder within the OnlineCatalog Web project.<br />

2. Expand the theme folder. Notice the six files in the folder. These are all used<br />

to create the template.<br />

– B-01_blue.htpl<br />

– blue.css<br />

– c.gif<br />

– footer.html<br />

– logo_blue.gif<br />

– nav_side.html<br />

Chapter 5. Working with HTML 135

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!