Monday, July 30, 2012

Web layout design


Web layout design

Designing of web lay out is done by a few methods.Basically we have to place the areas for headers, left side bar,right sidebar,mid content and footers.We could have ability of separating areas using HTML Frames,Tables and divisions.Here,I will be discussed with you most popular method,division using HTML and CSS.
We will move step by step to each division.

outer-wrapper:-The layer that contains all the content of web including headers and Footers.


 
The HTML code file contains division called outerwrapper into which i have link css file called wrap.css where styles are included to the division outerwrapper.

<html>
<head>
<title></title>
<link href="wrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="outerwrapper"><h2>Outer Wrapper</h2>
</div>
</body>
</html>		@charset "utf-8";
* {
   margin: 0;
   padding: 0; }
body {
   color: #555555;
   font-family: 'Trebuchet MS', Arial, Verdana, Helvetica, sans-serif;
   font-size: 75%;
   }
#outerwrapper {
   width: 960px;
   background-color: #62a6e6;
   margin: 0 auto;
   line-height: 1.4em;
   color: #404040;
margin-top:50px;
border: 1px solid #31e;
height:725px;
}

innerwrapper:-The layer that could be contained all the content or could not be contained all of web.This example it could not contain right side bar.


 
<html>
<head>
<title></title>
<link href="wrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="outerwrapper">
<div id="innerwrapper">
</div>
</div>
</body>
</html>		@charset "utf-8";
* {
   margin: 0;
   padding: 0; }
body {
   color: #555555;
   font-family: 'Trebuchet MS', Arial, Verdana, Helvetica, sans-serif;
   font-size: 75%;
   }
#outerwrapper {
   width: 960px;
   background-color: #62a6e6;
   margin: 0 auto;
   line-height: 1.4em;
   color: #404040;
margin-top:50px;
border: 1px solid #31e;
height:725px;
}
#innerwrapper {
   float: left;
   margin-left:5px;
   width:760px;
  background-color: #f8eb58;
height:550px;
}

content:-This layer also covers the area of innerwrapper area in this example(you can expand according to your requirements).

<html>
<head>
<title></title>
<link href="wrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="outerwrapper">
<div id="innerwrapper">
<div id="content">
</div>
</div>
</div>
</body>
</html>		@charset "utf-8";
* {
   margin: 0;
   padding: 0; }
body {
   color: #555555;
   font-family: 'Trebuchet MS', Arial, Verdana, Helvetica, sans-serif;
   font-size: 75%;
   }
#outerwrapper {
   width: 960px;
   background-color: #62a6e6;
   margin: 0 auto;
   line-height: 1.4em;
   color: #404040;
margin-top:50px;
border: 1px solid #31e;
height:725px;
}
#innerwrapper {
   float: left;
   margin-left:5px;
   width:760px;
  background-color: #f8eb58;
height:550px;
}
#content {
   float: left;
   width: 760px;
  height:550px;
background-color: #d8e8f6;
border: 1px solid #31e;
}

 Head:-Place where headers of web contains.



<html>
<head>
<title></title>
<link href="wrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="outerwrapper">
<div id="head">
</div>
<div id="innerwrapper">
<div id="content">
</div>
</div>
</div>
</body>
</html>		@charset "utf-8";
* {
   margin: 0;
   padding: 0; }
body {
   color: #555555;
   font-family: 'Trebuchet MS', Arial, Verdana, Helvetica, sans-serif;
   font-size: 75%;
   }
#outerwrapper {
   width: 960px;
   background-color: #62a6e6;
   margin: 0 auto;
   line-height: 1.4em;
   color: #404040;
margin-top:50px;
border: 1px solid #31e;
height:725px;
}
#innerwrapper {
   float: left;
   margin-left:5px;
   width:760px;
  background-color: #f8eb58;
height:550px;
}
#content {
   float: left;
   width: 760px;
  height:550px;
background-color: #d8e8f6;
border: 1px solid #31e;
}
#head {
   height: 145px;
   width: 960px;
   background-color: #76cb7e;
 }

leftsidebar:-Place where left menu is placed



<html>
<head>
<title></title>
<link href="wrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="outerwrapper">
<div id="head">
</div>
<div id="innerwrapper">
<div id="content">
 <div id="leftsidebar">
</div>
</div>
</div>
</div>
</body>
</html>		@charset "utf-8";
* {
   margin: 0;
   padding: 0; }
body {
   color: #555555;
   font-family: 'Trebuchet MS', Arial, Verdana, Helvetica, sans-serif;
   font-size: 75%;
   }
#outerwrapper {
   width: 960px;
   background-color: #62a6e6;
   margin: 0 auto;
   line-height: 1.4em;
   color: #404040;
margin-top:50px;
border: 1px solid #31e;
height:725px;
}
#innerwrapper {
   float: left;
   margin-left:5px;
   width:760px;
  background-color: #f8eb58;
height:550px;
}
#content {
   float: left;
   width: 760px;
  height:550px;
background-color: #d8e8f6;
border: 1px solid #31e;
}
#head {
   height: 145px;
   width: 960px;
   background-color: #76cb7e;
 }
#leftsidebar {
   margin-right: 10px;
   width: 180px;
   height:550px;
   float: left;
background-color: #ed9b7b;
}
 contentmid:-where page content is included


<html>
<head>
<title></title>
<link href="wrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="outerwrapper">
<div id="head">
</div>
<div id="innerwrapper">
<div id="content">
 <div id="leftsidebar">
</div>
<div id="contentmid">
</div>
</div>
</div>
</div>
</body>
</html>		@charset "utf-8";
* {
   margin: 0;
   padding: 0; }
body {
   color: #555555;
   font-family: 'Trebuchet MS', Arial, Verdana, Helvetica, sans-serif;
   font-size: 75%;
   }
#outerwrapper {
   width: 960px;
   background-color: #62a6e6;
   margin: 0 auto;
   line-height: 1.4em;
   color: #404040;
margin-top:50px;
border: 1px solid #31e;
height:725px;
}
#innerwrapper {
   float: left;
   margin-left:5px;
   width:760px;
  background-color: #f8eb58;
height:550px;
}
#content {
   float: left;
   width: 760px;
  height:550px;
background-color: #d8e8f6;
border: 1px solid #31e;
}
#head {
   height: 145px;
   width: 960px;
   background-color: #76cb7e;
 }
#leftsidebar {
   margin-right: 10px;
   width: 180px;
   height:550px;
   float: left;
background-color: #ed9b7b;
}
#contentmid {
   float: right;
   margin-right: 10px;
   width: 550px;
  height:550px;
background-color: #f2e680;
border: 1px solid #31e;
}

 rightsidebar:-content of right side is included


<html>
<head>
<title></title>
<link href="wrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="outerwrapper">
<div id="head">
</div>
<div id="innerwrapper">
<div id="content">
 <div id="leftsidebar">
</div>
<div id="contentmid">
</div>
 </div>
</div>
<div id="rightsidebar">
</div>
</div>
</body>
</html>		@charset "utf-8";
* {
   margin: 0;
   padding: 0; }
body {
   color: #555555;
   font-family: 'Trebuchet MS', Arial, Verdana, Helvetica, sans-serif;
   font-size: 75%;
   }
#outerwrapper {
   width: 960px;
   background-color: #62a6e6;
   margin: 0 auto;
   line-height: 1.4em;
   color: #404040;
margin-top:50px;
border: 1px solid #31e;
height:725px;
}
#innerwrapper {
   float: left;
   margin-left:5px;
   width:760px;
  background-color: #f8eb58;
height:550px;
}
#content {
   float: left;
   width: 760px;
  height:550px;
background-color: #d8e8f6;
border: 1px solid #31e;
}
#head {
   height: 145px;
   width: 960px;
   background-color: #76cb7e;
 }
#leftsidebar {
   margin-right: 10px;
   width: 180px;
   height:550px;
   float: left;
background-color: #ed9b7b;
}
#contentmid {
   float: right;
   margin-right: 10px;
   width: 550px;
  height:550px;
background-color: #f2e680;
border: 1px solid #31e;
}
#rightsidebar {
   float: right;
   margin-right: 5px;
   width: 180px;
 height:550px;
background-color: #ed9b7b;
}

footer:-Where footer content is placed


<html>
<head>
<title></title>
<link href="wrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="outerwrapper">
<div id="head">
</div>
<div id="innerwrapper">
<div id="content">
 <div id="leftsidebar">
</div>
<div id="contentmid">
</div>
 </div>
</div>
<div id="rightsidebar">
</div>
<div id="footer">
</div>
</div>
</body>
</html>		@charset "utf-8";
* {
   margin: 0;
   padding: 0; }
body {
   color: #555555;
   font-family: 'Trebuchet MS', Arial, Verdana, Helvetica, sans-serif;
   font-size: 75%;
   }
#outerwrapper {
   width: 960px;
   background-color: #62a6e6;
   margin: 0 auto;
   line-height: 1.4em;
   color: #404040;
margin-top:50px;
border: 1px solid #31e;
height:725px;
}
#innerwrapper {
   float: left;
   margin-left:5px;
   width:760px;
  background-color: #f8eb58;
height:550px;
}
#content {
   float: left;
   width: 760px;
  height:550px;
background-color: #d8e8f6;
border: 1px solid #31e;
}
#head {
   height: 145px;
   width: 960px;
   background-color: #76cb7e;
 }
#leftsidebar {
   margin-right: 10px;
   width: 180px;
   height:550px;
   float: left;
background-color: #ed9b7b;
}
#contentmid {
   float: right;
   margin-right: 10px;
   width: 550px;
  height:550px;
background-color: #f2e680;
border: 1px solid #31e;
}
#rightsidebar {
   float: right;
   margin-right: 5px;
   width: 180px;
 height:550px;
background-color: #ed9b7b;
}
#footer {
   clear: both;
   width: 960px;
   color: #777;
   height: 25px;
   font-size: 0.8em;
   font-weight: bold;
   margin: 0px auto;
background-color: #130703;
}

navigation:-Where main menu items are placed


<html>
<head>
<title></title>
<link href="wrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="outerwrapper">
<div id="head">
</div>
 <div id="navigation">
</div>
<div id="innerwrapper">
<div id="content">
 <div id="leftsidebar">
</div>
<div id="contentmid">
</div>
 </div>
</div>
<div id="rightsidebar">
</div>
<div id="footer">
</div>
</div>
</body>
</html>		@charset "utf-8";
* {
   margin: 0;
   padding: 0; }
body {
   color: #555555;
   font-family: 'Trebuchet MS', Arial, Verdana, Helvetica, sans-serif;
   font-size: 75%;
   }
#outerwrapper {
   width: 960px;
   background-color: #62a6e6;
   margin: 0 auto;
   line-height: 1.4em;
   color: #404040;
margin-top:50px;
border: 1px solid #31e;
height:780px;
}
#innerwrapper {
   float: left;
   margin-left:5px;
   width:760px;
  background-color: #f8eb58;
height:550px;
}
#content {
   float: left;
   width: 760px;
  height:550px;
background-color: #d8e8f6;
border: 1px solid #31e;
}
#head {
   height: 145px;
   width: 960px;
   background-color: #76cb7e;
 }
#leftsidebar {
   margin-right: 10px;
   width: 180px;
   height:550px;
   float: left;
background-color: #ed9b7b;
}
#contentmid {
   float: right;
   margin-right: 10px;
   width: 550px;
  height:550px;
background-color: #f2e680;
border: 1px solid #31e;
}
#rightsidebar {
   float: right;
   margin-right: 5px;
   width: 180px;
 height:550px;
background-color: #ed9b7b;
}
#footer {
   clear: both;
   width: 960px;
   color: #777;
   height: 25px;
   font-size: 0.8em;
   font-weight: bold;
   margin: 0px auto;
background-color: #130703;
}
#navigation {
   width: 960px;
   background-color: #f1caec;
   height: 31px;
   border-top: #023634 solid 1px;
   margin-bottom: 20px;}
Posted by at

34 comments:

  1. Sumaya ManzoorOctober 12, 2018 at 4:05 AM

    Excellent way of expressing your ideas with a clear vision, Keep updating.
    selenium Classes in chennai
    selenium Training in Chennai
    selenium Testing Training
    iOS Course Chennai
    mobile application development training in chennai
    php course

    ReplyDelete
  2. Vicky RamOctober 15, 2018 at 5:00 AM

    I am happy to find this post Very useful for me, as it contains lot of information

    Guest posting sites
    Education

    ReplyDelete
  3. Shadeep ShreeOctober 15, 2018 at 10:47 PM

    The blog is well written and Thanks for your information. Java is one of the widely accepted language. The reason is it's features and it is platform independent.
    JAVA Training Coimbatore
    JAVA Coaching Centers in Coimbatore
    Best JAVA Training Institute in Coimbatore
    JAVA Certification Course in Coimbatore
    JAVA Training Institute in Coimbatore

    ReplyDelete
  4. Anbarasan14October 17, 2018 at 12:06 AM

    I believe that your blog will surely help the readers who are really in need of this vital piece of information. Waiting for your updates.

    TOEFL Classes in Chennai OMR
    TOEFL Coaching Centres at Kandanchavadi
    TOEFL Coaching Classes in Siruseri Chennai
    TOEFL Coaching Classes near me
    TOEFL classes in Moulivakkam
    Best TOEFL Training Institute at Porur
    IELTS Classes near Chennai Tambaram

    ReplyDelete
  5. UnknownOctober 17, 2018 at 1:04 AM

    Nice post. By reading your blog, i get inspired and this provides some useful information. Thank you for posting.

    Photoshop Classes in Chennai
    Photoshop Course in Chennai
    Photoshop Training in Chennai
    Photo Editing Courses in Chennai
    Photoshop Training Institute in Chennai
    Best Place to Learn Photoshop in Chennai

    ReplyDelete
  6. UnknownOctober 19, 2018 at 2:18 AM

    Thank you for sharing this useful information with us. Nice work

    Ionic Training in Chennai | Ionic 2 Course | Ionic Training Course | Ionic Training in Adyar | Ionic Training in Velachery | Ionic Training in Tambaram

    ReplyDelete
  7. Aruna RamOctober 19, 2018 at 9:42 PM

    Very informative article post. Really looking forward to read more. Will read on…
    Data Science Training in Velachery
    Data Science Training in Chennai Velachery
    Data Science Training in Aminjikarai
    Data Science Training in Vadapalani
    Data Science Training in Chennai

    ReplyDelete
  8. VenuBharath2010@gmail.comNovember 16, 2018 at 3:05 AM

    Amazing Post. I am very much impressed with your choice of words. The content showcases your in-depth knowledge in this subject. Thanks for sharing.
    Social Media Marketing Courses in Chennai
    Social Media Marketing Training in Chennai
    Social Media Training in Chennai
    Social Media Marketing Training
    Social Media Marketing Courses
    Social Media Training
    Social Media Marketing Training
    Social Media Courses

    ReplyDelete
  9. LindaJasmineDecember 3, 2018 at 3:55 AM


    Thanks for sharing the fantabulous post. It gives immense pleasure to read your article. Your post is very thought provoking.
    Pega training institutes
    Pega training courses
    Pega administrator training
    Pega testing training
    Pega software training
    Pega software course
    Pega training in Velachery

    ReplyDelete
  10. jvimalaJanuary 8, 2019 at 10:09 PM

    Excellent.. Very Clear Explanation.. Much appreciated
    Regards,
    Machine learning Course

    ReplyDelete
  11. jefrinJune 20, 2019 at 5:28 AM

    Best software Training Institutes in Chennai-Softlogic Institute ( SLA) .Softlogic training Center provides certification to bright IT aspirants through effective theoretical and practical coaching, online training, lab sessions and hands –on training in line with the requirements of the best Employers in the IT fraternity. Our superlative syllabus blends well with the real time exposure given to Students/ professionals; and this makes us the leading CCNA Training Institute in Chennai call now:8608700340
    Read more: https://www.postallads4free.com/training_education_services-ad645444.html



    I feel really happy to have seen your webpage and look forward to so many more entertaining times reading here. Thanks once more for all the details.
    Data science Course Training in Chennai |Best Data Science Training Institute in Chennai
    RPA Course Training in Chennai |Best RPA Training Institute in Chennai
    AWS Course Training in Chennai |Best AWS Training Institute in Chennai
    Devops Course Training in Chennai |Best Devops Training Institute in Chennai
    Selenium Course Training in Chennai |Best Selenium Training Institute in Chennai
    Java Course Training in Chennai | Best Java Training Institute in Chennai


    ReplyDelete
  12. merlinMay 15, 2020 at 11:36 PM

    The blog you shared is very good. I expect more information from you like this blog. Thankyou.

    Selenium Training in chennai | Selenium Training in annanagar | Selenium Training in omr | Selenium Training in porur | Selenium Training in tambaram | Selenium Training in velachery

    ReplyDelete
  13. AnonymousMay 25, 2022 at 9:34 PM

    Smm panel
    SMM PANEL
    iş ilanları
    İNSTAGRAM TAKİPÇİ SATIN AL
    hırdavatçı burada
    BEYAZESYATEKNİKSERVİSİ.COM.TR
    servis
    tiktok hile

    ReplyDelete
  14. hacklinkDecember 25, 2022 at 12:06 AM

    Good content. You write beautiful things.
    vbet
    hacklink
    sportsbet
    taksi
    mrbahis
    korsan taksi
    vbet
    mrbahis
    sportsbet

    ReplyDelete
  15. poker siteleriDecember 31, 2022 at 11:11 PM

    Good text Write good content success. Thank you
    bonus veren siteler
    betmatik
    betpark
    slot siteleri
    kibris bahis siteleri
    kralbet
    tipobet
    mobil ödeme bahis

    ReplyDelete
  16. AnonymousFebruary 22, 2023 at 8:46 AM

    شركة تنظيف مجالس بالدمام
    شركة تنظيف مجالس

    ReplyDelete
  17. fatihJuly 30, 2023 at 8:53 PM

    çorum
    antep
    ısparta
    hatay
    mersin

    GMYQ

    ReplyDelete
  18. çağrıAugust 2, 2023 at 4:55 PM

    zonguldak
    ısparta
    diyarbakır
    ığdır
    kıbrıs
    XR1U

    ReplyDelete
  19. PınarAugust 12, 2023 at 3:42 PM

    salt likit
    salt likit
    dr mood likit
    big boss likit
    dl likit
    dark likit
    ROUB

    ReplyDelete
  20. PlasmaExplorer9000October 6, 2023 at 8:31 PM

    bitlis
    sakarya
    van
    tunceli
    ankara
    Aİ37P

    ReplyDelete
  21. MarionnOctober 8, 2023 at 9:05 PM

    görüntülü show
    ücretlishow
    İND7

    ReplyDelete
  22. CelestialFlareOctober 18, 2023 at 12:25 PM

    ankara parça eşya taşıma
    takipçi satın al
    antalya rent a car
    antalya rent a car
    ankara parça eşya taşıma
    14D

    ReplyDelete
  23. 9584ELeland96028November 8, 2023 at 8:19 PM

    1E965
    Osmaniye Şehirler Arası Nakliyat
    Hatay Şehir İçi Nakliyat
    Ünye Televizyon Tamircisi
    Nevşehir Evden Eve Nakliyat
    Maraş Lojistik
    Kars Parça Eşya Taşıma
    Konya Parça Eşya Taşıma
    Antalya Parça Eşya Taşıma
    Bingöl Lojistik

    ReplyDelete
  24. 4BCD3Gordon96BBDNovember 9, 2023 at 11:34 AM

    AF617
    sustanon for sale
    masteron for sale
    Silivri Boya Ustası
    Ankara Evden Eve Nakliyat
    Tokat Evden Eve Nakliyat
    Kripto Para Borsaları
    buy peptides
    Adana Evden Eve Nakliyat
    order pharmacy steroids

    ReplyDelete
  25. A45A5Tessa8868ANovember 10, 2023 at 9:31 AM

    241C1
    Kastamonu Evden Eve Nakliyat
    Kilis Parça Eşya Taşıma
    Bingöl Parça Eşya Taşıma
    Maraş Parça Eşya Taşıma
    Karaman Parça Eşya Taşıma
    Yobit Güvenilir mi
    Sincan Parke Ustası
    Tokat Parça Eşya Taşıma
    Pursaklar Boya Ustası

    ReplyDelete
  26. AFF09Carl4B537November 10, 2023 at 3:05 PM

    40A57
    Yobit Güvenilir mi
    Trabzon Şehir İçi Nakliyat
    Şırnak Parça Eşya Taşıma
    Aksaray Parça Eşya Taşıma
    Bartın Şehir İçi Nakliyat
    Burdur Parça Eşya Taşıma
    Uşak Parça Eşya Taşıma
    Kilis Parça Eşya Taşıma
    Van Evden Eve Nakliyat

    ReplyDelete
  27. AF607Gerald94868November 10, 2023 at 3:51 PM

    E4267
    İzmir Evden Eve Nakliyat
    Çerkezköy Çamaşır Makinesi Tamircisi
    Sinop Şehirler Arası Nakliyat
    Samsun Parça Eşya Taşıma
    Antalya Parça Eşya Taşıma
    Muş Lojistik
    Silivri Çatı Ustası
    Sonm Coin Hangi Borsada
    Çorum Evden Eve Nakliyat

    ReplyDelete
  28. 1B34FMatthew4268CNovember 12, 2023 at 8:30 AM

    1A59A
    Karabük Evden Eve Nakliyat
    Manisa Şehirler Arası Nakliyat
    Edirne Evden Eve Nakliyat
    Bolu Parça Eşya Taşıma
    Ardahan Şehirler Arası Nakliyat
    Altındağ Fayans Ustası
    Çorlu Lojistik
    Çorum Şehirler Arası Nakliyat
    Çankırı Evden Eve Nakliyat

    ReplyDelete
  29. 546BDTommy28595November 15, 2023 at 2:15 PM

    9B33B
    Malatya Evden Eve Nakliyat
    İstanbul Evden Eve Nakliyat
    Balıkesir Evden Eve Nakliyat
    parabolan for sale
    Çerkezköy Boya Ustası
    order testosterone propionat
    Kars Evden Eve Nakliyat
    Silivri Duşa Kabin Tamiri
    Adana Evden Eve Nakliyat

    ReplyDelete
  30. E7250Dominique509AENovember 29, 2023 at 7:59 AM

    2695E
    %20 komisyon indirimi

    ReplyDelete
  31. A1E75Aryana0B716December 23, 2023 at 2:46 AM

    6844E
    kütahya rastgele sohbet odaları
    şırnak telefonda görüntülü sohbet
    Karabük Seslı Sohbet Sıtelerı
    Ankara Sesli Sohbet Odası
    muhabbet sohbet
    Ağrı Kadınlarla Rastgele Sohbet
    canlı görüntülü sohbet uygulamaları
    kars sesli sohbet odası
    mobil sohbet bedava

    ReplyDelete
  32. F1848Karen65D14January 7, 2024 at 8:57 AM

    5641E
    Facebook Sayfa Beğeni Satın Al
    Onlyfans Takipçi Satın Al
    Floki Coin Hangi Borsada
    Twitch İzlenme Hilesi
    Arg Coin Hangi Borsada
    Bitcoin Kazanma
    Bitcoin Çıkarma
    Keep Coin Hangi Borsada
    Görüntülü Sohbet

    ReplyDelete
  33. AnonymousJanuary 11, 2024 at 4:20 AM


    شركة تنظيف بالجبيل
    تنظيف بالجبيل

    ReplyDelete
  34. EF2C7Gary9261FFebruary 5, 2024 at 2:19 AM

    4C41D
    galagames
    avax
    ellipal
    dexscreener
    phantom
    aave
    shiba
    quickswap
    pancakeswap

    ReplyDelete

Subscribe to: Post Comments (Atom)