Explore the Premium Content

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

Read More

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

Read More

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

Read More

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 

Read More
FREE

Free! - Introducing Dreamweaver 8

This article is a sneak preview of the new Dreamweaver 8 e-book that will be released this month.

 

About the e-book

On 8/8/88, oops, 8/8/2005, Macromedia announced the coming of the next generation of their wonderful Studio and in particular, award winning HTML editor, Dreamweaver.  No longer stuck in alphabet soup, this series of 15 articles will detail and teach you how to use the new features of Dreamweaver 8.  There is a whole lot to talk about with this amazing new product and we will not only talk, but we’ll create a site utilizing the power of the program to its fullest extent.  From the Unified CSS panel to the integration of XML to the quick and easy Code Collapse, Dreamweaver 8 is chock full of goodies to make the designer’s life a whole lot easier and web sites a whole lot quicker to create.

Read More
FREE

Free! - export to Excel

Have you ever seen an option to export to excel on the bottom of a table. In this tutorial we are going to show you how to add that feature to your site.  

Using the Export to Excel extension it's really quick and easy.   The only complicated part is writing your SQL statements - if you want to be very particular about what is displayed in the Excel Document.  

You can program a feature like this yourself (in either ASP or PHP) however it will take an hour or two. With the The Export to Excel extension it takes 3 minutes and it only costs $17.00.

Read More
FREE

Free! - Creating a product page, the easy way

Ever wanted to build fancy product pages that you can easily edit online without the need for HTML coding? This tutorial shows you how to build an online catalog with images and a  WYSIWUG editor, it uses the extensions from Advanced HTML Editor Img Bundle ASP v2.

About the bundle
Enrich your forms with a fully customizable Online HTML Editor. Let your users create formatted content without having to know HTML! You can make the editor fit your design by choosing from several predefined designs, add your own style sheets for formatting of the text and more.

Advanced HTML Editor Version 2 is now fully cross browser compatible (mozilla browsers) and offers many new improvements!

Read More

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:

Read More

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:

 

 

Read More

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.

Read More

Interface Widgets: Datagrid (part I)

Whether you use the web for shopping or banking, blogging or content management, every once in a while you stumble across an interface widget that makes you wonder: “how the heck do they do it?”

One of those widgets is the datagrid that looks and behaves like your datagrid /spreadsheet in a desktop application: scrollable with static headers, selectable rows and editable cells, sortable columns and other “desktop-like” features.
In this and the following articles of the Interface Widgets series you will learn how to create a datagrid like this in Dreamweaver from scratch.

Read More

Moving from Library items to Includes in Dreamweaver

In the beginning there were Library items

One of the great things about using Dreamweaver is its ability to collect together all your images and code and make it available for you to reuse throughout your site.

Library items are a great example of this, they enable you to place code/design that you will use on a number of pages into a single file, then reference it from each page.

You simply have to update the Library file and Dreamweaver will update all the pages you have placed that Library item on.

Whilst Library items bring a benefit in this respect, the fact you have to upload every page that includes the Library item following an update can be time consuming, especially when using the Library item for the Navigation, which means every page in your site has to be uploaded again.

The ideal situation would be a file, which included your design/code and was ‘linked’ to from each page, but when you updated it, you did not have to upload every page, just the one file you had worked on.

 

Read More
Newer articles Older articles