Home
| Understand | Envision
| Design | Hot Sites
CUIP Web
Workshops - Fall 1999
By
Bonnie DeVarco
Introduction
Overview of Workshops
List
of Lab Tasks
Introduction
This is a web-based
syllabus for reference during the Workshops. I will continue to post new sections
to the reference home page http://members.cruzio.com/~devarco/tertia/
as we proceed through the quarter). Please refer to it regularly.
This series of
five two-hour workshops will introduce students with varied backgrounds and
computer skills to the process of planning and developing a site for the World
Wide Web. A general overview of the World Wide Web, online research, navigation
trends and Internet nomenclature will be followed by a hands-on introduction
to web authoring tools (Dreamweaver 2 specifically), support software, storyboarding,
design and file format basics. Students will format pages and create graphics,
with a focus on effective communication to various audiences and careful consideration
of the dynamic nature of the medium. Students will be required to work in teams
of two or three, develop case-studies and references, and regularly utilize
web-based resources for content creation and production. Teamwork, peer support
and mentoring will be encouraged. Each student will complete a core web site
at the end of the series and will contribute to a growing body of online resources
for future students.
Overview
of Workshops
Week 1: Hands-On
Introduction to the World Wide Web
- A brief introduction
to the history and trends of the World Wide Web.
- Hands-on overview
of the latest search engines and web-based navigation.
- Interactivity/Immersion
- 2D to 3D.
- Copyright procedures
for web-based material. Education "netiquette" policies and procedures.
- Introduction
to web-based readings, master sites and resources for web development.
Week 2: Hands-On
Introduction to the Tools
- Intro to Power
Point, Dreamweaver 2, Photoshop, Scanner.
- Overview of
file formats and tools for developing documents and power point presentations
bound for the World Wide Web.
- Deconstructing
Web Sites - Review of sample sites built by University and High School students.
- Best Practice
Examples & Case-Studies - Examples of leading edge design will be demonstrated.
- Scanning Basics
and Dreamweaver 2 page demonstration.
Week 3: Setting
up the Structure
- Designing with
the "audience" in mind
- Storyboarding/Concept
Mapping
- Image selection
and creation
- Site Mapping
for efficient navigation
- File naming
conventions
Week 4: Hands-On
Production
- Working with
Tables & Layers
- Cascading Style
Sheets
- Image-Mapping
Techniques
- Rollovers and
Interactivity
- Design Techniques
for a hyperlinked environment
- Photoshop Tricks
- Web-Safe Colors
Week 5: Putting
it All Together
· Copy Editing
· Copyright and Permissions
· Presentation and Navigation Refinements
· Researching Related Materials and Links
· FTP - File Transfer Protocol
All students
are required to:
- Keep a zip
disk with text and image documents on it for use in the lab.
- Use a Microsoft
Word program to write, compile and edit reports and information that are destined
for the web. You will be drawing from your already researched and written
works and choosing sections of them for final presentation on web pages and
in the V-UCSC galleries.
- Bring in photographs
or slides for scanning, or select jpgs straight from the web using the method
shown (be prepared to do a permission search for web-based jpgs).
- Strive for
simplicity in web structure and design since content is most important element.
Each core site should have an entry page, no more than four inner pages with
content, an "about" page and a "links" page.
Special
Note: You are encouraged to use the computer labs as much as you need to. The
availability and class schedule
for the Applied Sciences Lab 213 and other CATS labs can be
found at:
http://wwwcatsic.ucsc.edu/Labs/.
Please
feel free to contact me with questions at:
devarco@cruzio.com
The main
software tools we will be using:
- Netscape
Navigator - GO TO: Start Menu, Internet
Tools, Netscape Navigator
- DreamWeaver
2.0 - GO TO: PCFiles, Internet Tools, DreamWeaver,
Start icon
- Photoshop
- GO TO: PCFiles, Graphic Tools, Photoshop
- Power
Point - GO TO: Start Menu, Office Tools,
Power Point
- Useful
Meta Information - GO
HERE FOR ACRONYMS USED IN CLASS
List
of Lab Tasks
|
Team
Tasks
|
Web
Page
|
| |
|
| Site
Concept |
|
| |
- Determine
web-based theme related to Internship.
- Determine
target audience (other researchers, laypeople, students, institutions,
etc.) for your page.
- Determine
your preferred media & compile your images in hardcopy, jpgs or
gifs.
- Arrange
major sections of your work into no more than four theme areas
|
| Storyboarding |
|
| |
- Storyboard/Concept
Map the sections of your site using Microsoft Word, sketch on paper
or index cards (methods will be shown).
- Sketch
out or identify major design and navigation elements you want on your
site - font style, original art, clip art or style templates. (We will
not be using frames for class web pages unless an experienced webmaster
is on your team.)
- Arrange
your site into sections as follows:
- Index
- Title, first visual/s, site mission statement & site map
- About
- A brief statement about you and your work. Photo is optional.
- Four
sections - Determine which images go with which blocks of text. These
pages need to be rich with content - use visuals sparingly.
- Links
- Compile at least 10 links from the WWW to present with your web page
and gallery so your work can be seen in its larger global context.
|
| Structure
Set-Up |
|
| |
- Set up
your main files inside the main folder with the following structure
(we will do this in lab):
- Site
Art Folder - art (all jpgs or gifs will go in here)
- Main
page - index.htm
- About
- about.htm
- Inner
page 1 - name1.htm
- Inner
page 2 - name2.htm
- Inner
page 3 - name3.htm
- Inner
page 4 - name4.htm
- Links
page - links.htm
|
| Design/Content
|
|
| |
- Size
and compile all scanned images (72 dpi and no more than 25k per image)
in photoshop. Place all final art in "images" folder. (Formatting
will be demonstrated in class.
- Set up
a basic template for all inner pages based on your original storyboard
design.
- Page
by page, integrate already prepared text and images into your simple,
but elegant design. (We will go over this in class)
- Link
images to web pages.
|
Back
to Top
Home
| Understand | Envision
| Design | Hot Sites