Weaving the Web

1
Weaving the Web

• How to put your creative genius on the World Wide
  Web

2
Beginning _at_ the beginning

• Make an ICARUS account
• Request for new website / access to existing
  website
• URL and directory path
• Tigger
• replace http//www.uic.edu/depts/xyz with
  /usr/local/etc/httpd/htdocs/depts/xyz
• Icarus
• replace http//www2.uic.edu/stud_orgs/xyz with
  /usr/local/etc/httpd/htdocs/stud_orgs /xyz

3
Access to existing websites

• After submitting a request for change of access,
  you will get a reply back within 7-10 business
  days about your request being processed, after
  that..
• Get a web authoring tool like Dreamweaver or an
  FTP client to upload/download WebPages
• The Unix path where files are located is usually
  /usr/local/etc/httpd/htdocs/stud_orgs /xyz where
  xyz stands for the appended name of your
  organization
• Create a new profile on FTP client
• hostname is tigger.cc.uic.edu,
• password is the same that is used for netid login
• Download existing pages, make updates and upload
  them back !

4
For New Websites

• Get a web authoring tool like Dreamweaver or an
  FTP client to upload/download WebPages
• The Unix path where files are located is usually
  /usr/local/etc/httpd/htdocs/stud_orgs /xyz where
  xyz stands for the appended name of your
  organization
• Create a new profile on FTP client
• hostname is tigger.cc.uic.edu,
• password is the same that is used for netid login
• Refer the remaining slides for creating an
  effective website

5
Web Authoring?

• Popular WYSIWYG Web Editors
• Dreamweaver from Macromedia
• Netscape Composer
• FrontPage
• And of course theres HTML!
• Learn some basic coding
• Use view source on pages that you like and
  explore!

6
Design Philosophy

• What are your ultimate objectives?
• Write a SOP for your site!
• Tool to analyze the success of your web site
• Concise outline of info your site will contain
• Know your audience
• Understand the knowledge, background and needs of
  users
• Entice Web surfers
• Analogous to magazine covers!
• Links should point inward (into your site)

7
Site Design

• Content
• Chunk information into logical units
• Relationships
• Relate the chunks of info so that they are a
  prioritized list of pages
• Organize them based on the degree of
  interrelationship among units

8
Site Design ...

• Site Hierarchy

9
Site Navigation

• Build Clear Navigation aids

• NO Dead-end pages

10
Page Design

• Basic elements of a document
• Make Web Pages Free-standing
• Who
• Tell the reader who is speaking
• What
• Include clear titles
• When
• Date each page and change it when updated
• Where
• Offer clues about the physical origin

11
Page Design...

• Style-setting
• Decide on fonts, inter-paragraph spacing etc
• Animation and Images
• Choose contextual images
• Use Tables to interleave them effectively
• Popular formats GIF/JPEG (Others may not be
  supported by most browsers)

12
Page Design...

• Consistency
• Repetition is NOT boring!
• Gives your site a constant identity
• Easy to adapt for users
• Balanced visuals and text
• Too much of anything gets on peoples nerves
• Careful layout .. The screen is smaller than a
  printed page

13
Page Design Tips

• Colors
• Use colors to provide visual relief
• Subtle backgrounds - pastel shades
• Contrast type with backgrounds
• Avoid bold and saturated primary colors (and CAPS
  LOCK statements!) except for emphasis

14
Page Design Tips

• Tables
• Use them for controlling page layout.
• Visible and Invisible ones
• Without tables resizing changes text flow.
• Define Cell width with absolute values
• NO Borders, Please!

15
Page Design Tips...

• Frames ..
• To use or not to use that is the question!
• Allow display of multiple documents on a single
  page
• Sometimes yield unexpected results (especially
  when using the Back Button!)
• Usually useful for frequently changing sites
• Use them with Caution though.

16
Getting your hands on it...

• Stuff to do with Dreamweaver and Netscape
  Composer
• Uploading your Site

17
(No Transcript)