نحوه قالب بندی سایت :

به کمک دستور div در طراحی قالب، باکس ایجاد میکنیم و اجزای سایت را داخل این باکس ها load میکنیم

یک div باید width  و height و رنگ ( background ) داشته باشد.

میخواهیم عکس زیر را که در فتوشاپ ایجاد شده به کمک css و html به یک قالب سایت تبدیل کنیم :

برای دیدن عکس در اندازه اصلی روی آن کلیک کنید

homeword1

 

 

 

 

 

 

 

 

نکته : بهتر است ابتدا کد بخش html کامل نوشته شود سپس به هر بخش استایل خودش را بدهیم .

نکته : طبق عکس فوق به هریک از بخش های قالب فوق box گفته میشود  مثل باکس  logo یا panel1 و …

برای طراحی پروژه فوق نیاز به دانستن چند دستور مهم در css هست که به طور خلاصه توضیح میدم و بعد سراغ انجام پروژه میریم :

1-نحوه تعیین فاصله عمودی بین باکس ها :

در html از کد زیر به عنوان Enter استفاده میشود .

همانطوری که در  عکس فوق مشاهده میکنید بین دو باکس lastnews و modtread فاصله هست و در بخش html نیز ما کد زیر را بین دو کد فوق قرار دادیم

 

نکته : در طراحی قالب هیچ وقت از دستورات <br> و یا margin-top یا margin-bottom برای ایجاد فاصله بین باکس ها استفاده نکنید

چون در مرورگرهای مختلف درست نمایش نمیدهد و نیز بهم میریزد قالب را .

 2- دستور Margin , Padding  :

در کل 4 مدل margin و padding درایم : top – bottom – left – right

به فاصله بین دو box به اصطلاح margin گفته میشود مثلا در عکس فوق برا ایجاد فاصله بین باکس panel1 , panel2  از دستور زیر استفاده شده

 

برای اطلاعات بیشتر و دیدن مثالها به این لینک مراجعه کنید

————————–

و به فاصله محتوای درونی یک باکس با لبه داخلی آن padding گفته میشود

مثلا در عکس فوق به فاصله بین کلمه logo و لبه سمت چپ آن paddding-left  گفته میشود

 

 

برای اطلاعات بیشتر به این لینک مراجعه کنید .

3- دستور float  :

با استفاده از خاصیت float می توان موقعیت یک عنصر را به سمت چپ یا راست تنظیم کرد.

المان هایی که خاصیت float می گیرند، اندازه شان به اندازه محتوای داخلشون بستگی دارد و اگر محتوا کم باشد، المان مورد نظر کوچک میشه . به بعبارتی اگر خاصیت float بدهیم به تگ بلاک ، فضای خالی بعد آن تگ بلاک دیگر حفظ نمیشود

  • برای رفع این مشکل باید width رو به المانی که float دارد بدهید.

کد بخش HTML  :

 

 

کد بخش CSS :

 

کل پروژه فوق را نیز میتوانید از اینجا دانلود کنید

Like
1

دسته بندی‌ها: htm - CSS,آموزش

برچسب‌ها : <<>>

دیدگاه خود را بنوبسید