To use this free trial version you need to login to  your adobe account first. No worries signing up to get an adobe account is free.  I have been a Macromedia and Adobe products fan for more than 10 years now, so my account is still in good standing.

Fulled loaded, Dreamweaver CS5 consumes about 133Mb of RAM, a little bit more than its predecessor, CS4. Mind you I am “still running” on Windows XP machine with 3Gb of RAM installed  and  a Pentium 4 (3GHz) processor. But I can almost feel my PC “sweating” when running this new application.
I certainly need to upgrade to a dual core or quad core before committing to the Adobe Master Suite CS5.

Anyway, the user interface of Dreamweaver CS5 has remained pretty much the same as with previous versions (CS3, CS4). The two visible improvements are the Adobe BrowserLab and  Business Catalyst sidebar panels.

I talked about Adobe BrowserLab in a previous article, so no surprise here: it works just fine and can be a real time saver. As for the Business Catalyst I have not gone through its documentation yet but I will less likely shed over $900 on that product.

As you guessed it, I am still tinkering with the most obvious features during this first hour. However, as I dig deeper I will most certainly discover some nuggets to share with you in the upcoming days.  So stay tuned.

Because of discrepancy between the display of web pages in different web browsers and even different operating systems, one needs to test the website on all major browsers to make sure the “web pages do not break”. The problem is if you are PC user on Windows, you need to get a hold of Mac as well and vice-versa for testing purpose.

There are already websites out there that offer similar site preview services. Some are free, others not so much. However most of them require a waiting period of an hour or more before you get  the preview screenshots by email.

With the new  Adobe Browser Lab service, you can test you entire new web site on different web browsers in different operating systems for free. It’s a live service that means, you get your preview result within seconds not hours.

All you need is have a free adobe account to start testing your web pages in the major browsers  shown here. Just go to https://browserlab.adobe.com and take it for a spin.

I am not quite sure yet why the Opera web browser is not included in the list but I can bet Adobe has a good reason for that. I’ll keep you in the loop once I get more information about that.

What’s even more interesting with Adobe Browser Lab is its integration with the soon to be released Dreamweaver CS5.

Once more Adobe listened to the web design community and as always answers with some new amazing products on each new release of its products suite.
I for one cannot wait to get a test drive of  the new Dreamweaver, Flash, Photoshop, Fireworks and After Effects from the CS5 Master Collection.

Not matter how intricate a web page design seems to be, you can “move it” from the graphic application to your favorite HTML editor (HTML, CSS) by following simple steps. That helps you get a clean HTML markup, well structured CSS styles and overall, an easy to maintain website.

Before you start working in Photoshop/Fireworks I assume you took the time to plan your design. You do some research to help you decide what design style is best suited for your new web site. Break down your website into individual pages to define o your site structure. You then create wireframes to illustrate the  your web pages’ layout. Don’t just keep all that information in your head: put it in “black & white” on a pad  then sketch out the layout.

Any important project needs planning before you roll up your sleeves and start digging and web site design is no exception. If you skip those preliminary preparation steps then you are in for a big trouble,  in other words, waste of time and poor  results.

When converting a graphic design into a CSS layout:

1. Look at the big picture. The primary goal is to have one CSS layout template for your entire website
2. Look at your design in terms of wireframes to isolate the main layout blocks/rectangles
3. Once you have those main containers, preview your design in all major web browsers
4. Repeat step 2 and 3 when adding content to each main block.

When followed properly those 4 steps will help you:

• quickly achieve your CSS layout
• avoid unnecessary nested of HTML tags
• keep your HTML markup clean and easy to update

Just knowing CSS properties, learning how to create CSS styles is not enough to design well-crafted CSS layout.
Learn more about our Online CSS Training to get all the tips and tricks-of-the-trade.

You just devoted  hours creating a pixel-precision CSS layout,  tweaked and tested it on various web browsers. It all looks good and works perfectly even in IE6.  You now have a  template you can use to create your web pages.  You start adding content, preview  that web page in a browser and surprise, oh surprise, your nicely crafted layout is now out of control.

What happened? More likely mismatched <div>, <p> or <span>,… tags!!

Without proper comments to indicate where each main container tag is closed in the HTML markup, it can be challenging and painful to “hunt” the source of this layout issue. Because you now have so many nested  tags, you would have to look into your HTML markup line by line to match each opening and closing tag. And if you happen to miss just one of them, you will have to start all over again from the “<body>” tag down.

Let’s just take a look at this typical  markup within a body of an HTML document:

<div id=”wrapper”><div id=”header”>Header content goes here </div><div id=”maincontent”><div id=”content”> Page content goes here</div><div id=”sidebar”> Sidebar Navigation</div></div><div id=”footer”> Footer Content goes here</div></div>

It looks clean and is self-explanatory. However once you start  to copy & paste content in the different containers  and add new blocks , matching tags becomes a daunting task. That’s because each container can wrap smaller containers through a nesting process that can go on and on. It’s hard to tell which closing “</div>” corresponds to which opening “<div …>”.

That’s why you need to always comments your HTML markup before you start adding content. For instance the markup shown above would be properly commented as follow:

<div id=”wrapper”>
<div id=”header”>Header content goes here </div><!–  end header –>
<div id=”maincontent”>
<div id=”content”> Page content goes here</div><!–  end content –>
<div id=”sidebar”> Sidebar Navigation</div><!– end sidebar –>
</div><!– end maincontent –>
<div id=”footer”> Footer Content goes here</div><!– end footer –>
</div><!– end wrapper –>

The portions “<!– … –>” are HTML comments. The will never be displayed by a web browser when placed in your HTML markup.
So the tips I would like to share with you based on my daily experience are:

• Comments helps you annotate your markup for future reference.
• Add an HTML comment right after the closing tag “</div>” tag of each main container.
• Commenting your HTML code help you set reference point where each HTML tags is closed.
• HTML comments  helps you  isolate  each block and quickly fix a CSS  layout issue.

Let’s explore how to use CSS to apply a background color and a background image to any HTML element in your web page.

1- Background Color

background-color: #FFFFFF;
This CSS property applies a white (#FFFFFF) background color to the HTML container it is applied to.

2- Background Image

background-image:  url(images/bgheader.gif);
The value “images/bgheader.gif” in url defines the relative HTML path to the background image graphic (bgheader.gif in this example).

This HTML path can be absolute: url(http://livetrainingsession.com/images/bgheader.gif)
or relative to the location of the external style sheet file  where the CSS style is defined.

If your CSS style is embedded in the web page, then the url path will be relative to that webpage.

3- Background Image Tiling

background-image:  url(images/bgheader.gif) repeat;

The background image will be then tiled in both the horizontal (x) and vertical (y) directions to fill the entire surface of the HTML container this background-image is applied to.
The tiling effect in the x-axis will be only be visible if the width of the background image is smaller then the width of the HTML container. The same goes for the vertical y-axis.

If however all you need is for the background image to tile in just one direction within its container, all you need is specify the axis along which the tiling would take place:

background: url(/images/bgimage.jpg) repeat x;
would instruct the web browser to tile (or repeat) the background image horizontally (along the x axis) from left to right.

background: url(/images/bgimage.jpg) repeat y;
would create the effects of the background image  tiling along the vertical direction (y axis) from top to bottom.

As you already suspected when the tiling need to be done along both directions (x and y) there is no need to specify either one of them. It’s the default behavior.

4- Background Image Attachment

background-image: url(images/bgheader.gif) repeat fixed;
The “fixed” background attachment keeps the background image in the same spot while the content of the HTML container is scrolled.
This behavior can be particularly desirable when applying a company logo as the background image of the HTML “body” tag of a web page.

background-image: url(images/bgheader.gif) repeat scroll;
The background will move along when all the content is scrolled within the container. The “scroll” value of the background attachment is the default behavior. That means, there is really no need to specify the background attachment “scroll” value.

5- Background Image Position

You can specify the placement of the background image within the HTML element it’s applied to.
background: url(/images/bgimage.jpg) no-repeat 10px 15px;

The background image applied to the HTML container will not be tiled (no-repeat) and is positioned 10 pixels from the left edge and 15 pixels from the top edge of its container. We define pixels as the measurement unit but you could choose any other valid units such as points (pt), inches (in), cm, ems, percentage (%) and so on.

In most cases you certainly would want the background image to start at the top left corner of the container box. In that case w you would set:
background-image: url(/images/bgimage.jpg) no-repeat 0 0;

The x and y position of the background image are 0.  In this instance there is no need specify the measurement unit.

background: url(/images/bgimage.jpg) no-repeat  left top;
Instead using the value 0 0 to position the background image, you could use “left” “top” to achieve the same result of align the background image with the top-left corner.

It’s worth mentioning that when a background image is repeated (repeat, repeat-x or repeat-y), you can not define a position x, y where the tiling

6- Background Color & Background Image

As with most CSS properties, there is a shorthand way to define both the background color and the background image properties in a more compact form to reduce your style sheet file size.
The generic form is :
background: color url(path to background image) repeat attachment position;

Therefore to apply a white background color and a background image to a HTML element with an CSS identifier  #header, you would write:
#header{
background: #FFFFFF url(images/bgheader.gif) no-repeat 10px 15px;
}

With CSS3 you can in theory apply more than one background image to any HTML container.
Unfortunately just like other recommendations made by the W3C (Worldwide Web Consortium) not all major browsers support this new feature notably IE6, IE7 and IE8. In the meantime, you would have to combine some HTML and CSS tricks to apply multiple background images to a given block in your web page layout.

No matter how complex your website layout appears to be, you will for sure find the CSS layout that matches your design’s wireframes including the typical main containers such as the header, navigation bar and page content area. Smaller elements can then be wrapped by those main blocks.

Those Dreamweaver CSS layouts are cross-browser compatible therefore saving you time and the frustration of having to test your layout again all popular web browsers. All you need is make a few easy tweaks from the Dreamweaver CSS panel to update the dimensions, background styles and you can start adding your design elements.