Download - DotNetNuke v9 CMS User Training Manual - Buffalo Web Design€¦ · already on another page to the page you are currently on. The last icon is the page settings. A module in DNN essentially

DotNetNuke v9 CMS

User Training Manual

Provided by:

Last Updated: June 25, 2018

RLComputing | Help Desk: https://support.rlcomputing.com | Email: [email protected] 2

TableofContents

CHAPTER 1: USER LOGIN ................................................................................................................................................................ 4

USER LOGIN .............................................................................................................................................................................................. 4

LOGOUT ................................................................................................................................................................................................... 4

CHANGING YOUR PASSWORD ....................................................................................................................................................................... 5

CHAPTER 2: HOW TO NAVIGATE WITHIN DOTNETNUKE ................................................................................................................. 6

CONTROL PANEL(PERSONAL BAR) ................................................................................................................................................................. 6

CONTENT ICON .......................................................................................................................................................................................... 6

MANAGE ICON (WRENCHES) ........................................................................................................................................................................ 7

SETTINGS ICON (WHEEL) ............................................................................................................................................................................. 7

EDIT MODE ............................................................................................................................................................................................... 8

EDIT TOOLBAR ........................................................................................................................................................................................... 8

CHAPTER 3: EDITING BASIC INFORMATION WITH THE HTML MODULE ......................................................................................... 10

EDITING CONTENT AREAS ........................................................................................................................................................................... 10

INSERTING AN IMAGE ................................................................................................................................................................................ 12

INSET A LINK ............................................................................................................................................................................................ 16

LINK TO A FILE/DOCUMENT ........................................................................................................................................................................ 18

EMBEDDING EXTERNAL MEDIA (YOUTUBE VIDEOS) ......................................................................................................................................... 20

JAVASCRIPT ............................................................................................................................................................................................. 22

CHAPTER 4: PAGE MANAGEMENT................................................................................................................................................ 23

ADD A NEW PAGE .................................................................................................................................................................................... 24

REORDER PAGES ...................................................................................................................................................................................... 25

DELETE PAGES ......................................................................................................................................................................................... 25

CHAPTER 5: MANAGING MODULES ON A PAGE ............................................................................................................................ 26

ADDING A MODULE .................................................................................................................................................................................. 26

ADD EXISTING MODULE ............................................................................................................................................................................. 27

CHANGING THE TITLE OF THE MODULE ......................................................................................................................................................... 29

DELETING A MODULE ................................................................................................................................................................................ 30

MOVING A MODULE ................................................................................................................................................................................. 31

CHAPTER 6: PAGE SETTINGS ........................................................................................................................................................ 32

PAGE NAME ............................................................................................................................................................................................ 33

PAGE VIEWING ........................................................................................................................................................................................ 33

REDIRECT A PAGE TO ANOTHER WEB SITE, PAGE, OR FILE .................................................................................................................................. 34

CHAPTER 7: MANAGE ICON (WRENCHES) ..................................................................................................................................... 35

USERS .................................................................................................................................................................................................... 35

ROLES .................................................................................................................................................................................................... 37


ADMIN LOGS ........................................................................................................................................................................................... 38

SITE ASSESTS .......................................................................................................................................................................................... 38

CHAPTER 8: SETTINGS ICON (WHEEL) ........................................................................................................................................... 40

SITE SETTINGS .......................................................................................................................................................................................... 40

EXTENSIONS ............................................................................................................................................................................................ 41


Chapter1:UserLogin

UserLoginUser login is the first thing that you’ll need to know to be able to get into the CMS. Once at the site, you will see on the

bottom of every page, a login link. Click this link.

You will then be presented with a page that has a login dialog box.

This is where you will enter your user name and password. If you

forgot your password, don’t worry, a “Retrieve Password” button is

provided on the login page. The system will email you your username

and a link to reset your password. This link does expire so you need to

do it right away. If you don’t see the email in a minute or two check

your junk mail. It’s coming from [email protected].

You do not have to log in from the home page, you can log in from

any page on the site. By doing this, once logged in, you will be right on the page that you were browsing.

It is highly recommended you do NOT save your password (click the remember login option). This is how hackers can

steal your credentials and compromise your web site.

LogoutOnce you are logged into the CMS, the Login link will change to your name and a log out link. When you are done editing

the web site you should either close your browser or click on the Logout link. This prevents anyone else from using your

account to edit the web site. The web site will automatically log you out after 20 minutes of inactivity.


ChangingYourPasswordAfter you log in the first time, you should change your password. To change your password, click on your name at the

bottom of the page.

Once you click your name, you will be brought to your profile. Click on “Edit Profile”. Then click on the “Manage

Account” tab. Scroll down and click on Manage Password. You will have to enter your current password and then your

new password twice.

*** When creating a new password it must be at least 8 characters and a combination of letters, numbers, and special

characters. Special characters are !@#$%^&*()

If you password is changed successfully you will see a green checkmark at the top of the page. If it was not successful,

you will see a red X.

Do not share your password with anyone or write it on a sticky note on your monitor. Everyone should have their own

username/password for the web site.


Chapter2:HowtoNavigatewithinDotNetNuke

ControlPanel(PersonalBar)The control panel(persona bar) is the gray bar on the left side of the page. When you hover your mouse over any of the

menu items you will get a popup with more menu items or tasks you can complete. Depending on your security level

you may or may not see all the options below.

ContentIcon

Pages – This menu option allows you to manage all the pages within the site and

to add, edit or delete pages.

Recycle Bin ‐ The recycle bin allows you to recover any deleted modules, pages

or users from your web site. On the Pages tab you will see any pages that have

been deleted. If you want to restore them, click on the page name. Then click

Restore Selected Page. The same goes with the Modules. NEVER click on the EMPTY RECYCLE BIN. There

is no turning back from this.


ManageIcon(Wrenches)

Depending on your security level you may not see this option.

Users – Manages users within DNN, passwords and permissions.

Roles – Previously called Security Roles where you can manage security groups.

Site Assets – Previously called File Management where you can manage the images

and documents on the web site.

Global Assets, Themes, Sites – You will not use these. They were used to set up the

site in the beginning.

Admin Logs – Previously called the Event Viewer. This is where any errors are logged.

Security Analyzer – This utility will analyze your site for security issues.

SettingsIcon(Wheel)

Depending on your security level you may or may not see this icon or items

within it.

Site Settings – This is where you manage the settings for the site.

Security – Management of login settings.

SEO – This is where you can set some basic parameters for SEO and

how URLs will look.

Vocabularies – Most sites are not using this functionality.

Extensions – Previously called Modules. This is where you add new

modules to the site.

Servers – Information about the server your site is on and its mail

server.

Import/Export – You will not be using this option.

Scheduler – This is where you manage the processes that run at regular intervals on your site. EG search

indexing


Custom CSS, SQL Console, Config Manager, About – You will not be using these items. There are for managing

the backend systems.

EditModeOn the far bottom left hand corner of the control panel there is an icon that looks like a pencil. Clicking this icon allows

you to go into edit mode on any page you have access to edit.

Click the pencil icon once to get into edit mode then you will see a popup and you can click the pencil icon again to stay

in Edit mode. The pencil will then turn blue.

EditToolbarThe first icon in the edit toolbar is to add a module. The second icon is to add an existing module or a module that is

already on another page to the page you are currently on. The last icon is the page settings.

A module in DNN essentially is a self‐contained area where content will go on the web page. The most common module

is the HTML module. This is what is used on almost every page of your site to put the text of the page in.

There are 1000’s of modules out there. If you would like additional functionality on the site just let us know what you

are looking for. Modules are purchased through http://store.dotnetnuke.com.

Add Module – Use when you wish to add a module to a page.

Add Existing Module – This option enables you to add an existing module, which is located on a different

page, to this page. This comes in handy when you need to add the banner onto a page. You use this option

to copy the banner from one page to another.


Page Settings – The wheel icon allows you to get to the page settings where you can edit the page

name, visibility and permissions of the page.


Chapter3:EditingBasicInformationwiththeHTMLModule

The HTML Module is the most commonly used module for entering content into the CMS. Make sure you are in Edit

mode or you will not see the edit controls.

EditingContentAreasTo edit the content in a module hover over the pencil icon and choose “Edit Content”. This set of icons is always on the

upper right side of the module.

When you click “Edit Content”, you will be brought to the HTML editor screen, which looks similar to using MS Word.

The toolbar is described below. If you hover over a button, a tooltip will come up, giving details as to what the button is.

First Row

Source

Find

Replace

Select All

Cut

Copy

Paste As Plan Text – Always choose paste as plain text to remove all hidden formatting. This will ensure your

web page is displayed properly. Not using this will have adverse effects on your web page.


Paste From Word – We do not recommend using this option.

Undo/Redo

Insert an Image ‐ The icon looks like a mountain and sunshine.

Insert External Media – This allows you embed a YouTube video.

iFrame – This is used to embed 3rd party applications or sites.

Hyperlink Manager ‐ The icon with a globe and chain link allows you to link something to another web site.

Remove Link – Icon with the globe and broken chain link.

Heading Tags

Second Row

Insert Special Characters – This contains items like copyright and trademark symbols.

Insert a Table

Insert Horizontal Rule

Bold/Italic

Subscript/Superscript

Indent/Outdent – Used for creating multiple layers in a bulleted list.

Bullets/numbering

Blockquote

Justification – left, right, center

Styles – these are pre‐built styles in the system.


InsertinganImage

You can insert a JPG, GIF or PNG on the web site. Bitmaps are not an appropriate file type due to their low quality and

they are usually copyright protected.

Keys things to remember when working with images:

1. When inserting a photograph, please make sure you resize the photo in a graphics program (e.g. Photoshop or

GIMP or the built in editor). This resizes the image proportionally and does not make it distorted. Anything that

you insert should not be more than 300px wide on a standard page. That will take up almost half your web site

width. By not resizing your images, you will eventually will have problems loading the image manager and your

web site will load slower. Never put images directly from your digital camera to the web site.

2. When naming your photos, make sure you name them something you will recognize. Do not leave them a bunch

of numbers. They will be hard to locate later on and Google does look at your image file names for SEO.

3. Do not use special character in file names EG #$%@^&(),

4. If you are using an image that is not yours, make sure you are not violating any copyright laws. Best way to

prevent any legal issues is to buy stock photograph at sites like istock.com or bigstockphotos.com.

To insert an image:

1. Click on the icon in the first row.

2. The Image Manager will pop up.


3. Click Browse Server

4. Choose the images folder. You will see the images we already uploaded. You can upload the image into the

images folder or create a new folder within the images folder by clicking on the yellow folder with a green +

sign. Its in the upper left corner. Type in a folder name and save it.


5. To upload a new image click on the UPLOAD icon at the top of the screen. Another screen will appear. You can

then browse by clicking Add Files or drag files to the middle area. You can add more than one image. If you are

updating the image make sure you click “overwrite of file exists”. Click Start upload. This will make a copy of the

image on your machine and upload it to the server.

6. Navigate through the directory until you locate the image you uploaded. Click on the image you want to insert.

7. Do not change any other settings. Just click OK.

8. The properties screen will appear again. There are a couple of fields you should fill in. First being the Alternative

Text. This is for people who are visually impaired and for Google SEO. This should be a brief yet descriptive

description of the image. This description also helps in your SEO.


9. For “Alignment”, choose left or right. This aligns the picture to the left or right of the text and the text will

automatically wrap around the picture.

10. Put 5 in the HSpace.

11. Do NOT alter the image size here. Make sure you resize the image in an image editor prior to uploading the

image. If you need to tweak the image size just a few pixels you can use width/height at the top of this window.

Make sure you click the “lock” next to these two boxes first. This ensures the image is resized proportionally.

12. If you want to link the image to a web site, click the Link tab. Type in the full URL to the external web site or click

browse to link it to a file.


13. Click OK.

InsetaLinkThere are four types of links – external, internal, email, and file.

1. Highlight the text you want to be clickable.

2. Click the chain link icon in the first row of the toolbar.

3. The Link Manager will open.


External Link – This is a link to an external web site. (E.g. Google)

1. In the URL box type in the web site address. E.g. – google.com – make sure you leave the http://

2. On the TARGET tab choose New Window (_Blank)

3. Click OK.

Internal Link – This is a link to a page within your web site.

1. Click the down arrow next to Link Type. Choose Portal Page.

2. Select the page you want to link to, from the dropdown.

3. Click OK.

Email – This is used when you want users to send you an email. All email addresses on the web site should be made

email links.

1. Choose Email from the Link Type drodown.

2. If not already there type in the email address.


3. Click OK.

LinktoaFile/Document

File – This is a link to a Word document, PDF, Excel file, etc.

*** If you are uploading an Office document, make sure you save your documents as Office 2013 format. Not everyone

can open newer versions of Office documents. The best practice is to make sure every file is in PDF format. This prevents

any compatibility issues.

1. Click on the chain link icon.

2. The Link Manager will open.


3. Click Browse Server.

4. Choose the appropriate folder to upload your document. Usually called Docs. If you don’t have one you can

create one by clicking on New folder icon which is the yellow folder with a +. Type in a folder name and save it.

5. Choose a file you would like to link to OR click the UPLOAD icon to upload a new file.


6. To upload a new image click on the UPLOAD icon at the top of the screen. Another screen will appear. You can

then browse by clicking Add Files or drag files to the middle area. You can add more than one image. If you are

updating the image make sure you click “overwrite of file exists”. Click Start upload. This will make a copy of the

image on your machine and upload it to the server.

7. Navigate the list until you locate the file and click on it.

8. Choose OK.

9. On the TARGET tab choose New Window (_Blank)

10. Click OK.

EmbeddingExternalMedia(YouTubevideos)

Directions on uploading a video to YouTube ‐

https://support.google.com/youtube/answer/57407?co=GENIE.Platform%3DDesktop&hl=en

1. Go to YouTube.com and play the video you want to add. Copy the ENTIRE URL for the video. Do not use the

short URL.


2. Click on the External Media icon.

3. Paste the URL into the editor in the first field.

4. Choose your alignment.

5. Click OK.


JavaScript

When using JavaScript you need to be very careful. This can open your web site up to security vulnerabilities/hacking. If

you want to place JavaScript on a page, you need to click the Source icon. This will display the HTML code and you can

paste the JavaScript in here.

If JavaScript needs to be placed in the header of a page, you can access this area by going to the settings of the HTML

module and opening the advanced section. Past the code in the Header field.


Chapter4:PageManagement

To manage the pages on your web site, click on the Content Icon (first icon on left). Choose Pages. All the pages on your

web site will be listed. In the first column, it shows all the pages. There will be a plus sign next to any pages that have

child pages.

Click on the + sign next to parent page name to view the child pages.

You can click any page name and on the right the page settings will be displayed.


AddaNewPage

1. Click on the Content Icon (first icon on left). Choose Pages.

2. Click on Add Page in the upper right corner.

3. The page settings will open for the new page.

4. Type in the page name. This is what will show up in the menu. Keep it to 1‐3 words max. Use plain English

wording.

5. If you leave the page title blank it will automatically fill in with the default web site title with the keywords and

page name.


6. Fill in the description and keywords if desired. This will help with SEO. If you fill these fields, they should be

specific to the page.

7. Parent Page – Select the correct parent page that this new page will fall under. If this new page will be in the

main menu leave None Specified selected.

8. Choose whether you want the page to show in the main menu. This can be used to hide a page if you are still

working on it or do not want it accessible to the public. (Choose Display in Menu – on or off).

9. Permissions Tab – Make sure All Users has View permissions.

10. If you want this new page to link to a file, another page or an external URL then at the top, choose one of the

following for page type:

a. Standard – This is a normal web page and the default. b. Existing – Links to another page within your site. Choose Permanently Redirect c. URL – This will redirect the menu item to an external web site. Always choose open in new window. d. File – Links to a document – Always choose open in new window.

11. Click on Add Page.

ReorderPages

You can change the order of the pages in the main menu or sub menus. Click and hold the mouse button and then you

can drag and drop the pages to where you want them.

DeletePages

To delete a page click on the page. Then on the right scroll to the bottom. Click the delete button.


Chapter5:ManagingModulesonaPage

A module is the area on the page where you can type text or that is displaying data. On most web sites there are at least

three areas to add modules – LeftPane(sidemenu), ContentPane (HTML/Text), and TopPane(Banner).

AddingaModule

To add a module to a page you need to be in Edit mode first and see the 3 icons in the gray bar at the bottom of the

page.

1. Click on the first icon – Add Module. A list of modules will be displayed. Most of the module’s names are self‐

explanatory.

2. Choose the module that you would like to add from the list by clicking on it. It will turn blue with a + sign.


3. You can now drag the module to exactly on the page that you want it to be.

4. Release the mouse when it is where you want it. The page will refresh with the module in the proper place.

AddExistingModule

This option enables you to add an existing module, which is located on a different page, to this page. This comes in handy when you need to add the side menu onto a page or a banner image. You use this option to copy the banner image from one page to another.

1. Click add existing module.

2. Then a window will display showing you a list of pages in the first dropdown. Select the page that has the module on it that you want.


3. Once you select the page, all the modules on that page will be displayed.

4. Click on the module you want to place on this. Then the module will appear like its floating on the page. Drag it

to the appropriate location.


ChangingtheTitleoftheModule

When you first create a module, the module title will be the manufacturer of the module, such as HTML/TEXT. You can

change this title after it has been added to the page. There are two ways to do this.

Option 1

Put your mouse over the module title. A pencil icon will appear to the left of the title. Click on the pencil icon and you

can edit the title. Click the save icon to the right when you are done.

Option 2

1. Mouse over the Settings icon (wheel).

2. Choose Settings.

3. Go to the Module Settings Tab.


4. In the Module Title field type the name you want the module to be.

5. Click Update.

*** If you do not want the title to display at all, click on the Page Settings tab. Under the Advanced Settings, uncheck the

box – Display Module on All Pages. This MUST be done for the sidemenu and top banner modules.

DeletingaModuleIf you have to delete a module on a page, hover over the Settings icon and you will see the Delete link – click this. Upon

confirmation, the module will be deleted. Please be careful when doing this. All deleted modules do go to the Recycle

bin and can be restored.


MovingaModule

To move a module, hover over the Plus icon and you will see options of where you can move your module. If when

creating your module, if the module did not appear where you wanted it to go, you can always come here and fix the

position. You can also drag the module to another location by clicking and holding the left mouse button and dragging

the module to another area.


Chapter6:PageSettings

If you would like to hide the page from the public, change the page name or change where it goes, grant permissions to

edit the page, etc you have two ways to access the page settings. Both ways will get you to the same spot.

Option 1

Go to the page and make sure you are in Edit mode. Then click the Page Settings icon in the bottom Edit toolbar (wheel

icon).

Option 2

Click on the Content Icon in the left gray toolbar. Click Pages. Then click on the page you want to view the page settings

for.


PageNameThe page name appears in the menu and in the breadcrumbs, if your site has them. When creating page names, do NOT

put special characters in the name. Also keep it short and to the point. You do not want to have the menu items being

really long. Make sure you use plain vocabulary when creating page names. Do not use industry jargon.

PageViewingThere are a few ways you can have your page not viewable by the public or not display in the menu.

Don’t display in the menu but viewable

To have the page viewable but not in any menus, in the page settings uncheck “Display in menu”.

Not viewable by public

You can hide the page from the public but you can see it in the menu when you log in. On the permissions tab, uncheck

All Users ‐>View. Make sure there is nothing in the checkboxes for all users. Do NOT put a red X because that will

prevent everyone from viewing or editing the page.


RedirectaPagetoanotherwebsite,page,orfile

You can have a menu item (page) link to a file, another page within your site or automatically go to an external web site.

1. Go to the Page Settings of the page.

2. On the Details tab there is a field called Page Type. Choose the proper type.

3. File ‐ If you are linking to a file choose file. Then choose the correct folder the file is in. If the file is not currently

on the site choose upload new file. Browse your computer for the file and upload it. Check Open in New

Window. Then click update.

4. Internal ‐ If you are linking to another page on your web site choose internal. In the dropdown choose the page

you want to link to. Click Permanently Redirect.

5. URL ‐ If you are linking to an external web site choose URL. Then type in the URL you want to link to including

the http:// ‐ EG http://rlcomputing.com. Choose Open in New Window.


Chapter7:ManageIcon(Wrenches)

This area control some of the major aspects of the web site.

UsersNot everyone will have access to this area. There are usually 1‐2 people for each site with access to this area. This is

where you will manage the user account for people who have access to edit your web site. This list of users should be

maintained regularly. As people leave your organization, you should remove their account from the web site.

Everyone MUST have their own user account. No one should be sharing an account.

Security can give users access to edit all pages on the web site, just a section or just a page.

Add a User

Click on Add New User. Type in the requested fields. For a username we recommend the first initial of the first name

then the full last name. Every account must have an email address. The user will be notified automatically via email that

they have been granted access to the web site along with their username/password. Once the account is created, you

need to add the user to the appropriate security group. To add them to the appropriate security group, click on the

shield next to their username. Start typing the name of the security group next to the + Add button. The security role

will popup as you type. Then click Add.


Edit a User

Click on the wheel next to the username. You can change the user’s password, unlock their account or update the user’s

information.

Delete a User

Click on the 3 dots next to the username. Choose Delete User from the drop down.


RolesThis area allows you to manage groups of users and grant them access to areas of the web site. The security groups

should be granted permissions to edit pages/sections of your web site NOT users. This makes it much easier to manage

your web site.

Every site will have the groups below along with Site Editors. Site Editors is the group that had administrative access to

the web site and full access to manage all pages on the web site. This group should be used for admins only. Other

groups should be created for general users. The administrators group should never be used for content editors.

Add a New Security Role

Click on Create New Role. Type in the name of the new role. Make it something that will be easily recognizable what it

should be managing.

Add Users to a Security Role

Click the icon that looks like people next to the role name. This will show which users are part of this group. You can add

new users to the group here too.


AdminLogsIf you are having an issue on your web site or you receive an error on a page you should look here first. This area will

show you exactly where the problem is. This is your first area to troubleshoot a problem. Each event can be clicked on

to view its details.

SiteAssestsThis area was formerly the File Management. You can manage all the images and documents associated with the web

site.


Create folders – To create a new folder click on the icon that looks like a folder with a + sign on it. Keep the name short,

no spaces, and no special characters.

Upload files – To upload a new file cick on the icon that looks like a piece of paper with a + sign.

You can upload a zip file of images and the system will automatically unzip the images into the proper folder.


Chapter8:SettingsIcon(wheel)

The Settings area gives you as an administrator, more control to critical components of the CMS. Some of the items will

not be available unless you have a super user account.

SiteSettings

This area allows you to configure the settings for the entire web site. Only certain user accounts will have access to this

area. You can control the default set of keywords and description tags for the site, title of the site, copyright info, logo,

template, social media tags, web site addresses, etc.


Extensions

This is where you can install or upgrade modules on the web site. We will upgrade the modules during the yearly CMS

upgrade. If there is a major security update we will upgrade modules as needed.