WEB DESIGN
STATEMENT OF PURPOSE This course is intended for the student interested in learning how to create web pages for the World Wide Web. Instruction on how to program using the HTML language is provided. Hypertext Markup Language in the development and composition of Web pages. Students author pages that meet XHTML specifications outlined by the WWW Consortium. Topics include: tables, forms, links, lists, objects of various types including graphics and sound, style sheets, and issues surrounding crossplatform viewing. The student will develop and upload a completed Web site.
COURSE OBJECTIVES Students will be able to: 1. Proficient in HTML programming language to create Web Pages via the Internet. 2. Develop well-designed Web pages that combine navigation with the balanced use of graphics, animation, text and color. 3. Evaluate existing web pages as well as ethics in designing web pages and how to properly incorporate Desktop Publish techniques. 4. Create HTML Web Pages & CSS Documents. 5. Manipulate images using software. 6. Use Web 2.0 tools to develop videos or presentations that will be incorporated into websites. 7. Proficient in Adobe Dreamweaver and Creative Suite 5.
MATERIALS 1. Learning HTML 4.0 Programming, Curt Robbins, DDC Publishing, NY, 2000. 2. Learning Microsoft FrontPage 2002, Catherine Skintik, DDC Publishing, NY, Sept. 2002. 3. Macromedia Studio MX Step-By-Step, Projects for Macromedia Flash MX, Dreamweaver MX, Fireworks MX and FreeHand MX, Kirsti Aho, Editor, Thomson Course Technology, Boston, MA, 2003. 4. Adobe Creative Suite 5 5. Web Based Content Management Systems 6. Web 2.0 Tools
ASSESSMENTS 1. Quizzes 2. Unit Tests 3. Exit Tickets 4. Classwork 5. Individual & Group Projects 6. Single & Multi Page Websites 7. Midterm 8. Final
HIGH SCHOOL WEB DESIGN SCOPE Unit/ Topic Duration Common Core Standards Essential Questions Chapter 1 Topic 1: Basic Site Evaluation and Rubric Creation 3 Weeks 9.4.12.K.17 - Employ critical thinking skills (e.g., analyze, What makes a website good or bad? HTML Overview Surveying the Possibilities What criteria can be Developing a Website Evaluation Tool applied to a website to Topic 2: Color Theory determine its quality? Color Theory in Web Design Rules of 9 How do colors affect the Contrast and Coordination viewer s impression of a Topic 3: Web Standards & Accessible Design website? 9.4.12.K.75 - Demonstrate knowledge of Web page basics to Web Standards convey an understanding of Web page design and functioning. What is HTML and how How People with Disabilities Access the 9.4.12.K.(3).2 - Create and implement a digital communication is it used? Web product to meet customer needs. Topic 4: Planning a Website How should content be Organizing a Website organized on a website? Site Maps Search Optimization 9.4.12.K.(3).11 - Employ knowledge of Web design, programming, and administration to develop and maintain Webbased applications. 2 Topic 1: Pre-Coding Pre-Coding Basic Templating Topic 2: Basic HTML Markup HTML Syntax 5 Weeks 9.4.12.K.17 - Employ critical thinking skills (e.g., analyze, Why is pre-coding necessary to create a successful website? What elements make up a
Essential Tags Common Tags Topic 3: HTML Lists Lists Creating a Navigation Menu Topic 4: Creating Links Linking to External Internet Sites Linking to Pages Within Your Website Special Types of Links Image Maps Topic 5: Creating a Data Table Creating a Data Table Forms 3 Topic 1: Introduction to Cascading Style Sheets Anatomy of a Style Applying Styles Linking to an External Style Sheet Topic 2: Color in CSS Understanding Color in CSS Applying Color in CSS Topic 3: Typography in CSS Understanding Typography in CSS Applying Typography in CSS Topic 4: The Box Model in CSS Understanding The Box Model in CSS Applying The Box Model in CSS Topic 5: The Role of ID and Class in CSS Understanding ID and Class in CSS Applying ID and Class in CSS Pseudo-class Selectors in CSS Topic 6: Page Layout Techniques Page Layout with CSS 9.4.12.K.49 - Conduct and participate in meetings to accomplish tasks. 5 Weeks 9.4.12.K.17 - Employ critical thinking skills (e.g., analyze, 9.4.12.K.48 - Establish and maintain effective relationships in order to accomplish objectives and tasks. website? How do tags allow web designers to create a site? What is the difference between lists and when should each be used? Why do coders use relative and absolute links? How do CSS documents allow coders to apply a standard format throughout the site/ What is the difference between inline coding, html elements, classes, and IDs? Why does alignment on a page affect the viewer s opinion of the site? What are the advantages to using a table for formatting?
Stylizing a Navigation Menu with CSS 4 Topic 1: Introduction to Web Graphics Introduction to Web Graphics Copyright Law and Graphics on the Web Topic 2: Creating a Web Photo Album Understanding Web Graphics Acquiring Images for Web Graphics Cropping and Resizing Adding Images to Your Web Page Topic 3: Creating a Button Basic Shapes and Colors Working With Layers Optimizing GIF Images Creating a Favicon Topic 4: Creating a Web Page Banner Selection Tools Layer Effects and Blending Background Images Animated GIFs 4 Weeks 9.4.12.K.17 - Employ critical thinking skills (e.g., analyze, 9.4.12.K.49 - Conduct and participate in meetings to accomplish tasks. 9.4.12.K.(3).2 - Create and implement a digital communication product to meet customer needs. 9.4.12.K.(3).6 - Consider intellectual property issues when creating Web pages and comply with intellectual property rights statutes and regulations. 9.4.12.K.(3).8 - Participate in a user-focused design and development process to produce Web-based and digital communication solutions. 9.4.12.K.(3).9 - Design and employ the use of motion graphics to create a visual Web-based or digital design. How do graphics affect the user s experience? How do copyright laws affect use of images and materials on a site? Why do programmers use thumbnail images throughout a site? Why are image maps used for advanced pages? How do images influence advertising and marketing?
5 Topic 1: Scripting Topic Overview of Scripting on the Web Client-side vs. Server-side Scripting Topic 2: JavaScript Using JavaScript to Show an Alert JavaScript Errors and Debugging Building a JavaScript Clock Part1 Building a JavaScript Clock Part2 Using JavaScript to Hide and Show Content 6 Topic 1: Validating Websites Validating Your HTML Validating Your CSS Validating Your Accessibility Topic 2: Testing Usability Conducting a Usability Test 5 Weeks 9.4.12.K.17 - Employ critical thinking skills (e.g., analyze, 9.4.12.K.49 - Conduct and participate in meetings to accomplish tasks. 4 Weeks 9.4.12.K.17 - Employ critical thinking skills (e.g., analyze, 9.4.12.K.49 - Conduct and participate in meetings to accomplish tasks. How do JavaScript programs allow the user to manipulate data on a website? What challenges are faced when using scripts on a page? How does debugging affect the programing of a website? Why is a usability test needed before beta testing a website? How does the number of link clicks affect the revisit rate of a website? How does the adoption of HTML5 affect the use of flash on websites? What accessibility tools are available for users with disabilities?
7 Topic 1: Web Authoring Software Basic Features of Web Authoring Software Content, Structure, Presentation, and Behavior Site Management Features Topic 2: Publishing on the Web Website Hosting Services Website Publishing Tools 9.4.12.K.(3).13 - Test a digital communication product to evaluate its functionality. 9.4.12.K.(4).2 - Create and use information technology strategies and project plans when solving specific problems to deliver a product that meets customer specifications. 9.4.12.K.(4).7 - Implement software testing procedures to ensure quality products. 9.4.12.K.(4).8 - Perform quality assurance tasks to produce quality products. 9.4.12.K.(4).9 - Perform maintenance and customer support functions to maintain software applications. 7 Weeks 9.4.12.K.17 - Employ critical thinking skills (e.g., analyze, 9.4.12.K.(3).2 - Create and implement a digital communication product to meet customer needs. Why do programmers use web authoring software instead of coding from scratch? How does web authoring software allow programmers to use multimedia in a website? What limitations are removed based on web authoring software? How does planning affect the flow of information on a website? How do programmers
8 Topic 1: Client Website Planning the Client Website Constructing the Client Website Quality Control of the Client Website 9.4.12.K.(4).7 - Implement software testing procedures to ensure quality products. 9.4.12.K.(4).8 - Perform quality assurance tasks to produce quality products. 9.4.12.K.(4).9 - Perform maintenance and customer support functions to maintain software applications. 5 Weeks 9.4.12.K.17 - Employ critical thinking skills (e.g., analyze, 9.4.12.K.48 - Establish and maintain effective relationships in order to accomplish objectives and tasks. 9.4.12.K.49 - Conduct and participate in meetings to accomplish tasks. 9.4.12.K.(3).1 - Prepare specifications for digital communication products to communicate specifications to various audiences. 9.4.12.K.(3).2 - Create and implement a digital communication product to meet customer needs. 9.4.12.K.(3).3 - Gather and analyze customer requirements for digital communications to best meet consumer needs. work together using tags and meta data on pages? How do a client s needs affect the planning and construction of a website? What tools or skills are needed to effectively design a website for a client? How do you evaluate a website prior to providing the site to a client? How does the validation process affect the delivery of a website to the client?
9.4.12.K.(3).12 - Perform maintenance and customer support functions for digital communication products to maintain quality products that meet customer needs. 9.4.12.K.(4).7 - Implement software testing procedures to ensure quality products. 9.4.12.K.(4).8 - Perform quality assurance tasks to produce quality products. 9.4.12.K.(4).9 - Perform maintenance and customer support functions to maintain software applications.