your db primary website tool. initial set up 1. creating a website storage area 2. setting up your...

45
Your DB Primary Website Tool

Upload: edith-stewart

Post on 22-Dec-2015

219 views

Category:

Documents


0 download

TRANSCRIPT

Your DB Primary Website Tool

Initial set up

1. Creating a website storage area2. Setting up your school website

3. Creating additional website editors

Page Design

4. Creating pages5. How to edit your page and add additional content

6. Tagging Files in your website community

Advanced Editing Tools

7. Page Properties: deleting pages and changing titles8. Clearing a page

9. Publishing your website10. The advanced page design view

Contact Support

Initial set up

1. Creating a website storage area2. Setting up your school website

3. Creating additional website editors

Page Design

4. Creating pages5. How to edit your page and add additional content

6. Tagging Files in your website community

Advanced Editing Tools

7. Page Properties: deleting pages and changing titles8. Clearing a page

9. Publishing your website10. The advanced page design view

Contact Support

DB Primary Website Tool

Objective 1: Creating a website storage area

Step 1:

• Log into the learning platform as the ‘superadmin’ user.

•Click on the Administration tool box

Step 1:

• Log into the learning platform as the ‘superadmin’ user.

•Click on the Administration tool box

Prior to setting up your website you will want to create a website storage area on the learning platform.

This will be somewhere you will store photos and documents and create blogs and a calendar that can be displayed on the website.

Prior to setting up your website you will want to create a website storage area on the learning platform.

This will be somewhere you will store photos and documents and create blogs and a calendar that can be displayed on the website.

Step 2: Click on the ‘Communities’ tabStep 2: Click on the ‘Communities’ tab

Step 3:

•Click on the ‘Create Community’ button

Step 3:

•Click on the ‘Create Community’ button

Step 4:

• Select from the drop down list the ‘School Website Content’

• Type in the field ‘Website Content’

• Click on the ‘Create’ button

Step 4:

• Select from the drop down list the ‘School Website Content’

• Type in the field ‘Website Content’

• Click on the ‘Create’ button

Step 5:

•The ‘Gallery’ can be used to store photographs using the tagging system

• Click on the ‘Gallery’ button

Step 5:

•The ‘Gallery’ can be used to store photographs using the tagging system

• Click on the ‘Gallery’ button

Step 6:

• Click on the area that says ‘Create a new tag’

Or

• Hover over the ‘All Files’ and click on the white arrow pointing down.

• Select ‘Create tag’

Step 6:

• Click on the area that says ‘Create a new tag’

Or

• Hover over the ‘All Files’ and click on the white arrow pointing down.

• Select ‘Create tag’

Step 7:

• Type in the name of the tag e.g. School Polices or Class Trip Photos

Step 7:

• Type in the name of the tag e.g. School Polices or Class Trip Photos

Step 8:

• Select the tag that you would like to upload to.

• Click on the upload button and follow the onscreen instructions.

Step 8:

• Select the tag that you would like to upload to.

• Click on the upload button and follow the onscreen instructions.

Step 9:

• Click on the ‘Website Content’ button at the top of the screen.

Step 9:

• Click on the ‘Website Content’ button at the top of the screen.

Objective 2: Setting up your school website

Step 1:

• Log into the learning platform as the ‘superadmin’ user.

•Click on the Administration tool box

Step 1:

• Log into the learning platform as the ‘superadmin’ user.

•Click on the Administration tool box

Step 2:

• Click on the ‘School’ tab

Step 2:

• Click on the ‘School’ tab

Step 3:

• Click on the ‘Edit Site’ button located half way down your screen.

Step 3:

• Click on the ‘Edit Site’ button located half way down your screen.

Step 4:

• Select a choice for the website template. The next two slides will show you the examples of the different themes.

Step 4:

• Select a choice for the website template. The next two slides will show you the examples of the different themes.

Uniform ThemeUniform Theme

Countryside ThemeCountryside Theme

School FieldsSchool Fields

DB WorldDB World

Photo WorldPhoto World

Corporate ThemeCorporate Theme

Formal ThemeFormal Theme

Slider ThemeSlider Theme

Step 5:

• Once you have selected the theme for your school’s website you will be able to change the Primary and Secondary colours.

• If you place your cursor in the text box, you can use the preview to select your colour.

•You can also directly enter the six digit hex code to change the colour if you know this.

Step 5:

• Once you have selected the theme for your school’s website you will be able to change the Primary and Secondary colours.

• If you place your cursor in the text box, you can use the preview to select your colour.

•You can also directly enter the six digit hex code to change the colour if you know this.

Step 6:

• You have the option to change the default font for your website.

• Please note that if you select ‘Comic Sans’ then this will not display correctly on iPads or any other Apple devices as this is a Microsoft only font.

Step 6:

• You have the option to change the default font for your website.

• Please note that if you select ‘Comic Sans’ then this will not display correctly on iPads or any other Apple devices as this is a Microsoft only font.

Step 7:

• Selecting the different layout options allows you to choose a template for the Home page.

•This means whenever you create a new page within the website it will revert to that template for you.

• Beginners could use the ‘Picture & Text’ but this is entirely up to the user.

Step 7:

• Selecting the different layout options allows you to choose a template for the Home page.

•This means whenever you create a new page within the website it will revert to that template for you.

• Beginners could use the ‘Picture & Text’ but this is entirely up to the user.

Step 8:

• When the ‘Hide Login’ button is ticked this will prevent children and other users from logging into the learning platform.

• This could be useful if you want to build your school website before rolling out the learning platform.

Please remember to enable this at a later date.

Step 8:

• When the ‘Hide Login’ button is ticked this will prevent children and other users from logging into the learning platform.

• This could be useful if you want to build your school website before rolling out the learning platform.

Please remember to enable this at a later date.

Step 9:

• Google Analytics Tracking Code is a free service provided by Google that allows you to track data about how your website is being used.

• Whilst this is primarily for commercial businesses, some schools find it useful to use this service to understand how well their website is performing.

• If you would like to use Google analytics, just visit Google and sign up for a ‘Google Analytics’ account.

• They will give you a tracking code to put on your website.

• After about 48 hours from putting the tracking code into your site you will start to receive data.

Step 9:

• Google Analytics Tracking Code is a free service provided by Google that allows you to track data about how your website is being used.

• Whilst this is primarily for commercial businesses, some schools find it useful to use this service to understand how well their website is performing.

• If you would like to use Google analytics, just visit Google and sign up for a ‘Google Analytics’ account.

• They will give you a tracking code to put on your website.

• After about 48 hours from putting the tracking code into your site you will start to receive data.

Step 10:

• Meta Tag keywords are used to help search engines understand what your website is about and how to index the search results.

• Type in 5 keywords in this box (any more and they will be disregarded) that best describe your school or site.

• This is often your school name and local area.

Step 10:

• Meta Tag keywords are used to help search engines understand what your website is about and how to index the search results.

• Type in 5 keywords in this box (any more and they will be disregarded) that best describe your school or site.

• This is often your school name and local area.

Step 11:

• Click the ‘Create Site’ button.

Step 11:

• Click the ‘Create Site’ button.

Step 12:

• Click on the preview button to have a look at your website.

Step 12:

• Click on the preview button to have a look at your website.

Step 13:

•The tool bar going across the top of your screen will allow you to enter ‘Design’ mode. Clicking on ‘Options’ will give you extra options such as publishing the website. These will be explained later.

• Click on the ‘Design’ button.

Step 13:

•The tool bar going across the top of your screen will allow you to enter ‘Design’ mode. Clicking on ‘Options’ will give you extra options such as publishing the website. These will be explained later.

• Click on the ‘Design’ button.

Step 1:

•To add another member of staff as a website editor, login to the learning platform as Superadmin and visit the Administration area.

Step 1:

•To add another member of staff as a website editor, login to the learning platform as Superadmin and visit the Administration area.

3. Creating Additional Website Editors

Step 2:

•Open the staff accounts folder by clicking on the plus next to the blue folder and then click on the pencil next to the relevant user to edit the account details.

Step 2:

•Open the staff accounts folder by clicking on the plus next to the blue folder and then click on the pencil next to the relevant user to edit the account details.

Step 3:

•Click on Settings to expand this option and then put a tick next to the Website Editor Option and save your changes.

Step 3:

•Click on Settings to expand this option and then put a tick next to the Website Editor Option and save your changes.

Step 1:

• Click on + Create New Page on your website menu to add a page.

•Type in the name of the page e.g. About Us, Contact Us, Our School etc.

• Press Enter on your keyboard to save your page.

• You can add in as many pages to your website as you like.

Please note that the Photo World theme will be restricted to showing the first five pages on the homepage but once you click into the website the other pages become available.

Step 1:

• Click on + Create New Page on your website menu to add a page.

•Type in the name of the page e.g. About Us, Contact Us, Our School etc.

• Press Enter on your keyboard to save your page.

• You can add in as many pages to your website as you like.

Please note that the Photo World theme will be restricted to showing the first five pages on the homepage but once you click into the website the other pages become available.

Objective 4: Creating pages.

To add pages within other pages use your mouse to hover over the page you would like to add a sub-page to and select + Create New Page .

To add pages within other pages use your mouse to hover over the page you would like to add a sub-page to and select + Create New Page .

Creating Pages: choosing a layout

•You will now be prompted to choose a layout for your page.

•Click on the relevant layout option as shown below.

•NB If you choose the blank layout, you will need to use the advanced editor if you would like to add a slideshow, video, document list to your page. Click here for more information on the advanced editor.

•You will now be prompted to choose a layout for your page.

•Click on the relevant layout option as shown below.

•NB If you choose the blank layout, you will need to use the advanced editor if you would like to add a slideshow, video, document list to your page. Click here for more information on the advanced editor.

Step 1:

To edit the content on your webpage click on the 'Design Page’ icon.

Step 1:

To edit the content on your webpage click on the 'Design Page’ icon.

5. How to edit your page and add additional content

Using the inline editing tools you will be able to add extra content to your pages. Click on the links below to find out more information about the available features:

•a slideshow•a thumbnail gallery •a document list •a video/audio file and record video or audio directly into your page •a single image •additional text

Before setting up your slideshow, thumbnail gallery or document list you will need to tag the files that you are going to use.

For instructions on how to set up your tags, please visit the How to Add Tags to your Files page.

Using the inline editing tools you will be able to add extra content to your pages. Click on the links below to find out more information about the available features:

•a slideshow•a thumbnail gallery •a document list •a video/audio file and record video or audio directly into your page •a single image •additional text

Before setting up your slideshow, thumbnail gallery or document list you will need to tag the files that you are going to use.

For instructions on how to set up your tags, please visit the How to Add Tags to your Files page.

Adding a SlideshowAdding a Slideshow

Step 1: Click on the Add Button to insert a slideshow. Select 'Slideshow or Slider' to add one of the two versions of the slideshow.

A slideshow will display your photos one-by-one on a rolling basis, whereas a slider requires you to click on the side of the picture to progress or review the images.

Step 1: Click on the Add Button to insert a slideshow. Select 'Slideshow or Slider' to add one of the two versions of the slideshow.

A slideshow will display your photos one-by-one on a rolling basis, whereas a slider requires you to click on the side of the picture to progress or review the images.

Adding a SlideshowAdding a Slideshow

Step 2:

From the drop down menu choose the community and tag where your images are located.

Step 2:

From the drop down menu choose the community and tag where your images are located.

Step 3:

To add in more than one tag just use the drop down list and select another tag.

Step 3:

To add in more than one tag just use the drop down list and select another tag.

Adding a Thumbnail GalleryAdding a Thumbnail Gallery

Step 1:

Click on the 'Add' button and from the menu select the 'Thumbnail Gallery‘.

Step 1:

Click on the 'Add' button and from the menu select the 'Thumbnail Gallery‘.

Step 2:

Select the relevant public community and tag.

You can add more than one tag by selecting from the drop down list again.

Step 2:

Select the relevant public community and tag.

You can add more than one tag by selecting from the drop down list again.

Adding a Document ListAdding a Document List

Step 1:

Adding a document list lets users download documents that are located in your website community gallery.

Click on the 'Add' button and from the menu select 'Document List'

Step 1:

Adding a document list lets users download documents that are located in your website community gallery.

Click on the 'Add' button and from the menu select 'Document List'

Step 2:

Select the relevant public community and tag.

You can add more than one tag by selecting from the drop down list again.

Step 2:

Select the relevant public community and tag.

You can add more than one tag by selecting from the drop down list again.

Uploading VideosUploading Videos

Step 1:

Click on the 'Add' button and select the 'New Video' feature:

Step 1:

Click on the 'Add' button and select the 'New Video' feature:

Step 2:

Locate the video from your computer.

Please ensure that your video is of an mp4 format which has been optimized for website use. This is usually the H.264 codex.

Step 2:

Locate the video from your computer.

Please ensure that your video is of an mp4 format which has been optimized for website use. This is usually the H.264 codex.

Creating audio and video using the in-built toolsCreating audio and video using the in-built tools

Step 1:

You can also record video and audio directly into your page using the in-built tools.

To do this click on the 'Add' button and select 'Existing Media‘.

Step 1:

You can also record video and audio directly into your page using the in-built tools.

To do this click on the 'Add' button and select 'Existing Media‘.

Step 2:

Select the relevant button to record audio or video.

Step 2:

Select the relevant button to record audio or video.

Creating audio and video files using the in-built toolsCreating audio and video files using the in-built tools

The built-in audio recorder will load allowing you to record, play, pause and stop. Please Note: In order to use the audio and video recorders you will require a microphone/webcam connected to the computer.

The built-in audio recorder will load allowing you to record, play, pause and stop. Please Note: In order to use the audio and video recorders you will require a microphone/webcam connected to the computer.

Uploading individual picturesUploading individual pictures

Step 1:

Click on the 'Add' button and select 'New Image' and locate the image on your computer.

Step 1:

Click on the 'Add' button and select 'New Image' and locate the image on your computer.

Step 2:

Once you have uploaded your image you can change its size by hovering over the image and in the bottom right corner will be a black dot. Click and drag the black dot to change the size of the image.

Step 2:

Once you have uploaded your image you can change its size by hovering over the image and in the bottom right corner will be a black dot. Click and drag the black dot to change the size of the image.

Adding Additional TextAdding Additional Text

Step 1:

Click on the 'Add' button and select 'Content':

Step 1:

Click on the 'Add' button and select 'Content':

Step 2:

Hover over the new content area and click on the pencil icon.

Here you will be able to enter text and style the writing using alignment & bullet points, different fonts, sizes & colours as well as creating hyperlinks.

Step 2:

Hover over the new content area and click on the pencil icon.

Here you will be able to enter text and style the writing using alignment & bullet points, different fonts, sizes & colours as well as creating hyperlinks.

Adding a blogAdding a blog

Step 1:

•Click on the 'Add' button and select the 'Blog' feature.

•Once you have clicked on the blog feature, you will be presented straight away with any blogs that have been created in the 'Website Content' community.

•You can specify the number of blog entries you wish to display on your school's website by changing the number and pressing enter on your keyboard.

Step 1:

•Click on the 'Add' button and select the 'Blog' feature.

•Once you have clicked on the blog feature, you will be presented straight away with any blogs that have been created in the 'Website Content' community.

•You can specify the number of blog entries you wish to display on your school's website by changing the number and pressing enter on your keyboard.

Step 2:

•To edit the blog you will need to click on the pencil (located in the top left hand corner of the blog section). This will take you to your website content community where you will be able to create a new blog entry.

Updating the public community blog will automatically push through to your website.

Step 2:

•To edit the blog you will need to click on the pencil (located in the top left hand corner of the blog section). This will take you to your website content community where you will be able to create a new blog entry.

Updating the public community blog will automatically push through to your website.

Adding a calendarAdding a calendar

Step 1:

•Click on the 'Add' button and select the 'Calendar' feature. •The calendar located in your website community will be displayed.•The calendar is displayed in month view by default, but you have the option to display your calendar in a number of different date formats.

Step 1:

•Click on the 'Add' button and select the 'Calendar' feature. •The calendar located in your website community will be displayed.•The calendar is displayed in month view by default, but you have the option to display your calendar in a number of different date formats.

Adding a calendarAdding a calendar

Compact Month ViewCompact Month View

Week Intervals viewWeek Intervals view

Adding a calendarAdding a calendar

Week Agenda ViewWeek Agenda View

Intervals ViewIntervals View

Adding a calendarAdding a calendar

Day Agenda ViewDay Agenda View

Agenda ViewAgenda View

Objective 7: Page Properties - deleting pages and changing titles

Step 1:

• When in the design view of your webpage, click on Options and Select Page Properties.

Step 1:

• When in the design view of your webpage, click on Options and Select Page Properties.

In the Page Properties area you will be able to amend the page URL (the web address), Page Title, set whether the page is hidden and delete a page.

A hidden page will not show on the menu. You may like to hide a page if you would like to create a link to it from within the body of a page rather than from the menu.

In the Page Properties area you will be able to amend the page URL (the web address), Page Title, set whether the page is hidden and delete a page.

A hidden page will not show on the menu. You may like to hide a page if you would like to create a link to it from within the body of a page rather than from the menu.

Objective 8: Clear Page

Selecting this option will clear all content from the page and take you back to where you can choose a new layout for the page.

Selecting this option will clear all content from the page and take you back to where you can choose a new layout for the page.

Publishing your page will make it live on the internet.

Only the superadmin account will have the option to publish the website.

Publishing your page will make it live on the internet.

Only the superadmin account will have the option to publish the website.

Objective 9: Publishing your website

Objective 10: Advanced Page Design

Most of your editing can be done by using the inline editing tool.

You may like to use the Advanced Page Design Editor in the following cases:

• The Advanced Design Editor provides extra functionality such as providing access to the page source code or tables for arranging the position of content on your pages.

• If you have set your page layout to ‘Blank’ then you will have access to the editing tool bar, but if you would like to insert a picture gallery, document list or video then you will need to access the page design tools from the Advanced Editor.

Most of your editing can be done by using the inline editing tool.

You may like to use the Advanced Page Design Editor in the following cases:

• The Advanced Design Editor provides extra functionality such as providing access to the page source code or tables for arranging the position of content on your pages.

• If you have set your page layout to ‘Blank’ then you will have access to the editing tool bar, but if you would like to insert a picture gallery, document list or video then you will need to access the page design tools from the Advanced Editor.

Please use the following links for more information on using the tools from the Advanced Page Design View:

Explanation of the wiki editing toolbar

Adding a calendar or blog – allows the website editor to add in a calendar or blog feature to your website.

Adding a photo gallery/slideshow – allows the website editor to add a photo gallery.

Adding a document list – allows the website editor to present their documents in a simple format.

Styling - Allows the website editor to present the titles of pages with certain styles.

Before setting up your slideshow, photo gallery or document list you will need to tag the files that you are going to use.

For instructions on how to set up your tags, please visit the How to Add Tags to your Files page.

Please use the following links for more information on using the tools from the Advanced Page Design View:

Explanation of the wiki editing toolbar

Adding a calendar or blog – allows the website editor to add in a calendar or blog feature to your website.

Adding a photo gallery/slideshow – allows the website editor to add a photo gallery.

Adding a document list – allows the website editor to present their documents in a simple format.

Styling - Allows the website editor to present the titles of pages with certain styles.

Before setting up your slideshow, photo gallery or document list you will need to tag the files that you are going to use.

For instructions on how to set up your tags, please visit the How to Add Tags to your Files page.

Source – HTML coding. Recommended for advanced users.

Source – HTML coding. Recommended for advanced users. Adding a calendar or blogAdding a calendar or blog

SaveSave

Adding a photo gallery/slideshow

Adding a photo gallery/slideshow

Adding a document listAdding a document list

Explanation of the Wiki Tool Bar

Styling of titlesStyling of titles

Adding ImagesAdding Images

Embedding MediaEmbedding Media

Add a tableAdd a table

Adding a blog or calendar

Step 1:

• Go back to your ‘Website Content’ community.

Step 1:

• Go back to your ‘Website Content’ community.

Step 2:

• Members of staff can add a new calendar event by clicking on the ‘New Event’ button.

• To add the calendar to your website you will need to copy the URL from the address bar in your browser from the front page of the community.

• Go back to your website design and to the page you would like the calendar on.

Step 2:

• Members of staff can add a new calendar event by clicking on the ‘New Event’ button.

• To add the calendar to your website you will need to copy the URL from the address bar in your browser from the front page of the community.

• Go back to your website design and to the page you would like the calendar on.

Step 3:

• Ensure that the page you are adding the calendar to is set to a ‘Blank Page’

• Click on the ‘Add Calendar/Blog’ icon.

• Paste the URL code that you copied previously into the ‘Enter object path here’ field

Step 3:

• Ensure that the page you are adding the calendar to is set to a ‘Blank Page’

• Click on the ‘Add Calendar/Blog’ icon.

• Paste the URL code that you copied previously into the ‘Enter object path here’ field

Step 4:

• Select the ‘Calendar’ or the ‘Blog’

• Depending on your choice you can select the view for the calendar or the number of entries to display for the blog.

•Once completed click ‘Ok’

Step 4:

• Select the ‘Calendar’ or the ‘Blog’

• Depending on your choice you can select the view for the calendar or the number of entries to display for the blog.

•Once completed click ‘Ok’

Step 5:

• Click the ‘Save’ button

• Click the preview button in the top right hand corner of the screen.

• Click on ‘Design’ to continue editing your school’s website.

Step 5:

• Click the ‘Save’ button

• Click the preview button in the top right hand corner of the screen.

• Click on ‘Design’ to continue editing your school’s website.

CalendarCalendar BlogBlog

Adding a Photo Gallery or Slideshow

Step 1:

• Click on the ‘Add Gallery’ button.

• Select the type of gallery to be displayed, either ‘Thumbnails’ or ‘Slideshow’

• Select the ‘Website Content’ community

• Select the tag that you have added the photos into and then click on the blue plus.

• Click on the ok button.

• Click on the preview button to view the website.

Step 1:

• Click on the ‘Add Gallery’ button.

• Select the type of gallery to be displayed, either ‘Thumbnails’ or ‘Slideshow’

• Select the ‘Website Content’ community

• Select the tag that you have added the photos into and then click on the blue plus.

• Click on the ok button.

• Click on the preview button to view the website.

SlideshowSlideshow ThumbnailsThumbnails

Adding a Document List

Step 1:

• Click on the ‘Add Document List’ button.

• Click on the ‘Website Content’ link.

• Select the tag with the documents in that you uploaded in objective 1.

• Click on the blue plus icon then click on OK.

• Click on the preview button to have a look.

Step 1:

• Click on the ‘Add Document List’ button.

• Click on the ‘Website Content’ link.

• Select the tag with the documents in that you uploaded in objective 1.

• Click on the blue plus icon then click on OK.

• Click on the preview button to have a look.

Document ListDocument List

Styling the headers

Step 1:

• You can change the style of the headers.

• It is advisable to have the headers in a style because: 1) It keeps all your pages looking consistent and smart.

2) When search engines look through your pages to understand what information your page holds they primarily look at the heading tags to find out the page title.

Step 1:

• You can change the style of the headers.

• It is advisable to have the headers in a style because: 1) It keeps all your pages looking consistent and smart.

2) When search engines look through your pages to understand what information your page holds they primarily look at the heading tags to find out the page title.

6. Tagging Files in your website community

Adding tags to your filesAdding tags to your files

Creating tags

To set up a slideshow, thumbnail gallery or document list, visit the gallery of the website community and tag the files you wish to use.

To do this, visit the gallery then double click on the file, enter your tag name and click on the green plus to save the tag.

Creating tags

To set up a slideshow, thumbnail gallery or document list, visit the gallery of the website community and tag the files you wish to use.

To do this, visit the gallery then double click on the file, enter your tag name and click on the green plus to save the tag.

If you would like any more information then please click on your ‘Need help?’ button on your homepage.

Otherwise please contact our support team on:

Telephone – 01273 201 701Email – [email protected]

If you would like any more information then please click on your ‘Need help?’ button on your homepage.

Otherwise please contact our support team on:

Telephone – 01273 201 701Email – [email protected]

DB Primary Support Options