Solved

Exporting Files

Posted on 2004-08-31
10
234 Views
Last Modified: 2013-12-13
I have created a web template in Fireworks and have exported each as an html page with different names.  However, this has created FAR TOO MANY image files, as each page has its own page name in front of all images.  Hence, many of these pages have the same images on them.  Is there any way to only export these image files once per site, rather than fifteen times per site?  Please let me know if I need to clarify further.
0
Comment
Question by:johnson00
  • 5
  • 5
10 Comments
 
LVL 10

Expert Comment

by:Havin_it
Comment Utility
I think I get the gist: you're making whole pages (or page outlines at least) in Fireworks, and each time you do it you get a different-named set of identical images created. If they are identical every time, and you are saving different HTML pages into the same folder, this is easy enough:

From the export dialogue, choose Options... -> 'Document Specific' tab. This tab gives you options for the naming convention used in creating the images. Just change the first dropdown from 'doc.name' to 'none', and use this setting every time you export. The exporter will prompt you that the filenames already exist, and ask you if you want to overwrite them (don't bother, they're the same after all...)

If some pages are going to have different images here and there, you'll need to be more careful that Fireworks doesn't create duplicate names for different images (you could end up overwriting images that you need on other pages).  If that's your situation, you will need to do some hand-coding outside of Fireworks.

Of course, you could just copy the first HTML file with different names...
0
 
LVL 10

Expert Comment

by:Havin_it
Comment Utility
Also, on a more general design note, if your page is very image-heavy, you might want to save your surfers some load-time by separating the graphical and other content onto separate pages. For example: surfer navigates from your home page (which in your case is a great big Fireworks table with lots of images) to another that's similar. Depending on the browser settings, this can mean them having to reload all the same images.

Alternative: Your table contains most of the graphical content (I'm imagining some kind of frame decor and maybe a navigation system, is that about right?), while the text of the home page is on a separate page, loaded into the middle of the table in an Iframe (inline frame). Then you rewrite the navigation links to have a 'target' which is the name of the Iframe. So, your other pages are similar to the 'embedded' home page, and when you follow a link, they are loaded in the Iframe. The 'parent' page is never reloaded, and so neither are all those images.

Sorry if you are already well aware of this, but personally I always do graphic-heavy sites this way to save the users some time - not everyone is on broadband yet after all!  Also, if you've been playing with those lovely 4-state rollover buttons in Fireworks, this is by far the easiest way to have 'button down states' persist across pages.

Just my 2 pence (well, couple of quid probably ^_^ )
0
 
LVL 2

Author Comment

by:johnson00
Comment Utility
Thank you for the answers!  I'm new to Fireworks and creating graphic heavy sites, so all information is welcomed!  Each Fireworks page does have a different header picture.  Other than that, each page is the same with page border and navigation.  I could create those page headers in Dreamweaver in a layer and place them where I want them.  Do you know if Dreamweaver allows the same text effects that Fireworks does?  I guess you could say it's a graphical text.  For now, all pages are the same, but eventually I'll be placing graphics in some pages, or at least the home page will have a header created.  Are Iframes created in Dreamweaver or Fireworks?  I'm not familiar with them.
0
 
LVL 2

Author Comment

by:johnson00
Comment Utility
row 1, column 1 of each page will be different for each page.  How would you suggest I get around that?
0
 
LVL 10

Expert Comment

by:Havin_it
Comment Utility
The Dreamweaver MX GUI doesn't actually have Iframe insert (maybe MX2004 does), though it is a recognised tag in the code view's tag library (so auto code completion will work with it).  Do you use code view much? It's always good to have it open, even just as a sliver across the top of the GUI, just so you can see what the stuff you insert really looks like. Once you've been looking at it for a while, HTML is actually very intuitive - you'll soon be able to spot, for example, cases of DW's bad habit of piling up redundant tags around an image or bit of text.

<but I digress>

Right, iframes. A simple construction might be something like this:

<iframe name="contentFrame" id="contentFrame" src="home.htm" height="400" width="100%">
You could put some alternative content here for people with VERY OLD browsers
that don't support this tag, but we are talking SERIOUSLY old.
</iframe>

Then if you amend your nav links to include this target attribute,

<a href="someotherpage.htm" target="contentFrame">Some Other Page</a>

the linked page opens in the iframe. (SIDENOTE: this targeting is not necessary on the pages inside the iframe. If home.htm contains a link with no target attribute, the linked page will still open in the iframe.)

If you want a different fixed graphical header for each content-page (ie one that doesn't scroll out of view when you scroll the content-page), this might actually be easier done in Fireworks, though it will be a bit more complex. Essentially it would involve incorporating all of the headers into your Fireworks navbar or rollover, so they swop when the nav buttons are clicked. (Remember though, that iff they are big images, that's another case of a lot of load-time!)

Tell me, are you building your nav system in Fireworks with the Navbar creator, or with a series of separate rollover buttons? Oh, and what version of Fireworks are you using?
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 2

Author Comment

by:johnson00
Comment Utility
I'm using a combination of roll over buttons and I'm using Fireworks MX 2004.  So I'll have to hard code all of the iframes in the html of the pages?  Just loading one page of graphics takes a while for me, and I'm on a T1 line, so  I think I seriously need to grasp this concept your revealing!  

I think I'm following you on the swap images when buttons are clicked, and that would work, since the headers correspond to the navigation links in the main file.  Can you walk me through how to add this swap image behavior?  I'm not sure how to tell fireworks to only change the graphic when the link is clicked. I know in Dreamweaver it would entail adding a behavior, but like I said, I'm new to Fireworks.  If I'm following what you're saying correctly, then linking the swap image behavior would allow me to only have one template that would work for all pages, right?  Right now, I have like eight templates that I'll be adding html to because each has a different heading on the page.  

Would the iframes also allow me to insert pictures as well as text?  There may be some requests to insert pictures within the text occassionally to break up the white space a bit.  I know for sure that the homepage will be different from all others, as it will have a graphical header added.  I guess once I have that added, I could also add that graphic in the swap images detail as well, so it would go away on pages it didn't need to be on.  Boy, this is sounding more and more complicated, but also necessary for appropriate load times.  

Thank god I got an answer from someone who's so helpful!  This could have really been a sad performing page had I not asked this question!

I've not used the navbar creator before.  Would this be a better option and make life easier?  My page has left navigation, as well as navigation on the top right of the bar going across the top.

Thanks A BUNCH!
0
 
LVL 2

Author Comment

by:johnson00
Comment Utility
Also, I don't quite understand how the frames will all work.  So I export the fireworks file after having added all of the swap image attributes, and it's working well.  Then do I load the page in Dreamweaver and start creating frames?  I have Dreamweaver MX 2004, and there is plenty in the helpfile about frames, but nothing designated solely for iframes or in line frames.  
0
 
LVL 2

Author Comment

by:johnson00
Comment Utility
Oh boy, now I thought of another dilemma as I'm looking at these pages!  The bar that I have on the left, with the navigation, the size of it will need to be relative to the length of the html page content.  I don't want to have a 800 high pixel left bar when I only have 250 pixels worth of html content for the page, and vice versa.  Some of the pages will require that side bar to be nearly 1500 pixels high, while other pages will need half of that or less.  Any suggestions there?
0
 
LVL 10

Accepted Solution

by:
Havin_it earned 500 total points
Comment Utility
Sorry, missed your last post while typing. This can be handled by a 'disjoint rollover' - something Fireworks does very well. Here's a suggestion; note that this assumes separate rollover/swap-image buttons for your navigation, not a 'nav bar behaviour' as I've never used that feature.

1) Make your Fireworks doc, slice it up, leave an empty area (without a slice) in the middle. This'll be your iframe.Make sure none of your artwork strays into this area, it will be lost!

2) When you select your button elements and write the link addresses for them, you'll see a 'target' box in the Property Inspector. Whatever you want to call your iframe (I usually just go with 'main'), write that in the target box for every button.

3) In the Frames & History panel, drag Frame 1 and drop it on the 'new/duplicate frame' button (a sheet of paper with a plus-sign). This will duplicate Frame 1, but the dupe will now be Frame 2. That means the other frames that contain your button rollover states are displaced, which will muck up the buttons. So:

4) Drag the new Frame 2 down to below all other frames and release. It will now be Frame 2,3 or 4 depending whether you included 'Down' and/or 'Over while down' states in your buttons.

5) Repeat Step 3 for however many other pages you have. You can skip step 4 by duplicating the already-duplicated frame instead of the original, then the new dupe will always appear at the bottom.

6) for each frame, edit the contents so that row1_col1 contains the header for another page. Keep a note of which frame represents which page.

7) With Slice Visibility turned on, select the button that links to the page related to the first of your cloned frames. Drag its clock icon to the row1_col1 slice and release. The swap-image dialogue will appear; select the frame that contains that page's header.

8) Repeat this for all the other button/frame pairs, and export, ensuring to uncheck 'include areas without slices'. The resulting HTML page will have a big hole in the middle, which is where your iframe will go. When you rollover the buttons, the headers should change too. Assuming you don't want them to change until you click the links, do this:

8) Import your Fireworks HTML into a blank Dreamweaver page. Select the split Code/Design view.

9) In the Design window, select your first Nav button. This will highlight a chunk of code in the Code view.

10) In that bit of code, find the bit that says: onMouseOver="MM_swapImage('index_r1_c1','','index_r1_c1_f4.gif',1);" - there will probably be two similar bits like this within the double-quotes, so just highlight the bit that mentions 'r1_c1' inside its brackets.

11) Cut this bit out (Ctrl+X), and write a new attribute inside the same <a> tag as follows:

onClick="<paste the bit you cut out>"

(Now the header will only appear when the button is clicked)

12) The same tag will also have an onMouseOut attribute. From this, remove the bit that says

MM_swapImage('index_r1_c1','','index_r1_c1.gif',1);

(now rolling out of the button will not affect the header)

13) Make sure you have your content-pages in place, even if they are only blank documents for now.

14) In design-view, select the empty middle area. The equivalent part of the code should be something like

<td></td>

or possibly

<td>&nbsp;</td> [there may also be some height and width attributes]

Delete '&nbsp;' if present, make a new line in the code between <td> and </td>, and write this:

<iframe name="main" id="main" src="home.htm" height="100%" width="100%"></iframe>

[home.htm is whatever page you want to have appear when the main page is loaded. Code-completion will let you browse for the page if you prefer.]

14) Preview your page and see if it works as expected. If not, open a question in the Dreamweaver area and I'll continue this there. This is already heavily off-topic!
0
 
LVL 10

Expert Comment

by:Havin_it
Comment Utility
See I missed a couple more posts while typing.

Stretchy tables can be done, but that's a case for code-hacking as well. I think it will also qualify as a new questiion...
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

I've been using this technique since Adobe CS2, and it should work with any version of Illustrator that includes the appearance panel. In this tutorial we'll create a button using the appearance panel in Adobe Illustrator, and then save it as a r…
Many programs have tried to outwit PowerPoint in terms of technology and skill. These programs, however, still lack several characteristics that PowerPoint has possessed from the start. Here's why PowerPoint replacements won't entirely work for desi…
In this Micro Tutorial viewers will learn the basic shortcuts and functions of Illustrator. The viewer will learn about the paintbrush tool, anchor points, font sizing, and more.
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 …

771 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

8 Experts available now in Live!

Get 1:1 Help Now