Getting Started Tutorial
This tutorial is designed to walk you through the BYU-I Content Management System (CMS) or Web Builder, and to better give you an understanding of the basic tools and methods used to operate in the Web Builder environment.
Logging into Web BuilderDo This
1. Use your BYU-I netID and password to login at one of the following web addresses:
http://ingeniux.byui.edu/beta/ or www.byui.edu/admin (Redirect)
2. Click on the plus sign (+) located left of the "Content Store" icon, displayed in the left window view. This will expand the CMS tree.
Finding Web Pages
If this is the first time you have logged in you should see the following folders in the left window view.
- Sand Box -- The “Sand Box” folder is a testing ground area consisting of exploratory items. All items are subject to change or deletion.
- Page Type Demos -- The “Page Type Demos” folder is a read only folder that consists of pre-constructed web pages.
These folders are for your use and can be helpful.
We call these folders and other items we may find in this left window view, CMS Pages.
Do This
1. We should search for your department’s home page. To do this type in your departments name in the “go to” search box located in the top right corner of the web builder.
2. As you start to enter the department name the menu should begin to populate itself. Select within the menu the name of your department.
If you selected the correct item it will display in the left window view. This will also remove the “Page Type Demos” and “Sand Box” folders from the view.
If this did not happen try selecting a different item from the “go to” search box.
To go back to seeing the “Page Type Demos” and “Sand Box” folders we can enter their names into the “go to” search box. We can also search for folders and other CMS Pages using an ID number.
Do This
1. In the “go to” search box type in x9170 and select “Page Type Demos”.
2. In the “go to” search box type in x189 and select “Sand Box”.
ID Numbers
- Page Type Demos = x9170
- Sand Box = x189
ID numbers are used often to refer to pages because they are unique among all CMS Pages. No two CMS Pages will share the same ID number, even when one CMS Page has been deleted.
---
If you click on the down arrow next to the “go to” search box, you will notice that the pages we have searched for in the past list them selves. This can be helpful when you are moving between pages.
What if you want to come back to these pages after logging in to Web Builder at a later time? These page entries will be gone after a new log in.
What we can do is set up a list of CMS Pages within the favorites section of your dashboard.
Favorites
The Favorites area is where you can store CMS pages that you want constant access to.
Do This
1. Make sure your home page is in the left window by selecting your home page from the “go to” search box.
2. Click on the “Dashboard” button located above the left window view.
3. Click on the “site” bar located below the “Dashboard” button.
4. Without selecting your home page, drag and drop the home page from the left window view in to the “Favorites” area under in the “Quick Links” column.
Next we can place the “Sand Box” and “Page Type Demos” folders into the favorites area.
1. Select from the “go to” search box the “Sand Box” folder.
2. Select in the left window view the “Content Store” Icon.
3. Without selecting the “Sand Box” folder, drag and drop the "Sand Box" folder from the left window view in to the “Favorites” area.
4. Now do the same process for the “Page Type Demos” folder.
Note
Drop CMS Pages on the words "Drag and drop pages here"when populating the favorites list.
You can also remove items from your favorites list by clicking on the X icon located to the right of the listed item.
You should now have your home page, “Sand Box” and “Page Type Demos” folders in the favorites area of your “Dashboard” work area. You can now go to your favorites and navigate to pages within the list.
In Progress Items
Do This
1. Click your “home page” in your favorites list.
2. Click on the “Check Out” button located in the “CMS Tool Bar”. This will activate the folder for editing.
Note: If the “Check Out” button is not available, find a different page within the “Sand Box” folder.
3. Click on “Content Store”.
Notice the CMS Page you checked out, your “home page”, is now located in the “In Progress Items” area. This is because when you checked out the your "home page", you placed the page under your control. All pages you have checked out will be listed under the “In Progress Items” list.
Recently Visited
Do This
1. Click on your "home page" in the "In Progress" list.
2. Click on the “Check in” button located in the “CMS Tool Bar”.
This will remove the page from editing status.
3. Click on “Content Store”.
Notice the CMS Page you checked in, your "home page", is now removed from the “In Progress Items” area, yet it remains listed in the “Recently Visited" list. All pages you have checked out in previous sessions will be listed under the “Recently Visited” list.
Active Users
Observe the “Active Users” list located within the “Site Status” column. You should be able to find yourself and possible others in this list. Those listed under “Active Users” are currently logged into Web Builder.
Be mindful that a large volume of user activity will slow down the performance of the CMS environment.
If you wish to contact any of these individuals you can click on their name and your computer’s e-mail client software will be activated allowing you to e-mail the selected individual.
There are many features available in the Web Builder’s interface designed to assist you in creating and modifying the web pages. Understanding how things work will be covered in this section.
CMS Tool Bar
The image below is a view of the “CMS Tool Bar”. Notice that some items may be missing from your tool bar or you may have additional items. The items listed here are the most commonly used items among BYU-I users.
Dashboard
New
Save
Preview
Check Out / Check In
Assign To
Rename
Refresh
Publish Site
Assets
The "Dashboard" button loads the dashboard work area. (Refer to the Dashboard Section for further information)
Selecting “New” displays a drop down menu consisting of the following:
- Folder - Used to group related Pages and/or Components
- Page - Web pages that can be viewed on the web
- Component - A collection of content used within web pages, but holds an identity separate from web pages.
By selecting one of these items we can create a new CMS Page.
Lets create a new web page to accompany your home page.
Do This
1. Select your home page from the favorites list in your dashboard work area.
2. Make sure your home page is selected by confirming that your home page is highlighted in blue.
3. Select from the “New” drop down menu “page”.
The “Create New Page” window will display.
4. Enter My New Web Page in the “Name” text field.
5. Select from the “Select Type” drop down menu “Content”.
6. Click on “Create” button.
You should now have a new web page called “My New Web Page” located underneath your home page. Notice the right-angled line that connects your home page to the new web page. This signifies that the new web page is one sub-level underneath your home page.
Note: All CMS Pages you create need to be located at less one sub-level beneath your home page.
Pages you create will appear under the page you have previously selected. In this case we had the home page selected, so the new web page was placed beneath the home page.
Now that we have a new web page, we can make changes to the page.
Do This
1. Make sure your “My New Web Page” is selected by confirming that the page is highlighted in blue.
2. You should see the contents of the “Edit Form” tab. If not click on the “Edit Form” tab.
3. Scroll down to the “Body Copy” area within the window.
4. In the text content area enter a message you can easily recognize. Big letters is a good idea.
5. Click “Save”, to save the changes you have made.
Clicking on “Save” will save the changes made in CMS Pages.
CMS Pages will automatically save if you select a different CMS Page or “check in” the CMS page.
We can preview our changes by clicking on “Preview” in the “CMS Tool Bar” or the “Page View” tab of the right window view.
Do This
1. Click on the “Page View” tab in the right window view.
2. Examine what you see.
1. Click on the “Edit Form” tab.
2. Click on the “Preview” button located in the “CMS Tool Bar”.
3. Examine the web page.
4. Toggle off and on the "Show all pages" check mark above the
"Update" button.
When you preview the web page can you see the changes you have made to the web page?
What is seen in the “Preview” page or the “Page View” tab displays how the web page would be seen if viewed on the web.
To make sure you see the most resent changes made to the web page, you need to save the page after each page modification.
When you turn on the "Show all pages" checkbox, you should see all content in you website including pages not marked for publish. Turning off the "Show all pages" checkbox will only display pages marked for publish.
Why Check in and Check out CMS Pages?
The answer is version control.
Web builder can only allow one user to edit a CMS Page at one time. To prevent two users from editing the same CMS Page at the same time, a check in / check out method is used.
When a CMS Page is check in the page is in a pool of CMS Pages available to all users that have permissions to access those CMS Pages.
When a user checks out a CMS Page, Web Builder takes the CMS Page out of the pool and places the page under control of the user. Now only the user can edit the CMS Page, until the CMS Page is checked back in.
Do This
1. Click on the “Check in” button located on the CMS Tool Bar.
You should have seen an error message. By reading the message we come to understand that some required input fields where not filled in. For our case the fields “Title” and “Abstract” are not filled in.
A page cannot be checked in if there are unfilled “required” input fields for the web page.
Do This
1. Give this web page a title be entering a title in the “Title” text field.
2. Enter a brief description of the web page in the “Abstract” text field.
The abstract is used to help search engines determine the content of the web page, and is commonly displayed within search results.
3. Click on the “Check in” button.
A dialog box asking where to publish to, will display if the CMS Page is marked for publish.
If so select the source to publish to (Beta Live, Beta Stage) and click “OK”.
Hold down shift to select multiple locations.
It is good practice to check in a CMS Page when your not working on them.
The “Assign To” button will not be available to most users reading this tutorial, but reading about “Assign To” couldn’t hurt.
Previously I mentioned that a user could check out a CMS Page, thus placing the page under their control for editing.
The “Assign To” button allows administrators to reassign control of a CMS Page from one user to another user.
This is done by selecting the CMS Page, clicking “Assign To” and selecting a new user from the available list.
There are two simple ways to change the name of a CMS Page. Lets change the name of the web page “My New Web Page”.
Do This
1. Select “My New Web Page” in the left window view. Make sure it is highlighted blue.
2. Click on the “Check Out” button.
3. Click on the “Rename” button located in the “CMS Tool Bar”.
4. Replace My New Web Page by entering My Contact Page.
OR
B
3. Click on the “Edit Form” tag in the right window view.
4. Located the “Page Properties” area.
5. Replace My New Web Page by entering My Contact Page in the “Page Name:” field.
Note: More than one CMS Page can share the same name, so make sure not to duplicate names in your web site or you may cause confusion in your web site’s navigation.
There can be times when you may need to refresh your page.
You may want to click on the “Refresh” button instead of the browsers refresh button. This refreshes the page at a faster rate.
Do This
If you would like to refresh Web Builder right now, click on the “Refresh” button.
The “Publish Site” button will not be available/functional to most users reading this tutorial, but I strongly recommend reading this section.
When a user creates a web page in Web Builder, the page is not visible to the general public. When a web page is ready to be viewed by the public, the web page can be published.
The following are two locations you can publish to:
- Beta Live
- Beta Staging
"Beta Live" will make the web page visible on the live BYU–I web sit. Yes the site that everyone uses on campus.
"Beta Staging" is a test site that can be viewed on the web, but is not advertised for general public viewing.
Beta Staging URL:
http://ingeniuxstaging.byui.edu/beta/
http://ingeniuxstaging.byui.edu/beta/
Note
If you want to have your CMS Page available on the Internet for public view, you will need to publish to Beta Live. (Also see Mark for Publish.)The “Assets” button gives you access to your assets folder. The assets folder is a file on the server where you upload files for use within Web Builder.
There are three types folders you can upload files to.
Bellow are the folders and a few file types you can upload:
Image Folder
- gif
- jpeg
- png
Document Folder
- zip
- txt
- docx
- doc
- xslx
- xsl
- pptx
- ppt
Media Folder
- flv
- mov
- swf
- rm
- mpg
- mp4
Do This
1. Click on the “Assets” button located on the CMS Tool Bar.
2. Have a team leader show you what folders within “Assets” you will be uploading items to.
We will be using an image in this tutorial. If you do not have an image to use, or wish to upload an image, follow steps 3 - 5.
3. Select the folder you wish to upload an image to. Make sure it is highlighted blue.
4. Load a file browser window and locate your image file by click on “Select File to Upload” button.
5. Click the “Upload” button.
If you want to learn more about using the Assets folder click here.
CMS Tree
The “CMS Tree” is the tree-structure that is viewed within the left window view. The CMS site is based on this tree structure, and defines a position for each CMS Page relative to other CMS Pages in the site.
The naming and order of web pages determines two things:
- The web address (URL) of any given web page within your web site
- How the navigation is viewed within your web page
Below are a few examples of how URL’s and site navigation’s are effected by the “CMS Tree”.
http://beta.byui.edu/business-management/resources/registration-for-business-classes/emphasis-courses 
http://beta.byui.edu/housing/view-all-housing-options/student-family-and-community-housing/community-housing-list 
Notice how folder names are not displayed in the web address (URL), and that folders and content within folders are hidden from the web site’s navigation.
This is a very important feature that folders have within Web Builder. I will explain why later in this tutorial.
http://beta.byui.edu/activities/outdoor/fishing 
Some Helpful Guildlines- It would be good practice to list web pages first and folders last within the CMS Tree.
- If you place web pages inside folders (they will be hidden), you need to have unhidden web pages link to these hidden pages if you want them to be viewed on the web.
Creating and organizing your web site will take a little ingenuity and some understanding of web design. This tutorial was not designed how to teach you how to design you web site, but there are plenty of tutorials for web design on the web for you to learn from. Try this one for example.
Don’t worry. We don’t expect you to become web design experts, so there should be workshops, a web team and other programs designed to help you in designing your web site.
Before you can put your web design skills to work you need to understand how to get Web Builder to assist you in designing your web site.
In Web Builder we need to understand the three types of CMS Pages:
- Pages -- visible web pages
- Components -- reusable, multi-reference, components of Pages
- Folders -- help organize Pages and Components and hide items from the web
Pages
Do This
1. Select your home page.
2. Make another content page and name it “My New Web Page”. If you forgot how to do this, click here.
Pages are what Web Builder uses to create the web pages we see on the web.
We have already created a contact page called “My Contact Page” in this tutorial. The contact page type should be the most used page type within your web site. It contains a general layout and gives you the most freedom with your web page.
The following are the recommended web page types to use:
Note
This list may change, so check if this list is complete by calling the web servies department. (last updated by Dec 21, 2011)
Components
Pages use components to fill in content within the web page. In many cases components are used because we want content within a web page to be interchangeable or to be shared with other web pages.
Note: some pages themselves are sometimes used like components.
Components exist to be versatile; if you are not using a component in one of the following ways you are not using the component to its full potential.
Synchronize Web Page Content
Components can share its content with multiple web pages. If you change content in one component you change the content in all web pages that share that component.
Quickly Exchange Components Among Web Pages
Components can be exchanged in and out of web pages very quickly. Having a variety of components can help you rotate content throughout your web site. You can exchange seasonal themes within your web site, for example Thanks Giving, Christmas, Back to School, Midterms, Finals Week.
Ok lets create and use some components!
Note
You can all ways refer to the “Component Type” drop down menu located in the “Select a Component” Dialog box, to determine what component to use for any given component input field.
WARNING
Be careful when you drag items from the CMS Tree to the editing field. You can accidently drag and drop an item or groups of items in a different location within the CMS Tree.
Do This
1. Select “My New Web Page”.
2. If you have not filled in all required fields for this page do so. If you forgot how to do this, click here.
3. Locate and expand the “Page Components” window followed by the “Optional Column Component” window by clicking on the down pointing arrow for each window.
4. In the “Optional” component area, click on “Pick”. The “Select a Component” Dialog box should appear.
If there are any components available for use they should show up listed in the “Select a Component” Dialog box. Selecting one and clicking “ok” should insert the component.
Some times list can get vary large.
To filter out components you can enter part of the name of your component in the “Name” field.
The “Component Type” drop down menu list all of the available types of components that can be used in the selected component input field. Selecting one of these will eliminate all other available components from the component list.
Right now we need to pay attention to the “Component Type” drop down menu.
Do This
5. Select “Image File” from the “Component Type” drop down menu.
6. Take note of the name “Image File”, we are going to use this Component.
7. Exit the dialog box by clicking “cancel”.
8. Select your home page in the CMS Tree.
9. Click on “New” in the “CMS Tool Bar”.
10. Select “Component”.
11. Enter in the component name “My Image Component”.
12. Select from the drop down menu “Image File”, and click “Create”.
13. Repeats steps 8 through 12, but this time create a “Column Component” and name it “My Text Component”.
We should now have two components, we can use for our content pages.
16. Fill in content for the image and text components we just made and save the changes.
The following links can be helpful if you need help. Image Input
To use the two components we created, we can select them through the “Select a Component” dialog box.
We can also drag and drop a component from the CMS Tree directly into a component input field located under the "Edit Form" tab.
Do This
1. Expand the CMS tree so that you can see the four CMS Pages created in this tutorial: “My Contact Page, My New Web Page, My Image Component, My Text Component”.
2. Select “My Contact Page” and open the “Edit Form” tab.
3. Locate and expand the “Optional Column Component” window.
4. Drag the “My Image Component” into the available "Optional" component field.
You can add additional “Optional” components by clicking on the plus (+) sign to the right of the existing “Optional” component.
5. click on the plus (+) sign.
6. Drag the “My Text Component” into the new "Optional" component field.
7. For “My New Web Page” repeat steps 1 through 4, but instead insert “My Text Component”.
8. Preview and compare the CMS Pages “My Contact Page” and “My New Web Page”.
You should see in the My Contact Page and My New Web Page the components that where inserted into each page. To see how components can synchronize web page content lets change the content in My Text Component.
Do This
1. Open and edit the content in “My Text Component”.
2. Preview and compare the CMS Pages “My Contact Page” and “My New Web Page”.
You should see the changes you have made in My Text Component appear in both My Contact Page and My New Web Page.
Folders
As I mentioned before, components should not be viewed on the web. To show this lets demonstrate what could happen when viewing a component on the web.
Do This
1. Select and preview your home page.
2. Find the left accordion navigation in the preview and locate the link “My Image Component”.
3. Click on “My Image Component”, and view the content of this page.
Because "My Image Component" is a component, the web browser displays a tree layout of information that will not make sense to web users.
To avoid displaying components on the web we should place them within folders.
Do This
1. Select your home page in the CMS Tree.
2. Click on “New” in the “CMS Tool Bar”.
3. Select “Folder”.
4. Enter the name “Components”.
5. Click “Create Folder”.
6. Drag “My Image Component” and “My Text Component” into the folder called “Components”.
To do this hover the component above the folder until the folder has a box encompassed around it. Then release the component.
If you want to reorder items within the folder, drag an item below the folder area, a line will display telling you where the CMS page will go if dropped.
7. Try to mimic the CMS tree to look like the image to the right.
External Link Component
The “External Link Component” is a special case component. It is designed to display links in the left accordion navigation (and other navigation) throughout the web site.
Do This
1. Select your home page in the CMS Tree.
2. Click on “New” in the “CMS Tool Bar”.
3. Select “Component”.
4. Enter the name “YouTube.com”.
5. Select from the drop down menu “External Link Component”, and click “Create”.
1. Select “YouTube.com” in the CMS Tree.
2. Enter in “Link Text” the name “YouTube External Link”.
3. Enter in “Link” the URL “ http://www.youtube.com ”.
4. Save your changes.
5. Preview your home page.
6. In the preview right click on “YouTube” in the left accordion navigation, and choose to open the link in a new window.
When a your web site is published any user can click on an external link in the accordion and they will be sent to the web page you designate them to go.
Remember to enter the complete URL address. Most URL addresses have the "http://" text in front of the commonly known address.
Right Click Menu
The image below is a view of the CMS Tree’s “Right Click Menu”. Notice that some items may be missing from your menu selection or you may have additional items. The items listed here are the most commonly used among users.
Most of the available options within the menu are covered in past material. Links to the covered material are provided.
CMS Work Space
The image below is a view of the available tabs within the “CMS Work Space”. Notice that some items may be missing from your tab selection or you may have additional items. The items listed here are the most commonly used among users.
Edit Form
Page View
Categorize
History
Analytics
Reference
The “Edit Form” tab selects the editing environment for the web page selected in the CMS Tree. Listed within the "Edit Form" view are input elements that are used to populate content within the web page.
We have already changed content using the “Edit Form” tab in previous tasks of this tutorial so this should be familiar.
If you want to learn more about each of the individual input elements click here.
Different page types use different input elements. You will need to refer to a page type’s reference page for further help.
Click here for a review of available page types.
Do This
1. Make sure your home page is selected in the CMS Tree.
2. Select the “Page View” tab.
3. In the preview click on “My Contact Page” located in the left navigation of the web page.
4. Observe that “My Contact Page” is now blue in the CMS Tree.
The “Page View” tab provides a preview of what the web page will look like live on the web. Clicking on links within the preview will select new CMS Pages within the CMS Tree, or provide a view of an external web site.
The “Categorize” tab is closely used with the “Taxonomy Navigation” element, which is a form of navigation used in Web Builder. The “Categorize” tab allows users to organize web pages into a taxonomy tree.
The “Categorize” tab is commonly used among administrative users only, so most users will not use the “Categorize” tab.
If you want to learn more about the “Categorize” tab you can read more from the Taxonomy Navigation reference page.
Web Builder will keep a history of changes made to CMS pages. A version of the CMS Page is saved each time it is checked in.
The “History” tab displays a list of each version of the selected CMS Page.
Do This
1. Select “My Contact Page” in the CMS Tree.
2. If “My Contact Page” is not check out, check out “My Contact Page”.
3. Click on the “History” tab.
4. Select version one (1) from the list.
Selecting one of the given versions in the list provides a preview of that version’s input.
5. Click the words “Diff Against Version”.
6. Review the difference in content between the selected version and the active (current) version.
7. Click the words “Revert to selected version”, to revert back to the select version.
8. Check in “My Contact Page”.
By reverting back to version one (1), “My Contact Page” should be back to the state when it was first created.
Do This
1. Make sure your home page is selected in the CMS Tree.
2. Select the “Analytics” tab.
3. In the left window view, located left of the “Edit Form” tab is the drop down menu
“ -- All Publishing Targets -- ", select “Beta Live”.
If analytics has been collected for the selected CMS Page you should see some graphs.
Note: if you don’t see any thing try finding a page in the sand box folder.
The “Analytics” tab provides statistics on the use of the selected CMS Page.
What does this mean to you?The statistics provided should help you understand how often your web page is viewed and how often your web site is used.
During the development of your web site the statistics given will not be helpful, but after the site is published for a time, the statistics can be helpful and some time surprising.
Understanding the AnalyticsThe Analytics is divided into two categories of information.
- Pageviews and Internal Sources
- Visits and External Sources
Statistics about Pageviews and Internal Sources pertain to the users navigation within your web site or the selected page and its sub children.
Preview example: What if a user viewed your home page then navigated to another page within your web site and returns back to viewing your home page. This would add to the number of previews of your home page.
Internal Sources records the last web page within your web site the user viewed before the home page was viewed. (As pertain to the example given above)
Statistics about Visits and External Sources pertain to the users navigation outside of your web site or the selected page and its sub children.
Visit example: What if a user viewed your home page then navigated to facebook.com and returns back to viewing your home page. This would add to the number of visits to your home page.
External Sources works in a similar way as Internal Sources in collecting statistics.
The “Reference” tab gives access to reference and help pages (like this one) designed to help you use Web Builder.
The dashboard is the place you go to get you started where you left off in Web builder, or it could be a place that can help you find pages you have forgotten about and want to come back to. Ether way the dashboard should help you organize your work within Web Builder.