BUILDING A TOWN WEBSITE Teacher s Guide

Transcription

1 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 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 Project Assessment... 16

2 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), (U.S. & Canada) or (Int l), iste@iste.org. All rights reserved. Permission does not constitute an endorsement by ISTE. For more information about the NETS Project, contact Lajeane Thomas, Director, NETS Project, , lthomas@latech.edu. 2 Building a Town Website - Teacher s Guide

3 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. 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

4 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 minutes Activity 2 Getting Acquainted with Dreamweaver MX minutes Activity 3 Setting Up the Local Site and Root Folder minutes Activity 4 Creating the Home Page minutes Activity 5 Creating the Other Web Pages minutes Activity 6 Connecting the Web Pages minutes Activity 7 Testing the Website minutes Activity 8 Managing the Website Resources Computers with either of the following configurations: Windows Macint osh Windows 98 SE, Windows Me, Windows NT 4, Power Macintosh (G3 or higher recommended) Windows 2000, or Windows XP Mac OS 9.1, 9.2.1,10.1, or later Intel Pentium II processor or equivalent, 300 MHz or better MRJ 2.2 (for the Macromedia Flash Buttons feature) 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 Macromedia Dreamweaver MX installed on each computer 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 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 4 Building a Town Website - Teacher s Guide

5 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 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 ( (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. Building a Town Website - Teacher s Guide 5

6 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 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 This site offers informative articles related to the design aspects of web development. 6 Building a Town Website - Teacher s Guide

7 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 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 Building a Town Website - Teacher s Guide 7

8 Local government offices and officials, including telephone numbers, addresses, and URLs for available websites Community and religious organizations, including telephone numbers, addresses, and URLs for available websites Local history Cultural events, including dates Local maps Other pertinent 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 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. 8 Building a Town Website - Teacher s Guide

9 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. Building a Town Website - Teacher s Guide 9

10 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 1. Basic operations and concepts 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 1. Basic operations and concepts 4. Technology communications tools 10 Building a Town Website - Teacher s Guide

11 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 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 link. It would be inconsiderate for students to send a large number of test messages to a real address. Consider requesting that students check only that the sender appears when they click an link, without completing the process of sending the . To satisfy students natural curiosity, you might suggest that they temporarily substitute either their own address or your address. They could then test such a personal link. Note that the addresses used in the sample project are not valid addresses. Activity 5: Creating the Other Web Pages 1. Basic operations and concepts 4. Technology communications tools Building a Town Website - Teacher s Guide 11

12 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. 12 Building a Town Website - Teacher s Guide

13 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 Building a Town Website - Teacher s Guide 13

14 The following figure shows the sample Half Moon Bay Map page. Activity 6: Connecting the Web Pages 1. Basic operations and concepts 4. Technology communications tools 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. 14 Building a Town Website - Teacher s Guide

15 Activity 7: Testing the Website 1. Basic operations and concepts 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 links. Activity 8: Managing the Website 1. Basic operations and concepts 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. Building a Town Website - Teacher s Guide 15

16 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. 16 Building a Town Website - Teacher s Guide