Introduction to Webmastering with eSCHOOLVIEW CMS

LAST UPDATED 1/28/19

Leslie Ashford & Jonathan Mathis

TABLE OF CONTENTS:

Logging in

What are components

TextWindows

Download Components

Links Components

Images

Columns / Window 2

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

WHERETO GOWHEN YOU NEED HELP:

Digital CommunicationsTool Training Portal on the cusd.com website

eSchoolView Help

Contact LeslieAshford or Jonathan Mathis

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

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

LeslieAshford@cusd.com; ext: 73031

JonathanMathis@cusd.com; ext: 79114

LOGGING IN

3

1
Go to your website.

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

2

*

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

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.

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                                   5

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

COMPONENTS

Component Types:

Allow you to add various types of content on your page

Most 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”

WHAT ARE COMPONENTS?

This button lets you create a NEW component.

Choose component type to change which type of component you are

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.

wanting to use.
Most common:

Internal Name:ONLY EDITER SEES. Helps with labeling.

• 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

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

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 >

		

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

		
This title you only see
	
Want to underline your component header? Click this checkbox.

This appears on the webpage

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 it to change, email me with the link) • Section 1:Component HeaderWITH underline
• Section 1a:Component HeaderWITHOUT 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

• ChangeTarget to NewWindow 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.

BasicView of inside a Text Window Component:

Used for adding single photos to text.
	
	SeeAdding ImagesTutorial for
		
	more

For more details regardingText Window components,please see the TextWindow Component Tutorial

Used for making a text component “collapsible” See TextWindow ComponentsTutorial for more

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

PUTTING PDFS ON YOUR WEBSITE

DOWNLOADS

01

COMPONENTS

02	03

Used for all PDFs /	Creating RTFs	DO NOT

word docs (when necessary)

• Ensures we areADA 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

If you do want to add a description, the information will appear below the DownloadTitle link on your webpage.

File:Choose your file from your computer here. Make sure it is a PDF.

Making your PDF an image/icon on the avoid	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 ComponentTutorial for more.

*

will show you what to do.

	
Download Title: Write the title you want displayed for the PDF.

			

Description:
	you
		
can leave this blank.

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

Did you forget to click the
	
	RTF button?
	Pages 11-13

IMPORTANT:Click this
button here so that you are	23

ADA compliant.

Make sure this button is checked every time you add a download!

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.

24

*

Forgot to create an RTF?!?!?!

Click the blue title of the PDF you uploaded,

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	25 you want it to be.

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

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 theTarget to NewWindow so it opens in a new tab! • The only exception is when hyperlinking e-mail addresses

To add your Links,click AddA New Link

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

avoid

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

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

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

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

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:	Multiple images:	Photo Galleries:

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

Upload your images into the text box of a TextWindow Component

Make sure you provideAltText for the image so we areADA 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 INATEXTWINDOW 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 Outdoors' Staff pages.
 Forrgreat examples on how to have multiple single photos,each in their own component, please see any of

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.

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

mputer. .In the file

This is auto checked. Leave be.

Choose file from co **Make sure it has NO
title.

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

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.

Save to add the photo.

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

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 INSIDE ATEXTWINDOW 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.

Type the Alternate Text HERE! DON’T FORGET TO DOTHIS!

Select this setting to wrap text

Change alignment in the text box, NOT here.

Change Margin to 5-10 here

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

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

	WARNING: photos are not added yet!

			

Click UPLOAD to upload your photos.

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

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

Click Gallery Options to make changes.

Rotation/timing

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)

Fotorama Gallery:slideshow

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

Control Buttons (forward/backwa rd arrows)

Always auto checked, but NOT recommended.

Fore example,see the flier on the Boundary Study page

Transition effect options.

Title / Description

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

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

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

WHEN DOYOU ADDAWINDOW

53

EXAMPLE

	Window 1
		
Window 2

			

6 ClickAdd Window in GREEN

55

	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

A tab for Window 2 will 8 appear here

HOW ISA COLUMN DIFFERENT FROM AWINDOW 2?

01

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

02

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

03

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

57

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.