Step 2: Add elements to the template page

Open the template page (template.html). You can double click "template.html" at the Website Explorer to open it or select "template.html" and click this button to open it.

 

Drag the following image "company.png" to the template page from the Website Explorer or Windows Explorer if it has not been added to the website. This image can be found on our "Sample Template" or you can use your own image.

 

 

 

Move the image to 20 pixels from the top and 0 pixel from the left.

 

Insert a text element to the page by clicking this button . Double click the newly inserted element to open it in the Text Element Editor. Add this text "About us | Contact | Help" to the editor.

 

 

Now we are going to add hyperlink to the text. Select the text "About us" and then press this button to open the Add Hyperlink Dialog as it is shown below. We do not have any other pages yet except the index page (index.html). So we just choose "A Page or File in This Site" and select the page "index.html". Click the "OK" button to apply the settings.

 

 

The link will now be shown in default styles of the browser. We will show you how to change this later. You can add hyperlink to "Contact" and "Help" in similar ways.

 

 

Click "Save and Close" button to add the text to the page. Then resize the text element to 160 x 30 and place it at 50 pixels from the top and 740 pixels from the left. While it is still selected, right click to bring up the context menu and select "Styles" to open the Styles Dialog. Then press the "Add" button to bring up the Select Styles Dialog. We do not have the style we want so press the "New" button to bring up the CSS Style Editor to create a new CSS style.

 

   

 

Press the "Add" button at the CSS Style Editor. A style with the name "style1" will be created automatically. While it is still being selected, press the "Rename" button or "F2" to rename it to "about-us-link".

 

     

 

Click on the "Text" tab and change the values as shown below. We use the color #000000 for the link and the link will not be underlined.

 

Click on the "Elements" tab and select the options as shown below to apply the styles to links only.

 

Create another new style and rename it to "about-us-link-hover" using similar steps above. Click on the "Text" tab and set the values as shown below. We will use the color #259AB8 for the link and it will be underlined when the mouse is over it.

 

Click on the "Elements" tab and select the option as shown below to apply the styles to a link when a mouse is over it.

 

Press the "OK" button to return to the Select Styles Dialog. Select the newly created styles "about-us-link" and "about-us-link-hover" at the Select Styles Dialog. Press "OK" button to add them to the Styles Dialog. Press the "OK" button at the Styles Dialog to apply these styles to the text element.

 

 

 

The text element will now becomes:

 

Now we are going to add a navigation bar to the page. Select Insert -> Navigation Bar from the main menu or just click this button . Select "navbar78" from the Navigation Bar Templates Dialog and click "OK" button.

 

 

Select the first "Menu Item" and set the Link Properties on the right as below:

 

 

This makes the first item of the navigation bar to link to the index page. You can add links to other items in similar ways. To demonstrate adding sub-menu, select the first item "Menu Item" and click this button several times. Several sub-menu items will be added. We also do the same to the third and fourth items. The results will look like the following:

 

 

After refreshing the display pane of the navigation bar, you will see the following:

 

You can add links to the sub-menu items just like the top level items. Click the "OK" button to add this navigation bar to the page. Move it to 90 pixels from the top and 0 pixel from the left. Then resize the width to 900 pixels by dragging the right edge of the navigation bar to the right. After this, the top of the page should look like this:

 

 

Next, we will add another navigation bar at the bottom of the page which will have the same styles as the top one but only with the top level items. So we cannot just copy the navigation bar on the top here. We need to create a new one but uses the same styles as the top navigation bar. Select Insert -> Navigation Bar from the main menu or just click this button . Click "Cancel" button this time when the Navigation Bar Templates Dialog is shown. Below is what you will see after entering the Navigation Bar Dialog: You can change the name of each item to match the top navigation bar.

 

 

Then click on the "Style" tab. Press the "Use Style From Another Navbar" button. There is only one style shown as we have only one navigation bar. Select it and press the "OK" button.

 

 

The navigation bar will look like the top one but without the down arrows as there are no sub-menu items added. Press the "OK" button to add it to the page. Drag the right edge to resize the width to 900 pixels. Move it to 500 pixels from the top and 0 pixel from the left.

 

 

Insert another text element to the page by clicking this button . We are going to add a footer for copyright. Double click the inserted text element to open it in the Text Element Editor. Enter this text "Copyright © 2010 Sample. All rights reserved." or copy and paste it to the editor. Press "Save and Close" button to save this text to the page. Resize the text element to 900 x 30 and move it to 550 pixels from the top and 0 pixel from the left. Right click on this element again and select "Styles" from the context menu.

 

Press the "Add" button on the Styles Dialog. Select the style "footer-text" from the Select Styles Dialog. Then press the "OK" button to add it to the Styles Dialog.

 

     

 

While the style "footer-text" is still being selected, press the "Edit" button to open the CSS Style Editor. Change the style "Alignment" to "Center".

 

   

 

Press the "OK" button to return to the Styles Dialog. Press the "OK" button at the Styles Dialog to apply the style to the text element. After this the bottom of the page will look like this:

 

 

Select the navigation bar at the bottom of the page and the text element above.

 

 

Right click to open the context menu and select "Mark as footer". Enter the values as shown below:

 

 

These two elements will be moved to the bottom of the other elements on the pages that use this template page with a gap of 20 pixels. If a page does not have any contents. These two elements will be placed at 500 pixels from the top of the page.

 

Save the template page.