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 #14 – Templates, Widgets, Batch Review and CSS

  • Create a page with navigation (widget) and editable regions to save as a template (.dwt).
  • Use Photoshop to write a custom action to batch resize your images.
  • Open Bridge, duplicate your batch image folder, select the images and use tools > batch to apply the action you wrote.
  • Set up either an accordion widget or tabbed panels.
  • Drag your resized images from Bridge to your widget in Dreamweaver.
  • Tweak the CSS to customize the look and feel of your selected widget.

screen-shot-2016-12-16-at-10-36-58-am

Leave a comment

Filed under Uncategorized

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 6 – Working with CSS

DEMO – Adding custom fonts and lists to CSS

Follow these tutorials.

Adding a custom google web font

Inserting and Styling Lists

 

Using classes to specify custom fonts

Adding fake links

  • hint–if you use a # instead of a url, you will create something that looks like a link but doesn’t link to any content

  • hint–this helps you style links before you link them

 

Lecture: Choosing a display and accent type

DEMO –Positioning in HTML & CSS: Part 1

Follow these tutorials.

Review Layout Basics (optional)

Assignment:

Create a wireframe using Google Drawings

screen-shot-2016-10-13-at-9-39-42-pm

Leave a comment

Filed under Uncategorized