Using Dreamweaver, Photoshop, and Fireworks: Graphics Production for the Web Stanford University Continuing Studies CS

1. Using Dreamweaver, Photoshop, and Fireworks: Graphics Production for the WebStanford University Continuing Studies CS 38 Mark Branom markb@stanford.edu http://www.stanford.edu/people/markb/ Course Web Site: http://www.stanford.edu/group/csp/cs38/ Week 1

2. Course Description In this hands-on class, students will learn basic graphics production skills for the Web. Topics include: • creating web pages using Dreamweaver • digital image basics • image formats • image manipulation using Photoshop and Fireworks • finding free artwork on the web • roll-over effects • image maps • how to use "slicing" to make images seem to load faster. Students must be familiar with computer basics and should be familiar with the Internet. We will be working on the PC platform; however, since graphics are cross-platform, you can apply what you learn to other computer platforms. Week 1

3. Administrivia Grading You have the option of taking this course for a letter grade, CR/NC, or as an Audit. Letter Grade CR/NC NGR Attendance Required Required Recommended Homework Required Required Recommended Project Required Required Not required By request By Request Default choice Week 1

4. More Administrivia • Resources • Each week you will receive a handout with the week’s topics. Copies of the handouts and links to resources will be posted to the CS38 website: • http://www.stanford.edu/group/csp/cs38/ • How to reach me: • markb@stanford.edu • 650-725-1717 Week 1

5. More Administrivia • You will need: • Access to a computer • Familiarity with computer basics • Access to the internet (many free ISPs exist) • A geocities account (we’ll do it in class) • Access to the following tools: • A text editor (Notepad / TextEdit) ora web creation tool (e.g., Dreamweaver) • A web browser (Firefox / Internet Explorer) Week 1

6. Assignments & Final Project • The weekly class assignments will build toward the final project. • The final project will be to turn in a web site with images created, downloaded, updated, and/or manipulated by the student. • The assignment will be "turned in" by being loaded onto your geocities webspace. Week 1

7. Course Syllabus • Week 1: Create simple web page with graphic and publish it on the web • Week 2: Manipulate and digitize images • Week 3: More image manipulation • Week 4: Imagemaps & Slicing • Week 5: Roll-overs and animations Week 1

8. Week 1 Agenda • Get graphic from a free artwork server • Put graphic on web page using Dreamweaver • Link graphic to a web page • Establish Geocities account • Publish the web page and graphic (using Geocities) Week 1

9. Graphics and the Web There are a number of ways you can obtain graphics to put on a web site. You can use a drawing program such as Illustrator or Freehand to create your own graphics, you can obtain graphics from one of many artwork servers, or you can modify existing graphics to suit your own needs. This week, we’ll focus on obtaining free artwork. Week 1

10. Types of Web Graphics GIF: GIF (Graphics Interchange Format) is the most common graphic type on the web. It can be pronounced with a hard or soft “g.” GIF is limited to 8-bit color information (256 colors) and works best for line art. It allows for transparent and animated graphics. JPEG: JPEG (Joint Photographic Experts Group) was designed for color-rich images, such as photographs. JPEG compresses graphics with high color depth (24-bit color -- up to 16 million colors) so that they are smaller and download faster. JPEG compression is "lossy" -- some image detail is lost during compression PNG: PNG (Portable Network Graphic) was also designed for color-rich images, but unlike the JPEG format, PNGs are not lossy. PNGs use vector graphic technology to display images in rich detail regardless of the size of the image. Week 1

11. Obtaining Artwork • There are a number of resources on the Internet for obtaining artwork. Some allow you to obtain artwork for free (usually with restrictions); other sites charge by the image; still others allow you to download an unlimited number of images, but charge you a daily, weekly, monthly, or annual fee. http://dir.yahoo.com/computers_and_internet/graphics/clip_art/ Week 1

12. Downloading Graphics • In Firefox & Internet Explorer: • Point your mouse over the image and right-click the image (on a Mac, control-click) • Choose “Save Image (Picture) As . . .” • Specify the destination location of the image file on your computer. Click OK. Week 1

13. Downloading Graphics example • Suppose you came across this website I’ve created which has some pictures of me. Suppose you really loved the picture of me on the left and you want to download it for use on your own website. How would you go about doing this? BTW, the URL is: http://www.stanford.edu/~markb/pictures.html Week 1

14. Downloading Graphics example (cont.) • Step 1: Move the mouse over the image that you want and right-click on the image you want (on a Macintosh, control-click) • Step 2: Choose “Save Image As” Week 1

15. Downloading Graphics example (cont.) • Step 3: Choose the location on your computer where you want to save the image. I’m going to save it on my floppy disk. • That’s it! Week 1

16. Class Exercises 1) Obtain a graphic from a free artwork site and download it onto your computer. 2) Insert the downloaded graphic on a web page on your computer. 3) Establish a Geocities account 4) Publish the web page and graphic using Geocities. Week 1