ADV3550 (Web Design & Implementation)

Welcome to ADV3550 (Web Design & Implementation) online. Here you will find regular postings for handouts given in-class.

Course Description:

This class will focus on how to present content online using XHTML and CSS. Graphic design students will gain a solid understanding of the fundamental skills for interactive design.

Objectives:

  • Design and build an effective portfolio web site
  • Gain a solid foundation of current markup languages and applications
  • Explore industry standards in layout design and functionality
  • Uploaded, fully operational site to personal URL

ADV3550 – Week13

Animation
Flash CS3

1. Frames vs. Keyframes
2. Frame by frame animation
3. Shape tween
4. Library
5. Graphic Symbol
6. Motion tween
7. Importing files (Photoshop/Illustrator)

To refresh what we covered in class you might view:
http://www.youtube.com/watch?v=oYQNboonDOc

and

http://www.youtube.com/watch?v=uACbNcZLlKM&feature=related

ADV3550 – Week10

This week in class we reviewed the lesson from Week 9 focusing on images and building the ‘gallery’ section of your site. We reviewed the concept of using Lightbox. I also introduced how to build a form for your contact page.

A. Review Lightbox galleries
Here are two worthwhile websites

B. Create roll-over images
Here is a good tutorial for that:
http://webdesign.about.com/od/dreamweaverhowtos/ss/dw-rollover-img.htm

C. Build a ‘contact’ form
Here’s a good, detailed tutorial I recommend watching;
http://www.youtube.com/watch?v=7soyO5DwJMY

-> We will follow this simple tutorial to build our basic form in Dreamweaver:
http://dreamweaverspot.com/adobe-dreamweaver-tutorial-contact-forms/

For the contact form, you will need to download a PHP script provided in the tutorial. PHP is a server-side scripting language that is embedded in html to perform all sorts of tasks. In our case we will download an existing PHP file: ‘FormToEmail.php’ from the tutorial. Make sure the file is saved in the same folder as all your existing html files for your site.

Follow these steps. (Use the tutorial listed above.)

  1. Drop the FormToEmail.php file into the same folder as your contact.html page.
  2. Edit the php file as instructed in the tutorial. You will have to change the email address in the form to be yours. (Please note: you cannot test the form until it is up on your server.)
  3. Create your form in Dreamweaver.
  4. Add any styling you want to add.
  5. Publish your files to your site and test them by sending yourself an email

The basic from that we are building in class is not secure, meaning it does not prevent against spam. If you would like to explore other options you might check out this link here:
http://www.freecontactform.com/free.php

Homework:
1. I would like you to post a first draft of your site to your URL and send me a link by Sunday. The site does not have to be 100% complete but by Sunday you should have the homepage built and at least one link of the navigation should be working.

If you need help uploading your site here is a quick refresher:
http://www.vineyardesigns.com/resources/dreamweaver/test_upload.shtml

2. And if I did not yet receive your statement and your work descriptions, please be sure to bring a printed copy of that for me this Monday.

ADV3550 – Week9

In class this week we reviewed the lesson from Week 8. We continued with the goal of putting together a website from your Photoshop designs. We focused on images and building the ‘gallery’ section of your site. I also introduced the concept of using Lightbox.

Here are the lesson examples for week9, please download:
ADV3350 Week9 Lesson Example

Here is the handout for week 9:
ADV3550_Lightbox

Homework:
1. Continue to work on your website. See if you can get the basic structure built out in HTML and CSS and have two pages linking to each other.
2. Organize and revise the portfolio pieces you plan to show in your website (see the handout I gave in week7). I will be collecting in class on Monday.

ADV3550 – Week8

Today in class we will continue with the lesson from last week: building a simple website from scratch. I will show you how to optimize your images in Photoshop. We will focus on images and building the ‘gallery’ section of your site.

DUE:  Web layout design (in Photoshop or Illustrator). Please save into my drop folder: ‘ghitchings’/ ‘ADV3350’.

Here is the lesson example for week8, please download:
ADV3350 Week8 Lesson Example

Here is the handout for week 8:
ADV3550 Optimizing Graphics

Homework:
1. Over the break continue to work on your website. See if you can get the basic structure built out in HTML.
2. Organize and revise the portfolio pieces you plan to show in your website (see last weeks handout).

ADV3550 – Week7

Monday, in class we:
1. Built a simple website from scratch. You are welcome to use this code for the basis of your site:
ADV3350 Week7 Lesson Example
ADV3350 Week7 In-Class Lesson Competed

2. Reviewed the website layout that you built for homework in either Photoshop or Illustrator.

Here are the handouts for week 7:
ADV3550 CSS Navigation (reading)
ADV3550 Developing Content (DUE: April 12th)

Homework:
Please finalize your web design. I will collect your work next week. And we will begin to ’slice’ and ‘optimize’ the static designs and rebuild in HTML.

ADV3550 – Week 2

Here are handouts given in week 2:

ADV3550 Project Overview
ADV3550 Week2 Assignment

ADV3550 CSS Basics

You can download example files here: ADV3350 Week2 Lesson Example