South Plainfield Public Schools Web Design Scope and Sequence of Curriculum Grade Date August 2011

Transcription

1 Unit (Domain): Part I: Evaluating Current Websites Part II: Creating Web Pages Using Google Sites, Docs and Forms Part III: Using Animation Media for the Web Essential Question(s): How does the World Wide Web work? How do Web pages Operate? How are Web pages linked? What is WYSIWYG? How can Google sites reduce the hurdles to learning Web Design? What constitutes an attractive and functional Web Page design? How does web site animation interact with other programs? What are the advantages of using animation on your web page? Enduring Understanding(s): Students will understand how to use Google Docs and Forms. Students will understand how creating special Web page effects is with software. Students will understand how to integrate the visual and audio elements of TV and motion pictures with interactivity that only computers can offer. Students will understand how viewers become engaged. 21 st Century Themes (Check all that apply): Global Awareness Environmental Literacy Health Literacy Civic Literacy x Financial, Economic, Business, and Entrepreneurial Literacy 21 st Century Skills (Indicate whether these skills are Encouraged, Taught, or Assessed in this unit by marking E, T, A, on the line before the appropriate skill.) E, T, A Creativity & Innovation E, T, A Critical Thinking & Problem Solving E, A Communication E, A Collaboration Standard: NJCCCS 8.1; NJCCCS 9.1 Skills Instructional Procedures/ Students will be able to: Learning Activities Evidence of Learning (Formative and Summative) Resources Interdisciplinary Connections Vocabulary

2 Preview and Edit a Web Page Create links to other Web Pages Plan text formatting Create an ordered list Customize fonts Align Text Plan graphics use Insert graphics Specify graphics size Insert an image map Link graphics Plan a form Create a text entry field Add radio buttons Add checkboxes Create a pull-down menu Add a push button Plan and create a table Format borders Change table dimensions Position page elements Explore toolbars, button bars, and panels. Use different tools on a Web Page Understand storyboarding, flow charting and folder structure. Build the first pages of a Web site using basic structure and layout. Understand how to use absolute and relative paths for locating Web pages defined in links. Review and critique current Web pages. Evaluate creativity and styles of current Web pages. Evaluate features used in current Web pages. Evaluate that data input areas are operational. Evaluate Links. Students are to convince a small business owner that by having a Web page they can reach a wider audience. Create a simple Web page to illustrate your point. Verify code from a fellow Web designer. Proofread the code provided, edit where necessary and print corrected code. You recently opened your own video store, and plan to design an in-store information system. With this system, customers can learn more about the movies in the store. Create a simple Web page. Class discussion. Quizzes on information learned. Final mastery test on unit. Projects/Presentations. Google Docs. Google Forms Google Sites Text: Microsoft Web Expressions as supplemental for teacher Introduction to Web Deign Technology Language Arts Fine Arts Absolute URL Accessibility Action Align Panel Animation Asset Bandwidth BMP Browser Cell Check Box Button Cookie CSS DHTML Dithering Domain Name Down State Embedded Style Sheet External Hyperlink Frames GIF (Graphic Interchange Format) Gradient Home Page Hot Spot Hyperlink Icon Image Map JPEG Jump Menu Layer Looping Masking

3 Create image maps and hotspots. Understand the advantages and disadvantages of different graphic formats that are available for Web pages. Explore the Web-safe color palette. Apply colors to body text and to different types of links. Understand how to select appropriate background colors to match the background image of your Web page. Explore the difference between live and graphic text. Discover the difference between serif, sans serif and monospaced fonts. Create and use font lists. Use the standard and the layout methods for creating tables. Create nested tables. Apply styles to forms and use contextual selectors. Examine the pros and cons of using frames as a page-layout method. Build a frame-based layout Learn how prefabricated items such as library items and templates can greatly ease the You have been working on a Web page for your consulting business. A friend who is studying graphic arts has created a logo for you, and gave you a copy in a Web-ready file format. Add the logo to your Web page. You are expanding an instore information system for your video store. You want to include a form in the system so customers can tell you about their film preferences and suggestions on films they would like to rent. You can take their desires into account when you order new stock. Create an appropriate form. Work on a digital resume, complete with samples of your creativity. Use projects you have created in this class, and design a portfolio. Draw a flow chart that establishes the pages to build a basic site. Create a home page, and a page of samples of your work. Use this flow chart to determine how the links will work. Draw a basic layout. Create a root folder. This folder should South Plainfield Public Schools Named Anchor Plug-in PNG Pop-up Menu Resolution Rollover Streaming Upload Web Page Web Site

4 expansion of a Web site. Learn how to develop a new template and create pages based on that template. Review common clipboard functions. Learn to create simple pop-up messages. Learn to incorporate different types of multimedia objects into Web pages. Learn how to create an account with a free Webhosting service. Learn to upload the site to the Web server. Become aware of the importance of checking the Web site on the Web server and having someone else check it as well. Learn how to change the size and background color of a movie. Learn about frame rates, and how they affect the playback of a movie, Discover how to use guides to assist in aligning objects. Learn how to select objects and modify the stroke and fill of an object. Use the Color Mixer to choose colors and create contain all the elements and objects used. Write a brief bio, background, and personal interests. Experiment with various styles so that you are satisfied with headings, body text, lists and paragraph formats. Next year is your grandparent s 50 th wedding anniversary and you have decided to give them a Web site as a gift. You have a large family. Design a series of templates with editable regions that your extended family can use to post their own data. You will need to contact family members to decide who and how involved they will be. As you develop your family site, use and apply several techniques and methods that you have learned and worked with during this class. You are a developer for a multimedia firm. A client who owns a popular action figure firm

5 gradient fills. Learn how to fill objects with color. Learn how to customize strokes and apply them. Larn how to scale, rotate, skew and distort objects, Learn about the button symbol. Learn how to change objects one frame at a time. approaches you about a new product..data Man, a new superhero designed to target web savvy 7-12 year olds. His mission is to keep the world safe from lost files and corrupt data. The company wants you to create an animated Data Man logo and advertisement for the figure s online debut. Use functions and methods and features such as storyboarding the rough logo. Use illustration features and build the component parts of the logo. Create an animation piece as a Movie Clip. Assemble the animation timeline.

6 Standard: Skills Students will be able to: Instructional Procedures/ Learning Activities Evidence of Learning (Formative and Summative) Resources Interdisciplinary Connections Vocabulary

7 Standard: Skills Students will be able to: Instructional Procedures/ Learning Activities Evidence of Learning (Formative and Summative) Resources Interdisciplinary Connections Vocabulary

8 Content Area: Business Education Course Title: Web Design Grade Level: Unit Plan 1 Evaluating and Critiquing Current Web Pages 2 weeks Unit Plan 2 Creating a Web Page A. Creating Web Pages using Google B. Formatting Text C. Adding Graphics D. Adding Multimedia E. Using Forms to control input F. Working with Tables G. Designing Web Pages Unit Plan 3 Creating Web Pages A. Workspace Layouts B. Components of Authoring Environments C. Preferences D. Applying Structure to Text E. Linking the Site F. Images and Colors G. Working with Type H. Cascading Style Sheets 8 Weeks 10 weeks

9 I. Table Tags and Attributes J. Creating Web Forms K. Using Layers to Design Pages L. Assistive Technologies M. Making Web Pages Behave N. Animation South Plainfield Public Schools Unit Plan 4 Unit Plan 5 Unit Plan 6 Date Created: August 2011 Board Approved on: