Week 5 Task : 5 Page HTML Comic

The aim here is to make a simple sequence of pages with an image on each, that tell a story over time. More than just practice for embedding images and linking pages, it’s also about considering the link as an edit, and thinking about the relationship between images, and between pages, and the impact of links.

A. Create a new folder on your rmit server called photostory.
B. Browse the images from this collection of public domain photos, and select 5 that in sequence offer some kind of story.
C. Try and keep Scott McCloud‘s comic transitions in mind, when creating a sequence. Include a few different types.

( moment to moment, action to action, subject to subject, scene to scene, aspect to aspect and non-sequitur. )

D. Save your chosen photographs, noting the authors and URL for each image. Note that one photo might be used twice, by cropping it to choose different parts of the image.
[ How to use photoshop’s cropping tool ]

If necessary crop your images in Photoshop so they are around 640 x 480 pixels in dimensions.

E. Create a new folder called images at your RMIT server. Name each of your images 1.jpg, 2.jpg etc.

Upload these into your images folder. The address then, of your images will be

http://raws.adc.rmit.edu.au/~s12345/images/1.jpg ( or whatever you have called your image file )

This address is what you will use within the HTML code for embedding your images.

F. Construct 5 separate webpages. We will upload these to your photostory folder once we have included the code for embedding your images. For now we will stick to writing webpages within text edit ( remember to choose ‘format’ and ‘make plain text’ before saving), and the w3schools example pages. All pages should have a .html extension on the end.

G. Embed one of these images in each of your html pages. [ html.net on images. ( Say hi to Hasselhoff ) ]
H. Link each page to the next one in the sequence. [ w3schools on links ]

( Pages called beginning.html loaded to your photostory folder will have the URL http://raws.adc.rmit.edu.au/~s12345/photostory/beginning.html and this is the URL to use when linking to the page from another. ) You can link pages by making an image a link, or by including a text caption underneath and linking this word to the next page.

I. [ BONUS OPTION : On one of your images, use the image mapping tool to select two regions, and make these links to other pages. ]
J. Re-upload your pages and test the images and links work.
K. When completed, post a link for the first page to your blog.


Tags: , ,

3 Responses to “Week 5 Task : 5 Page HTML Comic”

  1. Week 5: Layers, Media + Digital Storytelling on the Web « Rmitmusic09’s Blog Says:

    […] Rmitmusic09’s Blog « Week 5 Task : 5 Page HTML Comic […]

  2. Week 5: Media + Meaning on the Web « make + create + interwebs Says:

    […] Class exercise: Comics and HTML task (from Sean’s blog) […]

  3. Finally an idea for my project! « Vinny's Amazing RMIT Blog Says:

    […] I hope to make one of the car pages a slideshow/image sequence using the skills we learnt in week 5. The music section I want to embed some of my music from a project I have been doing, but it will […]

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

%d bloggers like this: