Lesson 7

• To create Frame
• Adding multimedia contents

Example of website using frame.
http://www.tjkdesign.com/articles/frames/default.asp

Frames provide a way to divide a browser window into multiple regions, each of which can display a different HTML document.

Frame is a container that holds the document.

In the most common use of frames, one frame displays a document containing navigation controls, while another frame displays a document with content.

A frameset is an HTML file that defines the layout and properties of a set of frames, including the number of frames, the size and placement of the frames, and the URL of the page that initially appears in each frame.

The frameset file itself doesn’t contain HTML content that displays in a browser.

The frameset file simply provides information to the browser about how a set of frames should look and what documents should appear in them.

Example of a webpage with frame.

To create frameset

In DW, File > New > Page from sample > Frameset > choose any from right panel

Window > Frames > to display the frame panel on the right.

Select the thickest outline from the frame panel and go to File > Save All > save the file as index.html

Select the top frame and save as top.html; left navi frame as left_navi.html; main-content as home.html

Total there will be 4 individual html files.

Change colour for top.html & left-navi.html to show the different.

Go to left_navi.html, create links to be hyperlink to other pages. Home, Gallery, About & contact.

Create home.html, gallery.html, about.html & contact.html. Go back to index.html document, link the Home to home.html, target >mainFrame > Save All.

http://www.youtube.com/watch?v=Oo2i2SQkCGk

http://www.youtube.com/watch?v=Efelek1Zle8&feature=relmfu

Multimedia content

Adding Flash, Video and Sound Content

Adding video, sound, and animation to a web page is one way to make your pages more interesting and engaging.

Video format

AVI format (.avi)

- The AVI (Audio Video Interleave) format was developed by Microsoft.

- The AVI format is supported by all computers running Windows, and by all the - most popular web browsers. It is a very common format on the Internet, but not always possible to play on non-Windows computers.

- Videos stored in the AVI format have the extension .avi.

Windows Media format (.wmv)

- The Windows Media format is developed by Microsoft.

- Windows Media is a common format on the Internet, but Windows Media movies cannot be played on non-Windows computer without an extra (free) component installed. Some later Windows Media movies cannot play at all on non-Windows computers because no player is available.

- Videos stored in the Windows Media format have the extension .wmv.

MPEG format (.mpg or .mpeg)

- The MPEG (Moving Pictures Expert Group) format is the most popular format on the Internet. It is cross-platform, and  supported by all the most popular web browsers.

- Videos stored in the MPEG format have the extension .mpg or .mpeg.

QuickTime format (.mov)

- The QuickTime format is developed by Apple.

- QuickTime is a common format on the Internet, but QuickTime movies cannot be played on a Windows computer without an extra (free) component installed.

- Videos stored in the QuickTime format have the extension .mov.

RealVideo format (.rm or .ram)

- The RealVideo format was developed for the Internet by Real Media.

- The format allows streaming of video (on-line video, Internet TV) with low bandwidths.

- Because of the low bandwidth priority, quality is often reduced.

- Videos stored in the RealVideo format have the extension .rm or .ram.

Shockwave Flash format (.swf)

- The Shockwave format was developed by Macromedia.

- The Shockwave format requires an extra component to play. This component comes preinstalled with the latest versions of Netscape and Internet Explorer.

- Videos stored in the Shockwave format have the extension .swf.

Flash Video format (.flv)

- Flash files use the extension.flv

- Flash works well on PCs, Macs & Linux computers

- Originally developed by Macromedia

- Notable users of it include YouTube, Hulu, Yahoo video, Reuters.com & others Apple’s iOS devices do not support Flash Player plugin.

Inserting Flash video

Choose Insert > Media > FLV.

The insert FLV dialog box will appear. Make sure the video type is set to *Progressive Download Video and then, to the right of the URL field, click Browse to select .swf file.

*Progressive Download Video works by downloading the video to the user’s hard drive, and then playing it. Because it’s a progressive download, the video starts to play as it downloads, and the user doesn’t have to wait for the entire video to download in order to see it.

Next, you’ll want to select a skin. A skin is a control panel that shows up on the bottom of the video, and allows user to control playback. This is where users can play, rewind, and fast-forward their videos. Click on the Skin drop-down menu to examine your choices.

If your video is 10s or longer, choose a skin that includes a slider control so that users can scroll through the video at their convenience.

Click on the Detect Size button so that Dreamweaver can establish the physical space the video will occupy on the page.

You can put in your own size, too, although be sure you are aware of the dangers here. Entering a size bigger than the original video will either soften or pixelate your video.

Inserting QuickTime video and Windows Media

The process for inserting either Quicktime or Window Media video is the same.

Choose Insert > Media > Plugin.

After you select the file, you’ll see a plug-in iconon the page.

You’ll need to manually enter the size of the file and you will also needs to add 20 pixels to the height to make room for the built-in player controls.

To preview the file, click the Play button in the Property Inspector.

Inserting Sound

Sound has the same considerations as video: it can take a while to download and it requires a plug-in such as QuickTime or Windows Media Player to hear it.

Three common formats of sound file

.aif,

.wav and

.mp3. 

Basic Audio Terms:

- Mono (Monophonic audio) - a single channel of audio.

- Stero - Two channel audio, with left and right channels.

- Sample rate - The rate at which samples of an analog signal are taken in order to be converted into digital form. Measured in Hertz(Hz). A higher audio sampling rate, with more samples per second, creates a more accurate representation of the original sound.

- MP3 - MPEG-1 or MPEG-2 Audio Layer III, more commonly referred to as MP3, is a patented digital audio encoding format using a form of lossy data compression. It is a common audio format for consumer audio storage, as well as a de facto standard of digital audio compression for the transfer and playback of music on digital audio players. Uses lossy compression to significantly reduce file size, but often with little perceptible loss in soundquality.

- WAV - The uncompressed Wave audio file format used with Microsoft Windows. (AIFF - Mac equivalent).

For the web, a good sample rate is in the 22kHz -32kHz range; 22kHz is at the low end of acceptable quality, and anything higher than 32kHz starts to weigh down the file size.

Stero is nice, but unnecessary, unless you’re moving sound from left speaker to the right speaker. You can save a significant amount of ile space by keeping the sound file set to mono.

Various programs offer audio-editing and format capabilities, adobe Soundbooth, Apple Soundtrack Pro, and Audacity (available as a free download on the web).

http://webdesign.about.com/od/dreamweaverhowtos/ig/Add-Sounds-in-Dreamweaver/Insert-Media-Plugin.htm

Choose Insert > Media > Plugin

After you select the file, you’ll see a plug-in iconon the page.

Click the edge of the plug-in icon and drag it to the right to extend it to approximately 150 pixels wide.

Choose File > Save, then preview the page in a browser.

To give users the ability to control the playback of the sound file you will need to change a parameter back in Dreamweaver.

Close the browser.

With the plugin still selected prress the Parameters button in the Property Inspector. This opens the Parameters dialog box.

In the Parameters dialog box, type autoplay in the Parameter column and false in the Value column. Press OK.

Choose File > Save, then preview the page in a browser again, and note that you need to press the Play button in the plug-in application in order to hear the sound.