Technology Integration

Part 3: Web Page Design

 First Steps

School districts and teachers are using Web pages to communicate to students, parents, and the community.  Having a school or classroom Web site is essential in this era of school accountability.  A first step to designing your own Web pages might be to evaluate a few sites.  Key ideas include examination of the site's purpose, author, content, coverage, currency, and recognition by others.  Ohio State University Libraries' net.TUTOR has a tutorial for this process at http://liblearn.osu.edu/tutor/les1/.   But read on. 

You might search for ideas from other K-12 schools on the Web using the Hotlist of K-12 Schools, the Yahoo.com Education directory, MySchoolOnline.com, or Eduhound.com.  You could examine sites of schools recognized by the No Child Left Behind Blue Ribbon Schools Program, which are listed at http://www.ed.gov/programs/nclbbrs/awards.html.

Look at the design of the site for how it might serve your own purpose, its navigation structure, and observe placement of menu options.  They are typically found at the top of the page, along the left side, or in a table of content.  You should be able to link back to the home (index) page from any page within the site. 

As you examine sites, consider that the Web can be a delivery medium and an instructional medium.  If your purpose is to create a Web site for instruction, consider the three functions of instructional Web pages, which are to present information, provide interactions of various types on the Web, and to provide connections or links to information and interactions elsewhere on the Web.  Instructional Web sites should be designed with characteristics of the targeted learner in mind and consider how learners read and process text and how they might navigate through a potential maze of hyperlinks.  You might provide a general page of links that are grouped together to reflect their content, or provide links to additional content at the point on the page where students would most likely use them (Ingram & Lathorn, 2003).  You can also read more at this site about building online courses: see http://www.ct4me.net/building_online_courses.htm.

The following rubrics might assist you and your students with evaluating Web pages:

• Building Blocks to Electronic Communication: A Rubric for School Web Development and Management by Elliot Levine and Nora Carr (2006) covers content, security, functionality, and interactivity.

• Evaluation Rubrics for Websites from Payton Educational Consulting contains three rubrics for use in primary, intermediate, and secondary grades.

• Rubric for Classroom Web Pages by Joan Vandervelde of the University of Wisconsin

Back to top

What are good Web pages?

Good Web pages can stand alone when accessed from anywhere on the Web.  They are designed with Jakob Nielsen’s HOME principle in mind.  Nielsen often posts his top 10 Web design mistakes at his Web site, Alertbox.  Good pages contain highly relevant content for the intended audience, are updated often, require minimal time to download, and are easy to navigate. The following tips might help you to judge the quality of a Web site, or to design your own.

• Purpose: The purpose of the site should be clear, along with the intended audience.  Educational sites should relate to standards for the subject matter addressed. A section called About this Site is valuable. 

• Credibility: The author’s credibility should be evident.  Sponsoring organizations include businesses, corporations, educational organizations, or individuals.  Personal Web sites should contain information about the author.  Teacher Web sites should include their school’s name (many don’t), and schools should identify the district in which they are located, for example.  A site might also include its recognition by others. 

CAUTION:  Never link to a site without checking the credibility of the author and outgoing links from the site.  In one case that I encountered, the site appeared totally educational, but there was no indication of the developer.  One of the graphic images linked to a site for pornography.  Imagine the negative impact of including such a resource at your educational Web site.  You can often see the URL of a linked site at the bottom of your screen when you roll over linked text or a graphic with your mouse. 

• Content: The site emphasizes accurate information.  New content might be clearly labeled as such with headlines and quick summaries for those who just want to read essential information.  The reading level should be appropriate for intended audience.  Look for references at the bottom of pages that quote statistical data, or content from other sources.  Links to additional information on topics discussed should be provided.  Students studying controversial topics should have links to alternative viewpoints to help them to become critical thinkers. 

• Site accessibility: Content should be accessible by all users.  For example, text can be enlarged, any audio is accompanied by text, and the color palette used is “easy” on the eye and of sufficient contrast for those who might be color blind (i.e., orange on red or yellow on white--not good).  Lighthouse International has a web page that contains basic guidelines for effective color contrast that work for nearly everyone. 

Provide a text equivalent, such as a transcript or captions, for all non-text multimedia elements (i.e., audio, video, graphics, animation, graphical buttons, and image maps).  Use "alt" tags with alternative text descriptions for "Images that convey information (that is, non-decorative images), graphs, and other graphics in Word, PowerPoint, PDF, and HTML...that are useful for all students" (André, Felix, Foley, Hunziker, & Petri, 2006, sec: Take Responsibility).  WebAIM has an excellent Web Captioning Overview for audio and video, including software capturing tools.

To accommodate individuals with motor disabilities, keyboard navigation to functional elements is essential.  

• Navigation/Layout: Users require only a few clicks to find the information they seek.  A maximum of three clicks is recommended.  Information is chunked, so as not to overwhelm the user.  Menus are used.  Navigation elements consistently appear on all pages so that users know where they are at all times and how to return to the page from which they came. 
  
  Avoid pop-up pages, as users might have installed software on their computer to prevent pop-ups from appearing.  They might then miss important information that you feel they should see.  If you do require pop-ups, however, alert users of that fact so that they might change their software settings.  Pop-ups are often used to provide context specific supplemental help, as in providing a hint to solve a problem.

Avoid frame-based layouts.  According to Rebecca André, Mark Felix, Alan Foley, Dawn Hunziker, and Ken Petri (2006, sec: Take Responsibility), "Using frames can severely restrict what users see, especially if the screen resolution is set to the largest size allowed by their monitor. Providing maximum screen real estate for larger concepts that are utilizing multimedia presentations is a best practice that all users will appreciate."

• Multimedia: Text might be presented on the middle 50% of the page for long documents meant to be read entirely online, as reading online is generally slower than reading printed pages. 

Be aware that there are accessibility issues when using Portable Document Format (PDF) files with screen readers, which vision impaired students might be using to access online readings.  Read Is PDF accessible? at The National Center on Accessible Information Technology in Education (AccessIT).  To ensure PDF accessibility, "When creating anything in PDF make sure to use the “convert to PDF” function in Adobe Acrobat rather than printing your document to the PDF Print Distiller or using the “print as PDF” function. ...see WebAIM’s excellent tutorial on PDF and Word" (André et al., 2006, sec: Take Responsibility).

Graphics and other multimedia should be appropriately sized, used to support content and learning (as opposed to just providing "eye candy"), and culturally sensitive.  Too many graphics or graphics with large file sizes can increase the time to download pages, frustrate visitors, and cause them to look elsewhere for information they need.  When adding any graphic to a page, be sure to access picture properties and provide alternative text describing the graphic.  When users roll their mouse over the graphic, they see the text.  The text is also essential for screen readers for visually impaired users.  Audio/video should be under user control.  When video is used in classrooms with students with hearing impairments, the audio component should be captioned. 

I have seen classroom teacher Web sites with snowflakes dancing down the screen, leaves falling, and scrolling ribbons of text waving about the screen right over text I was attempting to read.  I’ve encountered music that I could not turn off.  Although these provide “razzle-dazzle,” such elements of design tend to distract from the message being conveyed at the site and cause some users to look elsewhere. 

Also, content that flashes or flickers and blinks at certain rates (i.e., between 2 Hz and 55 Hz) might induce seizures in some individuals with photosensitive epilepsy (Architectural and Transportation Barriers Compliance Board, 2001).

• Page Dates/URLs: Pages should display the date on which they were last updated.  A page URL listed at the bottom of the page will help users who print out content to have a record of its source, but this feature is not as commonly found.

• Search/Viewing Support: Look for a search function at sites with many pages, and links to plug-ins for viewing certain types of content, such as pdf files and video. 

• Contact information: Contact information should include mailing address, telephone/fax including area code, and email to school officials.  Include the individual who maintains the web site, as often visitors can report errors on web pages or suggestions for content directly to that individual.  
  
  K-12 schools might question posting the email addresses of all teachers from the school site.  Although parents might expect to communicate 24/7 with teachers, posting the teacher’s email address might be better from the classroom teacher site at the judgment of the teacher.  The teacher would determine expectations for students and parents to receive responses to email regarding classroom concerns.  According to Nora Carr (2004), former assistant superintendent for the Charlotte-Mecklenburg Schools, “Expecting teachers to spend their limited time at home communicating online with parents is unrealistic and unfair.”

• Confirmation: Sites that permit users to fill-in forms to email the organization, respond to questionnaires online, or provide other content should include a confirmation page to acknowledge their entries.

Back to top

School Web Site Content

The school community must decide on the content of its Web site, which might include recognizing student achievement, posting collaborative student projects, organizing curriculum resources for teachers and students, and organizing staff information.  The site might introduce visitors and prospective students to the school (Cavanaugh, 2002), and contain profiles of teachers, the principal and superintendent.  Web site developers might include school events, stories about community elders, business and community organization partnerships, mentoring programs, donations, and ideas for how businesses can get involved with the schools.  They might also link to home pages of community event groups, local weather, and driving directions (Schmidt, 2002). 

The school web site should be a primary communication tool for the community and its visitors.  As such, schools might also consider blogs for real-time communications, and opinion polls for essential questions.  A section to easily find answers to frequently asked questions should be available.  Parents might be provided secure access to their children's records in the school's student information system.

In this era of accountability, schools also need links to documents that help the school community to understand legislation affecting the programs they offer for the grades they serve, research-based programs they have adopted, standards, performance data, and professional development opportunities.  Administrative and school board statements on such programs adopted, which are supported by links to associated legislation and research help keep parents, media, business and community leaders informed about what is right with the school.  These info-messages should be regularly posted or updated on the Web site with catchy subject lines to draw attention to issues, positions, concerns or achievements that follow.  Schools might offer email options to parents and community leaders to receive essential school news and information on a regular basis.

A link to a translation service would be beneficial for members of the school community for whom English is a second language.  Google's Translation Service, for example, enables users to translate text or entire Web pages in several languages, as does AltaVista’s Babel Fish Translator.  Promt Company's Free Website Translation service is for English, German, French, Spanish, Portuguese (Brazilian), Italian and Russian languages.  Linked pages will be translated automatically when you navigate to them.

The school Web site might include its grade level content for elementary school or middle/high school course selections and graduation requirements, appropriate for the grade levels it serves.  According to Ruben Lopez, Florida 's Chief Technology Officer, "E-learning will become the cornerstone of how curriculum will be delivered in the future" in K-12 (Miller, 2003).  Therefore, including links to K-12 online curriculum to broaden course offerings or to provide courses taught by "highly qualified" teachers might be appropriate.  A number of initiatives are available to serve students and their teachers, including Virtual High School and Florida Virtual School (FLVS).  FLVS, for example, provides an extensive list of middle/high school courses for national and international students.

Elementary school Web sites have used audio to share school songs, choral and music samples, mascot sounds and themes, and posted update notices and "mailto" to the webmaster, student and parent handbooks, a philosophy and mission statement, curriculum information, discipline policies, and miscellaneous procedures.  Sites provided the school address, phone number, staff email addresses with "mailto" option, and links to local information including district links. Educational resources, search engines, student work and student created pages, classroom pages, principal pages, newsletters, calendars or schedules, cafeteria information, PTA information, after school curricular activities, calls for collaboration, and homework helpers have been included (Barron & Ivers, 1999).

A policy for protecting students' identity is essential, as Barron and Ivers (1999) found sites that listed students' full names, grade levels, and teachers, and some that identified student photographs by name, which they do not recommend.  Teachers can provide some security for photographs of students that are posted to the classroom web site, however, by preventing visitors from copying their images.  Any web site image can be protected by inserting appropriate HTML code on the page with the image, which blocks right clicking to copy and save images.  Get the code in How to Prevent Image Copying at the GraphicsAcademy.com.

Other policies might address copyright issues, posting information on the school's site, student/faculty web page development and acceptable use.  Resources at Copyright and Fair Use from Stanford University serve the education community well.  Schools that have posted their acceptable use policies might reexamine them because, according to Flowers and Rakes (2000), most do not adequately address issues of limiting access, equal access, censorship, and freedom of information.  The Virginia Department of Education has a handbook for developing acceptable use policies, which provides templates, information and examples to help your school develop its policy.

Links to technical assistance are essential.  Teachers should have some technical competence, however, which they might gain with resources such as TECH CORPS' online tutorials at webTeacher and free technical support at tech4schools.

Georgia's DeKalb County School System Web site (http://www.dekalb.k12.ga.us/) might serve as a content model for developers, as the Center for Digital Government and Education (http://www.centerdigitaled.com) named it the best K-12 district Web site in the US for 2005.  See the complete list of winners at http://www.centerdigitaled.com/bestof/?loc=37.

Back to top

Classroom Teacher Web Pages

Classroom teacher Web pages should link to the school or district Web site and contain only school-related information.  As for all Web sites, content should be updated regularly.  The date of last revision might be shown on the bottom of each page.  A disclaimer might be placed on pages with links to external sites indicating that the links are for educational purposes only and that every effort has been made to ensure that those sites are safe for student use and do not contain inappropriate content for their age-level.

Classroom Web pages are ideal for keeping parents informed and for showcasing student work.  Teachers might post general classroom information such as curricular learning goals, schedules/calendars, assignments/due dates, conduct expectations, upcoming events, and other classroom news.  Consider using Google Calendar or Google Spreadsheet, the latter of which has many of the features found in Microsoft's Excel, for those communications.  You can set up who can view and modify the documents you create, and what calendar details they see.  Registration is free.   

Students will benefit from examples of work related to assignments that meets standards, assessment rubrics, research sites for kids, homework help sites, and curriculum-related sites for additional practice.  Reading and math sites would be particularly relevant because states receiving federal funding will measure students' progress in those areas annually in Grades 3-8 and at least once in Grades 10-12 by 2005-2006.  Computing Technology for Math Excellence provides extensive resources for teaching and learning mathematics.  This site also contains reading resources at our Research Corner because poor reading skills are associated with poor performance in mathematics. 

Teachers might wish to post their email addresses or other contact information at their classroom web site.  However, teachers should not post students' contact information.  To further protect students, use only first names when posting student work and do not attach names to images of students without first seeking parental permission. 

Classroom blogs are becoming popular.  Edublogs.org provides a free blogging service for education professionals to use as a teaching tool.  If you elect to use a blog in instruction, you might read Moderating and Ethics for the Classroom Instructional Blog by P. Deubel (2007).

Inspiring Teachers offers free Web pages for teachers.  Your membership includes 20MB of space, a free email account, Site Builder assistance, file management, online forms capability, and tools to promote your site.

Back to top

More on Accessible Web Sites

Online barriers limit accessibility of potentially vital Internet information for persons with disabilities. Rebecca André, Mark Felix, Alan Foley, Dawn Hunziker, and Ken Petri (2006) indicate that the four main disability categories that must be accommodated are motor, visual, auditory, and cognitive.

The Federal government now requires colleges and universities to make access to online course content available to vision and hearing impaired students.  Cyndi Rowland provides information on Accessibility of the Internet in Post Secondary Education: Meeting the Challenge.  Her discussion of students in cyberspace and the complexity of the accessibility problem is particularly relevant for all levels of online education, including K-12 as online education at that level is also on the rise.  According to Rowland, this complexity involves the knowledge and skills of the Web designer, creators of browsers, creators of Web authoring tools, creators of assistive technology, creators of course development software, and finally the knowledge and skills of the user.   

As more and more teachers are using their web pages for instruction, André et al. (2006, sec: Take Responsibility) indicate they can take greater responsibility for presenting content that is accessible by considering these additional tips:

• If Power Point presentations are posted on the Web, have students download them first so that screen readers and keyboard navigation can more easily be used.  Plus, it is then easier to print handouts of slides.

• Students with disabilities often require special accommodations for testing.  While policies might differ, if you have online quizzes, homework, or learning activities, remove any time limits for their completion--save yourself the headache of extra work--or at least provide the maximum suggested by policies.  Use vertical, rather than horizontal, layouts for that content to accommodate screen readers.  Plus, all students will benefit from being able to better focus on the assessment questions, rather than the technology or layout.

• Remind users of screen readers to turn off the feature for auto-refresh of frames and screens.  When pages automatically reload, screen readers start over at the top of the page, which might confuse students in the middle of an activity.

• Screen readers have difficulty with interpreting equations.  When using equation editors, provide "concise and accurate text descriptions of the formulas and actions being done in the mathematical exercise."

• HTML or Java-based chat clients/tools are unusable for those who use screen readers.  Those with mobility disabilities might find them difficult to use, as well.  Asynchronous tools like email and discussion boards, or phone conversations, might be more effective for students with disabilities.

Web site developers should be familiar with Section 508 of the Rehabilitation Act of 1973, which ensures that individuals with disabilities, who are seeking information or services from a Federal agency, have access to and use of information and data that is comparable to that provided to individuals without disabilities. Included in that document are technical standards for software and Web-based applications, and functional performance criteria (http://www.section508.gov).  For a discussion of the standards for creating accessible web pages, you might read the guide Web-based Intranet and Internet Information and Applications by the Access-Board, a Federal agency committed to accessible design.  

Developers will also benefit from the video Screen Readers and the Web, which is one of the videos on accessibility provided by the University of Wisconsin at Madison.  You will hear a demonstration of a screen reader, a discussion of actual problems encountered by Web users who are visually impaired, and how to overcome many accessibility problems by using alt-text for images, D-links for longer descriptions, and header tags.  D-links, for example, are under user control to read or not read. The presentation has impact, as the presenter is visually impaired.

In addition, creating accessible web pages often requires familiarity with and access to the HTML code from within the development software.  Resources below include HTML tutorials. 

Back to top 

Redesigning or Designing Your Site

After you have examined a few sites, noted your likes/dislikes and content that you would like to provide, and considered how you will make your site accessible to all, it's time to redesign or design your site.   Tutorials will help. The Cyber-Sierra Workshop 2002: Web Site Power provides the process including planning tips, technical requirements, tools, suggestions for writing for the Web, storyboarding tips, design templates, HTML guidelines, a checklist for validating your site before posting it to the Web, and several links to learn more at each stage in the process.

An existing site should be audited. Stakeholders should appoint and support responsible people with time, assistance, and resources.  They will need to rank the site's purposes, develop a site profile with goals, audience, tone, scope of design/redesign, maintenance plan, and form a Web-design project team (Cavanaugh, 2002).  The team might include students.  For example, students played a key role in the development of the McDonogh School Web site in Maryland (Fish, 2003). 

The project team should create a task list and timeline with goals, list essential and desired features of the site gathered from interviews or a survey of users, and create storyboards of potential page designs and color palettes.  The project team should request design feedback, collect new media and other content and create a style guide for pages to have a consistent look.  After the team builds and announces the new site, they should ensure it is usable and accessible by gathering and incorporating feedback from users into a final design (Cavanaugh, 2002).  Finally, children should be included in testing sites designed for them. They appreciate sites that include interaction and characters.  

Back to top

Design Resources

You might consider the following tools and resources for web page development, training, and design issues:

• Web authoring tools: 

  • Adobe PageMill

  • Claris Home Page

  • GoLive 

  • HomeSite

  • Netscape Composer (a free service provided by Netscape Communicator 4.0 or better).  See tutorials for Designing Web pages with Netscape Composer by Jeff Reynolds at Aims Community College (Colorado)

  • Macromedia Dreamweaver.  Learnthat.com offers free tutorials and courses for Macromedia DreamWeaver

  • Microsoft FrontPage

  • Mozilla Composer (The Mozilla browser package contains a free webpage editing and publishing program called Mozilla.)  After downloading, see additional help on  How to Design and Publish Your Website with Mozilla Composer

  • Nvu (say "N-View") advertises itself as "A complete Web Authoring System for Linux desktop users as well as Microsoft Windows and Macintosh users to rival programs like FrontPage and Dreamweaver."  This is a free open source program that you can download.

• Animation tools: 

  • GIFBuilder (freeware for Mac computers)

  • GIF Construction Set (small fee for Windows)

  • Macromedia Flash

• Accessibility tools: Additional links to media players, authoring tools, and to tools that are useful for making rich media accessible are available from Rich Media Accessibility, a project of the National Center for Accessible Media. 

• Other Media design tools: See CT4ME's Multimedia in Projects page for resources to design multimedia objects for your Web site: images, sound, video.

Adobe Accessibility Resource Center: http://www.adobe.com/accessibility/    Adobe has resources on how to create an accessible web site that conforms to provisions stated in Section 508 of the Rehabilitation Act of 1973.  Also get the how to's for accessibility for a variety of Adobe products: Flash, Dreamweaver, Director MX, Adobe Reader, and more.

Alertbox: Current Issues in Web Usability: http://www.useit.com/alertbox by Dr. Jakob Nielsen

Apple Computer Secondary Multimedia Resources: http://ali.apple.com/als/2ndmult/resources.html contains a checklist for web page development.

Bravenet.com: http://www.bravenet.com/ contains free tools for livening up your Web site or adding interactivity, such as guestbooks, message forms, chat rooms, blogs, javascripts, password protection, daily cartoons, and more.

Computerhope.com: http://www.computerhope.com/learnhtm.htm has HTML and web page design help.

Cyber-Sierra Workshop 2002: Web Site Power: http://www.cyber-sierra.com/workshops/web101/index.htm provides the process including planning tips, technical requirements, tools, suggestions for writing for the Web, storyboarding tips, design templates, HTML guidelines, a checklist for validating your site before posting it to the Web, and several links to learn more at each stage in the process.

Cynthia Says: http://www.cynthiasays.com/  is a free online tool from HiSoftware to test accessibility on web pages.  Simply enter the URL and select the kind of report you wish to receive.

Designing More Usable Web Sites from Trace Research and Development Center at the University of Wisconsin-Madison: http://trace.wisc.edu/world/web/ includes accessible Web site guidelines, Web access tools for users and authoring, governmental efforts, selected resources on disability and Web use (e.g. screen readers and color blindness information), a list of browsers with built-In voice and other access features, forums for discussing accessibility issues, multimedia and virtual reality access, and an informative section on the background on the World Wide Web.  There is also a list of organizations, projects, and technologies addressing Web access issues.

DO-IT (Disabilities, Opportunities, Internetworking, and Technology): http://www.washington.edu/doit/  from the University of Washington contains numerous resources for accessible Web design, and a valuable article by Dr. Sheryl Burgstahler, Universal Design of Web Pages in Class Projects.

Dr. Watson: http://watson.addy.com/ is a free service that will analyze web pages for HTML syntax, word count, spelling, download speeds, search engine compatibility, and popularity.  It will verify regular and image links.

Fortress Web Design and Hosting: http://www.fortressdesign.com/   has a series of free web design tutorials covering design fundamentals, planning, layout, typography, color, graphics, interactivity, testing, and more.

GraphicsAcademy.com: http://www.graphicsacademy.com/index.php contains free tutorials on color, image design and capture, HTML and web design.  A glossary of graphics terms and file formats are also provided.

Human Factors International: http://www.humanfactors.com includes information about color, layout, wording, accessibility.

HTML Code Tutorial: http://www.htmlcodetutorial.com/ contains tutorials for creating web pages that use HTML code.  Learn about anchors and links, applets, frames, forms, fonts, embedded objects, document tags, images, lines and paragraphs, lists, logical tags, scripts, sounds, cascading style sheets, tables, and more.  There is also an extensive webmaster resources directory, including Internet marketing, web hosting, portals to help build your site, and website design.

National Cancer Institute Research-Based Web Design and Usability Guidelines: http://www.usability.gov/guidelines/ is comprehensive. Recommended for a starting point because it is research-based.

National Center for Accessible Media: http://ncam.wgbh.org/ 

Penn State Teaching and Learning with Technology: http://tlt.its.psu.edu/suggestions/research/index.shtml "provide[s] a quick reference for faculty and instructional designers on current research and experience in the development of instructional materials, technology-supported teaching and learning and interactive class activities."  Among the many sections included are those pertaining to Web design: text readability (font, color, size, style), media (gif, jpeg, image color, audio, video, animation), and development (navigation, writing for the Web, site evaluation, accessibility).

Principia Hypertextica: A Mathematics Educator's View of Web Design: http://www.cst.cmich.edu/users/chaff1ra/m132/WWW/type/  by William Johnson, who wrote his views for a 1997 National Council of Teachers of Mathematics conference.

Watchfire Bobby (Accessibility Testing): http://www.watchfire.com/products/webxm/bobby.aspx, originally developed by the Center for Applied Special Technology, is a tool that helps to identify and repair barriers to web page access by individuals with disabilities.

Web Adventure: http://www.webdiner.com/webadv/index.htm from the Web Diner contains beginner, intermediate, and advanced tutorials on web page design.  This is an inviting site to use with everything you need, including how to make money from your site.

The Web Design Group: http://www.htmlhelp.com features web authoring reference, tools, frequently asked questions, design elements, HTML help and more.

WebAIM, Web Accessibility in Mind: http://www.webaim.org If Web accessibility is an important issue for you, then this is the site to visit for an introduction, laws, guidelines, articles, and viewpoints on this issue.  The "How To" section for creating accessible Web pages contains tutorials related to Graphics, Forms, Dreamweaver, FrontPage, PDF, Powerpoint, Multimedia and more.  The Section 508 checklist will help you self-assess your own Web pages for compliance with the new Federal standard.  In addition, simulations are available for you to experience the Web as those with vision problems do.

Web Accessibility 101: http://www.doit.wisc.edu/accessibility/online-course/index.htm is an online tutorial course for beginners or experienced designers to help create accessible web pages.  Highly recommended for its clarity and illustrations.

Web Accessibility Initiative: http://www.w3.org/WAI/ pursues accessibility of the Web through five primary areas of work: technology, guidelines, tools, education and outreach, and research and development.  Resources are extensive, including tips, guidelines, checklists, techniques, training, evaluation and repair tools, alternative web browsing, and policies relating to web accessibility.

Web Pages that Suck: http://www.webpagesthatsuck.com/  by Vincent Flanders contains, as the title suggests, examples of poorly designed Web pages.  More than that, however, is that this site has tips on how to correct the problem.

W3C HTML Validation Service: http://validator.w3.org/ is a free service to check documents for conformance to W3C recommendations and other standards.

Back to top

Especially for Teachers

You Can Create a Class Web Site: http://www.educationworld.com/a_tech/tech161.shtml This article from Education World presents four steps to building a simple class web site and contains the additional links to tips, templates, and clip art to help you:

• Research good and bad sites and review your district's policy for web postings.  

• Plan.  Storyboard templates assist with layout of your pages.

• Create your site.  Keep it simple.  You may need HTML tags.  Add clip art and/or photos.

• Post your site.

Building Web Sites for Kids: http://builder.cnet.com/webbuilding/pages/Graphics/Kids/ This 1998 article by K. Wimpsett contains ten do's and don'ts for building web sites for kids.  Do's include to know your target audience, include interaction, be careful with private information, test the site with kids, and use characters.  Don't, however, be lame, rely on tired design metaphors, and neglect your content.  Don't forget to check out other stuff for kids, and above all, don't start if you don't like kids.  The article is filled with relevant links to resources.

Clip Art Gallery on DiscoverySchool.com: http://school.discovery.com/clipart/ has a full range of clip art for use at teacher sites and in classroom projects.

3-D Text Maker:  http://www.3dtextmaker.com/ Create free 3-D text banners for your web pages--unbelievable options for font and appearance!

Back to top

References: 

André, R., Felix, M., Foley, A., Hunziker, D., & Petri, K. (2006, Oct. 3). A public consortium emphasizes the importance of LMS accessibility. Campus Technology. Available: http://campustechnology.com/articles/41224

Architectural and Transportation Barriers Compliance Board (2001, June 21). Web-based Intranet and Internet Information and Applications (1194.22). Available:  http://www.access-board.gov/sec508/guide/1194.22.htm 

Barron, A., & Ivers, K. (1999). The presence and purpose of elementary school Web pages. Information Technology in Childhood Education, 1999, 181-191.

Carr, N. (2004). Parents expect email accessibility. eSchool News, 7(3), 35.

Cavanaugh, C. (2002, Dec.). Redesigning your school web site. Learning & Leading with Technology, 30(4), 14-17, 40-41.

Deubel, P. (2007, Feb. 21). Moderating and ethics for the classroom instructional blog. T.H.E. Journal K-12 Tech Trends Newsletter. Available: http://www.thejournal.com/the/newsletters/k12techtrends/archives/?aid=20257&recipid_alpha;=

Fish, T. (2003). Building a web site from the inside. Learning & Leading with Technology, 30(5), 46-49, 58.

Flowers, B.F., & Rakes, G.C. (2000, Spring).  Analyses of acceptable use policies regarding the Internet in selected K-12 schools. Journal of Research on Computing in Education, 32(3), 351-365.

Ingram, A., & Lathorn, L. (2003, March/April). Designing your web site for instructional effectiveness and completeness: First steps. TechTrends, 47(2), 50-56.

Lynch, P. &  Horton, S. (2002). Web style guide (2^nd ed) [Online]. Available: http://www.webstyleguide.com/index.html

Miller, M. (2003, May). Q&A: Ruben Lopez, Florida 's Chief Technology Officer [Online]. NCLB Supplement to T.H.E. Journal, 30(10). Available: http://www.thejournal.com/articles/16366

Schmidt, M. (2000, May/June). Setting up the school web site. Media & Methods, 36(5), 4-5 supp School executive.

Back to top

See other Technology Integration pages:

 Part 1: Essential Questions  |   Part 2: Technology Integration Resources   |  Part 4: Mulltimedia in Projects.

To cite this page, use the following format:

Deubel, P. (fill in year from last revised). Technology integration: Web page design [Online]. Retrieved [fill in date] from Computing Technology for Math Excellence at http://www.ct4me.net/web_page_design.htm