Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17


What are the differences between the different slices in Fireworks?

Posted on 2011-02-23
Medium Priority
Last Modified: 2013-12-13
I'm a beginner with web and Fireworks design and have created a bogus web page just to see how the export with CSS funciton works. I've watched some online video training but can't seem to get my head around how to slice a page correctly. More so, what are the differences between the background, foreground and html slices. I keep getting an error that certain ojects are overlapping and that it's switching to absolute positioning. Thanks, Cindy
Question by:cindysei
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
LVL 26

Expert Comment

by:David Brugge
ID: 34977607
My humble opinion is that Fireworks is a very useful program for creating web pages, but not that good for learning HTML and CSS (at least not for a beginner). It makes the assumption that you already have a basic understanding of how web pages are constructed and tries to do what you tell it, even it that is not the best method.

The basic building block for HTML is the table cell. The cell can contain a number of things in the foreground such as text or images or other tables. It can also have a background color, and a background image.

The basic building block for CSS is the div. The div can also contain a number of things such as text, or images, or tables, or other divs. The advantage of divs is that, unlike table cells, you can place them wherever you want. Divs can also have background colors and background images, as well as foreground content .

When slicing your file, you can instruct Fireworks to use your slice as a background image or a foreground image.

Technically speaking, all slices in Fireworks are HTML slices, since Fireworks uses each slice to write the HTML code that makes a web page.

When slicing you file, you should take care to make the edges of the slices line up. If they overlap, even by a pixel, Fireworks can no longer write true CSS code in which divs are positioned freely on a page, but are locked into absolute positioning which is sort of like a CSS version of tables. (without going into detail, it is not a good thing. It will work, but it makes for clumsy, bloated, slow to load, hard to manage code)

I suggest that you go to w3schools' web site and go through their quick and easy tutorial, first on HTML then on CSS, just to get a feel for the basics. I like this particular free site because it has a "try it yourself" sandbox with each lesson where you can quickly see the code in action without any muss or trouble.

Author Comment

ID: 34985422
This has been most helpful - especially the link to tutorial - much appreciated. One quick thing then, when instructing Fireworks to use a slice as a background or foreground - what parameters should I take into account? ie: is an image always a foreground? If text is on top of a colour - is that a foreground slice or background slice? Also, I understand that you don't need to "slice" everything on page. Is it only images that need slicing?
LVL 26

Expert Comment

by:David Brugge
ID: 34993062
I don't want to overload you with information, but in the old days, there was no such thing a page layout. Everything was inline, text and graphics.

Then people discovered that you could build a table and put invisible 1-bit transparent tiff images in the cells as space holders and you could put text and images almost anywhere on the screen.

Modems were very slow in those days and you were prone to loose a connection or hang up a page download. For that reason, designers started slicing up their larger images into smaller bits, so that, if a page was going to take two minutes or more to download (not unusual if it had a lot of graphics) a few of them would appear every few seconds and you would know progress was being made and not give up.

We sill use that method to build web sites from large images but for the most part it is no longer needed. Unless you are making a page to be viewed in a developing country with a slow connection, a full page image will usually download in a matter of seconds provided it is given adequate compression.

Many developers then use Fireworks to place specific actions for their website that call for multiple images in a single location, such as rollovers or remote images. Fireworks will let you build them, test them, and write the code to support them. You can then tinker with the rest of the code to your hearts content.

Also, in the old days, you could assign a background image to a table cell, and place text over it. Nowadays, you can have a div that has a background image that fills the background, fills only part of the background, repeats across the top, repeats down the side, etc. If your div is set to change size with the browser window, then the number of repeats will increase or decrees to match the size of the div. Pretty nifty.

Then you are sill free to put text, another image, a video, or another div in the first div with the background not getting in the way of the text flow.

Hope this hasn't confused you.
Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?


Author Comment

ID: 34993417
thanks for this - you went through a lot of trouble explaining but here's where I'm getting confused. The tutorial I am using to learn Fireworks is through And part of the process is a chapter on slicing your layout in order to have the images compressed properly - ie: whether to use jpeg or gif compression. During this tutorial it says slices need to be tagged as either background or foreground - you have to specify which when slicing, but unfortunately, the teacher doesn't explain the difference. So essentially, I understand more fully, through your explanation, that you only need to slice images to apply correct compression (at least that's what I think you mean) but in Fireworks how do I determine if image should be a background or foreground slice? Thanks, Cindy - btw - i'm beginning to learn about html and css through that web site you suggested which I like a lot! (I do have some limited knowledge of both but it's good to go back to basics).
LVL 26

Accepted Solution

David Brugge earned 2000 total points
ID: 34993455
In the big scheme of things, it doesn't matter. If an image is going to sit in its own div and not interact with anything else, make it a foreground. If it will be used as a background, and you might have type spilling over it or something else take place in front of it, make it a background.

The reason that I say that it doesn't matter is that because with CSS, the two are somewhat interchangeable.  If you have a div with an image it it and it does nothing but display that image, it doesn't matter much if it is set for background or foreground.

Likewise, if you have a div with an image in the foreground, it is a very simple matter to put another div on top of it with another image that makes the bottom div act as a background.
The old rules just don't apply any more.

That being said, I have not built many sites using Fireworks. There MAY be some quirks with the way Fireworks handles foreground and background images separate from the way CSS rules allow.

You just have to give both ways a try and see if you can tell a difference.

Author Closing Comment

ID: 34993468
very helpful comments - was great at explaining basics of web to a beginner!
LVL 26

Expert Comment

by:David Brugge
ID: 34993637

Remember there's also lots of help available in the web authoring zones as well. No prior knowledge necessary.

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently used term in Object-Oriented design is "SOLID" which is a mnemonic acronym that covers five principles of OO design.  These principles do not stand alone; there is interplay among them.  And they are not laws, merely princ…
It’s a strangely common occurrence that when you send someone their login details for a system, they can’t get in. This article will help you understand why it happens, and what you can do about it.
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to selectively show certain fields based on user input using rules to gather relevant information and data from your forms. The rules feature provides you with an opportunity…
Learn how to set-up PayPal payment integration in your Wufoo form. Allow your users to remit payment through PayPal upon completion of your online form. This is helpful for collecting membership payments, customer payments, donations, and more.
Suggested Courses

721 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question