Images of Students Learning

Export a Slideshow as HTML Web Pages in Picasa 2.7

Sharing and Publishing Your Pictures as HTML Web Galleries with Thumbnails


Image Tray
  1. Start with a single click on an image. It will appear in the Image Tray.

Hold Button
  1. Click on the Hold button to keep the image in place. Repeat this for all the images you want to appear in your web photo gallery.

Add to New Album
  1. Click on the Add to > New Album button (to the immediate right of the image tray).

Album Properties Dialogue Box
  1. The Album Properties dialogue box opens. Fill in the appropriate information, then click OK.

New Album in Library View
  1. The new album containing your selected photos will appear at the top of the Library view. All albums have a blue album icon displayed in the header area to differentiate them from folders (which look similar to manila folders).
  2. At this point, you may want to add captions because they will show up on the photos in the HTML web album.

Album Menu
  1. Click on the album header area and then from the top menu select Album
    > Export as HTML Page...


Export as HTML Page Dialogue Box
  1. A dialog box will appear. Choose the size that you want to export the pictures as. Click the Browse button to determine where all the resultant web files will be saved.
  2. Click the Next button.

Select a Web Template Dialogue Box
  1. Select a template.
  2. Click the Finish button.

Viewing the Finished Web Page in a Browser
  1. After viewing your new web photo gallery on your local PC, you can move the entire new folder and all its contents to your web server for the world to see. This can be done with an FTP program like WS_FTP or from within any web authoring program, such as Dreamweaver, that has a built in file transfer utility.

Tips & Tricks:

  1. To eliminate the Picasa logo from your web pages and move the rest of the material closer to the top margin, do the following before uploading the web pages to your web server:
  2. Minimize the browser that previously displayed your HTML web album.

Open Style.css file with Notepad
  1. Find the file called Style.css and right-click upon it. Choose Open With > Notepad.
  2. Now edit the file in the following way with any text editor (e.g. Word Pad or Notepad).
  3. Change the “MARGIN-TOP: 70px” to read “MARGINE-TOP: 10px”
  4. Delete the entry that reads “BACKGROUND-IMAGE: url (‘logo.gif’);”
  5. Save the newly edited style.css file as a .txt file in the same folder as before.
  6. Maximize your browser page where the web album appeared previously and hit the Refresh button on your browser.

    7. When you drag the index.html page into any browser, you should notice that the Picasa logo is gone from your web photo gallery and you can now upload the resultant web files folder to your web server or into Blackboard. Click here for a tutorial about placing exported web pages into blackboard.