Black Cap Design Web Editor

Editing with the Black Cap Design Web Editor is very conventional. It uses a WYSIWYG editor which has similar looks and function to MS Word. But there are a few items that are somewhat unique to this style of editing and are discussed in this section. All Web Editor editing commands are shown later in this document.

Important! Always make sure you have a copy of your web site backed up on your computer. Use free a FTP program like FileZilla to back up your changes after every editing session. That way, if you make a mistake you can't fix, you can always replace it with the backed up copy. For help installing and using FileZilla these 2 YouTube videos are a valuable resource:
How to Install and Use FileZilla FTP client
FTP Client Filezilla Guide

Inserting / Editing Text
Once you have logged in to the editor, simply click inside one of the editable boxes that appear and begin typing. You can add / edit / remove text using your keyboard.

To begin a new paragraph simply press the 'enter' key on your keyboard.

To begin a new line (to force text to the next line without creating a new paragraph), hold down the 'shift' key and press 'enter'.

If you make a mistake, you can either click the 'undo' button (curly blue arrow), or simply logout without publishing your changes, and login again.

Unique Editor Features

Image Insertion/Uploading:
Pictures (images) may be uploaded and put into a web page very easily using the the Image Insert button .

To upload an image (jpg or gif only), select the Image Info tab and hit the "Browse" button, then navigate and select the file on your local computer or disk, and hit the "Upload" button.

If you are satisifed with the Preview, hit the "OK" button. You can use the other fields on the form to specify the height and width of the image, define a border, define the space around the image and where the image is aligned (left, right, top, bottom etc.) but you are not required to fill out these fields.

Preview Page:
When editing a Web page, you can click the "Preview Page" button to preview your changes before publishing (saving) your edits. This allows you to temporarily leave editing mode to view your edits before saving them.

Publish Page:
When you "Publish Page" in the main Web Editor Bar you are publishing the file on the web and it will be immediately viewable on the web. If you exit the editing session without clicking the Save button, your changes will not be saved.

Right Click:
There are a number of functions available to you (such as cut and paste) by clicking the right mouse button while the cursor is over text, an image, or a link.

Source View:
The Source check box allows the user to view and edit HTML directly. Unchecking the box returns the editor to WYSIWYG mode.

Web Page Style

The following is a brief description of how to keep the basic "look-and-feel" of a web page intact across the web site.

Fonts Names, Sizes, Colours
In general, the fonts are "fixed" for the web site, so please do not change the font size, colour, or the font name. This is done so that they are consistent across the site. If you need to emphasize something, try italizing, or "bolding" it. Underlining is only recommended for links, not for emphasis on text.

Note that headings use a different font size but this is handled differently.

Font Format
For all regular text the format should be set to "Normal". For titles use "Heading 3" or "Heading 4" (3 is larger).

Pictures and Images
Pictures (jpg or gif) can be uploaded to the site but there are a few things to remember. If you plan on showing an image that will appear small you should first resize it before uploading it. Keeping the image size small keeps page loading time low for the folks reading your page. There are a variety of programs (such as Gimp or Photoshop) that allow you to resize images.

Links
To create a link to another page on your site, another site on the Web, or an e-mail link, click the Insert/Edit Link button . On the Link Info tab, choose the kind of link (also known as a URL) you want. Then fill out the remaining fields (by entering an email address, a web address or an internal page anchor).

Web Editor Toolbar

The Web Editor Toolbar looks much like any other WYSIWYG editor with a few additional features. Moving your cursor over the menu will provide a tool tip with the name of each button in the web editor.

Web Editor Commands

Right Click Functions

Right clicking on objects in the WYSIWYG editor will give you a number of addtional options.

"Right Click" on table	Allows you to change the attributes of an individual table cell or to add/delete columns or rows.
"Right Click" on image	Allow editing or deletion of a image
"Right Click" on link	Allow editing or deletion of a link

Top Navigation Bar

	Use the Preview Page button to preview your changes before publishing (saving).
	Use the Publish Page button to save your changes.
	The Save As New Page button saves the document you opened with a different name, creating a new web page. NOTE: this only applies to HTML pages, not PHP pages. (HTML pages end in .htm or .html whereas PHP pages end in .php)
	The Site Browser button opens a page listing all the folders and web pages stored in the web host account.
	The User Manager allows the Site Administrator to add, edit or remove Web Editor user accounts.
	The Role Manager allows the Site Administrator to add, edit or remove roles for Web Editor Users. Roles can be assigned to limit access to certain functions, files and folders.
	The Logout button is the best way to exit the Web Editor.
	The Title identifies the name of the current page in your browser window.(NOTE: if you are editing a PHP page, the Meta Tags are probably not set up to be editable.)
	Keywords are visible only to search engines and provide a comma separated list of searchable words for search engines. (NOTE: if you are editing a PHP page, the Meta Tags are probably not set up to be editable.)
	The Content Description is also only visible to search engines. It provides a concise description of what your website is about. (NOTE: if you are editing a PHP page, the Meta Tags are probably not set up to be editable.)

Source

Clicking the Source button will display the work area in HTML view. Clicking it again will return you to WYSIWYG view

Cut/Paste

	Cut the currently selected text, table, or image
	Copy the current object (text, etc.)
	Paste the currently copied items - this preserves any formatting
	Paste text as plain text - does not save formating info
	Paste from Microsoft Word

Spell Check/Find

	Spell Check - allows spell checking but requires a Internet Explorer plugin to run. The first time you use this the editor will prompt you to download and install the checker. Use of this feature is completely optional.
	Find - finds text
	Replace - replaces text

Undo/Redo

	Undo edits (can be many)
	Undo the undos

Links

	Insert/Edit Anchor - Allows you to create new and edit existing anchors which are then linked to using the Insert/Edit Link button.
	Insert/Edit Link - Allows you to insert and upload links to other documents and is only highlighted when text or a link is highlighted. If it is grayed out, nothing is selected.
	Remove Link - deletes a selected link - only highlight when a link is selected. If it is grayed out, nothing is selected.

Special Functions

	Preview - allows you to preview your work before saving. Note: this won't show you exactly how your changes will look
	Image Edit/Insert - allows images to be inserted and GIF or JPG files to be uploaded to the web site (and then be inserted)
	Table Edit/Insert - allows a table to be created and/or edited
	Insert a horizontal line
	Insert a page break; to force text to the next line
	Insert a special character
	Print the area you're currently editing
	Removes formatting from text - this strips away extra code associated with programs like Word or WordPerfect leaving only plain text - which is what you require for HTML.
	Insert new web page template - only to be used for creating a new page from scratch
	Insert a "Smiley" - a smiley is a small picture usually denoting an emotion
	Tells about the FCKeditor used by the Web Editor

Text Formatting

	bolds/unbolds text
	italicizes/unitalicizes text
	underlines or removes underlines on text
	strikes through text or removes strike throughs
	Subscript
	Superscript

Justify Paragraphs

	Center justify a paragraph
	Block justify a paragraph
	Left justify a paragraph
	Right justify a paragraph

Lists

	Bullet text (unordered list)
	Numbered list

Indentation

	indents text
	removes levels of indentation

Font Format

Style	Sets the font "class" - normally this should be set to "nothing" (no style).
Format	Sets text to a variety of uses - usely "normal" or "Headings"
Font	Sets font name for text
Size	Sets font size to be used for text

Colour

	Sets text colour
	Sets text background colour

---

Alphabetical List of Editor commands and Icons

	About
	Anchor
	Text Background Colour
	Bold
	Content Description
	Copy
	Cut
	Find
	Horizontal Line
	Image (insert and/or upload)
	Indent
	Italic
	Justify Center
	Justify Full (block)
	Justify Left
	Justify Right
	Keywords
	Link
	List - bulleted
	List - ordered
	Logout
	Outdent
	Paste
	Paste as Plain Text
	Paste from Word
	Preview Page
	Print
	Publish Page
	Redo
	Remove Format
	Replace
	Role Manager
	Save Page As
	Select All
	Site Browser
	Smiley
	Special Char
	Spell Check
	Strikethrough
	Subscript
	Superscript
	Table
	Textcolor
	Title
	Underline
	Undo
	Unlink
	User Manager

If you have questions about Web Editor functions that aren't covered here, feel free to contact us at .