SFAI, Adult Continuing Education

Creative Website Design

Instructor: Jonathan Grover
10 Sessions/ Wednesdays, June 2nd–August 4th
Time: 6:30–9:30pm
Location: DMS2
Number: DT1001
instructor email: studio@jonathangrover.com

online syllabus: JonathanGrover.com/CWD |

printable syllabus as PDF

Course Description:
This course will instruct students how to build their own personal creative or small business web sites. It will familiarize students with the mechanics and functioning of professional web sites and additionally explores current trends in design and web theory. This course will help even the most non-web savvy person learn the ropes to site creation and publishing. Students can expect to come away with a basic knowledge of HTML and CSS code. We will learn and use professional industry software such as: Adobe Dreamweaver (for page creation), Adobe Photoshop (for image editing & site graphics), and Adobe Flash (for basic animations). This class will cover static web page creation only and will NOT cover e-commerce shopping carts, blogs / forums, database driven web applications, or any complex Flash Actionscript.

Expectations:
Students are encouraged to participate in class sessions and arrive on time. Although some stock images/graphics will be available, students are encouraged to collect their own materials for their site building (ex. photos, drawings, text, and information). Students may acquire imagery from royalty free stock image sources, personal digital photography, hand drawn illustrations (markers, pen, paint as long as dry scan-able), other sources such as fabrics and found textures.

Lab Environment:
Students will be working on Macintosh computers provided in SFAI computer lab (DMS2), although students may bring in their own laptop computers if they wish and already have all the appropriate software used in this course (see optional software in section below). There is a NO FOOD OR DRINK policy in all SFAI computer labs.

Materials List:
There are no required materials.

Suggested Materials:

1 Gigabyte or more USB flash memory drive (thumb drive, USB stick) or external hard drive to be used for copying files back and forth between computers in lab and computers at home. Also serves as backup copy for all files created in this course. *Estimated cost $10 (2gig USB flash memory stick) up to $99 (Terabyte external hard drive). *Estimates from BestBuy (dot) com.

Optional software (for laptop or home use):

We will be using Adobe Photoshop CS5 and Dreamweaver CS5. Trial versions can be downloaded at: http://www.adobe.com/downloads/

Navigate to week: 1 2 3 4 5 6 7 8 9 10

Week 1 - June 2nd:

Meet and greet, introduction to the course, review syllabus.

How the internet works (www, servers, domains, ip addresses) - link: http://computer.howstuffworks.com/internet-infrastructure.htm (read each 1 of 12 pages by clicking next page link at bottom of each page) <- not manditory but illuminates the mystery behind how the web works..

Look at some different sites and discuss design styles (ex. corporate, pixel, grunge "texture", binary "hacker", futurist, cartoon, minimal, cyber punk, collage, retro). Which trends/styles are attractive, are they useful? what are the strengths and weaknesses of the sites you see? What makes a site good, easy to use, or memorable? Some site examples below:

15 key elements that make good websites: http://freelancefolder.com/15-top-site-elements/

Planning your site on paper, notes about features you desire, creating a flow chart to show all pages desired and draw lines to show how users can navigate your site.

See free online flow chart creator at link: http://www.bubbl.us/edit.php

Organizing materials: word docs for text, images you may want, place them into a solid folder structure. Practicing good file habits.

Setting up good file structure:

See Image

MySite (main project folder, that is all files related to your website)

|_Art (this folder contains all uncompressed images, unedited originals)
|_Layout (this folder contains photoshop layout files edited PSD files)
|_Site (this "root" folder contains only website related pages and dependent files)
|_images (contains all compressed website images)
|_index.html (this file is your sites homepage)

Naming files and folder to be web friendly:
no spaces = using-dash_or_underscores-to _connect-files_instead_of-using-spaces. name files things that make sense so that you will remember them 5 years later. Why index.html ? Browsers look for the word index as a default to know which page to load first at: www.yoursite.com (browser looks for: www.yoursite.com/index.html)

Demo: Setting up new site in Dreamweaver

DEMO - 01

Demo: Setting up remote server in Dreamweaver

Optional home work: (June 3rd - June 8th)

Look at different sites design, navigation, features. Make a note of look and feel, and features / navigations you may want in your site. Create a flow chart if you have not already in class. Start organizing files into correct file structure folders: Collect imagery for next class (ex. textures / items to scan, digital photography, drawings, etc.) and organize into the proper folders.

Royalty free stock image sources: http://www.sxc.hu/index.html

Week 2 - June 9th:

Quick show and tell of sites people found and liked and disliked.

Demo: Creating tables DEMO - 02

Demo: Scanning in the DMS lab
Demo: Getting familiar with photoshop tools and layers - See youtube resource videos #1 - #17 as needed: http://www.youtube.com/user/NGage70#p/u/16/BgAA8YbKzE8
Demo: Getting images ready for web in photoshop (modes, resolution, save for web DEMO - 03
Scan time in class.. Play with tables and basic layout..

Demo: adding text and image (alt tags) inside table cells DEMO - 04

Optional home work: (June 10th - June 15th)

Build a practice site page. Continue to collect images and text copy for your site.

Week 3 - June16th:

Learning HTML tags (in code view, reference) Common Tags Cheat Sheet

Demo: linking text DEMO - 05 - PART 1

Demo: mailto links DEMO - 05 - PART 2

Demo: anchor links DEMO - 05 - PART 3 | DEMO - 05 - PART 4

Demo: linking image (direct link, image map) DEMO - 05 - PART 5 | DEMO - 05 - PART 6

Demo: Lists (ordered, unordered) DEMO - 06

Create a basic site in class.. with tables text and images and text link navigation between your pages.

Optional home work: (June 17th - June 22nd)

Create homepage with working navigation if not done in prevous class. Create sub pages and start filling in individual page content..

Week 4 - June 23rd:

Quick review of HTML code (tags)

Introduction to CSS (inline, internal, external) * CSS-2 Library Reference

CSS Styles panel

Demo: Creating an external style sheet and linking individual HTML pages to it. DEMO - 07 - PART 1

Demo: Creating a new rule (selector types: class, tag, id, compound) and editing properties from CSS styles panel. DEMO - 07 - PART 2

CSS Properties Panel

Demo: Creating a new rule and editing properties from targeted rule in CSS properties panel. DEMO - 07 - PART 3

CSS Code View

Syntax: selector, property, value, comments.

Demo: TAG Selectors (single, group). DEMO - 07 - PART 4 | DEMO - 07 - PART 5 | DEMO - 07 - PART 6

Demo: BODY TAG background images (full screen, texture fills, fades horizontal / vertical, positioning). DEMO - 07 - PART 7 | DEMO - 07 - PART 8

Demo: CSS Links (tag, a.class for multiple links). DEMO - 07 - PART 9 | DEMO - 07 - PART 10 | DEMO - 07 - PART 11

Demo: CLASS Selectors DEMO - 07 - PART 12

Students practice CSS (stylize pages).

Week 5 - June 30th:

Demo: using Dreamweaver's CSS page layout templates DEMO - 08

CSS page layout

Demo: ID Selectors for TABLE, TD (positioning, background images, fills, margins, padding) DEMO - 09 - PART 1 | DEMO - 09 - PART 2 | DEMO - 09 - PART 3 | DEMO - 09 - PART 4

Demo: ID Selectors for DIV containers (boxes) DEMO - 10 - PART 1 | DEMO - 10 - PART 2 | DEMO - 10 - PART 3

Demo: DIV containers as page layout (alternative to tables) DEMO - 11 - PART 1 | DEMO - 11 - PART 2 | DEMO - 11 - PART 3 | DEMO - 11 - PART 4

CSS rollover navigation

Demo: CSS styling UL, LI items DEMO - 12 - PART 1 | DEMO - 12 - PART 2

** extra - nice CSS tutorial on how to create tabs that scale to the size of text link: http://www.alistapart.com/articles/slidingdoors/

Work on sites in class..

Week 6 - July 7th:

Image rollover

A look at different kinds of navigation. Examples of nice site navigation: http://www.webdesignerwall.com/trends/30-examples-of-attractive-nav/

Simple yet attractive text navigation: http://patterntap.com/, http://www.fullcreammilk.co.uk/

rollover image navigation:
http://www.apple.com/, http://www.polargold.de/, http://www.atebits.com/, http://www.erickarjaluoto.com/, http://www.sacjazz.com/

Drop down menu (spry) navigation: http://www.adobe.com/, http://www.ajaychopra.com/

Combination rollover tab system with some drop down menus: http://blog.geticeberg.com/

Left side navigation: http://www.webdesign.org/, http://thoughtandtheory.com/

Right side navigation (tab style): http://madebyelephant.com/

Anchor link navigation: http://searchinsidevideo.com/, http://www.gpacheco.fr/, http://www.fortyagency.com/

Work on sites in class..

Week 7 - July 14th:

Demo: Java drop-down menus in Dreamweaver (Spry elements) DEMO - 14 - PART 1 | DEMO - 14 - PART 2
Styling Menus with CSS tutorial here: http://dwcourse.com/dreamweaver/more-spry-menu-bars.php

** extra CSS tutorial on how to create dropdown menus with CSS only no javascript required: http://www.cssplay.co.uk/menus/dd_valid.html

A look at Flash, advantages and disadvantages

Flash Introduction

Demo: Flash basics (stage, tools, library, importing, timeline, keyframes) DEMO - 15
Demo: Flash animation (shapes, graphic symbols, tweens) DEMO - 16 - PART 1 | DEMO - 16 - PART 2 | DEMO - 16 - PART 3

A look at free Flash galleries and apps. Flash XML Galleries, Free PHP Galleries, Flash video embedding and more:

Flash Image Galleries

http://www.flashimagegallery.com/

http://www.flashnifties.com/

http://www.flashcomponents.net/components/flash_galleries_and_slide_shows.html

http://flashden.net/category/image-viewers-galleries

http://www.simpleviewer.net/products/

http://www.flashgallery.org

http://slideshowpro.net/

Flash gallery templates that load images from googles free picasa photo account

http://www.paulvanroekel.nl/picasa/

http://www.easykiss123.com/tutorials/picasa/index.html

Flash galleries that load images from flickr account

http://www.webresourcesdepot.com/xml-flash-gallery-and-flickr/

http://flickr.flashapis.com/host/?username=9345620@N04

Flash flip book (book style galleries / slideshows)

http://pageflipgallery.com/demo/ & http://pageflip.hu/

http://www.entheosweb.com/Flash/flipping_book_photo_album/index.asp

http://www.flashmint.com/show-template-2737.html

http://pano-flip-book.com/index.php?page=buy_now

http://www.flashpageflip.com/demos/basicxml/

Flash video players

http://code.google.com/p/flvplayer/

http://www.webpsilon.com/scripts/

http://www.longtailvideo.com/players/jw-flv-player/

http://www.flashloaded.com/flashcomponents/flvplayerpro/

http://flv-player.net/

Flash music players

http://musicplayer.sourceforge.net/, http://www.flashmp3player.org/

more free flash applications by catagory:

http://flashkit.com/movies/

Non Flash php gallery script

HTML/CSS/Javascript galleries:

http://visualslideshow.com/

http://dhtmlsite.com/imagegalleries.php

HTML/CSS only galleries:

http://www.smashingmagazine.com/2007/05/18/30-best-solutions-for-image-galleries-slideshows-lightboxes/

http://www.webreference.com/programming/css_gallery/

http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

PHP Galleries:

http://www.php4script.com/easy-image-photo-gallery-script/

Work on sites in class..

Individual Q & A

Week 8 - July 21st:

Flash Part 2

Demo: MovieClip (bouncing ball demo) DEMO - 17 - PART 1 | DEMO - 17 - PART 2
Demo: Buttons (Flash rollover button) DEMO - 18 - PART 1 | DEMO - 18 - PART 2
Demo: AS3,Export & Embed into Dw (stop command, on press go to commands, linking to external html page) DEMO - 18 - PART 3

Search Engine Optimization (SEO)

Go over and read Google presence PDF: http://jonathangrover.com/teaching/students/cwd/Google_Presence.pdf

Group Q & A

Work on sites in class..

Week 9 - July 28th:

Learn about site publishing (domain registration, server hosting, FTP)

Suggested companies for domain registraion and server hosting: www.1and1.com, www.dreamhost.com

iPhone / Smartphone Compatibility

http://building-iphone-apps.labs.oreilly.com/ch02.html

test your site on iphone from regular computer browser: http://www.testiphone.com/

Group Q & A

Individual consultation and site building assistance

Work on sites in class..

Week 10 - August 4th:

Finishing touches on sites, Individual consultation and site building assistance

Group Q & A

Review students sites, critique, party :)

Navigate to week: 1 2 3 4 5 6 7 8 9 10