Survey
* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project
Introduction to Web Design Using Microsoft® Expression® Studio Introduction to Web Design Using Microsoft Expression Copyright Information in this document, including URL and other Internet website references, is subject to change without notice. Unless otherwise noted, the example companies, organizations, products, domain names, e-mail addresses, logos, people, places, and events depicted herein are fictitious, and no association with any real company, organization, product, domain name, e-mail address, logo, person, place, or event is intended or should be inferred. Complying with all applicable copyright laws is the responsibility of the user. Without limiting the rights under copyright, no part of this document may be reproduced, stored in or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or otherwise), or for any purpose, without the express written permission of Microsoft Corporation. The names of manufacturers, products, or URLs are provided for informational purposes only and Microsoft makes no representations and warranties, either expressed, implied, or statutory, regarding these manufacturers or the use of the products with any Microsoft technologies. The inclusion of a manufacturer or product does not imply endorsement of Microsoft of the manufacturer or product. Links are provided to third party sites. Such sites are not under the control of Microsoft and Microsoft is not responsible for the contents of any linked site or any link contained in a linked site, or any changes or updates to such sites. Microsoft is not responsible for webcasting or any other form of transmission received from any linked site. Microsoft is providing these links to you only as a convenience, and the inclusion of any link does not imply endorsement of Microsoft of the site or the products contained therein. Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering subject matter in this document. Except as expressly provided in any written license agreement from Microsoft, the furnishing of this document does not give you any license to these patents, trademarks, copyrights, or other intellectual property. 2008 Microsoft Corporation. All rights reserved. © The names of actual companies and products mentioned herein may be the trademarks of their respective owners. Introduction to Web Design Using Microsoft Expression Preface Welcome to an Introduction to Web Design Using Microsoft Expression! We are proud to offer this complete, standards-based one semester course on Web Design. Our primary objective is to provide educators and students with an extensive collection of creative teaching and learning materials that span a thorough scope of Web design topics to provide meaningful, real-world learning experiences. This curriculum and collection of teaching and learning materials focuses on such topics as beginning HTML, Web standards and accessibility, communication skills and strategies, creation of Web media, and the planning, development, publishing, and evaluation of Web sites. The project-based activities including teamwork strategies that reflect real-world workskills and the activities performed by professional Web designers. We hope you and your students enjoy using these teacher-created learning materials and find them valuable in meeting your learning objectives. By providing students with opportunities to be creators, rather than only consumers, of technology, we aim to motivate the next generation to explore and develop their talents. Please tell us about your experiences and offer suggestions. We are eager to hear from you! [email protected] Background This curriculum project is an extension and enrichment of a short Expression Web curriculum unit that was developed for United States high schools. The need for additional and more extensive materials was identified in the 2 pilot projects conducted in the fall of 2007 and spring of 2008. The following were findings from the pilots: 75% of for United States high schools offer a Web Design/Development class (2007) 71% of the educators involved in the Expression Web tutorial pilot reported that it was valuable teaching tool and they would use it again. The remaining 29% strongly agreed with that statement, yielding a full 100% accord amongst pilot educators that the Expression Web tutorial was a valuable and useful teaching resource. 64% of students reported that, after participating in the Expression Web tutorial, they would like to build another Web site. The Expression Web Tutorial, posted February 6, 2008 to the Microsoft Faculty Connection ARC, was the third most often downloaded item from the time of its posting until June 30, 2008. . Additional Information This course is appropriate for advanced middle school, high school, and non-technical higher-education students. It is designed to appeal to a broad range of students who are interested in learning how to create content for the Web and improve their technical skills using the same software that professional Web designers use. Introduction to Web Design Using Microsoft Expression In institutions that have advanced technical education incorporated into their core curriculum, these materials may be used with younger students. The shorter Expression Web tutorial was also very popular with adults who wanted to learn on their own. This Web design course presents technology in a fun and engaging way. A beta-testing cycle with educators in a wide variety of schools was conducted in the fall of 2008. Based on the feedback from the students who worked with our shorter curriculum unit, we know that having successful experiences using Microsoft technology encourages students to take additional technology courses – including programming and other advanced computer science and information technology (IT) courses. The curriculum is written using English that is accessible to non-native speakers of English. The primary software used will be Expression Web, with some experience using Expression Design. These teaching and learning materials are modular in nature so that educators can modify the curriculum to meet their unique classroom needs. Topic Organization MODULE 1: THE HISTORY AND THE FUTURE OF THE WEB 1 WEEK Module 1 explores the past and future of Web technologies and the structure of the Web. The rights and responsibilities surrounding intellectual property rights in an electronic world are emphasized. MODULE 2: HTML BASICS 2 WEEKS Module 2 introduces basic HTML tags and cascading style sheets (CSS) through projects designed to experiment with page design and introduces the concepts of Web standards and accessibility. MODULE 3: DESIGNING FOR COMMUNICATION 2 WEEKS Module 3 explores human communication and the unique challenges that electronic modes of communication present for effective transmission of ideas. HTML projects using the code view option in Expression Web focus on the use of design principles to communicate successfully to a Web audience. MODULE 4: WORKING WITH IMAGES 3 WEEKS Module 4 uses Microsoft Expression Design to create images (that can be used in Web projects in Module 5). Image concepts related to scanning, digital photography, and image manipulation techniques are included. MODULE 5: BEYOND THE BASICS WITH EXPRESSION WEB 2 WEEKS Module 5 introduces students to the Expression Web WYSIWYG, drag and drop environment and provides tutorials to guide them in creating a Web site. MODULE 6: THE DESIGN PROCESS 3 WEEKS Module 6 explores Web technology careers and simulates the design planning process of Web design professionals. Team collaboration and customer interactions are emphasized as students plan a Web site project for an organization. (The project planned in this module is created in Module 7.) MODULE 7 THE PRODUCTION PROCESS 3 WEEKS Module 7 guides students in the production of the Web site that was planned and designed in Module 6. This module is lab intensive, with the educator serving primarily as a guide and supervisor. (The planning for this module occurs in Module 6.) MODULE 8 WEB PUBLISHING AND MAINTENANCE 2 WEEKS Introduction to Web Design Using Microsoft Expression Module 8 establishes processes and techniques for selecting hosting services, evaluating the effectiveness and usability of Web sites, and providing maintenance over time. Personal reflection on the complete Web design process, and the skills and characteristics valuable for Web technology careers is encouraged. (The project produced in Module 7 is referenced within this module.) Note: A complete scope and sequence, as well as the alignment of standards, can be found at the end of this document. Audience This curriculum is designed for middle and secondary students or beginning-level post-secondary students. The learning strategies are differentiated by scaffolding levels of goals and objectives and can easily be adjusted to fit a wide range of learning levels by pacing and by adding or eliminating sections and activities. Instructors will find elements and activities included that can be used to raise the level of learning by adding refinement and sophistication to projects. The prerequisites for the learning in this curriculum include the skills most students have already achieved by surfing the Web, using Windows applications, and handling files for opening, saving, and moving. Standards-based curriculum The curriculum is based upon the ISTE's National Educational Technology Standards for Students (NETS-S) www.iste.org/AM/Template.cfm?Section=NETS 21st Century Skills www.21stcenturyskills.org/index.php?option=com_content&task=view&id=254&Itemid=120 ACM Model Curriculum for K-12 Computer Science http://csta.acm.org/Curriculum/sub/ACMK12CSModel.html Module 1 2 3 4 5 ISTE NETS-S 21st Century Skills 1 Creativity and Innovation (a) 4 Critical Thinking, Problem Solving, Decision Making (c) 6 Technology Operations and Concepts (ad) 1 Creativity and Innovation (c-d) 3 Research and Information Fluency (a, b, d) 5 Digital citizenship (a-d) 6 Technology Operations and Concepts (ad) 1 Creativity and Innovation (a, c) 4 Critical Thinking, Problem Solving, Decision Making (a-d) Critical Thinking and Problem Solving Skills Communication and Collaboration Skills Information Literacy Media Literacy ICT Literacy Information Literacy 1 Creativity and Innovation (a-b) 2 Communication and Collaboration (a, b, d) 3 Research and Information Fluency (b, c) 4 Critical Thinking, Problem Solving, Decision Making (a-d) 6 Technology Operations and Concepts (ad) 6 Technology Operations and Concepts (a- Creativity and Innovation Skills Critical Thinking and Problem Solving Skills Communication and Collaboration Skills Information Literacy Media Literacy Creativity and Innovation Skills Critical Thinking and Problem Solving Skills Communication and Collaboration Skills Information Literacy Media Literacy ICT Literacy Critical Thinking and Problem Solving Skills Introduction to Web Design Using Microsoft Expression d) 6 7 8 1 Creativity and Innovation (a-d) 2 Communication and Collaboration (a, b, d) 3 Research and Information Fluency (a-d) 4 Critical Thinking, Problem Solving, Decision Making (a-d) 5 Digital citizenship (a-b) 1 Creativity and Innovation (a-c) 2 Communication and Collaboration (a, b, d) 3 Research and Information Fluency (a-d) 4 Critical Thinking, Problem Solving, Decision Making (a-d) 5 Digital citizenship (a-d) 6 Technology Operations and Concepts (ad) 1 Creativity and Innovation (c) 2 Communication and Collaboration (a, b, d) 3 Research and Information Fluency (a-d) 4 Critical Thinking, Problem Solving, Decision Making (a-d) 5 Digital citizenship (a-d) 6 Technology Operations and Concepts (ad) Communication and Collaboration Skills Information Literacy Media Literacy ICT Literacy Creativity and Innovation Skills Critical Thinking and Problem Solving Skills Communication and Collaboration Skills Information Literacy Media Literacy ICT Literacy Creativity and Innovation Skills Critical Thinking and Problem Solving Skills Communication and Collaboration Skills Information Literacy Media Literacy ICT Literacy Critical Thinking and Problem Solving Skills Communication and Collaboration Skills Information Literacy Media Literacy ICT Literacy Life and Career Skills Note: A complete alignment of standards to activities can be found at the end of this document and within the lesson plans of each module. General goals and objectives 1. Identify capabilities and limitations of contemporary and emerging technology resources and assess the potential of these systems and services to address personal, lifelong learning, and workplace needs. 2. Make informed choices among technology systems, resources, and services. 3. Demonstrate/advocate for legal and ethical behaviors regarding technology and information. 4. Use technology tools and resources for managing and communicating information. 5. Apply design and communication principles to Web projects. 6. Routinely and efficiently use online information resources to meet needs for collaboration, research, publication, communication, and productivity. 7. Select and apply technology tools for research, information analysis, problem solving, and decision making. 8. Collaborate with peers and experts to compile, synthesize, produce, and disseminate information through Web technology. 9. Demonstrate team and leadership skills. Introduction to Web Design Using Microsoft Expression 10. Explore careers in Web technologies. Software system requirements Microsoft Expression Web and Expression Design are the tools used to produce the projects in this curriculum in Modules 4, 5, 7, and 8. Systems: Windows Vista; Windows XP Service Pack 2 PC with Pentium 700 or faster processor 512 MB of RAM or more 1.5 GB of available hard disk space; a portion this disk space will be freed after installation (The original download package is removed from the hard drive.) CD-ROM or DVD-ROM drive 1024 × 768 or higher resolution monitor Internet functionality requires Internet access The projects in this curriculum are built with only HTML and CSS technologies (not ASPX) Expression Web sites built with ASPX pages require an IIS server compatible with ASPX Web files in order to be posted on the Internet Curriculum Resources The majority of resources included in this curriculum are Microsoft Word documents. Educators are welcome to customize the resources, such as worksheets, tests, and rubrics, to fit the unique needs of their students and classroom. Presentations are Microsoft PowerPoint documents. The tutorials in this curriculum require the use of image files. Specific directions for saving and accessing those included files are detailed within each tutorial document. Curriculum Folders and Contents The teacher and student materials are contained within a folder for each Module and divided within that folder by day of intended use. Teacher files begin with a ‘T.’ and student files begin with an ‘S.’ files are additionally identified by the Module number, the number of the day or days for intended use, and an identifier of type. Teacher files: T.module#.day(s)#.type_additional descriptor Student files: S.module#.day(s)#.type _additional descriptor File Names and Descriptions Teacher Materials T.1.Timeline A day-by-day Timeline overview of files needed for each lesson in Module 1. T.3.Text Introduction to Web Design using Microsoft Expression Studio – a Textbook of eight chapters, corresponding to the eight learning Modules. T.1.3.LP Lesson Plan for Module 1 day 3. T.2.3.PP A PowerPoint presentation for Module 2 day 3. T.3.7_8_9.R_Principles A Rubric for Module 3 to be used on days 7-9 on the topic of design principles. Introduction to Web Design Using Microsoft Expression T.4.15.TB A Test Bank for Module 4 assessment (a version without answers is also included) to be used on day 15. T.3.Ext 1.LP Some Modules have a folder Extended enrichment activities. These materials can be used as appropriate for more advanced student learning. MasterStyling.wmv Some Modules have short video training movies. They are identified by the file extension .wmv. Student Resources S.3.2_4_6.Tutorial A step-by-step Tutorial for learning Expression Studio to be used on days 2, 4, & 6. S.4.3.WS_Banners A student Work Sheet on the topic of banners for Module 4 to be used on day 3. A key is also included. Pedagogical Features While this curriculum was designed to be a sequential 18-week unit of study, its modular design offers educators flexibility in selecting modules to fit existing curricula and school schedules. Please refer to the Topic List above to note which modules can be “stand-alone” units of study and those that have prerequisites and connections to other modules. Within each Module, you will find a Module Timeline document listing the lesson plans by day, the topic of each lesson plan, and the included documents required for that lesson. This should be the first document opened in each module. Timelines Within each Module, you will find a Module Timeline document listing the lesson plans by day, the topic of each lesson plan, and the included documents required for that lesson. This should be the first document opened in each module. Lesson plans Detailed daily lesson plans are provided to guide classroom activities. Each contains the standards being addressed by the lesson, a description of the lesson, software needs, guiding questions, student-centered learning objectives, teaching strategies, additional resources and Web links, documents needed for the lesson, assessment strategies, and suggested best practices. Student activities include essential vocabulary lists, lesson tasks, and enrichment. The lessons include an abundance of learning activities designed to meet the many learning styles of your students. Please select those activities that best meet your students’ needs, your classroom setting, and your time allocations. Presentations All presentations are PowerPoint files that are coordinated with some of the daily lesson plans. They can serve as resources to introduce concepts before activities and also as review tools. Supporting Textbook The supporting e-textbook contains eight chapters that correspond to the eight curriculum modules. The text is intended as a resource for both the educator and student to support the teaching and learning in the lesson plans. The book chapters contain vocabulary lists, review questions and activities. Tutorials Introduction to Web Design Using Microsoft Expression Several modules include step-by-step tutorials. These tutorials will guide students in learning Expression Web and Expression Design and producing the projects introduced in the lesson plans. Assessment Tools A selection of rubrics, quizzes, and test banks are provided for each module. Two versions of the quizzes and tests – one with answers and one without - are included. Please use the test items to construct assessment tools that are customized for your teaching. Web Resources Web resources to support or enrich the learning activities are listed within the lesson plans of each module. While these resources were available at the time of publishing, we cannot guarantee that they will remain available indefinitely. Please verify their availability before use them with students. Best Practices Lesson plans include suggested Best Practices for classroom management and lesson delivery. These have been suggested by educators who have taught Web design in a lab situation and understand the unique challenges that a lab environment presents. You will find interesting strategies for helping students to organize their learning and to build a cooperative learning environment. Acknowledgments Special thanks and appreciation are due to the many people who have contributed to the development and writing of this curriculum and the collection of teaching and learning materials. Their insights into the learning process, experiences in the classroom, and in-depth knowledge of the subject, combined with a dedication to providing fellow educators and students with quality materials for learning in a technology-rich world, have resulted in a quality teaching and learning package. About the Creators Aseem Badshah, Educational Technology Consultant Aseem spent two years founding an education web startup company that provides services to high school students. He is currently a consultant for K-12 Education Programs at Microsoft and a student at the University of Washington - Foster School of Business. Tanya Baxter, High School Technology Teacher Tanya has taught high school computer applications, computer literacy, and Web design for 20 years in the West Chester Area School District, West Chester, Pennsylvania. Susan Boone, Math/Technology Applications Teacher Susan currently teaches Web mastering at Westside High School in the Houston Independent School District where she has taught for 7 years. She also taught algebra for 9 years at St. Agnes Academy, and was a middle school math and science teacher for 14 years. Dave Burkhart, Computer and Multimedia Teacher Dave has taught various subject areas within the middle school setting in Zanesville, Ohio. Currently he is team-teaching with language arts teachers in grades 6 - 8 to integrate technology into the curriculum and serves as the K - 8 Representative to the Board of Directors for Computer Science Teachers Association. Debbie Carter, Computer Science and Math Teacher Debbie has taught high school computer science for 15 years, and she currently teaches at Roxbury High School in northern New Jersey. She serves on the CSTA Board of Directors, where she chairs the Introduction to Web Design Using Microsoft Expression Professional Development Committee. She is also a College Board consultant for AP Computer Science and as an AP CS Exam reader and leader. Elizabeth Clarke, Technology Coach Elizabeth has been a Technology Coach supporting K-5 students and staff at Wilson Elementary School, Janesville, Wisconsin for 5 years. She also teaches graduate level courses in media and technology literacy for Cardinal Stritch University. Myra Deister, Computer Science and Mathematics Teacher Myra teaches computer science, computer applications, and mathematics at Sunny Hills High School, Fullerton Joint Union High School District in Fullerton, California. She has taught junior high through community college level as well as adult education courses and has conducted workshops and presented on technology topics. Myra is serving as the 9-12 Representative on the board of the Computer Science Teachers Association. Carla Faini, Ph.D., Academic Programs Manager, Microsoft Corporation Carla focuses on building partnerships with K-12 educators, teachers’ professional associations, government and non-profit organizations and university faculty to engage more K-12 students in pursuing science, technology, engineering and math (STEM) studies and careers. She has experience as an educator, founder and director of non-profit organizations and as a strategic planning, community relations and fundraising consultant. Carla has taught at Seattle University and Stanford University. David Jacobus, Retired United States Marine Dave taught high school computer science and mathematics for 10 years in California. He currently works for the Seattle-based company, Avitiva, and works in Temecula, California. Pat Phillips, Educational Technology Consultant Pat taught high school computer science and Web design for 20 years in Janesville, Wisconsin. Currently, she is a director of Expression Web for High School curriculum projects for Microsoft and editor of the Computer Science Teachers Association (CSTA) Voice newsletter. Rita Woodfill, Computer Science Teacher Rita has taught computer science for 22 years in the Northside ISD, San Antonio, Texas. She currently teaches at Sandra Day O'Connor High School in San Antonio. Web Resources The complete curriculum with teaching and learning materials is available at: www.microsoft.com/education/facultyconnection/precollegiate Additional Expression Web learning resources are available at: http://expression.microsoft.com/enus/cc197140.aspx Additional Expression Design learning resources are available at: http://expression.microsoft.com/enus/cc136532.aspx Introduction to Web Design Using Microsoft Expression The Scope and Sequence with Standards Alignment The following pages contain the topic list and the standards addressed by the activities detailed within the lesson plans of each of the eight modules. MODULE 1 1) 2) 3) 4) THE HISTORY AND THE FUTURE OF THE WEB The Evolution of Web Design/History a) How people viewed the Web and how they built Web sites with that view Internet Structure a) Technology/coordination b) Organizations Intellectual Property/copyright a) Developing effective Web use skills b) Evaluating information and sources c) Copyright Emerging technologies a) E-commerce b) New technologies c) New services Learning Objectives 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. Explore history and impact of Web technologies Locate Web-based resources and reference materials Learn research techniques to evaluate the authenticity of Web resources (internet safety) Demonstrate ethical behavior in using and producing Web resources Evaluate existing Web sites based on their accessibility, and usability Explore business applications of Web technology Investigate entrepreneurial (e-commerce) opportunities using Web technologies Explore Web 2.0 functionality Investigate new Web technologies Explore personal and professional communication/collaboration through Web technologies. NETS-S www.iste.org/AM/Template.cfm?Section=NETS 1. Creativity and Innovation Students demonstrate creative thinking, construct knowledge, and develop innovative products and processes using technology. Students: c. use models and simulations to explore complex systems and issues. Introduction to Web Design Using Microsoft Expression d. 3. Research and Information Fluency Students apply digital tools to gather, evaluate, and use information. Students: a. b. c. 5. plan strategies to guide inquiry. locate, organize, analyze, evaluate, synthesize, and ethically use information from a variety of sources and media. evaluate and select information sources and digital tools based on the appropriateness to specific tasks. Digital Citizenship Students understand human, cultural, and societal issues related to technology and practice legal and ethical behavior. Students: a. b. c. d. 6. identify trends and forecast possibilities. advocate and practice safe, legal, and responsible use of information and technology. exhibit a positive attitude toward using technology that supports collaboration, learning, and productivity. demonstrate personal responsibility for lifelong learning. exhibit leadership for digital citizenship. Technology Operations and Concepts Students demonstrate a sound understanding of technology concepts, systems, and operations. Students: a. b. c. understand and use technology systems. select and use applications effectively and productively. troubleshoot systems and applications. d. transfer current knowledge to learning of new technologies. 21st Century Skills www.21stcenturyskills.org/index.php?option=com_content&task=view&id=254&It emid=120 Information, Media and Technology Skills INFORMATION LITERACY Accessing information efficiently and effectively, evaluating information critically and competently and using information accurately and creatively for the issue or problem at hand Possessing a fundamental understanding of the ethical/legal issues surrounding the access and use of information Introduction to Web Design Using Microsoft Expression MODULE2 1) 2) 3) 4) HTML BASICS Web page structure Basic page layout features a) Block and inline formatting Tags and attributes a) Headline Styles b) Color c) Images d) Lists and tables e) Hyperlinks f) Troubleshooting and debugging Introduction to CSS Standards and Accessibility a) W3C - World Wide Web Consortium Learning Objectives 1. 2. 3. 4. 5. Explore the code that creates Web pages Create pages with images, links, and other controls Investigate the development of Web standards Apply standards to simple projects Explore CSS and other Web design/development concepts NETS-S www.iste.org/AM/Template.cfm?Section=NETS 1. Creativity and Innovation Students demonstrate creative thinking, construct knowledge, and develop innovative products and processes using technology. Students: a. 4. Critical Thinking, Problem Solving, and Decision Making Students use critical thinking skills to plan and conduct research, manage projects, solve problems, and make informed decisions using appropriate digital tools and resources. Students: c. 6. apply existing knowledge to generate new ideas, products, or processes. collect and analyze data to identify solutions and/or make informed decisions. Technology Operations and Concepts Students demonstrate a sound understanding of technology concepts, systems, and Introduction to Web Design Using Microsoft Expression operations. Students: a. b. c. d. understand and use technology systems. select and use applications effectively and productively. troubleshoot systems and applications. transfer current knowledge to learning of new technologies. 21st Century Skills www.21stcenturyskills.org/index.php?option=com_content&task=view&id=254&It emid=120 Learning and Innovation Skills CRITICAL THINKING AND PROBLEM SOLVING SKILLS Understanding the interconnections among systems Identifying and asking significant questions that clarify various points of view and lead to better solutions Framing, analyzing and synthesizing information in order to solve problems and answer questions COMMUNICATION AND COLLABORATION SKILLS Articulating thoughts and ideas clearly and effectively through speaking and writing Information, Media and Technology Skills INFORMATION LITERACY Accessing information efficiently and effectively, evaluating information critically and competently and using information accurately and creatively for the issue or problem at hand MEDIA LITERACY Understanding how media messages are constructed, for what purposes and using which tools, characteristics and conventions. ICT LITERACY Using digital technology, communication tools and/or networks appropriately to access, manage, integrate, evaluate, and create information in order to function in a knowledge economy Using technology as a tool to research, organize, evaluate and communicate information, and the possession of a fundamental understanding of the ethical/legal issues surrounding the access and use of information Introduction to Web Design Using Microsoft Expression MODULE 3 1. 2. 3. 4. DESIGNING FOR COMMUNICATION Design Elements a) Color b) Shape & Line c) Texture d) Typography Design Principals e) Movement f) Balance and proximity g) Repetition and Unity The following extended topics offer enrichment beyond the topics listed above. Use as appropriate Vision h) Visible Spectrum i) Human Visual System (Retina, Rods, Cones) j) Color Sensitivity k) Distribution of photo-pigments l) Focus m) Color Deficiency as it relates to accessibility Cognition n) The Model Human Processor o) Memory (Long-term/Working) p) Image Store (Visual, Auditory) q) Perceptual, Motor, Cognitive Processor r) Fitt’s Law s) Perception Learning Objectives 1. 2. 3. 4. 5. 6. Identify the basic elements and principles of design Evaluate samples based on design principles Apply design principles for effective communication for target audiences Evaluate Web pages based on their design Evaluate Web sites on the effectiveness of communication Apply Web design elements and principles Web page design NETS-S www.iste.org/AM/Template.cfm?Section=NETS 1. Creativity and Innovation Students demonstrate creative thinking, construct knowledge, and develop innovative products and processes using technology. Students: a. c. 4. apply existing knowledge to generate new ideas, products, or processes. use models and simulations to explore complex systems and issues. Critical Thinking, Problem Solving, and Decision Making Introduction to Web Design Using Microsoft Expression Students use critical thinking skills to plan and conduct research, manage projects, solve problems, and make informed decisions using appropriate digital tools and resources. Students: a. b. c. d. identify and define authentic problems and significant questions for investigation. plan and manage activities to develop a solution or complete a project. collect and analyze data to identify solutions and/or make informed decisions. use multiple processes and diverse perspectives to explore alternative solutions. 21st Century Skills www.21stcenturyskills.org/index.php?option=com_content&task=view&id=254&It emid=120 Learning and Innovation Skills CREATIVITY AND INNOVATION SKILLS Demonstrating originality and inventiveness in work Developing, implementing and communicating new ideas to others CRITICAL THINKING AND PROBLEM SOLVING SKILLS Exercising sound reasoning in understanding Making complex choices and decisions Understanding the interconnections among systems Framing, analyzing and synthesizing information in order to solve problems and answer questions COMMUNICATION AND COLLABORATION SKILLS Articulating thoughts and ideas clearly and effectively through speaking and writing Information, Media and Technology Skills INFORMATION LITERACY Accessing information efficiently and effectively, evaluating information critically and competently and using information accurately and creatively for the issue or problem at hand MEDIA LITERACY Understanding how media messages are constructed, for what purposes and using which tools, characteristics and conventions. Examining how individuals interpret messages differently, how values and points of view are included or excluded and how media can influence beliefs and behaviors. Introduction to Web Design Using Microsoft Expression MODULE 4 1) 2) 3) 4) 5) 6) 7) WORKING WITH IMAGES Using images in Web Design a) Banners, logos, Buttons b) Roll-overs c) Image slicing and image maps File Types and Uses a) JIF, JPEG, PNG Scanning a) Scanning Modes i) Line Art ii) Halftones iii) Color/True Color/Grayscale/Spot Color/Black & White iv) Palettes (Web, System, Optimized) Digital Photography a) Techniques and Concepts Other media (movie and audio files) Creating and customizing images with Expression Design a) Tools b) Layers and Grouping c) Transform (Reflect, Rotate, Gradient , Fill) d) Appearance Menu e) Exporting images Copyright Learning Objectives 1. Obtaining graphic images from a variety of sources 2. Examine file types and select for design needs 3. Select and modify graphic images to meet communication needs 4. Create graphic elements (with Microsoft Expression Design) using a variety of techniques 5. Explore the communication impact of other Web media 6. Reinforce copyright concepts NETS-S www.iste.org/AM/Template.cfm?Section=NETS 1. Creativity and Innovation Students demonstrate creative thinking, construct knowledge, and develop innovative products and processes using technology. Students: a. b. apply existing knowledge to generate new ideas, products, or processes. create original works as a means of personal or group expression. Introduction to Web Design Using Microsoft Expression 2. Communication and Collaboration Students use digital media and environments to communicate and work collaboratively, including at a distance, to support individual learning and contribute to the learning of others. Students: a. interact, collaborate, and publish with peers, experts, or others employing a variety of digital environments and media. communicate information and ideas effectively to multiple audiences using a variety of media and formats. contribute to project teams to produce original works or solve problems. b. d. 3. Research and Information Fluency Students apply digital tools to gather, evaluate, and use information. Students: b. locate, organize, analyze, evaluate, synthesize, and ethically use information from a variety of sources and media. evaluate and select information sources and digital tools based on the appropriateness to specific tasks. c. 4. Critical Thinking, Problem Solving, and Decision Making Students use critical thinking skills to plan and conduct research, manage projects, solve problems, and make informed decisions using appropriate digital tools and resources. Students: a. identify and define authentic problems and significant questions for investigation. plan and manage activities to develop a solution or complete a project. collect and analyze data to identify solutions and/or make informed decisions. use multiple processes and diverse perspectives to explore alternative solutions. b. c. d. 6. Technology Operations and Concepts Students demonstrate a sound understanding of technology concepts, systems, and operations. Students: a. b. c. d. understand and use technology systems. select and use applications effectively and productively. troubleshoot systems and applications. transfer current knowledge to learning of new technologies. 21st Century Skills www.21stcenturyskills.org/index.php?option=com_content&task=view&id=254&It emid=120 Learning and Innovation Skills CREATIVITY AND INNOVATION SKILLS Demonstrating originality and inventiveness in work Introduction to Web Design Using Microsoft Expression Developing, implementing and communicating new ideas to others Being open and responsive to new and diverse perspectives Acting on creative ideas to make a tangible and useful contribution to the domain in which the innovation occurs CRITICAL THINKING AND PROBLEM SOLVING SKILLS Exercising sound reasoning in understanding Making complex choices and decisions Understanding the interconnections among systems Framing, analyzing and synthesizing information in order to solve problems and answer questions COMMUNICATION AND COLLABORATION SKILLS Articulating thoughts and ideas clearly and effectively through speaking and writing Demonstrating ability to work effectively with diverse teams Exercising flexibility and willingness to be helpful in making necessary compromises to accomplish a common goal Assuming shared responsibility for collaborative work Information, Media and Technology Skills INFORMATION LITERACY Accessing information efficiently and effectively, evaluating information critically and competently and using information accurately and creatively for the issue or problem at hand Possessing a fundamental understanding of the ethical/legal issues surrounding the access and use of information MEDIA LITERACY Understanding how media messages are constructed, for what purposes and using which tools, characteristics and conventions. Examining how individuals interpret messages differently, how values and points of view are included or excluded and how media can influence beliefs and behaviors. Possessing a fundamental understanding of the ethical/legal issues surrounding the access and use of information ICT LITERACY Using digital technology, communication tools and/or networks appropriately to access, manage, integrate, evaluate, and create information in order to function in a knowledge economy Using technology as a tool to research, organize, evaluate and communicate information, and the possession of a fundamental understanding of the ethical/legal issues surrounding the access and use of information Introduction to Web Design Using Microsoft Expression MODULE 5 1) BEYOND THE BASICS WITH EXPRESSION WEB The Expression Web environment a) Workspace, tools, task panes, views b) New site/pages c) File Management d) Layers e) Text manipulation f) Using graphics and multimedia (inserting, formatting) g) Cascading Style Sheets (CSS) h) Linking and Navigation Controls i) Trouble shooting and de-bugging j) Interactive Navigation, Buttons, screen tips k) Dynamic Web Templates and Master Pages l) ASPX m) Using Behaviors n) Client-side scripting o) Web forms p) Data access features Learning Objectives 1. 2. Explore modern Web design/development concepts Develop technical skills using Expression Web NETS-S www.iste.org/AM/Template.cfm?Section=NETS 6. Technology Operations and Concepts Students demonstrate a sound understanding of technology concepts, systems, and operations. Students: a. b. c. d. understand and use technology systems. select and use applications effectively and productively. troubleshoot systems and applications. transfer current knowledge to learning of new technologies. 21st Century Skills www.21stcenturyskills.org/index.php?option=com_content&task=view&id=254&It emid=120 Learning and Innovation Skills CRITICAL THINKING AND PROBLEM SOLVING SKILLS Understanding the interconnections among systems Framing, analyzing and synthesizing information in order to solve problems and answer questions COMMUNICATION AND COLLABORATION SKILLS Introduction to Web Design Using Microsoft Expression Articulating thoughts and ideas clearly and effectively through speaking and writing Information, Media and Technology Skills INFORMATION LITERACY Accessing information efficiently and effectively, evaluating information critically and competently and using information accurately and creatively for the issue or problem at hand MEDIA LITERACY Understanding how media messages are constructed, for what purposes and using which tools, characteristics and conventions. ICT LITERACY Using digital technology, communication tools and/or networks appropriately to access, manage, integrate, evaluate, and create information in order to function in a knowledge economy Using technology as a tool to research, organize, evaluate and communicate information, and the possession of a fundamental understanding of the ethical/legal issues surrounding the access and use of information Introduction to Web Design Using Microsoft Expression MODULE 6 1) 2) 3) 4) THE DESIGN PROCESS A Professional Team Approach a) Web Design as a career b) Team member roles and responsibilities The Importance of Customer Centered Design a) Unified design, usability, and marketing (1) Other design styles (Company-Centered, Technology-Centered, Designer-Centered) The impact of Design on Usability and Accessibility a) Web design patterns b) Site organization c) Usability guidelines and measures Development Process – “Iterative Design” a) Discovery (1) Overall Goals of the Website (a) Know your customers – “Primary & Secondary Research” (i) People/Roles (Who) (ii) Tasks (What) (iii) Technology Access (How) (iv) Social Issues (Why) (v) Context/Scenarios (Stories) (vi) Planning styles, grammar and reading levels (2) Value Proposition (3) Exploration (4) Rapid Prototyping (a) Site Maps (b) Storyboards (c) Wireframes (d) Schematics b) Refinement (1) Expert Reviews – “Heuristic Evaluation” (2) Informal Evaluations – “Think Aloud” (3) Formal Usability Studies – “Bottom-Line Data” Learning Objectives 1. 2. 3. 4. 5. 6. 7. Simulate a professional Web development team Introduce students to the formal process of developing Web sites in pairs or teams Utilize a professional Web development sequence Identify a client problem/need and create a plan to address that need Work with others to plan a Web-based solution to solve a client’s problems Use online information resources to meet your needs or those of a client for collaboration, research, publication, communication, and productivity Apply design and communication principals to a real-world problem Introduction to Web Design Using Microsoft Expression NETS-S www.iste.org/AM/Template.cfm?Section=NETS 1. Creativity and Innovation Students demonstrate creative thinking, construct knowledge, and develop innovative products and processes using technology. Students: a. b. c. d. 2. apply existing knowledge to generate new ideas, products, or processes. create original works as a means of personal or group expression. use models and simulations to explore complex systems and issues. identify trends and forecast possibilities. Communication and Collaboration Students use digital media and environments to communicate and work collaboratively, including at a distance, to support individual learning and contribute to the learning of others. Students: a. b. d. 3. interact, collaborate, and publish with peers, experts, or others employing a variety of digital environments and media. communicate information and ideas effectively to multiple audiences using a variety of media and formats. contribute to project teams to produce original works or solve problems. Research and Information Fluency Students apply digital tools to gather, evaluate, and use information. Students: a. b. c. d. 4. Critical Thinking, Problem Solving, and Decision Making Students use critical thinking skills to plan and conduct research, manage projects, solve problems, and make informed decisions using appropriate digital tools and resources. Students: a. b. c. d. 5. plan strategies to guide inquiry. locate, organize, analyze, evaluate, synthesize, and ethically use information from a variety of sources and media. evaluate and select information sources and digital tools based on the appropriateness to specific tasks. process data and report results. identify and define authentic problems and significant questions for investigation. plan and manage activities to develop a solution or complete a project. collect and analyze data to identify solutions and/or make informed decisions. use multiple processes and diverse perspectives to explore alternative solutions. Digital Citizenship Students understand human, cultural, and societal issues related to technology and practice legal and ethical behavior. Students: Introduction to Web Design Using Microsoft Expression a. b. advocate and practice safe, legal, and responsible use of information and technology. exhibit a positive attitude toward using technology that supports collaboration, learning, and productivity. 21st Century Skills www.21stcenturyskills.org/index.php?option=com_content&task=view&id=254&It emid=120 Learning and Innovation Skills CREATIVITY AND INNOVATION SKILLS Demonstrating originality and inventiveness in work Developing, implementing and communicating new ideas to others Being open and responsive to new and diverse perspectives Acting on creative ideas to make a tangible and useful contribution to the domain in which the innovation occurs CRITICAL THINKING AND PROBLEM SOLVING SKILLS Exercising sound reasoning in understanding Making complex choices and decisions Understanding the interconnections among systems Identifying and asking significant questions that clarify various points of view and lead to better solutions Framing, analyzing and synthesizing information in order to solve problems and answer questions COMMUNICATION AND COLLABORATION SKILLS Articulating thoughts and ideas clearly and effectively through speaking and writing Demonstrating ability to work effectively with diverse teams Exercising flexibility and willingness to be helpful in making necessary compromises to accomplish a common goal Assuming shared responsibility for collaborative work Information, Media and Technology Skills INFORMATION LITERACY Accessing information efficiently and effectively, evaluating information critically and competently and using information accurately and creatively for the issue or problem at hand Possessing a fundamental understanding of the ethical/legal issues surrounding the access and use of information MEDIA LITERACY Introduction to Web Design Using Microsoft Expression Understanding how media messages are constructed, for what purposes and using which tools, characteristics and conventions. Examining how individuals interpret messages differently, how values and points of view are included or excluded and how media can influence beliefs and behaviors. Possessing a fundamental understanding of the ethical/legal issues surrounding the access and use of information ICT LITERACY Using digital technology, communication tools and/or networks appropriately to access, manage, integrate, evaluate, and create information in order to function in a knowledge economy Using technology as a tool to research, organize, evaluate and communicate information, and the possession of a fundamental understanding of the ethical/legal issues surrounding the access and use of information Life and Career Skills Flexibility & Adaptability Initiative & Self-Direction Social & Cross-Cultural Skills Productivity & Accountability Leadership & Responsibility Introduction to Web Design Using Microsoft Expression MODULE 7 1) 2) 3) 4) 5) THE PRODUCTION PROCESS Production Preparation a) Organizing the production team b) Interactive and Rapid Prototyping c) Production Management d) Agile Development The Production Process a) Site Maps b) Storyboards c) Wireframes d) Schematics Advanced Web Design Technologies Creating the Individualized project with techniques learned in Module 5 a) Master pages/Dynamic Web Templates b) Organizing content: tables, frames, CSS, and divisions c) Multimedia (sounds, video, image maps) d) Navigation controls/bar e) Troubleshooting and debugging f) Interactivity g) Web forms h) Data access features Extended enrichment with Master Pages and Dynamic Templates Learning Objectives 1. 2. 3. 4. Perform the tasks as a member of a professional Web development team in a career simulation Develop collaboration and communication skills Create a Web site that fits the needs of a client as planned Develop technical skills using Expression Web for producing sites NETS-S www.iste.org/AM/Template.cfm?Section=NETS 1. Creativity and Innovation Students demonstrate creative thinking, construct knowledge, and develop innovative products and processes using technology. Students: a. b. c. 2. apply existing knowledge to generate new ideas, products, or processes. create original works as a means of personal or group expression. use models and simulations to explore complex systems and issues. Communication and Collaboration Students use digital media and environments to communicate and work collaboratively, including at a distance, to support individual learning and Introduction to Web Design Using Microsoft Expression contribute to the learning of others. Students: a. b. d. 3. Research and Information Fluency Students apply digital tools to gather, evaluate, and use information. Students: a. b. c. d. 4. b. c. d. identify and define authentic problems and significant questions for investigation. plan and manage activities to develop a solution or complete a project. collect and analyze data to identify solutions and/or make informed decisions. use multiple processes and diverse perspectives to explore alternative solutions. Digital Citizenship Students understand human, cultural, and societal issues related to technology and practice legal and ethical behavior. Students: a. b. c. d. 6. plan strategies to guide inquiry. locate, organize, analyze, evaluate, synthesize, and ethically use information from a variety of sources and media. evaluate and select information sources and digital tools based on the appropriateness to specific tasks. process data and report results. Critical Thinking, Problem Solving, and Decision Making Students use critical thinking skills to plan and conduct research, manage projects, solve problems, and make informed decisions using appropriate digital tools and resources. Students: a. 5. interact, collaborate, and publish with peers, experts, or others employing a variety of digital environments and media. communicate information and ideas effectively to multiple audiences using a variety of media and formats. contribute to project teams to produce original works or solve problems. advocate and practice safe, legal, and responsible use of information and technology. exhibit a positive attitude toward using technology that supports collaboration, learning, and productivity. demonstrate personal responsibility for lifelong learning. exhibit leadership for digital citizenship. Technology Operations and Concepts Students demonstrate a sound understanding of technology concepts, systems, and operations. Students: a. b. c. d. understand and use technology systems. select and use applications effectively and productively. troubleshoot systems and applications. transfer current knowledge to learning of new technologies. Introduction to Web Design Using Microsoft Expression 21st Century Skills www.21stcenturyskills.org/index.php?option=com_content&task=view&id=254&It emid=120 Learning and Innovation Skills CREATIVITY AND INNOVATION SKILLS Demonstrating originality and inventiveness in work Developing, implementing and communicating new ideas to others Being open and responsive to new and diverse perspectives Acting on creative ideas to make a tangible and useful contribution to the domain in which the innovation occurs CRITICAL THINKING AND PROBLEM SOLVING SKILLS Exercising sound reasoning in understanding Making complex choices and decisions Understanding the interconnections among systems Identifying and asking significant questions that clarify various points of view and lead to better solutions Framing, analyzing and synthesizing information in order to solve problems and answer questions COMMUNICATION AND COLLABORATION SKILLS Articulating thoughts and ideas clearly and effectively through speaking and writing Demonstrating ability to work effectively with diverse teams Exercising flexibility and willingness to be helpful in making necessary compromises to accomplish a common goal Assuming shared responsibility for collaborative work Information, Media and Technology Skills INFORMATION LITERACY Accessing information efficiently and effectively, evaluating information critically and competently and using information accurately and creatively for the issue or problem at hand Possessing a fundamental understanding of the ethical/legal issues surrounding the access and use of information MEDIA LITERACY Understanding how media messages are constructed, for what purposes and using which tools, characteristics and conventions. Examining how individuals interpret messages differently, how values and points of view are included or excluded and how media can influence beliefs and behaviors. Possessing a fundamental understanding of the ethical/legal issues surrounding the access and use of information ICT LITERACY Introduction to Web Design Using Microsoft Expression Using digital technology, communication tools and/or networks appropriately to access, manage, integrate, evaluate, and create information in order to function in a knowledge economy Using technology as a tool to research, organize, evaluate and communicate information, and the possession of a fundamental understanding of the ethical/legal issues surrounding the access and use of information Life and Career Skills Flexibility & Adaptability Initiative & Self-Direction Social & Cross-Cultural Skills Productivity & Accountability Leadership & Responsibility Introduction to Web Design Using Microsoft Expression MODULE 8 1) 2) 3) 4) 5) WEB PUBLISHING AND MAINTENANCE Quality Assurance (Testing) a) Technical Testing b) Usability Testing Site Optimization* a) Accessibility and compatibility Publishing a) Selecting a Web host b) Launch Plan i) File Transfer Protocol (FTP) ii) META Tags (SEO) Maintenance a) Analytic/Metric Analysis b) Bug Reports c) Periodic Backups d) Promotion and marketing Looking ahead to a career in Web Technologies a) Career skills b) Education Learning Objectives 1. 2. 3. 4. 5. 6. Evaluate site design and communication effectiveness Evaluate the accessibility and usability of the site with electronic tools Publish the site Maintain, and promote the site Reflect upon personal skills and characteristics desirable for Web technology careers Investigate Web technology careers and educational opportunities NETS-S www.iste.org/AM/Template.cfm?Section=NETS 1. Creativity and Innovation Students demonstrate creative thinking, construct knowledge, and develop innovative products and processes using technology. Students: c. 2. use models and simulations to explore complex systems and issues. Communication and Collaboration Students use digital media and environments to communicate and work collaboratively, including at a distance, to support individual learning and contribute to the learning of others. Students: Introduction to Web Design Using Microsoft Expression a. b. d. 3. Research and Information Fluency Students apply digital tools to gather, evaluate, and use information. Students: a. b. c. d. 4. b. c. d. identify and define authentic problems and significant questions for investigation. plan and manage activities to develop a solution or complete a project. collect and analyze data to identify solutions and/or make informed decisions. use multiple processes and diverse perspectives to explore alternative solutions. Digital Citizenship Students understand human, cultural, and societal issues related to technology and practice legal and ethical behavior. Students: a. b. c. d. 6. plan strategies to guide inquiry. locate, organize, analyze, evaluate, synthesize, and ethically use information from a variety of sources and media. evaluate and select information sources and digital tools based on the appropriateness to specific tasks. process data and report results. Critical Thinking, Problem Solving, and Decision Making Students use critical thinking skills to plan and conduct research, manage projects, solve problems, and make informed decisions using appropriate digital tools and resources. Students: a. 5. interact, collaborate, and publish with peers, experts, or others employing a variety of digital environments and media. communicate information and ideas effectively to multiple audiences using a variety of media and formats. contribute to project teams to produce original works or solve problems. advocate and practice safe, legal, and responsible use of information and technology. exhibit a positive attitude toward using technology that supports collaboration, learning, and productivity. demonstrate personal responsibility for lifelong learning. exhibit leadership for digital citizenship. Technology Operations and Concepts Students demonstrate a sound understanding of technology concepts, systems, and operations. Students: a. b. c. d. understand and use technology systems. select and use applications effectively and productively. troubleshoot systems and applications. transfer current knowledge to learning of new technologies. Introduction to Web Design Using Microsoft Expression 21st Century Skills www.21stcenturyskills.org/index.php?option=com_content&task=view&id=254&It emid=120 Learning and Innovation Skills CRITICAL THINKING AND PROBLEM SOLVING SKILLS Exercising sound reasoning in understanding Making complex choices and decisions Understanding the interconnections among systems Identifying and asking significant questions that clarify various points of view and lead to better solutions Framing, analyzing and synthesizing information in order to solve problems and answer questions COMMUNICATION AND COLLABORATION SKILLS Articulating thoughts and ideas clearly and effectively through speaking and writing Demonstrating ability to work effectively with diverse teams Exercising flexibility and willingness to be helpful in making necessary compromises to accomplish a common goal Assuming shared responsibility for collaborative work Information, Media and Technology Skills INFORMATION LITERACY Accessing information efficiently and effectively, evaluating information critically and competently and using information accurately and creatively for the issue or problem at hand Possessing a fundamental understanding of the ethical/legal issues surrounding the access and use of information MEDIA LITERACY Understanding how media messages are constructed, for what purposes and using which tools, characteristics and conventions. Examining how individuals interpret messages differently, how values and points of view are included or excluded and how media can influence beliefs and behaviors. Possessing a fundamental understanding of the ethical/legal issues surrounding the access and use of information ICT LITERACY Using digital technology, communication tools and/or networks appropriately to access, manage, integrate, evaluate, and create information in order to function in a knowledge economy Using technology as a tool to research, organize, evaluate and communicate information, and the possession of a fundamental understanding of the ethical/legal issues surrounding the access and use of information Life and Career Skills Flexibility & Adaptability Introduction to Web Design Using Microsoft Expression Initiative & Self-Direction Social & Cross-Cultural Skills Productivity & Accountability Leadership & Responsibility Introduction to Web Design Using Microsoft Expression Standards that guided the development of the curriculum: 1. Identify capabilities & limitations of contemporary and emerging technology resources and assess the potential of these systems and services to address personal, lifelong learning, and workplace needs. 2. Make informed choices among technology systems, resources, and services. 3. Demonstrate and advocate for legal and ethical behaviors among peers, family, and community regarding the use of technology and information. 4. Use technology tools and resources for managing and communicating personal/professional information (e.g., finances, schedules, addresses, purchases, and correspondence). 5. Routinely and efficiently use online information resources to meet needs for collaboration, research, publication, communication, and productivity. 6. Select and apply technology tools for research, information analysis, problem solving, and decision making in content learning. 7. Investigate and apply expert systems, intelligent agents, and simulations in real-world situations. 8. Collaborate with peers & experts to contribute to a content-related knowledge base by using technology to compile, synthesize, produce, & disseminate information, models, & other work.