How to Make a Website (DW)/Step 7- Make a Media Portfolio Page/Design Option: Using iPhoto to Generate a Photo Gallery (Mac)

From WSU Technology Knowledge Base
Jump to: navigation, search

In Option 3—which is for a Mac—you will use the application iPhoto (Mac) to automatically generate HTML pages for a thumbnail index of photos or other graphics, and related "sample" pages.

Generate Gallery

IPhoto web export.png
Begin with generation of your HTML pages using iPhoto:
  1. Open iPhoto
  2. Locate the images you want to use in your gallery
    NOTE: you can organize these into a "photo album" for easy reference and there you can add "meta-data" (titles, details, etc.) which you might employ on your web site.
  3. Use menu File>Export...
  4. In the dialog, select the tab "Web Pages".
  5. Click on Export.
  6. At the prompt locate your web site root on your computer. Create a new folder folder. Name it "Media Files"

Recommended: Export your larger images at or just a little smaller than 800 x 800; set your thumbnails at about 200 x 200; a white background is suggested but you may wish to match or contrast to your web page background color. In the example we have selected titles to display. Note that you can also display "meta-data," that is, additional details about each image.

Install Gallery on your Web Page

Next you will modify the files to apply them to your portfolio web site.

First: you will create a Library Item out of the "index.html" file generated by iPhoto and will install it in your mediaportfolio.html file.

  • Copy or move the "Media Files" folder into the web site ("root") folder on your computer.
  • Open Dreamweaver and access the folder "Media Files."
  • In the "media Files" folder open the index.html file. Open it.
  • Use the menu File>Save As... to save a copy of this file as "media.lbi", choosing for file type a Library Item from the selector.
  • Delete the Style.css file in the "Media Files" folder.
  • Open the mediaportfolio.html file.
  • Modify the table to provide a row for insertion of the media.lbi file.
  • Locate the media.lbi file in your Asset panel. NOTE: you may need to refresh the view by clicking on the refresh icon at the bottom of the panel, in order for it to first appear.
  • Click in the row where you want media.lbi to be inserted. Click on insert on the Asset panel.
NOTE: the table will be replaced with script from media.lbi. This is normal.

Redirect Link to Your Media Portfolio Page

Finally: you will modify the links for the "target pages" to point to the multimedia.html in the menu for "thumbnails."

  • Use the menu of Dreamweaver Sites>Change Link Sitewide....
  • Choose to change the link shown below -- use the Finder to browse to and select the file for the link.
DW dialog change link.png
  • Click on update when all links are shown.
DW dialog change link2.png

Voila - your media gallery is complete. It can be further edited with text, HTML and CSS as needed.

Other Resources

Design Options for Media Portfolios

Steps to make a website in Dreamweaver