Week 11 Using Dreamweaver, Photoshop, and Fireworks: Graphics Production for the Web Stanford University Continuing Studies CS 38 Mark Branom Course Web Site:

CS38: Graphics Production for the Web Week 1Slide 2 of 16 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.

CS38: Graphics Production for the Web Week 1Slide 3 of 16 Administrivia Grading You have the option of taking this course for a letter grade, CR/NC, or as an Audit. Letter GradeCR/NCNGR AttendanceRequiredRequiredRecommended Homework RequiredRequiredRecommended Project Required RequiredNot required By requestBy Request Default choice

CS38: Graphics Production for the Web Week 1Slide 4 of 16 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: How to reach me: –

CS38: Graphics Production for the Web Week 1Slide 5 of 16 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) or a web creation tool (e.g., Dreamweaver) A web browser (Firefox / Internet Explorer)

CS38: Graphics Production for the Web Week 1Slide 6 of 16 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.

CS38: Graphics Production for the Web Week 1Slide 7 of 16 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

CS38: Graphics Production for the Web Week 1Slide 8 of 16 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)

CS38: Graphics Production for the Web Week 1Slide 9 of 16 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.

CS38: Graphics Production for the Web Week 1Slide 10 of 16 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.

CS38: Graphics Production for the Web Week 1Slide 11 of 16 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.

CS38: Graphics Production for the Web Week 1Slide 12 of 16 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.

CS38: Graphics Production for the Web Week 1Slide 13 of 16 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:

CS38: Graphics Production for the Web Week 1Slide 14 of 16 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”

CS38: Graphics Production for the Web Week 1Slide 15 of 16 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!

CS38: Graphics Production for the Web Week 1Slide 16 of 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.