Joliet Junior College 1  Advanced Web Page Editing  

Advanced Web Page Editing with SharePoint  Once you’ve had some experience with using SharePoint to update your Web pages, you may be  wondering how to do more beyond basic text editing.   This guide will show you how to:  1. Create new Web pages  2. Edit the left side menu  3. Add Reusable Content 

Creating New Web Pages  Things to Consider when Creating New Pages  When creating a new page, be sure you are not repeating information that may already exist elsewhere  on the JJC Web site. Can your new content be listed on a page that already exists? If you need any help  in deciding how to add new information or features to your Web page, please don’t hesitate to contact  the Information Technology Web Team. See our contact information by going to  www.jjc.edu/info/sharepoint . 

Step One: Choose Create Page  Click on the Site Actions Button, then Click “Create Page” 

 

Joliet Junior College 2  Advanced Web Page Editing    

Step Two: Enter Page Information  You now need to enter some information about your new page:  • • •

•

Title:  This is the text that appears at the top of your page and in the side menu (if you do not  want the page to appear in the side menu you will be able to hide it after creating it)  Description: You can leave this blank  URL Name: This is the name of the file. Please use only lower case letters, with dashes instead of  spaces. For example, if you’re making a page called “SharePoint Guide” you could put  “sharepoint‐guide” as the URL Name.  Page Layout: This determines where the picture will go. You can choose “Left Image” “No  Image” or “Right Image”.  A preview will display to the left. The other options in the list are for  the Web team only.  These layouts will not preview, and you should not select them. 

Once you’ve entered the information, click “Create” at the bottom. 

 

   

Joliet Junior College 3  Advanced Web Page Editing  

Step Three:  Check in the page  After you’ve clicked “create” your page has been created. As a new page, it has never been “Checked In”  before. This means that only you can see it exists. Click “Check In to Share Draft” at the top of the page.  

 

Your new page will now show in the Left Side Menu  After you click Check In, the page will reload. You will now see it listed in the Left side menu of your site.  To Hide it from the menu, please see the “Editing the Left Side Menu” section below. 

Step Four: Add Contact Information  See “Adding Reusable content” section below to be able to add the contact information that goes below  the left side menu. 

Step Five: Make the Page Live  When you are ready for you new page to go live, choose “Submit for Approval”.  Your new page will go  to your sites approver, and once approved, will be live. If you do not have an approver, you can click  “Publish” and it will go live. 

Joliet Junior College 4  Advanced Web Page Editing  

 

Editing the Left Side Menu  Step One: Choose to Modify your Navigation  Please note: Modifying Navigation is something only an approver can do. (If you have approval  turned off for your site, any editor for your site can edit the navigation.) 

The option to modify your navigation is listed under the “Site Actions” button, when you hover your  mouse over “Site Settings”. 

 

Joliet Junior College 5  Advanced Web Page Editing  

Step Two: Navigation Settings Page  When you click Modify Navigation, a new page called “Site Navigation Settings” will appear:  The picture below shows where your menu list is located. You should not adjust any of the settings  above the menu list – these settings are adjusted by the Web Team if necessary. Only edit the menu  list. 

 

             

Joliet Junior College 6  Advanced Web Page Editing    

Step Three: Adjust your Menu  You will now see a list of your site’s pages.  You’ll notice there are TWO lists: Global Navigation and  Current Navigation.   • Global navigation is for within SharePoint and is only seen by the editors of the site. All of these  pages should be hidden.  • Current Navigation is what visitors to your Web site see.  To edit your navigation, click on the page you want to edit.   From the menu at the top of the window you can then choose to “Move Up” “Move Down” or “Hide”  the page. (If the page is already hidden, you can choose to “Show” the page) 

If you need to hide a page click the name of the page under “Current Navigation” and then click  “Hide” 

 

     

Joliet Junior College 7  Advanced Web Page Editing  

    Adding a Heading  Headings are Menu items that can have other items ‘nested’ under them: 

    To create a Heading:  1. 2. 3. 4. 5.

Click “Add Heading…”   Enter the Title of the heading.  Click “Browse” to find the page you want the heading to link to.   Once you’ve created the heading, hide the original page, so that it isn’t listed twice.  Now you can move other pages into your heading folder. Those pages will now appear  nested ‘under’ the heading. 

(Below shows what a heading looks like with pages nested under it when you are moving pages around.) 

 

         

Joliet Junior College 8  Advanced Web Page Editing  

Adding a Link in your Menu  The “Add Link…” option is for linking to pages in your Menu that are from other sites, e.g., a Club or  Organization Web site, or a resource listed somewhere else on the Web site. When you create a link  that is outside your site’s pages, it will cause visitors to leave your site – be careful when adding these or  it can become confusing to visitors to your Web page.   To add a link:  1. Click “Add Link…”  2. Enter the “Title” which is the text that will appear in the menu.  3. Enter the Web address of the page you want the link to go to. 

  Things to Consider About the Side Menu  When editing the side menu, consider how visitors will get to your new pages. Do you want them to be  listed on the side menu, or can you link to them from a page that already exists? It’s important to keep  the side menu easy to understand and as short as possible.   If you need any help with your Side Menu, the Information Technology Web team can help answer  questions. Please don’t hesitate to contact us! See contact information by going to  www.jjc.edu/info/sharepoint .   

 

Joliet Junior College 9  Advanced Web Page Editing    

Adding Reusable Content  Reusable Content means content being inserted from somewhere else.  This content can be inserted  many times.  There are two types of reusable content for the JJC Site:  • •

Contact Information, which you place on new pages. This information is edited by the Web  team, so that when it’s changed, it changes on all pages where it’s listed.  Table and column templates, which you place inside pages where needed. You can then edit as  you wish. 

Below is an example of contact information that is reusable content: 

     

Joliet Junior College 10  Advanced Web Page Editing    

How to Place Contact Information on a Page  Step 1: Click in the “Department Hours” area of the page. This is where the contact information goes. 

         

Joliet Junior College 11  Advanced Web Page Editing   Step Two: When you click in the “Department Hours” area, a tool bar will appear. On the tool bar, click  the reusable content button (it looks like a stack of papers with an arrow). 

  Step Three: Find your content. When you click the button a window will pop up with folders. These  folders are organized similar to how the JJC Web site is organized. Find which ‘area’ of the site your  contact information is under. For example, if you site is under “About” click “About.” If it’s under  “Student Life” click “Student Life.” (Academic Divisions are in a separate folder called “Divisions”,  because of the amount of contact information.) 

 

Joliet Junior College 12  Advanced Web Page Editing     Step Four: Click on your content (which will then be very slightly highlighted in gray), then click OK. 

  Step Five: The contact information is now on the page. The  contact information will be grayed out, and you will not be able  to edit it. This is because the reusable contact information is  edited by the Web team. You can continue to edit other areas  of the page, or submit the page for approval if you are done.  If you need contact information adjusted, please let the Web  Team know by putting in a helpdesk ticket at  http://helpdesk.jjc.edu . Include what information needs to be  changed within the ticket.   

Joliet Junior College 13  Advanced Web Page Editing    

Using Table and Column Templates  There a several templates available to help you use Tables and column lists within the JJC Web site.  Step One: Click on the page where you want the template to go.  Step Two: Click the Reusable Content button on the toolbar (it looks like a stack of papers with an  arrow). 

    Step Two: The “Select Reusable Content” box will appear. Choose the last folder, called “Tables Columns  and FAQ Templates”   

Joliet Junior College 14  Advanced Web Page Editing   Step Three: You will now see several templates available. Choose one, and click OK.  Step Four: Your template will be inserted into the page. You can now edit it as needed:  •

•

Tables: When you click in each box of a table, a down arrow will appear. This accesses the cell  menu, which lets you insert more rows above or below, insert more columns, or delete rows or  columns as needed.  FAQ Template: The FAQ template lets you have FAQ question lists like this: 

  (See an FAQ in action at http://www.jjc.edu/site‐info/pages/faq.aspx ) 

•

  To use the FAQ Template, delete the questions you don’t need (or copy and paste a question if  you need more). Then fill out the question title, and the answer (in the gray box). When the  page is live, only the questions will show, with little “plus” signs next to them. When the  question is clicked, the answer shows beneath it.  Column Templates: Delete the bullets you don’t need, and hit enter to add more bullets. You  can change the bullets to a numbered list if you would like. 

Thank you!   Thank you for your interest in using the more advanced features of Web Page editing. If you have any  questions about editing your Web pages, please let us know. Visit www.jjc.edu/info/sharepoint for  contact information, as well as other helpful documents, frequently asked questions, and more.