You have undoubtedly created folders (directories) on your computer.  On Windows PC systems a hierarchy of folders is often created on c: or d: hard drives, or within a Documents folder.  On the Mac and other systems, folders are created in a similar fashion.  Plone folders are essentially identical, except that they are created on a Plone web site, for organizing content in Plone's built-in storage system.

Folders are added by clicking the add item menu (You need to be logged in to see the add item menu):

After clicking to add a folder, you'll see the folder edit panel, under the edit tab:

Fill in the title, which is required, as indicated by the red square.  The description is optional; you can always come back to the edit panel if you need to add a description of the folder.

Watch a video on adding a folder.

What's in a Web Name?

The titles of content items, including folders, images, pages, etc., have no restrictions -- you can use any keyboard characters, including blanks. Titles, however, become part of web addresses.  Web addresses, also known as URLs (Universal Resource Locators), are what you type in a web browser to go to a specific location in a web site (Or, you would click your way there), such as:

www.mysite.com/about/personnel/sally/bio

www.mysite.com/images/butterflies/skippers/long-tailed-skippers

Such web addresses do have restrictions on allowed keyboard characters, and blanks are not allowed. Plone does a good job of keeping web addresses correct by using near-equivalents of the titles we provide, by changing into lowercase and by substituting dashes for punctuation.   To illustrate, let's take each of these two web addresses and split them out into their component parts:

www.mysite.com/about/personnel/sally/bio
^ 
website name
               ^ 
               a folder named About
                     ^ 
                     a folder named Personnel
                               ^ 
                               a folder named Sally
                                     ^ 
                                     a folder named Bio

In this first example, not much was needed: Plone changed each folder title to lowercase, e.g., from Personnel to personnel.  You don't have to worry about this. Plone handles the web addressing; you just type in titles however you want.

The second example web address demonstrates how Plone takes the hassle out of web addressing:

www.mysite.com/images/butterflies/skippers/long-tailed-skippers
^
website name
               ^
               a folder named Images
                      ^
                      a folder named Butterflies
                                  ^
                                  a folder named Skippers
                                           ^
                                           a folder named Long-tailed Skippers

As with the first example, Plone simply changed the folder titles into lowercase for web addressing, except for the last one, which is more than one word and contains a dash.  The dash in "Long-tailed Skippers" is fine for the web address, and it remains.  The blank, however, was changed to a dash also.  And the L in Long and the S in Skippers were changed to lowercase.  You need to understand that Plone is doing this for you, but you don't have to worry about it. You would have simply typed "Long-tailed Skippers" for the title and Plone would handle the web addressing. The web address is referred to as the short name within Plone. When you rename something, you'll see the short name along with the title.

These illustrations apply to all content items, not just folders, so when you type in titles, use normal titles that have blanks and punctuation as you wish, but be aware that when you copy a Plone web address for making a link or for sharing with someone, the web address will be a little bit different (which is a good thing -- a necessary fix for web addressing).

Images in Plone are usually photographs taken with a digital camera, but they can also be scanned images, graphical illustrations made with software, and other specialized images.  Let's take the most common case, imagining that you have taken a photograph of a butterfly. 

Digital photographs taken with modern cameras are usually too big to post directly on a website, so they need to be resized.  A typical web site design may have a width of around 1000 pixels. When a photograph comes off your camera, it may be several thousand pixels wide and tall, and several megabytes in file size.  You need to use software on your computer to resize the image to something less than 1000 x 1000 pixels, often just several hundred pixels maximum width. The software you use to view or print your digital photos will often have this resizing functionality, or you may have graphics software such as Corel Draw, Adobe Photoshop, Irfanview, or Gimp on your computer.  Resizing an image, sometimes called resampling, is a standard function you should be able to find in your software, often under the Image menu. How do you know what width, in pixels, to resize your image?  It depends. For a little "head shot" photograph to go in a biography, maybe 200 pixels wide is just right.  For a group photograph, 200 pixels would be too small to allow identification of the people in the photograph, so it would need to be 400 pixels wide. For a scanned map image, perhaps the image width would need to be 1000 pixels for the map detail to be usable.

After saving your resized image, giving it a name that indicates the new size (e.g., butteryfly-resized-300px.jpg), you'll have an image file on your computer. The file format is most commonly .jpg (or .jpeg). Other common formats for images include .png and .gif.  Take note of where you save images on your computer so that you can find them when you upload them to your Plone web site.

In summary, you take your photograph, transfer it to your computer, use image software on your computer to resize your photograph, then upload it to your Plone website:

When you upload an image to a Plone web site, several smaller, supplemental copies of the image will be automatically created, including the smallest, a thumbnail version. These smaller versions are used by Plone when showing images in lists of items in a folder.  The original full-size image is always there, and this is the size that is shown when you choose the uploaded image to be included in a web page.  The rule to remember is that you should resize the image on your computer to the size you want to use on a web page, and just upload it. Plone will make other size copies upon uploading, but normally don't have to think about it; Plone will use the supplemental versions when needed for displays.

When you get ready to upload an image, use the add item menu for a folder (You will only see the add item menu after logging in):

After clicking to add an image, you'll see the edit image panel:

The Title and Description fields (field, as in data input field) are there, as with adding a Folder, and there are two additional things at the bottom. Let's look at the four input items individually:

• Title - Use whatever text you want, even with blanks and punctuation (Plone handles web addressing). 
  
• Description - Always a good idea, but always optional. Leave it blank if you want.
  
• Image - The Image field is a text entry box along with a Browse... button.  You don't have to type anything here; just click the Browse button and you'll be able to browse you local computer for the image file to upload (Remember: You need to remember where you keep your images on your computer).
• Related Item(s) - This is a Plone-specific field that allows powerful association of content items. When you are new to Plone, you may skip this input field.  As you gain experience, you may find a need for making such associations, which help with searching for content. The merits of this field are described at the end of this section.

tab is described in a later section dedicated to managing who can see and edit content.

At a minimum, you will type in a title and browse for the image file, then hit save at the bottom to upload the image to the Plone web site.  You'll have to wait a few seconds for the upload to complete (or a minute or so, if you have a slow Web connection). Plone will show you the uploaded image when done.

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.

Choose file in the add item menu for a folder to upload a file:

You will see the edit file panel:

Click the Browse button to navigate to the file you want to upload from your local computer. Provide a title (you can use the same file name used on your local computer if you want). Provide a description, or select Related Item(s) if you want. When you click the save button the file will be uploaded to the folder.

Watch a video on adding a file.

Example file types include PDF files, Word documents, database files, zip files... -- well, practically anything.  Files on a Plone web site are treated as just files and will show up in contents lists for folders, but there won't be any special display of them. They will appear by name in lists and will be available for download if clicked.

There are specialized add-on tools for Plone web sites that search contents of files. If you are interested in this functionality, ask your Plone web site administrator.

Add a link by clicking the menu choice in the add item menu for a folder:

You will see the edit link panel:

Good titles for links are important, because the titles will show up in lists of links, and because there tend to be quite a number of links held in a folder as a set.  Paste the web address in the URL field or type it in. There is no preview feature here, so it is best to paste the web address from a browser window where you are viewing the target for the link.

Links created in this way will result in discrete content items, as compared to links embedded within web pages.  Having links as discrete items lets you do things like organizing them in folders or setting keywords on them to facilitate grouping in lists and search results.

Watch videos about adding a link for an email address and adding links to external and internal documents.

Use the add item menu for a folder to add an event:

From the top, we have the following fields:

• Title - REQUIRED
• Description
• Start date and time - REQUIRED
• End date and time - REQUIRED
• Event location
• Event body text (visual editor panel)
• Attendees
• Event type(s)
• Event URL
• Contact Name
• Contact Email
• Contact Phone
• Related Item(s)

Note that only three fields, title and start and end date and time, are required.  So, although this is a large input panel, if you are in a hurry, just type in the title and the start and end times and save.  Of course, if you have the information, you should type it in.

One part of the panel needs a bit more explanation: the event start and end times.  The year, month, day, and other fields are simple pull-down menus.  But for the day, often you can't remember exactly and you need to consult a calendar. There is a handy pop-up calendar that offers an alternate way to select the day.  If you click one of the little calendar icons adjacent to the day pull-down, :

you'll see this pop-up calendar:

Just click the day and it will be set. Fill in the fields for which you have information and save the event, but remember:

It will not show on the main web site calendar until it has been published.  <-- READ THIS!

Watch a video on adding an event.

Use the add item menu for a folder to add a news item:

You will see the edit news item panel:

The standard fields for title, description, and related item(s) are in the panel, along with a visual editor area for body text and image and image caption fields. You can be as creative as you want in the body text area, and you can use the insert image (upload image) function to add as much illustration as needed. The images you upload for the news item will be added to the folder in which you are adding the news item.

The Image and Image Caption fields, proper, are for adding an image to be used as a representative graphic for the news item, for posting in news item listings.

As with events showing up in the calendar: News items will not appear in the main web site news listing until they are published.

Watch a video on adding a news item.

On several of those screen captures illustrating adding content, you may have noticed a Related Items area at the bottom of edit panels. This is where you can pick related items to establish connections between content items. Once items have been related to one another, links will automatically show for related items when an item is viewed. You can't do this for folders, but you can for regular content, such as pages and images.

For example, in a folder containing several photographs, you may wish to relate two of them so that when one is viewed, a link to the other will show. First, click the image (this image is called PhotographOne.jpg) and choose the edit tab. At the bottom will be the simple Related Item(s) input area:

Clicking the browse... button will bring up a search panel to find items you may relate to PhotographOne.jpg:

PhotographOne.jpg is shown greyed out (you can't relate an item to itself), and other images in the current folder are shown.  If there were pages or other content items in the folder, they would show too. There is a search box if you would like to find items outside of the current folder.  The list of items at the bottom has insert | view choices at far right. In this example, the insert choice is about to be made to select PhotographTwo.jpg, which will be added to the list of items relating to PhotographOne.jpg:

 Now, when PhotographOne.jpg is viewed, a link to PhotographTwo.jpg will be shown at the bottom of the display:

This is an easy way to give life to your website, so that content, however nicely organized it may be within folders, will have a dynamic aspect. Use your imagination, but concentrate on making sensible choices for establishing relationships. There are other ways of making connections in Plone, through use of SmartFolders, but the ease of setting related items at the time of content creation, or upon item editing, is a feature that should not be overlooked.

The properties tab panel has input fields for basic descriptive information called metadata.  Metadata is sometimes called "data about data." The panel contains settings and fields for:

• whether the item shows up in the navigation menu
• keywords you wish to add or set
• a list of contributors for the item
• principle and secondary creators
• effective date
• expiration date
• language setting for the item
• copyrights that may pertain
• and whether discussion is allowed on the item 

The properties tab panel:

There is no requirement to specify this information, but it is a good idea to do so when there are several people involved in content creation, especially if there are multiple creators and contributors working in groups.  You don't always need fields such as effective and expiration dates, language, and copyrights, but these data should be specified when appropriate. A content management system can only be as good as the data completeness allows. Specifying keywords requires attention, but if you are able to get into the habit, and are thoughtful to create a meaningful set of keywords, there is a return on the investment through searching and other facilities in Plone.  You'll be able to put your finger on what you need, and can discover and use relationships within the content.