Explore the Premium Content

Animating Draw Layers

In previous articles I showed you how to set up draw layers and how to add behaviours to a draw layer to create dynamic content. Dreamweaver MX (and the updated Dreamweaver MX 2004) also provides controls that allow you to animate draw layers through the use of a standard Timeline interface. Although not as sophisticated as the ones found in Flash or Director, the concepts are much the same. Dreamweaver will generate all of the DHTML code needed to animate one or more layers on the Web page.

 

This article is suitable for those using Dreamweaver MX and MX2004 with the newest update from Macromedia that restored the timeline to MX 2004.

Read More

Many Boxes: a CSS Layout

A popular layout style for sites that have lots of small chunks of content is to lay it out in lots of small boxes – an example is the BBC web site. With a tables-based layout, this would usually mean creating a grid with the table cells and putting content into each cell. In this article we will look at creating a layout which uses this boxy effect using CSS for layout.

Once we have created a three column layout to contain our boxes using CSS, we can explore how to position our boxes within that, so that content never overlaps, regardless of how much text is in each box, or whether the user resizes text. Then we explore how to change the CSS to make the layout less "boxy", but retain the same markup.

The code is supplied, and will work with Dreamweaver MX and MX 2004, but the tutorial uses the Insert Div Tag dialogue that is only available with MX 2004.

Read More

CSS Layouts: Fixed widths and float

This tutorial will take you through the process of building a modern page design using CSS for layout and bearing in mind best practice in terms of document structure. The layout that we will be building demonstrates two useful techniques in terms of CSS layouts. We are going to design a page with a fixed width, centered layout and we will also be using the float property within this layout – so if you have been wondering how to do a fixed width layout or how float can be used for CSS positioning then this tutorial will hopefully answer some of your questions!

As this is quite a complex tutorial and we skip through some of the things quite quickly that are covered in other tutorials I have included the CSS and XHTML files in the code download, so you can compare your results with mine or use mine as a starting point for experimenting with this layout.

Read More

Draw Layers and DHTML

This article shows you how to set up behaviours and then apply behaviours to draw layers to create dynamic Web pages.  You will learn how to set up draw layers that appear or disappear when clicked, or layers that are draggable and can be repositioned anywhere in the page or within defined limits - it's up to you.  There's no coding necessary - it's all done through Dreamweaver behaviors which combine an event (something that happens on the screen) with an action (what the browser should do when the event is detected). Adding a behavior to a Web page allows visitors to interact with your page and the page to perform important tasks without having to reload the page.

Read More

Rough Guide to CSS Hacks

If you keep hearing about the Box Model Hack, or wondering why your site seems to flash with unstyled content before settling down, or just want to make rollovers using only one image, this tutorial is for you - it's about using the more common CSS hacks, so that your pages will degrade gracefully.

We know that in the real world things aren't perfect, so we go for the best we can, and filter out the incompatible bits with some clever pieces of code that exploit browser glitches or lack of CSS support.

Read More

List basics in (X)HTML and CSS

Lists are great. There are many elements that you might include on your web pages that are ideally marked up as a list and lists are easily styled with CSS to make them far more interesting to look at than the default styles used by the browser. In this article we will look at the three different types of list available in (X)HTML and which one you should use for which purpose. We will also explore how you can nest lists, for when you need a list within a list. The final part of this tutorial looks at the basics of styling lists with CSS, once you understand the basics you will be able to create attractive lists just by experimenting with applying different effects.

Read More

Understanding Draw Layers

DMXzone premium tutor, Jason Cranford Teague (author of  DHTML and CSS for the World Wide Web: Visual QuickStart Guide) begins a new series today on CSS and DHTML.

CSS allows you to set up elements called “layers” on the screen that can be absolutely positioned in relation to the Web page. For example, you can set up a layer containing graphics, text, forms, or any other HTML elements and then position that layer 25 pixels from the top of the page and 360 pixels over. This layer will ignore all other content on the page even if it overlaps the content that is underneath it.
 
Dreamweaver refers to these CSS positioned layers as Draw Layers and provides special tools, not only to add and move these layers, but also to allow you to animate these layers, show and hide them, change their size, or even allow the visitor to move them around in the browser window.
 
Because draw layers can work as free agents in the page, this not only opens a lot of possibilities for layout, but can be used to add a bit of dynamic zest to your page. You can place the draw layers around the page for the exact positioning you need in your design, crop parts of a layer to create independently scrollable regions, or even hide draw layers and then use Dreamweaver behaviors to show them when needed. Read More

CSS Tips and Tricks for Dreamweaver MX 2004

This article is a round-up of a variety of CSS tips and tricks for users of Dreamweaver MX 2004. I’ve based these tips on questions that I have either received or have seen people asking on mailing lists and mails to me, and they cover a wide range of the CSS tools in Dreamweaver. I'm using MX 2004, but the tutorial is appropriate for both DMX "Classic" and DMX 2004.

Covered in this article:
 

• What’s the difference between longhand and shorthand CSS?
• What’s the difference between a class and an ID – and which should I use?
• How do I style a horizontal rule so that the color displays in Mozilla based browsers and Internet Explorer?
• How do you make those boxes with borders? (covers CSS-P and tables layout method)
• How can I make the text scroll and the background stay still?

Read More

Creating a Print Stylesheet

In this tutorial, Rachel Andrew shows you how to use Design-Time Stylesheets in Dreamweaver to make a print stylesheet for your pages - even if they use tables for layouts!
 
Despite the promised utopia of a paperless office, you are likely to find that users will print out your web pages for reference, or to read away from the computer.  As we know, what looks good on the web does not necessarily look good in print and if you site uses many graphics, the user is going to be using up much unnecessary printer ink in getting their copy, as your navigation buttons aren’t of much interest once the application is printed!
 
Many sites link to ‘printer friendly’ versions of their pages. What these versions usually are, is a separate version of the document, created either by hand (which means you have to maintain 2 versions of the document) or by a script, and the printable document will be formatted for print and contain no, or minimal graphics. While this method works well, you do have the additional development time of creating the new pages or writing the script to create the printable page, and you need to have a link on each page that launches this special version.
 
A print stylesheet gets around all of these problems. The print stylesheet comes into play when the user prints any document to which it is linked. You can define any element on your page differently in the print stylesheet and these are the styles that will be used when the document is printed. You can use the print stylesheet to hide areas of the page, such as navigation, graphics-intensive headers or unnecessary pictures; you can change the font styles, colors and sizes in order that the page is readable when printed; you can ensure that the contrast between colors works well even if the document is printed in black and white, and you can even add to the document areas that will only display on printing – such as page related information, to make it obvious where the document came from. Read More

Whipping Content into Gold Medal Shape

Good content and good copy draws readers. It attracts repeat visits and grows loyalty. As Web Professionals, we're sometimes so busy Photoshopping the images, wrestling with the CSS, designing the database and scripting the server - that we forget what the audience comes for, and what will bring them back. Content Maven Meryl Evans has written this free article for DMXzone members with a few pointers on turning your purple prose into gold medal content.

Read More

Testing for Validation and Cross-Browser Compatibility

Validation is a vital part of  a professional’s workflow, helping to ensure the best cross-browser compatibility and addressing quality assurance concerns. It's the process by which you take an existing web document and compare it to the Document Type Definition (DTD) that you are declaring. For example, if you create an XHTML document using Dreamweaver tools, Dreamweaver will add the proper structural components (especially if you’re working in Dreamweaver MX 2004) required to pass conformance. However, what you add to the document might not be within a given DTD.

Molly takes you through validating your mark-up and CSS, how to interpret the results and warnings that you don't want (but which everybody gets!) and talks about times when it's considered legitimate to go live with invalid CSS in the interests of cross-browser compatibility. Read More

All CSS Photo Album layout

If you have moved to using CSS instead of tables for layout, then you will probably find that you come up against problems that had a simple solution when using tables, but it is difficult to work out exactly how to get round them using CSS. A photo album – or other listing of images, with a grid of photo thumbnails with captions is one of these issues. In this article we will learn how to display these images using CSS and in a way that offers benefits over and above that which can be achieved with tables.

Advertisement Sliding Billboard

Discover the power of interactive presentations – the Sliding Billboard ! Organize your work greatly in a virtual book, which auto scrolls and enables your users to slide from page to page or chapter to chapter naturally. You can present any type of work this way: your portfolio, photo albums, products index, web shop, ads and much more. Choose from the 13 cool CSS designs included, so your billboard always looks great and suites your site perfectly.

 

Read More