Tutorial:

Introduction toWebmastering with eSchoolView CMS

LAST UPDATED 7/19/21

Kellie Feramisco & Darren Grubel

WHERETO GO WHENYOU NEED HELP:

Digital Communications Tool Training Portal on the cusd.com website

eSchoolView Help

http://www.cusd.com/communications-homepage/digcommtool/

Click the Help button on the right side of the top bar when logged into your website

TABLE OF CONTENTS:

Logging In

How to Edit a Page What are Components?
-Text Window Components - Downloads Components
- Links Components

-Adding Images & Photo Gallery Components What is aWindow 2?
Questions?

School Websites Only:For information on Homepage Editing,please see the Homepage Slider & Newsfeed Tutorials

LOGGING IN

1
Go to your website.

Make sure you are typing in https://
*The S is important

3

Log in with District Credentials and Password.

2
Find the Footer.It exists on every page.

Trouble Logging in? If your district Username & Password do not work, please contact us!

• School sites: Log in from any page.
• cusd.com:Log in from YOUR department’s pages.
Click the arrow (circled below) to make Login bar appear.

For cusd.com DepartmentWebmasters: Your credentials are not tied to LDAP. UN:FirstLast (no space,Cap first letter of First & Last name)
PW:You have set this up.If you need your password changed,email KellieFeramisco@cusd.com.                               5

HOW TO EDITA PAGE

1

Click “Edit Page”

Each black bar = a separate component.This is the “Internal Name,” and YOU are the only one whom can see it.

* Keep this in mind when creating the overall look of a page or when displaying different types of info (text + PDFs +
images,etc)	7

This window should appear where you have a list ofALL components on the page.

Each black bar from your page when logged in will be on this list.

The order they are in is the order they appear on your page.

8

Once you have components on your page,you can also edit them directly:

			

Click the PENCIL Icons in the black bar of that component.You will be taken directly inside the component to edit it.

9

WHAT ARE COMPONENTS?

Component Types:	Internal Name:	Component Title:

Allow you to add various types of content on your page

Most common:Text Window, Downloads, Links,Photo Gallery

Only the editor can see this label

Used for labeling your components so you can easily identify them in a list

Displays as a “Subheader” on your page

“Show Public Title as a bar” checkbox can be checked to underline your “Subheader”

WHAT ARE COMPONENTS?

1

This button lets you create a NEW component.

2

Click the Type drop-down menu to select the component you want to use.

3

Internal Name:ONLY EDITER SEES. Helps with labeling.

5
Click “Add Component:” This will add this new component to the

bottom of your components list.

4
Component Title:Used for subheaders on your page.Seen by all visitors.This can be left blank if you do not need a subheader for that component.

1

Once you’ve saved your component,it will appear at the bottom of your component list.

You can drag your component anywhere on the list. Confused?Watch this video

3

Be sure to click the “Save” button once you’ve selected the width.

2
Choose the width of the

component.100% = the full width of the webpage.

To edit the content of your component, click the green Edit button.

Most common:

• 75% + 25% (or vice versa) = ¾ width next to ¼ width
• 50% + 50% = ½ and ½ • 33% + 33% + 33% = 3
columns of equal width side by side

		

	After clicking Edit,you will be taken inside the component.

This appears on the webpage

Want to underline your component header? Click this checkbox.

Tip:It can be helpful to create a hierarchy on your webpage.

• PageTitle (this is auto generated at the top of your page;if you need to change it,email KellieFeramisco@cusd.com) • Section 1:Component HeaderWITH underline
• Section 1a:Component HeaderWITHOUT underline (implies this section still related to“section 1”)

• Section 1b: Component with NO Header/Title (implies this info has to do with whichever title/section it is under • Repeat hierarchy for Section 2,etc.

REFER TOTHE ADDING IMAGES TUTORIAL OR TEXT WINDOW COMPONENTS TUTORIAL FOR MORE DETAILS BEYOND THE BASICS

TEXTWINDOW COMPONENTS

TEXT WINDOWS

When to Use:To add text to your page.

How to Use:

1 PastingText:If copying & pasting text from another source, a box like the one below will pop up. ALWAYS select “Clean” so that the webpage formatting/font remains consistent.This will strip away any links and you will have to relink them using the hyperlinking icon.

2

Hyperlinking:Check the“Open in new tab” checkbox if linking to a website outside of your website. Hyperlinking emails is the only exception to this rule.

DO NOT use the Upload Files button inside a text window

BasicView of inside a Text Window Component:

Text Windows Components
	
	Tutorial.

Used for adding single photos to text.
	See Uploading Photos & Photo GalleriesTutorial

		for more.

Used for making a text component “collapsible”
		
	SeeTextWindows
			
	ComponentsTutorial
		
	for more

For more details regarding Text Window components, please see the

REFER TOTHE HOW TO ADD A PDF OR DOWNLOAD TUTORIAL FOR MORE DETAILS BEYOND THE BASICS

DOWNLOADS COMPONENTS

DOWNLOADS

01

COMPONENTS

02	03

Used for all PDFs /	Creating RTFs	DO NOT

Word docs (when necessary)

• Ensures we are ADA compliant

• Place your PDFs inside a Text Window component

MOST COMMON MISTAKES

You cannot add a PDF document to a Text Window Component.

Forget to click the RTF button while creating the PDF?

Instead, you must add a new component and change the type to Download

Follow the easy steps to fix this

To add your PDFs, click AddA New Download

1
Download Title:

Write the title you want displayed for the PDF.

*OPTIONAL*

Date Visible & Date Expires:If you are wanting the PDF to disappear or appear on certain dates, you can choose them here.

2
File:Choose your file

SeeAdding a PDF or Download Tutorial
	
	for more.

*OPTIONAL*

Description:You can leave this blank. If you do want to add a description, the information will appear below the DownloadTitle link on your webpage.

*OPTIONAL*

Want to display your PDF as an image/icon instead of a text link?You must save as an image FIRST.

*OPTIONAL*

Adding more than one PDF? Click the Save and New button to save your current upload and quickly upload another PDF.

from your computer here. AVOID	Make sure it is a PDF.

IMPORTANT: Leave this box checked!
(It should be by default.) This is required for ADA compliance.

3
Save: Click

Save button.

After clicking Save:Your PDFs with their RTF appear in a list.

To change the order in which they appear,you can hold and drag each rectangle row to where you want it to be.

23

If you forgot to make your PDF an RTF:

		

1

After clicking the title of the PDF on the previous screen: scroll down and find the “Create RTFVersion” button.

It will create an RTF for you.And will appear on the top on your list of Downloads.***Any other change you made to your document will not save after clicking this RTF button.

2

Your RTF will appear at the top of the list.If you want to move it under your
PDF file, drag it to change the order.	24

LINKS COMPONENTS

LINKS COMPONENTS

• Used for adding a list of links to external or internal pages • Display Link in New Window checkbox
• Using images as buttons for your links • Avoid:
• Avoid using the description box

• Can you just hyperlink inside a text window? • YES!
• Make sure you change the Target to New Window so it opens in a new tab! • The only exception is when hyperlinking e-mail addresses

1

To add your Links, click AddA New Link

		
6
	
If you are wanting the PDF to disappear or appear on certain dates, you can choose them here.

2

Title your Link anything you want.This will appear on the page as the link to click on.

3
Paste the URL to the webpage you are trying to link to.

7
Making your PDF an image/icon on the page instead of a text link?

You can use an image from

4	Description of link.
NOT necessary. Only use if your link needs major description.

online/one of your own as the icon or button for your link.See Adding a PDF or DownloadTutorial to apply the same rules.

5
If this link will take users OUT of this website, click the checkbox to display the

If using an image as your link, please DELETE your Link Title so it is not repetitive.

link in new window (this will make it open in a new tab).

8
Click Save.

ADDING IMAGES & PHOTO GALLERY COMPONENTS

ADDING IMAGES

Single images:	Multiple images:	Photo Galleries:

Embedded image options in aText Window Component (NOT inside the text box)

Upload your images into the text box of aTextWindow Component

Make sure you provide AltText for all images to remainADA compliant

When used for multiple photos as a slideshow

OR can be used to show single image and provides enlarge arrows

SINGLE IMAGE = EMBEDDED IMAGES IN ATEXTWINDOW COMPONENT

 Embedding images does not take away storage space on the website server!This makes it the preferred method.  When to use:
 You want your image to appear with text

Options
 You can place your text in the text box and then add your image to the dropdown section labeled Embedded Image

 Image will always appear on top of or next to text,but NEVER under text

like).
 You want an image to appear by itself and you can place it wherever on your page (you can do this as many times as you

 You can leave the text area blank and skip down to the Embedded Image Options

Sier a Outdoor Schoo’s Staff p ge .
 Forrgreat exampleslon howatoshave multiple single photos, each in their own component,please see any of

1 Click the arrow for “Embedded Image
Options”

(this is where you will add your single image)

must
	FIRST change the px #,THEN re-
	
add the photo
	from your computer.

2
FIRST

3

This is auto checked.Leave as is.

4	Choose file from computer.

**Make sure file name has no period (.) in the file title.**

Change the size of your photo here:
• >150 px = small icons • 200 px = medium icon • 400 px = ~ half the
component (medium image)

• 600 -800 px = full width of component (HUGE image)

5	Choose alignment.
**If there was text in the text box above, this will determine the alignment in relation to the text.

6
MUST addAlternative Text or else you will not be able to move on and photo will not save.

• • •

Left = image left,text to right of image Right = image right, text to left of image
Center = image on its own line,text is
	
underneath.

NOTE:
If you want to change the size of the photo, you

7
Save to add the photo.

Black bar = 12/12 full width component

200 px

Black bar = 12/12 full width component

400 px

Black bar = 12/12 full width component

800 px

To delete a photo and have no image

Then click save.The image will be removed.

MULTIPLE SINGLE IMAGES = IMAGES INSIDEATEXT WINDOW COMPONENT’S TEXT BOX

 This DOES take away storage space on the website’s server.Only recommended if absolutely necessary.

 When to use:

 You want your images to appear with text and have all info live in one component.

 Use the image upload icon in your text box

2

Navigate to your photo file and select it in the list.

3
Click Open.

1

After clicking on the image icon, this window will pop up.Click in“Drop image”
box.

4
Image will appear in your text box. Click on image in text box to bring up this menu.

5 Use this icon to select alignment – left, center or right – to position photo in
text box.

6 Use this icon if you want to add a caption
to your image.

7
Use this icon if you

want to add a hyperlink to your image.

8
REQUIRED

AddAlternative Text here.

9

Click Save to save all changes.

This is a brief description of the image and MUST
	
	be added to be ADA compliant.

PHOTO GALLERY COMPONENT

 Photo Galleries do not take away storage space on the website server!This makes it the preferred method.

 When to use:

 You want to have a slideshow of images on your page that auto scroll through

 You want several images in a row

 You want an image of a flyer that when clicked,the flyer is enlarged

 NOTE: Make sure you choose photos all in the same orientation

 All photos are vertical or horizontal,but not a mixture of both

1

Select Photo Gallery as Type

2

To add photo, select Browse. Choose your photos from your computer.

Only .png, .jpg, .tiff files allowed

3
REQUIRED

AddAlternative Text for each photo.

4

Title / Description are optional.They will add a black description box on the photo.

5

Click UPLOAD to upload your photos.

6
Click Gallery Options to

make changes.

10 Displays control buttons

(forward/backward)

7
Enter dates for gallery to

show/expire, if desired.

8	Select Display Mode:

11
Displays Thumbnails.

Always auto checked, but NOT recommended.

• Fotorama Gallery:slideshow • LightboxThumbnails:
thumbnails of all images in a grid (depending on how many images present).Examples on following pages.

9
Select Rotation & Timing options.

12
Allows users to click a button to enlarge their view

of the photo. (You can do this with image versions of PDF flyers, as long as the PDF & RTF version is also available on the page.)

Example:See the flyer on the Boundary Study page

13
Select Transition Effect options.

14
Click Save.

FOTORAMA GALLERY

 Automatically takes up the full width of your component.

 You cannot change the size of the photos, BUT you can change the size of your component using the columns method.

 Title and Description show at the bottom of each photo.

LIGHTBOX THUMBNAILS GALLERY

 Automatically takes up the full width of your component.

 You cannot change the size of the photos,BUT you can change the size of your component using the columns method.

 Title show at bottom of each photo.

 Users can click on the image to enlarge it.

WHAT IS A WINDOW 2?

AWindow 2 is a static column to the right side of the page next the dynamic navigation menu.

	
Window 1
		
Window 2

			

49

• A Window 2 can be used for any components,but works best for Resources like:
• Links, Downloads,PDFs, Schedules, Academic Links, etc.

• The Window 2 will remain on the right side for the entire page,so the rest of your content in Window 1 will not be able to move into that section.

1

Click Add Window.

50

4

3
2	Now you can add any components
A tab forWindow 2 will	to this window separately. appear.                             Switch between Window 1 & 2 by
clicking on the tabs.

If you decide you want to delete Window 2,make sure there are no components that you want to keep.Then click the Delete Window button.

		

HOW IS A COMPONENT DIFFERENT FROMAWINDOW 2?

01

A Component allows you to use the full page, dividing the page into percentages however you want. You are not tied to only 2 sections.

02

The width of the webpage is 100% total.

03

Note: It may make take time to play with and reorganize the order of your components to fit the page the way you like.

52

This component takes up the full EXAMPLE	width of the page (100%).

These components take up 33% of the page each.

 When you create a component, you can change how much of the webpage width you want it to take up. A full horizontal line across must add up to 100%.

 To change it,you can choose your value in the dropdown when you first create the component,OR later when viewing the list from the Edit page.

= 100%

= 100%

= 100%

33%

 You may only edit one at a

time.
	Be sure to click the blue
	
Save button next to each
		
component every time you
		
change a value.

+ 33%	= 100%

+ 33%

QUESTIONS?

QUESTIONS? CONTACT US!

Kellie Feramisco

kellieferamisco@cusd.com

x79093

Darren Grubel

darrengrubel@cusd.com

x79030

56