Our Sunday Visitor. Website User Guide Continuing the Legacy - Serving the Church

Transcription

1 Our Sunday Visitor Website User Guide Continuing the Legacy - Serving the Church

2 Table of Contents introduction... Pg 3 Section 1 Web browsers...pg 4 Section 2 Logging in...pg 8 Section 3 Creating a site map...pg 11 Section 4 Creating a new page...pg 11 Section 5 editing text...pg 25 Section 6 Other icons in the tool bar...pg 33 Section 7 Linking tools...pg 34 Section 8 Working with images...pg 40 Section 9 Working with the side bar...pg 46 Section 10 Calendars...Pg 52 Section 11 Additional help...pg

3 Introduction Congratulations and welcome to your new Our Sunday Visitor website! Your new website has been created for you with best practices in layout. The layout is designed to be a turn-key site, just add some basic information about your church and you are ready to go live. Like every good website you will be able to change your content when you have time and have more content to add. To have a site ready to go in just a few days, just add this basic information: Your church photo on the homepage A welcome message Your church location on directions page Your church staff and contact information staff page By just adding a few things to your site, you can now launch a website to be proud of. Let s get started!

4 Section 1 Web Browsers Your content management system is optimized to work on all web browsers. However, it s important to use the most updated version. Here are the browsers that are supported: Use the following instructions to update to the most recent browser version. Google Chrome (for the Macintosh or PC) To find out what version of Google Chrome you are using (whether you are on a Windows-based computer or a Macintosh), open the web browser. Click on the word Google in the upper left hand corner of the open browser window and click on About Google Chrome from the drop down list. Once you have clicked on About Google Chrome, a new window will open and tell you what version you are using

5 The version is listed below the browser name, in this case Because it isn t the most recent version, Google let s you know that there is a new version and to update now, just click the Update Now button. You can also click the Set Up Automatic Updates for All Users button and Google will automatically update the browser when a new version is available. More information about Google Chrome can be found online at Safari (for the Macintosh or PC) To find out what version of Safari you are using (whether you are on a Windows-based computer or a Macintosh), open the web browser. Click on the word Safari in the upper left hand corner of the open browser window and click on About Safari from the drop down list

6 Once you have clicked on About Safari, a new window will open and tell you what version you are using (see illustration right). The version is listed below the browser name, in this case ( ), and it is the most recent version. Web User Guide More information about Safari can be found here: Mozilla Firefox (for the Macintosh or PC) To find out what version of Firefox you are using (whether you are on a Windows-based computer or a Macintosh), open the web browser. Click on the word Firefox in the upper left hand corner of the open browser window and click on About Firefox from the drop down list (see illustration to right). Once you have clicked on About Firefox, a new window will open and tell you what version you are using (see illustration below)

7 The version is listed below the browser name, in this case, version 9.0.1, and it s out of date. Firefox will let you know when an update is needed and will install the update for you. The next time you check the browser version, you will see this: More information about Firefox can be found here: Internet Explorer (for the PC) Internet Explorer is Microsoft s default browser for any computer using Windows operating system. Because it comes bundled with new personal computers, it s considered the most widely-used browser in use. To find out what version of Internet Explorer (IE) you re using, click on Tools icon then click on About Internet Explorer. Once you have clicked on About IE, a new window will open and show you what version you currently have installed (see illustration right). The version listed, , is the latest version. More information about Internet Explorer can be found here: com/ie

8 Section 2 Logging in Web User Guide To start working on your site, you ll need to access the administration portion of the CMS (content management system). You should have received a welcome with links to: 1) your development site (not live) and 2) the administration site. We recommend having two browser windows (or tabs) open at all times so you can work in one and view your changes in another. If you click on each link in the welcome , you will have two browser windows open. There is another way to open two browser windows. Choose your browser and follow the instructions below. Safari To open a new window or tab in Safari (Mac only), hold down the command key and press the T key at the same time. Firefox To open a new window or tab in Firefox (Mac), hold down the command key and press the T key at the same time. To open a new window or tab in Firefox (PC), hold down the control key and press the T key at the same time. You can also click on the plus sign (Mac and PC) to open a new tab. Google Chrome To open a new window or tab in Google Chrome (Mac), hold down the command key and press the T key at the same time. To open a new window or tab in Google Chrome (PC), hold down the control key and press the T key at the same time. You can also click on the plus sign (Mac and PC) to open a new tab. You should now have two browser windows opened. If you clicked on the links you received in your , you should now have your development site and your admin page in two separate windows or tabs

9 Your development site is a fully functional website that just needs content. In the other tab or browser window, you should see a log in screen to the administration portion of your site. This is where you will add your church-specific information

10 Put your cursor in the Username box, click and type in your user name. Put your cursor in the Password box, click and type in your password. Click the Log in button. You should now see the administrative dashboard. (see illustration below) The highlighted area above are the key navigation tabs that you will use to customize your church website. From the left, the tabs are: Home (the house icon) Pages (where you can edit content on specific pages, add or delete pages) (where you can send s, set up accounts and more) Calendar (where you can manage dates, events, and subcalendars) Forms (some pre-built forms) Media (where you can add pictures, video, podcasts, etc) Stats (where you can measure website usage) Sitewide (where you can create and customize your site navigation and structure) User guide (instructions on how to use the content management system) At the top right, there are two additional buttons: My Account (where you manage your user name and password, and can change your password) Logout (to leave the administrative area) You can click on each of these tabs to familiarize yourself with what they are and how they work. To get started with your church website, this User Guide will cover the basics on creating a site map (your site navigation) and adding content to your church information

11 Section 3 Creating a site map (navigation) Your website has some basic layout right now. It may or may not be fine for your church as you begin. But you ll definitely want to add some content that is specific to your church. And, you ll want to change the content on the basic layout pages. But before you do all of that, you need to figure out what your website will contain. Note: Website navigation is the most important thing about creating your site. Navigation should make sense to your visitors, in this case, your parishioners. It s how they find relevant content. You want to organize content under intuitive headings that will later become your primary navigation. Before you create your navigation, take some time to write down all the things you want to include in your site (such as weekly bulletins, sacramental information, Mass times, staff information, contact details, calendars for events, ministries, music, religious education and formation, etc.) As you list all the things going on at your parish, you ll see how they all start to fit together into logical categories. For example, if you choose Formation as a major navigation link, you could include the following as sub-links: CCD, Adult Education, High School Group and more. Or if you choose Ministries as a major heading, you could include all the ministries at your church. While you are thinking about all the activities going on at your church, you also need to decide if you want each item to have a separate page. Do you need individual pages for each of your ministries? These decisions will determine how you move forward with the site map (navigation) for your site. This user guide will show you both ways to create navigation, but you will have to choose what is best for your church. Once you have decided what needs to be an individual page, you need to create these pages. We will link to them later. Section 4 Creating a new page There will be times when you need to create new pages rather than just modifying existing pages. Take a quick look at the Youth page. You will find it under the Ministries tab on your development site. We ll create a new page in this section

12 Go to the admin site tab on your Web browser and navigate to the Pages tab. Click on the Add Page button. Once you click the Add Page button, you will see this: Title field: This is the name of your page, as well as the headline that will appear on it. This field is mandatory. Subtitle: This will appear under the title of the page. It is optional Page location: Where the page will be stored (or organized) on your server. If you use this option, be sure to save your page (Save as Draft) prior to changing the folder Notes: This information does not show up on the published page, but does appear on the admin side (often valuable for pages that have more than one person editing them)

13 For this exercise, enter the following information: Title field: Young Franciscans Subtitle field: A formation group for youth ages Notes: This is info about the adult choir Web User Guide Page location: We will leave this in the default location (General Site Pages) for now. Scroll down to the bottom of the page. You will see the following: The first highlighted field is the tool bar you will use to create links, change text properties, add images and more. The second large area is where you will type page text. This is the content that will appear on the web page. The Change Comments field is where you will identify what you did to the page. This will show up in the admin section, and is useful if more than one person will be editing pages on your site. The last three buttons (to the right of the Change Comments field) are Publish, Save as Draft and Cancel. Publish means the page will be live. Save as Draft means all of your work will be saved, but not live on the site. Cancel means that anything you ve done will not be saved

14 For now, let s leave the main content area blank. Scroll down to the bottom of the page and click on the Save as Draft button. You should now see your page in the list: Notice that the status of the page is Draft. If you had clicked the Publish button, the word Active would be there. Changing folders If you want to organize your site by folders (just like you would your files on your computer), you can create pages and then move them to folders. Or you can move them to folders when you create them. Right now, the basic site has three folders. Scroll all the way down (past the page we just created) and look at the folders. To see the content of the folders, click on the word Open to the right of the folder. Since our page is going to go in the Youth Ministry Pages folder, open that one. You should now see a list of the pages that are in that folder

15 We will now move our Young Franciscans page to the Youth Ministry folder. Scroll up to the Young Franciscans page you just created. Click on the Edit button to the right of the page name. The page will open up and you will see the information you put on the page when you created it. To move the page to the Youth Ministries folder, click on the Change Folder button. As soon as you ve clicked it, the Move Page dialogue window will appear. It looks like this (see illustration right): Note: Look at the warning at the top of the box. If you have made changes to the page, be sure to save them before moving it to another location. You will lose unsaved work. To move the page, click on the Move Here button. Once you have moved the page, you will now find it under the Youth Ministries folder. Notice that it is still in Draft status

16 Let s look at what s happening on the development side. Go back to your website in the other browser window or tab. Hold your cursor over Ministries and click on Youth. When you get to the Youth page, be sure to refresh the page so that any changes you ve made will be reflected. It should look like this: Let s go back to the Young Franciscans page on the admin site and click on Edit. Scroll down to the bottom of the page, fill in the Change Comments field and click the Publish button

17 To see the status of the page, be sure to go to the Youth Ministries folder. Notice that the page status has changed from Draft to Active. Now, let s check to see what it looks like. Click on the word Preview (next to the magnifying glass) to the right of the page name. The page will open in a new window. If you Switch over to the development site in the other window browser or tab, notice that the page still isn t visible. That s because it must be linked from the main page. We will finish this exercise later in the tutorial. (see section 9, Modifying the side bar) Modifying the current navigation Let s change the navigation that is currently on your development site. This is what it looks like now. The current navigation is highlighted. Note: To successfully complete this exercise, you will need to have created all of the pages you identified on your site map. For purposes of this user guide, we will be creating a main navigation heading called Sacraments and there will be seven pages underneath it. One page for each of the sacraments (Baptism, Confession, Communion, Confirmation, Matrimony, Holy Orders, Anointing of the Sick). If you don t have those pages, you will need to create them using the instructions in the Creating a New Page section

18 You change the navigation on the administration site. You should already be logged in and have the admin site open in a separate browser window or tab, but if the site has been idle too long without any activity, you will automatically be logged out. This is a safety precaution. Just log back in if you need to. Otherwise, click on the Sitewide button in the main tool bar. You will now see an edit button to the right of the page. Click the Edit button to see your sitewide navigation. After you have clicked the edit button, you should see something like this: Notice that the items in blue on the left side of the page correspond to the main headings on your development site. Home and Worship are not blue because there are no drop down page associated with them

19 Let s start by adding a new Menu Header to the top navigation. A Menu Header is an item that appears at the top level of a navigation menu, but does not itself link to anywhere. It simply serves as a header for the drop menu underneath it. In this exercise, we will add all seven sacraments as drop down items underneath our Menu Header. Click on the Add Menu Header button at the top right of the page. A new dialogue box will open. It looks like this: In the Title box, type Sacraments. In the Display Order box, type 50. The Display Order determines where the CMS will place items. Just use increments of 10 (so the next one you would create would be 60). That way, you can fill in smaller numbers if you need them. When you have the information typed in, click the Save button

20 You should now see your item added to the list on the left (see illustration top right). Web User Guide You ll notice that it s not blue, like the others. That s ok. Once we add some items underneath it, it will be blue and there will be a minus sign next to it. The minus sign means that the information is expanded (visible) beneath the main heading. If you click on the minus sign, it will collapse the information and you will only see the main headings (see illustration right). Now, check your development website (in the other browser window or browser tab. Be sure to refresh the page so you can see your change.) It should look like this: Let s add a menu item (drop down) to Sacraments. Click on the Add Menu Item button on the right

21 The Add Menu Item dialogue box will appear. It looks like this: In the Title field, type Baptism. Move down to the Display Order field and type 60. At the Link To field, move your cursor to the right of the field and click on the arrow. A drop down menu will appear. Choose Page. After you choose page, a second field will appear

22 Scroll down until you find the Baptism page you created. When you see it, put your cursor on the word Baptism and click. Leave the Open in field set to the default setting of same window. Click save. Now, take a look at the content on the Sitewide tab. The main heading of Sacraments is now blue and there is a minus sign next to it. Underneath the Sacraments heading is the sub-head Baptism. Go to your website development tab or browser window and take a look. Be sure to refresh the page (F5 on a PC or just hit the enter/return key on your computer keyboard) so you can see the changes

23 Check to make sure your link works. Web User Guide Now, let s add links for all the other sacraments. Just follow the same steps above (that we did for Baptism). When you are finished, you should see this on the administration side: And this on the development side: You will have to hold your cursor over the word Sacraments to see the drop down. Check all of your links to make sure they go to the right page. Let s assume that you made a mistake when you linked a page. In this example, Anointing of the Sick goes to the wrong page. No worries. It s easy to fix. Go back to the administration browser window or tab and click on the Edit button next to the Anointing of the Sick menu item. The dialogue box looks like this (see illustration right):

24 You can see in the highlighted area that it is going to a page called Children. Click on the arrow at the end of the field box. Scroll down with your cursor until you see the page called Anointing of the Sick. Then click. When you have selected the correct page, be sure to click on the Save button

25 Go back to your development browser window or tab and check to make sure the link is correct. Be sure to refresh the page to see your changes. Section 5 Editing text Customizing text for your church is easy. Click on the Pages tab in the main navigation. You should see a screen that looks something like this: This is the same place where you created new pages in section 4. Let s start by editing the homepage. The homepage is the first one on the list. Go over to the right, and click on the edit button. (If you are not sure what the page looks like, you can click on the word Preview and the page will open up in a new window.) Once you have clicked the edit button, you should see something like this on your screen:

26 Title: This is the main title on your page Subtitle: A short phrase or sub head. (This is optional) Page location: By default, the page is in the General Pages section. If you want to move a page, follow the instructions in Section 4. Always leave the homepage in the General Pages section. Page status: By default, all pages are active. If you create a page for an annual event (like a Fall Festival), you can deactivate it (by choosing inactive) and keep all the content for next year. Then you can change the dates and reactivate it (by choosing Active) when you are ready. Inactive pages are entirely inaccessible on the public website, they will not be returned in search results, and links to inactive pages will return a Page Not Found message. Inactive pages are flagged as inactive and moved to the bottom of the page list to stay out of your way until you need them again. Notes: This section allows you to share information about a page. It does not show up on the page. Page name and headline Let s change the headline and the page title. Put your cursor in the Title box and click your mouse. You can either highlight the word Welcome that is already in the box and hit the delete key or you can delete the word letter by letter. Once you have deleted the word Welcome, type in the name of your parish. In this example, the church will be St. Joseph. When you have completed putting your church information in the box, you should see this: Put your cursor in the Subtitle box and click your mouse. Then type something specific about your parish. In the example, the subtitle text will be: Nourished and sustained by Christ When you are finished, it should look like this (see illustration right): Place your cursor in the Notes field and click. Then type: updating content to reflect new church mission. Now, scroll all the way down to the bottom of the page until you see this section (see illustration bottom right):

27 Place your cursor in the Change Comments box and click your mouse. Enter this text: Modified headline and subtitle. Then click the Publish button. Note: It s good practice to make note of your changes, especially if you have more than one person working on your website. So, every time you make a modification, be sure to use this section. The system will keep a record of all the changes. Once you have clicked on the publish button, you should see this: Note the check mark next to the name of the page. That means the page is live on your site (test site if you have not gone live yet). Also, note that the content after the word HOMEPAGE has changed, and so has the publish date. Now, go to the development site on your other browser window or tab. Be sure to refresh the page (hitting the enter/ return key or, on a PC, pressing the F5 button) so you can see the changes. It should look like this: Now, we can go back and make more changes to the page. Go back to the admin site on the other browser tab or window. Make sure you are on the Pages tab. If not, click on it

28 Click on the edit button to open the homepage again. This time, scroll down until you see this part of the page: Make sure the tab Main Area is highlighted. If it s not, click on it to bring it to the front. Put your cursor in the part of the box below the green Welcome headline that says An ac habitasse

29 Click in the box and drag your cursor from the beginning of the text to the end. It will be highlighted. Once you have highlighted all the text, you can now type in what you want to say about your church. In this exercise, use this text (or your own): St. Joseph Catholic Church strives to be a living and growing community of prayer, support and service formed by the Gospel. In our lives we try to live out these Gospel values in our Catholic heritage and pass them on to the upcoming generations. In the spirit of Jesus we try to reach out to those among us who are in need of our support and care within our parish and beyond. If you copied and pasted this content from the training document, the formatting may be wrong. Or if you copied it from your existing website, there might be some strange spacing. Let s use the tool bar to correct any errors

30 With the text highlighted, find the icon with the Word document on the clipboard. If you hold your mouse over it for a second, you will see Paste from Word. Click on the icon. A new, smaller window will open up. Paste your text in the window. Click the ok button when you are finished. You should now see this:

31 Let s make a few more changes to the text. Notice that the words living and growing are italicized. To change those two words to match the rest of the type, highlight the word living with your mouse. Notice that when you do this, the I tool in the toolbar is also highlighted. Just click on the I to remove the italics from the word. Follow the same steps for growing, too. At the end of the sentence, the word Gospel is bold. To remove the bold, highlight the word Gospel with your mouse and click on the B (to the left of the I) on the main tool bar. Notice the same thing happened: the B is highlighted when you highlighted your text. To remove the bold type, just click on the B button. Once the word Gospel is no longer bold, scroll down to the bottom of the page until you see the Change Comments. Note that our last comment is there from our first headline and subtitle text edits. In the change comments box, type: Changed Welcome content

32 Then click the publish button. Switch to your other tab, refresh the page and see the changes. Now you can make text bold or italic by following the same steps. (Highlight the text you want to change, choose the appropriate tool and click it.) Just a note about best practices: It s difficult to read type in different fonts. The same goes for using capital letters. On the Web, it s best to write in sentence case to make content easier to read.) Formatting text There is another way to format text. Open the homepage again. (You need to be on the admin browser window or tab.) On the tool bar, locate the Normal icon. There is an arrow to the right. Click on the arrow to see the drop down list

33 You can highlight any text and apply the style you want to it by selecting it. So we could have highlighted the words living and growing and then applied the Normal Text style and accomplished the same thing. Header 1, Header 2 and Header 3 are all headline styles. You want to stay away from the ALL CAPS and the Fancy Text because they are difficult to read. The caption is good for photos. There are some other formatting options, for example, for bulleted and numbered text. To align text to the left, center, right or justified: Best practices for websites include having all the text in the same format. For example, you don t want to center some text and then align the next paragraph to the left or right. Consistency is key for the best user experience. Section 6 Other icons on the tool bar There are many other useful icons on the toolbar. If you hold your mouse over any of the icons for just a second, a small window will appear and tell you what the tool is for

34 There is an undo/redo feature that might be useful. Undo is on the left. Redo is on the right (see illustration top right). Be sure to use spell check every time you work on a page. Other important tools include (from left to right) Select all, cut, copy, paste, paste as plain text, paste from Word (see illustration right). Select all: When you click the mouse inside the content area and click on this icon everything in the area is highlighted, including images. Cut (scissors): If you want to delete some text from an area, highlight the content with your mouse and then click on the cut icon. Note: This action will also keep the text in memory (like a copy), so you can paste it somewhere else. Copy (two pages stacked on top of each other): Highlight a section of content with your mouse and then click on the copy icon. This will duplicate the content and you can paste it somewhere else. For example, if you have a link that you want to put on more than one page, you can copy it, go to the other page and paste it inside the content area. Paste as plain text: When you copy text from Word or the Internet (another website), it brings its own formatting with it. If you choose paste as plain text, it will remove the formatting. Paste from Word: Similar to Paste as plain text, this tool will strip all the Word formatting from content that you are copying from a document. Section 7 Linking tools These are tools you will use to link pages to each other, or to link to different websites. Starting on the far left, the first icon is the link tool. The hyperlink icon, a globe with a chain link, is universal for linking. You will see this same icon in Microsoft Word, PowerPoint and other programs. There are several kinds of links. The first one would be to an external website. For example, if you were to link to Mass Times, a website that provides travelers with Mass times at Catholic Churches across the U.S. External link Step 1: Find the Mass Times URL (A URL is a web address. Mass Times URL is Step 2: Place the mouse/cursor in the content box and click. Type the following text: If you are traveling and want to find go to Mass, find out where and when you can go

35 Then highlight the section: find out where and when you can go by placing your mouse on the word find, clicking and holding down the button until you are at the end of the sentence. It should now be highlighted. Step 3: Move your mouse to the hyperlink icon and click on it. You will see this window pop-up. The default is set on pages, but using your mouse, click on the arrow to the right of Pages and scroll down to choose external URL

36 Once you choose External URL, the dialogue box will contain an empty field. Put your mouse in the second box and click. Type in the Mass Times URL (web address) in the box below the Link to External URL. Note: You can also copy the Mass Times URL in the address bar of the browser (by holding down the control key and the C key at the same time) and pasting it in the box (by holding down the control key and the V key at the same time.) For the Macintosh, use the Command key instead of the control key. Click the ok button. Your page will look like this: Be sure to scroll down to the bottom of the page, add a change comment and publish your page. Switch back over to your development browser window or tab. Be sure refresh your site so you can see the link. The link is bold and when you mouse over it, the line indicating it s a link will appear

37 Internal (page to page) link The next kind of link connects pages within your website. In this exercise, we will link to another page from the content that is already in the page. And we ll be using the same icon we used to make the external link. Step 1: Make sure the homepage is open and ready for editing. In the first paragraph, put your cursor in the content and highlight the text that says: living and growing community of prayer. Step 2: Once the text is highlighted, click the link icon in the toolbar:

38 Once you have clicked on the icon, the Create Link dialogue window will appear: Step 3: On the right of the box that says Link to, click on the arrow to see a list of URLs

39 Step 4: Once that is done, click on the arrow below the Custom URL box to see a drop down of available pages from your content. Scroll down the list until you see /worship. Click on /worship to select it. You should now see Custom URL and /our-faith in the two boxes. Click ok. After you click ok, the text should still be highlighted. If you put your mouse over any of the highlighted text, you will see the link (underline). Step 5: Scroll down to the bottom of the page. In the Change Comments box type: Added link to Our Worship page and then click on the Publish button. Step 6: Remember to go to your site and click the refresh button to see your link. You can click on it to make sure it works. The linked text will be bold and when you put your mouse on the bold words, you will see the underline that signifies it is a link

40 Image links You can also link images to pages using the same steps as above. In step 1, instead of highlighting text, you would click on the image you want to link to a particular page. The rest of the steps remain the same. Section 8 Working with images Images add interest to page content. There are some things you need to know about adding images to pages and placing them next to content. We re going to add an image to the homepage. Start on the Pages tab in the control panel on the admin browser window or tab. Find the Homepage. Click on the edit button

41 When the page is open, you should see a placeholder for the image. Click on the image to highlight it. Then move your mouse/cursor to the image icon on the toolbar and click. The image dialogue box appears. Your basic site doesn t come pre-loaded with images, so you will have to add them. Click on the Upload button. The system will prompt you to find a file

42 Click on the Add Files button. Navigate to the place where the photo resides on your computer. When you find the file, click it and then click ok. You should now see the image you uploaded. Double click on the image to add it to the web page. The image will appear in the Image Properties dialogue box (see illustration left). The URL field shows the name of the file and its location. The Alternate text field is blank. You can type something descriptive in this box: Christ is the focus of our parish community. (This is an optional step, but content in the alternate text box helps search engines like Google find and index your website.)

43 On the left side of the Image Properties dialogue box, you will see the size of your image. There is a little lock icon. If you click on the lock, it will appear open. Click on it again to close it. Make sure the lock is always in the closed position. The border box should always be set to zero. Click your mouse in the box and type 0 (zero). Note: It is important not to use these settings to size pictures. Always size a photo to the dimensions you want for your website before uploading them to your site. HSpace (horizontal space): this adds space around the edges of the image on the horizontal axis. Type a number in the box and watch the picture move. When you are finished, just delete the number and leave this box empty. VSpace (vertical space): this adds space around the edges of the image on the vertical axis. Type a number in the box and watch the picture move. When you are finished, just delete the number and leave this box empty. The last option in the Image Properties dialogue box is image alignment. Place the mouse on the arrow to the right of the box and click to see the options. Select Left from the drop down menu. The preview pane on the right will show the picture aligned to the left of the text

44 If you like this layout, click ok. To see what the image looks like aligned to the right, choose right from the drop down menu. The preview pane on the right will show the picture aligned to the left of the text. If you like the way the image looks aligned to the right of the text, click ok

45 After you click ok, you will see the image in the body of your web page. Scroll down to the bottom of the page and in the Change Comments field, type: Added main photo. Then click on the publish button. View your changes on the development site in the other browser window or tab, and don t forget to hit the enter/ return key to refresh the page

46 Best practices for images It s best to use low resolution images (72dpi). Images that come from digital cameras are usually high resolution (300dpi or higher). Images from cell phone cameras are usually low resolution. Keep image sizes consistent. Section 9 Working with the sidebar The sidebar on the page can be used for a variety of things. On the homepage, there is a placeholder for your church mission statement or vision statement. We have pre-loaded a link to your calendar, and added the Facebook logo. If your church has a Facebook page, you just need to add the link to the image (see Section 8). Let s now link the Young Franciscans page you created earlier to the Youth page on your site. On the admin side, go to the Pages tab. Scroll down to the bottom of the page to find the Youth Ministry Pages folder. Click on the Open button to the right of the folder

47 Once the page is open, look at the tool bar. By default, the Main Area tab is highlighted, and the Sidebar Area tab is grayed out. To edit the content in the Sidebar Area, just click on the tab. Your screen view should change so you see the sidebar that is currently part of this page. Let s add the Young Franciscans page to the bottom of the list already in the sidebar. To do this, put your cursor in the content box below the last link (Click here for more info) and click. (If you can t put your cursor below the link, then click after the word info and hit the enter/return key.) Then type: Young Franciscans. (Remember if you copy/ paste this headline into the page to use the Paste as Word icon on the toolbar.)

48 The type comes in without formatting, but that s ok. We ll fix it later. To add a brief description about the Young Franciscans, hold down the shift key and press the enter/return key at the same time. (This is the same as a single space. If you don t hold down the key, you will be making a double space. Since all the other items are single spaced below the headlines, we re keeping the layout consistent.) Once your cursor is on the next line, type: Youth in grades 8-12 are invited to join this fun and active service group. Let s make the headline look the others. Put your cursor next to the Young Franciscans headline. Click the mouse and drag it across both words to highlight it. Go up to the formatting icon in the tool bar and click on the drop down arrow. Scroll down to header 2 (which looks like the other headings on the sidebar) and click. Your sidebar should look like this:

49 To now link to the Young Franciscans page, use your mouse to highlight the words Youth in grades Move your mouse up the hyperlink icon in the tool bar and click. The Link dialogue box will open up. Since we are linking to a page, we ll leave this field as it is. In the second field (that says Children (Page #5), click on the arrow at the right of the field

50 Once you have clicked the arrow, you should see a list of everything in your website. Scroll down through the list until you see the Youth Ministry Folder and the Young Franciscans page below it. Once you find the Young Franciscans page, click your mouse to select it. Once you ve selected it, the page will appear in the second field (below Pages). Click ok to finish the link

51 After you click ok, you should now be back to your sidebar editing area. The text is still highlighted. Scroll down to the bottom of the page. In the Change Comments field, type: Added Young Franciscans page link and click the Publish button. Take a look to see your sidebar addition. Go to the development browser window or tab and go to the Youth page (under the Ministries tab). Be sure to refresh the page so you can see your changes. Click on the link to make sure it works

52 Note: If you want to go back and add a separation line between the Ski Trip and the Young Franciscans, you d go back to the Sidebar tab, click the mouse in front of the Young Franciscans headline and click on the line icon from the toolbar. After you insert the line, scroll down and add something in the Change Comment field and click the Publish button. Go back to the development site in your other browser window or tab, refresh the page. You should be able to see the horizontal line above the Young Franciscans headline (see illustration right). Section 10 Calendars The calendar is a versatile tool that comes with your basic site. An online calendar can be accessed from anywhere using the Internet. You can create new events, make changes to existing events, and even schedule complex recurrences of events. You can also create subcalendars that are groupings of related events that your site visitors can utilize for filtering. Note: All events belong to the master calendar on your website. In addition, any specific event can be added to one or more subcalendars

53 Creating a calendar Web User Guide Navigate to the calendar tab on your control panel. Next let s create a subcalendar for the Young Franciscans. Click on Subcalendars. The basic website comes with some preloaded calendars that you can use or rename by using the edit button. Click on the Add Subcalendar button. The Add Subcalendar dialogue box will open. Fill in the Name field, in this case, Young Franciscans. And then click the Save button

54 The subcalendar is now added to the list and events can be assigned to it. To add an event to the calendar, click on the Events link (adjacent to the Subcalendar link). Then click the Add Event button. (If you are modifying an existing event, you would click the edit button adjacent to the listing.)

55 Fill in the Title of the event. Web User Guide Choose the type of event. Fill in the start date, the start time and end time. If this is a recurring event (something that happens at the same time every week, month, etc., click the Edit Recurrence button.) Then fill in the appropriate details in the Edit Recurrence dialogue box. (As an example, students may not meet during the summer months, June, July or August. You would uncheck those boxes if applicable.) Click done when you have entered all the recurrence information. You will go back to the event edit page. Scroll down a bit further to add details. The calendar has the same tool bar as the Web pages, so you can add links in calendar information, you can make bullet points, etc. Scroll down further on the page and you ll see where you can add the event to a subcalendar. Click on the box next to Young Franciscans

56 There are other fields that you can fill out if you need to, such as contact name and phone number. When you are done, click the Save button to activate the event. To view the calendar entry as a website visitor would see it, go to the development site browser window or tab. Put your mouse over the calendar tab in the main navigation. Click on View Calendar. The calendar page shows the entire month in one view. You can also look at subcalendar views by clicking on the arrow next to the All Events drop down (left)

57 If you hold your mouse/cursor over the April 20 Young Franciscan entry, a short description will appear. If you click on the event, you will link to a page with the entire entry

58 Remember, you can edit the entry (on the admin site) if you are not satisfied with the information. You can also delete the entry by clicking on the delete button at the bottom of the Edit page. Section 11 Additional help More help with customization of your website is also available in the online User Guide. Just click on the User Guide tab from the main page of the control panel. The User Guide will open up in a new separate browser window. There are also some tutorial videos that you can use. Visit this link: WebsitesfromOSVCustomerSupport.aspx