آموزش شیوه های طرح بندی در HTML

رتبه: 0 ار 0 رای sssss
HTML
نویسنده: میلاد حیدری زمان مطالعه 4 دقیقه
Banner Image

ایجاد طرح بندی ها از مهمترین موارد در هنگام طراحی وب سایت است، چونکه تضمین می کند که وب سایت شما به صورت مرتب و منظم نمایش داده شود و همچنین درک محتوای سایت ساده به نظر برسد. تکنیک ها و چارچوب های در دسترس متفاوتی برای ایجاد طرح بندی صفحه وجود دارد، در این آموزش تکنیک های ساده را یاد خواهیم گرفت.

برای ایجاد طرح های چند ستونه می توانید از روش های زیر استفاده کنید:

  • جداول (سعی کنید از آنها استفاده نکنید)
  • ویژگی های شناوری در CSS
  • چارچوب CSS
  • فلکس باکس (Flexbox)در  CSS
  • طرح بندی با استفاده از div

جداول HTML (توصیه نمی شود)

طرح بندی مبتنی بر جدول یکی از ساده ترین راه ها برای ایجاد یک طرح است، جدول تنها از قالب مبتنی بر ستون و ردیف ها استفاده می کند اما برای طرح بندی صفحه توصیه نمی شود..

عنصر داده ها را به صورت جدولی نمایش می دهد. برای طرح بندی صفحه مناسب نیست. اگرچه در ابتدا ساخت چیدمان صفحه آسان است اما اگر بخواهید وب سایت خود را تغییر داده یا از ابتدا طراحی کنید، آن وقت کار پیچیده خواهد شد.

مثال زیر نحوه ایجاد یک طرح بندی ساده صفحه وب را با استفاده از جدول نشان می دهد.

مثال

<!DOCTYPE html>

<html>

 <head>

    <style>

        li{

            display: inline-block;

            padding: ۱۰px;}

        a{

            color:#20b2aa;

        }

      </style>

 </head>

<body>

     <!– Header Section –>

       <table width=”100%” style=”border-collapse:collapse;”>

           <tr>

            <td colspan=”2″ style=”background-color:#1a1a1a; text-align: center;”>

                <h3 style=”font-size: ۳۰px; color: #ff6a6a;”>javaTpoint Table-layout</h3>

            </td>

         </tr>

   <!– Nav Section –>

          <tr>

                        <td colspan=”2″ style=”background-color:#666666;”>

                <ul>

                                                      <li><a href=”#”>Home</a></li>

                <li><a href=”#”>Menu</a></li>

                <li><a href=”#”>About-us</a></li>

                <li><a href=”#”>Contact us</a></li>

            </ul>

                                        </td>

          </tr>

   <!– Main Section –>

          <tr>

             <td style=”background-color:#e6e6fa; width:80%; height: ۴۰۰px; text-align: center;”>

               <p>Write your content Here</p>

              </td>

              <td style=”background-color:#a7e6fb; height: ۴۰۰px;”>

                 <p>This is your side bar</p>

              </td>

         </tr>

     <!– Footer Section –>

           <tr>

             <td colspan=”2″ style=”background-color:#2e2e2e; text-align: center;”>

                <p style=”color:#f08080″>©<strong>Copyright javaTpoint.com</strong></p>

            </td>

          </tr>

    </table>

 </body>

</html>

خروجی

نکته: این مثال فقط برای نشان دادن چگونگی ساخت طرح بندی صفحه با استفاده از جدول است اما استفاده از طرح بندی جدولی توصیه نمی شود.

چارچوب های CSS

CSS چارچوب های زیادی مانندW3.CSS ، بوت استرپ و بسیاری موارد دیگر برای ساخت سریع طرح بندی برای شما فراهم می کند. با استفاده از چارچوب های CSS می توانید به راحتی یک طرح واکنش گرا و جذاب ایجاد کنید. فقط باید یک لینک برای این چارچوب ها در صفحه اضافه کرده و سپس می توانید از تمامی ویژگی های موجود در چارچوب استفاده کنید.

شناوری در CSS

با استفاده از خاصیت شناور کردن (float) در CSS می توانید یک طرح بندی وب کامل ایجاد کنید.

مزیت: یادگیری و استفاده از آن بسیار آسان است. فقط باید یاد بگیرید که ویژگی های float و clear چگونه کار می کنند.

نقطه ی ضعف: عناصر شناور به جریان سند گره خورده اند که ممکن است به انعطاف پذیری آسیب برسانند.

مثال

<!DOCTYPE html>

<html>

<head>

<style>

div.container {

    width: ۱۰۰%;

    border: ۱px solid gray;

}

header, footer {

    padding: ۱em;

    color: white;

    background-color: #۰۰۰۰۸۰;

    clear: left;

    text-align: center;

}

nav {

    float: left;

    max-width: ۱۶۰px;

    margin: ۰;

    padding: ۱em;

}

nav ul {

    list-style-type: none;

    padding: ۰;

}

nav ul a {

    text-decoration: none;

}

article {

    margin-left: ۱۷۰px;

    border-left: ۱px solid gray;

    padding: ۱em;

    overflow: hidden;

}

</style>

</head>

<body>

<div class=”container”>

<header>

<h1>Tutorials Gallery</h1>

</header>

<nav>

<ul>

<li><a href=”#”>HTML</a></li>

<li><a href=”#”>CSS</a></li>

<li><a href=”#”>JavaScript</a></li>

</ul>

</nav>

<article>

<h1>HTML</h1>

<p>HTML tutorial or HTML ۵ tutorial provides basic and advanced concepts of html. Our HTML tutorial is

developed for beginners and professionals.</p>

<p>TML is an acronym which stands for Hyper Text Markup Language. Let’s see what is Hyper Text and what is Markup Language?</p>

</article>

<footer>Copyright © javatpoint.com</footer>

</div>

</body>

</html>

خروجی

Flexbox درCSS

Flexbox یک حالت چیدمان جدید در ۳CSS است.

مزیت: تضمین می کند که طراحی صفحه با اندازه دستگاه ها و صفحه نمایش های مختلف سازگاری دارد.

نقطعه ضعف: در مرورگر ۱۰IE و قبل از آن کار نمی کند.

مثال

<!DOCTYPE html>

<html>

<head>

<style>

.flex-container {

    display: -webkit-flex;

    display: flex;

    -webkit-flex-flow: row wrap;

    flex-flow: row wrap;

    text-align: center;

}

.flex-container > * {

    padding: ۱۵px;

    -webkit-flex: ۱ ۱۰۰%;

    flex: ۱ ۱۰۰%;

}

.article {

    text-align: left;

}

header {background: #۰۰۰۰۸۰;color:white;}

footer {background: #۰۰۰۰۸۰;color:white;}

.nav {background:#eee;}

.nav ul {

    list-style-type: none;

    padding: ۰;

}

.nav ul a {

    text-decoration: none;

}

@media all and (min-width: ۷۶۸px) {

    .nav {text-align:left;-webkit-flex: ۱ auto;flex:1 auto;-webkit-order:1;order:1;}

    .article {-webkit-flex:5 ۰px;flex:5 ۰px;-webkit-order:2;order:2;}

    footer {-webkit-order:3;order:3;}

}

</style>

</head>

<body>

<div class=”flex-container”>

<header>

<h1>City Gallery</h1>

</header>

<nav class=”nav”>

<ul>

<li><a href=”#”>HTML</a></li>

<li><a href=”#”>CSS</a></li>

<li><a href=”#”>JavaScript</a></li>

</ul>

</nav>

<article class=”article”>

<h1>HTML</h1>

<p>HTML tutorial or HTML ۵ tutorial provides basic and advanced concepts of html. Our HTML tutorial is

developed for beginners and professionals.</p>

<p>TML is an acronym which stands for Hyper Text Markup Language. Let’s see what is Hyper Text and what is Markup Language?</p>

<p><strong>Resize this page to see what happens!</strong></p>

</article>

<footer>Copyright © javatpoint.com</footer>

</div>

</body>

</html>

خروجی

خروجی

طرح بندی با استفاده از عنصر div

<!DOCTYPE html>

<html>

<head>

    <title>Webpage using div</title>

    <style>

        body{

            margin:0px;

        }

        .header{

                padding: ۱۰px;

                background-color:#455e64;

                text-align: center;

               }

          .header h2{

            color: black; }

              /*===============[Nav CSS]==========*/

              .nav{

                background-color:#243238;

                padding: ۵px;

                }

              .nav li{

              list-style: none;

              display: inline-block;

              padding: ۸px;

               }

           .nav a{

            color: #fff;

           }

          .nav ul li a:hover{

            text-decoration: none;

            color: #۷fffd4;

           }

              .lside{

                 float: left;

               width: ۸۰%;

               min-height: ۴۴۰px;

               background-color: #f0f8ff;

               text-align: center;

              }

           .rside

           {

            text-align: center;

            float: right;

            width: ۲۰%;

              min-height: ۴۴۰px;

             background-color:  #c1cdcd;

           }

           .footer{

             height: ۴۴px;

                background-color:#455e64;

            text-align: center;

            padding-top: ۱۰px;}

            .footer p{

                color:  #۸fbc8f;

            }

    </style>

</head>

<body>

<div>

    <div class=”header”>

      <h2>javaTpoint Div Layout</h2>

    </div>

            <!– Nav –>

        <div class=”nav”>

            <ul>

                <li><a href=”#”>HOME</a></li>

                <li><a href=”#”>MENU</a></li>

                <li><a href=”#”>ABOUT</a></li>

                <li><a href=”#”>CONTACT</a></li>

                <li style=”float: right;”><a href=”#”>LOGIN</a></li>

                <li style=”float: right;”><a href=”#”>SIGN-UP</a></li>

            </ul>

        </div>

      <!– main –>

        <div style=”height:440px”>

            <div class=”lside”>

                <p>Write your content here</p>

            </div>

        <!– side –>

            <div class=”rside”>

                <p>This is side</p>

            </div>

        </div>

      <!– footer –>

       <div class=”footer”>

        <p>©<strong>Copyright javaTpoint.com</strong></p>

    </div>

 </div>

</body>

</html>

خروجی

خروجی

profile name
میلاد حیدری

بخندید کتاب بخونید و خوب باشید تا جامعه مون به آرامش برسه. لطفا ! هر سوالی دارید در بخش نظرات مطرح کنید. ما یا سایر هموطنان عزیز پاسخ خواهیم داد. برای کمک به سایت ما و گسترش آموزش در بین هموطنان، در سایتها، وبلاگ ها و شبکه های اجتماعی لینک سایت ما را درج کنید.

مطالب پیشنهادی برای شما

محصولات مرتبط

مشاهده همه

دیدگاهتان را بنویسید

1 2 3 4 5

0 نظر درباره «آموزش شیوه های طرح بندی در HTML»

    هنوز نظری برای این بخش ثبت نشده است
مشاهده همه نظرات
سبد خرید
سبد خرید شما خالی است
× جهت نصب روی دکمه زیر در گوشی کلیک نمائید
آی او اس
سپس در مرحله بعد برروی دکمه "Add To Home Screen" کلیک نمائید