Important Reminders

1
Important Reminders!!!

• SAVE OFTEN!
• MAKE BACKUPS!

2
Tonight

• Website Design Project
• http//accweb.itr.maryville.edu/mziolkow/pdf/Dev-P
  roject-07FA.pdf

3
Also Tonight

• Planning your site
• Diagram site structure
• Logical navigation
• HTML Hyperlinks
• Web type
• Web graphics
• Tables
• FrontPage basics

4

• URL
• Uniform Resource Locator
• http // www.maryville.edu / index.htm

protocol
domain
path/file
5

• Common visual Web components
• Background image
• Header/Banner/Identity
• Navigation links
• text
• buttons
• images
• horizontal rule (lines)
• Bullets/bulleted lists
• FrontPage themes
• Coordinated groups of images, colors, etc.

6

• Web pages

• Static
• Server simply loads page in viewers browser
• Viewers browser shows page as designed
• Dynamic
• Server processes before loading page in viewers
  browser
• Informational database
• e-commerce
• Reads browser info and customizes page

7
Presenting

• Your web picks!
• Site_reviews.html file
• or
• http//accweb.itr.maryville.edu/mziolkow/site_revi
  ews.html

8
Planning the Site

• Plan the pages, plan the navigation
• Hierarchical structure
• Storyboard, flowchart, diagram, etc.
• Use arrows to
• show navigation

Main Page
Secondary Page
Secondary Page
Secondary Page
Tetiary Page
Tertiary Page
Tertiary Page
Tertiary Page
9
Questions to Ask
10
Keys to Navigation

• Effective navigation provides cues to users
  location, not just links to other pages in the
  site
• Navigation cues should give users many options
  without disorienting them

11
Navigation Cues
12
Navigation Considerations

• Always a link to the home page
• Always a communication link
• To contact or feedback form
• Email link
• Return to top of page link on long pages
• Links to page sections on long pages

13
Limit Information Overload

• Create manageable information segments
• Control page length
• Use hypertext to connect facts, relationships and
  concepts

14
Web Development Guidelines

• 3 clicks to destination?
• 30-45 second load time w/28.8 modem
• Short up front
• Logical, intuitive architecture and navigation
• Easy to read
• Use of active white/blank space
• Browser safe colors

15
Web Development Guidelines

• Site map
• Use photos to personalize, add meaning, and
  warmth
• Engage user
• Rollovers
• Feedback forms
• Animation okay if it adds to rather than detracts
  from message

16
Text-Based Navigation

• Text-based links - effective way to provide site
  navigation
• Works in both text-only and graphical browsers
• Always provide a text-based set of links as an
  alternate means of navigation

17
Text and Graphic Links
18
Graphics-based Navigation

• Standardize navigation graphics
• Provide predictable navigation cues for the user
• Repeat graphics to minimize download time
• Use consistent placement and design of navigation
  graphics to reassure the user
• Use easily understandable graphics

19
Text Images
20
Text Images
21
Web Text Principles

• Limit fonts and sizes
• Choose common, available fonts
• Browser will substitute similar font if web page
  font is not loaded on viewers computer
• Design for legibility
• Avoid using text as graphics throughout

22
Text Images
This is an image
GREAT FONT
This is editable text
Both appear the exactly the same on the computer
where the image and the editable text were
created. But they likely look different when
viewing this presentation. Why? Because the font
used for the editable text is unusual, it is
probably not installed on the computer being used
to view this presentation. Just like a browser,
the computer viewing the presentation will
substitute a font that is installed on the
viewing machine for the font in the editable
text. The substitution can drastically change the
look of a web page! Its best to stick with
simple fonts like Arial or Times New Roman for
editable text and use images for
specialty/decorative fonts.
23
Web Text Principles
Same font for headlines and navigation in
different sizes
24
Web Text Principles
Serif and sans serif typefaces
25
Web Text Principles

• A specific font is a font such as Times New
  Roman, Arial, Garamond.
• A generic font refers to the fonts general
  appearance

Generic fonts
26
HTML Text Alignments
27
HTML Hyperlinks

• Hyperlinks
• May link to
• External www. sites/pages
• Another page within in the web
• Specific area on the same web page
• Specific area of another page within the same web
  
• Specific page and area of page in an external
  website

28
HTML Hyperlinks

• Hyperlinks use anchor tags
• Container tag
• ltAgt lt/Agt
• Hyperlinks can be associated with text or images
• 2 kinds of anchor tags
• Source anchors
• Target anchors

29
HTML Hyperlinks

• Anchor tags
• Source anchors
• where a viewer clicks
• HTML code indicates where the viewer will connect
  to and the text/image that the viewer will click
  on

30
HTML Hyperlinks

• Source anchor example
• Viewer sees Maryville University
• Inserted in the code where the viewer will click
• uses href to identify link where the link will
  connect to
• Think of it as hyperlink reference

ltA hrefhttp//www.maryville.edugtMaryville
Universitylt/Agt
31
HTML Hyperlinks

• Anchor tags
• Target anchors
• the target of a source anchor
• where the viewer lands after clicking on a
  source anchor
• Example hyperlink from bottom of page to top of
  page

32
HTML Hyperlinks

• Target anchor example
• appears as normal text/image to viewer
• Inserted in the HTML code where the viewer
  lands--creating a target for a source anchor
• Uses name or id to specify/identify target
• name or id must match destination named in
  source anchor that viewer clicks on
• Known as a bookmark in FrontPage

Name of target used In source anchor
ltA nameMUgtMaryville Universitylt/Agt
33
HTML Hyperlinks

• Source anchors
• Average, everyday hyperlink
• Require a destination, but do not require a
  target anchor
• Target anchors
• A destination
• Must have a source anchor
• linking to that destination

34
HTML Hyperlinks
ltbodygt ltpgttop of pagelt/pgt ltimg srcarrow.gif"gt ltp
gtlink to top of pagelt/pgt lt/bodygt
35
HTML Hyperlinks
target anchor named top of page
ltbodygt ltpgtltA nametop of page"gttop of
pagelt/Agtlt/pgt ltimg srcarrow.gif"gt ltpgtltA
hreftop of page"gtlink to top of
pagelt/Agtlt/pgt lt/bodygt
source anchor linking to top of page
36
HTML Hyperlinks
ltbodygt ltpgtltA nametop of page"gttop of
pagelt/Agtlt/pgt ltimg srcarrow.gif width400
height100gt ltpgtltA hreftop of page"gtlink to
top of pagelt/Agtlt/pgt lt/bodygt
37
HTML Hyperlinks

• Hyperlinks
• Use full address for source anchor to external
  site
• ltA hrefhttp//www.maryville.edugtMaryvillelt/Agt
• ltA hrefhttp//www.maryville.edu/sob/index.htmgtM
  aryvillelt/Agt
• ltAhrefhttp//www.maryville.edu/sob/index.htmtop
  gtMaryville
• lt/Agt
• Use page name for links to pages within the same
  folder or FrontPage web
• ltA hrefpage_1.htmgtMaryvillelt/Agt
• mailto links
• ltA href"mailtomziolkowski_at_maryville.edu"gtEmail
  me!lt/Agt
• Attributes left, right, center, etc.

38
Images for the Web

• Most images/text made of pixels
• Control/smooth with anti-aliasing

magnified 300x
39
GIF, JPG, or ???

• Reduces original image file size
• GIF (Graphics Interchange Format) best for text
  and line art
• Saving process removes colors from image
• Can have transparent portions
• JPG (Joint Photographic Experts Group) best for
  intense color, photographs
• Saving process removes pieces of color
• No transparency

40
Images for the Web

• Animated GIF files are larger than static GIF
  images
• Use of animated GIFs can greatly increase the
  size of a Web page
• Dont overwhelm with animated images
• Animated GIFs are limited to 256 colors and can
  use transparent colors
• Early browser versions may not support animated
  GIFs

41
Images for the Web

• SWF (FLASH)
• Combines high level animation with custom
  graphics
• A specialized sector of web design

42
Images for the Web

• PNG (Portable Network Graphics) still not common
• PNG files - a free and open file format that
  displays more colors than GIFs
• PNGs - cannot be used for animated graphics
• PNGs - no transparent colors

43
GIF, JPG, or ???
.GIF image
.JPG image
44
.GIF, .JPG or ?
.GIF image W/transparent background
.JPG image cannot have transparent background

• Whats this?
• The image was saved
• as if the background
• would be white
• To avoid Most graphics
• programs enable specifying
• the background color

45
1
2

• High quality JPG
• File size 9KB
• Lower quality JPG
• File size 3KB

Original file size 136KB!
3
4

• High quality GIF
• File size 11 KB
• Low quality GIF
• File size 6KB

46
.JPG enlarged 200x
When saving to a .JPG file, save image as close
to the actual size needed to avoid resizing
(stretching) the .JPG image. Stretching the .JPG
image will result in a loss of clarity.
47
.GIF enlarged 200x
.GIF enlarged 200x
Generally, .GIFs (rather than .JPGs) can be
resized with less loss of clarity.
48
HTML Image Basics
ltIMG srcimage_name.gifgt
image tag empty tag no closing tag
attribute indicating source of the image is ahead
name of image and where the browser will find
the image
49
HTML Image Basics
You can organize images in your web into
files/folders by page or other criteria

• ltIMG srcimages/image_name.gifgt

image tag empty tag no closing tag
attribute indicating source of the image is ahead
name of image and where the browser will find
the image
50
HTML Image Basics

• ltIMG srcimage_name.gif altdescriptiongt
• Browsers receiving images will show alternative
  on mouse over
• Text-only browser will display alternative in
  place of image
• Alternative will display if graphic is broken
• Alternative will display while graphic loads

51
Icon indicates missing or broken graphic - the
browser cannot locate the file as specified in
the HTML page code
52
HTML Image Basics

• ltIMG srccolorado.jpggt

• Alternative text
• Appears in small yellow box when rolling mouse
  over image

ltIMG srccolorado.jpg alt..gt
53
Controlling Page Components

• Tables
• Zero borders
• Mathematical in nature
• Absolute positioning
• Used on class home page
• Z-INDEX allows overlapping
• Example
• ltdiv style"LEFT 490px POSITION absolute TOP
  25 Z-INDEX 1"gt
• ltimg alt border"0" hspace"0" srcimage
  _name.gif" width"290" height"545"gt
• lt/divgt

54
To view a pages table structure From your
browser window choose Edit, Select All, Copy
then Paste into new page in FrontPage
Table Structure
55
HTML Tables
Table
This cell spans 3 columns and 1 row.

• Table with 4 rows and 3 columns was initially
  inserted
• Cells merged here

Cells

• Individual cells within the table
• Cells span rows and columns

This cell spans 1 column and 1 row.
This cell spans 1 column and 2 rows.
56
HTML Tables
data

• Tables
• Container tags

Data about the individual cell like its size,
images and/or text contained within the cell
lttablegt lttrgtlt/trgt lttdgtlt/tdgt lttrgt
lt/trgt lttdgtlt/tdgt lt/tablegt
table tags
rows
57
HTML Tables
The table in this code is 350 pixels wide 1 cell
_at_ 70 pixels 1 cell _at_ 150 pixels 1 cell _at_ 130
pixels

• lttablegt
• lttrgt
• lttd width"70"gtHome islt/tdgt
• lttd width"150"gt
• ltp align"center"gtltimg border"0"
  src"A/home.gif" width"149" height"155"gtlt/tdgt
• lttd width"130"gtwhere the heart is.lt/tdgt
• lt/trgt
• lt/tablegt

58
Assignments for Next Time

• HTML Exercise 2
• Turn in on CD, diskette, or bring on USB drive
• Content Plan Draft
• Keep Considering Web Development Project!