home

 

 

 

 

WELCOME!! This should be a fun semester...

If you don't have an iPod yet, I recommend you get one - a 20GB size is sufficient. I'd be happy to email your parents to explain why this is a necessary expense. A 1GB flashdrive will also work.

You need a notebook. One with those pocket dividers would be handy to hold handouts, layouts, etc., or a 3 ring binder and punch would also work well.

There is no text for this course, but there is a (slightly outdated) reader available at EPC in Shaffer. While it is old, it is still a valuable resource because as I lecture, you can jot down any additional notes covered in class, and make corrections to any seriously wrong parts (although there are probably not too many, really). There are a lot of good third party books, too. If you'd like some recommendations, let me know. And the web is a great place to find tutorials on how to do specific things, especially if they are not covered in class. Be resourceful!

If you need me outside of class, I am frequently online (screen name tonitoland), and you can always email me at toni@tatoland.com

your site must have:

  • at least 6 pages, including your “home” or “main page” (index.html)
  • contact information (i.e. email link)
  • at least one 10-20 second animation
  • a consistent layout
  • a consistent navigation system
  • a Fireworks element of some sort (nav bar is good)

Your site may NOT be created totally in Flash.

You may NOT create a portfolio-based site for yourself.


It’s extremely important to understand that although possible, and even “sexy,” to build a site that’s entirely done with Flash, the purpose of this course is to engage your creativity in a way that utilizes all the tools we’ll discover this semester. Save the “grand” idea for next semester/year if/when you have an opportunity to create a new look.

If your site is not uploaded and functioning by exam week (December 9, 2008, to be precise) you will fail this course. No exceptions; back up your work frequently. If you have not backed your work up, and your computer crashes, you are out of luck. While I will sympathize with you, I will not grant any extensions. Forewarned is forearmed. This is simply professional practice.

There are several tasks you will need to complete throughout the semester. At the same time, you will need to be working on your site. In many cases, the tasks you need to do can be actual pieces you will use in your site. Others will be exercises that will teach you skills and processes that you might decide to use in your site, or save for reference for another site design.

Following are the basic steps you need to complete to develop your site. Downoad this file for the list of tasks and due dates (print it and keep it with your ADD 345 notebook!).

create a layout/grid in Illustrator

  • within one document, create one page per “page” in site
  • create site plan on paper (see example)
  • plan images
  • plan text
  • develop consistent layout
  • develop navigation system
  • layout pages in Illustrator
  • use “jabberwocky” for text and placeholders for images, nav bar, and other objects: label each placeholder with its content (i.e. “photo of my sun flower”)
  • label each page at the bottom with the file name you will use for the actual HTML document (no spaces, no caps): the first page in your site must be labeled index.html

Print your site layout pages and bring them to class each week.

create your root folder and organize it (on iPod, flash drive, or laptop)

burning CD’s for this project will not work, nor will trying to work off the VisCom server

keep all your files within a single folder; do not transfer files from an external drive to a hard drive, either at home or in the cluster. It will absolutely mess you up.

collect/create images:

save these files in your “originals” folder on your site disk
use Photoshop to create tiff or eps images for use in your layout (150 ppi resolution)

resize + format photographs in Photoshop to size needed in layout (150 ppi: if your images are in jpg format, you should save them as eps or tiff, even though you will eventually be turning them back into jpg again.)

scan photographs and/or other images into Photoshop; resize and format to size needed in layout (150 ppi)

create navigation design in Illustrator or Photoshop, save files in tif or eps format to correct size for layout (150 ppi)

create banners/headlines in Illustrator or Photoshop, save as tif or eps files to correct size for layout (150 ppi)

place all images into site layout document

label each image with it’s intended file name (i.e. “sunflower.tif”)

create navigation system

using your Illustrator or Photoshop file(s) as reference, or for importing, create navigation system(s) in Fireworks

code each button or link with the correct link information as indicated on each layout page you created:

email links are created using “mailto:username@someplace.com” (no spaces)
save .png file(s) in “originals” folder

export .htm, .gif, or .jpg file(s) to “indeximages” folder and save slices in “indexslices” folder

if you are creating more than one navigation system, save the .png file(s) in your “originals” folder: export the .htm, .gif or .jpg file to the appropriate “(pagename)images” folder, and the slices in the “(pagename)slices” folder

create any rollover effects files you need

place Photoshop or Illustrator (or other) images in Fireworks to create rollover files (i.e. roll over a thumbnail image to have a larger version of it pop up)

save .png file(s) to “originals” folder

export .htm file(s) to appropriate folder(s) and save slices to an “images” folder

develop/find text

replace “jabberwocky” with real copy/content

write your own from scratch into XPress or InDesign, or copy and paste existing text (if you are using someone else’s writing, you must give them credit)

create animation

paper + pencil rough storyboard: develop at least one animation: 10 - 20 seconds long (120 - 240 frames)

create images (as needed) in Illustrator or FLash in correct size to copy + paste into Flash:

if using Photoshop, make sure resolution is 72 ppi and the image(s) is(are) the exact dimensions you need

save and export the movie (.swf file) to the folder of the page where your animation will be placed

optimize images

open or import Photoshop and/or Illustrator files in Photoshop or Fireworks and export as .gif and/or .jpg files: make sure they are the exact size you need for your site layout

save .png and .psd files in “originals” folder

export .gif and .jpg files in the appropriate page folders

create Dreamweaver site

set permissions for your site: you will need to know your SU user name AND your password! If you prefer to purchase your own domain and have it hosted elsewhere (very smart) remember that it will take a couple of days to get working. Plan ahead.

define site in Dreamweaver

define your site using the information I providem and any other information provided by your hosting server if you are not going to use the SU server,

define appropriate CSS file and save it on your site disk (not inside any folder)

CSS styles dictate the color of your text, positioning of elements, and a
variety of other formatting issues that can be applied to all pages in your site to create visual consistency and accurate HTML coding

create your main page (index.html)

save it on your site disk: it must be named index.html and cannot be inside a sub-folder

use table(s) to create a grid for your layout

import images, animation, and navigation system (navigation bars are the .htm files you export from Fireworks or Flash)

copy and paste text

attach CSS styles as needed

create other site pages

use a template to create the "interior" site pages

import images, navigation system and other elements

copy and paste text

attach CSS styles as needed

save pages within page folders, using the file names you assigned them in your layout (i.e. “sunflower.html” inside your “sunflower” folder)

upload site to server

connect to gamera.syr.edu or your own domain

drag “index.html” file to public_html folder: click “yes” to include dependent files

drag each page folder to public_html folder

open a web browser and test site!

fix errors and upload revised files

interesting web sites using Flash:

and of course, these two, just for fun: