How to Make a Website (DW)/Step 7- Make a Media Portfolio Page

From WSU Technology Knowledge Base
Jump to: navigation, search

The portfolio will offer samples of your work products. This may include writing samples, or multimedia.

In this step we will suggest ways you can create a media portfolio which can offer online access to publication designs, graphical art, photography, audio and video content.

Two basic designs are suggested for your choice. The Gallery Design and the Slide Show Design. The Gallery Design may be the easiest to employ, but both designs can be assisted by easy-to-use applications that generate the design for you automatically.

So the choice is yours....

What Media Can Go into the Media Portfolio?

The Gallery Design can point to virtually any file type:

  • Image files such as PNG, JPG, GIF, etc.
  • Audio files such as MP3, WAV, etc.
  • Video files such as MOV, MP4, WMV, etc.

Gallery items will be created for image and video of these by Picasa (for a PC or Mac) or iPhoto (for a Mac), and generally will also generate corresponding thumbnails.

For audio files you will need to create a Gallery in a Table—see Option 1 of the Gallery Design.

Slide shows will only display image files.

How Audio and Video Files Get Displayed When Linked to Your Web Page

If you include an audio or video file on your web site, it will be stored there.

See Dreamweaver/Hyperlinking & Embedding Media or Documents for defining a hyperlink to display or launch a media file.

When launched, hyperlinks to audio or video files will usually open to a separate page or tab in the web browser automatically and employ the player available on the user's computer. In some cases, the file will launch a player as a separate application. If no player is available, the user will be given an error message.

How to Get Audio and Video Files Hosted

You can load some audio and video files onto your student web server, provided that you do not exceed the total permissible storage (currently 200 megabytes).

Audio and video files can sometimes be embedded to appear in your web page, but you will need to use a host site which can stream them. See Dreamweaver/Hyperlinking & Embedding Media or Documents for instruction on how to embed audio/video from YouTube.

There are several web hosting services available, including some that are free such as:

We do not support these services but they have their own online help.

A Gallery Design for a Media Portfolio

A gallery design shows thumbnails or text links that take the viewer to a separate display of the selected item.

The item can be a photo, some other graphic item, or even an sound file, a video file, or a PDF document.

Caution!: Sometimes sound, video and PDF files will not readily display in a web browser.
—See Dreamweaver/Hyperlinking & Embedding Media or Documents for defining a hyperlink to display or launch a media file.
—See Step 8 for more discussion about using PDF formats for documents.

The Gallery Design is easy to set up and easy to modify and expand.

Gallery in a Table (Option 1)

In Option 1 you will use the mediaportfolio.html page that you created in Step 6 to compose a list or index to your media files.

Each indexed item will be hyperlinked to the full file which the user may view online, or download for viewing. If viewed online, the full file will preferably be displayed in a page that navigation to your main menu.

The following steps will use graphic files, such as photographs.

If you wish to display graphics or documents such as posters or pamphlets you have created with Illustrator and InDesign you will need to save them in a format that can be displayed either as an image (PNG, JPG, etc) or a PDF file (for Acrobat Reader).

  • To save an InDesign Document as a .jpg use menu File>Export.
  • To save an Illustrator Document as a .jpg or .png use File>Save for Web & Device....

Steps for Making a Text or Thumbnail Index from the Model Page

  1. Open the mediaportfolio.html page and modify the table to the column and row configuration you want.
  2. Determine your layout. Will you use text or thumbnails for your hyperlinks to your media files? Will you include descriptions of your media.
    See Example 1 for a layout with text links.
  3. Place/Import your graphics/media files and thumbs into a separate folder inside your local web site (root) folder.
  4. Input text.
  5. Input thumbnails, if used.
    Recommended: Go to Create thumbnails and scale your graphics with Fireworks.
    See Example 2 for layout with thumbnails.
  6. Open your index.html or your model.html page and save copies for each media sample you intend to hyperlink. Name them with a consistent convention, such as sample01.html, sample02.html, etc. You will be placing your "full-sized" graphic files on these pages, and linking your text/thumbnail index to them.
    See Example 3 for a sample page.
  7. In the new page—Sample01.html—insert the full-sized image, and align it (V=top;H=center).
  8. Repeat for each image file and "Sample" page.
  9. Highlight the text or thumb you want to use for the hyperlink and use use pointer to create the link to the appropriate page (e.g., Sample01.html).
  10. Repeat for every link.


Gallery Using Picasa (PC) (Option 2)

Go to Using Picasa to Generate a Photo Gallery (PC) for details.
  • Instructions for installation into your web page are included.

Gallery Using iPhoto (Mac) (Option 3)

Go to Using iPhoto to Generate a Photo Gallery (Mac) for details.
  • Instructions for installation into your web page are included.

Embedding & Displaying Video, Audio, or PowerPoint Presentation

Your Gallery can display and sometimes embed certain audio, video or PowerPoint presentations.

Details and instructions are included in the Design Option: Embedding & Displaying Video, Audio and PowerPoint

A Slide Show Design for a Media Portfolio

File:SlideShow example01.png
Option 1: An Animated GIF
File:SlideShow example02.png
Option 2: Slide Show Made By Bridge
File:SlideShow example03.png
Option 3: Slide Show made by Fireworks

The slide show in a media portfolio will use script or code to display images in some sequence. The options below offer different features.

Typically the slide show Design will keep its display to one constant page, importing or changing images rather than changing pages to show images.

Slide Show by Animated GIF (Option 1)

This the simplest of Slide Shows to create and to display because it is just one graphical file (GIF) which has been animated to constantly rotate through a series of images.

It can be created using Photoshop or Fireworks.

Go to Animated GIF Slide Show for details and instruction on how to create this GIF.

Slide Show by Adobe Bridge (Option 2)

This is an attractive slide show. See example. But a bit more complicated to create and install than others.

Go to Adobe Bridge to Create a Slide Show for details and instruction on how to create this GIF.

Slideshow by Fireworks (Option 3)

This slideshow uses script without a Flash plug-in. It will work best among all the Fireworks slideshow options.

However, it has limitations to its modifications, because of its unusual script. It defaults to a left-flush alignment on the web page.

Go to Fireworks to Create a Slide Show for details.

Other Resources

Design Options

Steps to make a website in Dreamweaver