2.4. Adding Pages

To add a page, use the add item menu for a folder:

After clicking to add a page, you'll see the edit page panel:

The Title and Description fields are there at the top. The usual comments apply to them: Enter a title as you wish; Skip the description if you want. There is a Related Item(s) field at the bottom, also a standard input you needn't worry about until you find a need for this functionality.

The middle panel, for body text, is where the action is for pages. The software used for making Pages in Plone, generically called visual editor and specifically a tool called kupu, is a most important feature allowing you to do WYSIWYG editing. WYSIWYG editing -- What You See Is What You Get -- is the normal way word processing software works. When you make a change, such as setting a word to bold, you see the bold text immediately.  When you add an image, after uploading, it appears where you put it. When you right-align a paragraph, it immediately shifts to the right.

Underneath the middle panel you see a link for Edit without visual editor. This switches out the visual editor (kupu) panel with a simplified edit panel for entering plain text or structured text or restructured text.  Plain text is just that: no frills text.  Structured text and restructured text are "languages" that allow you to embed styling codes within text, with structured text being the simpler of the two.  These are worth learning for speed of input if you do a lot of page creation, or if you are adept at such slightly more geeky approaches.  We'll continue here with how to take the typical approach: to use the visual editor (kupu) tool.

Watch a video on using the visual editor to edit the body text of a page.

We will assume here that you understand how to use basic word processing software.  There are a few web-specific things in the icon menu, but you'll recognize most as basic standard features:

Basic Formatting

For setting bold, italics, subscript, and superscript, select a word or phrase and click the appropriate icon.

Alignment (Justification)

For justification, place the cursor in a paragraph (you don't have to actually select the whole paragraph) and click the appropriate icon for left, center, or right justification. You may also select multiple paragraphs to apply the same justification across several paragraphs.

Numbered and Bulleted Lists

Numbered and bulleted list formatting are applied to paragraphs by first selecting the paragraphs, then clicking one of the icons.  You may set formatting such as bold, italics, subscript and superscript to individual words or phrases before or after setting the paragraphs to a numbered or bulleted list.

Definition Lists

Definition lists are ideal for items involving a word or phrase associated with a paragraph, such as a list of butterfly groups and their descriptions.

Here's what a definition list looks like:

Swallowtails

Family Papilionidae - Swallowtails derive their name from their split long tails. These butterflies are among the largest and most graceful.

Skippers

Family Hesperiidae - Skippers derive their name from their characteristic rapid darting flight.

The steps to create a definition list are a little involved. Follow these steps:

1. Put your cursor on a new blank paragraph where you want the definition list to go.
2. Click the definition list icon.
3. Type the first word or phrase. The word or phrase will be left-aligned and will be in bold.
4. Hit the Return key (Enter key) to make a new line.
5. Type the definition. You will see that the formatting is normal and that it is now indented.
6. Hit the Return (Enter key) to make a new line.
7. Repeat 3 - 6 to add new words or phrases and definitions.

Important: When you are finished with the last definition, you have to hit the Return key twice to go back to normal formatting. If you don't, you'll be stuck adding to the definition list.

Blockquotes

Blockquotes are a special kind of paragraph indentation that has a visual style clearly setting it apart from other, normal paragraphs. This formatting style is useful for quotations, hence the name, but can also be used for stylized indentation like this:

indentation level one

indentation level two

indentation level two

indentation level two

indentation level one

indentation level two

indentation level three

indentation level three

indentation level two

indentation level one

To accomplish such blockquote formatting, have your cursor on a paragraph and click either of the blockquote indentation level icons.  You may also select multiple paragraphs to change indentation level for a block.

Images

Images may be uploaded directly to a folder [LINK] and then inserted into a Page.  But Plone's Page editor allows you to insert images as you write, as a more natural creative process.  To add an image, put the cursor where you want the image to appear and click the image icon (tree icon).  You'll see the following image insert panel:

The insert image panel shows clickable links in the left column that will show different sets of images already uploaded to the Plone web site. Home is the "root" of the entire website (akin to clicking the "c: drive" on a Windows PC or "MacIntosh HD" on a Mac). Current folder is just that, the folder where you are adding the new Page. My recent items and Recent items show list of images that have been added to the Plone web site already, no matter where they are located. 

Normally you will just click Current folder so you can upload the image to be inserted.  We will assume this is the case, and you will see the following panel:

There's the Upload link you need to insert your image.  Click it and you'll see a familiar file selection dialog box on your local computer, like this one on the Mac:

Here, the file selection dialog has been used to select a folder named "family" on the local computer.  Any of the images could be selected for upload, and then the image would be transferred up to the Plone web site and -- here's the nice part -- it would also appear within the Page being created, already linked in properly.  This is the sort of thing you have to try to appreciate, but it is one of the most important operations you can learn for creating pages on a Plone web site.

Watch a video on adding images to a page.

Internal Links

Select a word or phrase, click the internal link icon, and the insert link panel will appear:

You use this panel by clicking on Home or Current folder to begin navigating the Plone web site to find a folder, page, or image to which you wish to make a link. In the example above, a page named "Long-tailed Skippers" has been chosen for the link.  After this panel is closed, a link to the "Long-tailed Skippers" page will be set for the word or phrase selected for the link.

External Links

Select a word or phrase, click the external link icon, and the External link panel will appear:

Type the web address of the external website in the box starting with http://. You can click preview if you need to check the address.  If you paste in the web address, make sure you don't have duplicate http:// at the beginning of the address. Then click ok.  The external link will be set to the word or phrase you selected.

Tables

Tables are handy for tabular data and lists. To add a table, put your cursor where you want it and click the add table icon.  You'll see the add table panel:

Setting rows and columns is straightforward. If you check the Create Headings box you'll have a place to type column headings for the table.  Table class refers to how you want the table to be styled. You have choices such as these:

Here are examples of these table styles:

listing:

 After the table has been created you can click in a cell to show table resizing handles and row and column add/delete icons:

In the table above, the cursor has been placed in the "Special Leader" cell, which activates little square handles around the edges for resizing the entire table.  It also activates add/delete icons for the current cell, the "Special Leader" cell.  Clicking the little x in the circle will delete the entire row or column that contains the current cell. Clicking the little arrowhead icons will add a row above or below, or a column to the left or right of the current cell.

HTML Editor

The HTML Editor is available to people who want to edit the actual HyperText Markup Language code, which web browsers use to describe web pages and web site. Learning HTML basics lets you do special things, but it isn't necessary for typical use.  If you click the HTML icon you'll see a panel with the actual code, which you can edit, and then close the panel to get back to the WYSIWYG view.

Styles

The Styles pull-down menu lets you set the style for a selected block of text.  Here are typical choices:

Normal is for normal text.  Heading is usually bold, a slightly larger font, left-aligned, and with a single horizontal line extending across the page.  Subheading is usually bold, an intermediate size font, and left-aligned. Literal is useful for quotes and for lining up text precisely, as with programming language code. Literal text is monospaced text set off by a box:

programming language code:

class SortAdvectionVelocities
     ___init__(self, advectionVelocities):
          this.advectionVelocities = advectionVelocities

     sortVelocities():
          this.advectionVelocities.sort()

or columns of numbers:

   location        velocity
   --------        --------
   vector a        21.7
   vector b        15.4
   vector c        48.3
   vector d        38.2

You could also use a table for such data.

Zoom

The zoom icon expands the edit panel to take up the full browser window.  Click the icon again and it will toggle back to the normal edit panel size.

Next: Adding Files Previous: Adding Images