Category Archives: Classes

What happened in class this week. Tools, tips, links. Homework assignments.

Week #15 – Final exam and FTP Tutorials

fetchsampleWhat we talked about in class today:

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

  • Access instructions will be provided during class.


Web content teasers: Seasonal graphics. How to make animated GIFs with Photoshop.

Screen Shot 2015-12-18 at 9.22.10 AM

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

Fetch Tutorial

WS_FTP Tutorial

Happy Holidays!

Comments Off on Week #15 – Final exam and FTP Tutorials

Filed under Classes

Week #13: Spry Menus & Widgets, Basic CSS, Divs

What we talked about in class today:

  • Spry tools and widgets
  • Advanced navigation
  • How to control site and page design with Cascading Style Sheets
  • How divs work with CSS

What is a Spry menu and what can I do with it?

spry-menu-sample

Files for Classwork:

https://www.dropbox.com/s/ykfyn8knammf02b/sample-css-12-2013.css

Homework:

There will be a test in two (2) weeks. Please review your notes from class.

Links:

Forms/Spry
CSS: An Introduction

Handouts:

HTML Tags Chart

Comments Off on Week #13: Spry Menus & Widgets, Basic CSS, Divs

Filed under Classes

Week #12: Forms and Networking Tools

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 10.

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

Comments Off on Week #12: Forms and Networking Tools

Filed under Classes

Week #11 – Site Management (Cont’d) and Image Rollovers

What we talked about in class today:

How to use iframe tags to embed nearly anything into a web page:

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

Comments Off on Week #11 – Site Management (Cont’d) and Image Rollovers

Filed under Classes

Week #10 – Site Management & Working with Assets

  • Take what you’ve learned about hexadecimal colors, CSS, HTML and layouts and apply to any customizable profile. Turn any page you can modify into your own.
  • Discussion of final projects.

Steal My Code:

Here is a basic page, with links for 3 pages that is controlled by CSS. You can copy the CSS and embed it into your page between the <style> tags in <head> area.

HTML

CSS

screen-shot-2016-11-11-at-9-31-18-am

Homework:

Set up a Flickr account for yourself. Flickr is YOUR SKETCHBOOK. By using TAGS, you can create a searchable database of your images.

Upload images to Flickr. Tag your images and write descriptions for them. Check out the geo-tagging feature. Groups? Sets? Collections?

Well get to it!

Comments Off on Week #10 – Site Management & Working with Assets

Filed under Classes

Week #9 – Working with Images and Batch Editing

chickenWhat we talked about in class today:

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

Working with Adobe Bridge for optimum file management.

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

Assignment:

Turn a basic, boring pumpkin in to a lovely jack-o-lantern with Adobe Illustrator and Photoshop. Download and use this image.

Resources:

About Adobe Bridge

Writing an action in Photoshop

Batch processing images with Photoshop

Building tables in Dreamweaver

Homework:

If you haven’t yet collected all the images you will use on your website gallery page, now is the time to do it. Make sure they are on your USB drive for next weeks class.

Helpful Information:

http://www.webmonkey.com/2010/02/html_cheatsheet/

Cool Site of the Day:

http://perspecsys.com/history/#!

Comments Off on Week #9 – Working with Images and Batch Editing

Filed under Classes

Week #8 – Adobe Tools – Photoshop and Illustrator

What we talked about in class today:

Using Photoshop and Illustrator to create graphics, banners and ads.

Screen Shot 2015-10-29 at 10.04.23 PMPhotoshop digital collage. Exploring filers and effects.

Links:

Some ideas

Whoa!:

See what a professional proposal looks like.

Photoshop & Bridge:

Batch process some photos.

Homework:

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

Comments Off on Week #8 – Adobe Tools – Photoshop and Illustrator

Filed under Classes

Week #7 – Image Maps and Organizing Site Layouts

What we talked about in class today:

How to create an image map with Adobe Dreamweaver. What types of images work best. Photographs vs. artist created images. Using 3D tools to create graphics.

Adobe Image Map

3D graphics tutorial

Image Map

CSS Tutorials:

Advanced selectors

Block quote and corresponding CSS

Display Block to center an image

Box Shadow CSS for drop shadows effect

choc-waffle-cookie
Screen Shot 2014-10-16 at 8.14.07 PM

Homework:

  1. Ten (10) images (at least 1000 px wide) on your USB drive OR in Dropbox.

Required Reading:

Comments Off on Week #7 – Image Maps and Organizing Site Layouts

Filed under Classes

Week 3 – HTML and CSS

DEMO – CSS Layout

Layout Basics

 

Positioning a Block

 

Styling the Box

 

Tips

  • If you add the overflow:hidden property to the containing CSS div element in CSS–the background color will stretch to include floated elements.
  • If you add margin:0px to the header(h1, h2 ect.) and body elements in CSS you will get rid of extra space between elements.

 

 

Lecture:

DEMO – Introduction to Photoshop

Follow these tutorials from Adobe TV.

Photoshop basics

DEMO – Creating and Inserting Background Images

Follow these tutorials from me and Adobe TV.

 

DEMO – Creating a background image

 

Adding shapes, lines and patterns

 

Saving the image for the web

 

Inserting backgrounds into CSS

Leave a comment

Filed under Classes

Week #1 – Welcome to Web Design!

Checking out the code

What was discussed in class today:

We started with what we’ll cover this semester (see syllabus). Then went on to “about the instructor”. Attendance, homework and class policies. Student introductions. Brief review of necessary software and useful tools. Introductory explanation of terms used in web design and HTML.

Setting up a Flickr account. This is where you will submit all your assignments and store images that inspire you. Tags, sets, groups and other aspects of Flickr will be explained. Our Flickr group pool: duCret Web Design Class

You can keep track of your progress in this class via Thinkwave. Your instructor will email your user name and password to the email address you provided in class. Please make sure she has your most current email address.

What you absolutely NEED to know:

Be prepared for class. Each week you should have with you:

  1. Notebook
  2. Pen or pencil
  3. USB drive (no less than 8GB) or other removable storage device.
  4. Sketchbook

Assignment:

Styletile

Create a speculative styletile as per directions using Google drawings and share with cartoongoddess@gmail.com. It should include a recent photo of you, 4 square color swatches, both color and pattern elements. Assignment details can be found in web design class Thinkwave.

Homework:

  1. Get inspired (Flickr) – for collecting ideas. Find two (2) samples of eye-catching images and upload. Can be anything, whatever inspires you. Jot down ideas and comments in description panel! You will be expected to update this WEEKLY.

Comments Off on Week #1 – Welcome to Web Design!

Filed under Classes