art2.png

Members Menu

BFC Sponsors

Recommended Software

Recommended Web Host

Latest Events

No Latest Events

Newsflash

Newsflash newsflash read all about i! Local dimwit makes good in the theatre.
There's always another tangent altogether describing blood sweat and tears but it's not for the weak at heart.
 

Home arrow News arrow Site News arrow Using the WYSIWYG Web Tools
Using the WYSIWYG Web Tools
Written by Aran Major   
Thursday, 28 December 2006
Creating content.

New Item IconWhenever you see this Create New Content Icon you can click on it to create a new article.
Or click on "Submit News" which can be found under the News button in the Main Menu.

Editing Content

Edit Item IconWhenever you see the "Edit" Icon you can edit that article by clicking on the Icon.

BASICS
You should now be looking at a page Titled The News / Edit Content.
Starting with a field Labelled "Title" (Enter the title of your article here eg. "Using the WYSIWYG Web Tools") then select the appropriate Category for your article.

Note should you wish to save/apply/cancel you can using the:

Save IconSave Icon 
Use this when your ready to save the article and leave the WYSIWYG editor.
Apply IconApply Icon
Use this when you want to apply the changes without leaving the editor. It is advisable to use this when spending time composing to ensure your changes are saved should a dissconnection occur.
Cancel Icon
Cancel Icon
Use this when you want to cancel. NOTE Selecting this button will delete any work not already saved.

Using the WYSIWYG Web Tools

Although Icons are self explanatory by nature I'll list some of the web tool functions:

Text Tools

Bold Icon Bold
Select text then click on this Icon to apply Bold.
Justify Left Icon Justify Left
Select text then click on this Icon to Justify Left.

Italic IconItalic

Select text then click on this Icon to apply Italic. 
Justify Center Icon Justify CenterSelect text then click on this Icon to Justify Center.

Underline Icon Underline
Select text then click on this Icon to apply Underline.  
Justify Right Icon Justify RightSelect text then click on this Icon to Justify Right.

Strikethrough Icon Strike Through
Select text then click on this Icon to apply Strikethrough.  
Justify Full Icon Justify FullSelect text then click on this Icon to Justify Full.

Bullet List Icon Bullet ListSelect text then click on this Icon to apply Bullet List.  hr Icon HRClick this Icon to insert a horizontal ruler. 

Numbered List IconNumbered ListSelect text then click on this Icon to apply Numbered List. 
Remove Format Icon UnformatClick this Icon to remove any prior formatting ie. bold text, justify paragraph, bullet list etc.
 
Indent Icon IndentSelect text then click on this Icon to indent.  
Visual Aid Icon Toggle invisible elementsSelecting this will enable you to see and toggle invisible elements ie table borders etc. 

Outdent IconOutdentSelect text then click on this Icon to remove either indent or list.
Subscript Icon Sub script

Superscript IconSuperscript
Select text then click on either Subtext or Supertext Icons to apply. 

Character Map IconInsert Custom Characters
Click on this Icon to choose and insert custom characters.Customised Horizontal Ruler Icon Customised HRClick this Icon to create and insert a horizontal ruler. This tool allows you to customise the line.

Undo IconUndo
Click on this Icon to undo your last move. Redo IconRedo  
Click on this Icon to redo your last move. 


 Web Link Tools

Link IconLink
Linking Procedure

Select text eg. www.byronfilmclub.com then click on the Link Icon to access the web link editor. A window with four tabs should appear. The tabs are Titled General/Popup/Events/Advanced. At this point let's stick with the general tab.
  1. In the field labelled "Link URL" enter the actual URL eg. http://www.byronfilmclub.com (IMPORTANT : you must include "http://www".etc).
  2. For the moment skip past anchors. From the drop down menu labelled Target select "Open in new window (_blank)"
  3. Enter a title for the link. (This can be additional information eg. "Click here to go to etc"
  4. Click on "Insert" to apply URL to selected text
Please note that if you just type a URL eg "http://www.byronfilmclub.com" it won't actively link until you go through this procedure.

Unlink IconUnlink 
Select weblink then click on this Icon to remove the URL  

Anchor IconAnchor
Click on this Icon to insert an anchor. (Anchors can be used as short cuts) NOTE : this feature is buggy.


Images and Flash Files

Image IconInsert Image 
Inserting an Image

Select this Icon to insert an image. A window with three tabs should appear. The tabs are Titled General/Appearance/Advanced.
  1. Starting with the general tab, enter the URL of your image eg. "http://www.domainname.com/myimages/imagename.jpg"
  2. Enter an image description
  3. Title the image
Now click on the "Appearance" tab. In here you can set the finer details of your image eg. image alignment and dimensions.
  • Vertical space refers to the space above and below the image
  • Horizontal space refers to the space laft and right of the image
  • Border is set to nothing by default
Click on insert when you're done to save.

Please note : Keep your images to reasonable file size and dimensions or we'll be forced to edit or delete them.

Flash IconInsert Flash SWF 
Select this Icon to insert your Flash SWF. Enter the URL, set the size and presto ....


Using Tables

Table Icon Create Table
Click on this Icon to create a table. A popup window should appear containing two tabs "General" and "Advanced". Starting with "General" enter the parameters of your table :

General
  • Columns use this to define how many columns you want in your table
  • Rows use this to define how many rows you want in your table
  • Cellpadding refers to the space between any media contained within the cell and the cell border
  • Cellspacing refers to the space between each cell
  • Alignment refers to the default alignment setting for the table.
  • Border use this to set the width of your Table Border (Note : 0 = no border)
  • Width use this to set the width of your table (Please keep table widths to less than or equal to 560 pixels)
  • Height use this to set the height of your table
  • Class currently inactive
Advanced
  • Background Image use this to place an image as the background of the table eg "http://www.mydomain.com/myImages/tableBG.jpg
  • Border Colour use this to set the color of the table border
  • Background Colour use this to set the table background colour
You can leave the other settings in the advanced tab as they are.

Table Row Properties Icon Edit Row Properties
Use this to edit the Row Properties of the row selected. A popup window should appear containing two tabs "General" and "Advanced". Starting with "General" enter the parameters of your row.

General
  • Row in table part Use this to set wich part of the table the selected row is in.
  • Alignment refers to the default alignment setting for the selected row.
  • Vertical Alignment refers to the default vertical alignment setting for the selected row.
  • Class Leave this blank.
  • Height Use this to define the height of the table row.
Advanced
  • Background Image use this to place an image as the background of the table eg "http://www.mydomain.com/myImages/tableBG.jpg
  • Border Colour use this to set the color of the table border
  • Background Colour use this to set the table background colour
You can leave the other settings in the advanced tab as they are.

Table Cell Properties Icon Edit Cell Properties
Use this to edit the Cell Properties of the cell selected. A popup window should appear containing two tabs "General" and "Advanced". Starting with "General" enter the parameters of your cell.

General
  • Alignment refers to the default alignment setting for the selected cell.
  • Cell Type Use this to define the cell type. (Data or Header)
  • Vertical Alignment refers to the default vertical alignment setting for the selected cell.
  • Scope Use this to set the Scope
  • Class Leave this blank.
  • Width Use this to define the width of the table cell.
  • Height Use this to define the height of the table cell.
Advanced
  • Background Image use this to place an image as the background of the cell eg "http://www.mydomain.com/myImages/cellBG.jpg
  • Border Colour use this to set the color of the cell border
  • Background Colour use this to set the cell background colour
You can leave the other settings in the advanced tab as they are.

Insert Row Icon Insert Row Before
Use this to insert a row before the selected row. 

Insert Row Icon Insert Row After
Use this to insert a row after the selected row.

Delete Row Icon Delete Row
Use this to delete a row. 

Insert Table Before Icon Insert Column Before
Use this to insert a column before the selected column. 

Insert Table Before Icon Insert Column After Use this to insert a column after the selected column.

Delete Column Icon Delete Column Use this to delete the selected column. 

Table Split Cells Icon Split Cells
Use this tool to split the cells of a table. 

Table Merge Cells Icon Merge Cells
Use this tool to merge the cells of a table. 


 
More Tools
Clean Up Icon Clean Up   Use this Icon to clean up messy code.

Help Icon Help Use this tool to find out moreabout the WYSIWYG editor.

html Icon HTML  
Use this tool to edit the html code directly. (Only do this if you know html) 

Preview Icon Preview
Use this tool to preview your article.

Find Icon Find
Use this tool to find a word. 

Find and Replace Icon Find   
Use this tool to find and replace a word.

Insert Date Icon Insert Date
Use this tool to insert the date.

Insert Time Icon Insert Time
Use this tool to insert the time. 

Emotions Icon Emotions
Use this to display emoticons 

Insert Layer Icon Insert Layer
Insert a new layer. 

Move Forward Icon Move Forward
Move layer to the front. 

Move Backward Icon Move Backward Move layer to the back.

Move Absolute position Icon Move Position
Use this to plae your layer where you want it to appear on the page. 

Style Icon Edit CSS Style
Use this to edit the CSS style of your table. 


Last Updated ( Saturday, 30 December 2006 )
 
< Prev   Next >
© 2009 Byron Film Club
Joomla! is Free Software released under the GNU/GPL License.