آموزش 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>
مثال بالا در مرورگر بصورت زیر نمایش داده خواهد شد :
در مثال بعدی روش ایجاد چند ستون با تگ 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 به منظور چپ به راست می باشد .
مثال بالا در مرورگر بصورت زیر نمایش داده خواهد شد :
نکته : 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 فرم ها
با ما همراه باشید .