Adobe CS tutorials - Dreamweaver, FIreworks, Photoshop, Flash and Coldfusion

HTML

Search Engine Optimization SEO Made Easier with Schema.org Free!

Reader Level:

One of the greatest challenges to Search Engine Optimization (SEO) comes from the fact that each search engine has its own proprietary method for crawling and characterizing your web pages. Not only does this require you to learn the techniques for each engine, but further challenge comes from trying to appeal to each on the same page.

With the June 2, 2011 announcement of schema.org, identifying your page content to search engines just became significantly easier. A partnership between Google, Microsoft, and Yahoo, schema.org is a collection of microdata vocabularies that allow you to specifically add markup to your content so that it can be better understood by these major search engines.

This article will introduce you to the use of schema.org vocabularies and provide some examples of how you can use them. If you are unfamiliar with the HTML5 Microdata mechanism, you may wish to first review Estelle Weyl's introduction to HTML5: Microdata to become more familiar with the syntax.

Understanding the Importance of SSL and When It's Necessary
Reader Level:

One of the biggest concerns many users have when accessing sites and sharing data is information security. As a web developer there are many practices and policies that you can put into place to help establish a trust between your site and your users, including hashing passwords and ensuring personal information is never stored in an open/accessible manor. One of the most important of these techniques also happens to be one of the most misunderstood and underutilized: SSL and HTTPS. Today we're going to talk about what SSL and HTTPS are, debunk some of the myths surrounding them, and look at why they're not just for banking and online shopping.

The HTML5 CSS Starter Page Series - Part 1 Free!

Reader Level:

The Secret to Effective HTML Page Title Tags Free!

Reader Level:

The lowly HTML Title tag - it is too often neglected. If it weren't for the fact that it is a required element of XHTML pages, it might be left out all together. A quick search in Google yield 18.2 million pages entitled "Untitled Document" (which happens to be the default filler in Dreamweaver.)

Enlightened content producers and etailers, on the other hand, have harnessed the power of the title tag. They know that search engines will give their higher prominence in search results whe the title tag contains relevant and revealing keywords about the page's contents. They also know that users will stay on their site longer and return more times when they can find a specific page in their browser history.

So what is the secret? It was recently reinforced for me as I spent some time shopping on two different websites...

XHTML5: What's that?
Reader Level:

You've heard of HTML5 and you've heard of XHTML, but what is XHMTL5? The XHTML5 term has been coined to describe HTML5 coded as XML. Learn what that means.

HTML5: JavaScript Web Workers Free!

Reader Level:

When performing heavy JavaScript operations in a web browser, your web page user interface may become unresponsive until the JavaScript is finished. HTML5 Web Workers provides a solution by enabling threaded JavaScript, freeing up the UI thread to respond to user interaction. This article provides an introduction to HTML5 web workers.

HTML5: Microdata
Reader Level:

For the web to be a 'database of the world's knowledge', the information posted needs to be parsable so it can be organized. Microdata allows and defines content annotation with specific machine-readable labels. Microdata allows nested groups of name-value pairs to be unobtrusively added to documents, in parallel with the existing content, enabling parsing. In this article we introduce the concept of microdata and compare it to microformats.

HTML5: ApplicationCache API
Reader Level:

With the ubiquity of web-based applications, it is more important now than ever that web applications be accessible when the user is offline. While browsers have been able to cache components of a website, HTML5 addresses some of the difficulties of being offline with the ApplicationCache API.

HTML 5 - Part1: An Introduction to the New Layout Tags Free!

Reader Level:

In this article we will be taking a look at HTML 5 and some of the new semantic tags that are available to us for laying out our web pages. We'll compare the new tags and the markup to how we currently write our code and review the differences we can expect to see when we move to HTML 5.

The HTML 5 Series:
HTML 5 - Part 1: An Introduction to the New Layout Tags
HTML 5 - Part 2: An Introduction to the New Division Tags

Semantic XHTML - Part 9: The Image Element
Reader Level:

Semantic XHTML - Part 7: The Phrase Elements
Reader Level:

HTML/CSS Crash Primer Free!

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.

Semantic XHTML - Part 5: Table Elements
Reader Level:

Semantic XHTML - Part 3: Common Block Level Elements
Reader Level:

Semantic XHTML - Part 2: Elements Within the <head> Element
Reader Level:

Mobile Internet Devices - Part 2: Browser Evolution
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!

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!

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.

Introducing CMX Jumpstart Greenville Free!

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!

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!

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.

Introducing CMX Jumpstart San Francisco Free!

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!

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!

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!

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!

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

Introducing CMX Jumpstart Minneapolis Free!

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

Managing HTML and CSS to Keep Clients Happy and Avoid 'Disaster' - Part Two
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

Introduction to CSS Table-Related Display Values Free!

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!

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!

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!

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!

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
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!

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.

A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 1
Reader Level:

In the last article of this series documenting the construction of my personal site, you saw how I sliced my Fireworks design comp into individual graphics. These slices were tailored for a page built using semantic XHTML and clean CSS. In this article, you'll see how I built the structure for my site's home page using divs and semantic XHTML markup. Also, I'll show how I used CSS to lay out these divs into the visual structure I designed in my Fireworks comp.

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 Traverse City Free!

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.

Making it Legal: Validating Your (X)HTML and CSS Free!

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.

Teaching Dreamweaver the Web Standards Way Free!

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.

Introducing CMX Jumpstart Machu Picchu Free!

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.

Creating the Print Style Sheet for Vienna: Part Two
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.

CMX JumpStart: Vienna
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!

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!

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.

CSS: Getting Into Good Coding Habits Free!

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.

Semantic (X)HTML Markup: Other Elements
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

JumpStart Venice: An Introduction Free!

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

Announcing CMX JumpStart: Liverpool Free!

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

Common Coding Problems: Part Seven
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!

Semantic (X)HTML Markup: Styling Tables
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
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
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!

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

Announcing a New CMX JumpStart: Seattle Free!

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?

Testing Safari Compatibility on a PC
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.

Announcing CMX JumpStarts Free!

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
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!

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.

Semantic (X)HTML Markup: Structuring Lists
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
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

Do You Want To Do That With CSS? — Centering a Wrapper Free!

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

Semantic (X)HTML Markup: Headings and Paragraphs Free!

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

Semantic (X)HTML Markup: An Introduction
Reader Level:

CSS is making it easier than ever to control the visual presentation of our (X)HTML documents. However, good document structure is just as important as ever. Semantic markup is good for you, your users, your clients and search engines too!. This first article in the Semantic (X)HTML Markup series examines what "semantic markup" means and why it matters.

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
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!

The Theory of CSS Column Design: Semantic Construction
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
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
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
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
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
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
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
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
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
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!

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!

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
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!

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
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
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!

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!

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

Searching CMX

Get familiar with the CMX search facility & learn how to find the tutorials you need easily & quickly.

Latest Free Content

View All Free Content

Community MX

You're curious and eager to learn. You are also busy and struggle to keep up with today's rush of new technology. That's why you need Community MX. More...

Get Paid, Create a Tutorial!

Turn your knowledge into extra cash! We'll pay you for writing Tutorials, screencasts, tips and articles.

Find Out More

Searching CMX

Latest Free Content

View All Free Content

Advertise with CommunityMX

Community MX

Related Links

Community MX - Your technology lifeline!

Get Paid, Create a Tutorial!

Member's Sign In

Searching CMX

Latest Free Content

View All Free Content

Advertise with CommunityMX

Subscribe

Community MX

Related Links

Community MX - Your technology lifeline!

Get Paid, Create a Tutorial!