Cascade Training Transcript

Home , Biffco, Sidebar (computing)

Cascade Training Table of Contents Step 1: Download the Files ...... 3 Step 2: Login to Cascade ...... 3 Step 3: Learn how to Navigate Cascade ...... 3 The Dashboard: ...... 3 The Menu Bar ...... 4 Site List Explanation ...... 4 The Asset Tree ...... 4 The Sub Menu ...... 5 Step 4: The Templates Explained ...... 5 Learn the Template Elements ...... 5 Template Element: Display Name & Title ...... 6 Template Element: Banner Image ...... 6 Template Element: Main Content & Sidebar ...... 7 Template Element: Navigation & Maintained by ...... 7 Step 5: Uploading, Editing, & Creating Assets ...... 8 Part 1 Basics ...... 8 Uploading an Image ...... 8 Editing an Image to use for a Banner ...... 9 Creating a Folder ...... 10 Upload a Document (PDF) ...... 11 Step 6: Editing Pre-existing Pages ...... 12 Index page: Edit the Slideshow ...... 12 Index page: Applying Multiple Headings ...... 12 Index page: Creating a Hyperlink ...... 13 Recommended (and very useful!): Creating a Button from a Hyperlink ...... 14 Index page: Updating the Maintained By Region ...... 15 Step 7: Save & Preview and Submit ...... 15 Save & Preview, Review, and Drafts ...... 15 Don't forget to Submit ...... 16 Step 8: Publishing ...... 16 Publishing: Sending your edited page to the World Wide Web ...... 16 View a Test Page in Horizon ...... 17 Cascade Training Step 9: Uploading Assets (One More Time for Practice!) ...... 18 Part 2: The Basics and a Helpful Tip ...... 18 Upload a Main Content Area Image and Edit it ...... 19 Try it on Your Own: Upload the "HillvalleyTelegraph.pdf" into the correct folder...... 20 Check your work: Watch the Video on How to Upload this Document ...... 20 Step 10: Main Content Images & Word Wrap ...... 21 Clock Tower Page: Add an Image to Main Content Area & Turn on Word Wrap ...... 21 Clock Tower Page: Create a Hyperlink to a PDF ...... 22 Clock Tower Page: Browsing for Photos, Word Wrap Practice, Final Edits ...... 22 Step 11: Save & Preview and Submit ...... 24 Clock Tower Page: Preview Draft, Review, & Don't forget to Submit! ...... 24 Step 12: Publish Final Edits ...... 25 Clock Tower Page: Sending your Edits to the World Wide Web (Publishing) ...... 25 View a Test Page in Horizon ...... 26

Cascade Training Step 1: Download the Files

To begin the cascade training, first you will want to open a Firefox browser. All of the training videos are completed using Firefox. This will help keep the training consistent throughout. Next, you’ll want to go the online Cascade training webpage and under “Step 1,” you’ll see “download the files.” Number 1 is a hyperlink, that when you click on it, will prompt you with a popup box. In Firefox, the default is “save file” and this is exactly what you want to do, you want to save this file. With “save file” selected, we are going to click “ok” and you will see that it has now downloaded our new folder.

In Firefox, you can hit the download button and then select the “open containing folder” button. This will take you straight to your “downloads” folder. Here we can see “Extract_Me.zip,” next what we want to do is right click on our zipped folder and select “extract all.”

A new pop up box will appear asking you to select a destination and extract files. The default location is perfectly fine and you can head on down to “extract.” A new window will appear and you can close this out. Now within your downloads folder, you should see an “extract_me.zip” and an “extract_me.” The file that you want to use is “extract_me.” We’re going to double click within that and click again, you’ll see a containing folder called, “Cascade_Training.”

What we want to do now is send this to our desktop for easier access. Now we can browse to our desktop location and see that we have a Cascade Training shortcut. The files within that are all the files that we work with during the training.

Step 2: Login to Cascade

To Login to Cascade, please use your UNCW account username, which is the same as your UNCW email without the “uncw.edu,” and your UNCW account password. Then select “Login”

Step 3: Learn how to Navigate Cascade

The Dashboard:

After you login you will see one unified dashboard, we will go over a few of the essential widgets. By default, the dashboard has a welcome widget located in the top left-hand corner. This widget has your name, the date, the number of notifications you have, an “add widget” button, and a “reset dashboard” button. The “my sites” widget is a list of sites you have access to and mimics the “site list” you see in the “site menu.”

“Tasks” are new to Cascade, you can assign yourself tasks or even assign takes to another user. “My Content” has a tab menu across the top, which consists of “recent history,” “owned content,” “drafts,” “workflows,” and “locks” for locked assets. Lastly, your dashboard is fully customizable, allowing you to drag and drop widgets, add widgets, and even remove widgets. Cascade Training The Menu Bar

The rest of the Menu Bar is comprised of the Dashboard Home button, the Site Menu, My Content, a Search function, your User Account Settings, and a “hamburger menu” that allows you to access various reports.

Remember that using the Dashboard Home button will always get you back to your dashboard. When you click on an asset, two new buttons appear in the Menu Bar, “Add Content” and “Site Content.” “Add Content” is how you will add new assets to your website, like “blocks,” “files,” “folders,” and even new html pages. “Site Content” allows you to browse a site’s folders and it’s assets. Site List Explanation

Let’s talk about the three sites you have access to in Cascade.

In the menu bar, please click on the “site list menu.” When the menu appears, you will see three sites: training, dev, and uncw.edu.

Training is for training purposes. Every user who goes through training has a folder here and that folder will never go away. You can always come here to exercise your web design skills in a safe environment.

Dev is for websites that are new, being restructured, or redesigned. It goes to a local web server here on campus, and that web address is webtest.uncw.edu. Please keep in mind that this web address cannot be accessed from off-campus, unless you use Horizon.

Lastly, we have “uncw.edu.” This is our live production server, if you have a website that is currently live on uncw.edu this is where you will go to access it. The Asset Tree

For training purposes, go to the “site list menu” and choose “training.”

The “asset tree” is always located on the left-hand side of the screen and allows you to see the structure of your website. So far, our “asset tree” consists of the “training” folder and the “users” folder. Clicking on the “users” folder will reveal your user training folder and clicking on that folder will reveal your training website.

For this example, our website structure consists of two folders, a “documents” folder and an “images” folder. It also consists of three html pages, an “about” page, a “clocktower” page, and an “index” page. Lastly it consists of a navigational element also called a “block.”

There are a total four icons in the asset tree. The first icon is the folder icon. It is represented by a manila folder.

The second icon is the file icon, it is represented by a white and black symbol that looks like a sun and a few mountains. This represents anything that you upload to your website, whether it is an image, a pdf, a spreadsheet, or another type of document or file. Basically, anything you upload to your website will always get this icon.

The third icon looks like a black piece of paper with white lines. It represents an HTML page within your website. In this site’s structure remember, we have three html pages, an “about” page, a “clocktower” page, and an “index” page. Remember, that “index” represents your site’s homepage. Cascade Training Lastly, the fourth and final icons looks like a 3-D cube. Called your nav, this is for your site navigation.

*Please note: For the training, you will not have a folder titled "seahawks," instead you will have a folder that uses your UNCW username. In addition, this folder will be nested with a yearly folder and an online folder. Please select these containing folders until you see your user folder. The Sub Menu

For training purposes, please click on the “training” site from the “site list menu.”

In your “asset tree” go ahead and navigate to your user folder and start on your “index” page. Whenever you click on an asset in Cascade you will also be presented with what we call a “sub menu.” The “sub menu” is located on the right-hand side of the page. From here you can see “edit,” “publish,” “comments,” “details,” and more.

“Edit” will allow you to edit the asset.

“Publish” will allow you to publish the asset, sending it to the world wide web.

“Comments” allow you to make comments on the page.

“Details” gives you a brief description of the page without having to click on “edit.”

“More” gives you even more options such as, “move,” “rename,” “copy,” “delete,” and “unpublish.” None of which you want to do to your index page.

In addition, you will also have the option to view this page “live.”

Step 4: The Templates Explained

Learn the Template Elements

Cascade templates are known as fluid templates, meaning that one template can create a variety of designs depending on how you use the elements.

So, let’s discuss the five main elements of the UNCW Cascade templates: the banner image, the navigation, the main content, the side bar, and the page maintained by.

First, we have the banner image. It always appears at the top of a page and you can choose between a slideshow, as seen here, or a single static image.

Banner images also come in three sizes; small, medium, and large. The 3-column banner image, as seen here, is the largest. A 2 column banner image is the medium. And lastly the one column banner image is the smallest. You also have the option to not use a banner image at all.

Please keep in mind that 3 column banner images should only be used on your index page.

Fun fact: Your index page is also known as your landing page or homepage.

Second, we have the navigation, which always appears on the left hand side of your web page as a list of hyperlinks. You can edit your navigation by using the nav block located in your asset tree. Cascade Training Third, we have the main content, the meat and potatoes of your web page. This is the most important content of your web page.

Fourth is the side bar. The side bar always appears on the right-hand side of the page in a light teal box. The side bar is optional, you can turn it on or off for a variety of designs.

Lastly, we have the page maintained by. The page maintained by appears at the bottom of every web page within your web site. It informs users who maintains content of a single page. Template Element: Display Name & Title

In order to see and edit the template elements we’ll select “edit” from the “sub menu.”

The first section you come across is the “Display Name” and “Title.”

We’ll start with “Display Name.” When editing a pre-existing HTML page, the display name is for internal use meaning no one outside of Cascade can see this. However, if you are creating a page from scratch the “Display Name” you enter will become part of the page's URL and also the name you see in the “Asset Tree.” For example, you see “index” here, it also matches “index” in your “Asset Tree.” When creating a page from scratch, the display name should be short, sweet, and not use spaces, as web servers have a difficult time resolving spaces.

Next, we have “title.” The “title” is for your users. Titles appear on browser tabs to indicate what page a user is viewing. The format for the title is the Name of the Page: the department or site name: UNCW.

For example, this tab has a title of Web Publishing: UNCW. From the Tab Title, I know that this is the home page of the Web Publishing site in UNCW. Homepages can simply start with the Site Name or Department Name: UNCW.

In another example, this tab has a title of Creative Services: University Relations: UNCW. From the Tab Title, I know that that this is the creative services page in the University Relations site of UNCW.

Fun Fact, when searching the web the title also appears as the main hyperlink in the search results. For example, when searching the web for “uncw creative services OUR,” you can see in the first result the same title as the one that appears in the tab. Template Element: Banner Image

Remember that we selected “edit” from the “sub menu” in order to access the template elements.

Below the “display name and title” section is the “Group 2” section. This indicates that you are using a Group 2 template.

Within this section, the first region is for the Banner Photo. Please click on “Banner” to reveal the selectable options. First, you have to choose the type of Banner you wish to use, a slideshow or a single image.

After selecting the type of Banner you are then presented with 3 more options to choose the size of the banner image. Remember that a 3 column image is the largest, a 2 column banner image is the medium size and a one column banner image is the smallest. Please keep in mind that 3 column banner images should only be used on your index page.

No matter what option you choose, the system will always tell you the required size of the image, as seen here. Cascade Training This section below the size requirement indicates what image you are using or wish to use for your banner image.

The Alternative text is required, as indicated by the red asterisk. The primary purpose of alternative text is to describe images to visitors who are unable to see them. Alternative text is read by screen readers, and the text is displayed for browsers that block images. Including alternative text with your images ensures all users, regardless of visual ability, can appreciate the content on your site. So, please be mindful of how you describe your images.

Slideshows work similar to the “single image” option.

After selecting your preferred width, you will need to choose which photo will appear as your first slide. Please note that you can add up to seven slides.

To modify the slideshow use the buttons on the right hand side. The arrows will reorder the slides, the green plus sign will add a new slide, and the red X will delete a slide.

The numbers that are shown here indicate, not only the order, but also the number of slides you are using. Here we can see that this is the first out of three slides. Template Element: Main Content & Sidebar

Remember that we selected “edit” from the “sub menu” in order to access the template elements seen here.

Below the “Banner” section is the main content region. This is where you want to insert the most important information for your web page. In the main content region, you will see a WYSIWYG editor that resembles Microsoft word. Hover-over the tools to see a descriptive word of what each tool does. The “Formats” dropdown is how you will apply headings.

Headings give structure to your web page and it is important to use headings in an order. Screen readers and browsers rely on the use of organized headings to outline your webpage for visitors who are unable to see it. Which is why we stress, please use headings in an order that helps to outline your page.

The “Formats” dropdown is also how you can access several custom styles. Sectionheader 1, 2, and 3 should only be used concurrently with headings. Left and right are for word wrap. “Left” will put an image on the left and text on the right side of the page and “right” puts the image on the right side of the page with text on the left. The layout style turns table borders invisible and can only be applied to tables. Imagecaption transforms text for use underneath a photo. And lastly, both button and button expand create buttons, such as this, when the style is applied to a hyperlink.

The next region is the sidebar. The sidebar is optional, and always appears on the right-hand side of a page in a light teal container. You can turn the sidebar on and off by selecting “yes” or “no.” Choose “no” and the side bar will disappear from the page. The sidebar content reflects the WYSIWYF as seen in the “main content” section. Template Element: Navigation & Maintained by

Remember that we selected “edit” from the “sub menu” in order to access the template elements seen here.

Below the “Sidebar” section is the “Left navigation” region. Left navigation refers to the navigation which is being used on the left-hand side of your page, as seen here. There are two options to choose from, “Automatic” and “block.” Selecting automatic will “automatically” use the “nav” file, located here, in your asset Cascade Training tree, for the navigation on your web page. Block, on the other hand, will give you the option to browse and select the nav file you want to use. Majority of the time you will select “automatic” for Left navigation.

Next, we have the Maintained by region. This appears at the bottom of every web page in your website, as seen here. The format for this is your first initial, period space, last name and then your UNCW email address. You also have the option of using your departmental or organizational email for this region rather than a specific person’s information. For example, Watson college of education uses “Page maintained by Watson College” and their UNCW email address of [email protected].

Step 5: Uploading, Editing, & Creating Assets

Part 1 Basics

We’re ready to begin the hands-on portion of the Cascade training. The scenario for the training is that you are taking over editing our Back to the Future website from our old content manager, Sammy Seahawk and our website needs a few updates. For the first part of the training, we’ll be concentrating on editing our index page, also known as our homepage.

First, we’ll upload a new image for our slideshow, learning how to edit the image so that it is the correct size. Next, we’ll create a folder in our asset tree and upload a document. Then we’ll learn how to add images to and reorder the slideshow. Afterwards, we’ll apply a few headings in the main content and the sidebar sections. We’ll create a hyperlink to a PDF that we uploaded. And lastly, we’ll change the maintained by to your information. So, let’s get started! Uploading an Image

Before editing our html page, we need to upload all the assets that we’ll be working with. In this case, we’re learning how to upload an image asset.

First, take note of the organization of your website in the asset tree. It’s important to keep your website organized so that you don’t spend valuable time looking for information that should be readily available. Good organizational skills can save a you, and other content mangers, time and reduce stress.

Notice how there is a distinct folder for your images, titled “images”. We will want to upload all of our images into this folder.

Browsing through the images folder, we can see that there are two additional folders for organization, the “banners” folder, for banner images, and a “slides” folder for all of our slideshow images.

Please keep in mind that your UNCW departmental or organizational website might not have these additional folders, however you can create sub folders to help organize your website.

To begin, we first need to navigate to our “placement” folder, or where we want to upload our image. Since we’re uploading an image for our slideshow, we’ll want to navigate to the “slides” folder. In this case, our “slides” folder is our “placement” folder. To properly navigate to our placement folder, we need to click the arrow seen here. This arrow will, theoretically speaking, put us in the “slides” folder. Cascade Training Fun fact: You can tell that you are navigationally in asset tree by this light blue box.

Next, we’ll go up to the menu bar and select “add content”, “default”, “File”

Before uploading our image, double check the “placement” folder to ensure you’re going to upload your asset in the right location. For this training, it should read “slides.” to upload our image, scroll down until you see the section that is outlined in a dashed boarder.

You can drag and drop your files here or select “choose.” After selecting “choose” you’ll navigate to the Cascade training folder on your computer. For this scenario, we’re looking for the “B2TF_4” image.

Double click it or select it and click “open.”

Scrolling down we’ll see the image and a simple image editor. The next step is to select “save and preview.”

Save and preview creates a “draft” or “working copy” of the image. To finish uploading the image asset we need to select Submit.

Clicking submit will prompt you to comment on the changes you made. Since you didn’t make any changes, the pre-filled text will work perfectly. Next, select, “check content and submit”

This runs you through a series of checks to ensure your asset is complaint. There is a spell check, broken link and accessibility check. Since there are no errors, we can finish submitting our asset by clicking the check-mark button here.

Once the asset has been successfully submitted, we can see it populate in our asset tree under the slides folder. Editing an Image to use for a Banner

Since this image will be used in the slideshow on our homepage, we need to ensure that this image is the correct size. For a three-column banner our image needs to be 1000 pixels wide by 332 pixels high.

In order to see how big our image is, we’ll select “edit” from the “sub menu.” Our image is 1170 by 658, so we’ll definitely need to edit this image to the required size of 1000 by 332 px.

Let’s begin by taking a look at the tools in our image editor toolbar. Undo, redo, rotate counterclockwise, rotate clockwise, flip horizontal, flip vertical, and crop.

Please note that crop is grayed out and not selectable because it is your default tool. Meaning, it is already selected.

Next, we have the current width and height of our image.

Always ensure that the “lock” icon is closed and not “opened” or “unlocked”. Keeping the locked icon closed will ensure that the proportions of the image remain the same and don't get distorted.

To edit our image to the correct size, we’ll first change the width to match the required width of 1000 pixels. When we type in 1000, the height automatically updates to 562. We want to apply this resize by selecting the “check mark” box. Now, we’re halfway there, we just need to edit the height of the image to 332 pixels.

Luckily the editor keeps our image proportional, preventing us from creating a distorted image, such as this. Which is why we can’t type 332 in the height section because that would also proportionately change the width. Cascade Training Thus, we need to crop our image. To do this, first we’ll view our image in full screen by selecting full screen. Next we’ll draw a crop box anywhere on our image and let go. To change the dimensions of our crop box to match 1000 x 332, we’ll want to use the one-directional options in the middle, here, here, here and here. The selectors on each corner are two-directional, meaning it will change the width and height.

We’ll get the width to 1000 first, then the height to 332. Once our cropbox reads, “1000 x 332” we’re ready to apply the crop by clicking on the “crop box” in our toolbar.

We’ve done it! Our width and height now read 1000 px by 332! Let’s save and preview our image. Remember that save and preview only creates a draft. In order to finish editing our image we need to select “Submit”.

Since we cropped our image, it’s a good idea to detail this in the comments. We’ll type, cropped this image to 1000x332 and then click “check content and submit. Since there are no compliance errors, we can finish submitting by selecting the check mark button here.

Voila! We successfully cropped an image for a banner or slideshow! Creating a Folder

Before editing our html page, we need to upload all the assets that we’ll be working with. In this case, we’re trying to upload a document.

Before we begin, take note of the structure of your website in the asset tree.

It’s important to keep your website organized because it will save you valuable time and reduce stress.

Looking at our website structure, there isn’t a designated folder to upload documents to. So, we need to create a “documents” folder.

To begin, we first need to navigate to our “placement” folder, or where we want to create our new documents folder. In this case, our “user-folder” will be our “placement” folder. To properly navigate to our placement folder, we need to click the arrow seen here. This arrow will, in theory, put us in our “user” folder.

Fun fact: You can tell where you are navigationally in asset tree by this light blue box.

Next, we’ll go up to the menu bar and select “add content”, “default”, “Folder”

Before adding a “folder name” double check the “placement” folder to ensure you’re going to create your folder asset in the correct location. For this training, the placement folder should be your “user” folder.

Once you have verified the correct placement folder, simply enter a folder name of “documents.”

Remember, that items in your asset tree cannot have spaces since web servers have a hard time handling spaces. Luckily, Cascade will help with this, for example, if I insert a space after the word “documents” and try to select “submit”, the system will flag the error, stating that the name does not meet the above requirements, or contains and illegal character. The system will also provide a suggestion. You can either fix the folder name yourself or take Cascade’s suggestion name.

For this example, I’ll use the suggested name.

Now that we have an approved folder name, we’ll click “submit” in the top right-hand corner.

We’ll complete the submission by clicking the finish button located here. Cascade Training There we go, we successfully created a documents folder in our website. Upload a Document (PDF)

Before editing our html page, we need to upload all the assets that we’ll be working with. In this case, we need to upload a document.

Before we begin, take note of the structure of your website in the asset tree.

It’s important to keep your website organized because it will save a you valuable time and reduce stress.

Notice how there is a distinct folder for your documents, titled “documents”. We will want to upload all of our documents into this folder.

To begin, we first need to navigate to our “placement” folder, in other words, the folder where we want to upload our document. In this case, our “documents” folder is our “placement” folder. To properly navigate to our placement folder, we need to click the arrow seen here. This arrow will, theoretically speaking, put us in the “documents” folder.

Fun fact: You can tell where you are navigationally in asset tree by this light blue box.

Next, we’ll go up to the menu bar and select “add content”, “default”, “File”

Before uploading our PDF, double check the “placement” folder to ensure you’re going to upload your asset in the correct location. For this training, it should read “documents.”

To upload our document, scroll down until you see the section that is outlined in a dashed boarder.

You can drag and drop your files here, or select “choose.” After selecting “choose” you’ll navigate to the Cascade training folder on your computer. For this scenario, we’re looking for the “cuscofax.pdf” document.

Double click it or select it once and click “open.”

Documents and PDFs are not editable in the system. However, we do see that the system received our file, the file name, and the size of our document.

The next step is to select “save and preview.” Save and preview only creates a “draft” or “working copy” of the PDF. We’ll preview the PDF to ensure we have selected the right one. You’re Fired! Yes, that’s the right one. To finish uploading the PDF asset we’ll select Submit.

Clicking submit will prompt you to comment on the changes you made. Since you didn’t make any changes, the pre-filled text will work nicely. Next, select, “check content and submit”

This screen will take you through a series of checks to ensure your new asset is complaint. There is a spell check, broken link and accessibility check. Since there are no errors, we can submit our asset by clicking the finish button here.

Once the asset has been successfully submitted we can see it populate in our asset tree under the documents folder.

We successfully uploaded a PDF to our website. Cascade Training Step 6: Editing Pre-existing Pages

Index page: Edit the Slideshow Once you’ve uploaded all the assets that you’ll be working with, you’ll be ready to add those assets to your HTML page.

The first thing we’re going to do is add our edited image to our slideshow on the index page, also known as our homepage.

To begin, we’ll select the index page in the asset tree, then go to the sub menu and select “edit.”

From here, we’ll scroll down to the Banner region. Please click on “Banner” to reveal the editable options.

We need to add a new slide to our slideshow. To add a new slide, we’ll use the buttons to the right.

Remember that the numbers here indicate, not only the order, but also the number of slides you are using. We can see that this is the first out of three slides.

Since we’re adding a slide to the end of the slideshow, we’ll scroll down until we 3 of 3. Once we locate 3 of 3 we’ll use the green plus button to add a new slide. Turn 3 of 3 into 3 of 4.

Scroll down and locate the blank slide 4 of 4. Notice that the system will always remind you about the required Banner image size.

We’ll select “choose file.” A menu option will appear one the right side of the screen. We have the ability to look through our recent history or browse for our image. Remember we’re looking for our recently uploaded image, B2TF_4.jpg, and Looking through my options in the “Recent” section, I can see the “B2TF_4.jpg” file here. I’ll select the file which will display, not only a preview, but also other information about the image.

Next, I’ll select “choose” in the top right-hand corner.

Now we need to enter some Alternative Text. The Alternative text is required, as indicated by the red asterisk. The primary purpose of alternative text is to describe images to visitors who are unable to see them. So, please be mindful of how you describe your images.

For the training, we’ll describe this image as Back to the Future Part 2.

Since I can see that Back to the Future Part 3 is above Back to the Future Part 2, I now want to reorder the slides into chronological order.

All I need to do is move Part 2 up by selecting the up arrow here.

And voila! Our slides are now in the correct order.

From here, you can either “save and preview” then “submit your changes” to complete the edit. Or, if you’re taking the training, you can stay on this screen and proceed to the next video. Index page: Applying Multiple Headings

Remember that we selected our “index” page from the “asset tree,” then clicked on “edit” from the “sub menu” in order to access the template elements seen here. Cascade Training

To apply a heading we’ll scroll down to the “main content” section.

We want to apply a few headings to give structure to our webpage. Remember, it is important to use headings in an order since screen readers and browsers rely on the use of headings to outline your webpage for visitors who are unable to see it.

Highlight the text “Back to the Future of Web Design.” Then navigate to the “formats dropdown” and go to “headings” “heading one”

If you aren’t sure what heading is being used, you can always revisit the formats dropdown to see which header has been applied. The gray tick mark here indicates that we’re using a heading one. You can also see which heading a section is using by looking at the area here at bottom of the main content section. See “h1”.

Next we’ll highlight Florence Nightingale Affect, go to the formats dropdown, and go to “headings” “heading one.”

Now we need to apply a few headings in the side bar section. Remember, a screen reader is going to read all of the main content section first then read the sidebar second. So, if we choose to, we can restart using a heading one in the sidebar.

We’ll select cusco company go to the formats dropdown, and go to “headings” “heading one.”

Then biffco company go to the formats dropdown, and go to “headings” “heading one.”

And lastly go to the formats dropdown, and go to “headings” “heading one.”

Now we’re done adding headings to our index page.

Remember that we selected our index page from the asset tree, then clicked on “edit” from the “sub menu” in order to access the template elements seen here.

To create a hyperlink to the PDF we uploaded, we must first highlight the text we wish to link it to. We’ll highlight the last sentence in the Cusco Company section, “I’ll get fired.” From here, you can either right click and select link, or select the “insert edit link button” from the WYSIWYG toolbar.

Regardless of which option you choose, a popup box will appear.

The first option you have to select is internal vs external. You will choose internal if you are linking to anything within the website that you maintain. You will choose external if you need to link to anything outside of the website you maintain. This option allows you to insert a URL.

Since our PDF is uploaded to our website that we maintain, we’ll use internal. Next we need to locate our file.

We’ll select “choose file.” A menu option will appear one the right side of the screen. Cascade Training Remember, we have the ability to look through our recent history or browse for our image. We’re looking for our recently uploaded PDF, cuscofax.pdf, and Looking through my options in the “Recent” section, I can see the “cuscofax.pdf” file here. I’ll choose the file then select “choose” from the top left hand corner.

Next, we see the anchor section. Usually, an anchor appears as a hyperlink to another location on the same page. We’re creating a hyperlink to a PDF, not to another location on the same page, so we’ll skip this section.

The text to display is the clickable text that appears as a hyperlink on the page.

The title is a message that appears when a cursor is positioned over the hyperlink. If you want to practice this, we can insert “Click here to view the Cusco Fax”

The target attribute specifies where to open the linked document. You have two options, None and New Window. None is the default and opens the linked document in the same frame as it was clicked. New Window opens the linked document in a new window or tab. As a general rule, links that take users to another page in the same website are internal links. Internal links should never open in new browser tabs, but rather the same tab the user is on. Meaning that if the link is internal you should leave the target as “none.” However, PDFs are a “special case” where you, the content manager, can choose your preference between None and New window. For this example, I’m going to choose “New Window.”

Lastly, the class section gives you the option of turning this hyperlink into a button, such as this. If you’re interested in this option, please watch the next training video on creating buttons.

For now, we’ve marked “internal” since our PDF is within our website. We located our PDF, we inserted a sample title, and lastly chose “target” “New window.”

We’ll select OK to save our changes. We can now see that I’ll get fired is a hyperlink.

Remember that we selected our index page from the asset tree, then clicked on “edit” from the “sub menu” in order to access the template elements seen here.

To turn your hyperlink into a button, we must first get our hyperlink on a separate line.

Put your cursor in front of your link and press enter or return. Then, you can either right click and select link, or select the “insert edit link button” from the WYSIWYG toolbar.

Regardless of which option you choose, a popup box will appear.

To create a button, we’ll need to use the Class section.

Selecting one of the last two options, “button” or “button expand” will turn this hyperlink into a teal button. Choosing “button” will create a button around the hyperlinked text. Whereas button expand will create a full width button that expands to the entire width of the container. For example…

The button expand works well in the sidebar section, so we’ll choose “button expand” for this example. Have fun with it and give either option a try.

Once you’ve chosen your button style, select “ok” to save your changes. Cascade Training From here, you can either “save and preview” then “submit your changes” to complete the edit. Or, if you’re taking the training, you can stay on this screen and proceed to the next video. Index page: Updating the Maintained By Region

Remember that we selected our index page from the asset tree, then clicked on “edit” from the “sub menu” in order to access the template elements seen here.

The last edit we need to make is to update the Maintained by Region. Currently, this section reflects the old content manager’s information. Since you are now updating the page, you need to replace this section with your information.

From here, you can either “save and preview” then “submit your changes” to complete the edit. Or, if you’re taking the training, you can stay on this screen and proceed to the next video.

Step 7: Save & Preview and Submit

Save & Preview, Review, and Drafts

Remember that we selected our index page from the asset tree, then clicked on “edit” from the “sub menu” in order to access the template elements seen here.

Now that we have completed our edits for the index page, we’re ready to “save and preview.” Save and Preview is located in the top right-hand corner. Clicking Save and Preview generates a saved draft of your edits, as you can see from this indicator at the bottom of your screen. Only you can see your draft, no other content manager can see your edits or access your draft until you click submit.

Fun Fact: You can toggle between the current version and your draft by clicking here. Clicking current will allow you to view the current page without your edits. To return to your draft, click on the toggle button and select draft. Now you can see all the changes and modifications you have made to the current page.

After clicking “save and preview” we need to review our edits:

First, we added a banner photo, which looks really good and is the same size as our other slides.

Next we applied several headings which help to structure our page.

Then we hyperlinked our cusco fax PDF to the words “I’ll get fired.” When I click on the hyperlink, I can see that it is working. And if you didn’t apply a button class to your hyperlink, that is perfectly okay.

Lastly we updated the maintained by with your information.

At this point, if you see something you wish to change or modify you can select “edit” from the sub menu.

Since I didn’t see anything that needed editing, and all of our changes and modifications look good and are within the UNCW guidelines we’re ready to submit our changes to the system. Cascade Training From here, please stay on this screen and proceed to the next video to learn about submitting your saved draft. Don't forget to Submit

Remember that we are viewing a draft of our index page, as indicated here.

We just finished reviewing all of our edits which not only look good they are also within the UNCW guidelines, so we’re ready to submit or save our changes to the system.

The general rule for Cascade is, don’t forget to submit.

So, Select submit in the sub menu, this will prompt you to comment on the changes you made. In this instance, the pre-filled text is quite detailed and will work perfectly. Next, select, “check content and submit.”

This guide will navigate you through a series of checks to ensure your page is ADA Compliant. There is a spell check, broken link and accessibility check.

The red circle in the spell check box indicates how many spelling errors your page has. If there are more than 9 you will see a 9 +. You have two options for the spell check, ignore or fix.

Fix will allow you update the word without having to go back and edit it. If you need a word, acronym, or name added to Cascade dictionary permanently, please email [email protected] and ask that we add your words to the global dictionary.

It is very important to review the spelling errors. Let’s practice fixing some of our errors. Please update the 60’s, 70’s, 80’s to the version with an apostrophe.

Once you’re done reviewing the spelling errors, we’ll navigate through the rest of the checks by using the right arrow, here. There are no broken links or accessibility issues, congratulations!

Now that we’re finished reviewing the errors, we’ll select the “finish” button to complete our submit which is saving in the system.

When you finish the submit process, your edits are finalized in the system. They are not published, they are simply submitted, or saved. Meaning, other content managers can see the changes you made.

You can leave your submitted changes in the system for as long as you need to or until you are ready to publish and, the changes you have made will not be visible on your web site until you select publish.

If you’re ready to publish please stay on this screen and proceed to the next video.

Step 8: Publishing

Publishing: Sending your edited page to the World Wide Web

Remember that we are viewing the submitted or saved version of our index page.

We just finished reviewing all of our edits and submitting our changes to the system.

We are ready to publish our page and send it to the World Wide Web. Cascade Training To begin, please click on the “publish” button from the “sub menu.” A new screen will appear. Please select the “View publish settings” button to reveal your options. Let’s go over this menu.

Generate a publish report is always selected by default, this sends a Cascade notification on whether or not your publish was successful and how many errors, if any, the page had when it was published. These notifications are specific to Cascade only and do not appear in your campus email.

The output html is always selected by default and should not be deselected. This is telling the world wide web that this item is an HTML file.

The last two options are the important ones. The Destination is asking where you would like to publish this file; on our Live UNCW site or on our Test Server. Remember that the test server is a private web server located at webtest.uncw.edu and can only be viewed from on campus or through horizon.

By default, we always mark them both, to keep our servers in sync. We give you the option to choose one or the other in case you need to test a page before you go live. For example, let’s say you’re building a page with scholarship information. When you are finished, you may want to do a test publish so you can send it to your colleagues for review prior to launching it on the live server.

Since we’re not testing, we’ll check both the live and test servers then select the “publish” button in the top right- hand corner.

When you are finished, a pop-up box appears at the bottom of the screen stating, “page queued for publish view publish queue.”

Yes, there is a queue for going live. Cascade can process up to two publish jobs at a time. If you publish a third job, it will be queued until one of the other publish jobs is finished.

To view the publish queue, select the hamburger menu from the top right-hand side and a menu will slide out from the right. From there you can select “publish queue.”

Once your job is out of the queue, you can view your changes on our test server. To do so, click on the “search” button, this will bring up your “Recent” cascade activity. Simply click “index” from this list to quickly return to your index page. From there, click on “more” from the sub menu and go down to “live.” This will open the live version of your page in a new tab to the right. Remember, if you’re off campus, you will receive an error message when viewing the live version. To view the page from off-campus you will need to use the UNCW Desktop through horizon, located at uncw.edu/horizon. View a Test Page in Horizon

If you are working from home and need to view a page on the test server, you will need to use Horizon.

To begin, please open a new tab and go to uncw.edu/horizon.

From here, please select the “Click here to Access Horizon” button located in the sidebar.

This will open VMware Horizon in a new tab.

For this example, we are going to use “VMware Horizon HTML access.” Please select that option on the right- hand side.

You may be prompted to login with your UNCW username and password.

After logging in, you will see a screen similar to this. Cascade Training For this example, you can use either a Firefox or Google Chrome browser. I am going to use the Firefox browser. Please select the Firefox or Google Chrome button and wait for the browser to load.

Once the browser loads, you are now ready to copy and paste the web URL from Cascade. To do this, please go back into Cascade and choose “more” from the “sub menu.” After selecting “more” please go down and click the word “live”

When you are working from home you do not have access to view the test server, which is why you see this error page and also why we need to use Horizon.

What we need to do now is copy the Web URL from the address bar. After you have copied the web URL you are ready to paste it in the VMware Horizon client.

To do this, please click on the vmware horizon client tab and, in order to paste the URL, we will need to use a special tool.

You should see a protruding tab on the left side in the middle of the screen. Please click on this tab and then go up to the top and select the “open copy and paste panel” button.

By clicking this button you will see a copy and paste panel appear on the screen. Put your cursor inside this panel and paste your copied text using keyboard shortcuts. Command + V for Mac and Control + V for PCs.

Once the text is pasted in the panel, please put your cursor in the address bar within Horizon and paste your URL using your keyboard shortcuts, Command + V for Mac and Control + V for PCs and press enter on your keyboard.

You are now able to see your page on our Test Server.

Step 9: Uploading Assets (One More Time for Practice!)

Part 2: The Basics and a Helpful Tip

For the next round of edits, we’re going to do similar tasks for more practice. We’ll be working on editing the Hill Valley Clock Tower page.

When you are granted access to your UNCW site, you aren’t going to know what your pages are named in the asset tree, which can make navigating your site in Cascade difficult. However, if you know how to navigate to the page you wish to edit from your index or homepage, then you can quickly figure out the page’s name.

Starting on your index page, click on the “hill valley clock tower” link from your navigation. You will be taken to the “clock tower page” in your asset tree, as seen here.

Now we know that the page is called, “clocktower” in our asset tree.

For this page we’re going to add two photos, one we’ll upload and the other is already in Cascade, we’ll practice browsing for a photo, using word wrap, and then we’ll also create a hyperlink to a PDF. We’ll finish off the edits by putting the quote, “Ladies and gentlemen …. May it stand for all time!” in italics then updating the “maintained by” information at the bottom. So, let’s get started. Cascade Training Upload a Main Content Area Image and Edit it

Before editing our html page, remember that we need to upload all the assets that we’ll be working with. In this case, we’re uploading an image that we’ll use in the main content area.

Remember there is a designated folder for your images, titled “images” and we want to upload all of our images into this folder.

Since we’re uploading an image for our main content area, we do not need to use the “slides” folder or the “banners” folder. In this case, our “images” folder is our “placement” folder. To properly navigate to our placement folder, we need to click the arrow or “carrot” which is pointing to the right, as seen here. This arrow will, theoretically speaking, put us in the “images” folder.

Fun fact: You can tell where you are navigationally in asset tree by this light blue bar.

Next, we’ll go up to the menu bar and select “add content”, “default”, “File”

The first thing we want to do is double check the “placement” folder to ensure we’re uploading our asset into the correct folder. For this training, it should read “images.” Next, scroll down until you see the section that is outlined in a dashed border.

You can drag and drop your files here, or click anywhere in the box to open a file explorer window. Once the file explorer window is open, navigate to the Cascade training folder on your computer. For this scenario, we’re looking for the “clocktower.jpg” image.

Double click it or select it and choose “open.”

Scrolling down we’ll see the image and a simple image editor.

Remember, the tools in our image editor toolbar are Undo, redo, rotate counterclockwise, rotate clockwise, flip horizontal, flip vertical, crop and the width and height of our image. Always ensure that the aspect ratio is “locked.”

Next, we’ll go ahead and edit the size of the photo. Since we’re using this image in our main content area to demonstrate word wrap, we’ll want to reduce the size of this clocktower image to about 225 px. When using word wrap you, most likely, will not want a photo that is larger than 260 pixels.

To edit our image to the correct size, we’ll first change the width to match 225 pixels. When we type in 225 for the width, the height automatically updates to 163. Then we’ll select the “check mark” to apply this resize.

Now let’s preview a draft of our image. Remember that preview draft only creates a draft. In order to finish editing our image we need to select “Submit”.

Since we resized our image, it’s a good idea to detail this in the comments. We’ll type, “resized” in the dialog box then continue to click “check content and submit. Since there are no other compliance errors, we can finish submitting by selecting the check mark button here.

Voila! We successfully resized an image for our main content area! Cascade Training Try it on Your Own: Upload the "HillvalleyTelegraph.pdf" into the correct folder.

Check your work: Watch the Video on How to Upload this Document

Before editing our html page, we still need to finish uploading all of our assets that we’ll be working with. In this case, we need to upload a document.

Remember there is a designated folder for all your document files, titled “documents” and we want to upload all of our documents into this folder. Meaning, our Documents folder is our placement folder.

To properly navigate to our placement folder, we need to click the arrow or “carrot” which is pointing to the right, as seen here. This arrow will, theoretically speaking, put us in the “images” folder.

Fun fact: You can tell where you are navigationally in asset tree by this light blue box.

Next, we’ll go up to the menu bar and select “add content”, “default”, “File.”

Before uploading our PDF, double check the “placement” folder to ensure you’re going to upload your asset in the correct location. For this training, it should read “documents.”

To upload our document, scroll down until you see the section that is outlined with a dashed boarder.

You can drag and drop your files here, or click anywhere inside the box. After clicking inside the box, you’ll see a file explorer window, please navigate to the Cascade training folder on your computer. For this scenario, we’re looking for the “HillValleyTelegraph.pdf” document.

Double click it or select it once and click “open.”

Documents and PDFs are not editable in the system. However, we do see that the system received our file, the file name, and the size of our document.

The next step is to select “save and preview.” Save and preview only creates a “draft” or “working copy” of the PDF. We’ll preview the PDF to ensure we have selected the right one. Save the clock tower! Yes, that’s the right one. To finish uploading the PDF asset we’ll select Submit.

Clicking submit will prompt you to comment on the changes you made. Since you didn’t make any changes, and this is the “first version” we don’t need to add any additional text. Next, select, “check content and submit”

This screen will take you through a series of checks to ensure your new asset is complaint. Since there are no errors, we can submit our asset by clicking the finish button here.

Once the asset has been successfully submitted, or saved, we can see it populate in our asset tree under the documents folder.

We successfully uploaded a PDF to our website. Cascade Training Step 10: Main Content Images & Word Wrap

Clock Tower Page: Add an Image to Main Content Area & Turn on Word Wrap

Once you’ve uploaded all the assets that you’ll be working with, you’re ready to add those assets to your HTML page.

The first thing we’re going to do is add our edited clocktower image to our main content area on the clocktower page.

To begin, we’ll select the clocktower page in the asset tree, then go to the sub menu and select “edit.”

When getting ready to use word wrap with an image, we want to ensure we have enough content to wrap around the image, so a full paragraph is usually best. We’ll start with our cursor here at the beginning of the first sentence under the “history” section.

You can either “right click” and select image or click on the insert edit image button here. A pop up box will appear. Our image is internal, since we uploaded it to our website. We’ll click “choose file” and a side menu will pop out from the right hand side of the screen. Under “recent” we’ll see our “clocktower.jpg” image and click the radio button to the left then select “choose.”

Now that we have selected our image, let’s go through the rest of this pop-up box.

A decorative image is an image that is non-essential and has no relevance or importance to understanding the content and purpose of an html page. For example, if you have a page detailing UNCW policies and you insert a pretty photo of the UNCW campus in spring with flowers blooming onto the page to break up all the text, well that photo is not relevant to understanding any of the UNCW policies, so that image is a decorative image.

When we mark an image as “decorative” two things happen, (1) when a screen reader reads the page, it will act as though the image is not there, meaning it won’t describe the image. In addition, if an image is marked decorative then the alternative text will not show up if a browser happens to block the image.

The clocktower image is not a decorative image, since it is relevant to our clock tower page. So, we’re going to skip the checkbox. The image description is our alternative text and required for all images that aren’t decorative. Let’s describe our image as “ Save the Clock. Tower Graphic.” Next, we see the current dimensions of our image and lastly the “class” section is how we will turn on word wrap. Select “none” to reveal a dropdown box of options. “left and right” correspond to word wrap, where left will put the image on the left and right will place the image on the right. For this example, we’ll start with putting the image on the left and clicking “ok.”

Voila! The image is on the left and the text is on the right. Now, if we need to change the location of the image to the right instead of left, all we need to do is right click on the image and click on “image” or select the insert edit image button from the tool bar, then under the “class” dropdown select right instead of left.

From here, you can either “save and preview” then “submit your changes” to save your changes. Or, if you’re taking the training, you can stay on this screen and proceed to the next video. Cascade Training Clock Tower Page: Create a Hyperlink to a PDF

Remember that we selected our clocktower page from the asset tree, then clicked on “edit” from the “sub menu” in order to access the template elements seen here.

To create a hyperlink to the PDF we uploaded, we must first highlight the text we wish to link it to. We’ll highlight the first sentence in the Hill Valley Clock Tower section, “The clock tower was struck by lightening during an electrical storm.” From here, you can either right click and select link, or select the “insert edit link button” from the WYSIWYG toolbar.

Regardless of which option you choose, a popup box will appear.

Since our PDF is uploaded to our website that we maintain, we’ll use internal. Next we need to locate our file.

We’ll select “choose file.” A menu option will appear one the right side of the screen.

Remember, we have the ability to look through our recent history or browse for our image. We’re looking for our recently uploaded PDF, HillValleyTelegraph.pdf, and Looking through my options in the “Recent” section, I can see the “HillValleyTelegraph.pdf,” file here. I’ll choose the file then select “choose” from the top right-hand corner.

Next, we see the anchor section. We’ll leave this blank because we aren’t using anchors. Remember, an anchor is a web link that allows users to leapfrog to a specific point on a web page to save on scrolling. If you would like to see a good example of a page using anchors, please visit uncw.edu/adobe.

The text to display is the text we highlighted that will become the clickable text that for our hyperlink.

The title is a tool tip / message that appears when a cursor is positioned over the hyperlink. If you want to practice this, we will insert “Click here to view the PDF”

The target attribute specifies where to open the linked document. You have two options, None and New Window. The general rule for this is “if the link is internal then you always choose “none” unless the Internal link is a PDF, then you choose “new window.” Since we’re dealing with a PDF, we will choose “new window.”

We’ll select OK to see our hyperlink. We can now see that “The clock tower was struck by lightning during an electrical storm…” is a hyperlink.

From here, you can either “save and preview” then “submit your changes” to save your edits. Or, if you’re taking the training, you can stay on this screen and proceed to the next video. Clock Tower Page: Browsing for Photos, Word Wrap Practice, Final Edits

Remember that we selected our clocktower page from the asset tree, then clicked on “edit” from the “sub menu” in order to access the template elements seen here. Next we’re going to practice browsing for a photo that is already in our website then turn on word wrap for that photo. Cascade Training Remember, we want to ensure that we have enough content to wrap around the image, so we’ll start with our cursor here at the beginning of the first sentence.

You may notice when you do this that the hyperlink you created in the last step is highlighted a light blue color. This means that we are currently inside our hyperlink and if we were to add a photo here, that the photo would also be part of our hyperlink. Since we don’t want this image to be part of our hyperlink we’re going to use our keyboard left arrow to exit out of the hyperlink. See, when I use the left arrow the hyperlink is no longer highlighted.

Now that the hyperlink is no longer highlighted, I am safe to insert my photo. You can either right click and select image or you can use the “insert edit image button” from the WYSIWYG toolbar.

A popup box appears, we’ll select “choose file” to open our side menu. From here we’re going to click on “browse”. You’ll notice that we are currently in our documents folder, as indicated here and here. We actually need to navigate to our images folder so that we can browse for the image we want to insert. In order to do this, we need to get out of the documents folder. This here is called “cookie crumbs, it helps us move backwards in our site. Select your username, then you will see the documents and images folders. Congrats! You just navigated backwards! We’ll now select “images” from the menu.

If you would like to see what all the photos in the images folder look like, then let’s use this grid menu option here. Now you should see a thumbnail of each photo in the folder.

We’re looking for the “mattel-hoverboard.png”, we’ll select it, a check box will appear in the top corner of the photo, then we’ll click on choose.

Since this image is not decorative, we’ll skip the check box. Please type “Pink Mattel Hoverboard” in the “image description,” remember that is your alt text for the image.

Next, we’re going to slightly adjust the height of this image, since I think that it might be too long for the content in our paragraph.

In the future, please be mindful when adjusting the dimensions of a photo on this screen. It’s better to edit the photo in the photo editor since that reduces the file size of the image. When modifying an image in this screen, we only want to marginally adjust the dimensions by no more than 200 pixels.

In this scenario we’re going to modify the height to 125, which will adjust the width to 35 pixels.

Remember, to turn on word wrap we use the either “right or left” in the “Class” drop down. I’m going to choose left, since our other photo is on the right. When I click okay I’ll see the pink hoverboard to the right of my paragraph.

Let’s wrap up the rest of our edits. Scroll down to the “sidebar content,” highlight the quote “ladies and gentlemen…may it stand for all time” and put that in italics.

The format for this is your first initial, period space, last name and then your UNCW email address. If approved, you also have the option of using your departmental or organizational name and email for this region rather than a specific person’s information. … Cascade Training From here, you can either “save and preview” then “submit your changes” to complete the edit. Or, if you’re taking the training, you can stay on this screen and proceed to the next video.

Step 11: Save & Preview and Submit

Clock Tower Page: Preview Draft, Review, & Don't forget to Submit!

Remember that we selected our clocktower page from the asset tree, then clicked on “edit” from the “sub menu” in order to access the template elements seen here.

Now that we have completed our edits for the clocktower page, we’re ready to “Preview draft.” Preview Draft is located in the top right-hand corner. Clicking Save and Preview generates a saved draft of your edits, as you can see from this indicator at the bottom of your screen. Only you can see your draft, no other content manager cannot see your edits or access your draft until you click submit.

After clicking “save and preview” we need to review our edits:

First, we added the save the clocktower graphic and turned on word wrap.

Next we added a hyperlink to the Hill Valley Telegraph PDF, if we click on it, it should open in a new tab.

Afterwards, we browsed for a photo in our website, inserted it and turned on word-wrap. Finally, we italicized this quote in the side bar and updated the maintained by information.

At this point, if you see something you wish to change or modify you can select “edit” from the sub menu.

Since I didn’t see anything that needed editing, and all of our changes and modifications look good and are within the UNCW guidelines we’re ready to submit our changes to the system.

The general rule for Cascade is, don’t forget to submit.

Select submit in the sub menu, this will prompt you to comment on the changes you made. In this instance, the pre-filled text is quite detailed and will work perfectly. Next, select, “check content and submit.”

This guide will navigate you through a series of checks to ensure your page is ADA Compliant. There is a spell check, broken link and accessibility check.

The red circle in the spell check box indicates how many spelling errors your page has. If there are more than 9 you will see a 9 +. You have two options for the spell check, ignore or fix.

It is very important to review the spelling errors. Let’s practice fixing some of our errors. Please update the 1800s 1880s 1900s 1950s to the version with an apostrophe. Also, let’s fix the spelling of clocktower, as it’s Cascade Training two words. Place your cursor in the dropdown box then, on your keyboard, hid backspace or delete. Now you can type “Clock tower” You will see an option “add clock tower” select that.

Once you’re done reviewing the spelling errors, we’ll navigate through the rest of the checks by using the right arrow, here. There are no broken links or accessibility issues, congratulations!

Now that we’re finished reviewing the errors, we’ll select the “finish” button to complete our submit which is saving in the system.

When you finish the submit process, your edits are finalized in the system. They are not published, they are simply submitted, or saved. Meaning, other content managers can see the changes you made.

If you’re ready to publish please stay on this screen and proceed to the next video.

Step 12: Publish Final Edits

Clock Tower Page: Sending your Edits to the World Wide Web (Publishing)

Remember that we are viewing the submitted or saved version of our clocktower page and the changes that you have made will not be visible on your web site until you publish this page.

We are now ready to publish our page and send it to the World Wide Web.

To begin, please click on the “publish” button from the “sub menu.” A new screen will appear. Please select the “View publish settings” button to reveal your options. Let’s go over this menu.

The output html is always selected by default and should not be deselected. This is telling the world wide web that this item is an HTML file.

*Don't forget: Please respond to your ITS Request Ticket in order to notify the Web Team that you have completed the training. Cascade Training View a Test Page in Horizon

If you are working from home and need to view a page on the test server, you will need to use Horizon.

To begin, please open a new tab and go to uncw.edu/horizon.

From here, please select the “Click here to Access Horizon” button located in the sidebar.

This will open VMware Horizon in a new tab.

For this example, we are going to use “VMware Horizon HTML access.” Please select that option on the right- hand side.

You may be prompted to login with your UNCW username and password.

After logging in, you will see a screen similar to this.

For this example, you can use either a Firefox or Google Chrome browser. I am going to use the Firefox browser. Please select the Firefox or Google Chrome button and wait for the browser to load.

When you are working from home you do not have access to view the test server, which is why you see this error page and also why we need to use Horizon.

What we need to do now is copy the Web URL from the address bar. After you have copied the web URL you are ready to paste it in the VMware Horizon client.

To do this, please click on the vmware horizon client tab and, in order to paste the URL, we will need to use a special tool.

You should see a protruding tab on the left side in the middle of the screen. Please click on this tab and then go up to the top and select the “open copy and paste panel” button.

You are now able to see your page on our Test Server.