How to Add an Image to a Page
In this exercise you will learn how to insert an image into your web page.
Online Training Instructions
- Your should still be logged into the web-training website. For this module you will be editing the web page you worked on earlier.
- Expand the classroom folder, find your web page, select it and click edit.
- Make sure you are editing the draft version and not the current version. (See step 4 note in the example provided below)
- Go to the Main Content Section and in the Cascade editor, place your cursor in front of the line of text that reads: <<<<<Insert your new image here, use the 585 size. This line of text is located beneath the 'My Uploaded Image' heading.
- Follow steps 6-18 in the example provided below. Be sure to insert the image that is 585 pixels wide.
- Click 'Update Draft' do not click on "Send to Workflow."
- Once you've completed your edits, return to the instructions and click on the link 'Continue Online Editing - Create a Link to a Document' located at the end of the instructions web page.
- Website content owner has identified you as a web content editor to the webteam
- Faculty/Staff Network ID - obtain from Division of Information Technology
- For Cascade Online training:
- Access to the web-training website
- Know how to login to a specific webpage
- Familiar with Cascade interface
How to add an image to a web page
- Log in to Cascade.
- Go to your website, if you’re not there.
- In the left pane, click on the web page that you want to add an image to.
- Click on the "Edit" tab.
Be sure that you are editing the "draft" version of your web page.
- Insert your mouse pointer in the section of the editor where you want to add your image.
- On the toolbar, look for the icon that looks like a tree.
- Hover your mouse over the "tree" icon and make sure it is labeled "Insert/Edit Image."
- Click on the "Insert/Edit Image" option.
- Make sure the "internal" radio button is selected.
- Directly beneath the radio button is the "Choose File/Image" option.
- Click [Search] and select "Browse."
- In the "Choose a File" dialog box, expand the "_uploads" folder in the left pane.
- Expand the images folder and find the image you want to insert into your webpage.
- Click on the image.
- Then click the "confirm" button.
- Add the appropriate alternate text* OR check the "This is a decorative image" option.
* Every time you insert an image in a web page, you should ask yourself this question: What is the function is this image adding to this web page? If it is to make the page "pretty", you should check "This is a decorative image." If the image helps expand the content of the web page, then use the alternative text to let disabled users know what that function is for the web page. To learn more, visit our alternative text webpage.
- Click the "Insert" button.
- You should now see you image inserted into your web page.
- Once all edits and updates have been made, select "Send to Workflow" or "Update Draft".