3. Agenda
About DNN
How DNN works
DNN Architecture
DNN Features
Modules & Skins
Working with DotNetNuke
4. About DNN
DotNetNuke
• …is Open Source
• …runs on Microsoft .NET Technology
• ...has advanced web content management features
• …makes web application development efficient
• …is highly extensible
7. DNN Architecture
- 3-tier architecture model with a core framework providing
support to the extensible modular structure.
• Presentation Layer
• Business Layer
• Data Access Layer
- DotNetNuke can be extended using 3rd-party modules and
providers that add additional functionality.
12. Modules
• Written in .NET code (usually C# or VB.NET)
• Third party modules can purchased for out of the box
solutions
• Core modules are included in DNN for basic functionality
• Modules allows to extend DNN by adding third-party
modules or through in-house development of custom
functionality
• Reusability
13. Modules
• The DNN framework provides basic functionality such as
security, user administration and content management,
while modules are used to tailor the web site for specific
deployment needs
• Automatically installed
14. Skins
• Written in HTML, CSS
• Makes DNN flexible to any design
• Cross-browser compatible
• Multiple skins per portal
• Each page can have unique skin
• Skins can be assigned at the host or site level
• Reusable like Modules
15. Skins
• Separation between design and content
• Skins consist of basic HTML files with placeholders
(tokens) for content, menus and other functionality
• Skins, can be automatically installed through the
administration pages
16. Working with DNN
• Once DNN is installed we can start working with the DNN.
18. Working with DNN
• Once logged in, you’ll see the Home page again, but with
more administrative features.
19. Working with DNN
• It’s now time to setup the DNN users for the client. Select
the Users tab from the Common Task Panel
• You should then see the following screen:
20. Working with DNN
• Select “Add New User” (bottom left-center) to bring up the
screen below
22. Working with DNN
• After adding this new user, you will be taken back the User
Accounts page.
23. Working with DNN
• Once you have done this, you can proceed to editing the
Site configuration by clicking the “Site” button in the
below screen.
• User will be redirected to the below “Site Settings” Page
24. Working with DNN
• The “Title”, “Description”, and “Keywords” fields will be
added during the content adding process of the
development, which will be provided by the copy writing
team.
25. Dreamweaver File Structure
Local File Structure
• We now will setup our local machine to reflect the file
structure from the server that we need.
• In Dreamweaver, we will connect to the server through
our remote view and then find the folder named after our
domain name.
29. Working with DNN
• Open the folder where you have installed the DNN:
Portals> _default. From there, we will need to open the
“Containers” and “Skins” folders
• Select the “Site” settings button in the below screen.
• Then the below page will appears in the Site settings
>“Appearance” tab :
30. DNN Site Settings
• Select the drop down menu to change the proper skin for
the site. Site skin’s are typically named just that, “siteSkin.
Once you have selected the skin for the site, scroll down
slightly further and select the “Update” link to apply your
changes.
31. Changing Our Skin
• Now we can see the skin applied to the site and can thus
pull the Cascading Stylesheet (CSS) to represent the
information .
• Now we can start changing the width of the structural
elements (such as the shell, header, or content divs), the
font-family being used throughout the site, the position of
some elements such as content and any inner-content,
navigation, and others.
• The siteSkin.ascx file may have to be modified depending
on the screenshot and your chosen template to begin with.
• Now our page will look like this
41. Navigation
• Admin Navigation Code:
<Snapsis:NavMenu ID="adminMenu“
Level="0-1" Type="SelectList“
IncludeTabs="Admin,Host"
runat="server" />
• This code should be placed on
top of the template design.
44. Content Pane
Content Pane Code:
<div runat="server" id="ContentPane"
class="contentstyle"> </div>
• We can place this code to the template in where we want to
display the content.