تهران ، میدان ولیعصر جنب مترو کوی شاهد پلاک 8 واحد 3
88895790
بازگشت به لیست مقالات » | ﺳﻪشنبه 2 آذر 1395 در ساعت 16 : 8 دقیقه | نظرات کاربران ( 0 )

آموزش HTML  - صفحه بندی

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

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

در html  و طراحی سایت با استفاده از تگ div  میتوان صفحه بندی مورد نظر را ایجاد نمایید .در گذشته  از تگ table   نیز در این زمینه استفاده می شد .اما تگ table   به منظور درج جداول و ثبت داده ها استفاده میشود.

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

 

<!DOCTYPE html>

<html>

<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">

<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">

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

HTML<br />

CSS<br />

JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">

Content goes here</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">

Copyright Beyamooz.com</div>

</div>

</body>

</html>

 

مثال بالا در مرورگر بصورت زیر نمایش داده خواهد شد :           

 

Content goes here

 

 

در مثال بعدی روش ایجاد چند ستون با تگ DIV  را برایتان شرح خواهیم داد . و با استفاده از خصوصیت Float  به معنای شناور بودن  تگ ها را در محل های مورد نظر هدایت خواهیم کرد .

 

 

<!DOCTYPE html>

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

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<style>

body{

    direction:rtl;

}

#wrapper{

    background:#6C0;

    width:500px;   

    margin:0 auto;

}

#header{

    width:100%;

    background:#FF8000;

    height:50px;

}

#sidebar-right{

    float:right;

    background:#603;

    height:300px;

    width:100px;

}

#content{

    background:#036;

    float:right;

    height:300px;

    width:300px;

}

#sidebar-left{

    float:right;

    background:#603;

    height:300px;

    width:100px;

}

#footer{

    clear:both;

    height:25px;

    background:#0F0;

}

</style>

</head>

<body>

<div id="wrapper">

<div id="header">

header

</div>

<div id="sidebar-right">

right

</div>

<div id="content">content</div>

<div id="sidebar-left">left</div>

<div id="footer">foooter</div>

</div>

</body>

</html>   

 

        

در مثال بالا با استفاده از خصوصیت direction میتوان راست چین و یا چپ چین بودن متن ها و المان ها و عناصر را تایین کرد . خصوصیت دایرکشن به منظور نحوه ی قرار گیری متن های انگلیسی و یا فارسی می باشد . به عنوان مثال در متن های انگلیسی بصورت پیشفرض و برای زیبایی بهتر متن ها از چپ به راست شروع می شود . در اچ تی ام ال نیز بطور پیش فرض تمامی عناصر در صورت نداشتن دایرکشن و یا دستورات سی اس اس چپ چین هستند . اما در متن های فارسی به منظور زیبایی بیشتر متن با استفاده از خصوصیت دایرکشن و مقدار rtl  مشخص خواهد شد . direction  دارای دو مقدار مجزا rtl   و ltr  مشخص خواهد شد که rtl  به معنای راست به چپ و برای متن های فارسی  و مقدار ltr  به منظور چپ به راست می باشد .

مثال بالا در مرورگر بصورت زیر نمایش داده خواهد شد :

 

 

آموزش HTML

 

 

نکته : Div  یک عنصر بلاک لول block level   می باشد و تمامی یک سطر را در بر خواهد گرفت  .اما با دادن عرض به یک DIV  میتوان چند DIV  را با خصوصیت float  در کنار یکدیگر  قرار داد .

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

صفحه بندی با استفاده از جداول :

استفاده از تگ table  یکی از ساده ترین روشهای ایجاد صفحات HTML  می باشد .

نکته : در نظر داشته باشید عنصر Table  مخصوص ایجاد جدول و نمایش داده ها در قالب های جداول می باشد و به همین منظور نیز طراحی شده اند بنابراین برای ساخت صفحات و صفحه بندی در HTML  از سایر تگ ها نظیر تگ Div  استفاده میشود .

در بخش زیر، یک جدول با 3 ستون ایجاد شده است . در جداول با استفاده از خصوصیت colspan  سلول های سطرهای اول و آخر با هم ادغام خواهند شد .در مثال زیر ببینید :

 

 

<!DOCTYPE html>

<html>

<body>

<table width="500" border="0">

<tr>

<td colspan="2" style="background-color:#FFA500;">

<h1>web design</h1>

</td>

</tr>

<tr valign="top">

<td style="background-color:#FFD700;width:100px;text-align:top;">

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

HTML<br />

CSS<br />

JavaScript

</td>

<td style="background-color:#eeeeee;height:200px;width:400px;text-align:top;">

Content goes here</td

</tr>

<tr>

<td colspan="2" style="background-color:#FFA500;text-align:center;">

Copyright  2015 www.int-net.ir</td

</tr>

</table>

</body>

</html>

 

 

 

مثال بالا در مرورگر بصورت زیر نمایش داده خواهد شد :

 

 

web design

Menu
HTML
CSS
JavaScript
Content goes here
Copyright 2015 www.int-net.ir

 

 

با آموزش های موجود در سایت INT  طراحی سایت حرفه ای را فراگیرید . 

جهت آموزش CSS  روی لینک روبرو کلیک نمایید »»» آموزش CSS

در آموزش های بعدی روش ایجاد فرم ها را توضیح خواهیم داد . درس بعدی »»»  آموزش HTML  فرم ها

با ما همراه باشید .

ارسال نظر

عنوان نظر :
نام شما :
ایمیل :