Slide Shows - HTML

Slide shows are a nice way to distribute presentations you may have given to groups of people who might want to see the slide show you used during the presentation again. You can basically take a slide show you created for such an event and port it directly to the Web. You can create presentations from PowerPoint, which is a widely distributed slideshow presentation software tool. However, if you don’t have Powerpoint and/or don’t want to shell out the money for a PowerPoint license, you can use freeware such as OpenOffice. The following sections look at how to export presentations from both of these programs.

Exporting PowerPoint presentations to the Web
To create PowerPoint Presentations for the Web, you need to be certain your settings are correct. This seems like a simple enough requirement, but access to the correct settings is hidden away somewhat. In PowerPoint 2002 and PowerPoint 2003, you’ll find the Web settings in two places.

You can choose your Web settings by going to Tools ➪Options. Choose the General tab. From there, choose the Web Options . . . tab. Or, you can export your document as a Web page by going to File ➪Save As Web Page . . . You’ll see a dialog box. Instead of clicking Save, click the Publish button just under the file list in the dialog box. After clicking Publish, you’ll see a dialog box.

Click the Web Options button for additional options, such as which browser(s) to target, the size of your images, and so on. When you click OK, you’ll return to the Publish as Web Page dialog box, which also has a browser support option (a better one, in fact, because it lets you choose all browsers). Choose the directory you want to save the files to. If you’re a novice, it’s best to create a new directory, and then simply upload that new directory in its entirety to your server so you don’t have to worry about managing files. When you’re done, click Publish, and then upload the directory you saved your files to onto your server.

The General Options tab in PowerPoint’s Optionsdialog box.

The General Options tab in PowerPoint’s Optionsdialog box.
Following either of the two preceding methods, you should now see the Web Options dialog box.This dialog box is your control panel for managing the way a PowerPoint presentation looks when it is delivered to the Web. It manages such settings as browser compatibility, screen size and resolution, and what format your graphics should be in.

The controls are managed through the following group of tabs, named, successively, from left to right (top bullet being left and bottom being right):

  • General
  • Browsers

PowerPoint’s Save As Web Page . . . dialog box.

 PowerPoint’s Save As Web Page . . . dialog box.

PowerPoint’s Publish As Web Page dialog box.

PowerPoint’s Publish As Web Page dialog box.

The Web Options dialog box.

The Web Options dialog box.

  • Files
  • Pictures
  • Encodings
  • Fonts

Each of these options is briefly explained in the following sections.

Note:These specific instructions pertain to the latest edition of Microsoft Office, which as this book went to press was Office 2003. The tabs in PowerPoint 2002 (part of Office 2002) are slightly different, but you can still find most of the settings described on the Web Options interface or the Publish dialog box. For example, the browser settings in PowerPoint 2002 are found on the Publish dialog box because there is no Browser tab.

Choosing options in the General tab
The General tab lets you decide on your presentation’s core settings. If you choose to enable slide navigation controls, PowerPoint will insert the navigation controls into a small thin frame in a frame-based output. You can also enable PowerPoint animations, but you’ll need to be sure your viewers can see them, and if they’re running Netscape, Opera, or Safari, they probably won’t. Generally, it’s best to leave this unchecked unless you’re on a corporate intranet that relies on MS products.

You should also be sure to choose the option for resizing graphics to fit a browser window; otherwise, the graphics may stretch the Web page beyond the browser window’s boundaries, forcing users to scroll left, which most people hate to do.

Using the Browser tab
The Browser tab lets you configure how to adjust the presentation for viewing in the various Web browsers. For full downward compatibility, you’ll want to choose Microsoft Internet Explorer 3.0, Netscape Navigator 3.0, or later.

Using PowerPoint’s browser tab in the Web Options dialog box.

Using PowerPoint’s browser tab in the Web Options dialog box.

You’re also presented with options for saving graphics in Portable Network Graphics (PNG) format, and saving line art as Vector Markup Language (VML). Again, these should only be checked if you know your target audience’s browsers support these formats. You can be sure that older versions of Netscape don’t support PNG, and that the only browser that supports VML is Internet Explorer.

PNG is a bitmap graphics format similar to GIF but capable of a much deeper range of colors. VML is an XML-based markup language for vector graphics, which are geometry-based graphics based on a Cartesian-like grid system similar to what you’ll find in CAD programs and applications such as Adobe Illustrator or Macromedia Freehand.

A long time ago, VML competed with Scalable Vector Graphics Language (SVG) as a standard, but the W3C chose SVG, which is also covered briefly in this chapter. This tab has two additional options that are pretty self explanatory: Save an additional version of this presentation for older browsers and Save new Web pages as Single File Web Pages.

Changing settings in the Files tab
In the Files tab you can organize supporting files in a folder or store them within the presentation folder itself. The reference to long file names dates back to the old 8.3 DOS conventions, when file names were limited to eight characters and didn’t allow for spaces.

Changing settings in the Files tab.

 Changing settings in the Files tab

If you choose the option Check if Office is the default editor for Web pages created in Office, you can edit the PowerPoint HTML presentation in PowerPoint itself rather than your system’s default Web editor. This just means that PowerPoint will treat the file like any other PowerPoint presentation, providing you with all of PowerPoint’s tools within its user interface. In other words, it’s like opening up a PowerPoint presentation.

Choosing screen resolution in the Pictures tab
This one is pretty self-explanatory. The Pictures tab has one option, which allows you to choose the screen resolution. The most common screen resolution for most Web interfaces is 800 × 600 (pixels), so that’s a good one to choose if you’re targeting a large cross-browser audience.

Choosing an encoding in the Encoding tab
The default on the Encoding tab is a Windows encoding, not necessarily what you want. Encodings are tricky, but simple at their core. Each letter in an alphabet, be it an English, Japanese, or Russian alphabet, is mapped to a special numeric value (after all, computers can’t read—they deal with binary sets of numbers only at their core level). The problem is not all such mappings, called encodings, are the same. If you choose a Windows encoding, which was created before more standardized encodings were approved by international bodies, the potential exists that visitors to your Web site will get some funny characters. To eliminate this potential, change the default setting to Western European.

You should change the default encoding to a more Webstandardized one.

You should change the default encoding to a more Webstandardized one.

Using the Fonts tab to choose fonts
The Fonts tab allows you to use the default font character set, as well as a default proportional and fixed-width typestyle along with their point sizes. After clicking OK, you then click Publish to save your document. how an HTML page generated by PowerPoint looks. Note the use of the many namespaces as represented by the xmlns namespace declarations (they look like attributes, but they’re actually namespace declarations that bind elements to a specific type of application, in this case, MS Office).

Under the Hood of a PowerPoint Web Page Export

Exporting presentations
OpenOffice ( is a free office suite that can read and write MS Office documents such as Word and PowerPoint. So, if you don’t want to spend money for PowerPoint, you don’t have to. OpenOffice is almost as good, and it’s free. The first step to exporting an OpenOffice presentation to the Web is to select File ➪ Export from the main menu. You’ll then be presented with a wizard.

You can choose an existing design or create a new one. This can be somewhat confusing because the natural assumption is that you’ve already created your design in the slide presentation program, so why is OpenOffice asking you to create a new one? When you click Next, you find out what the application is referring to. What you are doing is deciding how you want the HTML to work. Do you want frames? Or, do you prefer to avoid frames? Those options are the first two listed in the wizard’s radio buttons under the label “Publication type.” You can then choose whether or not to create a title page or notes for the online version of your presentation.

The OpenOffice HTML Export wizard.

The OpenOffice HTML Export wizard.

The next two “Publication type” options are Automatic and Webcast. If you choose Automatic, the wizard changes its appearance. The wizard changes labels from Options to Advance slide. You can allow the user to advance the slide herself by choosing the As stated in document radio button, or create an automated page that moves to the next slide automatically at a named interval by choosing the Automatic radio button. If you choose the Webcast publication type, the wizard changes again, to a screen.

The HTML Export wizard changes its appearance depending on the Publication type you choose.

The HTML Export wizard changes its appearance depending on the Publication type you choose

The HTML Export Wizard displays server-side scripting options when you choose Webcast.

The HTML Export Wizard displays server-side scripting options when you choose Webcast

You’re then presented with the option of generating server-side script for Active Server Pages or by using Perl. When you choose this option, OpenOffice generates a series of Perl scripts for managing the slideshow. The rest of the options in the HTML Export wizard are pretty self-explanatory. They allow you to choose what kind of buttons you want to include (if you’ve chosen to generate static HTML instead of a Webcast or server-side script), what resolution you want OpenOffice to process images, and so on.

The Synchronized Multimedia Language (SMIL, pronounced like the word smile) is an XML-based language for presenting multimedia programs over the Web. You can use it to create slide shows, or as a presentation layer for media players such as RealOne or QuickTime (but not for Windows Media Player). You can hand code a SMIL document, keeping in mind XML syntax rules (closing all elements, nesting tags within one root element, quoting all attribute values, and so on). To create a SMIL presentation, follow these basic steps.

1. A source begins and ends with the smil element. SMIL is a case-sensitive language and always uses lowercase:

<smil> [...]</smil>

2. SMIL documents consist of two parts, a head and body, both of which must live within the smil element, which is a parent element of the head and body elements.

<smil><head> [...]</head><body> [...]</body></smil>

3. You can also include meta tags in the head element, but you need to remember that because SMIL is based on XML, the element must include its closing tag:

<meta name=“description” content=“A great show!” />

4. Next, you need to include some layout elements, within which will go the most important pieces of your multimedia show. The following code shows where to put the layout elements (in bold).

5. You’ll need to determine the screen size of your presentation. You do this with the root-layout element, which includes width and height attributes to determine the width and height that the media player, such as QuickTime or RealOne, should allot to its window size:

<root-layout width=“300” height=“200” background-color=“white” />

6. You can also use absolute positioning to position elements within the media player’s screen. Absolute positioning in SMIL uses the same concepts as absolute positioning in Cascading Style Sheets, with a grid whose point of origin is the upper-left corner, which is 0 pixels. The following code fragment creates a region, which is simply a container for holding elements similar to HTML’s div element. The region begins 20 pixels from the left-most portion of the media player’s window, and 20 pixels from the top.

<head><layout><root-layout width=“300” height=“200” background-color=“white” /><region id=“region1” left=“20” top=“20” width=“100” height=“200” /></layout></head>

Note that the region has also been given a width and a height. Now you are able to create elements and include them within this region.

7. The first element we’ll drop into our new region is a logo, which was created in Adobe Illustrator and exported as SVG. Note that you can create an SVG imagein’s drawing module if you don’t want to pay the licensing fees for Adobe Illustrator. Including the SVG in the document is as easy as writing an HTML img element:

<body><img src=“logo.svg” alt=“Javertising!” region=“logo” /></body>

Note that you must identify in which region to place the logo. The following code creates a new region named logo for holding the logo.

8. Next, save the file with a .smil file extension, then open it in an SMIL-compliant media player such as RealOne or QuickTime.
9. The resulting presentation is You can put any number of media objects in place of that SVG file, such as videos and even text.

A simple SMIL-based presentation shown in RealOne.

A simple SMIL-based presentation shown in RealOne.

Naturally, you’re not limited to SVG; in fact, that particular graphics format has not yet really taken hold, although it still holds great promise. It’s more likely you’ll use a JPEG or GIF graphic, along with some video and/or audio. the kinds of media you can use in a SMIL document and the support from the major SMIL media players. You may not have heard of GRiNS. GRiNS is a media player .

 SMIL media players

 SMIL media players

You’ve seen how to construct a basic SMIL document, and how anyone with a simple text editor can create a presentation or show. There’s much more to SMIL than this, including more advanced functionality, such as media sound and video synchronization.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

HTML Topics