Managing a Planet Maine Website

This guide is online at www.planetmaine.net and updates can be found there under Contact->Web Design Support->Managing a Planet Maine Website.

Planet Maine websites are based on a Content Management System called DotNetNuke (DNN). Solutions to more complex questions about DNN can be found in the DNN documentation section or in the support forums at www.dotnetnuke.com. For background about the history and technical aspects of DNN see the Wikipedia listing on it.

When you view your Planet Maine (PM) website, you will see the ‘skin’ - which has the menu, header and footer of the website - and the ‘modules’ which contain the content of the website. Modules are pieces of functionality - they can do things: from containing text and images to playing media files to displaying Excel files to rotating content.

Here are some common tasks performed on a Planet Maine website:

Adding Users to the site (For those with admin access only)

Please Note: Usernames are unique; a new user cannot be added with an existing Username. When this occurs, the following message will be displayed below the registration fields upon clicking update: A User Already Exists For the Username Specified. Please Register Again Using A Different Username. You will be required to modify the User Name.

Navigate to Admin > User Accounts.
Select Add New User from the module menu or click Add New User.
In the Add New User section, complete all fields. Fields marked with a Required icon are mandatory:
1. In the User Name field enter a user name. The users email address is a common choice for this field, although any user name can be entered. The user name cannot be changed.
2. In the First Name field enter the first name.
3. In the Last Name field enter the last name.
4. In the Display Name field enter the name to be displayed to others on the site.
5. In the Email Address field enter a valid email address.
6. At Authorize, select from the following options:
  - Check the check box if the new user is authorized to access the site. This will automatically provide access to the Registered User role and any roles set for Auto Assignment. This is the default setting.
  - Uncheck the check box if the new user is not yet authorized to access the site.
7. At Notify, select from the following options:
  - Check the check box to send a notification email to the user's email address. This is the default setting.
  - Uncheck the check box to remove notification.
At Password, select one of the following options:
1. At RandomPassword, select the following options:
  1. Check the check box to generate a random password.
  2. Uncheck the check box to enter a password. This is the default setting.
2. At Password, enter a password and at ConfirmPassword, enter re-enter the same password.
Click Register. The user will now be added to the User Accounts list.
Note: to see all users hit 'All' after the alphabetical list under Admin->'User Accounts.'

Adding User roles (For those with admin access only)

You may wish for certain people to have access to read and/or edit certain parts of your website. For example, let's say you are managing apartment buildings. You have a page for each building and a page for each unit in each building. Security roles would allow the public to only see certain content like an available unit's description and photos, while there is a section on the page for 'staff' that contains info on the renters, maintenance history, etc. that the public cannot see. Likewise, you might allow some staff to be able to edit these pages and some to merely view them. In this case you would have a role called 'Staff Edit' and 'Staff View.'

Navigate to Admin > Security Roles.
Click Add New Role - OR - select Add New Role from the module menu.
In the Basic Settings section complete the following fields:
1. In the Role Name field, enter a name for the Security Role.
2. In the Description field, enter a brief description of the Security Role.
3. At Role Group (optional), select a group for this role if required.
4. At Public Role?, select one of the following options:
  1. Check the check box if all users are able to view details of this role and subscribe to this role. Public Roles can be maintained by user on their profile under Manage Service.
  2. Leave this option unchecked if the role is Private. Details of private roles are not displayed on the users profile page. Only Administrators can add a user to a Private role unless it has an RSVP Code (see below) which has been supplied to the user. In most cases leave unchecked.
5. At Auto Assignment, choose from the following options:
  1. Check the check box if users are automatically assigned to this role.
  2. Leave this option unchecked if users must be manually added to the role. In most cases leave unchecked.
Click Update.

Adding pages to the website (For those with edit access to that section of the website)

Click Add New Page in the Control Panel - OR - Navigate to Admin > Pages and click Add New Page.
At Basic Settings - Page Details, complete the following settings:
1. In the Page Name field, enter a short name for the page as it will appear in the menu.
2. In the Page Title field, enter a short, descriptive sentence summarizing the page content. The title is what appears at the absolute top of the browser window. The title is used by search engines to identify the information contained on the page. It is recommended that the title contains at least 5 highly descriptive words and does not exceed 200 characters. (E.g. Long stem red roses for sale)
3. In the Description field, enter a description of the page content. The description is used by search engines to identify the information contained on the page. It is recommended that the description contains at least 5 words and does not exceed 1000 characters. (E.g. Order long stem red roses for Valentine's Day) In most cases you can leave this section blank.
4. In the Key Words field, enter key words for this page separated by comma. E.g. ring tones, cell phones, mobile phones, mobiles. In most cases you can leave this section blank.
5. At Parent Page, select to add the page to the site menu, or select a page name from the drop down list to add this page as a sub-page of the selected page. If you do not choose a parent page you are making this page a top menu or ' higher order' page on the menu.
6. At Filter By Group (optional), select from the following options:
  - : View all roles (both global and group roles) in one single list.
  - : View roles that not within a Group.
  - : Each Group will be listed individually. Select a group to view roles within that group. In most cases you can leave this section blank.
7. At Permissions, check each role that will be able to View Page and/or Edit Page. By default, the page will only be visible to Administrators. Use Filter By Group to access each group as required.
  WARNING: If the role of Unauthenticated is checked at Edit Page this will allow all site visitors to edit the page. 99% of the time you will be creating a page you do want the public to see, so make sure to check the 'All users' box under 'View page'.
Click Update. The new page with one Text/HTML module on the page will be added to the site. If you see the page is on the top menu and you did not want it there, redo step 2e. If you see red 'Admin only' borders around modules on the page, you forgot warning under 2g.

Adding modules to web pages

Add a new module to the displayed page. Adding a new module will insert an empty module to the page. 95% of the time you will be adding Text/html modules to web pages.

Select Add New Module.
At Module, select the module to be added. E.g. Text/HTML from the dropdown list.
In the Title field (optional), enter the Title for the module. E.g. Welcome to my Portal. If no title is entered, the name of the module will be used by default. E.g. Text/HTML
At Visibility, select from the following options:
1. Same As Page: the module will be set to be visible to all roles that can view the page as set under page settings. This is the default setting used 99% of time.
2. Page Editors Only: the module will be set to be visible to all roles that can edit the page as set under page settings.
At Pane,select the pane where the module should be added. The module will be added to the Content Pane by default. The names of other panes are dependent on the skin used.
At Insert, select the placement of the module from the following options:
1. Bottom: Add the module below all existing modules within the selected pane. This is the default option.
2. Top: Add the module above all existing modules within the selected pane.
At Align (optional) select from the following:
1. Left: Aligns module title and content to the left of the pane. This is the default setting.
2. Center: Aligns module title and content to the center of the pane.
3. Right: Aligns module title and content to the right of the pane.
Click Add Module button or clickAdd to add the module to the page.
If the module shows up in a pane where you do not want it, move it with the 'Move' controls of the module.

Working with Text/HTML Modules

Most of the time, all you want to do is 'Edit Text' (explained below), 'Delete', 'Move' (using controls), or change the 'Settings' for the module.

Settings
This option takes the user to the Module Settings page. This page enables authorized users to modify basic module settings related to the module content (e.g. module title, module header and footer, module start and end dates) and module permissions (e.g. which roles are able to view and edit a module). The settings page also controls more advanced settings related to the design of the module (set containers, border, allow print) and site wide module settings. Under 'Advanced Settings', what is entered for 'header' and 'footer' can be coded with html code for links, font size etc.

Under 'Page Settings' these are things you will mostly deal with. Leave the rest as they are. 'Module Container' use drop down list to choose a container that will look good with that content and fit on the page. You may change this a few times before finding one you like. You can choose 'No container' but the title will disappear and the module may have odd formatting.

99% of the time change the 'Visibilty' from maximized (default) to none to get rid of minus sign in top right of container. The minus sign allows a user to minimize the content of the module.

Uncheck the 'Allow print' box to get rid of the print icon at the bottom right of the module. You should uncheck this most of the time unless you think the user will print that content. Remember they can still use their browser to print page contents.

The other settings - border, color, alignment - will provide a border for a module and a color shading. This is mostly covered with the container you choose so is not usually used.

Editing Text within a Module

The Text/HTML module uses a program called the FCKeditor. It has controls similar to a wordprocessor. Learning this program is important as 95% of the work you will do on the site will be using this program. A description of the controls for the editor and what they do can be found by clicking here. You should print this out and have it handy when you are working on the site.

Experiment and learn! Create a test module, paste in some text, then go through each control icon and see what it does.

Here are some hints and tips on working with the editor.

Most of the time you will use the 'Rich Text Editor'. If you know how to use coded html, you can choose 'Basic Text Box.'

Pasting
The far left paste icon should be used if you are pasting in content from another website. You will need to check any links you pasted to make sure they will work from your site. The 'Paste from Word' icon will do just that. These two methods can bring along lots of 'code' from the website or Word that can make formatting a real headache.

The middle paste icon is what you will use most of the time. It inserts the content as plain text, removing any formatting it had.

The best work flow for adding text content to the website is to create it in Word up to the final edit. This is faster as you do not have to interact with the server, you can spell check it, etc. Get it the way you want it there first but do not add bold, tables, etc. Then create your text/html module, paste it in as plain text, then go through and add formatting.

After you paste in the text, hit 'Select All' then Tahoma from 'Font' and x-small from 'Size'. No you can go in and add bolds, larger text for headings, etc.

Adding a table
Click the table icon and choose the number of columns and rows you want, the border size, and alignment. Choose cell spacing and padding to determine look of table. 5 is a good place to start for both values.

Placing images in the text
The first thing to decide on an image is whether it will have a caption or not. If not, you put the cursor on the far left of the sentence you want to be near the top of the image. So if we want an image in this paragraph, you would put the cursor to the left of the word "Placing" above. Now click on the image icon. Under 'Image info' tab for URL this is asking you where the image is. You can paste in the URL where the image is on some website or you can hit 'browse server' if the image is already on your site. If you do 'browse server' then navigate to where the image is and select it. You will then see it appear in the window at the size it already is. Do not try and make it larger then it already is or it will look fuzzy. You can make it smaller by decreasing width. Hit the round circle 'Reset size' button to reset.

The next box, 'Border', you can leave blank. A '1' there will place a thin line around your image, a '2' a thicker one, etc. For HSpace and Vspace put a value of 8. This will pad the image 8px from the text around it. This can be less or more but 8 is a good default. Now choose to align it right or left. Do not choose any other alignment. Now hit 'OK' and see how it looks. You may likely have to go back in and change the width.
To make the image linked to another web page, click the 'Link' tab. You can copy in a URL from another site or 'browse server' to select a page from your site.

You can choose 'Upload' a file and 'Send' it to the server from your computer. See notes on image formatting and placement below.

You will not deal with 'Advanced' tab for images.

An image with a caption
To do this, add a table as above but choose 2 rows and 1 column. Mostly you will change the border to zero to get rid of the lines around the caption and image. Now in the top box of the table, place in an image as outlined above. Then place your text in the lower row of the table for your caption. You can experiment with padding and spacing here, as well as alignment of caption text left or right under the image.

Important Notes
►Save your work by hitting 'Update' or it will be lost! Always hit 'Update' before you deal with a distraction or after you have done a large chunk of work.

►Disable popup windows for the domain you are working on or the functions of the wordprocessor will not work.

►It is a good idea to have a non-logged in browser open to see how the page actually looks as you are editing it. For example, edit with Firefox, and have Internet Explorer open to that page and hit refresh whenever you make changes and you want to see the real effect. Note that this technique yields better results than the 'Preview' button.

►You must properly format your images before uploading them to the server! Most images you take with your camera are about 20 times larger then they need to be for your site. Your site will be way sluggish unless you resize them to about 500px, then jpeg compress them with 90-95% compression. We recommend the PhotoElf program for working with images as it has the best batch edit features (you can resize and jpeg compress, rotate, etc. all files in a directory at once).

►When you choose to upload an image file using the editor, it will automatically install it in the root directory of the portal.

CISS.tabs Module

Tabbing content is a great way to better use real estate on a page. The content is 'stacked' and is accessed by clicking on the tabs. See an example.

To use this module, place it on a page, then choose 'edit content' from the module menu. Replace 550px with 100%. Choose a drop down from the 'Style' selection (light-green is good with a green skin, e.g.).

Add name of tab 1. Then add content in text window, then click 'Add Tab' above. Add name of tab 2, now delete content already in window and add conent for tab 2, then click 'Add tab' above.

Hit 'Update & Return' on bottom before leaving or you will lose the content! Now hit 'Return' at the bottom to see how it looks.

This is a powerful module with many options for adding content, from rss feeds to video embeds. See some examples here.