Sitebuilder ANR PDF Reference Manual

7 downloads 15162 Views 2MB Size Report
Materi al. Class. A. Lectur e. Power points. Video. Podca sts. Home work ..... then click here to make that text become bullet ..... You can adjust the formatting of.
1

Agriculture and Natural Resources Sitebuilder Web Content Management System Rapid Training Guide Brian Mendonca Systems Specialist and Websites Administrator Departments of Entomology & Nematology and Plant Pathology Phoenix Cluster Brian Mendonca, Systems Specialist and Websites Administrator, Departments of Entomology & Nematology, Plant Pathology, University of California, Davis, 2013

2

University of California Davis

Table of Contents ANR Sitebuilder Essentials:  Nugget 1: Logging into Sitebuilder ANR…......................................3  Nugget 2: Page Phylogeny…………………………………………….5  Nugget 3: Page Properties……………………………………………..9  Nugget 4: Adding in Basic Page Content…………………………15  Nugget 5: Adding in Photos………………………………………….20  Nugget 6: Adding in Links……………………………………………..23

Advanced Sitebuilder Techniques  Super Nugget 1: Setting up the Sitebuilder ANR Dashboard….26  Super Nugget 2: Creating your own side Navigation Bar……...27  Super Nugget 3: Embedding Youtube links..................................29  Super Nugget 4: Oops! I need to go back in time! How to……32 Revert Pages  Conclusion: ANR Sitebuilder is your FRIEND………………………33

Brian Mendonca, Systems Specialist and Websites Administrator, Departments of Entomology & Nematology, Plant Pathology, University of California, Davis, 2013

3

Nugget 1: Logging into Sitebuilder ANR Accessing the ANR Portal, your pathway to easily creating webpages To log into ANR Portal, you must have an account set up with your Department’s Websites Administrator. If you don’t have an account with ANR Sitebuilder, the first thing you should do is contact your IT Department to ensure that you’re ready to begin building webpages. Once you’re cleared with IT Support, then you’ll be able to log in without trouble. To log in, please visit this website: http://tinyurl.com/anrportal Going to the above link will take you to this website:

Click on UC Davis if you are UC Davis affiliated. If you’re not with UC Davis, then click your respective ID or log in with your email address and password.

WARNING: You may need to enter your University of California Kerberos information to log in. Please know your username and password if you have them.

Brian Mendonca, Systems Specialist and Websites Administrator, Departments of Entomology & Nematology, Plant Pathology, University of California, Davis, 2013

4

After you have authenticated, congratulations! You’ll be inside of the ANR Portal! There’s lots of information around to play with, but really what is important is that you find the SiteBuilder 3.0 Heading. It will most likely be somewhere in the center of the page, but it may be hidden or need to be activated. If that is the case for you, then click on “Edit Your Portal” on the left side of the page.

L OOK FOR THE S ITE B UILDER 3.0 AREA ON YOUR ANR P ORTAL . I F YOU DON ' T SEE IT ANYWHERE , THEN CLICK ON THE "E DIT YOUR P ORTAL " HYPERLINK UNDER THE "P ORTAL T OOLS" AREA OF THE PAGE AND MAKE SURE THAT S ITEBUILDER 3.0 IS ENABLED . Once you find the Sitebuilder 3.0 section of the ANR Portal, you will see all the Departmental Pages and/or Websites for that you control. This will be at least one page. For me, I currently have control over: Entomology & Nematology, IPM Impacts Assessment, Phoenix Cluster, Science and Society, UC Davis Plant Pathology, and UC Davis Superfund pages. For most users of ANR Sitebuilder, you’ll only see one or two websites or department’s websites that you have some kind of access. All you have to do next is click “Edit” under “New Site” that corresponds to your desired website. Once you do that, you’ll be taken to the Sitebuilder Dashboard, which will be explained in the next chapter.

Brian Mendonca, Systems Specialist and Websites Administrator, Departments of Entomology & Nematology, Plant Pathology, University of California, Davis, 2013

5

Nugget 2: Page Phylogeny You may be in charge of 5 pages or maybe even 500 pages. Either way, organization of your website structure is important! This section will guide you toward keeping your page manageable. One of the most important concepts in managing a website is organization of your project. It is critical to consider how your website might expand or reach into new topic areas in the future, so planning your pages and subpages layout and organization is critical. This plays a large role for you who will be managing webpage content. Let’s consider a hypothetical Professor of Engineering, Bob Smith. He has just been given a blank profile webpage that was created by his IT Support Websites Administrator. Bob has an idea about some of the main topics he wants to link to from his page, such as: 

His Biography



His Lab Page



His Publications



His Class and Teaching Material



His Research Project Material

So what is the best way to approach this? From his single faculty profile page, he can organize his content into subpages! A good representation of how his various content topics can be organized is shown here: Prof. Bob Smith of Engineering

Biography

Lab Page

Publications

Class Material

Research Project Material

A BUDDING WEBPAGE DONE RIGHT FOR P ROFESSOR B OB S MITH , OUR H YPOTHETICAL P ROFESSOR OF E NGINEERING While this may seem like an obvious way to organize his pages at first, imagine the complications down the road if Professor Bob Smith had divided his organization into only Biography, Teaching, and Research, then later expanded those sections! On the next page is an example of what would happen later on if Professor Bob Smith had not organized his pages from the start.

Brian Mendonca, Systems Specialist and Websites Administrator, Departments of Entomology & Nematology, Plant Pathology, University of California, Davis, 2013

6

What is there to fear from not planning ahead for your webpage? Look what would have happened if Professor Bob Smith had underestimated the amount his webpage would expand:

Lab Page Lab Memb ers

Public ations Recen t

Earlier

Biogra phy Top Public atins Lectur e Power points

Class A Video Podca sts

Prof. Bob Smith of Engine ering

Classe s Materi al Class B Home work Assign ments

Lectur e Power points

Video Podca sts

Home work Assign ments Descri ption

Project A Goals

Resear ch

Curren t Project s Project B Photos

Descri ption

Goals

Past Project s Project C Photos

Descri ption

Goals

Project X Ideas

Descri ption

Goals

Project Y Photos

Descri ption

Goals

Photos

A NY WEBSITE THAT WILL KEEP VISITORS COMING BACK WILL NEED TO GROW. WITHOUT GOOD PLANNING AND ORGANIZATION , YOUR WEBSITE STRUCTURE MAY GROW INTO A MONSTER !!!

Suddenly, the page seems pretty clogged up and hard to keep track of certain pages and the above image only represents the start of what would be a complete website that represents Professor Bob Smith. Essentially, making your starting page be divided into reasonably general areas early on will help keep any particular page from becoming to massive and troublesome to manage in the future.

You may ask “Why can’t I just move the pages around later if I need to reorganize?” The answer is due to directories of the webpages and the links of those pages. If the structure of the webpages are adjusted, then the links pointing to webpages that were moved may become broken. There is no web task more tedious, boring, and annoying than searching through your other pages and adjusting links that may have broken during a webpage movement. When a link is broken, anyone who clicks on it will be left at a dead end and will become frustrated that the website creator did not think ahead!

Brian Mendonca, Systems Specialist and Websites Administrator, Departments of Entomology & Nematology, Plant Pathology, University of California, Davis, 2013

7

Now that the theoretical ideas behind website phylogeny are out on the table, let’s take a look at how these concepts are applied in Sitebuilder ANR.

To begin, we will start from our Dashboard, and then on the left side of the screen, click “Edit Site Pages”.

From there, you will be taken to the “Page Manager” section of ANR Sitebuilder. This is the heart of all you control! F ROM THE LEFT SIDE OF YOUR DASHBOARD , YOU CAN EASILY A DD OR EDIT N EW P AGES , AND ALSO EDIT THE L EFT AND T OP N AVIGATION ( IF YOUR W EBSITES A DMINISTRATOR GIVES YOU THOSE PERMISSIONS )

Once you’re on the “Page Manager” area of ANR Sitebuilder, it may seem a bit overwhelming at first! The screenshot to the left represents a fully grown website. When you’re first starting your adventure with ANR Sitebuilder, you will most likely only have one or a few pages on the “Page Manager” screen.

Brian Mendonca, Systems Specialist and Websites Administrator, Departments of Entomology & Nematology, Plant Pathology, University of California, Davis, 2013

8

Believe it or not, this Page Manager is where you can build up your tree of webpages and sub-webpages. Before I show you how to do this however, I will show you how pages are arranged in Sitebuilder ANR in hierarchy.

If, like Professor Bob Smith of Engineering, you are just starting, you may only have one page initially, like this:

Don’t worry about the “Properties”, “Content”, “*page41335*”, and the “Deactivate|Activate|Add Child” for now. These items will be covered in detail during a future area of this book. “Add Child” is the exception and I’ll cover it now since this will be used to create the phylogeny infrastructure of the webpage. “Add Child” is the key to making new webpages that will be nested underneath the page called “Professor Bob Smith”. I’ve gone ahead and clicked “Add Child” and gone through the process that will be explained in a future chapter, but below is the result of some of the initial pages I’ve created underneath Professor Bob Smith’s webpage:

The progressively darker grey bars shown to the left of the page titles represent how the pages are nested underneath each other. The parent page “Professor Bob Smith” currently has 3 pages directly underneath it, “Biography”, “Lab Pages”, and “Publications” as indicated by the grey bars slightly darker than the grey bar next to the top page. “Lab Members” has the darkest grey bar because it is nested underneath the page called “Lab Page”. As long as you can translate the grey bars into a phylogenic tree, then you’ll be fine when it comes to understanding your webpage and subpages infrastructure. In the next part of this eBook, I’ll explain the process of actually creating a page.

Brian Mendonca, Systems Specialist and Websites Administrator, Departments of Entomology & Nematology, Plant Pathology, University of California, Davis, 2013

9

Nugget 3: Creating Initial Page Properties Assuming that you want to begin creating new webpages in Sitebuilder ANR, this Nugget will get set up with the fundamentals of your webpage! No real coding or web experience required! Let us pretend that our good friend Professor Bob Smith of Engineering was just given his first webpage. The only page he has inside of his “Page Manager” is the page “Professor Bob Smith”, but he wants to create his class page before his main faculty profile since it is the beginning of the quarter. His students in Engineering 101 class REALLY want to get started on their homework assignments and studying for exams because, well, that’s what engineering students have to do. As a Professor of Engineering, Bob Smith believes that creating his class page is a top priority. Here is the core of the page that Professor Bob Smith sees when he logs into his “Page Manager” as described in Nugget 2:

To create his Class page to be accessed by students, he will need to click the “Add Child” button as circled in Red. If you don’t understand why he would want to click that particular “Add Child” button as opposed to the others, then please review Nugget 2.

Brian Mendonca, Systems Specialist and Websites Administrator, Departments of Entomology & Nematology, Plant Pathology, University of California, Davis, 2013

10

Now, after clicking “Add Child” for the “Professor Bob Smith” Page, the “Edit Properties: Adding New Page” window will come up. At this point, the “Page Name” field can be typed. Please be sure that the name is unique and that it does not match another page you have created. As for the “Activate” section of the page, I recommend leaving the Bubble “No” filled. This is so that the public might not accidentally stumble upon your page before it is ready. If you want to make the page active, then click “Activate” from the Page Manger when you’re ready. Once you’ve set your page name and options in the “Adding New Page” menu, click “Save Properties”.

Next, you’ll be taken to probably one of the most complicated looking pages in Sitebuilder ANR. No need to worry though! I’ll walk Professor Bob Smith and you through each and every step!

In all honesty though, most of the options and buttons you see here won’t need to be touched and can be left at their defaults. Unless you’re trying to make a blog style website where users can leave feedback and share your individual pages, most of the options here won’t be necessary. On the next page, I’ll go over the bare essentials for Professor Bob Smith to get his class pages up and running.

Brian Mendonca, Systems Specialist and Websites Administrator, Departments of Entomology & Nematology, Plant Pathology, University of California, Davis, 2013

11

The “Edit Properties” page contains all of the attributes of the page that are not related to the content of the page. In other words, the “Edit Properties” page deals with general page layout, padding, URL, inactive page message, and other goodies associated with the website, but not necessarily the content of the website itself. Let’s go over the items of the page in small chunks.

Parent Name: This shows what page the current page you’re working on lives under in terms of Page Phylogeny.

Page Name: This will be the name and header of your page. Path: Unless you need a specific link for an advanced purpose, I do not recommend changing the path. Changing the path can break links to the current page you’re working on, including other pages you’ve made yourself. Unless you are ready to update all the pages that point to this page, do not change the path. You can also set up a page redirect if you want the page to point to somewhere else other than the page you built instead.

Page Link: This adjusts the navigation button title. You can for the most part ignore this. Move Page: This allows you to nest the page under a different page. This can potentially create problems later, so I recommend not touching it.

Content Layout: This shows how your content can be divided into different sections. Each color represents a different area of the screen (left, right, center, top, bottom) that content of your page can be divided and live.

Full Width Column: Is explained under the menu. You probably won’t need to use it.

T HE FIRST FEW MENUS OF THE EDIT P ROPERTIES P AGE FOR THE PAGE WE MADE THAT IS CALLED "CLASS M ATERIALS P AGE"

Brian Mendonca, Systems Specialist and Websites Administrator, Departments of Entomology & Nematology, Plant Pathology, University of California, Davis, 2013

12

T HE NEXT AREA OF MENUS IN E DIT P AGES

Underneath the “Full Width Column” are more options and menus. Here are the descriptions of those:

Layout Options: This will adjust the page layout. Potentially, the option you pick could save you time if you’ll have many similar pages nested underneath each other. The best option “Use Parent” is selected by default.

Language: This optimizes your page for displaying a particular language. At the time of writing, only English and Spanish are supported.

Review Level, Add Ratings: I recommend leaving the values at their defaults unless you want to gather feedback on whether your page is helpful.

Display Last Update: Displays the timestamp of the last page update through ANR on your page. Inactive Page Message: This is the message that will be shown if your page is deactivated. I will explain page Activation/Deactivation in another chapter.

More items of interest are listed on the next page of this book.

Brian Mendonca, Systems Specialist and Websites Administrator, Departments of Entomology & Nematology, Plant Pathology, University of California, Davis, 2013

13

T HE FINAL SECTION OF THE "E DIT P AGE P ROPERTIES " MODULE OF ANR SITEBUILDER , S OCIAL M EDIA O PTIMIZATION

I feel obligated to remind you that most of these options, you’ll never need to touch unless you really want to drill down and fine-tune every detail of your Sitebuilder ANR webpage.

Brian Mendonca, Systems Specialist and Websites Administrator, Departments of Entomology & Nematology, Plant Pathology, University of California, Davis, 2013

14

Once you have selected all of the options on the “Edit Page Properties” page that you want to adjust, then it is important that you click “Update Properties” at the bottom of the page so changes you made will save. Don’t hit Delete Page unless you mean it!

While many options exist to fine-tune your page, these options are the bare minimum and also the only properties you’ll need to edit/verify 99% of the time:

 Page Name  Content Layout  Left Navigation  Inactive Page Message Once you’ve clicked “Update Properties”, the page will refresh and you’ll see that your changes saved. Now we’re done with the “Edit Properties” section of creating a webpage. In the next chapter, we will work on adding in the content of your page.

Brian Mendonca, Systems Specialist and Websites Administrator, Departments of Entomology & Nematology, Plant Pathology, University of California, Davis, 2013

15

Nugget 4: Adding in Basic Page Content There are two easy ways to access the area of Sitebuilder ANR that will let you add in your content:

Method A, from Edit Properties: From the “Edit Properties Page”, just click the blue “Add New Asset” button near the top of the page.

Method B, from Page Manager: From the “Page Manager”, just click the “Content” link of the page that you want to edit the content. Below is where it is located for Professor Bob Smith.

On the next page, we will show you where either button will take you….

Brian Mendonca, Systems Specialist and Websites Administrator, Departments of Entomology & Nematology, Plant Pathology, University of California, Davis, 2013

16

A N EMPTY PAGE WITH NO CONTENT

My my! The page is quite empty at this point! To add in content, we will click “Add Asset” and will be taken to another page where we can enter an Asset Name and select an “Asset Type”.

For the asset name, you can literally enter anything you want, because the name does not have to show. Asset T HE P AGE A SSET EDITOR ALLOWS YOU TO NAME THE SECTIONS OF YOUR PAGE

Name is not as critical as you might think, but it can help you if you want to use it.

Brian Mendonca, Systems Specialist and Websites Administrator, Departments of Entomology & Nematology, Plant Pathology, University of California, Davis, 2013

17

For the Asset Title, the name is not important and I’ll show you why later. What is important is that you pick Text Box as the Asset Type. “Text Box” is the most common type of asset you’ll use. Once you’ve named and selected the Text Box as your asset type, click “Save Asset”. Finally, we will reach the Asset Editor, the pinnacle of your reason for studying Sitebuilder ANR. This is where you’ll spend most of your time too!

You’ll see the asset name carried over, as well as the Asset Type. For the Asset Title, put the option to no for now. Why hide the title? Your page name will already become the header for the page. Unless you’re doing two broadly different topics on one webpage or need some kind of separation, you probably won’t need to show the Asset Title. For Background, this is the background color of your webpage. You can experiment with this, but note that these four options are all you can control in terms of font and background color. Once you’ve selected your bubbled options in the top part of the page, let’s move onto T HE P AGE A SSET EDITOR ; THIS IS WHERE YOU ' LL EVENTUALLY PUT YOUR CONTENT

the Text Box next!

Brian Mendonca, Systems Specialist and Websites Administrator, Departments of Entomology & Nematology, Plant Pathology, University of California, Davis, 2013

18

The Page Textbox Editor

T HE T EXT EDIT B OX IS VERY SIMILAR TO M ICROSOFT O UTLOOK AND M ICROSOFT WORD . I F YOU USE THOSE PROGRAMS , THEN YOU ’ LL FIND THAT ANR S ITEBUILDER IS VERY SIMILAR Above, you’ll see the Text Box Editor and the tools. Similar to almost any text editor, common text manipulation tools are there, as well as spreadsheet style tables and cells. Here are some brief descriptions of them.

Bold: Makes any text you highlight and then click

HTML Code Tools: Don’t touch unless you know

Italics: Makes any text you highlight and then click

Font Size Controllers: Easily select font sizes

the button become bold.

the button become Italics.

Sub/Superscript: Used for writing out formulas. Outline/Bullets: Highlight a paragraph of text, then click here to make that text become bullet pointed or an outline style division.

De-dent/Indent: Use this to manage your content’s whitespace effectively.

Anchor: Allows you to link to an area of your page. Useful for when you want to link to somewhere in particular on a page with a lot of content.

Line Break: Creates a horizontal divider line on page to divide your content even further.

Link Creator: Highlight some text, then click the

chain link to set up that text to point somewhere else on the internet.

HTML.

that are standardized or be more specific about your font sizes.

Font Color: Select your font color for text Create Table: This will allow you to create 2x2

and other dimensions of tables on your page. It can be useful for displaying certain kinds of data.

Insert/Remove Table Cells: Helps you edit a table that already exists.

Split Cells, Merge Cells: Helps you edit/manage table content

Eraser: Removes text formatting of content. Helpful if you are pasting in a lot of content from somewhere else.

Spell Check: Does spell check for you if your

browser does not. You may need to install a plug-in to get the spell check to work.

Brian Mendonca, Systems Specialist and Websites Administrator, Departments of Entomology & Nematology, Plant Pathology, University of California, Davis, 2013

19

The controls will take some experimentation to fully master, but most people will pick up them up pretty quickly. Let’s go over some examples here:

T HE

MOST BASIC

C ONTENT YOU CAN TYPE , P LAIN T EXT

Once you’ve typed in the content that you want on the page, then you should scroll all the way down to the bottom of the page and click “Update Asset”. When the page reloads, you’ll be back at the Edit Content page and you’ll see a notification that the asset was updated. Let’s take a look at the real-deal webpage now. Near the top right corner of the screen, click “View Current Site”. I recommend right clicking it and opening up in a new tab so that as you update the page, you can just refresh the live

"CLICK V IEW CURRENT S ITE" TO VIEW YOUR MOST RECENT UPDATE OF YOUR WEBPAGE

webpage tab to quickly check on whether your page looks as expected.

Low and behold! The live page is there and true! It’s a bit boring though! In the next nugget, we will go over how to add photos for Professor Bob Smith, as well as level up his profile page. In even later chapters, I’ll explain how to link pages and complete the website.

T HE LIVE PAGE OF P ROFESSOR B OB S MITH . N OTE THAT "S HOW A SSET T ITLE " UNDER THE P AGE A SSET EDITOR PAGE IS SET TO OFF.

Brian Mendonca, Systems Specialist and Websites Administrator, Departments of Entomology & Nematology, Plant Pathology, University of California, Davis, 2013

20

Nugget 5: Adding in Photos A webpage with only text is not only atheistically displeasing, it’s also boring! This chapter will teach you all you need to know about uploading a photo. T HE UPLOAD F ILE AREA OF THE T EXTBOX A SSET UNDER THE P AGE A SSET EDITOR Let’s look back at our Page Asset Editor where we were working in the previous chapter. Let’s add a photo of Professor Bob Smith of Engineering so that people can recognize him while waiting in line at the cafeteria. To get started, all you have to do is click “Browse” and then a window to select the file will open up. Browse to the file on your computer and then click “Open”.

Follow the steps and wait for the image to upload. The file will appear under the list of filenames for your asset.

B ROWSE TO THE FILE ON YOUR COMPUTER THAT YOU WANT AND CLICK "O PEN "

Brian Mendonca, Systems Specialist and Websites Administrator, Departments of Entomology & Nematology, Plant Pathology, University of California, Davis, 2013

21

F ILE UPLOAD IS SUCCESSFUL IF YOU SEE IT APPEAR UNDER THE FILENAMES LIST

When the file upload finishes, you’ll see a small thumbnail of your photo as well as some other information appear on the Filename list. The most important item in this chart is the “Code”, which almost always is formatted in an asterisk-file-numbers-asterisk pattern. Here’s what to do with the code: Wherever you want the image to show up, we will paste that file code into the text box. Let’s try! I pasted the code number into the textbook, highlighted it, then center-justified it so that when the picture shows up, it will be centered on the page. P ASTING AN IMAGE ' S CODE NUMBER INTO THE TEXTBOX.

When we click “Update Asset” and then look at the live page, here is what shows up: Rather than seeing a code, we see the picture it represents.

A giant photo is not what Professor Bob Smith expected. What happened is that we uploaded a high resolution photo when we really did not need something so large. While using high resolution photos is perfectly fine for Sitebuilder ANR, we can adjust those properties so that the image shows up how we want it to show up. On the next page, I will explain how to adjust the properties of images.

I MAGE POSTING GONE WRONG ! H IGH RESOLUTION PHOTO WITHOUT ADJUSTING THE IMAGE PROPERTIES .

Brian Mendonca, Systems Specialist and Websites Administrator, Departments of Entomology & Nematology, Plant Pathology, University of California, Davis, 2013

22

Adjusting the image properties to control the size of the image is easy. All we do is scroll down to where we uploaded the file and then click “Edit/View”:

Once we do that, a new “File Edit” menu will show up. Here, you can adjust the File Name, Description, File Display Size, File Display options, the link for the image (this is where the page will point to if the image is clicked on), and a button to replace the image with another image altogether. To make the image display at a reasonable size, we can adjust the file display size to 250 or 350 pixels wide. The number of pixels you’ll want to use is up to you and experimentation is sometimes necessary to decide. Whenever you change any of the File Properties, be sure to click the “Update File” AND “Update Asset” buttons so that the changes will be reflected on the live webpage. Remember that you will need to reload the live webpage in order to see the page become updated. When you look at the changes, the image should be resized with the number of pixels you selected.

Whenever you change any of the File Properties of an image, be sure to click both the “Update File” AND “Update Asset” buttons so that the changes will be reflected on the live webpage. Solely clicking “Update File” is not enough to get the results!

Brian Mendonca, Systems Specialist and Websites Administrator, Departments of Entomology & Nematology, Plant Pathology, University of California, Davis, 2013

23

Nugget 6: Adding in Links Links are one of the most important aspects of making webpages. Here is the fast way to make links! Let’s say that Professor Bob Smith has set up his page Phylogeny this way:

Now, he wants to emulate his webpage to link to all those pages:

As of right now, the bulleted Biography, Lab Page, and Publications page are only written text. Clicking on them does nothing.

Brian Mendonca, Systems Specialist and Websites Administrator, Departments of Entomology & Nematology, Plant Pathology, University of California, Davis, 2013

24

To make the bullet points become clickable links, we need to use the chainlink tool inside of the Page Asset Editor. Open up the page asset editor and highlight the text of whatever you wish to become a link, then click on the chainlink tool:

The Edit/Insert Link box will pop up. In the field for “Link URL”, you can place a link to anywhere on the internet or any page on your Sitebuilder ANR account. Once you fill in the “Link URL” field, just click insert and then after you update your asset, your link will be clickable and should link to your desired page if all goes well. On the next page, I will give some examples of the types of links you can include.

Brian Mendonca, Systems Specialist and Websites Administrator, Departments of Entomology & Nematology, Plant Pathology, University of California, Davis, 2013

25

P AGE M ANAGER P HYLOGENY OF P AGES FOR P ROFESSOR B OB S MITH

Above are the webpages we have made for Professor Bob Smith on Sitebuilder ANR for reference. Below are some examples of links you can create and where they will link to. It’s really that easy! Link as inputted in Sitebuilder ANR

What it links to

Sitebuilder ANR Page called “Biography” with Page Reference Code 41385

Sitebuilder ANR Page called “Publications” with Page Reference Code 41387

English Wikipedia Webpage about Engineering

Brian Mendonca, Systems Specialist and Websites Administrator, Departments of Entomology & Nematology, Plant Pathology, University of California, Davis, 2013

26

Super Nugget 1: Setting up the SiteBuilder ANR Dashboard Setting up the Sitebuilder ANR Dashboard will allow you to easily return to the web pages that you edit most frequently.

Once you’ve clicked “Edit” section near your website on the ANR main page, you’ll be taken to the Dashboard associated with that website. Go ahead and click on any of the “Add New Module to Dashboard” buttons and you’ll be taken to a screen where you can select the Module Type. So what is a “Module”? This essentially means the type of webpage that you’re going to want to link to. ANR Sitebuilder has many different kinds of pages that you can rapidly generate, including standard webpages, calendars, blog pages, surveys, newsletters, and other common tools that you may use in your department. For most purposes, you’ll just want to select “Page”. T HE MAIN DASHBOARD OF YOUR S ITEBUILDER ANR W EBSITE Once you select “Page” as your Module Type, you can select from your available pages as well. If you didn’t select page for some reason, then you’ll be able to select from your content associated with your selected module. When you’re done, select “Add Module” and you’ll be taken back to your dashboard with a shortcut to your page of interest. There, you will find many shortcuts to common tools for editing that page.

SETTING UP A DASHBOARD MODULE FOR QUICK ACCESS

Brian Mendonca, Systems Specialist and Websites Administrator, Departments of Entomology & Nematology, Plant Pathology, University of California, Davis, 2013

27

Super Nugget 2: Creating for own side Navigation Bar Tired of seeing a general departmental navigation bar that is not relevant to your content? This chapter will explain how to create a side navigation bar. Creating a navigation bar is pretty easy, assuming that you know how to make links. If not, then please check out Nugget 6. To get started, you’ll need to go into the Page Properties for any page you want your custom navigation bar to appear on and then set the Content Layout to either of these setups:

Then set the Column Widths to 25/75 or another value that you are okay with:

Finally, set the Left Navigation to “Hidden”:

Don’t forget to click the “Update Properties” Button at the bottom of the page.

Once you’ve confirmed that these settings are correct, then you can move onto the next page.

Brian Mendonca, Systems Specialist and Websites Administrator, Departments of Entomology & Nematology, Plant Pathology, University of California, Davis, 2013

28

After clicking update, please click on “Edit Content” to get to the page where you can see your page assets. Since I selected a dual vertical column layout, my Edit Content Page currently looks like this:

I want my Custom Navigation bar to be on the left, I can click the arrow on my page content that already exists to move my content into the Blue Right Pane so that the Pink Left Pane is available for me to build my navigation bar. If you want your navigation bar to appear on the right, skip the previous step and follow along. After moving the Text Box Asset content right, my Edit Content page will look like this:

From there, I will click “Add Asset” and then build a Text Box asset as described in Nugget 4. Finally, you can add links however you’d like as described in Nugget 6. When you’re done, any side navigation bar put in by your websites administrator should be hidden and only your custom navigation bar that links to the pages you want should appear:

Brian Mendonca, Systems Specialist and Websites Administrator, Departments of Entomology & Nematology, Plant Pathology, University of California, Davis, 2013

29

Super Nugget 3: Embedding Youtube Links If you’ve never embedded Youtube links into a webpage before, have no fear! It’s fairly easy! Let’s say you’re on Youtube, watching a video about Nematology and decide that it is a great video to have on your class page. From the page on Youtube, click “Share”, then “Embed”, then ensure that your video size is set to a size you’d like. Normally the default size is okay. Where you see the “