Website Tutorial - Inserting Images.

Creating and Adding Images To Website Pages.
Image formating is covered here too, + A great Free Graphics Package.

Go to your "My Website" folder on your desktop and create another folder within it and name it "images".
All the images you want to use on your website should be formated "Web Ready" [more on that in a moment] sized and loaded to your "images" folder within your "My Website" folder on your desktop.

If you miss this step you will see the images on your website whilst it resides on your computer but if you ever want to publish your site to the Internet your images won't appear.

I use photoshop which has a web ready image format application built in. In essence what it does is reduce the file size of  the images without changing the size of the image or corrupting the quality.

This is important as image files can be huge and huge file sizes will make your pages slow to load.

If you have photoshop just save your images useing "Save For Web" within the Save dialog box.

If you don't have photoshop do a search on Google for "Free Web Ready Image Application" there are plenty out there but as I have never used them I can't recommend any particular one to you.

So let's asume you want to use an interesting image for the  Header that we just created in blue.

The size of the header was width: 850px ; height: 150px;

So create a graphic or photograph 850px wide and 150px high and name it header.jpg or gif or whatever the format of your image is. Then load it to the image folder you just created.

Inserting Images:

Open up your index.html file in Komposer, select the text "THIS IS MY HEADER" in your header section and hit the delete button on your keyboard. This action will delete the text.
Place your curser anywhere within the header section and click on "Insert" in your toolbar at the top of the page, then select image. The Following box will pop up:



Select "Choose File" - locate and select the image file named "header.jpg" within your "image file" within your "My Website" folder on your desktop.
Important: Make sure to fill in the "Alternate text:" with some description of your image!
This is because search engine spiders can't read images. If you do not have alternate text naming your images with some descriptive text your pages will be read by the spaiders as having great big vacant sections on your site. The same rule applies to people who have image viewing dissabled.

This is what the filled in Image Properties box should look like, except your width should be 850.



This is how my Header has changed after inserting the image.
Note you can not overwrite an image with text in Komposer or any WYSIWYG editor.
Any words you want in your Header has to be writen to the image within your image editing software before it is saved to your image folder. However you can write above or below the image if you choose.

You can write some text here this area is outside of the image area.
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: 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 Experiment to change the "Body Text" by using the following tools: following are some results you'll get: 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.

Inserting images to your body content works in the same way as inserting an image in the header.
The only difference is in placing the image and how you can wrap text around the image settings.
Right click anywhere on the inserted  image and select "Image Properties" from the drop down menu. here you can change the "Dimension" of the image. Click on "Dimension" then the "Custom" radio button make sure that "Constrain" is ticked if you want to keep the same ratios and change the size to whatever settings you wish.
In the image to the left I have changed the size from 400px to 200px.
To get the text to wrap around the image as it is here; Click on "Appearance", I selected wrap to the right, because I want the text to wrap around the image on the right hand side.
By selecting wrap to the left, my text will now wrap the image on the left hand side
I actually prefer to make a two column table and place the image on one side and the text on the other. Interspersed with rows of text that go all the way across the page. I find it gives me more control over spacing the text and holds the image in place. Floating images can end up in some wierd places on or off the page depending on what browsers are being used.
To create the table follow the same directions for creating tables that we have already covered. Instead of creating a table with one colmn , create a table with two columns and for this example 3 rows
and now lets look at the above pictures and text again, set within tables and rows.

Inserting images to your body content works in the same way as inserting an image in the header. The only difference is in placing the image and how you can wrap text around the image settings.
	Right click anywhere on the inserted  image and select "Image Properties" from the drop down menu. here you can change the "Dimension" of the image. Click on "Dimension" then the "Custom" radio button make sure that "Constrain" is ticked if you want to keep the same ratios and change the size to whatever settings you wish. In the image to the left I have changed the size from 400px to 200px. To get the text to wrap around the image as it is here; Click on "Appearance", I selected wrap to the right, because I want the text to wrap around the image on the right hand side.
By selecting wrap to the left, my text will now wrap the image on the left hand side I actually prefer to make a two column table and place the image on one side and the text on the other. Interspersed with rows of text that go all the way across the page. I find it gives me more control over spacing the text and holds the image in place. Floating images can end up in some wierd places on or off the page depending on what browsers are being used. To create the table follow the same directions for creating tables that we have already covered. Instead of creating a table with one colmn , create a table with two columns and for this example 3 rows.

It takes a bit more effort but I think it is the better option. Later when we start to add payment button images I highly recommend you place them within tables as you do not want them floating about the place when ever  different browser and screen resolutions decide to interpret their position differently.

Free Graphics Package.
I came across an interesting blog from Neil Marsh and amongs other interesting information he has a great free Graphics Package. I thought this graphics package would be very handy for everyone here to use. Therefore I contacted Neil and he has permitted me to offer the package to you here for free. Just click on the image below to go to his download page.

TIP:

To turn a split two column row into a single column row within a two column table do the following;
Right mouse click within the row on the left hand side, select  "Join with Cell To The Right" from the drop down menu.
To turn the row back to two halves; right mouse click within the row and select "Split Cells" from the drop down menu.

Go to adding links