To add interest and
interactivity, you can easily add rich media to web pages. Rich media includes
most kinds of video, Flash videos, audio files, and interactive Flash content.
Before you use Dreamweaver to insert content created with Adobe Flash, you should be familiar with the following file types:
FLA file (.fla) the source file for any project, created in Flash. This file type can be opened only in Flash (not in Dreamweaver or in browsers). In Flash, you can publish a FLA file as a SWF file to use in browsers.
SWF file (.swf) a compiled version of the FLA (.fla) file, optimized for viewing on the web. This file can be played back in browsers and previewed in Dreamweaver, but cannot be edited in Flash.
FLV file (.flv) a video file that contains encoded audio and video data that can be played in Flash® Player. If you have a QuickTime or Windows Media video file, use an encoder such as Flash® Video Encoder or Sorensen Squeeze to convert the video file to an FLV file.
Adding FLV video to a web page
You can easily add FLV video to your web pages without using the Flash authoring tool. You must have an encoded FLV file before you begin. Dreamweaver inserts a SWF component that displays the FLV file; when viewed in a browser, this component displays the selected FLV file, as well as a set of playback controls. You can also use Live view to provide a non-editable, more realistic rendering of how the page will appear in a browser. Live view does not replace the Preview In Browser command, but provides another way of seeing what your page looks like “live,” without having to leave the Dreamweaver workspace. Select Insert > Media > FLV.
Adding audio to a web page
You can add sound to a web page. There are several different types of sound files and formats, including .wav, .midi, .mp3, and .ogg . Some factors to consider before deciding on a format and method for adding sound are its purpose, your audience, file size, sound quality, and differences in devices and web browsers.
There are two methods for adding audio to a web page: Use a plug-in or encode your page using HTML5. When using a plug-in, remember that sound files can be handled differently and inconsistently by different browsers.
For more information about common audio file formats along with some of the advantages and disadvantages of each for web design, see Dreamweaver Help, Audio File Formats.
HTML5 provides additional flexibility for adding audio files to web pages without a plug-in. However, devices and web browsers must support the new standard for the audio to work properly. You use the <audio> element to embed an audio file on a web page. As with HTML5 video files, be sure to convert your audio files into three supported formats: .ogg, mp3, and .wav. These sources are listed in the <audio> tag, and the browser will use the first recognized format.
1. In Design view, place the insertion point where you want to embed the file and select Insert > Media > Plugin.
2. Browse for the audio file and click OK
3. Save the file and Select File > Preview In Browser, and then select a browser to preview the audio in a web browser.
How to add text
1. Adding text to a document
To add text to a Dreamweaver document, you can type text directly in the Document window, or you can cut and paste text. You modify text by using the Properties panel.
There are many additional options to working with text such as bulleted and numbered lists, adding special characters, and more. To learn more about adding text to a document, please see “Working with text,” in Dreamweaver Help.
2. Linking text to other pages and e-mail addresses
After you’ve set up a Dreamweaver site to store your website documents and have created HTML pages, you’ll want to create connections from your documents to other documents. Before creating a link, make sure you understand how absolute, document-relative, and site root–relative paths work. You can create several types of links in a document:
• A link to another document or to a file, such as a graphic, movie, PDF, or sound file.
• A named anchor link, which jumps to a specific location in a document.
• An e-mail link, which creates a new blank e-mail message with the recipient’s address already filled in.
• Null and script links, which you use to attach behaviors to an object or to create a link that executes JavaScript code.
In this section, you will use the Point-To-File icon to create a links to another page and the Properties panel Link boxto add a link to an e-mail address. Dreamweaver creates the links to other pages in your site using document-relative paths. For more information about links and other linking options, see the “Linking and navigation” section of Dreamweaver Help. We will also look at linking in more depth in later activities.
