Dr. Winston Prakash Ph.D. 

Netbeans Tip: Creating a CSS Based Fixed Page Layout - Part1

If you search online on "How to create CSS based layout", you will hit lots of resources to teach you how to use CSS to make your own layouts. So, in this article, I'll focus mainly on how to use different Layout Panels bundled in Netbeans Visual Web along with some HTML elements. We will be using

• HTML <div> element - Used mainly to position the containers Top, Left, Right or bottom using CSS 
• Layout Panel - This component renders a <div> element surrounding its children. You can add components to this layout in Flow Layout Mode or Grid Layout model, depending on its property panelLayout. 
• Grid Panel - This component renders a <table> element placing its children inside the <td> element. It is a very convenient and useful layout components to arrange your components in rows and columns. We will be using this panel mostly to create the Page layout.
• Group Panel - This component renders a <span> components. So a good layout for placing the components in natural grouping. The main difference between LayoutPanel and GroupPanel  is, while the former can define its own styles and apply the formatting to the components it encloses, the latter inherits most of the styling and formatting from its parent. It is nothing but <div> vs <span>.

There are two ways to create Page Layouts

• Using nested tables to arrange the children
• CSS based positioning

In this article, I will cover only CSS based layout since it is easy to design and maintain. When you design a CSS based page layout, you can think of two types of design.

• Fixed width page layout - In this type the width of the page is fixed. The page is always displayed centered in the browser.
• Fluid width page layout - Unlike fixed width, the page width is fluid, in the sense, when the width of the browser changes, the width of the page also changes. The components are fluidly repositioned based on the width of its container.

Fixed width layout is easy to design while fluid layouts are complex and more care is needed while designing to make sure the components gets rearranged elegantly when the browser width changes. In this article I will cover the steps to create a Fixed Width Page Layout

Steps to create the CSS based fixed width page layout:

Let us start with a new Visual Web Application called "FixedPageLayoutEx"

• Download and install Netbeans 6.0
• Create a Visual Web application and name it FixedPageLayoutEx
• Provide the package name as com.samples.layouts
• Rename Page1 to PageLayout1

Step1: Create the basic layout structure 

Add the following HTML to the JSP inside the <form> component. I wish we have the HTML elements as components in the palette so that we can  drag and drop it in to the designer. Unfortunately we don't have them yet in the palette, so you need to  type it in the JSP.

<div id="container">
  <div id="header">
    Header
  </div>
  <div id="leftBar">
    Left Bar
  </div>
  <div id="content">
    Main Content
  </div>
  <div id="rightBar">
    Right Bar
  </div>
  <div id="footer">
    Footer
  </div>
</div>

Step2: Create the CSS rules for layouting

• Right click on the resources folder and select New -> Other. From the New File dialog select Other -> Cacscading Style Sheet.
• Provide the Style sheet name layout
• Drag and drop Advanced -> Link component on to the designer
• Select the link component in the outline and from the property sheet, set the URL as layout.css

Add the following CSS rules to the layout.css

#container {
  margin:auto;
  width: 760px; 
  background: #ffffff;
}

#header {
  background: #DDDDDD;
}

#leftBar {
  float: left; 
  width: 150px; 
  background: #EBEBEB; 
}

#content {
  float:left;
  width:450px;
  background-color: #cdcde6;
}

#rightBar { 
  float:right; 
  width: 160px; 
  background: #EBEBEB; 
}

#footer { 
  clear:both;
  background:#DDDDDD;
} 

Give attention to the CSS properties highlighted with blue. They are responsible for placing the containers (<div>) at the correct place. The footer CSS rule has the property clear:both which gives the hint to the browser that both of its ends should be cleared (does not allow floating elements on both sides), so it is always placed beneath the other floating elements.

Deploy the application and it should look like the following

Now that we got the basic design in place, let us add our components to make the real page layout.

Step3: Add the header contents

• Drag and drop a Layout Panel component on to the header div. The Layout Panel initially has the size (128 x 128 pixels)
• After dropping the Layout Panel go to JSP and remove the content "Header" from the header <div>
• Using the Style Builder (invoke it from the "..." button in the Layout Panel property sheet) and set the height to 175px and width to 760px
  (Note the width is same as width of the container <div> as specified in the layout.css
• Set the background image of the Layout Panel  using style builder. I used the header image from one the Open Source Web Design Layout called andreas01.
• If you set the Page Layout of the Layout Panel  as GridLayout, then you can easily place other components as you place in page with Grid Layout.
  If you would rather wish to use Flow Layout then you must use other layout components to format the component placement.
• Drag and drop a Static Text on to the Layout Panel and set its text as Fixed Page Layout 1 and style the text as you wish.

Deploy the application and it should look something like

Step 4: Add Left Bar contents

Let us assume we are going to have a Navigation Bar in the left hand side. Let us keep it simple and consider the navigation bar is nothing but a list of hyperlinks.

• Drag and drop a Grid Panel component on to the leftBar div. The Grid Panel initially has the size (128 x 128 pixels). Once a component is added to the Grid Panel, the initial size is discarded.
• Remove the content Left Bar from the leftBar <div> in the JSP
• Drag and drop couple of HyperLink components on to the Grid Panel. Look at the outline and make sure all the hyperlinks are inside the Grid Panel, rearrange if needed.

Deploy the application and now it should look like this

Step 4: Add Right Bar contents

Again like Left Bar, let us keep the contents of Right Bar also simple. Let us add some text and some image.

• Drag and drop a Group Panel component on to the rightBar <div>. Like other panels, Group Panel also initially has the size (128 x 128 pixels). Once a component is added to the Group Panel, the initial size is discarded.
• Remove the content Right Bar from the rightBar <div> in the JSP
• Drag and drop a StaticText component and add some text to it. Note, you can add some HTML as text. Make sure to uncheck the escape property of the StaticText
• Add an Image component to the Group panel and set some image

Deploy the application and the result should be something like

Step5: Add the footer contents

Let us add some links to the footer panel that are aligned centered.

• Drag and drop a Group Panel component on to the footer div. 
•  Remove the content Footer from the footer <div> in the JSP
• Drag and drop few Hyperlinks and set their text
• In the property sheet of Group Panel set the separator text as "|"

Deploy and view the result

Step 6: Add contents to Main Content menu

The last is the important step where we will be putting the main contents.

• Drag and drop a Layout Panel component on to the content div. 
• Remove the content Main Content from the content <div>
• From the property sheet of Layout Panel, set the width to 100%. Now the Layout Panel should cover the entire Main Content <div>
• Set the Page Layout mode to Grid Layout for easy drag and placement of components.
• Hold the bottom resize handle of the Layout Panel and drag and resize to the Layout Panel to the maximum size your contents would occupy.

Note: If you want the main content panel to grow as per its content, then use Group Panel instead of Layout Panel. Since Group Panel does not support Grid Layout mode, you should use different Layout components to layout components in a flow layout mode.

 Deploy and view how our final Page Layout would look.

We have step through few steps to create a very simple Fixed Page Layout. Remember CSS is very powerful. With very few tweaks here and there you could create a pretty impressive Page Layout.

My recommendation is to take a look at some of the Page Layouts at the Open Source Web Design site and then create your own pretty looking web site.

Home | Résumé | Publications | Articles | Sources | Photos | Paintings | Links | Contact