About | Contact
Archives | About | CSS | Design | Dreamweaver | Education | Family | Film | Flash | Friends | Funny | Learning | Life | Literature | Love | Mac | Mac OS X | Music | PHP | Play | Poetry | Quotes | RSS | San Francisco | Wine | Work | Writing |
The New Mythology | Smart Mobs | Lessig Blog | Eric Case
rss 1.0 | rss 1.0 | rss 2.0 | atom 0.3 | syndic8
subglobal8 link | subglobal8 link | subglobal8 link | subglobal8 link | subglobal8 link | subglobal8 link | subglobal8 link

March 2005

« February 2005 | Home | April 2005 »

How to Learn HTML and CSS Using Dreamweaver

This week we covered the following topics:

On the Web:

Regarding Design:

Student sites:


  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

Posted to CSS and Dreamweaver and Learning at 06:13 PM | comments (0) | trackback (0)

Star Student

Recently I received a message from one of my former students. She sent her regrets for being able to attend my Dreamweaver class, but sent me her most recent design:

grafias online

Not bad, eh!? She's graduating from the Certificate Program this semester and looking for work. If you need a Web site, I highly recommend Paola to you. She was my star student, and has clearly mastered Dreamweaver, Fireworks, and Flash on her own.

March 24, 2005

Posted to Design and Dreamweaver and Flash at 10:32 AM | comments (0) | trackback (0)

How Not to Use Dreamweaver

This week we covered the following topics:

How Not to Use Dreamweaver:

Taking advantage of the Mac:

  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.


  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 Create an account. Figure out how to:
    • Add's RSS feed.
    • Add's news feed.
    • Create a blog and post to it. Send me your Blog URL.

March 23, 2005

Posted to CSS and Design and Dreamweaver and Learning and Mac OS X and RSS at 05:23 PM | comments (1) | trackback (0)

Walking the Walk

Brushed Aluminum header

I've been teaching my Dreamweaver class how to prototype, and decided to show them how it's done. Check it out.

This started on paper, then moved to OmniGraffle. Then, I got busy with Apple Interface Builder, and finally souped it all up using MX 2004 and the new (unreleased) version of Dreamweaver.

Sometimes I find it hard to believe that creating new web designs is actually a part of my testing. Gotta walk the walk of our customers!

Thanks to Biz and Eric for the QA and encouragement.

March 17, 2005

Posted to Design and Dreamweaver and Mac OS X at 08:22 PM | comments (1) | trackback (0)

How to Use Dreamweaver

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:

Regarding Code:

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:

March 15, 2005

Posted to Design and Dreamweaver and Learning at 05:00 PM | comments (0) | trackback (0)

Take Full Advantage of your Mac

Here are a few tips to help you increase productivity using Mac OS X.

Grab the developer's tools to get:

  1. Shark - performance analysis
  2. Xcode - coding and documentation tool
  3. FileMerge - file diff / comparison tool
  4. gcc - compiler/debugger

Take note of these Macintosh OS X innovations:

  1. Track Performance: Turn your Seconds in your menubar: System Prefs > Date & Time
  2. Have a cheap, clean workspace - Enable Fast User Switching: System Prefs > Accounts > Login Options
  3. Apple + D gets you to Desktop in any modal dialog
  4. Middle-Click for Exposé: System Prefs > Exposé
  5. Yes, there is Right-Click - you can use Control + Click on a machine with only one mouse button
  6. Import preferences and files from another machine during install: Target Disk Mode - Hold down T during startup
    This is the way to install on a machine with no DVD drive:
    1. Restart target machine to Target Disk Mode.
    2. Mount target machine and Install DVD.
    3. Start install process, DVD will ask you to choose partition on target machine.
    4. Restart when done, disconnecting target machine after chime.
  7. Apple + K to connect to server from Finder
  8. Samba (smb://) is faster, but Apple File Protocol (afp://) always works

Here are several excellent Macintosh applications that will streamline your testing and general productivity:

  • Adium - multi-client chat application, free beta
  • Quicksilver - essential - allows realtime searching and launching via keyboard shortcut, free beta that mimics "Spotlight" in Tiger
  • iPulse - essential - allows realtime status on processes, memory usage, disk usage and other stats in one small view, free trial
  • xScope - useful - provides zoom, guides, and other pixel-related tools for UI Inspection of entire screen, free trial
  • SnapsProX - screenshot app that works just like SnagIt

Watch this space for more Mac tips and tricks.

March 11, 2005

Posted to Mac OS X at 03:23 PM | comments (0) | trackback (0)

How to Learn Dreamweaver, Part Two

This week we went over the following topics:

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:

March 8, 2005

Posted to Design and Dreamweaver and Learning at 10:34 PM | comments (0) | trackback (0)

How to Learn Dreamweaver, Part One

On Monday, I held the first of ten (10) classes on How to Learn Dreamweaver. I'll be posting some of the notes from class to this blog so that others can follow along.

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:
Follow this link and I will get a referral fee. Sign up, and you can get them, too.


  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, 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:

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

Posted to Design and Dreamweaver and Learning at 07:01 PM | comments (0) | trackback (0)
Home | Contact | Xhtml | Css | 508 | Aaa | © 2005 Dominic Sagolla