سفارش تبلیغ
صبا ویژن

HTML Layouts

HTML Layouts

آموزش HTML Layout ‏ ‏

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

 

Layout HTML – استفاده از جدول ها

ساده ترین و محبوب ترین راه برای ایجاد Layout ها، استفاده از برچسب < table>در HTML می باشد. این جدول ها در ردیف ها و ستون ها منظم می شوند که شما می توانید از این ردیف ها و ستون ها به هر طریقی که می خواهید استفاده کنید.


 مثال:

برای مثال، نمونه Layout HTML زیر از طریق استفاده ی یک جدول با سه ردیف و دو ستون به دست می آید، اما عنوان و پاورقی ستون هر دو ستون را با استفاده از ویژگی colspan احاطه می کند.

 

نمونه یک

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>HTML Layout using Tables</title>

</head>

<body>

    <table width="100%" border="0">

        <tr>

            <td colspan="2" bgcolor="#b5dcb3">

                <h1>This is Web Page Main title</h1>

            </td>

        </tr>

        <tr valign="top">

            <td bgcolor="#aaaa" width="50">

                <b>Main Menu</b><br />

                HTML<br />

                PHP<br />

                PERL...

            </td>

            <td bgcolor="#eeeee" width="100" height="200">

                Technical and Managerial Tutorials

            </td>

        </tr>

        <tr>

            <td colspan="2" bgcolor="#b5dcb3">

                <center>

                    Copyright © 2007 Tahlildadeh.com

                </center>

            </td>

        </tr>

    </table>

</body>

</html>

Layout های HTML – استفاده از DIV و Span

عنصر < div>یک عنصر block level می باشد که برای گروه بندی عناصر HTML استفاده می شود. در حالیکه این عنصر یک عنصر block level است، عنصر< span>برای گروه بندی عناصر در یک سطح درون خطی استفاده می شوند.
گرچه می توانیم با جدول های HTML ، Layout های بسیار زیبایی به دست آوریم، اما جدول ها در واقع به عنوان ابزار Layout طراحی نشده اند، و بیشتر برای نمایش داده های جدولی استفاده می شوند.

 

نمونه دو

 توجه:

این مثال از CSS استفاده می کند، بنابراین قبل از درک این مثال، بهتر است درک بهتری از چگونگی کار CSS داشته باشید.

 مثال:

در اینجا سعی می کنیم با استفاده از برچسب < div> همراه با CSS همان نتیجه ای را به دست اوریم که هنگام استفاده از برچسب < table> در مثال قبل به دست آوردیم.

 

نمونه سه

شما می توانید با استفاده از DIV و SPAN به همراه CSS، Layout های بهتری طراحی کنید. برای درک بیشتر از CSS لطفا به CSS Tutorial مراجعه کنید.

 

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