Created Revised 4/15/2010 Office of Information, Technology and Accountability Web Page Design Planning 1

Office of Information, Technology and Accountability 2 Created Revised 4/15/2010 While Waiting: Create a folder on your desktop.  Within that folder, create 3 more folders called, Docs, Images, and Media Open an HTML editor (We have MS FrontPage available in the SPS). Create a blank page and “save as” index.htm to the folder you created on your desktop.

Office of Information, Technology and Accountability 3 Created Revised 4/15/2010 Nine Elements of Digital Citizenship Student Learning and Academic Performance 1. Digital Access: full electronic participation in society 2. Digital Literacy: the process of teaching and learning about technology and the use of technology 3. Digital Communication: electronic exchange of information School Environment and Student Behavior 4. Digital Security & Safety: electronic precautions to guarantee safety/physical well-being in a digital technology world 5. Digital Etiquette: electronic standards of conduct or procedure 6. Digital Rights and Responsibilities: those freedoms extended to everyone in a digital world Student Life Outside the School Environment 7. Digital Commerce: electronic buying and selling of goods 8. Digital Health and Wellness: physical and psychological well-being 9. Digital Law: rights and restrictions

Office of Information, Technology and Accountability 4 Created Revised 4/15/2010 Digital Citizenship Links spx spx

Office of Information, Technology and Accountability 5 Created Revised 4/15/2010 Standard 1: Demonstrate proficiency in the use of computers and applications as well as an understanding of concepts underlying hardware, software, and connectivity. Standard 3: Demonstrate ability to use technology for research, problem-solving, and communication. Standard Addressed

Office of Information, Technology and Accountability 6 Created Revised 4/15/2010 Web Design: By the end of this session you will know and be able to: Create a Web page that incorporates data from other files. Create and manipulate illustrations using a drawing or painting program (e.g., adjust scale, size, shape). Identify capabilities of technology resources and understand how they can be used for lifelong learning. Select the appropriate technology tool for a task.

Office of Information, Technology and Accountability 7 Created Revised 4/15/2010 You Will Demonstrate This By ~ Creating a “Home Page” supported with:  Your outline of the page  The creation of, research, and archiving of digital materials for the page/site  Changed and/or manipulated backgrounds  A page layout using tables

Office of Information, Technology and Accountability 8 Created Revised 4/15/2010 Planning: Let’s talk about the file/folder system. Very simply put, it’s the easiest system for archiving the materials you’ll be putting on your pages by directly posting it or setting up a hyperlink to it. As a browser loads your page, it is drawing the files you put on your page (or hyperlinked to) from their respective folders. Like looking in the right drawer in a dresser for socks. School DocsImagesMedia Index

Office of Information, Technology and Accountability 9 Created Revised 4/15/2010 One of the most important things regarding web page design is be organized. When a web page completely organized it can help us reach our desired result quickly with minimal frustration. Name Docs ImagesMedia Organize:

Office of Information, Technology and Accountability 10 Created Revised 4/15/2010 Putting specific types of files into the proper folders will help browsers find your site’s content easily and increase the speed of loading the index page. Name Docs ImagesMedia Organize:

Office of Information, Technology and Accountability 11 Created Revised 4/15/2010 This is how the inside of your main folder should appear at this point.

Office of Information, Technology and Accountability 12 Created Revised 4/15/2010 Since you already have the initial folders you’ll need to get your page started, please be advised, the better you’re prepared for the creation of your pages, the easier the rest of the process is going to be. Make sure you have all your materials (jpeg’s, docs, and any others resources you will be using) Prior to creating your web page, you should consider what the focus of your site will be and what you what your viewers to learn from the web site. Once you have completed this step you can create you layout and input your content An example of what an academic page might look like is… Layout:

Office of Information, Technology and Accountability 13 Created Revised 4/15/2010 Layout: First part to remember is that the layout would be easiest done in tables. This allows you to keep all the information in columns and set clearly such as in this photo

Office of Information, Technology and Accountability 14 Created Revised 4/15/2010 Layout: Decide on the links you would like on the side of your page and be sure to include a link to the SPS home page.

Office of Information, Technology and Accountability 15 Created Revised 4/15/2010 Layout: Sometimes you can represent the link through a graphic representation as well.

Office of Information, Technology and Accountability 16 Created Revised 4/15/2010 The next item we are going to discuss, briefly, is color. Just like your file system, you have to use the right colors and fonts together for easy viewing. Can you read the next two lines? This is what would happen if you didn’t pay attention to color. It’s a good idea to think in terms of opposites when you’re doing backgrounds and text/graphics. Thinking in these terms, it’s easy to understand why using opposites works. We want people to be able to read and see our material easily, but also make it pleasing to the eye. There are so many colors available to us and they’re all beautiful, why not use them? Design:

Office of Information, Technology and Accountability 17 Created Revised 4/15/2010 While using those cool looking fonts seems to make your pages unique and unusual, the fact is, most people (unless they have the same fonts installed on their computers) won’t see them. Default fonts will be loaded instead. Remember, keep it simple and direct. One quick tip… Design:

Office of Information, Technology and Accountability 18 Created Revised 4/15/2010 When designing web pages, simple and elegant is more consistent and long lasting. Simple and elegant web site can also contain flashy elements as supplements to the main ideas/focal points on a page. Of course, that’s just one point of view and certainly doesn’t take into account things like the purpose of the site (which always has great bearing on the design and general look of a page). There are other variables that come into account when we look at purpose and target audience. While this is something that’s certainly involved in the planning/outline stage of the page creation, it has to be the main focus in our end product. Design:

Office of Information, Technology and Accountability 19 Created Revised 4/15/2010 Here are a few links to some of the school sites here in Springfield. SPS Website: Springfield Public Schools School websites are all located as a direct link off the main page Design:

Office of Information, Technology and Accountability 20 Created Revised 4/15/2010 At this point we are going focus on design concepts that are easy to understand without having to learn HTML or JAVA language. For the most part, designing a web page is much like getting up in the morning, going through the morning rituals, and then putting on whatever outfit that strikes your fancy in your wardrobe. Of course, there are things that you look best in, stuff that really flatters your body type, hair color, skin tone. You know what they are and use that knowledge to make yourself look as good as you can. Design:

Office of Information, Technology and Accountability 21 Created Revised 4/15/2010 While there are many more things to discuss and learn about creating a web site/page, we can only go into the beginnings of that here. This PowerPoint presentation has all the introductory material you’ll need to get you on your way to putting up some rich and vibrant products to enhance the learning of our students. Feel free to experiment and explore the creative ways of delivering content that will make that possible here in the SPS. And…don’t forget. If you have any questions about what’s possible (and what’s not) or you need help getting something on your page, please feel free to contact your school Instructional Technology Specialist or the District Instructional Technology Specialists.

Office of Information, Technology and Accountability 22 Created Revised 4/15/2010 Your Turn: Create a “Home Page” supported with:  Your outline of the page  The creation of, research, and archiving of digital materials for the page/site  Changed and/or manipulated backgrounds  A page layout using tables

Office of Information, Technology and Accountability 23 Created Revised 4/15/2010 Rubric CATEGORY4321 ContentThe site has a well-stated clear purpose and theme that is carried out throughout the site. 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. The purpose and theme of the site is somewhat muddy or vague. The site lacks a purpose and theme. LayoutThe 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. The Web pages have an attractive and usable layout. It is easy to locate all important elements. The Web pages have a usable layout, but may appear busy or boring. It is easy to locate most of the important elements. The Web pages are cluttered looking or confusing. It is often difficult to locate important elements. NavigationLinks 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. 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. Some links do not take the reader to the sites described. A user typically feels lost. GraphicsGraphics are related to the theme/purpose of the site, are thoughtfully cropped, are of high quality and enhance reader interest or understanding. Graphics are related to the theme/purpose of the site, are of good quality and enhance reader interest or understanding. Graphics are related to the theme/purpose of the site, and are of good quality. Graphics seem randomly chosen, are of low quality, OR distract the reader. Contact Information Every Web page contains a statement of authorship, school name, and date of publication/date last edited. Almost all Web pages contain a statement of authorship, school name, and date of publication/date last edited. Most (75-80%) Web pages contain a statement of authorship, school name, and date of publication/date last edited. Several Web pages do not contain a statement of authorship, school name, and/or date of publication/date last edited.

Resources: ISTE Publications, Digital Citizenship in Schools by Mike Ribble and Gerald Bailey, copyright 2007, ISBN No: SPS School Web Pages Created Revised 4/15/ Office of Information, Technology and Accountability