Browsers:

First, make sure you're using a modern web browser. To take advantage of the full power of the editing tools Plone offers, be sure you're using one of the following browsers:

Note about Apple's Safari: only the newest versions of Safari and the newest versions of Plone's visual editor (as of spring 2008) allow you to take full advantage of Plone's editing interface.

Logging In:

To edit your website, you'll first need to log in. When you do, you'll see that additional features of Plone appear to help you edit and organize content.

1. If your web site has a log in link (often near the top right), click it to open the login form. There may also be a login portlet in the left or right column of your site, prompting you for a username and password.
   
   If there is no log in link to be found, you you can always add "/login_form" to the end of your website's address. For example, to view the login form for this web site, you would enter http://learnplone.org/login_form
   

2. Now you should see the login screen, where you'll enter your login name and password.
   

If your login is successful, Plone displays a welcome message. From here, you can make your way to the page you want to edit. Use links to move to the page you want, or search for it using the site's search feature.

The "Logged In" View

Once you have logged in, notice that additional tabs and links appear on the page. These are the content management tools that will help you add and edit content.

No login name?

Your login name and password should have been supplied to you by your site administrator or the developer/consultant who set up your site. Your login name is most likely the portion of your email address before the “@” sign, or your first name and the first letter of your last name (for example, georgeb). If you forget your password, follow the instructions on the screen to have it e-mailed to you.

Some sites allow users to create their own accounts using the registration form. If you create your own account, however, you'll still likely need to ask a site manager to grant you permission to edit pages outside of your member folder.

Now that you're logged in, let's introduce you to the different pieces of a Plone website. Depending on how much graphic design has gone into your site, these examples might look very different, or the layout of these sections might have been changed. For the purposes of this tutorial, we'll use a copy of Plone "out-of-the-box".  Below is a screenshot with explanations of what each area is for. Don't worry if you don't understand all the terminology, you should just familiarize yourself with the different pieces.

When you find the page you wish to edit, you'll notice that it has a thin border enclosing it with tabs along the top. This area is called the task bar.  You'll notice that the View tab is selected, which makes sense; you're viewing the page as you would normally view any webpage. 

Click on the edit tab to access the page for editing.  Every page is composed of the following three main sections (there are others, but ignore them for now):

1. Title: The phrase you put here appears as the headline at the top of the page.  This field is required; it should be descriptive and not too long.
   
2. Description: This is a short lead-in to the page -- a good description of what the page is all about.  It usually appears after the title of the page but before the body text.  It isn't required, but we strongly encourage you to use this field, because you will see it in other places such as:
   • in search result listings
   • as a pop-up when you hold your mouse over this item when seen in the navigation
   • in newsfeeds (called RSS feeds)
     
3. Body Text: This is the main part of the page.  In Plone you will use a built-in content editor to format the page content. It saves you from having to know HTML to create webpages (although if you like, you can also edit the HTML directly). This visual editor works a lot like a word processor in that you type or paste in your content, and then use a set of tools to format it. The next page describes these formatting tools.

Most of the functions here are fairly self-evident, but a few require some elaboration. A brief description of a tool's function appears if you hover your mouse arrow over the icon. Here is a quick synopsis of the editing tools, in the order that they appear.

When you're done entering and formatting content for a page, be sure to push Save at the bottom of your screen. Newer versions of Plone will prompt you if you try to leave the page you're editing without saving it first. Of course, if you click through the prompt, you'll lose all your work!

(Note: icons may look slightly different, depending on what version of Plone you have)

	The style menu allows you to choose a paragraph formatting style for your text. The choices in this box will likely be customized for your website's graphic design. However, in a default Plone setup, "Normal" is used for body text, "Heading" is used for major headlines, "Subheading" for secondary headlines, and "Formatted" is generally not used, unless you have need for formatting "literal" text like mathmatical equations or snippets of HTML code. Please note that these formatting styles apply to entire paragraphs, not to shorter spans of text.
	These buttons toggle whether the highlighted text is bolded, italicized, underlined, superscripted or subscipted. Basically similar to the formatting commands in a word processor.
	Text alignment (left, center, right justified). These settings apply to an entire paragraph. Again, similar to your word processor.
	Ordered and bulleted lists. We encourage you to use these instead of trying to manually insert numbers or bullets. To stop adding items to a list, delete the last bullet/number or hit enter twice.
	Indent and Outdent. Best used for excerpted text or quotation. You can change this indented text back to normal using outdent.
	Toggle full-screen mode, which expands the editor to fill your entire screen. Can be handy for working on longer pages.
	Insert a definition list, which is a way of formatting lists. A definition list has alternating lines that are boldfaced and indented, and looks like this: Term to define Definition of the term (This is probably not something you'll use very often.)
	Insert an image. This button will open up a "drawer" which will allow you to browse the contents of your site to find the image you want, or upload a new image.
	Insert a link to another page in your site. (Internal Link)
	Insert a link to a page outside of your site. (External Link)
	Insert a table. Tables can be very useful, but it takes a little doing to learn how to work with them. Read the tutorial for tables to find out more.
	Undo and redo edits done before the last time you saved. These buttons work with varying levels of success.
	View the HTML code of the page. This can be useful if you need to make some more technical adjustments to the code. Knowledge of HTML is a must however.

Now that you've created a few pages for your Plone site, you can create hyperlinks from one page to another. In Plone, this type of link is called an Internal Link. It is internal because this link won't take you to another website. To link to other websites, see the instructions further down the page for creating an External Link. The following steps explain how to create an Internal Link:

Inserting Links to Pages:

Select the text you want to hyperlink, then click the button to insert an internal link. It will open a window that looks something like this:

From this screen, you can navigate around the contents of your site. When you find a page that you want to insert a link to, highlight it and click OK.

Inserting Links to Folders:

You may sometimes want to link to a folder, and not just a page within a folder. The process is similar to the above. Find the folder you want to link to and double-click into it. Now, you'll see the first item in the folder is named ". (name-of-the-folder-you're-in)". Choose that item, and hit OK.

Creating External Links:

If you'd like to link your text to another website other than yours, highlight the desired text and use the External Link button. Now you'll see a window pop-up for you to enter the address (URL) of the website you want to reference. Important: Be sure to include the http:// at the beginning of the web address. You can also push the preview button to see a preview of the website you are linking to. This is a good way of making sure the link is working properly, before you Save the page you are working on. Push Ok to finish, or Cancel to start over.

Creating an Email Link:

Creating an email link will create a link that will send an email to the person you specify. To create such a link, follow the instructions for External Link above, but erase the http:// and in its place put mailto: no spaces and the email address. The result should look like this: mailto:person@domain.org. Click Ok to finish. Note: You cannot use the Preview feature to test email links.

Create a New Folder

From time to time you may wish to create a new folder on your site. Folders are helpful to keep things organized (like an Images folder) and to create new sections and subsections.

To create a new folder, you should first decide where on the site the folder is going to live. If you want your folder at the top-level (root of your site), click on Home. If you want to create a folder inside another folder, you must nagivate inside that folder first. Creation of all new content in Plone is dependent on location.

1. Click on add item (sometimes add to folder) on the green taskbar
2. You should see a drop-down menu appear. Select Folder
3. Give your folder a Title and Description and push Save

Create a New Page

The first thing you need to decide is where on your site it is your new page going to live. You can add new pages to the root of your site, or inside of a folder.

1. Go to the location on your site you want to add a page and click on the add to folder drop-down menu located in the green taskbar
2. Select Page from the menu
   
3. Next, you'll be taken to the edit screen. It's exactly like editing a page, except that none of the fields are filled out yet
   
4. Push Save to finish

There are various ways to access and display pages on your website. They can be part of your site navigation, the landing page of a folder, or the homepage of your site. Learn more about the different ways to display pages in the Display Tab How-To.

Changing the Way Folders Display Contents

You can alter the way in which folders display content using the Display Tab, located in the green taskbar. Note that only folders have a display tab, so be sure you are looking at a folder for this exercise.

When you start with an empty folder and then add pages, images, files or other content, Plone will display those items by default in the Standard View. The standard view simply lists the title and description of each content item in a vertical listing.

There are several other display options, but perhaps the most useful is the Content Item as Default View option.  This option allows you to select a content item of your choice as the default folder view, instead of using one of the above generated views, which list all content items in a given folder.

We encourage you to create a landing page for most folder in your site that people will visit.  It makes for a more engaging website.  Remember, you're constantly fighting for your reader's attention, and you want to do everything possible to encourage them to read all the important things you have to say.

Find the folder where the image is located (often a folder called Images) on your Plone site and select the image you want to use from the list. You can also use the search field to find your image by name. Once you click on it, you'll see a preview of the image appear on the right side of the window.

You can "float" images to the left or right by choosing the Left or Right buttons.  Inline images will simply be inserted into the middle of the text, which will break above and below the image.

ALT-text is the text that will be shown to users whose web browsers can't display images, or used for vision-impared web browers.  In most browsers, the ALT-text will also appear when a person hovers the mouse over the image.  By default, Plone will use the image's Title as the ALT-text or you can put some sort of brief descriptive text here.

Once you have some images and/or file ready to upload you need to decide where on your site they are going to live. One convention is to create a single folder called Images and a single folder called Files on the root of your site (on the same level as the homepage). You can then put all your images and files into their respective folders and link to them as necessary from anywhere on your site.

1. Go to the proper folder and click on the add to folder drop-down menu located in the green taskbar
2. Select Image or File from the menu
   
3. Next, you'll be taken to the edit screen for that content item
4. Fill in a Title and Description
5. Browse to find the image or file on your hard drive
6. Push Save to finish

Tips for Preparing Images

Before you are ready to add a new image to your Plone website, you need to consider a couple of things. Many images, as you find them, are not ready to be uploaded and used online. Many are too big and must be resized or compressed before it is appropriate to include them on your website. Here are the three guidelines for preparing images:

1. How big is the image? This is the the actual dimensions of the image in pixels. For the most part, any image larger than 250 pixels square is going to be too big to include on a webpage. 150 pixels square is a typical size, good for staff photos and the like. To resize images, you'll have to use some type of image software like Photoshop or XnView.
   
2. What is the filesize of the image? This is how big the image file is in bytes, usually expressed as kilo- or mega- bytes. Images much larger than 50Kb are not recommended as they will make your site difficult to access for people using a dial-up internet connection. To make image files smaller, you may need to apply compression.
   
3. What format is the image in? This refers to the file type of the image, such as, JPEG, GIF, PNG, BMP and so on. For the best results, stick to JPEG and GIF as they are the best supported formats around the world. The difference between JPEG and GIF lies in how they render image information and how they handle compression. It's too long of topic to go into here, but you can better familiarize yourself with these formats with the Preparing Images for the Web tutorial.
   

Tips on Files

Just to be clear about definitions, when talking about a File in the context of Plone what we mean are things like a Word, Excel, PDF, MP3, or MPEG file. In other words it is a document that you intend your site visitors to download and view locally on their computer. When considering files, there are two possible scenarios for how they will be used:

1. You may have some content that you wrote in a Word document and want to put that content on a webpage. As long as the content is fairly short, you would want to simply create a page, and then copy-and-paste the words onto the webpage.
2. Sometimes though, you really do want your site visitors to download a copy of the file. You usually aren't going to post a Word document for download unless the document is really long (like a 50-page report or something). The other file formats mentioned above usually ARE posted for download, especially PDFs and Excel documents.

If you find that you need to delete, copy or move a webpage, image or other content item, you must first navigate to the Contents tab of the task bar. You should see a listing of the current items in whatever folder you happen to be in. It should look something like this:

Now simply select the items you'd like to modify by checking the box next to it. You can select everything within a given folder by clicking the top most box. Now, you may copy, cut or delete the selected items. If you chose copy or cut, you'll see that Paste is added as a choice after the page reloads. In order to paste the item into a new place in the site, you will need to navigate into that area. For the example shown above, if you wanted to move the "News" item into the "Programs" folder, you would click on the name "Programs" and then click the Paste button.

If you need to rearrange the items within a folder, use the arrows listed under the order column of the Contents view. You can only move one item at a time, and it only moves one space at a time, so this process can be a little slow.

Want to change the name of a document, page, or image? One method is to simply go to that item in the Edit view and change the Title in the title field. That will change the name alright, but there's a problem that can crop up if other things have been linked to that item already.

Plone actually has two names for everything. Title, which you are already familiar with, and something called the Short Name. The Short Name is always in lowercase and uses hyphens instead of spaces between words. The reason for this is that Short Name is used to generate the URL for the item in question. In other words, if you simply change the Title of something, without also changing the Short Name, things can get very confusing.

To change the Short Name, go to the Contents tab of the task bar. Then select an item or several items to rename from the list and push the Rename button.

If you need to rename something, the best practice is to change both the Short Name and the Title to the same thing. As you can see, About Us should be written about-us for the Short Name. The importance of renaming this way becomes very apparent as your site gets bigger and bigger. Links will break, and things will get hard to find if you are not consistent about your naming.

    •     Changing the Short Name causes anything that is linked to that item to stop working.  After modifying a Short Name, it's best to use the search functionality to find any references to that item.  Try searching for the former Short Name.

    •     You can't change a Short Name to anything that already exists in the same folder.  In other words, if there's already a folder called  "about-us", you can't rename something else with the same short name.

That's all for this Quick Start Tutorial! Return to the Tutorials main page, or explore another section of Learn Plone from the home page. Be sure to practice what you've learned here to retain the information.