Tutorials
ThePermaWeb deploys and maintains highly advanced Typo3 editorial environments, this section contains tutorials from the most basic login and editing operations to advanced page operations and image management with DAM (data access management) image and non web file management tools.
To follow this tutorial, it is best to keep the tutorial page open, and open a new window or tab for your 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 Typo3 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.
Basic user setup:
Note the structure of the page, the left column allows you to view the information on your website in many ways, and the right column describes each of the functions. First, click on "+" next to "User" near the bottom of the left column and/or then "Setup" , 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, check the "Notify Me" box if you want to get an email everytime someone logs in using your username. Finally, change your password to something secure see a good article on choosing a strong password if you have any doubts (note you must type it the same in both boxes or it will fail) and click on "Save Configuration".
Simple Web Content Editing
At the top of the left column look for the "Web" "Page" view, Click on "Page" at the very top of the left column and note that a page tree appears below. It may be unexpanded when you log in, if so it will mostly look like the image below.
Note the little plus sign next to the folder, and click it. The little pluses change to minuses and allow the page tree to be expanded and closed again.
This is a represenstation of the web pages of a site in a heirarchy that is reflected in the menu on the website. Note in the example above of the expanded pagetree that "Content Elements" and "Contact" both still have a plus, that means that each of 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 in a number of different layouts.
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 for each user of your system because they will remember the state that you leave them in between logins/sessions.
Type and Header segments of the content editing form
Content "Type"
The top of the form begins with "Type" which shows the element type and allows 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" segment 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" field (still in Header) allows to choose from pre-defined header styles from "layout 1" - "Layout 5", and also allows for a "Hidden" style. The purpose of the hidden style is for naming the content element. This is useful when you don't want the header to appear to the public but want to name the content element making it easier to see what elements are on a page at a glance. 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".
The main content
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 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 it to the clipboard and paste it into the RTE.
Note in the example above that the text "This is bullet 1" is selected, and the button for the unnumbered bullet list is active. The RTE has tooltips that pop-up and describe the different button functions. Explore the RTE and change some text.
Hide, Start and Stop:
The last important item in our 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 the website. 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 removed, calendar events that pass can be hidden on a specific date etc.
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. Typo3 allows nearly unlimited numbers of undos which allow you to go back to previously saved versions of the content element!
Content Edited! What's next?
User contributed comments
| Michael | |
| 01-14-08 02:28 AM test message |
|
