Here’s my first screen capture that I’ve uploaded to YouTube. It shows how to make contextual CSS work in Dreamweaver.

No Comments »

Fenixworks has just added a workshop on how to use iTunes. Many people have asked me how to do this and how to do that, so I’ve decided to share the wealth, as it were.

Here’re the topics that I plan to cover:

• Adding tunes and videos to your collection
  • ripping CDs - what formats work best
  • downloading from the iTunes store
  • burning CDs
• Buiding Playlists
  • Basic playlists
  • Letting the computer build “Smart Playlists” for you
  • Combining and Constraining playlists
  • Criteria for making Smart Playlists
• Syncing iPods/iPhones
  • Strategy for rotating recent tunes onto and off of your iPod/iPhone
  • Creative use of Folders
  • More on those Smart Playlists
  • Managing multiple iPods/iPhones from one iTunes library
• Tips and Tricks
  • Setting optimal preferences
  • Watching video on other screens
  • Setting up remote controls

Spread the word about the workshop. If you know anyone who is interested in learning how to be a power user in iTunes, here’s their chance. We’re offering a special introductory of $49 for the August and September iTunes to Go workshops.

You can read more about it and register here.

No Comments »

Well, I finally got all the ducks in a row and jumped through the appropriate hoops. I’m happy to say that we now accept American Express in addition to Visa and MasterCard.

No Comments »

We’re hosting a Biznik Event on Monday night, July 14. It’s based on our “12 Things You Can Do to Get Your Website Noticed” workshop. If you are a Biznik member, you can sign up for $15 on their site (which is a steal, since this workshop normally retails for $99), and you can get an additional 10% off of any regularly scheduled workshop if you sign up while you’re here that night.

Since this is an event, more than a regular workshop, there will be time for networking with other local professionals and we’ll be supplying bevies and light food from Habibi.

Not a Biznik user? Not to worry - anyone can join Biznik at their website for free. Just be sure to select “Portland” from the “more” menu near the top or you might end up getting invites to all the Seattle events.

So run, don’t walk, go to their site and sign up, seating for this one is limited to 25 attendees.

No Comments »

I’ve taught InDesign since its inception, and over the past few years I’ve noticed a sea change in the types of students who take my classes. At first, students were mostly graphic designers and professional printers, learning the cutting edge page layout program that was positioned to replace the industry standard, Quark. As InDesign fulfilled its promise and took over the publishing industry, it became a must-know for designers and pre-press professionals.

In the last year or two many office support staffers are being required to learn InDesign, as budgets tighten and companies no longer want to outsource work to freelance designers. Employees with little or no design training are being required to navigate the complexities of typography and information architecture and create publications that look professionally designed.

The task can be daunting, but I weave basic typography and common-sense design principles into my InDesign curriculum, because designing publications is so much more than just knowing the software, and I want my students to have a solid foundation to build from.

I’m really proud of what my students have accomplished recently, including the recent newsletter for Sisters of The Road, a non-profit agency here in Portland.

No Comments »

This is a step by step description of the options in the CSS Rule Definition dialog from Dreamweaver CS3. Today we are covering the options related to the "Background" panel where you set up behaviors in the background of your elements.

You can download a PDF version of this article here.

CSS Rule Definition: Background

This is the basic rule definition dialog for Dreamweaver CS3. It has 8 categories down the left-hand side. Each one will present you with a range of options in the main part of the dialog. This paper describes the "Background" section.

Background Color

The most basic setting for this section is the Background Color. You can use the drop-down menu to choose a color from Dreamweaver’s template, or you can type a number directly into the empty field next to the color selector. If you do type the number directly, be sure to include the # sign at the beginning!

The palette that shows up under the cursor is set to display "web-safe" colors by default. In the olden days on the web (just a couple of years ago!) we always stressed using web-safe colors, but they are becoming less important in today’s world. Note that web-safe does not promise the colors will be the same on different computers, only that they won’t be dithered.

Early computers often could not reproduce a full color spectrum, so they cheated by dithering the colors, or by putting different colors side by side to blend and make our eyes see colors that weren’t really there. For example, they may have put a pixel of red next to a pixel of red to make us see orange. Web safe colors gives us the guarantee that if we see orange, all the pixels are orange.

Anyway, computers sold today can display enough colors that web-safe is no longer an issue.

An added benefit of the eye-dropper cursor is that you don’t have to select colors from the palette itself. You can move the eye-dropper over any color visible on your screen to pick up that color for this space. You can sample colors from photos, other places on your Dreamweaver document, even out of icons on your desktop, as long as they are visible when you choose the drop-down.

Finally, when you are choosing a background color, make sure it’s dark or light enough to provide plenty of contrast with your font color or people won’t be able to read the text on your web page.

Background Image

You can type a fully qualified URL (one that starts with http:// ) or you can click on the browse button to select a graphic image from your hard drive. If the image is not contained within your web structure, Dreamweaver by default will offer to copy the image in for you when you are done.

Keep in mind that busy or high-contrast images and patterns make it difficult to read the text on your page. You should keep background images low-contrast, or "washed out," so that your site is easy to read.

By default, any image you place here will be placed in the upper right corner and then repeat over and over all the way down through the visible parts of the page.

Repeat

If you have an image in your background, repeat tells the browser how to repeat it when you don’t want it use the default. The four options are: "repeat," which makes the image repeat across and down the page; "repeat-x," which makes the image repeat only across the page; "repeat-y," which makes the image repeat only down the page; and "no-repeat," which makes the image display only once with no repeating.

The default is "repeat" in both directions, but remember that any HTML element can inherit directions from its parent element (the element that encloses the current element), so if you have complex embedded elements, it might be worth it to explicitly say "repeat" if that’s what you want it to do.

Attachment

If you have a background image, this property will determine whether the image scrolls with the page or not. If it is set to "scroll," the image will scroll with the rest of the page as it move. If it is set to "fixed," then the image will not move as you scroll the page.

Horizontal and Vertical Positions

If you have included a background image, you can use the position settings to offset it from the upper left corner of the browser window. In the image above, it is set to display the upper right corner of the background image 100 pixels from the left hand side.

No Comments »

List is an underused function in FileMaker Pro. I say it’s underused only because I never used it before

Recently I was working on an email engine that would notify the teachers at Fenixworks about who was enrolled for a specific class. The students are all in a related table that’s inside of my registration database, but for the life of me I couldn’t find a way to build a calculation that would include just the students from a specific workshop for the instructor email.

I tried about ten different approaches, it seems like there’s always at least that many ways to try something in FileMaker. I had already searched FileMaker’s help and had come up empty handed, so I turned to the internets, a la Google.

I find often I can type a plain english question into Google and find a worthy response. In this case, that’s exactly what I did.

I asked Google “How do I list related records in an email calculation for filemaker pro?” I turned up a few pages that didn’t help, but then I ran across one that listed exactly what I needed.

There’s actually a “List” function. You can use it to return a list of related records, all in one field. Then you can use that field just like any other field. It has the added benefits that it works to show all the contents of a repeating field in one place, or you can even use it to show a bunch of fields as if they were all concatenated into a list.

Sweet.

So for my needs, I was able to just use this one command in my calculation field:

list(regsitrations::student)

and that pulled all of the students related through the registrations table for the current record into one place where I could then work them into my email calculation field.

I immediately turned around and used it in another place to list all of the upcoming classes for my daily Craigslist posting. First, I set up a relationship that relies on both the ID of the class and dates greater than today’s date. Then I was able to use the list function like this:

list(futureSchedule::craigslistBlurb)

Now I’m using the list function so much, I don’t have any idea how I ever got along without it. I think you may find it useful too.

No Comments »

We’ve added a Dreamweaver Lite workshop that meets one time for $99.

In teaching the Dreamweaver workshop for the past couple of years, we have run across several people who aren’t interested in setting up a website, they only want to manage the one they already have.

So in Dreamweaver Lite, we don’t talk about making templates, and we don’t talk about the overall structure of the site. We concentrate on how you can log into your site and change content.

If you’ve inherited website maintenance when someone else quit, or your web contractor doesn’t return your calls, or even if you were planning all along to have someone else do the design and let you keep up with the changes, this course is the one for you.

We’ll be offering it a number of times every month, so sign up for the one that’s most convenient for you. Check out the current schedule here.

No Comments »

Check out the Cascade Commercial Real Estate website, it was designed by a Fenixworks grad.

Created by Crawford Vining over the past month or so, it’s his first commercial gig.

Crawford says:

Fenix made it easy to understand what was needed to start designing websites. This is the first of several websites I’ve already started working on.

Thanks for the vote of confidence Crawford, and let us know how the new company is going!

Comments Off

This is a step by step description of the options in the CSS Rule Definition dialog from Dreamweaver CS3. Today we are covering the options related to the "Type" panel where you set up behaviors for your fonts.

You can download a PDF version of this article here.

CSS Rule Definition: Type

This is the basic rule definition dialog for Dreamweaver CS3. It has 8 categories down the left hand side, each one will present you with a range of options in the main part of the dialog. This paper describes the "Type" section.

Dreamweaver CS3 will allow you to define things like fonts, type size, color and alignment directly in the property inspector at the bottom of your screen, but using the property inspector method bypasses this dialog and can produce unpredictable (and hard to correct) results. You should always manage the type on your web pages through the CSS rules either directly in the CSS code on your CSS page, or through the CSS interface that includes this dialog.

Font

Clicking on the popup menu next to the Font field, you are presented with a list of fonts that are all good choices for your web project. Dreamweaver ships with the options in the picture, but you are always free to add your own either manually or by editing the menu.

Every computer on the web uses the fonts it has installed to display the page. If you use a fancy font that few people have installed on their machines, then you will only have a few people see your website the way you designed it. It’s best to stick with standard fonts so that everyone sees the same design. Those offered by Dreamweaver are excellent choices for this.

Why are there three fonts listed in each option? Again it’s because every computer has different fonts. In the example, the first option lists "Arial, Helvetica, sans-serif". This means the computer viewing the web page will first try to use Arial for the font. If Arial is not installed on the computer then it will try to use Helvetica. If it can’t find Helvetica either, then it will just use the generic sans-serif font that is defined for that machine.

Any time you give it your own choice of fonts, you should always end with one of the five font categories: sans-serif, serif, monospace, fantasy, and cursive. This way the end-user’s computer can always have a default if it can’t find a copy of your font.

Size

Choosing a font size depends on your design. Choosing xx-small, x-small, small, medium, etc., will rely on a browser default or base the size on the parent CSS element. If you want to nail the size down to something specific you should choose a specific number (or type a specific number in the blank and not use the popup menu at all).

Units for Size

If you choose (or type) a number, you will need to choose a measurement. Different designers argue over which one is best, but the truth is that none of them is the single best answer in every condition. For best cross-platform/cross-browser consistency, pixels works best. 12 pixels on a PC in Firefox is roughly equivalent to 12 pixels on a Mac using Safari. If you choose points, then your fonts will vary in size by somewhere around 20% between a Mac browser and a Windows browser. Inches, Centimeters, Millimeters and Picas all depend on screen resolution, so they can vary wildly as well. "Ems" is pronounced just like it sounds. It stands for the width of the capital letter "M". Many web developers swear that designing using Ems is the only way to go. The advantage of using Ems is that it keeps everything proportional to the font. "Exs" is the same thing, except the unit is the letter X instead of the letter M. Finally, using % means the measurement will be based on the enclosing CSS element (referred to as the Parent). So a font that is set to 10% will always use 10% of the available space.

Style

The style field lets you choose "normal", "italic", and "oblique". For all practical purposes in today’s browsers, Italic and Oblique are the same thing. Use which ever one you like. If the parent element has already set Italic or Oblique and you want to override that setting, you should choose Normal. Otherwise you can leave it blank if you like.

Line height

Type a number to change the line height of the font, or choose normal to override the parent element’s setting. If you type a number, you’ll have to choose a unit of measurement from the menus beside it (like the font size, the options are pixels, points, in, cm, mm, picas, ems, exs, and %). Leaving it blank will allow it to inherit the settings from its parent.

Weight

Choosing a specific weight for web text has long been a designer’s dream. The mechanism is there now, but many web browsers do not support it. The specification says 500 is normal, lower numbers are lighter, higher numbers are darker. In practice, you are pretty much limited to "normal" and "bold".

Variant

Turning on small-caps will make every letter a capital letter. In this case, the capital letters are all normal capital letters, the lower case letters are slightly reduced in size but still have the shape of the capital letters. This effect does not show up in Dreamweaver’s design window. You’ll have to preview the final page in your browser to see the effect.

Case

Here you can choose to capitalize every word, convert everything to lowercase or to uppercase, or you can choose none to override the parent. Often this is used for menu items that are text so that they will have have the same case structure.

Color

Choose a color from the palette for your text. You can also choose a color from anywhere on the screen using the eyedropper. The colors that show up on this palette are the 216 "websafe" colors. Websafe means they won’t be dithered in the event that someone with 8-bit color is looking at the website. Websafe is still exists as a concept, but there’s not a lot of practical need for it any more. Every computer sold in the last five years or so can display significantly more than 8-bit color (8-bit color means the computer can only display 256 different shades of color on the screen at one time). 16- and 24-bit color has been around for almost 20 years, allowing modern computers to display millions of colors at once. The "websafe" palette is really a throwback to the 1990s. Feel free to use these colors or any other on your website.

Comments Off