Skip navigation
Currently Being Moderated

web template layout with divs

May 14, 2013 11:45 PM

Hello Dreamweavers.

 

Id like know if I am thinking correctly, I'm coming from Indesign into Dreamweaver, and trying to understand the philosophy of DW.

ive have done a rough website layout just for educational purposes. So am I thinking correctly, that we divide our website into DIVS sections

and then drag and drop our content within the divs?we have initially planned our website how it will look and then we go and structure it in DW.

so in this case I have made 9 Div tags and named them,is this a correct approach to it? I have also nested some divs within some divs just to confuse my mind

on how to go on about the design process. So any feed back and advise is always welcome.

 

thank you.

 

u2a6.jpg

 
Replies
  • Currently Being Moderated
    May 15, 2013 3:01 AM   in reply to inquestflash

    Personally I'd use HTML 5 semantic tags instead of <div>, e.g. <header>, <nav>, <article>, <section>, <aside>, <footer> etc.

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    May 15, 2013 6:19 AM   in reply to kennethkawamoto2

    What you're doing is fine, for doctypes prior to html5. You "could" probably make it a little more efficient, but if it makes sense to you, there's no harm in wrapping everything in <div> containers.

     

    If you go the route Kenneth mentions, you'll need to make sure you include the HTML5 shiv: http://code.google.com/p/html5shiv/ and the HTML5 Doctype.

     

    Old non-html5 browsers can't read the new tags without the shiv and old doctypes will report invalid code and cause trouble with display.

     
    |
    Mark as:
  • Currently Being Moderated
    May 15, 2013 6:26 AM   in reply to inquestflash

    Try

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    * { 
        padding: 0;
        margin: 0;
        -moz-box-sizing: border-box; 
        -webkit-box-sizing: border-box; 
        box-sizing: border-box; 
    }
     
    body {
        width: 1000px;
        margin: auto;
        background: #BEBFC1;
    }
    .header {
        height: 100px;
        background: #A8A9AE;
        padding: 15px;
    }
    .nav {
        height: 35px;
        background: #848283;
        margin: 15px 100px;
        padding: 5px 15px;
    }
    .aside.left {
        width: 350px;
        float: left;
        margin: 0 20px;
        background: #848283;
        padding: 5px 30px;
    }
    .aside.left .box {
        background: #6E6F74;
        margin: 15px 0;
        padding: 5px 15px;
    }
    .aside.left .box.upper {
        height: 150px;
    }
    .aside.left .box.lower {
        height: 100px;
    }
    .aside.right {
        width: 570px;
        float: right;
        height: 80px;
        margin: 0 20px;
        background: #A8A9AE;
        padding: 5px 15px;
    }
    .article {
        width: 570px;
        float: right;
        margin: 15px 20px;
        background: #828388;
        padding: 5px 15px;
    }
    .article .box {
        height: 190px;
        width: 100px;
        background: #706D74;
        padding: 5px;
        margin: 15px 0;
        float: right;
    }
    .footer {
        height: 60px;
        background: #A8A9AE;
        padding: 15px;
        margin: 15px 0;
        clear: both;
    }
    </style>
    </head>
     
    <body>
    <div class="header"><h1>HEADER</h1></div>
    <div class="nav">Menu Bar</div>
    <div class="aside left">
        Left Bar
      <div class="box upper">Upper box</div>
      <div class="box lower">Lower Box</div>
    </div>
    <div class="aside right">Right Sidebar</div>
    <div class="article">
        Article
        <div class="box">Column</div>
    </div>
    <div class="footer">Footer</div>
    </body>
    </html>
    
     
    |
    Mark as:
  • Currently Being Moderated
    May 15, 2013 8:52 AM   in reply to inquestflash

    Semantic HTML focuces on the meaning (semantics) of the markup rather than the layout/presentation. In other words semantic tags have nothing to do with  visual layout

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    May 15, 2013 9:42 AM   in reply to inquestflash

    The new HTML5 tags include:

     

    header

    footer

    article

    section

    aside

    nav

     

    These are semantic. And an article may be within a section and a section may be within an article. You may add to the semantics by creating classes:

    <nav class="top">

    </nav>

    <section class="about">

    <article class="history">

     

    </article>

    <article class="present">

     

    </article>

    </section>

    <nav class="bottom">

    </nav>

     

    Lots to like in HTML5…

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (1)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points