In Site Builder, there are several ways you can use images to illustrate a point or to liven up your page by breaking the monotony of an all-text document.
On each page there is an option to "Include Graphic". If you select "Yes", you can insert a 150 pixels wide jpg file and Site Builder will add a red bar beneath the image to add a little bit of style. An example of a Graphic File is used on this page to the right of this text.
When you add this picture, you simply browse your hard drive for a JPG file with a minimum of 150 pixels in width. You must also include an alt tag for the image, which allows people with different forms of access (ex: text readers) to know what images you have on your page.
This graphic file is not movable, but if you want to change it at a later date you can simply upload a new file over your old one and change the alt tag.
If you would like to insert images at another point in the page, you can do so by placing the cursor at the beginning of the line you want your image on and using the Insert Image icon . This icon will open up a dialog box, you can then browse your computer to find the image you wish to upload.
Once the image is uploaded, you can change its dimensions. By default, the image has a locked aspect ratio, but if you want to warp the image you can simply click on the "lock" image to unlock the aspect ratio.
You can also add a black border to the image as in the example to the left. Entering a number will give you a border of however many pixels you specify. If left empty, this value is 0.
Hspace and Vspace are used to create horizontal and vertical space around your image. We find that 5 pixels of space at the top and bottom of the image (Vertical) and Left and Right of the image (Horizontal) works well. If left empty, these values are 0 by default.
Finally, the image's alignment can be set using the "align property" function. This will place the image on your page and arrange it within the text. The main ones you will be concerned with will be:
- Left - This will place the picture on the left side of the screen and the text will flow around it.
- Abs Middle - This will position the middle of the image in line with the middle of the text. This is useful for our next topic of Icons and buttons.
- Right - This will place the picture on the right side of the screen and the text will flow around it
- Bottom - This will place the bottom of the image on the line with the text. This is also the default option if no alignment is specified.
Each of these options can be used to position your picture as you see fit. The dialog box shows you a picture of what your image will look like, and some "dummy" text to show how it will interact with the text. It may take some trial and error to get exactly what you want.
Icons, buttons and linked graphics
Icons or small images placed within the text are good sometimes for adding a little extra illustration, as for example in this article. The icon for the Insert Picture button is just one way you can use icons. You can also use icon images as buttons, linking them to other pages.
It may be slightly confusing to say icons are a separate topic from inserting images. An icon is just like any other inserted image, and is simply different in where and how you use it.
Icons are often inserted in the middle of a line of text. To do this we simply place the cursor where we want to insert the image, and follow the general steps for inserting an image. Then, depending on how the image is shaped, we usually set its alignment properties to "Abs Middle". This will place the image so that the middle of the picture is lined up with the middle of the text. If an image is too big we may get a little extra space on the top and bottom of the line of text.
To link an icon, button or any other image to a page, we simply click on the the image and then use the Insert/Edit link button . We then can link it as though it were text.
You should be sparing with your images, and double check how they appear on your final page. The images should help the text, not hinder it. A cluttered page is much worse than an all-text page.