HTML

Clearing Floats Without Touching Your HTML
by Estelle Weyl - 30-Sep-09
Reader Level:

Yes, it is possible to clear floats without adding <br class="clearfloat" /> into your HTML. In this tutorial, we cover the old fashioned clearfloat element, and three not-so-new but not-oft used unobtrusive CSS methods of clearing floats.

HTML5 Canvas - Part 1: Introduction Free!
by Rob Williams - 21-Sep-09
Reader Level:

The upcoming HTML 5 specification promises to add support for a wide range of new and exciting web technologies. In this series we're going to focus on one of the major new players, the Canvas element, which allows for direct rendering and manipulation of vectors and images from within JavaScript.

In this first article, we'll explore what Canvas is, why it's important to us, and get a first quick look at how it can be used.

The HTML5 Canvas Series
HTML5 Canvas - Part 1: Introduction
HTML5 Canvas - Part 2: Basic
HTML5 Canvas - Part 3: Advanced Drawing Techniques
HTML5 Canvas - Part 4: Images
HTML5 Canvas - Part 5: Image Scaling and Croping Coming Soon

Semantic XHTML - Part 12: The FORM Element
by Estelle Weyl - 09-Mar-09
Reader Level:

In this section of our series on all the valid XHTML elements and their attributes, we learn about the forms and the FORM element.

Forms are most often used to send data from the client or user to the server where the form data can be processed. For processing, there needs to be server side script that can handle the data. The form element itself is basically a shell for all the form elements that actually capture the data, with general instructions telling the browser how to send the data (the method attribute) and telling the server which file should handle the data (the action attribute).

In the next five sections of our multi part series on semantic XHTML, we will discuss the <form> element, form fields, and all the structural elements employed to make forms more cohesive. In this section we will focus on the parent element: the <form> element itself.

The Semantic XHTML Series:
Semantic XHTML - Part 1: The Required Elements
Semantic XHTML - Part 2: Elements Within the Element
Semantic XHTML - Part 3: Common Block Level Elements
Semantic XHTML - Part 4: List Elements
Semantic XHTML - Part 5: Table Elements
Semantic XHTML - Part 6: Inline Elements
Semantic XHTML - Part 7: The Phrase Elements
Semantic XHTML - Part 8: Empty Elements
Semantic XHTML - Part 9: The Image Element
Semantic XHTML - Part 10: Image Maps
Semantic XHTML - Part 11: The Object Element
Semantic XHTML - Part 12: The FORM Element
Semantic XHTML - Part 13: The INPUT Element
Semantic XHTML - Part 14: TEXTAREA and BUTTON Elements
Semantic XHTML - Part 15: Drop Down Menus
Semantic XHTML - Part 16: Organizing Forms
Semantic XHTML - Part 17: Non-Semantic Elements
Semantic XHTML - Part 18: INS, DEL & NOSCRIPT
Semantic XHTML - Table of XHTML Elements

Firebug Part 3: Editing with Firebug
by Estelle Weyl - 20-Jan-09
Reader Level:

In this multi-part series, we are going to learn all about Firebug, the premier (and free) web development tool for Firefox. In part 3, we learn how to edit CSS, HTML and Javascript within the Firebug window, so we can get immediate feedback on how our edits will change the site in production.

The Firebug Series:
Firebug - Part 1: The What and Why
Firebug - Part 2: Overview of Firebug Functionality
Firebug - Part 3: Editing with Firebug
Firebug - Part 4A: Inspecting and Troubleshooting CSS
Firebug - Part 4B: Inspecting and Troubleshooting CSS
Firebug - Part 5: Inspecting the Box Model
Firebug - Part 6: HTTP Requests and Download Speeds
Firebug Part 7a: The Script Tab (Basics)

HTML/CSS Crash Primer Free!
by Tom Muck - 02-Dec-08
Reader Level:

This article is intended as a re-introduction to HTML and CSS, and something I have used in the past to give to any new employees who may have had HTML experience, but exhibited some bad habits in actual coding. You may think HTML is simple and you may think you know all you need to know, but HTML is misused daily. Following are some basics to help correct some of the common problems.

Firebug - Part 2: Overview of Firebug Functionality
by Estelle Weyl - 10-Nov-08
Reader Level:

In Part 1 we got you all set up with the Firebug and Firefox installation and setting up the preferences. In this section we learn the "why" of what we did in Part 1.

This is a quick overview of everything Firebug has to offer. This section provides a brief overview of the console, HTML, CSS, Script, DOM and Net Tabs, and some of the other features provided by the Firebug plug-in including editing, searching and display options.

The Firebug Series:
Firebug - Part 1: The What and Why
Firebug - Part 2: Overview of Firebug Functionality
Firebug - Part 3: Editing with Firebug
Firebug - Part 4A: Inspecting and Troubleshooting CSS
Firebug - Part 4B: Inspecting and Troubleshooting CSS
Firebug - Part 5: Inspecting the Box Model
Firebug - Part 6: HTTP Requests and Download Speeds
Firebug Part 7a: The Script Tab (Basics)

Firebug - Part 1: The What and Why Free!
by Estelle Weyl - 05-Nov-08
Reader Level:

In this multi-part series, we are going to learn all about Firebug, the premier (and free) web development tool for Firefox. Part 1 is an overview of the the Firefox browser, and Firebug, the Firefox plugin. Learn how to install Firefox and Firebug, and learn how to run the application and change preferences. In future sessions will show you how to work with and troubleshoot CSS, HTML and Javascript.

The Firebug Series:
Firebug - Part 1: The What and Why
Firebug - Part 2: Overview of Firebug Functionality
Firebug - Part 3: Editing with Firebug
Firebug - Part 4A: Inspecting and Troubleshooting CSS
Firebug - Part 4B: Inspecting and Troubleshooting CSS
Firebug - Part 5: Inspecting the Box Model
Firebug - Part 6: HTTP Requests and Download Speeds
Firebug Part 7a: The Script Tab (Basics)

Semantic XHTML - Part 1: The Required Elements Free!
by Estelle Weyl - 16-Sep-08
Reader Level:

By writing semantic, valid XHTML, the code that you create for your website will work not only cross browser, but cross device. The web page that works in your Firefox Browser on your Windows XP computer can work in a cell phone's browser, on TV via a PlayStation, and even in a braille reader. To write semantic code, you need to understand what every element means. In this series, we will cover all the HTML

This series will include:

Part 1: The required elements to create a document:
Part 2: Elements that go inside the document head
Part 3: block level elements
Part 4: Lists
Part 5: Tables: Block level elements that aren't display: block
Part 6: Common inline elements
Part 7: The Phrase elements
Part 8: Empty Elements
And more....

There are several elements that we can use to create a valid XHTML document that is sematically correct. To code correctly, it is important to know all the elements, and especially to know when and how to use them. In part one of the Semantic XHTML series, we discuss the five elements that are required.

Mobile Internet Devices - Part 2: Browser Evolution
by Rob Williams - 17-Jun-08
Reader Level:

The "mobile web" has rapidly become one of the most important and rapidly evolving markets; yet most developers are still unaware of just how much as changed on the mobile front recently or what to expect in the future. Today we're going to take a look at the evolution that is occuring in web browsers for mobile devices and try go get a glimpse of how mobile browsing is changing as well as some of the new concepts that we, as web developers, need to start to think about more and more.

The Mobile Internet Devices Series:
Mobile Internet Devices - Part 1: An Introduction
Mobile Internet Devices - Part 2: Browser Evolution

Mobile Internet Devices - Part 1: An Introduction Free!
by Rob Williams - 05-Jun-08
Reader Level:

We've all heard of "the mobile web, at least in some general context. What most developers haven't become aware of though is just how much that idea of mobile internet is changing, and how we, as website developers and maintainers, need to start changing our paradigms about developing for "devices".

Today we'll take a look at the traditional mobile web, some of the changes that have/are taking place, and some of the ways that we can keep ahead of the curve as web developers.

The Mobile Internet Devices Series:
Mobile Internet Devices - Part 1: An Introduction
Mobile Internet Devices - Part 2: Browser Evolution

Declaring the Language of Your (X)HTML Content Free!
by Zoe Gillenwater - 28-Sep-07
Reader Level:

Defining the language of your web content is an essential but often overlooked step in making your web pages standards-compliant. Even if your pages are all written in a single language and you are certain that all members of your audience speak that same language, it's still a good idea to specify the language so that a variety of user agents and tools can correctly interpret and display the content.

In this article, you'll learn how to declare the language of your content in both HTML and XHTML. We'll go over how to declare a default language for the page as a whole as well as how to indicate where the language changes within the page, whether for an entire section or just a word.

Vertically Align Labels and Inputs with CSS
by Zoe Gillenwater - 03-Jan-07
Reader Level:

Although forms where the labels are placed above the input fields they describe are considered to be more usable, there are undoubtedly going to be times where you need to use a form layout where the labels are placed to the left of their input fields with right-aligned text. This tutorial will teach you the basic (X)HTML structure and CSS to do just that. It assumes you're already familiar with the building blocks of forms and how to use them correctly to build accessible forms: fieldset, legend, label and input elements.

In a followup tutorial, you will learn how to build on this basic structure to accommodate more versatile form content, including checkboxes, radio buttons, textareas with long labels, and instructional text.

CMX JumpStart: Metropolis
by Sheri German - 22-Nov-06
Reader Level:

CMX JumpStart Metropolis is a two-column, hybrid layout that has a fluid left column and a fixed-width right column. It includes rounded corners on its right side, and employs faux column technique to achieve equal height columns. It has a footer as well as a fixed header that remains in view even as the visitor scrolls the page - a property that is now supported by Internet Explorer 7. It features styled unordered lists for the navigation, styled skip links, min and max width, and has a placeholder for a photo gallery. Finally, there are several style sheets involved: a main style sheet, a style sheet for print, and a style sheet for all of the special Internet Explorer rules. And of course, as always, Metropolis validates for XHTML 1.0 Transitional, CSS 2.1, and 508 and WAI accessibility.

Approximate download size: 7.1MB

Easy Nav for ColdFusion
by Ray West - 01-Nov-06
Reader Level:

In this tutorial I will show you how to develop a navigation handler in ColdFusion that will do the following:

The navigation would be made up of a CSS styled unordered list, <ul>
Each list item, <li>, within the <ul> would be a link to a page within the site
Each <li> would contain an anchor (a) with an href to the target page.
Whichever page the visitor was on at the moment should not show up as a link in the nav, rather it should just show <strong> so as to indicate the current location and avoid self-referencing links
It should be self updating as the navigation changes so that no manual changes are necessary to the code to 'code-around' the links on each target page

Layout Building Blocks
by Paul Davis - 10-Oct-06
Reader Level:

Create a base CSS layout structure that you can use again and again to quickly begin your web site creation. Don't re-invent the wheel each time!

Transparent Gradients in Illustrator
by Kim Dudley - 20-Sep-06
Reader Level:

Have you ever wished you had a tool from one application in another? One such tool I would like to have in Illustrator is Photoshop's gradient tool. Of course Illustrator has a gradient tool but unlike Photoshop's it can only create a gradient between two colors. Photoshop's gradient tool can create a gradient from a color to transparency. Sometimes, however, by using different tools the same effect can be acheived.

In this tutorial we will look at a way to create the look of Photoshop's gradient tool in Illustrator by using Illustrator's Opacity mask.

All About CSS Drop Shadows - Part Six
by John Gallant,Holly Bergevin - 05-Sep-06
Reader Level:

Last time we covered the small details of our new CSS drop shadow method, cleaning up a lot of loose ends. Now we will introduce a fancy trick that will cause our shadowed element to behave like a depressable button when it is hovered. It's a really neat effect, and we feel it will eventually become a common method on the web.

The All About CSS Drop Shadows Series:
All About CSS Drop Shadows - Part One
All About CSS Drop Shadows - Part Two
All About CSS Drop Shadows - Part Three
All About CSS Drop Shadows - Part Four
All About CSS Drop Shadows - Part Five
All About CSS Drop Shadows - Part Six
All About CSS Drop Shadows - Part Seven Coming Soon

PHP Formmail Spam Prevention
by Sheri German - 25-Aug-06
Reader Level:

It used to be that there were clear sides in the junk email battle: the spammers and the spammed. I always considered myself a member of the latter group, and then one day I became a member—inadvertently—of the former. I had become a victim of the email injection attack via a PHP formmail script.

In this update to the Dreamweaver Creating and Processing Form series, we'll take a new look at the phpformmail script and demonstrate how to use a key and email value pair to keep your email address out of the html page.

Introducing CMX Jumpstart Greenville Free!
by Sheri German - 10-Aug-06
Reader Level:

The name Greenville evokes the radiant ambiance of gardens, nurseries, and landscapes. And that is just how Heidi Bautista paints it in our latest Community MX JumpStart: Greenville, NC. Let's take a closer look at this bloomingly lovely design to see what new treasure we've added to our JumpStart collection.

Introducing CMX Design Element Iodine Free!
by Sheri German - 22-Jun-06
Reader Level:

Our CMX design sorcerer, Gordon Mackay, is back with another CMX Design Element in our series of fully developed Fireworks design comps that you can slice and code in any way that fits your page specs. This time we offer you element Iodine in our CMX Design Element Iodine.

Introducing CMX Jumpstart Orlando Free!
by Sheri German - 15-Jun-06
Reader Level:

Orlando, Florida. It's every kid's dream vacation spot. It's warm and sunny, and makes the world of school seem galaxies away. It's got theme parks galore that take them to galaxies far away. When most people think of Orlando, they probably think of Disney, Epcot, MGM Studios, and Sea World. Now there is also CommunityMX JumpStart Orlando to add to the list of Orlando attractions.

Orlando was designed by Chris Flick and coded by Zoe Gillenwater. Orlando uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design for which you may wish to use it. Orlando is a two-column elastic layout that also features a subhead area, a styled list as a navigation menu, and floated images.

Create a Teaser Thumbnail List Using CSS: Part 4
by Zoe Gillenwater - 02-Jun-06
Reader Level:

This tutorial is the fourth part in a series on creating "teaser thumbnail lists" with CSS. Teaser thumbnail lists are those lists of items made up of a title, short description, and thumbnail. They're often used to provide short teasers that link to more information about the products, articles, or sections of the site being listed. In Parts 1, 2, and 3, you've learned how to build teaser thumbnail lists from both definition lists and unordered lists and learned a couple different ways to style them. However, so far all of the lists created have been fixed in width.

In this tutorial, you'll learn how to create a teaser thumbnail list that can expand and contract in width so that it can be used in fluid or liquid sites. As with the other lists, we'll use floats to accomplish the layout.

Note: This tutorial has been updated as of 5/10/2007. You can view the updated tutorial here.

The Create a Teaser Thumbnail List Series:
Create a Teaser Thumbnail List Using CSS: Part 1
Create a Teaser Thumbnail List Using CSS: Part 2
Create a Teaser Thumbnail List Using CSS: Part 3
Create a Teaser Thumbnail List Using CSS: Part 4

Introducing CMX Jumpstart San Francisco Free!
by Sheri German - 01-Jun-06
Reader Level:

We are pleased to introduce CMX JumpStart San Francisco, a great first CSS layout for students and experienced developers alike. Structured to be as hack free and straightforward as possible, this may be just the JumpStart for you if you have been holding back on CSS layouts so far. Like all JumpStarts, it uses valid XHTML and CSS as its foundation and is 508 and WAI compliant. This two-column, fixed-width layout, described rule by rule in the documentation article, makes a great learning tool.

Introducing CMX Design Element Mercury Free!
by Sheri German - 25-May-06
Reader Level:

Our CMX design sorcerer, Gordon Mackay, is back with another CMX Design Element in our series of fully developed Fireworks design comps that you can slice and code in any way that fits your page specs. We leave elements Carbon, Krypton, and Gold, and this time offer you element Mercury in our CMX Design Element Mercury.

Introducing CMX Design Element Gold Free!
by Sheri German - 11-May-06
Reader Level:

I am sure you remember that the symbol for Gold, Au, comes from the Latin word "Aurum". No? You don't remember that? Well, then maybe you remember this: gold is one of the most valuable commodities in the world of commerce. And a good design is also one of the most valuable commodities on the Web. It catches your visitors' eyes and encourages them to stay and explore - and perhaps even to buy. There is almost no price tag for a great design, and fortunately you don't have to come up with one all by yourself. Gordon has done the creative work for you in our latest CMX Design Element Gold. Read all about it in this article.

Introducing CMX Design Element Krypton Free!
by Sheri German - 27-Apr-06
Reader Level:

It's a bird! It's a plane! No, it's super design CMX Design Element Krypton!

Join me as I unveil the latest Gordon MacKay Fireworks design element. We'll look at what the package includes, what articles come bundled with it, and at some possible ways you might implement it as a Dreamweaver CSS-based layout.

Introducing CMX JumpStart Modifications Free!
by Sheri German - 30-Mar-06
Reader Level:

With our growing repertoire of JumpStarts, there are now layouts to fit a wide range of design requirements. Still, sometimes a particular JumpStart is just what you are looking for - if only you could fix one or two little details. If only the navigation had been on the right instead of left. Or what if that left DIV had been floated rather than set to position absolute? And what if instead of a fixed-width, centered layout, the JumpStart had been fluid?

We often see such sentiments on the forums, and thought it might be helpful to respond with articles that show how to modify some of our existing JumpStarts to give you a wider variety of options without having to go in and code the tweaks yourself. Towards that end, we give you CMX JumpStart Playacar, Mexico.

Spell Checking HTML Forms with JavaScript and PHP
by Rob Williams - 27-Mar-06
Reader Level:

Have you ever had to write a large amount of text into a field on an HTML form and been uncertain of just how reliable your spelling skills are? Wouldn't it be nice if HTML forms, like most other applications, had one of those handy little "Spell Check" buttons? In this article we'll look at how easy it is to implement this functionality using a PHP/JavaScript solution called Speller Pages.

Using JumpStarts with Cartweaver, Featuring Minneapolis Free!
by Tom Muck - 09-Mar-06
Reader Level:

JumpStarts are great starting points for dynamic sites, and the Minneapolis JumpStart is a great starting point for a dynamic e-commerce site. Shopping carts like Cartweaver integrate well with Dreamweaver, but how do you integrate a third-party cart with a JumpStart? This tutorial, written by a member of the Cartweaver team and Community MX, shows one way of integrating the two.

Introducing CMX Jumpstart Minneapolis Free!
by Sheri German - 03-Mar-06
Reader Level:

What city has the biggest shopping mall in America? What city has a full-sized theme park inside its mall? What city is one of the most popular destinations for shopping-based vacations in the United States? Why, Minneapolis, Minnesota, of course! Home to the Mall of America, tourists flock there to shop till they drop. But there is one bigger mall in America, and indeed the world, and that is the Mall of the World Wide Web. More and more people do their shopping there, and eCommerce is hotter than ever. When we were planning our next JumpStart, we decided to do something a little different, a little out of the ordinary. We decided to do an eCommerce template and call it CommunityMX JumpStart Minneapolis.

Designed and coded by Gordon Mackay, Minneapolis is a fluid, three-column design with hidden layers. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. Minneapolis also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design.

Managing HTML and CSS to Keep Clients Happy and Avoid 'Disaster' - Part Three
by John Gallant,Holly Bergevin - 06-Feb-06
Reader Level:

Last time we studied the generalities of the viewport and layouts that may appear in it. This time we'll look more closely at those layout types, what they can do, and what they can't.

This is not a tutorial on constructing those layouts, but is instead an overview of how they function in browsers. We hope to demystify the topic just a little for those who may be a bit hazy on the subject.

Let's go!

The Managing HTML and CSS to Keep Clients Happy Series:
Managing HTML and CSS to Keep Clients Happy and Avoid 'Disaster' - Part One
Managing HTML and CSS to Keep Clients Happy and Avoid 'Disaster' - Part Two
Managing HTML and CSS to Keep Clients Happy and Avoid Disaster - Part Three

An XHTML, CSS and Accessible Form Template
by Adrian Senior - 06-Feb-06
Reader Level:

In this tutorial we will look at how we can create a generic form template that can be used as a starting point in your web designs. We'll pre-set selectors so that you can choose to display your from elements inline or at block level.

Practical/Cool Uses of Attribute Selectors
by Gordon Mackay - 02-Feb-06
Reader Level:

In a recent article we introduced you to the concept of attribute selectors, in this article we will take that underpinning knowledge and explore two ways in which they can be used to enhance the way in which certain elements within typical (X)HTML documents are presented to a site's visitors.

In the course of studying these two examples you should be able to come up with some neat ideas for styling other page elements based on their attributes.

Emulate a Table-Based Layout with the CSS Display Property
by Zoe Gillenwater - 27-Jan-06
Reader Level:

If you've already read Introduction to CSS Table-Related Display Values, you know that you can use the table-related values of the display property of CSS 2.1 to make any non-table HTML element act like any table element.

In this article, you'll use this knowledge to tell divs to act like table cells in order to create a pure CSS layout that emulates the behavior of a table layout: each column will automatically expand to hold its content (even horizontally) and adjacent columns will match each other in height.

Unfortunately, Internet Explorer (IE) doesn't support the CSS values that make this possible. But it doesn't need to: as you've already seen in CSS Negative Margins - Part Four: Three Column Liquid Layouts, negative margins can be used to emulate table behavior pretty closely in IE. Thus, after covering how to build a table-like layout for standards-compliant browsers, I'll show how to combine this new CSS with the CSS from the negative margins series to keep IE's successful layout intact without disturbing more modern browsers.

Cool Adobe GoLive Features - Part 2: Extending With Smart Forms Free!
by Sheri German - 25-Jan-06
Reader Level:

In the second article of the cool GoLive features series we will look at GoLive Smart Forms and International Smart Forms, two free extensions created by Adam Pratt that add 50 commonly used forms to your pages. If you ever laboriously typed out all the labels and values for a country list, or found yourself constructing an elaborate eCommerce form, you're going to love these starter forms and form objects.

The Cool GoLive Features Series:
Cool Adobe GoLive Features: Part 1 - The Site Diagram Tool
Cool Adobe GoLive Features: Part 2 - Extending With Smart Forms

Managing HTML and CSS to Keep Clients Happy and Avoid 'Disaster' - Part Two
by John Gallant,Holly Bergevin - 24-Jan-06
Reader Level:

Last time, we talked about little things coders can do to avoid friction with clients and co-workers when code is being prepared. This time we will examine the 'stage' on which we all present our content to the world.

That stage is the viewer's screen, and it's a rather changable place, so understanding what can happen to your content in different devices is crucial when handling the 'front end' of a web site. We'll go over some of the basics, including screen resolution, the viewport, how layouts behave, and more.

If you are a little hazy about these issues, join us as we clarify things for you. Let's go!

The Managing HTML and CSS to Keep Clients Happy Series:
Managing HTML and CSS to Keep Clients Happy and Avoid 'Disaster' - Part One
Managing HTML and CSS to Keep Clients Happy and Avoid 'Disaster' - Part Two
Managing HTML and CSS to Keep Clients Happy and Avoid Disaster - Part Three

Adding WYSIWYG to Textareas: Part 1
by Gordon Mackay - 17-Jan-06
Reader Level:

One of the problems web developers encounter when allowing clients or users to insert content dynamically is ensuring that the outputted content still conforms to the standard of code required from a modern web site. The average site user knows little or nothing of HTML syntax, and certainly not enough to ensure that your precious pages still meet HTML syntax validation.

Many solutions have been created in order to solve this problem, BB style syntax is one of those; but the majority of users would probably prefer to be able to format their text as they would in a product like Microsoft Word. The generic word processor environment is something that's familiar to almost everyone who uses a personal computer. So, let's say we could actually allow people to insert data as clean HTML using a simple word processing interface, wouldn't that be cool? :) We can, and as a bonus we can easily implement it into a generic Dreamweaver "Insert Record" page.

Introduction to CSS Table-Related Display Values Free!
by Zoe Gillenwater - 16-Jan-06
Reader Level:

One of the hardest things for web designers new to CSS layout to get their heads around is that divs don't act like table cells, the traditional building blocks of page layouts. Table cells automatically expand to hold their content, match each other in height, and stack horizontally, but divs don't do these things, making CSS layouts that emulate table layouts tricky. However, there's an easy way to get your divs to act like table-cells: tell them to using the display property. This article will introduce the table-related values of the display property of CSS 2.1 that allow you to make any non-table HTML element act like any table element. In the article following this one, you'll then learn how to use these display values to create a pure CSS layout that emulates the behavior of a table layout

Managing HTML and CSS to Keep Clients Happy and Avoid 'Disaster' - Part One Free!
by John Gallant,Holly Bergevin - 11-Jan-06
Reader Level:

Web design is a complex craft, made even more complex by the need to deal with clients, co-workers from other fields, and the ongoing changes in software, hardware, and the business landscape. While a lot of these things can be understood only through experience, there are still plenty of simple problems that could easily be avoided if they were known about in advance.

In this series we intend to discuss some of the 'dumb mistakes' (caused by simple ignorance) that happen when advancing coders start to use their newly won skills in the real world, to earn actual money. These common errors can't all be covered, there's just too many ways to go wrong, but we'll make a serious attempt to address the major issues. So sit back and learn about the things we and others have goofed up, over and over and over...

The Managing HTML and CSS to Keep Clients Happy Series:
Managing HTML and CSS to Keep Clients Happy and Avoid 'Disaster' - Part One
Managing HTML and CSS to Keep Clients Happy and Avoid 'Disaster' - Part Two
Managing HTML and CSS to Keep Clients Happy and Avoid Disaster - Part Three

Alpha Video and HTML: How did they do that? Free!
by Tom Green - 03-Jan-06
Reader Level:

Flash Video containing an Alpha channel can be used to intereact with your web pages. It is surprisingly easy to do.

Introducing CMX Jumpstart Inverness Free!
by Sheri German - 21-Dec-05
Reader Level:

We are pleased to announce Community MX JumpStart Inverness, a design you can use to create your own Web blog. CMX JumpStart Inverness was designed and coded by new CMX partner Gordon Mackay. It is a centered, two-column, fixed-width design that makes use of background images to achieve its faux column appearance. The page is constructed using valid XHTML 1.0 Strict markup and formatted using valid CSS 2.1 styling. Inverness also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design. Read on to find out what the Inverness package includes and how you can make it your own.

The Complete JumpStart Catalog Free!
by Sheri German - 20-Dec-05
Reader Level:

We now have a healthy portfolio of JumpStarts, and sometimes so much choice can be overwhelming. This article outlines the features of all the JumpStarts, offers guidance in choosing the right JumpStart for your project, and provides a complete catalog of our first thirteen JumpStarts.

A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 2
by Zoe Gillenwater - 22-Nov-05
Reader Level:

In this final article in the series documenting the creation of my personal web site, you'll see how I used CSS to style the content of my XHTML page to match my design comp. This included styling a list to look like a navigation menu, formatting links and other text, and using sIFR to replace the text in my headings with beautiful Flash-generated text. You'll also see how I created a print style sheet, plus learn how I tested and debugged my page.

The CSS Web Design Case Study Series:
A CSS Web Design Case Study: Constructing a Personal Site - Planning
A CSS Web Design Case Study: Constructing a Personal Site - Visualizing the Design
CSS Web Design Case Study: Constructing a Personal Site - Design Comp Construction
A CSS Web Design Case Study: Constructing a Personal Site - Slicing the Comp
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 1
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 2

Introducing CMX JumpStart Cairo Free!
by Sheri German - 17-Nov-05
Reader Level:

We are excited to announce CMX JumpStart Cairo, Egypt. It was designed and coded by Adrian Senior, and makes extensive use of lush gradients and glows. It is a centered, two-column, fixed-width design, and, like all CMX Jumpstarts, is constructed using valid XHTML 1.0 markup and CSS 2.1 styling. Cairo also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design. This article will introduce you to what Cairo includes in its bundle, as well as show you an example site created from its source PNG and CSS/XHTML files.

CMX JumpStarts: Cairo
by Adrian Senior - 17-Nov-05
Reader Level:

Welcome to the CMX JumpStart — Cairo. Cairo is a fixed-width two-column layout that has been developed as a learning tool to show how you can use background images and work with gradients and glows to produce designs that are a little different from the run of the mill designs we see so many of on the Internet.

How Inline Elements Work - Part Seven
by John Gallant,Holly Bergevin - 01-Nov-05
Reader Level:

In Part Seven of this series we'll take a look at a basic facet of inline elements, specifically the 'direction' in which the text and other inline content is displayed. You may think this is an easy property to understand, but in fact, it is possible to order text characters in more than one way, and exactly such interesting things do happen in our world.

Join us as we explore the complications of 'writing direction' and ways to control those directions when needed. Your boss won't fire you if you don't know this information (we hope!), but some day such knowledge may give you what you need to perform a difficult job. Besides, it's rather interesting stuff!

The Inline Elements Series:
How Inline Elements Work - Part One
How Inline Elements Work - Part Two
How Inline Elements Work - Part Three
How Inline Elements Work - Part Four
How Inline Elements Work - Part Five
How Inline Elements Work - Part Six
How Inline Elements Work - Part Seven

Introducing CMX Jumpstart Traverse City Free!
by Sheri German - 27-Oct-05
Reader Level:

Traverse City, Michigan is one of those hidden gems that tourists sometimes stumble across by lucky chance. With over 180 miles of Lake Michigan shoreline as well as a host of lakes and bays, beach lovers can enjoy lots of sailing and sunbathing.

Traverse City was designed by Linda Rathgeber-Stewart and coded by Zoe Gillenwater. It is a centered, fixed-width design with both a two-column and three-column page from which to choose. The two-column layout also includes a styled data table. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. Traverse City also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design.

How Inline Elements Work - Part Six
by John Gallant,Holly Bergevin - 17-Oct-05
Reader Level:

It's time for more enlightening details about CSS properties that affect text and other inline elements. In the sixth part of our series, we look at text-indent, which adds a special space to a text block, and white-space, a tool for controlling both source whitespace and browser wrapping behaviors. Yes, it's stuff that all well-rounded web authors need to know!

The Inline Elements Series:
How Inline Elements Work - Part One
How Inline Elements Work - Part Two
How Inline Elements Work - Part Three
How Inline Elements Work - Part Four
How Inline Elements Work - Part Five
How Inline Elements Work - Part Six
How Inline Elements Work - Part Seven

Making it Legal: Validating Your (X)HTML and CSS Free!
by Zoe Gillenwater - 06-Oct-05
Reader Level:

As a web designer, your goal is to create a page that works well and looks good across browsers and platforms. Validating your (X)HTML and CSS is one way to achieve this goal. Validation catches the silly mistakes and typos that everyone makes in their pages, so it's an important first step in creating a great web page — but remember, it's only a step. Validation is not the end goal itself. Learn why validation is important but not the holy grail of web design, then learn how to use and understand the W3C validators.

How Inline Elements Work - Part Five
by John Gallant,Holly Bergevin - 03-Oct-05
Reader Level:

In Part Five of our series we'll cover the often misunderstood text-align property, as well as the letter-spacing and word-spacing properties. We'll look at what each property is supposed to do, the values available, browser support, and some of the things to watch out for if you choose to use one or more of these properties. Come along and learn about some very interesting properties!

The Inline Elements Series:
How Inline Elements Work - Part One
How Inline Elements Work - Part Two
How Inline Elements Work - Part Three
How Inline Elements Work - Part Four
How Inline Elements Work - Part Five
How Inline Elements Work - Part Six
How Inline Elements Work - Part Seven

Teaching Dreamweaver the Web Standards Way Free!
by Sheri German - 23-Sep-05
Reader Level:

I have been teaching Dreamweaver in various training venues since version 2. Each new upgrade adds more features and makes my job more complex. How does a teacher help beginners make sense of an increasingly overwhelming interface that includes seemingly endless choices? My syllabus has changed a lot over the years, and this is what I have learned: pare the syllabus to the absolute essentials. Subtract, do not add. Aim for elegant simplicity. Focus on Web Standards. This article gives teachers a syllabus they can use to help their beginning students learn Dreamweaver within the framework of Web Standards.

How Inline Elements Work - Part Four
by John Gallant,Holly Bergevin - 21-Sep-05
Reader Level:

In this, the fourth tutorial in our series, we continue with inline elements by looking at some CSS properties that directly modify the appearance of the text glyphs themselves. The font-style, font-variant, and text-transform properties are ones that most coders may not be very familiar with, but they can be useful when the need arises. We'll cover what they're supposed to do, and then look at practical applications and any potential problems with browser implementation. Onward!

The Inline Elements Series:
How Inline Elements Work - Part One
How Inline Elements Work - Part Two
How Inline Elements Work - Part Three
How Inline Elements Work - Part Four
How Inline Elements Work - Part Five
How Inline Elements Work - Part Six
How Inline Elements Work - Part Seven

Introducing CMX Jumpstart Machu Picchu Free!
by Sheri German - 12-Sep-05
Reader Level:

Machu Picchu, Peru: a rediscovered ruin, a sacred ceremonial city of the Incas, a place of ethereal beauty, and now also a Community MX JumpStart. CMX JumpStart Machu Picchu, designed and coded by Adrian Senior, was built specifically to take advantage of the new Style Rendering Toolbar in Dreamweaver 8. It includes style sheets for the screen, print and handheld media types.

Read on to learn more about this centered, two-columnm, fixed-width, Web Standards compliant CSS layout.

CMX Jumpstart: Machu Picchu
by Adrian Senior - 12-Sep-05
Reader Level:

Welcome to our latest CMX JumpStart offering; Machu Picchu.

Machu Picchu has been developed to be accessible to screen, print and handheld devices. Handheld devices are still very much a gray area in our content delivery for web pages. PDAs and more modern phones can do a very good job of rendering web pages and with a little tweaking can provide us with access to very usable and good looking web sites.

Similarly a print style sheet, when correctly set, can give our users access to printed content that can be digested at their leisure. Web pages that don't print correctly can be very annoying and detract from the site's value. It is these two media types that we will be focusing on along with screen media in Machu Picchu. The aim is to provide content of a high quality to screen, handheld and print medias.

How Inline Elements Work - Part Three
by John Gallant,Holly Bergevin - 02-Sep-05
Reader Level:

A large variety of CSS rules are available to modify text elements, some easy and straightforward, and some less so. Familiarity with the ways text styling is actually handled in real browsers can save a lot of time when designing pages. In this tutorial installment we'll cover the color, font-weight, and font-family properties from the easy category, and text-decoration from the not-so-easy category. Join us!

The Inline Elements Series:
How Inline Elements Work - Part One
How Inline Elements Work - Part Two
How Inline Elements Work - Part Three
How Inline Elements Work - Part Four
How Inline Elements Work - Part Five
How Inline Elements Work - Part Six
How Inline Elements Work - Part Seven

Accessibility and the Label Tag Free!
by Adrian Senior - 23-Aug-05
Reader Level:

In this tutorial we will look at how we can build and lay out accessible forms. In particular we will focus on the label element and we will see how the label can be used to not only increase the focus area of any form element but at the same time be utilised to give our form layouts a little more structure than a simple stacking of form elements in a single column.

How Inline Elements Work - Part Two
by John Gallant,Holly Bergevin - 22-Aug-05
Reader Level:

In part one we introduced the base concepts behind inline elements, and now we start getting into some details behind text display, which is the primary inline content on the web.

We'll circle around the EM Square a bit, find out about fine tuning of font sizes, and lift the lid on line-height just a little. As always in this series, we attempt to make the arcane world of text and inline elements less confusing to the new and not-so-new coder alike.

The Inline Elements Series:
How Inline Elements Work - Part One
How Inline Elements Work - Part Two
How Inline Elements Work - Part Three
How Inline Elements Work - Part Four
How Inline Elements Work - Part Five
How Inline Elements Work - Part Six
How Inline Elements Work - Part Seven

Creating the Print Style Sheet for Vienna: Part Two
by Sheri German - 17-Aug-05
Reader Level:

In Part One of this series we explored reasons why we might want to include a print style sheet in our web pages. We especially focused on the problems many browsers have with printing out CSS layouts unless we make changes to floats and any positioning other than static. We looked at the various ways to attach a print style sheet, and we reconstructed Vienna's print style sheet. Now we'll look at some of the paged media properties in the CSS2 specifications that, if better supported, could provide almost as much sophisticated control as there is in print production. Next we'll look at creating page breaks and solving margin problems. And finally, we'll look at generated content in general, and especially focus on the attr() function that enables us to automatically print full URLs after link text by using the content property in conjunction with the :after pseudo class.

How Inline Elements Work - Part One
by John Gallant,Holly Bergevin - 05-Aug-05
Reader Level:

Have you ever tried to use CSS to modify text? Nearly everyone has, but that doesn't mean that everyone really knows what's going on or how to properly control text so it looks the way they prefer. This is understandable considering the complexities of text display rules, but it doesn't have to stay that way.

Join us as we begin a series on text, inline elements in general, and all things relating to them, all delivered in easy bite sized pieces that anyone can understand.

The Inline Elements Series:
How Inline Elements Work - Part One
How Inline Elements Work - Part Two
How Inline Elements Work - Part Three
How Inline Elements Work - Part Four
How Inline Elements Work - Part Five
How Inline Elements Work - Part Six
How Inline Elements Work - Part Seven

Rollovers: Fireworks vs. Dreamweaver
by Linda Rathgeber-Stewart - 22-Jul-05
Reader Level:

Q."Should I do image rollovers in Fireworks or Dreamweaver? I've heard it's better to do them in Dreamweaver."

I've read many posts in the Dreamweaver forum warning people away from using Fireworks image rollovers, "because Fireworks produces bloated code" compared with Dreamweaver's. No doubt I'll stir up a hornets' nest with this tutorial, but let's do image rollovers in both Fireworks and Dreamweaver so you can see the difference and decide for yourself.

Reconstructing Vienna: The Markup
by Sheri German - 07-Jul-05
Reader Level:

Upon releasing a JumpStart, we occasionally hear requests for a step-by-step reconstruction of how it was done. Sure, it's nice to have a great template that allows you to quickly whip up an accessible and valid site for clients. It's also nice to have all those great bundled articles that — face it — most of us never have time to read. The extensively commented CSS is also wonderful, but some of that detail can seem daunting. Wouldn't it be nice to have someone hold your hand as you get initiated into the magic of CSS layouts so you can really understand how it's done?

If this sounds like something you'd like to participate in, get ready for a two-part series that lets you recreate Vienna from start to finish. Today's article will teach you to plan your structure and write your markup. Part two, which will appear tomorrow, will help you penetrate the mysteries of its CSS documents, both print and screen.

Note: You will need to download CMX Jumpstart Vienna in order to follow along with this tutorial.

If you're ready, let's first ascend to "Wrapper Heaven."

CMX JumpStart: Vienna
by Sheri German - 06-Jul-05
Reader Level:

Last summer we took a trip to Germany and Austria with our son's orchestra director. My favorite city was Vienna, Austria. So it is only natural that I should choose Vienna for my city as I "change hats" from JumpStarts marketer to JumpStarts creator. I am particularly pleased and excited to offer our latest CMX JumpStart: Vienna.

In addition to the use of valid XHTML 1.0 and CSS 2.1, and in addition to validating for 508 and WAI, we have a number of special features in Vienna. This three column layout has two outer columns with fixed widths, a fluid center column for content, and fluid header and footer. There are also unordered lists for navigation: one for the main navigation, one for the sub navigation, and one for the footer navigation. We have also added a search field into an area that is at the top of the page outside the main centered layout. So far, reasonably cool, right?

But hold on. We have something far more exciting to reveal with this JumpStart. We will introduce a new and revolutionary technique called Jello Mold that has an implied minimum and maximum width that works in Internet Explorer without the use of Javascript! Furthermore, this technique allows for fluid margins on the fluid centered layout that depend on the size of the user's window.

The download folder for this article includes a bundle of 11 articles (including two about Jello Mold technique), a starter page, an images folder, four style sheets (including design-time and print), a source png, the Vienna extension, an installation and usage guide, and this article as a PDF.

Introducing Jumpstart Vegas Free!
by Sheri German - 02-Jun-05
Reader Level:

We proudly introduce CMX JumpStart Vegas, designed by Fireworks expert Linda Rathgeber, and coded by CSS guru Stephanie Sullivan. Vegas includes a Flash slideshow, FlashObjects JavaScript for accessibility, sIFR for using custom fonts on your pages, a form with an often requested complex layout, and a golden design that does justice to the town that never sleeps. It's all there, ready for you to adapt it for your own sites.

Introducing CMX Jumpstart New Orleans Free!
by Sheri German - 21-Apr-05
Reader Level:

The suspense has been building around the release of our next JumpStart, and now it's here: Jazzy JumpStart New Orleans, a hybrid CSS/Flash layout that should appeal to anyone needing to build a music site. Its inspiration is derived from two sources: the sites of Sony artists such as Vladimir Horowitz, Joshua Bell, Louis Armstrong, and The Isley Brothers where Flash and frames combine, and content scrolls in a fixed-area; and the recent acquisition of our own "CMX artist" the jazzy, bluesy Umoja String Quartet, whose site will be hosted on Community MX in the upcoming weeks.

Read on to find out more about this feature-rich JumpStart that includes an MP3 Player that uses wmode, FlashObject for accessibility, scrolling content, functional forms, and a fully editable source PNG.

Conditional Comments for Internet Explorer (Win)
by John Gallant,Holly Bergevin - 18-Apr-05
Reader Level:

Wouldn't it be nice if you could just write a comment, wave a magic wand, and order that only certain selected browsers are to look inside the comment, while all others are forbidden to do so? Well, in fact there is one browser that allows us to do exacly that, and it happens to be Internet Explorer for Windows. These magical HTML comments are called Conditional Comments. Come learn how, when, and why you might want to use these special IE/Win-only features.

CSS: Getting Into Good Coding Habits Free!
by Adrian Senior - 07-Apr-05
Reader Level:

In this article we will look at what I would consider to be good coding practices when laying out a CSS design and building your style sheet.

We will look at how we can make our style sheets more manageable through the use of comments and see how we can use our style sheets to their greatest effect.

Introducing the CMX CSS Snippet Collection - Part One
by Sheri German - 01-Apr-05
Reader Level:

CSS Positioning layouts are hot, and many people are trying to make the transition from the mostly reliable, but non-semantic, table-based layouts we've all used for years. CSS 2.1 provides great features for laying out pages, and the specs for CSS 3 indicate that some day the future of design on the web will be ever brighter indeed.

We here at CMX try to make the learning curve as painless as possible with our many CSS tutorials and articles. Now we'd like to offer you a diagnostic tool that spares you some typing and memorizing. We are proud to introduce the CMX CSS Snippets Collection. Snippets, as you may well be aware, are bits of reusable code that paste as blocks or around selections with the click of an insert button.

This article includes an extension for installing part one of the collection into the Dreamweaver Snippets panel, and a tutorial that explains the problems and solutions that the hacks correct.

Part One of the CMX CSS Collection includes the following:

Caio Hack
Anti-Caio Hack
IE Mac only
IE Mac only 2
Hide from Mac
Holly Hack
Box Model Hack
Tan Hack
Tan Hack and Anti-Mac combined
6 IE Conditionals for all IE, 5.0, 5, 5.5, gte 5.5, and 6

Read on and bust those bugs!

Introducing the CMX CSS Snippet Collection - Part Two
by Sheri German - 01-Apr-05
Reader Level:

CSS Positioning layouts are hot, and many people are trying to make the transition from the mostly reliable, but non-semantic, table-based layouts we've all used for years. CSS 2.1 provides great features for laying out pages, and the specs for CSS 3 indicate that some day the future of design on the web will be ever brighter indeed.

We here at CMX try to make the learning curve as painless as possible with our many CSS tutorials and articles. Now we'd like to offer you a diagnostic tool that spares you some typing and memorizing. We are proud to introduce the CMX CSS Snippets Collection. Snippets, as you may well be aware, are bits of reusable code that paste as blocks or around selections with the click of an insert button.

This article includes an extension for installing part two of the collection into the Dreamweaver Snippets panel, and a list that explains the problem and then the solution that each snippet corrects.

Our Snippets in Part Two include the following:

Win IE fully clickable CSS buttons
Win IE text inheritance in tables
Win IE double float margin
Win IE three pixel gap bug
Win IE three pixel gap bug part 2
Win IE missing image bug
IE word wrap
IE expanding boxes and too wide images
Set text size on the body
Set font-size and family on multiple selectors for NS4
Zero margins on multiple elements
Clearing element for floats
Easy clearfix for floats
Floating an image to the left
Floating an image to the right
Clearing a float after an image
Centered layouts that work

Read on and bust those bugs!

CMX Table Sorter Extension for Dreamweaver
by Rob Williams - 14-Mar-05
Reader Level:

The ability for users to re-organize tabular data to better suit their individual requirements has become an almost expected attribute of digital data. Many web sites currently provide this ability by relying on server-side coding and database queries to constantly re-sort the data before it's transferred to the client. This causes both increased server load and inconvenient delays for users as they wait for the data to be reloaded.

The CMX Table Sorter behavior allows you to provide those same sorting abilities for your HTML table without having to waste time and resources on server-side sorting methods.

This extension has been updated 6/27/06. Please download the zipfile and replace the old extension with the newer one.

Semantic (X)HTML Markup: Other Elements
by Zoe Gillenwater - 03-Mar-05
Reader Level:

Throughout the Semantic (X)HTML Markup Series, you've learned about elements that give greater structure and accessibility to your pages. This last article in the series describes the proper uses for all remaining elements not previously covered: address, del, ins, hr, pre, sub, sup, and title. The article also includes a description of the mixed nature of the img element, a recap of the form elements, and some notes about the non-semantic yet non-presentational div and span elements.

The Semantic (X)HTML Markup Series:
Semantic (X)HTML Markup: An Introduction
Semantic (X)HTML Markup: Headings and Paragraphs
Semantic (X)HTML Markup: Creating Emphasis
Semantic (X)HTML Markup: Blockquote, Q, and Cite
Semantic (X)HTML Markup: Structuring Lists
Semantic (X)HTML Markup: Styling Lists
Semantic (X)HTML Markup: Using Tables Appropriately
Semantic (X)HTML Markup: Styling Tables
Semantic (X)HTML Markup: Phrase Elements
Semantic (X)HTML Markup: Other Elements

Fireworks Hotspot Rollovers
by Linda Rathgeber-Stewart - 17-Feb-05
Reader Level:

Everyone knows that web images are rectangular. If you want a navigation system made of image rollovers, you have to make them out of stacks of rectangles, or horizontal arrays of rectangles. Rectangles to the left. Rectangles to the right. Rectangles over and under. Gets boring, eh?

JumpStart Venice: An Introduction Free!
by Sheri German - 14-Feb-05
Reader Level:

Valentine's Day is one of my favorite holidays of the year. It's fanciful and lighthearted, and I don't feel the pressure of the big holidays like Christmas or Easter. I can daydream about a romantic rendezvous, such as a gondola journey through the canals of Venice on a moonlit night. Though I can't make that a reality, I can pretend while exploring the latest CMX JumpStart.

CMX is proud to announce its sixth JumpStart, Venice, which includes both two and three column, fixed-width, rounded corner layouts in its home and form pages. Like all CMX JumpStarts, it is based on Web standards with valid CSS2 and XHTML 1.0 Transitional markup, and it passes WAI and 508 accessibility checkpoints. We've created a video to give you an overview of the design and functionality of Venice.

Semantic (X)HTML Markup: Phrase Elements
by Zoe Gillenwater - 21-Jan-05
Reader Level:

Previous articles in the Semantic (X)HTML Markup series have focused on three of the ten phrase elements: em, strong, and cite. Here, we cover the remaining seven: abbr, acronym, code, var, samp, kbd, and dfn. These elements add structural information to text fragments in your documents and can act as handy hooks for styling or scripting. We pay particular attention to the acronym element, which can enhance your page's usability, accessibility, and search engine optimization.

The Semantic (X)HTML Markup Series:
Semantic (X)HTML Markup: An Introduction
Semantic (X)HTML Markup: Headings and Paragraphs
Semantic (X)HTML Markup: Creating Emphasis
Semantic (X)HTML Markup: Blockquote, Q, and Cite
Semantic (X)HTML Markup: Structuring Lists
Semantic (X)HTML Markup: Styling Lists
Semantic (X)HTML Markup: Using Tables Appropriately
Semantic (X)HTML Markup: Styling Tables
Semantic (X)HTML Markup: Phrase Elements
Semantic (X)HTML Markup: Other Elements

CMX JumpStart: Liverpool
by Adrian Senior - 20-Jan-05
Reader Level:

The Liverpool JumpStart is a little different than what has gone before. It includes a dynamic ColdFusion login application built with Dreamweaver's User Authentication server behaviours. This allows you to quickly and easily edit the login if you need to do so. The login also supports dual access levels and provides default pages for each level to view, along with a logout page to kill the sessions when your users have completed whatever it was they logged in to do.

Also included are login application pages for .NET, PHP and ASP server models.

This JumpsStart contains 12 tutorials, including video lessons on creating a relational database in Access, using Dreamweaver's User Authentication server behavoiurs and setting a datasource via the ColdFusion administrator.

If you prefer not to use server side code, within the download files you will find a static version of the Liverpool JumpStart.

If you'd like a more detailed description of Liverpool, including screenshots, check out the free article Announcing a New CMX JumpStart: Liverpool.

Announcing CMX JumpStart: Liverpool Free!
by Sheri German - 20-Jan-05
Reader Level:

It was the early sixties, and all the world was in a frenzy over a new group from Liverpool, England called The Beatles. They revolutionized rock 'n' roll music, and the world has never been the same. Maybe the Web Standards movement doesn't stir quite that much excitement, but it is changing the Web world all the same. And because we "love you, yeah, yeah, yeah" we're here to help you join the revolution.

Community MX is pleased to announce the release of its fifth CMX JumpStart: Liverpool. This time we're giving you more than a CSS layout, however. We're also giving you a dynamic ColdFusion login application built with Dreamweaver's User Authentication server behaviors that will allow you to quickly and easily edit the login.

This article will tell you all about what this fantastic package includes--bundled tutorials, an authentication system, a two-column, fixed width layout (with a little bit of a twist), original PNG files, and more.

Debunking Alt Text Myths
by Zoe Gillenwater - 06-Jan-05
Reader Level:

With accessibility getting more press these days and the requirement to include the alt attribute on all images now part of the HTML and XHTML Strict specifications, more web developers than ever are finally providing alt text on their images. But the type of alt text you provide plays a tremendous role in how accessible your page truly is. When used incorrectly, alt text can actually hinder accessibility! This article will debunk four myths regarding the use of alt text so that developers can provide alt text that is more useful to non-visual users. Learn how to provide alt text that maximizes your page's accessibility in a real way rather than just satisfies automated accessibility checkers.

Dreamweaver Piece by Piece Part 5: Creating and Processing Basic Forms Part 2
by Sheri German - 17-Dec-04
Reader Level:

In the first part of our basic forms series, we learned how to configure Dreamweaver form preferences, set up the form with the proper actions and method, and use many of the different kinds of form objects such as text field, textarea, radio groups, and checkboxes.

In this second article in the series, we'll look at the menu/list form object, add our submit and reset buttons, use the validate form behavior, learn to set file permissions, and configure our PHP form processor. Also included in this article are both a ColdFusion and an ASP form processor for those who do not have PHP available on their servers.

CMX JumpStarts: North Pole Free!
by Adrian Senior - 16-Dec-04
Reader Level:

The North Pole JumpStart is a two column, fixed width design that uses clever deployment of background images in both the navigational elements and the content areas of the design. The graphics used in North Pole are both simple and complex. They range from the beautifully created snowman made in Freehand and converted to Fireworks to some Christmas black line art that was coloured in to make simple yet effective images that enhanced the Christmas theme with only a few minutes work. Come and have a look!

Common Coding Problems: Part Seven
by John Gallant,Holly Bergevin - 15-Dec-04
Reader Level:

In this, the seventh entry in our 'gotchas' series of Common (and not so common) Coding Problems, we will look at several things that could leave you scratching your head if you encounter them. First, we examine how to make space around floats by using the margin property on the correct element. Next, we will check out a bug that Gecko browsers have with lists next to floats that you'll want to know about. Finally, we'll look at several bugs in Internet Explorer that have to do with absolute positioning: Escaping AP elements, text selection bugs, and width bugs with absloutely positioned elements. And we're off!

Dreamweaver Piece by Piece: Part 4 - Creating and Processing Basic Forms
by Sheri German - 08-Dec-04
Reader Level:

The ability to interact with users is one of the great lures of the Internet for businesses and individuals. Most of you have filled out a form on the Internet, then hit the submit button to send your data off into cyberspace. How is it done? Most instructions give the old "setting up the script is beyond the scope of this tutorial" line, which has long been a frustration to many Web designers. I hope that this article helps you set up a feedback form that actually works. In part one of this series, we'll configure Dreamweaver form preferences, set up our form, and cover most of the different types of form objects developers will use when creating interfaces for interacting with users.

Do You Want To Do That With CSS? - Multiple Column Lists Free!
by John Gallant,Holly Bergevin - 29-Nov-04
Reader Level:

It is generally well known that list items in an <ol> or <ul> will display vertically in their default presentation. For short lists, or navigation menus, this generally isn't considered a problem. But in other cases, having an extensive list display vertically isn't quite as desirable. It might be a better use of screen space to have that list appear as a series of columns, side by side. In the past, this was done by placing separate lists in individual table cells, or by floating the lists. Semantically it is more desirable not to break up a list this way, but is there another choice? Yes, there is! Join us as we explain a new CSS method that uses a single list while displaying that list as multiple columns. Let's go!

Semantic (X)HTML Markup: Styling Tables
by Zoe Gillenwater - 23-Nov-04
Reader Level:

In the last Semantic (X)HTML article, you learned about a number of underused table elements that can improve your table's structure and accessibility. Guess what – there's more! The second part of the semantic tables article covers additional table elements that act primarily as hooks for visual formatting. This article will introduce the thead, tfoot, tbody, col, and colgroup elements. You'll learn which CSS properties you can use to format your tables and how to apply them to the appropriate table elements.

The Semantic (X)HTML Markup Series:
Semantic (X)HTML Markup: An Introduction
Semantic (X)HTML Markup: Headings and Paragraphs
Semantic (X)HTML Markup: Creating Emphasis
Semantic (X)HTML Markup: Blockquote, Q, and Cite
Semantic (X)HTML Markup: Structuring Lists
Semantic (X)HTML Markup: Styling Lists
Semantic (X)HTML Markup: Using Tables Appropriately
Semantic (X)HTML Markup: Styling Tables
Semantic (X)HTML Markup: Phrase Elements
Semantic (X)HTML Markup: Other Elements

Using Image Metadata in PHP - Part 2
by Rob Williams - 22-Nov-04
Reader Level:

In Part 1 we took at look how to read metadata from images in PHP using the JPEG-Meta class. This time around we take a look at how to use the same class to write and update metadata back to our images, giving us a complete JPEG metadata solution for our PHP applications.

(Not So) Common Coding Problems with HTML and CSS — Part Six
by John Gallant,Holly Bergevin - 17-Nov-04
Reader Level:

You may never run into the CSS bugs we're discussing here, but if you do, solving them can be anything but simple. So, to make sure you don't waste valuable time trying to determine just what has gone wrong, we detail some good habits you can develop in the way you write your selectors, clue you in to a specificity bug in IE/Win and Opera that is easy to overcome, as well as show you how to write selectors that target IE5/Mac only. Time for more (Not So) Common Coding Problems!

Semantic (X)HTML Markup: Using Tables Appropriately Free!
by Zoe Gillenwater - 16-Nov-04
Reader Level:

In this article, you'll learn how to use perhaps the most misused semantic element: the table element. Like all the other (X)HTML elements you've learned about in the Semantic (X)HTML Markup series, there's a right and wrong way to use tables. This article explains when it is appropriate to use tables (yes, there are such times!) and how to structure tables when you do need to use them. Beyond just rows and cells, (X)HTML provides you with additional elements and attributes that can add structure and accessibility to your tables and make them easier to style down the road.

The Semantic (X)HTML Markup Series:
Semantic (X)HTML Markup: An Introduction
Semantic (X)HTML Markup: Headings and Paragraphs
Semantic (X)HTML Markup: Creating Emphasis
Semantic (X)HTML Markup: Blockquote, Q, and Cite
Semantic (X)HTML Markup: Structuring Lists
Semantic (X)HTML Markup: Styling Lists
Semantic (X)HTML Markup: Using Tables Appropriately
Semantic (X)HTML Markup: Styling Tables
Semantic (X)HTML Markup: Phrase Elements
Semantic (X)HTML Markup: Other Elements

CMX JumpStarts: Seattle
by Adrian Senior,Danilo Celic - 11-Nov-04
Reader Level:

Seattle is our second design in the CMX JumpStarts series. It is free to members of Community MX and available for purchase by non-members at the competitive price of $29.99. If you'd like a more detailed description of Seattle, including screenshots, check out "Announcing a New CMX JumpStart: Seattle"

Seattle provides a fixed-width two column layout with a right-hand navigation setup. Included are a home page, a pre-prepared form page and an inner page design. It has been designed to validate to XHTML 1.0 Transitional and CSS 2, and it also meets the requirements of 508 and WAI for accessibility.

All the source files that were used to create this design are available in the download. That is, the CSS files, the XHTML documents and even the PNG files. The CSS files and the XHTML pages are extensively commented to make editing Seattle a breeze. We are sure you will have a Whale of a good time adapting Seattle to meet your own requirements!

Seattle teaches you how to use nested lists to create a fully accessible navigation system. The download contains tutorials that will provide an in-depth analysis of all the techniques that have been used to create the design.

The following tutorials are bundled with the Seattle JumpStart:

Float: The Theory - by John Gallant & Holly Bergevin
CSS An Introduction - Part Six: The Basics of Positioning - by Adrian Senior
Do You Want To Do That With CSS? — Centering a Wrapper - by John Gallant & Holly Bergevin
Styling Forms: Fieldset and Legend - by Stephanie Sullivan
Semantic (X)HTML Markup: Styling Lists - by Zoe Gillenwater
CSS An Introduction - Part Three: The Descendant Selector - by Adrian Senior
How to Attack an Internet Explorer (Win) Display Bug - by John Gallant & Holly Bergevin
CMX Design-time Extension - by Paul Boon
Foto 1.0 for Fireworks MX Extension - by Steve Grosvenor

Seattle has been tested in various browsers. Click on the following link to view screenshots.

Announcing a New CMX JumpStart: Seattle Free!
by Sheri German - 11-Nov-04
Reader Level:

Put down that coffee, and get your Grunge thing going on. That's right, we're off to the "Emerald City", once called Duwamps, but now known as Seattle!

Community MX is pleased to announce the release of the latest CMX JumpStart: Seattle. Based on Web standards, this versatile layout employs valid CSS2 and XHTML 1.0 Transitional markup and passes WAI and 508 accessibility checkpoints. This makes it easy for you to quickly create new sites that work on a variety of browsers and platforms. You are only a few simple edits away from your own look and feel.

This article covers the following:

A list of what is included with the CMX Seattle JumpStart package and bundled tutorials and extensions
An explanation of the benefits of Web standards
A demonstration of the ease with which the layout is customized
The presentation of pages that were created from the Seattle JumpStart
Information about how this exciting design can belong to you for use in as many projects as you please.
Screenshots of the page in multiple browsers

Who's ready for a spin on the Space Needle?

Clearing Floats, the Easy Way
by John Gallant,Holly Bergevin - 03-Nov-04
Reader Level:

While more people are beginning to understand and use floats in their layouts, "float clearing" is a mysterious and misunderstood subject. The need for extra elements just to ensure floats are contained has caused many complaints about "unnecessary markup." Well no more! This tutorial will show you a cutting edge method of float clearing that avoids extra source elements and makes clearing almost easy.

Testing Safari Compatibility on a PC
by Rob Williams - 29-Oct-04
Reader Level:

Safari is quickly becoming the dominant web browser for Mac users. Unfortunately, because it's a Mac only product, many PC developers fail to adjust or even make any considerations for how their sites will appear for all those Mac people on the web. In this article we'll take a brief look at the history and common ties between various browsers, how they affected Safari's development, and how the PC developers can better optimize their sites for Safari without having to rush out and buy a Mac themselves.

CMX JumpStarts: Paris
by Adrian Senior,Danilo Celic - 28-Oct-04
Reader Level:

Community MX is pleased to announce the release of an exciting new line of products called CMX JumpStarts. Based on Web standards, these versatile layouts employ valid CSS2 and XHTML 1.0 Transitional markup and pass WAI and 508 accessibility checkpoints. This makes it easy for you to quickly create new sites that work on a variety of browsers and platforms. You are only a few simple edits away from your own look and feel.

This article covers the following:

A list of what is included in the CMX JumpStarts: Paris download
A list of the bundled tutorials that teach the theory behind the layout
Directions for creating the effects in the Fireworks PNGs
Demos of live pages
A page of screen shots that show the Paris layout in a variety of browsers on multiple platforms

Announcing CMX JumpStarts Free!
by Sheri German - 28-Oct-04
Reader Level:

Community MX is pleased to announce the release of an exciting new line of products called CMX JumpStarts. Based on Web standards, these versatile layouts employ valid CSS2 and XHTML 1.0 Transitional markup and pass WAI and 508 accessibility checkpoints. This makes it easy for you to quickly create new sites that work on a variety of browsers and platforms. You are only a few simple edits away from your own look and feel.

Inspired by famous world cities, each JumpStart will have an individual ambience and offer different table-less layouts and features. We travel first to Paris, a city of romance and style, with a design that features the Iris, the national flower of France. This two-column, fixed-width layout, complete with banner and footer, will serve as an elegant underpinning for almost any design.

This article covers the following:

A list of what is included with the CMX Paris JumpStart package and bundled tutorials
An explanation of the benefits of Web standards
A demonstration of the ease with which the layout is customized
The presentation of a page that was created from the Paris JumpStart
Information about how this exciting design can belong to you for use in as many projects as you please.
Screen shots of the page in multiple browsers

Semantic (X)HTML Markup: Styling Lists
by Zoe Gillenwater - 27-Oct-04
Reader Level:

In the last Semantic (X)HTML Markup article, we learned how to take advantage of unordered, ordered, and definition lists to add greater semantics and accessibility to our pages. This article picks up where the last left off, covering how to take the well-structured lists you now know how to create and style them to fit the look and feel of your site. You'll learn how to:

Adjust list spacing both before and after lists and between list items
Create custom list markers
Make a single list display in multiple columns
Style lists to look like navigation elements
Create an FAQ or link page out of a definition list

The Semantic (X)HTML Markup Series:
Semantic (X)HTML Markup: An Introduction
Semantic (X)HTML Markup: Headings and Paragraphs
Semantic (X)HTML Markup: Creating Emphasis
Semantic (X)HTML Markup: Blockquote, Q, and Cite
Semantic (X)HTML Markup: Structuring Lists
Semantic (X)HTML Markup: Styling Lists
Semantic (X)HTML Markup: Using Tables Appropriately
Semantic (X)HTML Markup: Styling Tables
Semantic (X)HTML Markup: Phrase Elements
Semantic (X)HTML Markup: Other Elements

Living in a Dream House: Or How to Bring Web Standards to Your Web Sites Free!
by Sheri German - 26-Oct-04
Reader Level:

We hear the phrase "Web Standards" frequently these days, but what does it mean, and why should we care? There are many advantages to using XHTML, CSS, and 508 accessibility, and we'll look at some of them in this article. We'll look at how structuring and designing web pages has evolved to its current "best practice" of separating content and presentation. Finally, after looking at a few of the problems involved in using CSS for layout, we'll wander through the CSS Zen Garden to look at a few inspiring examples of what can nonetheless be achieved when designers code for standards compliant browsers.

Styling Forms: Fieldset and Legend
by Stephanie Sullivan - 22-Oct-04
Reader Level:

In my last form tutorial, we looked at creative ways to use CSS to style label, input, select and textarea field elements. This time, we're going to move on to fieldset and legend. These elements will boost the accessibility of your form in most cases as well as really add a lot of style to your web site when handled correctly. Your forms don't have to be unattractive. In this tutorial, you'll learn about the styling options of these two form elements as well as some of the more stubborn gotchas and how to work around them. Source files to begin the tutorial, the gradient png and the final example, with commented CSS, are included.

HTML Newsletters: Problems and Solutions
by Tom Muck - 15-Oct-04
Reader Level:

Sending a highly-stylized email newsletter is one way to attract business to your site or to inform readers of events. Community MX has a popular weekly newsletter that includes recent relevant news items along with the latest content listing for the site. Still, an email newsletter can be a real pain to make 100% compatible across different email clients. This article shows hints that will aid in creating compatible email messages.

Validating Forms to xhtml strict
by Adrian Senior - 15-Oct-04
Reader Level:

In this tutorial we will investigate the requirements that need to be met when validating our forms to the xhtml 1.0 strict standard. We'll look at the elements we have available to us and how we can style them with CSS.

Semantic (X)HTML Markup: Structuring Lists
by Zoe Gillenwater - 13-Oct-04
Reader Level:

(X)HTML lists – unordered (ul), ordered (ol), and defintion (dl) – can add greater structure and accessibility to your pages. This article will define each of these lists, show you how to create them in Dreamweaver or by hand, and describe their various appropriate uses – some of which you may not have considered before. You'll also learn why lists are so important for your page's accessibility, and how they can help you work more efficiently.

The Semantic (X)HTML Markup Series:
Semantic (X)HTML Markup: An Introduction
Semantic (X)HTML Markup: Headings and Paragraphs
Semantic (X)HTML Markup: Creating Emphasis
Semantic (X)HTML Markup: Blockquote, Q, and Cite
Semantic (X)HTML Markup: Structuring Lists
Semantic (X)HTML Markup: Styling Lists
Semantic (X)HTML Markup: Using Tables Appropriately
Semantic (X)HTML Markup: Styling Tables
Semantic (X)HTML Markup: Phrase Elements
Semantic (X)HTML Markup: Other Elements

Semantic (X)HTML Markup: Blockquote, Q, and Cite
by Zoe Gillenwater - 29-Sep-04
Reader Level:

(X)HTML contains three semantic elements you can use to mark up text on your web page that comes from or names an external source: blockquote, q, and cite. Although blockquote is widely (and, very often, wrongly) used across the web, q and cite are relatively unknown and underused.

The fourth article in the Semantic (X)HTML series introduces these elements, teaches you when and how it's appropriate to use each, and discusses browser shortcomings in the support of these tags so you can be sure you're using them in a way that's cross-browser compatible. You'll also learn how to use CSS in conjunction with these elements to produce unique visual styling.

The Semantic (X)HTML Markup Series:
Semantic (X)HTML Markup: An Introduction
Semantic (X)HTML Markup: Headings and Paragraphs
Semantic (X)HTML Markup: Creating Emphasis
Semantic (X)HTML Markup: Blockquote, Q, and Cite
Semantic (X)HTML Markup: Structuring Lists
Semantic (X)HTML Markup: Styling Lists
Semantic (X)HTML Markup: Using Tables Appropriately
Semantic (X)HTML Markup: Styling Tables
Semantic (X)HTML Markup: Phrase Elements
Semantic (X)HTML Markup: Other Elements

WebQuests for Teachers - Part 2 - Reconstructing Free!
by Sheri German - 27-Sep-04
Reader Level:

In the first part of this series, we introduced the WebQuest and a bit of its history. We learned that this lesson in a Web page allows students to make safe use of Internet resources. We also discussed the six sections that make up a traditional WebQuest, and how the WebQuest should be more than mere fact-finding. Finally, we looked at the completed version of the "Time Machine MTV" WebQuest that we're going to reconstruct from scratch. The moment to do that is now upon us, so let's get started.

The WebQuest Series:

Part 1: WebQuests for Teachers
Part 2: WebQuests for Teachers - Reconstructing
Part 3: WebQuests for Teachers - Creating an Original WebQuest

Do You Want To Do That With CSS? — Centering a Wrapper Free!
by John Gallant,Holly Bergevin - 24-Sep-04
Reader Level:

This article will deal with one of the most basic problems encountered when developing a tableless design, namely getting a fixed width "page wrapper" element to center at all window resolutions and in all modern browsers. We'll review what a wrapper is, explain how to center it, and then discuss how to get IE5.x/Win browsers to cooperate. Finally, we'll touch on a little Gecko-based problem with the method, and ways to overcome that, as well. Join us.

Semantic (X)HTML Markup: Creating Emphasis
by Zoe Gillenwater - 17-Sep-04
Reader Level:

Adding emphasis is not just about making certain words and phrases stand out visually – it should be a semantic practice as well. Emphasized words tell your users which words are more important and enhance the meaning of your text.

The third article in the Semantic (X)HTML series explains how to use the em and strong elements to create emphasis in your text. Learn how to get away from using b and i to emphasize text – and learn when it may still be appropriate to use these presentational tags.

The Semantic (X)HTML Markup Series:
Semantic (X)HTML Markup: An Introduction
Semantic (X)HTML Markup: Headings and Paragraphs
Semantic (X)HTML Markup: Creating Emphasis
Semantic (X)HTML Markup: Blockquote, Q, and Cite
Semantic (X)HTML Markup: Structuring Lists
Semantic (X)HTML Markup: Styling Lists
Semantic (X)HTML Markup: Using Tables Appropriately
Semantic (X)HTML Markup: Styling Tables
Semantic (X)HTML Markup: Phrase Elements
Semantic (X)HTML Markup: Other Elements

CMX Set Tab Index
by Paul Boon - 13-Sep-04
Reader Level:

CMX Set Tab Index extension allows the user to easily set and manipulate the TabIndex value for form elements contained within the current active document.

WebQuests for Teachers - Part 1 Free!
by Sheri German - 07-Sep-04
Reader Level:

The World Wide Web has been an important part of our lives for a decade or more. Many things about the Internet have changed dramatically during this time, but one thing hasn't. Parents and teachers want children to participate in all the Web has to offer, but they don't want to expose them to danger in the process. Back in 1995, Bernie Dodge and Tom March of San Diego State University thought of a way to accomplish the seemingly contradictory goals of safety and access. They created the WebQuest.

The WebQuest Series:

Part 1: WebQuests for Teachers
Part 2: WebQuests for Teachers - Reconstructing
Part 3: WebQuests for Teachers - Creating an Original WebQuest

Semantic (X)HTML Markup: Headings and Paragraphs Free!
by Zoe Gillenwater - 02-Sep-04
Reader Level:

Using headings on your (X)HTML pages is a great way to easily improve their accessibility and search engine rankings. However, the way headings appear in your browser often leaves much to be desired: large gaps above and below each heading, and huge font sizes. To avoid these problems, it may seem easier just to leave the heading tags out, instead using font and bold tags to simulate the look of headings. Many web developers do just this, thereby losing out on the great benefits of semantic markup.

Luckily, its easy to change the way your headings display using CSS, so you can use semantic markup and still achieve the look you want. The second article in the Semantic (X)HTML Markup series describes how to use headings and paragraphs appropriately to create a hierarchy of page content and how to style them visually.

The Semantic (X)HTML Markup Series:
Semantic (X)HTML Markup: An Introduction
Semantic (X)HTML Markup: Headings and Paragraphs
Semantic (X)HTML Markup: Creating Emphasis
Semantic (X)HTML Markup: Blockquote, Q, and Cite
Semantic (X)HTML Markup: Structuring Lists
Semantic (X)HTML Markup: Styling Lists
Semantic (X)HTML Markup: Using Tables Appropriately
Semantic (X)HTML Markup: Styling Tables
Semantic (X)HTML Markup: Phrase Elements
Semantic (X)HTML Markup: Other Elements

The Practice of CSS Column Design: Custom Corners and Sides
by John Gallant,Holly Bergevin - 30-Jul-04
Reader Level:

Previously in this series, we learned how to create nice clean columns and boxes containing our content. Unfortunately, it's hard to create a visually flowing design with rectangles everywhere. Sometimes you just want a little variety! Using CSS and background images, we'll now show you how to create some "rounded corners" on your columns, and avoid such a boxy fate, all without the use of tables!

Flash, DHTML Menus and Accessibility Free!
by Stephanie Sullivan - 28-Jul-04
Reader Level:

It's not uncommon to hear developers complaining that their DHTML menus, when triggered, have dropped behind the Flash movie below them. It's also not uncommon to hear, "that's just how they work." Before Flash Player 6, that was true in many browsers. But nowadays, it's become urban legend. With Flash Player 6, Macromedia introduced windowless mode for Netscape and Mac OS X (previously it was supported only for Windows). In the process, this also gave developers a way to completely hide Flash from older screen readers and the focus issues they can have with it. In fact, when Flash is purely used as eye candy, it's wise to remove it from the flow of the screen reader's page so that they don't have to listen to Flash without a purpose.

The Practice of CSS Column Design: Boxes in Columns Free!
by John Gallant,Holly Bergevin - 14-Jul-04
Reader Level:

This tutorial expands our discussion about making accessible layouts using divs for basic page construction blocks. Using CSS, we'll show how to build a column of separate bordered boxes, each with a colored header, similar those currently in use on the CMX main page (as of July, 2004). We'll also discuss collapsing and escaping margins, and a few other things to look out for on our way to some nicely styled Bordered Boxes.

Creating a CSS/Table Hybrid Layout
by Adrian Senior - 07-Jul-04
Reader Level:

In this tutorial, we will look at creating a page that uses a table structure for its layout, and we will position this and style it using CSS - a table/CSS hybrid structure if you wish. We'll begin by building the layout, and we will then bring it to life by defining its appearance with CSS.

The Theory of CSS Column Design: Semantic Construction
by John Gallant,Holly Bergevin - 02-Jul-04
Reader Level:

This second installment in The Theory of Column Design series looks at a highly effective way to structure the HTML, allowing "machine friendly" code while avoiding the Box Model Problem and related issues. This technique is becoming very common on the web, and for good reason. It's easy, powerful, accessible, and robust. You can't get much better than that!

The Theory of CSS Column Design: Source Order
by John Gallant,Holly Bergevin - 26-Apr-04
Reader Level:

Have you ever heard the term "Source ordered" used in reference to web page code? It refers to how page elements are arranged, or ordered in the source. Most coders never give a thought to this, because in the past there was little that could be done. But that is no longer true. As a forward-thinking coder, it is smart to be aware of the issue because it affects you directly as a web author. Come along as we learn about this "source ordering" and how to take control of it.

Web Terminology: Part Three
by John Gallant,Holly Bergevin - 23-Mar-04
Reader Level:

In Part Three of our Web Terminology series, we discuss terms you may read in a forum or on an email list. Words that are slung about loosely, often without further description or even a context within which to infer their meanings. Words that are part of the "jargon" of CSS, such as "Positioned," "Container," "CSS Hack," and "Workaround." Armed with this knowledge, you'll be able to ask intelligent questions, converse with the gurus, and actually understand what they're talking about! Let's go!

Web Terminology: Part Two
by John Gallant,Holly Bergevin - 15-Mar-04
Reader Level:

Continuing with our terminology series, in Part Two we delve into the differences between "attributes" and "properties," what "external," "embedded," and "inline" mean, and expose the vulnerable underbelly of XHTML.

Web Terminology: Part One
by John Gallant,Holly Bergevin - 05-Mar-04
Reader Level:

This article begins a new series concerning the definition of terms, specifically the terms most used (and mis-used) in HTML and CSS concepts. We hope to enlighten those who haven't had time to catch up on the lingo so common amongst web designers, begining with a discussion of tags vs. elements, divs vs. layers, and Class vs. ID.

Common Coding Problems With HTML And CSS — Part Five
by John Gallant,Holly Bergevin - 27-Feb-04
Reader Level:

Continuing our saga of browser bugs, oddities, and their fixes, Part Five of our "gotchas" series looks at two IE/Win bugs: The Justified Italics bug and the Doubled Float Margin bug. Maybe you've seen them, maybe you haven't, but they're sure to annoy when they wiggle their way onto your web page. Come on along and see what you can do to exterminate them...

Common Coding Problems With HTML And CSS — Part Four
by John Gallant,Holly Bergevin - 18-Feb-04
Reader Level:

Have you ever found some mysterious duplicated characters you just can't account for in your float layout? Or perhaps wanted an entire link button to be "clickable" in IE/Win without the links getting too wide and breaking the rest of your layout? Or maybe you've just been frustrated by lists that don't look quite the same in different browsers? Well, Part Four of our "gotchas" series looks at some more browser bugs as well as some good practices regarding lists. Come along as we continue to explore the wonderful world of browsers...

Common Coding Problems With HTML And CSS — Part Three
by John Gallant,Holly Bergevin - 29-Jan-04
Reader Level:

Once again we delve into the weird world of CSS display bugs. Settle down, they're safely behind the glass! That's right folks, they jump, they flicker, they wriggle on their bellies like a... well, let's just take a look, shall we?

An Introduction to SSI
by Joey Lott - 05-Jan-04
Reader Level:

SSI (which stands for server-side includes) provides you with a rather simple, yet effective, way in which to add basic dynamic functionality to your otherwise static HTML content. In this article you will learn how to use SSI to include content such as headers and footers as well as how to output dynamic data such as dates and times.

Common Coding Problems with HTML and CSS - Part Two
by John Gallant,Holly Bergevin - 31-Dec-03
Reader Level:

Last time, the 'gotchas' were general web coding problems but now we turn to some headaches directly related to CSS and positioning. Don't be scared! These beasties are pushovers if you know their weaknesses. Ready to kick some bug backside? Let's roll!

Common Coding Problems with HTML and CSS - Part One Free!
by John Gallant,Holly Bergevin - 23-Dec-03
Reader Level:

Coders learning CSS, and others as well, often run into frustrating problems that chew up time and produce major headaches. What's worse, these problems are usually known to others who have gone through the same mill. In an attempt to ease the path of others, we have identified a number of common coding 'gotchas' so you won't have to re-invent the wheel. Please proceed...

The Benefits of Externalizing Fireworks Pop-up menu JavaScript Free!
by Jim Babbage - 12-Dec-03
Reader Level:

Fireworks and Dreamweaver pop-up menus have their uses, in spite of all the critics. One nagging issue though, is that both DW and FW insist on dumping a hefty javascript function into EVERY page that makes use of the menu. This article shows you how to turn this internal js into an external file, and how to link it to the pages that need the pop up menu.

Dreamweaver MX 2004 Piece by Piece -- Part 1: Hyperlinks and Anchors
by Ray West - 10-Nov-03
Reader Level:

The Piece by Piece series of articles aim to provide the most comprehensive references available to the interfaces and functionality of Macromedia Products. In this installation, we cover the Hyperlink and Named Anchor objects in Dreamweaver, along with detailed coverage of the technologies they support.

Absolute vs. Relative Paths Free!
by Bryan Ashcraft - 06-Oct-03
Reader Level:

Confused about the differences between absolute and relative linking? Not sure when to use a root relative path instead of a document relative one? This article spells it out for you by explaining the differences between each option, as well as providing examples. After reading this article you should never have to ask how to link to a page or object again.

Under the Hood — The Basics of HTML: Part Three
by John Gallant,Holly Bergevin - 12-Aug-03
Reader Level:

Just what does go on "under the hood" of an HTML document? In this third and final basics article we will give you a good general idea about what is going on in the "body" of an HTML document, in easy to understand, mostly non-technical language.

Under the Hood — The Basics of HTML: Part Two
by John Gallant,Holly Bergevin - 05-Aug-03
Reader Level:

Just what does go on "under the hood" of an HTML document? In part two of our basic HTML series we examine the structure of and the elements found within the "head" of an HTML document in easy to understand, mostly non-technical language.

Under the Hood — The Basics of HTML: Part One Free!
by John Gallant,Holly Bergevin - 01-Aug-03
Reader Level:

Just what does go on "under the hood" of an HTML document? This article will give you a good general idea about what is going on when you create web pages. We will begin right at zero, and describe the source document point by point, in easy to understand, mostly non-technical language.

Rendering Mode and Doctype Switching Free!
by Holly Bergevin - 04-Jun-03
Reader Level:

Even though today's browsers have moved toward more standards-compliant behavior, it is still necessary to allow older pages to display as they have in the past. However, this can cause problems with modern pages written to (x)HTML and CSS standards if a browser cannot determine how to best render the page. The solution? Come learn about Rendering modes and the "Doctype Switch."

Fireworks: Rollovers Made Easy Free!
by Bill Horvath - 02-May-03
Reader Level:

Have you been creating duplicate images in Fireworks just to create rollover effects? Using the Frames Panel within Fireworks can speed up this task!

Disjointed Rollovers Free!
by Bill Horvath - 29-Apr-03
Reader Level:

It happens to all of us at some point; You've gotten bored with plain old rollovers on your nifty menu... You want to add a little something, like maybe rolling over one of your buttons and having it trigger another image swap elsewhere on your page. In this tutorial, we'll go over how to do that, and even how make a picture appear where there wasn't one before. All using the Swap Image behavior.

The Newbie Series: Using DWMX's Open Browser Window Behavior
by Laurie Casolino - 25-Apr-03
Reader Level:

Using DWMX's built-in Open Browser Window behavior to create pop-up windows is a snap! In this tutorial we will go through the steps necessary to create a popup window using a thumbnail as the trigger.

Clean Cross-Browser Table Borders
by Bill Horvath - 18-Apr-03
Reader Level:

Creating nice, clean table borders that display consistently in all browsers should be easy... Actually, it is!

The Newbie Series: Using DWMX's Set Navbar Image Behavior
by Laurie Casolino - 16-Apr-03
Reader Level:

In an earlier tutorial "Using DWMX's Swap Image Behavior" we looked at how to create simple 2 state rollovers. With this tutorial, we are going to kick it up a notch and create more complex 3 and 4 state rollovers using the Set Navbar Image behavior. DWMX makes creating these navbars a piece of cake. :-D

Creating a Multi-Page Form
by Bill Horvath - 10-Apr-03
Reader Level:

Create a form that carries over several pages. This is useful for loan applications, lengthy registration pages, etc.

The Newbie Series: Using DWMX's Swap Image behavior Free!
by Laurie Casolino - 30-Mar-03
Reader Level:

Making 2-state rollover navigation buttons using DWMX's Swap Image behavior is a piece of cake! In this tutorial we will walk you through placing your navigational buttons on your page and applying the Swap Image behavior to them to create a rollover.

Past Week's New Content

Search CMX

Latest Free Content

View All
Free Content

Accessibility

CMX Learning Guides

HTML

Member's Sign In

Current Articles
and Tutorials

Most Recent JumpStarts

CMX Suite

RSS Feed

Past Week's New Content

Search CMX

Latest Free Content

View All Free Content

Accessibility

CMX Learning Guides

HTML

Member's Sign In

Current Articles and Tutorials

Most Recent JumpStarts

Newsletter

CMX Suite

RSS Feed

View All
Free Content

Current Articles
and Tutorials