WEB DESIGN GRADES THE EWING PUBLIC SCHOOLS 2099 Pennington Road Ewing, NJ 08618

Transcription

1 WEB DESIGN GRADES 9-12 THE EWING PUBLIC SCHOOLS 2099 Pennington Road Ewing, NJ Board Approval Date: August 27, 2012 Michael Nitti Written by: David Hurley and EHS Staff Superintendent In accordance with The Ewing Public Schools Policy 2230, Course Guides, this curriculum has been reviewed and found to be in compliance with all policies and all affirmative action criteria.

2 Table of Contents Page Unit 1: Introduction to Computing and the Internet (8 Days) 1 Unit 2: Introduction to Hyper Test Markup Language Part I (15 Days) 3 Unit 3: Understanding Good and Bad Web Design Elements (8 Days) 5 Unit 4: Introduction to Hyper Test Markup Language Part II (15 Days) 7 Unit 5: Designing and Creating Graphics for the Web (12 Days) 9 Unit 6: Internet Safety (8 Days) 11 Unit 7: Introduction to Automated Web Design (10 Days) 13 Unit 8: Animation for the Web (10 Days) 15

3 Unit 1: Introduction to Computing and the Internet (8 Days) 1 Why Is This Unit Important? This unit will provide the student with a basic understanding of the concepts/ways computers work, networking, computer/internet terminology and protocols. The knowledge gained from this unit will enable the student to better understand the complexity of computing and digital communications and to diagnose potential problems at a macro level. Enduring Understandings 1. The basics of computing (input, processing, output) 2. The binary and hexadecimal numbering systems 3. Character coding (ASCII) 4. Units of measurement (bits and bytes) and common prefixes (kilo-, mega-, giga-, nano-) 5. The macro-level basics of computer networking (lan, wan, Ethernet, ISPs, modulation, modem, etc.) 6. Common communication protocols (http, ftp, etc.) 7. The internet vs. the world wide web 8. Servers 9. Brief history of the Internet and key contributors 10. Browsers Essential Questions: 1. What are the primary processes by which a computer works? 2. How does the computer utilize the binary and hexadecimal number systems to represent characters and colors? 3. What are the fundamental units of measurement of computer files and how does this affect storage capacity and electronic transmission? 4. What is the Internet and how is it related to the world wide web? 5. What does it take to get connected to the Internet? Acquired Knowledge: The students will 1. Know the basic methodology and processes by which a computer operates. 2. Know the many hardware features of a computer system and various levels of software (operating system, user applications, various browsers, etc.) 3. Understand how binary numbering system works and how it is used to represent characters (bits. bytes, ASCII). This will be extended to include the hexadecimal numbering system as it relates to specifying colors (RGB format) in HTML code. In addition, they will understand the various prefixes used to indicate file size.

4 4. Understand the basics components of a network (LAN vs. WAN), various protocols used communicate over a network (Ethernet vs. Token Ring) 2 Acquired Skills 1. Use the ASCII chart to decode binary messages. 2. Specify colors using RGB format (#FFFFFF) 3. Compare the internet and the world wide web. Benchmark or Major Assessments Summative Assessments: 1. Binary and ASCII decoding quiz 2. Unit Test 3. Unit Project (Windows to the world) Accommodations and Modifications 1. Preferential seating 2. Photocopy notes for students 3. Extra time 4. Modification of project/assignments Extensions 1. Demonstrate advanced concepts of HTML: Adding interest to a page Advanced formatting Font face, font type and font size Bold, Italic Indenting/block quotes List of Applicable NJCCS and Standards 8.1A, 8.2F Teacher Resources 1. Evans, Mark, Hamm, Michael, Introduction to Web Design Using Dream Weaver. Glencoe, Evans, Mark, Hamm, Michael, Introduction to Web Design Using Dream Weaver Teacher Resource Manual. Glencoe, 2007

5 Unit 2: Introduction to Hyper Test Markup Language Part I (15 Days) 3 Why Is This Unit Important? Although most web development is accomplished today via a web-development visual application, it is important for a student to understand what is happening behind the scenes, i.e., to understand the basic codes upon which all web pages are built. This fundamental knowledge also helps tremendously when debugging errors on a web page. Enduring Understandings 1. This unit enables the student to understand the language that is used to create web pages and how browsers interpret/display web pages. 2. It will enable them to create simple web pages/sites by writing code. Essential Questions: 1. What is a mark-up language? 2. What is the basic structure of an HTML document? 3. What are the common HTML tags (and their attributes) that are used for controlling color, formatting text, page layout, graphics, animation, inserting and controlling links, navigation and tables? Acquired Knowledge: The students will 1. Know what resources are available to look up HTML codes 2. Know how to interpret the codes and how to apply the attributes/options of various codes Acquired Skills: The student will be able to create simple web pages using HTML codes, including: 1. The basic sections of an HTML document 2. Controlling color (text and background) 3. Formatting text (size, font, bold, italic, etc.) 4. Page layout (controlling margins, justification, etc.) 5. Graphics (insertion, sizing, borders, spacing, justification, etc.) 6. Simple animation (marquee) 7. Inserting and controlling links 8. Menus and navigation 9. Inserting, using and formatting tables

6 Benchmark or Major Assessments 4 Formative Assessments: 1. Daily classroom exercises: Discuss and demonstrate web and graphic design techniques, create a web/page site with Notepad Summative Assessments: 1. Unit project: Students create a web site with multiple linked pages using Notepad (Travel Web Site) 2. Unit test Accommodations and Modifications 1. Rephrase written directions 2. Preferential seating 3. Photocopy notes for students 4. Allow students demonstrating proficiency to move ahead List of Applicable NJCCS and Standards 8.1A, 8.1B, 8.2D Teacher Resources 1. On-line HTML reference documentation 2. NotePad.exe 3. Evans, Mark, Hamm, Michael, Introduction to Web Design Using Dream Weaver. Glencoe, Evans, Mark, Hamm, Michael, Introduction to Web Design Using Dream Weaver Teacher Resource Manual. Glencoe, 2007

7 Unit 3: Understanding Good and Bad Web Design Elements (8 Days) 5 Why Is This Unit Important? This unit will assist the student in evaluating and understanding generally-accepted best practices and elements of good web design, while making them aware of bad design elements. It is important to have a basic understanding of HTML so that the student can understand and appreciate how the Internet displays web pages. Enduring Understandings 1. The students will understand, appreciate, evaluate and implement features and elements of good web design while recognizing and avoiding features and elements of bad web design. Essential Questions: 1. What makes the design of a web site appealing? 2. What are generally-accepted features of good web design? 3. What are some generally-accepted features of bad web design? Acquired Knowledge: The students will 1. Evaluate web pages to determine a good and bad web page 2. Explain the critical success factors in the development of a good web page Acquired Skills 1. Critically review and rate various aspects of a web site; e.g., appearance, color scheme, use of visual elements, readability, graphic load times, the use of white space, audio, handicapped issues (e.g., ALT text on graphics), etc. Benchmark or Major Assessments Formative Assessment: 1. Students will demonstrate the following skills using Dream Weaver before moving onto the next aspect of the project: a. Creating a new page b. Inserting graphics c. Inserting tables d. Inserting links e. Working with layers f. Working with frames g. Insert a photo album

8 h. Create rollover images i. Create marquees 6 Summative Assessment: 1. Unit Project (Environmental Disasters Site) Accommodations and Modifications 1. Rephrase written directions 2. Preferential seating 3. Photocopy notes for students 4. Allow students demonstrating proficiency to move ahead List of Applicable NJCCS and Standards 8.1A, 8.2A, 8.2C Teacher Resources 1. Evans, Mark, Hamm, Michael, Introduction to Web Design Using Dream Weaver. Glencoe, Evans, Mark, Hamm, Michael, Introduction to Web Design Using Dream Weaver Teacher Resource Manual. Glencoe, WebDesignDW.glencoe.com - Designing Websites

9 Unit 4: Introduction to Hyper Test Markup Language Part II (15 Days) 7 Why Is This Unit Important? This unit builds on Unit 2 by introducing the student to additional, more advanced, elements of HTML which will enable them to create more sophisticated web pages. Enduring Understandings: The students will 1. Build on their knowledge and skills in using more advanced features of HTML, specifically frames and forms. 2. Understand the method of controlling visual aspects of a web page through Cascaded Style Sheets. Essential Questions: 1. What are frames? 2. How are frames used in creation of a web site? 3. What is the difference between a frameset and a frame? 4. How are frames created and addressed in HTML? 5. How are frames sizes specified in HTML? 6. What HTML codes used to create, name, size and address a frame? 7. How are target frames specified in an HTML link? 8. What are nested frames and how are they created? 9. What is a form? 10. How are forms created in HTML? 11. What is CSS? Acquired Knowledge: The students will 1. Understand how to utilize frames in the overall design of a web site. 2. Know how to name, size, and address frames via the Target= option of a hyperlink (Note: The concept and use of layers is included in Unit 7). 3. Understand the basic concepts and benefits of CSS. Acquired Skills: The students will be able to 1. Create frames using Dream Weaver 2. Use frames on a site 3. Create frames- based pages 4. Compare and contrast a Web Page that uses frames and one that does not

10 Benchmark or Major Assessments 8 Formative Assessment: 1. Daily classroom exercises that demonstrate an ability to work with frames Summative Assessment: 1. Unit project: Environmental Disasters Site Students create a web page using frames Accommodations and Modifications 1. Rephrase written directions 2. Preferential seating 3. Modify proficiencies 4. Photocopy notes for students 5. Allow students demonstrating proficiency to move ahead Extensions 1. More advanced students will begin to explore scripting languages. 2. The student will understand the processes by which forms are created and data transmitted to a host application. List of Applicable NJCCS and Standards 8.1A, 8.1B, 8.2D Teacher Resources NotePad.exe 3. Evans, Mark, Hamm, Michael, Introduction to Web Design Using Dream Weaver. Glencoe, Evans, Mark, Hamm, Michael, Introduction to Web Design Using Dream Weaver Teacher Resource Manual. Glencoe, WebDesignDW.glencoe.com - Designing Websites

11 Unit 5: Designing and Creating Graphics for the Web (12 Days) 9 Why Is This Unit Important? The use of appropriate, well-designed graphics is a major component of good web design. This unit will teach the student how to create/modify and enhance graphics for the web. Enduring Understandings: The students will be able to 1. Understand the different type of graphic files used on the web 2. Use a computer application (Macromedia Fireworks) to create new graphics and/or alter and modify existing graphics 3. Create buttons for use as links in an HTML document 4. Create animated graphics 5. Create an image map with defined hotspots Essential Questions: 1. What is the primary difference between a raster (bitmap) graphic and a vector graphic? 2. What are some of the various formats used in bitmap graphics? How are they different? 3. How do you use the Macromedia Fireworks application to create and/or edit new or existing graphics? 4. How can you use Fireworks to create an animated gif? 5. Identify the various states of an HTML button. 6. How can an image be sliced into various areas for targeting to specific URLs? Acquired Knowledge: The students will 1. Understand the differences and benefits of the two major classes of graphics files raster (or bitmap) vs. vector. 2. Use the Macromedia Fireworks graphics application to create and manipulate images and how to create a graphical navigation bar. Acquired Skills: The students will 1. Use Macromedia Fireworks to create various types of graphics to be used on a web page. 2. Use visual navigation buttons, transparent backgrounds, sizing and cropping images, importing/exporting image files, animated gifs and image maps.

12 Benchmark or Major Assessments 10 Formative Assessment: 1. Daily classroom exercises: demonstrate ability to crop, resize, resample graphics. These skills are necessary before the Restaurant project can be completed. Summative Assessment: 1. Unit projects: Complete Restaurant project using Flash Accommodations and Modifications 1. Rephrase written directions 2. Preferential seating 3. Modify proficiencies 4. Photocopy notes for students 5. Allow students demonstrating proficiency to move ahead Extensions 1. Students will develop their own projects based on the skills provided within this unit List of Applicable NJCCS and Standards 8.1E Teacher Resources 1. Macromedia Fireworks 2. NotePad.exe 3. Evans, Mark, Hamm, Michael, Introduction to Web Design Using Dream Weaver. Glencoe, Evans, Mark, Hamm, Michael, Introduction to Web Design Using Dream Weaver Teacher Resource Manual. Glencoe, WebDesignDW.glencoe.com - Designing Websites

13 Unit 6: Internet Safety (8 Days) 11 Why Is This Unit Important? This unit stresses the student s awareness and knowledge of safety issues in the use of digital communications so that they may comfortably and safely use the internet. Enduring Understandings: The students will 1. Know various ethical and safety issues encountered when using the Internet. 2. Understand how to ensure your personal safety when using the internet. 3. Understand digital security, cyberbullying and computer safety issues. Essential Questions: 1. What is cyberbullying and what should you do if you are a victim? 2. What are some common methods by which online predators entice their victims? 3. What is sexting? 4. How many different levels of passwords are generally recommended? 5. What are attributes of a secure password? 6. How can you determine how secure a password is? 7. Should you be afraid of cookies? 8. How can you control which types of cookies are allowed on your computer system? 9. What are the most common methods by which viruses, Trojan horses and worms are transmitted? 10. Why are firewalls used? 11. In terms of fair use and copyright infringement, what are the special allowances for a student vs. the general public? Acquired Knowledge 1. Methods used by on-line predators and the consequences of on-line chatting 2. How on-line information can be used to track someone 3. Password protection and security issues 4. The effects of cyberbullying 5. What cookies are and how to control them 6. The differences between viruses, Trojan horses and worms, and how to protect against them 7. Hackers and firewalls 8. Fair use and copyright issues Acquired Skills: The students will 1. create effective strategies to combat cyberbullying

14 2. create and measure the security of their passwords 3. implement various strategies to control cookies 4. develop strategies to protect themselves and their computers against malware Benchmark or Major Assessments Summative Assessment: 1. Unit on-line poster students will create a Glog to portray an aspect of Internet safety 2. Unit test: multiple choice, matching, written response questions on internet safety Accommodations and Modifications 1. Rephrase written directions 2. Preferential seating 3. Modify proficiencies 4. Photocopy notes for students 5. Allow students demonstrating proficiency to move ahead. 6. Give additional time for project completion List of Applicable NJCCS and Standards 8.1D Teacher Resources 1. NJ Governor s Task Force on Internet Safety Doc NotePad.exe

15 Unit 7: Introduction to Automated Web Design (10 Days) 13 Why Is This Unit Important? This unit will introduce the student to the use of automated tools that relieve that web designer from the drudgery of hand-coding web pages. Enduring Understandings: The students will 1. Understand and be able to use a premier WYSIWIG application (Macromedia DreamWeaver) 2. Create and modify web pages and sites Essential Questions: 1. What is a WYSIWIG application and how can it save a web developer time and effort in the creation of a web site? 2. How are layers different than frames? Acquired Knowledge: The students will 1. Know the application that allows a web developer to design and create web sites visually, without the drudgery of hand coding each page 2. Understand CSS and learn how layers offer greater functionality than the older frames structure Acquired Skills: The students will be able to 1. Use DreamWeaver to build web pages and sites 2. Understand the functionality of the most frequently used components of the DreamWeaver user interface 3. Explain why the manage sites option is critically important to the successful deployment of a web site once it is moved to a server 4. Create framed environments 5. Utilize layers to facilitate the design and placement of various page sections 6. Use automated tools to insert navigation bars and multi-media content 7. Create on-line forms 8. Toggle between page design mode and code mode to tweak the page 9. Test and publish their results Benchmark or Major Assessments Formative Assessments: 1. Daily classroom exercises: Demonstrate skill in creating on-line forms, insert navigation bars and multi-media content, create framed documents.

16 2. Unit project: Create a Virtual Field Trip Web Site (American Civil War site, Anthropological Dig site, Museum, Pyramid site etc.) 14 Accommodations or Modifications 1. Rephrase written directions 2. Preferential seating 3. Modify proficiencies 4. Photocopy notes for students 5. Allow students demonstrating proficiency to move ahead. 6. Give additional time for project completion List of Applicable NJCCS and Standards 8.1B, 8.1E, 8.2F Teacher Resources 1. Macromedia DreamWeaver documentation and on-line tutorials Evans, Mark, Hamm, Michael, Introduction to Web Design Using Dream Weaver. Glencoe, Evans, Mark, Hamm, Michael, Introduction to Web Design Using Dream Weaver Teacher Resource Manual. Glencoe, WebDesignDW.glencoe.com - Designing Websites 5.

17 Unit 8: Animation for the Web (10 Days) 15 Why Is This Unit Important? Almost every major commercial web site employs some sort of animation to increase the amount of multi-media content of their web sites. This unit will introduce the student to one of the most prolific multi-media tools used today so that they may include multimedia in their web development. Enduring Understandings 1. The objective of this unit is to enable the student to be able to use Macromedia Flash to create animations that will be used as advertisements to enhance their web pages. (This unit goes beyond the introduction to Macromedia found in the Multimedia classes and includes an introduction to Action Scripting). Essential Questions: 1. What is one of the commonly-used applications used to create animation on a commercial web site? 2. How does a web developer use Flash to implement and control animation? 3. What is the difference between an.fla file and a.swf file? 4. How does one publish a Flash file and integrate it into a web page? Acquired Knowledge: The students will 1. Understand the principles of animation 2. Know how to control the timing and sequencing of a scene 3. Understand the functionality of various types of frames; e.g., keyframes 4. Differentiate between frame-by-frame animation and tweens 5. Appreciate the ability of the software to create tweens 6. Understand the benefits of symbols vs. bitmaps 7. Learn the basics of Action Scripting Acquired Skills: The students will be able to 1. Use the vector and bitmap toolsets 2. Create motion and shape tweens 3. Create symbols: graphic, buttons, and movie 4. Use Action Script to control the flow, sequence and timing of a movie 5. Control and alter the transparency of a symbol 6. Creatively implement text tweens to create a visually appealing scene 7. Use masks and motion guides 8. Import graphic and audio elements into a movie 9. Create short animations that are designed to be on-line advertisements

18 Benchmark or Major Assessments 16 Formative Assessment: 1. Daily classroom exercises: Demonstrate skills pertinent to this unit; animation, create and insert a flash button, add audio and video Summative Assessment: 1. Unit project: Fundraiser Accommodations or Modifications 1. Rephrase written directions 2. Preferential seating 3. Modify proficiencies 4. Photocopy notes for students 5. Allow students demonstrating proficiency to move ahead. 6. Give additional time for project completion List of Applicable NJCCS and Standards 8.1A, 8.2E, 8.2F Teacher Resources 1. Macromedia DreamWeaver documentation and on-line tutorials Evans, Mark, Hamm, Michael, Introduction to Web Design Using Dream Weaver. Glencoe, Evans, Mark, Hamm, Michael, Introduction to Web Design Using Dream Weaver Teacher Resource Manual. Glencoe, WebDesignDW.glencoe.com - Designing Websites 5.