How to Learn Dreamweaver

« March 2005 | Main | May 2005 »

April 27, 2005

Behaviors and Templates in Dreamweaver

This week in class we covered the following topics:

In Dreamweaver:

• Behaviors apply to elements such as links or images
• Window > Behaviors - Show Pop-up menu
• Always use the alt attribute in dialogs
• About the target attribute
• Template updating process:
  1. Create new template or save page as template
  2. Modify template, save
  3. Yes to update template instances
  4. Save any open template instance
  5. Preview template instance
• Think of template as your digital type-stamp. You'll still need to update/save/put your stamped copy

Regarding maintenance:

• Resizing images - use Fireworks, or skip the whole process and use ImageMagick on the server
• See Gallery.menalto.com

Regarding Flash:

• Flash decompiler for Mac

Regarding Design:

• Page-reload flash issue - be careful, some users may expect it

Homework:

Create and publish a site design with two or more JavaScript Behaviors in it using Dreamweaver. Email URL to the class list.

Next Week: How to Crash Dreamweaver!

Posted by at 12:10 PM | TrackBack

April 20, 2005

How to Create Flash with Dreamweaver

This week in class we covered the following topics:

In Dreamweaver:

• 10 Steps to Create a Site
  1. Start by drawing a page
  2. Begin Storyboarding (again, on paper)
  3. Decide on a layout that portrays that storyboard
  4. Freeze static elements of the design
  5. Break the design into reusable modules
  6. Assign "editable regions" or areas that will change from page instance to page instance
  7. Either create a Template in DW or use includes for the reusable elements
  8. Create the rest of the page instances
  9. Test publish to staging server
  10. Final publish to live site
• Back up your site by creating a duplicate site and putting to another local folder
• Check 'Put dependent files' to just back up a few files and their associated images, etc
• Insert > Media > Image Viewer
• Insert > Media > Flash Text
• Insert > Media > Flash Button
• The Flash Video Kit
  • Example 1: Surfing
  • Example 2: Snowboarding
• Anatomy of a Bug
  • Subject
  • Platform
  • Description
  • Steps
  • Actual Results
  • Expected Results

In Code:

• The Power of phpinfo()

Homework:

Follow the steps above to create a new site from scratch. Before you begin, take a look at some free Flash to incorporate into your design:

• Google Search for "Free Flash swf"

Final site should have the following characteristics:

• Original and different from your previous designs
• More than two pages of complete content
• Some kind of Flash embedded in your design
• Published to your domain, URL sent to the class

Next week: Stump the Master!

Posted by at 08:29 PM | TrackBack

April 14, 2005

Advanced Server Interaction

This week we covered the following topics:

In Dreamweaver:

• Insert > HTML > Script Objects > Server-Side include
• The Power of the Server-Side include
• The Power of the Application panel (i.e. Build a Blog with Dreamweaver)
• Insert > Application Objects > Recordset
• Multiple Repeat Regions in the Same Page
• Insert > Application Objects > Master Detail Page Set
• PHP include syntax

On the Mac:

• The Importance of Tiger
• Running PHP
• Running MySQL

Regarding Design:

• Designing for Video
• RSS Tool: Newsfire
• PHP is FREE
• Designing for Mobile
• Designing for Ads
• Recycling Designs

Homework:

1. Set up a sub-domain as a PHP testing server
2. Set up your machine to run the latest PHP
3. Set up your machine to run MySQL
4. Draw a design flexible enough to incorporate an unknown amount of data.
5. Access student database via Application panel
6. Create a repeating region from the database, and place it in your design.
7. Prototype using Live Preview button.
8. Save to server, send URL.

Next Week: How to Create Flash With Dreamweaver!

Posted by at 11:32 PM | TrackBack

April 12, 2005

Show / Hide Layers in Dreamweaver

Vanessa, who works in the lobby of Baker & Hamilton, asked me to help solve a design problem for her band: How to keep from having to refresh the page, without using Flash, with no scrolling or frames?

Our answer: Show/Hide layers in Dreamweaver.

The result: No Origin - a voice for resistance. Listen to "The Draft".

Posted by at 09:47 PM | TrackBack

April 07, 2005

Introduction to Server Languages

This week we covered the following topics:

In Dreamweaver:

• CSS - postition: absolute
• Really undoing html.css
• Overriding via !important
• Linking vs. embedding CSS
• Name your layers
• Virtual includes
• Application servers and .htaccess

On the Mac:

• xScope

Regarding Design:

• Two modes of design: Prototyping, Deconstructing
• Lipsum.org
• Prototyping technique: design in graphics tool, then try to reproduce in HTML and CSS

Homework:

1. Draw a design on paper, or use another design tool to prototype it first.
2. Layout your design using tables and/or layers
3. Extract all CSS to another file (use File > Export)
4. Carve up your design into reusable elements. Break these elements out into separate files.
5. Re-include these elements into your files using virtual includes:
   <!--#include virtual="/[foldername]/[filename]" -->
6. If possible, put the resulting code to your server.
7. Email your page URLs (and if necessary, the elements) to the group.

Next week: Using Application Servers!

Posted by at 12:18 AM | TrackBack

April 01, 2005

Free Blog Syndication using PHP

This week, I've set up two different syndication sites:

Student Blog Aggregator

and

Mobile News Aggregator

Here's how to do it:

1. Upload and configure Magpie.
2. Use a simple PHP or HTML include to stick one of the PHP templates onto your page, surrounded by some important links.

And there you have it, your own custom news page!

Posted by at 04:49 PM | TrackBack