Solved

What are the differences between the different slices in Fireworks?

Posted on 2011-02-23
7
594 Views
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
0
Comment
Question by:cindysei
  • 4
  • 3
7 Comments
 
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.
0
 

Author Comment

by:cindysei
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?
0
 
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.
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 

Author Comment

by:cindysei
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 Lynda.com. 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).
0
 
LVL 26

Accepted Solution

by:
David Brugge earned 500 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.
0
 

Author Closing Comment

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

Expert Comment

by:David Brugge
ID: 34993637
Thanks.

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

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Using Quotation Marks in PHP This question (http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/Q_28217211.html) seems to come up a lot for developers who are new to PHP.  And it got me thinking, "How can we explain the rule…
Keep your audience engaged and get the most out of your next presentation with these quick Prezi tips.
Add visuals to your Prezi to keep your audience engaged. Learn how to embed images, edit them, and more in this video micro tutorial. Select "Insert" from the top menu in your Prezi editor: Select "Image": A toolbar will pop in from the right …
Learn how to set-up custom confirmation messages to users who complete your Wufoo form. Include inputs from fields in your form, webpage redirects, and more with Wufoo’s confirmation options.

760 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now