Utility jpml.org Web Site

Web Site

"Simple, Beautiful, Imageable". It's the general design rule for jpml.dalibeans.com, it also motivates jpml.org development team to produce more and more simple, beautiful and imageable creations.

This section describes how to design jpml.dalibeans.com using Jpml Web Frame technology.

Content

Design Rules

Design Rules

Before designing a web page, jpml.org requires developers to understand the rules:
  • Design With a Purpose
  • Use Web Components
  • Use Short, Clean Descriptions
  • Use Meaningful Contextual Messages

Design Conventions

Figures in Design Notes:


Design Page

Comparing with the user interface of a RIA application, home page is definitely easier to design.

The base structure of jpml.org site consists of Page, Frame, View and Component.

Design Page

The main Page contains top, menu and content Frame.
Page Structure
Sample: Top page of jpml.dalibeans.com
Codes:
<frameset rows="60,*" frameborder="NO" border="0" framespacing="0" cols="*"> <frame name="top" scrolling="NO" noresize src="top.html" > <frameset cols="200,*" frameborder="NO" border="0" framespacing="0" rows="*"> <frame name="menu" noresize src="menu.html"> <frame name="content" src="content.html"> </frameset> </frameset><noframes></noframes>


Design Frame

A Frame consists of one or more than one View
Frame Structure
Sample: Main Content Frame


Design View

In a View, Visual Component are shown to describe the contents.
View Structure
Sample: View
Codes:
<table> <tr><td> <div class="MenuBox"> Component (A) </div> </td></tr> <tr><td> <div class="MenuBox"> Component (B) </div> </td></tr> <tr><td> <div class="MenuBox"> Component (C) </div> </td></tr> </table>


Design Component

Please see more at Web Frame.