Intro to Web Design @ Northampton

melissa

2007-06-28T05:50:00.000-07:00

http://www3.northampton.edu/DMacIlwraith/melissafinalweb

julieth's final

2007-06-28T05:43:00.000-07:00

http://www3.northampton.edu/DMacIlwraith/lasdelicias

Chris Lick has a portfolio site. woot.

2007-06-28T05:16:00.001-07:00

Click here to view.

Let me know what you think? Thanks.

Jerome's site

2007-06-28T04:54:00.000-07:00

www3.northampton.edu/DMacIlwraith/tronics

Pete's Final Website

2007-06-27T22:34:00.000-07:00

Following is my "Miller Design" website. Please click here.

jasons final website

2007-06-26T08:43:00.001-07:00

http://www3.northampton.edu/DMacIlwraith/chryslerwebsite/images/flashexterior/

2007-06-26T08:20:00.000-07:00

Chris Animated Gif...

2007-06-25T05:17:00.001-07:00

Here's my animated gif...I chose to make a gif out of a sequence scanned from a magazine ad.

Click!

Jason's 2nd website mock up

2007-06-21T08:14:00.001-07:00

jasons 1st webpage

2007-06-21T08:08:00.000-07:00

http://www3.northampton.edu/DMacIlwraith/pres_website/

ID vs. CLASShttp://www.blogger.com/img/gl.link.gif

2007-06-21T05:04:00.000-07:00

....more CSS

http://www.tizag.com/cssT/cssid.php

Miller Design Homepage

2007-06-20T23:22:00.000-07:00

Check out my partial site.

2007-06-20T21:42:00.000-07:00

June 21st

2007-06-20T14:41:00.000-07:00

1. Look at Designs.
2. Introduction to CSS
http://www.w3schools.com/css/css_intro.asp

http://en.wikipedia.org/wiki/Cascading_Style_Sheets

HOMEWORK:
1. Animated GIF due Monday
2. Site due Thursday

Animated Gif Tutorials (Online)

2007-06-19T05:06:00.000-07:00

http://fireworks.disdatdesigns.com/animation1.shtml

http://www.tcf.ua.edu/classes/Jbutler/T389/tutor/FWAni/Index.html

June 19th

2007-06-18T17:46:00.000-07:00

1. Look at late photoshop layouts.
2. Pop up menu in Fireworks and Dreamweaver

HOMEWORK:
1. Extra credit Animation due Monday
2. Site Due June 28th

2007-06-18T16:26:00.000-07:00

melissa's web page

2007-06-18T09:29:00.000-07:00

Jerome's page

2007-06-18T05:12:00.001-07:00

Chris Lick site layout...

2007-06-18T05:09:00.001-07:00

I scrapped the original ideas and went with something more streamlined.

Miller Design Pages

2007-06-17T22:30:00.000-07:00

Here are 3 sample pages.

June 18th

2007-06-17T13:40:00.000-07:00

1. Look at Photoshop Layouts For Final Projects.
2. Animated Gifs

Homework:

1. Read chapter 9 in Fireworks book if you have it.
2. Final Project Due June 28th
3. 5pts Extra Credit for animated gif due Monday.

Pete's "NEW & IMPROVED" Website

2007-06-14T22:10:00.000-07:00

http://www3.northampton.edu/DMacIlwraith/blueswebsite/index.html

Hey Danell, I got the sound working!
I picked a new song. Edited it down with a fade and successfully embedded it.
That should be worth a couple of "Browny" points! ; )

melissa

2007-06-14T07:19:00.001-07:00

http://www3.northampton.edu/DMacIlwraith/lovesong/index.html

2007-06-14T07:15:00.000-07:00

www3.northampton.edu/DMacllwraith/colombianchildren/

Creative Kids website by Chris...

2007-06-14T07:13:00.000-07:00

Heres the link:

http://www3.northampton.edu/DMacIlwraith/creativekids/

5 Websites

2007-06-13T17:52:00.000-07:00

http://www.ima-art.org/cycles/

http://designarchives.aiga.org

http://www.tazo.com

http://www.oneill.com

http://www.onceblindphotography.com

2007-06-13T17:49:00.000-07:00

1. Look at Thumbnails for Business/Portfolio Site
2. Look at Business Sites
3. Reupload sites.
4. Frames in Dreamweaver

HOMWORK:
1. Photoshop Layout Due Monday
2. Read Chapter 10 in Dreamweaver Book

FTP

2007-06-12T07:46:00.000-07:00

www3.northampton.edu

user:DMacIlwraith
password:dm521

url:
http://www3.northampton.edu/DMacIlwraith/

user:DMclass1 password:dmclass125 url:
http://www3.northampton.edu/DMacIlwraith/DMclass1/

Laurie

2007-06-12T05:39:00.000-07:00

http://www3.northampton.edu/DMacIlwraith/laurie_pet_site/

2007-06-12T05:28:00.000-07:00

http://www3.northampton.edu/DMacIlwraith/colombianchildren/

MELISSA

2007-06-12T05:27:00.000-07:00

http://www3.northampton.edu/DMacIlwraith/lovesong/index.html

melissa's web

2007-06-12T05:26:00.000-07:00

http://www3.northampton.edu/DMacIlwraith/lovesong

Here is my web page enjoy!

2007-06-12T05:16:00.000-07:00

http://www3.northampton.edu/Dmacilwraith/di_web_page/

Jerome's site

2007-06-12T05:15:00.001-07:00

http://www3.northampton.edu/DMacilwraith/forkids/index.html

class (web design)

2007-06-12T04:54:00.000-07:00

Hi dannell,

i just wanted to let you know that i have mono. i should be returning to class this thursday. i did write you twice last week but my emails got sent back to me because it said something about your dannell@dannelldesigns.com could not be reached. please email me when you recieve this. sorry for the inconvience.

Jason vansyckle
jason.vansyckle@wilkes.edu

June 11th.

2007-06-11T04:57:00.000-07:00

1. Keywords and Descriptions.
http://www.uwec.edu/help/Dreamweaver8/meta.htm
2. Work in Class

Tomorrow:

Website Due! Critique and Uploading.

Read

2007-06-07T05:11:00.000-07:00

This is a great chapter on Audio in Dreamweaver. You can only access it from school because of it being in the Sarari Library.

http://proquest.safaribooksonline.com/9780672329364/ch10lev1sec5

Audio Parameters

2007-06-07T05:05:00.000-07:00

Here's the skinny on some of the different parameters you can employ with sound files that use the embed tag:

*

src="" (required)

The source of the file.
*

name=""

Name the embedded file if you want to call it from a script. If you use the name value, you must also include the mastersound attribute (no value).
*

controls=console|smallconsole| true|false

(Required for visible controllers.)
*

hidden=true|false

Determines whether the controller is visible.
*

autoplay=true|false

Determines whether the sound begins playing as soon as it loads.
*

volume=0%–100%

Percent of system volume used.
*

loop=true|false|n

Determines whether the sound will loop continuously. A setting of loop=3 would make the file loop three times.

June 7

2007-06-06T14:50:00.000-07:00

1. Inserting Video and Audio as a Plug In
2. Work in Class

HOMEWORK:
1. Read Chapter 7 "Using Multimedia"
2. Website Due June 12th (Tuesday) I have given you one extra day. :)

June 5

2007-06-04T17:53:00.000-07:00

1. Look at Late Layouts
2. Tutorial on Behaviors
3. Work in Class

HOMEWORK:
1. Non-profit Site Due June 12th
2. Read chapter on "Interactivity" in Dreamweaver Book

****IMPORTANT*****

TO LEARN DREAMWEAVER YOU MUST PRACTICE THE PROGRAM AT HOME AND READ THE BOOK. YOU CAN NOT ONLY RELY ON THE TUTORIALS IN CLASS. REPETITION IS THE WAY TO LEARN HTML AND DREAMWEAVER. IF YOU NEED EXTRA HELP I WILL BE HAPPY TO HELP YOU.

julieth

2007-06-04T09:25:00.000-07:00

2007-06-04T07:08:00.001-07:00

Jerome's layout

2007-06-04T05:08:00.001-07:00

Non-profit site layout by Chris

2007-06-04T05:06:00.000-07:00

Kinda rough but you get the idea.

Melissa web layout

2007-06-03T17:30:00.000-07:00

Design International Web Page by seth

2007-06-03T17:14:00.000-07:00

Thanks for the help.

Laurie's non profit site again

2007-06-03T14:02:00.001-07:00

Laurie's non profit site

2007-06-03T13:51:00.001-07:00

Pete’s Non-Prof Homepage

2007-06-03T12:37:00.000-07:00

June 4

2007-06-03T07:26:00.000-07:00

1. Critique Photoshop Layouts
2. Fireworks Navigation Bar
http://www.adobe.com/support/fireworks/rollovers/navbar/
3. Dreamweaver Layers

HOMEWORK:

1. Read Chapter 8 in book "Layers"
2. Work on Site Due June 11th

Tattoo Web Page from Seth

2007-05-31T05:02:00.001-07:00

2007-05-31T04:55:00.000-07:00

May 31st

2007-05-30T14:45:00.001-07:00

1. Look at Thumbnails for Non-profit Site
2. Managing Sites
3. Tutorial on Hotspots in Dreamweaver
4. Review Slicing/Rollovers in Imageready
5. Quiz
6. Work in Class

Homework.
1. Photoshop Mock-up of Non-profit Homepage Due Monday
2. Non profit site Due June 11th

Melissa web layout

2007-05-29T05:17:00.001-07:00

the painted kitty tattoo parlor

2007-05-29T05:15:00.000-07:00

jason's webpage

2007-05-29T05:11:00.000-07:00

Tattoo layout by Chris

2007-05-29T05:09:00.002-07:00

Here it is. Hope you like it.

Jerome Site

2007-05-29T05:09:00.001-07:00

Pete's Tattoo Homepage

2007-05-28T18:42:00.000-07:00

Website Guidelines

2007-05-28T18:13:00.000-07:00

NON-PROIT WEBSITE
WIKIOPEDIA’S DEFINITION
A non-profit organization (abbreviated "NPO", or "non-profit" or "not-for-profit") is an organization whose primary objective is to support an issue or matter of private interest or public concern for non-commercial purposes, without concern for monetary profit. A nonprofit organization may be involved in a wide range of areas relating to the arts, social issues, charities, early childhood education, healthcare, politics, religion, research, sports or some other endeavor.

EXAMPLES
The largest nonprofit organization in the United States (and the world) is the Bill and Melinda Gates Foundation, which has an endowment of approximately $60 billion ($27 billion from the Gateses and $30 billion from Warren Buffett in Spring 2006). The second largest is the Howard Hughes Medical Institute, which has an endowment of approximately $14.8 billion. Elsewhere in the world, the largest nonprofit organization is probably the British Welcome Trust, which is a "charity" in British usage. Note that this assessment excludes universities, at least a few of which have assets in the tens of billions of dollars.

Of course measuring a nonprofit by its monetary size has obvious limitations, as the power and significance of nonprofits are defined by more qualitative measurements such as effectiveness at carrying out charitable mission and goals.

Some nonprofits which are particularly well known, often for the charitable or social nature of their activities conducted over a long period of time, include Amnesty International, the Better Business Bureau, Carnegie Corporation of New York, DEMIRA Deutsche Minenraeumer e.V. - German Mine Clearer, Goodwill Industries, the Red Cross and Red Crescent organizations, UNESCO, IEEE and WWF.

However, there are also millions of smaller nonprofit organizations that provide social services or the arts to people throughout the world. There are more than 1.6 million nonprofits in the United States alone. For more see Wikiopedia articles on non-profit organizations

ON THE INTERNET
Many nonprofit organizations often use the .org or .us or .edu top-level domain when selecting a domain name to differentiate themselves from more commercially focused entities, which typically use the .com space.

REQUIRED PARTS

• NON-PROFIT SITE (NOT FOR COMMERICAL USE)
• 6-8 PAGES
• EXTERNAL AND INTERNAL LINKS
• CONSISTANT DESIGN
• EMAIL LINK
• PHOTOS
o VIDEO OPTIONAL
o MUSIC OPTIONAL

May 29

2007-05-28T17:33:00.000-07:00

1. Quiz.
2. Critique Photoshop Layouts.
3. Review Web images.
4. First Website for a non-profit organization is Due June 11th
5. Slicing images in Photoshop

Homework:
1. Quiz Thursday.
2. 3 Thumbnails for Non-Profit
3. Read Chapters 1 Pages 23-37 and 14 in Dreamweaver Book

homework assignment

2007-05-28T13:10:00.000-07:00

I have uploaded my tattoo web page layout to my website loladesign.net.
Laurie

HTML Tags

2007-05-24T07:10:00.001-07:00

Here are some links to websites that define common html tags.

http://www.htmlgoodies.com/primers/html/article.php/3478151#html

http://www.webmonkey.com/reference/html_cheatsheet/

HTML Tags

2007-05-24T07:10:00.000-07:00

julieth's homework

2007-05-23T21:10:00.000-07:00

href="http://www.toyota.com">www.toyota.com/ this is a page that shows information about cars i really like this page because it shows what you need to know about cars it gives the whole information about everthing prices, car's styles..etc
http://hostmas.net/ this page is a page that offers hosting sevices for web pages but it does not look like it because does not show images that shows what they need their index page is really ugly.

May 24th

2007-05-23T20:28:00.000-07:00

1. Look at Best/Worst Websites.
2. Handcoding HTML
3. Photoshop with Web Images (Jpg, Gif and Png)

Homework
1. Read History of HTML Handout
2. Read Web Images Handout
3. Read Chapters 1 Pages 23-37, 14 in book
4. Photoshop Layouts Due Tuesday
5. Quiz Tuesday

No Class Monday

jason's home work

2007-05-23T19:04:00.000-07:00

best site:
http://disney.go.com/disneypictures/pirates/

Fun
clean lines
very interactive
clear text
just enough stuff

Worst site:
http://www.wk.com/#/

way to cluttered
to much information/links
a complete mess

Melissa's Homework

2007-05-23T18:38:00.000-07:00

best site:
www.cristal.com.pe this a web page is from a Beer company from my country Peru. I found it that it is easy to navigate,it is colerfull and fresh. I found it that web desing it is really good.

worst site:
www.corson.tv it's a really ugly web page. the text doesn't contrast with the background. the desing is horrible.

slowest site: www.myspace.com
fastest site: www.univision.com

Home Work Assignment from Seth

2007-05-22T05:40:00.000-07:00

Best Site http://www.ferrariworld.com/FWorld/fw/index.jsp Very clean. Good use of color for branding identity. Simple Yet elegant.
Worst site http://members.aol.com/CSmith669/chevy.html Ugly use of color. Animations do not work distract from message of site. Very juvenile and unprofessional.
Slowest site http://www.ebay.com/
Fastest site http://www.cnn.com/

Homework from Chris...

2007-05-21T21:19:00.000-07:00

I thought a nice site is http://www.arjanverschoor.nl/. It is such a simple, yet fluid idea.

A terrible site that makes my eyes bleed is http://www.optimalworld.com/. Even if I knew what it was for there is no reason to have it look so bad.

I personally think www.flickr.com does a good job of doing a service pretty quickly.

I have a pretty fast connection so it's hard for me to feel the effects of a slow page. However, the constant loading for every image annoys me on http://www.skwak.com/home.html

Linking URLs to Your Post

2007-05-21T19:33:00.000-07:00

Hey Jerome,
How did you get your websites to show up in your post as links?
Thanks,
Pete

Pete's Homework

2007-05-21T19:09:00.000-07:00

One of the best websites I saw was, www.1800tequila.com
It was very colorful yet the background had a monochromatic feel. The simpler animation creates constant motion without being annoying or overdone. It was easy to navigate. This sight serves its limited purpose, to showcase product line, very well.

Worst website - www.epiphone.com
Sloppy, hard to read copy. A weak attempt to look edgy. Not enough info about product line. One dimensional photography that did not adequately show products. Could have been much more dynamic. This is the place to make a customer fall in love with product (electric guitar) the same as marketing automobiles. They did not take advantage of available technology. Videos were slow downloads to my hard drive instead of streaming on screen. When you click on "Elitist" line it becomes a different website with no "one click" path back to homepage. See, www.gibsoncustom.com, to see the potential a musical instrument website can have.

Most websites are pretty fast these days. Some with heavy intro graphics tend to be slower. I find the NCC site to be particularly slow. But I don't know why.

May 22nd

2007-05-21T19:05:00.002-07:00

• Go over Homework
• HTML
• History of the Web Wikopedia.org Handout
• Photoshop Layout (Work on Photoshop Skills) Competition 5BONUS

Homework:
o Read Chapters 1 Pages 23-37, 14 in book,
o Chapter 2 in O’Reilly
o Photoshop Layouts Due Tuesday No Class Monday

First Class

2007-05-21T19:05:00.001-07:00

Class 1
• Syllabus/Survey
• Intro to Dannell/ Sign up for Blog http://introtoweb.blogspot.com
• Presentation of Design
• HTML Basic HTML

Homework:
• Chapter 6 in O’Reilly
• Bring in Photos every Class,
• What is the Best, Worst, Fast, Slow Sites Post to Blogger 5pts

Jerome's work

2007-05-21T09:41:00.000-07:00

The best looking site I found is http://www.2advanced.com/ and I found another site that has links linking to other cool sites http://www.linkdup.com/.

The worst site is http://budugllydesign.com/archivebud/bud9806/bud.html, it speaks for itself.

For slow websites, I can't tell because I have dial up but I would have to say most myspace pages.

Fast websites, I can't tell.

Laurie's homework

2007-05-21T07:45:00.000-07:00

Wow, it is so much fun to surf the web with high speed!

The worst site I came across was bobsflowershop.com. It is dated, corny, and poorly composed. I good web design would probably increase this guy's business 1000%. On a postive note, it is pretty easy to nagivate but I think a site that sells the beauty of flowers should be beautiful as well.

The best site. There are so many fantastic sites! The one I picked to write about was http://www.arnoldworldwide.com/arn.cfm which is a design/advertising agency. The site is very clean and minimalist and very easy to navatigate. The bad poleroid photos of their staff along the top of the site adds a very edgy but human touch to the site.

Fastest? Since I have dial-up at home, they all seem REALLY fast to me here! Slowest? I have always found the Adobe site to be a little slow.

Me

2007-05-21T06:42:00.000-07:00

My name is Jerome and my email is darklegacy017@aol.com

I hope I did this right

2007-05-21T06:08:00.000-07:00

Here I am peterm@rcn.com

Laurie's contact info

2007-05-21T06:07:00.000-07:00

Laurie Rubinetti
lrubinet@ptdprolog.net
cell 908.581.5018

Chris Lick

2007-05-21T06:05:00.000-07:00

My name is Chris Lick. My email is christopherlick@gmail.com.

Design Presentation.

2007-05-20T19:48:00.001-07:00

Week One Web Presentation

1. Martini Racing Redesign www.martiniracing.com
Client: Bacardi Global Brands
Color

2. Season of Surprises www.firstbornmultimedia.com/websites/seasonofsurprises
Borders Bookstore

3. Boxer www.boxer.uk.com
Designed primarily to reflect our personality and identity. All imagery shows everyday situations with quirky twists.

4. Saturn.com Simple.

5. Elmwood Flooring Tool www.elmwoodreclaimedtimber.com/flooringtool
Hardwood Floors Company.

6. Ben Wittner www.bwausg.de
Minimalist, clear user-friendly website as engaging tool with the purpose of spotlighting the photography and graphic design work.

7. Huntington Conservatory www.huntingtonconservatory.org
Color and Shape.

8. Calibrepics www.calibrepics.com Singapore
The idea was transforming your ideas into reality. Hence, a drawing approach was used for the navigation where users mark where they wish to go.

9. Hidden Brook Studio www.hiddenbrookstudio.com
Our goal was to illustrate the environment in which the photographer lives and works, the sounds of nature and animals, the seasonal weather, the atmosphere.

10. John Ross Photography www.johnross.co.uk
The aim was to let the unobtrusive navigation remove all the clutter and let the photography do the talking.
Navigation

2007-04-19T18:14:00.000-07:00

Intro to Web Design
ARTA 130
CMUN 108
800am-1120am
Mondays, Tuesdays & Thursdays

Objectives:
This course is an introduction to the skills, concepts and techniques necessary to design Web sites. We will discuss how interactive visual communications are researched, organized, prepared and implemented in today’s web world. This class will be a combination of technical and aesthetic notions. Also will be reviewing and expanding on general concepts of web design using HTML, Photoshop, Imageready and Dreamweaver.

Prerequisite: Knowledge of computer graphics and software.

Class Website: http://introtoweb.blogspot.com

About the Instructor:
Instructor: Dannell MacIlwraith
Contact Info: dannell@dannelldesigns.com
Cell phone: 610.462.3771
Office Hours: Upon appointment. Before or after class is best.

Supplies:
Sketchbook paper pencils, ruler and USB.

Textbooks and Resources:
Required:
Macromedia Dreamweaver 8 Training from the Source by: Khristine Annwn Page

Recommended Books:
Macromedia Fireworks 8 Training from the Source by: Patti Schulze
Learning Web Design by Jennifer Niederst
HTML in easy steps by Mike McGrath

Course Procedures:
1. Classes will meet for two-hour periods during Mondays and Wednesdays.
2. The class activities will be divided into lectures, supervised studio/lab work and critiques.
3. Weekly assignments will be given out during each week and they will then be due the following week.
4. Students will be required to work from information received via instructor lecture/
demonstrations, course textbook and existing web sites.
5. Students will be required to maintain a concept sketchbook at all times as well as a
resource file consisting of images, fonts, copy and digital information.
6. Students will be required to complete assignments, thumbnails, weekly quizzes and 2 web sites.

Attendance Policy:
• Introduction to Web Site Design is a studio course. Because of the nature of this type of course, where classroom lectures, demonstrations and/or critique take place during each meeting, it is imperative that the student show up at the time specified for class.
• Lateness will not be accepted.
• Whenever possible, all students must inform the instructor before hand if they are going to be absent.
• A valid absence is a doctor’s note or a family tragedy. A student who misses more than 5 class meetings without a valid excuse may be withdrawn from a class with a grade of WF. Please refer to page 29 in the NCC Student Handbook.

Withdraw Policy:
Students may withdraw from the class at any time through the fourth
week of classes. Exceptions maybe granted to students who produce sufficient evidence to verify and extreme emergency. Please refer to page 38 in the NCC Student
Handbook.

Cheating Policy:
Cheating on assignments and projects through use of unauthorized
aids or inappropriate resources will not be permitted. This also applies to taking
artwork of others and passing it on as your own. Please refer to the college policies
regarding cheating and plagiarism on pages 30 and 31 in the NCC Student Handbook.

Grading Policy:
Students will be graded according to the following criteria.
1. Originality of idea(s).
2. Craftsmanship and presentation.
3. Timely completion of assignments.
4. Participation in class critiques.
5. Exam performance.
6. Class attendance.
7. Letter grades will be assigned to each project as well a final grade.

Letter Grades:
The following definitions are applied to appropriate letter grades;
100-90 A= excellent performance
89-80 B= good performance
79-70 C= expected achievement.
69-60 D= poor or below expected achievement
59-50 F= failure

College Academic Computing Policy
• Power Down. When you have finished working on the computer, properly quit the application and properly turn off the computer before you leave.
• Any activity that interferes with the administration and maintenance of the computer hardware and software is prohibited. Therefore, DO NOT reconfigure, alter, or change any software (operating system or application) or connect or disconnect any of the hardware (scanners, mouse, Wacom tablets, printers etc).
• Do not connect personally owned devices to college computer systems. Except for a removable storage device to save class work.
• Do not load software or fonts onto or remove software or fonts from the computer. This also includes downloading software from the Internet.
• Do not copy software from the computers. It is illegal. All students are to maintain professional behavior in the computer labs. Abusive, improper, or careless use of the hardware or software is not permitted.
• Food and beverages are not allowed in the computer labs.
• The computer labs are to be used for course related activities, and not for personal or recreational uses. (No pornography.)
• Failure to comply by he above rules will result in disciplinary action, which could result in the student being denied access to the computer labs.

Syllabus

2007-04-10T12:10:00.000-07:00

I will put the syllabus here.

Class begins May 21st.