Creating a Website in MatchWare Mediator 8

Transcription

1 OCR Nationals in ICT. Unit 2: Webpage Creation Creating a Website in MatchWare Mediator 8 This lesson is how to design and create a website using MatchWare Mediator 8. This lesson will fulfil the requirements of Unit 2, Assessment Objectives 1 5. These tools will also be required for Unit 4: Design and Produce Multimedia Products. Mediator is an excellent presentation and multimedia creator. It helps meet Assessment Objectives: 1. Design a multimedia website 2. Create multimedia Webpages 3. Create functioning hyperlinks 4. Create interactive elements 5. Create a user form for capturing user feedback assessment objectives in at least units 1, 2, 4, 9, 10, 20 and 21. Step 1: Getting Started with Mediator Step 2: The Page List Step 3: The Toolbox Step 4: Events Step 5: Inputs Step 6: Exporting Mediator is a powerful, page-orientated authoring tool. You design a website one page at time, attach content, and create hyperlinks between pages. Once you are satisfied with your work everything is exported to HTML for web publication. No coding, no fuss. This lesson will use the same context as that suggested in the OCR Model Assignment for Unit 2: Recycle GB. This tutorial will go through the steps necessary to fulfil the requirements of Unit 2, AO 1-5. This lesson demonstrates a very simple animation. For complex animations using timings, see the lesson: Unit 20: Creating Animation using MatchWare Mediator 8. 1

2 Step 1: Getting Started with Mediator Open Mediator. On the Welcome screen, choose: Create a new document.. The New Document dialog opens. Check the HTML button. This ensures only features that successfully export to HTML will be available. Click Next. Another dialog opens. Keep Full screen with frame checked. Click Next Another dialog opens. Check 1007 x 566. This window size is typical on modern websites, but if you want to be certain it will fit on almost every monitor, check 783 x 398. Click Finish. The workspace will open. Mediator is a very easy to use multimedia tool. There are only three basic steps to creating your presentation: 1. Add objects using the Toolbox 2. Create and arrange pages with the Page List 3. Create interactivity with the Events dialog You are now ready to start your website. 2

3 Step 2: The Page List The Page List is a list of all the pages contained in your Mediator document, and therefore your website. If the Page List is not visible, click View>Panels>Page List, hit F8, or click The Page List allows you to add, copy, paste, rename and rearrange pages. To add a new page, click anywhere in the Page List: Right Click>New, or use the Ins button. You will be asked to name the page. The page name cannot have spaces. Click OK. You are required to have a minimum of 5 pages. Make six pages: Master, Page1, Page2 Page6 It is useful to create a Master Page. This is a template for all the other pages, and will save you a lot of time. For example, you only have to create Navigation buttons on the Master page. If you change the buttons on the Master page, they will automatically change on every page. There are two types of Master: Top and Bottom. Objects on a Top Master appear on top of all objects on all pages. This is good for buttons and menus. Objects on the Bottom Master appear behind all objects on all pages. This is good for backgrounds and page design. Here s how to create a Master Page. At the bottom of the screen are three tabs: When you click a tab, a dialog opens, allowing you choose the page you want as the Master. Assign bottom master Current page Assign top master Click on Page1, then click Assign top master. Make Master the Top Master. Repeat for Page2 and Page3. Drag and drop Master to the bottom of the Page List. This ensures it will not be displayed when you export to HTML (the first page is always the home page in the export). 3

4 Step 3: The toolbox Run Document Object Text Button Rectangle Picture GIF Polygon Flash Animation Path Windows Media Player The toolbox allows you to attach objects to a page. When you want to test a page, click Run Document. To add an object, click the appropriate icon and drag out a frame of the required size on the workspace. Most objects will open a dialog, allowing you to edit the object or open a file. The first page will require a title, a hyperlinked menu, graphics and main text. Every object on the page can have its properties altered using the Properties dialog. This opens when you click once on an object. This includes the page itself. If the properties dialog is not already open, click Page>Properties. The Properties dialog is context-dependent on the type of object. Go to the Master page. Use the Properties dialog for Master to change the background colour to something more pleasing (or garish) Attach a Rectangle. Attach a Title. You will need a navigation menu. Like all objects, the button properties dialog allows you to change the location coordinates (X-Y), the button dimensions, colours, font, and so forth. These are accessed using the tabs in the dialog. Attach five buttons. Use the properties dialog to align and position the buttons, and alter the colour and font. Make one of the buttons Home. Notice the formatting on the Master Page is repeated over to all pages. 4

5 Step 4: Events Events trigger actions in the website, such as hyperlinks. They are accessed through the Events dialog. This is the heart of Mediator. You will need to hyperlink the buttons to the appropriate pages. This is done in the Master page. Note you cannot change Master items from other pages: they can only be altered in the Master page. Once you are satisfied with the Master page, you can add content to the main pages. The Master page will not form a part of your website. Content takes the form of objects such as text, graphics, sound and video. They can be triggered in the same way as the buttons using the Events dialog. The content will be left as an exercise for the reader The Home button will link to Page1. Click on this button: Right click>events, or F9. This will bring up the Events dialog. This uses a drag and drop format for creating chains of events and actions. The column down the left contains Events, the row across the top contains Actions. These are dragged into the active field to create the chain. An event is always followed by an action. Create a chain of Mouse Click>Go to Page. A dialog will open with a list of pages. Select Page1, and click OK, then OK again. You can alter the page link by double-clicking on the Page1 icon. Click Close. Link Home to Page1, Recycle Locations to Page2, and Recycle Schemes to Page3. The remaining pages are up to you Create content in each page (e.g. a title) so they clicking Run Document. look different, then test the buttons work by You can also use template buttons from the Multimedia dialog ( View>Panels>Multimedia catalog). Drag the template buttons into the workspace, and assign events as normal. You can also use Mouse Over or Roll Over instead of Mouse Click by choosing the Mouse Into event. This triggers the link when you move the mouse over the button. 5

6 Step 4: Events (cont.) Individual words can be turned into hypertext in a similar way. In a text box, highlight the word you want to hypertext, and click Right click>activate. Right click again on the word, and choose Events Create a chain to link to another page, or choose Web Link as an action to link to a specific URL (the URL will need to be enclosed in speech marks. e.g. ) Animation can be added to a webpage. This is created in three stages: Create the object to be animated Create an animation path for the object to follow Create an Event-Action chain to activate the animation On Page1, use the piece of rubbish Polygon tool to draw a simple waste paper bin and a Use the Animation Path tool to draw an animation path that sends the rubbish into the bin. The path is created using point and click. To curve the path, select the animation points by draggin a box over the path and click the curve button. Individual curves can be altered using the grab bars. Go to the events dialog for the piece of rubbish, and create a chain Mouse Click>Animate. Choose the Object to animate, and the Animation path. The Duration is in milliseconds, so 1000ms is one second. Test the animation by clicking Run Document, and clicking on the rubbish. This is a very simple form of animation. Complex animations with timings are taught in the lesson Unit 20: Creating Animation using MatchWare Mediator 8. 6

7 Step 5: Inputs For AO5, OCR does not require the user feedback form to work. For a Pass, it can be a Form with boxes that can be printed and filled in by hand. To best achieve this, use text boxes with the question at the top. For a Merit/Distinction, a user must be able to fill in the fields online. Mediator makes is very easy to add these fields. Click the Object icon and drag out a frame to an appropriate size. This creates a field that can be typed in by the user. Object Drag out a text box over the Object field to create a question. Used the button tool, or a button from the Multimedia Catalog and lable it Submit. Though for marking purposes this does not need to actually perform an action, you could use the Events dialog to create an action-event chain to link to a new page (or use Show/Hide) that thanks the user for their feedback. 7

8 Step 6: Exporting This is a very simple process as Mediator does most of the work. Ensure you save your work Select File>Create Distribution Files>Quick Select HTML in the dialog, then OK. A dialog opens asking if you want to optimise the pictures in your project. This will compress the pictures for faster loading. Merit/Distinction students must provide evidence of Optimisation (use a screenshot). Click Yes. At this point Mediator starts exporting all your pages. When the Publish dialog appears Mediator is finished exporting your files. Select the Preview button to open your finalised website in your browser, or Open Folder to view the files. All the necessary files are saved in a folder called HTML (which you can rename later). To run the website, open the file index.htm. Summary. You have: Created a website with at least five pages; Used a template (Master) to format your pages; Created working navigation buttons; Created working animations; Created an input table; Exported your work to HTML and viewed it in a browser. This meets the requirements specified by OCR for the creation of a website. 8