صفحه بندی در وب، برای اینکه سایت شما جذاب به نظر برسد، بسیار مهم است.
پس صفحه وبتان را با دقت طراحی نمایید.
مثال - خودتان امتحان کنید
Web page layout using <div> elements
نحوه صفحه بندی با استفاده از عناصر <div>.
Web page layout using <table> elements
نحوه صفحه بندی با استفاده از عناصر <table>.
صفحه بندی وب سایت ها
بیشتر وب سایت ها محتویات خود را در چندین ستون قرار می دهند (به فرمت مجله ها یا روزنامه ها)
با استفاده از عناصر <div> یا <table> می توان حالت چند ستونی را ایجاد نمود.
 | گرچه می توان به وسیله جداول HTML، صفحه بندی نمود اما باید دانست که جداول برای ارائه داده ها در قالب جدول هستند نه ابزاری برای صفحه بندی. |
|---|
صفحه بندی با استفاده از عناصر <div>
عنصر <div> یک عنصر block می باشد که برای گروه بندی عناصر HTML استفاده می شود.
توجه: CSS برای چیدمان عناصر یا ایجاد پس زمینه یا نمای رنگی برای صفحات استفاده می شود.
در مثال زیر، از پنج عنصر div برای صفحه بندی استفاده شده است. همچنین از CSS برای تعیین مکان عناصر، ایجاد پس زمینه رنگی و مشخص کردن عرض و ارتفاع عناصر استفاده شده است:
مثال (صفحه بندی در 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>
کد HTML بالا نتیجه زیر را ایجاد خواهد کرد:
Main Title of Web Page
HTML
CSS
JavaScript
مثال - خودتان امتحان کنید
Web page layout using <div> elements with 3 columns
در این مثال، نحوه صفحه بندی سه ستونه نشان داده شده است.
صفحه بندی با استفاده از جداول
راه ساده ایجاد یک صفحه بندی، استفاده از تگ <table> می باشد.
حالت چند ستونی به وسیله عناصر <div> یا <table> ایجاد می شود. CSS برای تعیین مکان عناصر یا ایجاد پس زمینه یا نمایی رنگی برای صفحات استفاده می شود.
| استفاده از جداول برای حالت چند ستونی، کاربرد درستی از عنصر <table> نمی باشد. هدف از عنصر <table> نمایش داده ها در قالب جدول است. |
|---|
در مثال زیر، از یک جدول با سه سطر و دو ستون استفاده شده است. با استفاده از خصوصیت colspan سلول های سطرهای اول و آخر با هم ادغام شده اند.
مثال (صفحه بندی در HTML)
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</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 © W3Schools.com</td>
</tr>
</table>
</body>
</html>
کد بالا نتیجه زیر را ایجاد می کند.
Main Title of Web Page | |
| Menu HTML CSS JavaScript | Content goes here |
| Copyright © W3Schools.com | |
نکات مهم
نکته: بزرگترین مزیت استفاده از CSS این است که اگر کد CSS را در یک style sheet بیرونی قرار دهید سایت شما خیلی راحت تر حفظ می شود. شما می توانید صفحه بندی کل وب سایتتان را با ویرایش یک فایل تغییر دهید.
برای کسب اطلاعات بیشتر در مورد CSS به لینک روبرو مراجعه فرمایید: آموزش CSS-معرفی سی اس اس
نکته: به دلیل اینکه ایجاد صفحه بندی های پیشرفته زمان گیر است، گزینه سریعتر، استفاده از یک الگو(template) می باشد. با جستجو در گوگل می توانید وب سایت های رایگانی را که این الگو ها را ارائه می دهند بیابید. (می توانید از آنها استفاده کنید و آنها را سفارشی کنید.)
تگ های صفحه بندی در HTML
| تگ | توضیح |
|---|---|
| <div> | تعریف یک ظرف برای دیگر عناصر (تگ div یک عنصر Block است) |
| <span> | تعریف یک ظرف برای دیگر عناصر (تگ span یک عنصر Inline است) |
در مثال زیر، چرا اگه خصوصیت width رو برای wrapper تعریف نکنیم اگر چه برای footer کلیر تعریف کنیم ولی footer در جای خودش قرار نمیگیره ؟؟
beyamooz.com/try_it_yourself/tryit.php?filename=tryhtml_layout_divs_3columns
می خواستم بیبینم استفاده از خصوصیت id در مثال اول، کاربرد خاصی دارد؟ اگر نباشد ایا اتفاق خاصی می افتد؟
بله حق با شماست. در واقع اگر ID هایی که برای عناصر در نظر گرفتیم را حذف کنید در خروجی تأثیری ایجاد نخواهد شد.
اما توجه داشته باشید که برای صفحه بندی در HTML به هیچ عنوان نباید بصورت درون تگی، استایل دهی کنیم. در اینجاست که اگر از روش فایل CSS خارجی استایل دهی را انجام دهیم، IDهایی که برای Divها تنظیم کرده ایم استفاده خواهد شد.
دستور float و دستور clear به CSS مربوط می شوند. به طور خلاصه می توان گفت که دستور float:left باعث میشه که عنصر مورد نظر به سمت چپ شناور بشه. و دستور clear:both هم باعث میشه که عنصر مورد نظر از دو طرف شناور نباشد.
هنگام صفحه بندی همه عناصر من در سمت راست یا سمت چپ قرار میگیرند چیکار کنم که این عناصر بیان وسط صفحه؟
می خواستم بپرسم فرق id و class چیه؟
از هر دو برای دسترسی به عناصر در JavaScript و CSS و jQuery و ... استفاده می شود. اما زمانی که می خواهید ویژگی id را تنظیم کنید باید دقت کنید که در کل صفحه مقدار در نظر گرفته شده منحصر بفرد باشد. یعنی زمانی که می گوییم فلان عنصر با id مثلا test را می خواهیم باید فقط یک عنصر یافت شود. اما در مورد ویژگی class چنین محدودیتی وجود ندارد، یعنی در یک صفحه شما می توانید چندین عنصر را با یک class یکسان تنظیم کنید. و زمانی که می گویید عناصر با class مثلا test را بده، ممکن است بیش از 1 عنصر یافت شود.
میخواستم بگم من راجع به صفحه بندی سایت در چند سایت دیگه هم مطالب مطالعه کردم اما بعضیاشون نوشته بودن در اچ تی ام ال 5 تگ div برای صفحه بندی منسوخ شده، آیا درسته؟ متن دقیق هم این بوده:
در HTML 4.01 ، تگ اغلب برای مشخص کردن بخش های ناوبری مختلف در یک سند HTML (مانند header ، footer ، content area ، side bars ، و غیره) مورد استفاده می گرفت.
HTML 5 عناصر جدیدی را معرفی کرده که باید به جای عنصر استفاده شوند. نمونه هایی از این عناصر جدید شامل < article>، ، و و … هستند .
ممنون میشم پاسخ بدید :)
در HTML5 تگ های جدیدی مثل header و Footer و ... معرفی شده است که پیشنهاد می شود حتما بجای Div از تگهای مذکور برای صفحه بندی استفاده کنید.
برای اطلاعات بیشتر مطالب ارائه شده در منوی "بیاموز HTML5" را مطالعه فرمایید.
سوالم اینه که منظورتان از الگو(template) همان قالب سایت میباشد؟؟؟
بعنوان مثال سایت زیر یک نمونه است.
www.html5webtemplates.co.uk/templates.html
ببخشید من id داخل div را متوجه نشدم و وقتی حذفشون کردم اتفاق خاصی نیوفتاد
میشه یکم توضیح بدین؟
id در یک واقع یک شناسه یکتا هست که به تگ خاصی میتونه اعمال بشه. در کل صفحه فقط مجاز به استفاده از یک id برای یک تگ خاص هستیم.
خود id به تنهایی کاری نمیکنه، ولی از اون در زبانهای CSS و javascript میشه برای اشاره به اون تگ موردنظر استفاده کرد.
وظیفه این کدها ممنون میشم یه توضیحی بدید ؟
style="margin-bottom:0
footer
both;text-align:center;">
کدها درست نیومده!
margin باعث ایجاد فاصله از بخش بیرونی المنت یا تگ موردنظر با سایر المان‌های خارجی میشه.
margin-bottom باعث ایجاد این فاصله فقط از سمت پایین میشه.
text-align ترازبندی متن رو تنظیم می‌کنه. عبارت center باعث ترازبندی از مرکز میشه.
و دوم این که این کد های سی اس اس هستند که به صورت درون تگی در اچ تی ام ال تعریف شده اند.
موفق باشید.
ممنون
چرا همیشه بالای صفحه و سمت چپ و راست یه حاشیه هست چطوری میشه اونو حذف کرد
برای رفع این مشکل کافیست در CSS برای تگ body خود مقادیر margin و padding رو برابر صفر قرار بدید.
به این صورت:
body{margin:0;padding:0} /*comment
وقتی قراره استایل را تو یه فایل خارجی قرار بدیم منظورتون دقیقا کجاس؟و چطور باید انجامش داد؟
منظور این هست که کنار فایل html. یک فایل با پسوند css. ایجاد کرده و کدهای CSS خودمون رو در فایل مذکور قرار میدیم. بعد از طریق تگ link فایل css رو به فایل html پیوست میکنیم.
فرض کنید ما یک پوشه به نام new داریم. در این پوشه دو فایل با نام index.html و main.css ایجاد میکنیم.
در فایل main.css کدهای css مثل کدهای زیر قرار می‌دهیم:
@charset "utf-8";
body {
margin:0px;
padding:0px;
font-family:tahoma !important;
font-size:12px !important;
background-color:#ddd !important;
}
div{
padding:10px;
margin:5px;
border:1px solid #ccc;
}
.Center{
text-align:center;
}
در فایل index.html کد زیر قرار می‌دهیم:
<!DOCTYPE html>
<html>
<head>
<title>Link CSS File</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div class="Center">
<h1>Titr</h1>
<p>This is a test for you. This is a test for you. This is a test for you. This is a test for you. This is a test for you. </p>
</div>
</body>
</html>
خط قرمز نحوه‌ی لینک کردن فایل main.css را در فایل index.html نشان میدهد. در اینجا برای راحتی فهم هر دو فایل رو در یک پوشه قرار دادیم. اگر فایلها در جای مختلفی از هم باشن، در هنگام لینک کردن باید آدرس صحیح فایل رو بدید.
موفق باشید.
سوال بعدیم اینه که فایده (wrapper)چیه اصلا؟ وکار margin:0 auto چیه؟درمورد این مسایل وکلمات جدیدهم توضیح بدین.مرسی
ممنون از حسن نگاهتون.
wrapper یک نام است که برای یک شناسه تعریف شده است. این نام اجباری نیست و می توانید هر نام دیگری استفاده کنید.
در مثال اول اگر بخوهیم منو ها در سمت راست قرار گیرند و یا در کل صفحه راست چین باشد چه باید کرد؟
سوال دوم اینکه خاصیت clear چیست چه کاربردی دارد من درست نفهمیدم میشه بیشتر توضیح بدید.
سوال سوم برای ارسال تصویر آدرس کامل تصویر را از روی کامپیوتر وارد می کنم جواب نمی ده چرا کلیک راست properties بعد هم locationکپی پیست مگه همین نیست ولی جواب نمی ده چرا؟ فرمت تصویر چی باید باشه jpj؟؟؟ لطفا پاسخ دهید ممنون
سلام، فقط کافی است، قسمت های قرمز رنگ را تغییر دهید:<!DOCTYPE html>
<html>
<body style="direction:rtl">
<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:right;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:right;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright Beyamooz.com</div>
</div>
</body>
</html>
برای درک خصوصیت clear باید float را خوب فهمیده باشید.
همان طور که می دانید با استفاده از خصوصیت flaot می توانید، یک عنصر block که تمام طول یک سطر را اشغال می کند به سمت راست یا چپ شناور کنید، مثلاً عنصر div یک عنصر block است و خودخواهانه تمام طول سطر را به خودش اختصاص می دهد. با تنظیم float روی div از حالت block در می آید و اجازه می دهد تا عنصر بعدی اش در کنارش قرار بگیرد و این اتفاق تا جایی که خط مذکور جا داشته باشد برای عناصر بعدی خواهد افتاد.
حالا اگر نمی خواهید عنصر جاری در کنار عنصر float شده قرار بگیرد، فقط کافی است که خصوصیت clear را برای آن تنظیم کنید.
برای کسب اطلاعات بیشتر در مورد خصوصیت Clear به لینک زیر مراجعه فرمایید:
beyamooz.com/cssref/227-css-properties/851-clear
دقیقاً متوجه سوالتون نشدم ...! اما اگر می خواهید، عکسی را از روی کامپیوترتون روی وب در قسمت "دیدگاه های" سایت بیاموز قرار بدید، این راهش نیست ...! ابتدا باید عکستون را روی اینترنت قرار بدید و سپس آدرس اینترنتی آن را در قسمت دیدگاه ها استفاده کنید.
از پاسخ سریع شما بسیار تشکر می کنم
توفیقات شما روز افزون
من نمی تونم دستور div رو بفهممش یه جوری برام گنگ هستش اگه میشه کمک کنید تا درکش کنم ... مرسی
1- div یک عنصر block است یعنی تمام طول یک سطر را اشغام می کند و دیگر عناصر را کنار خودش تحمل نمی کنه، حتی اگر یک کاراکتر داخلش باشه، باز تمام طول سطر را اشغال می کنه ...
2- بیشتر بعنوان یک ظرف برای دیگر عناصر بکار می رود. بعنوان مثال یک فرم اطلاعاتی که شامل 5 فیلد است را در نظر بگیرید، اگر بخواهیم فضای پشت تمام فیلدها را "خاکستری" کنیم، راه حل چیست؟ خوب باید فیلدها را داخل div قرار بدیم و سپس پس زمینه div را "خاکستری" کنیم.
3- div مخفف division بمعنی "قسمت" است و همان طور که در مطلب بالا دیدید یکی از کاربردهای مهم div یعنی قسمت بندی صفحه، آموزش داده شده است.
1-در مثال اول که صفحه بندی با استفاده از div هست برای header از h1 استفاده شده و در h1 با style خصوصیت margin-bottom=0 شده وقتی عدده صفر را تغییر میدیم مثلا 1 میکنیم یک حاشیه پایین header ایجاد میشه ولی اگه عددو بیشتر کنیم حاشیه بزرگتر نمیشه در واقع حاشیه ایجاد شده ثابته چه 1 بدیم چه 8 چرا ؟
2-اگه خصوصیت margin-bottom اصن تعریف نکنیم اون حاشیه بازم ایجاد میشه چرا؟ یعنی browser خودش بعد از هر سطر یه فضای خالی میندازه ؟
ممنون .
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
و اما جواب این سوال که چرا برای h1 خصوصیت margin-bottom را با "0" تنظیم کرده ایم ...!؟
اگر margin-bottom تنظیم نشود، حالت پیش فرض که margin-bottom: 0.67em است در نظر گرفته می شود و چون این اندازه جزو محتوای div والد محسوب نمی شود، بنابراین بهم ریختگی خواهیم داشت و یا بقول شما پایین فضای نارنجی رنگ header یک حاشیه یا فضای سفید رنگ ظاهر می شود.
و اما اینکه گفتید مقدار margin-bottom را تغیر می دهید ولی تغییری حاصل نمی شود ..!؟ این اتفاق بخاطر اشتباه شما در تنظیم نکردن واحد برای اعداد است والا حتماً حاشیه اعمال خواهد شد.
تو صفحه بندی با استفاده از کدوم روش بهتره؟
اینکه تگ رو تو قسمت head تعریف کنیم؟ (مثل مثال 3 ستونه) یا تو همون تگ ؟ مثل مثال اول
ممنون از سایت خیییییلی خوبتون :)
1- قرار دادن کدهای CSS در یک فایل خارجی و لینک کردن آن به صفحه HTML
2- قرار دادن کدهای CSS در قسمت head صفحه HTML
3- قرار دادن کدهای CSS داخل تگ با استفاده از ویژگی style
اگر می خواهید اصولی کار کنید، روش اول، بهترین انتخاب است، در این صورت خواهید توانست از کدهای CSS در تمام صفحات پروژه استفاده کنید.
1-وقتي ب div مورد نظر با css خصوصيت ميديم مثلا ارتفاع 10%....اين درصد بر چه اساسي حساب ميشه؟براساس كل صفحه؟كل ابعاد نمايشگري ك سايتو نشون ميده يا اندازه ي browser؟
2-اگه تو div اصلي صفحه ي div مجدد تعريف بشه و div داخلي نسبت ها رو با چي حساب ميكنه؟كل صفحه ؟
اين سوال رو از اون جهت پرسيدم چون وقتي صفحه رو از حالت fullscreen خارج ميكنم شكل سايتي ك ساختم عوض ميشه!بعضا اندازه ها متفاوت ميشه! ميخواستم راهنمايي كنيد..
3-اصولا اندازه دادن ب عناصر مختلف ب صورت درصد بهتره يا با اندازه ي مطلق؟مثلا cm! ك وقتي از ي نمايش گر ديگه با ابعاد متفاوت مشاهده ميشه زيباييش ب هم نريزه
1- ارتفاع div مورد نظر شما برابر خواهد شد با 10% ارتفاع والدش، حالا این والد می تواند یک عنصر دیگر باشد و یا تگ body
2- جواب سوال دوم در دل سوال اول قرار دارد. یعنی اگر اندازه ی div های داخلی را با % بیان کرده باشید، این محاسبه نسبت به اندازه div والد انجام خواهد شد. در ضمن اگر اندازه ها را با واحد % (درصد) بیان کنید، برای div ی که والدش عنصر body است، اندازه ی div نسبت به اندازه پنجره مرورگر محاسبه خواهد شد. یعنی هر زمان که اندازه پنجره مرورگر بنحوی (مثل fullscreen) تغییر کند، بلافاصله اندازه div مورد نظر ما نیز تغییر خواهد کرد.
3- بنظر من برای اینکه از حداکثر اندازه ی نمایش گر استفاده کنیم بهتر است که اندازه ها به واحد درصد (%) باشد.
اگر المان ما دو تا والد مثل bodyو head داشت آنوقت چه می شود؟؟؟؟؟؟!!!!!!!!!!!!
المان head که اندازه خاصی ندارد اصلاً
گیج شدم
راهنمایی کنید لطفاً
در مورد عنصر head، حق با شماست، اندازه خاصی ندارد.
موضوع خیلی ساده است، لطفاً توجه نمایید:
فرض کنید داخل body یک div داریم که خصوصیت width:90% برای آن تنظیم شده است، حالا با توجه به اینکه عرض div نسبت به والدش محاسبه می شود نهایتاً عرض div برابر با 90 درصد از عرض body خواهد بود.
چرا وقتی میخوام Style ایجاد کنیم برای footer باید از این خصوصیت استفاده کرد ! clear:both;
چرا نمیشه برای فوتر بر اساس width برای wrapper , عرض تعیین شه
مثلا:#footer{
width:500px;
height:25px;
}
توضیح بیشتر میدید
ممنون
دلیل استفاده از خصوصیت clear در footer: اگر به کدهای HTML قبل از footer دقت کرده باشید دوتا Div داریم که برای هر دوی آنها خصوصیت float با مقدار left تنظیم شده است. این یعنی اینکه فوتر ما باید div قبلیش را احاطه کند، با استفاده از خصوصیت clear این موضوع اتفاق نمی افتد. البته چون div اصلی با 500 پیکسل تنظیم شده و دو div قبلی footer این فضا را کامل می پوشانند، footer خواه ناخواه بعد از دو div بالای خودش قرار می گیرد اما در نظر بگیرد یک اشتباه کوچک در سایز بندی بکنیم اون موقع همه چیز بهم می ریزه، برای اطمینان از اینکه footer صددرصد در زیر قرار می گیرید در اینجا بهتر است که خصوصیت clear را برای آن تنظیم کنیم.
در ضمن div یک عنصر block است و تمام طول یک سطر را اشغال می کند و چون footer باید تمام سطر را اشغال کند نیازی به تنظیم width وجود ندارد.
میشه بگید خروجی html کدومه میخوام برای 1 شنبه ارائه بدم
داخله این جدولی که با div قالب بندی شده اگر بخوایم گزینه های menu و html و غیره رو به صورت لینک در بیاریم که وقتی روش کلیک میشه محتوای هر کدوم داخله اون قسمتی که نوشته شده Content goes here نمایش داده بشه به چه صورت باید کد رو بنویسم ؟
مجددا بسیار ممنون بابت سایت پر محتواتون .
شما عبارت cascade menu in html and css رو در گوگل سرچ کنید. برای شما نمونه سمپل از منوها رو میاره که هم کاربردی و هم زیبا هستند.
منوهای ابشاری منظور شماست.