Quick Tutorial


In this Quick Tutorial you will learn...



You can do it!  It’s not too complicated.


Yes you can! The “Website Designer” lets you quickly create your own website!  You don't have to be a web “guru” to do this!  What exactly does this mean? This means any “report” or “view”, you usually print to paper can also be placed on your own website. Plus any other information you wish to show. Now anyone in your organization can see this information on the web at any time!


Example: To put the following view on your website… 


Figure 1 – Sample View in the League Manager (Opponent View)


  1. Pull down the “Internet” menu, and select “Save current View for display on website” (same in Tournament Manager and Handicap System). The following form appears...


    Figure 2 – List of your reports and views you want on the web.

  2. Type in the name you wish to use. In this case, the name: “Opponent View”, was used.

  3. Click the [Save] button. This view can now be placed on your website.



Tip: Reports work exactly the same way. Simply display the report on the screen, pull down the Internet menu, and select “Save current Report for display on website”, type in the report name and click Save.


Overview


The “Website Designer” lets you design exactly how your website will look. You choose what information will appear, its order, how reports and views will be displayed, etc.  To run the “Website Designer”, pull down the Internet menu and select Website Designer.  Since this is probably the first time you've used the “Website Designer”, it probably looks like this: (nothing in it yet).



Figure 3 - The “Website Designer”


The “Website Designer” emulates how your site will look in a browser such as Microsoft Internet Explorer. (A browser is what you use to view websites on the internet). On the left hand side is a list of menu items. On the right hand side is the page displayed when the menu item on the left is clicked. In Figure 1 above, the menu item “Home” is highlighted on the left, and the contents of the “Home” page are displayed on the right. Figure 1 shows a "Home" page created using an "Announcement" page type.


Tip: At any time, click the Preview Website button at the lower left to see what your website will look like in your browser.




You use 8 basic “building block pages” to design your website:


  1. Announcement Pages…show any type of text information you wish to display.
  2. Menu List Pages…list and link to any number of  pages…reports, views, text or custom sheets.
  3. Table Pages…show any type information in a table format.
  4. Link Pages…allow you to directly link to any page in your site, or any page on the internet (world wide web).
  5. Spreadsheet Pages…show any report, view, or text file.  You can even create custom sheets to show anything you wish.
  6. Document Pages…word processor page. Works just like MS Word document. Formatting (fonts, colors, pictures, tables, etc.) can be set to anything you wish. Also allows the import of Word files, HTML (web page) files, TXT (text) files, RTF (Rich Text Format) files.
  7. HTML Pages…import an HTML (Web) page created in another program.
  8. Existing Page…insert a page (report, view, document, spreadsheet, menu link, announcement, etc.) that you previously created and saved.


Some of these page types are discussed below.




Creating an Announcement Page


Announcement pages let you show any text you wish on a webpage. For example, you can use an “Announcement Page”  to display:



Example: Create a “Home” page for your website.


  1. Add a new “Announcement Page” to your menu items list.
    (You may already have a blank “Announcement Page” on your menu list. If so, right click on the menu item and choose "Rename menu item." Skip to Step 3.) To add a new menu item, select "Insert Menu Item (New)" from the Menu menu.

  2. From the "Insert Menu Item" window, select "Blank - Announcement page" and click the Insert button.


  1. In the "Page Information" window type in the Page Name, "Home", and Menu Text, "Home" (It can be the same or different) and click OK. [The Page Name identifies this page when you click on the "Pages" tab above the left-side menu in Website Designer. The Menu Text is what displays in the left-side menu for this page.] You will now have a page that looks like this:


    Figure 4 - Blank Announcement page

  2. To add text in your “Home” page, simply click anywhere on the right hand side and enter text on your page.  It may look something like this….


    Figure 5 – Sample Announcement Page

  3. Click the Preview Website button at any time to see what it looks like in your browser.





Creating a Menu List page


Menu List pages let you create lists of links to any number of other pages on your website.


Example: Put a membership view on your website.


  1. Add a new “Menu List Page” to your menu items list.
    (You may already have a blank “Menu List Page” on your menu list. If so, right click on the menu item and choose "Rename menu item." Skip to Step 3.) To add a new menu item, select "Insert Menu Item (New)" from the Menu menu.

  2. From the "Insert Menu Item" window, select "Blank - Menu List page" and click the Insert button.


  1. In the "Page Information" window type in the Page Name, "Membership", and Menu Text, "Membership" (It can be the same or different) and click OK. [The Page Name identifies this page when you click on the "Pages" tab above the left-side menu in Website Designer. The Menu Text is what displays in the left-side menu for this page.] You will now have a page that looks like this:


    Figure 6 - Blank Menu List page


  1. Click on the "CLICK me to insert link to another page" button.

  2. Double-click the View named “Sample Name Addresses and Phone Numbers” to load this on the Menu List Page.  The screen may look something like Figure 7.


    Figure 7 – “Sample Name Addresses and Phone Numbers” report.

Note: You can have any number of “Menu List pages” and each can contain up to 100 links to reports, views, sheets, other menu list pages, etc.  You can further customize the appearance of each sheet. Header and footer text can be added, titles can be altered, and fonts, colors, row and column sizes, text, etc can be fully customized. You can even insert graphics or text anywhere you wish.


  1. Click the Preview Website button to see what it looks like in your browser.  It may look something like Figure 8 below.


    Figure 8 – “Sample Name Addresses and Phone Numbers” in your browser.




Creating a Table Page


Table pages let you show any type of information in a table format.  For example, you can use a “Table Page” to display:



Plus, items in a table can even be linked to other pages in your website or any website in the world.


Example: Create a “Favorite Links” page for your website.


  1. To add a new “Table Page” to your menu items list, select "Insert Menu Item (New)" from the Menu menu.

  2. From the "Insert Menu Item" window, select "Blank - Table page" and click the Insert button.


  1. In the "Page Information" window type in the Page Name, "Favorite Links" and Menu Text, "Favorite Links" and click OK. You will now have a page that looks like this:


    Figure 9 - Blank Table page

  2. By default the table has 4 columns, but we only want 2 columns. To delete the 2 extra columns, pull down the “Table” menu and select “Delete”…”Column”.  Click [Yes] to verify delete.  Repeat, to delete the 2nd column.

  3. Click anywhere on the right hand side and enter text on your table. The table I created looks like this…


    Figure 10 – Sample Table Page in the Website Designer.


  1. Click the Preview Website button at any time to see what it looks like in your browser (Figure 10).

Tip: To resize a column, click on the vertical line between column header numbers and drag line left or right.


Tip: The above sample table includes links to other website pages. (A link is when you click an underlined item on a web page and are sent to another page).  To set a link, highlight the cell in the table you wish to specify a link for. Pull down the Table menu and select HyperLink. On the Insert Hyperlink form specify the page you wish to link to and click [OK].



Figure 11 – Sample Table Page in Internet Explorer Browser




Creating a Link Page


Link pages let you create a menu item that links directly to any page in your website or any page on the internet. For example, if you already have a website you can set a direct link back to your “master” website…so it appears that this website is a seamless part of your “master” site.


Example: Create a direct link to our website (Software Systems for Golf).  Our website is www.golfsoftware.com.


  1. To add a new “Link Page” to your menu items list, select "Insert Menu Item (New)" from the Menu menu.

  2. From the "Insert Menu Item" window, select "Blank - Link page" and click the Insert button.


  1. In the "Page Information" window type in the Page Name and Menu Text and click OK. You will now have a page that looks like this:


    Figure 12 - Fresh Link page

  2. On the right hand side, click the Change the page or internet address to hyperlink to button. The “Insert Hyperlink” box will appear.

  3. In the box that says "Text to display:", type in "Software Systems for Golf". In the box that says “Web Address:” type in "www.golfsoftware.com" and click OK.  Your Website Designer may look something like this…


    Figure 13 – Link Page to www.golfsoftware.com

  4. Click the Preview Website button at any time to see what it looks like in your browser.  If you are connected to the internet, you will see the Software Systems for Golf website appear when you click the “Software Systems for Golf” menu item.





Creating a Spreadsheet Page


Spreadsheet pages are very flexible. You control everything...font type, font style, font size, row heights, column widths, text alignment, text color, and background colors. You can insert graphics and pictures and also insert hyperlinks to other pages or websites. You can even import excel files or text files into a custom sheet.  In fact, using spreadsheet pages you can build any type of page we've previously looked at--announcement pages, menu list pages, and table pages--with complete control.


Example: Create a new Spreadsheet Page


  1. To add a new “Spreadsheet Page” to your menu items list, select "Insert Menu Item (New)" from the Menu menu.

  2. From the "Insert Menu Item" window, select "Blank - Spreadsheet page" and click the Insert button.


  1. In the "Page Information" window type in the Page Name and Menu Text and click OK. You will now have a page that looks like this:


    Figure 14 - Blank Spreadsheet page

    I chose to create a blank sheet from scratch. See Figure 15 below. You can also insert reports, views, etc. into a spreadsheet page. Notice the picture I inserted on the page.  This gives you a small sample of the types of pages you can create. The step by step details are beyond the scope of this quick overview. See the "Help Manual” topic for details. Or just dive in. If you are familiar with using a spreadsheet program, the operation is very similar.


    Figure 15 – Sample custom spreadsheet page


    Figure 16 – Sample custom sheet as it appears in your browser.





Creating a Document Page


The Document Page is perhaps the most flexible of the types of pages available in Website Designer. You have more formatting options and more importing options as well as other capabilities with a Document Page. It allows you to insert photos, and gives you the most freedom with formatting your headings, subtitles, and text in terms of color, style, sizes, etc.



Example: Create a page with photo, formatted text, table and hyperlink.


  1. To add a new “Document Page” to your menu items list, select "Insert Menu Item (New)" from the Menu menu.

  2. From the "Insert Menu Item" window, select "Blank - Document page" and click the Insert button.


  1. In the "Page Information" window type in the Page Name and Menu Text. You will now have a page that looks like this:


    Figure 17 - Blank Document page

  2. Type "My Golf League" at the top of the blank page and highlight (select) what you have typed.

  3. Select "Character..." from the Format menu. In the "Font" window that opens up, change "size" to 36 and "Color" to "Teal" and click OK.

  4. Click the button to center your heading.

  5. Move your cursor down several lines by using the down arrow on your keyboard.

  6. Select "Hyperlink" from the Insert menu. In the "Insert Hyperlink" window, type "USGA Website" in the "Text to display" box at the top and type "http://www.usga.org" in the "Web Address" box at the bottom. Click the OK button.

  7. Move your cursor down several lines by using the down arrow on your keyboard.

  8. From the Table menu select "Insert" and then "Table". In the "Table Attributes" window, type 2 rows and 6 columns.

  9. Move your cursor down several lines by using the down arrow on your keyboard.

  10. From the Insert menu select "Picture". From the "Insert Image" window select the previously saved photo or image you want to display on your website and click the Open button.


    Figure 18 - Document Page with centered 36 point heading





Publishing Your Website


Your website is no good unless your members can access it. To put your website on the internet:


  1. Make sure you are connected to the internet. This is the only time you need to be connected to the internet.

  2. Pull down the File menu and select “Publish website to internet”.  Website Designer copies your website onto the internet (up to a web-server) so your membership can now view the website.


Note: If you encounter problems such as "connection error to host" when attempting to publish, your personal firewall software (or the network firewall if you are on a network) may be causing the problem.



Telling Others How to Access Your Website


Simply tell your members to go to your website. But where is it?  To see…


  1. Click the Website Info button, on bottom left.


  1. The “Website info” form will appear. Look at “Your website address on the internet is…”.  This is the address of your website.


  1. Click on the "View website on the internet in your browser" button or type in your displayed website address starting with "www.golfweb.ws/" and ending in your customer number. Voila! Your website will appear.


Note: You may also purchase from GolfSoftware.com a website address unique to your golf group for $29.95/yr. For instance, if your league name is the Paradise Golf League, you could have a website address of www.paradisegolfleague.com. Please contact tech@golfsoftware.com for more details.



What Else


This overview has given you a brief idea of what the Website Designer can do. These simple examples have just scratched the surface. Feel free to experiment. There is nothing you can do that cannot be “undone” or “changed”. To give you a better idea of Website Designer’s capabilities, take a look at a some sample sites created with the Website Designer.  It may spur your creativity and give you additional insights in creating your site. Go to the following link:


http://www.golfsoftware.com/currentcustomer/tech/webtech/menumain.htm