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

Transcription

1 Using Dreamweaver, Photoshop, and Fireworks: Graphics Production for the Web Stanford University Continuing Studies CS 38 Mark Branom Course Web Site: Week 1 1 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 Slide 2 of 16

2 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 Slide 3 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: markb@stanford.edu Week 1 Slide 4 of 16

3 More Administrivia You will need: Access to a computer Familiarity with computer basics Access to the internet (many free ISPs exist) A 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) Week 1 Slide 5 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 webs.com webspace. Week 1 Slide 6 of 16 Page of 8

4 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 Slide 7 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 webs.com account Publish the web page and graphic (using webs.com) Week 1 Slide 8 of 16

5 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 Slide 9 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. Week 1 Slide 10 of 16

6 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. Week 1 Slide 11 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. Week 1 Slide 12 of 16

7 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: Week 1 Slide 13 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 Week 1 Slide 14 of 16

8 Downloading Graphics example (cont.) Step 3: Choose the location on your computer where you want to save the image. That s it! Week 1 Slide 15 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 webs.com account 4) Publish the web page and graphic using webs.com. Week 1 Slide 16 of 16 Page of 8