| Home | About | Contact |

Course:

Table of contents

Getting Started with S5

Getting Started with S5
1. S5 is a template based slide show system. This course offers three templates. Choose the template you like and download the template archive.

s5 [28 KB]
s5lite [28 KB]
s5bg [49 KB]

2.Uncompress the zip file. (this tutorial considers s5 template. The same is true with the other two) The folder structure is as shown


3. You will find a folder (directory) called ui. The ui folder contains all the CSS and JavaScript bits that make the slide show work. If you are not an advanced user, don't touch this folder.

Making a Simple Presentation

1. Open s5-blank.html in a text editor, for example notepad. But it will be easier to use a source code editor, which colour highlights codes and syntax. Visit Crimson Editor's Homepage to know more about the editor, or just Download the freeware Crimson Editor, install it and open s5-blank.html. The beginning part of the file looks like this

2. Instructions and comments are encoded in <!--       --> tags and are green in colour in this editor.

2. Look for square brackets. These are in black. You need to replace these (along with any text inside) with the text of your presentation. Do not change anything else.

3. Use Save As option to save the file with a different file name. For example myshow.html. Remember to save in the same folder as s5-blank.html.

4. Open the file (myshow.html) in the browser or double click on the file to view the presentation.

5. If you want to copy the presentation onto a floppy or if you want to email it, you will have to copy the entire folder structure.For example if you have used the s5 template, copy the s5 folder and all its contents (except s5-blank.html). To email it or to submit your presentation to the course, zip the folder and upload the zip file. You can rename the zip file if you like.

Where to look for and what to edit?

The template has two parts. The first part is enclosed in the head tag

<head>

</head>

The second part is enclosed in the body tag.

<body>

</body>

Let us work with an example. It is a game where children read and then from memory write down what they read.

The title of the presentation is Read and Write

Each slide presents a set of phrases. The teacher decides how long she wants the children to see the slide. This example has only one slide which contains four phrases. To begin with only the first phrase is visible. With each subsequent mouse click, other phrases become visible. More such slides can be added to extend the game.

1. The first thing to look for is the <title> tag. This is found between the <head> tags. Look at the screen shot above to see it soon after the first instruction.

<title>[S5: An Introduction]</title>
Replace this with <title>Game</title>

2. Next scroll down the <body> tag, till you find

<h1>[location/date of presentation]</h1>
< h2>[slide show title here]</h2>

Delete the first line and replace the second as shown

<h1>[location/date of presentation]</h1> <this line is deleted>
< h2>Read And Write</h2>

Scroll further to find

<div class="presentation">

<div class="slide">
< h1>[slide show title here]</h1>
< h3>[name of presenter]</h3>
< h4>[affiliation of presenter]</h4>
< /div>

Modify or delete what is not needed. Please remember, tags come in pairs. If one of them gets deleted the slide show will not work. Notice <div class="presentation"> is closed by </div>

3.The template archive contains 4 slide templates: Unordered list ( bullet points); Ordered list (numbered list), paragraphs; image with text. In this example, we will need only the paragraph template. Delete the others and retain just the paragraph slide template. This is then modified as

<!-- Start of slide template to create paragraphs. Replace the square brackets
with the presentation content. Add or delete <p> </p> pairs to add or delete paragraphs. -->

< div class="slide">
< center>
< p>A cat</p>
< p class="incremental">A big cat</p>
< p class="incremental">A big fat cat</p>
< p class="incremental">A big fat black cat</p>
< /center>

</div>
< !-- End of paragraph template -->

Explanation. The slide title has been deleted. As no handouts are necessary, that part is also deleted. <p></p> are the paragraph tags. Text between these tags form a paragraph. In our example, we want the phrases to be centered. Hence we have introduced the <center></center> tags (Notice the spelling; do not use centre). Only the first phrase is to be visible. class="incremental" is attached to the <p> opening tag to make the next phrase appear only when the mouse is clicked.

Some example

These examples are included in the archives. Double click to view the presentation. Open the file in Crimson Editor to see the codes.

Example 1: Use of paragraph template
Example 2: Use of all templates

Finally, please note that when you save your presentation, it should have a html extension. If you use the Crimson Editor, type in the file name along with the html extension and select the Save as type to be HTML Files (...) as shown in the screen shot below.

Full reference of S5 presentation format

 

| Discussions | E-courses | Bookshelf | Media | Classroom Support | Resource Persons | Kannada Resources |