BrownSites Departmental Web Template Tutorial

Skip to end of metadata
Go to start of metadata

About BrownSites

We're excited to introduce the BrownSites departmental web templates.  They're easier to edit than a traditional website, and don't require any programming knowledge or special tools.  

Parts of a Site

Before you start working on your site, it's helpful to understand the parts of a site.  Knowing the terminology will help you follow instructions later in this guide, and understanding the site setup will give you the "big picture" necessary to become an expert at editing your site.

Content

Essentially, everything you add to your site is Content.  In BrownSites, there are a few different Content Types:

  • Page - a normal page on your site
  • News - stories that have a date, an author, along with the story content. These are different from Pages because they are usually displayed in chronological order on a news page, and can generate a feed for people to subscribe to.
  • Image - adding images to your site is easy - you can do it from the text editor while editing the content of a page or news item.  In BrownSites, images are saved with additional information, like a title, description and photo credit.

Menus

Menus are a part of every website - without them, your visitors wouldn't be able to get from page to page on your site.  Menus are also referred to as Navigation.  

On your site, there is more than one menu:  The Brown University menu across the top of the site, which lets you navigate to other parts of the Brown website, and the menu along the left, which lists pages within your own site.  You may see this left menu referred to as your Site Navigation. Pages you add to your site will appear on this left menu, and it can have a hierarchy (pages and sub-pages).  A page is said to be the "parent" of its sub-page(s), or "child" page(s).  A practical example: the page called "About Us" might have the three sub-pages "Faculty", "Staff", and "Graduate Students".

Breadcrumbs

Just like Hansel and Gretel left breadcrumbs in the woods to find their way home, breadcrumbs help your website's visitors know where they are.  What page are they on, and what part of your site does that page belong in?  On BrownSites, breadcrumbs are displayed above your header image. Breadcrumbs are determined by where a page is in the menu - what its parent page is.

URL / Alias

The URL is the address at which a website is located, starting with the http://

In BrownSites, you will also see the word Alias to refer to the end of the address (e.g. about/faculty). 

When your website moves to this new format, it will probably be given a new web address.  However, your old web address will continue to redirect to your new site.

Event Calendar

This is a widget which appears on the right side of every page. It lists your department's events from http://events.brown.edu.  If you don't currently list your events on that site, you can learn how to do so at the events.brown.edu help page.

Roles

Everyone who is able to log in to BrownSites is assigned a role for their site.  The role determines what permissions they have: can they add content? Publish to the world?  Edit content that others have submitted? The roles are listed below in order of least to most access.  Most departments will have some Contributors who submit content, and at least one Editor who can approve and publish this content.

Reviewer 

  • can read unpublished content
  • can not edit content
  • can not create content
  • not all departments need / have this
  • good for department heads, fact checkers, people who need read-only access

Contributor 

  • can create content
  • can edit content that they created
  • can not publish
  • great for students or others who draft content, even supervisors

Editor

  • can create content
  • can edit all content
  • can publish all content
  • can edit menus
  • every department needs one

Site Owner

  • each site only has one Site Owner
  • it is independent from other roles (you can be Site Owner and Editor)
  • the Site Owner can add users to their site
  • site changes and custom work from Web Services should be requested by the Site Owner

Using BrownSites

Before You Get Started

In order to follow these instructions, you must have access to a site that is set up with the official Brown Departmental Web Template.  Other sites on campus may require software such as Dreamweaver or Contribute in order to edit.  If you are unsure about the software required by your website, please speak with the person who supports it or set it up.

For best results, make sure you are using a current web browser.

Connecting to Your Site

Your BrownSites editing is done through a web browser, such as Firefox.  To log in to your site, open the browser.  Type in the address of your site and add /user to the end of the address.

For example, if your site is located at _[http://www.brown.edu/sampledepartment_|http://www.brown.edu/sampledepartment_], visit the address _[http://www.brown.edu/sampledepartment/user_|http://www.brown.edu/sampledepartment/user_] to log in and start editing.

You will be asked to log in with your Brown username and password, e.g. jcarberr.

Editing a Page

We'll talk about creating new content in a bit, but first, let's focus on editing what's already there.  

1. After logging into your site, click on Menu items on the left until you are viewing the page you would like to edit.

2. Click the Edit tab above the page content.

3. You will see the page's content, ready for you to edit.  It's in a "rich text editor" - this means that you can edit the formatting using buttons along the top of the editor, in a way similar to Word. We will go into more detail about the Rich Text Editor below.

4. When you are done editing, click the Save button at the bottom. If you are an Editor, (and your page is published and workflow setting is draft, which is the default), saving will publish your content on the web. If you are a Contributor, saving will just save a draft, and an Editor will have to make it public.

Editing Text with the Rich Text Editor

In the rich text editor, you'll see some familiar tools from products such as Word: the buttons to bold and italicize, create bulleted and numbered lists, etc. There might also be some buttons that are unfamiliar.  If you don't know what a button is, hover your mouse over it until you see a description. 

Links

There are three types of links you may want to include in your text: links to external pages (outside of your site), links to email addresses, and links to internal content.  There is a button for each of these. 

When creating an external link, you will see a "target" option.  This controls whether your link will open in a new window/tab, or the same window/tab (replacing the page you are currently viewing).   For pages inside your site, it is best to make the target the same window.  For pages outside your site (e.g. other departments at Brown), you can choose to open in a new window, so when your visitors are done browsing the other site, they will still have yours open.

Pasting from Other Sources

You may have written your content in another program such as Word, or maybe you have to copy information from an email or other web pages into your site.  Often, this causes problems, as the formatting must be translated to the web.  

The REQUIRED WAY to paste is to select the "Paste as Plain Text" icon if pasting from an email or the web or the "Paste from Word" icon if pasting from a Word document prior to pasting content.

Paste in Plain Text - removes the web formatting. 

Paste from Word - removes the formatting from a Word document.  

Please note that if you try to paste directly from Word or the Web (without making plain text), or other formatted programs, your web page may not work properly when the URL is shared with others.

Tables

Just like Word, the rich text editor allows you to insert tables.  With tables, you can structure and align your data by typing it into cells, much like in an Excel spreadsheet.  Tables should NOT be used just for layout purposes (e.g. putting an image on the right of text).  They should only be used for data that needs to be presented in a tabular form, such as course listings or office hour schedules.

Line Breaks

In the text editor, when you hit Enter or Return at the end of a line, your cursor will jump two lines down to start a new paragraph. If you would prefer to start only one line down instead, hold down the Shift key while pressing Enter.

Format Menu

Using the Format menu, you can choose from a number of standard heading styles.  Using these for section headings within your text is a great idea; it creates a consistent look. Normal text in your document will have the "Paragraph" style.

Styles Menu

The styles menu gives you access to additional styles specific to the BrownSites web templates.  For example, you can use these styles to control how text flows around an image, change the appearance of bulleted or numbered lists, and create small or large text that is not a heading.

Spelling

Firefox and Chrome browsers have built-in spell check.  To make sure it is enabled in Firefox, right click in the text editor and make sure "Check Spelling" has a check mark next to it. In Chrome, right click in the text editor, choose Spell Checker Options, and make sure "Check the Spelling of this Field" is checked.

Document Files and Images

You might want to add files, such as PDFs or Word Documents, to your website.  Before you do so, it's important to evaluate whether this is the best method to distribute that content.   Appropriate uses of Word Documents and PDFs include: highly formatted documents such as brochures, something that is meant to keep its formatting when printed, application materials, templates.  However, if you simply want to put the text on your website, it is much better to include the text as part of a page or news item on your site.  This is better for usability and accessibility reasons, as well as easier for you to update.

Filenames

Before you add a file to your site, you should rename it on your computer.  Your visitors will thank you when they download the file!  Your filename:

  • Should make sense to your site visitor - be specific
  • Should be professional and clear (for example, instead of FinalVersionofAppEditedByJohnInJuly.pdf, name it PsychoceramicsGraduateApplication.pdf)
  • Should not contain spaces, extra periods, or odd punctuation.  Dashes and underscores are OK.

Attach a File to a Page or News Item

When you are creating or editing a page or news item, scroll to the bottom and look for Related Files.  Here, you can upload the file from your computer.  If you would like the file to appear at the bottom of the page as a 'related file', check the "List" checkbox.

Then, create a link to the file from within your text:

  1. Right click your file name in the Related Links section and choose Copy Link Address.  (see image below).  
  2. Then, type the text for your link (e.g. Application Form Download) in the text editor
  3. Highlight the text you just typed
  4. Click the External Link button.  
  5. Paste the link to your file into "Link URL".

Images
The easiest way to add an image file is by clicking the camera icon in the text editor.  Behind the scenes, this creates a page dedicated to the image as well as allows you to insert it directly into the text you are currently editing.

Steps to Insert an Image

1. Click the camera icon in the text editor

2. In the pop-up window, choose a title for the image - it is important to choose a professional and clear title, because visitors may see this page.  Choose the image from your computer, and type a caption if desired.  There are many other optional settings on this page.

3. Next, choose how the image will be displayed on the page or news item you are currently editing.  Last, click the Insert button.

Site Structure

Your menu, or navigation, is automatically built based on the pages in your site.  You can edit the Menu Settings of each page by Editing the page and clicking Menu Settings at the bottom. 

Provided Menus

If you are starting a new BrownSite, your site will already have a menu.  In certain cases, it might be necessary to remove items from this menu (such as "Graduate" if your department is administrative or does not have a graduate program).  However, we strongly recommend keeping the titles and location of as many menu items as possible to create consistency and a good user experience across Brown's many departmental sites.  These decisions were recommended by web experts and optimized for usability and search engines.

Menu Title

Sometimes, you may not want the same page title to show up in the menu.  For example, if your page has a very long title, you may want to shorten it for the menu.

Parent Item

The pages on your site can have a hierarchy (pages and sub-pages).  A page is said to be the "parent" of its sub-page(s), or "child" page(s).  A practical example: the page called "About Us" might have the three sub-/child-pages "Faculty", "Staff", and "Graduate Students".  From the Parent Item menu, choose the parent page.  You may see some odd options in this list, part of the administrative menus of your site.  Make sure you scroll all the way to the bottom of the list and pick a page that is part of your own site.

Menu Order

The best way is via the Menus link, which can be accessed on your admin landing page or through the top administrative menu (Site Building > Menus > List > Site Navigation).  Here, you can drag and drop menu items to reorder.

Removing a Page from the Menu

If you wish to create a page but not have it show up in your menu:

  1. Edit the page
  2. On the bottom of the editing page, click Menu Settings
  3. Check the "Delete this menu item" box.

If you wish to remove a page altogether, edit that page and click the Delete button.  DO NOT simply delete it from the menu, because the page will still exist.

Revisions

When you save a page, a revision is created.  To view all revisions of a page, click the Revisions tab on the top of the page, next to the Edit tab.

You can select two versions of a page and compare them by clicking the Show Diff button.  You can revert to a previous version by clicking the Revert link next to that version.

A revision is stored forever unless you manually delete it by clicking the delete link.

Adding Users

Only the Site Owner can add users to the site.

  1. Send the administration link (the one that ends with /user) to the person you'd like to add and ask them to log in with their Brown credentials.  They won't be able to see anything yet - that's OK!
  2. Log in to the /users link yourself. On your dashboard, you will see a green button that says Manage Users
  3. This will take you to a page with a list of users. Find the person in the list and click on their username. If you are having trouble finding them in the list, you can try appending /users/theirusername to the end of your site address to get to their page. For example: http://www.brown.edu/academics/psychoceramics/users/jcarberr
  4. Click the Edit tab on top of their page
  5. Check the box next to the role they should have on your site, for example, Editor, and save the page.
  6. They will need to refresh to see their new role. If nothing changes, have them quit their browser and log into the site again.

Logging Out

The only way to completely log out of BrownSites is to close your browser.

Common Problems

Not Seeing Menu at the Top  (refresh)

Text in your text editor is highlighted pink or yellow  - this means you pasted directly into the text editor instead of using the Paste as Plain Text or Paste from Word buttons.  You can select the text and click the Remove Text Formatting button, or delete the text and use the Paste as Plain Text or Paste from Word buttons.

A page is not visible to the public - At the bottom of your Edit page, above the Save button, expand the Publishing Options and make sure the Published box is checked.  Then, in your Workflow settings, make sure the Public option, not the Draft option, is selected.

Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.