Introduction to Webmasteringwith eSCHOOLVIEW CMS

LAST UPDATED 1/28/19

Leslie Ashford & Jonathan Mathis

TABLE OF CONTENTS:

Logging in

What are components

Text Windows

Download Components

Links Components

Images

Columns / Window 2

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

WHERE TO GO WHEN YOU NEED HELP:

Digital Communications Tool Training Portal on the cusd.com website

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

eSchoolView Help Click the Help button up at the top bar when logged into your website

Contact Leslie Ashford or Jonathan Mathis

LeslieAshford@cusd.com; ext: 73031JonathanMathis@cusd.com; ext: 79114

LOGGING IN

5

Go to your website.Make sure you are typing in

https://**The S is important

Find the Footer. It exists on every page. • School sites: log in from any page. • cusd.com: log in from YOUR department’s

pages.Click the arrow to make Login bar appear. Log

in with District Credentials and Password.

1

2

3

Trouble Logging in?If your district Username &

Password do not work, please contact us!

*

For cusd.com: your credentials are not tied to LDAP. UN: FirstLast (no space, Cap first letter of names)PW: you have set this up. If you need your password changed, email LeslieAshford@cusd.com

HOW TO EDIT A 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)

*

Click “Edit Page”

1

7

This window should appear where you have

a list of ALL 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

COMPONENTS

WHAT ARE COMPONENTS?

Component Types:Allow you to add various types of

content on your pageMost common: Text Component,

Downloads Component, Links Component, Images, Photo Galleries

Internal Name: Only the editor can see this label

Used for labeling your list of components so you can easily

identify them in a list

Component Headers:Displays on your page as a “Subheader” on your page

Underline Component Header checkbox can be checked to underline your “Subheader”

This button lets you create a NEW component.

Click “Add Component”: This component you just made will add to the bottom of your components list.

12

Choose component type to change which type of component you are

wanting to use.

Choose how much of the webpage this component will take up.

• Full width: 12/12 columns• 2 components side by side much add up to

12 total.

Most common:• 8/12 + 4/12 (or vis versa) = ¾ a width

next to 1/4th width• 6/12 + 6/12 = half + half• 4/12 + 4/12 + 4/12 = 3 columns next

to each other

Internal Name: ONLY EDITER SEES. Helps with labeling.

Public Name or Component Header: Used for subheads on your page. Seen by all visitors. This is allows to be left blank if you do not need a

title for that component.

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

To add content to your component, click the green Edit >

This title you only see

This appears on the webpage

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

Want to underline your component header?

Click this checkbox.

Tip: It can be helpful to create a hierarchy on your webpage.• Page Title (this is auto generated at the top of your page; if you need it to change, email me with the link)• Section 1: Component Header WITH underline

• Section 1a: Component Header WITHOUT underline (implies that this section still related to “section 1”• Section 1b: Text component with NO Header/Title with BOLDED text inside the text area

• Section 1c: Component with NO Header/Title: implies that this info has to do with whichever title/section it is under

• Repeat hierarchy for Section 2 etc.

TEXT WINDOWS

TEXT WINDOWS

• Used for typing copy onto your page.

• Paste in plain text:

• When copying text from another document, email, etc., paste the text in this box so that all unwanted formatting (like fonts) are stripped away.

• This will strip away any links and you will have to relink them using the hyperlinking icon.

• Hyperlinking

• Change Target to New Window so it opens in a new tab if leaving our website.

• Hyperlinking emails is the only exception to this rule.

• DO NOT

• Use the PDF uploads inside a text window

TEXT WINDOWS: FONT TYPE / FONT SIZE / COLOR

You do not have access to these controls as a webmaster due to inconsistencies in the

website.

If you have a special request, please send it over to LeslieAshford@cusd.com for

evaluation.

Basic View of inside a Text Window Component:

Used for adding single photos to text.See Adding Images Tutorial for

moreUsed for making a text component “collapsible”See Text Window Components Tutorial for

more

For more details regarding Text Window components, please see the

Text Window Component Tutorial

PUTTING PDFS ON YOUR WEBSITE

REFER TO THE HOW TO ADD A PDF OR

DOWNLOAD TUTORIAL FOR MORE DETAILS

BEYOND THE BASICS

DOWNLOADS COMPONENTS

Used for all PDFs / word docs (when necessary)

01Creating RTFs• Ensures we are ADA

compliant

02DO NOT• Place your PDFs inside a

Text Window component

03

MOST COMMON MISTAKES

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

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

Forget to click the RTF button while creating the PDF?

Follow the easy steps to fix this

To add your PDFs, click Add A New Download

Download Title: Write the title you want displayed for

the PDF.

Description: you can leave this blank. If you do want to add a description,

the information will appear below the

Download Title link on your webpage.

If you are wanting the PDF to

disappear or appear on certain dates, you can choose

them here.

File: Choose your file from your

computer here. Make sure it is a

PDF.

IMPORTANT: Click this button here so that you are

ADA compliant.

Did you forget to click the RTF button? Pages 11-13 will show you what to do.

*

23

avoid

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

If you want it to be an image of your PDF document, you must save as an

image FIRST. See Downloads Component Tutorial for more.

Click Save!

Are you uploading more than one

PDF in this component?

(These will appear as a list of PDFs/RTFs on

your page)

Click the blue Save and New button. This will save your

current upload and take you into uploading a new PDF right away, without having to manually go in

again and add the new Download.

Make sure this button is checked every time you

add a download!

24

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

To change the order in which they appear, you can hold an drag in their rectangle row and drag it to where

you want it to be.

Forgot to create an RTF?!?!?!

Click the blue title of the PDF you uploaded,

*

25

If you forgot to make your PDF an RTF:

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

RTF Version” 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.

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. 26

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

To add your Links, click Add A New Link

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

click on.

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

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

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

Description of link.NOT necessary.

Only use if your link needs major description.

If you are wanting the PDF to

disappear or appear on certain dates, you can choose

them here.

avoid

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

You can make an image from online/one of your own be the icons

or button for your link. See Downloads Component Tutorial

to apply the same rules.

If having an image being your link, please DELETE your Link

Title so it is not repetitive.

ADDING IMAGES

ADDING IMAGES

Single images: Embedded image options in a Text Window Component (NOT inside

the text box)

Multiple images:Upload your images into the text

box of a Text Window Component

Make sure you provide Alt Text for the image so we are ADA compliant

Photo Galleries: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 A TEXT WINDOW 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 You can place your text in the text box and then add your image to the dropdown section labeled Embedded Image

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

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 like. You can leave the text area blank and skip down to the Embedded Image Options

For great examples on how to have multiple single photos, each in their own component, please see any of Sierra Outdoors' Staff pages.

Click the arrow for “Embedded Image

Options”(this is where you will add your single image)

FIRSTChange 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)d

This is auto checked. Leave be.

Choose file from computer. **Make sure it has NO . In the file

title.

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

text.

• 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.

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

Save to add the photo.

NOTE:If you want to change the size of the photo, you must FIRST change the px #, THEN re-

add the photo from your computer.

200 px

Black bar = 12/12 full width component

400 px

Black bar = 12/12 full width component

800 px

Black bar = 12/12 full width component

To delete a photo and have no image

Then click save. The image will be removed.

MULTIPLE SINGLE IMAGES = IMAGES INSIDE A TEXT 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

After clicking on the image icon, this window will pop

up.

To Upload a photo from your computer, click this

icon

Once uploaded, it will appear in the list of files to

the left of the window.

Select the photo from the list and check the box.

Use the same px measurements here.

ONLY change the Width, height will auto adjust.

Select this setting to wrap text

Change alignment in the text box, NOT here.

Change Margin to 5-10 here

Type the Alternate Text HERE!DON’T FORGET TO DO THIS!

Click OK to insert into your text window.

Inside your text box, looks like this:

On your page, it will look like this:

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 flier that when clicked, the flier 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

Select Photo Gallery as Type

To add photo, select Browse. Choose your photos from

your computer.

Only .png, .jpg, .tiff files allowed

WARNING: photos are not added yet!

1. Add Alternative Text2. Title / Description are

optional. They will add a black description box on the photo.

Click UPLOAD to upload your photos.

Wait for photos to upload one by one. The page will refresh when done.

Note: you do not get to change photo sizes in this component.

Click Gallery Options to make changes.

Fotorama Gallery: slideshow

Lightbox Thumbnails: thumbnails of all images in a grid (depending on how many images present.Rotation/timing

Control Buttons (forward/backward arrows)

Always auto checked, but NOT recommended.

Allows users to click a button to enlarge their view of the photo (you can do this with image versions of PDF fliers, as long as the PDF & RTF version is also available on the page)

Fore example, see the flier on the Boundary Study page

Transition effect options.

FOTORAMA GALLERY

Title / Description

Auto 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.

LIGHTBOX THUMBNAILS GALLERY

Auto 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.

Users can click on the image to enlarge it.

WHAT IS A WINDOW 2 & HOW TO USE COLUMNS

WHEN DO YOU ADD A WINDOW53

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

• When you create a Window 2, you can choose to use it for any components, but works best for:• “Resources” (links, downloads, PDFs, schedules or academic links, etc)

The Window 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.

EXAMPLEWindow 1 Window 2

Click Add Window in GREEN6

55

A tab for Window 2 will appear here

8

Now you can add any components to this window separately.

Switch between Window 1 & 2 by click on the tabs.

To delete the column, make sure there are no

components that you want to keep.

Click the Delete Window button

HOW IS A COLUMN DIFFERENT FROM A WINDOW 2?

57

A Column allows you to use the full page and create columns within it. You are not tied to only 2 sections.

01The width of the webpage is divided into 12 columns total.

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

03

EXAMPLE This component takes up the full width of the page (12/12)

These components are in columns and take up

1/3 of the page each(4/12)

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 12.

To change it, you can choose your value in the dropdown either when you first create the component, OR later on when viewing

this list from Edit Page.

You may only edit one at a time. Click the BLUE save button next to it every time you

change a value.