SnippetMaster Content Management System (CMS)

A Content Management System allows you to edit your own web pages from any internet connected computer.



You would use a CMS when you have to make frequent changes to web pages. Content such as newsletters, new product updates, restaurant menus and events are typical examples where frequent changes are needed to be made. Where occasional changes need to be made or where major design changes are needed then it is still best to use your web developer.

Snippetmaster comes in two versions - SnippetMaster Lite (with limited functionality) and SnippetMaster Pro (full featured).
SnippetMaster Lite is free of charge and allows text only editing of webpages. You are not able to insert or upload pictures or upload new files. Snippetmaster Pro is a fully featured content management system.

Information below with a light yellow background applies to SnippetMaster Lite users, whereas the the whole document will apply to Snippet MasterPro users.

Please see our Demo system to play around with SnippetMaster Pro.

Administration and setup
Installation
The Administrator/ Web Developer needs to install SnippetMaster. After installation, the default version of SnippetMaster is the Lite Version. For a fee SnippetMaster Lite can be converted by the Administrator into Snippetmaster Pro by purchasing a license and installing the license code.

Preparation
During consultation with the client, it must be established which web pages will need to be editable and also which sections of those web pages. Users and user groups will need to be set up and be given the correct permissions to edit those web pages or areas inside the web pages. These areas are called snippets. Once the Admimistrator/ web developer has created these users or groups of users, a simple html code needs to be inserted to the relevant web pages at the start and end of the snippet areas.
E.G.
<!-- #BeginSnippet name="Home Page" users="karen" -->
<P>Area of web page to be edited</P>
<!-- #EndSnippet -->

Included in the preparation the Administrator/ Web Developer can put an Admin Login link on the home page or on the relevant pages so that a User can enter into the SnippetMaster program directly from the web page itself. Another method is to put a bookmark, favorite or desktop shortcut to the Snippetmaster program. This link is usually http://www.domain_name.co.uk/snippetmaster/

User instructions
Preparation
Create a folder on your computer where you will store your text, image and document files, so you have it all in one place when you get to the point of editing your web pages or do any uploading of images or files.

Before going into Snippet Master to do the content management it is important to plan the developments and changes you wish to make to your web pages.

Text. Open Notepad or MSWord and prepare your text so that you can later select it to copy and paste into SnippetMaster.

Images. Make sure the images are looking their best and cropped with just the important bit in view. Your Images should also be their smallest possible size so that they do not dominate your web page and allow for fast web page loading. Your image must also be saved in the appropriate file format - .jpg, .gif or .png. Use your favourite image editing program to do all these things and take note of your image dimensions - both width and height. If you don't have an imaging editor use the the Windows Vista or Windows XP program called Paint, which can be found under Programs, Accessories. An excellent free image editing program is called Paint dot net (click to download it from the Paint dot net website).

Documents. Use the relevant program on your computer to create the document you want and then convert it to an Adobe Reader PDF file. You would upload this file and then create a link to during your SnippetMaster session. Typically these could be newsletters, press releases, instruction manuals or articles. To save a document on your computer as a PDF you need to have a PDF printer installed. I recommend PDF Redirect from EXP Systems (click to go to website). They offer two versions - Free and Professional. If the Free version is too limiting for you you can easily switch to professional and try it out for the trial period.

Using SnippetMaster

1. Open SnippetMaster from the link on your website or select it from the shortcut in your Favorites, Bookmarks or Desktop.
2. At the SnippetMaster "Please log in" screen enter your Username and Password and click the Login button.
   

Uploading files
Notice the 4 menu items on the top right of the screen, one of them is called upload. You cannot create any links to documents or insert any images until they have first been uploaded to your hosting web space, so if you have documents and images to upload, then now would be a good time to do so.

1. Click the upload menu item. (Otherwise to edit a webpage go to Editing Web Pages further down this page)
   An upload dialog box appears.
2. Click the dropdown list button to the right of the Destination box and select a destination to where you wish to upload to.
   Most systems will be set up to have two folders - images and docs. Select the relevant folder.
3. To the right of the File box click the Browse button and navigate to the folder on your computer where you have stored your prepared image or document files and select the file to upload. Click Open.
4. Back in the upload box click OK.
   You will get an upload success message if the upload was successful.
   
   You can now click the Back button to repeat the steps above for all the files (documents and images) you wish to upload.
   
5. When you are finished uploading click the Close button.
   

(You might want to take note of the image size - width and height, by holding your mouse over the image before clicking on it to select it for the upload process - this may be useful later in when you are inserting it in your web page)

Please note that only certain file types and a file size restriction is in place for uploaded files. This has been preset by your administrator to minimise mistakes and large files.

Editing Web pages
To edit, insert images or to create links to documents on a web page do the following:

1. Click on the dropdown list button to the right of the Select a file: box.
2. Under the section called Snippets click on the file you wish to edit.
3. Click the open button to the right of the Select a file: box.
4. The drop down list will only display the snippets in the files your administrator has prepared for you.
5. Your snippet now opens in a WYSIWYG (What You See Is What You Get) format. It looks like a standard word processor with the formatted snippet in a window below a set of formatting icons. A friendly Snippet name is displayed above on the left and above that are the Save and Preview buttons.

You can now edit the page
The instructions below will show you how to edit or add text, images and create hyperlinks (where the pdf documents you prepared above are used).

Text
Open the text document you prepared on your computer beforehand and copy it all to the clipboard.
Go back to your Snippetmaster web page and click your mouse at the point where you want to insert your text. If you want to replace text then use your mouse to highlight all the text you wish to replace. Now click on the relevenat icon to paste your text. Choose for normal paste, for plain text, for text copied from a Word document.

Images

1. Click in the web page where you wish to insert an image and click on the Insert/Edit image icon.
   An Insert/edit image dialog box opens.
2. Under the General tab:
   to the right of the Image Url box is a browse icon, click this icon and a new File Browser dialog box opens.
   • Select the images folder by clicking on it ONCE, and select the image you wish to insert (again only one click).
     A preview of your image is dsplayed in the preview pane to the right.
   • Click the OK button below the URL box. (The URL box is the actual location of the file you have just selected and you can safely leave this box as is).
   • Give the image a description and a title by completing the corresponding boxes. The description and the title should be exactly the same - these are the bits of information that pops up in a little yellow box when a user holds their mouse over the image.
3. Under the Appearance tab:
   • Set the alignment of the image by clicking on the dropdown list button to the right of the Alignment box. A sample preview will be displayed in a box on the right.
   • Set the image dimensions in the Dimensions boxes. The first box will be the width and the second the height in pixels. The image dimensions should automatically be inserted, if not, use the notes you made earlier for the dimensions of that image. If you decide to make the image smaller, just enter a smaller dimension and leave the Constrain proportions box ticked.
   • Vertical and Horizontal space.  This is where you can put in a number from 1 upwards to create space above and below the image as well as to the left and right sides.
   • Border To set the image without a border, type a 0, otherwise give it a border width from 1 upwards.
   • The style box at the bottom calculates the code for all the settings you have just inserted. You may want to change the border colour from black to a colour of your choice. To do so add the following code into this box: "border-color: colour;" replace the word colour with a colour of your choice - e.g: green, red, blue etc.
4. Under the Advanced tab:
   Here you can use Alternative images and these are useful when you use the image as a link, so that it cahnges when the mouse is hovered over the image.
   
5. When you are finished click the Insert button at the bottom.

To make changes to the image simply select it with the mouse, right click and click Image properties or click the Insert/edit image icon again.


Hyperlinks
A hyperlink is a word, phrase or image that, when clicked, will take you to a new web page, image or document.

Prepare your hyperlink word, phrase or image on the SnippetMaster page. Do this by typing the word or phrase or by inserting an image.

Note: If you plan to create a hyperlink to another web page, then it will best to open a new internet browser window now and navigate to that page so it displays in your web browser.

Now click in the URL address bar, the whole address should automatically become selected, right click and select copy or use the keyboard copy sequence by holding the Ctrl key down and tap on C (Ctrl + C). Back on your SnippetMaster page, to create a hyperlink, do the following:

1. Use your mouse to select your prepared or existing word, phrase or image.
2. Click on the Insert/edit link icon.
   An Insert/edit link dialog box appears.
3. Under the General tab click in the Link URL box.
   If you wanted to hyperlink to another website page, paste that page location here - rightclick and select paste or use the keyboard paste sequence by holding the Ctrl key down and tap on V (Ctrl + V). Otherwise click on the browse icon to the right of the Link URL box.
4. A new Browse dialog appears.
5. Select either the docs or images folder by clicking on it once.
   (You may have different folder names for your uploaded files).
6. Click once on the file you wish to link to and click the OK button.
7. Back at the Insert/edit link dialog, click the dropdown list icon to the right of the Target box and select how the hyperlink must open
   • select Open in new window if you wish the current page to stay available,
   • select Open in this window/frame if you would like the link to replace the page the user is seeing.
8. In the Title box give the link a suitable title name.
   This will appear as a popup yellow box when a user hovers the mouse over the hyperlink.
9. Lastly click the Insert button.
   

Once the hyperlink is made you will see the text change colour according to the style sheet settings for hyperlinks. Images may get a coloured border around it. To remove the coloured border of an image you would need to set the border to "0" - see border above.

Once you are finished editing, look near the top of the screen and click the Preview button to see how it will look.

To save your changes you must click the Save button.

Open a new browser window and navigate to the relevant web page on your website. If you don't see any changes then don't panic, simply refresh the page ( icon for Internet Explorer or icon for Mozilla Firefox), and your changes will be reflected.


When all is complete click the logout menu item on the top right of the screen.

---

Need any further help? Please contact Martin's HelpDesk.