|
|
A Beginner’s Photo
Album Project
in eZedia QTI2
An
Instant Photo Album Website or CD-ROM Project
With the massive increase in the use of digital cameras, people are
anxious to share their photos online. This first project for the Fall
semester recognizes that everyone has some use for a photo album. For
school environments, students can create photo albums to describe field
trips or projects. With the addition of audio and movie files, these
simple projects go to an entirely more advanced level.
I can't be in the room with all of you at the same time as the people
who use these pages seem to come from all over the world. I decided it
might be helpful to provide you with some additional resources to get
you going. Consequently, there are instructional movies showing all the
steps for the project on this page. On this website version of these
instructions, there are direct links to the movies. Due to the sheer
length of the movies, I have encoded them using the Real Media format.
You can drag on the bottom, right-hand corner of the player to make it
larger once they are on your desktop. You can even download the movies.
Keep in mind that they are copyrighted and you may not distribute them.
Contact me directly if you feel you have such a need.
This is considered a beginner's project for QTI2. There are two levels
to the project on this webpage. The first level runs you through all
the basics. The second level introduces a few more features, but you
should find it quite simple as it builds entirely on your experience
with Level 1.
I've created instructional movies that go with each level. The movies
walk you through the project each time. The advantage for you is that
you can start and stop the movie as you read through these instructions
and create your project. All the resources used in the Photo Album
Website Project were created by me. I've provided links to those
resources so that you can download them if you're not in our class.
You'll find the resource links at the bottom of this page.There are
also some short movies for the sections on what to do if you've made
mistakes.
Here is a screen capture of the final product when you finish Level 2.
Level 1:
Click
here to access the movie providing an overview of the Level 1 Project.
Click here to
see the completed Level 1 project running on the web.
1. Put your practice CD in the cd-rom drive. Close the door of the
drive.
2. Double-click on the My Computer icon on your computer desktop.
3. Click on My Documents in the left-hand column.
4. Click on the Make a New Folder option.
5. Make a new folder for this project and call it PA-Your Name.
If
you have an “oops!” and just end up with a folder called “New folder,”
right click on it and choose Rename. Try again.
6. Look in the left column again of your “My Documents” window and
click on My Computer.
7. Look for the icon representing your cd-rom drive and double-click it.
8. Begin QTI2. (Start > Programs > eZedia QTI2)
9. In QTI2, if the opening splash screen directing you to other
information about the program comes up, click Close.
10. You should have a white document window open in front of you.
If NOT, click on File, New,
Document.
11. Look down at your taskbar at the very bottom of your screen. You’ll
see a tab for your cd-rom drive. Usually, it is a yellow file folder on
it. Click on the tab to bring it up.
12. Position and/or resize the window so you can see your QTI document
in the background at the same time that you have your cd-rom window
open.
To
resize, move your mouse to the side of the window, click, hold, and
drag inward. If it fills the whole screen, click on the middle button
on the top right corner. That is your restore down/maximize button.
When the window is maximized, clicking on that will make it smaller.
Now adjust it from the sides.
13. Locate the folder that says
“Week 1.” Double-click on it. Locate the folder within that which says
“Photo Album Practice Project.” Open that folder.
14. You will see another folder called “Photos for Album”. Double-click
to open it. There will be several photos in the folder.
15. Hold down the CTRL key and touch the letter “A.” That command tells
the computer to select ALL of the items in the folder.
You
could also hold down the SHIFT key and click on each picture.
16. The photos are now all highlighted.
17. Click on any of the highlighted pictures, keep holding your mouse
button down, and drag the photos into the QTI document window.
If nothing appears to be happening, click
anywhere in the QTI2 window to see a message from QTI2. It is
waiting for you to respond. You just can't see it because your folder
is hiding the message.
18. QTI will now pop-up a window that asks if you want:
- Create all of these objects on this frame (in
other words, pile them all in one place)
- Make a new frame for each object (this sorts them
out, one to a frame)
- Create new frames using images as backgrounds
(this puts each photo on a new frame but glues them in place like a
scrapbook)
CHOOSE the
second option - create a new frame for each object.
19. Click on the Attributes icon (the letter “i” in a blue circle) in
the top, right-hand corner of QTI2 to open up the Attributes Panel.
You’ll need it in a moment. It’s a good idea to always have it open.
20. Look at the bottom, left-hand corner of your document frame. You’ll
see tiny navigation arrows there. click on the bottom left-hand arrow
on your DOCUMENT window to use the first arrow which will take you back
to Frame 1 of your project. You can also click where it says 1 of 7,
type in the number and hit Enter.
Why go to Frame 1? You’re about to add
your navigation objects. It actually doesn’t matter what frame you’re
on if these objects are going to be on all frames. BUT . . .if you
don’t tell it to appear on all frames and don’t discover that until
later, you might not think to look on each frame to find where you put
them! So, telling you to go to Frame 1 is just a way to cut down on any
mysteries later.
21. Click on the Goto Object in the toolbar.
22. A green button appeared in the middle of your frame. Move it to the
bottom, right-hand corner of your document frame so it can still be
plainly seen. Make sure the Goto Object is still “selected” (has small
handles around it).
23. Look at the Attributes Panel.
24. Where it says Title - type in Next.
25. Where it says “Exists on” - click on the drop-down option and
choose All Frames.
26. At the bottom of the Attributes Panel where its says “Action”,
click on the drop-down option and change Specified to Next.
27. If the text on the button doesn’t seem to be sitting properly,
stretch out your button a bit by grabbing onto one of the handles with
your mouse and dragging it.
28. Repeat the steps beginning at #16 to make a second Goto Object.
This time title the Goto Object “Previous,” keep the other options the
same except for Action where you will change Specified to Previous.
29. Click on File, Save As and save the file in the folder you created
at the beginning.
30. You’re all done. It is time to export the file and turn it into a
website.
31. Click on File, Generate Website.
32. Save the file in the same project folder that you made earlier.
When done saving, QTI2 will automatically display the project in your
browser.
33. To locate your project later to show someone:
a. Get to My Documents and your Photo Album Project
Folder.
To do that, double-click on the
My Computer icon and then click on My Documents or go to Start, My
Documents
b. In your Photo Album Project Folder, you will
notice that QTI2 created a folder called “Name of your project.” Open
it.
Note: You’ll also see a second
folder QTI2 created earlier that is entitled “Name of your
project.”eZediaQTIW. That is the folder containing your working files.
c. QTI2 created a series of webpages for you.
Double-click the one labeled “index.html. The index.html file is always
the starting file of just about any website.
Look critically at your
project. Any problems?
Click here to see the short movie on how to
fix the usual little things that can be amiss.
1 No buttons on the first frame.
Why? QTI2 has a smart feature that says the first
frame doesn’t need a previous button if there is no “previous” frame,
so that button definitely won’t be there. However, if the next button
is missing, it’s usually because you forgot to change Frame to Next
under the Action section of the Attributes Panel. Or, next to Exists On
- you didn’t change it to All Frames. Just change whichever one you
forgot and regenerate.
2. Are your navigation buttons
the same size?
You can use eZedia QTI to make them exactly the same
without guessing.
Click on the button you think is the best.
Look at the Attributes Panel. You’ll see a section
called Dimensions at the bottom.
Write down the Height and Width.
Click on the button you want to change.
Look at the Attributes Panel. Make the Height and
Width dimensions the same as the first button.
3. Are the navigation buttons
placed in positions on the frame that appear to be mirror images of
each position or are, in some way, balanced on the display?
There are a couple of ways to do this. The easiest
is to use the grid feature in QTI2.
Click on View, Grid, Show Grid Settings.
Next, click on Show Grid.
Then, click on the slider bar and move it to make
the grid larger or smaller, depending on what you’re trying to line up.
Look at your document window. Move your buttons to line them up. Adjust
the grid if you need more rows and columns.(Notice that you can have
the Grid Settings dialog box open while you move things on the screen.
This is very helpful.)
As with all software programs, clicking on Snap to
Grid will limit your movement options. In the case of QTI2, Snap to
Grid will cause the object to be anchored to the top, left-hand corner
of the coordinate pairs.
4. Is the print on the button
centered?
Select the button by clicking on it and then drag on
the handles to make it a little bigger if you need to have the text
move into place. When the text is not centered, that’s a sign that the
button isn’t large enough.
5. Did the navigation Goto
Objects work on each frame or did you forget to do something?
Go back and check your project if they don’t
work. You’ll find that you forgot to change the Actions area so that
they’re probably all pointed to go to Frame 1. Or, next to Exists
On - you didn’t change it to All Frames.
6. There are no navigation
objects on the project and you can’t get past Frame 1.
See the comments under #4. QTI doesn’t display an
active Goto Object on a page where it was supposed to go to. (Ex., when
it is set to go to Frame 3, on Frame 3 you won’t find the Goto Object
that was supposed to take you there. It did its job and now it is
hiding. Of course, it is still on the other frames waiting to take
people to Frame 3!) Most times, you’ll find the reason you don’t have
any navigation objects showing up is because you forgot to change the
Actions area or neglected to tell QTI2 to put the objects on All
Frames. Go back and do that, save the project, and generate the website
again. All will be well.
Level 2 of the Beginner’s
Photo Album Project
Click
here to access the movie providing an overview of the Level 2 Project.
Click here to
see the entire Level 2 project running on the web.
If your previous QTI2 project is open, close it by clicking on the X in
the document window or by going to File, Close.
You are going to repeat the project you just completed. This time there
will be some additions to make it a bit fancier. You will be:
a) adding a graphic that will “frame” each picture
b) changing the style of the button
c) color coordinating the buttons on the frames
d) changing the color for each “state” of the button
e) adding a title for the project
f) converting the text to a graphic so it will display properly on all
computers
(Steps are numbered continuing from
Level 1.)
34. QTI2 should be up and running on your machine and the Attributes
Panel should be open.
35. If you don’t have a blank document window open, click on File, New,
Document.
36. Repeat the process of bringing in the photos as you did in #15
above.
NOTE: This time use the trick of holding
down the SHIFT key and then clicking on each photo to select it.
37. With all of your photos now in frames, click on the bottom
left-hand arrow on your DOCUMENT window to use the first arrow which
will take you back to Frame 1 of your project. You can also click where
it says 1 of 7, type in the number and hit Enter.
38. You should now be on Frame 1 of your project.
39. Click on the Graphic icon in the toolbar. When the Open dialog box
appears, navigate back to your Week 1 folder where you will choose a
graphic called Wood4b.png. Select the graphic and then click Open. Move
it into place with your mouse if need be.
You can also use the Attributes Panel to
position the graphic. Look at the X and Y coordinates next to
Dimensions. Make both of the say 0 (zero).
40. Look at the Attributes Panel. On the Selection Tab, change the
option for Exists on This Frame Only to Exists on All Frames.
41. Bring in a Goto Object as you did in #20. Position it in the
bottom, right-hand corner.
42. In the Attributes Panel, make the title say Next. Have it say Exists on All Frames.
43. Under Appearance, click on the drop-down menu and choose Glass 2.
44. For color, click on the first color rectangle. The color dialog box
comes up. Next to the word Red, type in 204; Green, type 102; Blue,
type 0. Click OK. That has changed the main color for your button - the
way it shows up when the frame opens.
45. We’re now going to change the colors of the button when a mouse is
over it and when someone clicks on it with a mouse.
46. Click on the color rectangle next to Over. When the color dialog
box comes up make these changes. Next to the word Red, type in 255;
Green, type in 148; Blue, type in 40. Click OK.
47. Click on the color rectangle next to Pressed. When the color dialog
box comes up, click on the yellow square at the top of the 2nd column
in the basic colors section.
48. Look at the bottom of the Attributes Panel and make sure that
Action is set to Go to Frame in Current File and change Frame to Next.
49. Look at your button on the frame. Check now to see if it needs to
be enlarged a bit to make sure the text shows properly.
50. Repeat this process to create a Previous button that will go on all
the frames.
Note:
A quick way to do this is to click back in your document frame. Then
click once on the Next button to select it. Then hold down the CTRL key
and touch the letter D (to duplicate the button.) Just change the title
to Previous and change the Action area to say Frame - Previous.
51. Create a title. Click on the text object in the toolbar represented
by the letter “A.” When the object appears in the center of your frame
(have you noticed they all show up there?), type in For Pulaski.
Highlight the text (click, hold, and drag across it to select it).
Click on Format, Font, Show Fonts.
52. Choose Times or Times New Roman (move down the slider bar to see it
and then click on it); Bold for Font Style; 28 for Font Size, and White
for Color. Click OK.
53. Return to your frame and grab the handles of your Text Object to
make it larger to accommodate the bigger font size.
54. Position the Text Object at the center of the bottom border of the
frame.
55. With the Text Object selected (it has little handles on it), go to
Object, Convert to Picture. Double-check the position of the new
graphic object.
56. With your title selected, look at the Attributes Panel. Make sure
it says that this object will appear on all frames. You might also want
to name your graphic object “Title.”
57. Generate your new website.
58. Refer to the comments from before about looking critically at your
project.
What if I wanted to put this
website up on the Internet for real or if I wanted to put it on a
cd-rom or disk?
No problem. The folder QTI2 created for you is ready to go as is. You
don’t have to do anything to it. You’ll need space on a webserver and
access to FTP (file transfer protocol) software that allows you to copy
files from your computer to another one. You’ll just send the entire
file folder up to the webserver. You can also put the project on a
cd-rom drive and just double-click on the index.html file to have it
load in a browser. This particular practice project is so small it can
actually be saved to a 3 ½” disk.
Why not just use PowerPoint?
Good question. Doing a photo album in PowerPoint did take longer, but
the big difference was the resulting file size which was enormous by
comparison. I took the exact same photos and did Level 1 of this
project in both QTI2 and PowerPoint. The finished project folder for
the resulting website in QTI2 was 644 KB. The finished size in
PowerPoint was 9.05 MB. That means for the same amount of information, PowerPoint took over 14
times more space to make the same project. Now, multiply that
out using 15 or 40 or 500 students. If 500 students all did a single
little photo project that would mean:
| Software
Used |
#
of Students x Known File Size |
Total
Amount of Space |
PowerPoint
|
500 Students x 9,050 KB
(9.05 MB) for project |
4,525
MB |
| QTI2 |
500 Students x 644 KB
(.644 MB) for project |
32 MB |
With bandwidth and storage space at a premium, we might want to start
looking at what happens to the demands as we move to have more and more
students become skilled in the use of technology tools. It gets
interesting, doesn’t it?!
Resources for the
Photo Album Website Project
Level 1 - Photos (All from this site. Choose others, if you want, by
going to the Photos link on the left.)
http://www.jmadden.info/Pulaski/Pulaski03.jpg
http://www.jmadden.info/Pulaski/Pulaski08.jpg
http://www.jmadden.info/Pulaski/Pulaski34.jpg
http://www.jmadden.info/Pulaski/Pulaski58.jpg
http://www.jmadden.info/Pulaski/Pulaski85.jpg
http://www.jmadden.info/Pulaski/Pulaski69.jpg
http://www.jmadden.info/Pulaski/Pulaski62.jpg
Level 2 - Use the same photos as Level 1. The fancy frame is one that I
created and is available online through the following link:
http://photos.jmadden.org/displayimage.php?album=18&pos=2
More photo album projects
at this site:
http://www.jmadden.info/Digital_Photo_Album2.htm
http://www.jmadden.info/Photo_Album_Project.htm
http://www.jmadden.info/PhotoGallery.htm
http://www.jmadden.info/PhotoGallery2.htm
|
