Web Design Class

Week #2 – Design Tools – Flash

cartoongoddess — Fri, 27 Jan 2012 00:00:53 +0000

Animation for the Web

Adobe Flash was originally created (by Macromedia) in an effort to produce eye-catching animations for websites and animated ads.

Shape tween

Shape tween demo

Bouncing Ball Exercise

Make your own snow storm

As of today, the future of animation on the web will be HTML 5 (which is supported by smart phones and handheld devices). Useful tools in the works include Adobe Edge.

See an example of HTML 5 animation.

Continued Site Redesign

Using the specs from last weeks class, we will begin to build templates using Dreamweaver.

Week #1 – Welcome Back

cartoongoddess — Fri, 20 Jan 2012 00:00:38 +0000

What are we doing spring semester?

Overview and introduction.

Our fabulous new relationship with CSS.

Week #15: Final exam, Spry basics, Site Definition and FTP Tutorials

cartoongoddess — Fri, 16 Dec 2011 00:01:51 +0000

What we talked about in class today:

Final exam – In order to pass this class you must take the final exam.

Log in to engrade.com
In the navigation on the left, hover over “more”.
Scroll down to “quizzes” and click.
Select “Basic Web Design Knowledge” and start the exam.
Answer all questions and click “submit” when you are done.

How to define a site in Dreamweaver. Site management.

File Transfer Protocol – How to get your site, images and pages onto a remote server.

Fetch Tutorial

WS_FTP Tutorial

Happy Holidays!

Week # 14: Spry, Basic CSS

cartoongoddess — Fri, 09 Dec 2011 00:01:33 +0000

we talked about in class today:

Spry and widgets
How to control site and page design with Cascading Style Sheets

Homework:

There will be a test next week. Please review your notes from class.

Links:

Forms/Spry
CSS: An Introduction

Handouts:

HTML Tags Chart

Week # 13: Forms and Networking Tools

cartoongoddess — Fri, 02 Dec 2011 00:01:55 +0000

What we talked about in class today:

What is a form and what can I do with it?
Creating Interactive Forms
Promotion through Social Networking

Tools:

Online forms generator - http://www.jotform.com/

Homework:

Which social networking site do you like best and why? How do you think you could best use it to promote your business? Email results (link to site and a few sentences about it) to instructor by 5pm on Thursday, December 8.

Links:

http://www.chrisbrogan.com/five-ways-to-connect-and-add-value/

http://www.cnn.com/2008/LIVING/worklife/11/05/cb.social.networking/index.html

Week #12 – Tables (Cont’d) and Image Rollovers

cartoongoddess — Fri, 18 Nov 2011 00:00:11 +0000

What we talked about in class today:

More fun with tables.
Simple rollovers.
Pointer rollovers.
Multiple-event rollovers.
Flash buttons.
Navigation bar rollover.

Homework:

Catch up on missing assignments.

Helpful Links:

with HTML: http://www.designmeme.com/articles/cssrollovers/

with Javascript: http://www.designplace.org/scripts.php?page=1&c_id=21

Week #11 – Working with Tables

cartoongoddess — Fri, 11 Nov 2011 00:01:25 +0000

What we talked about in class today:

Nesting tables.
Sorting a table.
Exporting a table.
Outlining a table.
Importing tabular data (from spreadsheets or CSV).
Creating and adding links to a thumbnail gallery.
Designing for computer screens, PDAs, phones

What we worked on in class today:

Images for navigation in our portfolio websites
Coding image links
New methods for site structure

Homework:

Catch up on missing assignments.

Helpful Links:

Mobile Design: Screen size trends for 2008+

Screen sizes and analytics

Table Activity

Week #10 – Working with Images (Continued)

cartoongoddess — Fri, 04 Nov 2011 00:01:13 +0000

What we talked about in class today:

Positioning graphics.
Adding a border around an image.
Assign names and ALT text to image.
Wrapping text around images.
Adjusting the space around an image.
Inserting a placeholder.
Replacing a placeholder.
Setting image editing prefs.
Basic image editing within Dreamweaver.
Aligning an image to a single line of text.
Creating an image map.

Homework:

Create thumbnail (40x40px) images of your art for your gallery.
Catch up on missing assignments.

Cool Links:

Always specify a background color

Examples of what happens when you don’t specify a background color

Week #9 – Working with Images

cartoongoddess — Fri, 28 Oct 2011 00:01:26 +0000

What we talked about in class today:

Optimizing multiple images, using Photoshop for batch automation, writing actions, background images, images in tables.

Use your own images (from your USB drive) for in-class assignment or use these.

Homework:

Bring in a single image (on a USB drive or disk) that contains (at least) 3 people or objects. Can be digital art, from scan of reflective art or photo. Approximately 1000 pixels wide.

Website of the Week:

http://www.jaymontgomery.com/

Theme Related Link:

Happy Halloween! – It’s a basic page. Do “view source” and check out the code for table building insight.

Week #8 – Links, Buttons and Programming

cartoongoddess — Fri, 21 Oct 2011 00:01:03 +0000

What we talked about in class today:

Building the pages contained in your 3-page gallery site. Creating links. Programming buttons.

Links:

Some ideas

Whoa!:

See what a professional proposal looks like.

Homework:

10-15 of your OWN images/art saved to disc or flashdrive.