web-based application development lecture 6 january 26, 2006 anita raja

Web-based Application Development

Lecture 6

January 26, 2006

Anita Raja

Agenda Attributes, Lists and Tables (concluded)

PTW Chapter 4 Designing Display and Navigation

WWG Chapter 2

Tags and Attributes Styles have properties

<style type=“text/css”>

h2 {text-align:center}

</style> Attributes have values

<font align=“center”> … </font>

No quotation marks

Quotation marks

Tags and Attributes <font>

size= “1” to “7” (smallest to largest) color= “red”, “blue”, etc. face= “Arial”, “Courier”, etc.

<font size=“5” color=“red” face=“Arial”>

Tags and Attributes Alignment = “left”, “center”, “right” Using tags:

<h2 align=“center”>

<p align=“right”> Centering

<center>this text is centered</center>

Tags and Attributes Preferred method using styles:


h2 {text-align:center}

p {text-align:center}

</style>

Tags and Attributes Background colors

<body> tag bgcolor and text attributes

Using tags (deprecated):

<body bgcolor=“yellow” text=“blue”>

Tags and Attributes Using styles in the body:


body {background-color:yellow; color:blue}

</style>

Tags and Attributes Horizontal rules Using tags:

<hr size=“7” width=“75%” /> Using styles:

<style type=“text/css”>hr {height:7px; width:75%; background-

color:red}</style>

Ch04-Ex-01

Displaying Lists Ordered:

1. Item 1

2. Item 2 Unordered:

• Item 1• Item 2

Displaying Lists Ordered lists:

<ol><li> Item 1 </li><li> Item 2 </li>

</ol> Block-level element Items indented relative to other text Ch04-Ex-02

Optional in HTML, Required in XHTML

Displaying Lists Unordered lists:

<ul><li> Item 1 </li><li> Item 2 </li>

</ul> Block-level element Items indented relative to other text Ch04-Ex-03

Optional in HTML, Required in XHTML

Displaying Lists Nesting

Ch04-Ex-04

<ul><li>…</li><li>…</li><li>…</li>

</ul>

<ul><li>…</li><ul>

<li>…</li> …</ul><li>…</li><li>…</li>

</ul>

Displaying Lists Customizing list displays

Add a “type” attribute to <ul> tag Values may be “disc”, “circle”, or “square”

<ul type=“square”>

…

</ul>

Displaying Lists “type” is a deprecated attribute so…


ul {list-style:square}

</style>

Displaying Lists Definition lists (def line, def term, def data)

<dl>

<dt> term </dt>

<dd>definition</dd>

<dt> term </dt>

<dd>definition</dd>

</dl> Ch04-Ex-05

Tables One or more rows, each divided into … One or more “cells” containing data

<table><tr>

<td>…</td><td>…</td>

</tr></table>

Repeat for each cell in rowRepeat for each

row in table

Tables Initially, table borders are invisible unless the “border” attribute is included

<table border>or

<table border=“4”>

Ch04-Ex-06

Tables In cells where each row has the same number

of columns … Each cell in a column is as wide as the widest cell

in that column Text within cells is automatically aligned to the left

Tables Table headers

<th> & </th> replace <td> & </td> Makes data bold and centered Ch04-Ex-07

Table captions <caption> … </caption> Place before or after table Ch04-Ex-08

Tables Alignment

In <td> tag … Horizontal alignment: align=“left” (center, right) Vertical alignment: valign=“top” (middle,

bottom)

<td align=“center” valign=“top”>

Tables Padding

White space between cell edges and text Ch04-Ex-09

Spacing Width of dividers between cells Ch04-Ex-10

<table cellpadding=“3” cellspacing=“5”>

Tables Table width – legitimate use

<table width=“500”>

Cell width – deprecated<td width=“75”>

Tables Cells spanning multiple columns

Ch04-Ex-11

<td colspan=“2”>

Cells spanning multiple rows Ch04-Ex-12

<td rowspan=“3”>

Assignment Debugging Exercise, p. 106 Correct errors Post corrected document to your Web

space as “Lagerstrom-Ch-4.html” Grade based on:

Appearance Technical correctness of code

The Web Wizard’s Guide to Web Design

Chapter 2

Designing Display and Navigation

Introduction

“A well-designed Web site doesn’t just look good; it

also works well.”

Introduction Remember: form follows function. Base site design on what users need to do. Functionality common to most Web sites:

Display of information Navigation through the site Choosing & finding Feedback & interaction Communicating the organization’s identity

The Display of Information

To decide which display works best, consider the user

How does the target audience think?


Classical printed display styles Magazine: 2-3 columns, images

interspersed Newspaper: 6-7 columns Book: 1 column, images at top/bottom

Early Web design looked like existing printed pages

Problem: screens aren’t pages


Pages Screens

16” wide 10” wide

High resolution:• Magazine: 200 dpi• Newspaper: 300 dpi• 9 point type easy to read

Low resolution:• 75 dpi*• 12-point type

Built-in navigation Must be provided* Dot = Pixel


General rules: Use relatively large type (12-point or more) Single column ≈ 5” wide White space around edges


Use of thumbnails Small in size Download quickly

Two-stage interactive displays User selects appropriate level of detail


Warning Modeling on traditional media may not be

effective Web pages are different

Size Resolution Interactivity!

Watching and Listening

Screens are not radios or televisions May disturb others Users want more control Embedded or not?

Fully embedded: user has no control Embedded with user controls Separate window, user controls

Limited in size and quality Does the sound/video advance the purpose of the

site?

Tables and Lists How should information be presented?

Plain text Bulleted lists Numbered lists Tables (rows and columns)

Use tables to compare information in two dimensions Models & features of products

Tables and Lists

Restricted screen width: Most screens are 800 pixels wide -300 pixels for borders, scrollbars, and

navigation 500 pixels left 100 characters of 12-pt text.

Navigation Through the Site

Unlike books, magazines, & newspapers, there is no common Web format to specify: Whose site am I looking at? Where am I within the site? What else is available from this site? Where should I go next? How do I get there? How do I find whatever I’m looking for?


BMW – good navigation? Did the BMW site:

Answer all the questions? Without using too much space? In the simplest manner? Without distracting from the main site content?

Navigation should be consistent across whole site

http://www.bmw.com/com/en/index_highend.html


Why is site identification important? How is it accomplished?

Text (name of organization) Logo (graphic)


Common visual theme Identifies Reinforces

Balance: Content Navigation Organization identity


“Place” within books, magazines, movies Intuitive Familiar

Place within Web sites? Menus

Horizontal Vertical


Menus: Provide means of navigation Show site organization Indicate current location

Keep size small, content short Not every page needs a menu Keep style consistent throughout site Site maps …


Cascading titles (“breadcrumbs”)


Pop-up menus – iMovie101 Answers two key questions:

What else is available? Where do I go next?

Above the scroll! Keyword search

http://www.lengel.net/ali/crs_imovie/imovieh.html


Don’t have to provide every navigation aid to every user on every page

Arrange aids so they: Obvious Consistent Easy to use Take up as little “floor space” as possible

Feedback and Interaction

Internet is two-way State interactivity goals in site’s purpose Is collecting user information important?

Explicit (user is aware) Must allocate space on page(s) Provide functionality (error checking, other)

Implicit (user is not aware)

Feedback and Interaction

Methods of interactivity Forms (what information will be collected?) Discussion boards

Asynchronous Chat rooms

Synchronous

At early design stages just decide which forums are appropriate and support the site’s purpose(s).

Organizational Identity Visual identity Symbol

Nike swoosh GE symbol Ford oval

Color (IBM blue) Sound

Domino’s Pizza

Organizational Identity

Colors Logo Font Design features

Shapes Ford’s oval motif

Patterns Mascots

Look and feel

Assignment

Hands-On Exercise #5, p. 54 For a corporate site you select …

Analyze it in terms of the design features covered in the chapter

Identify: Common themes Good and bad elements (if any)

In addition to your analysis, turn in a hardcopy of any relevant pages from the site you selected.

web-based application development lecture 6 january 26, 2006 anita raja

Documents