Creating web pages for the WWW

Download Report

Transcript Creating web pages for the WWW 

Creating Web Pages for the
WWW
Margaret Farren
Ken Maher
School of Computer Applications
Introductions
• We are … Margaret, Ken, Niall, tutors
• This is … a “hands-on” WORKSHOP, not a
lecture … so we show you how, then you do it.
• You make personal notes on how, and you are able
to do it back at your desk
2
Aim
• Aim … create, edit and update a set of web pages
for your home page, from your own desktop/PC.
• Computers in front of you are not your
desktop/PC, these desktops are configured to work
here, so you will have some adjusting to do …
we’ll show you how, later
3
Overview of course
As a result of this short course you will …
• Understand the web, browsers, HTML and http, web
servers, intranet, internet, PDF, plug-ins
• Create and maintain simple web pages
• You’ll also be able to save PowerPoint and WORD
documents directly onto the web
4
Outline of Presentation
(A) Internet and World Wide Web (WWW)
(B) MicroSoft Front Page
(C) Plan and Design of Web Site
(D) FrontPage workshop
5
(A) The Internet
“The Internet”
6
The Internet
The Information Superhighway carries all
sorts of traffic. There is a place for
everything from the heavily loaded lorry to
the moped with a parcel strapped to the
seat. There is also the choice of routes, and
unlike some other superhighways, learner
drivers are allowed on too!!
The Internet
… big and little computers
… all connected
8
The Internet … and the WWW
Servers
Browsers
9
The Internet … and the WWW
Servers
Servers are given names like
www.dcu.ie, www.berkeley.edu, etc.
Browsers
10
How is it done ?
• The “web” … over 1000,000,000 connected or
linked documents .. text, image, etc.
11
The Internet … and the WWW
Servers hold documents
Servers
Most links are within a
site/sever but some across sites
Browsers
By default FrontPage uses the Internet Explorer
browser
12
How is it done ...
• Documents are “encoded” or written in HTML
(Hypertext Markup Language).
• HTML is horrible, but you’ll never need to see it.
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
<html>
<head>
<meta http-equiv="Content-Type” content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Microsoft FrontPage Express 2.0">
<title>timetable</title>
</head>
<body bgcolor="#FFFFFF">
<div align="center"><center>
<table border="0" cellpadding="0" cellspacing="0" width="665"
bgcolor="#0000FF" bordercolor="#0000FF">
<tr>
<td align="middle" width="68"><a
href="http://www.dcu.ie/"><img src="dculogo.gif"
alt="Dublin City University" border="0" width="54"
height="55"></a></td>
• HTML documents look “pretty”
13
How is it done ...
• HTML documents sit on “servers”, powerful,
unseen machines that “serve” the documents
• HTML documents are viewed by people, using
“browsers” … e.g. Netscape and Internet Explorer
Both run on PCs/Macs in DCU
• HTML documents are transferred to browsers
using the hypertext transfer protocol (http)
14
The Internet … and the WWW
Servers
Servers deliver HTML documents
to browsers using http
Browsers
15
How is it done ...
• HTML (or other) documents provided by servers
for use in an organisation (eg DCU) are intranet
documents, e.g. minutes of certain DCU meetings
• HTML (or other) documents provided by servers
for global use are internet documents, e.g. most
DCU documents
16
The Internet … and the WWW
www.dcu.ie
www.eeng.dcu.ie
www.berkeley.edu www.microsoft.com
Servers
DCU intranet
Browsers
17
How is it done …Browsers
• Basic web browsers are enhanced with extra
software (programs) to allow them to “show”
documents in other formats … audio, video, etc.
• HTML as a “markup” language is powerful, but
not quite powerful enough to make a document
always look the same, so other formats are popular
eg. PDF (Portable Document Format) is becoming
very popular, especially in DCU, - documents
will always look the same, but this requires the
18
“Acrobat reader” plug-in from Adobe
(B) Front Page
• Microsoft FrontPage 98 is a tool for creating and
managing a Web site on Internet or Intranet.
• FrontPage 98 comprises an Explorer and an
Editor.
– FrontPage Explorer enables the creation, conception
and management of a Web site
– FrontPage Editor allow for the creation and
modification of Web pages without having to learn
HTML
• We will be using FrontPage Editor
19
(C) Design a Web Page
Six steps for creating a content-rich, visually
appealing webpage
1. Gather information
2. Determine the Intended Audience
3. Create a Storyboard
4. Plan you Navigational Tools
5. Create an Aesthetically Appealing Webpage
6. Establish Credibility
20
Creating some pages
• FrontPage … it’s like a dumbed down version of
WORD …
–
–
–
–
–
–
–
–
–
text
different fonts
font styles and sizes
indenting
background colours
title field for page
simple tables, borders, coloured cells
bullets and numbering
add some images, logos
21
Basic Design Tips
•
•
•
•
•
Create an effective title and main heading
Use horizontal rules to separate sections
Use text highlighting e.g. italic, bold sparingly
Give the date when We page was last updated
Keep pages short - create a series of short related
that each fit on a single
• Many users use 13” monitor, avoid creating Web
pages bigger than 640x480 pixels
22
More Design Tips
• Using the same images in several places helps the
browser work faster
• Use a small thumbnail linked to a larger images
• Check spelling and proofread your document
• Use a footer at bottom of page for general
information such as e-mail address
• If your page is moved to a new site, leave a notice
at the old location directing readers to new site
23
Challenges
•
•
•
•
Graphics - does it take long to download page?
Use of Hypertext links - quality of links?
Use of Frames - not advisable...
Software requirements may limit access e.g.
Browsers can alter the APPeArence of
information
• http://www.w3.org - checks your HTML conforms
with current standards
24
Resources for new Web users
• Design a Web Page
http://www.siec.k12.in.us/~west/online/
• Usability of Web Sites http://www.useit.com/
Nielsen’s site
• Before getting involved in large scale web site
design http://www.photo.net/wtr/thebook
25
Web based resources
• Criteria is needed to evaluate Web resources
– traditional evaluation criteria is useful
– new criteria is also needed
• Five Traditional Evaluation Criteria
–
–
–
–
–
Authority
Accuracy
Objectivity
Currency
Coverage
(Alexander & Tate)
26
Criterion 1: Authority
• Who is responsible for the contents
of the page?
• What are the author’s qualification
for writing on the subject?
• Is there a way of checking the
legitimacy of the author?
27
Criterion 2: Accuracy
• Almost anyone can publish on
the Web.
• Are the sources for factual information
listed?
• Is the information free of grammatical,
spelling and other typographical errors?
28
Criterion 3: Objectivity
• Is the information trying to
sway the opinions of the audience?
• Are the person’s biases clearly stated?
• Often the aims of person not clearly stated.
29
Criterion 4: Currency
• Is the material kept up to date?
• Are there dates on the page to
indicate:
– When the page was written?
– When the page was first placed
on the Web?
– When the page was last revised?
Date
???
30
Criterion 5: Coverage
• What topics are included in the work?
• To what depth are topics explained?
• Is there an indication that the page has been
completed or is it still under construction?
31
Creating some pages
• Now lets do something…...
• We will create HTML pages on PCs, save to local
disk (C:\ drive) and then export to the DCU web
server (www.dcu.ie)
• Each person has a “personal space” on
www.dcu.ie denoted
www.dcu.ie/~dohare/<filename> and <filename>
must be created (here) and then moved to that
server machine to make it available on the web
32
Creating some pages
• We use FrontPage from Microsoft to create, edit,
and then “publish” or push HTML pages from
these PCs onto www.dcu.ie
• FrontPage will be available from Computer
Services on your desktop machine … Niall ?
• First, you need to “tell” the PC, where to
“publish”, i.e. to distinguish us all from “~dohare”
• … launch FrontPage
• … configure FrontPage to publish as YOU
33
Saving some pages
• Now save those pages …
• Now check they exist on the web ...
• Welcome to the list of those who have published.
• Now try adding some embedded text links to DCU
home page, school page, anywhere
• Add some links to your email (http vs. mailto)
• Check some PDF documents and the plug-in
34
HTML from other applications
• It is possible to save a PowerPoint document into
HTML … or a WORD document (not advisable
because conversion not great)
• To create HTML documents, use a real HTML
editor, not a converter
35
The End !