Table of Contents

Introduction.2
Login.....................................................................................................2
Editing...................................................................................................3
Navigation..3
Pages..4
Blocks................5
Text..6
Images.6
Accessibility.............7
Publishing Changes 10
Technical Support11
Introduction

Welcome to the Concrete5 Beginners Training Manual. This document will debrief
readers on the updated web platform the College of Arts and Letters now utilizes, and
will increase departmental efficiency of individual management of their affiliate web
pages.

The purpose of this training manual is to assist departmental representatives in not only
navigating their sites, but adding and customizing new content. Users should be able to
successfully login, locate navigational tools, upload new documents and images, add
new pages, and publish new changes. In addition, this tool will introduce the concept of
accessibility, and specify where users can receive technical support.

Welcome to Concrete5, the open source content management system that the College
of Arts and Letters has selected to upload information and web pages to the Internet.
Concrete5 was selected for its level of ease and efficiency as far as usability. The key
component to its accessibility is the option to edit content directly on the page,
minimizing HTML and CSS frustrations and maximizing optimal content publishing.

Login
As earlier specified, the new College of Arts and Letters web presence can be found on
the platform called Concrete5. To access your site, the CAL website is located at
http://www.cal.msu.edu/

The login page for the website is at http://www.cal.msu.edu/login/

Use the username and password assigned to you during your content editing training
session to access the editing mode.

If you want to test content or experiment with the system please do so on our test server
at http://calweb.dev.cal.msu.edu/login/
Editing

In this section, you will learn how to edit your departments page by adding new pages,
blocks, textual content, and images.

Navigation

Before you can add new content, it is important to first understand

how to navigate the Concrete5 editor. Once you have logged on the
the Concrete5 College of Arts and Letters website, you will be
brought to the homepage with a navigation bar on top. This bar
contains important links to edit the page that youre on, access the
dashboard, and to sign out. To edit the page, in the top left corner
select the button Edit button that features a pencil next to it. You
are now in editing mode and will be able to do several things in this mode including
adding, editing, and deleting content.

Note: Its important to realize that the CAL navigation bar drop-down menus do not work
in edit mode. Navigation must be achieved either through links on the page, and
navigation structure at the bottom of each page, or through the site map on the
dashboard.

To access the sitemap, first enter into editing mode where you can access the
navigation toolbar, and select the Dashboard button located in the top right portion of
the page. Once you are there, find the Sitemap rectangle, and click on Full Sitemap.
The Sitemap will show you all of the main pages of the site, including some that feature
small plus signs next to them. These plus signs
represent additional pages that can be found
under the selected main page. To navigate to a
page click on the name of the page you wish to
visit, and select Visit when the pop up menu
appears.
Pages

After mastering the proper way to navigate the CAL website and selecting your
departments page, you can learn to add subpages within your specific web page. There
are two ways to add a new page to the Concrete5 system. One option to add a web
page is by navigating to the parent page that will host the new page and clicking the add
page button. The other option is to add a page through the dashboard. This section will
offer instructions for both methods of adding the page.

To add a page from the parent page, navigate to the

parent page and hover your mouse over the Edit
button. A drop-down menu will appear, but do not enter
into editing mode. Before you edit, a button will appear
that reads Add a subpage. Selecting this will bring up
the add page window. First, youll notice that you are
required to choose a page type. The page types have icons associated with them that
are roughly related to the layout of the page. You will notice there are three different
pre-designed layouts to choose from including Right Sidebar, Subpage No Sidebar, and
Subpage Right Sidebar. Right sidebar should be used on main (home) pages for
departmental sites that clearly shows the navigation to site subpages. For pages with no
additional subpages, Subpage No Sidebar is desirable. However, if the subpage has
additional secondary pages, Subpage Right Sidebar is the best option.

Once you choose the desired page type youll need to give the page a name. The name
of the page can be a long name with two or more words, however you
may want to adjust the alias that it generates from that long name to
be something shorter.

For instance, I may name something fall semester 2011 workshops

and Concrete5 will create a URL that looks like
fall-semester-2011-workshops. This is a very long page name.
Instead, we can adjust the URL to be something shorter such as
fs11workshops so the link to the page would appear as
http://edtech.cal.msu.edu/ fs11workshops/. This is a much easier link
for people to remember and to include for documents.

The second option to add a page is by first navigating to the Sitemap which can be
found in the Dashboard. Once you have access to the Sitemap, select the parent page
that you would like to add a subpage to. After the pop-up menu appears, select Add
Page listed at the bottom. This will bring up the same add page window and you will
follow the same steps.

Blocks

Before you add new content, you will first need to associate yourself with blocks.
Content areas, or blocks, are where site content can be added in Concrete5. Content
areas are denoted by red dashed boxes in edit mode. In our current site all of the
content areas have already been defined on existing pages. However if you are adding
a new page to a site you may need to add some new content areas that do not already
exist.

To add a new content area, navigate to the edit mode. When youre in edit mode, youll
notice below the content areas in a given column there will be an area denoted by a
black dashed border that says add to main content or something similar. If you click on
this link, a pop-up menu will appear that allows you to add a block. When you click on
Add Block, youll see a long list of different content blocks that you can add. The most
common type of content block you want to add is called Content and is at the top of
the list.

Note: When adding new content, you may want to take

some time on the development site to test different
content options out such as forms, videos, or
slideshows.

After creating the new block, selecting the red-dashed

perimeter allows you to edit, move, or delete the block.
To move the block, select move in the drop down menu and drag the box to the
desired position. In addition, you can delete blocks by clicking the block, and selecting
Delete from the pop-up menu.

Text
Now that you have learned the structure of the site you are editing, you are ready to add
new content.
To edit current text, navigate to the page you would like to edit and click on the Edit
button in the top lefthand corner of the toolbar. Once youve entered into edit mode
youll see a number of content areas or blocks that have text in them. Any area of the
site that is not enclosed by a dashed red box is not editable by regular site editors, you
will need to contact one of the tech staff in order to fix an error you find in those areas.

Two ways to add new text to a web page include creating a new block, and editing an
already existing block. To add text to a new content area, create a Content block. A
textbox will automatically appear in which you can begin writing new content. In most
cases this textbox will look like a normal HTML/MS word style editing box, where youll
see typography elements such as boldface, text size, color, etc. When you are finished
creating content, select Add in the bottom righthand corner.

If you would like to edit an already existing content area, click inside that box and
choose edit from the pop-up menu. The same textbox will appear to allow edits in the
selected content area. When finished, select the Save button in the righthand corner.

Note: Please reference the Accessibility section specified later in this document when
creating new textual content.

Images

If youd like to add images to your page, there are again two ways to do this whether
you are editing already-existing content, or adding a new block.

To add an image to already-existing content, open the edit window for the specific block
and from your edit box, click on the add image link located in the top left corner of your
edit content box. This will launch the file manager, which houses all of the images for
the entire site. If you would like to add an image thats already been used on the site,
you can search for the image here.

If you are trying to add a new image to the site, click the
Choose File button. You can then browse and upload
images saved to your computer. Find and click on the image
you want. Youll then need to press Upload File on the right
side of the file manager in order to upload the image to the
site. A window that confirms successful upload will appear, and includes various
information about the image. Click Continue in the upper righthand corner, you should
see your image at the top of the file manager image list.

To insert that image into your page, click on the image and press the Choose option
from the pop-up box. This will place the image in your page. To adjust some of the
more advanced features of the image, such as text wrapping or linking the image to a
different page youll need to click on the image, then click on the image properties
button which is in the formatting area of your edit bar and resembles a tree. Once the
edit box for your image pops up, you can adjust the settings with the three tabs
General, Appearance, and Advanced, then press the insert button to return to the
edit content section, and finally save your changes.

The second method to add a new image is creating a new block. After selecting a new
block, instead of selecting Content, select Image. This will bring you to first an Add
Image box where you will select Choose Image. You will then be directed to the same
file manager, and the same steps may be followed to upload and select your desired
image. By creating an image block, you have the option of linking the image to another
page or website, adding a caption to the image, or cropping/rotating the image. To crop
or rotate the image, select the image and choose Edit. The editing window will open
and you will have the option to rotate, zoom, or even crop the image by dragging the
dashed line around the image. After saving your changes, select Add to insert the
image block.

Accessibility

Web accessibility is a growing component of elevated efficiency and readability when

browsing the Internet. Accessibility not only allows individuals with disabilities to
navigate various web pages, but creates a more cohesive mode of finding related
information and content.

Individuals with disabilities can achieve accessibility by using a screenreader that

navigates web pages by structurally following the hierarchical layout of main heading,
followed by a section heading that ultimately leads the site visitor to content. The
screenreader largely functions by reading the formal outline of headliner, subheader,
and content that is the normal cognitive process when searching for information.

Headings
Headings are used to separate information hierarchically to group related content
together. When you look at a web page, you notice first the headline, followed by
different subheadings that lead you to the content
you are looking for. Screen readers utilize the same
method to achieve accessibility by recognizing
Heading 1 (h1) as the most important header, and
then continues numerically until subheader
Heading 6 (h6).

When you are adding new content to a page, you

have to manually tell the web page where your Heading is. To specify the correct
Heading, when you go to add or edit the text in a block, highlight the Heading text in the
box, find the drop down box next to the box that reads Styles and select the correct
name for your Heading.

When specifying your hierarchy of information, it is important to remember that each

web page can only have one Heading 1, but there can be several Heading 2s, and
various sub headers below that; the hierarchy closely resembles an outline. In addition,
Headings should not be used for design purposes, but strictly for accessibility and the
ease of navigating a page. If you do not like the design of the various Headings, the
typography and design aspects can be changed using CSS, a web coding design tool. If
this is the case, please contact . to aid you in changing your Heading designs.

Alternate Text
Alternative text is particular to images and acts as an aid to achieve search engine
optimisation, as well as assists screen readers as they navigate web documents. The
primary source of alternative text can be found in the description attached to an image,
and contains the main points and subject the image portrays. Search engines utilize
alternative text to pull up the content-related graphics that best fit the keyword being
searched. In addition, screen readers refer to images by their alternative text instead of
reading image. Overall, pictures achieve accessibility when the description accurately
communicates the image being used.

A few components to keep in mind when writing alternative text are remaining clear and
concise, and avoiding filler text. To remain clear, a great example of alt text for a picture
of a bug is Bug on a leaf. Avoid attaching the fillers like, This is an image of. Though
alternative text is particular to images, all non-text content should employ alternative
text including videos and audio.
To edit the Alternate Text of an image, enter the File Manager used to add images
(specified in the Edit>Images section of this manual). From there, you can click on an
image and select Properties from the pop-up menu. You will be directed to a
Properties window that contains all of the details of the image. Find the blue
Description box. Selecting the blue title allows you to edit the Description section, and
add Alternative Text to your image. When you have finished, select the Rescan button
and exit out of the Rescan and Properties window.

Note: You will not be able to see the Alternative Text entered into the Description
section from the File Manager although it is there. Alternative Text can only be viewed
from the Properties window.

Links
Links are more about psychological cognition versus technological
programs. Links should be very clear in what they are, and where
they are going to direct the user. To do this there are two ways to
accurately inform an individual. The first way is to properly name the
link in the most clear and informative way. For example, the
cal.msu.edu website link would be most accurately represented by
the name the College of Arts & Letters.

The second method is less optimal, but still effective. This method utilizes contextual
clues around the link to answer the necessary what and where questions that an
individual may question when choosing to click the link. In a very obvious example, go
check out cal.msu.edu to visit the College of Arts and Letters website, offers the most
straightforward contextual clues to why they should select the link.

Publishing Changes

Publishing changes on Concrete5 involves several steps and its a good idea to sign out
of the system and check the page that you just edited if youre not sure that your
content changes were made.

After youve pressed update on the content that you are editing youll
be taken back to the main edit page where youll see your editable
content areas. In your top toolbar youll need to press the green Editing button again in
order to save the changes to the page that you made, and then simply press the blue
Publish My Edits button. If you do not
want to save the changes youve made,
the Discard My Edits button will bring
the site back to the version before
editing.

Note: When you make changes to a content area and save them, it is only saving those
changes in that content area, and not saving the changes to the entire page until you go
through the exit edit mode process.

When you press the editing button youll be asked for Version
Comments when you publish your edits. These comments help to
identify what changes were made if there were to be a problem down
the road. Once youve entered your version comments you can press
the Publish My Edits button. You also can use the Preview My Edits
button if you want to make sure to see how the page looks before you
publish.

Note: When entering in Preview mode, you will be leave edit mode. However, when
your changes will not be published until you manually select Publish My Edits.

Technical Support

Contacts
For help with content creation (i.e. using Concrete5) contact Caron Creighton
([email protected]) or Kathleen Sarkady ([email protected]) in the CAL technology
office.
For questions about content, images to use, styling, etc. please contact Ryan Kilcoyne
([email protected])
If there is a technical problem with the website please file a help ticket by emailing
[email protected] with a description of the problem.

Additional Help
This document covers the basic steps for editing content in the Concrete5 management
system. If you need more help or would like to learn some of the more advanced
features of editing in the system please contact the CAL technology office and we will
assist you.