3.9.2.4. Adding and Editing Images and Media Files

3.9.2.4.1. Images

The Insert/Edit Image button on your toolbar allows you to insert an image or edit one inserted previously.

To insert an image into the editing area, first click where you would like the image to appear, and then click the insert/edit image button.

The Insert Image dialogue box will open to the General tab where you can enter or select the image you would like to insert.

To edit existing images simply click on the existing image before clicking the Insert/Edit Image button and apply the following instructions to the existing image.

General Tab:

The first thing to do is enter or select your Image URL:

If you know the URL for your image type it into the text field to the right of the first box on this tab called Image URL: For external links, include the correct prefix (eg. http://).
To link to an image previously uploaded to your site (or one that you want to upload and link to), click on the small browse icon to the right of the Image URL: text field and the image manager will open.

To link to one of the images displayed in the image manager, select it by clicking on the thumbnail of the image.

To upload a new image, click on Upload in the top toolbar of the image manager and the upload dialogue box will open allowing you to type in an image filename or browse on your computer to find an image file.

Once you have entered or located your image, click the Upload button.

When your image has finished uploading, close the upload image dialogue box, select your uploaded image by clicking on it (as above).

You will be returned to the General tab of the insert image dialogue box where you can continue to format your image.

The image you have selected will appear in the preview box at the bottom of this tab area. You have a number of additional options here as well including,

Adding an Image Description: to your image by typing it into the text field provided (on right).

Adding a Title: to your image by typing it into the text field provided (on right).

Appearance Tab:

Once you have selected or entered your image URL, and added a title and description, you have a number of other options for editing your image under the other tabs in this area of the editor.

Switch to the Appearance tab by clicking on it at the top of the Insert/edit Image dialogue box.

Alignment: This option allows you to select the alignment you want for your image from the drop down menu to the right of the Alignment: text field. The preview pane on the right (with the image of the tree in it) will show you how the various alignment choices will affect the way your image lines up with your text.

Dimensions (in pixels): here you can enter the size of your image into the text fields provided. Enter image sizes in the order of width by height.

Constrain Proportions: If you want your image to maintain its aspect ratio (the ratio of width to height) whenever you resize it, make sure you check the Constrain Proportions check box directly below your dimensions.

Vertical Space (in pixels): entering a number into this field inserts white space above your image. The preview pane shows how it will effect the way your image displays.

Horizontal Space (in pixels): entering a number into this field inserts white space to the left of your image. The preview pane shows how your image will be affected.

Border (in pixels): entering a number into this field will create a border of that many pixels wide around your image. Again, the preview pane shows the effect of your edits.

Style: This field will automatically display any style parameters you have entered above, (border etc.), or you can type in CSS styles directly if you are familiar with CSS.

Advanced Tab:

Once you have finished editing the appearance of your image, there are a few more things you may choose to do with it.

Switch to the Advanced tab by clicking on it at the top of the Insert/edit Image dialogue box.

There are two main areas in the Advanced tab: Swap Image and Miscellaneous.

The first of these allows you to create an interesting effect on your website by displaying multiple images in one location on your page with the cursor action of the site visitor triggering a change from one image to another.

The second area of this tab contains some HTML and CSS properties that allow you to further define your images and will typically be used by individuals with some design experience.

1. Alternative image: if you wish to use the alternative image function, first check the checkbox below the Swap Image heading to activate this option.

For mouse over: if you wish to enter or select an image that will appear when a visitors passes their mouse (or cursor) over the original image, enter the image URL in the text field, or click on the small browse icon to open the image manager. Follow the same steps for selecting or uploading an image that were described under the General tab of the Insert/Edit Image area.

For Mouse out: if you wish to enter or select an image that will appear when a visitors passes their mouse (or cursor) off or away from the original image (or the mouse over image), enter the image URL in the text field, or click on the small browse icon to open the image manager. Follow the same steps for selecting or uploading an image that were described under the General tab of the Insert/Edit Image area above.

Note: You may choose to re-select your original image as the For mouse out: image. This means that a visitor to your webpage would see the original image when the page loads, the alternative image when they pass their mouse over the original image, and then the original image would return once they pass their mouse away from the area of the image.

2. Miscellaneous: These are some miscellaneous HTML and CSS properties that allow you to further define your images. If you do not have web design experience, we recommend that you leave these options blank.

Once you have finished entering the information on all tabs, click [Insert] at the bottom left of any tab to return to editing screen.

3.9.2.4.2. Media Files

The Insert/Edit Embedded Media button allows you to add various media files to the pages of your website.

To insert a media file into your page, first click where you would like the media file to be placed, and then click the Insert/Edit Embedded Media button.

The Insert/edit embedded media dialogue box will open to the General tab where you can enter or select the media file you would like to insert. Note:To edit existing image files simply click on the item before clicking the button and apply the following instructions to the existing media file.

GENERAL TAB:

The first thing to do is select the type of media file you would like to embed in your page from the drop down menu to the right of the word Type:
Then, if you know the URL for your medial file type it into the text field to the right of the File/URL: field. For external links, include the correct prefix (eg. http://).
To link to a file previously uploaded to your site (or upload one), click on the small browse icon and the image manager will open.
Follow the same process for uploading media files as you did to upload images above.
Once you have selected or uploaded your media file, you can also determine its size by entering dimensions (in pixels) in the Dimensions: field.
If you want your media file to display with a fixed aspect ratio (the ratio of width to height) whenever you resize it, make sure you check the Constrain Proportions check box directly below your dimensions.

ADVANCED TAB:

You can edit a number of items that will affect the way your media file is displayed or played on your website.

Once you have finished entering or uploading your media file, and have entered any additional information you require on the General tab, switch to the Advanced tab by clicking on it at the top of the Insert/edit embedded media dialogue box.

There are two main areas on this tab.
1. The top area (Advanced) allows you to set some additional options for your media file.

Id: you may enter an Id for your media file by typing into the text field to the right.
Name: you can enter a name for your media file by typing into the text field to the right.
Align: from the drop down menu to the right of the word Align, you can select whether you would like your media file to display with alignment to the top, right, bottom, or left.
Background: You can also select a background colour for your media file. To do so,
- Click on the small browse icon to the right of the Background text field and a colour palette will open.

- Click on the colour you wish to select for your background. You can select from any of the three available tabs which each display the colours in a different type of palette.
- Click [Apply] and your media file will appear with the selected colour in the background.
V-Space: (in pixels) entering a number into this field inserts white space above your media file when it displays on your site.
H-Space: (in pixels) entering a number into this field inserts white space to the left of your media file when it displays on your site.

2. The lower area of the Advanced tab (Flash options) applies only to Flash files and allows you to define a number of additional options for your Flash movies and animations.

Quality: this setting allows you to select from a range of quality options including:
- High: emphasizes image quality over speed of loading and playback.
- Low: emphasizes speed of loading and playback over image quality.
- Autohigh: emphasizes playback speed and appearance equally at first but sacrifices appearance for playback speed if necessary.
- Autolow: emphasizes speed at first but improves appearance whenever possible.
- Best: this is the highest image quality setting (and therefore the slowest to load and playback).
Scale: this setting defines how the application is placed within your browser window and allows you to select from various scaling options; including,
- Showall: makes the entire Flash content visible in the specified area without distortion, while maintaining the original aspect ratio of the application. Borders can appear on two sides of the application.
- Noborder: scales the Flash content to fill the specified area, without distortion but possibly with some cropping, while maintaining the original aspect ratio of the application.
- Exactfit: makes the entire Flash content visible in the specified area without trying to preserve the original aspect ratio. Distortion can occur.
- Noscale: means that no specific scaling option has been selected so the entire Flash content will be visible as defined (w x h)
WMode: this setting will determine whether any flash elements will appear in front of or behind other elements on a page. A good example is html drop down menus that drop down over a flash movie. If you set the wmode to transparent, then the drop down menus will disappear behind the flash. You need to set wmode to opaque for the drop down menus to appear in front of the flash.
SAlign: this setting will align the area your flash animation plays in with respect to the rest of your page. Select your preferred alignment from the drop down list provided.
Auto play: if you check this box, your flash file will begin to play automatically when a visitor clicks on it.
Loop: if you check this box, your animation will loop continuously. If it is left unchecked, the file will play once and stop.
Show menu: if you check this box, the media player control menu will show below your animation on your page. If you leave this option unchecked, the menu will not be visible on the screen.
SWLiveConnect: if you check this checkbox it will tell the browser to automatically start Java when loading your flash file into the site. Since starting Java greatly increases the time it takes to start a SWF file (flash animation); check this box only when necessary.
Base: you may choose to enter the version of Flash that your file will use by entering it into this text field. (Typically left blank)
FlashVars: This setting allows you to pass variables into a flash movie at the root level. If the flash file has been programmed to act on the specified variables, it will - otherwise, the variable will not affect the flash file. (Typically left blank)

Once you have finished entering the desired information in both tabs in the Insert/Edit Embedded Media area, click [Insert] at the bottom left of either tab to insert the media file as you have defined it.