1 of 7 8/27/2014 2:26 PM Units: Teacher: WebPageDesignI, CORE Course: WebPageDesignI Year: 2012-13 Designing & Planning Web Pages This unit will give students a basic understanding of core design principles that apply to web design and development. It will help them to establish criteria for evaluating the quality of websites, introduce them to color theory and web design standards, and introduce them to the concepts of developing a site plan and storyboarding. Some of this unit can be completed without using computer. Content Skills Vocabulary How do we critically evaluate web sites based on purpose, design and usability? What are the major criteria that experts use to evaluate web sites? How can you evaluate a site based on the basic concepts related to using color and the web? What color related resources are available online? What is the Americans With Disabilities Act (ADA) and why it is important to develop websites that comply with web standards? What are the s and CSS? What are some basic s the earliest and latest versions of? what are the five basic steps to organizing on a web page and the three essential structures for organizing web sites? How do you create a navigation system that appropriately chunks web content and allows users to quickly, easily access important content. 15.3.12.A - Foundations of Evaluate work product and make recommendations based on content. 15.3.12.D - Foundations of Evaluate business materials (including web based resources) for value related to purpose, quality, and appropriateness. 15.3.12.G - Foundations of Employ appropriate presentation skills to lead discussions and team activities. 15.3.12.N - Etiquette ~ Demonstrate appropriate work ethic in the workplace, community, and classroom. 15.3.12.S - Electronic Evaluate electronic communication options based on need. 15.3.12.U - Electronic Critique the effectiveness of various electronic communication options related to desired outcomes. 15.4.12.G - Software /Applications ~ an advanced digital project using sophisticated design and appropriate software/applications. 15.4.12.H - Programming ~ Use programming languages to develop logical thinking and problem solving skills. 15.4.12.K - Digital Media ~ Evaluate advanced multimedia work products and make recommendations based on the evaluation. CC.1.4.11-12.T - Production and Distribution of Writing Writing Process ~ Develop and strengthen writing as needed by planning, revising, editing, rewriting, or trying a new approach, focusing on addressing what is most significant for a specific purpose and Web site evaluation based on purpose, design, and usability. Major criteria that experts use to evaluate web sites Web site evaluation tools Group communication as to what makes a high quality web site. Use of color and color realted resources online. Identification of accessibility concerns related to color. Strategies to make sites accessible to people who are color blind Importance of compliance with web standards. Differences and CSS Comparison earliest and latest versions of Methods and technologies used by people with disabilities in accessing computers and the web Experience some of the common barriers people with disabilities face with inaccessible web content. Theories and techniques to effectively organize content on a web site Principles of architecture, including the five basic steps to organizing on a web page and the three esssential structures for organizing web sites. Navigation systems used to chunk web content and allow users to quickly, Rate websites based upon standards set by experts. Develop a rubric for rating websites. Use some of the color-related resources available online. Use simulations to experience first-hand what some persons with disabilities may encounter when using the Internet. Compare/contrast 1.2 and 5.0. Use index cards to divide content of a Web site into usable and understandable chunks of. a navigation system to move through in a Web site in an easy and understandable manner. World Wide Web Web Browser W3C CSS ADA Information Architecture validation Evaluate web sites based on purpose, design and usability. Identify the major criteria that experts use to evaluate web sites and apply those criteria to your own evaluations. Communicate to others their ideas about what makes a high quality web site and explain how they would evaluate a site. Develop a web site evaluation tool based upon findings from previous lessons. basic concepts related to using color and the web when creating a web site. Identify and make use of color related resources online. Identify accessibility concerns related to color and implement key strategies to make sites accessible to people who are color blind. Explain why it is important to develop websites that comply with web standards. Describe the s and CSS. Describe some basic s the earliest and latest versions of. Demonstrate the five basic steps to organizing on a web page and the three essential structures for organizing web sites. Organize web content by creating a navigation system that appropriately chunks web content and allows users to quickly, easily access important content. Opera Web Project - Module 1--Lesson 1: Surveying the Posisibilities (I) Module 1--Lesson 2: Developing a Website Evaluation Tool Module 2: Color Theory in Web Design (I) Module 3: Lesson 1--Web (I) Module 3: Lesson 2--People with Disabilities Accessing the Web (I) Module 4: Lesson 1--Organizing a Web Site Web Site Rating 9/6/2013 Website Evaluation Tool (Rubric) 9/10/2013 Reading Check: Color Theory 9/11/2013 "Chunk" topic cards into web navigation diagram Objective Test 9/20/2013 9/27/2013

2 of 7 8/27/2014 2:26 PM audience. easily access important content. CC.1.5.11-12.A - Comprehension and Collaboration - Collaborative Discussion ~ Initiate and participate effectively in a range of collaborative discussions on grades level topics, texts, and issues, building on others ideas and expressing their own clearly and persuasively. Creating Pages with This unit gives students the basics of coding. An emphasis is placed on document content and structure, rather than on presentation. dthis unit can be completed entirely with a web browser and text/ editor. Why is it important to plan a web site prior to building it? Why is it important to identify a site's purpose and audience before designing a web page? What is? How does 5 differ from older versions of the language? How is coding used to create/add content to web pages/sites? (literature,, How are various used to identify parts of a page? across a the Importance of planning and pre-coding design steps when creating a web site. Importance of knowing a site's purpose and audience when planning a web site. Gain basic understanding syntax Develop site maps for a web site Brainstorm site content Compare and contrast similar web sites to your planned web site Compare and contrast web sites - looking for consistency in headers, footers and naviagation areas Identify tags that mart the start and end of an document. Identify the two main sections of an document. Identify the used to create various heading styles. Identify the element used to add images to a page a "skeleton" for a homepage that includes appropriate markups for a main heading, blocks of text containing about you and the course, a paragraph that providese an overview of the content of the portfolio, and sub-headings for each of the remaining units of the curriculum. There should be some placeholder content beneath each sub-heading. portfolio text editor HyperText Markup Language () links derprecated essential tags common tags W3C W3C Validation () Develop understanding of syntax and understand the and attributes. Learn the basic tags required for all documents and be able to create a blank page with all of the essentail tags in place. Use some of the common tags for adding content to a web page including, <h1>, <h2>, <h3>, <p>, and <div>. Apply the concepts of nesting and assigning attributes to tags. Utilize headings and paragraphs to structure content on a web page. Opera Web Project - Comprehensive Concepts Pre-Coding (I) Syntax Tags Common Tags Home Page Sketch 10/4/2013 Site diagram and folder Structure 10/11/2013 Portfolio Creation 10/25/2013 Creating Pages Using 10/31/2013 Translate the above into code by identifying

3 of 7 8/27/2014 2:26 PM each peice of content. Use <div></div> to contain the various sections of the page. I Basics VII. Web Development and Design How are web pages created? (literature,, across a The Basics of The <head> element Choosing the Right doctype for your documents Define function of Describe the history of Explain document structure the syntax of block-level and inline Define doctype and explain its function browser "standard" and "quirks mode" Syntax Block Level Elements Inline Elements Doctype Setup the head element on your course homepage. Use block level and inline to add content to a web page. Opera Web Project - Comprehensive Concepts Creating Pages with Web Design I Midterm Lab Assignments the various doctypes Choose the correct doctype for your site's purposes. Set a document's primary language Set a document's character encoding Define the <title> element Add keywords and a description to a page for search engine indexing Add an embedded style sheet to the <head> section of a web page Add client side scripts to the <head> section Explalin

4 of 7 8/27/2014 2:26 PM the importance of placing style sheets and scripts in seperate files Link to an external style sheet using the <link> element Apply the of the <link> element The Body VII. Web Development and Design How can the content of a web page be manipulated (literature,, inside of the body element? across a the Marking up textual content in Lists Images in Links Tables Forms Lesser-known semantic Generic Containers - the div and span Creating Multiple Pages with Navigation Menus Validating your syntax and usage of common block-level Nesting Lists Alternative Text syntax and Background Image usage of Background Repeat common inline Hyperlink Anchor Attribute ordered and unordered lists understand the syntax and usage of lists Choose list types Nest lists the <img> element and it's attributes Apply images with CSS <a> element to link to other resources Character References Character Encoding Keywords Unordered List Ordered List Tables Forms Checkbox Radio Button Hotspots Pagination Image Map Use lists to group relevant Use lists to create site navigation. nested lists of <img> element to add graphics to web pages. Add hyperlinks to a web page using the anchor <a> element Add navigation links to a homepage. Opera Web Project - Comprehensive Concepts Creating Pages with Lab Assignments Cascading Style Sheets VII. Web Development and Design How can the appearance of a web page be changed? (literature,, Inheritance and Cascade Text styling with CSS Describe the benefits and problems of inline styles Write style Cascading Style Sheet Selector ID Selector Attribute Descendent Selector Change the style of hyperlinks using CSS inline, embedded and external style sheets Opera Web Project - Intro to CSS Lab Assignments

5 of 7 8/27/2014 2:26 PM across a the The CSS layout model - boxes, borders, margins, padding CSS images Styling lists and links Styling Tables Styling forms Floats and Clearing CSS Static and Relative Positioning CSS absolute and fixed positioning rules with correct syntax an external style sheet Print a style sheet Readability Em similarities and s inheritance and cascade Adjust the line height of a text passage Apply the text-transform property font-family property to list fonts to be used on a web site Describe the ems, percentages and points Control whitespace on a web page using the margin property Add borders around an object using a variety of border properties Use the padding property to insert negative space teh margins or borders of an element and its content. Manipulate the dimensions of using the width and height properties Pseudo-classes Pseudo- Inline Styles Embedded Styles External Style Sheet Inheritance Cascade Specificity Font Legibility Pixel Percentage Style Weight Margin Border Padding Negative Margins Collapsing Margins Overflow CSS Box Background Color Background Image Sprites Background Repeat Background positiion Unordered List Ordered List Nested List Link State Float Clear Evaluate the appropriate situation for each of the types of style sheets Use CSS to change the appearance of text on our webpage. Evaluate the appropriate situation for each of the types of style sheets Apply a image via CSS, adjust its placement, tile it vertically or horizontally Apply the float poperty to al lists to create horizontal navigation menus Students will create and apply CSS to their course homepage html file. Comprehensive Concepts float property to allow to flow around others the CSS box model property to display images on a web page. Control repeat Position a image Change the list style type of a list item custom bullets using images

6 of 7 8/27/2014 2:26 PM Nest a list inside of another list the various link states Change the look and feel of links using pseudo classes a navigation menu using lists and links float property to control page layout clear property to shift a page element below a floated object the relative and absolute positioning Advanced CSS VII. Web Development and Design How can the layout of a web page influence the content (literature,, of the page? Headers, footers, columns, and templates single column layouts double column layouts triple column layouts Header Footer Column web pages that have multiple columns of. Use absolute and relative positioning strategies to control the layout of page. Opera Web Project - Comprehensive Concepts CSS Lab Assignments Web Design I Midterm across a the

7 of 7 8/27/2014 2:26 PM Semester course. See September. Semester course. See October. Semester course. See November Semester course. See December. Semester course. See January.