building a town website teacher’s...

A Basic Dreamweaver MX Project from Macromedia

BUILDING A TOWN WEBSITE

Teacher’s Guide Table of Contents

Project Description.............................................................................................................3

ISTE National Educational Technology Standards for Students ..................................3

Timing ..................................................................................................................................4

Resources ...........................................................................................................................4

Prior Learning .....................................................................................................................5

Subject Knowledge Needed by Teachers........................................................................5

Activity 1: Planning the Website ........................................................................................6

Activity 2: Getting Acquainted with Dreamweaver MX ..................................................8

Activity 3: Setting Up the Local Site and Root Folder.................................................. 10

Activity 4: Creating the Home Page ............................................................................... 10

Activity 5: Creating the Other Web Pages ...................................................................... 11

Activity 6: Connecting the Web Pages........................................................................... 14

Activity 7: Testing the Website........................................................................................ 15

Activity 8: Managing the Website ................................................................................... 15

Project Assessment.......................................................................................................... 16

NOTICE OF RIGHTS

Copyright 2003 by Macromedia, Inc. All rights reserved.

For educational instruction purposes only, Macromedia grants you the right to make as many copies as you need of all or a portion of the Building a Town Website project curriculum, either by photocopy or by printing files from the PDF document, providing that you always include the page(s) containing copyright information and that you distribute such copies not for profit. It is the responsibility of your organization to monitor the copying and use of this curriculum and to comply with the terms of this notice. You agree that Macromedia reserves the right to audit your organization’s compliance with these terms, upon reasonable notice.

All other copying, reproduction, and transmission is otherwise prohibited.

This notice does not cover the use of Macromedia software. You must comply with the terms of the End-User License Agreement supplied with the software.

NOTICE OF LIABILITY

The information in these training materials is distributed on an "AS IS" basis, without warranty. Although reasonable precaution has been taken in the preparation of these materials, neither Macromedia, Inc., nor its licensors shall have any liability to any person or entity with respect to liability, loss, or damage alleged to be caused directly or indirectly by the instructions contained in these materials or by the computer software and hardware products described herein.

These materials contain links to third-party websites that are not under the control of Macromedia, and Macromedia is not responsible for the content on any linked site. Macromedia provides these links only as a convenience, and the inclusion of the link does not imply that Macromedia endorses the content on those third party sites.

TRADEMARKS

Macromedia, the Macromedia logo, Authorware, ColdFusion, Director, Dreamweaver, Fireworks, FreeHand, JRun, Macromedia Flash and Shockwave are trademarks or registered trademarks of Macromedia, Inc. in the United States and/or other countries.

Third party products, services, company names, logos, design, titles, words, or phrases within these materials may be trademarks of their respective owners.

ISTE National Educational Technology Standards for Students, pp. 14 & 15. Reprinted with permission from National Educational Technology Standards for Students, copyright © 2003, ISTE (International Society for Technology in Education), 800.336.5191 (U.S. & Canada) or 541.302.3777 (Int’l), [email protected]. All rights reserved. Permission does not constitute an endorsement by ISTE. For more information about the NETS Project, contact Lajeane Thomas, Director, NETS Project, 318.257.3923, [email protected].

2 Building a Town Website - Teacher’s Guide © 2003 Macromedia, Inc.

Project Description In the Building a Town Website project, students build a basic informational website about their village, town, or city neighborhood. Project activities enable students to build technology and communication skills as they discover how easy it is to produce a website. You can also adapt this project to build websites with different content.

In this project, students gather information about their neighborhood and plan the design of the website. Then, they work with Macromedia Dreamweaver MX to create linked, web-ready pages that contain text, images, hyperlinks, and tables. They create a home page that introduces the town with hyperlinks that link to four other pages including history, events, maps, and a local directory. Additional pages can easily be added if you want students to expand the project. The following figures show the home page and the map page of a sample website for the city of Half Moon Bay, California.

This project guide includes materials for both teachers and students:

• For the Teacher–introduction and planning guidelines, and teaching outlines for each activity

• For Students–step-by-step directions for each activity, covering planning, building, and testing a basic town website using Macromedia Dreamweaver MX. Instructions include screen shots of completed web pages for a sample site for the city of Half Moon Bay. If you like, you can reproduce these activity materials for each student.

ISTE National Educational Technology Standards for Students (pp. 14–15) The project addresses the following National Educational Technology Standards for Students.

1. Basic operations and concepts

4. Technology communications tools

5. Technology research tools

Building a Town Website - Teacher’s Guide 3 © 2003 Macromedia, Inc.

Timing This project will take about 4–5 hours to complete. More time is required if the project involves extensive planning, includes more web pages, and incorporates the evaluation suggestions.

Time Activity

30 minutes Activity 1 Planning the Website

20–30 minutes Activity 2 Getting Acquainted with Dreamweaver MX

15–30 minutes Activity 3 Setting Up the Local Site and Root Folder

45–60 minutes Activity 4 Creating the Home Page

45–60 minutes Activity 5 Creating the Other Web Pages

30–45 minutes Activity 6 Connecting the Web Pages

15–20 minutes Activity 7 Testing the Website

30–45 minutes Activity 8 Managing the Website

Resources • Computers with either of the following configurations:

Windows t Macin osh• Windows 98 SE, Windows Me, Windows NT 4,

Windows 2000, or Windows XP

• Intel Pentium II processor or equivalent, 300 MHz or better

• 96 MB of free available system RAM (128 MB recommended)

• 275 MB of available disc space to install Dreamweaver MX

• Millions of colors, 800 x 600 resolution color display or better (1024 x 768 resolution recommended)

• CD-ROM drive

• Internet connection

• Netscape Navigator or Internet Explorer 4.0 or later

• WinZip®

• Power Macintosh (G3 or higher recommended)

• Mac OS 9.1, 9.2.1,10.1, or later

• MRJ 2.2 (for the Macromedia Flash Buttons feature)

• 96 MB of RAM (128 MB recommended)

• 275 MB of available disc space to install Dreamweaver MX

• Millions of colors, capable of 800 x 600 resolution color display or better (1024 x 768 recommended)

• CD-ROM drive

• Internet connection

• Netscape Navigator or Internet Explorer 4.0 or later

• StuffIt®

• Macromedia Dreamweaver MX installed on each computer

• Larger screen display for teacher demonstrations and student presentations

• Access to shared area on the school network

• Access to the Internet

• Sample website for the city of Half Moon Bay, California

• Multimedia assets for building the Half Moon Bay sample website

• Student activity guide with step-by-step directions


Prior Learning Very few prerequisites are needed to begin creating a website. You and your students should already be familiar with the following concepts:

• Word-processing basics

• Internet navigation with a web browser

• Procedures for saving files to the hard drive

• File naming conventions

• Vocabulary common to computer file management

For word-processing and file-saving topics, the manual that came with the word processing software on your computer is a good place to start.

Subject Knowledge Needed by Teachers • Load and save work in a shared area

• Download files from a website

• Expand compressed files (using programs such as WinZip® or StuffIt®)

• Use a large-screen display

• Access images

• Use the basic functions of Macromedia Dreamweaver MX

- To orient yourself to Dreamweaver MX: There is a free interactive training module about Dreamweaver MX available on the Macromedia Educator Training page at www.macromedia.com/resources/education/training. On the Educator Training page, in the Free Online Training column, select Dreamweaver MX from the Macromedia Fundamentals list and then click Go. The module takes 45 to 60 minutes to complete.

- To build a sample town website: Follow the step-by-step directions in Activities 1–8 of the student materials that are included with this project.

- To preview Dreamweaver MX on a computer outside of school: You can download and install a free 30-day trial version of Macromedia Dreamweaver MX from the Macromedia website (www.macromedia.com). (Note: You can install a trial software version only one time on a computer.) Once you install and start the 30-day trial copy, you have 30 calendar days to use the product.


Activity Outlines Building a Town Website has eight activities:

• Activity 1: Planning the Website

• Activity 2: Getting Acquainted with Dreamweaver MX

• Activity 3: Setting Up the Local Site and Root Folder

• Activity 4: Creating the Home Page

• Activity 5: Creating the Other Web Pages

• Activity 6: Connecting the Web Pages

• Activity 7: Testing the Website

• Activity 8: Managing the Website

The Building a Town Website Student Guide includes step-by-step directions for each activity. You can use these directions as guidelines or as a handout to help students learn the process and software functions.

Building a website using Dreamweaver MX requires no knowledge of programming in Hypertext Markup Language (HTML). Because Dreamweaver MX is a visual editor (with buttons and toolbars like a word processor), creating web pages is similar to authoring a multimedia paper. The example used in this project is a town website, but you can adapt it for a variety of purposes. You can use the step-by-step instructions to create a school website, a personal website, or a website that is a compilation of students’ work on a unit of study.

Activity 1: Planning the Website

ISTE National Educational Technology Standards for Students (pp. 14–15) 5. Technology research tools

Pre-Project Suggestion Before beginning this project, you can prepare your students by conducting a web search for favorite town sites, particularly if your students have had relatively little experience on the web. Study the layout and navigation of sites you and your students like. Check to see if they have site maps: a text version of the site content. Consider what makes a site work and how to use this information in designing the layout of your students’ own sites.

Look for sites that are easy to navigate as well as pleasing in design. Note the URLs and share them among your students. Ask the students to compile a short list of their favorite sites, looking for specific elements that will help them design their websites. The following is a list of web-based resources on the principles of web design.

• The Yale Web Style Guide info.med.yale.edu/caim/manual/contents.html This site provides a thorough discussion of various topics related to web page design.

• Dimitry’s Design Lab www.webreference.com/dlab/ This site offers informative articles related to the design aspects of web development.


• About the Human Internet webdesign.about.com/compute/webdesign/msubstyle.htm About.com lists a variety of sources for web design information and style guides.

• Responsible Netizen Institute responsiblenetizen.org/ This website provides outreach services addressing issues of the safe and responsible use of the Internet. The Online Documents link contains a template for an acceptable use policy. (Click the Copyright link.)

Activity Summary and Teaching Notes In this activity, students (or the teacher) gather information about their village, town, or city neighborhood. Then they plan the overall site layout and the design for the pages of their town website.

This project is designed so your students can either create the sample Half Moon Bay site illustrated in the activities or use their own content and design elements to create a site about their own area. You can also have students create the sample Half Moon Bay site first, and then apply what they have learned to create a second site about their own town.

Sample Project Multimedia Assets

The step-by-step instructions in the student activity materials show a sample website for Half Moon Bay. You can practice using Dreamweaver MX by building the sample Half Moon Bay website. You can download ZIP files (Windows) or SIT files (Macintosh) of the completed Half Moon Bay website and the assets for building the Half Moon Bay site file from the Macromedia website. To download and use the compressed ZIP files or SIT files:

1. Go to www.macromedia.com/resources/education/k12/. 2. From the Curriculum menu on the right side of the page, select Building a Town

Website. 3. Click a file that matches your computer platform. 4. Select where you want to save the files on your computer. (Be sure to note where the

downloaded files are saved.) 5. Locate the downloaded files on your computer. Extract the compressed files using a

program such as WinZip® or StuffIt®, making sure that the program is set to keep the folder structure intact. You should have one folder “sample_half-moon-bay-site” which contains the completed sample website and another folder “half-moon-bay-assets” which contains two subfolders “images” and “content” with the assets for building the sample website.

6. Copy the unzipped folders “images” and “content” from the “half-moon-bay-assets” folder into the root folder for your project website. If you are having students create the sample Half Moon Bay site, make these asset files available to students to put in their own root folders in Activity 3. (For specific directions see the Student Guide for Activity 3: Setting Up the Local Site and Root Folder.)

7. Repeat steps 3 to 6 for each file you want to download.

Gathering site information

If you decide students should use their own town as the subject for their website, either you or the students should gather information about your area. This is a good way to reinforce data collection skills from different sources. Information you collect could include the following:

• Demographic data, such as population, area, county, and principal industries


http://www.macromedia.com/resources/education/k12/

• Local government offices and officials, including telephone numbers, e-mail addresses, and URLs for available websites

• Community and religious organizations, including telephone numbers, e-mail addresses, and URLs for available websites

• Local history

• Cultural events, including dates

• Local maps

• Other pertinent e-mail addresses and URLs for relevant websites

Planning the site layout

Students plan the high-level structure of the site by drawing a flowchart that represents all the site pages and how they are linked.

Planning the home page

Students plan the layout and content of the home page. The activity includes suggestions for the types of external websites to which students might link if they are creating a site for their own town.

Students create a storyboard for the home page by sketching placeholder boxes to communicate the placement of their planned design elements:

• Title of the site

• Images

• Text

• External links

• Navigation links

Using the basic design for the home page, students create storyboards for the remaining site pages.

Making storyboards will help guide the structure of students’ websites. By including more detail in the storyboards, students will be able to more effectively choose the design elements to incorporate into their web pages.

Activity 2: Getting Acquainted with Dreamweaver MX

ISTE National Educational Technology Standards for Students (pp. 14–15) 1. Basic operations and concepts

Activity Summary and Teaching Notes In this activity, the teacher introduces students to the key elements of the Dreamweaver MX workspace. Students try out different functions and features of Dreamweaver.


Briefly introduce the name and purpose of each major component of the Macromedia Dreamweaver MX interface. If students are already familiar with Dreamweaver MX, you may choose to skip this activity. In Activities 4–6 students will learn how to use specific techniques for creating web pages in the context of building their own pages.

Dreamweaver MX is a visual HTML editor for designing and managing websites and website pages.

Exploring the Dreamweaver MX Workspace

Students should understand the following about the major components of the Dreamweaver MX workspace:

• The Document window displays the current HTML page (document) as you create and edit it.

• The Insert bar contains buttons for creating and inserting objects such as images, tables, layers, and frames you can add to a web page.

• The Property inspector displays properties for the selected object or text and lets you modify those properties.

• The panels on the right side of the Dreamweaver MX workspace provide additional options for modifying the properties of objects. Students will not use these panels in this project.

Using the Document window

• Students should understand that the Document window displays the current HTML page (document) as they create and edit it.

• Students should be able to identify the document status bar and the Document toolbar, as well as their primary uses.

Using the Insert bar

• Students should understand that the Insert bar contains several categories of buttons for creating and inserting objects such as tables, layers, and images.

• Students should learn how to insert an object from the Insert bar into the Document window.


Using the Property inspector

• Students should understand that the Property inspector lets you examine and edit properties of the currently selected object or text in the Document window.

Using the panels:

• Students should understand that the panels on the right side of the screen allow you to control elements in the Document window, as the Property inspector does. However, these panels contain more advanced functions that are not used in this project.

Activity 3: Setting Up the Local Site and Root Folder


Activity Summary and Teaching Notes In this activity, the teacher introduces the concept of local and remote sites. Students create a local root folder for their town website, and then copy content and image files into that folder.

Students should understand the difference between a local site and a remote site. A local site is a collection of HTML files organized in a folder (the root folder) on a personal computer. A local site may be accessed only from the computer on which it is located. When the HTML files from a local site are uploaded to a server, they constitute a remote site, which is accessible to anyone connected to the World Wide Web.

Planning the local site file structure

Students create a root folder (on their hard drive) that will contain all the site pages (HTML files) they create, as well as the images and text files that they use as resources for constructing the site pages.

The file structure should be quite simple for a small site, such as the sample Half Moon Bay site. If students are creating a site with ten or more pages, it is helpful to group the pages in a logical way and put each group in a separate subfolder inside the root folder.

Only two subfolders are suggested for the sample Half Moon Bay site, one to hold images (named “images”) and the other to hold text files (named “content”).

Setting up the local site and root folder

Students define their website in Dreamweaver MX and identify the root folder they created. Students should understand that the purpose of this process is to “communicate” to Dreamweaver the location and structure of their site.

Activity 4: Creating the Home Page




Activity Summary and Teaching Notes In this activity, students build the home page for their website (except for the navigation table). The following figure shows the sample Half Moon Bay home page.

Building the home page

Students implement their storyboard design by creating elements of the home page.

In the process of creating the home page, students learn how to:

• create a new HTML document

• name and save an HTML document

• modify page properties

• insert text

• insert hyperlinks

• insert images

• provide accessibility for web users with disabilities

• insert e-mail links*

• use layers to place text in a specific area of the page

• preview an HTML document in a browser

*Note: You may want to discuss the issue of testing an e-mail link. It would be inconsiderate for students to send a large number of test e-mail messages to a real e-mail address. Consider requesting that students check only that the e-mail sender appears when they click an e-mail link, without completing the process of sending the e-mail. To satisfy students’ natural curiosity, you might suggest that they temporarily substitute either their own e-mail address or your e-mail address. They could then test such a personal link. Note that the e-mail addresses used in the sample project are not valid addresses.

Activity 5: Creating the Other Web Pages




Activity Summary and Teaching Notes In this activity, students build the remaining pages for their website.

Building the History page

Students implement their storyboard design by creating the elements of the History page (except for the navigation table).

In the process of creating the History page, students apply previously learned skills and also learn how to:

• incorporate text previously created with a text editor or word processor

• create an unordered (bulleted) list

• use tables to format photographs

The following figure shows the sample Half Moon Bay History page.

Building the Directory page

Students implement their storyboard design by creating the elements of the Directory page (except for the navigation table).

In the process of creating the Directory page, students apply previously learned skills and also learn how to:

• use tables to format text in rows and columns

The figure on the next page shows the sample Half Moon Bay Directory page.


Building the Events page

Students implement their storyboard design by creating the elements of the Events page (except for the navigation table).

In the process of creating the Events page, students apply previously learned skills and also learn how to:

• change the bullet style in an unordered list

The following figure shows the sample Half Moon Bay Events page.

Building the Map page

Students implement their storyboard design by creating the elements of the Map page (except for the navigation table).

In the process of creating the Map page, students apply previously learned skills and also learn how to:

• use an image rollover to create an image that changes when the pointer moves over it


The following figure shows the sample Half Moon Bay Map page.

Activity 6: Connecting the Web Pages



Activity Summary and Teaching Notes In this activity, students create navigation buttons that link the pages of their website.

Connecting the web pages

Students implement their flowchart by creating a table with navigation links from each page to the other pages of their site.

The following figure shows the sample Half Moon Bay home page with the navigation table.


Activity 7: Testing the Website


Activity Summary and Teaching Notes In this activity, students conduct a technical test of their website, particularly to assure that all the links among pages and all the links to external websites function properly.

Students should devise a systematic way to test all the internal links among the pages in their site. They should note any links that do not function properly, fix these links in Dreamweaver MX, and repeat their testing.

Remind students that they should not fully test e-mail links.

Activity 8: Managing the Website


Activity Summary and Teaching Notes In this activity, students use the Site panel or window to view the structure of their site and learn how to set up a remote site and post their website to a server.

Be sure to co-ordinate with the system administrator and technology coordinator for your school before students implement this activity.



Project Assessment

Multimedia Guidelines

Following are guidelines for assessing the use of media and design elements in a website project. You can use these guidelines to check that the various elements are present and functioning appropriately.

• Typography: Titles, subheadings, and text should be displayed in sizes that reflect the content hierarchy. Avoid excessive scrolling in text blocks; use separate pages instead.

• Images: All images should be appropriate to the content and have alternative text (ALT tags). Images should be displayed with appropriate sizing and resolution.

• Layout: The layout should follow a consistent pattern and reflect the purpose of the content.

• Hyperlinks: Both internal and external hyperlinks should be appropriate for the content and should function correctly.

• Navigation: The site should be easy to navigate so information can be found easily.

Content Guidelines

Content is critical to a good website. The information contained in a website—its purpose, usefulness, and facts—should fit a specific audience, or if multiple audiences are proposed, then the organization needs to reflect these various audiences. Here are some considerations to keep in mind when planning a website:

• The purpose, goals, and audience should be clear. When addressing multiple audiences, the purpose and goals for each should be identified and the method for segmenting the information should be addressed.

• The information presented should be useful.

• The information should be as factual as necessary or as entertaining, as appropriate.

• Feedback should be actively sought.

• The site should express and fit well with the site’s stated purpose and goals.

Other Considerations

Here are some other areas that can be assessed, although they are not specifically addressed in the project activities:

• Copyright issues are addressed appropriately.

• The website displays correctly in various browsers, as required.

• If the project is part of an academic unit, assess specific content objectives and skills.