Images

Exam 1 next Thursday (2/21/12)

Previous exam: Fall 2012.

Lab 5

myPod site

1. Create a LAB5 subdirectory of your LABS directory.
2. In that directory, download and extract mypod.zip. (Note that the directory structure created is slightly different for that described in the text.)
3. View the index.html page in the mypod directory with the Google Chrome browser.
4. View the source HTML for this page by typing: CTRL-u.
5. Edit this page, replacing the comment with an img element having an attribute assignment of href to photos/seattle_video.jpg. Save and view the resulting page in your browser.
6. Resize the seattle image:
   • In the photos directory, open seattle_video.jpg with Windows Paint
   • Save as seattle_video_med.jpg.
   • In the Image menu, select Stretch/Skew....
   • Replace 100% with 50% in the Horizontal and Vertical Stretch fields.
   • Save the file again.
7. Change the value of the href attribute of the img element in index.html to photos/seatle_video_med.jpg. Save and reload this page in your browser.
8. Add the
   • seattle_classic.jpg,
   • seattle_shuffle.jpg,
   • seattle_downtown.jpg,
   • seattle_britain.jpg, and
   • seattle_applestore.jpg
   images to your index.html file (p. 190).
9. Resize seattle_video_med.jpg from 100% to 20% (horizontal and verticle) and save in the tiny sub-directory of photos.
10. Change the values of src attributes of the img elements in index.html to point to files in the photos/tiny directory. Save and view in a browser.
11. Create a seattle_video.html page in you html directory that displays seattle_video_med.jpg.
12. Make the seattle_video thumbnail image in index.html into the label of a hyperlink to this seattle_video.html page.
13. Make the remaining thumbnail images in index.html links to the corresponding pages already in the html directory. Save and explore with a browser.
14. Convert myPod.psd from Photoshop to png format:
    • Open image converter.
    • Upload myPod.psd from the logo directory.
    • Download this file as a pgn file to the same directory.
15. Add this logo to index.html.

Your photo

1. Create a thumbnail image of yourself.
2. Add this thumbnail to your index.html page in your PROJECT directory.
3. Create a new page in your PROJECT directory with your (full size) image in it.
4. Make the thumbnail in your index.html page a clickable line to the page with your image.
5. Add images to your family.html page.

More JavaScript

1. Copy hello.html from LAB4 to a new LAB5 directory.
2. After the following line in the new hello.html page:
           v a r   n a m e   =   p r o m p t ( " W h o   A r e   Y o u ? " ) ;
   add these two lines
           v a r   g r e e t i n g   =   " H i   " + n a m e ;
        a l e r t ( g r e e t i n g ) ;
   
3. Save your file and open it in some browser. Type your name in the popup window. Then hit Enter.
4. Edit the index.html page of your LABS directory to include a new list item with links to the index.html and hello.html pages for today's lab.

Synchronize your thumbdrive and your website.

1. From the start button, open up FileZilla.
2. In the Local site: window, enter the absolute path to your CIS228 folder.
3. In the Host: window, enter air.lehman.edu.
4. In the Username: window, enter your first name . your last name (all lower case).
5. In the Password: window, enter art12345.
6. Hit the Quickconnect button.
7. In the Remote site: window, navigate first to the Sites folder, then to the CIS228 folder.
8. From the View menu (at the top), select Synchronize browsing.
9. Also from the View menu, select Directory comparison and Enable.
10. Upload the new and recently modified files from your thumdrive to your website.

Always turn off your computer and screen before leaving the room.