I started teaching web design to students when the World Wide Web started to explode in 1994. Back then my students used HTML and notepad to create the school’s website. Web design tools have come a long way since then. So I am constantly looking at different ways of teaching web design
I decided some time ago that it is important to introduce programming concepts in this course. Students really have no clue where programming is used on the websites that they view on a daily basis. They just click away without understanding what that button control does. In my Web Design class, they will learn programming concepts in addition to learning how to build web pages and websites.
Here is an outline of what I teach:
HTML
DreamWeaver
Flash
DotNetNuke
I use the online lessons from Maricopa Community College to teach HTML. I don’t have my students do all of the lessons, but they do learn the basics of creating a 3-page site and having text, graphics, and links on the page.
Next, my students learn how to use Dreamweaver from Adobe Software. I use a book called Adobe Dreamweaver CS3 Revealed written by Sherry Bishop. The book has students create several different websites so that they learn how much easier it is to use software to create a website than html.
Learning Flash has also been fun and challenging for my students. Why? Partly because students need to think and Flash requires them to learn about objects, layers, and animation. It is not just point and click! I use a curriculum called Web Game from a company called I Support Learning.
Here is a description of the curriculum:
Students are immediately attracted to and engaged by web games featured on websites. The fast-growing segment of e-commerce and website creation is making this skill valuable and necessary to compete in a global economy. As competition increases and budgets shrink, companies are seeking new and innovative ways to attract and retain customers. From art, design, branding, and the skills necessary to bring it all together, your students will be leading the charge on the latest marketing phenomenon – web video games. These skills are in high demand and offer students immediate access to entrepreneurship opportunities.
To make the curriculum easy to implement, all the necessary knowledge and skills of programming and creating web video games are delivered through totally interactive software. Through text, pictures, animations, and digital videos, students are led through the exciting world of web game design. Due to the highly interactive and self-directed nature of our curriculum, students are allowed to find their own pace. Regardless of the learner’s motivation or learning style, students will find a new level of success with our curriculum.
This curriculum was designed to support state assessments by addressing national math, language, science, art, and technology standards.
What attracted me to this curriculum was this:
Skills for Life
Good life skills are made relevant through situations that have students examine their actions. Through interactions with their boss, co-workers, and customers, students learn what it takes to be successful in the real world. They discover the long-term benefits of making choices that allow them to take pride in what they do.
Critical Thinking and Problem Solving
Employers want people who solve problems. Our projects lead students through analyzing, brainstorming, and creating solutions using the design process.
Students work for a Web Design Company as an intern and are given a task of creating a game in Flash to advertise a new soda pop called Carbonade. Their job is to create a Flash game that can be used on the company website.
Throughout the lessons, students learn how to take instructions from a boss and how to create this game using the actionscript that Flash has as a feature. Students also learn basic programming concepts such as a variables, if statements, and loops.
This link will show you an example of the games that my students have created. http://www.lhps.org/scarbeau/flashstudent/
Once they have mastered Flash, my students learn DotNetNuke. I have been much involved with this product as a speaker, webcast leader, curriculum developer, trainer. I am also the author of the new DotNetNuke 5 published by Wrox Publisher.
DotNetNuke Is Free and
Versatile – DotNetNuke is an open source web application framework ideal for creating, deploying and managing interactive web, intranet and extranet sites.
User-Friendly – DotNetNuke is designed to make it easy for administrators, content editors, developers, and designers to manage all aspects of their web assets. Wizards, content-sensitive help, and a well-researched user interface provide a superior user experience.
Powerful – DotNetNuke can support multiple websites from a single application installation. In dividing administrative options between host level and individual site level, DotNetNuke allows administrators to manage an unlimited number of websites – each with its own unique appearance and content.
Feature-Rich – DotNetNuke comes loaded with a set of built-in features that provide exceptional functionality. Site hosting, web design, content management, security, and membership options are all easily managed and customized through simple, browser-based tools.
Supported – DotNetNuke is managed and supported by DotNetNuke Corporation, a legal entity which provides production Service Level Agreements as well as other professional services for the platform. DotNetNuke is also supported by its Core Team of volunteer developers and a dedicated international community. Through user groups, online forums, resource portals and a network of companies who specialize in DNN, help is always close at hand.
Easily Installed – DotNetNuke can be up-and-running within minutes. Developers can simply download the software, and follow the simple installation instructions. In addition, many web hosting companies offer integrated installation of the DotNetNuke application with their hosting plans, providing a simple mechanism for end users to experience the power of the platform.
The curriculum has students create two portals for CompSci High. The first portal is for the school and they created a portal that includes pages for Faculty, Admissions, Academics etc. They learn how to place modules on the pages and learn how to create their own modules using Visual Web Developer and Visual Basic.NET from Microsoft and SQL Server Express. They also learn how to change the graphics in DotNetNuke which is called skinning. The second portal is a student portal for information about athletics, student government, class information and clubs.
The skills that I teach are real world skills. Needless to say, my students are always busy learning in their Web Design class.
I hope you take advantage of this curriculum and teach your students a little about programming in your Web Design class. Good luck!
Resources:
HTML: http://www.mcli.dist.maricopa.edu/tut/tut0.html
Dreamweaver: http://www.adobe.com
I Support Learning: http://www.isupportlearning.com/noflash/Web.html
DotNetNuke: http://www.dotnetnuke.com
Free DotNetNuke curriculum: https://www.academicresourcecenter.net/curriculum/pfv.aspx?ID=7205
Brian Scarbeau
CSTA Board Member