Basespace asks that Community Members treat this document as confidential. Please do not duplicate, use, or disclose in whole or in part for any other purpose other than to evaluate the document internally.
Basespace User Manual. 1
Introduction to Basespace. 5
Getting Started: 5
Login to Basespace: 5
Base: 6
CMS. 6
Profile. 6
Costs. 6
Touch Base. 6
Logout 7
Basespace Content Management System... 8
CMS (Content Managing System) 8
‘Recent’ 8
‘Order’ 8
‘A to Z’ 8
‘Junk’ 8
‘Site’ 8
‘Stats’ 9
‘Add’ 9
‘Move’ 9
How to edit a page. 10
‘Keywords’ 11
‘Title’ 11
‘Display’ 11
‘Text’ 11
‘Thumb’ 12
‘Image’ 12
‘Link’ 12
‘Page Type’ 12
‘Open Academy’ 13
How to restore older versions of pages. 14
How to add a page. 14
Three ways to add an entry to the website. 15
How to view a page in your website. 15
How to delete a page. 15
The Image Library. 16
Image Quality. 16
Image Dimensions and Optimisation. 17
Image Names. 17
Using the Image Uploader 17
How to add an image to a page. 19
How to add a thumbnail to a page. 19
The Publishing and Moderation system... 20
Publishing or Unpublishing a Page. 20
The Website Preview CMS Controls. 21
How to use the Website Preview CMS Controls. 21
‘Edit’ 21
‘Order’ 21
‘New’ 21
‘CMS’ 21
‘Logout’ 21
Cascading Page Types. 22
‘General’ 22
Homepage. 24
Section.. 25
Gallery. 26
Links. 28
Article. 29
Embedded.. 30
Cart. 31
Contact. 32
Site Map. 33
Basespace is an innovative website design,
hosting and content management system supported by a thriving community of
developers and designers who deliver outstanding web presences to their
customers. With the Basespace content manager, you or your staff can look after your
new business website, reducing ongoing costs. Say goodbye to spiraling website
designer fees.
To get started, the first thing you need to
do is visit our website at: www.basespace.eu
Figure 1: The basespace Home Page
In order to start editing your website, you
need to login to the Basespace Control Panel.
You will see the ‘Member Login’ (shown
below) on the right hand side of the page or ‘Login’ on the top left hand side
of the page. It asks you to enter an ‘Email’ address and a ‘Password’. You
require a valid login email and password to enter into the system, if you do
not have one, contact us. To avoid having to rewrite your email address every
time you login, click the box next to ‘Add a Cookie’. Once you have entered
your details, click on the ‘Go’ button shown below. If you would like to read
the Basespace Privacy Policy click on the small red and blue speech bubble next
to ‘Add a Cookie’.
Figure 2: Control Panel Login
After you have logged into the Basespace
Content Management System, you will be in ‘Base’. The light green navigation
bar shown below, will take you back to the Basespace website without logging
you out. Click on ‘Base’ to view the options below in the dark green navigation
bar. This secondary navigation bar has a number of options that will take you
to different pages. They are listed below:
Figure 3: Primary and Secondary Navigation Bar
This is the home page of the Basespace
Content Management System. Here your content manager gives you full control of
your website entries so you can add, edit, move, hide and delete entries. The first page of the CMS you will see shows
you ten of the most recently updated pages in your website.
As a registered user you can use this space
to introduce yourself to other Community members and select options to
personalise certain Basespace features.
This page lists all the present and
forthcoming coming costs attributed to your website.
If you need Basespace support you can send
us a message using the form on this page to get in touch as soon as possible.
If you click on ‘Logout’, you will
automatically be logged out of the Basespace Content Management System and will
return to the Basespace Home page. If you would like to carry on editing your
website, you will have to login again.
This is the heart of the Basespace system,
and is where most of the magic happens! Here you will make changes to your
site, add pages to it and control what your audience sees.
When you click on ‘CMS’ you will
automatically be shown a page called ‘Recent’. Other options are available on
either side of this button. These are called the ‘CMS Controls’ and are
discussed below:
Figure 4: CMS Controls
This shows you ten of the most recently
updated pages in your website, with the date it was last updated. It also gives
you the option to edit, view, delete, publish and unpublish these pages.
When you click on ‘Order’ you can see all
your website pages and how they are connected. Dates of when all your pages
were last updated will be shown along with the options to edit, view, change
the order of, delete, publish and unpublish these pages.
‘A to Z’ allows you to view pages in
alphabetical order which can make it easier to find pages if you have a large
website. It shows the dates of when each page was last updated and also gives
you the option to edit, view, delete, publish and unpublish these pages.
Items that have been deleted are shown
here. The date that they were sent to ‘Junk’ is shown, along with the options
to edit, view and permanently delete these pages.
When you click on ‘Site’, a preview of you
website is shown with the CMS Controls on the page. We refer to this as the
Website Preview Mode. These tools allow you to open the ‘CMS’, logout, edit the
content, add a new page or entry, unpublish and change the order of your pages.
‘Stats’ is currently a work in progress, we
are designing it to show your website’s traffic statistics.
This adds a new Site Page to your
website. You have the option of adding a
‘standard’ page, a ‘connected’ page or an ‘embedded’ item to your website.
You can move a Site Page by clicking
‘Move’.
There are four buttons which form the CMS
Controls and provide the easiest way to edit a page in your website. These
buttons are: ‘Recent’, ‘Order’, ‘A to Z’ and ‘Site’. Each of these areas has a
unique way of presenting the pages in your website. ‘Recent’ shows the latest
ten changes you have made to website pages. When you click on ‘Order’ you can
see all your pages and how they are connected. ‘A to Z’ allows you to view
pages in alphabetical order which can make it easier to find pages if you have
a large website. Clicking on ‘Site’ shows you a preview of your website and
above each entry is a set of CMS Controls with the button ‘Edit’ (shown below).
We will discuss this view in more detail later.
Figure 5: Website preview CMS Controls
The image below is called the Page Editor.
This is what will be shown on your screen once you have clicked on the page name
you want to edit in either ‘Recent’, ‘Order’ and ‘A to Z’. If you click on the
blue ‘EDIT’ button in the Website preview mode you will also be presented with
the Page Editor.
Figure 6: Page Editor
Now we will explore the fields in the Page
Editor:
As part of an advanced search engine
optimisation technique, each page can be optimised for a specific set of
keywords. The keywords entered here will override the default keyword set used
for the whole website (this default keyword set was entered when the site was
launched).
The title of the page is written in this
field and is shown as the heading for each standard page, connected page and
embedded item.
The text entered into this field will be
displayed in your website as a button, so it should refer to the text in the
‘Title’ field above it, but because it is displayed in a button, the text
should be kept reasonably short. ‘Display’ in a standard page would be a button
on the Primary Navigation Bar, for example: ‘Home’ or Contact Us’. ‘Display’ in
a connected page would be a button on the top right hand side of the page,
taking you to a connected page of that standard page. ‘Display’ in an embedded
item does not show up because embedded items do not have buttons though it is
still advisable that text is entered into the ‘Display’ field for embedded
items.
This is where the body of your text is
written. The formatting bar gives you the ability to change your text, the
options available are:
- ‘Style’ allows you to change the style of how your text
appears, for example: paragraphing, headings etc. It is not advisable that
you change the default style, it is an advanced feature that could cause
problems with formatting.
- ‘Font’ changes the look of the writing.
- ‘Size’ changes the size of the writing.
- ‘B’ makes the text
bold.
- ‘I’ makes the text
italic.
- ‘U’ underlines the text.
- ‘Paragraphing Align Left’ means that text is paragraphed to the
left of the page.
- ‘Paragraphing Centre’ moves the text to the centre of the page.
- ‘Paragraphing Align Right’ aligns the text on the right hand
side of the page.
- ‘Ordered List’ lists text in a numerical order.
- ‘Unordered List’ provides bullet points for a list that has no
specific order.
- ‘Insert Link’ allows you to insert a link into your text.
- ‘Remove Link’ removes a link from your text.
- ‘Insert Special Characters’ allows you to insert special
characters that are not on the keyboard.
- ‘Spell Check’ checks the spelling of the text in the body of
the Page Editor.
- ‘Undo’ this takes a step backward and undoes your last input.
- ‘Redo’ redoes the last input, in other words it is a step
forward from the ‘Undo’.
- ‘Remove Formatting’ removes any formatting in the text.
See section 3 The Image Library.
See section 3 The Image Library.
Insert a link to an external website here.
This operates in a different way to the link tool mentioned above, in that t
inserts a stylised link – that is formatted behind the scenes in keeping with
the website style. Be sure to use the correct format, for example:
http://www.google.co.uk
This is an advanced feature, but an
understanding is necessary in order to create great looking websites! A further
explanation of each page type is available later in this document, in the
section titled ‘Page Types’. An important concept to grasp is that of ‘Page
Type Cascading’. This is a simple concept: If you label a page a certain Type,
for example Gallery, it will influence the style of all other pages that are
connected under or to it and handle them as Gallery entries. This is called
‘Page Type Cascading’. The Page types available are listed below:
- General
- Section
- Gallery
- Links
- Article
- Embedded
‘Open
Academy’
This is an important part of the site that
will be expanding greatly in the future. Here you can find this user manual in
HTML or PDF formats, some common questions we get asked and articles that
discuss Basespace and various web and design topics.
If you are editing an already existing
page, on the right hand side of the Page Editor there is a section called
‘Saved backups’. Under this heading there are buttons representing earlier
versions of the page you are working on. The amount of these vary for each
page, depending on how many times you have edited the page. The image below
shows us that if we click on one of the dates, it will restore the older
version of the current page. If you are adding a new page, ‘Saved backups’ will
not be present on the side of the Page Editor.
Figure 7: Saved backups
To add a new page to your website, click on
the button ‘Add’ which is located on the left hand side of the CMS Controls.
Once you have clicked on ‘Add’, the page below will be shown. Here you can
choose one of three ways to add a page.
Figure 8: Adding a new Site Page or item
- A ‘standard’ page
- A standard page is a top level page. When previewing your
website, a standard page is represented by a button on the primary
navigation bar.
- A ‘connected’ page
- A page that is connected to a standard page. It is a
sub-section and you can have connected pages under standard pages, up to
three levels deep. When previewing your website, connected pages can be
accessed by buttons in the sub-navigation. Connected pages can be
influenced by ‘Page Type Cascading’ as mentioned earlier.
- An ‘embedded’ item
- Embedded items can only be added to an existing page, they
don’t have their own buttons like the two above. Many embedded items can
be added to either a standard or a connected page. Adding an embedded
item provides you with the means to have more than one heading, image and
paragraph on a page.
You can preview a page in your website by
previewing the whole website, detailed earlier, or by simply clicking the
little icon below. This icon is found opposite every page in ‘Recent’, ‘Order’
and ‘A to Z’ in the CMS Controls
Figure 9: View a page in your site
If you would like to remove a page from
your website, you can move it into the junk folder by pressing the junk button (shown
below). It is found opposite every page in ‘Recent’, ‘Order’ and ‘A to Z’ in
the CMS Controls. If you are previewing your website and you are looking at an
unpublished page, a yellow block above the Web preview will also contain the
‘Junk’ button. Click on ‘Junk’ and then click ‘OK’ if you would like to delete
the page you are viewing. If you are sure that you do not need the page you are
removing, it is stored in ‘Junk’ , one of the CMS Controls (shown in figure 4).
You can permanently delete a page entering the Junk CMS Control and clicking
the red X button next to it.
Figure 10: Move a page to the Junk folder
Figure 11: Image Library
The image library helps you to upload and
manage the images that you choose to use on your website. When uploading images
to your website, Basespace offers the flexibility of using its own image
uploading, sizing and compression tool, or you may elect to use the images ‘as
is’ although this is an advanced function requiring knowledge of image editing
tools like Photoshop or Paint Shop Pro. We describe how both methods can be
used in the section titled ‘Using the Image Library’. A few important points to
remember when adding images to your website:
Try to keep the images of a high quality.
Visiting sites like www.fotolia.co.uk
will allow you to browse and purchase images from a library of millions.
Fotolia is recommended by Basespace as it has the most reasonable cost (as
little as 0.57p per image) and is easy to use.
Always use a standard pixel size for your
images and always compress them, striking a balance between quality and data
size. If you choose to edit the images yourself and upload them as is, we
recommend using an image editor like Corel Paint Shop Pro or Adobe Photoshop.
We also recommend strongly that image width
remains uniform, however if required you can have varying heights to your
images but this detracts from the neatness of the site. Follow the picture
heights and widths that have been created for you or do a little
experimentation. There are typically 4 different image dimensions and data
sizes in a standard Basespace Foundation site:
- Thumbnail
80w x 80h pixels. Data size less than 10 kilobytes.
- Body
image 260w x ? pixels. Data size less than 40 kilobytes
- Pop up
Gallery image 600w x ? pixels. Data size less than 80 kilobytes
- Header
image 800w x 100-150h pixels. Data size less than 80 kilobytes.
The Image library has a few features that
help you find the image you want. One of these is alphabetical listing of the
images that you have uploaded. By labeling each image with a prefix such as t_
(for thumbnail) or b_ (for body) you will make them much easier to find by
type. Always use an underscore instead of spaces when naming an image, as this
helps compatibility with browsers.
New to Basespace is our very own image
selection and compression tool. To get started with the new tool, click on the
button ‘IMAGE’ which is opposite the field ‘Image’ or ‘Thumb’ (shown below in
figure 13). This will open your Image Library in the right hand panel and start
the process. If you don’t have any images in your library yet, no images will
be listed.
- Uploading a new image: Click ‘Upload a New File’, this will bring up instructions on
how to add a new file as seen in Figure 12.
- Step 1:
Click the ‘Browse…’ button.
- Step 2:
After clicking ‘Browse…’ you will be presented with a familiar ‘Open
File’ Windows dialogue. Locate the image you would like to insert into
your page. Click ‘Open’ or double
click the name of the image. This enters the filename and path of the
image in the box to the left of the ‘Browse…’ button.
- Step 3:
Click ‘Upload Image’. The image will open in the Selection Window.
- Step 4:
As described earlier – if you have already worked your images up in a
tool like Photoshop or Paint Shop Pro click the ‘Full Size’ button to use
the image as is. If you have not optimized your image already and you
would like to use the Basespace selection tool then please continue with
this step. Use the red selection box to choose the area of the image you want to display. To resize the
selection box, so as to only choose a part of your image, use your mouse
to drag the sides up, down, left or right or drag the corners to move the
selection box diagonally. Click the centre of the box to move it anywhere
on the image. The image uploading tool will automatically resize the
image for you to either thumbnail or main website image sizes.
- Step 5:
If you would like to upload the image as is then click the ‘Full Size’
button. If you have finished selecting the preferred area of your image
click ‘OK’ to upload it.
- Step 6:
Finish by clicking the green button ‘Close file upload’ and then find
your image in the Library which is highlighted in green, making it easier
to find. Click on it and then Save the page you’re working on.
- Previewing an image:
If you would like to preview the image in the library, before adding it to
the page, then click on the ‘Preview image in new window’ button <> which is on the left hand side of the
file names.
- Deleting an image: If
you would like to delete a file in the Image Library, click on the red X
button on the right hand side of the file names.
- Closing the image library: If you would like to close the Image Library so that it is not
visible, click on ‘Close File Library’ button.
Figure 12: The image uploading tool. Figure 12.1: Choosing an area of the image
using the image tool.
Click on the button labeled ‘IMAGE’ which
is opposite the field ‘Image’. This will open the Image Library in the right
hand panel. The names of your images will appear in the list, highlighted in
green under ‘Your files:’. Click on the image name to add the image to your
page.
Remember that the little photograph icons
allow you to preview the image if required. Once the image is added to the page
editor and the page is saved, you will be able to see the image in the website
preview.
Figure 13: Adding a new image
Click on the button labeled ‘IMAGE’ which
is opposite the field ‘Thumb’. This will open the Image Library in the right
hand panel. If you don’t have any images in your library yet, no images will be
shown. Remember that the little
photograph icons allow you to preview the image if required. Click on the image name to add the image to
your page. Once the image is added to the page editor and the page is saved,
you will be able to see the image in the website preview.
Publishing a page means that when you visit
your website as a normal or public web user the page is visible. If a page is
not published, the normal or public web user will not see it. However, as the webmaster of your website,
unpublished pages are always shown to you once you have logged in and viewing
the site in Web Preview mode. A page can be published, unpublished or held for
moderation. This system is a simple but effective way to control what is seen
by your web site viewers and when.
Basespace has been designed to prevent
newly created pages or embedded items from going live immediately; thereby
giving you the opportunity to check that the page has been laid out correctly
and that grammar and spelling mistakes can be corrected. This is called
Moderation, and utilises the publish/unpublish mechanism. You can also manually
unpublish a page if required. A scenario where this is very useful is if a
seasonal special offer has expired. Simply unpublish the page and wait until
the special offer is current again – to re-publish it. The advantage of being
able to unpublish pages is that you need not lose what work you have done when
you want to remove the page from your site.
- Manually
changing a page’s published status: There are various ways to publish a
page. The simplest is via the little red or white page icon adjacent to
each page entry in the CMS. Visit either ‘Recent’, ‘Order’ or ‘A to Z’ and
then click on the white Unpublish page button or the red Publish page
button which is opposite the name of the page you are working with.
- Changing
a page’s published status from the website preview mode: If you are
previewing your website and a page is unpublished (indicated by [square]
brackets around the pages link/button) a yellow area above the website
entry titled ‘Requires Moderation’ will have ‘Publish or Junk’ buttons in
it. Click on ‘Publish’ and then click ‘OK’ if you would like to publish
the page you are viewing.
Figure 14: The Published status icon
Figure 15: The Unpublished status icon
Figure 16: Website Preview CMS Controls
Editing your website using this method is
slower, however it can help you to make changes to your website more easily as
you become accustomed to managing your website with Basespace. The Website
Preview CMS controls above are visible when you preview your website. There is
a set of these Website Preview CMS Controls above each entry in your website so
that you can edit each of them individually.
If you click on ‘Edit’, you will be taken
straight to the Page Editor where you can edit the page you were previewing in
your website.
When you click on ‘Order’ you are taken to
the CMS Control Panel and can see all your pages and how they are connected.
Dates of when all your pages were last updated will be shown along with more
options to edit, view, change the order of, delete, publish and unpublish these
pages.
This button takes you to the Add Page Options
(shown in figure 8) where you can add a new Site Page to your website. You have
the option of adding a ‘standard’ page, a ‘connected’ page or an ‘embedded’
item to an existing page.
This button takes you to the starting page
of the Basespace CMS called ‘Recent’. Here you can see ten of the most recently
updated pages in your website, with the dates they were last updated. It also
gives you the option to edit, view, delete, publish and unpublish these pages.
The other CMS Controls are also available here (shown in figure 4).
If you click on ‘Logout’, you will
automatically be logged out of the Basespace Content Management System and will
return to the Basespace Home page. If you would like to carry on editing your
website, you will have to login again.
Figure 17: Page Type
One of the most important concepts to grasp
when working with a Basespace website is that of ‘Cascading Page Types’. Each
page type has a set of rules operating in the background that change the way
they display in the site structure and
crucially the way pages connected to them behave – in other words, the page
type cascades to the pages below it (to read more about connecting a page read
the section titled ‘How to add a page’ on page 14). By using different page
types you can get the most from your website and make it a really interesting
place to visit, so experiment with different combinations!
The page type can be changed in the Page
Editor under the field ‘Page Type’ (shown above). Here is a brief description
and a screenshot of each page type:
A ‘General’ page contains a body of text
along with one body image. The General page is the most basic building block in
the Basespace Foundation system. You can create a General page at the top level
of your website, or you can connect it to any other type of page (except
Embedded). You can also insert as many Embedded entries as you like into a General
page, although we advise keeping pages to a reasonable length.
Figure 18: Example of a General Page, with another General page as a sub-page
(‘Carpentry’).
The Homepage page type is locked into the
system to ensure that your website has at least one page, and can only be added
at the top level of your website. It typically matches the characteristics of
the page Type ‘General’, in that it has a body of text and one body image.
Figure 19: Example of a Homepage with one Article type sub-page (‘News’) and
one Sitemap type sub-page (‘Sitemap’).
This page type can be a top level page or
it can be connected to any other type of page except an embedded entry. A
Section page is useful if you intend creating an area of your site with
sub-sections connecting to it. Like all the other page types, you start with a
body of text and a body image. For example, the image below shows a ‘Projects’
page with each project as a sub-section eg. ‘New build home, Pymoor’. The
benefit of a Section page is that each sub-section is introduced with a thumbnail
and teaser in the main body, and in the secondary navigation menu on the
right. You can connect any other type of
page to a Section, except Homepage and Embedded items. This can lead to some
interesting and useful combinations. In the example below, we have created a
Section type page, with Gallery type pages linking to it, as it was the best
way to show off each project.
Figure 20: Example of a Section page with Gallery type sub-pages.
This page type can be a top level page or
it can be connected to any other type of page except an embedded entry. It is
used when you wish to create a gallery of images, which are shown as thumbnails
with a short description. On click, the thumbnail links you to a larger pop up
image. See ‘Image Dimensions and Optimisation’ under ‘The Image Library’ on
page 16 to optimize and your images correctly. You will start by creating a
body of text and inserting a body image if required, as in the example
below. Then the pages that you connect
to your Gallery page, will automatically be of page type embedded (as this is
what the Gallery must use) and will display as a thumbnail, description and pop
up image.
Figure 21: A Gallery Page, with four embedded entries linking to it,
producing the thumbnails, descriptions and body images.
Figure 22: The pop up gallery image with on screen controls.
A Links type page can be a top level page or
it can be connected to any other type of page, except an embedded item. Like
all the other page types, you start with a body of text and a body image and
your offsite links (other websites) are displayed as thumbnails and a stylized
teaser. You will need to enter the full website address in the ‘Title’ field
and a description in the ‘Info’ field’ to complete the entry. See the example
below:
Figure 23: A Links Page, with an offsite link to www.toolsandmaterials.co.uk
This page is used for news articles, blogs,
or other bodies of text that you wish to create a list of over time. You will
start with the option to enter a body of text and body image like other page
types. We only recommend that ‘General’ pages are connected to ‘Article’
pages. As can be seen in the example
below the first and latest news article is given pride of place with a
thumbnail, teaser and ‘read’ link. The next two latest news stories are given a
thumbnail and teaser each. Thereafter the news stories are shown as single line
links. All the pages connected to the Article page are also shown as links on
the second level navigation on the right. This layout allows for a good depth of
content in the area of the site and presents it very effectively.
Figure 24: An Article Page
An embedded entry can only be connected to
an existing page, but it can be connected to any type of page. If you cast your
mind back, you will recall that Homepage, General, Section and Article pages
only allow for one title, body of text and body image. This may seem limiting –
but is easily solved with the Embedded page type. This page type gives you the
opportunity to add another title, body of text and body image to these page
types, as many times as you like. See the example below.
The exceptions to the rule is in the case
of a Gallery page and Links page. The Embedded page type will create a new
Gallery image and in the case of the Links page the Embedded page type will
create a new offsite link entry.
Figure 25: Embedded Items on a page, showing titles, text and images.
The Cart page type is actually the gateway
to our online shopping system Expansion that allows you to sell and take credit
card orders via your Basespace website! The Cart Expansion will allow you to
manage your products for sale in sections, upload pictures, postage and prices
and take orders by credit card online. The Cart Expansion is an optional extra
to Basespace and we will cover its use in another manual.
Figure 26: The Basespace Cart Expansion.
A Contact page type lists all of your
contact detail and presents a contact form to your visitors. By filling in
their details, they can quickly and easily get in touch with you via email. The
details in the form are filled in by the Basespace team, so they are fixed.
Simply email us via the Support Centre in your control panel to make any
changes to these details.
Figure 27: The Contact Page
This page type is very useful for a number
of reasons. Firstly, it allows visitors to quickly see the whole of your websites
pages in a logical structure. Secondly it allow search engine crawlers
(automated software systems used by search engine companies to read websites)
to easily find every single page on your website and index them effectively.
Finally, the Sitemap page will also allow your visitors to subscribe to an RSS
feed of your website. RSS (standing for Really Simple Syndication) is a new way
of providing your visitors with a constant link to your websites content, so
that they can see changes as they happen to your website. Browser software like
Internet Explorer provides an option to use an RSS feed as an ‘enhanced’
favourites list, that alerts your visitors when a change is made to your site –
without them even needing to visit your site.
If this sounds too technical – then put
simply it is the way forward for users to subscribe to information they want to
see in this information rich world!
It is common to find the ‘site map’ page connected to the homepage of a
website.
Figure 28: The Site Map