Lesson 1: Design your Web page

Before you begin to write code, carefully plan both the overall appearance of the page and the way you might divide the page into self-contained regions.
The first step in creating any Web page is to sketch the finished product. To create the sketch, you must answer a few basic questions:
  • What does the page need to accomplish?
  • What elements does the page need to do this work?
  • How should you arrange those elements to make using the page as easy as possible?
  • Do you want to add graphics, such as logos, photos, decorative borders, or other purely visual elements, such as colored backgrounds, to make the page more appealing?
The target Web page that you will build in this tutorial is simple: a logon screen with ID and password fields and a Submit button.
The sketch shows fields for User name and Password, and a Submit button
When you use EGL Rich UI to design a page, each element in the page must be inside a container called a box. A box can contain multiple elements, including other boxes. On the target Web page, you can see the following page elements:
  • Text labels
  • Text input fields
  • Buttons and other controls (such as a Submit button)
Arrows point out the elements in the target page
You use boxes to help control the layout of the page. There are few rules for how to design with boxes; most needs have multiple solutions, some of them equally "correct." You typically use boxes to align elements on the page. You need to use boxes because Rich UI has the following limitations:
  • No tab characters. You cannot use tabs to align elements inside a box.
  • No newline characters. You cannot artificially break a row of elements inside a box.
  • No trailing spaces. You cannot pad text fields with spaces.

The following illustrations show several valid solutions to the problem of laying out the target page.

The target page is divided into three horizontal boxes
The labels are in one box, the input fields in a second, and the Submit button in a third
The page is divided into two vertical boxes

Chart the page structure

A useful intermediate step between the sketch and the code is the construction of a sort of genealogical chart that shows all the boxes and elements for your page in hierarchical order. Again, this is something you can draw on a piece of scratch paper or a marker board.

In keeping with the idea of a family tree, two metaphors are typically used in describing such charts:
  • The tree. In this case, the tree is upside down, with the root on top and leaves on the bottom.
  • The family. When an element on the screen is contained within another element, the container is the parent and the element inside the container is the child.

All such charts begin with a box that encloses all the other boxes and elements. This box is the root of the tree and represents the browser window.

Draw a box for each container and element on the page:
  • Each element has exactly one parent, except for the root element, which has none.
  • An element can have siblings, that is, other elements with the same parent.
  • An element can have one or more children.
  • An element with no children is called a leaf (going back to the tree metaphor).
For example, here is the second version of the target page layout in family tree form.
The picture shows an organization chart with the overall container at the top and labels, fields, and buttons at the bottom.

You may encounter the term Document Object Model (DOM) in connection with such a family tree. The DOM uses standard terms to name each element in an HTML or XML page, organizes the elements in the same kind of hierarchical chart, and provides an interface for changing such a page. The charts that you just created use the same organizational principles as the DOM.

In EGL Rich UI, each element on the page is called a widget. You will learn about widgets in the next lesson.

Lesson checkpoint

You have now sketched several different approaches to coding the target Web page.
In this lesson, you learned the following principles:
  • A Rich UI Web page is composed of elements.
  • Elements must be enclosed by containers.
  • The containers must be in a hierarchical order, starting with the root.
  • The root element is the browser window.

Feedback