Insert widget in webpage div

I started using Adobe Widget Browser two days ago. I installed the program and browsed the widgets/applications. I downloaded one called Spry Menu Bar 2.0
opened it and used it to edit a menu bar. i saved it. I wasn't sure how to get it into Dreamweaver. I am using Dreamweaver CS4.
Scott gave me the following directions which worked beautifully. However please read on after his instructions for my next question. I know I might seem a bit dull, but truth is I'm very new to the whole Adobe package and feel lost at times.
CS5 added the ability to insert Widgets from the Widget Browser so you need CS5 to get that functionality.  If you don't have CS5 yet you can still use Widget Browser to insert the Widgets in a new page in your site.  Just add the widget you want to "My Widgets" then click the "Save Widget Files" button after adding the widgets  to "My Widgets" then give it a name of an html file to create in your  site.  The Widget Browser will create a sample html file with the links  to any external javascript and css files which it will save relative to  the html file.
-Scott
Thank you so much, that is helpful. I actually own the CS5 upgrade but haven't installed it yet because the learning curve is so steep for me, I thought it might be better to learn CS4 first and then move to CS5.
So after saving the html widget file to my website, how do I actually install it in an existing page?
for example I made a verticle menu widget with fly out sub-menu that I want to use for navigation. I want to install that menu in a div I have defined as "nav_container". How do I insert the menu into my container?
Thanks in advance

Now might be a good time to upgrade to CS5, especially since you have it!  With CS5 it will be easy to insert the Widget into your navigation div. Just open your page position your insertion point in your nav_container <div> and select Insert, Widget.
If you really don't want to upgrade your alternative is to copy and paste the code from the test page.  But you will need to make sure that all of the code blocks, Javscript, CSS, and the links to the external .js and .css file in the head are inserted in the new document and that the url's are mapped correctly. If you save the HTML Widget page at the same location as your existing html page the files will all be saved relative to that file, but using CS5 will be easier.
-Scott Richards
Dreamewaver Team

Similar Messages

  • Inserting widget phatfusion imagemenu

    I'm pretty new to dreamweaver but have inserted a few simple widgets on my webpage with no problems.
    I am now trying to insert "phatfusions imagemenu" http://www.phatfusion.net/
    I would like to have my own pictures with menu titles but I can't even get the images that the widget comes with to appear.  I'm not sure what I am doing wrong.  I have uploaded the entire file with the images, css files, ect but still it is not working.
    Can anyone think of what I may be doing wrong.  I have inserted widgets in the past but can't seem to get this one to work which is too bad because I think it looks great.
    Thanks for your help!

    Hi there,
    Thank you both for your speedy responses!  I made sure everything is validated, but I still get this strange white border in Safari as if it wants to put scroll bars on the right side and bottom of the page.  FF goes ahead and puts scroll bars in.  The other strange thing is that when I try to put pictures (totally unconnected with the widget) on the page the widget disappears.  Any help this time will also be greatly appreciated!  Thank you so much!
    Cheers,
    A.B.

  • Cannot insert Widget in DW CS5

    I have downloaded and customized several Widgets from the Widget Browser.  When I open a page within my site, I go to Insert ->
    Widget and nothing happens.  Also, when I go to the "Insert" group, select "Common" and click Widget, still nothing.  Does anyone have any thoughts on this problem?  On the inset menu, there is no option to expand the menu item.  Any help would be appreciated!
    Thanks,
    Tim

    David, thank you for the reply, however, the problem I am having is not with customizing a "Spry Menu Bar.  I have customized and saved various widgets to my presets, but cannot insert them the way that I believe it was intended to work.  You see, everything that I have read, and all videos I have watched show people clicking on a blank area on their webpage, and clicking on Insert -> Widget.  It is at that pont that they are prompted as to which widget they intend to insert.  As you will see on the attached image, it says you can insert the widget by performing the task as I mentioned or by going to the Browser Lab side dock, and clicking on "Common" and then on Widget.  Saving the presets to seperate files is quite a but different than what I am trying to do, and how it is described, or as seen here http://www.youtube.com/watch?v=5P91PPCw2Bs.  Please see attached, and again, thanks for your help!
    -Tim

  • CSS Help! Inserting flash into a div has caused layout change

    Hi,
    I am trying to insert flash into a div. I'm new to CSS so I
    think I must be doing something wrong. As soon as I insert the
    flash the layout goes wrong and all divs below it are pushed down
    out of my "main" div. I've now taken the flash.swf out and inserted
    an image again, but it's still wrong. It previews fine in the
    browser though.
    Any ideas!?
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
    Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
    <link href="style.css" rel="stylesheet"
    type="text/css">
    </head>
    <body background="images/newwall.jpg">
    <div id="wrap">
    <div id="main">
    <div id="flash"><img src="images/flash.gif">
    </div>
    <div id="strip"><img src="images/strip.gif">
    </div>
    <div id="middle">
    <div id="news">
    <div class="newstext">NEWS....
    </div>
    </div>
    </div>
    <div id="gap"><img src="images/gap.gif">
    <div id="subnav"><img
    src="images/wallpaper.gif">
    <div id="bottom"><img src="images/bottom.gif">
    </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

    And where is the CSS?
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.dreamweavermx-templates.com
    - Template Triage!
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    http://www.macromedia.com/support/search/
    - Macromedia (MM) Technotes
    ==================
    "Dava" <[email protected]> wrote in message
    news:ei2526$mji$[email protected]..
    > Hi,
    > I am trying to insert flash into a div. I'm new to CSS
    so I think I must
    > be
    > doing something wrong. As soon as I insert the flash the
    layout goes wrong
    > and
    > all divs below it are pushed down out of my "main" div.
    I've now taken the
    > flash.swf out and inserted an image again, but it's
    still wrong. It
    > previews
    > fine in the browser though.
    >
    > Any ideas!?
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
    Transitional//EN">
    > <html>
    > <head>
    > <title>Untitled Document</title>
    > <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
    > <link href="style.css" rel="stylesheet"
    type="text/css">
    > </head>
    >
    > <body background="images/newwall.jpg">
    > <div id="wrap">
    > <div id="main">
    > <div id="flash"><img src="images/flash.gif">
    > </div>
    > <div id="strip"><img src="images/strip.gif">
    > </div>
    > <div id="middle">
    > <div id="news">
    > <div class="newstext">NEWS....
    > </div>
    > </div>
    > </div>
    >
    > <div id="gap"><img src="images/gap.gif">
    > <div id="subnav"><img
    src="images/wallpaper.gif">
    > <div id="bottom"><img
    src="images/bottom.gif">
    >
    > </div>
    > </div>
    >
    > </div>
    > </div>
    > </div>
    >
    >
    >
    > </body>
    > </html>
    >
    >

  • Insert Fluid grid layout div tag pastes CSS

    I am trying to create a new fluid grid layout.  I am able to insert 2 new layout divs, but after that, the "Insert Fluid grid layout div tag" fails.  I am in "split" display, and the code view shows CSS instead of the HTML, and the design view shows a page of  CSS code.
    Control-Z always backs me up to the proper display of code and design, but the CSS file does not contain the definitions for the newly-inserted DIV.
    Before insert:
    After insert:

    Yes.  I created a new site, named as you see, for the files created as I learn the new features in CS6.
    The problem I am seeing is 100% reproducable. The 1st 2 layout divs are inserted correctly, then all after that fail.  After the 2nd screen shot above, a single ^Z will restore the code & display panes.  I have learned that I can quickly switch into editing the CSS file, paste in the definitions for the new div (a pain, but do-able), then I can do all of the other editing, resizing, etc.
    One thing I have not tried, but will, is to remove my custom key-mapping and try this in a standard workspace.

  • What must i do to get Insert Fluid Grid Layout Div Tag on dreamweaver?

    Why an i not able to get the Insert Fluid Grid Layout Div Tag on dreamweaver?
    I am using Creative Cloud

    Hi Leroy, this post in the Adobe Dreamweaver Team Blog may assist you with the updates to Dreamweaver: http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
    Let me know if you still require assistance.

  • Insert Widget dialogue box not popping up.

    i am trying to insert a widget into my web page.  When i go to Insert>Widget i click on widget and nothing happens.  From watching the Tutorial vidoes a dialogue box should pop up asking which widget i would like to use and which preset. Here is what i have done.
    i have tried using the insernt menu method as well as the Insert sidebar
    i have updated my version of dreamweaver to 11.0.3 however my about says it is 11.0
    i have tried restarting the dreamweaver application
    i have tried restarting my computer
    i have tried downloading more than one type of widget thru the widget browser.
    I am using win7 Pro and Adobe Master collection CS5

    Hi Colin,
    In Dreamweaver, go to Edit>Preferences & make sure that the checkbox for "Show dialog when inserting objects" is checked.

  • Problem with inserting widgets

    When I try to insert widgets I sometimes get the message (dialogue box) "Not a valid widget". Actually this happens most of the times.
    Can someone please tell me what is wrong?
    Kindly,
    Jacques

    Hi there
    It's usually best to insert widgets from the Widgets panel. Window > Widget
    If you click Insert > Widget you get a file browsing dialog. This dialog allows you to point at ANY SWF file. Not all SWF files are widgets. So I'm thinking you used this method and are pointing at perhaps SWF animations and expecting them to be widgets. Hence the message.
    Cheers... Rick
    Helpful and Handy Links
    Captivate Wish Form/Bug Reporting Form
    Adobe Certified Captivate Training
    SorcerStone Blog
    Captivate eBooks

  • Inserting pictures into a div in a certain formation. help. thanks!

    I'm new to forums and Dreamweaver cs4 and code... I really could use  some help. I want to put pics where the black boxes are but i cant seem  to get them stacked as they look. I also want to be able to have  words/paragraphs to the left of the four pictures. I tried; insert picts  with padding/floating, tables, seperate divs, create web photo album, i  just cant  get them lined up like that. I'm using dreamweaver cs4 and i  have my layout seperated with divs, so the white body part is a  indidual loating div. Please help. Thanks.
    ps. The "right body" div (white box) is set at like 600w x 400h. I dont want that dimenstion to change.
    thanks again everyone who can help.

    You want something like this??
    http://alt-web.com/TEMPLATES/2-col-fixed-with-floats.shtml
    View source in browser to see the code.
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

  • Can't insert widget as document head read only

    When I try to insert my LIghtbox Gallery widget into my web page in CS5.5 I get the message
    "This widget requires code that must be inserted into the head of the doucment. Insertion cannot happen as the head of this document is read only"
    How do i turn read only off? Or is there any other way to insert it?
    Many Thanks

    Hello Jenny,
    if I understand you correctly, you should only call the widget you need and click "code wiew"
    From there you have to copy the entire source code into an empty DW file. So you can see how that works.
    You can add only the needed code into your file or you can do it all in reverse, by adding your website contents into the widget source code.
    Hans-Günter

  • How to create a smartimage widget in a div

    Hi All,
    Now I create an event calendar, and click every date in edit mode, a dialog will be shown, not the one of EXT, just a simple <div>,
    and it need to add an image like the smartImage widget.
    But I don't know how to add a [smartImage] in the div,
    So, do you have any idea ??
    Thanks all.

    Use the CSS border property. Start here:
    http://reference.sitepoint.com/search?q=border
    Walt
    "Fun Leprechaun" <[email protected]> wrote
    in message
    news:fs76ud$d86$[email protected]..
    > Can anyone tell me how to do this? Seems like a simple
    request -
    > hopefully it is! Also, how do I change the border color?
    >
    > Thanks!

  • Insert flash in webpage

    Hello everybody
    Iam new to web designing and please help me
    how to insert a flash into the webpage directly without
    embedding the flash
    that is without using <embed> tag so that page becomes
    flash itself otherwise we have to click to activate the flash
    content
    this should not happen the flash content must be
    automatically activated when the web page loads
    what the procedure for this

    Use SWFOject:
    http://blog.deconcept.com/swfobject/

  • Help - Inserting image - distorts webpage

    Hi all
    First post here - I am a novice user of dreamweaver and
    wondering if anyone could kindly answer a query that I cannot
    solve.
    I am currently creating a website in dreamweaver mx2004 using
    tables and I have allocated space for an image to cover most of the
    index page. I insert an image into the space and it looks fine in
    design view but when I preview in my browser - the webpage is
    distorted in that the rest of my images to the side of page are
    spread across vertically making the webpage longer.
    Please help as I cannot work out what the problem is.
    Many thanks in anticipation

    Screenshots do nothing. The answer is always in the code.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "JoeyD1978" <[email protected]> wrote in
    message
    news:fl35l6$a48$[email protected]..
    > Sure, post your html too if you don't mind.

  • Inserting link to webpage in flash file

    Ok i created my flash intro animation and at the end of the
    movie i want it to automatically load to a webpage
    http:www.eaglechassis.com/index1.php does anyone know how i can do
    this. Thanks for anyones help in advance

    getURL("
    http://www.eaglechassis.com/index1.php");
    on the last frame of the intro.
    cheers,
    blemmo

  • Trouble inserting padding in webpage

    I built a site in Flash and pulled it into Dreamweaver, gave it a background and pushed it down from the top.  What I want to do is center it in the middle of the page but I can't seem to do it.  I have some options in the "Align" box such as, Top, Middle, Absolute Middle, etc. but none of these seem to do anything.  I'm pretty new to DW so I'm not sure what I've done wrong.  Little help...??
    The address is http://www.resolutemedia.net.
    Thanks...

    You cannot center something that has a width of 100%.  Remove the padding from your div container that surrounds the flash file.  That will only pad the flash file from the div container which is not what you are trying to do.
    Now, define a width to your div container around the Flash and then set the margin attribute to: margin: 35px auto;.  That will give you 35px on the top and bottom of the Flash file and auto will center the Flash file horizontally.

Maybe you are looking for