- First, make sure you are on the VPN. You’ll need to use the “Group: 2-Step Secured – allthruucsd” VPN setting.
- In your browser (recommended browsers), go to https://cms.ucsd.edu and sign in using your Active Directory (AD) account. We recommend keeping this page open in one browser or tab, and the CMS open in another.
- In the upper-left corner click in the Go to a Site box and choose Sandbox from the slide-out menu

After you complete your training and have been approved for access, this is where you will select your site(s) to work in.
As you move around the CMS, you should be aware of the difference between
navigating to assets (folders, pages, files, etc.) and
selecting them.
- In the left navigation window, click on the training folder. You should see a number of sub-folders appear under training. These folders belong to others who have taken the CMS training. You are navigating the site, but you haven’t selected anything yet. Note that nothing in the main window has changed.

To select the training folder, hover your mouse over the training folder and a > symbol will appear to the right of the folder name. Click on the > symbol. You have now selected that folder and will see the contents of that folder in the main window – not just in the left window.
Important: Make sure you have selected the training folder by looking at the main window. You should see “Folder: CMS Training Pages” at the top, followed by the breadcrumbs: “Sandbox / training”
If you do not see this, then you have not actually selected the training folder. Don’t click on training (which is just navigating around the site). You need to click on the > symbol.
Selecting the training folder will let you place your new folder inside the training folder (otherwise your folder will be in the wrong location). Correct locations are very important in the CMS because the location in the CMS corresponds to the URL (web address) on the live site.
- Click on the Add Content button
at the top of the window and select Folder.

- Replace “base-folder” in the Folder Name field with yourlastname-yourfirstname (for example, doe-jane).
Important: Notice the Folder Name is all lowercase with no spaces. Folder and Page Names should always follow this convention as it’s what appears in the URL. Failure to do so can result in pages not being found and an inability to redirect traffic from the bad URLs.
- Click the blue Submit button in the top right.
A Spell Check screen may pop up. If it does, click the blue button with the check mark to close it.

- Click on the Edit button in the top right of the screen:

Your screen should now look something like this:

- Fill in the metadata fields:
Display Name: Enter your name (for example, Jane Doe). This will show up in the site navigation (breadcrumbs and left navigation).
Title: Enter the same name.
Summary: Type “This is my first page for the campus CMS training site.”
Note that uppercase letters and spaces are permitted in all three fields here.
- Click the Submit button in the top right
You may get the Spell Check pop up again. Correct any issues as needed and click the checkbox when finished. You may get a pop-up dialog box that says something like:

If you do see this, click on the X to close it. There isn't a reason to publish an empty folder. Once you create a page for the folder, you will publish it.
- After creating your folder, you will have the folder selected. You can see it highlighted in the left window, and you should see "Folder: Your Name" at the top of the main window. Most of the main window will be blank, because there isn't anything in your folder.
It is important to pay attention to where you are in the site structure when you add new content, as this will determine where the new content is placed.
- Click on the Add Content
button, scroll down and select Page – Article.

- The other options represent other resources like folders, files or images or other page templates. Page – Article is the most frequently used template. Different sites will have different templates available to them
- The new Page – Article template will appear.
- Type into the fields as shown here (remove the text automatically generated by the template):
Page Name: index (Note: Page names should conform to the no uppercase, no spaces convention as this will be part of the site URL. If you capitalize ‘index’ your page will not publish properly.)
Display Name: Web Accessibility Page
Title: Your Name’s Web Accessibility Page (for example: Jane Doe’s Web Accessibility Page)
Summary: This is my first CMS page.
Author: Type in your name, for example: Jane Doe

Notice this Page Name is “index” because every folder in the CMS has to have one “home page” named “index.” This automatically becomes the landing page for the folder.
The two most important things when creating a new page are:
Every folder must have an index page (the system name is all lowercase ‘index’).
Every system name (page name) should be all lowercase with dashes instead of spaces.
- Now click on the Preview Draft button:

You should now be looking at a screen like this:

- You may get a pop-up dialog box asking if you want to Submit the draft. You can click submit there or click on the Submit button in the top right. You’ll get a dialog box like this:

You can enter text in the Comment field if you want. You’ll see something by default, such as “First version.” Click on the Submit button. (You could also click on the Check Content & Submit button. This includes spell-check and link checker, which you can explore on your own.)
- Your new page has now been submitted to the CMS. You must submit your page to the CMS in order for any other CMS users to be able to see it (if it is a new page) or see your most recent edits.
We recommend submitting your changes to the CMS at the end of each working session. If you forget to submit your changes, and later come back to work more on the page, you may inadvertently overwrite your previous work. If multiple people are working on a page, it is important that everyone submits their changes so someone else doesn't overwrite their work.
You will be prompted to submit your changes throughout this exercise, but you may do so at other times as well (if you need to step away from the exercise and return later, for example).
Once you have a page in the CMS, either a new one you created, or an existing page you need to update, most of your basic workflow will be: Edit > Preview Draft > Submit > Publish
- Edit - Create new content or modify exhibiting content on your page
- Preview Draft - See a preview of how your content will display
- Submit - 'Save' your update to the CMS
- Publish - Make the content visible outside the CMS
You already have experience with Preview Draft and Submit when you created your page. Now we'll do a simple Edit, Preview Draft and Submit again, and then Publish.
- You should still be on your page from the previous section. If you aren;t, you'll need to navigate back to your page.
Click on the Edit button (first option in the top right): 
- The Edit screen will now display. This is the same screen you saw when you created your page. The Edit screen is organized vertically, and the parts of the corresponding page you are working on are labeled.
First, you'll see the metadata that you have already entered (Display Name, Title, Summary, Author).
As you scroll down, you'll see the name of the template (in this case 'Two-Column,' which is the old name for the 'Article' template). There is a toggle to show or hide advanced options. These won't be covered in this training.
Next is a section called Left Blocks. The various parts of the page are organized into blocks. Content in Left Blocks will appear underneath the left navigation menu. You will not use these in this exercise. Different page templates will have different blocks in them. Pay attention to the names of the blocks so you know what section of the page you are editing.
After Left Blocks you will see Middle Blocks. This is the main content area of the page and where the majority of your content edits will be done.
Under Middle Blocks, there is a toggle for "Content to Use:" either WYSIWYG or Shared Blocks.
Make sure WYSIWYG is selected. You will see a text editor that should be familiar to you from programs like Word or other word processors.

- In the WYSIWYG type your name.
- Next, Preview and Submit your page just as you did when you created it:
Click on the Preview Draft button: 
You may notice a pop-up box at the bottom of the screen letting you know that your draft has been saved.

You should see a preview of your page, which just has your name on it.
A draft is only visible to your account in the CMS. Before you can publish a page, you must Submit Submitting a page will also make it visible to other users in the CMS.
- Click on Submit. A dialog box will appear. You can add comments on what you have changed (this is useful if multiple people are working on the same page). Click the white Submit button to Submit your work to the CMS or click Check Content & Submit to have the CMS check your spelling and links first.

For this exercise, you can just click on the white Submit
You may see a pop-up at the bottom of the page confirming the submission and asking if you want to publish your page. Once you are more comfortable with the CMS, you can use this shortcut. Ignore it for now.

- Publishing is the interface between the CMS and the live site. Changes you make in the CMS can’t be seen outside of the CMS until you publish them.
- Click on the Publish button

The publish page dialog box will open. The first time you open this, you may not see the publish setting. Click on View Publish Settings to expand the settings.
You should now see an expanded dialog box with both Delivery and Staging destinations checked. By default you’ll publish to the Delivery (live) site as well as the staged site. If you just want to publish to the staged site, un-check the Delivery checkbox.
In this case, we are only publishing to stage. Publishing to stage is useful when you want someone to review your content before making it live. Users will need to be on the UCSD network or using the “Group: 2-Step Secured – allthruucsd” VPN setting to see a page published to stage.

- Uncheck Delivery so you don’t publish your training page live for the whole world to see.

- Click the Publish button in the top right:
A dialog box will appear asking if you want to view the Publish queue. For now, ignore this. This link will take you to a queue of jobs being published from the CMS. You can look to see when your job publishes (individual pages will usually publish quickly, large folders will take more time), but you’ll need to remember to navigate back to the page you’re working on to make any further edits.

- See your published page.
In the top right of the screen, click on the three dots and More button.

- Click the very last option: Live. This will open a new window in your browser. The URL will match the file path of your page. You should see a URL that follows the pattern:
https://sandbox.ucsd.edu/training/yourlastname-yourfirstname/index.html
If you don't see this pattern, then you have either named your folder or page incorrectly, or you have created them in the wrong place.
This link should not work. You should see an error in your browser. This is because the 'Live' button in the CMS links to the live page (published to delivery), but you published to stage only. To see your staged page, add stage- in front of sandbox.ucsd.edu in your browser's URL box.
This creates a URL that follows the pattern:
https://stage-sandbox.ucsd.edu/training/yourlastname-yourfirstname/index.html
- Press enter and you should see a page with your name on it.
If you don't immediately see your page, try refreshing your browser. If you still don't see it, see "troubleshooting," below.
As a general rule, you should be publishing to stage, or stage and delivery. There are very few cases where you should publish only to delivery.
For the rest of this exercise you will publish to stage only.
Troubleshooting
If your page isn’t publishing correctly, check that:
- Your page is named ‘index’ with no capitalization and no trailing space.
- Your folder is named in the format ‘yourlastname-yourfirstname’ with no capitalization or spaces.
- Your folder is located inside the ‘training’ folder.
To fix (a) or (b), see the instructions for changing a system name and republish.
To fix (c), you will need to move your folder and then republish.
You can now create and publish a page. In this section, you will learn how to add and format text in the CMS. Download this text file to use for your page:
Sandbox Exercise Text (txt file)
The text file has no formatting included in it. This makes it an ideal starting point for adding content to a page.
Be careful copy-pasting from a word processing program into the CMS. Word processors can have hidden formatting that results in extra spacing or text formatting. Don’t paste images into the CMS. We’ll learn how to add an image later.
Writing and formatting text for the Web is different than for print. Expect to edit and reformat text that originally comes from print (Word files, PDF flyers, etc.) or other forms (like presentation slides).
- Return to your page in the CMS and click on the Edit button.
- Scroll down so you can see Middle Blocks section. Under Content to Use, make sure that the button for WYSIWYG is selected. You should see your name from where you previously typed it in.
- Delete your name and paste in the text from the Sandbox Exercise Text file.
You should see the plain text in the WYSIWYG editor now and can now start formatting the text.
- First we will give the entire text some basic formatting to make it easier to read (and easier to work with). Select all the text in the WYSIWYG (you can place your cursor in the WYSIWYG text box and use Ctrl+A as a shortcut).
- Now, with the text still selected, click on the following menus in the WYSIWYG: Formats > Blocks > Paragraph

Note that there is a second option for this, but it takes one more step. If you clicked on Format instead of Formats, you can use Format > Formats > Blocks > Paragraph to achieve the same formatting.
The text should be now be formatted with padding between each line. Paragraph formatting should be your default when you are working in the CMS. Your text should now look like this:

Let's see how things look so far.
Preview and Submit your page, just as you did before.
Publish your page to stage. If you need a reminder for this step, take a look at the "Basic CMS Workflow" section, above.
Use More > Live to look at your published page (remember to add stage- before sandbox.ucsd.edu in your browser).
If you don't see your new content on the page, you may need to refresh your browser. Web browsers often keep old versions of pages in their cache so they load more quickly in the future. This is helpful in general, but not when you are checking for updates. Get in the habit of refreshing your published pages after publishing. It may take multiple refreshes to see the change.
You should see the new content on your page. Informative, but it doesn't look very appealing or easy to scan through. Next we'll add in our headings to address that.
Headings provide important organizational and summary information for users, search engines, and screen readers. They are not just decorative text.
Every page in the CMS should have exactly one H1 or “Heading 1” line that acts as the title of the page. This heading should concisely describe the page content. The heading acts as the most important keyword or key phrase to improve Search Engine Optimization (SEO).
- Select the words “My Web Accessibility Page” and then click on the Format drop-down menu in the WYSIWYG tools area choose Headings and select Heading 1 (also available from upper menu: Format > Formats > Headings > Heading 1):

After clicking on Heading 1 you should now see the words “My Web Accessibility Page” formatted something like this:

Headings will automatically create spacing around them. Do not use the enter key to create additional lines of space under a heading. This will create empty heading tags which are bad for search engines and screen readers.
- Page titles should be unique in a given site. Since many users will be making a training page, you should distinguish your page from theirs. Change the “My” in the newly formatted title to “Your Name’s.” This will help us know that we are looking at your page. Unique page titles also help produce better search results.
Note: If you will be editing pages in Blink, the Heading 1 of the page will be automatically generated from the “Title” field. Do not add an additional Heading 1.
- Now let’s format the H2 headings that designate the subheadings on the page. These subheadings are important because they improve search results and improve readability by breaking up large blocks of text.
First, select the words “Importance of Web Accessibility.” Then pop open the drop-down Formats menu in the tools area and select Heading 2.

It should now look like this:

- Do the same (format as Heading 2) for the lines that have the words:
Screen Readers
Additional Benefits
Resources
- Sometimes you will want to create subheadings to further organize your content. Under resources, there are two sub-topics:
University of California
Electronic Accessibility in the News
Select each of these and format them as Heading 3. You should never skip heading levels as this can interfere with search results.
Headings should be short and clearly introduce the following content. They generally shouldn't be full sentences, and shouldn't be the content itself (for example, a link can be considered page content - a heading could introduce a group of links, but shouldn't be a link itself). Keep this in mind when you are later asked to add your own headings to this page.
For the remainder of these sections, you can decide if you want to Preview your draft and Submit your changes at the end, or continue working through the next section. You won't be prompted to do this again until the end of the exercise. If you need to take a break, you should Preview and Submit your changes.
Now we’re going to turn the list of things you can do to help screen readers into a bulleted list.
- Make sure you are editing your page and in the Middle Block WYSIWYG where you've been working.
- In the WYSIWYG select the text of this list of actions:
Using headings
Having informative link text
Opening links in the same window (i.e. don’t open a new window)
Including descriptive alt text for images
Using standardized site organization
and click on the Bullet list
button in the tools area. This will format the list.
Your content should now look something like this:

You can also make numbered lists. If you have text that uses numbered items, you should format them as a numbered list (instead of typing the numbers or letters in the text). Using the actual numbered list function helps screen readers interpret the text. This page is using numbered lists throughout the text.
You will often be given text to add to a webpage that was originally formatted for another use (PDF flyer, printed handbook, etc.). You should be aware of the best practices for writing for the web and be able to modify the styling of the text without changing the meaning.
Here is a simple example based on the UC San Diego Style Guide. Our style mostly follows The Associated Press (AP) Stylebook, but includes entries unique to UC San Diego. Follow the style guide to ensure consistent and professional content throughout UC San Diego sites.
Go to the Style Guide (We recommend that you bookmark this page for future reference.)
- Make sure you are editing your page and in the Middle Block WYSIWYG where you've been working.
- Open the "T" drawer by clicking on it. Go to the entry for “times of day.” Note how the style guide uses “a.m.” and “p.m.” with a space after the numeral. Our current page uses “AM” and “PM” with no space (see the last text on the page).
- Edit your page to follow UC San Diego style for times of day. Following the style guide will also prevent these times from appearing in the CMS spell check.
The ability to link to other content is a crucial ingredient of most web pages. We will review the best practices for links, and the two types of links you can use in the CMS.
It is important to keep links informative and predictable. Always use text that makes it clear where a link will take the user. Don’t use text like “click here” (it isn’t informative by itself). If a link will take a user to a document instead of another webpage, that link should be marked with the document type. Links should not open in a new window except in very limited circumstances.
Links should behave predictably across UC San Diego websites.
There are two kinds of links in the CMS: internal and external.
Internal links are links that go to other resources (usually pages or files) in your CMS site. Normally, if a page is renamed or moved, it will break links to that page (because the location in the CMS is what creates the URL, or web address). If the link is an internal link, the CMS can track these links and repair them when the page gets republished (this is one reason Blink is republished every weekend). Always use internal links for links within your own site.
External links are for links to resources outside of your CMS site.
We’ll start with an internal link to a file.
- Make sure you are editing your page and in the Middle Block WYSIWYG where you've been working.
- Use your mouse to select the words “Information Technology Accessibility Policy (PDF)” in the “Resources” section (note that we want to include the “(PDF)” in the link text).
- While the text is still selected, click on the chain link icon
to pop up the Insert/edit link dialog box:
The box next to Internal will be checked by default.
- Next to Link Source, Click on the Choose File, Page, or Link box to open the file chooser.

- Click on Browse
Now you are going to navigate to and select a file within the CMS.
You can see your current location from the breadcrumb trail: Sandbox / training / yourlastname-yourfirstname. The breadcrumb trail is made of links to folders in this site. Click on Sandbox to go to the top level of the site.

From here you can scroll down and see the next level of folders in the site. The folder you are in is white (like Sandbox) – this folder is open. Other folders are closed, and are yellow. To open a folder, click on the folder name.
- Open the folder named ‘_files’ by clicking on the folder name.

- There are multiple files in this folder, but we want the one named ‘policy.pdf’ Click on the radio button next to ‘policy.pdf’ to select it.

- Click Choose in the upper right corner.
- You will return to the Insert/edit link window. Click OK
- You will see that the text for ‘Information Technology Accessibility Policy (PDF)’ is a light blue and if you hover your mouse over it, it will become underlined. You have added the link!
This example was a link to a file. You can also create an internal link to another page.
- Add an internal link to the campus CMS page in the Sandbox site. Follow the steps above with the following differences:
- Find the text “campus CMS” on your page (you can use ctrl+f in most browsers). Highlight it and click the link button to open the file chooser. This time, navigate to the page Sandbox/cms/index and add the link. Click Choose.

Now we’ll add two kinds of external links.
- First, let’s create an email link. Select the text “wts@ucsd.edu” towards the end of the text content.
- Click on the chain link icon and click the external link checkbox. Type “mailto:wts@ucsd.edu” into the Link field (remove the pre-filled https://).
Make sure you include ‘mailto:’ for email links.
- Click the OK button. You’ll see the email address has automatically formatted as a link.

- Now we'll create links to External pages. Select the words “Web Content Accessibility Guidelines (WCAG) 2.0” in the third paragraph and then click on the chain link icon to pop up the insert link dialog box.
- Click the checkbox next to “External.”
- In the Link field, type or copy-paste the URL: https://www.w3.org/TR/2008/REC-WCAG20-20081211/ (replace the pre-filled https://)
Note: If you copy and paste a link from a Word or similar document, be sure to double check for (and remove) any hidden spaces at the beginning or end of the link. They will break the link.
- Click OK to finish the link.

- Repeat this process for the following text and links:
“screen reader in use” https://www.youtube.com/watch?v=q_ATY9gimOM
“UCOP Electronic Accessibility” https://www.ucop.edu/electronic-accessibility/
- Sometimes you’ll have text that is a URL. Generally, these should be converted into link text that can be easily ready by a human. This also makes them easier to scan and easier for screen reader users to listen to. It is much easier to read and hear something like “New York Times article” than “https://www.nytimes.com/2017/10/11/nyregion/college-websites-disabled.html.”
In the WYSIWYG, select the text https://www.nytimes.com/2017/10/11/nyregion/college-websites-disabled.html
- Copy the link text (Ctrl-C)
- With the text still selected (you may need to select it again), click on the chain link icon to pop up the insert link dialog box.
- Click the checkbox next to “External.” Paste the copied URL into the Link field.

- The Text to Display field also has the URL. Edit this field to a readable phrase that lets the user know where the link is leading to. This could be the article title, or a short description. Do not use any variations of ‘click here.’ ‘Click here’ is not informative and it is not accessible.

- Click OK to finish the link.
- Double check that the link text is readable and not a URL.
- Repeat this process for https://www.d.umn.edu/~lcarlson/atteam/lawsuits.html
Modules are pre-formatted blocks that you can add to a page to help direct a user's attention.
Somewhat like an image, modules are items that are separate from pages, but can be added to a page. A single module (or image) can be used by multiple pages. Unlike images, modules are designed in the CMS. For this exercise, we will add a pre-existing module to your page.
To learn more about modules, including the different types and how to create them, see Module Best Practices.
- Make sure you are editing your page.
Modules don’t get added to the WYSIWYG like images do. Instead, each module needs to be in a separate block. So far, you have been adding content to a single Middle Block. Now let’s add a second Middle Block.
- Scroll until you can see the section called Middle Blocks. Add a new Middle Blocks section by clicking the green + to the right of Middle Blocks.

After you add the Middle Blocks section, some new information will appear next to the green + . You can see that there are two Middle Blocks and you can use the arrows to reorder them, or the red X to remove a Middle Block. Mouse over any additional icons to learn what they do. You should also see options to "drag" and "move to the bottom"
- Scroll down to the second Middle Blocks section (where the WYSIWYG is empty).

Note: You should also see a "2/2" to the left of the words "Middle Blocks." This will help you navigate the page.
- Under Content to Use: select Shared Block.

- The WYSIWYG is now replaced with a file chooser. Use the File chooser to select the shared block located at “_modules/top-tips-cta”

This works just like navigating to an internal link. Go to the Browse tab. Click on “Sandbox” in the breadcrumbs to get to the top folder of the site. Then click on the _modules folder. Then click on top-tips-cta. Then click Choose.
- Preview your page and scroll down to the bottom and see what the module you added looks like.
- Submit your changes to the CMS.
Now that you can see how your page looks, you should see if there are any improvements you can make so the page content is easier to scan. Find where you can add the following (these are not marked in the jane-doe example page, you need to use your judgement):
- Two places where a subheading would be useful (you may need add new text or reword existing text to make good headings)
- Two places where a bulleted list would be helpful
Once you have made these changes, publish your page to stage again.
Complete the training exercise review form to request a review of your training page.
Your CMS training is not complete until we review your page and confirm your new CMS access.