Lions Australia Oz Clubhouse Instructions

Transcription

1 Page 1

2 With Addendums up to April Introduction How to Get Started Authorization. 5 a. User. 5 b. Club Webmaster 5 c. District webmaster Control and Setup View and Edit your Site Open the website Edit the Title Banner Insert a Main Photo Edit the Box Title Edit the Content Box 1 Text 11 a. Text Bold.. 12 b. Text Emphasis 12 c. Text Superscript. 12 d. Text Subscript. 12 e. Ordered (Numbered) List of Text f. Unordered (Numbered) List of Text g. Indent Text 14 h. Out dent Text 14 i. Undo Editing. 15 j. Redo Editing 15 k. Create Link 16 l. Un-create Link 17 m. Insert Image 17 n. Insert Table 22

3 With Addendums up to April 2012 o. Paste from Word. 22 p. View HTML Code 23 q. Preview Edit the Menu, Page Title or Meta Word 24 a. Menu Name 24 b. Title. 25 c. Keywords 25 d. Description 26 e. Menu Builder Create and Add a New Page to the Web Site Appendix A Frequently Asked Questions (FAQ) Addendum 2 - Drop Down Menus - 32 Addendum 3 - Entering Meta text to help Google find your site 33 Addendum 4 - Videos 36

4 1.0 Introduction: Promote your club online! The price is right! Club websites are free to all Australian Lions Clubs. Simple to use! The websites are easily updated using simple tools like you find on modern social networking sites like Face book and MySpace. Just type in your content, click on the submit button and your have updated your website. Password protected area A place to keep your private club documents and communication. Sponsors pages, event calendars, news pages a great way for your club to make an impact in the local community. One of the struggles about managing a club website is to keep it up to date. The new websites make this easy for your club and you will also notice that it is automatically updated with key national news items and features. Participation in the project is entirely optional but we hope that many clubs will play a part. Although there are elements of your website that you can change to suit your needs, the look and the style will be set at a National level to show the community that we are all part of the Lions Australia team! The project is the brainchild of one of our newest members, Lion Mason Fok, and is supported by our inhouse Web Team. 2.0 How to Get Started: You will need the following: Permission of your Club or District A commitment to keep the web site updated or to train other Club Members to use it. The cooperation of your Club Secretary or PR Chairman. Lions Membership Number A place to store your photos online such as Picasa web albums or Flikr this will mean opening a free account so that you can upload any photos for linking from Oz Clubhouse. Documents and photos can also be stored at Page 4

5 3.0 Authorization: There are 3 levels of Users for the Lions Member: a. User: Each member is able to login to the member s login section on their own Club website. This section will enable them to get Club specific documents or articles that are not necessary for the public or non Club member to see. Note: This feature is coming by end of February 2010 b. Club Webmaster: By default from the monthly membership report (MMR) submitted to Lions Clubs International (LCI) from the Club; the Club Secretary is the only one authorized to log on and edit the site. As this is picked up from the LCI monthly database, then if the Secretary changes so will there authority. To add an additional member as Club webmaster it is necessary to contact the Lions Australia Webmaster, at webadmin@lions.org.au c. District Webmaster: These cannot be set up automatically and if they have the authorization from their District, then they can contact the Webmaster as above. Page 5

6 4.0 Control and Setup: Lions Australia Oz Clubhouse Instructions The Lions Australia Web Committee has set up a page where you can log on and create your web site and the domain name for your Club or District. This page is at: Username: Your full name as shown on the Club MMR. It is not case sensitive. Password: Your Lions Membership Number. The domain name is in the format You can choose what yourclubname is but it must reflect your Club or District. Note: You may not see the state in the domain name box when you enter your domain name. It will be added automatically from the database. Sometimes this does not work because it has never come over on the MMR. In this case you will be contacted later by the Lions Australia Webmaster and the domain name will have the state added. At any time on request yourclubname can be altered or fine tuned for you. This will not affect any changes you have made to the website. It is highly recommended that you browse through the help files and Frequently Asked Questions (FAQ) at help before you do any editing. These files are more up to date than this document. Note: This Oz Clubhouse is all free and as such the editor is a generic add in. It will behave in different ways. This depends on which Internet Browser you are using. Therefore these instructions may not follow exactly depending on what browser you are using. Page 6

7 5.0 View and Edit Site: Lions Australia Oz Clubhouse Instructions Open the website in your browser. e.g. and use the logon box to get to the editing screen. The username and password are the same as before Edit the Banner Title: Figure 1 The Edit symbol is what you need to look for, click on it and the edit window will pop up. Type in Your Club name and click the Edit Button. Figure 2 Important: In the banner name we strongly recommend that you put in your full club name, your District and your Country and State. We will develop this into the program at some stage, so that these are shown by default. The reason is to make the public aware of where and who you are; also to follow the standards laid down by Lions clubs International. Page 7

8 5.0.3 Insert a Main Photo which reflects the image of your Club. This can be done using a third party online storage website such as Google Picasa Web Albums. (See Appendix B on how to use.) From here on I will refer to Picasa only for ease of instruction. Note it does not matter where you upload your photos to, as long as they can be seen on the internet. What we are doing is taking the link to the photo and embedding the link into our next Edit Window. To keep things neat we recommend keeping the size of any large photos limited to 400 pixels wide so that the website does not overlap the sides of the screen. To edit your photos, use Adobe Photo Shop or some similar program. Most digital cameras come with some sort of program to crop or reduce your photos. Usually save them as a jpg and upload them to a Picasa Web Album, once you have opened an account with them and created an online album. Once you have done this we are ready to copy our image link into the web site. How you do this depends on what browser you use, but the methods for both Google Chrome and Internet Explorer are shown in Step 1 below. Page 8

9 Step 1: Open the image in Picasa Web Album and right mouse on the image, then select copy image URL ; otherwise Internet Explorer users should right mouse on the image and select properties. When the property window comes up, Hi light the url address and copy it. Figure 3 Step 2: Click on the edit button where you want to place the photo. Figure 4 Page 9

10 Step 3: Paste the URL you have copied from Picasa Web Album into the edit window Figure 5 Step 4: Click on the Edit Button to close the Edit Window Edit the Box Title: Click on the Edit Button and follow the procedure as before (See Figure 8) Figure 6 Page 10

11 5.0.5 Edit the Content Box 1 Text : Click on the Edit Button Figure 7 Step 1: Move the mouse over the bottoms of the editing tools to see their purpose. Figure 8 Page 11

12 Editing Tools A Text Bold: Figure 9 Hi light the text and click on the button. B Text Emphasis: Figure 10 Hi light the text and click on the button. C Text Superscript: Figure 11 Hi light the text and click on the button. D Text Subscript: Figure 12 Hi light the text and click on the button. Page 12

13 E Ordered (Numbered) List of Text: Figure 13 Hi light the paragraphs and click on the button. The Undo Button does not work here to undo you have to hit the list of text button again, with the paragraphs hi lighted. Hint In any program ordered and unordered lists of text are very frustrating and require sometimes manipulation to get them looking really neat, so have a play but we can understand your frustration. F Unordered (Bullet) List of Text: Figure 14 Hi light the paragraphs and click on the button. The Undo Button does not work here to undo you have to hit the list of text button again, with the paragraphs hi lighted. Hint In any program ordered and unordered lists of text are very frustrating and require sometimes manipulation to get them looking really neat, so have a play but we can understand your frustration Page 13

14 G Indent Text: Does not seem to work Figure 15 H Out dent Text: Does not seem to work Figure 16 Page 14

15 I Undo Editing: Does not seem to work on ordered and unordered lists. Figure 17 J Redo Editing: Does not seem to work on ordered and unordered lists. Figure 18 Page 15

16 K Create Link: Figure 19 Step 1: In the edit window Hi Light the text you want to make a link to. Step 2: Click on the create link button and when the link edit window pops up, enter the FULL URL of the link along with the as shown in figure 22 below. Step 3: Click the submit button when finished. Step 4: Finally don t forget to hit the edit button in the edit window, to make the changes. Figure 20 Page 16

17 L Un-create Link: Figure 21 Step 1: Hi light the link and click the button to remove the link. Step 2: Finally don t forget to hit the edit button in the edit window to make the changes. M Insert Image: Figure 22 The basic concepts here are the same as section above, but this time we are going to insert an image into the text, so that the text wraps around the photo and again gives a professional feel to our website. For best effect, we recommend uploading a photo with a width size of 150 pixels to Picasa Web Album Figure 23 Step 1: When you click on the insert image button the image window will pop up as shown in Figure 25 above. Step 2: As you did before go to Picasa Web Alum and as per Figure 5 right mouse on the image and copy the image URL, or bring up the image properties and copy the URL Address. Step 3: Paste the URL into the box as in Figure 25 above. Page 17

18 Step 4: We strongly recommend that you fill in both the alternative text and Title boxes. This will ensure your site code is up to standards enabling disabled people or those with low vision in particular to use tools to view or read your web site. Step 5: Hit the submit button to paste in your image url. Step 6: You will need to hit the edit button to save your changes. Step 7: By now you should see the image to the left of the txt with no wrap around, similar to Figure 26 below. Figure 24 For a really professional look to the site it is desirable to Wrap the Text around the photo of the dog. We can do this by Floating the photo. There is no need to float the photo if you have inserted a large image. It is only desirable for images of up to 200 pixels wide. I like to insert pictures at 150 pixels for consistency, and then create a link to a full size photo. The photo can be floated on either the left hand side of the page, or the right hand side of the page and this will cause the text to flow around it. Page 18

19 To achieve this with the editor is a bit messy, but once you learn how to do it, the effect is well worthwhile. Open up the editor We need to put a command in the code to float the picture. The commands we need to type in are either: class= floatleft or class= floatright Note the command must be typed in exactly as it is shown above, with the capital L or capital R Select the html code button See item P below for instructions on which button this is. When you select this button another window pops up showing the html code for the section you are editing, shown in figure 24. Page 19

20 Figure 25 Look at Figure 25 and you will see that just before the text (Bendigo and Strathfieldsaye Lions), there is some code. This code is the link to the photo stored on Google Web Album and it finishes with /> Just before the /> I have typed in the command to float the photo to the left (class= floatleft ). It is very important that you do not leave any spaces after (class= floatleft ) and before the (/>) That is: You must end up with exactly: class= floatleft /> and don t forget the capital L Hit the edit button when complete and your text should wrap around the image. See figure 26 below. Page 20

21 Figure 26 Page 21

22 N Insert Table: Figure 27 Tables should be used for tabulating data (not for arranging photos) The insert table function is not real good and whether or not it works well depends on what browser you are using. Pasting tables or spreadsheets directly into the editor may cause unpredictable circumstances, especially using Internet Explorer. O Paste from Word: Figure 28 Paste from word is very useful when you want to paste in a word document. Word documents most likely will have formatted text code embedded in it, which is not apparent until you paste it into a web page. This may cause strange symbols to be displayed or text inconsistent with your layout. Paste from word will remove all of the formatting and bring it back to straight text. Another good use for this feature is to copy directly from a web page. Highlight the text you want to copy and using paste from word paste it into the editor. This removes all formatting and gives you the plain text. Edit the plain text to suit your web page, e.g. put in line breaks, paragraphs and links and insert images. Page 22

23 P View HTML Code: Figure 29 This allows those familiar with HTML code to refine their editing. Note for consistency of these web pages across Lions Clubs, there may be some code that is blocked. Q Preview: Figure 30 Brings up another pop up window to show you how the text will look. Hint The window may get lost on your screen if you switch from one program to another. If the window is up it will prevent another preview window opening; so it is best to close it straight after previewing each text modification. Page 23

24 5.0.6 Edit the Menu, Page Title or Meta Word : Click on the Edit Button Figure 31 The following Window pops up allowing you to edit page features. Figure 32 A Menu Name: Allows you to change the name of the menu on the page you currently have on the screen. Note there is a fault in the program. It will not update unless you do the following after changing the name and clicking the edit button. You must next go to the menu builder (see figure 35 below) and move any menu by dragging it to another position, then click edit. Move it back to the desired position when finished and any changes to the menu names will be updated. Page 24

25 Figure 33 B Title: Allows you to change the title of your page, which will appear on the top of the browser window C Keywords: Figure 34 Allows you to change the keywords of the page you currently have on the screen, which will appear on the top of the browser window. This is for search engines to find your site based on these words. Figure 35 Page 25

26 D Description: Allows you to change the description of the page you currently have on the screen. This is for search engines to find your site based on these words. Figure 36 Page 26

27 E Menu Builder: This allows you to change the menu. Drag the menu page that you don t want displayed on the menu to the left hand side. Figure 37 Page 27

28 6.0 Create and Add a New Page to the Web Site: A new page can be added to the website by creating a link to a new page on any existing page. You can keep this link or delete it later. Follow the procedure to create a link as in Section 5.05 (k) on page 16. Step 2. Instead of typing in the full URL of another site or photo, just simply choose the name for your new page and type this one word in. e.g. Say we wanted to create a page about our monthly BBBQ at Bunnings, we might choose as a name for the page: bunnings bbq Figure 38 When we hit the submit button for the link this puts the link in our editor and finally we hit the edit button to get back to our page. Now Click on the link and another window will appear as Figure 39 below: Fill in all the fields and type in a few words for the page content. Hit the Create button and the page will be created with the following URL bbq You can link to this from any page inside your website and you can add it to your menu if you wanted to. Page 28

29 Page 29

30 Appendix A Frequently Asked Questions (FAQ): Photos Problems Linking them in. Lions Australia Oz Clubhouse Instructions Q: My Photo is too small even though I am using a larger scaled image? A: When copying a link across from Picasa Web Album, or somewhere else, don't forget to 'open' the single photo up on the screen. Some new users are copying the link to the thumbnail photo in the album and it is showing up tiny. Q: I have down loaded Picasa 3, and managed to get the Photo I want on to Picasa but can't work out how to get it from Picasa to the page, Can you help. A: You need Picasa Web album at picasaweb.google.com not Picasa 3 You need to create an account and then log in. This allows 1gig of space to upload photos to an album you create online. Q: I have a website for myself can I locate the lions club picture folder on my server, and then copy the links from this to my website? A: Yes Page Breaks Q: How can I put in a Page Break to leave a line between my paragraphs? A: Use the 'shift and enter keys' together to put in page breaks, as just hitting the 'enter key' in the editor does nothing. This may depend on what browser you are using. Like any good document or news article try not to run all your text together and separate it into paragraphs with line breaks. Q: How can I put Page Breaks around Photos? A: Most people find it difficult to float the photos left or right and prefer to use large photos anyway. This is fine but again use your 'shift and enter' keys together to push the text down below the photos and to line up the photos in a professional manner. New Pages Q: I have too much on my Project Page; can I create a new page? A: A couple of Clubs discovered that they try to put too much on one page in particular the 'Projects' page. They have discovered it is best to provide links on this page to other new pages. See the article at from the menu on how to create new pages, and also how to add or remove pages from the menu if required. Domain Name Q: Can I Alter the Domain Name? A: Domain Name: Can be altered at any time without affecting your content, but it must always be in the format Only the Club Name can be changed or abbreviated to your liking. webadmin@lions.org.au for the request to change. LionWap Accounts Q: Can I use my LionWap URL? A: Dan Uitti of Lionnet has offered to provide an auto forward from any Lionwap URL Addresses to your new site when you request it. Completed Sites Q: My site is complete and I want to get it linked so others may find it? A: If you feel your site is ready for the public to view, contact webadmin@lions.org.au and it will be added to the Lions Australia Contact Us page for your state, giving it wide exposure to the internet. We will also notify lionnet.com which maintains a listing of club website links around the world. Page 30

31 Sponsor Pages Q: I notice that I can't remove the Sponsor page from the menu? A: The sponsor page is locked by the Multiple District in recognition of our major sponsors. News Pages Q: I notice that I can't remove the News page from the menu? A: The News page is locked by the Multiple District. If your District is using Oz Clubhouse, then any news posted on the District site will show up on your Club Site, and also your Event Calendar. Likewise and National News will also show up, on your site. Members Login Section Q: I notice in the editor mode there is a page for Members Logging in, but this function seems to be disabled? A: Members Only Section is currently under development and will be launched in by end of February. You will be able to upload up to 100MB of documents. Each member of your Club will be able to log in and access this information. Q: I want to upload Document now, what do I do? A: You can link to existing documents on any web sites. An excellent opportunity exists at which provides 2Gig of storage for free. They also have a 'public folder' so that you can access your files from any PC or I Phone. Editor Problems Q: My Editor doesn't work as your help files suggest? A: Beware that Editing in different browsers, for example IE, Firefox, Opera, and Google Chrome; - the editor behaves differently. Q: I copy across information from my old website and paste into the editor, it does not look good? A: Copying from existing web sites and pasting the information into the editor is fine but you retain all of the formatting, which makes it very difficult, if sometimes impossible to add or edit in the future, and it may look terrible. Consider the 'paste from Word' option in the editor. This clears all of the formatting, and keeps the plain text. You can then re-format it so it is consistent throughout your pages. Page 31

32 Lions Australia MD201 Oz Clubhouse Instructions Addendum 2 You can now create dropdown menus on you club web sites. Go into the menu editor, and select Menu Builder Next Go to the link at the top and select Edit sub Menu Drag the pages across to the menu item boxes and release as desired. Choose your filename carefully. Note Menu titles can be changed in the OPEN editor, but file names cannot be changed once created. There is an issue with the use of the? special character within the menu title for submenu grouping. The? is now supported. The big no-no's for menu names would be special symbols such as: : ` ¼ ½ ¾ À Menu editor is accesed by going to OPEN on the top right hand side when you are logged in.

33 Tips on Using Drop Down Menus Try to avoid at all cost using the following: The big no- no's for menu names would be special symbols such as: : ` ¼ ½ ¾ À ' & Also please avoid the use of ' and & which you have been using. Tips: 1. Avoid the use of long file names, e.g. It is easier to name a file 'objects' instead of 'lions club ethics and objects'. 2. Avoid the use of long names in your Menu's. 3. Use lower case in the drop down menus with the first letter a capital; this looks better.

34 4. When you re- name the Menu sometimes there is a Server Error I suggest the following which usually works to fix it: On re- naming a menu and you get the server error Hit the back arrow in your browser a couple of times to get back to the page. Go into the Menu Manager and select 'edit submenu' Move the offending page to another drop- down menu and select 'edit' Go back into the 'edit submenu' and move the offending page back to where you want it. Nine times out of ten this seems to work. As I have suggested, keep everything in your file and menu names simple and short.

35 Lions Australia MD201 Oz Clubhouse Instructions Addendum 3 Getting Google to find your site Logged on and in the edit mode you will see a menu editor top right hand side called OPEN Click on this and enter some data as I did below: Below is what I have added to my Club site for Google to find it, you may want to add some code to each page and also add a different title to each page. E.g Lions Club of Cessnock Home etc. In my Strathfieldsaye Club site I have the following: Title: Lions Club of Strathfieldsaye Home Keywords: Lions Clubs, Strathfieldsaye, Bendigo, Victoria, Australia, Community Service Description: The City of Greater Bendigo is home to five Lions and one Lioness Club. Population is around 100,000 people. Our club has served the Bendigo Community since The Club meets on the 2nd Monday at 7.30pm for Business at the Lions Hall, Eppalock Road. Also the Club meets 4th Monday at 7.30pm for Dinner at various locations around Bendigo.. Header Code: None With the Strathfieldsaye site and Google has easily found it with the info I listed above, and without the Header Code. I put the same info on each page. If I search google for Strathfieldsaye Lions I get the following Results: 1. Lions Club of Strathfieldsaye - Home The City of Greater Bendigo is home to five Lions and one Lioness Club. Population is around people. Our club has served the Bendigo Community since... strathfieldsaye.vic.lions.org.au/ - Cached 2. Lions Club of Strathfieldsaye - Club Officers STRATHFIELDSAYE Lions Club. Bendigo, Victoria, Australia, District 201v We Support the Lions International Peace Poster Competition through

36 local... strathfieldsaye.vic.lions.org.au/aboutus - Cached Hide more results from strathfieldsaye.vic.lions.org.au 1. Lions Club of Strathfieldsaye - News We would ask each Lions Club, when organising its financial plan for the next disbursement, to ensure the expansion of the training program for these... strathfieldsaye.vic.lions.org.au/news - Cached 2. Lions Club of Strathfieldsaye - Projects Bendigo and Strathfieldsaye Lions Clubs sponsored a successful motion to Lions District V1-4 at its convention in October strathfieldsaye.vic.lions.org.au/projects - Cached 3. Lions Club of Strathfieldsaye - Join Us The City of Greater Bendigo is home to five Lions and one Lioness Club. Population is around people. Our club has served the Bendigo Community since... strathfieldsaye.vic.lions.org.au/joinnow - Cached 4. Lions Club of Strathfieldsaye The community will be the winner from the alliance between two iconic 'lions' - Holden andlions Australia. Holden generous sponsorship assists Lions to... strathfieldsaye.vic.lions.org.au/sponsors - Cached 5. Lions Club of Strathfieldsaye - Contact Us The City of Greater Bendigo is home to five Lions and one Lioness Club. Population is around people. Our club has served the Bendigo Community since... strathfieldsaye.vic.lions.org.au/contact - Cached

37 Videos. You cannot upload a video direct to Oz Clubhouse you can open a 'Youtube Account" and upload it to 'You Tube' then paste a link into Oz Clubhouse and the video will show up. As an example I did the following: 1. I opened a Youtube account (if you have a Google Account then you can login to Google and create the youtube account from in there. 2. I uploaded a video to: hjp:// v=ylpcit9c2mu&feature=youtu.be 3. When I went to the youtube link, I clicked the share bu0on under the video which brings up a shared link. 4. I copied this link and went to my Oz Clubhouse page at hjp:// 201v1-4.lions.org.au/joinnow 5. I logged into the Oz Clubhouse and opened the editor and pasted in the shared link. hjp://youtu.be/ylpcit9c2mu 6. When you hit the 'edit bujon' to complete the ac[on it automa[cally embeds the video onto the web page. 7. Note: When I want to edit the page again, there is a problem because the video stays open on the screen covering the editor. To get around this I had to click 'full screen' (BuJon- link at the top right hand of the editor) This allows you to con[nue edi[ng.