Editing a Page - Step by Step

Good Practices

So, we've covered all you need to know to create a webpage. Let's now look at one or two of the things that can make the difference between a good webpage and a poor one. These points apply to most CMS, not just Mara. You may be familiar with this information already, but it does no harm to repeat it.

Creating a well-presented webpage is actually quite easy. An issue often encountered though, is that there are several ways of doing various tasks, some right some wrong. It's not always obvious which is the right way, but choosing the wrong way will lead you endless aggravation, and a waste of hours of your time on a task that should have taken minutes. 

Also, webpages are not Microsoft Word documents. So, if it seems like this doesn't work right because it doesn't do what Word would do in the same circumstances... then that's because it isn't meant to. As they say, our turf, our rules.

The same principles of good writing style apply as in any wordprocessor though, and also apply to just about any CMS. So although not Mara-specific it's worth covering a few here.

Use the supplied styles

This might seem like anathema to someone who's just raring to create an original work of art, but the principle behind websites is that the styling information should be separate from the text. So, instead of applying fonts, colors or the like to individual words, you should use only the supplied styles when writing text. The reason this is not as restrictive as you might think, is that you can modify those styles in the stylesheet.  In fact you can modify them to such a degree that they look nothing at all like the standard styles. So in fact you're not restricted by working this way. As you'll soon find, it's a much easier way to work, and gives more consistent results.  

Although we've left the text color and background controls in place because they can occasionally be useful, these should only be used sparingly. The font controls we've removed, because they are never needed on a properly designed website, and simply invite the making of an unholy mess.

If you want to use custom fonts for specific items, then this is done in the Theme.  Here we use small capitals for headings, for example.

Document sections

Chances are that you'll want to split your text into sections. Some of these sections may need headings.

To create a new paragraph, just press Enter.
If you want to go to the next line without creating a vertical space,  then hold the Shift key and press Enter.
This creates a Newline or Break, which is not actually a paragraph.

We advise that you do use paragraphs to demarcate your text sections. If you don't like the way paragraphs are spaced apart -Perhaps you prefer the arrangement used in some books where paras are only indicated by starting a new line- you can adjust this for the whole website, in the Theme. The advantage of doing things this way is that you achieve a consistent result. 

An important point is that Paragraphs act as styling boundaries, but Breaks do not. Therefore do not be surprised if you (for example) change the text size and it applies to a larger text area than you expected.  The spacings are probably made with breaks rather than paras.

Responsive Design

Everyone's heard of responsive design and basically it just means that  your webpage which looks so good on that 28" desktop also needs to display acceptably on smaller screens. Exactly how small is a matter of opinion, but to cater for basic phones it should work down to 400 pixels wide or so. If you're not so worried about small phones but want to cater for tablets, then 800px would be OK as a minimum. Responsiveness itself is something which is designed into the Theme; however if you include items in your pages which simply cannot be displayed on small screens then no matter how carefully the theme was designed, that will break the responsiveness of your site. You need to bear this in mind when editing your site.  A page is only as responsive as its least responsive element.

The best way to check your pages is to use the developer edition of Firefox, which has a handy tool under Tools > Web Developer > Responsive Design View.

Theme css can be set to shrink oversized images provided the size has not been forced to given value. Tables with fixed widths are another item which cause problems in this respect. Sometimes you simply have to set the width of a table to a fixed value in order to display the contents acceptably. However, bear in mind that such tables may be a problem for mobile viewers.

Layout features

Headings

You will probably want to put headings in large text on sections, and the natural instinct will be to type some text then reach for the text size controls. Don't! Instead, use the Paragraph Format control in the toolbar. Heading 1 is very large and should typically only be used at the page top, and for descriptions of no more than a few words. Heading 2 is smaller and can be used for subsections. And, so on. For most documents, headings 1 to 3 are enough, but there are six levels if needed.

You'll notice that headings are spaced from the text above and below,  and in some cases you might not want that. In fact, a good-looking style is to have headings that are immediately above the text they refer to, but spaced from the previous text. Again, don't try to force something of this kind by improvising. Just accept for the moment that headings look the way they do. We'll see later how to change the way they look. 

A limitation of headings is that they can only apply to a complete line. There is no way (in standard HTML anyway) to add smaller text to the right of a heading.

Indenting

You might also want to indent your sections from the lefthand margin. The right way to do this is to use either the indentation or blockquote tools. The wrong way is to rattle the spacebar.

You'll notice that if you use the right approach (in this case a blockquote) then when you add more text the following lines will match. No problem. Even to the extent that the image fits the indent. Doing things right... makes the job easy.

Lists of items

If you need to have a bulleted or numbered list, just type the items normally on separate lines:

First Item
Second Item
Third Item

Now drag the mouse over your list, and press the Unordered List, or Bulleted List button.

It should now look like:

  • First Item
  • Second Item
  • Third Item

You'll notice that the list has been indented, and I didn't add the bullets. The system did. Again if you don't like the way it indents or whatever, here in the editor is not the place to change that. You change it in the stylesheet. Although, you can select one of several bullet types by right-clicking.

Tables

To create a table, use this button.

The main point about tables is that they should only be used where informaton needs to be presented in a, well, tabular layout.  In days gone by, designers used tables to position virtually all of the content on the page. These days there are better ways of doing that, and one of the problems of tables is that they often won't fit on the display of vertically-held devices like phones.  Thus, if you need a table of your team's league results or whatever, use one.  Just don't use tables to lay your page out.

Text styling

You can use the text styling controls as you wish, but bear in mind my caveat, that these should not be used to create pseudo-headings or the like. Use the proper heading controls instead.

Text size and colour

These controls have been left in because they are sometimes useful. For the most part they shouldn't be used though. The problem with using them is that it is almost impossible to use them consistently, and coloured text which varies on colour from one instance to another (or which varies in size) looks very unprofessional. 

The font controls have been removed. Basically, it is extremely bad practice to set fonts in pages, and I can see no reason to have them. If you want them back though, the menu items are defined in ck_config.js.

Seeing what's happening

Sometimes it's possible to end-up with a confusing situation where things just won't seem to line-up right. The reason often isn't apparent on the graphical display, but if you could see the region boundaries in the page, then you'd probably realise rightaway why things aren't happening the  way you want, and how to fix it. Well, you can.

Edit Source, and Show Boundaries buttons

These two buttons allow you to view the actual markup used in the page, The first shows it in a separate window, and is mainly of interest to advanced users. The second shows it on top of the page text, indicating which text is inside which boundary. This is incredibly useful. It does cause the page to 'spread out' slightly, but that's only while the feature is live.

So, that's a basic rundown on using the editing tools. There is more help on using CKEditor at ckeditor.com