Website Tutorial - Adding A Header.

Creating and Adding A Header - Navigation Bar and Footer To Website Pages.
Text formating is covered here too.

Toolbars2

Open your index file, place your curser in the top row of your table and right mouse click.
Select "Table Cell Properties" from the drop down menu.

The following box will appear. Change the settings in the box to the same as I have set below.
note: To set the Background Color you need to click inside the color box. The "Cell Background Color" chart box [ see 2nd image below] will allow you to select the color. You can choose any color you want. Take note of the color code in case you want to repeat the same color somewhere at a later stage.
I have used #3333FF here.

header properties

Click OK.
Your table should now have a blue header like this - yours will be wider - I had to narrow mine down to fit the page:

Place your curser inside the blue header, and type - THIS IS MY HEADER then select the text.
note to select text - place your curser before the beginning of the text you want to select - hold down the "Shift" key on your keyboard and place your curser after the last letter you want to select - release the shift key and your text should be highlighted as below.

THIS IS MY HEADER

In the tool bar change Body Text to Heading 1 and the font type to Arial, select text possition to center as in the image above. Click on "Format" tab in top toolbar, Vlick on Text Color and select white from the color chart and click OK.

Your header should now look like the image below.

THIS IS MY HEADER

Now we will set the navigation bar for the page. To do this repeat teh same process as for the header on the second row but set the row hight at 40px, make it a lighter blue color and don't add any text.

THIS IS MY HEADER

Now we will create the footer by following the same process as for the navigation bar on the last row.
Your table should look like the image below.

THIS IS MY HEADER

Go and click on the "Save" icon now - it's the one that looks like a floppy disc in your toolbar at the top of the page.
Now click on the "Preview" tab at the bottom of the page or on the "Browse" icon in your toolbar to see what your page looks like in your browser. Then return to "Normal" view. You should also look at the changes made to the code by clicking on the "Source" tab at the bottom of the page.

Now let's start typing some content into the third row: Place your curser in the third row and type whatever you want. I have written some instructions here about the various ways you can format your text.

THIS IS MY HEADER

This is where I have started to type into the third row.
To indent my text, select the text and click on the green indent arrow

This is the result of using the indent text option shown above.
Now all my text will align as indented to get my text to go back to the border click on the back indent arrow.

Now my text has moved back to the border.
To create a numbered list or bullet list place curser at start of text you want to list, click on either of these: bulletlist

using 123 list, hit enter and the second number will come up automatically.
hit enter - then type again and
hit enter again -then type and
so on - Komposer keeps adding a new number for you. To stop it click on the 123 icon.

Do the same for a bulleted list
Just use the bullet icon instead of the 123 icon

Change the "Body Text" by using the following tools:
text format header

Header

Arial Bold Body Text.
Arial Body Text
Arial Body Text inclined
Arial Body Text Underlined
Arial Highlighted Body Text
Arial Bold Body Text. Larger
Arial Bold Body Text. Larger change color - go to "Format" select text color click OK.

Now save your work and take a look at your page in the browser.

Now you may want to create an exciting graphics header or use a photograph in your header or on your pages; to do that we have to learn a bit about using images on the web and how to insert them.

Our next step will be to insert images.