Creating a Skin Template - part 3

By Lee Sykes

January & February 2006

Continuing our series on How to build a DotNetNuke website, we are now going to create the skin template for Vortex Music.

This tutorial assumes you have a basic understanding of HTML and tables, if you don’t you can follow this tutorial:
Beginners Guide to HTML

We also assume that you know how to install a skin and how to apply a skin to your portal. If you don’t know how to do this follow these tutorials first:

How to install a skin in DotNetNuke
How to use Skins and Containers in DotNetNuke

In this tutorial we are going to create a skin design template for beginners to DotNetNuke. We are going to base the design of the skin on the standard skins that come free with DotNetNuke and demonstrate how you can adapt this skin to suit your own website needs.

I prefer to use Macromedia Fireworks to create my initial design templates. You can use any graphic design programme that you are comfortable with such as Adobe Photoshop.

Skin Template

Based on the colour scheme of the logo from Vortex Music and the considerations for a search engine friendly skin, we have designed the following template.

 

This template is a rough sketch for the layout and look of the website. It allows us to quickly put ideas together for the look of the website without worrying about how to create the skin in DotNetNuke.

More often than not changes are made to the skin while adapting the template to work in DotNetNuke, so I never consider this initial template design to be the final design.

You will see that this design is based upon the standard DNN skin that comes with DotNetNuke. We will discuss each area of the skin in turn. The main feature of this skin is that we are going to use a table trick to place the important content near to the top of the source code and the less important content we are placing at the end of the source code.

Colours

The colour scheme for this skin has been created to compliment the colour scheme of the logo. I have used a gradient which changes from red through to yellow and white.

The background of the skin is a dark grey colour. I would usually opt for a white background (especially on sites that contain a large amount of content) as white offers a sense of space and is easy on the eye. For this skin however, the dark grey complemented the logo and gradients, so I opted for a darker colour.

Content

1) Text at the top of the skin

We are going to create a pane at the very top of the skin where we will insert a keyword phrase. We want to be able to change this keyword phrase per page, so that we can target the search engines with our key phrases.

This is because a search engine prioritises the text that it reads at the top of the source code. We are therefore going to insert some text at the top of the page which is surrounded by <h1> tags as the search engines also add relevance to titles surrounded by the <h1> tags.

2) Search Box, Logo and blank area

Following the top text is the search box and logo, along with a blank area. I have left this area blank to allow for future expansion. This area could be used for displaying a flash sequence or video, banner advertisements, important links etc.

3) Date, Breadlinks, Register / Login / Out links

4) Menu and Content Pane

Underneath the date and breadlinks is a vertical menu and the main content. I have opted for the vertical menu in order to create a more search engine friendly skin.

In this section of the design we will be implementing a “table trick.” This will be used to display the main content above the menu within the source code of the page. Again, we are implementing this because a search engine prioritises the text that is higher in the source code.

5) Text Links

Underneath the main content of the page I have added text links to each of the main menu items.

It’s important to include these text links because a search engine can not read the links that are listed in the main solpart menu as these links are surrounded by javascript.

By including text links, it allows the search engines to easily gain access and index all of the pages within our website.

Within the source code, we want to place these links below the main content, but above the solpart menu. This is so that the search engines prioritise indexing this content.

6) Copyright, Terms and Privacy Statement

We will place the Copyright, Terms and Privacy statement underneath the main solpart menu, within the source code. This information is not important for the search engines to index, therefore we will place it at the end of the source code.

Content Panes and Layout

When first creating a skin, I create a skin with the minimum number of content panes (areas where you can add modules to the page). This is so that it doesn’t over complicate the skin design process. Once I have created a fully working skin I tend to add further panes as I need them. At this stage we will design a skin that just uses a Top Pane and a Main Content Pane.

Table Layout

To simplify this tutorial, we will create this skin using tables rather than CSS (Cascading Style Sheets).

From our skin template design let’s begin by outlining where the tables will occur:


 

From the red lines, you can see the table structure that we need to create. The actual table structure will be slightly different when we actually create the skin as we will be using a “table trick” but this gives us an idea of the table structure we need to create.

Export the Images

Before creating the skin, we need to export the images that we require for our skin from this template. The main objective here is to create images with the smallest possible file size. This is to reduce the overall page load time for the visitors of your website.

We only need to export two images.

The Menu Gradient

The Copyright, Terms, Privacy Statement Image

We will also export this image. In this case we only need to export an image that is 5 pixels high (We will repeat the image vertically) and 770 pixels wide (The full width of the skin).

We will also use this image as the header to the containers for the main content.

This image is only 458 bytes in size.

Company Logo

It is also worth stating here that we do not need to export the logo for the creation of the skin as you add the logo through the Admin Menu / Site Settings in your DotNetNuke portal. But, you should ensure that your logo is fully optimised to the lowest file size possible. The Vortex Music logo here is just 8.84Kb.

 

---

We are now ready to begin creating our skin. The first thing we need to do is setup our computer ready for skinning.

Part 4 - Setup preparations for skinning

---