2 Replies Latest reply on Jul 7, 2012 12:22 PM by Nancy OShea

    Adding code on top of Fireworks HTML in Dreamweaver???

    NikaSoul

      I am needing help with adding code on top of my Firefox HTML that I import into Dreamweaver. I am very new to all this, so I'll explain my process and I would love some help!

       

      Basically, I start with Photoshop and create a psd of what I want my page to look like. Then I open it in Fireworks, slice it into buttons and sections, create rollovers for my buttons and export out the html and images. Then in Dreamweaver I create a new html page, import the fireworks html, set up the links for my buttons. All this works fine so far. The problem I run into is when I want to add in outside code (mailing list sign up form, paypal buttons, facebook like plug-in). I tried using AP Div Tags. This was a bad idea because the tags stay in place when the browser window is resized, but the other elements move. So, my problem is how to add in this code (which writing code or even reading it isn't something I know about) and keep it in a fixed position relative to my imported fireworks html. Please take a look for yourself... www.stopbitchingstartarevolution.com. Many of the pages (store pages, join page, etc.) have these elements and they are in different places depending on the size of your browser window. So, I have made my whole site this way and I am basically ready to launch it and try to get traffic to it, but this is my last main problem except for general improvements and spelling errors that I will tend to later.

      Sorry to be long winded, but here is my predicament. I greatly appreciate any willingness to help.

      Thanks,

      Nika

        • 1. Re: Adding code on top of Fireworks HTML in Dreamweaver???
          adninjastrator Level 4

          Well I hate to be the one to tell you but you are building your site on a foundation of sand..

          I start with Photoshop and create a psd of what I want my page to look like. Then I open it in Fireworks, slice it into buttons and sections, create rollovers for my buttons and export out the html and images

          Using PS to give you visual of what the site should look like is OK... after that... almost any "auto generated" HTML will be problematic, as you are finding out now.

          You would have been much better off to learn a little basic HTML and CSS and hand coded your site, especially since you want to add and edit the existing HTML.

          http://www.w3schools.com/html/html_basic.asp

          http://www.w3schools.com/css/css_intro.asp

          I tried using AP Div Tags.  This was a bad idea...

          Yes... yes it was, because you didn't first build a better foundation, knowledge of how HTML and CSS work together.

          http://apptools.com/examples/pagelayout101.php

          The particular rule your code failed to adhear to was what I call the "Parent Rule".

          For your review:

          In my opinion, one of the worse features of Dreamweaver is the way it encourages the use of AP divs for web page layout.

          It would be much less troublesome if they had built in a feature to teach and enhance "Natural Flow" design rather than drag/drop or AP div positioning.

          You ask about other options. Yes, use Natural Flow, meaning the page elements are parsed by the Web browser starting at the top of the page, line one of the code, then line two, then line three, all the way down to the bottom.

          Using a declared position like absolute tells and browser to take that element out of the natural flow and do something different with it. So you've got the browser parsing in order from top to bottom, then throwing in some elements that are completely out of the flow.... they can be very hard to control, because there are special rules that apply to elements with declared positions.

          The least under stood of those rules is what I call the "Parent Rule". Giving an element a declared position like relative or absolute can have huge differences in how that element is actually displayed depending on whether or not the PARENT of that element also has a declared position.

          So a div which is position:absolute for example will display one way if it's parent also has a declared position and it will display in a completely different manner if it's parent does NOT have a declared position... to review:

          If a div's parent container DOES NOT also have a declared position, the child <div> will do 1 of 2 things.
          If position:relative, it will position as desired but space will be left as though that element was still in the natural flow. So you may move the 500 X 100 element down and over, but a 500 X 100 space will be left, as though it was still there.
          If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands.

          So be sure to give a declared position to both the parent and the child <div>.

          Neglecting to follow this rule is the main reason why the use of declared positioning fails.

           

          To really understand this, you may have to first do some review of the links above. But believe me, this explains exactly why you are having the problem you describe.

          Best wishes,

          Adninjastrator

          • 2. Re: Adding code on top of Fireworks HTML in Dreamweaver???
            Nancy OShea Adobe Community Professional & MVP

            This 3-part tutorial explains how to properly bring your Design Comp from Photoshop or Fireworks to a CSS Layout in Dreamweaver:

             

            Part 1 - Initial Design

            http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html

             

            Part 2 - Markup preparation

            http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt2.html

             

            Part 3 - Layout and CSS

            http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt3.html

             

             

            Nancy O.