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 Safari: The Safari browser will not work with the page editor in Plone due to a known bug in the browser. At this time Safari has not announced a fix.

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!

	The style menu allows you to choose a 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. Literal, Discreet, Pull-Quote, and Call-Out will display text in different ways depending on how your website has been designed (styled). It's best to experiment with those to see exactly what they do. Please note that these formatting styles apply to entire paragraphs, not to shorter spans of text. To remove a text style  - use the (remove style) selection. Character Styles (such as Highlight) are for text styles that can be used on any span of text from single words to whole paragraphs. Your choices of Character Styles will depend on how your site design was done.
	These buttons toggle whether the highlighted text is bold, italicized, underlined. Very similar to the formatting commands you'll find in any word processor.
	Text alignment (left, center, right justified). These settings apply to an entire paragraph. Again, similar to your word processor.
	Numbered 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. If you choose numbers, a second drop-down menu will appear that allows you to choose roman numerals, upper and lowercase letters.
	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. Keep in mind that the text will conform to the original width when you save the page.
	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
	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. Read this how-to for more information.
	Internal link - Insert a link to another page in your site. (Internal Link)
	External link - Insert a link to a page outside of your site. (External Link)
	Anchor - Let's say you have a long webpage and you want to create links that take you to various points on that same page. This is what anchor is used for. You may also know these as bookmark links. Their use is a little complicated, so read this how-to for anchors.
	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.
	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.

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.

Once you have 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, just to another location on your site. 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:

Creating Internal Links:

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:

(click image to enlarge)

Hints: Double-click folders to open and view their contents.

Use the Search box in the upper right corner to help find linkable items.

Anchors allow you to link to specific parts of a page. Default will link to the top of the page. Just use the default until you learn more about how to use anchors.

Read this how-to for more information on Anchors

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.

(click image to enlarge)

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 by using the default email client. 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. Push Ok to finish. Note: You cannot use the Preview feature to test email links.

Embed External Object

Notice the tab next to Link to URL when creating an External Link, the one labeled Embed External Object. Use this if you want to embed a video, music player, or some other multi-media feature. The code can often be found on websites like YouTube or MySpace.

Note: In order to use this feature, your website administrator may need to change some settings. Also be aware that certain security risks are involved when you enable this feature. To learn more, read this help article from Plone.Org

Learn how to enable captioned images here. It takes a little bit of setup, but it's quite useful

Insert the Image

Navigate to the page you want to insert an image.

Click on the Edit button in the toolbar to edit the page.

Click the Insert Image icon from the toolbar. You should now see a window that looks like this:

Now navigate to the image you want to use.

Hint: You have to click on one of the folders on the left to populate information in the middle column.

For instance, clicking on "home" will give you choices to select from in the middle column. Then you can navigate to the location of the image you wish to use.

Choose image settings

Choose an alignment, image size and change the "alt" text, if you wish. 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.

Uploading Images

In this example, the Sunset image had already been uploaded to the site. If you need to upload an image, you can do so using the Insert Image button. Simply click Upload Image Here, instead of choosing a pre-existing image.

Now find the file on your computer by clicking on Browse.
Also be sure to provide a Title and Description

This method of uploading actually accomplishes two things. First, the image will upload to the location you were at when you clicked the Upload Image Here button. Second, the image will insert on the page you are currently editing.

This allows you to upload the image to the folder you wish to store it in, while simultaneously inserting it on whatever page you are currently editing. This streamlines what used to be a two step process. If you do not wish to upload images like this, read this article to learn the alternative method.

Uploading and inserting images in this manner works great, but if you want to change the image settings, you have to do so after the fact. Click on the image and then click on Insert Image once again to access the settings for the image. Now you can pick a different size, change alt-text, or change the image alignment.

Kupu 1.4 also can do captioned images. Read this how-to.

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.

Let's say you have a page that needs to be very long. You've got lots of content and you want to display it all on one page. To make things easier for your site visitors, you want to create links that will take them directly to the various sections of the page instead of having to scroll up and down manually. This is where anchors come in.

Consider this really long web page (click to see)

This is a really long page as you can see. There may be reasons why it needs to be this long, so there some links at the top that outline the five sections of the page.

Our goal will be to use anchors for each of the five sections so that a site visitor can simply click on the links at the top and be taken to the corresponding section without having to scroll down the page.

Step One - Define the Anchors

Before links can be created, we must first create the anchors. Go to the page you wish to create anchors on and push the Edit button to start editing the page.

Let's start and the bottom and work our way up. Scroll down to the very last section and click just to the left of the Section Five subheading.

Choose a paragraph style in the left column.

Any text on your page with that formatting will appear in the list of choices.

You can only associate anchors with the formatting options you see in the left column. "Normal" styling isn't one of the options.

Notice that when you first create the anchor, the targeted text appears twice. Simply push backspace to get rid of the redundant text. (an alternative method of inserting anchors is to highlight the text, which may change the appearance of the text).

If you repeat Step One for each section of your page, you will have built a library of anchors. These anchors can be selected as a link target via internal link from any page.

Step Two - Internal Link

Now that you have your anchors defined, you are ready to put them into use. At the top of the example page there is a sort of table of contents that lists the name of each section (one through five). We'll start by inserting an internal link for Section Five.

Linking to an anchor works almost like an other internal link, except that you must choose the proper anchor from the Link to Anchor list on the right.

In addition to the familiar top of page (default) selection, notice that there is now one anchor for each section of my long web page. These anchors can be used as link targets from any page, not just the same page that the anchors happen to be on.

Step Three - Manage Your Anchors

If you need to view a list of your anchors, delete some anchors, or generate a linked list of your anchors you need to use the Manage Anchors and Table of Contents tabs.

You should see three tabs along the top of the Anchors window like these:

Manage Anchors lets you view and delete anchors. You must click on a paragraph style from the list on the far left to get a view of which anchors are associated with that style. Here's what this looks like using the example from above:

To delete an anchor, simply uncheck one of the boxes and click ok in the bottom right corner of the window. Keep in mind that you cannot delete an anchor that is being used, such as Section Five, in this example. Used anchors will appear with a grayed-out checkbox.

Table of Contents will generate a list of links that automatically link to each of your anchors. Select a group of anchors, then choose the paragraph style you want the link list to use on the right.

Click ok in the bottom right corner of the window to generate your Table of Contents. The result with the above settings looks like this on a page:

Each of these links is set to link to each corresponding anchor positioned down this really long page.

That's all there is to using anchors on your Plone website. The concept is simple, but it will probably take a little practice to master their use. Keep in mind that anchors are an interesting way of customizing how links work, but the standard top of page link is by far the most common on the web today.