SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fireworks MX Question

    Here is the deal.

    I am creating a personal/portfolio site for myself, just to have for future use. I have worked on my header graphic and what I think my page and buttons will look like. Currently this is my main graphic

    http://homepages.evansville.edu/bk38/frame1.gif

    Well, I have 5 buttons that are my links. I am making them rollovers, each being a different color since my file is mostly gray. I think it gives it an interesting look. You can see in my 2nd frame what the images look like

    http://homepages.evansville.edu/bk38/frame2.gif

    Well, since each button has its own color, I want my background of my header to match the color of the button, so each individual page has its own feel. I have made a frame for each button, and changed how the colors look according to the button.

    http://homepages.evansville.edu/bk38/frame3.gif


    Here is a second example

    http://homepages.evansville.edu/bk38/frame4.gif

    Here is where I need your help. Is it currently setup properly or do I need to change the format for exporting reasons. The first two frames match up with my rollovers, but I want to make it so when a particular button is clicked, it will go to the page and keep the button highlighted with the cooresponding color and background. I don't feel like my frames are situated properly to handle this, but I have a huge brain fart right now. If someone could be kind enough to give me a step by step instructions of what I need to alter, and how to properly export so I get this effect.

    Thanks
    Bryan

  2. #2
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'd simply go to a new page with the selected tab no longer being a rollover, but you over state as standard, and the appropriate header. Surely this is more of a HTML implementation question than Fireworks? Unless I've got the wrong idea...?


  3. #3
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are right, when it has all been exported into html and images, and I finally have the page(s) I want people to see, I want it to work out where the rollovers happen and then when they are clicked, the cooresponding page with color button and background are in sync. I just didn't know if the setup regarding frames is right?

    What does this mean, "but you over state as standard"??

    Thanks
    Bryan

  4. #4
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry. Let me explain myself better.

    Ultimately your site will be made up of 5 pages, right? One for each of your "tabs". What I meant was create a template with all your tabs as rollovers as you intend, and a generic top bar (the bit you also want to change colour). Don't forget to decide on your page names here and set the links up at this point so you don't make extra work for yourself. My naming suggestions are below.

    Save the template as template.html and then SAVE AS the template as the five different pages you want. For arguments sake, lets say you create:

    1. index.html (or whatever your default page needs to be -- home)
    2. portfolio.html
    3. philosophy.html
    4. resume.html
    5. contact.html

    Ok. You now have 5 (well, 6 including your template) identical pages. Open the home page, index.html in this case, remove the link delete the rollover for home and in it's place put it's over state graphic to denote that it's the "live" page. Now you have all the rollovers still active APART from the one for the page you're in, which you have made a static image.

    Now change your top bar for the appropriate graphic and save your page.

    Then open portfolio.html and do the same... delete the rollover and corresponding link (your user is there already!) for 'Portfolio' and replace it with the blue 'Portfolio' over state of the button as a static image, insert your blue top graphic and save.

    Etc.

    See what I mean? Hope I'm not over-simplifying or missing the point....

    G

  5. #5
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You explained it very well. Thank you. I will attempt to do this, if i have trouble, I will come back

  6. #6
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, did I get the jist of it
    http://homepages.evansville.edu/bk38/index.htm

    I wouldn't mind if you would tell me what you think of it?

    Thanks
    Bryan

  7. #7
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks cool. Not sure about Times New Roman as the font, but I figured you're probably changing that.

  8. #8
    SitePoint Wizard bbolte's Avatar
    Join Date
    Nov 2001
    Location
    The Central Plains
    Posts
    3,304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i like it. nice job

  9. #9
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks

    Not sure about Times New Roman as the font,
    Where is that? Fireworks has such a list of Fonts, i wouldn't choose Times New Roman over the huge list. Is it for my normal text, or the text for the actual web address?

    Thanks

  10. #10
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just one more opinion, do any of you feel that the main page is TOO GREY?

  11. #11
    SitePoint Wizard bbolte's Avatar
    Join Date
    Nov 2001
    Location
    The Central Plains
    Posts
    3,304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you have to specify the font for your body copy on the page. if you're talking about inside fireworks, just double click the text and change the font in the drop down (at least in ver 4).

    yes, a little grey. add a graphic or photo or something. that will break it up.

  12. #12
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeh. I meant the HTML copy. Not the graphics. Graphics look nice.

  13. #13
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I will fix those.

    One more question. On the part that says WELCOME, that row consist of 3 cells, the left cell constaining the left side of the image, the middle cell having a background image so it expands, and the right cell having the slider image. Well, the image is only 15 pixels high, so that is what I have set all the cells. Yet when I view it in IE, it looks fine. Opera and Mozilla give me some problems, and I can't figure out why. Can ya help

    Thanks

  14. #14
    SitePoint Wizard bbolte's Avatar
    Join Date
    Nov 2001
    Location
    The Central Plains
    Posts
    3,304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    don't set heights. leave 'em blank.

  15. #15
    SitePoint Wizard bbolte's Avatar
    Join Date
    Nov 2001
    Location
    The Central Plains
    Posts
    3,304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    heights don't work well across all browsers. if you need that cell to be a certain height (or width of that matter) and you're using tables, you gotta use a spacer.gif (a clear, one pixel gif image that you set the dimensions you need to)...

  16. #16
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright. Well, I found an alternative solution. For the middle cell, I simply use a CSS class and set the background image to repeat on the x axis and had it use position = bottom. It works. What I just found out though, is Mozilla and Opera treat my rollovers like garbage. Mozilla doesn't even show the rollover, while Opera just leaves the rollover color hanging. People put down IE so much, but man, it always looks so much nicer.

  17. #17
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I made a few changes, added some color. I think changing the background colors with my layout seems to look good, but getting a 2nd opinion is also good.

    http://homepages.evansville.edu/bk38

    Thanks
    Bryan

  18. #18
    SitePoint Wizard bbolte's Avatar
    Join Date
    Nov 2001
    Location
    The Central Plains
    Posts
    3,304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    looks good in ns 7! nice work!

  19. #19
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool. Thanks. I found out why the rollovers aren't very nice in mozilla and opera. Its because I have image maps on the buttons, i wasn't thinking basically

    Just out of curiosity, on all 5 of my pages, i have an obvious empty spot up in the main graphic, right above the url i have written in. I was thinking of a quote or philosophy type thing. Do you pro's recommend anything? I can't think of another image to put there, plus I the image files are already big enough in size, no use in adding to it. In fact, I guess I could always make the graphic a background image, and then just type something up there. Anyway, your thought are welcomed

  20. #20
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks nice! I'm no designer though, so I'll stay out of that one...


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
  •