waite/oup-webgraphicsbyfoley.doc · web viewdemonstrate the basic fundamentals of word processing...

1

Oswego Update Project

A Graduate Research ProjectUpdating Course Outlines in Technology Education

June 2004

“Web and Graphic Design”(formerly “Graphic Communications”)

In collaboration with:

Developer:

Mr. Michael R. Foley, Graduate Research, SUNY – Oswego, [email protected]

Project Directors:

Dr. William Waite, Professor, SUNY-Oswego, [email protected] Mr. Eric Suhr, Liaison, New York State Education Department, [email protected]

Content Consultants:

Mr. Bill Mulvey, Geneva City School District, [email protected] Mr. Carl Palmer, Ithaca City School District, [email protected]. Sean Brown, Liverpool School District, [email protected]

mailto:[email protected]






2

Digitally available atwww.oswego.edu/~waite

http://www.oswego.edu/~waite

3

Forward

The “Oswego Update Project” is collaboration between SUNY Oswego and the NYS Education Department to refresh and modernize existing Technology Education course outlines. New York State Learning Standards will be identified and organized.

The original work was a NYSED initiative during the transformation from Industrial Arts to Technology Education in the 1980s. These courses have proven to be very popular and most durable for the profession. In fact, many have been used as course models in other states.

Hundreds of sections are offered in New York State each year, according to the Basic Educational Data System (BEDS). However, the objectives need to be revisited with a current eye, successful teaching strategies need to be surveyed in the field, bibliographies should be updated, and Internet resources added, as they were unavailable during the original project.

It is hoped that this graduate-level research endeavor will accomplish the following:

provide a solid graduate research project for the developers involved (learning by doing)

involve known, successful teachers as consultants to the process through a common interview template

honor the work and dedication of the original writing teams

refresh course objectives and teaching strategies

forge a more uniform format between and among course outlines

update the bibliography of each course to reflect the last ten years of literature review

include Internet resources both useful as general professional tools, and as specific content enhancement

develop an index showing how NYS M/S/T standards are accomplished for each course objective

The result will be an enhancement for graduate students at SUNY-Oswego, NYSED implementation goals, and Technology Education teachers in New York State. Course outlines will be digitally reproduced and made available through appropriate Internet and electronic media.

Dr. William Waite, ProfessorSUNY Oswego, Dept. of TechnologySchool of Education

4

Overview of the Course

Today's students are being exposed to many different forms of communication in this ever-changing world of technology. Web and Graphic Design is a part of every student's day, the Internet, e-mail and messaging programs all use graphics to bombard the student in school as well as day-to-day life.

Web and Graphic Design, allows students to learn about what makes up this new and ever changing world of communication and explore the possibility of potentially working in that field. This course covers a vast range of media allowing the student to explore new media as well as study traditional and pre-existing media.

By exposing students to this course of study, it not only prepares the student for the future, but it will encourage progress in the field of graphic communications. As students begin to see why communication is important, they will begin to form their own thoughts of advancing the subject.

Web and Graphic Design is designed to be hands on course where students will participate by working on projects and other assignments individually and as part of a group. These projects will implement a variety of different skills that all students will be expected to learn throughout the course. Student will work in different roles in the class to learn different skills and will become more familiar with more facets of graphic arts.

Course Goals

Through the implementation of this course, the student will be able to:

1. Demonstrate skills in image design, computer technology, electronic pre-press processes, image transfer, storage and finishing.

2. Use computer systems and software as tools for design and implementation of Web related projects.

3. Identify concerns and issues confronting the graphic communications industry.4. Use graphic communications equipment safely, effectively, and efficiently.

Course Description

Web and Graphic Design is a course where students study different parts of design and printing. This course will use a variety of projects and labs which allows the student to explore Web and Graphic Design with a hands-on approach. Students will use computers and other digital medium to design and create projects.

The world of printing will also be explored and the different methods of printing of materials that the students are familiar with such medium as magazines, newspaper, etc. The course will explore different design; printing, binding and finishing methods of a variety of popular media and students will be able to construct eye pleasing visual displays either for the print media or web.

5

Course Skills, Knowledge, and Behaviors to be developed

Abbreviated Course Outline

1.0. Preparation for Graphic Reproduction 1.1. Introduction to Web and Graphic Design 1.2. Design Foundations

2.0. Computer Imaging and Desktop Publishing 2.1. Computer Imaging Systems 2.2. Computer Applications 2.3. Communications and the World Wide Web

3.0. Graphic Imaging/Pre-Press 3.1. Graphic Preparation 3.2. Graphics Management 3.3. Color Management 3.4. Line Photography 3.5. Photography, Process Camera

4.0. Image Reproduction/Printing 4.1. Printing Systems 4.2. Finishing Operation

5.0. Industry Related Concerns 5.1. The Business of Printing 5.2. Graphic Communications Careers

6

Content Outline

Module 1.0 – Preparation for Graphic Reproduction1.1. Introduction to Web and Graphic Design

1.1.1. Producing Visual Images1.1.1.1. Safety and Health Practices1.1.1.2. Producing Visual Images1.1.1.3. Printing Process1.1.1.4. Binding and Finishing

1.1.2. Measurement1.1.2.1. Measurement Principles1.1.2.2. Metric Systems1.1.2.3. Type Measurement1.1.2.4. Image Measurement

1.2. Design Foundations1.2.1. Typography

1.2.1.1. Letter Spacing, Word Spacing & Alignment1.2.1.2. Headline & Body Composition1.2.1.3. Copy fitting

1.2.2. Principles and Elements of Design1.2.2.1. Lines, Shapes and Mass1.2.2.2. Balance, Dominance, Proportion and Unity1.2.2.3. Contrast and Rhythm1.2.2.4. Texture and Color

1.2.3. Layout and Design Process1.2.3.1. Thumbnail1.2.3.2. Rough1.2.3.3. Comprehensive1.2.3.4. Mechanical1.2.3.5. Dummy (Mock-Ups)

Module 2.0 - Digital Imaging/Digital Authoring 2.1. Computer Imaging Systems

2.1.1. Hardware2.1.1.1. CPU (Central Processing Unit) and RAM/ROM (Memory)2.1.1.2. Keyboard, Mouse, and Other Input Peripherals2.1.1.3. Storage2.1.1.4. Output Peripherals - Printers, Projectors, etc...2.1.1.5. Scanning2.1.1.6. Digital Cameras and Other Digital Capture Devices2.1.1.7. Network Operations/File Sharing2.1.1.8. Ergonomics and Safety

2.1.2. Software Application for Graphic Production2.1.2.1. Word Processing (Microsoft Word, Word Perfect)2.1.2.2. Photographic Editor (Adobe PhotoShop, Photo Studio)2.1.2.3. Illustration Editor (Adobe Illustrator)2.1.2.4. Web Page Designer (FrontPage, Dream Weaver)

2.2. Computer Applications2.2.1. Systems

2.2.1.1. Operating System Controls2.2.1.2. Storage Procedures2.2.1.3. File/Folder Hierarchy

2.2.2. Word Processing and Typesetting2.2.2.1. Type and Font Selection2.2.2.2. Tabs and Indents2.2.2.3. Spell Check/Grammar Check

7

2.2.3. Drawing and Illustration2.2.3.1. Manual and Auto Draw Procedures2.2.3.2. Tinting, Filing2.2.3.3. Rulers2.2.3.4. Filters and Object Manipulation2.2.3.5. File Types and Saving

2.2.4. Digital Capture Methods2.2.4.1. Image Capture Devices2.2.4.2. Scanners - Line, Halftone and Gray Scale

2.2.5. Integrating Text and Graphics2.2.5.1. Importing Files 2.2.5.2. Placing Graphics2.2.5.3. Text Wrap/Flowing Text2.2.5.4. Page Editing

2.2.6. Image Output2.2.6.1. Printers or Network Printers2.2.6.2. Choosing Printers2.2.6.3. Print Menus and Printing Options2.2.6.4. Printer Maintenance and Operations

2.3. Communication and the World Wide Web2.3.1. LANs and WANs

2.3.1.1. Internet Overview2.3.1.2. Networking Primer

2.3.2. Procedures for File Transfer2.3.2.1. Preparing Files for Transfer2.3.2.2. Sending and Receiving Files

2.3.3. Communication Applications2.3.3.1. E-mail2.3.3.2. Faxing 2.3.3.3. Publishing to the World Wide Web

Module 3.0 - Graphic Imaging/Electronic Pre-Press/Digital Printing 3.1. Graphic Preparation

3.1.1. Working with Photographs and Illustrations3.1.1.1. Developing3.1.1.2. Scanning 3.1.1.3. Cropping and Scaling3.1.1.4. Resizing3.1.1.5. Manipulation

3.1.2. Paste-up3.1.2.1. Layout Tools and Computer Applications3.1.2.2. Content Creation3.1.2.3. File Formats3.1.2.4. Internal/External Storage Devices3.1.2.5. Font Formats and Management3.1.2.6. Placing Copy within the Document3.1.2.7. Multicolor - Overlays and Register Marks

3.2. Graphics/Color Management3.2.1. Digital Imagining Capture

3.2.1.1. Analog and Digital Image Forms3.2.1.2. Image File Size and Resolution3.2.1.3. Image Manipulation3.2.1.4. Digital Cameras and Camera Backs3.2.1.5. Image File Storage and Transfer3.2.1.6. Future Trends

8

3.2.2. Color Management3.2.2.1. Standards, Regulations and Color Models3.2.2.2. Color Management Systems (CMS)3.2.2.3. Calibration3.2.2.4. Color Correction and Color Separation3.2.2.5. Screening3.2.2.6. Proofing 3.2.2.7. Ink Colors

3.3 Line Photography3.3.1. Film Characteristics

3.3.1.1. Nature of Light3.3.1.2. Graphics Arts Cameras3.3.1.3. Structure of Film/Film Density3.3.1.4. Sensitivity, Contrast and Film Speed3.3.1.5. Film Types

3.3.2. Process Camera Fundamentals3.3.2.1. Camera Types3.3.2.2. Camera Operating Procedures3.3.2.3. Exposure Control3.3.2.4. Camera Accessories

3.4. Photography, Process Camera3.4.1. Processing Photographic Material

3.4.1.1. Darkroom3.4.1.2. Processing Chemicals3.4.1.3. Manual Film Processing3.4.1.4. Automatic Film Processing3.4.1.5. Contact Printing

3.4.2. Stripping and Contact Printing3.4.2.1. Mechanics of Layout3.4.2.2. Stripping Equipment and Tools3.4.2.3. Stripping Procedures3.4.2.4. Electronic Imposition and Stripping3.4.2.5. Contact Printing3.4.2.6. Contact Printing Equipment/Considerations3.4.2.7. Exposures and Image Orientation

Module 4.0 - Image Reproduction/Printing 4.1. Printing Systems

4.1.1. Basic Processes4.1.1.1. Lithography4.1.1.2. Flexography4.1.1.3. Gravure4.1.1.4. Screen

4.1.2. Other Reproduction Methods4.1.2.1. Xerographic4.1.2.2. Laser4.1.2.3. Ink-Jet4.1.2.4. Dye Sublimation

4.1.3. Image Transfer4.1.3.1. Feeder Unit: Loading and Controlling4.1.3.2. Registration Unit: Types and Adjustments4.1.3.3. Printing Unit: Configuration and Adjustments4.1.3.4. Ink, Pigment or Toner Unit: Preparation and Adjustment4.1.3.5. Delivery Unit: Adjusting and Controlling4.1.3.6. Safety Considerations

9

4.1.4. Press Configurations4.1.4.1. Sheet Fed and Web Fed4.1.4.2. Single and Multicolor4.1.4.3. Perfecting

4.2. Finishing Operations4.2.1. Cutting and Trimming

4.2.1.1. Safety Considerations4.2.1.2. Cutter Operations4.2.1.3. Sequence of Cuts

4.2.2. Folding4.2.2.1. Machine Operations4.2.2.2. Types of Folds4.2.2.3. Sequence of Folds

4.2.3. Other Finishing Operations4.2.3.1. Perforating4.2.3.2. Creasing/Scoring4.2.3.3. Embossing/Stamping4.2.3.4. Punching/Drilling4.2.3.5. Laminating

4.2.4. Assembling4.2.4.1. Manual or Automatic4.2.4.2. Gathering, Collating and Inserting4.2.4.3. Perfect of Case bound

Module 5.0 - Industry Related Concerns 5.1. The Business of Printing

5.1.1. Business Basics5.1.2. Planning for Growth and Success5.1.3. E-Commerce5.1.4. Trade Customs5.1.5. Copyright Laws/Ethics

5.2. Graphics Communications Careers5.2.1. Choosing/Preparing for a Career5.2.2. Skilled Technical Positions5.2.3. Creative Positions5.2.4. Management Positions5.2.5. Support Personnel5.2.6. Engineers and Scientists5.2.7. Education5.2.8. Technological Growth

General Instructional Strategies

Instructional strategies for the Web and Graphic Design curriculum should be based on what is best for the learner to experience the most. Hands on activities should supplement traditional teaching methods. The course is designed for the learner to experience many different facets of graphic communications; the student should actively participate in the course.

Activities should be designed for the learner to master the fundamentals of the content area as well as gain many experiences that will prove useful in the understanding of the more advanced levels of curricula.

Students should be using modern computers that are accessible to the Internet and have a minimum of 512MB of RAM. Labs should be equipped with black and white and color printers, and that can print larger than 8.5x11 sheets of paper for tabloid printing. Digital cameras as well as digital video cameras are recommended for the lab for the students to experience digital photography. Printing presses are large and usually not cost efficient for one school however the course looks at printing and a field trip to a local print shop is recommended if the school does not have a printing press. A folding machine capable of doing a variety of folds is recommended for the lab, as well as a paper cutter and some type of binding equipment.

10

Module 1.0Preparation for Graphics Reproduction

Performance Indicators/Supporting Competencies

Upon satisfactory completion of this module, the student will:

Describe and discuss the differences between mechanical and chemical hazards that are part of the printing process.

Grasp the fundamentals of producing visual images, the printing process and binding and finishing.

Differentiate between different measurements systems. Outline the major differences between Standard and Metric measurement. Describe typography and how it is used in producing visual images. Illustrate knowledge of elements and principles of design.

Suggested Specific Instructional Strategies

Show a video from OSHA or other group that illustrates safe lab practices and explains the chemical and/or mechanical hazards that are part of the printing process – See video Health and Safety in the Screening Shop.

Walk students through the lab and while explaining each part of the lab explain the mechanical and chemical hazards they might encounter while working in that particular part of the lab.

Show examples of metric sizes of graphic arts materials, software page setup commands in metric, etc…

Have students use a metric rule to measure various objects. Describe the point system of measurement and demonstrate the use of the ling gauge.

Use existing publications and measure the column width in picas and type in points. Show a multimedia presentation on typography. Have students work with various professionally done publications and identify various

fonts using a style sheet, identify the justification and spacing of the various text blocks. Show a multimedia on the elements of design and principles. Follow up with a

demonstration and discussion of existing design examples. Have students identify the design principles that have been used or ignored in the examples.

Develop a hands-on activity where students will use the elements of design to make sketches of the web pages they would like to create.

11

Module 2.0Digital Imaging/Digital Authoring



Construct a model of a computer including peripherals. Combine pervious knowledge of computer with newly learned fundamentals of producing

graphic images. Explain the differences between different software used by graphic producers. Demonstrate the basic fundamentals of word processing and drawing illustration. Teach peers about digital capture methods. Explain communication via the World Wide Web and demonstrate knowledge of file

transfer via FTP software or web.


Use a multimedia presentation to explain the different parts of the computer and where they are located and how they work (separately/together).

Have students take apart a computer system and put it back together. Use online tutorials with students to learn about the different software packages used by

graphic designers. Have the students compare and contrast the software packages and determine why each package is used.

Go over the basics of digital capture (scanning and digital cameras) with a multimedia presentation. Have students use a scanner to import images into the computer. Those students who are not scanning images can use digital cameras to take pictures of each other or part of the class/school and import them into the computer.

Define FTP and how to transfer files via World Wide Web communication. Set-up folders on the computers and have students transfer files using FTP software to a web server.

Open up Microsoft Word and demonstrate to the students the various tools and functions of the software. Have students fill in a worksheet with pictures of the toolbar buttons with functions of the buttons.

12

Module 3.0Graphic Imaging/Electronic Pre-Press/Digital Printing



List and use the different methods used when working with photographs and illustrations. Articulate the fundamentals of color management and why it is important. Define the terms cropping and scaling. List the guidelines of good compositions. Point out the differences in file size and how it correlates with graphic reproduction. Operate a process camera and describe the different characteristics of film. Demonstrate the ability to develop film in a darkroom setting. Summarize the basics of stripping plates and contact printing. Define various file types and which types designers use.


Show a video of illustrating what makes up good photographic composition. See the video Art of Photo Composition.

Demonstrate how to crop and scale images traditionally with cropping L’s. Then demonstrate how to scale and crop images using Adobe Photoshop.

Involve students in a graphic activity requiring the use of type, pictures and line illustration.

Demonstrate and discuss the process of developing film in the darkroom setting. Have students practice loading film in developer reels with their eyes closed or in a light tight bag.

Review the fundamentals of color management. Explain the process of calibration of machines both digital/traditional.

Discuss with students why color management is important and methods they think you could use to maintain consistent color and then discuss methods used in the industry to maintain consistent color.

Open up Adobe Photoshop and Adobe Illustrator and demonstrate to the students the various tools and functions of the software. Have students fill in a worksheet with pictures of the toolbar buttons with functions of the buttons.

13

Module 4.0Image Reproduction/Printing



Summarize the different printing methods and what makes them different from each other.

Explain the different reproduction methods. Differentiate between the different press configurations. Explain the purposes of the different image transfer units. Display a fundamental knowledge of safety considerations of cutting and trimming. Identify and use different finishing methods such as cutting and trimming, folding and

other finishing operations. Demonstrate the safe operation of all cutting devices.


Show a video that includes the printing process being used by today’s printing and publishing industry.

Show examples and lead discussion about the plates used by the basic printing processes.

Have student search professional publications and begin a bulletin board displaying their collective efforts. Lead a discussion using the bulletin board as the main topic, look for trends common processes, etc…

Have an in class display that shows examples of output from various forms of printing processes.

Discuss the relationship of accurately cut paper and duplicator press registration. Demonstrate the math used to determine the number of press sheets that can be cut

from stock sheet and demonstrate the proper sequencing of cuts. Display various professionally done printing jobs showing a variety of folds. Point out

those that can be done in the laboratory. Have students collect examples of products with special finishing processes. Display various examples of scoring, perforating and die cutting and lead a discussion

about how these operations are done. Demonstrate the processes using laboratory equipment.

Use the internet and give students a virtual field trip of a print shop or techniques used by printers.

14

Module 5.0Industry Related Concerns



Describe the fundamentals of the business of printing. Describe the evolution of e-commerce and where it is moving the industry. Read about careers in the graphic communication field. Explain why copyright laws are important and how the affect the graphic industry. Recognize and adapt to new technological advances in the graphics field.


Present a lesson on the organization of the industry, accompanied by a textbook reading about segments/classifications of industrial services.

Invite local representatives of local print shops or colleges to class to discuss the printing industry.

Present a lesson that goes over the different sections of a printing office. Explore with the students the various jobs in a print shop and what education is needed for various positions.

Introduce the copyright laws that affect the printers and the graphics industry. Find some old copyright cases in the newspaper or internet and have students research

and present the information for each case. After all students have completed compile them and have a class resource.

Have students’ research new products or advances in the graphics technology. Students can either present their findings to the class or write a short paper describing their findings.

15

Bibliography

Adams, M., Dolin, P., (2002). Printing technology, 5/e. Clifton Park, NY: Delmar Learning.

Bertoline, G., (2004). Fundamentals of graphic communication, 4/e. Columbus, OH: McGraw-Hill Higher Education.

Bertoline, G., (2003). Technical graphics communication, 3/e. Columbus, OH: Mc-Graw-Hill Higher Education.

Bertoline, G., (2002). Introduction to graphic commincations for engineers (B.E.S.T Series), 2/e. Columbus, OH: Mc-Graw Hill Higher Education.

Bounford, T., (2000). Digital diagrams: how to design and present statistical information effectively. New York, NY: Watson-Guptill.

Coll, G., (2001). Graphic communication: applying principles. Upper Saddle River, NJ: Prentice Hall.

Conover, T., (1996). Graphics communications today. Clifton Park, NY: Delmar Learning.

Graham, L., (2001). Basics of design, layout and typography for beginners. Clifton Park, NY: Delmar Learning.

Greenwald, M., Luttropp, J., (1997). Graphic communications, design through production. Clifton Park, NY: Delmar Learning.

Harris, R., (1996). Information Graphics: a comprehensive illustrated reference: visual tools for analyzing, managing and communicating. Management Graphics.

Henderson, K., (1998). On-line and on paper: visual representations, visual culture and computer graphics in design engineering (inside technology). Cambridge, MA: MIT Press.

Landa, R., (1998). Thinking creatively: new ways to unlock your visual imagination. Cincinnati, OH: North Light Books.

Pite, S., (2003). The digital designer, 101 graphic design projects for print, the web, multimedia, and motion graphics. Clifton Park, NY: OnWord Press.

Prust, Z.A., (2003). Graphics communications: the printed image. Goodheart-Willcox: Tinley Park, IL.

Resnick, E., (2003). Design for communication: conceptual graphic design basics. Hoboken, NJ: John Wiley & Sons.

Sharma, A., (2004). Understanding color management. Clifton Park, NY: Delmar Learning.

Wildbur, P., (1998). Information graphics: innovative solutions in contemporary design. New York, NY: Thames & Hudson.

16

Specific Content Web Resources

A Macromedia Dream Weaver Tutorialhttp://www.intranetjournal.com/articles/200002/dream_index.html

Adobe Magazine http://www.adobemag.com/

Cooltext.com http://www.cooltext.com/

Dr. Jerry Waite’s Visual Communications Systems Class Webpagehttp://graphics.tech.uh.edu/OCTE3353.html

Free Fonts Libraryhttp://desktoppub.about.com/cs/fonts/p/free_fonts.htm

Graphic Arts Monthly Magazinehttp://www.gammag.com/

Graphic Comm Central http://teched.vt.edu/gcc/

Graphics.com http://www.graphics.com/

Hands On: Graphic Arts Tutorialshttp://www.handson.nu/

Intellectual Property Law Primer for Multimedia Developershttp://www.timestream.com/stuff/neatstuff/mmlaw.html

Journal of Graphic Technology http://www.taga.org/journalgraphtech/

Printing and Publishing Virtual Field Trips http://graphics.tech.uh.edu/Virtual_Fieldtrips.html

Red Sun Fonts Pagehttp://www.redsun.com/

TrueType Typographyhttp://www.truetype.demon.co.uk/

Web Developers Journal (Software Reviews) http://www.webdevelopersjournal.com/software/softlead.html

Web Style Guidehttp://www.webstyleguide.com/page/layout.html

Web Teacherhttp://www.webteacher.org/macintosh.html

http://www.truetype.demon.co.uk/

http://www.taga.org/journalgraphtech/

17

DVD, VHS, and Other Instructional Technology Resources

Title Source Length CostArt of Photo Composition http://www.videolearning.com/vllx.php?opt=browsrch&chapsect=3502 30 min $19.95

Operating a Small Offset Press http://www.murraystate.edu/cit/gat/OtherPostings/Video/video.htm 17 min $40.00

Small Offset Press Adjustments and

Preventive Maintenance

http://www.murraystate.edu/cit/gat/OtherPostings/Video/video.htm 18 min $40.00

Basic Image Assembly (Paste-Up)


Basic Film Assembly (Stripping) http://www.murraystate.edu/cit/gat/OtherPostings/Video/video.htm 20 min $40.00

Layout and Design http://www.murraystate.edu/cit/gat/OtherPostings/Video/video.htm 15 min $40.00Video Forum

(Students Inquire, Industry Responds)


Careers: Graphic Communications http://www.murraystate.edu/cit/gat/OtherPostings/Video/video.htm 9 min $40.00

An Introduction to Graphic

Communications Processes


Type Faces for Graphic

Communications: Introduction and

Selection


Desktop Publishing http://www.murraystate.edu/cit/gat/OtherPostings/Video/video.htm 23 min $40.00Video Forum II http://www.murraystate.edu/cit/gat/OtherPostings/Video/video.htm 35 min $40.00

Health and Safety in the Screening Shop http://www.equipmentzone.com/videotrainingtapes.html#healthsafetytape 75min $39.95

http://www.videolearning.com/vllx.php?opt=browsrch&chapsect=3502

18

Appendices

General Web Resources

Academy of Applied Science (AAS)American Association for the Advancement of ScienceAmerican Chemical Society (ACS)American Society of Mechanical Engineers (ASME) ASEE EngineeringK12 CenterAssociation for Career and Technical Education (ACTE)Council on Technology Teacher Education (CTTE)Dr. Waite's SUNY Oswego Academic Web SiteEinstein ProjectElectronic Industries FoundationEpsilon Pi Tau Honorary Fraternity in TechnologyFlorida Technology Education AssociationFor Inspiration and Recognition of Science and Technology (FIRST)Four County Technology Association (Rochester Area)Future Scientists and Engineers of America (FSEA)History of Education - Selected Moments of 20th CenturyHistory of Science SocietyInner AutoInnovation Curriculum Online NetworkInstitute for Electrical and Electronic Engineers (IEEE)International Society for Technology in EducationInternational Technology Education AssociationJETSJournal of Technology EducationJournal of Technology EducationKISS Institute for Practical Robotics (KIPR)Microsoft Educator ResourcesMohawk Valley Technology Education AssociationMontgomery Public SchoolsNASA - Education ProgramNassau Technology Educators AssociationNational Academy of EngineeringNational Academy of Engineering: TECHNICALLY SPEAKINGNational Aeronautics and Space Administration (NASA)National Renewable Energy Laboratory (NREL)National Research CouncilNational Science FoundationNational Society of Professional EngineersNew York State Technology Education AssociationNiagara County & Western New York TEAOhio State UniversityOswego Technology Education AssociationProject Lead The WaySills USA Society for Philosophy and TechnologySociety for the History of TechnologySuffolk Technology Education Association

http://www.orgsites.com/ny/suffolkstea/

http://shot.press.jhu.edu/

http://www.spt.org/

http://www.skillsusa.org/

http://www.pltw.org/

http://www.oswego.edu/~otea

http://ed1.eng.ohio-state.edu/techres/techedres.html

http://www.nctea.wnyric.org/

http://www.nystea.com/

http://www.engineeringsights.org/

http://www.nsf.gov/

http://www.nationalacademies.org/nrc/

http://www.nrel.gov/education/

http://education.nasa.gov/

http://www.nae.edu/nae/techlithome.nsf

http://www.nae.edu/

http://info.lu.farmingdale.edu/~ntea/teachingpositions.html

http://education.nasa.gov/

http://www.mcps.k12.md.us/curriculum/teched/

http://www.oniedany.org/mvtea

http://www.microsoft.com/education

http://www.kipr.org/

http://scholar.lib.vt.edu/ejournals/JTE/

http://scholar.lib.vt.edu/ejournals/JTE/

http://www.jets.org/

http://www.iteawww.org/

http://www.iste.org/

http://www.ieee.org/organizations/eab/precollege/

http://icontechlit.enc.org/

http://www.innerauto.com/

http://depts.washington.edu/hssexec/

http://fcis.oise.utoronto.ca/~daniel_schugurensky/assignment1/

http://www.fsea.org/

http://www.fourcountyteched.org/

http://www.usfirst.org/

http://www.ftea.com/

http://www.bgsu.edu/colleges/technology/ept

http://eiafoundation.org/

http://www.einsteinproject.org/

http://teched.vt.edu/ctte

http://acteonline.org/about/div-tech.html

http://www.engineeringk12.org/

http://www.asme.org/education/precollege

http://www.acs.org/portal/Chemistry?PID=teachersandstudents.html

http://www.aaas.org/

http://www.aas-world.org/

19

SUNY Oswego Dept of TechnologyTeacher Certification Office NYSTECH CORPSTech LearningTechne JournalTechnology for All Americans Project (standards)Technology Student AssociationTechnology Student Association (TSA)The Learning Institute of Technology Education (LITE)TIES MagazineU.S. Department of Education

Specific Web Resources

A Macromedia Dream Weaver Tutorialhttp://www.intranetjournal.com/articles/200002/dream_index.html

Free Fonts Libraryhttp://desktoppub.about.com/cs/fonts/p/free_fonts.htm

Graphic Comm Central http://teched.vt.edu/gcc/

Hands On: Graphic Arts Tutorialshttp://www.handson.nu/

Intellectual Property Law Primer for Multimedia Developershttp://www.timestream.com/stuff/neatstuff/mmlaw.html

Journal of Graphic Technology http://www.taga.org/journalgraphtech/

Red Sun Fonts Pagehttp://www.redsun.com/

TrueType Typographyhttp://www.truetype.demon.co.uk/

Web Developers Journal (Software Reviews) http://www.webdevelopersjournal.com/software/softlead.html

Web Style Guidehttp://www.webstyleguide.com/page/layout.html

Web Teacherhttp://www.webteacher.org/macintosh.html

http://www.ed.gov/

http://www.tcnj.edu/~ties/

http://www.litesource.org/

http://www.tsawww.org/


http://scholar.lib.vt.edu/TAA/TAA.html

http://scholar.lib.vt.edu/ejournals/SPT/spt.html

http://www.techlearning.com/

http://www.techcorps.org/

http://www.highered.nysed.gov/tcert/index.html

http://www.oswego.edu/tech

20

Appendix A - Correlation Matrix with NYS Learning Standards for Math, Science, and Technology (Complete text of standards available on line at : www.emsc.nysed.gov - Go to MST icon)

Content Standards Performance Standards

Modules Within This Course

Standard 1“Analysis, Inquiry, and Design”

Mathematical analysis

1.1.2 – Measurement1.2.1 – Design Foundations3.1.1.3 – Cropping and Scaling

Scientific inquiry 1.2.3 – Layout and Design ProcessEngineering design 3.1.1 – Working with Photographs and Illustrations

Standard 2“Information Systems”

Retrieve 2.2.1 – Systems2.3 - Communication and the World Wide Web2.2.6 – Image Output

Process 1.2.3 – Layout and Design Process3.1 – Graphic Preparation4.1 – Printing Systems

Communicate 2.1.1.7 – Network Operations/File Sharing2.3 - Communication and the World Wide Web

ImpactsLimitations 2.2.3.5 – File Types and Saving

3.2.1.3 – Image ManipulationEthics 5.1.5 – Copyright Laws/Ethics

Standard 3“Mathematics”

Mathematical reasoning

1.2.3 – Layout and Design Process3.1.2.2 – Content Creation

Number and numeration

1.2.3 – Layout and Design3.1.1 – Working with Photographs and Illustrations

OperationsModelingMeasurement 1.1.2 – MeasurementUncertainty 2.3.3.3 – Publishing to the World Wide WebPatterns 1.2.2.2 – Balance, Dominance, Proportion and Unity

Standard 4“Science”

Physical setting 1.1.1.1 – Safety and Health ProceduresLiving environment 3.2.2.1 – Standards, Regulations and Color Models

Standard 5“Technology”

Engineering design 1.2 – Design FoundationsTools, resources, and technological processes

1.1.1 – Producing Visual Images1.2 – Design Foundations3.1 – Graphic Preparation3.4.1 – Processing Photographic Material4.1.1 – Basic Processes4.2 – Finishing Operations

Computer technology

2.1 – Computer Imaging Systems2.2 – Computer Applications

http://www.emsc.nysed.gov/

21

2.3 – Communication and the World Wide WebTechnological systems

1.1 – Introduction to Web and Graphic Design1.2.2 – Principles and Elements of Design4.1 – Printing Systems

History of technology

1.1 – Introduction to Web and Graphic Design5.1.3 – E-Commerce

Impacts 3.2.1.6 – Future TrendsManagement 5.2 – Graphic Communication Careers

Standard 6 – “Interconnectiveness: Common Themes”

Systems thinking 1.2 – Design Foundations2.1 – Computer Imaging Systems2.2 – Computer Applications

Models 2.2.1 - SystemsMagnitude and scale

1.0 – Preparation for Graphic Reproduction2.0 – Digital Imaging/Digital Authoring

Equilibrium and stability

1.2.3 – Layout and Design Process

Patterns of change 5.1.2 – Planning for Growth and Success5.1.3 – E-Commerce

Optimization 5.1.2 – Planning for Growth and SuccessStandard 7 - “Interdisciplinary Problem Solving”

Connections 1.2 – Design Foundations3.1 – Graphic Preparation3.2 – Graphics/Color Management

Work habits 5.1 – The Business of Printing 5.2 – Graphics Communications Careers

Skills and strategies

1.1.1.1 – Safety and Health Practices2.1.2 – Software Applications for Graphic Production3.1.1 – Working with Photographs and Illustrations

22

Appendix B - Examples of Instructional Materials

Adobe IllustratorLiverpool High School

Technology Department

Adobe Illustrator is a drawing program that works with Vector Line art. In this project you will Design and Construct a Cartoon character of your choice. You will research and design a cartoon character that you will later use as a template and draw over in Adobe Illustrator. You will draw and color the character in Illustrator and then Rasterize it and bring it into Photoshop where you will place the image in a background. Have fun and good luck!!!

Objectives: Composition and Typography of the Art Work Combined use of Materials, Equipment, and Programs

Requirements:

Picture Size must be no larger than 8.5 X 10.5 inches Must have a Rough Draft of the Character Must show evidence of the Research for the Character (ex.

Website) Must use the Draft as a Template in Adobe Illustrator Must rasterize the vector image and bring it into Adobe Photoshop The finished image must be in a Photoshop background Must be saved in the Tiff format and CMYK color Graded on Responses to objective questions Graded on Time and Effort put into Activity

Reference: www.cartoonnet.com Search Cartoons and Animated Characters

Good Luck Everyone

http://www.cartoonnet.com/

23

CD Portfolio ProjectDesigning Messages with Interest

Successful visual media involves developing graphic messages that express an idea or concept in an appealing fashion. The message that students will design in this project will be featured on your CD portfolio. During this Technology Education activity, the students will be challenged to design a graphic media message that communicates the graphic values discussed in class. Students will use creativity and personal interest to design student portfolios to take they’re work from the class with them.

Project Requirements:

*Use creative typefaces to add interest and emphasis, but limit the media to no more than three different styles of type.*1Digital Photo taken with the camera*1 Web Graphic*CD Cover must have Media Communications on it*Coordinate CD cover with the Label*Use 10 point type or larger*Variety can be added to routine text italic, bold, or outlined fonts*Create informal balance when appropriate to enhance the over-all appearance*Color adds interest, emotional connotations, and variety to print media

Concepts Presented:

Visual CommunicationGraphic DesignLayout TechniquesDesign PrinciplesType Styles

Objectives:

After competing this Technology Education Activity, students should be able to:*Describe the importance of good design in preparing visual media*Use various design principles to develop creative graphic messages*Prepare a rough layout of specific media messages*Critique developed materials for interest, appeal, and the use of various graphic principles

Supplies:

Sample document with requirements on the templateDrawing Photoshop TemplateWeb Access for graphics and Digital CamerasJewel Case and CD Label

24

Liverpool Film SchoolTechnology Department

Welcome to the Liverpool Film School. In this section of the class you will become the Actor, News Anchor, and Director you’ve always dreamed of becoming. You will be producing

movies for the purpose of education for the next 5 weeks. During these five weeks we will cover interviewing, public speaking and enter a crash course in Film production. Students will complete

a Video Portfolio that compiles all their course work for the semester.

Required Supplies: DV Tape ($10)Film School Outline:

Capturing DV Footage What happens before you get to the I movie 2 program Learning to use the Camcorders and the FireWire cable Crash Course in Professional Film Technique

Editing in I Movie 2 (The most popular video software in the world) Transferring your raw footage into I movie 2 Editing Clips, Placing them in a timeline Cross fades and Titles, and working with sound

Finding Your Audience Taking your master piece to the screen Transferring back to the DV camera, or onto VHS Converting to QuickTime for use on the Web or CD-ROM

Beyond I Movie 2 Advanced Video Editing Other Software’s such as Final Cut Pro and Adobe Premiere

You’re the Director

1. Writing the Script (Plot, Setting, Props)2. Casting the Film (Actors, and Actresses)3. Capturing Footage (Composition, Lighting, Sound)4. Editing and Enhancing Footage (I movie 2 program)5. Final Video Production (Premiere of Film in Class)

Film School Skills

1. Transitioning between Scenes2. Superimposing Text on Video3. Layering Multiple sound bytes together4. Ground work for Professional film making techniques

What is it DV and I Movie 2 Good for?

Home MoviesActual Films (Blair Witch Project)

Business VideosOnce in a lifetime events (Weddings)

Video Photo Albums (Vacations)Training Videos (How to use the Laser Cutter)

25

Just for fun ProjectsDV Footage

NTSC- National Television Systems Committee (America, Japan, Canada)PAL- Phase Alternating Line (Europe, Africa, China)

“If you brought a DVD from China and play them in America it doesn’t work”

DV Characteristics Small Tape Size (VHS, Super VHS, 8mm, Hi 8mm) Digital format is the only format I movie 2 uses 30 Frames per second compared to the 24 per. Sec. of Film Digital Footage has 500 lines of Resolution Maximum clip length 2 gigs, 9 min. 28 sec. 17 frames 60 minutes of Tape = 12.7 gigs of Hard Drive space 16 bit sound quality 640 X 480 Pixels Create exact copies, no loss in quality from being copied DV format is stored in computer code (111011) FireWire Connection and RCA connectors CCD-Individual Image Sensors for Red, Green, Blue Charge Coupled Device LCD – Liquid Crystal Display

Film vs. Video Tape Film is on a long strip of celluloid Film has a much greater resolution then video Film is more sensitive to color, light, and contrast Film is composed at 24 frames per second

Film Techniques Crash Course1. Get the Shot (Always be ready or you will miss the shot)2. Is the Camera Ready? Use a Tripod?3. Are you Ready?4. Is the Camera Recording?5. How much to shoot? Keep the clips short and build scenes6. Limit Panning and Zooming, to much is Annoying “Extreme Close up”

Video CompositionThe way the parts of the Film are grouped together and relate to each other.Will this shot be cleaner, better or more interesting is I get closer? Always be searching for the perfect shot?

3 kinds of Shots:The Wide Shot, Medium Shot and Close Shot

The Wide Shot is zoomed all the way out and captures the bigger picture.Its shows the Audience the setting and what is going on at that time.

The Medium Shot eliminates distractions from the background.By zooming in you let your viewers concentrate more on the individualsand helps build relationships. The rule for this shot is that it must be shotfrom the waste up.

The Close shot is where the subject you are filming fills the screen.Reveals detail such as characters facial reactions.

26

Combining Shots:When Editing footage, editors often use a wide shot to show where something is happening, the cuts between medium and close shots.

The Rule of Thirds:Dead Center is the least interesting shot!!!Imagine the video frame in Thirds? The rule of thirds says that the intersections of these lines are the strongest part of the frame.Equally divide up composition within the frame and leave the center frame for the talking heads of the “New Anchors”

Dolly ShotsThese are the most popular shots in Hollywood.These are the shots where the camera is moving on Tracks.

Lighting Basics

Cinematographers spend entire careers studying Lighting!!!

Exposure LightingRefers to the amount of Illumination the camera picks up

ContrastContrast Ratio is the ratio of the brightest highlights in the scene to the darkest shadows.

Hard vs. Soft LightingHard light comes from a small light source falling directly on and object. Soft light comes from a large source and is a much smoother setting the mood light.

Key lightingPrimary light source in a scene

Fill lightingSecond light source that fills shadows

BacklightingComes from behind the object

Studio Lighting

Backlighting

Object

Fill lighting Key lighting

Camera

27

Video Resume Project

In this project you are going to compose a self directed video of yourself.

The purpose of this project is to give you a public speaking experience where you will talk about yourself and your goals for

the future.In class we are going to generate a common list of at least 10

questions you will answer during the taping of your video.

You will be graded on the following Content:

Scripting of your questions ( 10 good questions) 2 minutes of video tape minimum Your professional manner in front of the camera The Setting in which your video takes place ex.

Football Field Any Props used in the video (ex. basket ball) Your Wardrobe in the video (appropriate)

This Video is consider a Special Event Filming

What’s great about an interview is that you know what’s coming.

You’ve got time to setup you tripod and arrange questions.Do all of this before your subjects arrive, because nothing

adds to stage fright like having to wait around growing apprehensive before the interview begins.

This project is suppose to be fun and challenging so putYour best efforts forward and enjoy yourself….

28

Epson Flatbed Scanning LessonLiverpool High School

Starting Operation:

1. Turn the G3 computer on if not already on2. Turn on Epson Scanner if not already on3. Open up the Adobe PhotoShop Application (double click Icon)4. After PhotoShop has launched go under the File menu and

scroll down to Import, in the next pop-up menu select Twain Acquire.

The Scanning Software should now be Open:

1. Image placement Open the scanner cover and place the image you want to scan Align the top of the image with grids lines on the scanner: use(8.5x11) Close the scanner down on the copy

2. Image Scan Settings Here you want to select the bit color you want to use: Choose gray

scale, 8, 16, 24, 36 (remember the larger the bit, the larger the file) Set the resolution, Choose 72 - 600 ( 72dpi is fine for web images)

(Same rule applies for resolution, the higher you go the larger the file) When you selected your settings Click preview This will bring up a miniature image in the scanning screen

3. Selecting the Area to be Scanned Click and drag a box handle to desired size (Choose the parts you

want) much like cropping in PhotoShop When you have selected your desired area you may proceed

4. Final Scan Click the Scan button when you have everything the way you want The image will take a minute to scan then pop up in PhotoShop

5. The Retouch and Clean up Now you can use all the PhotoShop tools to touch up the scan The common tools used in this step are scaling, rotating, and mode

6. Saving the File Drag down Save As from the File Menu Insert your disk into the floppy drive Select the Floppy drive and Name the file Select the Tiff format and Click Save to Finish up

29

Eject your Disk and Close out of PhotoShop

30

Web-based PortfoliosA Learning Activity Package for

Graphic Communication StudentsDeveloped by Mark Sanders

Technology Education ProgramVirginia Polytechnic Institute and State University

Blacksburg, VA 24061-0432IntroductionI use this activity, in slightly different formats, in all of the lab-based courses that I teach. Students are required to document all work in their Web-based Portfolio.

These aren't "portfolios" in the conventional sense. While artists’ portfolios are used to display “best” work, the purpose of this activity/portfolio is to allow my students to explore (learn) the tools and processes involved in creating Web pages/sites. Thus, students are expected to display all (not just “best") work. This is primarily because our program, “Technology Education” is more about "process" than "product." Our majors are studying to be technology teachers. We want them to have a general background in a lot of different technologies. So the end product is often more about “technology” than “art.”

That said, a number of the students who take my courses come from art and design programs… and of course their work reflects their background in design! If interested, you will find examples of my student’s Web-based Portfolios (and Web sites developed for non-profit clients) at: http://teched.vt.edu (select the "Portfolios and Sites” link). In most cases, these were the first Web pages my students had created.

A Favor to AskIf you review and/or use this activity in some way, I’d appreciate it if you’d drop me an email note ([email protected]) letting me know what you think of the “package,” including any constructive feedback you might have for improving this learning activity.

Thanks!

31

© 2000, Mark SandersLearning Activity Package: Web-based Portfolios

IntroductionConventional portfolios have long been used by art and design professionals and students to show off their best work. Portfolios are increasingly being used in education for evaluation and assessment purposes. Web-based portfolios (WBPs) are a variation of the conventional portfolio. The purpose of your WBP is twofold: a) to demonstrate your knowledge of web development tools; and b) to communicate something about yourself and your work.

The WBP created in this class is—first and foremost—a means of displaying the work you created in this class. In addition, you are strongly encouraged to include any/all work you’ve done elsewhere—other class work, work-related projects, hobbies that are relevant to your portfolio (for example, a Technology Education major who is a Ham radio enthusiast or builds custom furniture should represent these interests in his/her Web-based portfolio.), etc.

Your WBP is least as much a process portfolio as it is a design portfolio, because theemphasis of this course is on technological processes. To be effective, your WBP must therefore communicate something about the tools and processes you’ve used along the way. You may do this with notations/narratives throughout explaining how you went about a particular assignment.

Selected portfolios are placed (at Dr. Sanders' discretion) on the Technology Education Server and linked from the Technology Education main page (http://teched.vt.edu/). Selected Portfolios will remain on the Technology Education Server as server space allows. Notify Dr. Sanders in writing if you do not wish to have your portfolio placed on-line. You may update it from time to time by providing Dr. Sanders with the replacement files.

ObjectivesUpon completion of this Web-based Portfolio, you will be able to:1. Design a Web-based Portfolio using basic design principles;2. Create Web pages with a WYSIWYG editor;3. Convert native files to the PDF format for display on the Web;4. Create a useful set of navigation tools for your Web-based Portfolio; and5. Explain various issues and requirements relating to copyright and "fair use."

General Requirements for Web-based PortfoliosRequired Components of the WBP1. Main Page: The “Main” page of your WBP should include some pleasing graphicelements (e.g. self portrait, graphic, banner, etc.) and include links to the following:

a. A Resume (Resume.html);

32

b. A page for each of the LAP’s completed in GC I, which displays and describes the work completed in that LAP

© 2000, Mark Sandersc. An “About Portfolio” (About.html) Page that includes this statement: “ThisPortfolio was begun as a class assignment for EDVT 3475: Graphic Communication I taught in the Technology Education Program at Virginia Tech during the Spring, 2000 semester.” You should also list the tools used to create your WBP, your email address, and any other appropriate information.d. A page for “Other Work” (OtherWork.html) that displays work from other courses,job-related projects, etc. (if time allows)e. Important Note: Your WBP should not include links to other Web sites (e.g., Websites you consider interesting/useful). Rather, it should focus entirely upon your own work.

Design Requirements1. Everything in the WBP should be created by you. Do not use graphics, animated GIFs, etc. that you find on the Web; in general, doing so violates copyright law!2. All work displayed should include a description of the tools and processes used in creating the work..3. Include useful navigation tools (buttons/text links) in a consistent location on each and every page, so users may return to the Main page, go to the top of the current page, etc. Consider using a menu system on the left side of the screen (a column in a table you create) for navigation purposes.4. If you use images as links (e.g. “thumbnails” that link to full size images) be sure to add a text description/link, since people sometimes turn the “auto-load images” option off with their browser to speed up the surfing process.5. Use Tables liberally (without borders) to arrange text and graphics on the page.6. Use Tables to limit line length of text (column width) to about 10 words (for improved appearance on the Web)

Technical Requirements1. Include links from your Resume back to the work you have displayed in your portfolio.2. Be certain that all links in your WBP work!!!3. Be certain that all links in your WBP are RELATIVE links (so they will work when you move your Web-based Portfolio to a Web server!!!). Refer to the “Relative Links” information sheet elsewhere in this Lab Manual for further explanation of this concept.4. “Test drive” your WBP at http://www.websitegarage.com/ to see how well it is performing technically.

General Procedures for Creating Your Web-based Portfolios1. Review one or more HTML Editing Guides found in the “Web Tools” section of the GRAPHIC COMM CENTRAL (http://teched.vt.edu/gcc/).

33

2. Review five or more WBPs found on the Technology Education Program Web site (take the "Portfolios and Sites" link from http://teched.vt.edu/) to see what you do/do not like in the way of Portfolio structure, design, frills, etc.

© 2000, Mark Sanders

3. Review http://www.killersites.com to get design ideas for your WBP.4. Scan and convert photographs and digital photos to GIF or JPEG files. All images should be “resized” to display at 72 pixels/inch (ppi) on the Web. See “Preparing Scanned Images or Digital Photos for the WWW” found elsewhere in this Manual.5. Use a WYSIWYG Web page editor (e.g., Claris HomePage, Adobe PageMill, etc.) to create/edit all HTML pages.6. Do not leave spaces in any of your file names (Macs can handle spaces, PCs cannot!). Uppercase letters are also a problem for Unix and NT (but not Mac) servers.7. If you’re working on a Windows system, limiting file names to 8 characters will probably save you a lot of grief if you plan to upload your file to the Technology Education (Mac) server.8. Create PDF files as needed with Acrobat Exchange (See “Procedure Sheet: Creating PDF Files” found elsewhere in this Manual.9. Put it all together and try it out! Borrow ideas (but not specific content) from other Web sites!

Structure of the WBPFigure 1: Structure for the Folders and Files in the Web-based Portfolio. Note: the folder and file names are suggestive, not a comprehensive list!


Setting Up the Folder/File Structure for Your WBPNOTE: See Figure 1. Structure the files and folders stored in

34

your Web-based Portfolio precisely as shown in Figure 1, and as described in the procedures below.

1. Create a folder named “YourLastName.wbp” (e.g. “Sanders.wbp"). ALL of your WBP files and folders will be stored within this one folder.2. At the root level of your .wbp folder, create:a. a folder named “HTML,” for all HTML files (except“YourLastNameMainPage.html)b. A folder named “Images” for all JPEG and GIF files.c. A folder named “PDFs, for all PDF files.3. You will create a Main Page for your Web-based Portfolio called"YourLastNameMainPage.html" (e.g., "SandersMainPage.html"). Place this at the "root level" of your Web-based Portfolio. Create links from this page to:a. Your Rresume, which you should call Resume.html.b. Your “About this Portofolio” page, which you should call “AboutPortfolio.html.”c. A page for each LAP. As you complete each LAP, you will create a page that youshould call either CAPLAP.html, OffsetLAP.html, PhotoLAP.html,PowerPointLAP.html, or ScreenPrintLAP.html.

Displaying Graphics On the WebIntroduction: Graphics should download/display as quickly as possible on the Web. Thus, you are trying to create the smallest possible file size (in bytes) that retains acceptable quality (color and detail). Since you really cannot have both excellent quality and small file size, it’s a matter of compromising one for the other.

Ways to Reduce File Size In Bytes (for quicker download on the Web)1. Important: Enlarge or reduce the physical size of any Web-displayed while keeping its resolution at 72ppi (Use Photoshop Image/Resize for this). This reduces the number of pixels in the image, which makes it smaller in bytes.2. Important: Color scans (TIFF or Photoshop files) are generally in the RGB color palette and are thus relatively large in size when you begin working with them. Converting a file from “RGB Mode” to “Indexed Color Mode” reduces it from thousands or millions of colors to 256 colors. This step is required before converting an RGB graphic to GIF format.3. Save files that have a limited amount of colors (e.g. a scan of a 2-color logo) as GIF files with the least necessary “bit depth” (8 bits represents 256 colors, 6 bits represents 64 colors, 4 bits represents 16 colors, 2 bits represents 4 colors, etc.). If you have an image with only 4 colors in it, it’s pointless to save it as an 8 bit file (or even a 4 bit file), because it will consume much greater memory than actually necessary.4. The JPEG file format reduces file size, but can save in thousands (or even millions) of colors. So JPEG is generally the preferred file format for displaying color photographs on the Web.

Preparing Digital Images for the Web with Photoshop1. Open the digital photograph or scan with Photoshop.


35

2. If necessary, crop the image (Warning: if you crop a large image down to a small portion of the image, you have an image with a lot fewer pixels in it (e.g. cropping a 640 x 480 ppi image to a portion of the image that is 1/8 it’s original size reduces the image to 160 x 120 pixels... too few to display it on screen at much larger than this 1/8 size. See discussion on scanning resolution elsewhere to remedy this situation). If the image was scanned at sufficiently high resolution to allow for cropping, select the Marquis tool (dotted box) and outline the area to be cropped. Then, select Image/Crop to crop the image.3. Select Image/Adjust/Brightness & Contrast and adjust as appropriate. Remember that every color monitor displays graphics/colors/brightness/contrast differently, so you cannot ensure perfection with this control, but you can improve the overall image.4. Consider other “Image/Adjusts” such as “Color,” “Brightness / Contrast / Hue” etc. while in Photoshop.

Note: It is important to display graphics on the Web at a resolution of 72pixels/inch. So…

5. Reduce the image’s pixel resolution to 72 ppi. At the same time, adjust it’s width/height to the size you want it on the Web. To do this:6. Select Image/Image Size.7. Check both the “Constrain Proportions” and “Resample Image (Bicubic)” boxes at the bottom of the screen.8. Set the “Resolution” for 72 pixels/inch.9. Set (preferably reduce rather than enlarge) the Pixel Dimension/Width to an appropriate size for the Web (Note: A 13” monitor is 640 pixels wide. So 1/2 the screen width would be 320 pixels, 1/4 the screen width would be 16 pixels, etc.). Note that the Pixel Dimension/Height changes automatically, since the Constrain Proportions box is checked.10. Select “OK” when the ppi and the Pixel Dimensions are where you want them. Note: The JPEG format is generally better for full-color photographs, while the GIF format is limited to 256 colors, and is therefore generally better for limited color images like color logos, banners, etc. So…11. Select File/Save As/JPEG (best for photos) and select Medium resolution.12. Or, select Mode/Indexed Color, and the Save As/Compuserv GIF (best for images with limited colors, like logos or banners), saving in either 8 bits/pixel (for photographs, color paintings, etc.) or fewer bits/pixel if the image contains only a few colors (e.g. 4 bits/pixel will represent 16 colors, 3 bits/pixel represents 8 colors, etc.)13. Or, select File/Export and export the graphic as a “GIF 89” file, being certain to give it the .gif extension.14. Put all graphics in your folder named “Images.”15. If the image is pixelated (jaggy) when displayed on the Web, you probably enlarged the image too much, thereby spreading out the limited number of pixels. (For example, if you scanned a 2” x 2” photo at 72 dpi and then tried to enlarge it in Photoshop to 4” x 4” you are simply spreading out the pixels to about 36 ppi. That just won’t do!). You’ll have to re-scan the image at a higher dpi resolution.


36

Relative LinksIt is critical that you design your Web-based Portfolio (WBP) with “relative links” (rather than “absolute links”) between one file and another in your WBP. If (and only if) you set up your WBP with relative links, you will be able to display it from any computer platform or server. Without relative links, it may work on your computer, but no one else’s.

1. Set up a folder named “YourLastName.WBP.” Within this folder, create folders named “HTML” (for HTML files only), “Images” (for GIFs and JPEGs), and “PDF.”2. Use relative links for all the links you create as shown in the example. This example assumes you are creating links from the highlighted file (GC1Work.html) to some of the other files in the folder. Note that when linking outside the folder to a “higher level” folder in the folder structure, you have to add “../” for each folder up in the heirarchy that you move. Then, name the file, but not the folder that it’s in (Example 1) . When linking to a file that is lower in the folder structure, the link is defined by the “path” (folder name(s) and the file name (Example 2). Sometimes, you have to use ../ to “back out” of a folder, then name a different folder and then the file to which you want create the relative link (Example 3).3. If you are working on a PC, be absolutely certain that “a:|” or “b:|” do not appear at the beginning of the link. Some PC HTML editors add these to the link. If they do, your Webbased Portfolio will not work on the Technology Education server or other platforms.

Example 1: <A HREF=“../SandersMain.html”>

Note: Assume you are creatinglinks from this page to thethree “Example” files

Example 2:<A HREF=“SandersResume.html”> Example 3: <A HREF=“../Images/Scan1.jpg.”>


37

Creating PDF Files With Adobe AcrobatIntroductionThe Portable Document Format (PDF) may be displayed on any computer, so long as the (free) Adobe Acrobat Reader is installed on that computer. Acrobat Reader may be downloaded (free) from www.adobe.com. When a Web browser (e.g. Netscape) is properly configured, PDF files may also be viewed with the Web Browser.

To convert an existing file to the PDF format:1. Open the document you wish to convert to a PDF file, using the application with which it was created (e.g. Word, PowerPoint, etc.).2. Open the Chooser and select the “Acrobat PDF Writer” driver. If you do not see it in the Chooser, the Mac you are using does not have it installed... find one that does.3. Important: Select “Page Set-Up” (as it suggests)!!!, and change any parameters asappropriate If you don't, your PDF file will probably be cropped incorrectly, and you’ll waste a lot of time trying to figure it out!!!4. Select File/Print and “print” (save) the file to disk. It’s a good idea to add the “.pdf”extension to the file name, as this will identify it forever after as a PDF file.5. If the file is incorrectly cropped, re-read (and follow) step #2 above.

Adding hypertext links, etc.Adobe Acrobat (version 4.0, or "Acrobat Exchange" if version 3.0) allows you to view, print, annotate, build navigational hypertext (WWW) links, and add security controls to PDF files.

Adobe Acrobat DistillerAcrobat Distiller is intended for "distilling" EPS files into PDF files. But, I've had very good luck with most EPS files using the procedures above. So, I suggest that you try the PDF Writer procedure above first (since it's quicker and usually works). While PDF Writer seems to work for most documents, you should use Adobe Acrobat Distiller if:1. Your document contains placed encapsulated postscript (EPS) artwork or images2. You are using an application that creates its own postscript files when printing (e.g.PageMaker or Quark Xpress)3. You intentionally want to “downsample” high resolution images in a document to lower resolution/smaller file sizes4. PDF writer produces unsatisfactory results (poor quality or large file size)5. You have an existing postscript file that you want to convert to a PDF file.

Linking to PDF Files on the WWWNote: Remember that in order to view PDF files on the WWW, users will need to have Adobe Acrobat Reader (freeware) properly installed on their computers.1. Be sure the PDF file has the “.pdf” extension, then create a standard link to it.2. Include a link to the free Acrobat Reader (www.adobe.com) on any Web page thatcontains a PDF file.

38

Appendix C - Examples of Assessment MaterialsDreamweaver MX

Foundations of Web Design1. When you type a URL into a browser’s location bar, you may omit the protocol http:// because the browser

automatically inserts it for you.

(a) True

(b) False

(c) Sometimes

(d) Only when you’re using Internet Explorer.2. A WYSIWYG Web-page editor is:

(a) A person who oversees production of Web pages.

(b) A program in which what you see on the screen as you work is what you get in the browser.

(c) A program in which what you see on the screen is just the code and the text, but the code is highlighted in a different color than the text.

(d) A program in which what you see on the screen is the code and the text but all in the same color.

3. Making Web pages display identically in many different Web browsers can be a challenge, because:

(a) The HTML standard evolves constantly and older versions of browsers may not recognize the more advanced features.

(b) Some Web browsers display only text.

(c) The two most popular Web browsers, Internet Explorer and Netscape Navigator, support features that aren’t part of the HTML standard.

(d) All of the above.

An Introduction to HTML4. One excellent method for learning how to produce Web pages is to examine the source code of other

peoples’ Web sites. In Dreamweaver, you can view the source code in:

(a) The Design view.

(b) The Code view.

(c) The Code and Design view.

(d) b and c.

39

The Dreamweaver Environment5. Dreamweaver MX offers a selection of workspace layouts to those working on Windows computers, but

only one workspace layout to those working on Macintosh computers. The Dreamweaver MX workspace layouts are:

(a) All of the Below

(b) The Dreamweaver 4 workspace layout.

(c) The Dreamweaver MX workspace layout

(d) The Dreamweaver MX, HomeSite/Coder-Style workspace layout

6. As you work on an element in the Document window, you can see the HTML tags used to structure the selected element. You can also select a tag and edit, cut, copy, or delete its contents. To do so, you would use:

(a) The Insert bar

(b) The Tag selector

(c) The Answers panel

(d) The Property inspector

Introduction to Site Design7. All Web sites start from a single folder in which the home page is located. It is from this folder that

Dreamweaver and browsers begin looking for links, graphics, objects, and pages. This folder is called:

(a) The root folder.

(b) The inheritance folder.

(c) The images folder.

(d) The DHTML folder.8. All sites must have a home page. Most Web servers require that that home page be named:

(a) home.htm

(b) home.asp

(c) index.htm or default.htm

(d) dwhome.htm

Applying Structure to Text9. Block elements are HTML tags that structure a unit of text and separate such units with blank lines. Included

in this group are:

(a) Heading tags

(b) Paragraph tags

(c) Block quote tags

(d) All of the above

40

10.You can apply different levels of headings using:

(a) The Insert bar

(b) The Property inspector

(c) The Answers panel

(d) The Return/Enter key

(e) a & b11.Ordered and unordered lists are very similar but:

(a) A number precedes ordered-list items and a bullet precedes unordered-list items.

(b) A number precedes unordered-list items and a bullet precedes ordered-list items.

(c) A bullet precedes both but ordered lists are indented more than unordered lists.

(d) Ordered lists have larger type than unordered lists.

Linking the Site12.Different types of links can serve a variety of functions in a Web page. Links can:

(a) Open a linked page in another browser window

(b) Link one page to another page

(c) Change the page in another frame (on a framed Web page)

(d) All of the above

Images and Colors13.To insert an image with Dreamweaver, you can:

(a) Drag an image from the desktop or from the site folder.

(b) Click the Image button on the Common tab of the Insert bar and select the image from the Insert Image dialog box.

(c) Double-click an image placeholder and select the image from the Insert Image dialog box.

(d) Drag an image from the Assets panel directly onto the page.

(e) All of the above

HTML Styles and CSS14.One difference between HTML Styles and Cascading Style Sheets (CSS) is that:

(a) HTML is used more for physical appearance and CSS is used more for logical significance.

(b) HTML has more physical-appearance options than CSS.

(c) HTML styles must be applied manually and CSS can apply automatically multiple times.

(d) a & b15.The principle of inheritance, when tags are nested, means that:

(a) A style applied to the parent tag also applies to the child tag.

(b) A style applied to the child tag also applies to the parent tag.

(c) A style applied anywhere in the document automatically applies to every tag in the document.

(d) Styles are based on the last style used but with one attribute modified.

41

16.HTML styles can be applied using:

(a) The HTML Styles tab of the Insert bar

(b) The HTML Styles panel

(c) The Site window

(d) None of the above

Creating Web Forms17.Forms collect information or responses from the visitor and process them through an application called:

(a) A word processor.

(b) A Web-page processor.

(c) A CGI application.

(d) A client-side image map.

18.Some form elements enable visitors to choose only one answer. Other form elements allow them to choose as many answers as they like. For example:

(a) Radio buttons are ideal for permitting only one answer; Check boxes are good for allowing multiple answers.

(b) Only one item can be selected from a menu. Lists may be set to allow multiple selections.

(c) Buttons allow only one choice. Image buttons can be set to allow multiple selections.

(d) a & b

Frames19.A frameset is the master document that defines:

(a) The number of frames on the page.

(b) The size of each frame.

(c) The name of each frame.

(d) The Web pages to be initially loaded into the frames.

(e) All of the above.

42

Introduction to Adobe Photoshop 7

Images 20.What is the most common type of image used in today’s publications?

a. Grayscale

b. Gradient

c. Photographic

d. Source21. Line screen or line ruling refers to the number of __________ used to create a halftone.

a. screens per inch

b. lines per inch

c. rules per inch

d. dots per inch22. Grayscale images in Photoshop can contain up to _______ shades of gray.

a. 24

b. 8

c. 256

d. 3

The Photoshop Environment23. You can navigate around the image to get a closer look at a section of the image, or to see the entire image

at a single glance using which tool?

a. Line tool

b. Pen tool

c. Brush tool

d. Zoom tool 24. Where can all the Photoshop tools can be found?

a. In the Navigator palette.

b. In the Toolbox.

c. In the Palette Well.

d. In the History palette.25. The Slice and Slice Select tools allow you to create user-defined slices of an image for ______________.

a. placement in a small area.

b. placement on the Web.

c. placement on a printed document.

d. placement in a marquee-selected area.

43

Selection Techniques26. You know when an area is selected because it is surrounded by a blinking marquee that is sometimes

referred to as _____________.

a. an image

b. a direct selection

c. marching ants

d. a filter27. If I need to make an irregular selection, one that “follows the cursor anywhere,” what tool should I use?

a. One of the marquee tools.

b. The Magic Wand tool.

c. The Eraser tool.

d. The Lasso tool.28. If I want to select all the areas of my image that have similar colors or shades of color, what is the perfect tool

to use?

a. One of the marquee tools.

b. The Magic Wand tool.

c. The Eraser tool.

d. The Lasso tool.

Working with Layers29. ____________ are folders within the Layers palette that are very useful for storing related components, such

as buttons for a Web site or a collection of related icons.

a. Nested folders

b. Layer sets

c. Linked layers

d. Layer styles30. Photoshop allows you to add dimension to complete images and parts of images using its powerful

___________________ features; they are easy to apply, they are editable, and they are reversible.

a. Layer palette

b. layer fonts

c. layer styles

d. selection techniques31. Effects should be used to _________________ an image, not used simply for the sake of applying the effect.

a. complicate

b. enlarge

c. reduce

d. enhance

44

Channels and Masks32. Where would you place shadows to make an object appear raised from the surface?

a. On top of the object.

b. All around the base of the object.

c. At the bottom and right side.

d. None of the above.33. _________________ mode allows you to turn any selection into a mask while your image is active, without

having to access the Channels palette.

a. Fast Mask

b. Layer Mask

c. Alpha Channel

d. Quick Mask

Painting Tools34. I can change the size, shape, angle, spacing, hardness, and pattern of any brush from the

___________________.

a. Brushes palette

b. Toolbox

c. Options bar

d. Layers palette35. The _____________ tool produces a soft edge, even softer than the Paintbrush tool. This tool produces a

natural painting style, making it especially useful for photo retouching.

a. Healing Brush

b. Pattern Stamp

c. Eraser

d. Airbrush36. The _________________ tool copies image data from one area of the image and applies it to another area

of the image.

a. Stamp

b. Healing Brush

c. Clone Stamp

d. None of the above.

Working with Type37. A ________ image is comprised of individual pixels. This type of image does not scale well, becoming

pixelated when enlarged. Photoshop is primarily designed to create and edit this type of image.

a. vector

b. photographic

c. complicated

d. raster/bitmap

45

38. A _________ image is created from mathematical descriptions of paths (strokes) and the colors contained within those paths (fills). This type of image scales very well, and does not lose quality when enlarged.

a. vector

b. photographic

c. complicated

d. raster/bitmap39. Simply clicking the Type tool anywhere in the image and typing creates _______________, which works

well for headlines or titles, but is not well suited for multi-line text entries.

a. a text box

b. static text

c. guided text

d. point text 40. ________________ is created when you click the Type tool on the page and drag; then you place the cursor

and begin entering text.

a. A text box

b. Static text

c. Guided text

d. Point text

Printing and Publishing41. When you are preparing your files for printing, the number of ______________ determines the quality of the

hard copy.

a. spots per inch

b. dots per inch

c. pixels per inch

d. lines per inch42. If I scale an image to be 1/2 its original size, what is the effective resolution of the image?

a. 50%

b. 100%

c. 200%

d. 500%43. When all the tonal values from each of the RGB or CMYK channels are combined, the result is displayed in

a ________________ channel.

a. group

b. composite

c. blended

d. filtered

e. None of the above.

46

44. In a four-color printing process, I can add a fifth color when necessary. It is called a ___________ color.

a. process

b. grayscale

c. spot

d. alpha

Web Design with Photoshop45. When creating Web pages, what is the worst limitation (from a design standpoint) of HTML?

a. Lack of absolute positioning.

b. You can’t use layers.

c. Limited text formatting options.

d. Limited support of file formats.

e. None of the above.46. _________ navigation allows the visitor to move between the main sections of the site.

a. Local

b. Parallel

c. Global

d. None of the above.47. _________ navigation applies to subcategories or subsections within each section that require a consistent

navigational structure.

a. Local

b. Parallel

c. Global

d. None of the above.48. _________ navigation works much the same as a table of contents. You use it to find information within a

page.

a. Local

b. Parallel

c. Global

d. None of the above.49. The _________ color palette is a collection of colors that look the same on any monitor that is capable of

displaying 256 colors.

a. Process

b. Spot

c. Grayscale

d. Web-safe

47

Intro Illustrator

The Illustrator Environment 50. To produce quality digital designs in Illustrator, the artist must learn which drawing _________ is most

appropriate for a specific task.

a. palette

b. Menu bar

c. tool

d. lasso tool51. Illustrator’s ____________________ provides a full range of tools for creating almost any object or image.

a. Menu bar

b. Toolbox

c. Color palette

d. selection tool

Drawing52. Many drawings, even ones that look very complex, make use of _______________ shapes.

a. irregular

b. intersected

c. easy

d. primitive 53. You can trace a __________________ to recreate artwork in Illustrator that originally came from another

source.

a. toolb. templatec. control handled. smooth point

54. Which of the following is not a path-editing tool?

a. Scissors tool

b. Convert Anchor Point tool

c. Delete Anchor Point tool

d. Add Anchor Point tool

e. All are path-editing tools.

48

Painting55. Which palette is used for storing and managing colors, and for applying colors to objects, as well as for

painting an object’s fill and stroke with colors, gradients, or patterns?

a. Toolbox

b. Color palette

c. Swatches palette

d. Styles palette56. A critical component in complex drawings is variation in color shades, referred to as a

__________________.

a. mesh

b. special effect

c. fill

d. gradient57. It is easy to sample colors from a photo, and apply them to your artwork using

the______________________.

a. Fill box

b. Eyedropper tool

c. Swatches palette

d. Color palette

Images58. The file format you choose for your document must be compatible with what?

a. The type of images included in the document.

b. The output type.

c. The color mode.

d. Color Palette59. You can apply _____________ to placed objects, including Artistic, Distort, Sketch, and Texture, to change

their appearance.

a. images

b. raster files

c. shadows

d. filters

49

60. When you look at the holes in the letter “B”, you are seeing an example of __________________.

a. masking

b. compounding

c. shadows

d. gradients

Type61. There are many tools in the Toolbox that can be used to modify type, but the default tool is called the

____________ tool.

a. Text

b. Type

c. Path

d. Area Type

e. None of the above.

62. The ___________________ palette provides most of the attribute controls you use when working with text elements.

a. Styles

b. Color

c. Alignment

d. Character63. The __________________ palette displays options that affect paragraphs, such as alignment, indents, and

space before and after paragraphs.

a. Alignment

b. Spacing

c. Indent

d. Paragraph

Layers64.______________ provide/s a way to isolate various components of your drawings, where you can modify each

component, and then lock it to protect it from accidental changes.

a. Name field

b. Show/Hide

c. Layers

d. Stacking order65. Creating sublayers inside sublayers is known as what?

a. Guiding

b. Layering

c. Stacking

d. Nesting

50

Objects66. What device can be used to transform objects without the use of any of the transformation tools?

a. Rotate icon

b. Show/Hide icon

c. Guides

d. Bounding box 67. Duplicating objects by dragging with the _______________ key is one of the most timesaving and useful

features Illustrator offers.

a. Shift

b. Command/Control

c. Tab

d. Option/Alt

Publishing and Distributing 68 . What two things must you decide when you are ready to publish/distribute your Illustrator documents?

a. Page size

b. Whether you want the page guides to print or not.

c. How many pages the document will contain.

d. The color mode and correct file format.69. What viewing feature is used to ensure that your images will be acceptable when converted to raster format

and viewed on the Web?

a. Outline viewing mode

b. Pixel Preview

c. Normal viewing mode

d. Preview mode

51

Macromedia Flash MX

Introduction to Flash70. Flash’s scripting language is called _________________.

a. JavaScript

b. VBScript

c. ActionScript

d. None of the above.71. The player required to show Flash MX movies is called _________________.

a. Flash Player 6

b. Flash MX Player

c. ActionScript Player

d. Director Player72. You can find all of the Flash drawing tools in the _________________.

a. Options toolbar

b. Timeline

c. panel set

d. toolbox73. All of the action on a Flash movie occurs on the ___________________.

a. Property Inspector

b. work area

c. Actions panel

d. Stage

The Flash Environment74.Where can I modify the default size of my document?

a. In the Document Properties window.

b. In the Reference panel.

c. In the Actions palette.

d. In the toolbox.75. The default frame rate for a Flash movie is ______ fps.

a. 24

b. 32

c. 12

d. 18

52

76. I complete all of my movie development on the ___________________, found in the center of my Flash working environment.

a. work area

b. Stage

c. toolbox

d. Actions palette77. The ______________ contains all of the drawing tools, color selectors, and magnification tools.

a. Stage

b. toolbox

c. work area

d. Property Inspector78. What tool can be used to move/drag elements around on the stage?

a. Zoom tool

b. Finger tool

c. Arrow tool

d. None of the above.79. Object placement, animation, masking, and scripting involve the ________________ in one way or another.

a. Timeline

b. playhead

c. Insert menu

d. Actions palette

Drawing Tools80. What is Flash’s primary selection tool, which can be used by either clicking an object with the mouse, or

dragging across the Stage to select groups of shapes.

a. Direct Selection tool

b. Selection tool

c. Arrow tool

d. Hand tool81. What is the best tool to use for drawing exact curves and complex shapes?

a. One of the marquee tools

b. The Paintbrush tool

c. The Pencil tool

d. The Pen tool

53

82. When I click on an anchor point, the _______ are revealed, which allow me to change the curve by angle or scale.

a. control handles

b. tangent handles

c. corner handles

d. curve handles83. If I need to line up objects on my screen, what panel should I use?

a. Align panel

b. toolbox

c. Property Inspector

d. curve handles84.What tool can I use to make irregular-shaped selections?

a. Pen tool

b. Pencil tool

c. Eraser tool

d. Lasso tool85. To draw complex objects, shapes must appear below or above others, adding depth. This effect can be

created in Flash using ________________.

a. the Timeline

b. the Stage

c. layers

d. action

Symbols86. Symbols, video clips, sound clips, bitmaps, and shared fonts are all stored in the ___________.

a. Stage

b. Property Inspector

c. Document Properties window

d. Library87. Each ___________ represents an amount of time that elements should appear on the screen.

a. folder

b. frame

c. playhead

d. Timeline

54

88. One of the fundamental building blocks of your movies is the ______________ symbol, which can hold static images, shapes, or bitmaps.

a. Button

b. Movie Clip

c. Graphic

d. None of the above.89. The most flexible and powerful of the Flash symbols is the ____________ symbol, providing independent

Timelines and automatic looping.

a. Button

b. Graphic

c. Movie Clip


Introduction to ActionScript90.When we want to add ActionScript to a movie, we must access the __________ panel.

a. Info

b. History

c. Timeline

d. Actions91. In ActionScript the word “root” refers to the _____________ of the exported movie.

a. Library

b. main Timeline

c. Button Timeline

d. Stage92. Where do all of the commands we use in our ActionScript come from when we are in Normal mode?

a. The toolbox.

b. The Property Inspector.

c. The Actions toolbox.

d. None of the above.93. When we are ready to test our movie to ensure that our ActionScript works correctly, we can select the

____________ command from the Control menu.

a. View movie

b. Debug movie

c. Play movie

d. Test movie

55

Animation94. ______________ animation is the process of manually creating each frame and its content for precise

control of the animation.

a. Motion tweening

b. Shape tweening

c. Frame-by-frame

d. Symbol95. _________________ animates symbols and groups shapes by defining the first and last frame of the

animation. Flash then interpolates the frames in between.

a. Motion tweening

b. Shape tweening

c. Frame-by-frame

d. Symbol96. _________________ is similar to motion tweening, but this type of animation is for shapes (not symbols)

and as such is used primarily for morphing one shape into another shape.

a. Motion tweening

b. Shape tweening

c. Frame-by-frame

d. Symbol97. Of the three types of Flash animation, ________________ offers the smallest file size, and is therefore an

excellent choice for a movie destined for viewing on the Web.

a. Motion tweening

b. Shape tweening

c. Frame-by-frame

d. Symbol98. The _______________ is used to preview the animation in Flash, providing VCR-like play, stop, rewind, and

fast-forward buttons.


b. View menu

c. Timeline

d. Controller99. If I want to quickly move through my movie, or view certain sections of my movie, I can move the

______________ through the frames of the movie without having to access the Controller.

a. keyframes

b. Timeline

c. playhead


56

Layers100. Where can I look to find all of the layer options in one concise location?


b. Document properties

c. Layer properties

d. Timeline101. __________ defines the content of one layer as a virtual hole through which you can see layers that are

below it in the layer stacking order.

a. Layering

b. Hiding

c. Locking

d. Masking102. What type of guide do I use when I want an object to follow a particular path?

a. Guide layer

b. Motion guide

c. Action guide

d. Animation guide

Text103. What setting tells Flash to substitute missing fonts with similar fonts found on the user’s system?

a. Embedded fonts

b. Static fonts

c. Dynamic fonts

d. Device fonts104. I can generate a _____________ to find out the file weight of my document.

a. properties report

b. size report

c. activities report

d. document activities report105. With a Static text field selected, choosing the ____________ command turns the field into individual letters

that can be modified one at a time.

a. Motion tween

b. Shape tween

c. Break Apart

d. Pull together

57

Sound106. When you want to bring a sound clip into your movie, use the _______ menu.

a. File

b. Paste

c. Cut

d. Import107. What is the popular cross-platform sound file format that can be used on both Macintosh and Windows

systems?

a. WAV

b. JPEG

c. MP3

d. SWF108. When you import a sound, it is stored in the _________, just like any other symbol or movie clip.


b. Document properties

c. Library

d. Timeline109. When a movie continually plays over and over again, it is called ____________.

a. fast forwarding

b. reversing

c. the playhead

d. looping110. When you add sound effects to your Buttons, they are called ___________.

a. Down sound

b. Up sound

c. rollover sound

d. synchronized sound111. You can use the ___________ action to add sound to your movie with ActionScript.

a. loadMovie

b. loadSoundc. gotoAndPlayd. gotoAndSound

58

Video112. A ________ is information that is stored in the user’s cache while the rest of the movie downloads.

a. bandwidth

b. codec

c. buffer

d. None of the above.113. ___________ plays while it continues to download in the background.

a. Static video

b. Streaming video

c. Interactive video

d. Dynamic video114. The compression/decompression algorithm Flash uses is called ______________.

a. Stevenson Park

b. Flash Spark

c. Player Pro

d. Sorenson Spark

Publishing115. Accessibility, quick download time, standard browser support, and preloaders all fall under the general

category of _______________.

a. accountability

b. functionality

c. usability

d. None of the above.116. _____________ are devices that interpret Web pages and other content on a computer and read it aloud

using a digital voice.

a. Voice simulators

b. Screen readers

c. Streaming audio

d. None of the above.117. A _____________ is a small animation or display of counting numbers that indicate the amount of time left

before the movie is completely downloaded.

a. preloader

b. playhead

c. loop


59

118. We can simulate modem connections using the ________________.

a. Timeline

b. Control menu

c. Controller

d. Bandwidth Profiler119. When you distribute your movie on CD-ROM, you can include not only the movie file, but also the Flash

Player in one complete file called a ________________.

a. Publisher

b. Controller

c. Projector

d. Template

60

Answer Sheet

1. A 45. C 89. C2. B 46. C 90. D3. D 47. B 91. B4. D 48. A 92. C5. A 49. D 93. D6. B 50. C 94. C7. A 51. B 95. A8. C 52. D 96. B9. D 53. B 97. A10. E 54. E 98. D11. A 55. C 99. C12. D 56. D 100. C13. E 57. B 101. D14. C 58. B 102. B15. A 59. D 103. D16. B 60. B 104. B17. C 61. B 105. C18. D 62. D 106. D19. E 63. D 107. C20. C 64. C 108. C21. D 65. D 109. D22. C 66. D 110. C23. D 67. D 111. B24. B 68. D 112. C25. B 69. B 113. B26. C 70. C 114. D27. D 71. A 115. C28. B 72. D 116. B29. B 73. D 117. A30. C 74. A 118. D31. D 75. C 119. C32. C 76. B33. D 77. B34. A 78. C35. D 79. A36. C 80. C37. D 81. D38. A 82. B39. D 83. A40. A 84. D41. D 85. C42. C 86. D43. B 87. B44. C 88. C

61

Appendix D - Students with Disabilities

The Board of Regents, through part 100 Regulations of the Commissioner, the Action Plan, and The Compact for Learning, has made a strong commitment to integrating the education of students with disabilities into the total school program. According to Section 100.2(s) of the Regulations of the “Commissioner of Education, “Each student with a handicapping condition as such term is defined in Section 200.1(ii) of this Chapter, shall have access to the full range of programs and services set forth in this Part to the extent that such programs and services are appropriate to such student’s special educational needs”. Districts must have policies and procedures in place to make sure that students with disabilities have equal opportunities to access diploma credits, courses, and requirements.

The majority of students with disabilities have the intellectual potential to master the curricula content requirements of a high school diploma. Most students who require special education attend regular education classes in conjunction with specialized instruction and/or related services. The students must attain the same academic standards as their non-disabled peers to meet graduation requirements, and, therefore, must receive instruction in the same content area, at all grade levels. This will ensure that they have the same informational base necessary to pass statewide testing programs and meet diploma requirements.

Teachers certified in the subject area should become aware of the needs of students with disabilities who are participating in their classes. Instructional techniques and materials must be modified to the extent appropriate to provide students with disabilities the opportunity to meet diploma requirements. Information or assistance is available through special education teachers, administrators, the Committee on Special Education (CSE) or student’s Individualized Education Program (IEP).

Strategies for Modifying Instructional Techniques and Materials.

1. Students with disabilities may use alternative testing techniques. The needed testing modification must be identified in the student’s Individualized Education Program (IEP). Both special and regular education teachers need to work in close cooperation so that the testing modifications can be used consistently throughout the student’s program.

2. Identify, define, and pre-teach key vocabulary. Many terms in this syllabus are specific, and some students with disabilities will need continuous reinforcement to learn them. It would be helpful to provide a list of these key words in the special education teacher in order to provide additional reinforcement in the special education setting.

3. Assign a partner for the duration of a unit to a student as an additional resource to facilitate clarification of daily assignments, timelines for assignments, and access to daily notes.

4. When assigning long-term projects or reports, provide a timeline with benchmarks as indicators for completion of major sections. Students who have difficulty with organizational skills and time sequence ma need to see completion of sections to maintain the organization of a lengthy project or report.

Infusing Awareness of Persons with Disabilities Through Curriculum.

In keeping with the concept of integration, the following subgoal of the Action Plan was established.

62

In all subject areas, revisions in the syllabi will include materials and activities related to generic subgoals, such as problem solving, reasoning skills, speaking, capacity to search for information, the use of libraries, and increasing student awareness of and information about the disabled.

The purpose of this subgoal is to ensure that appropriate activities and materials are available to increase student awareness of disabilities.

The curriculum, by design, includes information, activities, and materials regarding persons with disabilities. Teachers are encouraged to include other examples as may be appropriate to their classroom or the situation at hand.

63

Appendix E - Student Leadership Skills

Development of leadership skills is an integral part of occupational education in New York state. The New York State Education Department states that “each education agency should provide to every student the opportunity to participate in student leadership development activities. All occupational education students should be provided the opportunity to participate in the educational activities of the student organization(s) which most directly relate(s) to their chosen educational program”.

Leadership skills should be incorporated in the New York state occupational education curricula to assist students to become better citizens with positive qualities and attitudes. Each individual should develop skills in communications, decision making/problem solving, human relations, management, and motivational techniques.

Leadership skill may be incorporated into the curricula as competencies (performance indicators) to be developed by every student or included within the suggested instructional strategies. Teachers providing instruction through occupational educational curricula should familiarize themselves with the competencies. Assistance may be requested from the State adviser of the occupational student organization related to the program area.

Students who elect to become active members in student leadership organizations chartered by NYSED have the advantage of the practical forum to practice leadership skills in an action-oriented format. They have the potential for recognition at the local, state, and national level.

More information in Technology Education can be found at the Technology Education Student Association web site at:

http://www.tsawww.org


waite/oup-webgraphicsbyfoley.doc · web viewdemonstrate the basic fundamentals of word processing...

Documents