Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 59234 Viewers
61 Video lessons · 92190 Viewers
82 Video lessons · 104058 Viewers
56 Video lessons · 106759 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.
Your file was successfully uploaded.