You have selected free tutorial for the Adobe for the Adobe Certified Associate (ACA) course in Adobe Certified Associate in Web Authoring Using Adobe Dreamweaver CS 6/ CC
Topics
Understanding the Adobe Dreamweaver Interface / Use the Assets panel.
Skill Objective
Use the Assets panel 3.4
Include video and sound in a web page 4.7
Add animation and interactivity to content 4.8
Adobe Help :
Using the Dreamweaver 4 Assets panel
Assets are elements, such as images or movie files, that you use in building a page or a site in Macromedia Dreamweaver. The Assets panel helps you manage and organize your site's assets more easily than you can in the Site window.
Making web content interesting
Adding video, sound, and animation to a web page is one way to make your pages more interesting and engaging. Video, for example, plays a key role in supplying interesting and varied web content. The barrier to creating original video has decreased dramatically in recent years as has the barrier to distributing these videos online. Videos allow individuals and companies to post commercials, speeches, and other content that otherwise would be difficult or cost-prohibitive to reach a large audience.
Sound allows you to enhance web pages by supplementing visual content with music or sound effects. Sound also inspires user interaction (as you’ll see later in this lesson), thereby giving the user a more interesting online experience.
Animation gives web pages a whole new life by adding movement and effects to images that still pictures just can’t match. Something moving on a web page automatically draws a visitor’s eye. Movement is especially effective for banner ads, buttons, and whatever else you’d like your visitors to pay attention to.
Best Practices for Animation
Although animation can be a great addition to your pages, there are a few things to keep in mind:
- Animations should not be distracting. Users might enjoy your animation the first time, but if they are trying to read an article on your website, that animation might not be so enjoyable after the 40th time. Most animated content can be set to play one or two times, avoid animations that endlessly loop if at all possible.
- Animations should add value. Creating animations is a fun process for the designer, but it is easy to get carried away. Gratuitious animation can actually remove value from your site. Before adding any element with animation, take a step back and consider if it is truly useful for the user.
- Keep it short. Unless the animation is the only content on the page, try to keep your animations as short as possible. Your users may not have the patience for a long animation and longer animations will also be larger file size which translates to a longer download time.
- Manage file size and be aware of technical limitations. Animations will necessarily add file size to your page and this may affect those users with slower bandwidth (such as mobile users). In fact, your mobile users may not be able to view your animation at all depending on the technologies involved. For example, currently there is no support of the Flash plugin on Apple’s iOS platform so your animations will not play on devices such as the iPhone and iPad.
Site assets versus Favorite assets
The Assets panel contains a complete list of all recognized assets within a site (such as the 3 swf files in your current site), although initially very useful, imagine a site that had hundreds of SWF files (or any other category of Assets such as images or colors). Locating a particular file could take a while.
For this reason, Dreamweaver has a Favorites list to which you can add frequently used assets and group related assets together. You can also give them nicknames to remind yourself what they’re for, and find them easily in the Assets panel.
Working with Favorites list :-
- Select one or more assets in the Site list of the Assets panel, then click the Add To Favorites button.
- To view Favorites click on the Favorites radio button at the top of the Assets panel.
- To place Favorite assets into a group click the New Favorites folder in the Assets panel, label the folder and then drag one or more Favorites into the folder.
- To remove a Favorite click the Remove from Favorites button
Adding video
Adding video to a web page is relatively easy, assuming the video has already been optimized for the Web. A full discussion about the various file formats and how to convert digital video to a web optimized format is beyond the scope of this book. However, the decision to include web video should be based on an evaluation of your audience. The large file sizes associated with video can affect the experience of users who don’t have high-speed Internet connections. In this section, you will learn how to integrate video into your web pages using three of the most popular formats: Flash Video, QuickTime, and Windows Media.
Flash Video
Flash video has been widely used for web video for a number of years, and is still the format of choice for a large number of sites. This is changing somewhat due to the rise of mobile devices (and specifically the lack of support for Flash video on these devices). Nevertheless, one of the primary advantages of Flash Video is that playback is enabled for any browser with the Flash plug-in. Since more than 95% of all desktop web browsers have some version of the plugin installed, this means your video will find the widest possible audience. Again, this is not always true on mobile. Additionally, Flash video can be compressed to a reasonable size while maintaining image quality.
Different programs create Flash video, including the Adobe Media Encoder, Premiere Pro, and even Photoshop. Creating the video is a separate process, so you’ll want to do your homework and learn as much as you can about how it works in order to get the best results. There are essentially two file formats that are used in Flash video: .flv and .f4v. The .flv format is the traditional flash video format and .f4v is a newer format. In this exercise, you’ll add a preexisting .flv video file into your page and add simple player controls to allow users to control the playback of the movie.
HTML5 Video
HTML5 video is a relatively new alternative to Flash video (and other plug-in based video such as Quicktime or Windows Media Video). It has become particularly popular for iOS devices such as the iPhone and iPod which do not support Flash (and by extension Flash Video). HTML5 video supports certain types of video in their native formats such as .MP4, .OGV and .WEBM and does not require a browser plug-in. A browser plug-in is a module of code that is not installed in a web browser by default, the most notable plug-in is perhaps Adobe’s Flash Player.
To add video to a page you can add the
"<video>" tag and any browser that supports this tag (as well as the codec for the type of video being used) will play the video. There are additional benefits to using HTML5 video: There are a set of native video controls (such as play, pause and volume) that can be added with a simple line of code and are keyboard accessible. Because of the architecture and specification of the "<video>" tag additional features such as text transcripts and/or captions can be added and in general HTML5 video is more searchable and discoverable by search engines because the code is exposed as an element with attributes (just like the paragraphs and headings on a page).
Adding HTML5 video to a web page
Unlike Flash Video, Dreamweaver CS6 does not have a specific command or object in the Insert menu allowing you to easily add HTML5 video. You must type the
"
"<video>" "element and any attributes in the Code view.
1. Choose File > New and in the New Document window make sure the page type is set to HTML and then click on the DocType menu and choose HTML5 and then click Create. A new untitled document is created. 2. Choose File > Save and save this file into the same folder as the video you would like to add (For this exercise we refer to an .mp4 video file and a .webm video file). 3. Click on the Code button to enter the code view and then locate the opening tag and press return/enter to add space between the two tags. 4. Add the following code:
<video autoplay="" controls="" tabindex="0">
<source src="my%20_%20video.mp4" type="video/mp4; codec="mp4a.40.2"" />
<source src="my%20_%20video.webm" type="video/webm; codec="vp8"" />
</video>
|