Sierra Nevada College - SNC Web Editing Primer

SNC Web Editing Primer

Login to the Content Management System (CMS)

note: this document is available on the SNC site at Contacts, SNC Web Editing Primer
get the web address for the CMS system and your username/password from Cindy (cmcclelland@sierranevada.edu)

General Guidelines for Web Pages

Avoid "dating" of the material... leave out "year such-and-such", "yesterday", "next week", etc.... this just sets you up for an out-of-date page that you or a colleague will forget to edit.
Unless it's obviously important, avoid specific use of people's names and titles... assignments change often and therefore we again are setting ourselves up for out-of-date pages.
Remember the "one place" principle... information should be stored on the site in "one place" only. If we replicate information on multiple pages, chances are that when edits come along we'll forget to change the replicated pages and once again we have pages out-of-date.
Text

stick to standard Formats
Heading 2 for page header
Heading 3 for subheaders
Normal for body text
only use Bold and Italics when absolutely needed (they become too loud if overused)

Images

generally limit image height to 160 pixels for landscape images and 220 pixels for portrait images
see note on creating Image Thumbnails
if you want the visitor to have access to a larger image, make the small thumbnail Link to the full-sized image, which in turn should open in a New Window (see Links below)

Links

the general objective here is to preserve the visual comfort zone provided by our attractive SNC site
if you are linking to a page outside the SNC web, then have it open in a New Window
if you are linking to a PDF file (in or outside the SNC web), then have it open in a New Window
if you are linking to a page inside the SNC web that does not have the look/feel of the standard SNC web, then have it open in a New Window
you specify links to open in a New Window on the Insert/Edit Link form... Target tab... Target = New Window

Important Note on Cut/Paste

If you are cutting/pasting text from another application (definitely MS Word but also some other applications and occasionally some web pages), you'll want to make sure the formatting of the source (font, color, bold, etc) is NOT brought forward to the web page. To avoid adopting the formatting of the source, just do the following:

if available, always start with a "print friendly" version of web pages

swipe/copy the text you want from the source

open Notepad via right mouse on Desktop, New, Text Document

paste our text into Notepad

select all Notepad text (cntl-a)... copy

now move to your new web page in the CMS system... paste (this will paste all the text without any formatting)

to double check, you can click the Source icon in CMS to verify that that are not a bunch of html tags (e.g. <font size="2">, <span style>, etc.)

Editing an Existing Page

Pages tab

select the desired page Category (About SNC, Academic, etc.)
click on the page name at the left (or the yellow pencil icon)
edit or add to the text much as in any word processor
standard settings to use

page headers are Format = Heading 2
subsection headers are Format = Heading 3
narrative text is Format = Normal
within a line you can use (sparingly) Bold, Italics, and Underline
use numbered/bulleted lists, indents, and justification as you would in a word processor

To add images to the page

in the source document (e.g. Google images), click to get a full-size image displayed
right mouse on the image... Save-Image-As... to somewhere on your local computer (remember location)
now in the Main content block, position your cursor at the beginning of the paragraph where you want the image displayed... click the Insert/Edit Image icon
Browse Server... at the bottom, Browse... select the image file from your local computer... Upload... then select the image file that was uploaded
set the Height = 160 (or as desired for the image "thumbnail")... Border = 1... HSpace = 4... VSpace = 4... Align = Right
swipe the URL field... right mouse Copy... click the Link tab... put your cursor in the URL field... right mouse Paste... Target = New Window (this allows the visitor to click on the thumbnail in your article to get a full-size graphic in a new window)
OK off the form

Note on Image Thumbnails... to get the best quality for the thumbnails, rather than simply setting the Height on the Insert/Edit Image form it is best to:

use a graphics program (e.g. Picasa, Photoshop, PaintShopPro, Windows Photo Gallery) to create a separate reduced size thumbnail image.
For consistency with the rest of the site... name the thumbnail image the same as the full image plus append its primary dimension... e.g. "imagename-160h" for a thumbnail of height 160 pixels (landscape iimages) or "imagename-220h" for portrait images

To edit or replace an existing image... right mouse on the image, Image Properties... and do much the same as was done in the previous major bullet
Proofread your page carefully
Save (early and often!) at the bottom of the page... or Cancel if you want to discard your changes
Proofread the live version carefully

right mouse Go to live version of this page, Open Link in New Tab
-or- if you already have a browser window open to the live site, Refresh/Reload the desired page

News Creation & Editing

Find a "printer friendly" version of a news article, e.g.:

tahoebonanza.com, news.rgj.com, www.sierrasun.com,
Search for "snc" or "sierra nevada college"
select the desired article
click on the Print icon at the top... Cancel the printing

News tab... Create New

select the correct Category
swipe/copy/paste from the article title into Title
enter the Date
leave Feature Article = No
in the Summary block (see 'Important Note on Cut/Paste' above)

type in the name of the publication (e.g. North Lake Tahoe Bonanza:) and Bold it
swipe/copy/paste the first paragraph of the source article into the Summary block
example:
North Lake Tahoe Bonanza: After a roller coaster year - beginning with low enrollment, but ending with an official partnership signed with an educational giant - 68 Sierra Nevada College seniors celebrated their college commencement, along with 39 students who earned masters degrees in teaching.

in the Article Block

swipe/copy/paste the Summary block into the Article block
swipe/copy/paste all the text from the source article (minus the first paragraph) into the Article block

To add images to the page

in the source document (e.g. printer-friendly page of Bonanza), click on are image to enlargen it
right mouse on the image... Save-Image-As... to somewhere on your local computer (remember location)
now in the Article block, position your cursor at the beginning of the paragraph where you want the image displayed... click the Insert/Edit Image icon
Browse Server... at the bottom, Browse... select the image file from your local computer... Upload... then select the image file that was uploaded
set the Height = 120 (or as desired for the image "thumbnail")... Border = 1... HSpace = 2... VSpace = 2... Align = Right
(note: for News articles it is generally not necessary to create explicit thumbnails, but simply entering the image height will do.)
swipe the URL field... right mouse Copy... click the Link tab... put your cursor in the URL field... right mouse Paste... Target = New Window (this allows the visitor to click on the thumbnail in your article to get a full-size graphic in a new window)
OK off the form

If the press article was authored by a particular person (rather than staff reports), then go to the bottom of the Article block and enter the author's name and title, and right-justify.
Proofread your article carefully
Save (early and often!)
Proofread the live version carefully

right mouse Go to live version of this page, Open Link in New Tab
-or- if you already have a browser window open to the live site, Refresh/Reload the desired page

Creating a Calendar Event

Calendar tab
Manually Add a New Event
fill in all the appropriate fields in the right sidebar... Category, Title, Contact, Location, Time (in format 3pm-5pm), from/to Dates
in the Description block to the left [note: there is a current bug that limits the Description to about 100 characters]

if you only have a line or two of narrative, enter that here
if you want to reference another web page with more detail

enter no more than 15 characters of summary text... then complete the line with "Details..."
select "Details..." and click Hyperlink
URL = www.sierranevada.edu/?id=136&print=1... where id=the detail page (e.g. 136)
Target tab... Target=<popup window>, Resizable, Scroll Bars... Width=660, Height=800
OK off the form

if you want to bring up a PDF file (e.g. a flyer)

enter no more than 15 characters of summary text... then complete the line with e.g. "Flyer..."
select "Flyer..." and click Hyperlink
Browse Server... at the bottom, Browse... select the PDF from your local computer... Upload... then select the PDF file that was uploaded
Target tab... Target=<popup window>, Resizable, Scroll Bars... Width=660, Height=800
OK off the form

Save

Creating a New Page

Pages tab

select the desired page Category (About SNC, Academic, etc.)
find the existing "parent" of the page you want to add... click on the Add Sub icon (far right of screen) for the parent item
create a page much the same as noted above under Editing an Existing Page
Save (early and often!)

If you have sufficient privileges in the system, you can move the new page up or down within the list of its siblings by clicking the Up/Down Ordering Arrows (there seems to be a bug with the Up, so you may need to use the Down repeatedly)

Uploading and Creating a Photo Album

Working with Photo Albums is more advanced and for this reason -- ONLY approved SNC web "administrators" are provided this functionality. If you are not a web administrator but have photos you would like uploaded to a Photo Album, please do the following:

use a graphics utility, e.g. Microsoft Office Picture Manager, to do the following (commands for Picture Manager are noted):

as appropriate, rotate images so that "up is up"
resize all photos to 1024 maximum width (Picture, Resize, Custom Width = 1024, OK, Save)
compress all photos (Picture, Compress Pictures, Compress for Documents, OK, Save)

Email these photos to Schuyler Harrison, sharrison@sierranevada.edu

Note: The following instructions are for approved SNC web administrators only. The utility provides full write and delete capability, and as such, you are able to delete anything in the nested directories. Thus, be very careful not to delete any other than really unwanted files!

The steps for uploading new photos and creating a new album would go something like:

username: <special username for photo album uploads>
password: <special password>

click on PhotoAlbums directory
to create a new Album (or directory), right click on PhotoAlbums directory and select “create sub-directory”
in the pop-up, name the album (directory) and select OK
to upload your photos to this new directory, select the new directory (upper right pane should display “Current Working Directory: “PhotoAlbums/NewAlbumName/”
in the “File Upload” pane (just below the “Directories” pane, be sure “Upload” is selected, then click on the “Browse...” button
in the file window displayed, navigate to your photos (.jpgs) to upload
you can multiple-select all your photos (i.e. you can do a single, bulk upload — you don’t need to upload the photos one at a time)
you’ll see a progress metric displayed as your photos upload; and you’ll see thumbnails for each show up in the primary display pane (note: any image greater than 500kb will give an error message and not be uploaded)

From here, you use the SNC CMS to create a new photo album and “assign” it to the directory you just created:

login to www.sierranevada.edu/admin
navigate to Photo Albums
”Create New” photo album: enter a title, a description, assign it to a Category, then “assign” it to a photo directory (shown at bottom of page under “Available Directories”)
Save

Remember: the photo album utility creates thumbnails for you, but otherwise does not resize any of the source jpgs you provide. Therefore, you’ll need to do any photo preparation before uploading the photos to the site.

Printer friendly