Compound Pages

A page may contain other pages. This chapter uses an example to illustrate such design.

Layout Design

Page layout design is an art. The example presented here is by no means for teaching art. It is just to show one technique to do page layout using table element.

Set Page Parts Using Table

Suppose we want our page to have a title on the top part, under the top part, left side is a tree view for navigation; right side is for contents.
 

We may use a table element to layout these 3 parts of the page.
 
Set the table's width and height to 100% so that it fills the whole page:

Remove the table header:

 

Merge the two cells in the first row:

Remove table border:

 

We are done creating the 3 parts of the page. We may give the 3 parts contents and styles according to our art design and creation. Below is a simple example.

Before we do any editing, let's give the table's styleName property a value, say, pagelayout, so that our editing to the table will not affect other tables we may add to the page in the future.


Top page part

Le's set "styleName" property of the table cell for top page part so that the styles for it will not be shared by other table cells:

Use center-alignment:

Add an image and set a gradient background color:

Left page part

Add a tree view to the left part of the page for page navigation.

Our design is that when a visitor click a tree view item, a corresponding web page is displayed on the right side.

Right page part

We want to use this part of the page to show contents. We want to maximize its width. We may set its width to "100%" to maximize it.
Click  to edit the column:

Before we do editing, give a value to styleName first so that our editing will not be applied to other columns:

Set width to 100%:

Embed page via IFrame element

An IFrame element can be used to embed a web page. Add an IFrame element to the right side. Set its width to 100% to make fill the right side of the page:

Set verticalAlign of the left side to top so that the tree view will be top-aligned:

Suppose we designed a page named homepage.html, we may set it to the src property of the IFrame element:


Note that you need to click the border of the iframe element to select it.

Create page navigations

By our design, when a visitor clicks a tree view item, we want to display a corresponding web page on the right part of the page. We use one example to show this can be done.
First, we need to give the iframe element a name as the page navigation destination.

Suppose when tree view item "Mexico' is clicked, a web page named mexico.html is displayed in the iframe element. Create a hyperlink in the tree view item.

Set hyperlink to mexico.html and set target to the name of the iframe:

Let's publish the page and view it in a web browser:

Click "Mexico", the corresponding appears in the right part of the page:

Get Embedded Page Address

On publishing your web pages, you may want to send page addresses to your friends to let them visit your web pages.
For a single page, you may copy PageURL property and send it to your friends:


 
For a page embedded in another page, things are a little bit complicated.

Suppose you modified mexico.html and you want a page address to show mexico.html inside the compound page:

PageURL does not meet such requirements. The PageURL for the compound page will display "Welcome to my home page". The PageURL for mexico.html will display "My trip to Mexico" without top part and left part. 
The fullUrl of the iframe element gives the page address for such situation:

 

To get desired FullUrl value for an embedded web page, set the page name to src property:

You may copy the value of fullUrl and send it to your friends.
After getting fullUrl value, do not forget to set src property back to the web page for initial display of the compound page.