Toolbox User Manual v1.6
Contents
1. Great Websites for Small Business The Webascent Toolbox User Manual For the Webascent Toolbox CMS version 1 6 This document provides an Introduction to the Webascent Toolbox CMS It begins with a section explaining what it does and doesn t do and why followed by a brief overview of its functions and then some instruction manual pointers on how to use it y Preparation CHF 50 down payment to set up com and web hosting 2 y Structure gt Visual Design CHF 1 740 complete payment ay Add Your Content E y Go Live Learning to use the Webascent Toolbox CMS is part of your Website project s Add Your Content Step 4 Table of Contents 1 Toolbox Introduction 2 Toolbox Overview 3 Toolbox Instructions Glossary of Toolbox Definitions The Right Web Browser To Open the Toolbox Log in To Add Text to a Page To Change Text on a Page To Delete an Item from a Page To Re Arrange the Items on a Page To Save Your Changes Publish To Add a Link to your Text Pointing to Another Web page To Add a Video Clip from YouTube or Vimeo etc To Add An Image to the Page To Modify an Image as you put it on the Page Image Description To Up load Images into Your Image Library 1 Toolbox Introduction We wanted to provide our customers with a tool that would enable them to make day to day changes to their site s content quickly and easily So we developed the Webascent Toolbox which is a simple p2. add to the page and then click on the green triangle in the image s top right corner A 1 velete BA Fublisn aes o a Image Manager make_love_not_war jpg rar OE The Image Manager Library displayed in the Toolbox erm r ri hi tae be jas Pi eres an a Click to use this image Selecting an Image in the Library to place in your Component This will open the Image Editor in a new window where you can choose which part of the image you would like to place into your Image Component see Image Editor Options below Webascent Image Editor 1 1 1 Mozilla Firefox BAX a http www fotofast ch _webascent code toolbox class imageeditor imageeditor htm imgPath _webascen _ Sh arpen amount Medium http www fotofast ch Clicking the Set It button in the Image Editor After modifying the image if necessary see Image Editor Options below click on the Set It button at the bottom left of the Image Edit box A box will open asking you to write a short description of the image for more information on this see below When you are ready click the Continue in the Image Description dialog box The image will appear on your page Publish your changes Image Editor Options These are all actions that are available to you when you are working with an Image in the Image Editor window Setting the Crop Area of the image The Crop Area is the part of the i
3. age editing tool used to up date pre defined content areas of a website s page It will perform all the tasks normally required to keep a website fresh and informative it is only for infrequent complex changes like adding or removing pages that would have an impact on the basic functionality of the site or for specialist design work that you will need to go back to a web designer Current gt STABLE DEBUG Auto update gt STABLE Webascent Toolb BAX D http greatlinenshirts dihedrals com _webascent code toolbox htm Webascent Element Help f IN Delete Publish Above Below L rem ipstim dolor sit amet consectetur adipiscing elit Mauris aliquam malesuada lectus Nulla hendrerit ligula vel purus In hac habitasse platea dictumst Cras sit amet nibh non libero commodo molestie Duis varius ipsum vitae cursus condimentum lectus nulla accumsan orci non commodo nibh nunc ac elit Etiam pellentesque Suspendisse gravida quam nec scelerisque eleifend leo quam congue arcu in tincidunt lacus est sed quam Donec imperdiet mauris N BA Transferring data from yui yahooapis com The Webascent Toolbox window We designed the Toolbox to work in this simple manner as it was apparent that this need wasn t being met by other CMS products on the market People want to be able to up date their own websites with a simple to use tool without waitin
4. en the HTML Code a i opportunity to Embed some content from that site directly into your own website This is done by providing you with a way to copy a block of html code and then paste this code into your web page s lt object width 480 height 385 gt lt param name movie value x After making your selection copy and paste the embed code above The code changes based on your selection Include related videos N C Show Border CI Enable privacy enhanced mode MO 2S 2 ee 2 2 a Post a comment The Embed code options in YouTube com Once you ve pasted this html code into your web page you are basically providing a cut out window in your web page through which to view the content of this other site in this example YouTube com video In the screen on YouTube or wherever showing the clip you want to display on your web page you will find an Embed box Highlight the link it contains and Copy Find the Element on your page to which you want to insert the clip above or below and click on its Pencil Button Choose Above or Below from the buttons in your Toolbox From the drop down menu at the top of the Toolbox choose Components then scroll down to html code Paste the html you have copied into the HTML Code window in the Toolbox It will appear on your page Publish your changes
5. f your image herel Image Tooltip optional ogs The Image Description dialog box To Up load Images into your Toolbox Image Library Manager Making Images available for use on your Website We would suggest that you organise your images on your computer so that you have those for your website easy to access such as in a specific folder on your desktop As well as being easy to find you can also ensure that the images here are of the size that will up load efficiently The toolbox has an artificial size limit of 2 500 x 2 500 pixels per image but even this is larger than will be needed in most cases We suggest that making your images a maximum of circa 1 000 pixels along the image s longer dimension 1000 pixels Original Images should usually be around a thousand pixels wide high If you are using iPhoto on a Mac it is easy to re scale your images by exporting them from iPhoto Another handy tool for Mac and Windows and doing some basic image editing can be found at http www pixlr com editor at the moment our favourite on line image editing tool To add a New Image to the Toolbox s Library First open the Image Library Manager by selecting an Image Component on your page Your Image Library is now visible in the Toolbox Click on the Add a New Image button which is located at the bottom of the Toolbox the button with a green sign on it This opens up a dialog box asking you to choose a jpg image on your compu
6. g for and paying a web designer Other Content Management Systems are available but they tend to be unwieldy database centric systems suitable for medium to large companies with staffed IT departments and far too unwieldy for the practical requirements of smaller companies So we developed and built a tool that is user friendly simple to maintain with no complex database to install and service and durable The limitations on what it can do are part of its strength Anyone with a knowledge of basic word processing will find it easy to learn We suggest that you take small steps at first editing text and move onto more complicated functions once those are mastered such as uploading and placing images on your page These first steps are covered in the instructions below Glossary of Toolbox Definitions EditBox A pre defined area on a page within which the Text and Image Elements can be manipulated using the Webascent Toolbox EditBox Button The button in the top corner of an EditBox it uses the Webascent mountain graphic that you click on to activate that Box so that you can add delete or make changes to the Elements it contains teehee ie gt bays that that the little Maor Edit Button The button associated with each Element or TOTEM Component on the page It has a pencil icon and p little Maori demon an identifying label such as p for paragraph 7 E A ay ere p Z p a ps the friendship and still keep in to
7. mage that will be placed onto your page It is visible as the bright area of the image with a dotted white line around it To change which part of the image is visible in the Crop Area click and drag anywhere on the image to move it around Moving your image in the Crop Area To Change the size of the Crop Area When you open an image in the Image Editor window the Crop Area will be set to that Component s preferred image size each Component s image has a preferred a minimum and a maximum size for the Crop Area Often Preferred Crop provides the best result for placing an image into a Component but there might be times when you will want to modify the default Crop Area of an image To change the default Crop Area size un check the Preferred Crop check box The Image Editor will then show two small buttons on the edge of the Crop Area where you can click and drag to change the size of the Crop Area Image Size Changing the size of the Crop Area To Resize an Image To change the size of the image drag the Image Size Slider back and forth until the desired size is reached The Image Editor will not let you make the image smaller than the Crop Area The Image Size slider Adding a Sharpen Filter to the Placed Image When an image is resized it becomes slightly fuzzier a by product of recalculating the image s pixels When a web designer is creating graphics for professional use he or she will usually use Photoshop to
8. o the Page You have opened your Toolbox and activated the Edit Box into which you want to add your image Select the Element heading paragraph or image next to which you want to add your image This can be either above or below In the Toolbox click on the Above or the Below button underneath the Add Element Context menu at the top of the Toolbox as required On the Add Element Context menu scroll down to the Component sub menu and select the sort of image you want to add Your options are about placing on the left of the page the right of the page or in the centre and about including a title with the image with or without When you have selected which option you want a holding image will appear on your page Next you will need to open the Image Library Manager where the images ready for placing onto your website are stored You do this by selecting an Image Component and then clicking on the Image you want to modify Component sub elements are marked by a small Green dot that turns red when your mouse hovers over them POTPeTEP CGT VEE TEC ECE TCC CTCL Serer anaana naana AAN cree eererree NA ere cree cree rrereeer rere ter cere ire rere creer terre cere erer rere ere a 3 i N k GL p N Image The Image to edit for this component pj G Uy in Nace a he Selecting an Image in an Image Component by clicking on its green dot Once the Image Library Manager is displayed in the Toolbox select the image you want to
9. on the Publish button on the Toolbox The new text is saved to your Pre server and is displayed on your website Click your browser s Refresh button to make sure that your Sf changes have been saved successfully To Change Text on a Page Activate the EditBox that contains the text you want to change by clicking on its Edit Button Select the Element with the text you want to change by clicking either on the Pencil Button on the page or directly on the item in the list displayed within the Toolbox it doesn t matter which just whichever works better for you The relevant text will be displayed in the Toolbox where you can make your changes Click on the Publish button and the changes are saved and show up on your website To Delete an Item from a Page You can use these techniques for deleting any Element whether a text or an image Activate the EditBox that contains the Element you want to delete by clicking on its Edit Button Select the Element you want to delete by clicking on its Pencil Button Then click on the Delete button on the Toolbox Or Right click on the Pencil Button for the Element you want to delete A Context menu will appear where you can click Delete Duplicate Delete pr W To Re Arrange the Items on a Page You can use this technique for moving the Elements on your page around It is actually very similar to using Cut and Paste in most word processing applications Activate the EditBox
10. p Password Current gt STABLE DEBUG Auto update gt STABLE Webascent Toolbox 1 Og http centaurusproject dihedrals com _webascent code toolbox htm The Toolbox Log in Dialog box Your User Name is not case sensitive so Smith SMITH and smith will all work Your Password on the other hand must be entered exactly as it was given to you run87y and RUN87Y are not equal When you log in the EditBoxes on the page you are viewing become visible A blue dotted line is displayed around the border of each Edit Box on the page To work on the contents of a particular EditBox click on its EditBox button which you will see in its top left hand corner When the EditBox is activated the blue dotted line turns into a solid green border Each of role in his life the Elements located inside the EditBox will be identified by an Edit Button a small button with a Pencil on it The Toolbox s Main window will also display a list of all the Elements contained in the activated EditBox To Add Text to a Page You have opened your Toolbox Logged in and activated the EditBox into which you want to add text If there is existing material on the page select the Element heading paragraph or image next to which you want to add your new text element by clicking on its Pencil button By default this New Element will be added below the currently selected Element in the EditBox Lr E Add a Ne
11. run what is called a Sharpen Filter on the image after it has been resized to make it look crisp and sharp again The Webascent Toolbox offers a Sharpen Filter a drop down menu located at the top left of the Image Editor that you can use to give your placed images a professional look There is no best setting for using the Sharpen Filter some images will require more others less and if you don t change an image s size scale then it might look best without any Sharpening at all Trial and error is the only way to get the best result Note The Sharpen Filter is only applied to the image on the page and not to the image visible in the Image Editor window You ll need to hit the Set It button each time you change the Sharpen Filter drop menu to see the changes Sharpen amount Medium Mone Fa Low fee y Medium The Sharpen Filter drop down menu Image Description When you press the Set It button to place an image onto your web page an Image Description dialog box will appear asking you to type in a short description of the image This won t be visible on the web page It is a hidden part of the html that makes up the final image on your page and is important for search engines such as Google It is therefore important to use this opportunity to provide Search Engines with interesting and accurate information about this image Image Description x Please enter a short description for this Image Type a good description o
12. ter to upload at the moment the Toolbox only supports the image format JPEG t E RA The Add a New Image to your Library button located in the Image Manager Library Choose the location on your computer where you have stored your images for your website Select the image you want to upload and then hit the Continue button in the dialog box After a few moments the image will appear in your Library how long this takes depends on the size of the image and the speed of your internet connection To Add a Video Clip from YouTube or Vimeo etc te x Publish z lt h1 gt Heading 1 The Toolbox has a special type of Component which is available for all EditBoxes ens aurea called an HTML Code component enya lt p gt Paragraph lt ol gt Numbered List This component allows you to embed external pieces of html code into your page It is lt ul gt Bullet List fundamentally a window cut into your page allowing the easy insertion of pieces of ri derf Snina P Artist Images 5 sogan amp the little Maori demon Image Full Width functionality from any number of today s Web 2 0 style sites that you trust such as Image Float Left d Image Float Right YouTube com or Vimeo com video or a widget such as web cams or your local area s ia weather ioan eta vSpacer 25 ds gs J apanar W ae When you visit sites such as YouTube com or Vimeo com you are often giv
13. that contains the Element you want to move Either Cut Copy P Paste Above Paste Below R Right click on the Pencil Button of the Element you want to move and choose Cut from the Context menu Then choose where you want to move the item to and select the Element above or below Right click on its pencil button and choose Paste Above or Duplicate K Paste Below z o i eh NEE Or ant Element Help With the Element you want to move selected go to the menu on the top of the Toolbox and choose the Element Menu You can use the Cut and Paste Above and Paste Below options from this menu in the same way as described above Paste Below There are also Copy and Duplicate options in each of these menus so you can use these T Tee techniques to reproduce an Element somewhere else on a page To Save Your Changes When you are working on your website it s a good idea to Publish your changes frequently When you hit the Publish button in the Toolbox your changes are published to the server and then visible to people viewing your site If while you are working on the site you decide to continue working on another page and have some changes unsaved the Toolbox will automatically remind you A dialog box will appear asking you to Publish before it lets you navigate to a new page To Add a Link to your Text Pointing to Another Webpage i Text Editor lt p gt Paragraph First select the text you would like
14. to add a link to Activate the paragraph in which the rating text occurs so that it is visible in your Toolbox and highlight the relevant text select ear F3 carefully as it looks bad if you add the link to trailing spaces after words Then click on Gustavo says that that the little Maori demon is the Link Button in the Text Editor s toolbar This opens up the little floating Link Se es ee eee Options dialog box gt Y i J pau Copy the URL for the link you want from the URL field at the top of your pemer browser s window Paste this into the Link URL field in the link options dialog Formatting box B Gustavo says that that the little Maori demon is maybe the n Check the Open in a new window checkbox to have the link open in a new and is tha oriain in his sto Sof Paul Gonan tha littla Maori d g g Link Options x browser window when a user clicks on it Link URL http www dihedrals com The Description field is optional It lets you add a short text that then pops up next to the link when the user hovers their mouse over it like a Tooltip Use this feature sparingly as it can be annoying _ _ to have little text blocks pop up every time t muse he nd tt ating you move your mouse over a link on a page _ Open in a new window N Description Remove link from text story pa TIRE A ATMEL LRN he little Maora To Add An Image t
15. uch Ir Element An item in an EditBox like a single building block such as a paragraph of text or a bullet list Component A more complex pre built building block constructed from a set of Elements such as an image with a title Components are marked by a Gear next to the pencil on the Edit Button 2 Toolbox Overview These are the basic functions that the Toolbox enables you to carry out e Add remove and edit the Text located in the EditBoxes on your website e Up load and keep a Library of jpg Images ready for use on your website e Add or remove Image Elements located in EditBoxes on your website e Re arrange Elements blocks of Text Images and pre built Components on the pages of your website 3 Toolbox Instructions This set of instructions is to help the new user to pick up quickly some of the basic functions of the Toolbox The Right Web Browser First make sure you re using a supported Web Browser e Google Chrome currently the best choice e Mozilla Firefox e Apple s Safari Please note that the Webascent Toolbox CMS doesn t currently support Internet Explorer To Open the Toolbox For all work on your pages you will need to open and then log into your Toolbox You open the Toolbox by clicking on a usually small hidden link located in the footer area of each of your site s pages we will let you know where yours is located This will open up the Toolbox s Main window where you enter your User Name am
16. w Element Above or Below the selected Element in the EditBox If you don t select an existing Element in the EditBox whatever you want to add will be placed at the top of all existing material if the Above button is highlighted and at the bottom if the Below button is highlighted If there is no existing material on the page whatever you add will just start at the top You will then be able to arrange and re arrange any subsequent Elements around it as you wish Use the Add Element drop down menu located above the Above Below buttons and click on the m Text Element you would like to add to the EditBox Heading 1 2 or 3 paragraph etc lt hi gt Heading 1 lt h2 gt Heading 2 lt h3 gt Heading 3 This New Element will appear on your page in the form of a new Element box with a solid red is a border It will have its own Edit button in the form of a pencil with the appropriate label p for TES paragraph h1 for Heading 1 etc The Element button will be selected the Pencil icon will be cev WAS harn in lima Peri in 1 yellow indicating that it is ready to be edited in the Toolbox s Text Editor You can now put your text into the Toolbox Formatting A B 2 T Either type directly into the Toolbox or use the Paste button to place a chunk of text from another L ura s document into the Toolbox s Text Editor The text is updated on your page as you type in the PERENA ey Toolbox When you have finished click
Download Pdf Manuals
Related Search