Explore the Premium Content

CSS Design with Dreamweaver MX: Creating a Weblog Layout

In a tutorial designed for designers who are coming to CSS because of it's design potential, Molly builds an attractive Blog site:

• Using Dreamweaver MX to create a majority of the source CSS
• Using Dreamweaver to lay out the page
• Using hand-authoring techniques to improve performance
• Creating multiple style sheets to show instant different looks for the same layout
• Setting up horizontal navigation using an unordered list (if you've not learned this trick, this article is worth the read just for learning this technique!)

Read More

Forms and Accessibility

Whether you are a web designer or primarily a back-end developer, you are likely to need to create forms for your web sites and applications - whether they are simple contact forms or complex survey systems making the forms easy to use and accessible to users whatever devices they are using will ensure that people can complete the forms and therefore increase the likelihood of visitors actually doing so.

Making our applications is important, not only because enabling all users to get the most out of the web should be seen as the right and ethical thing to do but because in many cases we are required by law to do so. Section 508 in the USA means that sites run by federal agencies must comply to the accessibility legislation laid out in this law, other countries are developing their own laws and there are even independent test cases being taken against owners of inaccessible sites.

Read More

CSS Design with Dreamweaver MX: Type, Lists, Positioning and CSS Extensions

CSS is the stuff designers dream of, and in this second foundation article in a series dedicated to teaching beautiful CSS designs, the focus is still on understanding the principal means of designing with CSS via Dreamweaver MX.

This tutorial focuses on working with type, lists, positioning features. I'll also show you the Extensions dialog and how you can use CSS extensions to style your pages, teaching you to use CSS as a primary means of presenting and visual enhancing your pages far beyond the limitations of HTML and XHTML.

Read More

CSS and Old Browsers

In this article I am going to look at one of the main reasons why designers are concerned about moving to more advanced usage of CSS - everybody's favorite web browser, Netscape 4. By using a simple technique (no JavaScript or server side scripting required) we can provide Netscape 4 with CSS it is able to deal with and still use CSS extensively for our main audience of up to date browser users.

Read More

CSS Design with DreamweaverMX: Borders, Backgrounds, Blocks and Boxes

In the first part of a two part foundation tutorial for CSS with Dreamweaver MX, Molly walks you through the process of how you can use Dreamweaver to style many aspects of your designs such as borders, backgrounds, blocks and boxes. Read More

Page layout with CSS - Layers and CSS Positioning

In this article we will look at simple CSS positioning techniques, using absolute positioning and float to create a simple layout. We will take as a starting point the "Layer" functionality in Dreamweaver MX but move on to look at CSS positioning in an external style sheet, using a combination of the tools within Dreamweaver and handcoding to explore CSS layout techniques.

This article is suitable for those who have done some CSS within Dreamweaver or by hand for styling text and who want to explore CSS for layout, or who have used "Layers" in the past and would like to learn how to convert these into CSS in an external style sheet and still be able to work in Dreamweaver. Read More

Better Living through Pleasantry: A Dreamweaver user's guide to effective technical communication

Many of those Web professionals coming into prominence today learned their skills through visual editors like Dreamweaver. Many of the 'older hands' in the Web team will not have used Dreamweaver.

So what's the problem? The Same word can mean one thing for DW users and something totally different for those without the DW background.

This article looks at the confusion that can arise, and points out some common differences between the Dreamweaver terms and the W3C terms which will make communication in a project team smoother - and therefore, more productive.

Read More

Building and Validating the Front End

Matt takes the prototype Artist's showcase site that he mocked up in Fireworks, and uses it as a template for his CSS, then builds the front-end showing step-by-step how to ensure Accessibility - and how to cater for Netscape 4 if you need to. He shows how to force IE6 into Standards Mode and how to Page: 1 prevent the Internet Explorer CSS flash bug.

Finally, he demonstrates how to validate your work.

This is a great article for visual designers looking to get up to speed with the hows and whys of building future-proof mark-up based on a visual template.

Read More

Tables to CSS: Taking CSS Further

In my last article for DMXZone I looked at how we could take a standard tables based layout and trim it down - using CSS for text styling and to create navigation button effects.

 
In this article we will look more deeply into CSS. We will discover how to take our tables based layout down to a very basic one-table structure - removing all the nesting that makes the pages harder to maintain and in complicated pages can cause accessibility problems, and we will look at some of things that CSS can do over and above simply replacing HTML attributes. We will also look at a way of creating a navigation menu without using a table - by styling an html list with CSS.

Read More

Setting Dreamweaver Preferences for Forward Compatibility

Dreamweaver can't do everything for you - but takes care of much of the leg-work in moving to XHTML. Here's a definitive list of the options you can set to make your code future-proof. Once you have decided that you'd rather produce pages that will be forward compatible, rather than code like it's 1998, you can just set your preferences and GO! Read More

Tables to CSS

This article is for those people who are comfortable using Dreamweaver to lay out sites using tables, but would like to discover more about how to use CSS for more than just basic text styling. We will take a tables-based layout that includes several of the design tricks common when creating sites using tables for layout, and look at how we can use CSS to make a tables based layout cleaner, leaner and more accessible but without making that huge leap into total CSS layout. This is a perfect solution for those legacy sites that you don't have time to fully redesign but that need to be improved in terms of their accessibility, or as an easy introduction to CSS in Dreamweaver.

Read More

HTML or XHTML: Which should I use?

Dreamweaver MX has great XHTML support. So how do you choose between HTML or XHTML for a project, and why? This article will help you know why you might want to consider XHTML, when to stick to HTML, and how to deal with management, client, and workflow concerns related to making the language choice.

Read More