Some components of the AccuWeb CMS provide a WYSIWYG (What You See Is What
You Get) editor) editor to give you more flexibility and control over the the look
and feel of your website. This tool is similar to to the formatting tools used in word
processors such as Microsoft Word.
Inserting an image
1. Place the cursor at the point in the text where you want the image to appear.
2. Click Insert/Edit Image (7). The image properties dialogue appears.
3. Select the image using one of the following methods:
a) If the image you want to use is already on the server, enter the URL or click
Browse Server (8) to locate the image.
b) If the image you want to use is on your computer, click the Upload (9)
tab. Click Browse to locate the image on your computer.
Then click “Send to sever”. Wait for the pop-up that confirms your image
has been uploaded.
4. (Optional, but recommended) In the Alternative Text field, enter the text to display
if the user hovers over the image, the image doesn’t load, or the user has images
turned off in their browser.
5. If desired, modify the image properties, or edit the image, as described below.
6. Click OK to insert the image into your text.
Modifying image properties
With the image properties dialogue open (see above), you can also make
any of the following adjustments.
• If you don’t want to use the image’s actual size, set the Width and Height as desired.
This does not modify the original image and will not affect the image load time.
(Note: If you want a smaller image that will load more quickly, use the image editor
to resize it as described below.)
• Click the Lock Ratio (10) icon to toggle between to keeping the proportions of the
original image intact or modifying image proportions using Width and Height.
• Click the Reset Size (11) icon to revert to the image’s original size and proportions.
• Create a border by specifying the width in the Border field.
• Control the amount of whitespace between the top or bottom edge of the image and
other page elements by entering the whitespace width in the HSpace field.
• Control the amount of whitespace between the left or right edge of the image and
other page elements by entering the whitespace width in the VSpace field.
• Choose the image alignment option from the Align drop-down menu.
❖ Left – aligns image to the left of the text, enables text wrapping on
the right.
❖ Abs Bottom – bottom of image aligned with the bottom of the
largest element on the same line.
❖ Abs Middle – middle of image set to the middle of the largest element in
the same line
❖ Baseline – bottom of image aligned with the bottom of the first line of text.
❖ Bottom – aligns image to the bottom of the text.
❖ Middle – aligns image in the middle of the text
❖ Right – aligns image to the right of the text, enables text wrapping on the left.
❖ Text Top – the top of the image set to the top of the largest text on the same line.
❖ Top – the top of the image is set to the top of the largest element on the same line.
❖ Click Edit Image (12) to edit the actual image. Instructions for this are
provided below.