WLLS 102 Class 7 3/19/2004 Professor C. Shilepsky Wells College

WLLS 102 Class 7

3/19/2004

Professor C. Shilepsky

Wells College

Exam etc.The worst site I have seen this week

Problems 1-7:Solutions on lineHardest part: short answer

Problem 8: Overall the writing was solid but wordy. Prune words that don't add content:

very, exceedingly, also, actually, currently, ever-present, general

You are stingy with paragraphs! Break out ideas into their own paragraph.

Don't write tentatively: "It appears that X" → "X"

Exam etc.

Simplify:

utilize → use

numerous→ many

been in existence → existed

Writing approach:

Organize the paragraphs

Tighten the writing (this takes cold-blooded rewrites)

Page DesignVisual hierarchy

ConsistencyCascading Style Sheets (Tutorial 7) example

Page dimensionsCan be enforced with tables

Page length Allison's page versus WLLS 102 schedule

Design grids

Page headers and footers

Page layoutOptions: tables, frames, CSS

http://aurora.wells.edu/~ccs/cs.css

http://www.allisonladd.com/

Design GridsGoal: "a consistent, logical layout, one that allows you to plug in text and graphics without having to stop and rethink your basic design approach on each page"

Evolution: 1, 2, 3

http://aurora.wells.edu/~ccs/cs132_00/cs132.htm

http://aurora.wells.edu/~ccs/cs132_02/cs132.htm

http://aurora.wells.edu/~ccs/cs132_04/132_sch.htm

Page Headers and Footers

Example: top and bottom of 102 pages

<body>

<iframe width="100%" frameborder="0" scrolling="no"

src="102_top.htm">

</iframe>

...

<iframe width="100%" frameborder="0" scrolling="no" src="../footer.htm">

</iframe>

</body>

header footer

http://aurora.wells.edu/~ccs/wlls102/102_top.htm

http://aurora.wells.edu/~ccs/footer.htm

Page Layout: FramesFormat:<frameset cols = "33,33, *"> <frame src="x.htm"> //first frame <frame src="y.htm"> //second frame <frame src="z.htm"> //third frame </frameset>

<frameset rows = "25,25,25, *"> <frame src="x.htm"> //first frame <frame src="y.htm"> //second frame <frame src="z.htm"> //third frame <frame src="w.htm"> //fourth frame </frameset>

x y z

xyzw

Frames

Uses:Combine separate files into one page.How is this easier than nested tables for layout?

Development approach: Build and test the frames separately Incorporate pages from other sites Is this an appropriate use of frames? Caveat: they should be your pages

http://aurora.wells.edu/~ccs/cs105/frames.htm

FramesHow would we accomplish this layout?

Table: 3 columns and 4 rows. columns 1 and 2 span 4 rows

Frame: <frameset cols = "30,30 *"> <frame src="x.htm"> //first col <frame src="y.htm"> //second col <frameset rows = "25,25,25,25"> //third col <frame src="z1.htm"> //row 1 <frame src="z2.htm"> //row 2 <frame src="z3.htm"> //row 3 <frame src="z4.htm"> //row 4 </frameset> </frameset>

x y

z1z2z3z4

Accessibility• Issue:

– The Web is a major factor in functioning in today's world– It is not accessible to all (vision/hearing/motor/cognitive problems)

• WebAIM "Keeping Web Accessibility in Mind" (video)

• Leader in accessibility guidelines: – W3C How people with disabilities use the web

• Suggestions– Captions or descriptions for images– Titles for frames and tables– Text versions of pages with sound– More

Have a Great Break!

Documents

WLLS 102 Class 7 3/19/2004 Professor C. Shilepsky Wells College