Download 2010 UTB SharePoint

UTB
SharePoint
2010
This manual will serve as a guide for UTB Web coordinators to create
webpages for the university using the Microsoft SharePoint Web Content
Management System.
Recommended Browsers:
Microsoft Internet Explorer versions 8-9
Google Chrome
Beginners Edition, 2013
Table of Contents
How to Log In ................................................................................................................................................ 2
Exploring SharePoint .................................................................................................................................. 2
Site Actions ................................................................................................................................................. 2
Folders and Lists ......................................................................................................................................... 2
Creating a Webpage...................................................................................................................................... 3
Selecting a Layout Template ...................................................................................................................... 3
Changing a Layout ...................................................................................................................................... 3
Creating Menus ............................................................................................................................................. 4
Upload the menu to SharePoint................................................................................................................. 4
Adding the Menu to your webpage .............................................................................................................. 5
The Editing Ribbon ..................................................................................................................................... 5
Populated Web Parts .................................................................................................................................... 6
Uploading/Adding Images .......................................................................................................................... 6
Uploading/Adding Links ................................................................................................................................ 7
Adding Tables ............................................................................................................................................. 7
Saving Your Page ........................................................................................................................................ 7
Requesting Access to a SharePoint Site ..................................................................................................... 7
Frequently Asked Questions ......................................................................................................................... 8
Page 1
Getting Started with SharePoint
How to Log In
Once you have received a confirmation to access a site, you
will be able to log in by going to
http://www.utb.edu/login.aspx. After clicking on the login
link, a dialog box will appear asking for your credentials,
which is the same username and password that you
currently use to log in to your WebMail account. The only
difference here is that for the username you will need to
add “scorpion\” in front of it. For example, if your username
is JD1234567, then you will type “scorpion\JD1234567”.
Once you’re logged in, you will be taken to the UTB home page. In your browser’s address bar, type the
URL (Web address) of the website you have access to modify.
Exploring SharePoint
Site Content and Structure
By default, SharePoint creates the following
folders. Documents, Images, Pages, WorkFlow
Tasks.
Documents
Used to store files such as PDFs, text
documents, word documents, etc.
Images
Used to store images used in your site.
* Once logged in to the page, you will see the “Site Actions” button on
the top left portion of the page. By clicking on it, you will see a drop
down. Find and click on “Manage Content and Structure” to display
your sites folders.
Pages
Used to store webpages for your site.
Workflow
Used to view the workflow structure of your site.
Navigating Within SharePoint
Site Actions
Once logged in to the page, if you have access to edit, you will see the “Site Actions” button on
the top-left portion of the page. By clicking on it, you will see a drop down menu that will allow
you to edit page, create a new page, new site, more options, etc.
Folders and Lists
Although the folders and lists might look the same in SharePoint, they have different functions.
Page 2
Creating a Webpage
In the site where you want to create the page, under the
“Site Actions” menu, click “View All Site Content”.
Once the “All Site Content” page loads, under the
“Documents Library”, click on the “Pages” folder.
On the “Pages” folder, on the top blue ribbon, click on
“Documents”  “New Document”  “Welcome Page”.
In the Title box, type a title for the webpage. The title is important because it is used by the search
engines to help determine the topic of your page.
In the Description box, type a description about the
contents of the page.
By default, the URL Name will create the name of your
page based on the title you previously entered. You
can keep or rename your URL. If you rename it, avoid
using space and special characters and use the dash
character ( “-“ ) between words.
In the Page Layout section, select a layout for the
webpage that you want to create. The layout that you choose depends on the type of content you want
to publish (see next section for details).
When finished, click “Create”.
Selecting a Layout Template
There are several layouts to choose from. Your choice depends on how you plan the design of the
webpage.
General 2 Zone Template
General 5 Zone Template
General 7 Zone Template
General 1 Zone No Menu Template
Changing a Layout
To change a layout, go to the page you want to change. Edit the page. Then on the top ribbon, click on
the “Page” tab and find the “Page Layout”
button, and choose the new layout.
Page 3
Adding a Menu
Creating Menus
When creating menus, a recommended option is to use coding to add links.
You can also ‘hard code’ but this will be more time consuming if later on you
have to make changes to the menus. The following is one recommended
way. This method will allow you to add one menu to many pages, and when
required to make an update to the menu, you only make the change in one
location, and the update will be reflected in all the pages linked to that menu
file.
How to create a basic menu
Use a simple word editor such as notepad.
Type the following:
* To create a drop down menu,
please see the Frequently Asked
Questions section.
<h4><a href=”/department/pages/default.aspx” title=””>Department Name</a></h4>
<ul>
<li><a href=”/department/pages/link-one.aspx” title=””>Link One</a></li>
<li><a href=”/department/pages/link-two.aspx “ target=”_blank” title=””>Link Two</a></li>
</ul>
Here is what the coding will do (you will need to modify only the information in bold).
By typing <h4>Department Name</h4> as part of the menu, it will make the department name bold,
larger font size and burnt orange (see menu sample) and will serve as the header for the menu.
For regular links, simply type the code below.
<li><a href=”/department/pages/link-one.aspx” title=””>Link One</a></li>
Title of the link
Type the web address
Optional: Use the title=”” attribute for further explanation of link or simply add the name of the link.
Sometimes you may want to open the link in a new browser window. This is recommended when linked
to external websites or files such as PDF. Type target=”_blank”.
<li><a href=”/department/pages/link-two.aspx“ target=”_blank” title=””>Link Two</a></li>
Include this code to make the link open in a new browser window
Use the lines above as many times as needed for as many menu items needed.
Save the file with a significant name such as main-menu.txt. Make sure to save it with a .txt file
extension.
Upload the menu to SharePoint
Upload the file to the Documents folder of your website, by going to Documents,
and on the top blue ribbon, click on the “Documents”  “Upload Document” 
“Upload Document”.
Page 4
Look for your file and press OK to upload. You should now see the menu file. Click on it to open, and
copy the web address. You will be using the web address in the next section.
Adding the menu to your webpage
Now, go to the webpage where you want to add the menu that has a zone available to add a WebPart
on the left side such as “General 5 Zone Template”.
After selecting “Edit Page” from the
“Site Actions”, click on Add a Web Part on
“Zone 1” (grey box).
In Categories column, click on “Media and
Content”  “Content Editor Web Part” 
Confirm the Zone  click “Add” to add web
part.
Once the web part has been added, click on the down arrow then “Edit Web Part”.
On the Content Link, type the URL of the menu text file you uploaded.
Click on Test Link, you should see your document as you typed it out. Then click Apply and OK.
Your menu should be displayed.
Editing a Webpage
The Editing Ribbon
Font and Paragraph Toolbar
Adding and Modifying Text
When copying content or text from another website or Microsoft Word document, make sure to not
copy directly to SharePoint. Copying content will bring extra coding that could negatively affect the look
of the page and will be more difficult to clean up later. What you might want to do is to copy and paste
(unformatted) the text into a simple text editing software, such as Notepad, and from Notepad, you can
copy your text to SharePoint. You might need to go back to your text and add any links, change the font
styles and such, but you will have cleaner text to work from. This process also gives you the chance to
revisit the links you have to make sure they are accurate.
NOTE: An alternative is to copy and paste into SharePoint, highlight all content or text, then click on
clear formatting.
Page 5
icon to
Font Type
Using the “Markup Styles” from the Editing Toolbar, use Heading 1 for the title of the page and
Heading 2 for any subtitles.
Using Web Parts
Depending on the layout you selected, there might be at least one Web Part that you can use when
creating a webpage. Most Web Parts are designed to display a specific type of data, such as text, HTML
or images. You can create dynamic portals that present information to your site by adding, configuring
and connecting these Web Parts.
Populated Web Parts
Depending on the design you want for your web page, we have created populated web parts with
dummy images and content as place holders. As the designer, you will need to update the images and
content. To add a web part, click on the zone you want to modify and click on “Add a Web Part”. In the
Categories column, find “UTB Web Parts”  now choose the desired web part (see image below) 
“Add”.
Inserting/Updating Tables, Images, Links, etc.
Click on the “Insert” tab, directly under the orange main tab, “Editing Tools”. Click on the icon you need
to add to your webpage.
Uploading/Adding Images
There are multiple ways to add images with SharePoint 2010. If you have not added the image
to the “Images” folder on your site, you can do so while you add it to your page. To do so, click
the down arrow on “Picture” tab  “From Computer”  Browse for the image  Change the
“Upload To:” selection to the “Images” folder  “Ok” and “Save”.
Once added, the image can be styled from the Editing Ribbon. To add rounded corners to the
image, click on “Images Styles”  “Rounded Corners & Drop Shadow”.
* You must add an alternate text to all images
posted on your websites. This is a requirement
by Accessibility Standards for all webpages.
NOTE: All images should be pre-sized for the
web before uploading to SharePoint. Do not upload original high-resolution files.
Page 6
Updating/Adding Links
To add a link from your site, first select (highlight) the text you want to use as the link
and then click on the “Link” icon from the Editing Ribbon. Locate the document or page
and click “OK”.
To add the URL path, click on down arrow on “Link” tab  “From Address” and fill in the text
boxes.
The link can be edited from the Editing Ribbon.
Adding Tables
To add a table, click on the “Table” icon and choose your combination of rows and
column, as you would in Microsoft Word. Once the table has been added, you can edit
and style the table from the Edition Ribbon.
Saving Your Page
Pages are saved in the Pages Library of the site using the Check-In feature.
Check-In
To save changes made to the page, on the “Page” tab on the ribbon, click on the “Check In” icon.
Publishing Your Page
In order for the changes of the page to be publicly visible, you must publish the page. After you have
checked-in the page, on the “Publish” tab on the ribbon, click on the “Publish” icon.
Requesting Access to a SharePoint Site
To request access for any of the UTB SharePoint sites, contact Norma Rodriguez via email at
[email protected].
Page 7
F.A.Q.
Q: I finished my page, but visitors cannot access it. The page is asking for username and password.
A: Make sure that you published the page (see Page 7).
If this is a new website for a department, your site must be approved for public view. Contact Director
of Web Communications, Norma Rodriguez via email at [email protected] to check the
status of the site.
Verify that the page has not been checkout. If so, check-in (see Page 7).
Q: I cannot log in. I receive an error. “Internet Explorer cannot display the webpage”
A: Make sure that you have been granted access to your site. If not, contact Norma Rodriguez at
[email protected].
Check your log-in credentials (username and password). Make sure you are entering “scorpion\”
before your username. Reminder: It is the “back slash” ( \ ) NOT “forward slash” ( / ).
Q: What are the recommended dimensions for images?
A: See table below.
Department Landing
W: 515px H: 280px
Three Horizontal
Images
W: 156px H: 104px
Department Landing
(One Column – Large)
W: 700px H: 300px
Right Column
W: 183px H: as
needed to be
Q: How to create and add a basic menu?
A: See Page 4 - Adding a Menu.
Q: How to create a drop down menu?
A: Using the same HTML structure as a basic menu, add a new unordered list <ul> within a list item
<li>. See example below.
<h4><a href=”/department/pages/default.aspx” title=””>Department Name</a></h4>
<ul>
<li><a href=”/department/pages/link-one.aspx” title=””>Link One</a></li>
<li><a href=”/department/pages/link-two.aspx “ target=”_blank” title=””>Link Two</a></li>
<li><a href=”#”>Submenu Title</a>
<ul>
<li><a href=”/department/pages/sub-link-one.aspx” title=””>Sub Link One</a></li>
<li><a href=”/department/pages/sub-link-two.aspx” title=””>Sub Link Two</a></li>
</ul>
</li>
</ul>
Page 8