Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Exporting CSS and images

From: Fireworks CS4 Getting Started

Video: Exporting CSS and images

Fireworks CS4 has a multitude of options for getting your designs into the hands of your clients, from a mock up perspective. But one very important addition to CS4 is the ability to create a web page composed of standards-based HTML and CSS. From a workflow perspective, Fireworks has finally made an important step to becoming a tool which can go from the design stage, just graphics, to production of an actual web page. Now understand that this feature doesn't exempt you from knowing how to write CSS or HTML but it may speed up your workflow in the long run if you invest some time to try it out.

Exporting CSS and images

Fireworks CS4 has a multitude of options for getting your designs into the hands of your clients, from a mock up perspective. But one very important addition to CS4 is the ability to create a web page composed of standards-based HTML and CSS. From a workflow perspective, Fireworks has finally made an important step to becoming a tool which can go from the design stage, just graphics, to production of an actual web page. Now understand that this feature doesn't exempt you from knowing how to write CSS or HTML but it may speed up your workflow in the long run if you invest some time to try it out.

Alright I am going to switch to my custom workspace so I can see my Pages and Layers panels a bit better. You will find this file in the 06_Export folder. Now this is the one we are going to concentrate on in this example. And if you are planning to put your website design out as a CSS-based layout, there are some things that you need to keep in mind. Some, if you want to call them, rules. First of all, try to use rectangles to create divs or to export text. Now to give you an example of what I mean there I am going to go to my Layers panel and down at the bottom of my Layers panel I have this little layer called divs. Now divs in HTML are basically generic containers where you can hold images, content, text, whatever would normally go into your pages. And in here I have created a whole series of rectangles that essentially mock up my layout in terms of placing things within containers and these will be utilized by Fireworks to generate my CSS-based layout.

Now it can also come in handy when you are working with text because you can force your text to be within a certain width using one of these rectangles. Now, you have also got to concern yourself with making sure that any graphics you want to be part of this CSS layout have a slice placed over them. The only graphics that will get exported out in a CSS layout from Fireworks are images with slices. Now we see on the screen right now, the surfer, the surfboard and our banner up top, all covered with that light green rectangular shape. Those are slices. Now inserting a slice can be a pretty easy thing to do. So I am going to grab my Pointer tool, I am going to select this graphic and it's a simple matter of right- clicking and choosing Insert Rectangular Slice.

Now I have got a slice. I can set that to whatever format for export that I want, GIF, JPEG, PNG, whatever happens to be what I need. Now the third rule that we need to keep in mind is avoiding any kind of overlaps between objects. Now this doesn't mean you can't have a really complex design with different image elements overlapping each other and drop shadows and things like that, that's fine. Just put a big slice over it and you are good to go. When we talk about avoiding overlaps what we are really talking about is making sure things like text areas don't overlap other areas. So I have just clicked in a text paragraph down here, a text box, and you will notice that the bounding box overlaps into one of the other columns. Now this is going to cause us problems in the final export. Fireworks will still export out a CSS layout but it will be absolutely positioned, which is very inflexible and a little hard to work with from the standpoint of adding new content down the road.

So what I want to do with this is I will grab my Pointer tool and I will just resize or reset that paragraph width so it's not overlapping anything. And that works out pretty well. I am not overlapping any other objects and I am pretty good to go there. The next rule to think about is try to plan your layout with the concept of rows and columns in mind. Now you will think well jeeze, we are not doing tables anymore. Why do we have to think about rows and column? Well the things is when you have got a design that doesn't have everything exactly lined up right beside each other and this is a good example, this design here. I have got a little image here that's inset a bit from the main text. If I have a design like this, Fireworks is going to try and export this out and break up all these areas into discreet containers, discreet divs.

So if I want to maintain this whole spot here, this whole left side from the little illustration down at the bottom of this text here, as one large container, one large div, then I want to make use of those rectangles I was mentioning earlier to make sure everything gets put into that specific spot and doesn't get put into a bunch of separate containers to just sit on the page. And the last little guideline to make note of is that you want to treat your document as two dimensional which means if you want to have separate areas inside of one main rectangle or one main div you can create separate rectangles inside that div and Fireworks will recognize those elements and Fireworks will export out them as child elements of that main div.

All right, now let's just talk a little bit more about the design here in terms of getting it out into a working web page. Once you have got everything setup the way you want you have got your slices drawn and name your slices. So, for example, that new slice I just added which has a default name of image, we are going to change that to surfer_nav. So I have got a little bit of a different name and that will actually come across as the image name and also could be used in conjunction with the CSS for other things.

So I will just put that into place and the next step is pretty straightforward. We go to File > Export and we choose CSS And Images and we can go to the Options menu to make sure that we have the setting there that we want. Ideally the two things I look at are making sure that I have an external style sheet, so that's checked off. I also want to align the page at the center of the browser window, so I will choose Center from this option as well and I will just click OK. And then I will click Save, get a couple little boxes. And now let's take a look at how this appears inside Dreamweaver.

So here we have the page opened up inside of Dreamweaver and you can see that it's over all looking pretty much like it did in Fireworks, which is pretty cool. Now unlike an HTML prototype where everything gets exported as graphics here we have real text, all over the place. This is all editable text, which is pretty cool. Now one thing you have probably learned if you have played with a web editing program before, things may look a little bit different in the web editor than they do in the web page and we can see we have a little drop here, visual drop on the inside of Dreamweaver.

So really important, once you have got your page opened in a web editor, make sure you check it, preview it and make sure that it looks the way you expect it to look in a browser. And you know what? This looks pretty good. There we go. We have one little thing and it's tiny, but down at the bottom of our right-hand column we have a little bit of a jog here. And I am going to just pop back to Dreamweaver and see if I can fix that. So I am going to click on my content div, which is my left side first of all, and I am going to see what the rules are for that. And it has a height of 623 pixels. I am going to take a look at my other div quickly, the right side div and it has a height of 624 pixels. So we can see where that little jog is coming from. So I have a choice. I can change the length of either the right side or the left side. I am going to go back to my content area and change that value to 624 and go and preview the page again.

Now if we take a look, nice and seamless all the way down. Looks pretty good. And again, just like I mentioned earlier when we were in Dreamweaver, it's all editable text. This new addition to Fireworks brings us that much closer to generating usable web pages right from a graphics editor. It's an important step in Fireworks' evolution.

Show transcript

This video is part of

Image for Fireworks CS4 Getting Started
Fireworks CS4 Getting Started

10 video lessons · 16460 viewers

Jim Babbage
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Fireworks CS4 Getting Started.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.