Creating a Website
Make a Mental Plan
Creating a website requires more than just the task of tagging it with the HTML code. The usefulness of countless websites accessible now in the online world is ques- tionable. Some prove to be difficult to navigate through, others are visually confus- ing, and still others contain inaccurate or outdated information. Rushing out and posting just any old website for the sake of saying you or your school has one does not contribute to the cooperative information base of the web. Instead, it will ulti- mately serve as a waste of your valuable professional time. You will want to take care that the instructional site you are considering serves your intended purpose in a way that is appropriate for your anticipated audience.
Begin first by asking yourself some questions that will help to define your goals for this instructional site. Harris (1997) has suggested the following starting points:
- Who will be interested in exploring the site?
- What types of information should be available at the site to address the interests of different audiences?
- How should this information be presented so that it is maximally helpful to iden- tified project participants and/or to those just browsing through the site?
Audience. If you are designing a site that will provide content information for your students to use for instruction, it will be organized very differently than will a site meant to update parents or other outside community members on school announcements. If you are considering showcasing your students’ writing, your site will have distinctive characteristics if the writing is done by kindergartners as compared to that done by high school sophomores. A website can serve many audiences by directing visitors to different sections. Think carefully about who will be accessing your site most often so that your planning can be efficient and audience specific.
Types of Information. Primary to the planning of any website should be a consid- eration of the content the page is being designed to present. Without this forethought, the collection of pages you will be creating will resemble an art project more than the meaningful informative base it could be (Tennant, 1997). A classroom homepage will likely be viewed by parents or others interested in what students in the class are
learning and doing. This type of page might include descriptions of projects, pictures of classroom events, or possible ways parents can extend the learning at home. A website meant to provide a thematic starting point for other classes would need to dedicate a certain amount of space to background information and facts pertaining to the project. If people find what they are looking for on your site, they will be more likely to come back to visit again. Inviting comments from visitors about the site and suggestions for what else they would like to see will help you to keep your site updated and relevant.
A word must be said here regarding the privacy of minor students. It is imper- ative that school districts adopt guidelines for posting student information online. Many districts deem it acceptable to include student first names but not last names on class websites. Photos showing students’ faces might be allowed if parental per- mission has first been obtained. Other personal information about minor students is generally not acceptable except in special cases with parental permission or when the pages containing the personal information are password protected. Teachers are urged to become familiar with their districts’ privacy policies prior to creating online classroom materials.
Presentation Strategies. There is an infinite number of ways to arrange the infor- mation on a website. Viewers may be required to scroll down the page through long chunks of text, or links can take viewers directly to other pages of information. Some- times, your students might want to write the text of the page themselves. Other times, it might make more sense to provide a link to another established site that has already compiled an excellent treatment of the topic.
Based on your answers to these types of planning questions, you will begin to define the purpose of your proposed website. A website can take many forms in order for it to serve your identified purpose. One of the easier sites to begin with is a class homepage providing information to parents. Such a page might be organized, as would a newsletter that might be sent home, with such items as homework assignments and upcoming announcements.
In addition to these basic inclusions, website functions will also fall into the categories of web resources. Written stories can be published for all to see and col- laborative projects with other classes can be managed via your website. You might design an instructional site that provides content information your students need for class, or you might supply thematic information to keep parents apprised of what is happening in school. Field trips and other experiences can be documented through digital photographs and written reflections to share with other classes who may not have made the same trip or who may not be familiar with your area of the country. Unlimited amounts of online resources can be compiled by and for your students.
The Design Process
With a good mental plan for what your site needs to include, your next move is to plan how you want the site to appear to others who will view it. It would be easy to skip this planning step in favor of getting right to the web design, but your valu- able time could be wasted trying to visualize what you want the site to look like at the same time you are creating the site documents. A small amount of planning time up front not only will save time later but also will make for a more organized and easy-to-use website.
Study. Begin by closely examining other websites you visit. Look at how the designer has laid out the text and graphics. Is it aesthetically pleasing, or does it appear that page elements were just dropped in randomly? Are the graphics serving an obvious educational purpose, or do they appear to be there for decoration only? Is the font size and style appropriate for the content and audience? As you move around from page to page, is the navigation intuitive and well organized? Once you get to another page, is it easy to get back to where you started?
Sketch. When you have reviewed others’ pages, sketch out what you envision for your page on a storyboard or a sequence of screen layouts. Your storyboard can be very rough or extremely detailed, as long as it gives you an idea of where text will be located, what size and other formatted text will be used, where graph- ics will be integrated, and how the navigational path is planned (see Figure 8.12). A simple, clean layout is the best place to start; more complexity can be added later if desired.
FIGURE 8.12 Sketching a storyboard for a web page.
Use specially formatted text, such as boldface or italics, judiciously. An overly formatted page is difficult to read, and your user might spend more time concen- trating on the abundance of special text rather than on the content of the page. Im- ages should also be chosen carefully. Large graphics take a long time for the browser to load, which slows down the use of your website. Make sure that every picture serves a purpose in your layout and overall goals, rather than providing only mean- ingless clutter. Your page will appear even more
organized if you plan all the pages to have a con- sistent look and feel, such as by using the same background color or coordinating graphics throughout the entire site.
Plan the Navigation. List in your storyboard the URLs for any hypertext links you would like to create. Good web design calls for fitting the link seamlessly into the text, rather than telling the user to Click Here. Include links that enrich the information on your site, but not so many that the user is constantly thrown off track. The linked resources should directly pertain to the goal of the lesson or informational piece.
Just as you create hyperlinks to other outside resources, you can also link your homepage to other pages in your own website. Connect pages within your storyboarded site with arrows showing the paths for how the user will be able to travel through the pages (see Figure 8.13).
Learn-U Support | Learn-U FIGURE 8.13 A storyboard showing a navigational path for a website.
Plan a simple navigational path. You do not want people who visit your site to get lost wandering around between your pages. Make sure you include a link back to your homepage on every page in your site. Add to your storyboard any custom colors you plan on using to help you get an idea of whether the color scheme is visually pleasing and appropriate for your intended audience. The background color or image should be in high contrast to the text, such as light text on a dark background or dark text on a light background. Your students will be less likely to succeed in their web learning experience if they must struggle to make out what the page says. Finally, plan to place your name or school name and the date in a prominent place on the page, so that people accessing your page will know how current the information is and how to contact you should they have comments or questions.
Plan the Organization. To ensure an organized and easily modifiable website, it makes good sense to keep a record of the filenames of the HTML documents you create. Cafolla and Knee (1996–1997) recommend documenting the following infor- mation to create a complete record:
- Page titles
- Source of each link and the reasons it was selected
- Source of the graphics
- Size and type of graphics
- Width of horizontal lines
Even as you storyboard, jot down filenames you plan on giving to these pages. Keep to brief, logical filenames so you will remember what each page is by the name alone. Always use lowercase filenames to make it easier for your users to access your site with a browser. Web addresses are case-sensitive, so someone trying to find your site at www.myhomepage.html will not get there if it is actually named http://www.My Homepage.html. At this point in your planning, this record will serve as a checklist to guide your page creation. Later, when you are updating your site, it will stream- line your job by reminding you of the filenames and the organization of the files.
Plan for Accessibility. One of the unique attributes of online learning is that every- one, regardless of appearance or abilities, can learn together. There are some 32 million people in the United States with disabilities. Thus, developers of online educational materials must now ensure that their websites are accessible to all potential learners, from students with disabilities to those with slower connection speeds. Most impor- tant, educational websites that are accessible “transform gracefully,” meaning the in- formation is accessible despite physical, sensory, and cognitive limitations, or technological barriers (Web Accessibility Initiative, 1999, 2006). Web materials should provide text equivalents to graphic, video, or audio elements so that alternative browsing devices (e.g., screen-reading software) can interpret the content for the user who cannot see or hear. Web designers also must recognize that their content may be viewed on all sorts of hardware using a variety of input devices. Quick tips to make accessible websites can be found at www.w3.org/WAI/References/QuickTips. The content should be easy to understand and to navigate; image maps or tables that may make a site’s layout clear for those who can see or are using a large monitor may not be interpreted properly by screen-reading software or compact screens. To scan your web page to test for compliance with accessibility guidelines, go to the Bobby site at http://bobby.watchfire.com/bobby/html/en/index.jsp.
Involve Students in Web Design
What better way to teach students about the Internet and instill some pride and con- fidence in their own work than to have them participate in the designing of a web- site? All of the aspects of website creation discussed in this chapter can be accomplished by students as well as by adults, and at times might even be handled better by students. The complete process can prove to be a valuable cross-curricular project. Depending on the abilities of the students, they can gain practice with written language and with measurement, such as with graphic sizes, as they work with the page design and layout. They can do the background research, both on the content to be presented on the site and on websites to which links will be created. Partici- pating in the process from the beginning through completion will teach students about follow-through and accomplishment. Some schools are even able to offer students their own individual homepages on which they can publish their writing for an authentic world audience.
The Development Process
Now that you are armed with both a mental concept and a visual plan, you are ready to begin creating the actual documents that will make up your instructional site. Re- member from Chapter 3 that a web page is a text document that uses HTML tags to tell the browser software how to display the page (see Figure 8.14).
FIGURE 8.14 | The finished web page.
Web documents can be saved to either a disk, the hard drive, or some other lo- cation, using the document names you previously planned on your storyboard. Files saved with the proper .html extension can be viewed in a web browser when saved to your local drive during development. However, they must be uploaded using file transfer software (see Chapter 3) to a web server to be available for others to view online.
In the not-so-distant past, the only way to create web-based documents was to manually code the text document with the correct HTML tags. Although this is not a difficult process, the work can be tedious and prohibitively time consuming. Even most web development purists now take advantage of new software solutions for creating web documents. All of these tools allow you some range of capabilities to format documents, paragraphs, and characters, as well as to insert hypertext links, multimedia elements, and more advanced scripting.
Web editing tools are to web page creation as calculators are to computation, or even as electric mixers are to baking. Results can be achieved more quickly and eas- ily with the tools of convenience, although there are those who might say that those basic skills you learn doing it the old-fashioned way lead to a better end product. When HTML editing software first hit the market, it was able to format with only the basic tags but could not be counted on to produce some of the more advanced formatting. As is always the case with innovation and progress, however, the more recent editors are able to handle the more complex HTML programming, making web-page creation accessible to even those with no HTML knowledge whatsoever. This is good news for teachers who want to try their hand at designing web-based instruction, but fear their busy professional lives will prevent them from learning a complicated coding language.
HTML editors look and act very much like word processors. The ease of opera- tion is based on a convention called WYSIWYG, the acronym for “What You See Is What You Get.” Rather than seeing a mess of tags (codes) identifying various types of formatting, you see on the screen the actual formatted results. If you want a title to be centered, for example, the program shows it to you centered. Without your realizing it, the <CENTER>,</CENTER> tags are being added into the actual HTML document behind the scenes. Editors automatically insert the document formatting and allow you to choose any other of the paragraph and character formatting that is available by clicking on toolbar buttons for each of the procedures. Images can be easily inserted by clicking on the image button and identifying what image file you want. To create text that is hyperlinked, simply highlight the text, click on the link button, and type in the URL or other destination location. Whenever you want to view the actual HTML tags, you can usually click on a button to view the source of the document, and here you will notice all of the tags that have been inserted into the document (see Figure 8.15).
FIGURE 8.15 A sample HTML document showing document, paragraph, character, and hypertext reference tags.
Web Editing Software. Editing software is now available in a range of stand-alone programs. The most basic offer a simple, intuitive tool that teachers and students can use with little training and a short learning curve (e.g., Page Composer, a free com- ponent of Netscape Communicator, at http://www.netscape.com). These programs allow for the construction of attractive and effective web pages complete with multimedia elements. More sophisticated software offers increased flexibility and a greater range of new web capabilities (e.g., Macromedia Dreamweaver, http://www.macromedia.com). Advanced features allow you to insert precoded objects such as frames, navigation bars, email links, and symbols. Some software use layers so that objects and text can be moved freely in design, and many offer templates for preset coordinated color schemes. Site maps continue the good organization that was begun during the plan- ning stage by automatically linking new files as the site is built. Other software fo- cuses on site management, rather than individual page creation only (e.g., Microsoft FrontPage, http://www.microsoft.com). Sites are created and updated as a whole structure, making it easier for entire schools or districts to collaborate on consistent site cre- ation (see Figures 8.16 and 8.17 on page 231).
FIGURE 8.16 The sampler HTML document in Netscape Page Composer.
Productivity Software. Most new productivity tools (e.g., Microsoft Office) give you the option to save documents as web pages. This means that teachers can do two jobs at once: generate materials on a word processor for classroom use, for example, and then save another version of the same materials to be placed on the class web- site. One distinct advantage is that teachers who are reluctant to learn new software can contribute to online learning environments using the software with which they are already familiar.
FIGURE 8.17 The way the tagged document would appear in a browser.
Online Web Editors. Some of the most exciting web advances for teachers are online web editors. These tools (e.g., Yahoo! GeoCities at http://geocities.yahoo.com/home and Filamentality at www.kn.pacbell.com/wired/fil) are generally free if teachers and districts are willing to see some advertising on the pages. The tools provide wizards for step-by-step page creation in minutes, yet also allow quite a lot of customization with HTML tags. Some even let you drag and drop objects, similar to the more advanced stand-alone software, and give plenty of interactive tools such as guest books, page counters, feedback forms, and streaming media. Finally, teachers can add and update favorite links and upload photos with little effort.
Course Management Software. The most sophisticated solution for creating online learning environments is course management software (e.g., WebCT at http://www.webct.com and Blackboard at http://www.blackboard.com). These software systems are not typically an option for the classroom teacher, but Blackboard has recently introduced a K–12 starter edition. Course management software can be used either to create professional-quality course supplements or to convert entire courses to online format to be offered at a distance. Instructors are not required to invest a lot of time, resources, or technical expertise with this software. They are provided with design templates to present students with a consistent interface; a comprehensive set of communication tools, such as email and discussion boards; and administrative tools, such as online assessments, to help manage student grading and reporting. Students can customize their own homepages to access appropriate communication tools, course information and assignments, educational resources, and personal and school calendars.
Server Storage
Local Server Space. Your district or school likely already has a web presence and possibly even procedures for hosting individual classroom web materials. The pro- cedure might entail you sending your files to a committee for review or to a server administrator to upload. Find out the policies prior to beginning your web design and development, because some districts have adopted web software and consistent procedures that may affect your capabilities.
Hosted Server Space. A number of public and educational websites offer free web pages (e.g., Yahoo! GeoCities at http://geocities.yahoo.com/home), while others of- fer subscription-based hosting. Although free hosting sounds attractive, the limited technical support and pop-up ads may frustrate teachers and students. Low-cost hosting alternatives offer better service and more user-friendly sites. Once registered, the sites allow you to have ample space on their servers to host multiple web pages with some multimedia elements. You will have your own URL that students and par- ents can use, as well as some ability to upload new documents and updates via FTP, sometimes with the assistance of an easy-to-use wizard.