Developing Content for the new web site using Drupal and FCKEditor

The purpose of this document is to provide you with enough information so that you can begin to develop content for the new web site. It won’t make you an instant expert, but it will help you through the basics.

You will have lots of questions. When you run into something that you don’t know how to do, try it – briefly. If you can’t figure it out, then ask for help. This will save you a lot of time and frustration.  This forum, HOW TO DO IT, is one way to communicate and ask questions.  As you learn, you may find that you can answer some other people's questions.

Every new tool set has its learning curve. Do you remember your first days – months – years with Word or Excel?  We are learning together. Let’s talk about the issues and resolve them.

The language of the web: HTML – Hypertext Markup Language

The web is built using a language called HTML.  It enables all of the features we expect on a web page, especially the ability to go to, or "link" to another web page by clicking a "hyperlink," often shown in color and/or underlined.  On our site, the color for a link we have not yet visited is orange, and turns green once we have visited the site.  You may be used to seeing the links as blue and underlined, but that is not the way our site was designed. 

Web pages must work on a variety of browsers and screen sizes. However, because the browsers are not 100% consistent on how they were built, there are differences. You must test your pages at least on Microsoft Internet Explorer V7, and should test on Firefox V2.  All pages must look correctly on Internet Explorer V7 and a screen size of 1024 x 768.

How do we "write in HTML?"  For the most part, we don't.  We use an editor to do the dirty work of translating from something that we want to see to HTML.  This is the job of a WYSIWIG, or What You See Is What You Get editor.  FCKEditor is the WYSIWIG editor we use.  It assists you in creating the HTML for your page, but because of differences in browsers and styles, the only way to see how a page will look is to Submit the page and then view it.  We hope we can make some improvements here.

Some points you need to ponder when editing a page

Here are some issues that others have found where HTML is different from what you might be used to in Microsoft Word or Publisher.

  • There are no rulers or tabs.  In order to space things out, you can use spaces (repeatedly using the space bar) or tables.
  • Tables are very flexible ways to put content where you want, but they must be used with care.  Think of a table as a something like a spreadsheet.  We have used tables in many places to position content horizontally or vertically.
  • In HTML, text is "marked" with "tags" to show how it will be formatted on the page.
  • The FCKeditor shows features as they are commonly displayed.  Unfortunately, or fortunately, our site is not common, so some features are shown differently.  In the Format box, you can choose among a number of "text types."  The editor shows them as they might be rendered, but not exactly the way we render them.  You may need to select a Format and then Submit the page to see how the feature looks in our site.  This also applies to features like hyperlinks which the editor shows in blue, but we render in green or orange.
  • Content is enclosed in tags. FCKEditor will add tags as needed.
    <b>This is bold text</b>
    <i><b>This is bold and italic text</b></i>
  • HTML ignores <return> and multiple spaces – these must be specially added (often done by the editor and Drupal, but may not be the way you want)
  • Hyperlinks – the <a> tag – allows you to link to other pages on the web – anywhere!  Anchors (also uses <a>) are used for linking to a spot on a page.  If you want to set up a hyperlink to another page in Drupal, you must use the Insert/Edit Link tool, shown as a globe with a chain link.
  • If you want to upload a file and link to that file, you can upload the file and then hyperlink to it while in FCKeditor. For example, if you want to upload a new PDF file and hyperlink to it.
  • Images are added using the <img> tag
  • Tables allow some more precise placement of text.  See, for example, What We Do > Worship
    BUT – there can be interference between tables and CSS, so use with caution, and ask for help if the rendering is not what you want.
  • Look at “source” to see HTML.  This will become helpful as you look at how html tags are rendered when a page is viewed.
  • Watch For Lingo Or Undefined Abbreviations, e.g. Mont, SPt.  Don't use them.  Spell out terms in full as those new to our site won't understand the lingo.

Remember that you are working on a web site, not on your PC.  If you start to edit a page, and then navigate away from the page without Submitting it, you will LOSE your edits.

The second language of the web: CSS – Cascading Style Sheets

CSS controls the attributes of various tags.  CSS controls the detailed formatting of the content.  It is an alternative to HTML properties that is being used extensively on our site.  You may find that you need to use it to achieve the results that you want.  Ask for help if you can't get something to render as you want.

Drupal Filters

In Drupal, filters are used to make it easier to insert text, and also to make sure that you don't use something that might harm the site.  Filters also prevent some site visitors from damaging our site.  There are a choice of filters, which are selected by choosing an Input Format.  You will see available Input Formats when you edit a page just below the editor window.

  • The default input format is Rich Text.  Use it if it works for what you are doing.  Note that lines and paragraphs are spaced automatically, which is not the way HTML normally works.  It will make your editing life easier.
  • Full HTML may be used when Rich Text won't give you the rendering that you need, such as when you need to specify a style.
  • Use Minimal Filter when you paste a Word document as it does the minimum of formatting.

All three input formats support your including a photo from an album rather than having to upload the photo separately.  If you want to do this, click on the hyperlink "[acidfree:xx] tags" under the input format to learn how to use them.

STANDARDS

  • We have a design that specifies certain type fonts and colors, and placement of objects on the pages.  To comply with this, we enforce the standards using the "input formats."  All documents should use either Filtered HTML or Rich Text to ensure compliance with the standards.  Full HTML should be used only when absolutely necessary.
  • Photos should have enough resolution to display nicely on the screen, but no so much resolution that they take a long time to display.  Aim for a file size of 50kb to 100 kb.  If you have a photo that you want to use, resize it if needed.  If you need a resizing tool, try Image Resizer, a free tool available here

    NEVER change the ratio of height to width as this will distort the photo.

Forums: