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

From WSU Technology Knowledge Base
Jump to: navigation, search

In Option 2—which is for a PC—you will use the application Picasa to automatically generate HTML pages for a thumbnail index of photos or other graphics, and related "sample" pages.

Generate Gallery

Begin with generation of your HTML pages using Picasa:

Illustration of Dialog Box for Exporting as HTML Page...
  1. Open Picasa.
  2. Select the source folder of your photos. Note: you can create a new folder of selected photos for the purpose.
  3. With the source folder selected, use the menu Folder>Export as HTML Page... to bring up the dialog for creating a web-based gallery/index. See the illustration on the right.
  4. Choose Export pictures at... "800 pixels (for large web pages)" for your image size.
  5. Name the Web page title...
  6. Select a folder/location to save these files.
  7. In the illustrated example choose "Template 3, 2-page white background"
  8. Click on Export
    NOTE: The files generated include a "home page" (index.html) and sub-pages (target1.html,target2.html, etc.)
    as well as the generated images that your need (thumbnails and larger images).
  9. The generated HTML will be automatically opened in your default browser.

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 Picasa 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 Explorer 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