Developer Center Article

This article discusses how a web design curriculum can have a far-reaching impact on the lives of students. In addition to describing the web design program at Congress Middle School of Math, Science, and Technology (in Boynton Beach, Florida) and providing downloadable examples of an online project and lesson plan, we offer an outline of the larger, student-centered benefits of this program.

Brianna is a bright young woman who loves art and drawing. Her home does not have a computer and her exposure to the Internet has been limited to school research projects. Nonetheless, she's fascinated by the web and all that it offers. Kevin comes from a very different background. He's been using a computer at home for many years. Although he's only 12 years old, he has studied JavaScript and HTML to build his own web pages.

These two students come from entirely different worlds, yet they sit next to each other in a classroom where they use some of the most powerful web design software available to create and publish their work on the web. At Congress Middle School, Brianna and Kevin share many experiences that open their eyes to possibilities they never even knew about. They—and others like them—will emerge from this web design course with technical know-how and better learning skills—thus increasing their chances for academic and career success in the future.

Student-centered web learning at Congress Middle School

Much of the educational literature today suggests a need to shift from a teacher-centered instructional paradigm to one that is more student-centered. The more traditional teaching approach focuses on direct instruction–where the teacher imparts knowledge directly to students, who are then tested on their mastery of the subject material. A student-centered approach focuses on empowering students to make their own decisions, work as members of a team, and gain valuable skills that translate into other academic endeavors.

Technology integration is one way to create a student-centered environment. Using software such as Dreamweaver, Fireworks, and Macromedia Flash in the classroom, students are encouraged to take charge of their own academic role. In the process of learning web technology, they transition from simply receiving knowledge to becoming producers of their own content for online publication.

When Congress Middle School set out to create a course in web design in 1998 the goal was not to challenge the educational paradigm, but simply to provide a unique opportunity as part of the school's overall mission of engaging students with technology, math, and science courses. As the course developed, though, it quickly became apparent to the teacher and other observers that what the students were doing went far beyond simply learning how to make web pages—and that the benefits were far-reaching.

From humble beginnings (originally only two courses were offered in basic web design), the program developed into a more complete series, encompassing "Introduction to the Web" (sixth grade), "Web Design" (seventh grade), and "Web Animation" (eighth grade). The program evolved as the teacher became more attuned to both the benefits of the class and to the needs of the students. (You can read about the beginnings of the program and see the initial course design parameters in Kim Cavanaugh's article, "On the Cutting Edge: Developing a Course in Web Design.")

The most obvious benefit of a web design program is that students learn about the web—they learn about technologies related to the web (networking, servers, digital communication), software used to create or control the web, and how to organize and present websites. Some, if not all, web design students will benefit from this new technical knowledge in their careers and in their lives (even if they don't end up in the web design field).

Critical learning traits

Beyond these very real topic-specific benefits, though, are by-product skills we'll refer to as “critical learning traits”that allow students to become empowered learners. These critical learning traits are common in a student-centered classroom, and web design programs are about as student-centered as you can get.

Below is a description of the critical learning traits we've seen students achieve in Congress Middle School's web design program. In addition to discussing these critical learning traits and showing how web design coursework reinforces or helps to develop them, we'll also offer real-life illustrative student projects that demonstrate the following critical skills:

• Problem-solving
• Independent thinking
• Grasping complex concepts
• Organizational skills
• Working in teams
• Expressing individuality through creative outlets
• Building confidence
• Addressing education's goals

Problem-solving

To become successful in both the school environment and the world beyond, students must learn to take a problem-solving approach to any assignment. They need to evaluate the assignment, break it into its separate components, examine the tools at their disposal, and manage their time and resources to finish the task. It doesn't matter whether the task is completing a math problem or writing an essay for a language arts class (or simply balancing a busy personal life with school requirements); students need to develop a problem-solving approach to meet the demands of their schooling.

Consider how these skills translate into the necessary steps for creating a website. Even the simplest site, containing just a few separate web pages and supporting graphics, taxes students' abilities to organize information and present it in such a way that the finished product is not only factually correct but also easy to navigate and technically sound. Students must use a systematic approach to accomplish the task while solving any technical problems that arise along the way.

The process that students must complete if they wish to build a functioning site translates directly into the same skills that their other endeavors require. Students who dive into a web project without advanced planning, for instance, often find that their website becomes difficult to manage and nearly impossible to complete. Those who give thought not only to the presentation of the site but also the target audience, site navigation, color scheme, font selection, and the technologies they employ—all the standards of good web theory—discover that accomplishing the site's goals become much more manageable.

Often the software itself forces students to examine their methods. A program such as Macromedia Flash, for instance, requires that students think ahead by examining the separate components that comprise their movie—choosing how to structure their layers, events, symbols, and actions in such a way that the content is presented in a clear and logical manner to the end user. Therefore, as students proceed through the design process, they are faced with many decisions that ultimately affect the final product. Students must define the problem (or task), critically consider their options (weighing the pros and cons), implement the solution, and evaluate the outcome (final product) to determine whether their goals were accomplished.

The problem-solving process used in web design mirrors the approach utilized in almost every other academic discipline. Take, for instance, a seventh-grade mathematics project, entitled Stephanie's Numberland. Stephanie's assignment was to teach a concept with the skills she had developed in Dreamweaver, Fireworks, and Macromedia Flash. Because she wanted to produce a series of tutorials on how to understand those math concepts that her fellow students often struggle with, Stephanie chose to combine a standard HTML presentation with Macromedia Flash interactive movies. As you can see on the site, without advanced planning on how each step in a fundamental skill (such as long division) is completed, and how that step can be demonstrated, Stephanie would never have been able to complete the project in the manner she chose.

Independent thinking

In the field of instructional technology, the process of employing software focuses too often on the tools and not the product, resulting in students who may know, for example, how to compose a Microsoft Word document or PowerPoint presentation but do not have the required knowledge to understand the appropriate use of the technology. Focusing on the process rather than the tools reverses that dynamic so that students are able to appreciate not only how a particular task is accomplished, but also which technology is appropriate for the assigned task—a common skill they will need when faced with real-world work requirements.

Web-based projects combine the best of both worlds because they not only teach how a particular task is accomplished, but they also allow students a huge range of options to achieve the goal. No longer restricted to a simple slide-show format or a written document, the freedom to make choices in how the assignment is completed—including such simple decisions as which color combination makes text more readable and such complex decisions as how to structure their web page and which technology to use, while mindful of the assignment's due date—empowers students in ways that traditional methods simply are not able to do. (As with any school project, students also consider legal and ethical issues such as plagiarism and the use of copyrighted material.)

Consider Aeric's Solar System project, where the task was to demonstrate the orbit of the planets while providing a basic set of facts on each planet. As you can see, the seventh-grader took great pains to consider the many aspects of his site's design, ultimately combining a basic HTML presentation with some advanced Macromedia Flash programming. By choosing a simple design and by using Dreamweaver templates, Aeric found he had sufficient time to devote to the animations he needed for demonstrating the planets' orbits.

Grasping complex concepts

The idea that evaluating and synthesizing knowledge is more valuable than simply acquiring facts is certainly not a new one. It would be difficult to find a teacher who doesn't have at least a passing knowledge of Benjamin Bloom, his taxonomy of learning, and how his theories impact our understanding of the ways people learn.

Despite that fact that his learning theory established the tenet that evaluating and synthesizing knowledge is one of the most valuable skills a student can attain, in these days of increased emphasis on achievement tests, educators are hard-pressed to find ways to combine the acquisition of knowledge with activities that stimulate higher-level thinking. How, then, do we combine a basic understanding of fundamental concepts with the kinds of learning that empowers students?

Again, web design offers a solution. In a typical project combing traditional educational methods with web-based presentation, students are forced not only to examine what they already know but determine what knowledge they need to acquire in order to cover a topic fully. This process of examination and reflection encourages students to take a broader view of the task assigned and leads to projects that are richer and more complex because of the process that the students embark upon.

In addition to the synthesis of traditional information, students using web design tools must also focus on the software itself—not in the isolated sense of learning how the software works but in a context that mandates choosing the appropriate technology for the task before them.

Take the project completed by Alif and Teddy. In their Shark Attack project they not only needed to find out more about sharks, including a detailed exploration of their feeding habits and behavior, but they also demonstrate their knowledge of Fireworks and graphic design by using that software tool for modifying images and created a complex Macromedia Flash animation that allows them to present the information in a compact area—a decision they arrived at together after examining all their options. For 13-year-olds, this examination and synthesis demonstrates the kind of higher-level thinking that empowers students for long-term success.

Organizational skills

It's easy to see in the preceding examples that these students took an organized and structured approach to complete their projects. Contrast that with the natural inclination of teenagers to dive into a project and attempt to dig their way out, and the value of a web-based curriculum becomes even more evident.

Organization is forced upon students by the very nature of the Internet and web software. If students forget to name their images properly—or organize their site properly—they'll find a page full of broken image icons instead of the attractive page they expect. The unforgiving nature of the web (and web technologies such as HTML and JavaScript) forces students to consider the ramifications of poor planning and organization.

Software such as Macromedia Flash further reinforces this organized approach. Students who want to build a Flash movie successfully must think about how to structure the animation. (The very "coolness" of the software's capabilities has its own built-in motivation too.) If students fail to consider how the layers in their movies are structured, for instance, they soon find that they cannot employ the more interesting capabilities that Macromedia Flash affords them. While it may be fun to build a simple linear animation, students discover on their own that they are perfectly able to build fascinating interactive movies simply by carefully examining what they want to accomplish, planning ahead, and composing their movie in an organized fashion. While the subject matter of Amanda's Cows in Small Town X site may not cover a traditionally academic topic, it demonstrates the kinds of Flash animations that an eighth grade student can accomplish with planning and organization.

Working in teams

Employers often complain that today's students are not adequately prepared to work in a collaborative work environment–a criticism that is often valid. In traditional educational settings, unfortunately, teamwork is usually not high on the priority list.

Contrast that with the kind of empowered learning that takes place when students participate in small teams to complete a website. In that situation, students are forced to share ideas, appreciate the contributions of other members, and—perhaps most importantly for teenagers—look outside themselves to accomplish a goal. This active learning style reinforces the collaboration and compromise skills so often lacking in the workforce.

As an example of this collaborative process, Danielle and Jose's Civil War project typifies the kind of give-and-take that goes on in a web design project. Danielle is a hard-working athlete who is adept at Internet research, while Jose is a history buff with a penchant for graphic design and a love for creating Flash animations. These two eighth-graders were able to work together to produce an excellent project because they recognized each other's strengths, divided the work based on their individual abilities, and discussed, at length, what they wanted to emphasize in the report.

Expressing individuality through creative outlets

Regardless of the society in which they're raised, all children in their teens seem to go through the process of examining who they are and where they fit in their environment. In a traditional classroom environment there is little opportunity for students to examine their identities and interests and explore the creative side of their personas. Courses with a web component, on the other hand, are rich with possibilities for students to not only examine their own interests but also explore their identities and creative abilities.

Perhaps the greatest impact of this approach is on the student who might otherwise be a reluctant learner. Consider the example of a seventh-grade student who seemed to take little interest in his web design class until he was provided the freedom to explore his own interests by creating a personal website. Victor's Tribute to Michele Kwan site is a perfect example of what a young student can accomplish when given the opportunity to explore a topic he's truly interested in, and how powerful it can be to see his finished work published. Prior to seeing his work online, Victor just couldn't see the value of his web design class. However, once he saw his work published on the web (and friends and family, suitably impressed, could also see it), Victor became the owner of the final project—indeed, a very finicky owner who almost daily wanted to make small improvements.

Other projects based on students' specific interests include David and Mark's Garage and Daryl's Basketball Movie. In each, the students pursued natural interests in richly complex projects, showing not only their mastery of the software but also their creative impulses.

Building confidence

The goal of the web design program is not so much to produce junior web designers but to build students' confidence in their own abilities to master challenging software products—the very essence of empowered students. Although the skills they learn could easily translate into jobs as animators, web designers, and developers down the road, it's almost impossible to envision what those jobs will look like so far in the future. The emphasis has always been on enabling students to build enough confidence in themselves to realize their innate potential—whatever the classroom, career, or life.

A web design program is also something of an equalizer. Consider the projects displayed on the student portfolio page. Is it possible to determine the students' backgrounds simply by looking at their finished projects? In particular, is it possible to see which students come from an environment that would be labeled “at-risk”?

Addressing education's goals

On the global scale, the question becomes: How can we use technology as a tool to support our current and future educational goals? One answer is to utilize software in a manner that helps students construct knowledge and further develop the seven critical learning traits discussed in this article. These traits may very well represent the qualities that students need to face a future of technological advances and the changing needs of the job market. While the debate over the best practices for employing instructional technology continues within the education community, the possibilities afforded by using web design software points to fascinating possibilities for developing students who are active learners empowered in the learning process.

Links to students' sites:

• Stephanie's Numberland
• Aeric's Solar System Project
• Alif and Teddy's Shark Attack
• Amanda's Cows in Small Town X
• Jose and Danielle's Civil War Project
• Victor's Tribute to Michelle Kwan
• David and Mark's Garage
• Daryl's Basketball Movie
• Student Portfolio Page

Additional resources:
Sample class project: J's Family History Project

This Family History lesson plan (HTML and Microsoft Word formats) shows an example of how a traditional lesson plan has been modified for a web design setting. In this lesson students create a four-page website that describes the history of their family's immigration to the United States. For this project, they learn fundamental web design skills and begin learning how to use Dreamweaver and Fireworks.

You can download the Family History lesson plan files below:

famhist_example.zip (175K)

famhist_example.sit (177K)

Articles, websites, and relevant links:
Consult these articles for more information about the use of technology in education:

"Link Between Technology and Authentic Learning" by Barbara Means and Kerry Olson (Educational Leadership, Vol. 51 No. 7, April 1994)

"Impact of Technology on Learning: Making Sense of the Research" by Carol Kimble (Mid-continent Research for Education and Learning Policy Brief, May 1999)

"Blueprint to Develop a Great Web Site" by Michael F. Ruffini (T.H.E. Journal, March 2001)

"Meaningful, Engaged Learning" (North Central Regional Educational Laboratory)

"Authentic Tasks as the Basis for Multimedia Design Curriculum" by Jonathan C. Basden (T.H.E. Journal, November 2001)

"Impact of Technology on Student Achievement: A Summary of Research Findings on Technology's Impact in the Classroom" (Apple Computer, April 2002)

Apple Digital Campus Curriculum: Web Communication and Design

AskERIC (online service of the Educational Resources Information Center)

---

About the author

Kim Cavanaugh, a member of Team Macromedia, is the author of Fireworks MX: A Beginner's Guide (Osborne/McGraw-Hill, 2002) and Dreamweaver 4/Fireworks 4 Studio: A Beginner's Guide (Osborne/McGraw-Hill, 2001).He is a teacher and technology trainer for the Palm Beach County School District in Florida and an adjunct professor at Palm Beach Community College. Previously Kim worked for ten years as a custom furniture designer and manufacturer; and before then as a field artillery officer in the U.S. Army. He now lives in West Palm Beach, Florida, with his wife and daughter, and loves all things associated with life in South Florida—especially warm weather, the Miami Dolphins, inshore fishing, and Jimmy Buffett tunes.

Deborah Maupin is currently pursuing a doctorate degree in curriculum and instruction at Florida Atlantic University. Deborah spent seven years teaching at Congress Middle School where she served as the school technology coordinator and was instrumental in the development of the math, science, and technology magnet curriculum. She currently works as a fifth-grade teacher at Discovery Key Elementary in Lake Worth, Florida. Additionally, she has worked as a professional development coordinator, creating and delivering a variety of workshops for teachers, and is now a master trainer for FloridaLeaders.net. Outside of classroom-related work, Deborah is the technical editor for Dreamweaver 4/Fireworks 4 Studio: A Beginner's Guide and Fireworks MX: The Complete Reference—from Osborne/McGraw-Hill. A resident of Boynton Beach, Florida, Deborah enjoys reading science fiction and traveling.