Working With Your New Portal
Ryan Morgan - www.ArrowDesigns.com
For those that have been working with DNN for a while, this front page looks like home. It looks like a blank slate. If this is your first time here, you’re probably saying, “now what am I looking at?” This section will give you a brief introduction to working with DotNetNuke to create websites. Before you do anything else, it is recommended that you bookmark this page.
For this section, you will need to be logged in as an administrator user, so go ahead and click the login link right below the search box and enter the username and password that you created when you used the signup form in the last step. Once you are logged in, your page will look slightly different, but it will make sense soon enough.
Modules – these are the basic building blocks that you use to add content to your website. Whether you wanted to add a blog or just simple text/html to your website, you would use a module. The type of content you add to your page is determined by the type of module you choose. Other CMS platforms call this a Content Block, but the concept is the same – a piece of content or functionality that you add to your page (see illustration).
Content Areas (Panes) – the modules that you add to your page have to be added to a content area known as a Pane. By looking at this page, you can see that there is a TopPane, LeftPane, ContentPane, RightPane and BottomPane. As always, the easiest way to understand something is to work with it. Let’s move an existing module from one pane to another to understand the way content areas control the layout for your content.
- On the first module in the ContentPane named DotNetNuke® Open Source License hover your mouse over the down arrow to the left of the title.
- Go to the Move menu and select Move to TopPane.
- Your page layout should have changed so that the DotNetNuke® Open Source License module spans all three columns.
Now, to move it back, let’s use the drag and drop feature for modules (see illustration).
- Click and hold your left mouse button down on the title. Do not move your mouse until you see the module “pop” out of the layout.
- Drag the module until you see the ContentPane content area highlighted by a purple line.
- Release the left mouse button to drop the module in the selected pane.
Next, let’s edit some of the existing content to see how we can use the online editor to update our website content without even opening an HTML editor program.
Inline Editing
- Click the title of the DotNetNuke® Open Source License module once to enter edit mode for the title of this module.
- Change the title to “Welcome to My Website”.
- Click outside of the title to commit the changes.
- Now click the text inside the module to enter inline editing mode for the content of this module.
- Change the content to say whatever you want. Mine says Welcome to the DNN Walkthrough. This is an easy way to test out the functionality of the DotNetNuke portal website CMS. For more information, please visit www.DotNetNuke.com.
WYSIWYG Editor
- While this is a very useful and just plain cool feature, there will be times when simple text editing is not enough. For more advanced functionality, click the Edit Text link at the bottom of your module.
- You should now see a WYSIWYG editor containing the copy we just updated from the last page.
- The usual familiar options are here like numbered lists, bullet list, bold, italic and tables. Edit your text to get a feel for the abilities of the editor.
- Let’s add an image to our content. The button directly to the left of the smiley button is the Image Gallery button (see illustration).
- Double-click any image to insert it into your module content.
- Click Update at the bottom of the page to commit your change.
Preview Mode – to view the page as a non-administrator would without logging out and logging back in, simply click the preview button in the left Page Functions section of the Control Panel located at the top of your page (see illustration).
One thing to note about having the site in preview mode is that DotNetNuke “remembers” preview mode, even if you leave and come back. If you find that you cannot edit your modules even though you are logged in as an administrator, you may be in preview mode. Simply check the preview icon. If you are in preview mode, there will be a plus sign over the icon.
Pages – your menu system is created dynamically based upon the pages that you have added to your portal. Currently, the only public page in your site is the Home page. Let’s add a new page and some content.
- If you are in preview mode, click the preview button to toggle back out of preview mode.
- Using the button all the way to the left in the control panel, click the Add button to add a new page.
- After you click the Add button, you will be taken to a new page that contains the page settings form.
- Using this form, set the Page Name to “Contact” and set the Page Title to “Contact the Site Administrator”
- Leave the description and keywords fields blank.
- In the permissions, check the “All Users” box under View Page.
- Click “Update” to add the page.
- You will be redirected to your newly created page.
Where did the system use the different names that you put into the new page dialog? Where is Contact used as opposed to where Contact the Site Administrator is used?
You should see that there is now a new link in the menu named Contact. This was created by the value you put in the last form in the Page Name text box. Also notice that title of the page displayed in your browser is from the Page Title value in the last form (see illustration).
On Your Own
On your own, use the center section of the control panel to add several different kinds of modules to new pages that you create. You have worked with the Text/HTML module, try adding a User Defined Table to a page. Also experiment with the Links and Documents module. You’ll begin to find that using DotNetNuke is an efficient and easy way to create and maintain dynamic portal websites.
Labs written and created by Ryan Morgan of ArrowNuke.com - Custom Modules, Skins and Training
