Investigate Web Design Using Kompozer

Kompozer
Objectives
1. Be able to setup a website with 3 pages using Kompozer including text,

images, headings, lists, links

2. Be able to create stylesheets using CSS

Activity
1. Setup an empty site Make a new folder in your user area called Who Am I Website 2. Start using Kompozer Software Open up the free Kompozer software 3. Setup 4 empty webpages Make 4 empty webpages by choosing FILE SAVE AS a. index.html b. who_am_I.html c. where_do_i_come_from.html d. what_do_i_like.html NOTICE THAT: EACH FILENAME HAS NO SPACES EACH FILENAME ENDS WITH .HTML THE WEBPAGES ARE EMPTY AT THE MOMENT ALL THE PAGES SHOULD BE SAVED IN YOUR FOLDER TO LOOK LIKE THIS

4. Add text to the index webpage Choose FILE OPEN Open index.html 1

Investigate Web Design Using Kompozer

Add the title Who Am I Website followed by the text This a website all about me and what I like. This is a website to help me learn how to be a web designer using the free Kompozer software that runs on Windows, Mac or Linux.

THE TITLE AND THE PARAGRAPH SHOULD BE IN PLAIN TEXT. WE WILL ADD COLOURS, FANCY FONTS AND LAYOUTS LATER. Your screen should look like this

5. Add text to the other webpages Open who_am_I.html where_do_i_come_from.html what_do_i_like.html Add the banner title Who Am I Website followed by simple text for each webpage. MAKE SURE YOU SAVE, SAVE, SAVE

Investigate Web Design Using Kompozer

6. Looking at some html All webpages are built of html. HTML is formatting code that tells the browser how to display titles, images, lists, tables and links. Have a look at the html for each webpage by clicking on the source tab at the bottom.

7. Changing some html Go into Source view and look for the html tags <title> and </title> The title appears in the top browser bar. Change the title from index to the filename. Eg. Change Index` to Who Am I? 8. Adding Heading 1 to the Banner Title Open Index.html Go into Normal view and select the banner title Who Am I Website. Go to the heading bar and choose Heading 1.

Investigate Web Design Using Kompozer

Open the other pages and add change the banner title to heading 1 9. Adding Heading 2 to the Sub Heading Select the subheading text for each webpage and apply Heading 2.

YOU CAN ALSO CHANGE HEADINGS IN SOURCE VIEW BY CHANGING THE HTML DIRECTLY. TRY CHAN GING <h1> to <h2> TO SEE WHAT HAPPENS.

Investigate Web Design Using Kompozer

10. Adding images or pictures Take a picture of yourself or find A SUITABLE CREATIVE COMMONS PICTURE ON AN ATTRIBUTION LICENSE Save it into the folder where your webpages are. Go to INSERT IMAGE

Then Select Directory Enter Alternate Text. Eg Panda

Investigate Web Design Using Kompozer

SAVE, SAVE, SAVE Add images to each site. Dont forget to attribute. 11.Adding a Navbar of Links Go to Index.htm Insert a table that is 1 row by 4 columns.

Investigate Web Design Using Kompozer

Add text for each page you will link to in each table box or cell.

Select the text in each box. Right click and Create Link.

Browse until you have found the file you want the link to jump to. Eg. Index.htm Use this method to build links for all each page from each cell in the nav bar. 7

Investigate Web Design Using Kompozer

12.Copy the navbar table and paste it to the other pages

SAVE, SAVE, SAVE

Press F5 to preview your page in Internet Explorer. Chrome or Firefox 13. Adding layers to move images and text around the screen Select the text or image you want to move. Choose the layer button in the format toolbar. Use the cross arrow to move the image or text around the screen

Investigate Web Design Using Kompozer 14. More Areas to Explore Adding html snippets to show Youtube videos in a webpage Adding CSS to make stylesheets to make pages look professional, consistent and appealing