Utilizing Dreamweaver, Photoshop, and Firecrackers: Design Creation for the Web Stanford College Proceeding with Studies.

Uploaded on:
Utilizing Dreamweaver, Photoshop, and Firecrackers: Representation Generation for the Web Stanford College Proceeding with Studies CS 38 Mark Branom markb@stanford.edu http://www.stanford.edu/individuals/markb/Course Site: http://www.stanford.edu/bunch/csp/cs38/Course Depiction
Slide 1

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

Slide 2

Course Description In this hands-on class, understudies will learn fundamental illustrations generation abilities for the Web. Points include: making site pages utilizing Dreamweaver advanced picture nuts and bolts picture configurations picture control utilizing Photoshop and Fireworks discovering free craftsmanship on the web move over impacts picture maps how to utilize "slicing" to make pictures appear to stack speedier. Understudies must be acquainted with PC essentials and ought to be acquainted with the Internet. We will be taking a shot at the PC stage; be that as it may, since illustrations are cross-stage, you can apply what you figure out how to other PC stages. Week 1

Slide 3

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

Slide 4

More Administrivia Resources Each week you will get a freebee with the week’s subjects. Duplicates of the gifts and connections to assets will be presented on the CS38 site: http://www.stanford.edu/bunch/csp/cs38/How to contact me: markb@stanford.edu 650-725-1717 Week 1

Slide 5

More Administrivia You will need: Access to a PC Familiarity with PC nuts and bolts Access to the web (numerous free ISPs exist) A geocities account (we’ll do it in class) Access to the accompanying apparatuses: A content manager ( Notepad/TextEdit ) or a web creation device (e.g., Dreamweaver ) A web program ( Firefox/Internet Explorer ) Week 1

Slide 6

Assignments & Final Project The week by week class assignments will assemble toward the last venture. The last venture will be to turn in a site with pictures made, downloaded, upgraded, and/or controlled by the understudy. The task will be "turned in" by being stacked onto your geocities webspace. Week 1

Slide 7

Course Syllabus Week 1: Create basic site page with realistic and publish it on the web Week 2: Manipulate and digitize pictures Week 3: More picture control Week 4: Imagemaps & Slicing Week 5: Roll-overs and livelinesss Week 1

Slide 8

Week 1 Agenda Get realistic from a free work of art server Put realistic on website page utilizing Dreamweaver Link realistic to a site page Establish Geocities record Publish the site page and realistic (utilizing Geocities) Week 1

Slide 9

Graphics and the Web There are various ways you can get illustrations to put on a site. You can utilize a drawing program, for example, Illustrator or Freehand to make your own design, you can get representation from one of numerous craftsmanship servers, or you can alter existing representation to suit your own needs. This week, we’ll concentrate on acquiring free work of art. Week 1

Slide 10

Types of Web Graphics GIF : GIF (Graphics Interchange Format) is the most widely recognized realistic sort on the web. It can be affirmed with a hard or delicate “g.” GIF is constrained to 8-bit shading data (256 hues) and works best for line craftsmanship. It takes into consideration straightforward and enlivened representation. JPEG : JPEG (Joint Photographic Experts Group) was intended for shading rich pictures, for example, photos. JPEG packs design with high shading profundity (24-bit shading - up to 16 million hues) so they are littler and download speedier. JPEG pressure is "lossy" - some picture subtle element is lost amid pressure PNG : PNG (Portable Network Graphic) was likewise intended for shading rich pictures, yet dissimilar to the JPEG group, PNGs are not lossy. PNGs use vector realistic innovation to show pictures in rich detail paying little heed to the picture\'s span. Week 1

Slide 11

Obtaining Artwork There are various assets on the Internet for acquiring work of art. Some permit you to acquire craftsmanship for nothing (for the most part with confinements); different locales charge by the picture; still others permit you to download a boundless number of pictures, yet charge you a day by day, week by week, month to month, or yearly expense. http://dir.yahoo.com/computers_and_internet/representation/clip_art/Week 1

Slide 12

Downloading Graphics In Firefox & Internet Explorer: Point your mouse over the picture and right-tap the picture (on a Mac, control-snap) Choose “Save Image (Picture) As . . .” Specify the destination area of the picture record on you\'re PC. Click OK. Week 1

Slide 13

Downloading Graphics case Suppose you ran over this site I’ve made which has a few pictures of me. Assume you truly adored the photo of me on the left and you need to download it for utilization all alone site. How might you go about doing this? BTW, the URL is: http://www.stanford.edu/~markb/pictures.html Week 1

Slide 14

Downloading Graphics sample (cont.) Step 1: Move the mouse over the picture that you need and right-tap on the picture you need (on a Macintosh, control-snap) Step 2: Choose “Save Image As” Week 1

Slide 15

Downloading Graphics case (cont.) Step 3: Choose the area on you\'re PC where you need to spare the picture. I’m going to spare it on my floppy circle. That’s it! Week 1

Slide 16

Class Exercises 1) Obtain a realistic from a free fine art webpage and download it onto you\'re PC. 2) Insert the downloaded realistic on a website page on you\'re PC. 3) Establish a Geocities account 4) Publish the page and realistic utilizing Geocities

View more...