Double-click to play a vertical-format Knoxville fireworks video by Bob. (Quicktime required.) For more-educational content, scroll down this page, or follow this link to see more samples of embedded video from TED

Visuals and Video

RU garden flowers click top half to go to the museum click bottom half to go home Visual things are what this two-page demo is all about. As an assignment in COMS 326, read this page and the Video demo page about making your pages more "visual." That includes employing video clips or other media, as well enhancing menus, experimenting with image maps like the floral photo on the right, and using image-swap rollovers like the one demonstrated below.

The video assignment: Create a page of your own that "embeds" videos or other media relevant to your research interests. It may be a page within one of your other projects or a standalone demo like the "tools.html" or "dw.html" page. If you use Google Maps or Google Calendar, you can experiment with embedding code from those pages. For example, see the Google support pages for instructions on How to embed a calendar like the one I give news writing students.

The simplest version would be a "video.html" page with embedded-video examples, similar to my video demo page, which demonstrates samples from Vimeo, YouTube, an Animoto "music video" slide show, and TED talks on technology-to come, etc. You should know how to use more than one of these sites.

(In addition, if you look at the source code of that page, you may notice that it is a much-simplified version of this page's old Dreamweaver two-column layout, whose code is more complex than it needs to be -- and may show it in some browsers! The simpler version moves the menu to the top of the document. I kept the menu colors and menu items to show the page's origin, but renamed the sidebar div "menu" and deleted irrelevant parts of the stylesheet.)

What to embed

Adobe Dreamweaver or Photoshop tutorials and other Web how-to videos you've found useful would be a perfect addition to COMS 326 "tools" and "DWCIB" pages, but feel free to choose any video that will inform or amuse visitors to your site. If you use your own videos on your final project site, you don't have to create an additional video demo page.

If you do make a video demo page, as with the "tools" and "Dreamweaver" pages, comment on your learning process and the tools involved -- such as how much control the code-embedding site gives you of its "widget" and what plug-ins it requires of the viewer's browser.

However, if you aren't that interested in video and haven't done visually interesting menus, imagemaps or image rollovers (remember COMS226?), or explored "floats" and color features of CSS yet, you may substitute a page that experiments with those features and includes just one embedded video.

You might try an image-map or other graphical menu linking your home page, COMS226 work, course projects or other sites. For example, on the left we have a color rollover menu, and notice that the headline color matches or coordinates with the flower-garden photo.

Floating Images and Picking Colors

The floral photo is positioned using a "float right" CSS class called "fltrt," a standard part of Dreamweaver's layouts. (Along with a basic CSS "float" attribute, the "fltrt" class adds an 8 pixel left margin to keep the neighboring text away from the image.)

For more on "floating," see my page about floating divswith photocaptions, or see the floated multi-column page at w3schools, or the discussion of images, CSS and Dreamweaver's Insert panel in Dreamweaver CS5 Classroom in a Book, pages 199-201. You also can try this Adobe online Dreamweaver help video.

The colors in the menu were captured from the image with Dreamweaver's eyedropper tool, which converts them to hexadecimal color codes. If you don't use Dreamweaver, you could accomplish the same thing by getting the hexadecimal color numbers using the Digital Color Meter tool in the Macintosh's Utilities folder, or ColorPic for Windows, or similar utilities.

Image Maps

To demonstrate another type of menu, the floral picture is an "image map": The top and bottom halves of the picture link to two different websites. Most of you have done something similar in your Digital Imaging class, but here's a new Dreamweaver CS5 how-to page as a refresher.

My floral map demo is very simple. I marked two rectangles and added link addresses. Result: If you click the bottom half of the picture, you go to the course home page; if you click the top half, you will go to the RU Art Museum's Walking Tour, a more sophisticated interactive image map done with Adobe Flash.

Rollovers with Dreamweaver

Images also can enhance navigation with "rollover effects" or "image swaps." The example below links to my page about modifying Dreamweaver layouts, such as the basic grey framework that comes with the program. Hover your mouse over it to see the rollover effect. In addition to showing large images, rollovers have often been used with text-image tiles to create graphical menus using fancy fonts, textured backgrounds, shadows, "glow" or other text effects.

visually modifying Dreamweaver layouts

The rollover process in Dreamweaver is simple: Make a secondary image the same size and shape as the primary one. Use the "insert rollover image" menu selection in Dreamweaver to embed both images. Dreamweaver adds a small javascript program to detect the hovering mouse and swap images. (Dreamweaver calls those small Javascripts "behaviors.")

In addition to Dreamweaver's "behaviors," there are many libraries of Javascript code available for free online, including individual scripts to do slide shows and a very popular collecton of scripts called JQuery. However, it's a good idea to learn enough Javascript to be sure that code you are embedding in your pages does not install unwanted spyware, ads or viruses.

Rollovers with CSS

Back to coding rollovers: You also can combine rollovers with images that have transparent backgrounds, or with background-images inserted in DIVs using CSS and the "visibility" property with "hidden" and "visible" states.

The next wave in "rollover effect" coding does the job with CSS alone, as more browsers support CSS and Web designers try to minimize the amount of javascript code they use.

In response to a student's request, here are how-to pages for all of those approaches to rollovers:

Next page: Video Demos