Contribute: Part 1

Setting up a Contribute Site in Dreamweaver 8 and Contribute 3

Content may be king, but only if the content is up-to-date and relevant. Do Search Engine Tips from 1998 have any validity today? Not much. How about Mac Rumours about the cool new toys Steve Jobs will unveil at the 2005 MacWorld Expo? Who cares? It’s long past and everyone’s seen an iPod Shuffle by now. These are just a couple examples of top results I clicked on from recent web searches in Google. I was looking for current information, not old news. It’s not that Google is to blame. These sites are just out-of-date. For historical reasons, I suppose, they don’t want to delete pages with old information, but for most purposes these out-of-date pages do no one any good.

So what’s the solution? Well, I don’t pretend to have one to solve the out-of-date content across the entire web, but there are ways that your sites can stay timely and useful for your site visitors. Just update your content frequently! That was easy. Article over.

But wait! How do we update content frequently? Of course, that’s the tricky part. Luckily there are a number of content management solutions on the market that make updating content as easy as possible. In this article, I’ll concentrate on Macromedia Contribute, but we’ll also take a quick look at some other types of Content Management Systems (CMS) that may also suit your needs.

Dreamweaver 8: Little Known Goodies

During this series, we have learned a lot about Dreamweaver 8.  We have discussed the product in general, we have taken a general look at its features, a comprehensive at its CSS ability and now we are winding up a walk through the application aspect of the program.  This article represents a bit of a departure from the norm.  This article is the culmination of my trips through the menus, the panels, the documentation and general just click, clicking around in the program to see what kinds of little things I could find that I thought was interesting, helpful or just downright different. 

I hope you’ll enjoy learning about some of the little things as much as you have enjoyed the major features.  I can’t say enough about Dreamweaver 8 and how it raises the bar for both the web designer and developer. 

As a look ahead, our final article, Article 15, will focus on Dreamweaver 8 as a part of the Macromedia Studio 8, giving you a look at the total web development process.  Macromedia, more than any other company, has positioned its software solutions to the various pieces of the web development puzzle to work together seamlessly and brilliantly.  You won’t want to miss this informative look at innovation in software design, Macromedia style.

This article is part of the new interactive e-book; Dreamweaver Crystal Gazer: The Power Of Dreamweaver 8

Dreamweaver 8: Possibilities in Application of XML

In the previous article, we started our journey into the world of applications with Dreamweaver 8.  We talked about PHP5 and the new support built into the product.  Then we turned our attention to the fantastic XML integration built into Dreamweaver 8.  In Dreamweaver MX 2004, we had the ability to import a schema so the custom tags would be available in code hinting and completion and this was pretty cool; certainly sped up work flow.  And we had the ability to create an XML document; as long as you typed it, but of course you had the custom tags if you had imported the schema, so it wasn’t all that bad.

Dreamweaver 8: Applications

During the first two-thirds of this intensive look at the new and improved Dreamweaver 8, we have looked at the tool and its new features, we have explored the CSS-ability of the new version and now it is time to look at Dreamweaver 8 as an Application builder. 

Our last version, Dreamweaver MX 2004, was rightfully dubbed the “CSS edition” but that was a good thing because CSS to that point in time we sadly lacking and most serious developers turned to a 3^rd party tool to create their CSS and then just attached it to Dreamweaver.  The MX 2004 version made great strides in this respect, but it did not replace the 3^rd party tool in every respect.  It is my opinion that Dreamweaver 8 does so.  So we were right in giving a fair amount of attention to CSS in this version as well.

This article is part of the new interactive e-book; Dreamweaver Crystal Gazer: The Power Of Dreamweaver 8

Dreamweaver 8: Buried in the Basement

Part 10, “Buried in the Basement” was written because it had to be.  It is the one departure from the theme of this series, or rather, I should say “semi-departure”.  Not everything discussed in this article is new with Dreamweaver 8, but I felt it was important to do a chapter like this if for no other reason than to invoke user awareness.

The Results Panel, or “basement” as I like to call it, is by some standards, “boring” because it doesn’t design, it doesn’t create the pages and so it lies down there under the Property Inspector, largely unnoticed and massively underutilized.  But it contains within its tabs a series of very powerful utilities designed to help you find problems, validate pages, look for errors, batch process word replacement and print a stack of reports that I promise you, once you use a couple of times, you will not do without in the future. 

This article is part of the new interactive e-book; Dreamweaver Crystal Gazer: The Power Of Dreamweaver 8

Dreamweaver 8: In A Flash

This is the first article not about CSS that I’ve written in some time.  The CSS was good, but we don’t really want you to think that Dreamweaver 8 is all about the CSS and nothing else.  There is plenty more packed into this release so we’re moving along to show you some more things you can do with this beast.

This article is part of the new interactive e-book; Dreamweaver Crystal Gazer: The Power Of Dreamweaver 8

CSS: Unified We Stand

In the fall of 2003, when Dreamweaver MX 2004 came out, it was dubbed the “CSS update.  Prior to that point in time, Dreamweaver just didn’t quite “get” CSS and as more and more developers flocked to 3^rd party tools to produce their CSS for Dreamweaver sites, Macromedia realized that something had to be done.  The web world was, more and more, emphasizing “separation of content and presentation” and either Dreamweaver had to improve in this area or start to lose valuable market share.

This article is part of the new interactive e-book; Dreamweaver Crystal Gazer: The Power Of Dreamweaver 8

Dreamweaver 8 SiteWise

Dreamweaver 8 is packed full of all kind of wonderful additions and terrific tools to make your design and coding experience a “piece of cake”.  When we get into the series on CSS, starting in Article 4, I could go on for weeks, and probably will.  When we get to the XML support in Dreamweaver 8, we’re talking more like a month!

But none of it would be any good without solid Site support.  The site features in Dreamweaver 8 are exciting in their own rite; though they may lack the glamour of CSS or the code coolness of Code Collapse or XML.  But without solid support in the site experience; without accurate FTP, without accessibility, none of the rest would mean anything.

This article is part of the new interactive e-book; Dreamweaver Crystal Gazer: The Power Of Dreamweaver 8

Dreamweaver 8: Under the Hood

Welcome back to our 15 part tour of Dreamweaver 8.  In the first part, we introduced you to the program and took a look at the changes in Design View.  While it looks basically like Dreamweaver MX 2004 on the surface, there are some big differences and I don’t just mean performance, although it is greased lightning in comparison. 

This article is part of the new interactive e-book; Dreamweaver Crystal Gazer: The Power Of Dreamweaver 8 

Interface Widgets: Advanced Buttons and Navigation Bar (Part II)

Introduction

This article is the second iteration of the two-part Interface Widgets series on building web interfaces using HTML button element (<button> tag) in conjunction with CSS.  

Today based on the knowledge acquired in the previous article we will build a button-based navigation bar for a fictitious web application. Using the power of CSS and Dreamweaver design tools we will quickly create button rollovers, navigation dropdown menus with a search-box and navigation sub-items.

We will also apply two “skins” –two Cascading Stylesheet files to control the appearance of our navigation bar. While working on the design we will aim for a desktop-based application type of a look. The first skin will apply the classic Windows 98 style, while the second one will have a modern Microsoft Office XP theme.

As a result of this exercise we will build an interface similar to the screenshots below:

Interface Widgets: Advanced Buttons and Navigation Bar

Objectives

In this and the following articles of the Interface Widgets series you will learn about the largely overlooked and underestimated HTML button element (<button>) and how you utilize one to create great looking, easily manageable and usable User Interfaces.

In this iteration we will talk about the advantages of using button-based interfaces over the images-based. We will cover some of the advanced feature such as disabling buttons, skinning (styling) and displaying icons inside the buttons. While continuing on the subject in the next article we will build a complete web application/web site navigation bar.

HTML buttons:

Interface Widgets: Datagrid (part II)

In this iteration of the series we will complete our datagrid widget which we started on in Interface Widgets: Datagrid (part I). Today we will cover a few more topics: columns sorting, editing records directly in the datagrid and printing the datagrid scrollable content.

Sortable columns

First of all let’s decide which columns will be sortable and by which one the datagrid will be sorted by default when the page first loads.

To me it made the most sense to sort the columns by Title, Price and Genre. I also decided by default the datagrid should be sorted by Title.  In order to show to the user the difference between the non-sortable and sortable columns we want to make the latter look more like buttons. I created a separate CSS class and applied it to all sortable columns.

.column_header_sortable{
border-top: 2px solid  ThreedHighlight;
border-left: 2px solid  ThreedHighlight;
border-bottom: 2px solid  ThreedShadow;
border-right: 2px solid  ThreedShadow;
color: ButtonText;
font-weight: bold;
padding:3px;
cursor: default;

To visually indicate the current sort order (ascending or descending) we need two images – for the “up” and “down” arrows. You can use the images below or create your own:

Down arrow:
Up arrow:

If you open those images with your favourite image-editing software you will see that both of them are semi-transparent gifs. Using transparent areas creates the desired 3D/ see-through effect and allows the arrows to “take on” the user’s system colour.
.

Place both images in each sortable header cell next to the column title.