. 
and choose from a rainbow of colors.Tutorials
This section describes editorial operations from the most basic login, content creation and editing operations to advanced page operations and image/file management.
To follow this tutorial, it is best to keep the tutorial page open, and open a new window or tab for your backend login and editing. (if you use a tab enabled browser such as firefox or ie7, just use "ctrl t" to open a new tab)
Basic Login to your new Permaweb Custom Typo3TYPO3 is a free Open Source content management system for enterprise purposes on the web and in intranets. Typo3 is used by corporations and government organizations including Philips, EDS, Volkswagen, General Electric, Stanford University, MGM Home Entertainment, 3M, New York Times, Lufthansa, Ford, T-Online, Samsung and the governments of Quebec Canada and many European countries. Environment is easy.
- Simply open a web browser and type http://www.yourwebsite.com/typo3. The login page will load.
- Type your new username/password that you chose (or were assigned) and click the "Log In" button.
After successful login note: the structure of the page, the left column allows you to choose what module to use to view and edit the content of your website. and the right column describes each of the functions.
***Very Important*** Change Password
First, find "User" near the bottom of the left column and/or then click "Setup" under user, and scroll to the bottom of the form that loads in the right column. The default settings are fine for the most part, but you will want to fill in your name and email address so the system can notify you of failed login attempts etc. Finally, change your password* to something secure by typing your chosen password into both "new password" fields and click on "Save Configuration". See a good article on choosing a strong password if you have any doubts.
Simple Web Content Editing
At the top of the left column look for the "Web" "Page" link, Click on "Page" and note that a "page tree" appears in a second column.
Note the little plus/minus sign next to the folder, and click it. This allows the page tree to be expanded and closed again.
Each item in the "pagetree" represents a web page in a heirarchy that is reflected in the menu on the frontend website. Note in the example above of the expanded pagetree that "Content Elements" and "Contact" each has a plus next ot it, indicating that those pages have sub pages.
In your admin interface, Roll over each page icon (next to each page name) and the page id along with the page alias (if set) will popup as a tooltip. The id #of a page is a unique id and will never change.
Click on a page name in the center column, and the contents of that page appear in the right column as in the illustration below.
If your site has multiple content areas like columns, they will be shown. The site in the example above has "Main Content" and "Right Content". Within those content areas, you will see a listing of the content elements on the page. Note the icons out to the right of each content element name. You can place your cursor over these icons, and a description of it's action will pop up.
Editing an exitsing content element
The standard "edit" button in typo3 is the pencil icon. Click the pencil next to an existing content element to edit it.
Most content on your site will be either a plain "text" element, or a "text with image" from these two elements you can build any combination of images, text, hyperlinks, named anchors, bulletlists and tables. The types of content elements are identical except that the "text with image" element has some additional fields for choosing images that are displayed in a block.
Once you have clicked edit, the right column will reload with the editing interface. The first thing you will want to do is scroll to the bottom of the form/page and make sure the checkboxes next to "Show secondary options (palettes)" and "Show field descriptions" are checked. 
Checking these boxes reloads the editor with those options active. You only have to do this once because the system remembers your preferences between logins.
Choosing the content "type" and using the "Header" field
At the top of the form you will find a dropdown menut allowing you to choose the content "Type". Next to the dropdown, you will see input fields which allow you to add spacing (in pixels) above or below the element, and allows you to create a "to top" link providing a way for your website users to easily get back to the top of the page (this is useful with really long pages). Note the little "?" icons next to the different fields throughout the form. These provide popups with Help descriptions of what each field does.
Header:
Next, is the "Header" field of the form. This allows an easy way to create a header at the top of the content element (although you can create Header text anywhere within the body text of the element as well). To use it simply type the desired text into the field. The "align" dropdown allows for left, right, or center justification of the "Header" field. The "Type" dropdown (still in Header) allows to choose from pre-defined header styles from "layout 1" - "Layout 5", and also allows for a "Hidden" style in which the header only appears in the backend editor. The "Link" field allows you to make the heading a hyperlink to another website or another page on the website. Using the "Link" popup dialogue will be described below in the "Body Text" Section. You can also add a date to the header by choosing a date in the "date field of the "Header".
Text: Enter the body text
The main text and content of the page is created with the rich text editor, labled "Text:" it should look like the image below except with different content. A special note, it's a bad idea to copy and paste text directly from MSWord. If you copy and paste text, you should paste it into "notepad" or equivalent first (it removes word formatting), then recopy and paste it into the body text field.
The RTE has tooltips that pop-up and describe the different button functions. Explore the RTE and change some text. You can even insert a smile or just be extra cool. 
Hide, Start and Stop:
The last important item in our simple content element editing are the "General options:" "Hide" "Start" and "Stop" functions. Hide is simple, it hides the content element so that it is not included in the website. The start and stop fields allow you to choose dates for the content to be automatically added and removed from publication. To publish immediately and remove on a selected date, simply click the calendar icon next to the stop field and select a date for the content to be removed from the site. In this way seasonal content can be automatically programmed to be added and/or removed.
Finished editing, better save, . . . or not.
Next we either save the document or abandon the changes and close. there is an array of save buttons at the top and bottom of the form.
From left to Right simply save without closing the current content element, Save and view the website in a new window, save and close the content element returning to the previous view, close without saving, delete the element (warns you befor executing) and undo last change. Typo3TYPO3 is a free Open Source content management system for enterprise purposes on the web and in intranets. Typo3 is used by corporations and government organizations including Philips, EDS, Volkswagen, General Electric, Stanford University, MGM Home Entertainment, 3M, New York Times, Lufthansa, Ford, T-Online, Samsung and the governments of Quebec Canada and many European countries. allows nearly unlimited numbers of undos which allow you to go back to previously saved versions of the content element!
