design factors content –fig.s 4-49, 5-4, 6-3 organization –fig.s 2-10, 2-11, 2-12, 2-14, 2-15,...
TRANSCRIPT
Design factors
• Content– Fig.s 4-49, 5-4, 6-3
• Organization – Fig.s 2-10, 2-11, 2-12, 2-14, 2-15, 5-17
• Performance
• Aesthetic
• Security
A Sketch of a Web Page using Nested Tables
This figure shows a sketch of a web page using nested tables.
An Example of a Frame LayoutThis figure shows an example of a frame layout.
It is recommended to draw an example of what you would like your Web page to look like before you get started.
An Example of a Form
This figure shows a sketch of a proposed registration form.
Linear Structures
In this structure you can jump only from one page to the next or previous page
Link to previous page
Link to next page
This figure shows one common Web page structure, the linear structure, in which each page is linked to the next and to previous page, in an ordered chain of pages.
Augmented Linear Structure
This figure shows an augmented linear structure, in which you include a link in each page that jumps directly back to the first page, while keeping the links that allow you
to move to the next and previous pages.
first link jumps to previous page
second link jumps back to beginning
third page has three links
third link jumps to next page
Hierarchical Structure
This figure shows the hierarchical structure, which starts with a general topic that includes links to more specific topics. Each specific topic includes links to yet more specialized topics, and so on.
In a hierarchical structure, users can move easily from general to specific and back, but not from specific to specific.
Combination of Linear and Hierarchical Structures
This figure shows a hierarchical structure in which each level of pages is related in a linear structure.
information about the play
the scenes
each level is linear
information about the acts
over
all s
truc
ture
is h
i era
rchi
cal
Content• Commercial information
– Company background
– Product information
• Non-commercial information– Industry information
• Transaction– Order
– Payment
– Shipment
• Entertainment?
Web page design
• Static pages– Content stays the same at all times– Informative elements – Using HTML codes (usually)
• Dynamic pages – Content varies from one time to the next– Interactive elements– Using DHTML & JavaScript (usually)
Design elements
• Content– Document
– Form
– Graphics
– Multimedia*
• Navigation– Link
– Frame
– Button
– Image map
• Appearance– Text formatting
– Paragraph, Header
– Table
– List
– Color
– Special effect*• Rollovers
• Menus