JSP Tutorial - Styling the Page

In a previous page we built a very simple interactive jsp page. It was very simple,but it worked. Now lets tackle something a little more useful - accessing information in a database.

I'm assuming that you've got access to Oracle XE and have installed the scott/tiger schema, but it should work equally well with your own database: you just need to make the appropriate substitutions.

Being a lazy programmer (I think that's a good thing by the way, see the excellent blog by the lazy DBA for an explanation) I'm going to try an re-create the example application I built in my little Portal tutorial.

Let's start at the top.

Create a new Project in JDeveloper called Demo.

Create a new jsp page called demo.jsp (I prefer to keep urls in lower case as much as possible, but you don't have to).

Change page title to "Demo".

For completeness sake we can add a logo. To do this, create a new folder called "img" in your Demo project folder under the public_html directory. Copy your logo, our use my logo.png, into this folder. A useful tip is not to use a jpg file format for logos - that file format can lead to a loss in quality of the image which can make your logo appear blotchy. As a logo is usually quite small you shouldn't need to worry about file size.

It's better to use stylesheets to manage things like decoration - that way you can edit the stylesheet and all your pages will pick up the new look. So lets do that.

Click on the File / New in JDeveloper and click on the HTML section under the Web Tier heading. Choose CSS File and click Ok and name it "demo.css". Oracle helpfully pre-populates this for you. You can accept this, delete it or edit it as you choose. We're going to add a new css entry for our page banner, so we can call it page_banner. Here's the code to add:

div.page_banner
{
  background-image: url('../img/logo.png');
  background-repeat: no-repeat;
  height: 64px;
  text-indent: 110px;
}

This assumes a logo size of 96 pixels wide and 64 high. Adjust for your own logo dimensions.

Now we can add a reference to this to our jsp page. In the head of the html page, below the page title, add this:

    <link href="css/demo.css" rel="stylesheet" media="screen">

In the body of the page, add this:

    <div class="page_banner">
      <h1>Tutorial</h1>
    </div>

It's not perfect, but it'll do for now. In the real world you'll need to spend time getting your text to align with the logo neatly, but we won't hang around for that just now. Lets look at adding some content.