Basic Dreamweaver question

Discussion in 'Web Design' started by FrontPage97, Apr 18, 2013.

to remove all ads.
  1. FrontPage97

    FrontPage97 New Member

    Messages:
    71
    After reading a Dreamweaver course I'm still learning the very basics. I have two questions about how two images were laid out on this site ( http://www.wobbleland.com ), which is typical of so many sites that I see. The main image is centered and fits up against the top. As you adjust the browser zoom it still stays centered.
    Was the big main image set up as a background image? Or was it put inside an AP DIV or inside a container or header or what?

    It looks to me like this long vertical line is actually the background image (CSS page properties > appearance (HTML) > background image) that spans across the X axis.
    http://www.wobbleland.com/images/background.png
     
  2. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,662
    First: get rid of Dreamweaver and LEARN TO CODE

    Second: NEVER, EVER use position: absolute to position ANYTHING.

    Positioning is NOT about the X and Y orientation of an element at all. It is about the THIRD dimension, which is the stacking order (z-index)

    http://webmaster-talk.eu/en/articles/8-website-development-and-design/13-css-positioning

    Absolute positioning would NOT do that.
     
  3. FrontPage97

    FrontPage97 New Member

    Messages:
    71
    Anyone know how to do this in Dreamweaver?
    Learning code is not something that I'm quite ready for.
     
  4. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,662
    So how are you going to fix things when DW screws up?
     
  5. FrontPage97

    FrontPage97 New Member

    Messages:
    71
    What is going to go wrong?
     
  6. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,662
    Who knows???

    usually the layout that 'breaks' the first time you try it out in the real world.
     
  7. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    nothing at all, it will work perfectly across all browsers and all devices, exactly the same. ...or not.

    without knowing what you are doing you are "flying blind" when a problem does arrive.

    well "someone" might help you there, but we generally speaking prefer to code it out, and besides design view in DW is about 2% accurate to what it looks like in the browser.

    no need to get rid of dreamweaver, just don't let it do the work for you!
     
  8. FrontPage97

    FrontPage97 New Member

    Messages:
    71
    Where do you learn how to drop images in using code? Just sifting through YouTube vids?

    If Dreamweaver is not accurate can't I just check it on various browsers and with sites like http://ipadpreview.com/?
     
  9. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    actually I've never watched a you tube video on web development, ever.

    but then again you tube didn't exist when I started so...
     
  10. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,662
    W3Schools for a start, Google would be another (or Bing if you prefer)
     
  11. Edge

    Edge Member

    Messages:
    461
    I started off with DW yonks ago when I didn't know code but I don't think I ever produced anything useful using the wysiwyg editor. The thing I did find useful about it was the integration of ftp client - just made it a couple of clicks quicker to upload something.

    For learning I used to dip into W3c Schools and a few Eric Meyer books. I heard http://teamtreehouse.com/ is good but I've never used it.
     
  12. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    codecademy.com - Great place to learn.
     
  13. FrontPage97

    FrontPage97 New Member

    Messages:
    71
    Dreamweaver may have its limitations but I just don't have the time to start over again and learn code. I mean FrontPage has even more limitations but I can create a decent site using FrontPage. I don't get all of this Dreamweaver negativity.
     
  14. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    come on man it's not rocket science.
    just click the code view button occasionally and try and figure it out.
    it's really not that hard if you use html/css predominately.

    if you don't have the time, perhaps you should just put the computer away, or stop whining, harden up and learn a new skill - you might even surprise yourself.

    the negativity is because you are using DW design to "draw" on pretty boxes. APdivs are not a good idea ever. DW can be a very powerful tool if used right, and right now, you're so not doing that.
     
  15. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,662
    eeeeerrrrrrrmmmmmmm????

    I started using FrontPage, the one that came with MS Office, because that was what the company used, after about a month of getting gloriously pissed off with it "changing" code and "messing" with what I had done, and no matter what I did everything turned out looking like a "FrontPage site", I decided that WYSIWYG was ok for word processing but crap for anything else.

    Took me a few weeks of reading an O'Reilly book as "online tutorials" were a bit thin on the ground, but it was worth that time.

    These days I can go from a picture to a coded layout without any "slicing tools" or "framework builders" being involved. Give me GIMP and Notepad++ on a USB drive and I'll 'work' anywhere.

    Mind you, somebody else has to make the picture first 'cause I'm fairly crap at designing.
     
  16. FrontPage97

    FrontPage97 New Member

    Messages:
    71
    So for example if I want to place an image at a specific position using code rather than with an AP DIV, how do you do it? What does the code look like? If Dreamweaver writes code for you, what do you do that's so different when writing it yourself.
     
  17. reverseengineer

    reverseengineer New Member

    Messages:
    219
    Practice Makes Masters

    Wow, give the guy a chance! Practicing is the way to learn. :)
     
  18. reverseengineer

    reverseengineer New Member

    Messages:
    219
    BTW, I have to agree with Phreaddee: you must take the time to learn. I think, once again, that practice is what makes you best. Working with Dreamweaver is not a bad choice at all: just get some HTML (preferably HTML5) and CSS (preferably CSS3) books and read them. It is really helpful. But, once again (sorry for repeating myself) practice is what will make you a good designer! I would also pick up a PHP book or learn a few PHP tricks so you can save time and begin programming like the pros. :)

    Good luck.
     
  19. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,662
    Yes it is, but using Dreamweaver, you only learn how to use dreamweaver and, it 'teaches' some very poor methods.

    Using the "design" interface only will lead you down the path of position: absolute; for just about everything. And that is absolutely NOT best practice, it's not even good practice.

    Coding a layout without a WYSIWYG is simply like solving a 'sliding block' puzzle. Six to eight year old children can do those, and therein lies the trick to getting good at it. Think like a child who hasn't yet been indoctrinated into "the world (and you) has limits". Everything is a challenge that CAN BE SOLVED and nothing is impossible. Flying to a child is simply a matter of jumping of the shed roof and missing the ground.
     
  20. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    Just because DW writes the code for you doesn't mean it writes it correctly.

    For instance: Let's say you want to code a simple layout that has a main content area with a sidebar to the right. In DW, you'd "draw" those 2 sections, and DW would dutifully code 2 absolutely positioned divs, side by side. They are a rigid px-width size, set in a rigid position (I'm sure you can change those to percent widths and positions, but bear with me, I'm using an extreme example on purpose). Now, you need to add a footer below them. How does DW do that? another AP div, with a rigid width and position, set below the other 2.

    Now, let's say your user has vision problems, and zooms in a little to see your text. Suddenly, the text in the divs takes up more space. Now, *if* DW set a rigid height on those divs, your text is overflowing all over the place. *if* it didn't set a rigid height, now all the divs have expanded and are overlapping each other. Your layout is completely broken. And if the browser window isn't as wide as your content? You'd have to side scroll to see the sidebar.

    Ok, now let's code it ourselves. We're going to leave the positioning value at it's default of static and float the 2 divs to the left. We'll set the main one to a width of, say 60% with a margin-right of 5%. We'll set the sidebar to 34% width, just to leave a 1% buffer. But, we don't want it to squish too much, so we set the main div's min-width to, say 500px. That would stop it from getting too small. Then, we clear our floats and add the footer with a 100% width.

    Now, our same user zooms in, and all the divs just expand to encompass the larger text. But what about the footer? It just pushes down and stays below the other divs. And if you shrink the browser window? The content areas will just shrink to stay in view. What happens when it gets so small that the main content area hits that 500px limit? The sidebar just drops below the main content div. Then, we can just use media queries to change the way it looks or hide it altogether.

    The point here is, and I've had this conversation a million times with people: No WYSIWYG will ever be able to code like a person. It can't make decisions about how best to code something, or whether certain widths will work. All it can do is take a layout you draw and use code to draw it exactly the way you made it look. It will make no considerations for usability.

    There are very good uses for AP, but page structure isn't one of them.
     
    Last edited: Apr 21, 2013

Share This Page