SPC Educational Technology
SPC Home SPC Search SPC Questions SPC Help
Hot Topics Bar
Reusable Learning Objects Video Online ANGEL 7 Tutorials
Phone (727) 394-6118  Fax (727) 394-6193 Home Page Instructor Resources Training Central Trends In Technology Completed Projects Contact Info
Training Home
ANGEL Tutorials
ANGEL FAQs
ANGEL Tutorial Title
  Home   Breadcrumb Arrow   Using the Built-in HTML Editor   Breadcrumb Arrow  Adding Images
Tutorials

Adding Images

Adding Images Information

Adding images to your web page using the built-in HTML editor in ANGEL is easy. The WYSIWYG (what you see is what you get) editor allows you to create web pages without having to know HTML. The Fast!page HTML Editor is available wherever a text area is found within ANGEL. The editor is available for both faculty and students. It is found in many places within ANGEL including the email tool and discussion forums. This tutorial will focus on how to add images to your web pages.


Printable Version: Print out an exact copy of the Adding Images tutorial.
View Demonstration: View a movie of the screens and cursor movement of the Adding Images tutorial.

1. Click on the HTML Editor Link to start creating a simple web page. The image below is from a email message.

HTML Link
HTML Link

2. The HTML Editor will appear in a new page. To begin your web page, just start typing inside the text area.

HTML Editor Window
HTML Editor Window

3. Place your cursor in the location you want to insert the image and click the Insert Image icon.

Image Icon
Image Icon

4. The Image Settings window will appear. Click the Upload Image button (located at the bottom of the Images Settings screen).

Upload Button
Upload Button

5. The Upload Image window will appear. Click the Browse button. A Choose file dialog box will appear on the screen. Locate and select the image you want to insert and click the Open button. Click the Upload button.

Upload Image Window
Upload Image Window

6. Select the uploaded image from the image preview frame by click on the image. You know the image is selected because it will be framed by a dark black line.

Selected Image
Selected Image

7. Type an alternate text-based description in the Alternative Text text box. This step is important for accessibility.

Alt Text
Alt Text

8. Select a setting from the Alignment drop-down menu to adjust how the picture will be viewed within a body of text. By default, the image will be displayed on its own line, without text wrapping around it. If you want the text to wrap around the image, choose either left or right alignment.

Image Alignment
Image Alignment

9. Type a numerical value in the Border field to add a black border around the image and specify the thickness of the border. The border of hyperlinked images will appear in the browser’s default hyperlink color (often blue or purple for visited links). NOTE - This is optional.

Border
Border

10. Click the OK button.

Click OK
Click OK

11. The image will appear in the HTML Editor.

Image Appears
Image Appears

12. You can manipulate the images once they are in the HTML Editor. You need to select the image by clicking on it.

Image Selected in HTML Editor
Image Selected in HTML Editor

13. You can add some space between the image and the words by placing values in the H Space or V Space text boxes. The H Space is the horizontal space around the image and the V Space is the vertical space around the image.

Add Space
Adding Space

14. You can also change the alignment of the image. Using a Left or Right will wrap the text around the image.

Wrap Text
Wrap Text

15. Click Accept Changes.

Accept Button
Click Accept Changes


Related Topics: