Transcript Creating Web Pages: Week 4 - Purchase College Faculty Web Server

Creating Web Documents
Drawing
Web usage, Site design & Page Design
HTML: Lists, Tables
Share experiences
Homework: Complete ftp upload & e-mail TA
Read in HTML text on tables
Free hand drawing
• Photo Shop
• Paint Shop Pro
Web Increasingly World Wide
by internetnews.com Staff
• [January 29, 2001] The Internet was created by Americans, but they
are no longer in the majority, according to a study by WebSideStory,
the company behind HitBox.
The survey found that 54.95 percent of Web-users are non-American,
the first such finding ever. The largest group of non-American surfers
came from Germany (5.6 percent), followed by Canada (5 percent),
South Korea (4.6percent) and Japan (4.3 percent).
By comparison, the population of America is estimated at just over 275
million, Canada's at 31 million, Germany's at 82 million, South Korea's
at 47 million and Japan's at 126 million.
As the Net develops, English will cease to be the dominant language,
with Chinese, French, German and other languages generating webs
within webs, only available to those who speak the language and
thereby have an understanding of the culture.
Web usage
THE COMMERCE Department report, set for release
Tuesday (5 Feb 2002), found that 143 million Americans, or 54 percent
of the country, were using the Internet as of September. The number
was up 26 percent from a year earlier. The government numbers are
slightly higher than many private-sector estimates.
Nielsen/NetRatings, for instance, estimated that Internet usage hit
115.2 million in October, up 15 percent from a year earlier.
Nielsen//NetRatings data from May 2001 shows that in the US, women
now make up 52% of the total at-home Web population, and the
Internet population now mirrors the offline population. This trend is
being replicated at various rates worldwide, but most rapidly in
Asia-Pacific where in Australia, women now make up 48% of the
Internet population, followed by New Zealand (46%), South Korea
(45%), Hong Kong (44%), Singapore (42%), and Taiwan (41%)
Extra credit opportunity
• Find source and summarize with current
(2003) data.
• Post in General Discussion forum.
• Any predictions?
Site Design concepts
• Chunking information
– Dividing material into small, coherent pieces (chunks) of
information
• Shallow versus deep organization
– fewer pages, each with many topics versus many layers of
menus, requiring the user to click repeatedly to get to topic
• Hierarchy of importance
– establishing priorities, may also involve general to specific
• Splash screen
– aka a site cover, provide aesthetic enticing experience or be
viewed as needless delay
• Intranet versus internet
– internal to organization versus published/available to Web
Suggestions
• Design site from user’s viewpoint, which
may or may not be how the
company/organization is organized.
• Be aware that linear narrative is a powerful
way to organize material, but long linear
text does not make best use of the Web.
– Be aware also that Web can be viewing
mechanism and distribution of information
meant to be printed for off-line reading.
Suggestions, continued
• Make each page / hyperlink jump provide
some/substantial information
• Consider (roughly) ratio of
– information to
– other things on the page: decoration unrelated
to substance or mechanics of site itself.
– Edward Tufte refers to data junk.
Web site components
• Mechanism for user feedback
– E-mail, possibly multiple e-mail addresses
– Forms
– Phone numbers / addresses
• Identification of site owner, author, dates,
special instructions
• Search site capabilities
• Links to other sites
Internal links
• You can put in a link to a section of the same file
<a name=“details”> stuff </a>
<a href=“#details”>Go to stuff </a>
• The HTML for linking to another HTML file on
your site is:
<a href=“filename.htm”> More </a>
File in same folder as this HTML page
<a href=“/subfolder/filename.htm”>More </a>
File in subfolder in the folder of this page
<a href=“../folder/filename.htm”> more </a>
Go up a level and then back down for file
Page Design
• People scan – In general, they don’t read.
• Your design can help people grasp the
organization and significance of
information.
• Avoid too wide columns: to encourage
scanning and also avoid horizontal scrolling
and problems in printing.
Page Design concepts
• Design grid (could also be viewed as a site design
concept: making the design layout consistent
across all pages)
– basic layout, blocks of text and images
• Visual hierarchy
– making the design emphasize important elements and
help visitor navigate the page/site.
• ‘above the fold’
– from newspapers: here, above the typical scroll point
• Display real estate
– area available for your material
Discuss experiments viewing
Web pages
HTML tables
• Tables used for presentation of tabular data AND
layout. Anything can go in a cell (= table datum)
including an image.
<table border="1">
<tr>
<td>&nbsp; </td>
<td> …. </td> </tr>
<tr>
<td> … </td>
…
</tr>
</table>
Class exercise 1
• Create HTML file with table, 5 columns
–M T W R F
• Note: R is the catalog abbreviation for Thursday
– In rows, write the classes you are taking
Class exercise 2
• Enhance the table to indicate times. There
will be empty slots. Add a column (on the
left) that indicates the times.
Table layout example
• Picture next to text. Layout is set at 500 pixels.
<table width=500>
<tr>
<td> <img src=“bird.jpg”> </td>
<td> This is a bird and on and on and on….</td>
</tr>
<tr>
<td><img src="frog.jpg"></td><td>This is a frog </td>
</tr>
</table>
Class exercise 3a & 3b
a.
• Acquire at least 3 images.
• Use a table to layout the page with images
on the left and text on the right.
b.
• Alter text on the right and then text on the
left.
More on tables
•
•
•
•
•
Consider tables within tables (nesting)
bgcolor and background
cellpadding
align
border, bordercolor, bordercolordark,
bordercolorlight
Class exercise 4
• Use tables within tables to refine your
schedule
• Invent another use for tables within tables
HTML lists
• Unordered lists:
<ul> <li> </li> <li> </li> </ul>
• Ordered lists
<ol> <li> </li> <li> </li> </ol>
You need to consider content when deciding whether
or not order matters in a list.
Class exercise 5
• Consider your schedule (again). Use lists of lists
to display your classes. Note: you may use ul at
the top level and include a day
<ul>
<li> Monday
<ol>
<li>… </li> <li> …. </li> </ol>
</li>
Etc.
Homework
• Read in text on tables and lists. Experiment with
attributes (extra information you can put within
the tag).
• Sign on to CourseInfo
– to check on status of server.
– Review PowerPoint charts
(members.bellatlantic.net/~vze2s839)
– Read other notes (Course Documents)
• Question to ponder for next class: is a picture
worth 1000 words?