Web Design and Internet Literacy - PowerPoint PPT Presentation


PPT – Web Design and Internet Literacy PowerPoint presentation | free to download - id: 61b093-ZGRmN


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation

Web Design and Internet Literacy


Web Design and Internet Literacy Kathleen Eilers crandall Camille Aidala TIDE at ASD June 22, 2000 Introduction Presenters Workshop leaders: Kathleen Eilers ... – PowerPoint PPT presentation

Number of Views:75
Avg rating:3.0/5.0
Slides: 80
Provided by: Kathl89
Learn more at: http://people.rit.edu


Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Web Design and Internet Literacy

Web Design and Internet Literacy
  • Kathleen Eilers crandall
  • Camille Aidala
  • TIDE at ASD June 22, 2000

Introduction Presenters
  • Workshop leaders
  • Kathleen Eilers crandall, Ph.D.
  • English professor at NTID develops and uses
    web technologies for teaching reading, writing,
    computer technology, and education courses
  • Camille Aidala
  • Instructional Developer at NTID provides design
    and development services for faculty, staff, and

Introduction Objectives
  • Objectives for this workshop
  • Understand how a web page works
  • Design and produce a small web site (2 3 web
    pages) that includes text, images, links,
    lists, tables, and communication contact.
  • Collect resources to assist you with continued
    skill development

Introduction Participants
  • Survey of Participants
  • Purpose to assist us in addressing your needs so
    we can start the hands-on activities at the level
    of your present needs and skills.
  • Your Access
  • Your Audience
  • Your Experience

Introduction Materials
  • Participants bookmark file including
  • Materials developed for this workshop
  • PowerPoint presentation
  • Directions for producing a basic web site
  • Supplementary resources
  • Browsers
  • Web Development Tools
  • Lesson Plans
  • Educational Sites for Students
  • Research on Internet Use in Education

Bookmarks (Favorites)
  • Everyone should be at a computer that is
    connected to the Internet.
  • Everyone should have their Web Design Workshop

Loading Your Bookmarks
  • Open browser - Netscape
  • At the top menu bar, click on Communicator,
    Bookmarks, and Edit Bookmarks
  • NOTE Concepts are similar for the IE browser.
    (You would import favorites to use your bookmark

Loading Your Bookmarks
  1. In the bookmarks window, click on File / Open
    Bookmarks File
  2. You now see the bookmark file we gave you.
  3. Close the Bookmarks window.

Managing Bookmarks
  1. Go to this presentation http//www.rit.edu/kecnc
  2. On the Location Toolbar, click the Bookmarks
    button, and then Add Bookmark, OR drag the
    location flag to the Bookmarks button.
  3. This new bookmark is now at the bottom of your

Managing Bookmarks
  1. You can have many bookmark lists, but only one
    list can be active at a time.
  2. To save a bookmark list, click the Bookmarks
    button and choose Edit Bookmarks. Then, open the
    File menu and choose Save As.

Managing Bookmarks
  1. You can use Help to learn more about bookmark
  2. Click F1 for Help. Click index and search for

How Does the Web Work?
  • How do you learn best?
  • Direct exploration and experimentation
  • Watching, reading, listening to someone else tell
    you about it (teacher-directed)
  • A combination of both
  • How a Web Page Works
  • What is the internet?
  • (sites accessed June 2000)

(No Transcript)
(No Transcript)
Essential Terms
  • As teachers, you realize that understanding is
    essential for learning.
  • That means a set of mutually understood terms.
  • Glossary of Internet Terms
  • (site accessed June 2000)

(No Transcript)
Terms Page HTML
  • Web page a text file that contains a set of
    HTML tags that tell a browser what to do.
  • HTML (hyper text markup language) a computer
    language that tells a web browser how a web page
    should be displayed. HTML tags do things like
    change the font color, arrange things in tables,
    display forms, embed graphics.

Terms Browser Server
  • Web browser a computer program on your computer
    that knows how to go to a web server, get a web
    page, and interpret the HTML tags.
  • Web server a piece of computer software that
    responds to a browsers request and sends a page
    through the internet to a web browser on your

Terms Homepage URL
  • Homepage the main web page for a business,
    organization, person or simply the main page out
    of a collection of web pages. Ex check out
    NTIDs new homepage.
  • URL uniform resource locator. The standard way
    to give the address (location) of any resource on
    the internet that is part of the world wide web
    (WWW). Ex http//www.rit.edu/418www/new/NTID.htm
  • (sites accessed June 2000)

Web Design Prerequisites
  • Computer skill prerequisites
  • Managing directories (folders) and files on your
  • Using word processing
  • Creating/manipulating images
  • Using email
  • Searching and browsing the internet

Web Design Prerequisites
  • Planning prerequisites
  • Knowing what you want users to do at your web
  • Breaking down what you want to do into logical,
    meaningful parts for display.
  • Understanding the procedures for creating,
    displaying, and maintaining a web site.

Web Development Cycle
1. Analysis of sites purpose (objectives)
6. Update
2. Design a site and a test plan
5. Make available to audience
3. Prepare and code material for web display
4. Test and debug the pages
1 Analysis of Sites Purpose
  • For this analysis, there are three questions to
  • Who are your potential users?
  • Why are they visiting your web site?
  • What do you want users to do at your web site?

1. Analysis of Sites Purpose
  • Worksheet
  • We will now complete the worksheet questions to
    illustrate how we planned the web site for this
    presentation. Participants can recreate this web
    site, use this site as a model, or create a
    totally new web site.

Example Scenario Who
  • Who are potential users?
  • Participants in this workshop
  • People who would have liked to attend this
  • People who are curious about this workshop

1. Analysis of sites purpose (objectives)
Example Scenario Why
  • Why are users visiting the web site?
  • To complete the workshop activities
  • To learn how to produce a simple web site

1. Analysis of sites purpose (objectives)
Example Scenario What
  • What do you want users to do?
  • Follow the workshop activities
  • Produce an attractive, functional 2 to 3 page web
  • Get resources for continued learning
  • Be able to contact the workshop leaders

1. Analysis of sites purpose (objectives)
Summary Analysis of Purpose
  • Example Scenario
  • Purpose Provide information and directions to
    the participants of this workshop so they can
  • Produce a 2 to 3 page web site that includes
    text, images, links, lists, tables, and a
    communication contact
  • Review and continue to learn from this
    presentation after leaving this conference
  • Contact the workshop leaders.

2. Design a Site and a Test Plan
  • To accomplish this task, you should consider
  • What is a logical flow of information?
  • How can you facilitate ease of use?
  • How can you present with visual clarity?
  • How should your files be arranged?
  • Will everything work right? (How will you test
    your site?)

2. Design a site and a test plan
Principles Information Flow
  • Organize your web site on paper.
  • Good plans will
  • Help you organize the content that you have.
  • Indicate where there are gaps or missing pieces.
  • Avoid time consuming and costly mistakes.
  • Let you see possible logic problems and design
  • Facilitate the sharing of ideas with others.

2. Design a site and a test plan
Ease of Use
  • Help your audience
  • Write clear directions and information.
  • Be task centered and concise, not unfocused or
  • Display a table of contents or an index to allow
    users to navigate within your site.

2. Design a site and a test plan
Ease of Use (cont.)
  • Follow a consistent design throughout your site
  • Use similar logos, banners (headers), and
  • Be consistent with margins, spacing, font styles,
    and positioning.
  • Use colors and images to convey meaning.
  • Arrange screens in a logical way
  • Organize information from left to right, and from
    top to bottom.
  • Group similar information visually.

2. Design a site and a test plan
Visual Clarity
  • Use color purposefully and sparingly.
  • Maintain similar color scheme Dont confuse
  • Check visibility of the color combinations.
  • Limit number of fonts.
  • Not all computer have the same fonts available.
  • Check readability of your fonts and font sizes.

2. Design a site and a test plan
File Arrangement
  • Use a project folder (main folder) on your disk
    for your web site.
  • Create sub folders as needed.
  • Give files meaningful names and save files to
    these folders
  • When you work on different computers, copy the
    entire project folder.
  • Do not just copy files or subfolders.
  • This practice avoids errors and broken links.

2. Design a site and a test plan
Folders and Files
Folder ?
Folders ? ?
Files ? Files ?
?Files ? Files
Test Plan
  • Do all the images appear?
  • Do all the links work?
  • Does the site appear correctly on different
  • Can users accomplish the site objectives?
  • Do pages have good visibility and legibility?

2. Design a site and a test plan
2. Design a Site and a Test Plan
  • Worksheet
  • We will now complete the worksheet questions to
    illustrate how we designed a site and test plan
    for the web site for this presentation.

Example Scenario Flow
  • Elements from Step 1 Summary Analysis of

Web Design and Internet Literacy Workshop
Workshop bookmarks
Workshop presentation
2. Design a site and a test plan
Pages Linked to Homepage
Example Scenario Ease of Use
  • Web content will come from
  • bookmark file
  • PowerPoint presentation
  • worksheets
  • First page of site will be a contents page with
    links to the other three site pages.

2. Design a site and a test plan
Example Ease of Use (cont.)
  • Design or find a banner (header) for a 640 x 480
  • Headings twice as large as other text with color
    to match banner and ornate type font
  • White page background
  • Black, Ariel type font for text
  • Green links, blue previously accessed links, red
    active links
  • Photos of participants and presenters working,
    not larger than 1/3 height of screen (160 pixels)

2. Design a site and a test plan
Example Scenario Visual Clarity
  • All pages at the site will follow the same
  • banner design
  • color scheme
  • font scheme

2. Design a site and a test plan
Example Scenario Files
  • Site will have only two folders (directories)
  • ASD-TIDE (Main folder)
  • Images (Sub folder of ASD-TIDE)
  • ASD-TIDE folder will have four html files
  • Bookmarks-WebDesign.htm
  • index.htm (This is the homepage.)
  • Survey of Workshop Participants.doc
  • Web Design and Internet Literacy.ppt
  • Worksheets-WebDesign.doc
  • Image folder will contain 5 picture files
  • One banner
  • Five photos

2. Design a site and a test plan
Main Folder ASD-TIDE
Image Files
  • Images are in different files from the html code.
  • Image files are only referenced in the html file.
  • This is different than in a word processing file.
    There images are typically part of the file.

example-photo1.jpg ?
Example Scenario Test Plan
  • Check that all the images appear and test all
  • Try the site on IE 5 and Netscape 4 browsers
    and at different screen resolutions.
  • Check objectives
  • contents of this workshop are available
  • resources for further learning exist
  • users can contact the leaders of this workshop
  • Check visibility and legibility of pages

2. Design a site and a test plan
3. Prepare and Code Material
  • To accomplish this task, you will
  • Design or collect and prepare graphics.
  • Collect and prepare photos.
  • Collect and prepare text content.
  • Prepare the html code for each of the web pages
    in your site.

Example Scenario Materials
  • Design appropriate banner (header)
  • Collect and prepare photos of participants and
  • Collect and prepare text materials
  • write content materials (presentation file)
  • prepare resources (bookmark file)
  • workshop worksheets (MS Word file)

3. Prepare and code material for web display
Design Banner (Header)
  • You can use a pre-existing banner from your
    school or department.
  • You can design a banner in a graphics program.
  • You can get a free banner from Internet sources.
    See your bookmark file.
  • http//www.flamingtext.com
  • http//www.freewebtemplates.com/banners/index.shtm
  • We will use a TIDE banner that we prepared for
    this demonstration.
  • (sites accessed June 2000)

3. Prepare and code material for web display
(No Transcript)
(No Transcript)
TIDE Banner
Collect and Prepare Photos
  • You may want to use photos from your personal or
    your schools existing collection.
  • Demo of scanning traditional photos
  • HP Tutorials How to Scan a Photo
  • You may need to collect new pictures.
  • Demo of digital camera (Sony Mavica) to collect
    photos of workshop participants
  • (sites accessed June 2000)

3. Prepare and code material for web display
(No Transcript)
(No Transcript)
(No Transcript)
(No Transcript)
(No Transcript)
Text Materials
  • Content materials
  • You will probably have your materials already
    prepared in a word processor format or in a
    presentation format, which can be converted to
  • You may want to point students to outside
    resources. See your bookmark file for Lesson
    Plan sites and other education resources.

3. Prepare and code material for web display
(No Transcript)
(No Transcript)
Example Scenario Text Materials
  • Content materials
  • This presentation
  • Bookmarks
  • Worksheets

3. Prepare and code material for web display
Prepare the Html Code
  • This is most easily done by
  • A good html editor (so you dont need to learn
    the html code)
  • The use of programs that convert a word
    processing document, a presentation, a
    spreadsheet, a database into html code

3. Prepare and code material for web display
Html Editors
  • Full-feature Editors
  • MS FrontPage
  • Micromedia Dreamweaver
  • Basic-feature Editors
  • Netscape Composer (free with Netscape Browser)
  • MS FrontPage Express (on most MS Office disks)

Using an Html Editor
  • Basic skills
  • Typing in new text
  • Inserting images
  • Adding links
  • Making a list
  • Using tables
  • Including an email contact

3. Prepare and code material for web display
Using an Html Editor
  • Tutorials
  • http//www.trainingtools.com/
  • Netscape Composer) (from Auburn)
  • Dreamweaver (from RIT)
  • FrontPage (from Digital Education Network)
  • (sites accessed June 2000)

3. Prepare and code material for web display
(No Transcript)
Example Scenario Html Editor
  • The HTML for this presentation Homepage was
    developed with an html editor.
  • You can use this as a template for your own web
  • Presentation Homepage
  • Save it on your disk.

Demo of Basic Skills
  • Demo 1 Typing in new text
  • Demo 2 Inserting images
  • Demo 3 Adding links
  • Demo 4 Making a list
  • Demo 5 Using tables
  • Demo 6 Including an email contact

3. Prepare and code material for web display
Converting files
  • Any Microsoft Office application can be changed
    into html by using Save As Web Page.
  • Word documents
  • PowerPoint presentations
  • Excel spreadsheets
  • Access databases
  • Publisher publications
  • Office 2000 does this well.
  • Example

3. Prepare and code material for web display
4. Test and Debug the Pages
  • Test everything before you upload your pages to a
  • Follow your test plan.
  • You may need to return to portions of
  • Step 2 Design a site and a test plan, or to
  • Step 3 Prepare and code material

5. Make Available to Audience
  • The final step is uploading your html files and
    the related dependent files to a server.
  • Your school may want to review your web pages
    before you can upload them to the schools web
  • To do this, you can use your web editor (Netscape
    Composer, FrontPage, Dreamweaver) or an FTP
    program such as WS_FTP. (site accessed June 2000)

  • Before uploading, you will need
  • A way to connect to the internet (an ISP
    Internet Service Provider)
  • The address of the host computer and the
    operating system used by that computer
  • An account with adequate space on a host computer
    (a web server) that is open to the web
  • A folder (directory) on the host computer to
    which you have access

Free ISP and Web Space
  • Some Examples
  • free ISP
  • FreeLane www.FreeLane.com
  • Juno www.juno.com
  • free space on a web server
  • www.geocities.com
  • free email account
  • www.hotmail.com

Test Pages (Site) Online
  • Do not forget to test your pages after you have
    uploaded your html files and the related
    dependent files.
  • If you find broken links or other problems
  • Go back to the pages on your offline computer.
  • Locate the needed changes and edit the pages.
  • Retest the pages on your computer
  • Upload the files again to the web server computer
  • Retest the pages online.

6. Update
  • Establish a regular maintenance schedule.
  • Keep pages that are open to the public as current
    as possible.
  • Remember your web pages are a direct reflection
    of you and your school.

Happy webbing !
  • Kathleen Eilers crandall
  • NTID English Department
  • Rochester Institute of Technology
  • Rochester, NY 14623
  • Phone (716) 475-5111
  • Fax (716) 475-6500
  • Email kecncp_at_rit.edu
  • Web http//www.rit.edu/kecncp
  • Camille Aidala
  • NTID Department of Educational Resources
  • Rochester Institute of Technology
  • Rochester, NY 14623
  • Phone (716) 475-6028
  • Fax (716) 475-6500
  • Email clansr_at_rit.edu
About PowerShow.com