Web Design Basics: Online Tutorial

WICshop Handout November 2007
http://wic.library.upenn.edu/multimedia/tutorials/webdesign.html

Questions? Email wic1@pobox.upenn.edu or stop by Vitale Digital Media Lab

Workshop Agenda

1. Critiquing relevant websites
• Create a list of relevant websites (Try tagging them)
• Notes and discussion on what works for you
• Imitations - many ways to achieve similar effects
2. Tools
   • Notepad or other Text Editor
   • Adobe / Macromedia Dreamweaver - professional choice, available in the Commons on PC and Mac
   • Apple iLife's iWeb - easy to use, templated look, only for Mac. Here is a sample iWeb site.
   • Microsoft FrontPage or Publisher
3. Site Design concepts
   • Site Structure - Site map options
   • File Folder Structure - File structure helps with site maintenance
• "Chunking" your information into segments that are one to two pages of print
• Too-deep versus too-shallow site maps - striking a balance and using your main page space effectively. Example of WIC faculty page - reducing menu options to the basics
4. Page Design concepts
   • Templated Look - discussion of HTML versus CSS. CSS allows you to define a general structure and change the details frequently
   • MIT website - changes its look every day
   • CSS Zen Garden - shows how CSS can be used for powerful sitewide changes
   • Advantages of using CSS
5. HTML Tags concepts
• Getting to the nitty-gritty: Tag Structure
• Common Tags used today - note changes in past two years!
• Simple tags - an interactive page (Type a tag in and you can check for typos)
• Named colors for use in HTML tags
6. Dreamweaver Hands-on
   1. Open Dreamweaver and select new HTML page
   2. Type in a sentence and try the Code / Split / Design tabs to look at your webpage
   3. Save the document on your flash drive in a new directory - name it as "index.html"
   4. Basics of working with Dreamweaver - tour of the software
      1. Properties - links, format, font, size, color, justification
      2. Files - connection buttons, Local View versus Remote View
      3. CSS window
      4. Assets - things you accumulate over time and use repeatedly
      5. Snippets - handy preformatted items - Drag to the work area to try them out
   5. Insert Menu Tour
      1. Tag Directory
      2. Images
      3. Rollover images
      4. Media - Flash, Quicktime, animation, etc.
7. Tables, Tables and more tables!
   • Tables are the simplest way right now to control your page. They are disappearing over time though - being replaced by CSS and automated systems.
   • Library Labs: Example of a bordered table
   • Penn Homepage - Example of a no-border color-filled table
   • Vast.com: Example of a no-border table - very common!
   • Choose Insert / Table and make a 3 by 3 table. Choose a border of 3 and cell space and cell padding of 5. Experiment with changing the width of the columns and the table.
   • Click in a cell and change the background color. Now try the same table with no borders and no cell padding. It is easy to achieve a variety of effects.
8. Conclusions
   1. Web design takes time! Simple tasks can take a long time while complex tasks can be quick. Think strategically about your time and what you want to accomplish
   2. The Vitale Digital Media Lab staff is here to help you. The Lab Blog and Lab Site have details.

References and Web Resources:

Web Style Guide from Yale University - Several graphics links here go to this site.

Dreamweaver Support Center - Adobe.com

iWeb Tutorial - Apple.com

Basic HTML Tags Tutorial - htmlgoodies.com

Manipulating Images HTML Tutorial - htmlgoodies.com

More advanced HTML Features Tutorial (Rollovers, rotating images, sound files) - W3.org

Comments and suggestions? Send to wic1@pobox.upenn.edu