Publishing System Settings Logout Login Register
Pixel2life.com User Guide and General Help
TutorialCommentsThe AuthorReport Tutorial
Tutorial Avatar
Rating
Add to Favorites
Posted on October 6th, 2009
42934 views
General Website Development

v5_help_section_pubeditor.png

The Tutorial Editor tab will reveal the extremely functional editor that is used to type and prepare the tutorial to be published. The editor is a WYSIWYG based editor (what you see is what you get) and contains many advanced formatting tools that you would expect to see in a desktop word processor such as Microsoft Word. We want our users to be able to edit and format their tutorials as effectively as possible and the editor is designed to allow this.

v5_help_section_publishing_writetab.png

The Tutorial Editor Tab also includes the Chapters Management, Add Image interface and menus to insert videos and attachments. Before we cover those areas, here is a break down of all the editor functions, including hotkeys, that you can use when editing your tutorial.

help_toolbarnotes.png

Here''s a handy little tip many beginners may not know about... you will notice in most WYSIWYG editors that when you press carriage return (enter), the cursor will add a double line space instead of a single line space like you would get in Notepad or Wordpad for example.

So you will get something like this:

This is line 1

This is line 2

But what if you don''t want a double space and only want a single line space like this:

This is line 1
This is line 2

To achieve this effect, simply hold down the (shift) key when you press enter and you will get a single line carriage return instead of a double!

You can also change the height of the editor window. This is a great little feature for anyone with a large monitor and high desktop resolution because you will probably want to make your editor window a little bit bigger. To do this, simply click and drag the bottom right corner of the editor window up or down to make it smaller or larger.

v5_help_section_editordrag.png

Should you wish to clear up any changes you made in the editor and want to revert back to the last time you saved your tutorial, click the "Revert" button above the editor window to reload to last saved version.

Chapters Management

Using the chapters tool is a fantastic way to organize your tutorial in to various sections for easy browsing for your users. By setting chapters, tutorial readers can easily click on the chapters tab within your tutorial to open a great little table of contents and click to specific tutorial sections. It''s also great because you can link directly to chapters, so if you need to share a link to a specific area, you can send them a bookmark to an exact page number instead of telling them where to look within the tutorial. You can see how the chapter functionality works in a live environment right here in this P2L Help Guide... click the Chapters tab towards the top left side of this page and see for yourself!

v5_help_section_tabsout.png

Chapters work by tracking the number of page breaks you have within your tutorial and any or all page breaks can be assigned chapters, it''s completely optional and you can break it down however you like. To create a page break, simply place your typing cursor wherever your want the page break to show up in the editing box and click on the page break icon in the editor (please see the icon shortcut table above if you don''t know what the page break icon is). Once you have inserted a page break, you can click the "Manage Chapters" icon in the chapters management box located along the right side.

help_chapters01.png

This will open the chapters list over top of your current content. Each available chapter slot is a page break, and you can name any of them with a chapter or leave them blank. So as an example, you can assign every page a chapter, or you may have several pages per chapter. Just remember that each available chapter slot is a page break, so if your tutorial has 10 page breaks, you will have 10 available page breaks.

help_chapters02.png

It is also important to remember that the chapters system only counts page breaks, but it doesn''t keep track of which chapters are which. So this means that if you start inserting additional page breaks in between chapters, you will need to adjust the chapter names accordingly. For example:

In the chapter management screenshot above, you can see Page 11 is named "Advertising System - How to Create and Manage Ads" and Page 12 is named "Using the P2L Forum Index". So this means that the 11th page break in my tutorial is Page 11 and the 12th page break is Page 12. Now let''s say I wish to insert a new chapter in between Page 11 and Page 12 and I want to call it "New Chapter Example" and I go ahead and insert a new page break in between page break 11 and page break 12.

This means that Chapter 12 "Using the P2L Forum Index" is now on the 13th page break as a new page break has been created above it. The Chapters Management window would now show a Page 16 slot and it would be empty... you would now have to move all the titles for Pages 12 to 15 down one slot. So the title "Common Questions about P2L" would be moved from slot 15 to slot 16, "Forum Rules and Guidelines" would be moved from 14 to 15 etc. until "Using the P2L Forum Index" was moved to slot 13 and slot 12 was blank. You would then enter "New Chapter Example" in to slot 12 and all your chapters would now be properly labeled.

Once the chapters are named the way you want, click on the "Set Chapters" button to save your changes and you will be returned to the content you were viewing prior to opening the chapters management window.

Images Docker

Part of the Publishing System is the ability to host all relevant images, videos and attachments for your tutorials so you don''t have to worry about or rely on any third party hosting whatsoever. You can use the Image & Videos tab to quickly upload images while you work in the editor (see previous chapter for details on using this tab) or you can manage and upload/delete images and videos in the Image and Video Collections menu (please see the Image and Video Collections chapter for details). Once you have uploaded images to the publishing area, you can access them via the Images Docker along the right side of the Tutorial Editor page.

help_imagedock.png

By default, the images displayed in the docker are from the images uploaded to the collection associated to the tutorial you are currently editing. Every time you create a new tutorial in the Publishing System, a collection is created for that tutorial. Any images you upload via the Images & Videos tab are automatically uploaded to that collection. Images uploaded via the Images and Video Collections area must be assigned to a collection (please see the Images and Video Collections chapter for details). You can also insert images from other tutorial collections by clicking on the dropdown menu at the top of the docker and selecting another tutorial collection.

You can also filter your images by tag to make browsing easier. When you upload images, you have the option of assigning each image tags. You can find the tag filter at the bottom of the dock... simply enter the tag you want and click filter.

Each image thumbnail in the dock has 3 functional options:

  • Clicking on the image thumbnail itself will load a full image preview in case you need to view the image fullsize before inserting it in to the editor window.
  • Clicking the insert button will insert the image in to the editor window.
  • Click the info button will load a small window showing you the images, title, description and other details about that image.

Be sure to have your cursor in place within the editor window where you want the image to be inserted before you click the insert button! If you don''t have the cursor in place, the image will be inserted at the very top of your tutorial in the editor window.

The docker also has up and down buttons for users to scroll through the available images within that collection.

Inserting Videos and Attachments

The last two dockers allow you to insert videos or attachments in to your tutorials and this works the same way as image collections. You can use the dropdown to select the tutorial collection you want to use and then click on the video or attachment you want to insert. Again, be sure your cursor is placed where you want the item to be inserted!

help_insertcontent.png

You can find more information on managing your attachments in the Manage Attachments chapter of this P2L Help Guide!

Next Page
Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Dig this tutorial?
Thank the author by sending him a few P2L credits!

Send
danrichard

This author is too busy writing tutorials instead of writing a personal profile!
View Full Profile Add as Friend Send PM
Pixel2Life Home Advanced Search Search Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Pixel2life Homepage Submit a Tutorial Publish a Tutorial Join our Forums P2L Marketplace Advertise on P2L P2L Website Hosting Help and FAQ Topsites Link Exchange P2L RSS Feeds P2L Sitemap Contact Us Privacy Statement Legal P2L Facebook Fanpage Follow us on Twitter P2L Studios Portal P2L Website Hosting Back to Top