Professional Web Applications Themes

Web Page Design in Fireworks - Macromedia Fireworks

Dear All, I am hoping someone out there may be able to point me in the right direction.... I have tried to create a web page design in Fireworks MX 2004 which includes drop down menus etc, etc, but I am getting problems when I try to insert the design image as Fireworks HTML into Dreamweaver MX 2004. The design comes out great within Dreamweaver, and when previewed in a browser seems to be ideal, but the problem is this.......On trying to create a template from the design I can not make an area editable - the imported design is ...

Sponsored Links
  1. #1

    Default Web Page Design in Fireworks

    Dear All,
    I am hoping someone out there may be able to point me in the right direction....

    I have tried to create a web page design in Fireworks MX 2004 which includes drop down menus etc, etc, but I am getting problems when I try to insert the design image as Fireworks HTML into Dreamweaver MX 2004. The design comes out great within Dreamweaver, and when previewed in a browser seems to be ideal, but the problem is this.......On trying to create a template from the design I can not make an area editable - the imported design is brought over in a table, and I can't seem to get around this problem. I have no "large" areas of white space which i can edit and turn my template into something workable.

    I hope this has made sense, and I look forward to learning from an expert out there.
    Scott.


    Sponsored Links
    SMcClean Guest

  2. #2

    Default Re: Web Page Design in Fireworks

    Are you exporting those large areas of white space as image slices or as
    HTML text slices?


    Linda Rathgeber
    ----------------------------------------------------------------------
    Design Aid: 10-Palette Pack for Fireworks & Flash
    http://www.webdevbiz.com/graphics.cfm
    Playing with Fire | http://www.playingwithfire.com
    Victoriana | Theme Pack 03 - Club | http://www.projectseven.com
    Team MM Fireworks Volunteer | www.macromedia.com/go/team
    ----------------------------------------------------------------------

    Linda Guest

  3. #3

    Default Re: Web Page Design in Fireworks

    Hi,
    thanks for your response. I have tried both ways now (!!) thanks to you I tried HTML, and that seems to give good results. I then tried to insert the Fireworks HTML into a basic new page in Dreamweaver, then save it as a template with an editable region. I managed to get the editable region in, but unfortunately when i tried to insert lines into the region, it started knocking my menus down the page!

    Any ideas? .....apart from "read a book"!

    Thanks again for your help.
    Scott


    SMcClean Guest

  4. #4

    Default Re: Web Page Design in Fireworks

    I'm going to paste in an old post by Mark Haynes (whom we miss very
    much) to get you going on this. There are more details in the tech notes
    listed at the bottom of the post.

    Linda R.
    -----------

    The .js file works best when it's placed in the same directory and
    linked to using a doent relative or site root relative link.

    That line of code should be just before the </head> tag, not inside the
    <body> where your image is located.

    The following is a TechNote that covers troubleshooting your Fireworks
    HTML and specifically has information on troubleshooting pop-up menu issues.

    Also to aid caching the menus, you can place the function mmLoadMenus in
    your .js file just above the function "menu" Then you won't have to have
    that function in each of your pages that reference the mm-menu.js, as
    long as they all use
    the same menus, of course.

    Also please find links below to two TechNotes that will help you get
    your Fireworks code into a Template and use site root relative links,
    which you won't be able to test locally, but will make it possible to
    apply the template
    containing the pop-up menu code to any HTML on your site. Here's the
    Troubleshooting technote (images are not included of course):

    Troubleshooting Fireworks code
    Whenever you troubleshoot pop-up menus or any code-related issues for
    that matter, you need to go back to the source and work forward from
    there, testing at each possible juncture to see where the problem
    started and what caused the
    problem. Usually it's something you did or neglected to do, and when you
    figure out what it is, you can avoid the problem altogether.

    Here's what to do:

    1 Return to the Fireworks Source file where the menu came from.

    2 Choose File > Preview in Browser and view the file in your primary
    browser. If it's not set up yet, then set it up by clicking the Set
    Primary Browser... menu option, navigate to the browser's application
    folder, select and OK the
    browser. View the HTML file in the browser and test the menus to make
    sure they pop-up. Don't worry about navigation because the temp file is
    not in your site, so the links won't work unless you used absolute URLs
    to files already on the
    web. If the pop-up menus work, the proceed to step 3, if not, check your
    HTML Setup (choose File > HTML Setup) to make sure that Fireworks is set
    to export either Dreamweaver, FrontPage or Generic HTML.

    Note: The GoLive HTML that Dreamweaver exports does not support the
    pop-up menus. Also the code is not exported for Dreamweaver Library
    (LBI) files.



    Test your Pop-up Menu in the browser to make sure it works:


    Note: This is an example of a horizontal Pop-up Menu. For more
    information on how to customize and create your Pop-up Menus, see
    Fireworks MX Pop-up Menus (Des/Dev Article), or see the Additional
    Information section of this TechNote for
    more information on how you can customize your menus. See Example 1 to
    view working version of this Pop-up Menu.

    If the Pop-up Menus do not work, then return to your source Fireworks
    file and check for the following:

    Are there any slices or hotspots over the buttons, slices or hotspots
    that have the Pop-up Menu behavior attached to them? If so, remember
    that slices equal table cells, and should never overlap, and if they do
    in Fireworks, the top
    slice's behaviors will be exported and any underlying slice's behaviors
    will be ignored. You can have a hotspot on top of a slice, but make sure
    that the hotspot that enables any behavior is always on top of it's
    slice in the Layers
    panel.
    As mentioned above, the incorrect HTML style was selected in the HTML
    Setup, or you chose to export a Dreamweaver Library (LBI) file.

    Check the Advanced settings in the Pop-up Menu Editor to make sure the
    timeout is set to at least 500 milliseconds. Netscape Navigator 4.x will
    not be able to see the links in time if the timeout is lower than 500.
    See Pop-up Menu links
    are not working in Netscape 4.x (TechNote 16473) for information on this
    issue.



    3 Make sure all of your slices are optimized to your liking and then
    choose File > Export. Your location must be set to the current site
    folder or a subfolder thereof and the Save as type pop-up must be set to
    HTML and images. Until you
    are fully familiar with the Fireworks HTML code and how it works, we
    recommend strongly that you export your HTML to the same folder as the
    HTML page that you intend to insert into. There is path information in
    the various JavaScript
    portions that Dreamweaver will NOT update when it's inserted into the
    Dreamweaver HTML, and other HTML editors will not update any of the
    paths in the code.

    Note: Because Fireworks is not "site aware" it exports HTML that will
    contain doent relative paths to any images it exports. If you wish to
    use site root relative paths to your images, you will need to make that
    change in your HTML
    editor.

    Also make sure the Slices field in the Export dialog is set to Export
    Slices. The Options button will take you back to the HTML Setup if you
    want to check your settings there. It is recommended that you check the
    Put Images in Subfolder
    option and either let Fireworks create a default images folder or you
    can click the Browse button to locate, create and select a folder for
    your images to be exported to within your site directory structure. See
    Example 2 to view the
    Export dialog with it's various features.

    4 Export the HTML and images to your site directory or a subdirectory
    thereof.


    5 Don't open the HTML or insert it into a Dreamweaver file (or other
    HTML editor file) yet! Open your browser and then choose File > Open...
    or File > Open Page in Browser... (depending on which browser you are
    using). Browse to the page
    you just exported and open it. Check the pop-up menus to make sure they
    work. If they do then you can continue. If not, you need to look for the
    mm_menu.js file to make sure that it has been generated and that it's in
    the same folder
    with the HTML you exported. If there is no mm_menu.js (Fireworks MX.
    Fireworks 4 exports the fw_menu.js), the pop-up menus will not work. We
    need to find out why that file was not generated. If the menus do work
    then Fireworks has done
    it's job. continue.

    The script line that calls the mm_menu.js (or fw_menu.js) is found in
    the HTML doent that Fireworks exports. It should appear just before
    the </head> tag, unless the HTML is exported as FrontPage HTML, in which
    case this line of
    script is placed just after the <META> tags. See Example 3 to view the
    FrontPage code.


    6 Open the exported Fireworks HTML in Dreamweaver (or your HTML editor)
    by choosing File > Open and view it there. Choose File > Preview in
    Browser (set primary browser if you haven't already) and view the file.
    View the pop-up menus and
    check to see if they work there. If they work there, continue, if not
    Dreamweaver has altered the code in some way... not something that it
    normally does, but there could be reasons.
    Most HTML editors do not alter the code of HTML files opened in the
    application. There could be some reason such as site definition settings
    that could cause problems. Check your site definition for the current
    site and rebuild the
    site cache if problems arise.
    Browsers and servers can be very picky about file and path names. Never
    use space characters or any high ASCII characters in your path or
    filenames. Some servers do not recognize upper case characters. Testing
    locally on your hard drive
    will not reveal this problem. Now is a good time to verify that your
    server will support all filenames and directory names that you have
    included in your site.


    7 Open an empty dreamweaver doent. If you have not already saved it,
    save it to the site folder in the same folder as the exported Fireworks
    HTML. You should never insert external images or code or objects into
    an unsaved Dreamweaver
    file. This is because the unsaved doent does not belong to any site
    definition. Until the HTML is saved in a site, it's just an open HTML
    without a home. This same principle holds true for FrontPage as well.
    Do not save your doent as a Dreamweaver Library (LBI) file or a
    Dreamweaver Template (DWT) file. There are special instructions you'll
    need for using Pop-up Menus in them.

    If the file you are inserting into is not in the same folder as the
    Fireworks HTML and .js file, you will have to alter the line of code
    shown above and add the path to the .js file. This is a common error
    users make.

    Insert the Fireworks HTML into the newly-saved HTML file in Dreamweaver.

    Use the Insert Fireworks HTML object on the Common tab of the Insert
    panel. or...

    Use the Insert > Interactive Images > Fireworks HTML... menu command,

    Note: Do not save your doent as a Dreamweaver Library (LBI) file or
    a Dreamweaver Template (DWT) file. There are special instructions you'll
    need for using Pop-up Menus in them.

    Next Browse to the Fireworks source HTML, select it, click Open and then
    OK. Once the Fireworks HTML is inserted into the Dreamweaver file, Save
    the file and preview in browser. check to see if the menus work and you
    should be able to
    test the links as long as they are not site root relative. For
    information on how to insert your Fireworks HTML into a FrontPage
    doent, see Inserting Fireworks MX code into FrontPage 2002 HTML files
    (TechNote #####).


    Note: Site root relative links only work from the remote or testing
    server. They do not work when viewing your files from your local drive.
    For more information on working with site root relative links in HTML
    files containing Pop-up
    Menus, see the related TechNotes in the Additional Information section
    of this TechNote.

    8 Now that you've verified that the Fireworks HTML is correctly inserted
    into the Dreamweaver test file, you are ready to insert it into a REAL
    file in Dreamweaver. Open the file that you intend to insert the
    Fireworks HTML into. Make
    sure that it's saved and that it's in the same directory as the
    Fireworks HTML. There are certain paths in the mmLoadMenus function as
    well as in the <script> area of the <head> as mentioned above that may
    need to be updated after you
    insert the HTML if your Dreamweaver target HTML is not in the same
    folder. Use the Fireworks Object or the Insert > Interactive Images >
    Fireworks HTML... menu command to insert the Fireworks HTML as before.
    Preview in browser to test
    and see if it works.

    9 If everything works without any errors, then you've done everything
    correctly. If not
    you probably need to fix some paths or move some code around in your
    file. There are four places to look for in the code and one place in the
    site: In the HTML that the Fireworks HTML was inserted into, click the
    Code View icon and look
    for the line that reads:

    function mmLoadMenus() {

    this should appear between the <script language=javascript> and the
    </script> tags.

    You should only have one major JavaScript section that contains all of
    the functions for the page. Any other <javascript> tags should be only
    one line or so and should NOT contain any functions. The code that
    follows the above function
    entry tells the JavaScript how many menus and menu items are to be
    displayed as well as what the contents and links are for the menus and
    their menu items. See Fireworks MX Pop-up Menu arguments (TechNote
    #####) and Customizing and
    troubleshooting Pop-up Menu images (TechNote 14995) for some details on
    the contents of that function. Generally the mmLoadMenus function should
    be the last function before the </script> tag.


    Also in the HTML file you'll find a line that looks like this:

    <script language="JavaScript1.2" src="mm_menu.js"></script>

    This should normally come just before the </head> tag. This is where the
    external JavaScript file is referenced. If you need to you can add a
    path to the external .js file if the Fireworks HTML was not exported to
    the same folder for
    some reason or other:

    <script language="JavaScript1.2" src="/scripts/mm_menu.js"></script>

    (the example above is a site root relative path which tells the browser
    to look in a folder under the site root named "scripts" for a file named
    mm_menu.js)
    The mm_menu.js is the javascript that controls the menus. If the path to
    this file is not correctly encoded in your HTML, your menus won't work,
    so it's critical that this link and filename be correct.

    In the HTML file again, just after the <body> tag you should find the
    following:

    <script language="JavaScript1.2">mmLoadMenus();</script>

    Depending on how you inserted your Fireworks HTML, it's quite possible
    that this line will not be just after the <body> tag, so you will need
    to look for it and cut it from wherever it landed and place it on the
    line just after the
    <body> tag. Internet Explorer on the Mac has problems with menu position
    if this is not inserted here.

    The external script link, the body tag and the internal call to the
    mmLoadMenus function.

    The <a> tags where the slice images are located in the <body> or the
    <map area> tags if hotspots were used should contain the events and calls:

    onMouseOver="MM_showMenu
    (window.mm_menu_0501165951_0,0,20,null,'<pop-up image trigger name>')

    and

    onMouseOut="MM_startTimeout();



    Lastly, the mm_menu.js file must be in a folder inside your site such
    that the tag in the second in step 9, above is able to locate that file.


    If all of these components are in place, the menus should work.

    .. Here are the two technotes that you should read before using Pop-up
    Menus in Templates:

    <http://www.macromedia.com/go/15088>
    <http://www.macromedia.com/go/15832>

    NOTE: though these were written for Fireworks 4, the principles shown
    still hold true for FWMX. Just the function names and the external .js
    file names have changed.

    enthusiastically,

    Linda Guest

  5. #5

    Default Re: Web Page Design in Fireworks

    Hi Linda,
    thankyou very much for doing that, I will try it out in a minute and let you know how I get on.

    Cheers
    Scott



    SMcClean Guest

Similar Threads

  1. 2 Fireworks menus on 1 page: FW Bug
    By surfguy in forum Macromedia Fireworks
    Replies: 3
    Last Post: December 16th, 09:52 PM
  2. Fireworks and Front Page
    By sleepyj in forum Macromedia Fireworks
    Replies: 2
    Last Post: November 14th, 05:48 PM
  3. Magazine Design in Fireworks? Help Me please!
    By Bill .:CMX:. in forum Macromedia Fireworks
    Replies: 2
    Last Post: August 26th, 06:40 AM
  4. fireworks integration with other web design soft
    By v_roma webforumsuser@macromedia.com in forum Macromedia Fireworks
    Replies: 0
    Last Post: July 15th, 02:01 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139