contribute tutorials - uploading a file to your website
Before you inserting images to your website, ask yourself the following question.
- Have I made my image the correct size in an image editing program and 'saved it for the web'?
If the answer to this question is no, chances are, you are going to make your visitors experience to your website less than spectacular. This is vital. Also, your website is only so wide. Please ask us how many pixels wide your images should be. (A pixel is one dot on your screen. Chances are, the maximum number of pixels you have to work with is no more than 600 pixels, and most images shouldn't be larger than around 250px wide)
Now you can insert your image.
- Before you can edit a web page, you need to log on, then surf to the page you want to change (just like you do when you're using a normal browser like Internet Explorer)
- Once you're on the page you want to change, click the Edit Page icon.
- You are now in edit mode. You will notice that you do not have access to the entire page, just what's inside the blue boxes. You only have access to the editable regions of the website, and as such, cannot destroy the integrity of the overall structure of the website.
- Place your cursor in the position where you want to add the image.
- To insert your image, click the IMAGE button in the tool bar.
- If the image is already on your website somewhere else (or we have uploaded it on the server for you already) - choose the From website option. Choose the image you want to insert (it will be in the images folder and you can see previews of the images) then click OK.
If the image is on your computer and you want to insert the image in to a page and upload it at the same time - choose the From My Computer option. Choose the image then click Select.
different ways to position the image on a web page
- Centre the image on the page - Use the centre tool like you'd centre words in Microsoft Word
- Have your image sit to the right hand side of a paragraph of text, and have the text wrap around the image - put your cursor at the very start of the paragraph of text you want your image to sit inside of. Insert your image as per the instructions above. Click on the image (so there's a blue line around it). Then right click on the image, choose image properties from the sub-menu. Change the Alignment setting to Right. (You'll see a tiny display of what this will look like).
Right now, the text and image will be butted right up against each other. We need a gap between the image and the text. Make the Horizontal and Vertical padding approx. 5px. Adjust to your taste, but this is usually enough.
- Have your image sit to the left hand side of a paragraph of text, and have the text wrap around the image - as above, but change the Alignment setting to Left.
|