Insert an Image into a Web Page


After completing this topic, you will be able to insert an image into a web page.


Steps:

  1. Select the location in the web page where you want to insert an image.

     

    Click to the left of the text Page Setup dialog... in the first paragraph.

    Step 1

  2. Insert an image before the Page Setup dialog text.

     

    Click the Image button.

    Step 2

  3. Browse to the location where the image is stored in the Library. The image is stored in the Page Setup images package.

     

    Click the Browse button.

    Step 3

  4. You can insert an image from a package stored in the Library, from your computer, or from a web server.

     

    You will insert an image from a package in the Library.

    Step 4

  5. Open the package containing the image.

     

    Double-click the Page Setup images package.

    Step 5

  6. Select the Page setup icon.png file.

     

    Click the Page setup icon.png image file.

    Step 6

  7. Click the OK button.

    Step 7

  8. Notice the Page Setup image in the Preview pane.

     

    The Latin text in the preview shows how the image position and word wrap.

    Step 8

  9. Click the OK button.

    Step 9

  10. The default setting for inserted images is a baseline vertical alignment with no horizontal alignment. This means you can place an image, such as an icon, in the cursor position.

    Step 10

  11. Insert a new line above the Orientation heading.

     

    Click to the left of the Orientation heading.

    Step 11

  12. Press [Enter].

    Step 12

  13. Click in the blank line above the Orientation heading. The new blank line is formatted for an H2 heading.

     

    Use the Format list to change the format from a Heading 2 paragraph to a Normal paragraph.

     

    Click in the blank line above the Orientation heading.

    Step 13

  14. Click the Format list.

    Step 14

  15. Click the Normal list item.

    Step 15

  16. Insert the large graphic, Page Setup.png, above the Orientation heading. This image is located in the Page Setup images package.

     

    Click the Image button.

    Step 16

  17. Click the Browse button.

    Step 17

  18. Click the PageSetup.png list item.

    Step 18

  19. Click the OK button.

    Step 19

  20. For accessibility, add the alternative text Page Setup dialog box.

     

    Click in the Alternative Text field.

    Step 20

  21. Enter the desired information into the Alternative Text field. Enter

     a valid value
     e.g.
     "Page Setup dialog box"
    .

    Step 21

  22. Click the OK button.

    Step 22

  23. Point to the Page Setup dialog box graphic.

    Step 23

  24. Notice that there is no tooltip. The Alternative Text field is used for accessibility, not tooltips.

    Step 24

After completing this topic, you are able to insert an image into a web page.

Table of Contents  Start Topic