ساخت Panel : ایجاد margin (حاشیه) به اندازه 16px در بالا و پایین و همچنین padding (حاشیه) به اندازه 16px در سمت چپ و راست عناصر صفحه HTML ، با کلاس w3-panel ، در W3.CSS
هنگامی که ما وب سایتی را طراحی می کنیم، نیاز داریم که فاصله محتوای موجود در عناصر مختلف صفحات HTML وب سایت، یکسان باشد. علاوه بر این، حتما باید یک مقدار فاصله از بالا و پایین و همچنین از سمت چپ و راست صفحه وجود داشته باشد، در غیر این صورت، وب سایت ساختار مناسبی نخواهد داشت و از زیبایی آن کم می شود. بنابراین باید یک یا چند کلاس (Class) داشته باشیم که اگر عناصر مورد نظرمان از صفحه HTML را در آن کلاس ها (Class) قرار دهیم، یک سری فاصله های استاندارد را برای محتوای درون عنصرها به وجود بیاورند.
دو کلاس w3-panel و w3-container از چارچوب W3.CSS ، می توانند برای این منظور به کار روند که ما در این کلید آموزشی، کلاس w3-panel را شرح می دهیم و توضیحات در مورد کلاس w3-container را نیز می توانید در آموزش شماره 26162 بخوانید.
دو کلاس w3-panel و w3-container ، هر دو برای ایجاد padding (حاشیه) به اندازه 16px در سمت چپ و راست عناصر صفحه HTML به کار می روند، اما کلاس w3-panel علاوه بر این مورد، دارای اثر ایجاد margin (حاشیه) به اندازه 16px در بالا و پایین عنصر نیز خواهد بود.
دو ویژگی margin و padding از CSS ، هر دو برای ایجاد حاشیه (فضای خالی) در اطراف عنصر به کار می روند، اما تفاوتشان در این است که فضای خالی به وجود آمده توسط padding ، جزء محدوده عنصر است، اما فضای خالی ایجاد شده توسط margin ، جزء محدوده عنصر نیست.
این تفاوت زمانی آشکار می شود که یک رنگ پس زمینه برای عنصر مشخص کنیم، در این حالت، اگر از padding استفاده شده باشد، چون فضای خالی جزء عنصر است، رنگ پس زمینه آن نیز تغییر می کند، اما اگر از margin استفاده شده باشد، رنگ پس زمینه آن تغییر نمی کند.
کلاس w3-panel برای ایجاد margin (حاشیه) به اندازه 16px در بالا و پایین و همچنین padding (حاشیه) به اندازه 16px در سمت چپ و راست عناصر صفحه HTML ، به کار می رود.
به عنوان مثال، برای تگ div می توانیم کد زیر را بنویسیم :
xxxxxxxxxx<div class="w3-panel"> <p>kelidestan.com</p></div>با توجه به مناسب بودن مثال های وب سایت w3schools.com ، مثال های این آموزش را بر اساس آنها خواهیم نوشت.
به مثال زیر توجه کنید :
با این مثال، قصد داریم که تفاوت بین دو کلاس w3-panel و w3-container را نمایش بدهیم (در واقع تفاوت در ایجاد margin در بالا و پایین عنصر).
بخش مهم کدها :
xxxxxxxxxx<div class="w3-container"> <h2>Displaying Panels</h2> <p>Panels are the same as containers except for an added top and bottom margin.</p> <div class="w3-panel w3-red"> <p>I am a panel.</p> </div> <div class="w3-panel w3-green"> <p>I am a panel.</p> </div> <div class="w3-container w3-red"> <p>I am a container.</p> </div> <div class="w3-container w3-green"> <p>I am a container.</p> </div></div>کلاس w3-red ، رنگ پس زمینه عنصر را به رنگ قرمز و همچنین کلاس w3-green ، رنگ پس زمینه عنصر را به رنگ سبز تغییر می دهد.
کد کامل صفحه HTML :
xxxxxxxxxx<html> <head> <link rel="stylesheet" href="w3.css"> </head> <body> <div class="w3-container"> <h2>Displaying Panels</h2> <p>Panels are the same as containers except for an added top and bottom margin.</p> <div class="w3-panel w3-red"> <p>I am a panel.</p> </div> <div class="w3-panel w3-green"> <p>I am a panel.</p> </div> <div class="w3-container w3-red"> <p>I am a container.</p> </div> <div class="w3-container w3-green"> <p>I am a container.</p> </div> </div> </body></html>نتیجه :
مشاهده می کنید که کلاس w3-panel ، باعث ایجاد margin در بالا و پایین عنصر می شود، اما کلاس w3-container ، این اثر را ندارد.
ساخت یادداشت (Note)، با استفاده از کلاس w3-panel در W3.CSS :
کلاس w3-panel در W3.CSS ، می تواند برای ساخت یادداشت (Note) به کار رود. تنها کافی است که برای عنصر دارای محتوای مربوط به یادداشت (Note) (یا عناصر سطح بالاتر)، کلاس w3-panel را ذکر کنیم. همچنین معمولا یک کلاس مربوط به یک رنگ انتخابی نیز برای آن عنصر تعیین می شود تا رنگ پس زمینه عنصر مشخص شود.
به عنوان مثال :
xxxxxxxxxx<div class="w3-panel w3-pale-yellow"> <p> kelidestan.com </p></div>بخش مهم کدها :
xxxxxxxxxx<div class="w3-container"> <h2>Panels for Notes</h2> <p>The w3-panel class can be used to display notes:</p> <div class="w3-panel w3-pale-yellow"> <p>kelidestan.com - This is a paragraph. This is a paragraph.</p> </div></div>کلاس w3-pale-yellow ، تعیین می کند که رنگ پس زمینه عنصر برابر رنگ pale-yellow باشد.
کد کامل صفحه HTML :
xxxxxxxxxx<html> <head> <link rel="stylesheet" href="w3.css"> </head> <body> <div class="w3-container"> <h2>Panels for Notes</h2> <p>The w3-panel class can be used to display notes:</p> <div class="w3-panel w3-pale-yellow"> <p>kelidestan.com - This is a paragraph. This is a paragraph.</p> </div> </div> </body></html>نتیجه :
ساخت نقل قول (Quote)، با استفاده از کلاس w3-panel در W3.CSS :
کلاس w3-panel می تواند برای ساخت نقل قول (Quote) به کار رود. البته ما باید فونت و اندازه فونت و رنگ پس زمینه و سایر موارد مورد نظرمان برای نقل قول (Quote) را نیز بر اساس کلاس های موجود در W3.CSS تعیین کنیم.
به عنوان مثال :
xxxxxxxxxx<div class="w3-panel w3-leftbar w3-pale-blue w3-xxlarge w3-serif"> <p> <i> kelidestan.com </i> </p></div>بخش مهم کدها :
xxxxxxxxxx<div class="w3-container"> <h2>Panels for Quotes</h2> <p>The w3-panel class can be used to display quotes.</p> <div class="w3-panel w3-leftbar w3-pale-blue w3-xxlarge w3-serif"> <p><i>"Make it as simple as possible, but not simpler."</i></p> </div></div>کد کامل صفحه HTML :
xxxxxxxxxx<html> <head> <link rel="stylesheet" href="w3.css"> </head> <body> <div class="w3-container"> <h2>Panels for Quotes</h2> <p>The w3-panel class can be used to display quotes.</p> <div class="w3-panel w3-leftbar w3-pale-blue w3-xxlarge w3-serif"> <p><i>"Make it as simple as possible, but not simpler."</i></p> </div> </div> </body></html>نتیجه :
ساخت هشدار (Alert)، با استفاده از کلاس w3-panel در W3.CSS :
برای ساخت هشدار (Alert)، با استفاده از کلاس w3-panel ، تنها کافی است که رنگ پس زمینه عنصر را برابر رنگ قرمز تعیین کنیم.
به عنوان مثال :
xxxxxxxxxx<div class="w3-panel w3-red"> <h3>Danger!</h3> <p>Red often indicates a dangerous or negative situation.</p></div>بخش مهم کدها :
xxxxxxxxxx<div class="w3-container"> <h2>Panels for Alerts</h2> <p>The w3-panel class can be used to display alerts:</p> <div class="w3-panel w3-red"> <h3>Danger!</h3> <p>Red often indicates a dangerous or negative situation.</p> </div></div>کلاس w3-red ، رنگ پس زمینه عنصر را به رنگ قرمز (red) تغییر می دهد.
کد کامل صفحه HTML :
xxxxxxxxxx<html> <head> <link rel="stylesheet" href="w3.css"> </head> <body> <div class="w3-container"> <h2>Panels for Alerts</h2> <p>The w3-panel class can be used to display alerts:</p> <div class="w3-panel w3-red"> <h3>Danger!</h3> <p>Red often indicates a dangerous or negative situation.</p> </div> </div> </body></html>نتیجه :
ساخت کارت (Card)، با استفاده از کلاس w3-panel و کلاس های مربوط به ساخت کارت (Card)، در W3.CSS :
در چارچوب، W3.CSS ، کلاس هایی (Class) برای ساخت کارت (Card) به کار می روند، مثل کلاس w3-card-4 (در نام این کلاس ها، کلمه card وجود دارد). حال برای ایجاد فاصله مناسب برای محتوای قرار گرفته در آنها، می توانیم کلاس w3-panel را برای آنها ذکر نماییم.
به عنوان مثال :
xxxxxxxxxx<div class="w3-panel w3-purple w3-card-4"> <p>kelidestan.com</p></div>بخش مهم کدها :
xxxxxxxxxx<div class="w3-container"> <h2>Panels as Cards</h2> <p>The w3-panel class can be used to display cards:</p> <div class="w3-panel w3-purple w3-card-4"> <p>kelidestan.com - This is a paragraph. This is a paragraph.</p> </div></div>کلاس w3-purple ، رنگ پس زمینه عنصر را به رنگ بنفش (purple) تغییر می دهد.
کد کامل صفحه HTML :
xxxxxxxxxx<html> <head> <link rel="stylesheet" href="w3.css"> </head> <body> <div class="w3-container"> <h2>Panels as Cards</h2> <p>The w3-panel class can be used to display cards:</p> <div class="w3-panel w3-purple w3-card-4"> <p>kelidestan.com - This is a paragraph. This is a paragraph.</p> </div> </div> </body></html>نتیجه :
ایجاد گوشه گرد شده (Rounded) برای یک Panel :
برای ایجاد گوشه گرد شده (Rounded) برای یک Panel ، می توانیم یکی از کلاس های مربوط به ایجاد گوشه گرد شده (Rounded) را برای آن ذکر کنیم، مثل کلاس w3-round-xlarge (در نام این کلاس ها، کلمه round نوشته می شود).
به عنوان مثال :
xxxxxxxxxx<div class="w3-panel w3-brown w3-round-xlarge"> <p>kelidestan.com</p></div>بخش مهم کدها :
xxxxxxxxxx<div class="w3-container"> <h2>Rounded Panels</h2> <div class="w3-panel w3-brown w3-round-xlarge"> <p>kelidestan.com - This is a paragraph. This is a paragraph.</p> </div></div>کلاس w3-brown ، رنگ پس زمینه عنصر را به رنگ قهوه ای (brown) تغییر می دهد.
کد کامل صفحه HTML :
xxxxxxxxxx<html> <head> <link rel="stylesheet" href="w3.css"> </head> <body> <div class="w3-container"> <h2>Rounded Panels</h2> <div class="w3-panel w3-brown w3-round-xlarge"> <p>kelidestan.com - This is a paragraph. This is a paragraph.</p> </div> </div> </body></html>نتیجه :
پنهان کردن یک Panel :
برای ایجاد قابلیت پنهان شدن Panel ها، می توانیم یک دکمه با علامت x برای آنها ایجاد کنیم (البته با استفاده از تگ span) و تعیین کنیم که با کلیک بر روی آن، یک سری کد javascript اجرا شوند که Panel را پنهان کنند.
برای درک این موضوع، به مثال زیر توجه کنید :
بخش مهم کدها :
xxxxxxxxxx<div class="w3-panel w3-green w3-display-container"> <span onclick="this.parentElement.style.display='none'" class="w3-button w3-green w3-large w3-display-topright">x</span> <p>Click on the X to close this panel.</p> <p>Click on the X to close this panel.</p></div>بر اساس کد بالا، چنانچه بر روی عنصر span کلیک شود، کد javascript زیر اجرا خواهد شد (بر اساس مشخصه onclick برای تگ span) :
xxxxxxxxxxthis.parentElement.style.display='none'اجرای کد javascript بالا، باعث پنهان شدن Panel می شود.
کد کامل صفحه HTML :
xxxxxxxxxx<html> <head> <link rel="stylesheet" href="w3.css"> </head> <body> <div class="w3-panel w3-green w3-display-container"> <span onclick="this.parentElement.style.display='none'" class="w3-button w3-green w3-large w3-display-topright">x</span> <p>Click on the X to close this panel.</p> <p>Click on the X to close this panel.</p> </div> </body></html>نتیجه :
نمایش (باز کردن) یک Panel :
ما می توانیم تعیین کنیم که یک Panel ابتدا به صورت پنهان شده باشد و پس از کلیک کردن کاربر بر روی یک دکمه (دکمه ساخته شده با تگ button)، آن Panel نمایش داده شود و کاربر بتواند آن را ببینید.
برای درک این موضوع، به مثال زیر توجه کنید :
بخش مهم کدها :
xxxxxxxxxx<button class="w3-button w3-indigo" onclick="document.getElementById('id01').style.display='block'">Show Panel</button><div id="id01" class="w3-panel w3-teal w3-display-container" style="display:none"> <span onclick="this.parentElement.style.display='none'" class="w3-button w3-teal w3-display-topright">x</span> <p>Click on the X to close this panel.</p> <p>Click on the X to close this panel.</p></div>در کد بالا دقت کنید که برای عنصر، یک id تعیین کرده ایم که نقش مهمی در شناسایی عنصر و نمایش دادن آن دارد.
کد javascript مربوط به نمایش Panel ، به صورت زیر می باشد (اجرای آن بر اساس مشخصه onclick برای تگ button می باشد) :
xxxxxxxxxxdocument.getElementById('id01').style.display='block'که باعث می شود عنصر بر اساس id آن، شناسایی شده و از حالت پنهان در بیاید و به کاربر نمایش داده شود.
پنهان بودن اولیه عنصر بر اساس کد زیر تعیین شده است :
xxxxxxxxxxstyle="display:none"کد کامل صفحه HTML :
xxxxxxxxxx<html> <head> <link rel="stylesheet" href="w3.css"> </head> <body> <button class="w3-button w3-indigo" onclick="document.getElementById('id01').style.display='block'">Show Panel</button> <div id="id01" class="w3-panel w3-teal w3-display-container" style="display:none"> <span onclick="this.parentElement.style.display='none'" class="w3-button w3-teal w3-display-topright">x</span> <p>Click on the X to close this panel.</p> <p>Click on the X to close this panel.</p> </div> </body></html>نتیجه :
- فهرست مباحث
- 1 معرفی چارچوب W3.CSS برای ساخت یک وب سایت واکنش گرا (Responsive) و طراحی گرافیکی آن، تنها با یک فایل CSS
- 2 افزودن چارچوب W3.CSS به صفحات وب سایت
- 3 شیوه نامگذاری کلاس ها (Class)، در چارچوب W3.CSS
- 4 رنگ ها (Color)، در W3.CSS
- 5 ساخت Container : ایجاد padding (حاشیه) به اندازه 16px در سمت چپ و راست عناصر صفحه HTML ، با کلاس w3-container ، در W3.CSS
- 6 ساخت Panel : ایجاد margin (حاشیه) به اندازه 16px در بالا و پایین و همچنین padding (حاشیه) به اندازه 16px در سمت چپ و راست عناصر صفحه HTML ، با کلاس w3-panel ، در W3.CSS
- 7 ساخت کارت (card) : ایجاد حاشیه سایه دار (bordered shadow) به دور عنصر، با کلاس های w3-card و w3-card-2 و w3-card-4 ، در W3.CSS
- 8 تعیین اندازه فونت ها (Font)، در W3.CSS
-
نکته : این فهرست مباحث، صرفا منتخبی از کلیدهای آموزشی این موضوع است (که خواندن متوالی آنها توصیه می شود) و برای دیدن کلیدهای آموزشی بیشتر از این موضوع، می توانید بر روی دسته بندی های ستون سمت راست کلیک نمایید.
