][الدرس الثاني][توزيع التأطير css][

بسم الله الرحمن الرحيم
نرجع للدروس
مع انكو حسستو اني منعش استاذ
بس نكمل
ده محتوى
صممو اخوي
memooz
ربنا يوفقو

هنقطعو في الشكل
ده 3 قطع هيدر
3 اعمدة
3 فوتر

This image has been resized. Click this bar to view the full image. The original image is sized 648x347.

ناتج التقطيع 9 ملفات

ندخل في الجزء الصعب من الموضوع
طريقة كتابة الاكواد
ننزل تحت سطر title
و نكتب

كود PHP:




<<style type=text/css








نعمل زي الدرس الاول
نقسم الكود جزئين
الجزء الاول لاكواد الهيدر
الجزء الثاني
للكلاسات


معظم عملنا الان على الجزء الاول
نكتب كود الجزء الاول
زي ما عملنا الهيدر و لكن في اختلاف
اول جزء التمدد
.
كود PHP:




f_h1{
background-image:url(image/zero-css_02.gif) ;
height:84 ;
background-repeat: repeat-x;
}








طبعا بتعدد الطول
repeat-x اعتقد واضح و مش عايز شرح
كود الالصورة الاولى
.
كود PHP:




f_h2{
background-image:url(image/zero-css_01.gif) ;
height:84 ;
width:181 ;
background-repeat: no-repeat;
float: left;








هذه الصورة على الشمال
no repeat= لا تكرار
الطول و العرض واضح جدا
و اخيرا الجزء الاخير نفس الكود
ولكن مكان float

كود PHP:




margin :0px auto;








كود الهيدر النهائي

لا تكثر الى الكلاسات الان سنضعها بعد الجزء السفلى
سنضع الان الأعمدة:
هنا الجزء الجديد سنشرحه بالكامل

كود PHP:




.f_g1{
background-image:url('image/zero-css_05.gif') ;
height:100% ;
}








كود الخلفية او الصورة في الوسط
و hight:100% اي الطول بالكامل
الجزء الثاني:

كود PHP:




.f_g2{
background-image:url('image/zero-css_04.gif') repeat-y left ;
height:100% ;
}








كل الكود واضح
بس الجديد هنا

كود PHP:




repeat-y left








بمعنى كرر الطول بحجم المحتوى
و left اي العمود على اليسار
و نفس الشي للعمود على اليمين
لكن نستبدل
left
ب
right
و
لكي لا يظهر الكلام على الخلفية
نضع الكود التاالي:

كود PHP:




padding-left:50;
padding-right:50;








بمعنى ان يبدأ من النقطة 50 من اليمين
حتى النقطة 50 من اليسار
ستتوضح الامور مع التطبيق
الناتج النهائي:


و اخيرا لكود الجزء السفلي:
كود PHP:




background-image:url(image/zero-css_08.gif) ;
height:108 ;
width:80 ;
background-repeat: repeat-x;
}
.f_f2{
background-image:url(image/zero-css_07.gif) ;
height:108 ;
width:181 ;
background-repeat: no-repeat;
float: left;
}
.f_f3{
background-image:url(image/zero-css_09.gif) ;
height:108 ;
width:79 ;
background-repeat: no-repeat;
float: right;
}








لا اعتقد ان في شيء مش واضح
كلو عملنا من قبل

و الأن لنضيف الكلاسات
اولا الجزء العلوى:
كود PHP:




<div class="f_h1">
<div class="f_h2"></div>
<div class="f_h3"></div>
</div>








و الأعمدة:

كود PHP:




<div class="f_g1">
<div class="f_g2">
<div class="f_g3">

اكواد التأطير هنا
</div>
</div>
</div>








و اخيرا الجزء السفلي:

كود PHP:




<div class="f_f1">
<div class="f_f2"></div>
<div class="f_f3"></div>
</div>








الناتج:

بس برضو معلش نسيت احط صيغ الصور
اللي هيا
gif
انتهينا من الشرح حتى الأن
و حطيت حقوق الزيرو علشان
محدش يقولي حط الحقوق
الاكواد ممكن تتكرر كثير
و لكن الشرح انا عامله كلو
و الحمدلله

اي استفسار انا موجود
بالتوفيق