Make your own website for free
Steps 22-34 > Chose image
editor > Re-size image > Load image into Kompozer
& Filezilla > Web Location
Before Starting:
1. You need a web hosting service <> for example, IX Web hosting with 24-hour help with even tiny details <> or search 'web hosting'
2. You need to register a domain name <> for example: yourwebsite.com <> and this is done at the web hosting company
3. Click images [pictures] to see larger
4. If there are words you don't understand, check wikipedia
22.
Drag the image with mouse and drop on the Photoshop icon showing on desktop
Larger image
Choose a program to resize photos:
<> Photoshop Elements $50-80 > Free trial
<> Gimpshop photo editor is a Free Download
<> IrfanView is a Free Download
The free downloads are solid programs, especially Gimp
Why do images need to be resized?
All websites use re-sized images so images fit on page and pages load fast.
Rule of thumb: you want your images approx 300 to 500 pixels wide & quality 10 Kb to 50 Kb > this will help your webpage load fast.
For example, images on this page are 300 pixels wide, with about 20 Kb quality.
23.
Larger image
(For Gimpshop instructions: See how to resize images with gimp)
1. Drag and drop image into Photoshop > here, a house picture is loaded
2. Go to File at top
3. Click: Save for Web [this is different than Save or Save-as]
4. Save-for-Web box appears ...
See next step below ...
24.
Larger image
The original image appears on left side of screen
The re-size image appears on right side of screen
Notice the original starts out 4000 wide x 3000 pixels high , and 34,000 Kb quality
Notice the re-size is the same 4000 x 3000 pixels. but it is only 1,970 Kb quality
Your objective is to resize to 300 pixels wide, and 20 Kb quality
25.
Larger image
1. Select Width 300 pixels [or whatever width you choose]
2. Notice check mark in 'Constrain Proportions' means that Photoshop automatically fills in proportional Height when a width is entered > here the Height automatically fills in 225 pixels
3. Select Medium Quality to achieve about 20 Kb quality
4. Select JEPG so image is saved in .jpg format
5. Look at Re-size progress at bottom where you can see Re-size is 19.8 Kb quality
6. After reaching target goal, click OK at top to save image >>> this will bring up the final Save Optomized box shown in next step
26.
Larger image
After re-sizing image in Photoshop, you are ready to save image as follows:
1. Save-in: desktop was selected for location
2. File name: enter title of image [internet tip: fill spaces with a dash: for example:
<> my-image <> special-bargain-2 <> houses-for-rent <> jumping-horses]
3. Save as type: the .jpg format was entered automatically by Photoshop
4. Click Save and remember where image is located [here, image is located on desktop]
28.
The image is 300 pixels wide x 225 pixels high, and about 20 Kb total size
To see actual size: Right-click image and select 'properties' -or- 'image information'
Each image is different, some look okay small, while others need to be bigger
Notice that all images on this page are 300 pixels wide and about 20 Kb quality > but you can vary your images as needed
29.
See how to resize images with gimp
The image is 300 pixels wide x 225 pixels high, and about 20 Kb total size
You can vary pixels and Kb
The key thing is how it looks on your page
Here is 75 x 56 pixels image > experiment and
find best size and quality 30.
Larger image
Drag-and-drop house image into Kompozer, and the program automatically writes the correct code <> here the image is placed in a table cell
31.
Larger image
Important detail: The image appears in Kompozer
> Since the image came from your computer, Kompozer automatically writes the 'image location' as your computer > in other words, Kompozer identifies where the image is located so the image can appear on the Kompozer screen
Next step is to load the house image into your website <> and then change the image location from your computer to your website > steps are shown below
32.
Larger image
Open Filezilla
33.
Larger image
Filezilla log-in requires specific website information available from your web hosting service
Your web hosting service will help you with the information
Here the host name is: yourwebsite.com [without http://]
Your user name will be assigned by the web hosting service
Your password is established on the web hosting control panel
Your hosting service will guide you through the steps, and they understand novices
34.
Larger image
Images are put into folder titled: images with an 's'
Drag and drop house image into the images folder
Here is the exact web location for your images
http://yourwebsite.com/images/name-of-image.jpg
> http://yourwebsite.com ... is the web location of your website
> http://yourwebsite.com/images ... is the web location of your images
> http://yourwebsite.com/images/name-of-image.jpg ... is the web location of that image
Image icon
35.
Larger image
Now it's time to enter the web location of that image in Kompozer so the code writer can match up the image with your web location. This will finish the work on images.
1. Click mouse on house image to activate image in Kompozer
2. Click Image icon on toolbar
3. Images Property box appears
4. In Image Location enter: http://yourwebsite.com/images/name-of-image.jpg
5. Everything must be exact
36.
Larger image
This is the most important step for putting your image on the website
The actual house image is named: Jan-18-09-PS.jpg
Therefore the exact web location is: http://yourwebsite.com/images/Jan-18-09-PS.jpg
Very important detail: no spaces in the name
This is because web code requires spaces shown as: %20%
If there are spaces in the name: for example: Jan 18 09-PS.jpg
Then the web location is: http://yourwebsite.com/images/Jan%20%18%20%09-PS.jpg
With the extra numbers and percent signs, it's easy to make a typo mistake
The image location
has
to be exact or image won't show in Kompozer
> and it won't show on your website
The real-life web location for example house image is:
http://waterheatertimer.org/images/Jan-18-09-198-PS.jpg
http://waterheatertimer.org > is my website
http://waterheatertimer.org/images > is location of all images on my website
Quick test of image location : paste location into browser > if it brings up error page, then the location contains errors > if it brings up image, then it's a good location
The real-life web location for example house image is:
http://waterheatertimer.org/images/Jan-18-09-198-PS.jpg
http://waterheatertimer.org > is my website
http://waterheatertimer.org/images > is location of all images on my website
Quick test of image location : paste location into browser > if it brings up error page, then the location contains errors > if it brings up image, then it's a good location
> here's what happens when image location has error: after you enter image location, the image disappears in Kompozer. What to do??? Check that your internet connection is turned on. Load image again in Filezilla > make sure it's put in images folder > and then check Image Location for common mistakes:
> a capital letter instead of lower case
> missing a period, or a comma where period should be
> word misspelled
> missing the forward slash or dash
> extra space before-or-after slash or dash
> here's a tricky one > some images are not .jpg >> they are .JEPG or .gif or .PNG
> to find exact format, drag-n-drop image into browser and look at URL
> missing last or first letter, for example: .jp instead of .jpg or ttp:// instead of http://
> forget to include the folder location: /images
> forget %20% rule for spaces
> sometimes Kompozer stops receiving data, especially if more than 1 Kompozer page is open > save work, restart Kompozer again > don't forget to save work frequently while working and back up all files on your flash memory or external hard drive!!
