Adding a new page
Note the Add new... menu on the far right of the green taskbar. Click on it, and choose Page from the drop-down menu.
Now you are on the Add Page screen. There are three main elements to consider when creating a new page:
- Title: Appears at the top of the page as the main heading.
- Description: Appears as bold text, just below the tile.
- Body Text: The contents of the page.
Note
The Default, Categorization, Dates, Ownership, and Settings tabs that appear above the Title field are used to provide additional metadata about the content item, and to change settings such as whether to allow or disallow comments. These functions will be covered in subsequent chapters of this book. For now, you can ignore these tabs.
Title
A page's Title field fills two important roles. Firstly, the title acts as the heading for the page, appearing both at the top of the page as well as in your web browser's title bar. Secondly, the title is used to generate the URL, or web address, for that particular page. For example, if the page title happens to be "The Cascade Mountains", the web address that would be generated would be http://www.mysite.com/the-cascade-mountains .
Keep in mind that the Title is a required piece of information. You cannot create a page without it. If you try to navigate away from the Add Page screen without providing a title, Plone will prompt you to create one.
Description
The Description field also serves several different functions. Firstly, the description appears in bold text, immediately below the Title, and above the Body Text, when the page is viewed. Secondly, when using the search tool included with Plone, the search results will be displayed with the Title first, and with the Description immediately after the title. The Description is also used in other listing views that Plone generates.
Finally, Internet search engines such as Google will generally pay a lot of attention to the text you put in the Description. So writing a succinct and accurate description of your content will help greatly with SEO (Search Engine Optimization). The description is not a required field, but it is quite useful and you should get into the habit of using it.
Body Text
The Body Text field is where you'll put the main content for your page. This is where you will add hyperlinks, images, headings, tables, and other content. Note that there is a toolbar with several icons at the top of the Body Text section.
You probably recognize many of these icons from using popular word processing programs. You can hover your mouse pointer over an icon, and the name of the icon will appear. These icons represent the formatting tools available to you in Plone. Some of the functions you'll find in the toolbar include:
- Creating headings and subheadings
- Creating numbered lists and bulleted lists
- Formatting text
- Creating hyperlinks
- Inserting images
- Inserting tables
Go ahead and start typing some text into the Body Text field. Once you have entered a few lines of text, try some of the formatting tools. Highlight some text and click on the style drop-down menu (which defaults to Normal paragraph) and select Subheading.
You've now created a subsection for the page. The following screenshot is an example of what this might look like:
Using the formatting tools
There are several tools included in Plone that allow you to format paragraphs and characters of text. You can find these controls in the toolbar of the Body Text field. To format some selected text, simply highlight it by holding down your left mouse button and dragging the highlighted area over the text that you want to format, and then clicking the icon or selecting the menu item of your choice. In this section, you'll learn how to use the various formatting icons and the style drop-down menu.
The bold and italics buttons (shown in the following figure) allow you to do very simple text formatting. Both are used to highlight important text, but on the web, bold is used far more than italics. Italics are often used to communicate a note or suggestion to the reader, whereas bold is typically used for emphasis, and to assist the reader in scanning the page.
To use the bold formatting, highlight some text and click the B icon. You can also remove the bold formatting by highlighting some bold text and clicking the B icon.
To use the italics formatting, highlight some text and click the I icon.
By default, any text entered in to the Body Text field is left aligned. Center align will center the text in the middle of the page, and right align will shift text over to the right. The alignment icons can also be used to set the alignment of images and tables. The left, center, and right alignment icons are shown in the following figure:
Use the list icons (shown in the following figure) to create ordered and unordered lists on a page. Start by separating each list entry with a simple line break (press Enter once). Then highlight the entire list and click on either the numbered or the bulleted list icon, depending on the type of list that you want. If you want to add more entries to your list after it's been created, simply position your cursor to the right of one of the list lines and press Enter once. This will create a blank list line in which you can type additional content.
Note that when you choose to use a numbered list, a new drop-down menu appears to the right of the style drop-down menu, so that you can choose the style of numbering, as shwn in the following screenshot:
This drop-down menu allows you to choose Arabic numbers, uppercase Roman numerals, lowercase Roman numerals, or uppercase or lowercase letters for your numbered list.
Sometimes, you may find that you want to define several terms on your web page by creating a glossary listing or a simple dictionary. Plone provides you with the definition list icon (shown in the following figure) to help you accomplish this:
Start by typing the first term in your definition list. Then highlight it and click on the definition list icon to activate definition list formatting. Next, press Enter once and the next line getting automatically indented. Use this line to provide a definition for the term. Press Enter again to move to the next term. When you are done with your definition list, press Enter twice to end the definition list formatting.
In Plone, indentation (also called quote level) implies more than simple paragraph indentation. Use it for quotations, for excerpted text, or for an easy way to call attention to important text such as a tip or a hint. Simply highlight the text that you want to indent and click on the indent icon (the one with the right-facing arrow, shown on the right in the following figure). Each quote level will place a blue vertical bar to the left of the text to separate it from normal paragraph text. There is also an icon for reversing the indent formatting (the icon with the left-facing arrow).
The indent tool also allows you to create several levels of indent to create an interesting visual hierarchy. Each time that you click on the indent icon you are adding another quote level. Take a look at the following example:
The styling of the indented text can be modified using CSS, which we will discuss in Chapter 17.
The style menu is the drop-down menu located just to the right of the HTML icon, and is a very useful formatting tool in Plone. The Normal Paragraph style (shown in the following figure) is the default style when you start typing text into the Body Text field of a page, but you also have several other choices.
As with all other formatting, simply highlight the text that you want to format and select the desired style from the drop-down list menu. Here's a quick summary of Plone's default styles:
- Normal Paragraph: If you want to revert some formatted text back to the default paragraph style, choose this option.
- Heading: This creates a heading of the same size as the heading generated from the Title field of the page. However, when you apply this style, you also get a blue horizontal line just under the heading. Use this to start a major new section on the page.
- Subheading: This creates a subheading, which is smaller in size than the Heading style. Use this to create subsections on your page.
- Literal: This style is useful if you want to display mathematical formulas or lines of computer code. It's a good way to offset content that must be read "literally" from other content that may have stylistic components.
- Discreet: This will render the text with a grey color, and slightly smaller than Normal Paragraph. It's useful for notes to your site's visitors that should sit lower in the visual hierarchy than other styles.
- Pull-quote: This style will right-align the text, color it orange, and also apply the same vertical blue bar that you saw in the indent or Quote level style. Pull-quote is useful for leaving notes to your site's visitors, such as a "see also" note, or for giving useful tips.
- Call-out: This is similar to Pull-quote, but is not right-aligned, but is slightly indented. This can be used for emphasis or for leaving notes to your site's visitors.
- Page Break: Not a text style as such, Page Break is used if you want to control where page breaks should be, for the purpose of printing. You don't need to select any text to apply this style to; simply use it between the lines of text where you want the page break to be. This is useful if the page you are creating is to be printed, and you want to make sure that the sections are split across pages.
- Clear Floats: This calls a CSS style that removes floats of the selected element. This is useful for removing text wrapping around an image, for example.
- (remove style): Use this if you want to remove a formatting style. Note that when you use this feature, the text will revert to
<no style>, and not back to Normal Paragraph.Note
All of the above-mentioned styles are considered paragraph styles, which means that the style will affect the entire paragraph, and not just the text that you've highlighted. For example, if you have a paragraph of text and you highlight only the first few words and choose the Subheading style, all of the text in the paragraph will become a subheading.
- Highlight: This puts a yellow background color behind the text. Highlight is a character style, which means that it can be applied to any length of text, and not just to whole paragraphs. This style is the only default character style that comes with Plone, but eventually you'll learn how to create your own custom styles.
Saving your work
It's a good idea to save your work from time to time, especially when you've been working on a page for a while. At the bottom of the Add Page screen, you'll see two buttons: one is Save and the other is Cancel. Save will complete the page creation process, while Cancel will abandon it and the current work will be lost.
Once you've saved your work, you should see a confirmation message just above the title, to let you know that the page was successfully saved, as shown in the following screenshot:
Also note that your page title now appears in the navigation tabs along the top of the screen, below the Plone logo, assuming that you have not modified how the tabs at the top are rendered.
