New Media Writing
Stroupe
Exercise: Audio Player into Smart Phone Screen
1. For this exercise, we will use the page your created in the exercise "Google
Street View Here Now/Not Here Now."
2. Insert the image from the Smart Phone Image Exercise onto the page OR
choose existing image on page,
3. Click on the image and look in the Properties Panel to see the image's height
and width (note down numbers of pixels each dimension_
4. Choose Insert > Layout Objects > Div Tag, and Insert a div (wrapped around
the selected image, making CSS ID rule called "smartphone"
5. Open properties of #smartphone rule and make div same height and width as
image
6. Choose Category > Background. Set smartphone image as background of the
div.smartphone
7. Delete image itself from div
8. Copy/paste audio player plugin from existing location or insert a new audio
player plugin.
9. In the "CSS" panel, create a new ID called "audioplayer"
10. Apply the "#audioplayer" rule to the audio player you just pasted into the div
(through the Tag Inspector)
11. Open the rule "#audioplayer" and set the margin rules (choose "Box" on the
left) to nudge the audio player plugin into place (from top, from left) as
needed,
12. Change the size of the player (click on player on the page, change dimensions
in the Properties Panel).