Adding Images to Your Web Pages

Adding Images to Your Web Pages SharpSchool has a new editor for editing web pages. The editor has a number of new features, one being the “Image Mana...
Author: Felicity Blake
0 downloads 1 Views 381KB Size
Adding Images to Your Web Pages SharpSchool has a new editor for editing web pages. The editor has a number of new features, one being the “Image Manager.” The Image manager allows the user to upload and insert pictures into the webpage. To add an image to a webpage login to SharpSchool and navigate to the page you wish to edit.  

**Advanced  Switch to Design Mode  Edit **PagePro pertiesCheckout and Edit Page

The process of adding images is done through the image manager. The Icon for the image manager is in the top row, button with what looks like mountains. Place your curser where you would like the image located; images can be centered or justified like text. Click on the image manager button. A dialog box will appear. Find and select the folder you wish to save your images to, if you do not have a folder click on the new folder icon at the top of the image manager box. This will allow you to create a folder for your images. Remember the image manager section is accessible by all users, please place all images in proper folders.

Once you have chosen the correct folder click the upload button. A dialog box will appear that allows you to select the image you would like to upload from your local computer. The upload process takes the images from your computer and places copies on the SharpSchool server. You can now upload multiple images at one time. Remember images used for viewing on a web page should be small in size, most times no larger than 150kb. Pictures used directly from a camera will need to be resized. (photos from cameras are typically 1-2mb) Use a program such as Photoshop to resize the image prior to uploading the SharpSchool. This website explains how to use Photoshop to optimizing images for the web: and A suggestion is to upload all your pictures at one time this will save time when creating or editing the page.

Once picture has been uploaded you will see a thumbnail of the image. From this location you can do a number of things to your image. You can insert the image, change the properties of the image and perform basic editing of the image.

In the properties dialog box you can change a number of aspects of your image. 

   

The first being Width and Height. The numbers are in pixels. (the average CRT monitor, not flat screen is 800X640 pixels , flat screens have a larger resolution) keep this in mind while sizing your image. The Boarder Width and Boarder Color around the image, framing the image may provide a more finished appearance. Alt Text and Long Description are used by accessibility readers for visually impaired. The Alt Text is what a screen reader will read. This field is required!! Image Alignment determines where the image will be placed on the page and in relation to text. IE centered, right justified, text at the top or text at bottom relative to image. Margins allow you to determine size of margins around the image.

These changes do not change the properties of the saved image, the only affect how the image will be viewed on the web page. You will need to use the Image editor to permanently change the saved image

In the Image Manager dialog box there is an Icon above the thumbnail and on the right called “Image Editor,” by clicking on this Icon your will be brought the dialog box below. This will allow you to do some basic editing of your image and then save the image. These changes will be permanently changed unlike the changes made in the properties editor. You do have an option of saving the image as a different version.

Once you have made the changes to your image, click on insert and it will be placed on your page. The image can be moved around much like text, using the justify and centering buttons on the menu bar.

If you need to change the properties of the image you can right click on the image and return to the properties dialog box.