Profit Site Pro Page Editor


Instructions For Use

 

This software will allow you to edit any web page using simple "What You See Is What You Get" functionality. There are a lot of features in this software - but it's very easy to use.

When you have finished reading the help, you can close this window if you wish. You can access this help again at any time by clicking the  button on the toolbar at the top of the Page Editor software.

 

Help Index

You can get help on a specific topic, just scroll down this page to read.

1. Using The Menu And Toolbar
 
2. Opening Your Web Page For Editing And Saving Your Web Page 

3. How To Edit Text

4. Font Types And Colors

5. Paragraphs and Text Positioning


6. Number Lists And Bullet Lists


7. Undo and Redo


8. Copy and Paste


9. Inserting Images

10. Inserting Horizontal Lines

11. Inserting Testimonial Boxes

12. Inserting Raw HTML Code (including autoresponder signup forms)

13. Adding And Removing Hyperlinks

14. Inserting Image Advert Blocks

15. Inserting Text Advert Blocks

16. View Modes

17. Web Page Properties (Background color/image, Page Title and Meta Tags)

18. Advanced Features

19. Printing Your Web Page

20. Exiting The Software And Automatic Saving
 

 

1. Using The Menu And Toolbar

The software has a menu bar at the top, which looks like this...

 It contains File, Edit, Insert, Hyperlink, Advanced, View and Help menus. These work the same way as the menus on most other Windows software. Just click on the menu and a list of commands will drop down, then click on the command you want.

There is also a toolbar underneath the menus, which looks like this...

Many of the commonly used commands appear on this toolbar, to make them easier to use.

 

2. Opening Your Web Page For Editing And Saving Your Web Page

The first thing you need to do is open the web page you want to edit, using the Open command on the File menu - or the toolbar button

This will show a standard Open File dialog allowing you to select the HTML file to be edited.

Note that this software cannot create new web pages - it can only edit existing web pages. Use one of the Creator tools supplied with this software to create your web pages.

You can use the Save command on the File menu - or the toolbar button  to save your work at any time. You will also be prompted on whether to save your work when you exit the Page Editor software.

 

3. How To Edit Text

Once your web page is open, you can edit it in the same way you would edit any document. Simply move the mouse cursor to wherever you want, click and then type using the keyboard.

You can start a new paragraph using the Enter key on the keyboard (or the Carriage Return key which does the same thing). A paragraph starts a new line, with a blank line in between. You can start a new line without having a blank line in between, by using Shift+Enter - i.e. press the Shift key and the Enter key at the same time (you can also use the Shift key plus the Carriage Return key if you prefer).

Many of the commands require you to select some text on the web page before using the command. You can select text using the mouse, by positioning the mouse cursor where you want it then clicking the left mouse button and dragging while still holding the left mouse button down.

You can delete text on the web page by selecting it using the mouse then clicking the Delete key on the keyboard. You can also delete images and other things in exactly the same way.

You can also select text using the mouse and then Bold it using the  toolbar button, make it Italic using the  toolbar button it or Underline it using the  toolbar button.



4. Font Types And Colors
If you want to change the font for some text, just select it then click the  toolbar button. A dialog will appear showing you the current font for the selected text. Just select the new font you want and the text will be updated immediately.

You can change the font color for text if you want, for example, to change the text to red. Just select the text then click the  toolbar button. A color selection dialog will appear showing the current color of the text. Just select the new color you want and the text will be updated immediately.

You can also change the font background color for text if you want like this. Just select the text then click the  toolbar button. A color selection dialog will appear showing the current background color of the text. Just select the new color you want and the text will be updated immediately.

 

5. Paragraphs and Text Positioning

Text is arranged in "paragraphs". A paragraph starts on a new line, with a blank line in between each paragraph - just like the text you see here.

You can use the Enter key to start a new paragraph.  There is also a "New paragraph" function on the Insert menu, but it's much easier to just press the Enter key.

Note that you can use Shift+Enter to just start a new line (without the blank line). There is also a "New line" function on the Insert menu, but it's much easier to just press Shift+Enter.

By default, the text in each paragraph is "left aligned", like this.

You can also have a paragraph centered like this.

Or you can have it right aligned like this.

To change the alignment of a paragraph, just place the mouse cursor somewhere on the paragraph text, then use  for left alignment,  for centered, or  for right alignment.
 

You can also indent paragraphs like this one, by placing the mouse cursor somewhere on the paragraph text then using the  toolbar button. You can "outdent" paragraphs (i.e. reduce the indent) using the  toolbar button.
 



6. Number Lists And Bullet Lists

You can insert numbered lists like this:

  1. item 1
  2. item 2
  3. item 3

You can also insert bullet lists like this:

  • item 1
  • item 2
  • item 3

Just put your mouse cursor in the relevant place and click the toolbar button for a numbered list, or the  toolbar button for a bullet list. Type your items, pressing the Enter key after each item to start a new one. When you are finished, just click the  or toolbar button again to turn off numbered list/bullet list mode.

 

 

7. Undo and Redo

All the basic editing functions can be undone in the event of a mistake - and redone again if required. Use the  toolbar button to undo and the  button to redo.

 

 

8. Copy and Paste

You can select any part of the web page using the mouse and then copy it to the Windows Clipboard using the  toolbar button. You can paste from the Windows Clipboard using the  toolbar button. This provides an easy way to copy a section of your page to another part of the page - just copy it to the clipboard, put the cursor where you want to copy it to, and then use the paste button.

There is also a cut button  which copies the selection to the Windows Clipboard and deletes the selection - which is useful if you want to move it somewhere else.

Note that the copy, cut and paste commands are also available on the Edit menu.

You can use these features to copy text to other software - or use it to copy text from other software - in the same way as for most other Windows programs.

If you want to select the entire web page, so you can copy the whole thing onto the Clipboard, you can use the Select All command on the Edit menu.

 

 

9. Inserting Images

To insert an image into your web page, position the mouse cursor at the appropriate place then select the Insert Image command on the Insert menu - or use the  toolbar button.

A dialog will appear, allowing you to select the image file on your PC using a Browse button. Note that you will need to upload the image file to your web host (in addition to your web page). The image file must be in the same folder as your web page (or in a subfolder of this folder). If the image is not in the correct place, the software will offer to copy it to the correct place for you.

You can also just enter the web address of an image already on the Internet if you prefer (instead of using the Browse feature to select an image file on your PC).

This is the description of the imageWhen inserting an image, you can enter an optional description (also referred to as "alt text" or "alternate text"). This will be shown when your visitors place their mouse cursor over the image. You can see an example of this by placing your mouse cursor over this image of a lady's face. You should see the text "This is the description of the image".

You can also specify a border width around the image. Usually this is 0 (for no border) but you can put a border of any width around the image if you wish.

If you want the image centered on a new line with no text next to it, you can specify the "Center image on web page" option.

Alternatively you can specify a text alignment, which determines the placement of any text next to the image. Most of the time, you will use the "Standard" text alignment, which just inserts the image "as-is" at the current mouse cursor position. Alternatively, you can select left, right, top, middle and bottom, which realign any text surrounding the image. The best way to see the result of this is to try the different options yourself. You can also specify the spacing (horizontal and vertical) between the image and any adjacent text. A value of 10 to 20 is typically used to make sure that there is a small gap between the image and any text.

You can replace an image with another by selecting it with the mouse then using the  toolbar button and selecting a new image. The new image will replace the old one.

You can delete an image just by selecting it with the mouse then clicking the Delete key.

 



10. Inserting Horizontal Lines

To insert a Horizontal Line like the one below, put your mouse cursor in the required place and then select the Insert horizontal line command on the Insert menu. You will be asked to choose the color of the line.

 


 

After you have inserted the line into the web page, you can click on it and "handles" will appear around the edges. Click on any of these and drag them with the mouse (while holding the mouse button down) to adjust the width and height of the line.

You can delete a horizontal line by selecting it with the mouse then clicking the Delete key.

 

 

11. Inserting Testimonial Boxes

A testimonial box is a box with a border around, usually with a colored background - like the one below. These are typically used for testimonials but can be used for anything you want.

To insert a testimonial box, put your mouse cursor in the required place and then select the Insert testimonial box command on the Insert menu. You will be asked to choose the background color of the box (typically these are yellow but you can use any color you want).

 

 

 

After inserting the box into the web page, you can click on it and "handles" will appear around the edges. Click on any of these and drag them with the mouse (while holding the mouse button down) to adjust the width and height of the box.

You can then simply type or paste text (or images) inside the box as required.

Once you've inserted one testimonial box, you can use the copy and paste features to create additional boxes with the same color and size, to save having to setup each one separately.

You can delete a testimonial box by selecting it with the mouse then clicking the Delete key.

 

 

12. Inserting Raw HTML Code (including autoresponder signup forms)

Sometimes you will need to insert raw HTML into a web page - usually code generated by some software tool - for example an autoresponder signup form.

To insert raw HTML code, put your mouse cursor in the required place and then select the Insert raw HTML code command on the Insert menu. 

 

 

13. Adding And Removing Hyperlinks

Hyperlinks (often just called links) are clickable text (or images) on a web page which, when clicked cause the web browser to load another web page. The new web page is usually loaded over the top of the current web page, but in some cases, a new browser window is opened instead (this is determined by information in the link itself).

You can turn any text or image into a hyperlink, simply by selecting it with the mouse, then using the Convert to hyperlink command on the Hyperlink menu - or by using the  toolbar button. You will be asked to enter the web address for the link. This can be either a full web address, for example  "http://www.google.com" - or for links to files in the same folder on your own website, just the name of the file, for example "about.html". You can also select whether the link should open in a new browser window. If you want to create a "mailto" link which can be used by a website visitor to send you an email, you can enter an email address as the web address for the link, for example "me@mysite.com". 

You can also edit the web address for an existing hyperlink. Simply select the existing link text or image with the mouse (for text, make sure you select the entire link text), then use the Convert to hyperlink command on the Hyperlink menu - or use the  toolbar button. If the selected text/image already includes a hyperlink, the current web address will be shown. You can then alter the link as required. The software will also show a checkbox indicating whether the link currently opens in a new browser window, which can also be altered as required.

In addition to this, the Page Editor also automatically converts any text that you type that appears to be a web address into a clickable hyperlink linking to this address. For example, if you type www.google.com it will be immediately turned into a hyperlink to Google like this www.google.com. This is a useful time saving feature, but in some cases it may not be what you want to happen, so you may want to remove the hyperlink afterwards.

You can remove a hyperlink by placing the mouse cursor on the link and then selecting the Remove hyperlink command on the Hyperlink menu - or by using the  toolbar button.
 

 

 

14. Inserting Image Advert Blocks

An Image Advert Block is basically an image with text adjacent to it, like this example:

 

JV List Builder

"Instantly Create Your Own Highly Lucrative JV"

Now you can get loads of other marketers to promote your list, without paying them a single cent! This amazing brand new software automatically creates everything you need for your own highly lucrative list building Joint Venture.

Click here for full details

These are designed to be used on the home page created by the Home Page Creator software supplied with the Page Editor - but they can be used wherever you want.

 

To insert an Image Advert Block into your web page, position the mouse cursor at the appropriate place then select the Insert image advert block command on the Insert menu.

You will be asked to select the width of the image area. This should be set to the width of the image plus a bit extra to leave a gap between the image and the text. The example above has an image area width of 200 (the image itself is about 165 pixels wide). If in doubt, try a value of 200 - then adjust it up or down if the gap looks too small or too big. When adding a series of Image Advert Blocks underneath each other, you should use the same value for the width of the image area for each of the blocks. This will make it look neat and tidy.

You can also specify a width for the text area if you want. This is usually left at zero, with the result that the text will use the remainder of the width of the web page (or part of the web page into which the Advert Block is inserted). If however you want to limit the width of the text, enter an appropriate value.

You will also need to select the image file (using a Browse button in the same way as for the Insert image command) and enter the advert title, text and link.

After the Image Advert Block has been inserted, you can edit the text, change font or font color, etc. using the normal Page Editor features.


 

15. Inserting Text Advert Blocks

A Text Advert Block is an advert with no image (just text), like this:

 

Get Other People To Build Your List For You FREE

JV List Builder is the ultimate easy way to get loads of other marketers to promote your list, without paying them a single cent!

This amazing brand new software automatically creates everything you need for your own highly lucrative list building Joint Venture.


Click here for details

 


These are designed to be used on pages created by the Home Page Creator software - appearing on the right hand side of the pages. They can however be used in other web pages as required.

 

When these are inserted into a page created by the Home Page Creator software, the background color of the title (dark blue in the example above) and the background color of the text (light blue in the example above) are automatically set to match the page. If you use the command on other web pages (not created by the Home Page Creator software), you will have to manually select the colors.

 

 

16. View Modes

The software supports three different view modes. Most of the time, you will use Design Mode which allows you to edit the web page. You can switch the software to HTML Mode and Viewer Mode if you wish.

HTML Mode is intended for advanced users only. It allows you to view and modify the raw HTML code of the entire web page.

Viewer Mode is similar to Design Mode, except that you cannot modify the web page, only view it. Viewer Mode shows you exactly what your page will look like in a real web browser (Internet Explorer). In some cases, the page will look a little different in Viewer Mode to Design Mode, because in Design Mode, the software inserts some extra gaps to allow you to put your mouse cursor wherever you want for editing purposes. Without these gaps, editing would be more difficult. However these gaps do not appear in the finished web page. By switching the software to Viewer Mode, you can see the exact result.

Viewer mode also makes all hyperlinks clickable, so you can test them, just by clicking on them. In Viewer mode, you can right click on the web page to access Back/Forward navigation functions (if you click on a link, the software will load the linked page in place of the web page being edited, so you will need to use the Back function to return to the original web page). Note that if you switch back to Design mode or HTML mode, the software will automatically switch back to the web page you are editing, irrespective of what page is shown at the time.

To select HTML mode, use the  button. To select Viewer Mode, use the  button. To switch back to Design Mode, use the  button.

Note that many of the commands in the software are disabled when using View or HTML mode. The commands will be enabled again when you switch back to Design Mode.

 

 

17. Web Page Properties (Background color/image, Page Title and Meta Tags)

You can use the Properties command on the File menu to view and alter the web page properties. These include the background color of your page, the background image (if you want to use an image instead of just a color).

The properties also include the title, description and keywords for the page (all used by search engines). Most search engines show the title of a page with the description underneath, when displaying the details of a web page that matches the term being searched for. It's therefore important to set these if you plan to submit your site to the search engines.

The keywords are used by some search engines as an indication of the search terms for which the page is relevant (note however that most search engines now ignore these keywords and perform their own analysis of your page to determine its content).

 

 

18. Advanced Features

The software supports two advanced commands on the Advanced menu. It is recommended that you avoid using these unless you are an experienced user.

The Insert Table command inserts an HTML table into the web page at the current mouse cursor position. Tables are used to set up the layout of a web page, by placing text or images next to each other. You can even put tables inside other tables. A table can have any number of rows and any number of columns (up to 100 of each).

When you insert a table, it will be shown with a border around each element. If you click on the table,  "handles" will appear allowing you to adjust the width and height of the table by dragging the handles with the mouse. When you save the web page to file or switch between Design/HTML/Viewer modes, the border will disappear.

One of the most common uses of tables is to divide the page into sections. For example, you might want a strip 150 pixels wide on the left for navigation and a section on the right of 450 pixels for the rest of your page. The easiest way to achieve this is to create a table 600 pixels wide with 1 row and 2 columns. Now inside the left column create another table with 1 row and 1 column of width 150. Inside the right column create another table with 1 row and 1 column of width 450.

Tables are shown with a gap (blank line) under them. This makes it easier to add text around the table. This gap is not shown in your actual web page. If you switch to Viewer Mode to exactly what your page will look like, this gap is not shown.

The Edit Selection as HTML command allows you to view the raw HTML of the current selection and also make changes to it if you wish. You should only use this if you are familiar with HTML. This function is intended only to be used on simple, small parts of a web page. If you select a large complex part of a page, then make changes to the HTML, the results may not be as expected (this is because the editor has to make assumptions about HTML tags that affect the selection but which are outside of it). If after using this function, the results are not correct, use the Undo command to undo the changes, then switch the editor to HTML mode using the  button and make the required changes to the HTML.

 


19. Printing Your Web Page

You can print your web page from inside the Page Editor if you want. Just select Print on the File menu - or use the  toolbar button.

There is also a Print Preview function on the File menu so you can see what the printout would look like, how many pages it will take etc.

There is also a Print Setup function on the File menu, in case you have more than one printer, so you can select which one to use.

 

20. Exiting The Software And Automatic Saving

When you have finished using the software, you can exit using the close button (red cross) at the top right of the software, in the same way as any other Windows software. You can also exit using the Exit command on the File menu.

When you exit, if you have made any changes to the current file, the software will ask you to choose whether to save the changes or exit without saving them.

Note that if the file concerned has not been previously edited using the Page Editor, the software may indicate that there are changes to the file even if you have not made any changes yourself. This is because the software performs HTML layout and validation checking when it loads a file - and automatically corrects the HTML if necessary.