Using Included Files
One of the best ways for designers to utilize JSP is to include pages. What this means is that you can create a few templates that contain the design for an entire Web site. By doing this, you can make a single change to a single page, and instantly the whole Web site is affected.
For example, you can use a single file to represent all of the information in the head: the <TITLE> tag, the <BODY> tag, and all the navigation elements. This file can be called header.jsp, and can be included in all pages. By doing the same for the bottom of the page, you can have a simple footer that represents your entire Web site. Figure 3 shows this concept.
Figure 3 You can use a single header and a single footer file for every page.
Here is the code for a simple header.jsp file:
<%-- begin header --%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Welcome to the site!</title> </head> <body bgcolor="#FFFFFF">
A simple footer.jsp code might look like this:
<%-- begin footer --%> </body> </html>
Place both header.jsp and footer.jsp in the root directory of your Web site. Now, any page can use the following code to incorporate this design:
<%@include file="/header.jsp" %>
Page content goes here:
<%@include file="/footer.jsp" %>
The <%@include%> tag is the JSP include directive that will grab the contents of the file specified and include them your page. There are other methods to include files in your JSP pages, but this page is good because you can share variables between the included pages and the calling page (you will discover why this is important later in the article). Now, every page of your site using these templates will no longer need to have any design elements whatsoever. In fact, by including a <STYLE> tag or linking to a stylesheet, all the content on every page can simply use the embedded styleand you are free to design!
So you want to change the site now? No problem, simply open up the header.jsp file, and go nuts! When you are done, the whole site will be changed. Change the background image or color, change the fonts, even change the navigation from top to left. It doesn't matter because all this code is right in this file.