1. IT 245 - Website Development Welcome!

2. Welcome to Unit 7! Optimizing Images and creating photo albums in Dreamweaver There are no textbook readings for this Unit. Please be sure to go through the Vocabulary pdf, the Web readings and the Atomic Learning tutorials.

3. Introduction In this unit, you’ll learn how to include images in your Web site. You’ll learn how to insert an image, use Bridge to import Photoshop or Fireworks files, and copy and paste an image from Photoshop or Fireworks. The Web is not as much a place as it is an experience. And, essential to that experience, are images and graphics – both still and animated – that populate most Web sites.

4. To-Do-List Review Key Terms On the Reading page Respond to the Discussion Board 20 Points Complete the unit project and upload to assignment dropbox for grading 60 Points On the Assignment page Attend the Weekly Seminar or complete the FLA quiz 20 Points Log in from Student's Home page

5. Seminar Overview In this Seminar we will review: Optimizing images in Dreamweaver Creating a photo album using Adobe Bridge

6. Creating Web Photo Album For all CS5 users: The Create Web Photo Album feature has been deprecated as of Dreamweaver CS5. You will find more information, including various options at this link: http://help.adobe.com/en_US/dreamweaver/cs/usin g/WSc78c5058ca073340dcda9110b1f693f21- 7ad1a.html http://help.adobe.com/en_US/dreamweaver/cs/usin g/WSc78c5058ca073340dcda9110b1f693f21- 7ad1a.html

7. Creating Web Photo Album The easiest way to create a web photo album is to use Adobe Bridge. These videos show how to do this: http://www.youtube.com/watch?v=vVJGSu4mUXE http://tv.adobe.com/watch/learn-adobe-bridge- cs5/creating-image-galleries-with-adobe-bridge/ http://tv.adobe.com/watch/learn-adobe-bridge- cs5/creating-image-galleries-with-adobe-bridge/ You can also use CS4 version of Dreamweaver to create a photo album.

8. Creating Web Photo Album Incorporating an Adobe Bridge Web Gallery into a Dreamweaver Page http://foundationphp.com/tutorials/gallery/embed1.php

9. Creating Web Photo Album The easiest way to create a web photo album is to use Adobe Bridge. These videos show how to do this: http://www.youtube.com/watch?v=vVJGSu4mUXE http://tv.adobe.com/watch/learn-adobe-bridge- cs5/creating-image-galleries-with-adobe-bridge/ http://tv.adobe.com/watch/learn-adobe-bridge- cs5/creating-image-galleries-with-adobe-bridge/ You can also use CS4 version of Dreamweaver to create a photo album.

10. Optimize an image for the web Using Adobe Photoshop: Optimize an image for the web http://help.adobe.com/en_US/creativesuite/cs/using/W SB3484C68-ECD2-4fa4-B7CC- 447A5FE86680.html

11. Optimize an image for the web –Adobe Photoshop Choose File > Save For Web & Devices. Click a tab at the top of the dialog box to select a display option: Optimized, 2 ‑ Up, or 4 ‑ Up. If you select 4 ‑ Up, click the preview you want to optimize. (Optional) If your image contains multiple slices, select one or more slices you want to optimize. Select a preset optimization setting from the Preset menu, or set individual optimization options. The available options change depending on the file format you select. If you’re working in 4 ‑ Up mode, choose Repopulate Views from the Optimize menu to automatically generate lower-quality versions of the image after you change the optimization settings.

12. Optimize an image for the web –Adobe Photoshop Fine-tune the optimization settings until you are satisfied with the balance of image quality and file size. If your image contains multiple slices, be sure to optimize all the slices. To restore an optimized preview to the original version, select it and then choose Original from the Preset menu. If optimizing an image with an embedded color profile other than RGB, you should convert the image’s colors to RGB before you save the image for use on the web. This insures that the colors you see in the optimized image will look the same in different web browsers. The Convert to RGB option is selected by default.

13. Optimize an image for the web –Adobe Photoshop Click Save. In the Save Optimized As dialog box, do the following, and then click Save: Enter a file name, and select a location for the resulting file or files. Select a Format option to specify what kind of files you want to save: an HTML file and image files, only image files, or only an HTML file. (Optional) Set output settings for HTML and image files.

14. Optimize an image for the web –Adobe Photoshop Preview optimized images in a web browser You can preview an optimized image in any web browser installed on your system from the Save For Web & Devices dialog box (File > Save For Web & Devices). The browser preview displays the image with a caption listing the image’s file type, pixel dimensions, file size, compression specifications, and other HTML information. To preview an image in your default web browser, click the browser icon at the bottom of the Save For Web & Devices dialog box.

15. Optimize an image for the web –Adobe Photoshop Preview optimized images in a web browser To select a different browser, select Other from the browser pop ‑ up menu (next to the browser icon). To add, edit, or remove a browser in the browser pop ‑ up menu, select Edit List from the browser pop ‑ up menu. In the Browsers dialog box, you can find all browsers on your computer and set the default browser to preview your image.

16. Optimize an image for the web –Adobe Photoshop More information on Web Graphics Optimization in CS5: http://help.adobe.com/en_US/creativesuite/cs/using/WSC7A1F92 4-DD38-49b4-B84B-EFF50416C860.html

17. Project Project Instructions: Use Dreamweaver to optimize at least three new images. Use Dreamweaver (and Bridge, Fireworks, or Photoshop if you’re using Dreamweaver CS5) to add a photo album to one of the pages on your site. Upload the images and your updated page to your Web site. Post your URL to the Comments area of the Project 7 Dropbox.

18. Project Project requirements: The optimized images are sized appropriately for download and to fit in the content area of the Web pages. The photo album is laid out using Dreamweaver CS4 and/or Dreamweaver CS5 and Bridge, Photoshop, or Fireworks. The images and revised photo album page are uploaded to the Web site. The Web site URL is viable and is posted to the Comments area of the Project 7 Dropbox.

19. Project - Grading Rubrics The optimized images are sized appropriately for download and to fit in the content area of the Web pages. : 0-30; The photo album is laid out using Dreamweaver CS5 (or Dreamweaver CS4) and Bridge, Photoshop, or Fireworks.0- 20. Total: 0-50.

20. Thank you! Feel free to contact me with any questions! emartignon@kaplan.edu emartignon@kaplan.edu Use the Virtual Office to post questions throughout the week, as well as to upload your zipped folder if you need me to look at the code!