How to create your own header

To make your own website header to suit your website’s content, first of all, you have to prepare your own image to replace the original design of the template.

This tutorial does not cover the topic of preparing the image. Most professionals use Adobe Photoshop, ACDSee or even Paint in Windows to do this, but there are other alternatives such as GIMP. In this manual, we are only looking at how to use the built in system editor.

Prepare your own images with the extension of jpg or gif, and In this tutorial, we use an image sized to 950 pixels wide and 150 pixel high (like the picture here).

Notice that the right part of picture has an empty space with no complicated detail. We will use this space for our website’s name and slogan.

1. While you are at the Website Header section in the control panel,

• (1) Click your mouse on the original picture. You will see all the html tags displayed at the bottom of the editor box.
• (2) Click the mouse on the tag <TABLE> to select TABLE. Notice that the small square anchor points will appear around the table indicated that iyou selected.
• (3) Click on the word “Remove Tag” on the right side below the editor to remove the whole table.

2. Next we are going to create a new table to replace the old one.

• (1) Click on the Insert Table button to display the popup table grids. In this example, we want our new table to have just 1 cell.
• (2) Click the mouse in the top left cell of (in the grid popup) of the table grid displayed to select how many you want. You should see a table with a dashed line appear in the editor box.

3. Next, we will set the background of the table with the image we prepared.

• (1) Click the mouse in the table to make sure we move the cursor into the table.
• (2) Click on the Edit Table/Cell button.
• (3) The Select “Edit Table” command appears in the pull down list. The Table Properties dialog box  will appear on the screen. On the top section of the dialog box, there are 3 tabs.
• (4) Click the mouse on the Properties tab to select that tab.
• (5) Click on the Image button.

4. Set the Background Image dialog box

• (1) Click on the button at the far right of the blank Image Source box. Here you can display where the image is now. There will be another dialog box with the title of Asset manager.
• (2) Click on the Browse button to go to the image file we prepared.

5. Another dialog box with the title Choose file appears. At this point, go to the folder contained your image file.

• (1) Click on the image file to select.
• (2) Click on the Open button and you’ll be back to the Asset manger box again.
• (3) Click on the Upload button to upload the file to the server. (This step may take some time depending on the image file size and internet connection.) When finished
• (4) Click OK.

6. You are back at the Background Image box again.

• (1) Click OK to go back to the Table Properties box. Next, you must specify the width and height of table to fit the prepared image’s dimension.
• (2) Click on the AutoFit tab.
• (3) Type the value of 950 in the text box next to Fixed table width: item and the value of 150 in the text box next to Fixed table height: item.
• (4) Then click OK.

7. At this point you should have a table with your prepared image as the background. Next, we will put another table with 1 column and 2 rows in the first table. This new table is used to keep the name and slogan of our website.

• (1) Click your mouse on the picture to make sure that we move the cursor into that table.
• (2) Click on the Insert Table button. When the popup table grids appear…
• (3) move the mouse down across 2 cells of the table grids the cells will be highlighted. Click the mouse to select.

8. Notice that there is another dash-line table with 2 rows appearing in the picture.

• (1) Click the mouse in the first row of the new table to move the cursor into it.
• (2) Click on the Edit Table/Cell button.
• (3) Choose the Edit Table command. When the Table Properties dialog box appears, specify the width of 550 pixel by….
• (4) filling 550 in the text box of Fixed table width: item. Then click the mouse on the Properties tab.
• (5) Choose the value “right” from the drop down list of Alignment: item at the top of the box.
• (6) Click OK.

9. The new table is now narrower and located at the right hand side.

• (1) Type the name you want to use in the first row of the new table, then drag mouse to highlight the name.
• (2) Click mouse on Font size list to choose the desired font size.

10. Change the color of the name by

• (1) clicking the mouse on the Foreground color button. When the color palette appears…
• (2) click on More colors… this command opens the Colors box.
• (3) To adjust the box size to be a little bigger, put the mouse at the right bottom edge of the box and diagonally drag the mouse down to extend the box size so it shows buttons at the foot of the box.
• (4) Click on the desired color you want
• (5) then click OK.

11. Click mouse on the text to remove highlight. Now you can see that the color of your website’s name has been changed.

• (1) Move the scroll bar below the editor to the right.
• (2) Now type the slogan of your website in second row of the new created table, adjust the size and color of text like you just did with your website’s name. Once you finish….
• (3) click the option “Save and use template”
• (4) then click Submit button and we have finished.