ESD Website Tutorial 1: Basic Editing. Please login to our NEW website:

Size: px

Start display at page:

Download "ESD Website Tutorial 1: Basic Editing. Please login to our NEW website:"

Melina Hamilton
6 years ago
Views:

1 ESD Website Tutorial 1: Basic Editing Please login to our NEW website: 1

2 Finding Your Login: 1) Go to your school website and log in at the top of the page 2) Log in with the same password that you use to log into your work computer 2

3 For training purposes, we will switch to the classic toolbar Click on down arrow to open preferences Switch to classic 3

4 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

5 1) To edit your page, go to: Advanced >> Switch to Design Mode 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. 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. 5

6 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 7

8 Adding links and s 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 address, select the tab 8

INSERTING LINKS 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.

9 INSERTING LINKS 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 ADDRESSES address Link Text (What you want others to see) 9

10 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. After you upload your image, you must go to the properties tab to add more information 10

11 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 link You 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.

12 Making an image a link You can easily make an image into a link to a website or 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 tab 4) Follow the procedure for inserting a link. 12

Adding Files Go into design mode (Advanced >>Switch to Design Mode) and select the Document Manager icon Set the target or file to open in a new window. Tooltip is required.

13 Adding Files Go into design mode (Advanced >>Switch to Design Mode) and select the Document Manager icon Set the target or file to open in a new window. Tooltip is required. It is a description of your link for users who may have software that reads websites to them 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. You are ready to insert your document 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. 13

14 Adding a new content space page Go 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. 14

choose, you may schedule a release date and expiry date.

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 15

16 Adding External Link Page 1) Go to Page Properties>>Add New Page>>External Link 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 Press Create Page 16

Managing Sub Pages 1) Go to Page Properties>>Manage Sup-pages From here you can choose

To manage page order, simply click and drag into desired order.

2) Select the page you would like to archive. Press the Archive button.

17 Managing Sub Pages 1) Go to Page Properties>>Manage Sup-pages From 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. 17

18 Un-Archiving Subpages 1) Go to Page Properties>>Archived Sub-pages 2) Select the box of the page that you would like to un-archive. Click on the Un-Archive button DO NOT click the x to delete. More on deletions in the next slide 3) Select OK to verify 18

19 Deleting Pages 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. 19

20 More Tutorials Coming Soon For more customer support, visit SharpSchool s CustomerNet support page. 20

Web Page Basics. FRSD Elementary Technology Workshop. February Presented by Lisa Stewart, Tammy Gianvito, and Diane Kaufmann

Web Page Basics. FRSD Elementary Technology Workshop. February Presented by Lisa Stewart, Tammy Gianvito, and Diane Kaufmann Web Page Basics FRSD Elementary Technology Workshop February 2014 Presented by Lisa Stewart, Tammy Gianvito, and Diane Kaufmann Please save this booklet for future reference. 2 P a g e Notes and Questions