Scribd
Upload
82 views

Introduction To Web Page Design

The document provides an introduction to web page design including background on HTML and the early web, common terminology, principles of web design, common file types used on the web, theoretical considerations of online classrooms, and advice for further resources.

Uploaded by

Jan Ray Florentino
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
82 views

Introduction To Web Page Design

The document provides an introduction to web page design including background on HTML and the early web, common terminology, principles of web design, common file types used on the web, theoretical considerations of online classrooms, and advice for further resources.

Uploaded by

Jan Ray Florentino
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 25

Introduction to Web

Page Design

GMST 511
Web Design Information

 Background on the web


 Terminology
 Web design principles
 Files on the web
 Some theoretical considerations
 Further advice
In the beginning…
<html>
 The WWW used <title> Kris Green's Home Page</title>
<body bgcolor=#e47833>
<img src="gifs/dragon.gif" align=left>
straight HTML (Hyper <h1> Welcome to the Source of all Information! </h1>
Well, information about me or information I find important, at
Text Markup least. I would first like to introduce myself, and then provide a
brief overview of my home page, so that you'll know whether or

Language).
not what you're looking for is here.<br> <br> <p>I'm currently in
my fifth (and hopefully final) year graduate student at the
University of Arizona, studying Applied Mathematics. My

 And it was good… research interests center around large scale matter composed
of tachyons as a cosmological source of structure. I also teach
here in the math department, and if you're interested in some
 A little plain, an materials related to the course I'm currently teaching, follow the
link above marked "Current Teaching".<p>Second, I enjoy
martial arts. While I was an undergraduate at the University of
absolute pain, and Tennessee, I studied Isshinryu Karate under Bill Rader, a
fourth generation student via Mr. Wheeler. I achieved the rank
completely of First Kyu (or brown belt).
</body>

unformatted, but it
<hr>
<address>Kris Green/<a href="http://www.math.arizona.edu">
Department of Mathematics</a> /<a
was good. href="http://www.arizona.edu">The University of Arizona</a>
/last revised November 7, 1998</address>
</html>
And…

 You couldn’t just “post the web page”;


you had to use FTP (File Transfer
Protocol) to get it into place
 You had to type all the code into a text
editor, then load it into the browser to
view the results, then change the code,
then reload, then…
 Plus, all the browsers did stuff differently
Later…

 We got new features:


 Tables
 Frames
 Image maps
 CGI Scripting
 These gave users a way to control
formatting, make navigation easier, and
provide some interactivity (like forms...)
Even later…

 We got WYSIWYG Interfaces (Frontpage and


other packages)*
 We got Java, Javascript, XML, DHTML, CSS,
Flash, Swish, Pop-up adds, P2P downloads…

* Now called GUI (Graphical User Interfaces).


Introduction to Terminology

Pages -- Sites --
 single HTML or HTM file  consist of multiple pages
(Hyper Text Markup)
 all information related to  integrates several
a single theme different themes
 usually small (in physical  can be immense
file size)
 requires planning for  requires more careful
layout planning for design and
navigation
What’s in a name (URLs)

 URL = Uniform Resource Locator


 Contains three parts:
Protocol (http, ftp, etc.)
 Server name

 File name, including path

 http://keep2.sjfc.edu/faculty/green/default.htm

Protocol for reading Server name – File name and path*


extension tells
type of server
The Basics of Web Design

 Principles of graphic design for the web


 Navigation concepts for the web
 Organization of text on the web
 Links from one page to another
 Content and information
 Editing and maintaining
 Site design plans (graphical presentation
)
Principles of Graphical Design

 Keep the file size for the graphics small on the


main page (use thumbnails with links to larger
pictures, include file size information with link.)*
 Use colors from the “standard color palette” to
reduce file sizes and increase flexibility.
 Keep backgrounds simple and not “busy”.
 Keep the viewable size of the page in mind so
you can avoid scrolling as much as possible.

* This is less important now with the large bandwidth Internet connections (RR and DSL).
Site Navigation Principles

 Use a simple, consistent navigation interface.


 Organize the pages so that there is less need
for many confusing navigation buttons.
 Remember, It’s the World Wide Web, NOT the
World Wide Bowl of Spaghetti.
 Carefully plan the site organization FIRST. Site
design should be based on function and
content.
 Remember, “Three Clicks to Information”.
Text Organization Principles

 Do not rely on spacing, tabs, or line breaks.


 Use tables (with border=0) to space the
information on the page.
 Use horizontal lines to separate content, not for
visual organization.
 Use headings (H1 through H6) rather than
fonts and font sizes to organize information.
 Maintain a good, consistent visual hierarchy.
 Lists are good for organization.
Links

 Provide the user with information about


the link (title of site, file size and format,
etc.) rather than just a URL.
 Don’t change the link colors, the followed
link colors, or the basic text colors, if
possible. People have learned to
interpret the standard colors.
 Use a simple, consistent navigation
throughout the site.
Information (content)

 Include author information and contact


information to the author and site
manager.
 Focus the content of each page.
 Provide a list of links to other web sites
that support or “fill out” your material.
 Vertical stratification of information is
important to maintain consistency.
 Be concise and factual.
Editing and Maintaining

 By all means, spell check!


 Frequently check active vs. dead links.
 Show, on the page, the date of the last
modifications to the site/page.
 If you have to “take the site down” temporarily,
provide an “under construction page” for the
user with an estimated date of return.
 Plan a naming convention for files FIRST so
that updating and maintaining is less of a
hassle.
Site Design Templates

Home
A1 Page
B1 C1 D1

A2 B2 C2 D2

A3 B3 C3 D3

Basic Grid Format Hierarchical Format


More Templates

Sequential

Web Layout
Summary of Templates
Complex
Educated
Audiences

Simple
Basic content,
Training sites
Linear narrative Nonlinear, hyperlinked
Predictable structure Flexible, may be confusing
Files on the Web

 HTML files = text document plus code


 Browser interprets code
 Code contained in tags (<h1> Stuff
</h1>)
 Each image, sound, video, etc. is a
separate file – all must be placed in
location for access to outside world.
However, images can be re-used.
File Types on the Web
 IMAGES  .gif, .jpg
others exist, but are not
supported*
 MOVIES  .rm, .avi, .mpeg, .mov
 SOUND  .wav, .mp3
 FLASH MOVIE  .fla  .swf
 STYLE SHEETS  .css
 DATA  .xml
 TEXT DOCUMENTS  .doc, .pdf
 Other files  .xls, .ppt, etc.

* Applies to most clip art (.wmf or anything).


More about files

 Everything on your site must be in a


publicly accessible folder – usually called
public_html
 Folders and file organization are critical
 Paths to files are important
 Tree structure on the file server
 Relative or absolute paths
Theoretical Considerations

 (Un)Intended consequences (see


handout)
 Scenarios for online classrooms (taken
from a presentation by Gerald Boerner at
the Syllabus Conference, 2002)
 Effective web page elements for
classroom support (taken from a
presentation by G. Boerner at the
Syllabus Conference, 2002)
Scenarios

 Low-Tech traditional classroom


 Technology-supported classroom
 Web-aware hybrid classroom
 Web-supported classroom
 Web-based online classroom

All material in this section is copyright Gerald Boerner (2000) and is used without express written permission.
Effective Web Page Elements
Further Advice

 Look to web sites that catch your


attention for more hints.
 Check out Dave Siegel’s book Creating
Killer Web Sites and his web site at
www.killersites.com/core.html
 Try Web Style Guide by P. Lynch and S.
Horton (available at SJFC Library).

You might also like