dom.net

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

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".

April 12, 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

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

Eric Meyer on how to circumvent browser defaults. He deconstructs Tantek's css - worth a read.

February 10, 2005

I've always wanted a shortcut for this:
Multiple Column Lists in CSS

[free from CMX]

December 2, 2004