teaching guide template€¦  · web viewtable 1: customisable elements 3. table 1: css style list...

38
Technical guide Automotive Retail Service and Repair AUR05 Series 9 Flexible Learning Toolbox “XLR8” Supporting resources for the Certificates III in: Automotive Mechanical Technology Automotive Vehicle Body Version 1.0 flexiblelearning.net.au/toolbox

Upload: others

Post on 16-Sep-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Teaching Guide Template€¦  · Web viewTable 1: Customisable elements 3. Table 1: CSS style list 3 ... A basic understanding of HTML and the software ... #menu_container Describes

Technical guide

Automotive Retail Service and Repair AUR05

Series 9 Flexible Learning Toolbox

“XLR8”

Supporting resources for the Certificates III in:Automotive Mechanical TechnologyAutomotive Vehicle Body

Version 1.0

flexiblelearning.net.au/toolbox

Page 2: Teaching Guide Template€¦  · Web viewTable 1: Customisable elements 3. Table 1: CSS style list 3 ... A basic understanding of HTML and the software ... #menu_container Describes

Technical Guide Series 9 Flexible Learning Toolbox Automotive Retail Service and Repair AUR05

© Commonwealth of Australia 2006

The views expressed herein do not necessarily represent the views of the Commonwealth of Australia.

This work is copyright. It may be reproduced in whole or in part for study or training purposes, subject to the inclusion of an acknowledgement of the source and it is not used for commercial use or sale.

Reproduction for purposes other than those indicated above requires the prior written permission from the Commonwealth. Requests and enquiries concerning reproduction and copyright should be addressed to the Branch Manager, Technology and Information Services Branch, Industry Skills Development Group, Department of Education, Science and Training, GPO Box 9880 Canberra City, ACT, 2601.

Part of the Australian Flexible Learning Framework

Page 3: Teaching Guide Template€¦  · Web viewTable 1: Customisable elements 3. Table 1: CSS style list 3 ... A basic understanding of HTML and the software ... #menu_container Describes

Technical Guide Series 9 Flexible Learning Toolbox Automotive Retail Service and Repair AUR05

Contents

List of tables and figures..................................................................................iv

Introduction....................................................................................................1

System requirements.....................................................................................2To play............................................................................................................................. 2To customise.................................................................................................................... 2To serve........................................................................................................................... 3

Customising Toolbox content......................................................................4What features can be customised?...................................................................................4Basic editing..................................................................................................................... 9Customising a Toolbox for single unit delivery.................................................................10Keeping to the standards................................................................................................11Visual design.................................................................................................................. 11Navigation...................................................................................................................... 15File structure................................................................................................................... 16Accessibility.................................................................................................................... 17

Technical support........................................................................................18Installation on a web server.............................................................................................18Installing into a SCORM compliant LMS..........................................................................18Producing CD-ROMs for distribution................................................................................18Frequently asked questions - FAQs................................................................................19The Toolbox Help Desk...................................................................................................20

References.....................................................................................................20

Australian Flexible Learning Framework iii

Page 4: Teaching Guide Template€¦  · Web viewTable 1: Customisable elements 3. Table 1: CSS style list 3 ... A basic understanding of HTML and the software ... #menu_container Describes

Technical Guide Series 9 Flexible Learning Toolbox Automotive Retail Service and Repair AUR05

List of tables and figures

Table 1: Customisable elements...........................................................................................3Table 1: CSS style list...........................................................................................................3

Australian Flexible Learning Framework iv

Technical Guide

Page 5: Teaching Guide Template€¦  · Web viewTable 1: Customisable elements 3. Table 1: CSS style list 3 ... A basic understanding of HTML and the software ... #menu_container Describes

Technical Guide Series 9 Flexible Learning Toolbox Automotive Retail Service and Repair AUR05

IntroductionThis Technical guide has been developed to support you in delivering the Certificates III in Automotive across two streams; Mechanical Technology and Automotive Vehicle Body.

This guide gives specific details on file structure and naming conventions (to help you find files within the toolbox) and how to edit some of the files. Your understanding of these instructions will depend on your level of knowledge and experience in web development. If you find you do not understand some of the concepts in the guide or you run into trouble when trying to edit or locate files in the toolbox, you may need the help of a professional web developer.

A Teacher’s Guide has been developed to assist and advise teachers and trainers as to how to use the Toolbox in their delivery of courses to learners.

This Technical guide is divided into three sections:

System requirements

Customising Toolbox content

Technical support (FAQs, troubleshooting, help desk)

Australian Flexible Learning Framework 1

Page 6: Teaching Guide Template€¦  · Web viewTable 1: Customisable elements 3. Table 1: CSS style list 3 ... A basic understanding of HTML and the software ... #menu_container Describes

Technical Guide Series 9 Flexible Learning Toolbox Automotive Retail Service and Repair AUR05

System requirements

To playTo use the learning material in this unit, learners will need a computer with the following features:

IBM® compatible with a 1000 MHz processor running Windows 2000, XP or above, or

Apple Macintosh® with a 500 MHz processor running OSXv10.2.0 or above, with

128 Mb of RAM 800 x 600 pixel display CD-ROM drive Internet access Sound card

Learners will also need the following software/plug-ins installed on their computer:

Internet Explorer® 6.0 or higher, or Mozilla Firefox® 1.0 or higher CD-ROM [insert appropriate speed specifications] 1.44 Mb floppy disk drive [if required to record student answers] Microsoft® Word 97 or a similar word processing program to open and use

downloadable forms, checklists and worksheets. Macromedia® Flash 7 Player. If you haven’t got this plug-in, you can

download and install the latest free version from Adobe’s web site (www.adobe.com).

Adobe® PDF Reader 6.0 or above. Download at www.adobe.com. Read the terms and conditions for distributing Adobe Reader on your CD from http://www.adobe.com/products/acrobat/distribute.html?readstep

Incorrect versions of these applications could result in information being shown in an unreadable form or not shown at all.

To customiseo 600 MHz or Pentium III or equivalent processor

o Macromedia Dreamweaver (Or equivalent HTML editor)

o Flash MX/MX2004 development software

o Macromedia Captivate 1.0

o XML SPY or equivalent XML editing tool

o Photoshop/Fireworks (or equivalent) for editing still images

o SoundEdit16 (or equivalent) for editing sound content

o Premiere (or equivalent) for editing video content

Australian Flexible Learning Framework 2

Page 7: Teaching Guide Template€¦  · Web viewTable 1: Customisable elements 3. Table 1: CSS style list 3 ... A basic understanding of HTML and the software ... #menu_container Describes

Technical Guide Series 9 Flexible Learning Toolbox Automotive Retail Service and Repair AUR05

To serve

o IBM compatible computer with a 1000 MHz processor (OR Unix equivalent)

o 128 Mb of RAM

o 4 Gb hard disk space free

o CD-ROM drive

o 2xISDN (128k), T1 preferred

o Internet server software

Australian Flexible Learning Framework 3

Page 8: Teaching Guide Template€¦  · Web viewTable 1: Customisable elements 3. Table 1: CSS style list 3 ... A basic understanding of HTML and the software ... #menu_container Describes

Technical Guide Series 9 Flexible Learning Toolbox Automotive Retail Service and Repair AUR05

Customising Toolbox contentThere has been an attempt made at making the multimedia content of the Toolbox easily updateable. Some applications, such as the Media Player, are completely updateable by making changes to an XML document. Where you see the same application used repeatedly you will likely find this scenario. However it is important to realise that a number of the multimedia applications, such as the Colour Blindness test, can only be edited by someone with access to Macromedia Flash MX 2004 and basic Flash Actionscript skills.

Where possible all Flash Actionscript has been placed in an easy to locate area in the Flash .fla file.

This toolbox has been designed with the knowledge that RTOs may wish to edit the content to suit their own needs.

Toolboxes can be customised by users under the flexible licensing arrangements, as long as they are not on-sold. You are therefore encouraged to customise the Toolboxes. However, before embarking on any modifications or customisation, we suggest that you:

check the licensing details of the Toolboxes to ens ure that any customisation does not contravene the conditions of the licence. For licensing conditions visit: http://www.flexiblelearning.net.au/toolbox/license.htm

have the required trained personnel.

remember to retain the original files in the CD-ROM format as a backup (should you require them at a later stage).

What features can be customised?This Toolbox is presented as an interactive resource with multimedia applications that support the content. There is not one section that can be described as a self-contained multimedia application. This hopefully makes customising easier as there is little or no programming involved outside of the multimedia applications.

The only JavaScript in the Toolbox is used to embed all Flash (multimedia applications) to help produce XHTML compliant web pages and a pop up window script that is not reliant on JavaScript actually functioning.

The Toolbox is laid out using layers and those layers are described using CSS, therefore it should be possible to completely change the design of the Toolbox by editing the accompanying CSS files.

The web pages are broken up into (basically) header, content and menu sections. It is possible to change one section without affecting another. An example would be turning off the menu by setting its Display property to none. This can be seen by opening any page of the Toolbox and selecting File > Print Preview from the browser menu. You will notice that the page is laid out differently from the screen view.

Multimedia applications that are included in the Toolbox are created using mainly Macromedia Flash, Macromedia Captivate or Swish. Captivate applications require no programming and can be updated using the Captivate application that is similar to PowerPoint.

Australian Flexible Learning Framework 4

Page 9: Teaching Guide Template€¦  · Web viewTable 1: Customisable elements 3. Table 1: CSS style list 3 ... A basic understanding of HTML and the software ... #menu_container Describes

Technical Guide Series 9 Flexible Learning Toolbox Automotive Retail Service and Repair AUR05

The programming of the Flash applications has been split into two sections: that which should not be updated and which controls the application, and that which contains information that can be updated such as text content and images. Where possible these sections are clearly defined in the Flash source files.

Other Flash applications are updateable by changes to the content of accompanying XML files or by a combination of XML and Actionscript.

There are also external Actionscript files that can be edited without visiting the Flash application, these files can be edited using Dreamweaver or a basic text editor.

Table 1: Customisable elements

Element To CustomiseDescription Location

Welcome screen Formatted entirely in HTML, edit with Dreamweaver.

index.htm

Orientation text Most text in is standard HTML, browse to the location in the Toolbox, take note of the URL, and use that to find the appropriate file in the toolbox_902 directory.

Open the file in Dreamweaver (or a text editor) and make the changes.

\content\*.htm

Multiple choice interactions

The questions and answers are stored in an XML file that accompanies the swf multiple choice files.

To add another question duplicate the question_item node.

There are a number of different options that you can choose from in the XML such as:

enabling pictures to appear when the user selects the correct answer

giving only 1 attempt or multiple attempts at a question

Exploring the XML will reveal all that is possible.

It has not been necessary to edit the source code of this application at all.

There is an accompanying Actionscript folder that needs to follow the fla file when the fla is edited.

\content\*.htm

Australian Flexible Learning Framework 5

Page 10: Teaching Guide Template€¦  · Web viewTable 1: Customisable elements 3. Table 1: CSS style list 3 ... A basic understanding of HTML and the software ... #menu_container Describes

Technical Guide Series 9 Flexible Learning Toolbox Automotive Retail Service and Repair AUR05

Element To CustomiseDescription Location

Media Player Content for the Media Player can be updated by updating the XML file that accompanies the swf media player file.

The Media player is both a video player and picture viewer, depending on the information supplied in the XML file the player will enable and disable the appropriate buttons.

It has not been necessary to edit the source code of this application at all.

There is an accompanying Actionscript folder that needs to follow the fla file when the fla is edited.

\content\*.htm

“Panorama” This application has been used many different ways, the shell of the panorama contains a slider and a load area for the ‘video clip’ (that could be any type of swf).

The application detects the width of the movie being loaded into the application and sizes the slider appropriately.

There is an accompanying Actionscript folder that needs to follow the fla file when the fla is edited.

You may need to move items such as the location of the loaded clip, this can be done by editing the main panorama fla file and adjusting the custom method setXYWH() wihich is found on the script layer of the main timeline.

In some instances it has been necessary to ‘turn off’ the automatic slider width detection. This can be done by finding the variable sliderWidth and giving it a hardcoded number. This can also be found on the script layer of the main timeline.

There is an accompanying slider.as Actionscript file that needs to follow the fla file when the fla is edited.

\content\*.htm

Australian Flexible Learning Framework 6

Page 11: Teaching Guide Template€¦  · Web viewTable 1: Customisable elements 3. Table 1: CSS style list 3 ... A basic understanding of HTML and the software ... #menu_container Describes

Technical Guide Series 9 Flexible Learning Toolbox Automotive Retail Service and Repair AUR05

Element To CustomiseDescription Location

Correct sequence

Content for the Correct Sequence applications can be changed by editing the accompanying XML file.

Place the pictures in the correct order in the <object> tags. To have more objects create more <object> tags. You can have up to 10 pictures at 150px by 150px.

Any positioning that you may need to do can be done in the XML, if something isn’t aligning properly go to the XML first.

Early on in development it was envisioned that when the user solved the puzzle correctly that an animation or other would occur so the programming was left open for that end. It is not currently possible to edit the final message that pops up in the XML file. To edit the message you need to open the correct_sequence.fla file and in the script layer (final frame) at the very top you will find a variable called correctText.

To make something else happen such as open another page or swf etc you can edit the script found between line 142 and 149 in the final frame of the script layer.

There is an accompanying Actionscript folder that needs to follow the fla file when the fla is edited.

\content\*.htm

Sound Player The sound player can be edited in much the same way as the media player. Editing the accompanying xml file will change the sounds and the content that is displayed.

All colours can be changed in the XML.

It has not been necessary to edit the source code of this application at all.

There is an accompanying Actionscript folder that needs to follow the fla file when the fla is edited.

\content\*.htm

Australian Flexible Learning Framework 7

Page 12: Teaching Guide Template€¦  · Web viewTable 1: Customisable elements 3. Table 1: CSS style list 3 ... A basic understanding of HTML and the software ... #menu_container Describes

Technical Guide Series 9 Flexible Learning Toolbox Automotive Retail Service and Repair AUR05

Element To CustomiseDescription Location

Other Flash interactions

Most of these interactions can be customised by anyone with basic Macromedia Flash design skills. However some are more complex, and require actionscript knowledge.

Most Flash interactions in this Toolbox are self contained, but some may pull in external data from an XML file.

To customise open the page in Dreamweaver and select the Flash object that you wish to change. Under the properties of the object, you will see a filename such as flashint.swf. You cannot change this directly, but must rebuild it from the source code.

Using Flash 8 authoring software, browse to the source directory and locate a .fla file with the same name as the .swf.

This is the file you need to edit.

\content\*.swf

\source\*.fla

\content\xml\*.xml

\images\*.jpg

Other Flash objects/images

There are numerous Flash objects throughout the Toolbox that don’t appear to have associated .fla files in the source folder.

These Flash objects are in the main images or text that is used in the Media Player, Correct Sequence or other applications where images are required.

Using Flash instead of Photoshop or another image editing package to create the objects was a developer choice. Any changes to these objects, as they are essentially images, could be done in any application.

Where there is a difference, such as a rollover effect on the object the .fla has been included in the corresponding source folder.

Australian Flexible Learning Framework 8

Page 13: Teaching Guide Template€¦  · Web viewTable 1: Customisable elements 3. Table 1: CSS style list 3 ... A basic understanding of HTML and the software ... #menu_container Describes

Technical Guide Series 9 Flexible Learning Toolbox Automotive Retail Service and Repair AUR05

Basic editingThere are numerous ways of editing the content of this Toolbox. The approach is similar to editing pages that might be found on any website.

The two simplest ways are:

1. Using a Web development package (MS FrontPage or Macromedia Dreamweaver).

2. Using a straight text editor (MS Notepad or your favourite text editor).

A basic understanding of HTML and the software package is useful.

Web development software package

Download the complete Toolbox contents onto your machine.

Identify the pages you would like to edit (these are displayed in the address bar at the top of the browser page when viewing).

Locate these files in the downloaded files, following the paths displayed in the browser.

Open each file in your web editing software package (i.e. MS FrontPage or Macromedia Dreamweaver) and make appropriate changes.

Save each file.

Check your edits in a web browser to see if it displays properly.

Text editor (i.e. MS Notepad)

Download complete Toolbox contents onto your machine.

Locate the file you wish to edit, following the paths displayed in the browser.

Open the file using a text editor (i.e. MS Notepad)

Make appropriate changes, following the CSS styles, some of which are:

body - font type and size for site

#contentArea – font colour for site

#pageContent – padding and positioning

Save each file.

Check your edits in a web browser to see if it displays properly.

Australian Flexible Learning Framework 9

Page 14: Teaching Guide Template€¦  · Web viewTable 1: Customisable elements 3. Table 1: CSS style list 3 ... A basic understanding of HTML and the software ... #menu_container Describes

Technical Guide Series 9 Flexible Learning Toolbox Automotive Retail Service and Repair AUR05

Customising a Toolbox for single unit deliveryYou may only want to offer one or two units from the Toolbox, or limit access to certain units and/or streams.

This Toolbox has been created with the thought that all “Jobs” can be delivered as stand alone learning objects. It is possible, therefore, to remove not only whole units from the Toolbox but also the individual “Jobs” from that unit.

All content refers only to information contained in the current job; copying individual “Job” or complete unit folders will make a working application, although all formatting (design) will be lost.

When copying or removing units or “jobs” you will also need to take these folders:

shared/css

shared/scripts

shared/toolkit

shared/images – there are a number of images that relate to pages within the toolbox in this folder. Those that are necessary for a “job” or a unit are contained within the job or unit folder. In the shared images folder you will find images that form unit headings, icons and similar. Depending on your choice of job or unit you will need some or all of the images in this folder.

Some links to these folders may need to be reset if the folder structure of the Toolbox is altered, this can be done by using a HTML editor such as Macromedia Dreamweaver or your favourite text editor.

To disable access to units, open the index.htm file in the root folder in Dreamweaver, and edit the link target for the unit you wish to disable to point to disabled.htm. Now when users click these buttons they will receive a pop-up message saying that this content is not available at this time. You can modify this message by changing disabled.htm.

If you want to distribute a smaller version by pruning the unnecessary content, you will need to follow the above process, and in addition delete the appropriate folders in the content directory.

Each section of content conforms to a standard naming convention of jobx where x is a number referring to that sections position on the main menu. Inside the job folder you will find folders that relate to the Intro, See, Find, Do, Apply and Share sections found in the menus. Each of these folders contains all content files needed to run or display that page.

You may wish to modify the index.htm, unit_selection.htm or unit_home.htm file to not show these missing sections, units or jobs or you may wish to create an entirely new one using the existing file as a reference.

Australian Flexible Learning Framework 10

Page 15: Teaching Guide Template€¦  · Web viewTable 1: Customisable elements 3. Table 1: CSS style list 3 ... A basic understanding of HTML and the software ... #menu_container Describes

Technical Guide Series 9 Flexible Learning Toolbox Automotive Retail Service and Repair AUR05

Keeping to the standardsThis Toolbox has been developed in accordance with a number of internal conventions and international standards. These standards may be related to accessibility, cross-browser compatibility, or just to enable the easy location and customisation of content.

Keep this in mind when you are customising, as whatever you produce will need to be accessible, cross-browser compatible, and able to be further customised.

Try to ensure that any changes you make are conformant with the following standards.

W3C Priority One - Web Accessibility Initiative - http://www.w3.org/WAI/

XHTML 1.0 Transitional - http://www.w3.org/TR/xhtml1/

CSS 2 - http://www.w3.org/TR/REC-CSS2/

Visual designThis Toolbox uses:

Cascading Style Sheets (CSS2) for visual layout and site structure.

Only relative font sizes, compatible with the user specified "text size" option have been specified.

If your browser or browsing device does not support style sheets at all, the content and menu structure of each page is still readable.

Global formatting with CSS

This Toolbox has been created with Cascading Style Sheets (CSS). This will enable you to make global changes to the look and feel of this Toolbox. If you don’t have a good understanding of HTML and at least a beginner’s level understanding of CSS you should get somebody with this knowledge to help you.

The main CSS files are found here: shared\css\styles.css shared\css\layout.css shared\css\print.css shared\css\menu.css

Australian Flexible Learning Framework 11

Page 16: Teaching Guide Template€¦  · Web viewTable 1: Customisable elements 3. Table 1: CSS style list 3 ... A basic understanding of HTML and the software ... #menu_container Describes

Technical Guide Series 9 Flexible Learning Toolbox Automotive Retail Service and Repair AUR05

CSS style descriptionsTable 1: CSS style list

Style Name Description

STLYES.CSS

* remove all margins from all objects

body Body markup – font, background image, alignment

#toolbox_intro toolbox index page – font and colour

#toolbox_intro img Padding to images on this page

#toolbox_intro a Link definition – line height, colour

#toolbox_intro a:hover

Link definition

#toolbox_intro_links Link layer positioning – position, colour and padding

#wholePage Describes content area – holder for header, menu and page content.

#home_header Describes header for the home page only - position, dimensions, background image and colour

#header Describes header area for the entire toolbox – position, dimensions, background image and colour.

#toolbar Positions the Toolbar used throughout the Toolbox

#toolbar img Positions icons in the Toolbar that form links between units etc - position

#toolbar .title etc… Positions page section titles (ie Mechanical Technology) inside the Toolbar at the top of each page - padding

#toolkit_toolbar Sets toolbar position for the toolkit only - position

#toolbarUnit As above, though for Unit home page and Unit Selection pages - position

#flashcontentSpeedo Displays the “Speedo” in the top left corner of the browser window – display and position

#unitContent Replaces pageContent on the unit home and selection pages

#toolkitPageContent Replaces pageContent on the toolkit pages

#section_title Sets the orange header where the toolbar and section title sits – colour, position, padding, height and background image.

#mainNav used to place the titles of the sections on the toolbox_home.htm page

#mainNav img Used with the above – padding for images

#contentArea sets the container for the menu and the page content.

Australian Flexible Learning Framework 12

Page 17: Teaching Guide Template€¦  · Web viewTable 1: Customisable elements 3. Table 1: CSS style list 3 ... A basic understanding of HTML and the software ... #menu_container Describes

Technical Guide Series 9 Flexible Learning Toolbox Automotive Retail Service and Repair AUR05

Style Name Description

STLYES.CSS

#page_content Sets the dimensions, padding etc for the written content areas of the toolbox. As there are different page types you will find page_content_text_version, toolkit_page_content and expertPageContent etc.

.boxOutContainerBlue, (.boxOutContainerApply, .boxOutContainerClipboard, .boxOutContainerImportant, .boxOutContainerLarge, .boxOutContainerFire, .boxOutContainerStandard)

Gives dimension to different types of boxes that appear in the toolbox.

.boxOut Used in conjunction with the above to give border, background and colour options to the different box types.

.imageAndTextBelow Creates a small area to display images on the page with text beneath the picture.

.reverseLogo positions the white xlr8 logo

.reverseLogoContent positions the white xlr8 logo on unit selection and home pages

#toolkitImage positions the toolkit picture in the toolkit section

#toolkitLinks positions the links relative to the toolkit image

#toolkitLinks .external different coloured links for external websites in the toolkit

#toolkitOver provides a layer that acts as a hit area to trigger a tooltip (title)

.floatLeft Floats containers… left

.clearRight Clears the right border of a container

#hiddenPrintHeader hides header that is revealed only by print.css

#glossary – and sub styles<p> <a> etc

Describes the look of the glossary page.

#text_version Describes the container and link style of text version links.

#text_version2 As above

#nextAndPrevious Positions next and prev. buttons on the page.

PRINT.CSS This css file contains all of the styles mentioned above. It turns off layers that are not needed for print using display:none such as the menu, header, text version links, next and previous links all other styles remain the same other than the top position of the #wholePage style it is changed to 30px from 100px

Australian Flexible Learning Framework 13

Page 18: Teaching Guide Template€¦  · Web viewTable 1: Customisable elements 3. Table 1: CSS style list 3 ... A basic understanding of HTML and the software ... #menu_container Describes

Technical Guide Series 9 Flexible Learning Toolbox Automotive Retail Service and Repair AUR05

Style Name Description

STLYES.CSS

LAYOUT.CSS This file controls the size and position of most elements of the toolbox. Where position and dimension are not controlled here look in the styles.css file.

MENU.CSS

#menu_container Describes the size width and position of the menu

#menu_container a Creates menu items out of anchor tag

.current_menu_items Highlights the current job on the page

.current_menu_items a

Creates a link style for the current menu items on the page

.current_menu_items a:hover

As above – creates a hover state for the menu items.

#menu_container a:hover

creates a general rollover state

#menu_container .indent_link

Indents links from the side of the container

.currentPageInd_1

.currentPageInd_2

.currentPageHeader

Creates a link style and indents the current page from the left of the menu container

.menu_box Used to create different areas inside the menu such as h3 (header) body and footer

.unit_menu_items Describes the styles of the unit links found at the bottom of the menu

You can find out more about CSS at: http://www.htmlhelp.com/reference/css/.

Australian Flexible Learning Framework 14

Page 19: Teaching Guide Template€¦  · Web viewTable 1: Customisable elements 3. Table 1: CSS style list 3 ... A basic understanding of HTML and the software ... #menu_container Describes

Technical Guide Series 9 Flexible Learning Toolbox Automotive Retail Service and Repair AUR05

NavigationNo JavaScript has been used in any navigation relating to menus, main unit links and most of the links on individual web pages. Any links that create “pop up” windows such as links to the Glossary, Toolkit and External websites use a JavaScript function called popUp(). This function lets you describe how you would like the pop up window to appear. Information is sent to the function in this format:popUp(this.href,[“window_type”],[left],[top],[width],[height],[scrollbars -1 or 0],[resizeable -1 or 0],[toolbar – 1 or 0],[address – 1 or 0],[menubar – 1 or 0])

“window_type” refers to general window types that always appear the same way such as:

“Glossary”

“Toolkit”

“External”

These links will work if JavaScript is not enabled, the links default to opening a normal sized browser window if this is the case.

The menu is described in each web page as no Framesets have been used in the Toolbox. Associated styles are located at \shared\css\menu.css

The popup.js file is located at \shared\scripts\popup.js

Australian Flexible Learning Framework 15

Page 20: Teaching Guide Template€¦  · Web viewTable 1: Customisable elements 3. Table 1: CSS style list 3 ... A basic understanding of HTML and the software ... #menu_container Describes

Technical Guide Series 9 Flexible Learning Toolbox Automotive Retail Service and Repair AUR05

File structureThe root folder has the following sub-folders:

toolbox_902 which includes all scripts, styles etc that are used in the Toolbox - it must be on every CD-ROM or server copy of the Toolbox.

source which contains all original Flash and image files.

The toolbox_902 folder contains the following sub-folders:

glossary which contains a Toolbox wide index of terms.

shared which contains all scripts, styles and images that are used throughout the Toolbox. This also holds guides to the use of the Toolbox.

unit_auto_vehicle_body, unit_mechanical_technology - are the different sections of the Toolbox.

Inside the above folders can be found a list of units and images that relate to that unit here is an example taken from the unit_mechanical_technology folder:

o images – section wide images.

o aurc270103a

images – unit wide images

job_1 01_intro

02_see – files that are related to this job only

o images

o text_version*

o expert* – files related to this folder only

images

03_find – as above

04_do – as above

05_apply – as above

06_share – as above

toolkit – as above

* folders where required.

All units (folders) are structured this way.

Australian Flexible Learning Framework 16

Page 21: Teaching Guide Template€¦  · Web viewTable 1: Customisable elements 3. Table 1: CSS style list 3 ... A basic understanding of HTML and the software ... #menu_container Describes

Technical Guide Series 9 Flexible Learning Toolbox Automotive Retail Service and Repair AUR05

AccessibilityThe site is compliant with W3C Content Accessibility Priority 1 guidelines, XHTML Transitional.

Each Flash interaction has a text version link that indicates that the content is also available in an accessible form. To access the alternative version click this link.

If you modify any of this Flash content, remember to modify the content in the alternative version as well. The alternative version names are always called text_version_n where n is the number of the text version. If the Flash content is the first flash application, or uppermost on the page, then the text alternative would be found in the folder text_version/text_version_1.htm, if it is the second flash application then the name will correspond with text_version_2.htm etc.

Text equivalents of rich elements

All content images used in this site include descriptive ALT attributes. Purely decorative graphics include null ALT attributes.

Text alternatives to Flash movies are also provided. If you replace any image with another, it is important that you update the Alt tag appropriately.

Links

Title attributes have been used on links to describe the link in greater detail. If the text of the link already fully describes the target (such as the headline of an article), then the title attribute may be skipped.

Links have been written so users with screen-readers can make sense of them out of context.

Australian Flexible Learning Framework 17

Page 22: Teaching Guide Template€¦  · Web viewTable 1: Customisable elements 3. Table 1: CSS style list 3 ... A basic understanding of HTML and the software ... #menu_container Describes

Technical Guide Series 9 Flexible Learning Toolbox Automotive Retail Service and Repair AUR05

Technical supportTechnical support is available from the Toolbox Help Desk, which is detailed at the end of this section. However before calling or emailing, please make sure that the answer you seek is not located elsewhere in this document.

Installation on a web serverCopy the entire contents (except for autorun.inf, autorun.exe and the source directory) from the CD-ROM to the appropriate directory on your web server. If you are only copying selected Units to your server or CD-ROM, you must make sure the entire shared folder is also copied.

There are no server side technologies utilised by this Toolbox, so no server configuration will be necessary.

Installing into a SCORM compliant LMSIf you wish to make content from this Toolbox available through your LMS, and your LMS is SCORM compliant, then you can install the relevant learning objects (LOs) by using the following process:

1. Browse to the Toolbox Repository at http://toolboxes.flexiblelearning.net.au/repository/index.htm.

2. Search on the name of this Toolbox, you will find a number of learning objects, each relating to a section of the Toolbox CD-ROM.

3. Download each object that you wish to place on your LMS. They will be delivered as IMS content packages, which look exactly like .zip files.

4. Follow your LMS’s specific instructions for uploading these IMS content packages.

Be aware that not all LMS’s are SCORM compliant, and that some claiming to be compliant cannot process IMS content packages so probably aren’t.

Please refer issues with the uploading of content to your LMS administrator, not the Toolbox Help Desk. The administrator or LMS vendor will contact us if necessary.

Producing CD-ROMs for distributionWhether producing one-off copies of CD-ROMs, or class sets, use the following procedure:

1. Start up your favourite CD-ROM burning software

2. Select the data option (don’t simply copy the whole CD-ROM)

3. Drag and drop all files (except the source directory)

4. You may wish to delete the Teacher guide and Technical guide

5. Burn

Before you burn yourself a class set, it might be wise to test that the first one works as expected.

Australian Flexible Learning Framework 18

Page 23: Teaching Guide Template€¦  · Web viewTable 1: Customisable elements 3. Table 1: CSS style list 3 ... A basic understanding of HTML and the software ... #menu_container Describes

Technical Guide Series 9 Flexible Learning Toolbox Automotive Retail Service and Repair AUR05

Frequently asked questions - FAQs1) Where do subtitles appear for the video material? How do I turn them on?

As a requirement of this Toolbox the script, or subtitles, need to be available when video is playing. Where the media player is showing video there is a text box on the right hand side that shows the accompanying script/subtitles.

2) How big should video and images be so that they fit into the media player?

270px wide by 216px high this is in keeping with the 4:3 video ratio – images can be larger than this if you want the user to zoom in and out using the buttons.

3) How big should the images/swfs be when used in the correct sequence application?

I have used 150px by 150px although they can be smaller and of any shape. It is possible to place a gap between each picture, if using small sizes, in the XML file that comes with the app.

4) Some of the applications are a bit small how would I make them to be bigger?

All of the applications are made using vector graphics in Flash therefore it is possible to resize the applications easily in the Flash application – or more easily, but fraught with a little danger, change the height and width attributes of the Flash application in the object tag on the actual page. The only draw back with this is when displaying jpegs etc they may look a little degraded.

5) What is the easiest way to change the menu’s as they aren’t done with JavaScript?

The easiest way to change the menus on the web pages is to use the Find and Replace utility in Dreamweaver. All menus have been named exactly the same way, such as Job 1 – OHS, it is therefore easy to identify links to be changed when doing a site wide find and replace. It is possible to do the same with the title attributes for the menu links as well. This was how the menus for the whole toolbox were done; it’s quicker than you might think.

6) Can I import WAV, WMA or any other sound file format that is not mp3 into the sound player?

No, they must be mp3.

7) Can video files be anything other than swfs?

This application is designed to work only with swf files. It will not work with any other video format. It is possible to import a number of different video file formats into Flash and convert those into the swf file format.

Australian Flexible Learning Framework 19

Page 24: Teaching Guide Template€¦  · Web viewTable 1: Customisable elements 3. Table 1: CSS style list 3 ... A basic understanding of HTML and the software ... #menu_container Describes

Technical Guide Series 9 Flexible Learning Toolbox Automotive Retail Service and Repair AUR05

The Toolbox Help DeskIf you need technical assistance with a Toolbox, a single help desk call is all that is needed.

email: [email protected]

phone: 1300 736 710

Before contacting the Toolbox Help Desk The Toolbox Help Desk is here to help you with installing Toolboxes and

solving technical issues. Before contacting the help desk please assist us by following these steps:

o Check if your question has already been answered in the Frequently Asked Questions (FAQs) section of the Toolbox website at http://toolboxes.flexiblelearning.net.au/support/index.htm.

o Check the section relating to patches and fixes on the Toolbox website at http://toolboxes.flexiblelearning.net.au/support/patches.htm.

o Please provide: the Toolbox name and series number, eg: Automotive Toolbox

Series 9 902 your name, phone number and email address the problem you need help with.

The Flexible Learning Toolbox Help Desk will contact you as soon as possible.

ReferencesFrog, K. (1997) Being green, is easy after all, CD-ROM, London: Lilly Pad Publishing.

Lave, J. (1988) Cognition in Practice, Cambridge: Cambridge University Press.

W3C (1998). Cascading Style Sheets, level 2, http://www.w3.org/TR/REC-CSS2/.

Australian Flexible Learning Framework 20

Page 25: Teaching Guide Template€¦  · Web viewTable 1: Customisable elements 3. Table 1: CSS style list 3 ... A basic understanding of HTML and the software ... #menu_container Describes

Technical Guide Series 9 Flexible Learning Toolbox Automotive Retail Service and Repair AUR05

Toolbox contact details:Flexible Learning Toolbox Help Desk

Phone: 1300 736 710Email: [email protected]

Website: flexiblelearning.net.au/toolbox

For more information contact:2006 Australian Flexible Learning Framework

National CommunicationPhone: (07) 3307 4700Fax: (07) 3259 4371

Email: [email protected] Website: flexiblelearning.net.au

GPO Box 1326Brisbane QLD 4001

Australia

Australian Flexible Learning Framework 21