Making a page-by-page narrative with html

For my photo essay, I had each photo on a separate page, linking them through arrows next to the photos. I think it adds a certain dramatic effect when the entire image comes at you at once, instead of scrolling into it. It also makes the viewing experience a little more interactive—everyone likes to feel as if the website knows they’re there. I noticed a lot of people had it laid out vertically on one page, so I thought I’d share how to make it a little less linear.

You can do it right in html. Here’s how: 

1)   Customize your arrows in Photoshop. Just grab some from Google and make them the shape, color and size you want (mine are half of an inch wide).

Image

2)   Save each arrow individually: you want a left arrow and a right arrow.

3)   In Dreamweaver you’re basically going to be creating the same page 8+ times, just with a different image, so it feels like the viewer isn’t leaving the photo essay. **Make sure to attach the CSS style you used for the template to each one of the new ones. **

 

This is what the template will look something like:

 Image

4)   You’ll need to do this before you link all the arrows to pages because they need a destination html.

5)   So first make your template page. To get the image in between the arrows, you just type the codes horizontally next to each other instead of below.

 Image

6)   Now you’ll have the three images side by side if you want to preview it.

7)   Next, you need to link the left arrow to the page before and the right to the page after. Highlight the image name, and click: modify + make link , then browse for where you want that arrow to land (one of the html pages you made from the initial template.

8)   The code will look like this after you link the arrows.

Image

9)   Do that for all your arrows in each one of your pages. And bingo blamo!

Image

-BM

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s