ESD Website Tutorial 1:Basic Editing

Please login to our NEW website:www.estacada.k12.or.us

1

1) Go to your school website and log in at the top of the page

2

Finding Your Login:

2) Log in with the same password that you use to

log into your work computer

For training purposes, we will switch to the classic toolbar

3

Click on down arrow to open preferences

Switch to classic

Your toolbar will appear after you log in. This toolbar is for editing purposes.

Tip: If you do not see this toolbar, make sure that you are logging into your school website and web page that you are assigned to. If you still have

trouble, please contact I.T.4

1) To edit your page, go to:Advanced >> Switch to Design Mode

5

2) Hover your cursor over the red box around the info you would like to edit until the pencil option appears. Click on the pencil to edit.

Tip: The red boxes you see while in design mode are called portlets. You can also review the history of that portlet, minimize the portlet so it is not visible to users or delete the portlet. More on deleting later.

Once you go into design mode,

your edit tools will appear

Hover your cursor over the icons

and a description of their functions

will come up

6

7

Adding links and emails

2) While in design mode, click the link button. The Hyperlink Manager will appear. To add a link to a website, select the Hyperlink tab. To insert a link to an email address, select the E-mail tab

8

Website address (URL)Link Text (What you want others to see)

Target: Set to “New Window”, so that the link opens in a new window and user can easily return to your page.

Tooltip is required. It is a description of your link for users who may have software that reads websites to them

INSERTING LINKS

INSERTING EMAIL ADDRESSESEmail address

Link Text (What you want others to see)

9

ADDING IMAGES Go into design mode (Advanced >>Switch to Design Mode) and select the Image Manager icon

Find your photo in the Image Manager. If you do not have an image uploaded, click on the button to upload images.

Tip: Please note that there are individual files for users. This helps keep clutter down and helps users find their own images easily. If you do not have a folder, right click over the folders and create on with your name on it.You only need to do this once.

10After you upload your image, you must go to the

“properties” tab to add more information

You can customize the size of the photo. You can also simply click and drag to resize photo after you insert it.

You must insert Alt Text. This is a description of your image for users who may have software that reads websites to them

Image Alignment. Default alignment is centered. You can align your image to the right or left so that you can write text next to it

You are now ready to insert your image onto your web page 11

Making an image a linkYou can easily make an image into a link to a website or email by following similar steps as when you created a link using text. As an example, I am using our quicklink icons.

1) Select or upload the image you would like to use

2) Click on the Hyperlink Manager icon

3) Select the Hyperlink or Email tab

4) Follow the procedure for inserting a link.

12

Adding Files

13

Go into design mode (Advanced >>Switch to Design Mode) and select the Document Manager icon

Find your photo in the Image Manager. If you do not have an image uploaded, click on the button to upload images.

Please note that there are individual files for users. This helps keep clutter down and helps users find their own images easily.

TIP: It is suggested that you convert all files into PDF form before uploading. PDF files are universal to all computer operating systems. Word Docs can only be viewed with Microsoft software.

Tooltip is required. It is a description of your link for users who may have software that reads websites to them

You are ready to insert your document

Set the “target” or file to open in a new window.

14

Adding a new content space pageGo to Page Properties>>Add New Page>>Content Space Page.

This is a basic blank page. This is the standard page you will be most likely to create.

Tip: Never create a Discussion Forum Page. They are difficult to moderate and you may get unwanted or inappropriate posts.

15

1) Add a title to the page

2) Click on blue arrow to fill in html code version of your title

3) Verify page owner, change if needed

4) Create page

1) Add content to page

2) Verify page owner, change if needed

3) If you choose, you may schedule a release date and expiry date. If you choose a follow up task, you can choose for the page to archive, review or move.

When you are ready to publish, hit publish. Verify Yes to complete this action

Adding External Link Page

16

1) Go to Page Properties>>Add New Page>>External Link Page

Press Create Page

Title your page. Click blue arrow to create HTML version of your title

Type or paste the website address you would like to link to

Select Page Type

Select to open the external link page to open in a new window

Managing Sub Pages

17

1) Go to Page Properties>>Manage Sup-pagesFrom here you can choose to either update the page status or page or page order. To manage page order, simply click and drag into desired order. For this demonstration, we are going to archive a page.

2) Select the page you would like to archive. Press the Archive button. (Alternately you can choose to hide the section. It will still show up to you when you edit, but not to viewers of the website)

3) Select OK to verify that you want to archive the page.

Un-Archiving Subpages

18

1) Go to Page Properties>>Archived Sub-pages

DO NOT click the x to delete. More on deletions in the next slide

2) Select the box of the page that you would like to un-archive. Click on the Un-Archive button

3) Select OK to verify

Deleting Pages

19

It is not recommended that you delete pages, but rather archive or hide them instead. Once you delete an item or page, it can not be retrieved by anyone. Think carefully before deleting.

20

More Tutorials Coming SoonFor more customer support, visit SharpSchool’s

CustomerNet support page.

http://customernet.sharpschool.com