Lessons.Ch8. working with images – adding images to your pages

Video Instruction

video is not yet available for this lesson

Text Instruction

Adding images to your page is pretty straight forward, it usually goes something like this:

1. import your images into a folder of your website
2. open your page
3. open the folder where your imported image is located
4. select and drag the image from the import folder, onto the page OR
5. click the 'Insert' menu >> Picture >> from file.. browse to the import folder and select the image to add it to your page

Dragging the image onto the page, or using the Insert menu will pretty much the same, it's your preference. Some folks have an easier time using the Insert menu, as the drag and drop requires a bit more dexterity with the mouse.

Once the image is added to your page, there's a couple of steps you may want to take to finish the job.

• positioning the image ( float left, right or none )
• remove or style the borders on the image

Positioning an image using floats

When you add an image to your page it will not automatically float, so the text wraps around it.. the image will sit there on the page and the text will format above or below, but not along side.. here's an example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed est lorem, ullamcorper sit amet, fringilla porttitor, convallis eget, dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed est lorem, ullamcorper sit amet, fringilla porttitor, convallis eget, dolor.

Notice the text does flow along side the image, it's above and below leaving alot of white space…

1. double click on the image to open the 'Picture Properties'

   

2. click on the Appearance tab

   

3. then select on of the float options.. 'Left' or 'Right' to see how the image appears with the text on the page

   

4. when selecting the 'Right' float, the image will allow the text below it to float to the left while the image floats to the right.
   

   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed est lorem, ullamcorper sit amet, fringilla porttitor, convallis eget, dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed est lorem, ullamcorper sit amet, fringilla porttitor, convallis eget, dolor.

5. you may want to drag the image to a different location, to wrap the text in the first paragraph as well, just select the image with your mouse and drag it to the beginning of the first word in the first paragraph so allow both paragraphs to float to the left
   
6. to get this result
   

   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed est lorem, ullamcorper sit amet, fringilla porttitor, convallis eget, dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed est lorem, ullamcorper sit amet, fringilla porttitor, convallis eget, dolor.

7. the point of this demonstration is to show that you can 'float' an image once added to your page, then move it around to find a more suitable location.
8. this is a lesson that you really need to practice and try different things out.. just knowing that you can float the image on the page to wrap the text around it
9. as a final step, add a vertical and horizontal margin to the image to add some space between the image and the text

   

10. change the 'Horizontal margin:' and 'Vertical margin:' numbering to 5 or 10 to start with

     

11. and play around with these settings until your happy with the results

Remove or style the borders on the image

You can also add or remove the border around the image.. a border may automatically be added, depending on how you have your editor and style sheet
s setup.

1. to remove the borders around the image, double click on the image to
   open the ''Picture Properties'' window

   

2. change the 'Border thickness:' to 0

   

3. to add a border, just type in a number and see how it looks.. the number you type in represents the number of pixels in thickness.