Foundations of Web Desig / 1.0 credit SCOPE AND SEQUENCE

Transcription

1 School and Classroom Procedures n 2 N/A Provided by School Site FBLA Fundamentals 2 Co-Curricular CTSO This lesson introduces the Close Reading Strategy which is part of the Common Core State Standards. These standards for Reading in the Science and Technology Area should be integrated throughout the course. We recommend that the CIS Model be used twice per quarter. A link to current topical articles is available on the BME Conference site CTE CTSO Lesson FBLA Chapter Management Handbook

2 Welcome to Web Design n Identify stages in the web design process and describe theactivities comprisin each stage Define the site structure by creating a content map, storyboard, and associated wireframes Define common markup languages and their usage Examine emerging and new markup languages Determine browser support and appropriate usage of markup languages (existing and emerging) Identify common DOCTYPES (e.g., Strict, Transitional and Frameset) and describ their appropriate use Create basic webpage structures using common markup elements and attributes Incorporate list structures in a webpage (i.e., ordered, unordered, definition, nested) Research and incorporate web color usage principles in a webpage Troubleshoot markup language syntax, elements, and links Describe usage guidelines (e.g., format types, size, relevance) for integrating Compare and contrast existing and emerging CSS versions Determine browser support and appropriate usage of CSS (existing and emerging versions) Explain "document flow" and describe its implications on web design Compare and contrast common authoring tools Identify issues related to website maintenance Locate, comprehend and evaluate key elements of oral and written informatio Analyze and apply data and measurements to solve problems and interpret documents Draft, revise, and edit written documents using correct grammar, punctuati and vocabulary Present information formally andinformally for specific purposes and audiences Analyze and apply data and measurements to solve problems and interpret documents New Perspectives: HTML, XHTML, and Dynamic HTML Chapter 1 FOWD Essential Curriculum Guide: Activity 1.3 DOCTYPES, Markup Languages, & CSS Versions

3 n Creating a Websit Define information architecture Discuss the importance of information architecture to web design and development Conduct a client interview to determine the business purpose and needs Identify stages in the web design process and describe the activities comprisi each stage Define the site structure by creating a content map, storyboard, and associated wireframes Create a web site mock-up for client approval Incorporate link structures in a webpage (i.e., external, internal, ) Research and incorporate web color usage principles in a webpage Troubleshoot markup language syntax, elements, and links Create and incorporate image maps in a webpage Identify technologies to enhance user experience Examine indexing, page ranking, basic Search Engine Optimization technique Explore common website analytic tools Demonstrate knowledge of arithmeticoperations Construct charts/tables/graphs using functions and data Discuss the role of creataitf in conetructna ecientfic queetonep cettode and explanations Formulate scientficallly investigable questions, construct investigat collect and evaluate data, and develop scientfic recoccendatone aaeed on findinae. New Perspectives: HTML, XHTML, and Dynamic HTML Chapter 2 FOWD Essential Curriculum Guide: Activity 2.2 Storyboarding with Client Interviews Graphics Programs Basics Research and incorporate web color usage principles in a webpage Describe usage guidelines (e.g., format types, size, relevance) for integrating Compare and contrast standard image formats used in webpage design Use image-editing software to enhance website designs with simple graphic Choice: Adobe Illustrator CS6 Revealed Adobe Photoshop CS6 Revealed Online Resources/Activities fo Adobe Fireworks, Adobe Illustrator, or Adobe Photoshop

4 Formatting We Pages with CSS n Research and incorporate web color usage principles in a webpage Describe usage guidelines (e.g., format types, size, relevance) for integrating Compare and contrast standard image formats used in webpage design Incorporate graphics into a webpage design Define CSS and describe its importance in web design Compare and contrast existing and emerging CSS versions Determine browser support and appropriate usage of CSS (existing and emerging versions) Explain "document flow" and describe its implications on web design Recognize and use element selectors, ID selectors, class selectors, pseudo-class selectors, and descendant selectors Explain how inheritance and specificity affect CSS rule conflicts Use inline styles, embedded style sheets, and external style sheets Use the link and import methods to connect to an external style sheet Use CSS shorthand techniques to create efficient and concise style sheets Apply basic CSS propertiep includina aackaroundp aorderp clearp colorp floatp nontp height, line-height, list-style, margin, overflow, padding, position, tex-align, text-indent, width, z-index, padding, et al Use CSS to style tables (e.g., borders, width, spacing, alignment, background) Use CSS to enhance the appearance and usability of an XHTML form Identify technologies to enhance user experience Enhance the website using client-side technologies (rollovers, check plug-ins, pop-up windows) Demonstrate efficient, consistent web site development practice (use of templates, snippets, etc). FOWD Essential Curriculum Guide: Activity 3.4 Vector and Bitmap Masks New Perspectives: HTML, XHTML, and Dynamic HTML Chapter 3 FOWD Essential Curriculum Guide: Activity 4.1 CSS vs. XHTML - Colors, Fonts, Images, Backgrounds Web Page Tables Describe how tables are used in web design. New Perspectives: HTML, XHTML, and Dynamic HTML

5 n Discuss the advantages and disadvantages of incorporating tables in a webpage design Define and modify table structures for the presentation of tabular informatio Create accessible tables using standard table elements and attributes Chapter 5.1 & 5.2 FOWD Essential Curriculum Guide: Activity 5.1 Planning and Creating Tables on Web Pages Construct charts/tables/graphs using functions and data Working with Graphic Objects Conduct a competitive analysi Research and incorporate web color usage principles in a webpage Describe usage guidelines (e.g., format types, size, relevance) for integrating Compare and contrast standard image formats used in webpage design. Choice: Adobe Illustrator CS6 Revealed Adobe Photoshop CS6 Revealed Online Resources/Activities fo Adobe Fireworks, Adobe Illustrator, or Adobe Photoshop Use image-editing software to enhance website designs with simple graphic FOWD Essential Curriculum Guide: Activity 6.4 Bitmap Retouching Tools and Activity 6.5 Project: Pizza Parlor with Competitive Analys Semester 1 Exam 5 Course Semester Review Semester 1 Total 90 Planning and Producing a Website Define information architecture Discuss the importance of information architecture to web design and development Conduct a client interview to determine the business purpose and needs Identify stages in the web design process and describe the activities comprisi each stage Shelly Cashman Series: Adobe Dreamweaver CS6 Comprehensive Introductory Chapter

6 n Define the site structure by creating a content map, storyboard, and associated wireframes Create a global site map Describe accessibility and its implications on web design Define common markup languages and their usage Examine emerging and new markup languages Determine browser support and appropriate usage of markup languages (existing and emerging) Compare and contrast common authoring tools Define e-commerce types and usage Describe database connectivity relative to website Identify technologies to enhance user experienc Explore domain name selection principles Identify process to registering a domain name Compare and contrast hosting providers, features, and selection criteri Describe the various means for uploading website files (e.g., FTP, web-based tools, etc.) Identify issues related to website maintenanc Demonstrate knowledge of accessibility problems and solutions Locate, comprehend and evaluate key elements of oral and written informatio Draft, revise, and edit written documentssing correct grammar, punctuation and vocabulary Present information formally and informalf nor epecific purpoeees and audiences Discuss the role of creataitf in conetructna ecientfic queetons, methods and explanations Formulate scientficallly investigable questions, construct investigations, col and evaluate data, and develop scientfic recoccendatone aaeed on findinae. Online Resources: htp://cmairscreate.com/ design.html and pdfs/project-plan.pdf Teacher-created activities fo Global Site Maps and Accessibility Creating a Website Discuss the legal and ethical issues related to web design Identify common DOCTYPES (e.g., Strict, Transitional and Frameset) and describ Shelly Cashman Series: Adobe Dreamweaver CS6

7 with Dreamweaver n their appropriate use Create basic webpage structures using common markup elements and attributes Incorporate list structures in a webpage (i.e., ordered, unordered, definition, nested) Incorporate link structures in a webpage (i.e., external, internal, ) Troubleshoot markup language syntax, elements, and links Define CSS and describe its importance in web design Compare and contrast existing and emerging CSS versions Describe website performance metrics (e.g., visits, tim-on-page, tim-on-site, et al) and discuss their design implications Explore common website analytic tools Use GUI (Graphical User Interface) web authoring software to create a mulpage informational website Comprehensive Chapter 1 Teacher-created reading activity on Copyright Laws (resources: Cmairscreate Website, DW Chapter 8, or search online) Student online research and application o Website Performance Metric Tools Templates and CSS in Dreamweaver Determine browser support and appropriate usage of CSS (existing and emerging versions) Explain "document flow" and describe its implications on web design Recognize and use element selectors, ID selectors, class selectors, pseudo-class selectors, and descendant selectors Explain how inheritance and specificity affect CSS rule conflicts Use inline styles, embedded style sheets, and external style sheets Use the link and import methods to connect to an external style sheet Use CSS shorthand techniques to create efficient and concise style sheets Apply basic CSS propertiep includina aackaroundp aorderp clearp colorp floatp nontp height, line-height, list-style, margin, overflow, padding, position, tex-align, text-indent, width, z-index, padding, et al Demonstrate efficient, consistent web site development practice (use of templates, snippets, etc). Shelly Cashman Series: Adobe Dreamweaver CS6 Comprehensive Chapter 2

8 Adding Graphics and Links to Websites with Dreamweaver Incorporating Interactivity wit Dreamweaver n Research and incorporate web color usage principles in a webpage Describe usage guidelines (e.g., format types, size, relevance) for integrating Compare and contrast standard image formats used in webpage design Incorporate graphics into a webpage design Create and incorporate image maps in a webpage Identify technologies to enhance user experience Examine indexing, page ranking, basic Search Engine Optimization technique Enhance the website using client-side technologies (rollovers, check plug-ins, pop-up windows) Demonstrate knowledge of arithmetic operation Analyze and apply data and measurements to solve problems and interpret documents Describe accessibility and its implications on web design Describe how tables are used in web design Discuss the advantages and disadvantages of incorporating tables in a webpage design Define and modify table structures for the presentation of tabular informatio Create accessible tables using standard table elements and attributes Create an accessible form using common elements, including form, fieldset, legend, textarea, select, option, button, and input (radio, checkbox, submit reset, image, password, hidden) Describe and diagram the relationship between XHTML forms and serve-side technologies Compare and contrast the GET and POST methods for forms handling Define form validation and describe how it is accomplishe List popular server-side technologies often used to process content sent from XHTML forms Use labels with form elements Connect a XHTML form to a server-side script for processing Use CSS to style tables (e.g., borders, width, spacing, alignment, background). Shelly Cashman Series: Adobe Dreamweaver CS6 Comprehensive Chapter 3 Teacher-created activities fo <meta> tags and Image Maps. Shelly Cashman Series: Adobe Dreamweaver CS6 Comprehensive Chapters 4 and 6 Teacher-created activity that incorporates Validation ools within Dreamweaver (resources: DW Chapter 8 or search online)

9 n Use CSS to enhance the appearance and usability of an XHTML form Compare and contrast client-side and server-side technologies Describe database connectivity relative to website Use webpage validation tools Demonstrate knowledge of accessibility problems and solutions Construct charts/tables/graphs using functions and data Dreamweaver Industry Certficaton Demonstrate proficiency in website planning and the design process Develop markup language structures Create basic webpages Incorporate images and graphical formatting on a webpag 29.0 Create a basic table structure Incorporate form structures in a webpage 31.0 Describe frame structures and their usage Use Cascading Style Sheets (CSS) Examine web design technologies and techniques Describe the process for publishing a website 35.0 Describe how website performance is monitored and analyzed Create an informational website 74.0 Demonstrate language arts knowledge and skills Demonstrate mathematics knowledge and skill 76.0 Demonstrate science knowledge and skills Adobe Certfied Aeeociate program Preparation materials Web Communication with Adobe Dreamweaver CS6 Professional education/resources certficate-programs/ preparatio-materials.html Certiprep online softwar practice testmaterials Certiport Online Testin Industry Certficaton teet

10 Graphics on the Web n Discuss the legal and ethical issues related to web design Research and incorporate web color usage principles in a webpage Describe usage guidelines (e.g., format types, size, relevance) for integrating Compare and contrast standard image formats used in webpage design Incorporate graphics into a webpage design Optimize images and graphics for ue in a webpage Use image-editing software to enhance website designs with simple graphic Use animation software to enhance website design Choice: Adobe Illustrator CS6 Revealed Adobe Photoshop CS6 Revealed Online Resources/Activiti for Adobe Fireworks, Adobe Illustrator, or Adobe Photoshop Semester 2 Exam 4 Course Semester Review Semester 2 Total 90