By Lee Sykes
April 2006
This tutorial outlines what not to do when working with the Text/HTML module. We then outline the methods that you should use when adding content to the Text/HTML module.
This is a list of practices we have come across when beginners first use the Text/HTML module which you should try to avoid.
Pasting content from Word
It is good practice to write all of your text for a website in Word to check for spelling and grammar. The problem occurs when you copy the text from Word and paste it direct into the text editor within the Text/HTML module.
This is because Word adds its own junk HTML to the text. It creates very bloated source code which means that your pages will have a much larger file size than necessary.
The key rule of thumb for today’s web design is to separate the content from the presentation styles.
To work around this, copy the text from Word and then paste it into Notepad. Notepad automatically strips any of the Word formatting. Then copy the text from Notepad and paste it into the text editor within the Text/HTML module.
Within the FreeTextBox editor there is an option for pasting content from Word which strips most of the bloated code, but I have found that pasting into Notepad guarantees that all excess code is completely stripped.
If you are working with the FCKEditor, there are options for pasting from Word or Notepad so the editor automatically strips the excess HTML code for you.
This is a section of text copied from Word to demonstrate the excess HTML code that it creates.
Using font tags - formatting using the text font, colour, size and highlight options
The first thing most users reach for when adding text to the Text/HTML module is the font drop down list.
This is bad practice because it adds masses of <font> tags to your page.
The key rule of thumb for today’s web design is to separate the content from the presentation styles.
You should aim to place all of the text styles that you require within your skin.css file as separate classes.
You should set up a main default font size for the text, so that for the majority of the
This will reduce the size of your pages, improve page load time for the visitors to your website, reduce your bandwidth costs...
content, all you enter is text within the Text/HTML module, and when you click on update it is presented in the correct size. (This is usually set using the Normal class.) (We walked through this in the previous skinning tutorials from issues 5 & 6 and issue 7.)
If you require additional text styles such as text for quotes or code examples, add these styles to the skin.css file and then call the class from the Text/HTML module, as you can see in the example below.
This will reduce the size of your pages, improve page load time for the visitors to your website, reduce your bandwidth costs, and also allow for easily making alterations to the style of your website at a later date.
For instance, supposing you have styled quotes across your entire website using <font> tags. When it is time for you to change the look of your website, you will have to manually edit every single page to change the style of the quotes. Whereas if you have specified a class for each of your quotes, all you have to do is change the styles of the quote class in your skin.css file and it changes the styles for all of the quotes across your entire website.
So for any text styles you need, take the time to create them as different text styles within your skin.css file. It will save you weeks of work when you want to change the style of your website at a later date.
Adding tables
I do not wish to start a tables / CSS layout debate here, but here goes!
If at all possible, avoid using the table function within the Text/HTML module editor to manipulate the layout of your text and images. Only use tables when you need to present data in a table format (the job it was originally designed for).
You do not need to use tables to place an image on the left with a caption and text on the right with the next paragraph of text beginning directly underneath the image. This can be created directly from classes within your skin.css file and can vastly reduce the amount of HTML code produced.
The old table method:
Actual table design:
The CSS class method is below. Note that there are no layout sections of code within this. All that it contains is the main text content and image.
You can see from the above two sections of code that by specifying CSS classes for the layout it completely reduces the amount of code required. This also makes the main content more accessible to search engines, screen readers etc.
Other recommendations: Change the Text Editor
I personally always change the default text editor that comes as standard with DotNetNuke® from the FreeTextBox to the FCKEditor.
The FCKEditor produces valid XHTML code. I also find the FCKEditor to be more reliable, stable, and it also has some good extra functionality over the FreeTextBox.
Here you can find out further information and watch a video on installing the FCKEditor to DotNetNuke.
Conclusion
If you follow the methods outlined here for adding content to the Text/HTML module it will:
- Reduce the size of your pages
- Improve page load time for the visitors to your website
- Reduce your bandwidth costs
- Forward Compatibility – any future style alterations or browser compatibility tweaks can easily be made from your skin.css file which will affect all of your pages, rather than manually editing all of your pages one at a time.
- Accessibility – Only adding content into the Text/HTML module will allow the content to be more easily accessible to screen readers, search engines etc.
To learn how to create classes in your skin.css file for styling the text and images within the Text/HTML module as we have outlined here, view this tutorial:
Styling text and images within the Text/HTML module using the skin.css file and the FCKEditor.
The tutorial in particular demonstrates how you can programme the FCKEditor to display a list of the classes you have created within your skin.css file. This enables you to easily select from a drop down list the class style that should be applied to your content. |