Electronic Publishing

1
Electronic Publishing Web DesignMID-TERM
REVIEW
2
Name and describe at least three fundamental
design concepts that guide the arrangement of
design elements in a composition

• Unity the relationship between individual design
  elements and the composition as a whole
• Balance The state of equalized tension within a
  composition
• Dominance the varying degrees of emphasis in a
  composition

3
What is the difference between a vector graphic
and a bitmap (raster) graphic?

• Vector Object-oriented graphics Made-up of
  vectors Resolution Independent Used primarily
  for hard-edged graphics such as illustrations,
  logos, charts
• Bitmap Made-up of pixels
• Resolution dependant Can represent subtle
  gradations of color Used primarily for
  continuous-tone images such as photographs

4
What are the two most common graphic file formats
used on the web? Describe their differences.
GIF (Graphic Interchange Format) In general,
best for line drawings, cartoons, illustrations,
logos, or images that use large flat areas of
color. Lossless compression 8-bit color support
(256 colors) Supports interlacing Supports
transparency Supports animation
JPEG (Joint Photgraphic Expert Group)In general,
best for continuous-tone photographic
images. Lossy compression 24-bit color support
(millions of colors) Progressive JPEG support
5
What is the difference between image resolution
and pixel dimension?
Pixel Dimension The number of pixels along the
height and width of an image Image Resolution
The number of pixels per inch in a printed image
6
What does it mean to resample an image?
When you resample an image, you physically change
the pixel dimensions of the image. Downsample
reduces the pixel dimension of an
imageUpsample increases the pixel dimension of
the image (adds pixels that were not originally
there when the image was created or digitized)
7
At what resolution should all web graphics be
saved? Why?
72 ppi (pixels per inch) Image pixels map
one-to-one with the display resolution of a
monitor. Higher resolution images have a larger
pixel dimension and will appear larger on screen.
8
What are the two types of color spaces we
discussed in class? In what color mode should you
create web graphics?

• CMYK Cyan, Magenta,Yellow, Black The
  subtractive color space used in the printing
  process
• RGB Red, Green, BlueThe additive color space
  used to display color on monitors (video)

9
What are some of the major steps in the web
design process?
Project Definition Conceptualize and Research
(Define your goals and strategy, research your
content and audience) Information Architecture
(Information Design) Organize and prioritize
the information, give shape to the structure,
develop the navigation Interface Design Develop
the look and feel, develop the interface.
Content Creation Produce the graphics and HTML
Document, Create a working prototype.
10
What are some of the variables that influence web
design? How would they affect your design?
Unknown Browsers Unknown Platforms Unknown User
Preferences Unknown Monitor Size and Monitor
Resolution Unknown Connection Speed Unknown
Colors Unknown Fonts
11
What is HTTP?

• HTTP Hypertext Transfer Protocol
• The protocol or rules that specify how
  information is requested and sent between web
  server and client

12
What is HTML?

• HTML Hypertext Markup Language
• The language used to write web page documents.
• The new standard is called XHTML eXtensible
  Markup Language (a stricter version of HTML)

13
What is the Basic Structure of a HTML document?
lthtmlgt ltheadgt lttitlegt This is the page title
lt/titlegt lt/headgt ltbodygt lt/bodygt lt/htmlgt
14
What do the following tags do?

• lta hrefhttp//www.uwm.edugt UWM lt/agt

The anchor tag (ltagt) Creates a hyperlink

• ltimg srcflower.jpggt

• The image tag (ltimg srcfilenamegt)Places a
  graphic onto the page. The src attribute is
  required it tells the browser the location of
  the graphic.

15
What is the significance of index.html?
index.html is often the DEFAULT file name that
servers will look for in a directory. index.html
is usually the name of your homepage
16
What is the difference between a relative and an
absolute link?

• Absolute Link provides the full URL for the
  document including the protocol (http//), the
  domain name, and the pathname as necessary.
• Relative link describes the pathname to the
  linked file relative to the current document. Use
  to link to documents on your own site (i.e., on
  your own server)

17
How do you create a link from about.html to
index.html?
lta hrefindex.htmlgtBack to Homelt/agt
18
How do you create a link from index.html to
advising.html?
lta hrefacademics/advising.htmlgtAdvisinglt/agt
19
How do you create a link from advising.html to
index.html?
lta href../index.htmlgtBack to Homelt/agt
20
How do you create a link from mlis.html to
index.html?
lta href../../index.htmlgtBack to Homelt/agt
21
Folder Structure Path Names
Protocol http// Tells browser that its using
Hypertext Transfer ProtocolDomain Name
www.sois.uwm.edu Indicates the server that the
browser should connect toPathnameFilename