CSS و HTMLپروژه
با توجه به مطالب توضیح داده شده در بخش های پیشین به منظور درک بهتر مطالب در این بخش یک صفحه سایت ساده ایجاد می کنیم.
پروژه مدنظرمان یک صفحه ساده تقریبا شبیه به صفحه اصلی سایت یعنی https://meta-learning.ir است.
مراحل ساخت پروژه
- برای ساخت پروژه HTML ابتدا باید یک فایل HTML ایجاد کنیم، لازم به ذکر است که بهتر است فایل مربوط به صفحه اصلی را با نام index ذخیره کنید.
ابتدا یک فایل با محتوای زیر و با نام index.html ایجاد می کنیم:
<html>
<head>
<title>Project</title>
</head>
<body>
</body>
</html>
خروجی این فایل یک فایل html بدون محتوا و عنوان Project بر روی مرورگر است.
- اگر دقت کنید می بینید که صفحه موردنظرمان از سه بخش تشکیل شده است: هدر، بنده اصلی و فوتر
بنابراین ما نیز باید برای تقسیم صفحه به سه قسمت از سه <div> استفاده کنیم. بنابراین داریم:
<html> <head> <title>Project</title> </head> <body> <div>
</div> <div>
</div> <div>
</div> </body> </html>
- حالا که صفحه را به سه قسمت تقسیم کردیم می توانیم به طراحی قسمت ها به صورت جداگانه بپردازیم، برای طراحی ظاهری المان های html باید از css استفاده کنیم که تنظیمات css می توانند داخل تگ های html یا داخل یک فایل جداگانه با فرمت css و یا داخل تگ style و درون فایل html مورد استفاده قرار بگیرند.
هدر صفحه موردنظر ما تصویری با تم آبی است در این مرحله دو راه داریم یا از یک تصویر دلخواه برای پس زمینه هدر استفاده کنیم و یا رنگ پس زمینه را آبی تعیین کنیم.
در این مثال ما از رنگ پس زمینه سرمه ای برای div استفاده می کنیم اما اگر قصد استفاده از تصویر برای پس زمینه را دارید باید از دستور background-image: url(myimage.jpg) استفاده میکنیم.
در مثال پیش رو ما تنظیمات مربوط به div هدر را درون id به نام div1 و داخل تگ style فایل html تعریف کردیم. طبق تنظیمات آورده شده رنگ پس زمینه که با فرمت rgb تعیین شده آبی کاربنی خواهد بود، استفاده از display:block باعث می شود div از خصوصیات بلاک بهره ببرد مثلا هر محتوای جدیدی خارج از div مربوط به هدر زیر این div قرار خواهد گرفت.
استفاده از margin-left و margin-right با مقدار auto باعث می شود متناسب به اندازه صفحه (که در پلتفرم های مختلف می تواند متفاوت باشد.) اندازه حاشیه ها تنظیم شوند.
و درنهایت با استفاده از height ارتفاع مربوط به div را تعیین می کنیم اما با توجه به این که اندازه صفحات می تواند متفاوت باشد بهتر است از درصد بجای پیکسل استفاده شود زیرا درصد متناسب با اندازه صفحه ارتفاع را تعیین میکند اما پیکسل ثابت است و با تغییر اندازه صفحه ظاهر div دچار بهم ریختگی می شود.
<html> <head> <title>Project</title> <style> .div1{ background-color: rgb(0,0,125); display: block; margin-left: auto; margin-right: auto; height:100%; } </style> </head> <body> <div class=“div1”>
</div> <div>
</div> <div>
</div> </body> </html>