Creating a Web Page o

(1)

Creating a Web Page

(2)

The first phase of the web: the time

of experimentation

•In the early days, most websites were run by webmasters who did a bit of everything.

•Web authoring with simple hand-coding tools - no special features to deal with HTML.

•Hobbyists learned HTML by playing around with web sites in their spare time.

(3)

The second phase of the web: big

business overnight.

•Web teams became larger, more structured, and more fragmented.

•Information architects worked on overall site architecture. •Visual designers worked on visual designs.

(4)

Specialized tools for web authoring

began appearing on the market.

Visual tools focused on giving people a more visual way to work with HTML - WYSIWYG

Dreamweaver - new ways to help people work

visually with technologies such as cascading style sheet (CSS) - offered more assistance with new technologies.

Hand-coding tools focused on making hand coding more efficient by adding special features for HTML and other web technologies.

(5)

The third phase of the web: Isn't

there a better way?

•Corporations still want websites; they just want to spend a lot less money.

•Design shops still want to do business; need to find a way to be radically more productive than before.

•Internal web teams still need to get their jobs done; they just have to make do with less.

The emergence of hybrid tools

(6)

The future...

The web will only continue to grow, evolve,

and change.

The the web will become more of a

collaborative communication medium.

(7)

Keep It Simple

One of the keys to a good website is simplicity. You've heard of the "KISS" principle? Keep It Simple Silly. This applies doubly for websites.

It is nice to be able to create frames and tables and font sizes and animated GIFs, but if you have every possible HTML

feature on every page, it's highly likely that your readers are going to be overwhelmed rather than impressed.

Remember, just because you CAN create an effect, doesn't

mean you SHOULD. Ask yourself: what value am I adding with this technique? Is this the best way to communicate what I

(8)

Simple Doesn't Equal Boring

Simple doesn't necessarily mean dull and boring. Lots of people confuse fancy effects with effective

communication.

What keeping it simple really means is this: think about how people will be using your pages and present your information to them in a way that matches their needs and expectations. Use technology and effects where appropriate and where they make for more effective communication.

(9)

The Purpose

• Plan carefully and spend time on this part

• Good communication requires clarity of

purpose

– make friends

– make a point

– collect links

– recruit members for …

– publish you résumé

– provide information for your course

(10)

The Audience

• Who will read your page?

• Who do you want to attract to your page?

• These greatly affect

(11)

Know Your Audience

You aren't creating your Web work in a

vacuum or just for yourself! If you were, you'd

keep it on your own computer. You're

publishing a Web page because you expect

someone to stop by and visit it. That someone

is your audience.

(12)

Know Your Audience

Are your readers on slow modems?

Then you'd better be extra careful about page

size.

Are they expecting to hear your band's music clips?

Then you'd better think about an audio format.

Are they quilters?

Then blood red and black

might not be your best color

choices.

Are they hard core

gamers?

Then you might want to avoid

pastels and soft-edged

graphics.

(13)

Definition of a good Web site:

A site that delivers

quality content

for its intended

audience

and does so with

elegance and style.

(14)

Five Fingers

Making your site easy to navigate is critical.

Lots of small factors add up to create easy

paths through your site. For example, one

thing you can do is

keep the number of

"next step" choices small

so that people

don't become lost in a long list of options.

Did you know that the average human mind

sees five or fewer items as one group, but

when it encounters more than five items it has

to divide them into smaller sub-groups to

process them?

Try to keep your selections

arranged in groups of five or less

(15)

Three Clicks

Another way to help your Web site be a good experience

for your readers is to make information no more than

three clicks away.

One of the fastest ways to frustrate

readers is to make them click ... and click ... and

click... and click .. and click ... and

... to find the

information they want.

Additionally, when you make readers burrow deep into

your site to find content they often become lost and

(16)

30 Second Attention Spans

• When someone comes into a Web page they should be able to easily see what options they have and select one quickly. As a rule of thumb, it should take less than 30 seconds for a reader to load your page and be able to decide what to do next. If it takes longer than that, you'll start to lose your

audience.

• Make sure your pages are a reasonable size and don't take forever to download. If many of your readers are on

modems, try to keep the total page size (that means all graphics plus HTML file added together) under 30 to 45K.

(17)

Words Matter

Remember your fifth grade English teacher? Remember how she told you that good spelling and grammar were important? She was right.

The Web has far too many pages whose creators forgot the basics. Just because your Web page is online doesn't mean you can toss out all those rules that govern written

(18)

Balance, Balance

Balance is a big part of good Web design.

Balance between text and graphics. Unless the content

dictates an all-text or an all-graphics site, use common sense and aesthetic judgement so that one doesn't overwhelm the other.

Balance between download time and page content. Of

course you want beautiful pages, but you need to balance the

content of the page with the reality that your readers are out there logging on through a modem. Is that photo of your wedding trip really worth a 120 second wait?

Balance between background and foreground. Most of us

(19)

Frames in Moderation

Frames can be a great addition to your site. Like all Web

features, however, be sure you don't overuse them!

If you want to create a navigational structure that will

always be visible, such as a table of contents, frames

are the way to go.

(20)

Keep Learning

Creating Web pages is a continual learning process.

Getting up a first version of your site is just the beginning! The technology and tools are constantly evolving and our understanding of how people use the online medium is changing. To create good websites you can't just rest on your laurels.

Look at other sites. If you want to be a great novelist you read

great novels. If you want to be a great screenwriter you watch great movies. By the same token, if you want to design a great

Web site you need to look at other Web sites. As you look at sites, notice what does and doesn't seems to work.

View the source. When you see something you like, use your

(21)

Web Publishing Process

•

Define the purpose

•

Define the audience

•

Choose an HTML editor

•

Make design decisions

•

Create the page

•

Test the page

(22)

The Editor

• Text editors

• Word processors

-• HTML editors -

– Lightning, HomeSite, HTML editor

• WYSIWYG editors -

– Netscape Composer

• Site managers

-– NetObjects Fusion

HTML is ASCII text

have “Save as HTML” feature

can click on the tags you want

special programs

(23)

(24)

What is JavaScript?

JavaScript is NOT Java. JavaScript is a basic scripting language that allows Web authors to create dynamic pages that react to user interaction. In other words, JavaScript is a language

that lets you make your pages interact with your readers and respond to what they do.

JavaScript is based loosely on the Java programming language. JavaScript programs are contained within the HTML code of the Web page and are interpreted by the browser as it its read in

(25)

(26)

HTML

• HTML =

h

yper

t

ext

m

arkup

l

anguage

– tags - special formatting symbols

opening and closing tags

ex. <b>…</b> turn bold on and off

ex. <h3>…</h3> turn a heading on and off

• Works cross-platform

• Identifies the parts of the text

• Standard maintained by W3C (World Wide

Web Consortium)

(27)

HTML

• Browsers interpret HTLM code

• Different browsers may interpret the codes

differently

– cascading style sheets

style sheet = a listing of what each tag is to do

• Word processors

– have hidden codes and style sheets

(28)

The Design

• Knowing how to use HTML does not guarantee

a great looking page

• Rules of thumb

– keep page length to 1 - 3 screens

– (in 2001) assume users view on a 15” monitor with

800x600 resolution

– be

consistent

with colors, background, font, and

style

(29)

The Creation

• Global structure

– head -

title and show relationship to other

files

• <title> what appears in the window’s title bar

– body -

what appears in the browser window

<html>

<head>

<title>document title</title>

</head> <body>

main part of the HTML document

</body>

(30)

Creating the Body

• Background

– color-

– graphic -

<body background =

“parchment.jpg”>

• Font

– color -

– face -

<font face = “arial”>

(31)

Creating the Body

• Headings - six, 1 is largest and 6 is smallest

– appearance depends upon

browser’s

formats

- typically,

<h6>

is 10 point, bold

• Spaces and paragraph breaks

– extra consecutive spaces ignored

“A B” is interpreted as “A B”

(32)

Creating the Body

• Lists

– bulleted

- <ul>

(unordered list)

– numbered -

<ol>

(ordered list)

– menu -

<menu>

Each item in the list begins with

<li>

, is indented

and begins on a new line.

(33)

Creating the Body

• Character attributes

– bold -

<b>

– italics -

<i>

– underline -

<u>

• Signing your page

– provide a contact and date last modified

(34)

Creating the Body

• Hyperlinks

– anchor text element + reference attribute

<a href = “

link

”>

screen

text<

/a>

– absolute - a complete URL

– relative - link to a local Web page

– mail to - an email address

• Images

– use GIF or JPEG graphics

(35)

The Test

• Always test the page and proof read it

• Use “File Open” and “Browse” option

– typos

– missing < or >

– missing / to end a tag

(36)

Coming Soon - XML

• E

x

tensible

M

arkup

L

anguage (XML)

– adds the ability to create your own tags

– permits more exact searching

• XHTML

– defined using XML

– it is extensible

– tags are

case-sensitive