introduction to webmastering with eschoolview cms to... · 2020-06-30 · component, images, photo...
TRANSCRIPT
Introduction to Webmasteringwith eSCHOOLVIEW CMS
LAST UPDATED 1/28/19
Leslie Ashford & Jonathan Mathis
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
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)
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 [email protected]
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 [email protected] 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.