CMS (Content Management System) for Beginners A Step by Step Approach

Size: px

Start display at page:

Download "CMS (Content Management System) for Beginners A Step by Step Approach"

Delilah Elizabeth Curtis
5 years ago
Views:

1 CMS (Content Management System) for Beginners A Step by Step Approach Table of Contents List of Topics Page No. Section 1: Getting Started....2 Section 2: Adding an Event to the Chapter Web Page. 4 Section 3: Putting an Item in the Resource Gallery.13 Section 4: Linking to an Eventbrite url 14 Section 5: Correcting a Mistake on a Published Class or Event.17 Section 6: Adding a Newsletter to your Web Page..19 Section 7: Adding an Article to the Web Page..24 Section 8: Creating Hyperlinks..29 Section 9: Updating a Class...33 Section 10: Deleting Old Classes and Articles...35 Section 11: Refreshing your Home Page a: Replacing the Generic Picture on the Home Page b: Adding Banners to your Home Page c: Changing the Content on the Home Page...42 Section 12: Inserting Pictures...43 Section 13: Creating a Table 44 Appendix A Using MapQuest...50 Appendix B Printing a Newsletter in pdf format.51 1

2 Section 1: Getting Started Step 1: Use Internet Explorer as your web browser. A common problem chapter Web authors face when making changes on their webpages is that the Content Management System (CMS) doesn t seem to have all the functions it should and that some tasks, such as creating hyperlinks, aren t available. The answer likely is that the Web browser being used isn t the correct one. The complete BetterInvesting website CMS is available only with Internet Explorer 8. Many PC users no longer have IE 8, but you can still use the most recent browser, IE 11, to emulate IE 8. In IE 11, under the Tools menu select F12 Developer Tools. At the bottom of the screen you ll see the Emulation menu. Select the image of a computer monitor next to a mobile device in the menu at the left. Finally, in the User Agent String menu select Internet Explorer 8. You can still make edits to pages and carry out some Web author functions using many other browsers, such as Google Chrome. Step 2: Go to CMS Log in with your user name and password. If you don t know your user name and password, contact chapterservices@betterinvesting.org Do not change the Domain Name which is BIDMZ. If you change it you will not be able to log in properly. 2

Step 3: Click on the Switch to Edit Site in the upper left hand corner of your browser. You must be in the edit mode to add or edit events on your chapter web page.

3 Step 3: Click on the Switch to Edit Site in the upper left hand corner of your browser. You must be in the edit mode to add or edit events on your chapter web page. If you are in edit mode this tab will say, Switch to Live Site. Step 4: If your computer does not automatically open up to your chapter web page, you will need to navigate to your chapter page by clicking on Chapters, then clicking on Chapter Listings, finding your state and then selecting your Chapter. Save your Chapter page as a favorite to make it easy to return there. 3

Section 2: Adding an Event to the Chapter Web Page Before you begin, if there are documents you are going to need to link to for this event such as a registration form, it is a good idea to put those

4 Section 2: Adding an Event to the Chapter Web Page Before you begin, if there are documents you are going to need to link to for this event such as a registration form, it is a good idea to put those documents in the Resource Gallery. See Section 3, page 12 for directions on how to add a document to the Resource Gallery. Also if you are going to have registration for the event on Eventbrite you should set that up before starting to add the new event. Step 1: Click on Upcoming Events. This will take you to the Upcoming Events page where you add educational classes and special events. Step 2: Several choices are listed under Upcoming Events. Click on the type of event. We will use educational classes as our example. This step is important in case you need to edit the page later on. Step 3: You should see a toolbar across the top of the page. Go to "New" and choose "New Page" from the drop-down menu. If your firewall prevents the New Page from opening, try holding down the Control Key while you click on New Page. 4

Step 4: On the page that pops up, click on the down arrow and select, View as Tree from the menu.

Step 6: Scroll down the list of topics listed under Members and click on the word Chapter.

creating an article in the article section or an Event Detail template when creating an event in the Upcoming Events

5 Step 4: On the page that pops up, click on the down arrow and select, View as Tree from the menu. Step 5: Click on the plus sign in front of "Members". This will open up all the categories listed under Members. Step 6: Scroll down the list of topics listed under Members and click on the word Chapter. Step 7: You will now have to choose a template to create your page -- either a Chapter Article template if you are creating an article in the article section or an Event Detail template when creating an event in the Upcoming Events section. We will do an Event Detail for our example. Click on Select. Step 8: Once the template opens, fill in the boxes and placeholders with the information you want to appear. 5

Check the priority box only if you want the event to appear before all other events. Otherwise, events are listed in chronological date order. Type in the name of the event in the box.

6 Check the priority box only if you want the event to appear before all other events. Otherwise, events are listed in chronological date order. Type in the name of the event in the box. Creating the date in the proper format is important for a couple of reasons. One, this is the field used to pull your events into the public site. Secondly, it also pulls your event into the Upcoming Events page. Remember to separate the dates and times by commas. When creating a multiple day event where you d like to include the time for each day, use this format: 11/21/ AM-5PM, 11/22/2009 9:30AM-5PM. Adding additional spaces around the hyphen will cause the dates to appear incorrectly. This is a several step process. First Step: go to Yahoo or Mapquest.com and create the map. (For information on using MapQuest see Appendix A page 49) Copy the url. Second Step: Type the word map in the box and highlight it. Third Step: Click on the toolbar manager in the upper left hand corner of the placeholder to find the hyperlink manager (the toolbar icon is circled in the above illustration). Fourth Step: In this toolbar click on the hyperlink manager which looks like a globe with a chain link below it. 6

Fifth Step: Paste the url in the url placeholder. Check to be sure you did not copy the http:// twice.

If you get the question below after pasting the url, click Allow access. Note, not everyone will receive this question.

7 Fifth Step: Paste the url in the url placeholder. Check to be sure you did not copy the twice. In the Tooltip box type in words to describe the link, such as Click here to view map Then click ok. If you get the question below after pasting the url, click Allow access. Note, not everyone will receive this question. Sixth Step: Close the Main Toolbar by clicking on the red x in the upper right hand corner. Note: the word map is now underlined. That shows it is a link. If you typed a description in the Tooltip box that description will appear when you hold your mouse over the link. Now type in the name of the location and address. 7

Type in the cost of the event in the box. If it is free, type in the word free. If you have a sponsor, type in the name of the sponsor. You might want to put in your chapter name as sponsor.

8 Type in the cost of the event in the box. If it is free, type in the word free. If you have a sponsor, type in the name of the sponsor. You might want to put in your chapter name as sponsor. Otherwise leave this placeholder blank. It is very important to fill in the location summary. The location of an event on the public site is pulled from this box. If this box is left blank, the public site s location will be blank. It is advisable to simply put the city and state in this box. Fill in this box for online classes also, so they will show up on your public web page. Type in any centralized city along with the state. The abstract placeholder contains the text that will be pulled on to your chapter s home page. The abstract should be a very brief description of the class. You will want to write a description about the event/article itself. The description will be longer than the abstract. The title, date, time and location will be pulled in separately for events and the title will be pulled in for articles so there is no need to repeat this information in the description box. 8

Type in the name and email address for the event contact and/or for the registrar. This box is where you link to any related files such as information on how to register for the event.

9 If there are any prerequisites for the class list them here. Example of a prerequisite might be that the attendee must know how to complete a SSG or that they must be familiar with a certain type of software. Type in the name and address for the event contact and/or for the registrar. This box is where you link to any related files such as information on how to register for the event. The file you are going to link to must be stored in the Resource Gallery. See directions on adding a document to the Resource Gallery in Section 3, page 12. This is also where you would link to an Eventbrite url. (See Section 4 page 15) Linking to your Registration Form Begin by typing a phrase in the box that will indicate they should click here to register. Highlight whatever phrase you type into the box. Then click on the Toolbar Icon in the upper left hand corner. Select the Document Manager icon. It looks like a sheet of paper with a paper clip in the upper right hand corner and is in the second row, fifth item from the left. 9

Click on the + sign in front of the word Chapters and scroll down to your chapter s name. Click on the + sign in front of your Chapter s name. You will now have three choices.

10 Click on the + sign in front of the word Chapters and scroll down to your chapter s name. Click on the + sign in front of your Chapter s name. You will now have three choices. Since we are looking for a document that the public can view click on the + sign in front of public. You can now see the list of files in your Resource Gallery. Select the file and click on Insert Close the Toolbar by clicking on the Red X in the upper right hand corner. 10

11 Note your words are now underlined. This means they are linked to your Registration form. Step 9: When finished go to the top of the page and choose "Save New Page". Step 10: You will need to fill in two boxes. The top one will become part of the url for the page. This should be a short, abbreviated description of the page. The bottom box will become the display name for the page. This should be more descriptive and easy to understand. For example, if you are creating an Investor's Fair, you might want to put simply "Fair" in the top box, but "2007 Investor's Fair" in the second. Click ok. Please note that giving multiple events the same name may cause them not to show on the live site. If you have monthly meetings that you want to create, you may want to include the month as part of the name to distinguish them from one another. You page is now saved. You can continue to make any necessary changes to the page as needed. Note: until the page is published, only the webauthor who created the page can edit it. Be sure and review your new page before publishing. Once the page is published, any of the chapter's webauthors can edit it. 11

Step 11: After you have reviewed the page and are ready to publish (put the page on the web site), go to the "Edit" drop-down menu and choose "Page Properties". Step 12: Enter a stop publishing date.

12 Step 11: After you have reviewed the page and are ready to publish (put the page on the web site), go to the "Edit" drop-down menu and choose "Page Properties". Step 12: Enter a stop publishing date. Generally people put in the day after the event as the stop publishing date. Never is the default. Click Save. You do not need to change any of the other items in the Page Properties screen. Step 13: Again go to the "Edit" dropdown, but this time choose "Submit". You should now see Page Waiting for Editor Approval The Web Team will then publish the page based upon the following schedule: If you are submitting Monday-Friday prior to 1pm ET, the page will be published the same day. After 1pm ET will be published on the next business day. Pages submitted on the weekend or holidays will be published the next business day. 12

Section 3 Putting an item in the Resource Gallery The Resource Gallery is where articles and documents are stored that will be linked to an event.

13 Section 3 Putting an item in the Resource Gallery The Resource Gallery is where articles and documents are stored that will be linked to an event. Newsletters are stored in your chapter s Newsletter Resource Gallery so that they will be available for the public to download from the public Contact Us page. We will demonstrate how to add a newsletter to the Resource Gallery in a separate section. Begin by using Internet Explorer as your web browser. Go to Log in with your user name and password. Switch to the Edit Site. See Section 1 (page 1) for details on how to do this. Step 1: Go to Tools and from the drop down menu select Resource Manager. Step 2: Click on the + sign in front of Chapters. Step 3: Select the name of your chapter. (It is permitted to use colorful language here because the chapters are not listed in any particular order (<grin>). Step 4: Click on the + sign in front of your chapter s name. When you do this, the list will revert back up to beginning of the list and you will have to scroll down the list again to find your chapter s name with three choices listed below it. If you were doing a newsletter you would select newsletters. If this were a document only for your chapter directors to view you would select chapter-resources. We are going to select public since a class would be a document for the public to view. 13

Step 5: Click on the word Public to open up the Resource Gallery. If your chapter has taken old documents and archived them you may see a folder labeled Old. Ignore that for now.

14 Step 5: Click on the word Public to open up the Resource Gallery. If your chapter has taken old documents and archived them you may see a folder labeled Old. Ignore that for now. Step 6: You can add documents by clicking on the Add New button. You can delete a document by checking the box in front of the file name and clicking delete. You can replace a file by clicking on the Replace icon. If you use the Replace Function to upload a new file, it will update all the links to the previous file. In other words, you won't need to go back to the event pages and relink to the new file. This is especially helpful for new registration forms that may be used on numerous pages. Step 7: To add a file: Begin by clicking on the Browse button and selecting the file you want to add to the Resource Gallery. Step 8: Next select the File Type from the drop down menu. Most of the time you will be adding a word document or a PDF document. Then type in a display name and a short description. Finally click OK. 14

15 You will probably have more than one page of documents. The number of pages is listed at the bottom. Find the item you have added and check to be sure everything is correct. Close this screen by clicking on the X in the upper right hand corner. Once you have all the documents related to an event in the Resource Gallery, you are ready to add an event to your web page. 15

16 Section 4: Linking to an Eventbrite url Begin by creating the event in Eventbrite and saving the url. Step 1: When you are creating an event the Related Files box is the last place holder. This is where you put the Eventbrite link to register for the event Type Register at Eventbrite in the box and highlight. Step 2: Click on the Toolbar icon in the upper left hand corner. Step 3 In this toolbar click on the hyperlink manager which looks like a globe with a chain link below it. Step 4: Type or paste the url in and click ok. 16

Section 5: Correcting a mistake on a published class or event Step 1: Begin by going to editcms.betterinvesting.org and clicking on the Switch to Edit site on your chapter s page.

17 Section 5: Correcting a mistake on a published class or event Step 1: Begin by going to editcms.betterinvesting.org and clicking on the Switch to Edit site on your chapter s page. See Section 1 for detailed instructions. Step 2: Click on Upcoming Events which is on the left side of the page. Step 3: Click on Educational Classes (We will use this as our example). Step 4: Navigate down the list of classes to the class you need to correct. Click on that class title. Step 5: Click on the Edit tab. This will bring you back to all your placeholder boxes. Step 6: Make the correction. Step 7: Click on Save and Exit Step 8: Review your corrections. 17

18 Step 9: Select Edit, then click on Page Properties. Review your correction. Then click on Save. Step 10: Once again go to Edit and click on Submit. 18

19 Section 6: Adding a Newsletter to your Web Page. If your newsletter is not in pdf format, you may want to convert it to a pdf format. We use pdf format because not everyone has the software to read a word document. Also a pdf file is smaller and takes less time to download. To do this, see Appendix B(page 49), Printing a Newsletter in pdf format. Step 1: Begin by going to editcms.betterinvesting.org and clicking on the Switch to Edit site on your chapter s page. See Section 1 for detailed instructions on getting started. Step 2: Put the newsletter in the Newsletter Resource Gallery. It is important that the newsletter be put in the Newsletter Resource Gallery so that it can be viewed on the public web page. Go to Tools and from the drop down menu select Resource Manager. Select View As Tree from drop down menu. Click on the + sign in front of Chapters. Click on the + sign in front of your chapter s name. This will give you three choices. Click on Newsletters. 19

20 Your Newsletter Resource Gallery will look like this. Click on the Add New tab to add your new newsletter to the Gallery. This will open up a new window. Click on Browse to locate your newsletter file. Select File Type (We are using PDF as our example). Type in the Display Name. Example: Fall 2009 Newsletter. Type in a short description of the document and then click OK. Your newsletter is now stored in the Resource Gallery. Click on the red X in the upper right hand corner to close this page. 20

21 Step 3: On your chapter s home page, select Newsletters. You will have to use Internet Explorer to successfully upload your newsletter onto the web page. Step 4: On the Newsletters page, click on Edit. Step 5: At the end of the phrase that says, Most Recent Newsletter click and press enter to add a space for the new newsletter. You always want your most recent newsletter to be first on the list. Type in the file name for the newsletter and highlight it. 21

a sheet of paper with a paper clip in the upper right hand corner.

22 Step 6: Click on the Toolbar Manager in the upper left hand corner to open up the main toolbar. Step 7: On the Main Toolbar, click on the Document Manager which is in the second row and looks like a sheet of paper with a paper clip in the upper right hand corner. Step 8: In the Document Manager, click on the + sign in front of Chapters and select your chapter. Chapters are listed alphabetically. 22

23 Step 9: Click on the + sign in front of your Chapter s name and then click on the + sign in front of Newsletters. Step 10: You can now see the list of newsletters in your Resource Gallery. Highlight the latest newsletter and click on Insert. Close the Main Toolbar by clicking on the X in the upper right hand corner. Step 11: Click on Save and Exit. Then check to see that your newsletter is correctly linked. Step 12: When your newsletter is correctly linked, go to the Edit tab and select Submit. 23

Section 7: Adding an Article to the Web Page Before you begin, if there are documents you are going to need to link to in this article such as a

See Section 3, page 12 for directions on how to add a document to the Resource Gallery. Step 1: Begin by going to editcms.betterinvesting.

Step 2: On the Chapter Home Page, select Articles. There are three choices under Articles ; Chapter Resources, General, Member Resources.

24 Section 7: Adding an Article to the Web Page Before you begin, if there are documents you are going to need to link to in this article such as a registration form, it is a good idea to put those documents in the Resource Gallery. See Section 3, page 12 for directions on how to add a document to the Resource Gallery. Step 1: Begin by going to editcms.betterinvesting.org and clicking on the Switch to Edit site on your chapter s page. See Section 1 for detailed instructions on getting started. Step 2: On the Chapter Home Page, select Articles. There are three choices under Articles ; Chapter Resources, General, Member Resources. Step 3; Most of the time you will be putting the article in the General Section, so you will select General. You will now see a list of the current articles in two places. Step 4: Go to your toolbar and select New and then New Page. 24

25 Step 5: On the page that pops up, click on the down arrow and select, View as Tree from the menu. Step 6: Click on the + sign in front of "Members". This will open up all the categories listed under Members. Step 7: Scroll down the list of topics listed under Members and click on the word Chapter. Step 8: You will now have to choose a template to create your page. Since we are doing an article we will click on the Select icon for Chapter Article Detail. 25

Step 9: You will now be working in a new page that looks like this. Begin to fill in the boxes.

The Abstract should be very short, one or two sentences describing the article.

The CMS system will automatically link the abstract to the title.

26 Step 9: You will now be working in a new page that looks like this. Begin to fill in the boxes. Check the box if you want this article to be the first one on the list. Type in the name of the article. The Abstract should be very short, one or two sentences describing the article. The purpose of the Abstract is to encourage people to open and read the article. Do not type the name of the article in this box. The CMS system will automatically link the abstract to the title. The Abstract will appear on the Articles Page and on your chapter s home page. In the next box you will add in the content for your article. If you have already created the document in Microsoft Word use the following steps to copy the article into the box. Open your article in Microsoft Word, highlight it and do an Edit, Copy. Next, open the Main Tool Bar. 26

Possible related files might be a Registration Form, a list of classes for an education fair or a biography and picture of a special guest speaker at a chapter event.

27 Select the Paste from Word icon which is the sixth from the left in the first row, and click on that icon. Your article is now pasted into this box. Click on the x in the red box in the upper right hand corner of the Main Toolbar to close it. This box is where you link related files to your article. Possible related files might be a Registration Form, a list of classes for an education fair or a biography and picture of a special guest speaker at a chapter event. See Section 8, page 28 for directions on how to create a hyperlink between an article and a document in the Resource Gallery. Step 10: On the Toolbar at the top of the page, click on Save New Page. Step 11: You will need to fill in two boxes. The top one will become part of the url for the page. This should be a short, abbreviated description of the page. The bottom box will become the display name for the page. This should be more descriptive and easy to understand. For example, if you are creating an Investor's Fair, you might want to put simply "Fair" in the top box, but "2007 Investor's Fair" in the second box. 27

You can continue to make any necessary changes to the page as needed. Note: until the page is published, only the webauthor who created the page can edit it.

28 Click ok. Please note giving multiple events the same name may cause them not to show on the live site. If you have monthly meetings that you want to create, you may want to include the month as part of the name to distinguish them from one another. Your page is now saved. You can continue to make any necessary changes to the page as needed. Note: until the page is published, only the webauthor who created the page can edit it. Be sure to review your new page before publishing. Once the page is published, any of the chapter's webauthors can edit it. Step 12: After you have reviewed the page and are ready to publish (put the page on the web site), go to the "Edit" dropdown menu and choose "Page Properties". Step 13: Put in a Stop Publishing date such as the day after the event. The default is to leave the article on your Chapter Home Page and on your Articles Page forever. Click on Save. Step 14: Go to the Edit tab and click on Submit. Your Toolbar will now say Page Waiting for Editor Approval. 28

29 Section 8: Creating Hyperlinks A Hyperlink allows you to connect two documents, two web pages, or a document to a web page or even a document to an address. When you click on one item it will take you to the second item. When an item is linked to something else, it will be underlined. Anytime you see a placeholder box which has this symbol in the upper left hand corner, you can create a hyperlink in that placeholder. (Toolbar Manager) Open the Toolbar Manager by clicking on it. Then click and drag the Toolbar Manager above the placeholder so that you can use it, but it is not hiding your placeholder. Steps to Create a Hyperlink Begin by locating the document you wish to link to. This may be a document in the Resource Gallery, a map you have created on Yahoo or Mapquest or other document on the internet where you will highlight the url. If you are linking to a document in your Resource Gallery, begin by typing a word or phrase in the box and highlight it. On the Main Toolbar, click on the Document Manager which looks like a paper with a red paper clip in the upper right hand corner. 29

30 In the Document Manager window click on the + sign in front of the word chapters. Then click on the + sign in front of your chapter s name. You will now have three choices. Since we are looking for a document that the public can view click on the + sign in front of public. You can now see the list of files in your Resource Gallery. Select the file and click on Insert. In the Tooltip box type some words describing the link, such as Click here to register Close the Toolbar by clicking on the Red X in the upper right hand corner. Your documents are now linked. 30

31 If your documents are linked, the words in the box will be underlined. If you typed a phrase in the tooltip box when you hover you mouse over the underlined words, a popup box will appear telling people what to do. If you are going to link to a url on the internet such as a map or website begin by typing a word or phrase in the box. Highlight the word or phrase. Click on the Main Toolbar which is in the upper left hand corner. Select the Hyperlink which is located in the fourth row and looks like a ball with a chain link under it. Click on the Hyperlink. 31

The default screen that pops up is the one for a Hyperlink. If you wanted to link to an email address you would click on the email screen. Most of the time you will use the Hyperlink screen.

If you inadvertently copy in a second http:// your link will not work. In the box labeled Tooltip, type in some words describing the link, such as Click here for map or Click here to register.

32 The default screen that pops up is the one for a Hyperlink. If you wanted to link to an address you would click on the screen. Most of the time you will use the Hyperlink screen. Now you paste or type the url in the URL box. Note: the is already typed in the box. If you are doing a copy, paste of a url, be sure that there is only one in the box. If you inadvertently copy in a second your link will not work. In the box labeled Tooltip, type in some words describing the link, such as Click here for map or Click here to register. If you do this step, when people hover their mouse over the underlined words on the public page, the phrase you typed in will pop up to help guide them as to what to do. Click on the OK button. Close the toolbar by clicking on the red x in the upper right hand corner. If your page is linked to another page on the internet the words in the box will be underlined. 32

Section 9: Updating a Class Often a chapter will teach a class for several years in a row and the only thing that changes is the date, time and maybe location.

org and clicking on the Switch to Edit site on your chapter s page. See Section 1 for detailed instructions on getting started.

33 Section 9: Updating a Class Often a chapter will teach a class for several years in a row and the only thing that changes is the date, time and maybe location. It is not necessary to create a new page for the class each year, but instead you will update the information from the previous year s page. Step 1: Begin by going to editcms.betterinvesting.org and clicking on the Switch to Edit site on your chapter s page. See Section 1 for detailed instructions on getting started. Step 2: On the Chapter Home Page select Upcoming Events and the Educational Classes. You should only update past events. If you try updating an event that has not yet taken place, the software the software will simply replace the event you updated with the new event. Step 3: Select the class you wish to update and click on it. This will open up the page for that class. Step 4: Now click on Edit on the toolbar at the top of the page. 33

Step 5: You are now on the page where you can make changes to previous class and update it.

Step 6: When you have finished editing the class, click on Save and Exit Step 7: On the Toolbar at the top of

Step 9: In the toolbar at the top of the page, click on Save and Exit, then review the class.

34 Step 5: You are now on the page where you can make changes to previous class and update it. You can change the date, the time, the location, the cost or any other information. Step 6: When you have finished editing the class, click on Save and Exit Step 7: On the Toolbar at the top of the page, go to Edit and select Page Properties. Step 8: Modify the Stop Publishing date and click on Save. Step 9: In the toolbar at the top of the page, click on Save and Exit, then review the class. Finally select Edit, Submit. For detailed instructions on how to put information in the various placeholders and how to submit a class to be published, refer to Section 2, pages 3 to

Section 10: Deleting Old Classes and Articles The only way you can completely remove an old class or article from your chapter web site is to contact Home Office chapterservices@betterinvesting.org.

To eliminate old articles and classes from your web page: Step 1: Begin by going to editcms.betterinvesting.org and clicking on the Switch to Edit site on your chapter s page.

35 Section 10: Deleting Old Classes and Articles The only way you can completely remove an old class or article from your chapter web site is to contact Home Office However you can easily hide old articles and classes so that they are no longer seen on the public page. These articles will still be seen on your edit page. To eliminate old articles and classes from your web page: Step 1: Begin by going to editcms.betterinvesting.org and clicking on the Switch to Edit site on your chapter s page. See Section 1 for detailed instructions on getting started. We will use eliminating an article from your public web page as our example. Step 2: Select Articles. If you have articles in more than one category, you will have to select the category. There are three categories of articles; Chapter Resources, General, and Member Resources. If you only have articles in the General section the computer will go straight to that page. Step 3: Click on the title of the article you want to hide. You now can view the page with the details about that article. Step 4: On the toolbar at the top of the page go to Edit and select Page Properties. 35

36 Step 5: On the Page Properties page the default Stop Publishing is Never. Click on the circle in the box below Never and type in today s date or yesterday s date. This will remove the page from your public site. The page will still be visible on your Edit Site in case you want to use it again in the future. Remember: the only way you can remove a page from both the public site and the edit site is to contact Home Office at chapterservices@betterinvesting.org 36

Session 11: Refreshing Your Home Page The portion of your chapter home page that is visible when someone clicks on the site is a very valuable area.

37 Session 11: Refreshing Your Home Page The portion of your chapter home page that is visible when someone clicks on the site is a very valuable area. We use an old newspaper term, above the fold to designate this part of the home page. As web editor you want to use as much of that space as possible to promote your chapter and events. You should also change at least one thing in that part of the home page every month so that when members return they will see something new above the fold. To assist our web editors in finding content for the home page, the BIVA Board has created an area in Volunteer Resources where chapters can put material to be used on chapter home pages. There are several places where you can make changes that will refresh your home page. Consider changing the generic picture with a photo or logo that represents your chapter. You might also use a photo of your Chapter Board or the Chapter Model club. The BI logo with the chapter name under it takes up a lot of space. Consider making it smaller or removing it. The ad banners on the right can be replaced with banners promoting things in your chapter. Change these banners frequently. The center part of the home page should have something changed in it at least once a month Visit the web editors area in Volunteer Resources for ideas. 37

Section 11a: Replacing the generic picture on the Home Page Step 1: Begin by going to editcms.betterinvesting.org and clicking on the Switch to Edit site on your chapter s page.

38 Section 11a: Replacing the generic picture on the Home Page Step 1: Begin by going to editcms.betterinvesting.org and clicking on the Switch to Edit site on your chapter s page. See Section 1 for detailed instructions on getting started. Step 2:Select the picture or logo you are using for a replacement and put that item in the Resource Gallery. See Section 3, page 12 for detailed instructions on putting items in the Resource Gallery. Step 4: The photo now has a new tool bar just above it. Step 3: On the tool bar select Edit and then click on Edit. Step 5: On the drop down menu select Use New Image. If you would like to delete the old picture, click on the X. However this is not necessary. The new one will be imported on top of the old one. Step 6: Click on the tab that looks like a mountain. This will take you to the Insert Image page where you will have two choices. Select Insert Shared Image. articles and also the pictures. The MCMS (Microsoft Content Management System) Resource Gallery has just the pictures. If you select the second option you will be directed to the full Resource Gallery which has 38

Step 7: Click on the + sign in front of Chapters.

Step 9: All your images will be listed on this page.

If there is text that you would like to display with the picture, type the text in the

39 Step 7: Click on the + sign in front of Chapters. Then click on the + sign in front of your Chapter s name. Step 8: Click on the word public. Step 9: All your images will be listed on this page. Click on Select for the image you want to insert. Step 10: Ignore the HyperLink box. If there is text that you would like to display with the picture, type the text in the Alternate Text box. Click on Insert. Step 11: Click on Save and Exit. After you have reviewed your page, go to Edit then click on Submit. Your page is now waiting for editor approval. 39

40 Section 11b: Adding Banners to your home page On the right side of your home page is a series of banner ads, most of them are for our corporate sponsors. The ad for Online Tools can not be replaced but all the others can be replaced with ads for events in your chapter. Banners can be placed on any page. I would recommend using them on the home page. Step 1: Begin by going to editcms.betterinvesting.org and clicking on the Switch to Edit site on your chapter s page. See Section 1 for detailed instructions on getting started. Step 2: Hover over Edit in the toolbar and then select Edit. and select Use New Nav. Step 3: At the top of the page on the right side you will see a new drop down menu. Click on the drop down arrow Step 4: A new place holder will appear with a Main Toolbar icon in the upper left hand corner. Click on toolbar icon to open the Main Toolbar and then drag the toolbar to the left so that you can see the place holder and use the toolbar. Step 5: In the Main Toolbar you will see what looks like a piece of paper with a red less than/greater than symbols beneath it called the edit code snippet. 40

Step 6: Click on the drop down arrow beside the symbol to choose one of the right nav background images. You can use green, blue, orange or purple. (Purple may appear too dark on the website.

Click in the Advertisement portion of the box twice (this will need to be done slower than a normal double click). You will see a striped border around the box if you have done it correctly.

41 Step 6: Click on the drop down arrow beside the symbol to choose one of the right nav background images. You can use green, blue, orange or purple. (Purple may appear too dark on the website.) Drag the Toolbar to the side so that you can see the Advertisement placeholder. Step 7: Your placeholder box will now look like the illustration on the left. Click in the Advertisement portion of the box twice (this will need to be done slower than a normal double click). You will see a striped border around the box if you have done it correctly. You can now highlight the text and type in a new heading. Step 8: Do the same with the section of the placeholder marked content. Use the Main Toolbar to edit the text, add images, create a hyperlink etc. Step 9: On the toolbar at the top of the page click on Save and Exit. Review the banner and when you are ready to publish, click on Edit, Submit. Step 10: Scroll down the page. Several placeholder boxes have been created on your home page for additional ads. 41

42 Section 11c: Changing the Content on the Home Page The BI logo is in the upper left hand corner of the page. Your chapter name is in a large font in the center of the page and again right below it in a blue banner. You may choose to make the BI logo with your chapter name below it much smaller or even eliminate that second logo to create more space for your chapter events. Step 1: Begin by going to editcms.betterinvesting.org and clicking on the Switch to Edit site on your chapter s page. See Section 1 for detailed instructions on getting started. Step 2: Go to Edit in the toolbar at the top and then select Edit. Step 3: You now have placeholder boxes and a Main Toolbar for each box. You create content in the placeholder boxes using the Main Toolbar just as you did in previous sections. The Introductory Message is in a separate box. Change this message every few months to show that you are keeping fresh content on your web page. Step 4: When you are finished, click on Save and Exit. Review your page and then submit it for publication. 42

Section 12: Inserting Pictures Pictures of chapter special events, classes, instructors, individual board members or a group photo of the board personalize and help make your web page more

43 Section 12: Inserting Pictures Pictures of chapter special events, classes, instructors, individual board members or a group photo of the board personalize and help make your web page more interesting. Adding pictures to your web page is perhaps the most complicated activity you will perform using CMS but it is worth the extra time you will spend learning how to size a picture for your web page. We will present three different methods for sizing pictures and recommend you try them all and select the one that is easiest for you to use. Photos should always be converted to a jpeg or gif image before beginning, (tif files will not work). If you have a lot of photos from a chapter event you may want to place the photos in the Files section of your website so that BI members can view them. You do not need to worry about size of photos placed in the Files section. Step 1: Begin by going to editcms.betterinvesting.org and clicking on the Switch to Edit site on your chapter s page. See Section 1 for detailed instructions on getting started. Step 2: Select the picture you are using and put it in the Resource Gallery. See Section 3, page 12 for detailed instructions on putting items in the Resource Gallery. A picture can be inserted any place where you have a placeholder box with a Toolbar Manager. We are going to add a Director s photo to the Contact Page as our example. A Placeholder with a Toolbar Manager Toolbar Manager Step 3: Navigate to the page where you plan to add the photo, then go to Edit in the toolbar at the top of the page and select Edit. 43

Your placeholder box will look like the illustration at the right with red text above the box.

Using a table is not necessary unless you have a lot of photos aligned in a row.

Click and drag the Main Toolbar to the side so that you can see the placeholder box.

44 Your placeholder box will look like the illustration at the right with red text above the box. In this example I will be inserting the photo in a table. Using a table is not necessary unless you have a lot of photos aligned in a row. See Section 13, page 47 for information on creating a table. Step 4: Click on the Toolbar Manager to open the Main Toolbar. Click and drag the Main Toolbar to the side so that you can see the placeholder box. On the toolbar select the Image Manager icon which is the first one in the second row and looks like a mountain with a red dot above it. Step 5: The Image Manager window is now open. On the left side of this window, click on the + sign in front of chapters. Step 6: Scroll down to your chapter s name and click on the +sign in front of it. 44

Click on Insert and then click on Close. View your photo in the Placeholder box.

This will give you a guideline in determining the size of your picture. We will describe three ways you can resize pictures.

45 Step 7: You now have three choices: chapterresources, Newsletters, and public. Click on the + sign in front of the word public. Step 8: You will now see the list of photos in your Resource Gallery. Select the photo you wish to insert. The picture will appear in the box to the right. Click on Insert and then click on Close. View your photo in the Placeholder box. If your picture is too large you will need to resize it The full width of the chapter webpage is 380 pixels. This will give you a guideline in determining the size of your picture. We will describe three ways you can resize pictures. Select the one that works best for you. Method A: Resizing the photo in your Placeholder box In our example the image was much too large. Begin by right clicking in the Placeholder box. Click on the Set Image Properties. In the Image Properties window we want to change the last two items in the screen, the width and height. 45

The first thing we want to do is link the width and height so they will change proportionally.

Now when you change one number the other will automatically change to keep the correct proportions for your picture.

You may have to experiment a bit with the numbers to find the size you want.

46 The first thing we want to do is link the width and height so they will change proportionally. Do this by clicking on the word constrain. Your links will now look like the illustration on the left. Now when you change one number the other will automatically change to keep the correct proportions for your picture. In our example, I am going to change the width to 90 since my photo was quite large. You may have to experiment a bit with the numbers to find the size you want. When you change the width the height will automatically change to keep the correct proportions. Click on the OK button View your photo to see if your size is correct. If it is not correct, right click on the photo to open Image Properties and try a new number for width and height. 46

Gallery. It also allows the web editor to lighten photos that are too dark such as my example or to crop their photos.

47 To align your photo with text click on the Set Absolute Position icon on your Main Toolbar. This button is in the second row, second from the left. Method B: Resizing your photo before placing it in the Resource Gallery Some web editors prefer this method because it allows them to check the size of photos before they put them in the Resource Gallery. It also allows the web editor to lighten photos that are too dark such as my example or to crop their photos. There are limits to the size of photos that will be accepted by the BI system so you need to reduce the size of large kilobyte files. Your goal should be approximately 80 kilobytes or less. Try to avoid having the size of the picture be much higher than 100 kilobytes. Once the picture is placed in the Resource Gallery you can see the size of the photo. The Resource Gallery will accept photos that are to large to be published, but just not publish them. So watch the size and keep it in the acceptable range. 1: Begin by placing the photo in the My Pictures section of your computer if it is not already there. Do this by locating the photo in your files and do a copy, paste to move the photo into the My Pictures folder. 2. Double click on the picture to open the Microsoft Picture Manager. 3. Every computer now comes with a software package to resize photos to send via . These programs will have different names depending on the computer you are using but all the programs will perform the same functions. You can use the program on you computer to resize the picture or you can use the Microsoft Picture Manager to crop and resize the picture. 47

48 4. Every version of Microsoft Office Picture Manager will be different. Begin by finding the tab that says, Crop. Cropping, or removing portions of the photo will reduce the overall resolution of the image. There are always waste portions on the top and sides of the photo that can be electronically removed by cropping the photo. This is the first step in resizing the photo. 5. Resize your picture keeping height and width proportional until the file size is down to approximately 80 kilobytes or smaller. All of these programs have an Image>Attributes tab where you can check the size of the photo. You can also use the Brightness and Contrast tab to lighten your picture if necessary. (Remember: we must resize photos that we want to display on a web page. Photos that we are going to put in the Files section do not need to be resized.) 6. Now your picture is ready to put in the Resource Gallery. See Steps 2 8, starting on page 42. Method C: Resizing your Photo Using a Screen Capture Tool If you have a Screen Capture Software such as SnagIt it is also possible to use that tool to resize the photo. Using your Screen Capture Software size the photo to the approximate size you want to view on the web page. Save the photo as a jpeg file and place in the Resource Gallery. See Steps 2-8, starting on page 42. Step 9: If you want the picture to appear on the Public Webpage as well as the Member Webpage you must place the photo in the first/top placeholder on the Member Webpage. It will then be automatically pulled into the Public Webpage. Images placed in the first/top placeholder on secondary web pages such as the Newsletter webpage will appear in the Newsletter webpage on the public site. Photos put in a placeholder other than the first one on a page will not appear on the Public Webpage. Step 10: When the picture has been resized and is placed where you want it, click on Save and Exit in the toolbar at the top of the page. Review your photo and when ready to publish, select Edit, Submit. 48

Toolbar Manager A table can be created in any placeholder that has a Toolbar Manager. Placeholder Box Step 1: On the Main Toolbar select the Insert Table button.

49 Section 13: Creating a Table Tables are a useful tool when you must enter information or pictures and you want the data aligned in neat rows. By putting the information or pictures in a table you will be assured everything is aligned in straight rows or columns. Toolbar Manager A table can be created in any placeholder that has a Toolbar Manager. Placeholder Box Step 1: On the Main Toolbar select the Insert Table button. It looks like a sheet of paper divided into rows and columns. Step 2: A Table Wizard will open up. Using your cursor, shade in the number of rows and columns you want for the table. In our example we have three rows, two columns. Click on enter to create the table in your placeholder box. Step 3: The table will appear to be very small; however each box in the table will expand as you type in data or insert a picture. Example where a table was used to align data and pictures. Note how the fields expanded when data was entered. 49

com Step 2: Make sure you are in the Maps tab. Type the address in the box. You must have the street address, City and State. Having the Zip Code is helpful.

50 Appendix A--Using MapQuest MapQuest is just one of the mapping programs available on the internet. If you are familiar with another program you may use that program instead of MapQuest. Step 1: On your internet browser, go to Step 2: Make sure you are in the Maps tab. Type the address in the box. You must have the street address, City and State. Having the Zip Code is helpful. Click on Get Map. Step 3: You may want to close this box in the middle of the map. Do that by clicking on the x in the upper right hand corner of the box. Step 4: Hold your cursor over the url and right click. Select Copy. You are now ready to put the url on your web 50

If you do not have Adobe software consider downloading and using one of the free or low cost alternatives.

com Step 2: Download and install the free CutePDF Writer.

51 Appendix B: Printing a Newsletter in pdf format A newsletter can be published as a Word document but it is a best practice to convert the newsletter to a pdf format before posting it on the website. Items put into pdf format are smaller files, easier to download and they can not be altered. If you do not have Adobe software consider downloading and using one of the free or low cost alternatives. We will use Cute PDF as our example which is just one of several free or low cost packages available. Step 1: On your web browser go to Step 2: Download and install the free CutePDF Writer. Step 3: When you are ready to convert a document from Word to a pdf format go to the File menu and click on Print. Step 4: Select the Cute PDF Writer and click on OK. Step 5: You will now be asked where to save the pdf file. Select the location where you want to save the pdf file and click ok. You now have a pdf copy of your newsletter to put in the Resource Gallery. 51

In the fourth unit you will learn how to upload and add images and PDF files.

In the fourth unit you will learn how to upload and add images and PDF files. Introduction Here at SUNY New Paltz, we use the Terminal Four (T4) web content management system (CMS). This puts the power of editing content on our college s webpage in the hands of our authorized users.