Language ClubKompoZer

Design View

Files you will need

• Images pages Templates • • Text

Creating a Template

• Open KompoZer – View the page in Normal View

• Format Page Title and Properties– Title = Language Club

• Click on Format Page Colors and Background

– Click Background Image– Navigate to your USB drive, Language Club,

images, and select background_stripes

Save

• File Save As – template.html in your Language Club and then

Templates

Insert a Logo

• You will now be adding The Language Club’s Logo to the top of the page.

• Insert Image• Click on the and navigate to the images

folder in Language Club• Find lc_logo and add the alternate text of The

Language Club

Insert a table

• Click on Insert Table

Modify the Table

• Change the table to have the left handed column to be 143 px and right handed column to be 597 px. Click and drag the gray bar to modify the column

widths.

Modify the Table … Part II

• Merge the left columns rows to all join together. Click and select all three rows in

the left column. Click Table Join Selected Cells

Insert Navigation Buttons• Click in the left hand column• Click on Insert Image

– Navigate to the images folder within Language Club and select nav_home_blue.gif

• Click on Insert Image – Navigate to the images folder within Language Club and select

nav_about_blue.gif• Click on Insert Image

– Navigate to the images folder within Language Club and select nav_events_blue.gif

• Click on Insert Image – Navigate to the images folder within Language Club and select

nav_contact_blue.gif

Insert Bottom Navigation Links

• In the right column, third row, type in the following. (Align Center)

Home - About Us - Events - Contact UsQuestions or comments about the Web site? E-

mail the Webmaster Copyright 2010 – Language Club

To make sure that the lines are NOT double spaced, hold down the shift button and hit enter (return).

Create The Language Club Website!

• You have created a template that we will use to create all of the other pages in our website.

• VERY IMPORTANT!!! You will need to do File Save As when saving the web pages for the first time.

Home Page• Open your template.html file• Click in the top right cell.• Insert Image – hdr_welcome– Alternate Text = Welcome

Home Page• File Save As – index.html (inside the language_club folder)• In the right column, middle cell, insert a table with 2 columns

and one row. (Insert Table)• Click and select the cells, Click Format Table Cell Properties • Click on the Table Tab and select White as a background color• Click in the left cell and

Type the text – Hello! Hola! Bonjour! (center the text)ReturnInsert Image photo_membersalternate text = Photo of Members

Home Page• Type in the following text in the cell to the right of

the picture.Here is a group photo of our club members at this year’s kick-off meeting. It is never too late to join in and explore new languages and cultures from around the world!

About Us • Open the template.html file• Insert Image hdr_aboutus.gif– Alternate Text = About Us

• Save the File – File Save As about_us.html

• Save the file in the pages folder within the language_club file folder

Events• Open the template.html file• Insert Image hdr_events.gif– Alternate Text = Events

• Save the File – File Save As events.html• Save the file in the pages folder within the language_club

file folder

Contact Us • Open the template.html file• Insert Image hdr_contactus.gif– Alternate Text = Contact Us

• Save the File – File Save As contact_us.html

• Save the file in the pages folder within the language_club file folder

Insert Hyperlinks• Create hyperlinks from the index.html file to

each of the other files.• Double click on the button that you want to

add a hyperlink to.»Click on Link Browse for the page

that you want to link to. In this particular case, you will want to go to the index.html

Insert Hyperlinks• Just incase your buttons do not work, you

want to also create the text along the bottom of your page to be hyperlinks.

• Highlight (select) the word. • Click on Insert Link• Browse for the file that you want to link to.

Insert Hyperlinks

• Create hyperlinks from all of the other files to each other. This will take some time, but all of the links should work so that users are not frustrated.