Creating a Web site the easy way with WebSphere Studio Web Site Designer and page templates

WebSphere Studio Web Site Designer and page templates enable you to generate JSP/HTML pages with a consistent look and dynamically generated navigation links. This article shows you how to apply a page template to a Web site using sample data, how to use the nav bar with a page template, how to create a page template from scratch, and how to apply a page template.

Masabumi Koinuma (koinuma@jp.ibm.com), Software Engineer, IBM Yamato Software Development Laboratory

Masabumi Koinuma is a software engineer at IBM Yamato Laboratory and works on WebSphere Studio Application Developer Web Tooling team. Since 2000, he has been a member of the team, and has been working on the development of Web Site Designer (HTML/JSP authoring tool) and CSS Designer (CSS authoring tool). His primary role is developing the Web Site Designer and page templates. Previously he was a member of WebSphere Studio Homepage Builder development team and wrote some books on Homepage Builder. You can reach Mr. Koinuma at koinuma@jp.ibm.com



Satoshi Tanaka (tanakas@jp.ibm.com), Software Engineer, IBM Yamato Software Development Laboratory

Satoshi Tanaka is a software engineer at IBM Yamato Laboratory and works on WebSphere Studio Application Developer Web Tooling. Since 2000, he has been a member of the team, and has been working on the development of Web Site Designer (HTML/JSP authoring tool). His role in the team is the team lead of Web Site Designer. Previously He was a member of WebSphere Studio Homepage Builder development team and wrote a book on Homepage Builder. You can reach Mr. Tanaka at tanakas@jp.ibm.com



29 September 2004

Also available in Russian

Introduction

IBM® WebSphere® Studio now has powerful Web site management tools -- Web Site Designer and page templates. This article shows you how to create a sample Web site using Web Site Designer and page templates, and describes how to create a page template and how to apply it to multiple pages.

Overview of Web Site Designer and page templates

Page templates are one of the new features of WebSphere Studio Web Site Designer. With page templates, you can:

  • Manage common contents of multiple Web pages, such as header and footer sections, with a separate file called a page template file.
  • Manage layouts of multiple Web pages.
  • Update a group of Web pages simultaneously and automatically, simply by updating a page template and saving it.

When you create a page template and also create multiple Web pages to which the template applies, page template's updates are immediately applied to all of the Web pages as soon as the template file is saved. The template file and Web pages have special comment tags that define common or page-specific regions in the content. You can put the comment tags anywhere in the template. And you can use page template with both static and dynamic Web pages.

With Web Site Designer you can:

  • Define Web site architecture using a graphical diagram editor.
  • Change information simultaneously on multiple pages, including stylesheet, page title, keywords, or page template.
  • Generate navigation links (nav bar) on each page that reflects the Web site structure you created using the Diagram Editor. Nav bars are updated automatically when you update and save your Web site structure.
  • Generate a site map that reflects the Web site structure.

While Web Site Designer has other useful functions to manage Web site, this article focuses mainly on dynamically generated nav bars. By using a nav bar and page templates together, you can create multiple pages with consistent layouts, common sections like a header or a footer, and dynamically generated nav bar links.

You can also define nav bars using special comment tags. They generate the nav bar using two files: a Web site navigation file that describes the site structure, and a navigation specification file that defines the look and feel of the nav bar using HTML tags and special comment tags.

This overview shows the relationship among Web Site Designer, a page template, and HTML/JSP pages:

Figure1. Overview of Web Site Designer and page templates
Overview of Web Site Designer and page templates

Creating a Web site

This article shows you how to use Web Site Designer by importing an existing Web site using the Import function of WebSphere Studio. You can either import your own Web site, or download a .zip file and import the example Web site contained in it. This zip file was created based on the Web site example provided with WebSphere Studio V5.1.2. With the Web site Designer, you can:

  • Create a Web site structure by adding, moving and deleting Web page icons.
  • Automatically generate nav bar links based on the Web site structure.
  • Keep a consistent look and feel in your Web pages by using page templates.

Import an existing Web site

After you have created a new Web project using WebSphere Studio V5.1 or later, open Web Site Designer by double-clicking Web Site Navigation in the Project Navigator view. Then import the existing Web pages:

  1. Create a new static Web project: select File => New => Static Web project..
  2. Import existing Web pages: either copy your own Web pages under the WebContent folder, or import the example Web pages from the downloaded .zip file by following these steps:
    1. Select the WebContent folder in your Web project.
    2. Select Import. The Import wizard opens.
    3. One the wizard page, select Zip file as the import source.
    4. Specify WebSite.zip in the From zip file field and click Finish.
    Your Web pages are imported under the WebContent folder.
  3. After importing the Web pages, you need to add the existing Web pages into Web site navigation: select Add Existing Pages from the context menu. The Add Existing Pages wizard opens.
  4. On the Select a top page page of the wizard, select a top page in your project. Select /WebContent/index.html (or the top page of your own Web pages). If the top page you selected has links to other pages, add the other pages by selecting Add linked pages. Specify the Depth limit in order to set the limit for crawling links from the top page. For this example, select No limit to add all pages linked to from the top page.
  5. Click Next. The Add existing pages to Web site page of the wizard opens.
  6. Click Next again. The Continue applying page template page of the wizard opens. You can apply a page template continuously by selecting Proceed with wizard and apply page template, but instead, select Exit wizard and apply page template later. This step is described below.
  7. Click Finish to close the wizard.

All linked pages from the top page are added, and the Web Site Designer editor opens as shown in Figure 2. This Web site structure will be used for automatic generation of nav bars, which is described below.

Figure 2. Web Site Designer -- Navigation View
Web Site Designer -- Navigation View

You can add your Web pages into the Web Site Designer by clicking Convert to Web site. If your project has Web site navigation, you can add your existing Web pages by using Adding existing pages instead of Converting to Web site.

Applying a page template

You can maintain a consistent look and feel for your Web site by applying a page template. To apply a page template by using a sample page template with the Web Site Designer:

  1. Open the Web Site Designer by double-clicking Web site navigation in the project that you created above.
  2. Select Ctrl + A in order to apply a page template to all pages. You can also select pages by dragging the marquee selection box.
  3. Select Page template => Apply template. The Apply page template wizard opens.
  4. On the first page of the wizard, select a template you like from the sample. For this example select B-03_blue.htpl. This template contains the nav bar tags, so after applying it, a nav bar will be placed on your all pages. Click Next.
  5. The page template has some content areas that you can map to actual contents, so you need to pair the content area of the page template with your Web pages. On the second page, specify a representative page so that you can apply a template to all pages you selected. You can specify the combination between them on the third page. Here, index.html is specified as the default. Click Next.
  6. On the third page, pair the content area of the page template with the actual contents. The B-03_blue.htpl template that you selected on the first page has the following two content areas:
    headarea
    The area for mapping to contents under the <head> tag. Therefore, headarea in the template will be replaced with your contents under the <head> tag.
    bodyarea
    The area for mapping to main content. Specify the destination content for this area. For example, in Figure 3 below, the main content is indicated by the red border. This area should be mapped to bodyarea in the template as the main content. Specify the destination of bodyarea on the third page. By default, the <head> and <body> tags are selected for each content area. For this example, you can use these default pairs. Click Next.
    Figure 3. Mapping of content area
    Mapping of content area (one)Mapping of content area (two)
  7. On the final page, preview the page applied with the template, then click Finish.

The page template you selected (B-03_blue.htpl) should have been applied to all pages in your site, and all pages should have a blue line, which indicates template applied:

Figure 4. The template has been applied to all pages
The template has been applied to all pages

After applying the template, the body content of each page has been contained in the content area bodyarea of the page template:

Figure 5. Body content after the template has been applied
Body content after the template has been applied

On the other hand, the nav bars are also generated on all pages, since the applied template has nav bar tags (see Figure 6). These nav bars are generated based on the site structure automatically. You can also control the destination of the nav bar by changing the attribute value of the nav bar tag:

Figure 6. Navigation bar generated automatically.
Navigation bar generated automatically

Creating navigation bars

You can add, move and delete pages of your Web site structure by using Web Site Designer editor. This article introduces how to use the Web Site Designer editor here. This Web site structure will be used for creating the nav bars on your pages. In other words, the web site structure is a definition of the relationship between the each Web page for the nav bars. To use the nav bar, you need to insert the Web Site Navigation tags which are placed on the Palette view into your Web pages. However, you've already done it by applying sample page template since the sample page template contains the Web site navigation tags. The Web Site Navigation tag is a special comment tag and it will be converted to the nav bar based on the Web site structure. The destination links of the navigation bar are determined by attribute value of the navigation bar tag. So, to change the destination, you need to edit the attribute value of the navigation bar tags. Here, let's change the destination. Your navigation bar tags are contained in the template page which you already applied. The first thing you should do is opening the page template with Page Designer. To open the page template:

  1. Open the Web Site Designer.
  2. Select a page which has blue line (template applied) in the Web Site Designer.
  3. Select Page template => Open Template With => Page Designer for Template from the context menu. The page template page (B-03_blue.htpl) opens in the Page Designer.

Next, change the link destination:

  1. Select the nav bar tag in the template page. The following attributes view is displayed at bottom left. Click the Link Destination tab in the Attributes view. You can see the all destination links you can use, and you'll find that Children of top page is specified. It means that this navigation bar always displays the children pages of the top page. Therefore the above (Figure 6) navigation bar was generated.
    Figure 7. The attributes view of the nav bar tag
    The attributes view of the nav bar tag
  2. Next, change the destination of this nav bar. Select the following attributes instead of Children of top page:
    • Top page -- to display the Top Page
    • Current page -- to display the current page with highlighted decoration.
    • Children pages -- to display the children pages of the current page
  3. Save the template page (B-03_blue.htpl). The nav bar will be re-generated based on the site structure:
    Figure 8. The nav bar of the Company page before changing the attributes
    The nav bar of the Company page before changing the attributes
    Figure 9. The nav bar of the Company page after changing the attributes
    The nav bar of the Company page after changing the attributes

In this way, you can change the link destination between the site structure(Figure 4) by changing the attributes of the nav bar tag.

Creating a new page template

Now you have finished creating Web site using page template and navigation bar! But the template is sample template provided by WebSphere Studio. To create a template with your Web site's taste, we have three options:

  • Modify sample template -- The sample template was copied into your project to apply the page template to your site pages. So you can create your template by modifying the sample template in your project.
  • Create page template from existing Web page -- There is a function to save a web page file as a page template. Open a typical page of your site, remove the page-specific contents, and keep the common contents. Save the file as a page template by selecting File => Save As page template.
  • Create page template from scratch using the New file wizard.

This article describes how to create a page template from scratch. You can create or modify a page template just like other Web pages using Page Designer: drag and drop object from palette, type text contents in Design tab, and so on.

To create new page template:

  1. Select theme folder under the WebContent folder in the Project Navigator view
  2. Select File => New => Page template File from the system menu. The new page template file wizard opens.
  3. Specify file name newTemplate.
  4. Select Template containing only HTML from the Model combo-box
  5. Click Finish.

Now, new template file newTemplate.htpl is created under the theme folder and it is opened with Page Designer. You will get a message box:

Figure 10. A message box is shown on opening new page template file
A message box is shown on opening new page template file

The newly created template does not have an area which is later filled in by each Web pages ( named Content Area ). So this message box says that you need to define one or more Content Area in your template. Click OK then you can start editing the page template. You can define a content area after editing the page template similarly with HTML or JSP pages with the following procedure:

  1. Select Content Area item on Palette view's Page template drawer
  2. Drag and drop the selected palette item to somewhere you want to fill with each page's content, then Insert Content Area for page template dialog is opened.
  3. Click OK.
  4. Save the page template by selecting File-Save
Figure 11. Inserting content area into page template
Inserting content area into page template

Various kinds of page templates

You saw Model combo-box in New page template File wizard on creating scratch page template file. WebSphere Studio provides three options on creating your templates.

Template containing only HTML
You can insert HTML tags into this type of template but not JSP tags. This is applicable to both HTML and JSP Web pages. You can manage consistent look and feel of a Web project which has both HTML and JSP pages, as well as static Web project. This type of template's file extension is HTPL.
Template containing JSP
You can insert JSP tags as well as HTML tags into this type of template. But this is only applicable to JSP Web pages. If your project does not have static(HTML) pages, this option is the best recommendation. This type of template's file extension is JTPL.
Template containing Faces components
This type of template is basically similar to Template containing JSP option, but taglib directives and custom tags for Faces Components are already defined in the template. This type of template's file extension is JTPL.
Figure 12. New page template file wizard
New page template file wizard

Inserting a nav bar into a page template

There is no nav bar in the template page that you just created since the template page was created from scratch. So you need to insert nav bars into the your own template page. To insert the nav bar, you need to do the following:

  1. Open the template page with Page Designer by double clicking the newTemplate.htpl file that you just created.
  2. Drag and Drop a Navigation bar object from the Web site navigation drawer. You can select any nav bars, but for this example, put the Horizontal Bar into the common area. Usually, the nav bar is used in a common area such as the header or footer. Therefore you need to insert the nav bar into the common area.
  3. After insertion of the nav bar, change the attributes value of the nav bar in order to navigate to the proper pages.
Figure 13. Page template file with nav bars in second row and left-side blue column of the table
Page template file with nav bars in second row and left-side blue column of the table

The navigation specification file is also copied to your project when you insert a nav bar from the Web Site Navigation drawer. The Navigation's generation rule is described in the Navigation specification file, in which you can use the special comment tags which are similar with JSTL.

Replacing a page template

Now you have created your own page template! The last thing you need to do is apply the new page template to Web page files. Existing Web page files already use sample page template, so we will replace the page template of page files. As is the same manner with applying page template, you can replace templates of multiple page files at a time by using Web Site Designer. To replace page templates:

  1. Open the Web Site Designer by double clicking Web Site Navigation in your Web project.
  2. Select all pages by pressing Ctrl + A in order to replace page templates of all pages. You can also select pages by dragging mouse cursor with marquee selection box.
  3. Select Page template - Replace Template from context menu. Then Replace page template wizard is opened.
  4. In the first page of the wizard, select User-Defined page template radio button to select the page template you have created to your project. Then, copied sample template and your original template is shown in the Thumbnail area.
  5. Select newTemplate.htpl from Thumbnail area, and go to next page by clicking Next.
  6. Similarly to applying page template, you need to specify mapping of content areas between Web pages and new template. In the second page, you need to specify a representative page so that you can replace template to all pages which you selected at a time. You can specify the combination between them in the third page. Here, index.html page is specified as default. So, click Next.
  7. In the third page, you need to pair the content area of Web pages with new template. As both representative page index.html and template newTemplate.htpl has the same content area -- headarea and bodyarea, the mappings are set by default. Click Next to go to the next page.
  8. In the final page, you can preview the pages whose templates are replaced with new one. Click Finish to complete this task.

Now all the page files are converted to use new page template. You can see page files with the new template's look and feel and with automatically generated navigation bars.

Figure 14. Web page files with new page template
Web page files with new page template

Conclusion

This article showed you how to create efficient Web site using page template technology and Web Site Designer. By using the page template technology, you can create a Web site that has consistency look and feel and you can also use the automatically generated nav bars in your Web site by using Web Site Designer.


Download

DescriptionNameSize
Code sampleWebSite.zip  ( HTTP | FTP )11 KB

Resources

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into WebSphere on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=WebSphere, Java technology
ArticleID=87782
ArticleTitle=Creating a Web site the easy way with WebSphere Studio Web Site Designer and page templates
publish-date=09292004