A.

Perry ITEC 7430 Instructional Design Understanding by Design Learning Plan Design Tools and Samples Stage 1 Identify Desired Results Established Goals: Standard II: Planning and Designing Learning Environments and Experiences. Teachers plan and design effective learning environments and experiences supported by technology and to plan strategies to manage student learning in a technology-enhanced environment. Professional Development Focus #1: Teacher Web Site Production Additional Information: Voluntary involvement for teachers in grades 9-12, professional development sessions will be held one day per week, for three weeks lasting 1 hours, teachers will have brief assignments to complete between each meeting time Essential Questions What essential questions will be considered? Overarching: How has the use of web sites changed your journey as a teacher? How do you think the use of web sites has changed student learning? What impact would having a web site created for your courses change student achievement? What impact would having a web site created for your courses change your achievement as a teacher? Would your students think of you differently if you incorporated technology into instruction? Explain your thoughts? Since advanced technology is such a huge part of teenagers lives today, explain why you would understand students thinking and Understandings What understandings are desired? Through professional development sessions focusing on teacher web site production (to increase student awareness, involvement, and achievement), teachers will understand:

That students are using technology: 87% of American children between the ages 12-17 are using the Internet. This is equivalent to 21 million teenagers. 33% percent of online teens share their own creative content online, such as artwork, photos, stories or videos. 32% percent say that they have created or worked on web pages or blogs for others, including groups they belong to, friends or school assignments. 22% percent report keeping their own personal webpage. 19% percent of online teens keep a blog, and 38% percent of online teens read blogs. (Pew Internet and American Life, "Teens and Technology," November, July, 2005.)

A. Perry be placed on their level through creating a teacher web site. Topical: What are terms related to actually putting a web site on the Internet? Why is using design principles important when creating a web site?

That creating a web site to accompany their class will increase student interest and involvement in the class. The process of creating a web site is fun and easy. The steps to creating a web site for student use How to keep the teacher made web site current How to use the web site for: o Posting assignments, calendars, syllabus, policies, procedures, expectations, student work, accomplishments, photos, and more. o Communication with parents, students, and the community o Organizing course materials o Teaching and building student awareness of technology and its uses

What key knowledge and skills will students (in this case teachers) acquire as a result of this unit? The teacher will be able to: Define and discuss the following terms: Internet Service Provider, Joint Photographic Experts Group, Web Hosting Service, Internet, Domain Name, World Wide Web, Macromedia Dreamweaver (these terms will help teachers understand what they have to know to create their web site) Define: Facebook/Myspace, Wikis, Blogs, Instant Messaging, YouTube, Podcasting, Ipods (these terms will help teachers become more aware of the advanced technologies that their students already know so much about) Discuss basic design principles dealing with web creation Create a web site for courses that feature hyperlinks, email links, video clips, tables, graphics, and buttons Increase student involvement in course by adding up to date assignments, calendars, policies, student work, expectations, and more to the web page List the steps to making a web site live including purchasing a domain name, and web space on the Internet. Post and update their web site weekly or daily Locate extra information needed to upgrade the site and add new features and technology in the future, for example podcasting. Explain to other teachers, administrators, and parents how using this form of technology has enhanced their classroom instruction and environment.

A. Perry Stage 2 Determine Acceptable Evidence

Performance Task Description: Goal: To create a web site to use with students to enhance instruction and classroom involvement. Role: Teachers are asked to become a web designer whose task is to create an eye catching and informational web site for viewers. Audience: 9th -12th grade teachers interested in incorporating technology into the classroom. Situation: Teachers will participate in three professional development sessions at the beginning of the school year. These sessions will take place in a computer lab. Performance Tasks: (see rubrics on the following pages) How will the students be assessed? A Web Site for You! Teachers create an interactive web site to present to their students as a tool to use in and outside of the classroom to increase student success and involvement in the course. (Assessment #1) What Ill Need to Take Away! Teachers will construct a PowerPoint presentation outlining how their web site was made, key terms, and helpful tips to ensure that they will keep their sites up and running in the years to come. (Assessment #2)

Other Evidence: Pre and Post Test: Assessing the information that is known at the beginning of the training as well as at the end of the training. Journaling: Provide an spoken and written (through journaling) explanation of how the use of web sites has changed their teaching journey as well as how web site use has changed student learning. Group Work: Develop a chart interpreting the impact web sites for specific courses could have on student and teacher achievement. Pros and cons should be included. Individual Homework: Conduct research to create a list of design principles needed to create a web site as well as the steps it takes to make a site live.

A. Perry

Question and Answer Sessions/Discussion as needed Standards and Criteria for Success: The end result will reflect the following standard: Teachers plan and design effective learning environments and experiences supported by technology and to plan strategies to manage student learning in a technology-enhanced environment.

Self-Assessment and Reflection: 1. Critique and self assess your web site at the end of the training sessions through journalizing and self reflection as well as group discussion. 2. Reflect through individual meeting with instructor on the experience.

A. Perry

Web Site Design : A Web Site for You (Assessment #1)

Teacher Name: ________________________________________ Course:_________________________

CATEGORY
Layout

10-9
The Web site has an exceptionally attractive and usable layout. It is easy to locate all important elements. White space, graphic elements and/or alignment are used effectively to organize material. Colors of background, fonts, unvisited and visited links form a pleasing palette, do not detract from the content, and are consistent across pages. The site has a well-stated clear purpose and theme that is carried out throughout the site.

8-6
The Web pages have an attractive and usable layout. It is easy to locate all important elements.

5-3
The Web pages have a usable layout, but may appear busy or boring. It is easy to locate most of the important elements.

2-1
The Web pages are cluttered looking or confusing. It is often difficult to locate important elements.

Score

Color Choices

Colors of background, fonts, unvisited and visited links do not detract from the content, and are consistent across pages. The site has a clearly stated purpose and theme, but may have one or two elements that do not seem to be related to it. There are 1-3 errors in spelling, punctuation or grammar in the final draft of the Web site.

Colors of background, fonts, unvisited and visited links do not detract from the content.

Colors of background, fonts, unvisited and visited links make the content hard to read or otherwise distract the reader.

Content

The purpose and The site lacks a theme of the site is purpose and somewhat muddy theme. or vague.

Spelling and Grammar

There are no errors in spelling, punctuation or grammar in the final draft of the Web site.

There are 4-5 errors in spelling, punctuation or grammar in the final draft of the Web site. Links for navigation take the reader where s/he expects to go, but some needed links seem to be missing. A user sometimes gets lost.

There are more than 5 errors in spelling, punctuation or grammar in the final draft of the Web site. Some links do not take the reader to the sites described. A user typically feels lost.

Navigation

Links for navigation are clearly labeled, consistently placed, allow the reader to easily move from a page to related pages (forward and back), and take the reader where s/he expects to go. A user does not become lost.

Links for navigation are clearly labeled, allow the reader to easily move from a page to related pages (forward and back), and internal links take the reader where s/he expects to go. A user rarely becomes lost.

A. Perry
Interest The author has made an exceptional attempt to make the content of this Web site interesting to the people for whom it is intended. The author has tried to make the content of this Web site interesting to the people for whom it is intended. The author has put lots of information in the Web site but there is little evidence that the person tried to present the information in an interesting way. The author has provided only the minimum amount of information and has not transformed the information to make it more interesting to the audience (e.g., has only provided a list of links to the content of others). Graphics seem randomly chosen, are of low quality, OR distract the reader.

Graphics

Graphics are related to the theme/purpose of the site, are thoughtfully cropped, are of high quality and enhance reader interest or understanding. The fonts are consistent, easy to read and point size varies appropriately for headings and text. Use of font styles (italic, bold, underline) is used consistently and improves readability. Web site includes email link, syllabi, lesson plans, calendar, helpful hints for studying, and course resources. These components are created using tables, graphics, and bulleted lists.

Graphics are related to the theme/purpose of the site, are of good quality and enhance reader interest or understanding. The fonts are consistent, easy to read and point size varies appropriately for headings and text.

Graphics are related to the theme/purpose of the site, and are of good quality.

Fonts

The fonts are consistent and point size varies appropriately for headings and text.

A wide variety of fonts, styles and point sizes was used.

Site Includes all components discussed during training sessions

Web site includes five of the six major components discussed in the training session but uses tables, graphics, and bulleted lists.

Web site only has four major components discussed in the training session but does use tables, graphics, and bulleted lists.

Web site on has a few major components discussed in class and doesnt use tables, graphics, and bulleted lists.

Total

90 Possible Points

Comments:__________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________

A. Perry What Ill Need to Take Away My Own Guide To Web Design PowerPoint Presentation Rubric Assessment #2

The PowerPoint presentation created throughout the three training sessions should include the following: (each side is worth 10 pts and comments will be provided) Slide 1: Defining a site, naming a site, getting a domain name, and internet service provider _________________________________________________________________ _________________________________________________________________ Slide 2: Setting up the Default Image Folder and Organizing Files and Information _________________________________________________________________ _________________________________________________________________ Slide 3: Creating new pages and saving _________________________________________________________________ _________________________________________________________________ Slide 4: Using text (aligning, formatting color, font, and size) _________________________________________________________________ _________________________________________________________________ Slide 5: Creating email links, and hyperlinks to resource sites _________________________________________________________________ _________________________________________________________________ Slide 6: Inserting, formatting, and editing tables _________________________________________________________________ _________________________________________________________________ Slide 7: Using bulleted lists, and inserting pictures and other graphics, Using graphic links _________________________________________________________________ _________________________________________________________________ Slide 8: Adding Pages and linking them together _________________________________________________________________ ________________________________________________________________ Slide 9 and 10: Plan for maintenance of web site weekly _________________________________________________________________ _________________________________________________________________ Additional Comments: _________________________________________________________________ _________________________________________________________________

A. Perry Pre-Test/Post Test * Web Site Creation

Name:________________________________________ Course:_______________________ Use the following word bank to match the definitions to the term. A. Internet Service Provider B. Domain Name C. World Wide Web 1. 2. 3. 4. 5. 6. 7. 8. 9. D. JPG E. Wiki F. Blog G. Dreamweaver H. Uniform Resource Locator I. Property Inspector

A file format, designed for the transfer of photographic images over the internet. _____ A company that provides Internet access and Web site hosting services. _____ The global address of documents and other resources on the Web. _____ An identifying name for an organization on the Internet, alias for the actual numeric IP address. _____ A system of extensively interlinked hypertext documents, a branch of the Internet. _____ A software used to create web sites through visual layout tools, application development features, and code editing support. _____ An online diary, a personal chronological log of thoughts published on a Web page. _____ Displays the properties of the currently selected HTML element in Dreamweaver. _____ A collaborative website whose content can be edited by anyone who has access to it. ____

Answer the following Questions. Write True or False beside each. 10. Adobe Photoshop is strictly an animation software used to create motion graphics for the web. __________________ 11. Myspace and Facebook are social networking sites that allow users to find friends, family, and even meet new people in an online community. _______________________ 12. It is very important when designing web pages to make sure that you save all the files you need for your web site in one place. ___________________________ 13. Images, pictures, and graphics should be saved in a font folder. _____________________ 14. In Dreamweaver, one can format type by changing font, size, and color. ______________ 15. There is not need to save your work periodically when creating a web site. The software always saves. __________________________ Answer the following fill in the blank questions. 16. To create a link to your email on your web page use the ___________________ icon on the _____________________ toolbar. 17. To edit a table select the Big Color drop down box on the _________________________. 18. To preview your web site before making it live press ________________________. Short Answer: List three different design principles to follow when creating web sites? Explain each.

A. Perry

Learning Plan- Stage 3 Where is this lesson going? This section states clear goals and why the students need to know the information. It captures purpose from the students point of view taking into account what they know and where they are coming from. This section allows students to paint a picture of where they are going and why. 1. The teacher introduces the professional development sessions and its content by explaining: We will explore the following to learn more about the use of technology in education: How has the use of technology and web sites changed your journey as a teacher and how has it impacted student learning in recent years? We will learn about web site design principles and how to incorporate them in our own web sites. We will evaluate and critique the web sites we create and discuss how to successfully keep them updated. 2. To accomplish these goals we will define new terms relating to technology and web site development, learn the steps to creating the site and learn how to make it live. Lastly we will discuss and learn how to keep the site current by creating a PowerPoint presentation summarizing the information from the professional development sessions. How will you hook the students at the beginning of the unit? What will make them interested in the material? This section is used to hook the students. One way that this can be done is through personal connection. To hook the students at the beginning of the professional development session we will view the short video called Shift Happens. http://www.youtube.com/watch?v=1RXNWwGUsBU This will hook the students by: Opening their minds to new and quickly changing technologies used vastly used by the students they are teaching everyday. Trying to make them aware of change! It is important that the teachers in the professional development session get excited about changing the way they teach to stay in tune with our students. Becoming more aware of the world their students are growing up in as it is very different than the world they grew up in. (Desired Understandings) A second presentation will be viewed. This PowerPoint presentation features information/facts about students and their use of technology.

A. Perry

10

After watching this video and presentation we will discuss the essential questions about web sites and how they have changed education and learning in general. (Essential Questions 1, 2, 4) How will the students be equipped for the lesson? What will make them want to explore the big ideas? This section outlines what specific learning activities, guided instruction, and out of class work is needed to enable students to deepen their knowledge and understanding of the material. This is the core of this stage. Incorporating the six facets of understanding: Explanation The students will express their feelings on how they think the world wide web and Internet has changed their journal as a teacher. This will be done after the discussion above and will be their first journal entry. (Essential Questions 1) Interpretation The students will brainstorm in groups creating a chart that interprets the impact that web sites for specific courses could have on student and teacher achievement. Pros and cons will be included. (see worksheet.) (Essential Question 3) Students will explore and interpret basic design principles provided through a handout. They will be asked to critique three sites using the design principles. (Essential Question 8) The instructor will lecture as the students watch a PowerPoint presentation outlining key terms and advanced technologies) Students will then discuss key web site terms in order to create their web pages. (Essential Questions 7) Application With teacher assistance students will walk through the steps to creating a web site for a specific course (not necessarily their own course, everyones first web site will be the same). A question and answer session will take place after the first site is created. (Desired Understandings and bullets 4-7) Assessment #1: A Web Site for You! Next the teachers in the staff development session will create an interactive web site to present to their students as a tool to use in and outside of the classroom to increase student success and involvement in the course. (see attached activity sheet for steps, students will use the same steps

A. Perry as the first site they created)

11

Assessment # 2: What Ill Need to Take Away During all three training sessions teachers will be constructing a PowerPoint presentation outlining how a web site is made, key terms, and helpful tips to ensure that they will keep their sites up and running in the years to come. (see rubric) Perspective and Empathy Through discussion the instructor will prompt students to answer the following essential questions: Since advanced technology is such a huge part of teenagers lives today, explain why you would understand students thinking and be placed on their level through creating a teacher web site. This activity allows the students to see the advantages of web site creation through the students perspective. A brief journaling activity will accompany this discussion. (Essential Questions 5, 6) Self-Knowledge This facet of understanding will be reviewed further in the next section. When and how will the students be given opportunities to rethink ideas, reflect on their progress, and review their own work?

Opportunities for re-thinking, revising, and reflecting are outlined below. Once the students have successfully created course web sites, they will critique their own site using the basic design handout. Students will journalize self reflective thoughts about their web sites. The journal entry should include elements of the site that need to be re-visited. Students will address the following questions in the journaling activity: What parts of the site do you like the best? What parts of the site do you like the least? Does everything work properly? Does the site follow basic design principles discussed in class? How will the students like the site? Is the site user friendly? Overall, what are your thoughts about the site? Next students will come together as a whole group to critique each others work. Students will make note of possible changes that could be made. The web site creation rubric will be used at this time as a guide to help the critiquing process. A group discussion will also be held so that students can communicate their difficulties and rethink the elements of their project that did not work correctly. Students will have time to revise their work using the suggestions they

A. Perry thought of during journaling plus other student input. How will the activities and lesson allow the students to evaluate their progress and self reflect and assess?

12

Using the rubric provided students will reflect through an individual meeting with the instructor on their experience creating a site and the professional development session as a whole. The instructor will prompt the students by asking the following questions: How will you stay motivated to update your web site? From looking at the rubric how would you grade your site? Tell me about your experience in this session? Do you think the time was well spent? Differentiation To be able to best help teachers learn about web site creation to he incorporate technology into their learning environment, information was gathered before the professional training sessions. The following accommodations will be made. The three learning styles presented by the teachers in the training are as follows: 1. Visual Learner (one learns through seeing, thinks in pictures, learns best from visual displays including textbooks, videos, and handouts) 2. Auditory Learner (one learns through listening, verbal lecture, discussions, listening to what others have to say, one interprets meaning of speech through listening, and written information is more meaningful if it is heard) 3. Kinesthetic Learners (one learns through moving, doing, and touching, one learns best through hands-on approaches, finds it hard to sit still for long periods of time, and is easily distracted, one feels the need for exploration) Learning Style Visual Auditory Kinesthetic Teachers 5 2 5

How will the lesson be tailored to individual learning styles, talents, interests, and needs?

The findings relating to learning styles were very informative. Because the majority of teachers are visual or kinesthetic learners, learning about technology through showing equipment and presentations, along with actually using the computers in a hands-on lab will be beneficial. We will be in the computer lab during all three training sessions. This will allow the teachers to be at the computer receiving hands on

A. Perry

13

experiences with the computer. During the initial lecture on terms and basic web design principles, a PowerPoint presentation will be presented. The PowerPoint will be viewed on the LCD screen as well as on individual computer screens. I will verbally go through the presentation for auditory learners. An additional podcast will also be available for teachers to revisit for more clarification if needed. Handouts of the presentation will also be provided so that teachers will have something to refer back to as we complete the steps to creating the web site. Lastly the sessions will all be videotaped and distributed to the teachers in the training session. From evaluating the teachers before the training began, I learned that these teachers worked best in a small group environment. The training session was limited to twelve students to accommodate this need. Additional one on one training sessions will also be made available upon teachers requests. Also, a forth session will be scheduled in case students need more time with the instructor. Incorporating Gardners Strategy for providing different Entry Points: It is important to take into consideration the individual differences these teachers may have. The following entry points have been addressed throughout the sessions and are linked to the associated activities. Narrational Entry Point- the hook activity presents a story relating to the topic. Logical-Quantitative Entry Point- using percentages incorporates quantitative information Foundational Entry Point- here the vocabulary is examined Aesthetic Entry Point- two visual aids will be provided Experiential Entry Point-the hands-on approach will be covered as we walk through the step by step directions of creating a web site How will the material be organized to ensure engagement and optimize deep understanding for all learners?

The material will be organized in the following way: Session I A pre-test will be given to assess the teachers knowledge of web site creation and terms Hook Activities: Shift Happens and PowerPoint presentation on Student Technology Use Whole group discussion on o How web sites are impacting student work and learning o How web sites have impacted their journey as teachers Journal Entry 1 Group Activity on the positives and negatives of having a

A. Perry

14

teacher created web site Lecture (using PowerPoint presentation) and discussion on web site creation terminology and basic design principles. (see bullets 1, 2, 3) Group Activity on critiquing three sites using basic design principle handout and web site rubric. Students will begin creating their practice site using handouts. Teacher will be going through the steps with students using the LCD projector. Students will begin to create their What Ill Need to Take Away PowerPoint. (they will use the materials given and rubric as a guide) Journal Entry 2 Outside of session activity (homework): Students will conduct research to create their own list of design principles needed to create a web site as well as the steps needed to make their site live. Question and Answer Session

Technology Resources: Computer software used: Microsoft Word, Microsoft PowerPoint, Macromedia Dreamweaver and an LCD projector, the Internet (for podcasting and research), a Video Camera. Session II Brief review from the first session Discussion about the outside of session activity. Students will share the research results. Students will continue working on their practice sites as teacher walks them through each step. Students will continue to work on their What Ill Need to Take Away PowerPoint. Begin Assessment 1: A Web Site for You Journal Entry 3 Question and Answer Session

Technology Resources: Computer software used: Microsoft Word, Microsoft PowerPoint, Macromedia Dreamweaver and an LCD projector, the Internet (for podcasting and research), a Video Camera.

A. Perry Session III

15

Brief review from the second session Assessment 1: A Web Site for You. Students will have the entire session to create their own course web site. Critique and self assess through whole group discussion and journaling Teacher will conduct individual meetings with students to review web sites with rubric Complete Assessment 2: What Youll Need to Take Away Students will complete the post test to access their knowledge compared to entering the training sessions. Question and Answer Session Closing/Scheduling of Session IV if needed.

Technology Resources: Computer software used: Microsoft Word, Microsoft PowerPoint, Macromedia Dreamweaver and an LCD projector, the Internet (for podcasting and research), a Video Camera.

A. Perry Group Work The Impact of Course Web Sites In groups brainstorm the following topics:

16

What are the positive aspects of having a teacher created web site for students to use in and out of class? What are the negative aspects of having a teacher created web site for students to use in and out of class? What are the positive aspects of having a course web site for teachers? What are the negative aspects of having a course web site for teachers? Pros for course web sites for students Cons of course web sites for students

Pros for course web sites for teachers

Cons of course web sites for teachers

A. Perry

17

Basic Web Design Principles Designing an effective web site requires more than just gathering relevant information and posting it on the web. Like a good paper or research presentation, a quality web project demands as much attention to the selection, organization, and presentation of material as to the underlying research itself. You should strive, above all, to be both clear and engaging in every aspect of site design. BEFORE YOU BEGIN: Consider your audience and your goals. You should have a clear sense of who will be using your site and what kind of experience you are hoping to provide. What exactly are you trying to accomplish here? Why is this important? Plan your site on paper first. You can draw a "family tree" of pages with arrows indicating links. Or you can make a hierarchical outline. Either way, it is essential to organize your information and lay out the architecture of your site before attempting to implement your vision.

SITE LAYOUT: Strive for consistency. You want your project to have an identity, so all the pages in your project should have a common feel: there should be consistency among backgrounds, color schemes, navigational tools, and tone of voice. Provide a rich set of links within your site. Ideally, there should be multiple ways for your user to navigate your pages. You should consider including a prominent 'home' link or icon on each page, a menu or table of contents, and highlighted links within textual material to related information elsewhere on the site. Don't hide important information. Users don't like to click too many times to find the information they want -- if information is particularly important, make it accessible up front. On any given page, remember that as with a newspaper, the top left corner is the most prominent. See the National Geographic Website for a good example.

THE WEB MEDIUM: Provide opportunities for interaction. How is your site any different from a traditional print document? How can you involve the reader in ways that non-digitized texts usually cannot? Interactivity can be a compelling, innovative means of engaging your reader and creating experiences that cannot be replicated in other media. Avoid text-only pages. Ideally, a user should never encounter an entire screen full of uninterrupted text in browsing your site. Again, take advantage of the web medium! Don't sacrifice elegance for pizzazz. Just because you can make images fly across the screen does not mean you necessarily should. Every design element of your site (colors, images, animation) ought to correspond thematically with the content and goals of your project. Provide a link for every URL you mention in your site. If your bibliography or notes include a citation for another website, list the URL in full, but make it 'clickable' as well so that the user can go directly to the site in question.

THE FRONT DOOR: Give your site a descriptive title. Your title should convey the content of your site in a concise but engaging manner.

A. Perry

18

Include a brief introduction. This should be part of your site's home page, and should explain the scope and purpose of the site. Once users have noticed your title and followed a link to your site, they will expect quickly to find a further elaboration of your title, a brief paragraph or two describing what the site is all about and what makes it interesting. You've caught the user's eye with your title; the introduction is your chance to heighten their interest and persuade them to actually stick around and explore. Make your site's home page as useful a starting point as possible. The viewer should be able to see at a glance what your site is about, how it is laid out, and what kinds of resources and features it includes. Ideally, all of this information (along with your site title and introduction) should be visible on a single fast-loading screen that requires a minimum of scrolling.

ACCESSIBILITY: Make sure your text is legible. Check the size, color, and font of all text within your site to confirm that it can be easily read. Be especially careful of dark or fancy backgrounds that make text hard to read. Make sure your site is platform independent. Your site should be viewable on both Mac and Windows machines using either of the most commonly available browsers, Netscape and Explorer. Consider the needs of your viewers. Think about the bandwidth your site will require. Keep in mind that not all users will have the luxury of an ethernet connection. Minimize the memory requirements of your site by compressing images and other large files. And make sure all your images have ALT-TEXT behind them. This makes the site accessible both to low-vision users and users with slow modems who have turned the images off.

THE END GAME: Thoroughly test your site. Ask a friend to sit down and explore your site. Ask them to think out loud, and watch them navigate the site. Do they get lost? Do they have trouble finding links? Do they have trouble understanding your labels? Do they understand your prose? Ideally, you should elicit and incorporate feedback about your site in the course of developing it as well as when its nearing completion. Be sure to test your site both of the most commonly used browsers, Netscape and Internet Explorer. Proofread carefully! Check carefully for spelling and grammatical errors before posting your written materials to the web.

http://www.umich.edu/~ece/resources/design.html

A. Perry

19

Creating a Teacher Site for Student Use

Staff Development- Savannah Arts Academy

Step 1: Step 2:

Start Dreamweaver. Define your local site.

1. Click Site, Manage Site, and Select New. Choose Site. If necessary, click on the ADVANCED tab and make sure that the LOCAL INFO is selected. 1. Next to SITE NAMEinstead of Unnamed Site 1 type PRACTICE

Step 3: Step 4:

Name the site.

Set the local root folder.

1. Click on the folder at the end of the local root folder name box. 2. Navigate to the desktop. 3. Click on the CREATNEW FOLDER icon 4. Name your new folder PRACTICE 5. Click OPEN and then click SELECT HINT: It is VERY important when designing web pages to make sure that you save all the files you need for your web site in one place. You have just created a folder on your desktop to hold all of the files for the web site you will be creating. Step 5:

Set the DEFAULT IMAGES FOLDER

1. Click on the folder at the end of the default images folder name box. 2. Navigate to the folder you just created and open your PRACTICE folder 3. Click Select HINT: It is VERY important to save images/pictures/graphics for the web site in the IMAGES folder. Remember, everything has to be in one folder! 4. Select OK 5. Select DONE NOTE: You have just set up your LOCAL SITE and the folder in which all files will be stored for this web site. Now you are ready to create the home page for your web site. Step 6:

Create a new page in Dreamweaver.

1. Select File, New. 2. For the Category, Select BASIC PAGE. 3. Click Create. (A blank page in Dreamweaver should show up!)

Step 7:

Save your work.

1. Select File, Save As. 2. You should be inside your PRACTICE folder. If you are not, navigate to that folder now. 3. Type index.html as your file name NOTE: index.html is a common home page name for web sites. I would recommend you ALWAYS name your home page as index. Youll develop your own personal style of naming files

A. Perry for web pages, but it is good design to have a consistent format for your files names. Using all lowercase letters and no spaces are also good design principles.

20

Step 8:

Type some text on your home page.

1. On the blank Dreamweaver web page, key the following text. HINT: If you hit enter, it will double space. If you want single spacing, press SHIFT + ENTER. Your Name Teacher Web Site School Name: Your School Name Email: Your email address Syllabi Lesson Plans Calendar Helpful Hints for Studying Thought for the day: This is the first day of the rest of your life. This page was created by (your name) on date. Step 9:

Save your work.

HINT: Periodically, save your work. When I complete a section or a portion of the web site I had difficulty getting exactly like I wanted, I save. 1. Select File, Save. Step 10:

Align text.

1. Highlight the first three lines of text. 2. In the text properties box, select ALIGN CENTER. TRY THIS: Right align the last line of the text on the page.

Step 11:

Format the font, size, and color of text.

HINT: The wise people that study things related to web site say a Sans Serif font like Arial is better for headings and a Serif font like Times New Roman is better for the body font. These wise people also say that blues and yellows work well together and are easy on the eye for web pages. Other colors may be used as well, just think about sitting at the computer and how colors affect the eye. 1. Highlight the first line of text. 2. Select the font drop down menu from the text properties box.

A. Perry

21

3. Choose the font for your first line of text. You might have to select the font to add to your font list if a font is not available in the font list. 4. With your text still highlighted, select the Text Color drop-down box on the text properties box. 5. Select the color of your choice for the title of your page. 6. With the text still highlighted, select the Size drop-down box on the text properties box. 7. Select the size of your choice for the title of your page. 8. Click at the end of your title. How do you like what you created? Edit the text font, color and size as needed for your liking. 9. Edit the font, color, and size of your second and third line of text. 10. Save your work. TRY THIS: Format the text: Thought of the Day at the bottom of the screen to your liking. Step 12:

Create a link to your email.

1. Select the Common Toolbar. 2. The second icon Email Link. 3. Type the text that you want to appear on your screen for your email link. I leave my email address in the text box so people can see my actual address. 4. Your email should show up in the email dialog box. If not, type your email address here. 5. Save your work. TRY THIS: Make your name an email link to your page.

Step 13:

Insert a table into your document.

1. Click your mouse before the word Syllabi. 2. Click on the fourth icon on the Common ToolbarThe Table icon. 3. Enter 4 columns and 2 rows. 4. Click OK. A blank table will appear on your screen. NOTE: You may change the settings of the table in the Property Inspector after you create the table. Some typical explanations of table features: Border: Line around the outside of the table Cell Padding: Spacing inside each cell Cell Spacing: Spacing between each cell outside the cell. 5. Copy and paste your headings Syllabi, Lesson Plans, Calendar and Helpful Hints for Studying into column 1 of your table. 6. Type the simple description of each heading in column 2 as viewed in the table below: Syllabi For each course a tentative syllabus is available to you online. You may check back with the syllabus at anytime to make sure you know what is supposed to be done in this class. Lesson plans will be posted weekly. If you are absent from class, please check the lesson plan section of this web site to see what you missed. Contact me through the email above if you have any questions. The yearly calendar is posted here for easy reference. Important dates and holidays are listed. Homework, tests,

Lesson Plans

Calendar

A. Perry and project due dates are subject to change, so please check the calendar often. Make sure you read all assigned material prior to coming to class each day. (Enter) If you have questions, ask immediately. (Enter) Do not procrastinate.

22

Helpful Hints for Studying

7. Save your work. Step 14:

Edit your table format.

1. Select your table by clicking between the rows. A black box will appear around the entire table when the table is selected. 2. In the Property Inspector, select the Bg Color drop down box. Choose a color for the background of your table. 3. Align the table to center by selecting Center in the Align box of the Property Inspector. 4. Individual cells can also be changed. Click in a cell and edit the properties of that cell in the Property Inspector. 5. Edit the font, size, and color of your text within the table as desired. 6. Save your work.

Step 15:

Format text as a bulleted list.

1. Highlight the three lines of text in the Helpful Hints for Studying column. 2. Click the bullet icon in the Property Inspector. You might have to hit enter to separate your lines of text into 3 separate bullets. 3. Save your work. You will need a picture for this portion of your site. Good web designers use picture/images/graphic that compliments the site. In this case, you will use any picture/image/graphic that you have on your computer. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. Minimize Dreamweaver Program. Double click My Documents, choose My Pictures. Select a picture. Open your picture and choose to Save it. Navigate to your PRACTICE Folder. Click Save. You now have a picture/images/graphic saved into your folder that you can use on your web site. Maximize your Dreamweaver Program. Click on your web page at the end of your title. Click Enter. Choose Insert, Image. Select the file of the picture/images/graphic you saved. Your picture should be displayed on your web page. Re-size the picture by dragging from the corners of your picture. Save your work.

Step 16:

Insert a picture on your site.

A. Perry Step 17:

23

Preview your work.

1. 2. 3. 4. 5.

Look at what you have created by previewing your work. Save your work. Press F12. A local publish of your web site will be open on your screen using default browser. Close the window when you are finished looking at your work. In the Property Inspector, click Page Properties. In the Appearance Category, select a background color. Choose Apply. You can see what the color looks like on your page. After you have a color you like, click OK. Save your work.

Step 18:

Add a background color to your web page.

1. 2. 3. 4. 5.

Step 19:

Insert a horizontal line/rule on your web page.

1. 2. 3. 4. 5.

Click at the beginning of the last line of text. Hit enter. Click Insert, HTML. Select Horizontal Rule. A line will appear on your screen wherever your cursor is located on the page.

Step 20:

Link a graphic to another site.

1. Click on the picture/graphic at the top of the page. 2. In the Property Inspector, click in the Link box. 3. Type the entire web address of the web site you want to link to. You must include the entire site. For example: http://www.yahoo.com 4. Save your work. 5. Preview your work. (F12 to preview; click on the image. If you are not connected to the Internet, you will not get the site!) 6. Click the link to see if it takes you to the page. 1. 2. 3. 4. 1. 2. 3. 4. 5. Click Text. Choose Check Spelling. Follow the prompts on the screen to spell check your entire document. Save your work. Create a new page. (File, New, Basic Page, Create) Type the word Syllabus at the top. Hit enter. Type the word Home. Save this page as syllabus.htmlmake sure you are in the PRACTICE folder. Following the format as the syllabus page, create a page for the Lesson Plans, Calendar, and Helpful Hints for Studying.

Step 21:

Spell Check your web page.

Step 22:

Create additional web pages.

A. Perry 6. Save each page as all lower case letters, no spaces, and .html as the file extension. Step 23:

24

Create text links.

Now that you have created an additional 4 pages, lets link them to the home page. 1. Highlight the word Syllabus in the table on the first page you made. (To get to the first page, click INDEX.HTML tab at the top of the working space.) 2. In the Property Inspector, click the Browse for File icon at the end of the Link box. The pages you made should appear on the list of files in your document. 3. Select the syllabus.html file from the list. 4. Click OK. The word should change to hyperlink. 5. Link each word in the table to the corresponding page you created. 6. Save your work. Now that you have created links to each page, you must create a link on each page back to the home page. 1. Open the syllabus.html page. 2. Link the word Home to the index.html file. 3. Save your page. 4. Add the home link to each of the additional pages you created. 5. Preview your page. Can you go from the home page to the syllabus page? Can you back to home page with one click?