2 Learner ObjectivesAt the completion of study, learners will be able to:discuss research that supports the development of usable, accessible web design.use terminology associated with basic web design.describe various methods used to create web pages and the pros and cons of each method.establish a web account, a public_html folder, and create a homepage (index.html)create a folder structure for the organization of web files, transfer files and work with graphicsdiscuss ethical and legal use of images and files in a web environment.distinguish between information suitable for school versus classroom web sites.

3 Learner Objectives, cont’dAt the completion of study, learners will be able to:examine classroom web sites that serve as communication, showcase, and instructional tools for students and parents.identify elements that facilitate accessibility in web pagesplan, design, and publish an accessible “classroom” website to serve as a communication and resource tool for students and their parents for curricular purposes.

4 Basics: What is a web page?A web page is an document written in HTML code and uploaded to a remote server for others to access on the WWW.group of related web pages make up a web siteweb pages are multimedia documents and contain text and graphics. Some contain audio and video clips.web sites are non-linear and are navigated with hyperlinksthe entry to a web site is the homepage which is named index.html or (default.html)The server administrator will explain how to name the homepage.

5 Basics: Benefits of web publishingThere are multiple reasons for schools, teachers AND students to design web pages.cost of web publication vs.. print-basedcolor is free on webdistributioninstant revisionsability to include multimedia elementsability to archive documents without stacks of paperability to link students to huge amounts of information

6 Basics: Information for School SitesThe information on school sites is general in nature and apply to the entire population at the school.Typical information categories for school sitesgeneral informationschool administrationschool policiescalendar of eventsextracurricular activitiesschool newsletterparent organizationsWithin each category, there are sub-categories (see book) and should be decided for each school.

7 Basics: Information for Teacher SitesThe information on teacher sites serves to communicate with students, parents and others.Typical information categories for teacher sitesgeneral informationbio pageinstructional informationshowcase of student workclass newsletteralways links to school homepage and origin (faculty page)Within each category, there are typical sub-categories (see book) and others to be decided by teacher-designer.

8 Basics: Methods for Creating PagesWeb pages are created using one of four methods:Writing HTML codeUsing a HTML editorUsing a WYSIWIG editorUsing a template or wizard (online)Let’s take a closer look at each of the methods.

9 Basics: Writing HTML codeInitially all web pages were created by writing HTML code.extremely time-consumingno longer mandatorywritten with a series of “mark-up” tagsmark-up tags have two partsopening tag <title>ending tag </title>

11 Basics:HTML editorsHTML editors allow authors to create/format a web page using a menu but there are significant limitations to design options.ExamplesCoffee Cup: download a trial version for WindowsNoteTab: download a trial version for Windows

12 Basics: WYSIWYG editorsWhat You See Is What You Get (WYSIWYG) is a group of editors that allows the user to work in a document area similar to a word processor.Multimedia elements are easily inserted.Examples range from professional to free optionsMS FrontPageAdobe GoLiveMacromedia DreamWeaver**: most popularNVu: free (limited features)Mozilla Composer: free with the browser (limited)

13 Basics: Obtaining server spaceServer space is offered by many entities. There are features to examine before choosing.Pre-service teacherstypically given free web space on their university serverwhile they are actively pursuing a degree.In-service teacherstypically given free web space on their school servercontent limited to classroom business

14 Basics: Obtaining server space (cont’d)Server space for personal pages can be obtained for a fee from many hosts.Check out features and benefits.Contract requirements: Time requirement?Cost for service: set-up fee, monthly charge?Disk space offered ?Site management?Support offered: 24 hours? Free?Domain names offered: Free?Required to use template or may you use another design tool?ReliabilitySecurity

15 Basics: Building the folder structureA folder structure is used for organization. This is similar to a filing cabinet with the drawers being the different folders.Root folderbase folder that holds all web folders/filescontains a universal homepage (index.html)Provides links/navigation to other folders or pagescontains project folderseach folder has an entry (index.html) to the information in that foldereach folder contains an images (art; graphics) folder to hold images

16 Basics: Naming web filesFiles should follow common web practices to allow them to work correctly and easy to locate.Naming the fileseach file is given a name (identity)ShortDescriptiveLowercaseNo spaces (may use an underscore ( _ )each file is given an extensionTells the user the file typeWeb docs have .html or .htmGraphics have .gif or .jpeg, or .png

18 Basics: Planning the ProcessPlanning the site and the navigation is one of the most important steps to a good design.Use the storyboard chart to plan the classroom site design and the way that your pages will link to each other.Plan the page design that will be used.Background colorsTypeface and colorsGraphicsWrite the message for each page.Locate the graphics (check copyright) for each page.

19 Basics: Writing for the WebWriting the message for web pages is different than writing for printed pages.Reading long blocks of text is tedious on the WebWriting should be concise.Consider using listsMatch writing style to target audience.Match writing to reading ability.Avoid long pages that require scrolling.

20 Adapting for Special LearnersAttention to accessiblity helps make the site usable by the widest audience.Creating a template structure insures consistency.High contrast between the background and text.Avoid tile backgrounds.Consider for those with color deficiencies.Provide alternative text for all images (alt tags).Use images only when the text is enhanced.Give option to link to a page without graphics that can easily be read by a screen reader.Links and titles should be descriptive and meaningful.Summarize in charts and graphs.Design tables being mindful of screen readers.