Very soon we will have a full Macromedia Captivate demo to show you the EdIT Tool, however for the time being you can view the following FLASH Demo, which will give you an
idea of the functionality of the EdIT Tool.
The demo is based on an older version of the tool, however, it does have most of the current features, but we would like to stress, to see and fully appreciate the latest versions please do not hesitate to contact us and we can arrange for one of our representatives to come down and demonstrate the full tool to you and your school.
Click on any of the titles below to view instructions from that section of the Help File:
The Folder Browser is the focal point and heart of the Tool; this is where the process begins, and is very similar to the Windows Explorer application that you may
already be familiar with.
The Diagram below details all the elements of the Folder Browser.
The elements on the diagram are explained in the rest of this help file.
This Pallet appears when you are editing a page. The tool is very easy to use. The diagram below highlights all of the features of the tool, many of which are self-explanatory,
and you will recognise from using popular Word Processing packages.
Advanced Options - These are for the more advanced users of the tool…. from here you are able to alter the attributes of existing elements on the page such as hyperlinks, tables and images. This is explained in more detail later in the document.
Once you are logged in to your site, you will notice a USER CONSOLE at the top of your site.
Folder Browser - This button will return you to the Folder Browser at any time.
Menu Editor - This button will take you to the Menu Editor at any time.
Calendar - This button will enable you to log into the Calendar on your site and then add, edit or remove events.
Edit this Page NOW - This will switch you from viewing the page, to editing the page.
Open the folder browser, navigate through the folders to the page you wish to edit, and click on the ‘EDIT’ button next to the file name.
NOTE: We STRONGLY recommend that you keep the existing file structure, and try to work within the guidelines at all times. ALL web pages should be held within the appropriate section in the “CONTENT” folder. So for example the ‘about_us’ page should be stored in the “ABOUT” folder that is within the “CONTENT” folder…. the URL would be ……content/about/about_us.aspx, this will ensure a clear, organised website that will not get out of control.
The selected page will load within a thin blue line, this is the area in which you can edit and insert text and images, and by using the Pallet you can format the text, insert images and hyperlinks, and set page attributes. (These are all explained later in this help file)
To view a page normally, instead of clicking the EDIT button next to the Web Page name on the Folder Browser, just click on the actual Web Page name or the VIEW button.
Whilst logged in, you can EDIT a page that you are viewing normally by clicking the ‘EDIT THIS PAGE’ button located on the USER CONSOLE that appears on each page.
Once you have finished editing your page, you simply click on the ‘SAVE’ button at the bottom right of the Pallet, the page will refresh, your page has now been saved and will
be available live on the Internet immediately.
When you have finished and the page has been saved, click CLOSE to return to the Folder Browser.
NOTE: The system will time out after long periods of inactivity or if you haven’t saved the page recently. This is due to the security settings on the server and to prevent pages being edited after you have left the room. We therefore suggest you save your changes every few minutes. There is no restriction to the number of times you can save a page.
To create a new file, open the Folder Browser, navigate to the folder you want the page to appear in and then click the ‘Create New Page’ button located at the top of the list of current file listing.
A text box will then appear below in which you should type the name of the new page.
NOTE: When naming the page, please do not use spaces in the file name; instead you should use the _ underscore, for example about_our_school
Once you have typed in the new name, click CREATE, enter a name for your new file, and you will be presented with a choice of 5 pre-designed templates:
Once you have selected the appropriate template a blank editing page will appear…and as with the ‘How to Edit a Page’ section you can insert text and images anywhere within the thin blue boxes.
To save this file follow the same procedure as detailed previously in Section 5, ‘How to Save a Page’.
Whilst you are editing a new or existing page, you simply select / highlight the text that you wish to edit and click on any of the relevant formatting tools on the hovering Pallet (Section 3, Pallet)
This selection can be undone by clicking that button again (e.g. Bold on, Bold off).
The formatting tools you have are as follows:
You may find pasting out of Word into a raw text editor such as Notepad, and then onto the web page will help clean up the content and clear out unnecessary code and tags which will make editing text easier.
To upload a file or image you need to be logged into the Folder Browser, locate the “UPLOAD New File / Image” button, at the top of the list of current files, next to the ‘CREATE New Page’ button.
Firstly you need to navigate to the folder in which you want to upload the file or image. Once you have found the correct location click on the “Upload New File / Image” button, and a new window will open titled ‘Upload a File’, to select a file or image from your hard drive click on the ‘BROWSE’ button, you will now see the file structure from your pc. Navigate to find the image or file you want to upload to the site, and click on ‘OPEN’. The browser will disappear and your file’s filename will now appear in the text box, then click on ‘UPLOAD’, and after a short time (depending on the size of the file) it will refresh the page and you will see that the filename now appears in the file listings.
NOTE: To ensure that the file is stored in the correct Folder, navigate to the appropriate folder ‘before’ clicking upload.
Now that the image has been uploaded you are able to edit the image to meet your requirements, for example, resize or rotate the image. A good example of this would be if the photograph had been taken on a digital camera in portrait, and if you weren’t able to rotate the image it would appear on its side.
From the Folder Browser you are able to edit images. Navigate to the image you want to Edit, and click on the EDIT button (in the same way as you would if you were trying to edit a Page)
You will be presented with a new page; it will display the image as it is currently saved on the server, the file name and file size, together with 3 drop down options:
IMPORTANT NOTE: Please make sure you resize ALL images that you are going to use on your web pages…. if you don’t then your website may be very slow, and take long periods of time to load the images.
The following two sections detail the process of inserting the image onto your web page.
Whilst editing a page you may want to insert an image that you have previously uploaded to the server.
To do this, click on the insert image button located on the Pallet.
In the popup window that appears, follow the instructions in the Wizard, click BROWSE and use the navigation system to find the image you want to insert onto your page, once you have highlighted the image you want to insert, click SELECT. You can also opt to have a preview of any images by clicking the PREVIEW button at the top of the file browser.
Once you have selected the image the browser window will close and the image name will be in the text field…. next you must set the remaining image attributes such as Alternate Text (Alt Tag) and whether you want the image to align left, right, top middle or bottom….this will affect how text on the page will wrap around the image.
Once you have completed this process, click FINISH, this will close the popup (if this doesn’t close after inserting, simply click cancel to close the wizard) and insert your image onto the page by your cursor; you can now further resize the image to your exact specifications by dragging the corners of the image (Will retain proportions, but will resize based on the height you choose), or move the image around the page by clicking on the image and dragging it.
While editing a web page, you are able to insert a table onto your page. The button is next to the Hyperlink Button on the Pallet. When you click the button you are presented with another wizard.
Follow the instructions, and complete the appropriate fields (Works in the same way as adding a Table to a Word Document):
This will insert the table you have defined at the bottom of the page you were editing. You can then select the table by clicking on it and then dragging it around the page until it is where you want it.
Simply go to the Folder Browser screen, enter the name of the Folder you want to create into the ‘Create New Folder’ box and click ‘Create’. The screen will refresh and the folder name will now appear
in the list above.
Please note that folders cannot be moved once created, so make sure you are in the right folder before you create the new folder.
It’s very easy to delete folders…simply find the folder you want to delete and click the delete button next to it.
However, be warned, by deleting a folder you are deleting ALL of the contents as well.
Please use extreme care when deleting any files or folders.
In the Folder Browser there are two folder navigation buttons, UP and HOME. The UP button takes you up in the folder structure (i.e. if you are in the HOME / IMAGES / YEAR5 folder and you click UP you will
then be the HOME / IMAGES folder).
You can click the HOME button at any point and you will be taken to the HOME or “ROOT” folder, as it’s known.
When editing a file, in the Pallet you will see a HyperLink button. This button allows you to add a link to text or an image. Once you click this button the Wizard will open.
Adding a Link to text
Select the text you wish to turn into a link and click on the HyperLink button.
Once you click on this button a new popup window will open titled ‘Insert Hyperlink’.
Firstly you must choose what type of hyperlink you want:
Whilst you are editing a page, simply click on the image and then click on the HyperLink button, and follow the same instructions as detailed above for ‘Adding a Link to text’
In this version of the EdIT Tool, the top navigation and drop down menus of your website are now fully editable.
You can open the editor from the Folder Browser; the button is next to the ‘Create New Page’ and ‘Create New Folder’ button located above the file and folder listings, or at the top of the page in the USER CONSOLE.
When you open the editor you will see a page similar to the one below; basically what you can see are the page headings that are currently listed on the site, and underneath those, you can see all the sub menus. This should correlate to the top navigation bar.
For example, all the sub menus below “About Us”, are the links that would appear when you hover over the ‘About Us’ button.
From here you have the option of switching them on or off, changing their order, creating new ones or deleting old ones.
It is very important that any pages you have created from scratch are saved in the correct folders from the beginning, the reason being that when you attempt to create a new sub menu, it will list all the pages you can link to in the drop down menu next to it…. All the pages included in the drop down box are ALL of the pages in that relevant folder.
By using this system, it will ensure that as the site grows it retains its strict structure.
When you have finished choosing which menus to switch on or off, and which new ones to add you can click ‘CLICK HERE TO APPLY YOUR CHANGES’ and it will save all your changes instantly.
PLEASE NOTE: This section is for highly users only, and unless you are confident in the use of HTML Tags should avoid changing any of the Tags in a webpage.
When you are editing a page, if you were to highlight some text, a table or an image and then open the ‘Advanced Options’ tool you would be presented with a list of relevant HTML Tags to that section. For example, if you highlighted an image you would see the fields as detailed below under IMAGE. From there you are able to interact with the code more specifically. Some features include adding borders to images, or altering the alignment.
FONT
P
TABLE
IMAGE
TR
TD
We have integrated a useful and easy to use Calendar system into the EdIT tool.
As you can see in the image below you are presented with a familiar Calendar view such as that used in popular packages such as Outlook, from here dates with events occurring are highlighted, and the next 10 upcoming events are listed below the calendar.
You can access the Calendar Administration section by clicking on the Calendar link on the User Console; It will prompt you to login using your username and password.
Once logged in you are able to click on the relevant dates and then choose to either, add a new event or edit / delete an existing event on that chosen date.
Entering new events is simple, you simply choose a start date using the date selector as seen below, if the event spans more than one day then choose an end date, and then add a title and event details.
If you are logged in, and you view a particular date than contains events, you are able to choose to delete that event, or edit the existing details. When not logged in you effectively see what any normal visitor to the site would see, and that is the identical view as seen below but without the EDIT, DELETE and ADD EVENT buttons.
Funds4schools offer users a cost-free way of raising money for your school every time any of your staff, students, or parents shop online.
The service already has the support of over 200 well-known high street and online stores, including Tescos, Dixons, Comet, Boots, Woolworth, PC World, Dell, Argos, WH Smith, Waitrose and Virgin Wine.
Funds4schools is totally free to use and whenever shoppers wish to order anything on the Internet, they simply visit:
www.YourSchool.co.uk (Example)
Click on the Funds4Schools logo on the Navigation Bar or homepage, and select the store they wish to shop at.
For any item or service purchased, the cash equivalent of up to 30% of their shopping bill will be donated directly to the school.
Funds4schools already has approximately 18,000 schools listed on its web site, with the facility for parents and other users to submit an online form to enrol additional schools for inclusion in the scheme. The Funds4schools service can be accessed at any time – making school fund raising an all-year round activity.
We can provide you with a template letter for you to amend and send out to your parents, or add to your monthly newsletter if you so wish.
If installed on your version you can login to the Funds4Schools system to track how much money has been raised for your school. To check on your account balance etc you will notice there is a new button called Funds4Schools on the Folder Browser of your site (Next to the Menu Editor, New Page and New Folder buttons) if you click this it will open a new window with a login box. The School ID should be precompleted, and you will need to enter your password to access your area.
In the event you haven’t received your password please contact us and we will issue you with one.
As you will find, the site is fairly straight forward and easy to use.
The demo is based on an older version of the tool, however, it does have most of the current features, but we would like to stress, to see and fully appreciate the latest versions please do not hesitate to contact us and we can arrange for one of our representatives to come down and demonstrate the full tool to you and your school.
-
Download:
- Helpfile (PDF)
- Leaflet (PDF)
- Questionnaire (PDF)
Demo:
Click on any of the titles below to view instructions from that section of the Help File:
-
Section 1 - The Site Overview
- 1: The FOLDER BROWSER
- 2: The PALLET
- 3: The USER CONSOLE
- 4: EDIT a page
- 5: SAVE a page
- 6: Create a new page using templates
Section 2 - The How to's
- 7: FORMAT the text in a page
- 8: UPLOAD a file / image
- 9: EDIT image attributes
- 10: INSERT an image onto a page
- 11: INSERT a table
- 12: CREATE and DELETE folders
- 13: NAVIGATE through folders
- 14: CREATE hyperlinks and links to other web pages
- 15: EDIT the drop down menu of your website
- 16: Advanced Options on the pallet
- 17: Using the Calendar System
- 18: Funds4Schools
The Diagram below details all the elements of the Folder Browser.
The elements on the diagram are explained in the rest of this help file.
Advanced Options - These are for the more advanced users of the tool…. from here you are able to alter the attributes of existing elements on the page such as hyperlinks, tables and images. This is explained in more detail later in the document.
Folder Browser - This button will return you to the Folder Browser at any time.
Menu Editor - This button will take you to the Menu Editor at any time.
Calendar - This button will enable you to log into the Calendar on your site and then add, edit or remove events.
Edit this Page NOW - This will switch you from viewing the page, to editing the page.
NOTE: We STRONGLY recommend that you keep the existing file structure, and try to work within the guidelines at all times. ALL web pages should be held within the appropriate section in the “CONTENT” folder. So for example the ‘about_us’ page should be stored in the “ABOUT” folder that is within the “CONTENT” folder…. the URL would be ……content/about/about_us.aspx, this will ensure a clear, organised website that will not get out of control.
The selected page will load within a thin blue line, this is the area in which you can edit and insert text and images, and by using the Pallet you can format the text, insert images and hyperlinks, and set page attributes. (These are all explained later in this help file)
To view a page normally, instead of clicking the EDIT button next to the Web Page name on the Folder Browser, just click on the actual Web Page name or the VIEW button.
Whilst logged in, you can EDIT a page that you are viewing normally by clicking the ‘EDIT THIS PAGE’ button located on the USER CONSOLE that appears on each page.
When you have finished and the page has been saved, click CLOSE to return to the Folder Browser.
NOTE: The system will time out after long periods of inactivity or if you haven’t saved the page recently. This is due to the security settings on the server and to prevent pages being edited after you have left the room. We therefore suggest you save your changes every few minutes. There is no restriction to the number of times you can save a page.
NOTE: When naming the page, please do not use spaces in the file name; instead you should use the _ underscore, for example about_our_school
Once you have typed in the new name, click CREATE, enter a name for your new file, and you will be presented with a choice of 5 pre-designed templates:
- A plain unformatted page
- A single image page with aligned text box
- A 3 image grid with individual aligned text boxes
- A text paragraph with a 4 image gallery
- Two column newspaper style
Once you have selected the appropriate template a blank editing page will appear…and as with the ‘How to Edit a Page’ section you can insert text and images anywhere within the thin blue boxes.
To save this file follow the same procedure as detailed previously in Section 5, ‘How to Save a Page’.
This selection can be undone by clicking that button again (e.g. Bold on, Bold off).
The formatting tools you have are as follows:
- Font Type
- Font Size
- Font Colour
- Bold
- Italic
- Underline
- Left Align
- Right Align
- Centre Align
- Cut, Copy and Paste
You may find pasting out of Word into a raw text editor such as Notepad, and then onto the web page will help clean up the content and clear out unnecessary code and tags which will make editing text easier.
Firstly you need to navigate to the folder in which you want to upload the file or image. Once you have found the correct location click on the “Upload New File / Image” button, and a new window will open titled ‘Upload a File’, to select a file or image from your hard drive click on the ‘BROWSE’ button, you will now see the file structure from your pc. Navigate to find the image or file you want to upload to the site, and click on ‘OPEN’. The browser will disappear and your file’s filename will now appear in the text box, then click on ‘UPLOAD’, and after a short time (depending on the size of the file) it will refresh the page and you will see that the filename now appears in the file listings.
NOTE: To ensure that the file is stored in the correct Folder, navigate to the appropriate folder ‘before’ clicking upload.
Now that the image has been uploaded you are able to edit the image to meet your requirements, for example, resize or rotate the image. A good example of this would be if the photograph had been taken on a digital camera in portrait, and if you weren’t able to rotate the image it would appear on its side.
You will be presented with a new page; it will display the image as it is currently saved on the server, the file name and file size, together with 3 drop down options:
- SIZE: This option will allow you to increase or decrease the physical size of the image.
- ROTATE: This option allow you to rotate the image through 90 or 180 degrees
- FLIP: This option will flip the image on the Vertical or Horizontal axis.
IMPORTANT NOTE: Please make sure you resize ALL images that you are going to use on your web pages…. if you don’t then your website may be very slow, and take long periods of time to load the images.
The following two sections detail the process of inserting the image onto your web page.
To do this, click on the insert image button located on the Pallet.
In the popup window that appears, follow the instructions in the Wizard, click BROWSE and use the navigation system to find the image you want to insert onto your page, once you have highlighted the image you want to insert, click SELECT. You can also opt to have a preview of any images by clicking the PREVIEW button at the top of the file browser.
Once you have selected the image the browser window will close and the image name will be in the text field…. next you must set the remaining image attributes such as Alternate Text (Alt Tag) and whether you want the image to align left, right, top middle or bottom….this will affect how text on the page will wrap around the image.
Once you have completed this process, click FINISH, this will close the popup (if this doesn’t close after inserting, simply click cancel to close the wizard) and insert your image onto the page by your cursor; you can now further resize the image to your exact specifications by dragging the corners of the image (Will retain proportions, but will resize based on the height you choose), or move the image around the page by clicking on the image and dragging it.
Follow the instructions, and complete the appropriate fields (Works in the same way as adding a Table to a Word Document):
- Width in Pixels
- Height in Pixels
- Number of Rows
- Number of Columns
- Border width (in Pixels)
- Spacing (in Pixels)
- Table Alignment
- Text Wrap on/off
- Text Vertical Align
- Text Horizontal Align
This will insert the table you have defined at the bottom of the page you were editing. You can then select the table by clicking on it and then dragging it around the page until it is where you want it.
Please note that folders cannot be moved once created, so make sure you are in the right folder before you create the new folder.
It’s very easy to delete folders…simply find the folder you want to delete and click the delete button next to it.
However, be warned, by deleting a folder you are deleting ALL of the contents as well.
Please use extreme care when deleting any files or folders.
You can click the HOME button at any point and you will be taken to the HOME or “ROOT” folder, as it’s known.
Adding a Link to text
Select the text you wish to turn into a link and click on the HyperLink button.
Once you click on this button a new popup window will open titled ‘Insert Hyperlink’.
Firstly you must choose what type of hyperlink you want:
- HTTP://
This is the default setting, as you would mainly use this to link to external sites, all you would need to do is the add the website address after the HTTP:// (for example http://www.bbc.co.uk) - MAILTO:
If you wanted to create an email link, you would replace the default HTTP:// with MAILTO: and add the email address you would want it to go to
- Link Text:
This is the text displayed as a link (if applicable) - Target: This is a useful feature which will define whether when the link is clicked by a visitor to your website it will open the new page in a new window or in the existing window
- Alt Tag: This is the text that will appear as you hover the mouse pointer over the hyperlink
Whilst you are editing a page, simply click on the image and then click on the HyperLink button, and follow the same instructions as detailed above for ‘Adding a Link to text’
You can open the editor from the Folder Browser; the button is next to the ‘Create New Page’ and ‘Create New Folder’ button located above the file and folder listings, or at the top of the page in the USER CONSOLE.
When you open the editor you will see a page similar to the one below; basically what you can see are the page headings that are currently listed on the site, and underneath those, you can see all the sub menus. This should correlate to the top navigation bar.
For example, all the sub menus below “About Us”, are the links that would appear when you hover over the ‘About Us’ button.
From here you have the option of switching them on or off, changing their order, creating new ones or deleting old ones.
It is very important that any pages you have created from scratch are saved in the correct folders from the beginning, the reason being that when you attempt to create a new sub menu, it will list all the pages you can link to in the drop down menu next to it…. All the pages included in the drop down box are ALL of the pages in that relevant folder.
By using this system, it will ensure that as the site grows it retains its strict structure.
When you have finished choosing which menus to switch on or off, and which new ones to add you can click ‘CLICK HERE TO APPLY YOUR CHANGES’ and it will save all your changes instantly.
When you are editing a page, if you were to highlight some text, a table or an image and then open the ‘Advanced Options’ tool you would be presented with a list of relevant HTML Tags to that section. For example, if you highlighted an image you would see the fields as detailed below under IMAGE. From there you are able to interact with the code more specifically. Some features include adding borders to images, or altering the alignment.
FONT
color
Font colour (basic colours such as ‘red’ or hex)
size
Font size (in pixels)
P
align
Left, Right or Centre alignment
TABLE
height
Table height
width
Table width
cols
Number of columns
cellSpacing
Spacing in the cells
cellPadding
Padding in the cells
align
Cell alignment
bgColor
borderColor
The colour of the Border (basic colours such as ‘red’ or hex)
borderColorLight
Table border highlight colour ( “ )
borderColorDark
Table border shadow colour ( “ )
background
Table background image
border
Number of pixels border (numeric, and in pixels)
IMAGE
height
Image height (in pixels)
width
Image width (in pixels)
alt
Alt Tag for the image
align
Image alignment
hspace
Space alongside image
vspace
Space above and below image
src
Location of image
border
Number of pixels border (numeric, and in pixels)
longDesc
Longer version of Alt Tag, Accessibility
TR
height
Row height
valign
Vertical alignment
align
Alignment – Left, Right or Centre
borderColor
The colour of the Border (basic colours such as ‘red’ or hex)
borderColorLight
Border highlight colour ( “ )
borderColorDark
Border shadow colour ( “ )
bgColor
Row background colour
TD
height
Cell height
width
Cell width
align
Cell alignment, left, right or center
valign
Vertical alignment
nowrap
Text wrapping
background
background image
borderColor
The colour of the Border (basic colours such as ‘red’ or hex)
borderColorLight
Border highlight colour ( “ )
borderColorDark
Border shadow colour ( “ )
bgColor
Cell background colour
As you can see in the image below you are presented with a familiar Calendar view such as that used in popular packages such as Outlook, from here dates with events occurring are highlighted, and the next 10 upcoming events are listed below the calendar.
You can access the Calendar Administration section by clicking on the Calendar link on the User Console; It will prompt you to login using your username and password.
Once logged in you are able to click on the relevant dates and then choose to either, add a new event or edit / delete an existing event on that chosen date.
Entering new events is simple, you simply choose a start date using the date selector as seen below, if the event spans more than one day then choose an end date, and then add a title and event details.
If you are logged in, and you view a particular date than contains events, you are able to choose to delete that event, or edit the existing details. When not logged in you effectively see what any normal visitor to the site would see, and that is the identical view as seen below but without the EDIT, DELETE and ADD EVENT buttons.
The service already has the support of over 200 well-known high street and online stores, including Tescos, Dixons, Comet, Boots, Woolworth, PC World, Dell, Argos, WH Smith, Waitrose and Virgin Wine.
Funds4schools is totally free to use and whenever shoppers wish to order anything on the Internet, they simply visit:
www.YourSchool.co.uk (Example)
Click on the Funds4Schools logo on the Navigation Bar or homepage, and select the store they wish to shop at.
For any item or service purchased, the cash equivalent of up to 30% of their shopping bill will be donated directly to the school.
Funds4schools already has approximately 18,000 schools listed on its web site, with the facility for parents and other users to submit an online form to enrol additional schools for inclusion in the scheme. The Funds4schools service can be accessed at any time – making school fund raising an all-year round activity.
We can provide you with a template letter for you to amend and send out to your parents, or add to your monthly newsletter if you so wish.
If installed on your version you can login to the Funds4Schools system to track how much money has been raised for your school. To check on your account balance etc you will notice there is a new button called Funds4Schools on the Folder Browser of your site (Next to the Menu Editor, New Page and New Folder buttons) if you click this it will open a new window with a login box. The School ID should be precompleted, and you will need to enter your password to access your area.
In the event you haven’t received your password please contact us and we will issue you with one.
As you will find, the site is fairly straight forward and easy to use.