This article is the second in a series that’s dedicated to providing help tips and tricks for working with our online content editor.  If you missed the first article, you can view it here: http://blog.port80solutions.com/?p=220.

You can dramatically reduce the time it takes to manage and format content on your web pages with a bit of planning and the careful use of TABLES. The idea is that you want to group chunks of text that are going to be formatted the same way into their own “container” – in this case, a table cell. While tables are not the preferred way to lay out content, they can come in handy particularly for novice content editors who have used a word processor before but have limited experience with web page publishing and HTML.

Outside of the usual branding (logos, banner images and navigation menus), a typical page content consists of the following items:
1. A main heading
2. One or more paragraphs of content mixed with images and links
3. one or more links to a supporting resource file, social media sharing, etc

This is simple enough to build with a table, after a bit of planning.   We’ll create a table with three rows and a single column, laid out like this:

Layout of a typical article post

To add a table to your content, locate the icon in the editor toolbar. The following image shows how we’ll configure the table.  If you know the exact width of the table, you can specify the size in pixels.  Otherwise, choose 100 percent so that the table will fill its page region.

Configure table layout

TIP: Some browsers will show a faint outline of the cells so that you can see where your content is in relation to the rest of the table.  If yours doesn’t show the outline, right click on the table and select Table Properties, and then set the border size to 1.  This will outline the cells for you.  It’s best to remove the border when you’re finished by going into the Table Properties again and setting the border to 0.  The default border style just isn’t very attractive.

Now we’re ready to populate our content.  Simply type the heading text into the top row, enter the main body of the content in the middle, and put any supplementary links or information in the bottom.

Now we have our content but it needs a bit of dressing up.  We can apply styles or other formatting as usual by selecting the text and assigning the desired style or applying colours, bolding etc.  Since each “chunk” of text is isolated in its own table cell, it’s easy to select only the text we want and make changes without it affecting anything else, and future updates will be that much simpler.

We can add more rows to the table once we have new content.  Simply right click on the bottom row and choose to add another row after the current.  You can add as many as you want, however if subsequent posts require different layouts it may be best to just add another table underneath with its own set of rows and columns.

The DIV element

A DIV is a simple block-level HTML container, which is just a fancy way of saying that it will take up an entire line (or lines) and will be separated from content above and below it.  They essentially act like a table cell, but without the table, so there’s consequently a lot less HTML markup code required.

By default, the content editor will automatically place your content in a DIV container, and create a new one when you press the ENTER key.

TIP: If you’re working on content within a DIV container, and you want to add some line spaces but keep the content in the same DIV (so that it’s easier to format the content together all at once), press and hold the SHIFT key when pressing the ENTER key.  This will add a simple line break rather than creating a separate DIV for the next line of content.

Want to see how your content is constructed as far as the HTML markup is concerned?  Click the Show Blocks icon  and a faint outline will appear around each block level element.  Your content should be organized so that similar formatted content are grouped together in their own blocks.

Summary

It’s important to isolate sections of content into their own HTML containers so that you can accurately apply formatting to each section.  Isolating the content also means that it’s much easier to avoid inadvertently formatting neighbouring content – for example applying a Heading style to the heading portion of the text only instead of the article text.  An easy way to isolate content is through the use of TABLE and DIV elements.  TABLE elements give you a bit more control over what content appears where, but it also produces much more HTML code which can make it harder to read and manage.  When in doubt, use the Show Blocks icon to see how your content is being laid out, and adjust from there.

One of the most common complaints about working with an online content editor is related to problems that arise when formatting content.  Common formatting commands such as bolding/underlining text, applying a style, or creating and deleting list items all can have unexpected results which include, but are not limited to:

• Structure and layout changes – blocks of content shift up or down the page or disappear entirely
• Selection expansion – applying a bold format, or a colour affects more text than what was selected
• Pasted content appears differently than in the original source document

For the most part, these problems can be traced back to how formatting is interpreted by the web browser.  Every time you apply a formatting command to a piece of text, it is wrapped in an HTML tag that defines the formatting to apply, and the beginning and end of the formatting.  For example, this is underlined is actually generated through the following markup: <u>this is underlined</u>. There are many different tags that are available to achieve formatting such as bolding, underline, colours, fonts and more.

When a block of text has more and more formatting applied to it over time, the code behind the scenes can get quite messy and this is usually where the trouble begins.  The problem can be exacerbated when content is pasted in from another source, such as a Word document, as the source’s proprietary tags are usually included though they are not applicable to the web.

The word content brings with it a LOT of invalid and unnecessary code. This makes it difficult for the browser to interpret and near impossible for a user to read.

Working with “clean” content:
Sometimes if the content is too difficult to work with, the best thing to do is cut it out of the editor, and then repaste is using the Paste as Plain text icon.  You can also paste it into a text editor such as notepad, which will strip all the formatting from it, and then paste it back into the editor.

Once the content has been reduced to plain text, then apply the formatting but try to keep it to a minimum.  For example, if you have a heading, a main paragraph of text, and a link which will all be using the Verdana font in various sizes, apply the font format to the entire block of text, then adjust the sizes individually rather than changing the font and size for each part.  This will reduce the amount of formatting applied, which will make it easier to manage later.

Here is the source code after it was re-pasted as plain text and then formatted. Much cleaner!

Play the video below to see a brief walk through of how to successfully paste and format the content.

In the next article, we’ll discuss how to isolate chunks of content using the TABLE and DIV elements.  Stay tuned!