خدمات آنلاین حشر و نشر
قرارگاه
خدمات
آموزشگاه
فروشگاه کتاب
اسفند
آموزش طراحی سایت با HTML و CSS: بخش دوم
برای اینکه بتوانیم از انجام کارهای تکراری و در نتیجه اتلاف وقت در کدنویسی جلوگیری کنیم، می توانیم از قالب های آماده استفاده کنیم. بعضی سایت ها نظیر html5boilerplate این قالب ها را ارائه می دهند. همچنین خودتان هم می توانید قالب های html و css مخصوص به خودتان را با توجه به نیازهایتان آماده کنید.
در اینجا ما دو پوشه به نام های Basic و Advanced را ایجاد کرده ایم.
- پوشه Advanced برای شروع ایجاد پروژه‌های ایجاد یک سایت کامل مناسب می‌باشد و شامل فایل‌های زیر می‌باشد:
- فایل extended.html
- فایل css-with-toc.css
- پوشه Basic برای تمرین و آموزش مناسب می باشد و شامل فایل های زیر می باشد:
- فایل basic.html
- فایل css-defult.css
در فایل css-with-toc.css دستورات مربوط به استایل دهی بخش مختلف قرار داده شده است. برای دسته بندی دستورات این فایل از کامنت های css استفاده شده است. همانطور که می دانید کامنت ها برای ارائه توضیح در مورد کدها استفاده می شود و قابلیت اجرا ندارد. در کدنویسی با زبان css برای شروع کامنت از کاراکترهای /* و برای اعلان پایان کامنت از کاراکترهای */ استفاده می شود.
کامنت های موجود در فایل css-with-toc.css به سه دسته تقسیم می شوند:
- کامنت اول فایل: این بخش شامل مواردی مثل معرفی سایت، نام طراح و … فهرست های بخش های مختلف فایل css می باشد. نمونه ای از این بخش را در زیر مشاهده می کنید.
/*This is comment
Style Sheet for [Website]
Create by [Author name]
[URL of author]
TOC
1.defaults
2.structure
3.links and navigation
4.fonts
5.images
Notes
*/
- کامنت اوّل هر بخش: این کامنت شروع و پایان هر یک از بخش ها را مشخص می کند. برای اینکه کدها راحتتر خوانده شود، ویژگی‌ها و مقادیر ، با دو Tab(فاصله) به داخل کشیده شده‌اند.
/*------1.Defaults------*/
*{
Margin: 0;
Padding: 0;
}
Body{
}
- از کامنت‌ها برای ایجاد زیر عنوان‌ها نیز می‌توان استفاده کرد که با یک Tab آن را کمی داخل برده‌ایم:
/*Float-clearing rules*/
.separotor{
Clear:both;
}