Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Dnn for beginners


Published on

The Dot Net Nuke(DNN) is ideal for creating, deploying and managing interactive websites of all kinds.

Published in: Technology
  • Login to see the comments

Dnn for beginners

  1. 1. ABOUT MEVinothKumar Pitchaimani System Engg @ Epro TechnologyVinoth’s Contact:vinothkumarp@eprocorp.comSkype: thevino
  2. 2. Agenda About DNN How DNN works DNN Architecture DNN Features Modules & Skins Working with DotNetNuke
  3. 3. About DNNDotNetNuke• …is Open Source• …runs on Microsoft .NET Technology• ...has advanced web content management features• …makes web application development efficient• …is highly extensible
  4. 4. About DNNDifferent DNN Versions:1. DotNetNuke 3.x – 4.2 supports .Net framework 1.12. DotNetNuke 4.4 – 4.6 supports .Net framework 2.03. DotNetNuke 4.09 – 5.1 supports .Net framework 3.54. DotNetNuke 6.2(current) supports .Net framework 4DNN Supports:1. Web 2.0 Concepts2. Ajax3. Sliverlight
  5. 5. DNN WorkflowHow does DNN Work?
  6. 6. 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.
  7. 7. DNN Architecture
  8. 8. DNN Architecture- DNN 6.2 generation requires • IIS 7.5 • ASP.NET v3.5 • SQL Server 2008- DNN 5.x generation requires • IIS 6 • ASP.NET v2.0 to v4 and • SQL Server 2005
  9. 9. DNN FeaturesSome of the DNN feature listed below:• Easy to Install• Easy to Use• Powerful• Feature-rich• Localized• Flexible and Extensible
  10. 10. Modules & Skins
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. Working with DNN• Once DNN is installed we can start working with the DNN.
  16. 16. Working with DNN• Login with credentials to start working with the DNN
  17. 17. Working with DNN• Once logged in, you’ll see the Home page again, but with more administrative features.
  18. 18. 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:
  19. 19. Working with DNN• Select “Add New User” (bottom left-center) to bring up the screen below
  20. 20. Working with DNN• Then the below screen will appears
  21. 21. Working with DNN• After adding this new user, you will be taken back the User Accounts page.
  22. 22. 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
  23. 23. 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.
  24. 24. Dreamweaver File StructureLocal 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.
  25. 25. Dreamweaver File Structure
  26. 26. Dreamweaver File Structure
  27. 27. Dreamweaver File Structure
  28. 28. 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 :
  29. 29. 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.
  30. 30. 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
  31. 31. Sample siteskin.ascx file Supporting js Files Slideshow supp. files FF files Admin Menu code
  32. 32. Sample siteskin.ascx file Header section Slideshow Section Menu Callouts
  33. 33. Sample siteskin.ascx file Content Pane Code Footer Part
  34. 34. Sample skin.css file Standard layout structure Slideshow Code Callouts Area
  35. 35. Sample skin.css file Content Code Navigation Code
  36. 36. Sample skin.css fileFooter part
  37. 37. Pages
  38. 38. Pages• We can add pages using the Pages tab from the Admin Menu
  39. 39. Adding New Page
  40. 40. 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.
  41. 41. Navigation• Verti. Navigation Code: <Snapsis:NavMenu id="Navigation" Level="0-1" Type="Hover" DisplayIcon="True" HideTabNameByLevel="0-1" runat="server" ExcludeTabs="Admin,Host" />
  42. 42. Navigation• Hori. Navigation Code: <Snapsis:NavMenu id="Navigation" Level="0-1"Type="Hover" DisplayIcon="True" CacheTabs=“False”HideTabNameByLevel= "0-1" runat="server"ExcludeTabs="Admin,Host" />
  43. 43. Content PaneContent 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.
  44. 44. Module Demo How to Install a Module
  45. 45. Adding custom third party module Login with Host credentials
  46. 46. Adding custom third party module• Module are extracted and installed automatically.• “Installation Successful” message appears at the end.
  47. 47. Sample Web Site