How To Insert Images

Transcript

Hi, and welcome to another Sunburnt video tutorial. In this video we're going to show you how to insert images into your web pages.

Here we are at the demo server, and what we're going to do is add a logo to our new sponsors page. We've already logged in, so all you need to do is click on the 'edit this page' link, which will load the editor. To insert an image, position the cursor where you would like the image and click the 'Insert Image' button which is a little mountain in a picture frame.

First we need to click on the browse button to choose the image file from our computer. The best formats to use for the web are JPEGs for photos and PNGs for logos. Once you've selected the image you want to insert click on the 'Open' button and the image will be sent to your server. When the ball has stopped bouncing you will see a preview of the image and you can either accept it as it is or resize it using the options in the dialog box.

To resize the image simply enter a new width in pixels. The correct height will be automatically calculated. You can also experiment with the different image alignments, however we generally recommend that you keep it simple and leave this blank. If absolutely necessary, you can use a table to accurately position your images. Click OK when you're happy with the image and it is inserted it into the page.

Once the image has been inserted, you can still centre it with the 'Centre justify' button and if you need to resize it again you can right click to go back to the image properties dialog. You can delete the image just like you would any other text by pressing the delete key, but we don't want to do that so I'll press ctrl-z for undo.

Let's save the page now and have a look at the result. We now have our logo on the sponsors page!

Thanks for watching this Sunburnt video tutorial, and have fun inserting images into your web pages!