Back to Yen 9 Knowledge Base
How do I Use Kompozer?
In this section we will cover using Kompozer to create web pages. Specifically how to:
Advice on storing your files locally
Type text into a document.
Save a document (as a web page).
Place photographs (or other graphics) in or on a web page.
Change the way text looks.
Creating simple menus.
Creating links to other sites.
Publishing your web pages.
Storing Your Files Locally
Common practice (and wisdom) dictate that you store the files for your web site in at least two places. The first place you store them is on your local computer and the second place to store them is on the Yen 9 server (just another computer but in our network center). Normal practice would have you divide where you store graphic files, audio files and html files. We are making the assumption that you will only have a few of each file types and so we will suggest that you put them all together. In order to do this create a folder (directory) someplace where you can easily find it again and give it a name like "My Web Site Docs" or "Web Site" or "Web Site John Doe." Name it something that is logical to you. We will refer to this place as your local directory in the rest of this document.
Typing Text Into a Document
(If you have not yet installed Kompozer, you need to do that now and then come back.)
Windows users should double click on Kompozer and when it opens you will see the main Kompozer work area with a mostly blank screen. It should look something like this:
In the blank portion of the screen type in "Hello World" (without the quotation marks).
Save Your Document (As a Web Page)
Then click on the save icon. The first time you save a web page a box will pop up like the following:
Type in a name like "My Hello World Test Program" (without the quotes) or some other name of your choosing. Click OK.
When the save file box pops up you should navigate to where you are storing your web pages locally and then press save.
Congratulations you have just created your first web page !
To see your web page, minimize Kompozer and navigate to the folder (directory) where you saved your document and double click on the file. It should open in the browser that you normally use and should look something like this:
Or like this:
Now stand up take a bow. You have created a web page!
Add Photographs to Your Web Pages
Before you add photographs to your web page you need to crop and resize them to make them suitable for placing on the web. If you have not done so yet, go to the section of the knowledge base entitled "Use Irfanview to make photos ok for the web." After you learn those simple tasks you can come back here.
The easiest ways to add photographs to your web page is to drag and drop them. To do this resize the window that Kompozer is running in and then outside of the window navigate your way to a place where you have a digital photo that has already been resized for use on the web. Drag and drop that photo into Kompozer. Then using the justification icons:
and move your photo to the left, the center or the right of your page.
Save your page, navigate to the file and double click on it again. Now it should look something like this:
Of course yours will have your photo on it.
Change The Way Your Text Looks
To change the way your text looks, you first highlight the text you want to change. It this case our goal will be to change:
Hello World
into
Hello World
First highlight both words and then click on Format in the menu bar. A secondary menu should drop down that will look something like this:
Click on Font, then scroll down and click on: Comic Sans MS. Your text should now look like:
Hello World
Now highlight the "H" and click on the menu bar item that has a large "B" on it.
Your text should look like this now:
Hello World
Do the same thing with the "W" and your text should now look like this:
Hello World
Now highlight the "ello" portion of Hello. With that highlighted click on the black square on the tool bar that looks like:
and then choose the color as shown below:
Press OK and your hello world text should now look like this:
Hello World
Now highlight the "orld" part of World and repeat the process above but this time choose a dark blue from the color picker. Your text should now look like this:
Hello World
Now highlight both words and copy them (Ctrl-C or Edit | Copy ). Click your mouse just after the "d" in Hello World and hit the enter key once. Now paste what you copied (Ctrl-V or Edit | Paste). Again position your mouse just after the "d" in Hello World and hit the enter key once. Again paste the contents of the clipboard. You should now see something like this:
Hello World
Hello World
Hello World
Highlight the second Hello World and center it by clicking on the center text option shown in the following justification icons:
Now do the same thing with the last Hello World but make it left justified. Your page should now look like this:
Hello World
Hello World
Hello World
Save your work and take a look. I can't see what you've done, but I'm sure it is worthy of an "A"At this point in time I would encourage you to play with Kompozer. Add more text, try different fonts and styles and see what you can do. This is the end of the "in-scope" help from Yen 9, but it may be the beginning of a lot of knowledge you will acquire. Have fun and don't be afraid - you are not going to break anything here!
Creating a Simple Menu
The next two sections deal with creating links. In the first case we will create links to your own pages. These links are often called menus. Links to other people's pages, often called links or external links.
Lets assume that your web site will have five pages:
A home page (always saved as index.html)
A page with your resume on it (called resume.html)
A page with some of your favorite photos on it (called photos.html)
A page about your family (called family.html) and lastly
A page about your philosophy of life called (philosophy.html)
Before we create a menu for all of this, lets quickly create each of the five pages. Click on File | New and we will get a new blank file.
Type on it "this will be my home page" and then save it as index.html. Open another new file and this time type "this is where my resume will be found" and save this file as resume.html. Follow this same pattern for photos.html, family.html and philosophy.html.
(Generally speaking it is best to stick to lower case for filenames that will be used on a web server. You can make file names more readable by using dashes and underscores. For example resume-john-doe.html or resume_john_doe.html. Don't leave spaces in file names that will be used on the web.)
Now to create our menu, we will create a set of links that go to each of our pages and we will place those links in each page. (There are many more elaborate and maintainable ways to do this but those methods are beyond the scope of the knowledge base.)
Start with the index.html document. Open it by clicking on File | Open and navigating and selecting the file or if it is already open it may be displayed as one of the tabs just above the window where text is placed. Once you have the index.html document open in Kompozer move the cursor in front of the first line of text and then hit the enter key a few times in order to shift the text down the page a little.
Now note the row of Kompozer icons shown as:
Click on the icon that says "Link". A window will pop up called Link Properties. It will look like:
It has a whole bunch more stuff on the screen, but we won't be using that. We will be using the Link Text and the Link Locations fields only.
In the Link Text field type the word "Home" (without quotation marks) and then in the Link Location type "index.html" (without quotation marks) then click OK. You should see something like this:
Home
Move the cursor after the link called "Home" and then hit the space bar four times. Now click on Link again and this time add "My Resume" and "resume.html". Click OK. Add four spaces and then repeat the process until you have links for all five of your pages. ("My Favorite Photos" > photos.html , "About My Family" > family.html and lastly "My Philosophy of Life" > philosophy.html. When you are done it should look like this:
Home My Resume My Favorite Photos About My Family My Philosophy of Life
Highlight the whole menu starting from the "H" in Home to the "e" in Life and then click on the justification icon to center the menu. Now we have a fully functioning menu. It should look something like this.
Now highlight the whole menu and copy it to the clipboard. Open (if they are not already) each of our five web pages and paste the menu at the top of each page. Save them all, navigate to where the files are stored locally and then click on the index.html file. Try it out - click on each menu item and it should take you to each of the web pages in turn. If you get an error perhaps you made a typo - it's easy to do.
Creating Links to Other Sites
Creating links to other sites is easy. By creating "external" links you can share the web sites that you find interesting with the rest of the world. For example suppose you are writing about the concept of Delta Stories and where to find them. You might write the following on one of your pages:
Delta Stories are a type of short stories that are purported to have strong growth and healing qualities. You can read about them on the Delta Stories web site at: http://deltastories.org. One source of Delta Stories is at Gentle Place Publishing.
Embedded in the above there are two kinds of links. The first one is an open link where the URL (web address) is shown as both part of your text and as the link address. The second link is hidden. If you "mouse over" the text "Gentle Place Publishing" you should see "http://gentleplace.com" in the lower left hand corner of your browser. If you click on it, your browser will take you to the Gentle Place Publishing web site.
There are two ways to create such links. To create an open link, move your cursor to where you want the link to appear on your page, click on Link and type in the complete URL in both fields ( i.e. http://gentleplace.com or your favorite web site). Click OK.
To create a hidden link, highlight some words in the text and then click on Link. Type in the link location and click OK.
Publishing Your Web Pages
In order to publish your files you need to move them to the Yen 9 server. Kompozer makes this easy for you. To do this click on:
Edit | Publishing Site Settings
You should then see a window that looks like this:
In the field that is labeled "Site Name" type in a name you can easily remember like "My Web Site" (without quotation marks) our "John Doe Web Site At Yen 9." For the rest on the information fill it out according to the email settings that were sent to you when you first registered with Yen 9.
In the email you received there is a PDF attachment and part of it will look like this:
| Kompozer Settings: | |
| HTTP Address | http://johndoe.yen9.com |
| Publishing Server | ftp://yen9.com |
| User Name | xab1423johndoe@yen9.com |
| Password | tku98254a |
In Kompozer they should look like this:
Lastly check the small box next to Save Password.
Now you are all set up. In order to actually publish your settings click on "Publish" on the icon bar:
A window will pop up and tell up what files are being sent. It will look something like this:
Any photographs or other graphics you have in this page will automatically be moved to our server, but you must repeat the process for each html page you have created and linked. The "Publish Settings" will be the same, but a different filename will show.
After publishing each page your site should now be live. Try it out by opening your browser and typing in your HTTP address (your URL).