Semantic code and header tags within DotNetNuke skins
Putting it altogether
In the previous example we placed text within the Text / HTML module that used H1 tags. This was to provide an example of the various styling options that are available through manipulating your skin.css file.
To follow the actual header layout that we specified at the beginning of the tutorial (figure 12), we need to do the following:
- In the Left and Right panes use the “image header white background H2” container. – This will place H2 tags around the titles for each of these elements.
- In the middle content pane, for the top main article use the “image header white background H1” container. This will place H1 tags around the main article title, enabling search engines to easily index the content of the page based on the topic that you specify in the article title.
- For any further sub titles within the main article, use the H3 and H4 header tags.
- If you wish to add further containers below the main article container, use the “image header white background H2” container so that this content will have the same importance level as the content in the left and right panes.
Your page should look like this:
This is the complete CSS code that we have added to the skin.css file:
h1, h2, h3, h4
{
margin: 0;
}
h1, h2
{
padding-left: 3px; /* to replace the in the container file */
}
/* head class within the h1 tag */
h1 .Head {
font-family: Tahoma, Arial, Helvetica;
font-size: 18px;
font-weight: normal;
letter-spacing: 0.2em; /* demo to show you can have different text formatting */
}
h3, h4 {
font-family: Tahoma, Arial, Helvetica;
font-size: 11px;
font-weight: bold;
color: #000;
margin-bottom: 10px;
} |  |
|
|