گروه بندی و کنار هم قرار دادن عناصر صفحه با تگ های Span و Div

ما با استفاده از تگ های Span و Div در CSS و html می توانیم ، عناصر صفحه را در کنار یکدیگر قرار دهیم و قالب های سه ستونه یا دو ستونه را به راحتی مشخص کنیم.

مباحث فصل ششم از آموزش CSS

• گروه بندی عناصر صفحه با استفاده از تگ های Span و Div
• آشنایی با نحوه طرح بندی و طراحی قالب سایت
• طرح بندی صفحات (Float base)
• ایجاد قالب های شناور دو ستونه
• ایجاد قالب های شناور سه ستونه

گروه بندی عناصر صفحه با استفاده از تگ های Span و Div

سابق برای گروه بندی صفحات از تیبل استفاده میکردند، یعنی با ادغام نمودن چندین سطر و ستون صفحات را تقسیم بندی میکردند، که البته این نوع گروه بندی دارای نواقص زیادی بود از جمله درست لود نشدن سایت، امکانات کم در جابجایی عناصر و در ضمن برای SEO سایت نیز خوب نبود اما حالا شما میتوانید از تگ های Div و Span برای گروه بندی سایر تگ ها به منظور ایجاد بخش ها و زیر بخش های داخل یک صفحه HTML استفاده نماید. از این دو عنصر معمولاً به همراه CSS برای اینکه به گروهی از عناصر Style خاصی نسبت دهیم استفاده میشود.

برای مثال فرض کنید می خواهید تعدادی عنصر در بخشی از صفحه همیشه از کلاس خاصی پیروی کنند. احتمالاً کلاس مورد نظر به روش زیر به تک تک آن ها نسبت می دهید.

<h3 class=”footer”> This is a header of footer</h3> 

<p class=”footer”> This is a paragraph </p> 

<h2 class=”footer”> This is a paragraph <h2> 

<strong class=”footer”> This text is strong </strong>

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

<div class=”footer”>

<h3 This is a header of footer</h3>

<p> This is a paragraph </p>

<h2> This is a paragraph <h2>

<strong> This text is strong </strong>

</div>

یکی از ویژگی های مهم تگ Div این است که از آن برای گروه بندی عناصر Block-level و inline میتوان استفاده نمود.

از طرف دیگر ما میتوانیم از تگ Span فقط برای گروه بندی از نوع عناصر inline استفاده کنیم .

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

<p>He has <span class=”blue”> light blue</span> eyes </p>

یکی دیگر از تفاوت های تگ های span و Div در این است که تگ div خود جزء block-level و Span جزء عناصر Inline-level است.

آشنایی با نحوه طرح بندی و طراحی قالب سایت

در این مبحث قصد داریم به برسی روش های طرح بندی (Layout) که این روز ها با عنوان طراحی قالب یاد میشود آشنا شویم.

راه های گوناگون برای این امر وجود دارد که استفاده از عنصر Table یکی از آنها است. استفاده از جدول برای طرح بندی کلی صفحات به دلیل مشکلاتی همچون سخت بودن کار با ها )مخصوصاً هنگام کار با جداول تو در تو(، سرعت با گذاری پایین و عدم کنترول دقیق چگونگی نمایش، دیگر این روز ها پیشنهاد نمیشود و به جای آن استفاده از ترکیب عناصر ساده تری همچون div به همراه قواعد Css برای کنترول خصوصیات آن ها توصیه میشود.

در این فصل سعی میکنیم به اختصار به نحوه طراحی قالب های دو ستونه و سه ستونه پرداخته شود.

طرح بندی صفحات (Float-based)

راه های گوناگون برای طرح بندی صفحات از طریق css وجود دارد که از آن میتوان به استفاده از روش تعیین مکان مطلق عناصر با کمک قواعد Poisition و Margin اشاره نمود. اما ما از روش دیگر که بسیار ساده تر و البته پر کاربرد تر است استفاده خواهیم کرد. و آن استفاده از قواعدی همچون Flaot و Clear برای تعیین موقعیت عناصر است. در این روش ما به سادگی عرض و ارتفاع عناصر را تعیین کرده و سپس مشخص میکنیم که در چپ یا راست عناصر در برگیرنده خود قرار بگیرند. ( در واقع ما مشخص میکنیم که عناصر در کدام جهت شناور شوند.)

ایجاد طراح (قالب) های شناور دو ستونه

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

Content : بخش محتوا که قرار است محتوای اصلی سایت در آن قرار بگیرد.

MainNav  : بخش پیمایش اصلی (main navigation) که قرار است در سمت چپ قرار گرفته و حاوی لینک ها و عناصر برای دسترسی ساده تر کاربر به صفحات دیگر سایت باشد.

Footer  : بخش پانویس که قرار است اطلاعاتی اضافی از سایت را در آن قرار دهیم.

هر کدام از این عناصر را با یک عنصر Div با نام wrapper پوشانده شده اند.

به کد زیر دقت کنید :

<div id=”wrapper”>

                <div id=”content”>

                …..

                </div>

                <div id=”mainNav”>

                …..

                </div>

                <div id=”footer”>

                …….

                </div>

</div>

در این مثال قرار است Content به سمت راست و mainNav به سمت چپ بروند. به این نکته دقت کنید چون بخش Content ما حاوی اطلاعات مهمتر است کد آن نیز باید قبل از بخش mainNav بیاید تا دسترسی و استفاده از آن نیز آسان تر باشد.

حال به سراغ تعیین قواعد عناصر فوق در CSS میرویم. ما از Selector نام برای تعریف قواعد برای هر بخش استفاده میکنیم. ابتدا بصورت زیر برای هر یک از بخش های Content و mainNav عرض تعیین کنیم:

#content {

                Width: 520px;

                Float: right;

}

#mainNav {

                Width:180px;

                Float: left;

}

همانطور که میبینید چون Content باید در سمت راست قرار بگیرد قاعده Float آن را برابر Right و برای mainNav آن برابر left قرار میدهیم. به تصویر زیر نگاه کنید :

نکته بسیار مهم:

از آنجایی که عناصر از نوع شناور) یعنی عناصر که قاعده Float آنها برابر Right یا Left باشد (معمولاً از جریان عادی صفحه خارج شده و بر روی عناصر دیگر نمیتوانند تاثیر بگذارند احتمالاً بصورت کامل در عنصر در بر گیرنده خود (در مثال ما منظور از عنصر در بر گیرنده Wrapper است) قرار نگرفته و آن چیزی که انتظار داریم انجام نمیشود. در واقع طرح ما به صورت زیر خواهد آمد.

برای حل این مشکل دو راه حل وجود دارد :

1. یا اینکه عنصر در برگیرنده (wrapper) خود حالت float داشته باشد. (یعنی به چپ یا راست متمایل شود) این مورد را امتحان کنید !
2. یا اینکه عنصر با قاعده Clear : both را در آن قرار دهیم .

ما از روش دوم استفاده خواهیم کرد. برای این کار از بخش Footer استفاده میکنیم و قاعده Clear آن برابر Both قرار دهیم. با این کار مطمئن میشویم که Footer دقیقاً در پایین دو بخش قبلی قرار خواهد کرد و چون خود، حالت Float ندارد در نتیجه به عنصر Wrapper ارتفاع خواهد داد و به این شکل مشکل قبلی اصلاح خواهد شد:

#footer {

                Clear:both;

}

ایجاد طرح های سه ستونه شناور :

ساختار صفحه HTML مورد استفاده برای ایجاد طرح های سه ستونه بسیار شبیه به ساختار طرح های دو ستونه است، تنها تفاوت، اضافه شدن دو عنصر Div جدید در بخش Content است: یکی با نام MainContent برای محتوای اصلی و دیگری با نام SecondaryContent برای محتوای ستون سوم که قرار است در سمت راست نمایش داده شود :

<div id=”content”>

                <div id=”mainContent”>

                …….

                </div>

                <div id=”secondaryContent”>

                ……..

</div>

دقیقاً با همان روش که قبلاً اشاره شد میتوان عنصر mainContent را به چپ و عنصر secondaryContent را به سمت راست عنصر Content هدایت کرد  :

#mainContent {

                Width: 320px;

                Float: left;

}

#secondaryContent {

                Width: 180px;

                Float: right;

}

در واقع با این کار ما عنصر Content را به دو قسمت تقسیم کردیم که با عنصر mainNav جمعاً تشکیل سه ستون میدهند. تصویر زیر گویای موضوع خواهد بود.