Creating & skinning interactive websites with DotNetNuke.

In this tutorial we'll create an interactive website using the content management system DotNetNuke. Key criteria are separation of content, style and functionality. This tutorial is intended for web-designers wishing to create a website with a consistent look & feel, after which authors and editors will maintain the content of the site using little or no HTML or CSS. This tutorial is suitable for beginners and for intermediate DNN users looking at DNN skinning. No prior knowledge of HTML or CSS is required (but may be necessary to create the desired look&feel).

Content management systems (CMS's) can be used vastly differently, varying from simple, interactive websites with a separation of style, functionality and content, to complex web applications that support organization processes or maintain huge sets of documents. In this tutorial we'll discuss the former: how to create a website with a consistent look & feel suitable for others to maintain without web-design experience.

Literally hundreds of CMS's exist with greatly varying capabilities. Http://www.cmsmatrix.org/ lists more than 750, offering ways to select and compare systems based on many criteria. I recently chose for DotNetNuke (DNN), but not because it is the best; all of them have their strong points and weaknesses, and every situation may lead to another choice. My criteria were: DNN is free, runs on a Windows server, and scores well on criteria related to security, usability and user friendlyness. The requirement that it should run on a Windows server is by no means obvious: most web-hosters use Linux servers, for which several high-quality, free CMS's exist.

Next to windows, DNN requirs MSSQL Server 2000 or later, IIS5 or later, and ASP.NET 2.0 or later. In addition DNN requires trusted mode in Windows, a security concern for some providers using virtual hosting. I'm currently using the Dutch provider WebStekker (http://www.webstekker.nl/) because they support DNN at $12 a month. In the past I've equally satisfactorally used Texas-based SeekDotNet (http://www.seekdotnet.com/). Both providers offer one-click installation of DNN.

As a running example I'll use a new website under development for the Dutch order of freemasons. I start by choosing "Application Packs" in WebStekker's control panel, and by selecting DotNetNukeV4. Note that the installation procedure and two screenshots are specific to WebStekker; many other providers such as SeekDotNet offer a similar procedure.

In the fill-out form, enter your choice of database name, username and password. The wizard will install the MSSQL database, and will fill in the configuration file web.config with this information. If you are using another hoster, or your own server, this is the file that must be set appropriately for DNN to run. DNN installation is now prepared on the WebStekker server.

Actual installation is done by visiting default.aspx in your domain.

Successful installation results in something similar as shown. Potential problems are shown in red and are easily recognizable. Now clicking on the bottom link brings us again to the file default.aspx, where the actual site now lives. Note that there is nothing like creating an empty site in DNN: we start out with a fully operational site, the content of which we will throw away and the style of which we will adapt to our liking.

Only the text in the middle of the start page is relevant: it contains the names and initial passwords for the "host" and "admin" roles. DNN offers the possibility to make multiple sites (in DNN: portals) using one server and one DNN installation. The super-user with access to settings for all portals is called host, and every portal has one or more admins responsible for the content and style of that portal.

As the start-page suggests, the smart thing to do is change the default passwords. Press login, in the upper right-hand corner, and type host, twice, in the form.

When we are logged in, the layout of the start page will have changed, bacause now we have many maintenance tools at our disposal: the control panel above, two additional menus, and edit buttons in all pieces of content. The upper right-hand corner now shows our name: Superuser Account. Press it to change the password.

This is done at the bottom of the page. After typing in a new password, press the "Update Password" button immediately below it; do not press the Update button at the bottom of the page. The red warnings can be ignored; the green triangle indicates success (and occasional passers-bye can no longer enter our house). Now logout and alter the admin password similarly, or do so from the "Admin > User Accounts" menu by pressing the pencil icon nest to the admin account information.

In DNN, content is put on a page in chunks with their own title-bar and tiny buttons. Such a chunk is called a module in DNN. We'll now add a module to the home page. In the content-panel on the top of the page, from the drop-down menu "Module", choose Text/HTML. After title, fill in Vrijmetselarij (Dutch for freemasonry). After Insert, choose Top, and leave other options as they are. Now press Add (or the green arrow).

A new module has been added to the home-page, as yet with empty content. Click on the pencil or choose "Edit text" to activate the content editor.

Anyone who hase ever worked with a word-processor recognises most buttons in the toolbar. The buttons Design and HTML at the bottom switch from WhatYouSeeIsWhatYouGet mode to HTML-mode.

In design-mode many formats can be cut and paste, including in particular text from editors and word processors. Pasting pictures also works, but remember that a reference to a picture is pasted rather than a copy. This means that if the picture is stored on your local computer it won't become visible from the internet, and if it lives in another site, changes to that site may alter the picture at any time. It is best to add pictures using the gallery button.

In the gallery we can choose pictures that have been uploaded earlier, or send a new picture stored locally. Press the Browse button to locate a picture on your computer, and press Upload to send it to the gallery. Now select the appropriate picture and add further settings as required. Finally, press Insert to add it.

I often use pictures embedded within the text, but this is not a standard option in DNN, so I use the HTML editor. First locate and cut the entire <IMG...> tag, and paste it before the line of text where it should occur. Then, for a right-aligned picture, replace the 'align="right"' attribute by 'style="float:right; margin-left:10px; margin-bottom:10px;"'

Press Update.

The title of the module now appears both in the titlebar and in the text itself. Sometimes it is desirable not to show the frame of the module. To do this, press the Settings icon or select the Settings menu from the triangle drop-down menu.

We will not discuss all settings here: they concern placement and removal dates, and visibility and editing rights. Under Page Settings two options are selected by default: Display Container and Allow Print. Deselect them and press Update. Note that the titlebar is still visible: admins and hosts always see a module's frame ("container" in DNN). Otherwise modules could potentially become irretrievably invisible.

The remaining modules can be removed from the start page, using the Delete option in the triangle menu. Then I log out to view the result so far.

In Every DNN portal the page-style is defined in a so-called skin, whereas the style of all modules is defined in a container. Apart from the style, the skin and container define the placing of functional elements, such as the date, the menubar, and the five panes into which content elements (modules) can be placed.

Other than built-in elements such as menus, all functionality is defined by what modules offer. The twenty-or-so standard modules are sufficient for most situations, but many more modules can be found on the internet. A list of free modules appears at http://www.cathal.co.uk/Default.aspx?tabid=80, and http://www.snowcovered.com/snowcovered2/ offers many more modules at varying prices.

Adapting the style of a site can be done in two degrees: in ease as well as in expressive power. Easiest is to place an appropriate image in the titlebar and in the page background, and use one of the standard colour schemes for the skin and the container.

Placing a logo is done with menu "Admin > Site Settings". At Logo, press Upload New File, press Browse to choose the intended file, and press Upload Selected File. Accepted format are JPEG and GIF, created with any tool. Free stock photographs can be found at http://www.sxc.hu/ or via http://www.dazzlindonna.com/ blog/2007/07/18/ favorite-10-free-stock-photo-download-sites/.

Since we're here, we might as well change the Title, Description and Key Words for our site. Also, a background image for all pages can be selected here.

Standard skins and containers are all color-based variations of what we have seen so far. Apart from blue, they are grey, green, red and yellow. Furthermore, we can choose for a topside menubar or a collapsible tree to the left, and for full-width or fixed-width (770px) pages.

In menu "Admin > Skins" choose under skins the base color. Now we can choose one of four variants for width and menu's (note that the thumbnails in all DNN versions I've seen so far do not appear occasionally). Press Apply to apply the selected skin or container; the image below is a preview of DNN-Gray with Vertical Menu's, Full Width.

Standards containers come in four varieties with respect to the titlebar, which is plain (Text Header) or a gradient (Image Header), and the text background, which is white or the skin's base color. For instance, DNN-Red with Image Header White Background looks as shown.

With what we have discussed so far, many modern sites can be designed.

If we want to do more, some HTML and CSS knowledge is required. Both the skin and the container consist of fairly straightforward HTML and CSS texts. Every rendered DNN page is generated by the DNN software from the skin template by adding and inserting appropriate HTML, including, for each module, the container with appropriate content inserted. Broadly, the skin and container HTML define the layout of functional elements, whereas the CSS defines the way they look.

The easiest way to make a skin or container is to copy one of the standard files. Using menu "Host > File Manager" visit the folder "Host Root/Containers". Type the name of your new container folder in the name-field in the appropriate field, and press the folder icon with the green arrow to create the folder. Now visit folder DNN-blue, select the files mentioned below, press Copy Files, select the folder you just created, and press OK.

The files that define a container are "container.css" and one of the variant-HTML files such as "Image Header - White Background.htm". By clicking on the file name, the file can be downloaded to your computer for editing. Note that rather than using DNN's built-in file manager, working with a stand-alone FTP client such as the superb FireFox extension FireFTP (http://fireftp.mozdev.org/) is more efficient. In that case, the skin and container files are in .../wwwroot/Portals/_default/.

Once skin and container files are local, they can be edited with any text editor. When using a HTML authoring tool such as Dreamweaver, some care must be taken: the HTML files are incomplete templates, and some tools add a HTML head and other stuff to make it a proper HTML file. Those additions must be removed.

The structure of skins and containers isn't complex, but I tend to loose my bearing because of all the details. The diagram shown sketches the logical structure of the files.

Since this tutorial isn't primarily about HTML and CSS, we won't go into further details on that part of skinning.

When you're done editing, upload the files to the server using File Manager or your FTP client. Under menu "Host > Skins" select the name you used in the drop-down menu for Containers (ignore error messages at this point). Now select Parse Skin Package. Note that this link parses a skin if that is what you just selected, and parses a container if you just selected that. Now press Apply. Sometimes it is necessary to visit the home-page to ensure the new skin and container are properly loaded, and sometimes (when images have been altered) it is necessary to clear your browser's cache to force fetching the proper images.

When an external FTP client is used, all DNN actions occur on the same page. This saves bundles of time if you are as bad a HTML/CSS programmer as I am and require as many iterations.

Opposite is a screenshot of the final site, which has been developed solely with the techniques described in this tutorial.

In this tutorial we've created an interactive website using DotNetNuke. In this site, content, style and functionality are separated so that authors and editors can maintain the content of the site using little or no HTML or CSS. Styles have been defined in the skin and container templates, and functionality is offered in a selection of modules.