dom.net

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!

April 27, 2005

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!

April 20, 2005

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!

April 14, 2005

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!

April 7, 2005

This week we covered the following topics:

• Working with Code view
• Code hints
• Code coloring
• Tag Autocomplete
• Reference Panel
• Macromedia Forums
• Breaking a tag in Split view
• Invisible Elements
• Dependent Files
• Inserting a link
• Modify > Convert > Tables to layers...

On the Web:

• Effective Web Searching - first search for the sentence you're looking for, then the topic

Regarding Design:

• Basic elements of design: content, content, content. Then, mark (copyright/license), meta data, header, footer, navigation.
• Free CommunityMX content

Student sites:

• Christina
• Sam
• Student News Aggregator

Homework:

1. Tables vs Layers
   1. Draw a new design on paper. Include the basic elements of web design (above).
   2. Using Layout mode, draw your table as you see fit.
   3. Switch to Standard mode and perfect the table.
   4. Use Modify > Convert > Tables to layers...
   5. Manipulate the layers to your satisfaction in Design view.
   6. Use Modify > Convert > Layers to tables... and then back to Layers to achieve a unique design.
   7. Remove inline styles to the HEAD of your document so that the CSS Styles panel shows all of your styles.
   8. Export your styles to an external file for use on other pages.
   9. Put your page to the web and send URL to the class list.
2. If you haven't already done so, send me your Bloglines blog URL.
3. Post to your bloglines blog. Include images and links using HTML from Dreamweaver.
4. Choose one to read up on: ASP, PHP, ColdFusion.

Next week: How to Learn Server Languages Using Dreamweaver!

March 29, 2005

This week we covered the following topics:

How Not to Use Dreamweaver:

• Dom: Don't prototype with an external CSS file. Embed your testing CSS in your example file. This allows easy undo and save. When you're done, export your CSS and link it to other pages.
• Christina: Don't bother configuring a remote server for testing. Preview to localhost on your Mac.
• Bryan: Don't just select in Design View. Use the Tag Selector to make sure you've got the right selection for a copy or paste.
• Sam: Don't use <font>. Also, don't use Expanded Tables mode, use Table Layout and Standard mode instead.
• Adam: Don't forget to rename your automatically created CSS.
• Maureen: Don't take it all in at once. Be methodical about learning. Start with the menus, learn some keyboard shortcuts.
• Ben: Don't mess up your links by moving your files around! Use root-relative links, or allow Dreamweaver to update your links if you do need to move a file.
• Jake: Don't guess about CSS. Watch the Relevant CSS panel to see what styles are applied.
• All: Don't forget to save!

Taking advantage of the Mac:

• Disclosure arrow/button in Open dialog allows you to navigate all folders.
• Screen Capture: Apple+Shift+3
• Your Mac is a Web Server:

1. System Preferences > Sharing > Personal Web Sharing
2. Then visit http://localhost/
3. Localhost directory is [root]/Library/Webserver/Documents/
4. Set up your Testing Server in your Site Preferences to be this Localhost directory.
5. Hit F12 for a local preview, with root-relative links intact.

Homework:

1. Draw a Web design on paper. Armed with CSS and tables, design your site in Dreamweaver. Try Table Layout mode. Try the table button in the Insert bar. Or use Insert > Table. Use right-click (Control +Click) in the table to access menus, or examine the Property Inspector. Remember Text > CSS Styles > New.
2. For inspiration, visit the CSS Zen Garden and try "select a design".
3. If you get stuck, try Help > Dreamweaver Support Center.
4. Go to Bloglines.com. Create an account. Figure out how to:
   • Add Dom.net's RSS feed.
   • Add news.bbc.co.uk's news feed.
   • Create a blog and post to it. Send me your Blog URL.

March 23, 2005

This week we went over the following topics:

How to Use Dreamweaver

In Dreamweaver:

• Keep DW Open
• Increase the font size in Code View
• Wrap in Code View
• Find & Replace
• Reports and Validation
• Snippets
• Library Items
• Keyboard Shortcuts
• The Quick Insertion: Working without a site
• Site Management: Setting up Remote
• The Site Panel buttons
• The End User License Agreement allows 2 installs
• The Importance of the 7.0.1 Updater

On the Mac:

• Map Exposé to your mouse
• Apple+Tab to switch between open applications

Regarding Design:

• Macromedia Online Seminars and Macrochats

Regarding Code:

• The CSS 2.1 Specification
• Anatomy of a DIV tag
• How to reference an image from off of your site

Assignment Due Friday Morning (3/18) for Comments, Sunday night (3/13) for Credit but no comments:

1. This week's site: [Est 3-4 hrs]
• Set up Local and Remote.
• Create a "sandbox" folder.
• Create appropriate folders for site content.
• Protect your media folders with blank index.htm files.
• Create an original site from scratch with the following characteristics:
  • Header
  • Feature/Content area
  • Footer
  • Links
  • Images
  • External CSS stylesheet
  • At least three total HTML pages with titles
  • Content of your choice. Suggestions:
    • Review a movie, book, music, or show.
    • Tell a story.
    • Tell a joke.
    • Teach the class something that you know.
• Hint: Use Snippets, the CSS Styles panel, the Insert menu, and the Properties Inspector.
• Hint: Create content first, then style it.
• Hint: If you are having trouble positioning your content, try using Insert > Table.
• Put the completed site to your server and send the URL to the group list.
2. Post links, commentary, and/or a story to your Blogger blog (email me if there are ongoing problems with Blogger). [Est 30 mins - 1hr]
3. Submit three (3) questions regarding CSS. [Est 30 mins]

Sites from class:

• Adam
• Ben (Homework)
• Bryan
• Christina
• Heather (Homework)
• Jake (Homework 1, 2)
• Maureen
• Sam (Design site)
• Tak (Homework)

March 15, 2005

How to Learn Dreamweaver

In Dreamweaver:

• Navigating code with Design View
• Creating a link using Design view and the link field in the Properties Inspector
• Navigating code with Tag Selector (at bottom of document window)
• Window > Insert Bar
  • Draw DIV button under "Layout"
  • Favorites - Right-click to Add Favorite
• HTML and CSS Code-hinting - just start typing in code view!
• CSS Code Coloring - pink = CSS
• Double-click to select, shift-select to expand selection
• Modify > Page Properties (Apple + J)
• File > Export > CSS Styles...
• Window > CSS Styles (all available rules)
• Window > Tag Inspector (F9) - Relevant CSS tab
  • Cascade of Rules (applied rulesleast specific down to most specific)
  • Property Grid (set properties float to the top in blue)
• Insert > Image
• Dreamweaver > Preferences (Apple + U)
• Dreamweaver > Keyboard Shortcuts

Regarding Design:

• Game: Make a Web Page Out of It
• Prototyping with OmniGraffle

Regarding Code:

• Four CSS selector types: class (.foo), id (#foo), tag-based (h1), and pseudoelement (a:link)
• Link, Visited, Hover, Active is the correct sequence of pseudoelements
• Curly braces start and end the rule
• Style tag in the head contains CSS in the document
• Link tag in the head references another CSS document

In Blogger:

• Edit post button
• What to do when Blogger fails

Assignment Due Friday Morning (3/11) for Comments, Sunday night (3/13) for Credit but no comments:

1. Watch Designing with Dreamweaver (for chapters, select Show Index): [Est 1 hr]
   Caveat: mouse movements and screen sharing are a few seconds behind the voice
   Warning: I will be Quizzing on this content in class.
2. Post sites and links of interest to your Blogger blog [Est 30 mins to 1hr]
3. Choose one: [Est 3-4 hrs]
   • Continue to refine and distinguish your Blogger template, adding images and links. Goal: Affect the CSS and distinguish yourself from the original template.
   • Create a page or two of your own content using Page Designs (CSS) template. Post it to your domain and send URL.
   • Draw a page on paper and lay it out in Dreamweaver. Post it to your domain and send URL. (Hint, try the Draw Div button in the Insert Panel)
   • Iterate on your own site (Sam or others)

Sites from class:

• Adam
• Ben
• Bryan
• Christina
• Heather
• Jake
• Maureen
• Sam
• Tak

March 8, 2005

We went over the following topics:

In Dreamweaver:
- Start Page
- Creating a Site
- Expanded Site Window
- File>New
- File>New from Template
- Design View editing
- Split View
- Preview in Browser
- Introduction to the Property Inspector

On the Mac:
- Control+Click is "Right-Click"
- Key Commands: Cmd+S, Cmd+N
- Changing monitor resolutions

Regarding Design:
- Three Principles of Web Design
- The Issue of Scrolling
- Introduction to Browser Issues
- Designing for Ads

Regarding Code:
- Some HTML tags (div, p, link, body, a)
- Some CSS terms (selector, rule, attribute)
- Other code types (XML, PHP, ASP)
- RSS (Really Simple Syndication)

--- Going Forward ---

Required Software:
Macromedia Dreamweaver MX 2004
(Education Store link)

Recommended Text for this class:
Macromedia Dreamweaver MX 2004 : Training from the Source (3rd Edition)
If you buy it from Amazon using this link, I get a referral fee.

Recommended Hosting Provider:
DreamHost
Follow this link and I will get a referral fee. Sign up, and you can get them, too.

Homework:

1. Create a Blogger blog. Est. 30 mins.
2. Post an example of interesting/exceptional/disturbing/funny Web design, and your opinion on it to your blog. Est. 30 mins.
3. Modify the template of your blog: Est. 2-4 hrs.
   1. Go to Blog Settings, Template, copy code.
   2. Paste Code into Code View in DW.
   3. Modify layout, content, links, and/or CSS using DW Design view (NOT Blogger template tags).
   4. Paste into Template field on blogger.com, Preview.
   5. When you're ready, save Template and republish blog.
4. Prepare at least three zinger questions for me on the topics outlined above. Est. 1 hr.
   Remember, any question that stumps me or teaches me is a candidate for a free Dreamweaver book at the end of each class!
5. Optional/Extra: Use a Page Designs (CSS) template as a starting point for your own design. Est. 1-2 hours.

Sites of Interest:

• dom.net
• Creative Commons
• Google News
• Flickr
• StatCounter
• W3C

Stay tuned for next week, when we cover Designing for Blogs, The CSS Panel in Dreamweaver, and Editing in Code View, among other topics.

March 2, 2005

Here is a free tool that might help you understand all the free stylesheets out there.

Enter one or more selectors or rulesets, or provide the URL of a stylesheet. The SelectORacle will show a natural language description of the rules. It will also flag potential errors and other problems.

Give it a try on this page: input "http://stage.dom.net/css/main.css".

February 28, 2005

All smiles at Macromedia Community Week: Designing with Dreamweaver.

Last Spring, Scott Fegette and I discussed Best Practices for designing web sites using Dreamweaver, and the folks on the broadcasting team posted it for us to enjoy ad infinitum.

You can hear my voice over the Web, and watch me operate the software via Macromedia's slick Breeze conferencing service (based on Flash). This is a good place for all of my students to get started, or find out if this class is right for them.

If you enjoy it, definitely check out the rest of the MacroChats we all did for great tips and information on how to quickly build things with our tools.

February 23, 2005

Dreamweaver

X475 (2 semester units in Design)

This course introduces you to the fundamentals of the market-leading software for Web page design. Working with tables, frames, layers, and cascading style sheets, you learn to create and use graphics, format text, make internal and external links, implement simple behaviors such as rollovers, and set up and manage your site. This course is for anyone who wants to design visually compelling Web sites without having to hand-code their pages. It is also for those who want to learn to read and write code.

Prerequisites: Macintosh experience; familiarity with HTML and Photoshop or Fireworks is recommended. Related courses: HTML I X470, Principles of Web Design X478.

DOMINIC SAGOLLA, Ed.M., is an engineer for Macromedia Dreamweaver in San Francisco. Educated at Swarthmore College and then Harvard University, his teaching focus is constructionism � learning by doing. He has worked as a professional Web developer for over 10 years, for companies such as Hewlett-Packard, the MIT Media Lab, and dom.net.

10 meetings

Feb. 28 to May 2: Mon., 6:30-9:30 pm
San Francisco: Room 201, South of Market Center, 95 Third St.
$795 (EDP 016634)

Syllabus:

Class One 02/28/05:

How to Learn to Learn Dreamweaver
or, The Principles of Visual and Interactive Design for the Web

Class Two 03/07/05:

How to Learn Dreamweaver

Class Three 03/14/05:

How to Use Dreamweaver

Class Four 03/21/05:

How Not to Use Dreamweaver

Class Five 03/28/05:

How to Learn HTML and CSS Using Dreamweaver

Class Six 04/04/05:

How to Learn Server Languages Using Dreamweaver

Class Seven 04/11/05:

How to Use Dreamweaver and Fireworks together

Class Eight 04/18/05:

How to Use Flash within Dreamweaver

Class Nine 04/25/05:

Stump the Experts

Class Ten 05/02/05:

How to Crash Dreamweaver

Sound interesting? Sign up!

February 22, 2005

A Merry Thanksgiving to everyone! Just dropping by to let you know that I'll be teaching a course on Dreamweaver at the UC Berkeley Extension this coming Spring.

If you're in the San Francisco Bay Area and would like to learn about the Principles of Web Design inherent to Dreamweaver MX 2004, please enroll and come to my class: 10 Mondays, 2/28 through 5/2.

More the syllabus and assignments later. For now, brush up on your CSS and PHP knowledge and fire up Fireworks as well if you haven't tried it yet.

November 24, 2004