Internet graphics, Web design. Online Marketing for the Highlands 07711 811 670 Inverness

Images save, place & FTP.

This page is for the benefit of existing clients, and is intended as a refresher for the training that we provide clients with. This is not a complete tutorial.

Images

When editing an image to find a workable size. Only use 1 to 1 or 100% view: As you resize to test the quality, you will be viewing it exactly as it will appear in your web page. If it is unclear when you view it in a paint programme at 100%; it will be just as unclear when you put it in a web page.

Do not ever resize an image in your web page package; images should be placed, imported or pasted without any modification to height or width.

Once more if an image will not fit your web page: use an image / paint programme to resize it. Then update the web page with new file.

Tip if your page (layout) will accept an image of 400pixels wide, never use any image wider than that: and if your portrait images need to proportionally equal, then use the max width as the guide for height.

Experiment with the resize. Reduce the image to the smallest size that allows the important information in that picture to remain clear. There is little point in using a larger picture than needed to illustrate your text: the larger the image the longer your visitor will have to wait for your page to be presented.

Saving images for your website

Keep all images you are working on in a separate folder out side your website folder, as these will be work in progress they can be any size, format or quality. Never place an image in a web page from this folder!

When an image is ready for your web pages place it in your website folder, in the folder specifically for pictures.

Image Format

There are two formats you can use for web pages
.jpg or .gif
.jpg is for photographic images, bedrooms, house scenes etc…
.gif for simple flat graphics.

Image Name

Save your pictures for use in your web pages with 8 or less characters and no spaces.

myhouse.jpg is perfect
My House in the summer.jpg is to be avoided totally

Do not use any character that is not a letter or a number, do not use spaces and never use special symbols i.e. %$*!

FTP

FTP SETUP DETAILS & INFORMATION

As we discussed during your training, you will have a folder that is an exact copy of your online content: IT MUST REMAIN THAT WAY.

It may look like this

Main Folder: website

Sub Folder: ..images
Sub Folder: ..pics

File index.htm
File open.htm
File about.htm

If you are transferring a new picture that you have added, you will have to transfer the picture and the WebPages that contains that picture.

As an example the web page open was changed with the addition of a new pictire.

Log on to the internet: start your browser

The when a connection is established, start the ftp programme

Select and open the ../pics folder in both windows.

Highlight the picture file in your window then click on the arrow to send it to your internet window. Look at the log area to see the transfer happen! When complete the programme will make a sound and report transfer complete.

Now you have the picture online. (if you look at the website and then the page you will not yet be able to see the new picture: you are still looking at the old page)

You now must go up a level to the area that contains the web pages.

Click on the two dots .. at the top of your window displaying the files and folders. This will close the folder called /pics and put you to the root for you website, the area that contains your webpages.

Make sure both window are in the same area / folder

Then select open.htm and then the arrow to move it online.

When transfer complete is heard/seen. Look at your new page in your browser (you may have to refresh) and your new picture will be seen by you; and more importantly every visitor to your site.

Problem that raises it's head the most often:

I have done all that and my picture is not there; just a big empty box with a little red cross.

If the picture and page was transferred to the internet properly (as above) then the link in your page is wrong. This will happen if you place pictures in your web page from folders outside your WEBSITE folder.

As discussed: In the code of the problem page look for the image name that you can not see on the internet.
If it were open.jpg it should look like this

img src="pics/open.jpg" tells the web page where to find the picture to display. In this case it is in the folder pics/ in this web space.

If you do not see the picture on the internet. I bet it looks like this

img src="file:///C|/Documents%20and%20Settings/baby/Desktop/bike% open.jpg

This means that the web page is looking to find a picture on c drive in a folder that is inside a folder that is inside a folder called bike%

It will never find it; that path refers to a picture that is on your machine in you home an is not connected to the internet, it also has shortened the name to bike% because the name is to long. Why can you not see your new picture?

The thing that makes this problem worse is that if you test your page on your machine the picture will diplay properly and the problem will remain hidden untill you view it on line.

Remedy:

Use the code view to replace the wrong path.
Edit the webpage and delete the picture then replace it from the right folder.

As one of our clients: If you have this problem and can not manage to cure it using this guide call me, I can look at the page and talk you through repairing it.

John