7 Replies Latest reply on Mar 30, 2010 9:59 AM by Tomster87

    Give existing site liquid capability???

    Tomster87

      I just created a site from scratch using Fireworks CS4 and then exporting it into Dreamweaver CS4. This is my first website ever and didn't foresee the liquid design issue until it was all together.  So now the pages don't automatically resize to the confines of the browser.

       

      Is there a simple fix to this? I understand that liquid designs are based upon percentages, but don't know how to change it or if it even possible.

       

      Also, I don't know really HTML so if there is an easy fix without much coding it would be greatly appreciated.

       

      Here is a link to my site for reference.

        • 1. Re: Give existing site liquid capability???
          Nancy OShea Adobe Community Professional & MVP

          1) There is no content on your web site.  It's all images.  Search engines can't read images so your site is dead in the eyes of Google, Bing, Yahoo and others. How will people ever find your chorus' website?

           

          2) Fireworks is not an HTML authoring app.  It is a graphics app.  Use Fireworks to create images and save them in a web friendly format.  Use DW to build your web pages.  Use real text in headings <h1>, <h2> <h3> and <p> tags; not images of text.

           

          Taking  a Fireworks (or Photoshop) comp to a CSS based layout in DW

           

          Part 1 --
          http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html

          Part 2 --
          http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt2.html

           

          How to Improve my Site's Search Engine Optimization?

          http://alt-web.blogspot.com/2010/02/how-to-improve-my-sites-seo.html

           

          CSS Liquid Layouts (view source to see the code)

          http://alt-web.com/TEMPLATES/CSS2-Liquid-Page.shtml

           

          Good luck,

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          http://alt-web.com/
          http://twitter.com/altweb
          http://alt-web.blogspot.com

          • 2. Re: Give existing site liquid capability???
            Tomster87 Level 1

            Thank you for your quick reply. I really appreciate it.  I am surprised to here that the site is comprised just of images.  My inexperience and ignorance in this area is becoming more and more apparent. 

             

            Code was created which is part of my surprise.  It is in the code viewer window in Dreamweaver.  Is it not being uploaded to the site while the images were going up?

             

            I appreciate your comments below. At this point am kind of at a loss. Do I delete all of the code created and start over?

            • 3. Re: Give existing site liquid capability???
              martcol Level 4

              Nancy O's advice is spot on.


              To rework your site will involve a steep learning curve if you're not up on HTML and CSS but for several reasons you might like to consider rethinking your approach.  As far as I understand it converting an image layout to HTML in an image editor is really only a quick n' dirty method to get the page into a browser as a mock-up.  This should not be used as a way to build the actual site.


              However, there is one small thing that you can do to get your content to sit on the page more comfortably and that is to center the layout.


              #FWTableContainer426474399 {
              height:776px;
              margin:0 auto;
              position:relative;
              text-align:left;
              width:1030px;
              }

              Change the line above in your index.css file and also add this rule to the top of that page:

              body {
                 text-align: center;
                 }

              You can see a better explanation of what's going on here.

              Like I say, this is no substitute for the steps that Nancy O is pointing you to but I hope it's helpful.

              Martin
              • 4. Re: Give existing site liquid capability???
                Tomster87 Level 1

                I appreciate everyones input, really. You are all obviously very well versed in this area, unlike myselft. Can someone please explain to me why my web pages are being uploaded as images. Also, why my text areas are uneditable once imported into Dreanweaver from Fireworks. Am I slicing incorrectly? In the end result, I would like certain areas to be able to be updated and added to. Right now the text isn't even selectable.

                 

                Here is a link to the website again for reference. Thank you again.

                • 5. Re: Give existing site liquid capability???
                  martcol Level 4

                  Did you go through the links that Nancy O posted?

                   

                  I'm afraid that if you don't know the answers to the questions you are asking, and you are trying to build a site with DW, you are in for the long haul.

                   

                  It has been said many times here that Dreamweaver is not a WSYWIG or drag n' drop  web editor it's a tool for people who at least know a bit of HTML and CSS.

                   

                  I have never built a site starting in Photoshop or Fireworks although many do.  I think that the best thing to do is to read Nancy's links and then return to ask questions.  I imagine that when a mock-up is built in FW or PS only those components of the image built will be used as exported slices.  So in your site, you might slice the logo, the wood-effect banner, the buttons and so on.  After that, you would need to plan a strategy to incorporate those components into your page.

                   

                  So when you build your page you begin to swap out components of your site where you can using HTML/CSS with background color, borders, text and so on.

                   

                  Martin

                  • 6. Re: Give existing site liquid capability???
                    Nancy OShea Adobe Community Professional & MVP
                    Can someone please explain to me why my web pages are being uploaded as images. Also, why my text areas are uneditable once imported into Dreanweaver from Fireworks.

                    Because Fireworks is a graphics app.  It outputs EVERYTHING to images.  If you export your project from Fireworks to  HTML the end product is a bunch of images inside HTML tables.  And images are not editable from Dreamweaver.

                     

                    Follow the tutorial links I gave you for Taking a Fireworks Composition to a CSS Based Layout in Dreamweaver.  After you work through that entire web tutorial, everything will be much clearer to you.

                     

                    Good luck,

                     

                    Nancy O.
                    Alt-Web Design & Publishing
                    Web | Graphics | Print | Media  Specialists
                    http://alt-web.com/
                    http://twitter.com/altweb
                    http://alt-web.blogspot.com

                    • 7. Re: Give existing site liquid capability???
                      Tomster87 Level 1

                      Thank you for your help. Its making everything much clearer.  Clearly I have a lot to learn.