The web slices you create depend on the subtlety of your graphic design and how the final blocks in your HTML layout will interact. Therefore selecting web slices is an art in its own right and that task is better left to the person in charge of creating the HTML template.

You will now learn about the rectangular slice tool  in your Adobe Fireworks (CS3, CS4). You will later have the opportunity to compare it to the Photoshop slice tool in another upcoming post.

The screen capture above reveal the  slice tools located in the “Web” category of your Fireworks’ tools panel. With your slice tool “in hand“, you can just select the area of the canvas you would like to convert into a web slice with a simple click-drag-and-release.

A web slice can be easily spotted in the canvas by its green overlay. Once a new slice is created, you can see its properties – dimensions and position – as shown by the screen capture of the “Properties” panel below.

Fireworks automatically name each new slice created. However you are better off renaming your web slice (e.g. top_chair) to something that will make more sense during the HTML design stage.
You can also edit the width and height (W, H) of the current slice to modify its dimensions.  The X and Y values define the position of the slice in the canvas. You can changes those coordinates by just typing new values. You can also use your keyboard arrows in to change those values at 1pixel at a time.

The “Type” property let you choose between foreground and background image. A second drop-down list to select the slice file format (GIF, JPEG or PNG) and its compression. In the screenshot above,  ”JPEG- Better Quality” means a compression ratio of 80% in a JPEG file format.

For for each new slice created  Fireworks adds  a new layer under “Web Layer” folder as shown in the image on the left.

Just like  regular layers in your canvas, you can reorder web layers by just dragging one above or below another. You can also hide a given web slice by just clicking on the “eye icon” in front of its layer. To reveal a hidden slice, just click the empty space reserved for the eye icon of that layer.

The slice name defined in the properties panel is the same as the name of the web layer. By renaming the web layer you are renaming the web slice as well.

You can lock all or just a selected layer by clicking on that layer’s lock box  in the  column right next to the “eye  icon”. A locked layer shows the lock icon and the corresponding layer and web slice  can no longer be modified until it’s unlocked again.

Locking web layer is a safe way to avoid accidentally modifying that slice properties. You can lock all web layers at once by clicking the lock box left of the “Web Layer” folder icon.

Compared to Photoshop or Illustrator web slicing, Fireworks slice tool is more intuitive, easier to use  and packs all the functions you need for slicing and dicing in one spot. In a fast pace web production environment, Fireworks slice tool is a tremendous time saver.

Very often after I am done doing my part and transfered all the  web files  to the client , I receive an email/ phone call a day or so later inquiring why  some pages jump in web browser.

The very first thing the client blames is the current web browser s/he is using, and why not? Then after opening all the major web browsers at his disposition he realizes the issue remains the same on all browsers.

Now, may be I am the one who screwed up!
Nope!!

In all cases it’s because web pages have different amount of content some longer than others. When a web page is long enough to exceed the web browser’s height  then a vertical scroll bar appears.  If on the other hand the web page only has a small amount of copy, everything is shown above the fold and no vertical scroll bar is needed by the web browser.

Cause :
When using a fixed width layout with the left and right margins set to auto on your main container (#wrapper) , your web pages will be horizontally centered. The horizontal position of your web page depends on  the available width in your web browser viewport.

Let’s assume your browser window is 1024 pixels wide and that you have set your page layout to a fixed width of 980 pixels to be horizontally centered.

• If a page copy is concise  the entire page can be shorter than your browser window’s height. In this case no vertical scroll bar is necessary. You web page will therefore have a left and right margin of roughly (1024-980)/2, that is about 22 pixels on each side.
• Now left assume another web page has a lot of text copy. In this case the page height to exceeds the web browser’s window height. A vertical scrollbar appears therefore cutting down on the width of the browser’s viewport.
  The width of the scrollbar is about 20 pixels, so we are now left with only 1004 px (pixels).

  Using the same formulas as above (1004-980)/2, yields 12 pixels for the left and right margin for this web page. That’s what creates a 10px horizontal shift to the left when you navigate from short (no vertical scrollbar) to a longer page where the vertical scrollbar is required.

Solution:
To solve the issue we are facing the solution is to force the web browser to display the vertical scrollbar on every page no matter how much content there is in there.

1. - Option 1
   Using the ‘min-height” CSS property to  set a minimum height of your main container to match that maximum browser window height of your target audience.

   The problem is you do not yet  have that information yet you review your web analytics after your site went live.

   However from a personal experience, I found that setting the min-height to 1000px will generally do the trick. The only hiccup is the  ”min-height” CSS property is not understood by IE6. Therefore users using that version of  Internet Explorer will experience the horizontal page  shift.

2. - Option 2
   Add a just  enough line breaks (Shift+Enter) or empty paragraphs (Enter) after the content on pages with less copy.

Choose whichever option is more suitable to your  design and target audience.
I’ll go for option 2 for the time being until IE6 disappears from the web landscape.

Does it really matter if a web page shift just a few pixels. For most people, it doesn’t. heck, most site visitors will even notice or be bothered by it.

But it’s a great deal for digital artists. Graphic designers are a different breed. A graphic designer will “fight you” tooth and nail for 1 pixel and for a good reason. That doesn’t mean visual artists are very difficult people to work with, on the contrary. They just thrive for perfection.

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.

It’s up to the web designer/developer to make sure the web site displays or degrades gracefully on all major web browsers: Firefox, Opera, Chrome, Safari and Internet Explorer (IE6, IE7, IE8). Reaching that goal seems daunting if not impossible.

How can one make all those web browsers get along?

For years now web developers have been pointing the accusatory finger to Internet Explorer: J’ACCUSE!!

Well, a few years back Netscape 4 was sitting on the trial bench, accused of slowing down the web. These days, all eyes are on IE6 . Internet Explorer 6 does not support most of the new HTML & CSS features which take web page design to the next level: CSS round corners, PNG graphics, and the CSS :hover pseudo-selector is limited to the anchor tag.

Those are just a few of the potholes along a winding road. The need to make websites display well on all major browsers, despite all the shortfalls mentioned earlier, puts a brake on how far a web designer/developer can push the envelope. More and more time is spent on a given project tweaking and “hacking the code” to be compatible with IE6 and others. And that “my friends” can not only be a real nightmare for the web designer, it’s a big impediment to the evolution of the web.

Since you will have to include IE6 anyway in the list a web browsers to check your website again, here are a few nuggets to save you tremendous web development time and frustration. At any stage in your web design process (HTML/CSS):

• Avoid applying padding to main CSS layout containers (div tags) at all cost
• Use margins in the nested container to simulate the left and right padding on the closest parent container.
• Wrap the text in paragraph (<p>) tags to which you applying margins to achieve the padding.
• IE6 doubles the margin of the floated element on the direction of the floating (left or right)
• Always specify a width of any floated HTML element
• Apply both the float and inline display properties to list items of your horizontal navigation
• If you must hack, create a separate CSS style sheet where you would group all the styles aimed at IE6 and use the Internet Explorer’s conditional comments.

At the end of the day/project, web development is all about matching the capabilities of the end-user’s web browser. It’s less about the artistic talent of the graphic artist or the programming skills of the web programmer.

“This web site is best viewed in web browser X or Y” is just an excuse to avoid spending extra time checking your design compatibility with other major web browsers. It might seem cost effective at first but it does not make business sense: you are loosing potential customers user web browsers different than your target browser.

All you need is to preview your site design at crucial steps during the web development process to fix potential problems early on. In the end you will achieve a design that will accurately display your website on all major web browsers. It may also be time to target smartphones as well.

IE6 is still here and breathing. We just have to deal with it.

However because of IE’s lack of support of new CSS and HTML features, most web developers consider Internet Explorer as more than a nuisance and start recommending other “more modern” web browsersto their clients and friends:  Firefox, Safari, Opera and  ”the new kid in the block”  Google Chrome.

IE6 is still around because it’s the default web browser for most Windows XP users. Although the percentage of IE6 users is dwindling every month,   web developers still have to optimize their web site design (HTML, CSS, Javascript) to accommodate that old web browser.

IE7 and the latest version IE8 are certainly a great attempt from Microsoft to be inline with the recommendations of the Worldwide Web Consortium (W3C). But there is  still more room for improvements. IE lacks some of the most important functions most modern web browsers have today.

But all that is going to change very soon with the upcoming of a new version,  IE 9. The rumor is IE9 will  support HTML 5,  CSS 3 and SVG vector graphics. What that means is the ability among other things to:

• create round corners with CSS without using graphics
• display a multicolumn page content without manually breaking it down in separate containers
• apply multiple background images to the

Those are just a few of the new features the CSS3 specifications include. They are already supported by Firefox, Opera, Safari and Chrome.
For now, let’s wait and see what surprises Internet Explorer version 9 (IE9) has in store for us.

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.

Let’s just think about this for a moment. If you land in a web page that takes forever to download or a page with very low quality images, I am pretty sure you wouldn’t stick around long in there. Even if that website contains the information you were looking for, you wouldn’t know about if because you are long gone.

While most of us  no longer use dial-up internet connections, optimizing your multimedia files for the web is mandatory. It reflects on the quality of your website and helps reduce your pages bounce rate.

Unlike other graphic design applications, Adobe Fireworks is made for the web. It has the best and most intuitive tools to help you quickly get the job done. You will generally get a smaller file size with Fireworks than in Photoshop when it comes to image optimization for the web.

Whether you are dealing with an image in the canvas or a web slice, optimizing a graphic in Fireworks is straightforward. Within Fireworks interface:

1. Select the image/slice you would like to optimize
2. Open the “Optimize panel” as shown the graphic above
3. Select the export file format (gif, jpeg or png) and the quality
4. Then export that graphic using File > Export

Using this approach you can choose  a different export option (jpeg, gif or png format)  for each image/slice  in your canvas then export all those graphics at once. It’s that simple!

1. GIF Format

   It  is the most  appropriate export format for graphics with large areas of solid colors. Digital artwork using a narrow palette of  colors (up to 256)    will deliver crisp and a small file size when  exported as a GIF.

   The GIF format is also a good choice to make certain colors transparent in the exported image:  index transparency. That comes handy when you need  transparent edges around your image. You will be then able to blend that exported image with any web page area no matter what background color is used.

   Your only choice is a GIF format to create  animated graphics such as banners (animated gif) unless you use a Flash movie:   JPEG and  PNG do no supports a such animations. You would have to either keep the number of animation frames to a minimum and reduce the dimensions (width and height) to lower the file size of your “animated gif”.

2. JPEG Format

   This format is more appropriate for images with lot of details and photos requiring millions of colors. The JPEG format is also the best option for  computer graphics with gradients of colors or  artworks using shadows, bevel, feather and other digital effects.

   Images  exported in a JPEG format are usually crisp when exported with a compression between 60 and 80%.  That  gives you enough wiggle room to find a balance between quality and file size.

3. PNG Format

   The PNG format comes in three flavors: PNG8, PNG24 and PNG32. This format lays somewhere between the GIF and JPEG formats. PNG is a lossless compression, uses virtually unlimited palette of colors and offers both index and alpha transparency.
   Let’s explore what each subset of this format has to offer.

   • The PNG8 is  quite similar to the gif format in terms of quality and size of the exported file. It offers index transparency as well as alpha transparency
   • PNG24 is better suited when your graphic is a mixture of lots solid colors and gradients. In a nutshell, the png24 format lays between the gif and jpeg formats.  It produces crisper images with a smaller file size than the GIF format.  However the PNG24 does not offer index or alpha transparency.
   • The PNG32 option is currently not available in Photoshop. You will have to use Adobe Fireworks to take advantage of  the full alpha transparency offered by the PNG32 format.
   • The only drawback of  PNG images is they are not well supported by Internet Explorer 6: you will have to resort to a CSS hack using Microsoft’s filters.

• Although the GIF format offers a palette of 256 colors, my personal experience taught me to use the GIF format only when no more than 32 colors are needed to keep the exported image sharp. For images requiring more colors, you are better off using the other file formats.
• If the image you are dealing with needs more colors than the GIF format can handle and no transparency is required then JPEG is your best bet.
• There is no real gain in choosing the PNG format at this point unless you are using the PNG32 to take advantage of alpha transparency you cannot get with GIF or JPEG format.

In the end there are really no hard rules in choosing the right file format to export your image in. As you just learned, the best suited file format depends on the current context: the graphic you are working on.

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.