سبد (0)

تبلیغات

صفحه بندی در HTML

صفحه بندی در وب، برای اینکه سایت شما جذاب به نظر برسد، بسیار مهم است.

پس صفحه وبتان را با دقت طراحی نمایید.


مثال - خودتان امتحان کنید

Web page layout using <div> elements
نحوه صفحه بندی با استفاده از عناصر <div>.

Web page layout using <table> elements
نحوه صفحه بندی با استفاده از عناصر <table>.


 صفحه بندی وب سایت ها

Wiki

بیشتر وب سایت ها محتویات خود را در چندین ستون قرار می دهند (به فرمت مجله ها یا روزنامه ها)

با استفاده از عناصر <div> یا <table> می توان حالت چند ستونی را ایجاد نمود.

lamp

گرچه می توان به وسیله جداول HTML، صفحه بندی نمود اما باید دانست که جداول برای ارائه داده ها در قالب جدول هستند نه ابزاری برای صفحه بندی.


صفحه بندی با استفاده از عناصر <div>

Wiki

عنصر <div> یک عنصر block می باشد که برای گروه بندی عناصر HTML استفاده می شود.

توجه:  CSS برای چیدمان عناصر یا ایجاد پس زمینه یا نمای رنگی برای صفحات استفاده می شود.

در مثال زیر، از پنج عنصر div برای صفحه بندی استفاده شده است. همچنین از CSS برای تعیین مکان عناصر، ایجاد پس زمینه رنگی و مشخص کردن عرض و ارتفاع عناصر استفاده شده است:

مثال (صفحه بندی در HTML)

<!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>
خودتان امتحان کنید »

کد HTML بالا نتیجه زیر را ایجاد خواهد کرد:

Main Title of Web Page

Menu
HTML
CSS
JavaScript
Content goes here
Copyright © beyamooz.com

مثال - خودتان امتحان کنید

Web page layout using <div> elements with 3 columns
در این مثال، نحوه صفحه بندی سه ستونه نشان داده شده است.


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

Wiki

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

حالت چند ستونی به وسیله عناصر <div> یا <table> ایجاد می شود. CSS برای تعیین مکان عناصر یا ایجاد پس زمینه یا نمایی رنگی برای صفحات استفاده می شود.

lamp

استفاده از جداول برای حالت چند ستونی، کاربرد درستی از عنصر <table> نمی باشد. هدف از عنصر <table> نمایش داده ها در قالب جدول است.

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

مثال (صفحه بندی در HTML)

<!DOCTYPE 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

نکات مهم

Wiki

نکته: بزرگترین مزیت استفاده از CSS  این است که اگر کد CSS را در یک style sheet بیرونی قرار دهید سایت شما خیلی راحت تر حفظ می شود. شما می توانید صفحه بندی کل وب سایتتان را با ویرایش یک فایل تغییر دهید.

برای کسب اطلاعات بیشتر در مورد CSS به لینک روبرو مراجعه فرمایید: آموزش CSS-معرفی سی اس اس

نکته: به دلیل اینکه ایجاد صفحه بندی های پیشرفته زمان گیر است، گزینه سریعتر، استفاده از یک الگو(template) می باشد. با جستجو در گوگل می توانید وب سایت های رایگانی را که این الگو ها را ارائه می دهند بیابید. (می توانید از آنها استفاده کنید و آنها را سفارشی کنید.)


تگ های صفحه بندی  در HTML

تگ توضیح
<div>

تعریف یک ظرف برای دیگر عناصر (تگ div یک عنصر Block است)

<span>

تعریف یک ظرف برای دیگر عناصر (تگ span یک عنصر Inline است)

دیدگاه‌ها  

+2 # Guest 1396-04-28 13:20
سلام خسته نباشید
در مثال زیر، چرا اگه خصوصیت width رو برای wrapper تعریف نکنیم اگر چه برای footer کلیر تعریف کنیم ولی footer در جای خودش قرار نمیگیره ؟؟
http://beyamooz.com/try_it_yourself/tryit.php?filename=tryhtml_layout_divs_3columns
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
-1 # امیر پهلوان صادق 1396-04-31 08:42
سلام، در مثال بالا اگر خصوصیت width رو برای wrapper در نظر نگیریم، چون برای footer از خصوصیت clear با مقدار both استفاده شده است، اتفاقی که شما فرمودید نمی افتد ...! و Footer دقیقا سرجای خودش نمایش داده می شود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # ام ار 1396-02-20 14:05
با سلام خدمت شما... آموزش صفحه بندی در HTML عالی بود ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # ام ار 1396-01-17 14:54
سلام و خسته نباشی دارم خدمتون
می خواستم بیبینم استفاده از خصوصیت id در مثال اول، کاربرد خاصی دارد؟ اگر نباشد ایا اتفاق خاصی می افتد؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1396-01-21 16:23
سلام
بله حق با شماست. در واقع اگر ID هایی که برای عناصر در نظر گرفتیم را حذف کنید در خروجی تأثیری ایجاد نخواهد شد.
اما توجه داشته باشید که برای صفحه بندی در HTML به هیچ عنوان نباید بصورت درون تگی، استایل دهی کنیم. در اینجاست که اگر از روش فایل CSS خارجی استایل دهی را انجام دهیم، IDهایی که برای Divها تنظیم کرده ایم استفاده خواهد شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # mohammad reza75 1395-10-11 10:55
سلام و عرض خسته نباشید به مهندسین خوب سایت بیاموز من میخواستم کاربرد تگ float و clear رو در مثال اول بدونم با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # احسان عباسی 1395-10-11 12:41
سلام.
دستور float و دستور clear به CSS مربوط می شوند. به طور خلاصه می توان گفت که دستور float:left باعث میشه که عنصر مورد نظر به سمت چپ شناور بشه. و دستور clear:both هم باعث میشه که عنصر مورد نظر از دو طرف شناور نباشد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # saeed 1395-08-30 23:36
با سلام و خسته نباشید
هنگام صفحه بندی همه عناصر من در سمت راست یا سمت چپ قرار میگیرند چیکار کنم که این عناصر بیان وسط صفحه؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1395-09-04 08:24
سلام برای وسط قرار دادن عناصر می توانید از CSS استفاده کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # outlaw 1395-08-24 11:51
آموزش صفحه بندی در HTML عالی بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # مشایخ 1395-06-17 23:19
سلام
می خواستم بپرسم فرق id و class چیه؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1395-06-18 12:31
سلام
از هر دو برای دسترسی به عناصر در JavaScript و CSS و jQuery و ... استفاده می شود. اما زمانی که می خواهید ویژگی id را تنظیم کنید باید دقت کنید که در کل صفحه مقدار در نظر گرفته شده منحصر بفرد باشد. یعنی زمانی که می گوییم فلان عنصر با id مثلا test را می خواهیم باید فقط یک عنصر یافت شود. اما در مورد ویژگی class چنین محدودیتی وجود ندارد، یعنی در یک صفحه شما می توانید چندین عنصر را با یک class یکسان تنظیم کنید. و زمانی که می گویید عناصر با class مثلا test را بده، ممکن است بیش از 1 عنصر یافت شود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مشایخ 1395-06-18 20:38
ممنون از پاسخ جامع و کاملتون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # ابراهیم 1395-04-27 22:38
آموزش خوبی بود. دست شما درد نکنه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیرحسین احمدی 1395-04-27 18:00
سلام ممنون از سایت بی نظیرتون
میخواستم بگم من راجع به صفحه بندی سایت در چند سایت دیگه هم مطالب مطالعه کردم اما بعضیاشون نوشته بودن در اچ تی ام ال 5 تگ div برای صفحه بندی منسوخ شده، آیا درسته؟ متن دقیق هم این بوده:

در HTML 4.01 ، تگ اغلب برای مشخص کردن بخش های ناوبری مختلف در یک سند HTML (مانند header ، footer ، content area ، side bars ، و غیره) مورد استفاده می گرفت.

HTML 5 عناصر جدیدی را معرفی کرده که باید به جای عنصر استفاده شوند. نمونه هایی از این عناصر جدید شامل < article>، ، و و … هستند .


ممنون میشم پاسخ بدید :)
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
-1 # امیر پهلوان صادق 1396-02-20 14:48
سلام
در HTML5 تگ های جدیدی مثل header و Footer و ... معرفی شده است که پیشنهاد می شود حتما بجای Div از تگهای مذکور برای صفحه بندی استفاده کنید.
برای اطلاعات بیشتر مطالب ارائه شده در منوی "بیاموز HTML5" را مطالعه فرمایید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # sami 1395-04-25 00:31
عالی بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # آرمان م 1395-02-04 18:18
با سلام و تشکر از مطالب خوب و مفید آموزشی
سوالم اینه که منظورتان از الگو(template) همان قالب سایت میباشد؟؟؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1395-02-04 20:19
سلام. در اینجا منظور از الگو، قالب سایت نیست، چون که قالب های سایت از زبان های php و css و html و جی کوئری استفاده می کنند، و شما هنوز در مراحل ابتدایی قرار دارید( یعنی اچ تی ام ال). منظور از الگو درواقع نمونه کدهای html است که برای شما قابل درک باشد.
بعنوان مثال سایت زیر یک نمونه است.
www.html5webtemplates.co.uk/templates.html
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # حسین 1394-12-05 12:34
با عرض سلام و خسته نباشید
ببخشید من id داخل div را متوجه نشدم و وقتی حذفشون کردم اتفاق خاصی نیوفتاد
میشه یکم توضیح بدین؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-12-12 14:44
با سلام و تشکر
id در یک واقع یک شناسه یکتا هست که به تگ خاصی میتونه اعمال بشه. در کل صفحه فقط مجاز به استفاده از یک id برای یک تگ خاص هستیم.
خود id به تنهایی کاری نمیکنه، ولی از اون در زبانهای CSS و javascript میشه برای اشاره به اون تگ موردنظر استفاده کرد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # ebrahim01j 1394-10-26 12:10
واقعا از خواندن آموزش بالا لذت بودم ، دست شما درد نکنه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-12-12 15:05
موفق باشید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # yaser 1394-09-16 20:33
سلام خسته نباشید
وظیفه این کدها ممنون میشم یه توضیحی بدید ؟
style="margin-bottom:0
footer
both;text-align:center;">
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-09-18 19:45
با سلام و تشکر.
کدها درست نیومده!

margin باعث ایجاد فاصله از بخش بیرونی المنت یا تگ موردنظر با سایر المان‌های خارجی میشه.
margin-bottom باعث ایجاد این فاصله فقط از سمت پایین میشه.

text-align ترازبندی متن رو تنظیم می‌کنه. عبارت center باعث ترازبندی از مرکز می‌شه.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # hamid fa 1394-09-17 01:30
با سلام خدمت شما دوست عزیز و گرامی یک این که کدهای شما از نظر نگارشی مشکل دارند
و دوم این که این کد های سی اس اس هستند که به صورت درون تگی در اچ تی ام ال تعریف شده اند.


موفق باشید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # ebrahim01j 1394-08-27 13:06
سلام ببخشین من با notepad++ کدها رو مینویسم ولی با فارسی مشکل داره میشه راهنمایی کنین که کدوم نرم افزار خوب هس
ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-08-27 21:09
سلام.
برای دریافت پاسخ خود لطفا به انجمن سایت بیاموز به آدرس http://beyamooz.com/forum/threads/35-%D9%85%D8%B9%D8%B1%D9%81%DB%8C-ide-%D8%A8%D8%B1%D8%A7%DB%8C-php?p=38 بروید.
پاسخ شما در این لینک داده شده است.

موفق باشید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # ebrahim01j 1394-08-26 21:47
سلام
چرا همیشه بالای صفحه و سمت چپ و راست یه حاشیه هست چطوری میشه اونو حذف کرد
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # مهرداد صلاحی 1394-08-26 22:38
با سلام.
برای رفع این مشکل کافیست در CSS برای تگ body خود مقادیر margin و padding‌ رو برابر صفر قرار بدید.
به این صورت:
body{margin:0;padding:0} /*comment
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # golnar 1394-08-08 12:15
سلام.
وقتی قراره استایل را تو یه فایل خارجی قرار بدیم منظورتون دقیقا کجاس؟و چطور باید انجامش داد؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-08-08 13:06
با سلام.
منظور این هست که کنار فایل html. یک فایل با پسوند css. ایجاد کرده و کدهای CSS‌ خودمون رو در فایل مذکور قرار می‌دیم. بعد از طریق تگ link فایل css رو به فایل html پیوست می‌کنیم.
فرض کنید ما یک پوشه به نام new داریم. در این پوشه دو فایل با نام index.html و main.css ایجاد می‌کنیم.

در فایل main.css کدهای css مثل کدهای زیر قرار می‌دهیم:
@charset "utf-8";
body {
margin:0px;
padding:0px;
font-family:tah oma !important;
font-size:12px !important;
background-colo r:#ddd !important;
}

div{
padding:10px;
margin:5px;
border:1px solid #ccc;
}

.Center{
text-align:center;
}


در فایل index.html کد زیر قرار می‌دهیم:
<!DOCTYPE html>
<html>
<head>
<title>Li nk CSS File</title& gt;
<meta charset="U TF-8">
<meta name="view port" content="w idth=device-wid th, initial-scale=1.0">
<link rel="style sheet" type="text /css" href="main .css" />
</head>
<body>
<div class="Cen ter">
<h1>Titr& lt;/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 نشان میدهد. در اینجا برای راحتی فهم هر دو فایل رو در یک پوشه قرار دادیم. اگر فایلها در جای مختلفی از هم باشن، در هنگام لینک کردن باید آدرس صحیح فایل رو بدید.

موفق باشید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # حسین 1394-03-05 18:26
سلام.خسته نباشین.سایتتون عالیه.ی سوال داشتم.یک سایت که الگو طراحی رایگان داشته باشه معرفی میکنین؟
سوال بعدیم اینه که فایده (wrapper)چیه اصلا؟ وکار margin:0 auto چیه؟درمورد این مسایل وکلمات جدیدهم توضیح بدین.مرسی
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # شهربانو دوستی 1394-05-31 10:37
سلام
ممنون از حسن نگاهتون.
wrapper یک نام است که برای یک شناسه تعریف شده است. این نام اجباری نیست و می توانید هر نام دیگری استفاده کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
-1 # shadi 1394-02-31 10:11
با سلام
در مثال اول اگر بخوهیم منو ها در سمت راست قرار گیرند و یا در کل صفحه راست چین باشد چه باید کرد؟
سوال دوم اینکه خاصیت clear چیست چه کاربردی دارد من درست نفهمیدم میشه بیشتر توضیح بدید.
سوال سوم برای ارسال تصویر آدرس کامل تصویر را از روی کامپیوتر وارد می کنم جواب نمی ده چرا کلیک راست properties بعد هم locationکپی پیست مگه همین نیست ولی جواب نمی ده چرا؟ فرمت تصویر چی باید باشه jpj؟؟؟ لطفا پاسخ دهید ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1394-02-31 11:18
به نقل از shadi:

در مثال اول اگر بخوهیم منو ها در سمت راست قرار گیرند و یا در کل صفحه راست چین باشد چه باید کرد؟

سلام، فقط کافی است، قسمت های قرمز رنگ را تغییر دهید:<!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>

به نقل از shadi:

سوال دوم اینکه خاصیت clear چیست چه کاربردی دارد من درست نفهمیدم میشه بیشتر توضیح بدید.

برای درک خصوصیت clear باید float را خوب فهمیده باشید.
همان طور که می دانید با استفاده از خصوصیت flaot می توانید، یک عنصر block که تمام طول یک سطر را اشغال می کند به سمت راست یا چپ شناور کنید، مثلاً عنصر div یک عنصر block است و خودخواهانه تمام طول سطر را به خودش اختصاص می دهد. با تنظیم float روی div از حالت block در می آید و اجازه می دهد تا عنصر بعدی اش در کنارش قرار بگیرد و این اتفاق تا جایی که خط مذکور جا داشته باشد برای عناصر بعدی خواهد افتاد.
حالا اگر نمی خواهید عنصر جاری در کنار عنصر float شده قرار بگیرد، فقط کافی است که خصوصیت clear را برای آن تنظیم کنید.
برای کسب اطلاعات بیشتر در مورد خصوصیت Clear به لینک زیر مراجعه فرمایید:
http://beyamooz.com/cssref/227-css-properties/851-clear
به نقل از shadi:

سوال سوم برای ارسال تصویر آدرس کامل تصویر را از روی کامپیوتر وارد می کنم جواب نمی ده چرا کلیک راست properties بعد هم locationکپی پیست مگه همین نیست ولی جواب نمی ده چرا؟ فرمت تصویر چی باید باشه jpj؟؟؟ لطفا پاسخ دهید ممنون

دقیقاً متوجه سوالتون نشدم ...! اما اگر می خواهید، عکسی را از روی کامپیوترتون روی وب در قسمت "دیدگاه های" سایت بیاموز قرار بدید، این راهش نیست ...! ابتدا باید عکستون را روی اینترنت قرار بدید و سپس آدرس اینترنتی آن را در قسمت دیدگاه ها استفاده کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # shadi 1394-02-31 13:57
سلام
از پاسخ سریع شما بسیار تشکر می کنم
توفیقات شما روز افزون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # Masoud 1393-11-20 18:23
سلام
من نمی تونم دستور div رو بفهممش یه جوری برام گنگ هستش اگه میشه کمک کنید تا درکش کنم ... مرسی
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # امیر پهلوان صادق 1393-11-21 08:39
سلام، اولاً نگید دستور div، بگید تگ یا عنصر div ...!
1- div یک عنصر block است یعنی تمام طول یک سطر را اشغام می کند و دیگر عناصر را کنار خودش تحمل نمی کنه، حتی اگر یک کاراکتر داخلش باشه، باز تمام طول سطر را اشغال می کنه ...
2- بیشتر بعنوان یک ظرف برای دیگر عناصر بکار می رود. بعنوان مثال یک فرم اطلاعاتی که شامل 5 فیلد است را در نظر بگیرید، اگر بخواهیم فضای پشت تمام فیلدها را "خاکستری" کنیم، راه حل چیست؟ خوب باید فیلدها را داخل div قرار بدیم و سپس پس زمینه div را "خاکستری" کنیم.
3- div مخفف division بمعنی "قسمت" است و همان طور که در مطلب بالا دیدید یکی از کاربردهای مهم div یعنی قسمت بندی صفحه، آموزش داده شده است.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # نیلوفر 1393-11-16 11:29
سلام خسته نباشید 2 تا سوال داشتم
1-در مثال اول که صفحه بندی با استفاده از div هست برای header از h1 استفاده شده و در h1 با style خصوصیت margin-bottom=0 شده وقتی عدده صفر را تغییر میدیم مثلا 1 میکنیم یک حاشیه پایین header ایجاد میشه ولی اگه عددو بیشتر کنیم حاشیه بزرگتر نمیشه در واقع حاشیه ایجاد شده ثابته چه 1 بدیم چه 8 چرا ؟
2-اگه خصوصیت margin-bottom اصن تعریف نکنیم اون حاشیه بازم ایجاد میشه چرا؟ یعنی browser خودش بعد از هر سطر یه فضای خالی میندازه ؟
ممنون .
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # امیر پهلوان صادق 1393-11-16 19:11
اکثر مرورگرها، برای نمایش تگ h1 مقادیر زیر را در نظر می گیرند:h1 {
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 را تغیر می دهید ولی تغییری حاصل نمی شود ..!؟ این اتفاق بخاطر اشتباه شما در تنظیم نکردن واحد برای اعداد است والا حتماً حاشیه اعمال خواهد شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # Marjan.n 1393-10-27 23:51
سلام
تو صفحه بندی با استفاده از کدوم روش بهتره؟
اینکه تگ رو تو قسمت head تعریف کنیم؟ (مثل مثال 3 ستونه) یا تو همون تگ ؟ مثل مثال اول
ممنون از سایت خیییییلی خوبتون :)
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # امیر پهلوان صادق 1393-10-28 08:15
سلام، همان طور که می دایند در CSS سه روش برای استایل دهی عناصر وجود دارد:
1- قرار دادن کدهای CSS در یک فایل خارجی و لینک کردن آن به صفحه HTML
2- قرار دادن کدهای CSS در قسمت head صفحه HTML
3- قرار دادن کدهای CSS داخل تگ با استفاده از ویژگی style
اگر می خواهید اصولی کار کنید، روش اول، بهترین انتخاب است، در این صورت خواهید توانست از کدهای CSS در تمام صفحات پروژه استفاده کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # mohsen moardi 1393-10-15 14:00
سلام...خسته نباشيد..من چنتا سوال دارم....
1-وقتي ب div مورد نظر با css خصوصيت ميديم مثلا ارتفاع 10%....اين درصد بر چه اساسي حساب ميشه؟براساس كل صفحه؟كل ابعاد نمايشگري ك سايتو نشون ميده يا اندازه ي browser؟
2-اگه تو div اصلي صفحه ي div مجدد تعريف بشه و div داخلي نسبت ها رو با چي حساب ميكنه؟كل صفحه ؟
اين سوال رو از اون جهت پرسيدم چون وقتي صفحه رو از حالت fullscreen خارج ميكنم شكل سايتي ك ساختم عوض ميشه!بعضا اندازه ها متفاوت ميشه! ميخواستم راهنمايي كنيد..
3-اصولا اندازه دادن ب عناصر مختلف ب صورت درصد بهتره يا با اندازه ي مطلق؟مثلا cm! ك وقتي از ي نمايش گر ديگه با ابعاد متفاوت مشاهده ميشه زيباييش ب هم نريزه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # امیر پهلوان صادق 1393-10-16 07:53
سلام، ممنون
1- ارتفاع div مورد نظر شما برابر خواهد شد با 10% ارتفاع والدش، حالا این والد می تواند یک عنصر دیگر باشد و یا تگ body
2- جواب سوال دوم در دل سوال اول قرار دارد. یعنی اگر اندازه ی div های داخلی را با % بیان کرده باشید، این محاسبه نسبت به اندازه div والد انجام خواهد شد. در ضمن اگر اندازه ها را با واحد % (درصد) بیان کنید، برای div ی که والدش عنصر body است، اندازه ی div نسبت به اندازه پنجره مرورگر محاسبه خواهد شد. یعنی هر زمان که اندازه پنجره مرورگر بنحوی (مثل fullscreen) تغییر کند، بلافاصله اندازه div مورد نظر ما نیز تغییر خواهد کرد.
3- بنظر من برای اینکه از حداکثر اندازه ی نمایش گر استفاده کنیم بهتر است که اندازه ها به واحد درصد (%) باشد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # امیرکیان 1393-11-09 16:28
10 % المان والدش یا 100 % المان والدش
اگر المان ما دو تا والد مثل bodyو head داشت آنوقت چه می شود؟؟؟؟؟؟!!!!!!!!!!!!
المان head که اندازه خاصی ندارد اصلاً
گیج شدم
راهنمایی کنید لطفاً
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1393-11-10 11:44
توجه کنید که یک عنصر فقط و فقط یک والد دارد ...! و نمی تواند دو والد داشته باشد.
در مورد عنصر head، حق با شماست، اندازه خاصی ندارد.
موضوع خیلی ساده است، لطفاً توجه نمایید:
فرض کنید داخل body یک div داریم که خصوصیت width:90% برای آن تنظیم شده است، حالا با توجه به اینکه عرض div نسبت به والدش محاسبه می شود نهایتاً عرض div برابر با 90 درصد از عرض body خواهد بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+8 # سارا 1393-09-17 14:35
سلام .من خیلی این سایت را واسه اموزش دوست داشتم چون خیلی کامل بود به چه سختی ای میخواستم بخونم ترجمش میکردم الان خیلی خوشحالم که این سایت ترجمه شد واقعا نیاز داشتم یک دنیا ممنونم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # Vahid 1393-08-12 08:23
سلام
چرا وقتی میخوام Style ایجاد کنیم برای footer باید از این خصوصیت استفاده کرد ! clear:both;
چرا نمیشه برای فوتر بر اساس width برای wrapper , عرض تعیین شه
مثلا:#footer{
width:500px;
height:25px;
}

توضیح بیشتر میدید
ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # امیر پهلوان صادق 1393-08-13 09:28
سلام
دلیل استفاده از خصوصیت clear در footer: اگر به کدهای HTML قبل از footer دقت کرده باشید دوتا Div داریم که برای هر دوی آنها خصوصیت float با مقدار left تنظیم شده است. این یعنی اینکه فوتر ما باید div قبلیش را احاطه کند، با استفاده از خصوصیت clear این موضوع اتفاق نمی افتد. البته چون div اصلی با 500 پیکسل تنظیم شده و دو div قبلی footer این فضا را کامل می پوشانند، footer خواه ناخواه بعد از دو div بالای خودش قرار می گیرد اما در نظر بگیرد یک اشتباه کوچک در سایز بندی بکنیم اون موقع همه چیز بهم می ریزه، برای اطمینان از اینکه footer صددرصد در زیر قرار می گیرید در اینجا بهتر است که خصوصیت clear را برای آن تنظیم کنیم.
در ضمن div یک عنصر block است و تمام طول یک سطر را اشغال می کند و چون footer باید تمام سطر را اشغال کند نیازی به تنظیم width وجود ندارد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
-1 # naznin 1394-09-18 15:47
باسلام
میشه بگید خروجی html کدومه میخوام برای 1 شنبه ارائه بدم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
-1 # Pouriya 1395-02-12 14:21
سلام . ممنون از سایته عالیتون . یک سوال داشتم .
داخله این جدولی که با div قالب بندی شده اگر بخوایم گزینه های menu و html و غیره رو به صورت لینک در بیاریم که وقتی روش کلیک میشه محتوای هر کدوم داخله اون قسمتی که نوشته شده Content goes here نمایش داده بشه به چه صورت باید کد رو بنویسم ؟
مجددا بسیار ممنون بابت سایت پر محتواتون .
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهرداد صلاحی 1395-02-13 12:32
با سلام و تشکر.
شما عبارت cascade menu in html and css رو در گوگل سرچ کنید. برای شما نمونه سمپل از منوها رو میاره که هم کاربردی و هم زیبا هستند.
منوهای ابشاری منظور شماست.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی HTML

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی