introduction to web design using expression web · web viewmodule 4 uses microsoft expression...

Introduction to Web Design Using Microsoft® Expression® Studio

Introduction to Web Design Using Microsoft Expression

CopyrightInformation 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.


PrefaceWelcome 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 work-skills 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.

mailto:[email protected]


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 OrganizationM O D U L E 1 : T H E H I S T O R Y A N D T H E F U T U R E O F T H E W E B 1 W E E K

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.

M O D U L E 2 : H T M L B A S I C S 2 W E E K S

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.

M O D U L E 3 : D E S I G N I N G F O R C O M M U N I C A T I O N 2 W E E K S

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.

M O D U L E 4 : W O R K I N G W I T H I M A G E S 3 W E E K S

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.

M O D U L E 5 : B E Y O N D T H E B A S I C S W I T H E X P R E S S I O N W E B 2 W E E K S

Module 5 introduces students to the Expression Web WYSIWYG, drag and drop environment and provides tutorials to guide them in creating a Web site.

M O D U L E 6 : T H E D E S I G N P R O C E S S 3 W E E K S

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.)

M O D U L E 7 T H E P R O D U C T I O N P R O C E S S 3 W E E K S

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.)

M O D U L E 8 W E B P U B L I S H I N G A N D M A I N T E N A N C E 2 W E E K S


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 curriculumThe 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 Skillswww.21stcenturyskills.org/index.php?option=com_content&task=view&id=254&Itemid=120ACM Model Curriculum for K-12 Computer Sciencehttp://csta.acm.org/Curriculum/sub/ACMK12CSModel.html

Module ISTE NETS-S 21st Century Skills1 1 Creativity and Innovation (a)

4 Critical Thinking, Problem Solving, Decision Making (c)6 Technology Operations and Concepts (a-d)

Critical Thinking and Problem Solving SkillsCommunication and Collaboration SkillsInformation LiteracyMedia LiteracyICT Literacy

2 1 Creativity and Innovation (c-d)3 Research and Information Fluency (a, b, d)5 Digital citizenship (a-d)6 Technology Operations and Concepts (a-d)

Information Literacy

3 1 Creativity and Innovation (a, c)4 Critical Thinking, Problem Solving, Decision Making (a-d)

Creativity and Innovation SkillsCritical Thinking and Problem Solving SkillsCommunication and Collaboration SkillsInformation LiteracyMedia Literacy

4 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 (a-d)

Creativity and Innovation SkillsCritical Thinking and Problem Solving SkillsCommunication and Collaboration SkillsInformation LiteracyMedia LiteracyICT Literacy

5 6 Technology Operations and Concepts (a- Critical Thinking and Problem Solving Skills

http://csta.acm.org/Curriculum/sub/ACMK12CSModel.html

http://www.21stcenturyskills.org/index.php?option=com_content&task=view&id=254&Itemid=120

http://www.iste.org/AM/Template.cfm?Section=NETS


d) Communication and Collaboration SkillsInformation LiteracyMedia LiteracyICT Literacy

6 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)


7 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 (a-d)


8 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 (a-d)

Critical Thinking and Problem Solving SkillsCommunication and Collaboration SkillsInformation LiteracyMedia LiteracyICT LiteracyLife 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 objectives1. 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.


10. Explore careers in Web technologies.

Software system requirementsMicrosoft 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 ResourcesThe 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 ContentsThe 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 descriptorStudent 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.


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 FeaturesWhile 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.

TimelinesWithin 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 plansDetailed 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.

PresentationsAll 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 TextbookThe 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


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 ToolsA 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 PracticesLesson 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.

AcknowledgmentsSpecial 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 CreatorsAseem Badshah, Educational Technology ConsultantAseem 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 TeacherTanya 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 TeacherDave 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 TeacherDebbie 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


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 CoachElizabeth 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 TeacherMyra 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 CorporationCarla 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 MarineDave 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 ConsultantPat 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 TeacherRita 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 ResourcesThe 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/en-us/cc197140.aspx

Additional Expression Design learning resources are available at: http://expression.microsoft.com/en-us/cc136532.aspx

http://expression.microsoft.com/en-us/cc136532.aspx

http://expression.microsoft.com/en-us/cc197140.aspx


The Scope and Sequence with Standards AlignmentThe following pages contain the topic list and the standards addressed by the activities detailed within the lesson plans of each of the eight modules.

M O D U L E 1 T H E H I S T O R Y A N D T H E F U T U R E O F T H E W E B

1) The Evolution of Web Design/History a) How people viewed the Web and how they built Web sites with that view

2) Internet Structurea) Technology/coordinationb) Organizations

3) Intellectual Property/copyrighta) Developing effective Web use skillsb) Evaluating information and sourcesc) Copyright

4) Emerging technologiesa) E-commerceb) New technologiesc) New services

Learning Objectives 1. Explore history and impact of Web technologies2. Locate Web-based resources and reference materials3. Learn research techniques to evaluate the authenticity of Web resources (internet safety)4. Demonstrate ethical behavior in using and producing Web resources5. Evaluate existing Web sites based on their accessibility, and usability6. Explore business applications of Web technology7. Investigate entrepreneurial (e-commerce) opportunities using Web technologies8. Explore Web 2.0 functionality9. Investigate new Web technologies10. Explore personal and professional communication/collaboration through Web technologies.

NETS-S www.iste.org/AM/Template.cfm?Section=NETS

1. Creativity and InnovationStudents 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.



d. identify trends and forecast possibilities.

3. Research and Information Fluency Students apply digital tools to gather, evaluate, and use information. Students:

a. plan strategies to guide inquiry.b. locate, organize, analyze, evaluate, synthesize, and ethically use

information from a variety of sources and media.c. evaluate and select information sources and digital tools based on the

appropriateness to specific tasks.

5. Digital Citizenship

Students understand human, cultural, and societal issues related to technology and practice legal and ethical behavior. Students:

a. advocate and practice safe, legal, and responsible use of information and technology.

b. exhibit a positive attitude toward using technology that supports collaboration, learning, and productivity.

c. demonstrate personal responsibility for lifelong learning.d. exhibit leadership for digital citizenship.

6. Technology Operations and Concepts

Students demonstrate a sound understanding of technology concepts, systems, and operations. Students:

a. understand and use technology systems.b. select and use applications effectively and productively.c. 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&Itemid=120

Information, Media and Technology SkillsI N F O R M A T I O N L I T E R A C Y

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






M O D U L E 2 H T M L B A S I C S

1) Web page structureBasic page layout featuresa) Block and inline formatting

2) Tags and attributesa) Headline Stylesb) Colorc) Imagesd) Lists and tables e) Hyperlinksf) Troubleshooting and debugging

3) Introduction to CSS4) Standards and Accessibility

a) W3C - World Wide Web Consortium

Learning Objectives

1. Explore the code that creates Web pages2. Create pages with images, links, and other controls3. Investigate the development of Web standards4. Apply standards to simple projects5. Explore CSS and other Web design/development concepts


1. Creativity and Innovation

Students demonstrate creative thinking, construct knowledge, and develop innovative products and processes using technology. Students:

a. apply existing knowledge to generate new ideas, products, or

processes.

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. collect and analyze data to identify solutions and/or make informed decisions.







Learning and Innovation Skills C R I T I C A L T H I N K I N G A N D P R O B L E M S O L V I N G S K I L L S

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

C O M M U N I C A T I O N A N D C O L L A B O R A T I O N S K I L L S

Articulating thoughts and ideas clearly and effectively through speaking and writing

Information, Media and Technology Skills I N F O R M A T I O N L I T E R A C Y


M E D I A L I T E R A C Y Understanding how media messages are constructed, for what purposes and using which tools,

characteristics and conventions.

I C T L I T E R A C Y 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



M O D U L E 3 D E S I G N I N G F O R C O M M U N I C A T I O N

1. Design Elementsa) Colorb) Shape & Linec) Texture d) Typography

2. Design Principalse) Movementf) Balance and proximityg) Repetition and Unity

The following extended topics offer enrichment beyond the topics listed above. Use as appropriate3. Vision

h) Visible Spectrumi) Human Visual System (Retina, Rods, Cones)j) Color Sensitivityk) Distribution of photo-pigmentsl) Focusm) Color Deficiency as it relates to accessibility

4. Cognitionn) The Model Human Processoro) Memory (Long-term/Working)p) Image Store (Visual, Auditory)q) Perceptual, Motor, Cognitive Processorr) Fitt’s Laws) Perception

Learning Objectives 1. Identify the basic elements and principles of design 2. Evaluate samples based on design principles3. Apply design principles for effective communication for target audiences4. Evaluate Web pages based on their design 5. Evaluate Web sites on the effectiveness of communication6. Apply Web design elements and principles Web page design





processes.c. use models and simulations to explore complex systems and issues.

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.

b. plan and manage activities to develop a solution or complete a project.


d. use multiple processes and diverse perspectives to explore alternative solutions.


Learning and Innovation Skills C R E A T I V I T Y A N D I N N O V A T I O N S K I L L S

Demonstrating originality and inventiveness in work

Developing, implementing and communicating new ideas to others

C R I T I C A L T H I N K I N G A N D P R O B L E M S O L V I N G S K I L L S Exercising sound reasoning in understanding

Making complex choices and decisions



C O M M U N I C A T I O N A N D C O L L A B O R A T I O N S K I L L S Articulating thoughts and ideas clearly and effectively through speaking and writing





Examining how individuals interpret messages differently, how values and points of view are included or excluded and how media can influence beliefs and behaviors.











M O D U L E 4 W O R K I N G W I T H I M A G E S

1) Using images in Web Designa) Banners, logos, Buttonsb) Roll-oversc) Image slicing and image maps

2) File Types and Usesa) JIF, JPEG, PNG

3) Scanninga) Scanning Modes

i) Line Artii) Halftonesiii) Color/True Color/Grayscale/Spot Color/Black & Whiteiv) Palettes (Web, System, Optimized)

4) Digital Photographya) Techniques and Concepts

5) Other media (movie and audio files)6) Creating and customizing images with Expression Design

a) Toolsb) Layers and Groupingc) Transform (Reflect, Rotate, Gradient , Fill)d) Appearance Menue) Exporting images

7) Copyright

Learning Objectives1. Obtaining graphic images from a variety of sources 2. Examine file types and select for design needs3. Select and modify graphic images to meet communication needs4. Create graphic elements (with Microsoft Expression Design) using a variety of techniques5. Explore the communication impact of other Web media 6. Reinforce copyright concepts





processes.b. create original works as a means of personal or group 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.

b. communicate information and ideas effectively to multiple audiences using a variety of media and formats.

d. contribute to project teams to produce original works or solve problems.


b. locate, organize, analyze, evaluate, synthesize, and ethically use information from a variety of sources and media.

c. evaluate and select information sources and digital tools based on the appropriateness to specific tasks.









a. understand and use technology systems.b. select and use applications effectively and productively.c. troubleshoot systems and applications.

d. transfer current knowledge to learning of new technologies.





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







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












M O D U L E 5 B E Y O N D T H E B A S I C S W I T H E X P R E S S I O N W E B

1) The Expression Web environmenta) Workspace, tools, task panes, viewsb) New site/pages c) File Managementd) Layerse) Text manipulationf) Using graphics and multimedia (inserting, formatting)g) Cascading Style Sheets (CSS)h) Linking and Navigation Controls i) Trouble shooting and de-buggingj) Interactive Navigation, Buttons, screen tipsk) Dynamic Web Templates and Master Pages l) ASPXm) Using Behaviorsn) Client-side scriptingo) Web formsp) Data access features

Learning Objectives 1. Explore modern Web design/development concepts 2. Develop technical skills using Expression Web
















M O D U L E 6 T H E D E S I G N P R O C E S S

1) A Professional Team Approacha) Web Design as a careerb) Team member roles and responsibilities

2) The Importance of Customer Centered Design a) Unified design, usability, and marketing

(1) Other design styles (Company-Centered, Technology-Centered, Designer-Centered)3) The impact of Design on Usability and Accessibility

a) Web design patternsb) Site organizationc) Usability guidelines and measures

4) 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. Simulate a professional Web development team 2. Introduce students to the formal process of developing Web sites in pairs or teams3. Utilize a professional Web development sequence4. Identify a client problem/need and create a plan to address that need5. Work with others to plan a Web-based solution to solve a client’s problems6. Use online information resources to meet your needs or those of a client for collaboration, research, publication,

communication, and productivity7. Apply design and communication principals to a real-world problem





a. apply existing knowledge to generate new ideas, products, or processes.

b. create original works as a means of personal or group expression.c. use models and simulations to explore complex systems and issues.d. identify trends and forecast possibilities.






3. Research and Information Fluency

Students apply digital tools to gather, evaluate, and use information. Students:



appropriateness to specific tasks.d. process data and report results.

















Life and Career Skills Flexibility & Adaptability

Initiative & Self-Direction

Social & Cross-Cultural Skills

Productivity & Accountability

Leadership & Responsibility


M O D U L E 7 T H E P R O D U C T I O N P R O C E S S

1) Production Preparationa) Organizing the production teamb) Interactive and Rapid Prototypingc) Production Managementd) Agile Development

2) The Production Processa) Site Mapsb) Storyboardsc) Wireframesd) Schematics

3) Advanced Web Design Technologies4) Creating the Individualized project with techniques learned in Module 5

a) Master pages/Dynamic Web Templatesb) Organizing content: tables, frames, CSS, and divisionsc) Multimedia (sounds, video, image maps)d) Navigation controls/bare) Troubleshooting and debuggingf) Interactivityg) Web formsh) Data access features

5) Extended enrichment with Master Pages and Dynamic Templates

Learning Objectives 1. Perform the tasks as a member of a professional Web development team in a career simulation2. Develop collaboration and communication skills3. Create a Web site that fits the needs of a client as planned4. Develop technical skills using Expression Web for producing sites

NETS-S www.iste.org/AM/Template.cfm?Section=NETS 1. Creativity and Innovation


a. apply existing knowledge to generate new ideas, products, or processes.

b. create original works as a means of personal or group expression.c. use models and simulations to explore complex systems and issues.

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:



























M O D U L E 8 W E B P U B L I S H I N G A N D M A I N T E N A N C E

1) Quality Assurance (Testing)a) Technical Testingb) Usability Testing

2) Site Optimization*a) Accessibility and compatibility

3) Publishing a) Selecting a Web hostb) Launch Plan

i) File Transfer Protocol (FTP) ii) META Tags (SEO)

4) Maintenance a) Analytic/Metric Analysisb) Bug Reportsc) Periodic Backupsd) Promotion and marketing

5) Looking ahead to a career in Web Technologiesa) Career skillsb) Education

Learning Objectives 1. Evaluate site design and communication effectiveness2. Evaluate the accessibility and usability of the site with electronic tools3. Publish the site4. Maintain, and promote the site5. Reflect upon personal skills and characteristics desirable for Web technology careers6. Investigate Web technology careers and educational opportunities




c. use models and simulations to explore complex systems and issues.




























Exercising sound reasoning in understanding




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.

introduction to web design using expression web · web viewmodule 4 uses microsoft expression...

Documents