Language Club KompoZer 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 Us Questions 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) Return Insert  Image  photo_members alternate 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.