Accessibility

Dreamweaver Article

 

Building a photo album with the Spry framework


Table of Contents

  1. Introduction
  2. Building the photo album page
  3. Defining the data set and adding data bindings
  4. Using CSS to define the layout of the photo album
  5. Where to go from here

Building the photo album page

We’ll begin by creating the basic structure of the photo album page. Our HTML page will consist of a <div> that contains the thumbnails and another <div> that contains the main image. If you haven’t already, now is a good time to review the finished version of the project (open gallery_finished.htm from the sample file folder) to get a better understanding of how this will work.

Note: The steps outlined in this tutorial assume you are working with Dreamweaver 8. If you are using another editor, make sure that the code you write looks similar to the sample code provided below. If you create your version of the photo album page and save it into the sample file folder, the provided CSS file will give your page a basic layout. Follow the steps below to create the HTML page for the photo album:

  1. Download the sample files. Uncompress the folder to access the files.
  2. Launch Dreamweaver. Create and save a new HTML page, taking care to save the file into the same folder that contains the sample files. Name your file 'gallery.htm'. Use the Split View setting (select View > Code and Design), so that you can refer to both the code and design windows as you follow along with these instructions.
  3. Choose Window > Insert to access the Insert panel. It is displayed at the top of the program. From the drop-down menu on the far left, choose Layout, instead of the default setting (Common).
  4. Next, click the Draw Layer button (the third button to the right of the drop-down menu).
  5. In the Design window, click and drag to draw a layer on the left half of the page. This is the <div> that will hold the thumbnail images. The layer you draw should take up most of the left half of the page. Don’t worry about the exact proportions now, because the layer can be resized later as needed. Select the layer by clicking on its "handle" on the upper left corner.
  6. While the layer is selected, access the Property inspector. (If it is not already displayed, select Window > Properties). Select the text in the field that says "Layer1" and type in the new Layer ID name: thumbContainer
  7. Click on the Draw Layer button again and draw another layer on the right side of the page. This is the <div> that will hold the larger image. Click the "handle" of the layer to select it, then, in the Property inspector, set this Layer’s ID name to: main
  8. In the Title field at the top of the page, type the page title: Ajax Album Demo

After completing these steps, review the tags in the Code window. Your HTML should look similar to the code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Album Demo</title>
<style type="text/css">
<!—
#thumbContainer {
    position:absolute;
    left:23px;
    top:127px;
    width:437px;
    height:430px;
    z-index:1;
}
#main {
    position:absolute;
    left:476px;
    top:128px;
    width:491px;
    height:315px;
    z-index:2;
}
-->
</style>
</head>
<body>
   <div id="thumbContainer"> </div>
   <div id="main"> </div>
</body>
</html>

You may see some slight differences in your code, primarily due to the exact positioning of your two <div> layers and settings you’ve selected in your Dreamweaver preferences. It is not imperative that your code looks identical to the example shown above.

Note: If you wish to use the exact HTML code from this tutorial, simply copy the code example above, then select all the code in the Code window of Dreamweaver and paste the tutorial code over it.

Now that we’ve created the HTML page, it is time to set up the dynamic functionality using the functions available in the library of the Ajax framework.

Page 2 of 5
Previous Page
Next Page