DAY/TIME/PLACE

Summer 2013 (starts June 11th)
Tuesday and Thursdays, 6:30-9:30pm

Instructor: Bruce Donald Campbell

Faculty, Continuing Education - RISD, Providence, RI
Director, Watersheds Project, Providence, RI

Email: bcampbel01@risd.edu bcampbel01@risd.edu

Prerequisites: Digital Design for the Screen or equivalent experience

DESCRIPTION

Dreamweaver is one of the most widely used programs for webpage creation. This powerful application allows designers to assemble graphics, text and other media in a visually friendly environment, while retaining the ability to work directly with the HTML code. Participants in this course create a website using Dreamweaver to organize files, import elements, create layouts and edit and link pages in a number of ways. In the process, they explore methods for incorporating interactivity, animation and sound. Students discover time-saving features for reusing elements or styles and learn to integrate Dreamweaver with other Web applications. The class also reviews methods for uploading and managing a site from within one easy-to-use environment.

GRADING

Class participation - 20%
Two class projects - 80%

RESOURCES

- In class and on-line Readings as identified below

---

CLASS LINKS

• Color Scheme Designer
• Da Font Site
• Font Squirrel Site
• CSS Zen Garden
• HTML 5 Working Draft
• W3C HTML/XHTML Validator
• W3C CSS Validator

SYLLABUS

• Course Introduction & Policies
• Instructor and Student Introductions
• Opening Pre-test of Student Skills
• How HTML, XHTML, and CSS fits into the Big Picture of the Web
• Dreamweaver Overview
• Setting up your Interface
• Design, Code & Live Views
• Creating Your First Website Design
  

Homework

• Read the Welcome to Class document I've provided you.

• Saving, Closing & Reopening Web Pages
• Adding Content
• Continuing Your First Website Design
• Vocabulary: Relative and Absolute File References

Homework

• Read the Project 1 Requirements document I provide you.
• Surf the Web and investigate the design and code behind Web pages of interest to you. Use that task to motivate your interest in our class.

• Site Setup (Fixed or Liquid Columns)
• Dreamweaver Help and Tutorials
• Useful Keyboard Shortcuts
• Setting Your Preferences
• Previewing Web Pages
• Continuing Your First Website Design

Homework

• Revisit the Class 3 warm-up exercise I provided you.
• Read the Class 3 lecture support I provide you.
• Check out this video on Liquid Columns with Dreamweaver CS6.
• Read the updated Project 1 Requirements document I provided you.

• Mastery of HTML Text Formatting
• Formatting Text
• Spell-checking Text
• Continuing Your First Website Design

Homework

• Work on Project 1
• Read the information on the meta tag and optionally reading more about how search engines rank content.

• Clean up a DIV based design example
• Undo and Redo
• Reverting Through the History Panel
• Checking for Errors Before Publishing
• Site Preferences & Checking Files Out/In
• File Synchronization
• Managing External Files
• Testing Your Website
• Margins and Padding

Homework

• Continue to work on Project 1 — reading the Forums for ideas from your fellow students.

• Student example to play with
• Images Types
• Inserting & Importing Images
• Formatting Images
• Implementing Anchors and Links (with a frames example)
• Hyperlink Dialog Box
• E-mail Links
• Modifying and Deleting Links

Homework

• Finish up Project 1 — participating in the Forums with ideas for and from your fellow students.
• Check out an Inserting Images perspective.
• Check out a refresher video on DIV use in Dreamweaver CS6
• Project 1 Due for class Tuesday, July 2nd, at 2:00pm

• In-class Project 1 Critique

Homework

• Check out the Project 1 submissions
• Investigate Project 2 Requirements

• Working with Sound, Video, and Applications
• Understanding Absolute and Relative Uniform Resource Locators (URLs)
• Second In-Class Project Example

Homework

• Review audio HTML options
An example audio file.
• Review video HTML options
An example video file.
• Work on Project 2 and Participate in Forum

• Responsive design (see July 11th Example)
• Designing for multiple devices (desktop, tablet, smart phone)
• Assets and Libraries
• Focus on Reuse
• Continue the 2nd Class Example

Homework

• Work on Project 2 and Participate in Forum
• Here's a good fluid grid tutorial to walk through.

• Creating Tables
• Working with Multiscreen Preview

Homework

• Work on Project 2 by playfully trying out some ideas you have (and searching the Web for designs you like).
  

• Understanding Templates
• Multimedia Components
• Area Maps

Homework

• Repeat the in-class exercise (use Dreamweaver to take a site, replace the content, add an area map, and insert a video).
• Check out an embedded media parameter page.
• Compare to our solution from class.
• Work on Project 2 by playfully trying out some ideas you have (and searching the Web for designs you like).

• Look at project work for everyone willing to share
• HTML Review
• HTML and CSS Interaction Basics
• CSS Styles Panel
• Cascading Aspect of CSS
  

Homework

• Practice using an HTML 5 template
• Work on Project 2 by playfully trying out some ideas you have (and consider templating the designs you like).
• Check out the class' Project 2 Submissions

Turn in your project by 11:59pm on July 25th.