7 Replies Latest reply on Feb 18, 2011 1:34 PM by pixlor

    Please review this site image to answer ques.

    JohnBloodMatrix

      Hello, I am working on this webpage currently and I am going to redo the main collage//menu bar but I am curious to how he set the images up in fireworks.

      www.northtowncompany.com

      If you open this mainpage in fireworks you can see all the slices that the collage designer did. So Ultimately, my question is, did he slice up this photo, or did fireworks do it automatically? It seems to specific of slices to be done by an individual. And he is using spacers alot.

       

      On a side note, I remade a same size image to replace this one and sliced it up perfectly, the problem is, when I put it into dreamweaver its all over the place. Where did I go wrong?

       

      P.S. if my question is not clear enough please let me know so I can clarify.

       

      thanks for viewing!!!!

        • 1. Re: Please review this site image to answer ques.
          pixlor Level 4

          Why do you want to slice the image in the first place? You aren't using it for navigation; there are no links on it. Just make a single collage, and make it a .jpg rather than a .gif. (In general, .jpg for photos and .gif or .png for line art.) Also, you do not open/edit HTML files with Fireworks: FW is not an HTML authoring environment. However...

           

          Why the resliced images break your page: The page you have is a table-based design, where the sizes of rows and columns are fixed. If you change the dimensions of the images you're trying to fit into those spots, then your table will break. Replacing an image with a bigger one will cause the table to expand to accomodate it, leaving gaps in other cells. Replacing an image with a smaller one will leave gaps around that particular image. If you simply changed the size of the slices, without adjusting the table dimensions, then this could be your problem.

           

           

          Other comments...

           

          When you use FW to set up slices and export images, it's a good idea to name your slices. That way, rather than getting images with names like nt2_31-over.gif (which are not helpful when you go to maintain the page), your images can have names like home-over.gif or contact-over.gif. It's much easier to maintain your code when you work that way.

           

          Also, from a design perspective, the text above the main page body plus that large graphic simply pushes your content down. It's great SEO, but not very attractive. Having every word of your text capitalized is not correct grammar (these items are not proper nouns), and is not very readable.

          • 2. Re: Please review this site image to answer ques.
            JohnBloodMatrix Level 1

                 Well first of all, thank you for your reply. I appreciate the constructive criticism. I inherrited the site from the previous webmaster so I am simply wondering if there was any explanation for all that slicing.

            --As you said, there are no links on the images therefore it is pointless to slice them, but there are links on the bars above them. Ultimately I am going to design a new collage and replace the current one, but I dont want to get stumped if I happen to not be able to get the images to behave (plus I am not familiar with using spacers).

             

            Other than starting a new page from scratch, what do you suggest for me to get rid of the existing mess?

             

            P.S.

            Are you saying the previous guy sliced it all up for nothing? Why would the slices end up being so random then?

            • 3. Re: Please review this site image to answer ques.
              pixlor Level 4

              Spacers are generally a sign of either automatic slicing or automatic table creation. Or both. You don't need them to make a table layout work. They just make the table more complex, which means it's slightly more difficult for browsers to render and much more difficult for humans to maintain.

               

              There's an add-on for Firefox called Firebug. It's really useful. For one thing, you can edit the code (in memory) and it will change the browser display accordingly. I used Firefox/Firebug to look at your table and, really, I would recommend that you throw out that table and start over. The slicing borders are not in reasonable places. Something more like this:

              northtown.png

              This image should be a FW document, with slices and guidelines. It has 8 columns and four rows, in contrast to your current table which looks like it has 23 columns and 19 rows (!!!). If the forum flattens the file, I'll upload the FW document someplace else and link to it.

               

              All that said, table layouts are generally not the way to go. Yes, they work, but it's better not to use them. Try this tutorial; it's the better way to design sites:

              http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-i n-easy-to-understand-steps/

              • 4. Re: Please review this site image to answer ques.
                pixlor Level 4

                http://www.mediafire.com/?7f48vefcf6q9rfs

                 

                Okay...that was...painful. The file hosting service I used to use has been discontinued, so I am trying MediaFire. Unfortunately, it opens a full-page pop-under ad when you download. Sorry.

                • 5. Re: Please review this site image to answer ques.
                  pixlor Level 4

                  http://www.box.net/shared/akbqtg570z

                   

                  You can download it from this site without getting pop-under ads!

                  • 6. Re: Please review this site image to answer ques.
                    JohnBloodMatrix Level 1

                         Wow nice rendition pixlor, did you choose those rows and columns yourself in fireworks? That is alot cleaner, and

                    you answered my question about those slices & spacers, thanks. They seemed really off, computer generated off and wayy too complicated to work with. I am going to try and implement your revision, hopefully I can get it to stick. The only unfortunate part is I wont have the rollover color change anymore. I will have to redo the whole menu otherwise so I can edit the text.

                         So what do you think the previous designer was doing? did he just not know how to simplify it?

                    • 7. Re: Please review this site image to answer ques.
                      pixlor Level 4

                      Yes, I sliced the image manually, with an eye to producing a clean table. If you have the original FW png, you can open that and re-slice in the same manner, which will allow you to produce the rollover color-changes. You might choose to slice above or below the white lines. It probably doesn't matter too much. But do name the slices with meaningful names as this will give you images with meaningful names. (Slices are in the Web layer; you may need to expand that.)

                       

                      I think it's possible that the previous designer created the smallest slices possible around the rollever text and then the software automatically sliced the rest of the design along the boundaries of the slices. If nothing else, this is proof of why you don't want software thinking for you: it has algorithms, not judgement. It's one way to optimize a table-based design, but if it comes at the expense of such a complex table, it is probably better just to go with slightly bigger images. You could also use buttons (a feature of Fireworks) for the menus. I don't use them, but that's exactly what they're for.

                       

                      The spacer images are leftover from a time - long, long ago - when they were needed to lock the dimensions of a table-based layout. They haven't been needed for many years, though, although the table-production algorithm hasn't been changed.

                       

                      Still...a table-based layout is not the best way to go. Take a couple of hours to work through that tutorial. It's quite good and will show you modern design methods. The author uses Photoshop for her graphics, but they can be done in FW, just as well.