6 Replies Latest reply: May 15, 2013 9:42 AM by mhollis55 RSS

    web template layout with divs

    inquestflash Community Member

      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

        • 1. Re: web template layout with divs
          kennethkawamoto2 Community Member

          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/

          • 2. Re: web template layout with divs
            Jon Fritz II MVP

            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.

            • 3. Re: web template layout with divs
              Ben Pleysier MVP

              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>
              
              • 4. Re: web template layout with divs
                inquestflash Community Member

                Hello all.

                 

                Im currently learning HTML 5, and So far the instuctor im following along does not mention anytihng about the HTML 5 semantic tags, is the a special type of layout with this semantic tags?


                • 5. Re: web template layout with divs
                  kennethkawamoto2 Community Member

                  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/

                  • 6. Re: web template layout with divs
                    mhollis55 Community Member

                    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…