< درس > : تكويد التصميم بـcss والتعديل عليه

السلام عليكم ورحمة الله وبركاته

أعتذر منكم أخواني .. هذا الدرس راح يكـون بالصور وذلك لأستطيع شرح الأكواد خطوة خطوة

~[.................................................. .........................................]~

الرجاء منـكم مراجعة الدرس الأول من الدورة من الرابط :
[درس ] [الدرس الأول]: تصميم الهيدر + تقطيعه - :: TRAIDNT FORUM ::




~[.................................................. .........................................]~

في هذا الدرس راح نتعلم كيف نقوم بـ تكويد التصميم بـ css

أولا شـاهد مجلد الصور [انا صممت هيدر فقط] لأننا نصمم قالب وليس استايل منتدى


والآن نقوم بـ فتح برنامج الفرونت بيج .. أو أي محرر html آخر

~[.................................................. .........................................]~

ثم إنتقل إلى [تعليمات برمجية]


وبعدها شاهد معاي الصورة وشوف الأكواد الي كتبتها :


أكتب أسفل

رمز Code:

مباشرةً :
رمز Code:




وأكتب أسفل

رمز Code:

مباشرة:

.h1{ background-image:url(images/images_02.gif); background-repeat:repeat-x;height:153px; } .h2{ background-image:url(images/images_01.gif); background-repeat:no-repeat;height:153px; width:24px; float:left; } .h3{ background-image:url(images/images_03.gif); background-repeat:no-repeat;height:153px; width:280px; float:right; }
كود:


يعني هذا الكود.. التمدد للهيدر .. شوف معاي صورة التمدد من الصور :


والكود هذا
كود:


يعني الصورة اليسرى للهيدر.. شوف الصورة اليسرى :


وهذا الكود:
كود:


يعني الكود هذا .. الصورة اليمنى الي كتبنا فيها اسم الموقع


~[.................................................. .........................................]~

والحين شرح لهذا الكود :
كود:
رمز Code:
.h1{ background-image:url(images/images_02.gif); background-repeat:repeat-x;height:153px; } .h2{ background-image:url(images/images_01.gif); background-repeat:no-repeat;height:153px; width:24px; float:left; } .h3{ background-image:url(images/images_03.gif); background-repeat:no-repeat;height:153px; width:280px; float:right; }
في هذا الكود :
كود:
. رمز Code:
h1{ background-image:url(images/images_02.gif); background-repeat:repeat-x;height:153px;


background-image:url(images/images_02.gif);
الي محدد بالأحمر هـو مسار صورة التمدد الي شفناها فوق

background-repeat:repeat-x;height:153px;
الي محدد بالأحمر مقصود بـه ارتفاع صورة التمدد.
شوف معاي عشان تعرف ارتفاع التمدد:


والكود هذا:
كود:
. رمز Code:
h2{ background-image:url(images/images_01.gif); background-repeat:no-repeat;height:153px; width:24px; float:left
;
الي هو مقصود به بالصورة اليسرى
background-image:url(images/images_01.gif);
مثل ماقلنا .. مسار الصورة

background-repeat:no-repeat;height:153px;
وهنا أيضاً ارتفاع الصورة اليسرى

width:24px;
float:left;
في الكود الأول مقصود به عـرض الصورة
والكود الثاني حطيتنا left يعني يسار .. والصورة هذي راح توضع في اليسار


والكود هنا مثل الي فوق بالضبط ..
كود:
. رمز Code:
h3{ background-image:url(images/images_03.gif); background-repeat:no-repeat;height:153px; width:280px; float:right;
float:right; هنا وضعنا يمين .. والصورة الي مكتوب فيها اسم المنتدى راح تظهر باليمين

~[.................................................. .........................................]~

والحين خلصنا من كتابة الكود . وهذا هو الكود الكامل :
رمز Code:
صفحة جديدة1 .h1{ background-image:url(images/images_02.gif); background-repeat:repeat-x;height:153px; } .h2{ background-image:url(images/images_01.gif); background-repeat:no-repeat;height:153px; width:24px; float:left; } .h3{ background-image:url(images/images_03.gif); background-repeat:no-repeat;height:153px; width:280px; float:right; }



وهذا مثال بعد كتابة الكود :


~[.................................................. .........................................]~

وخلصنا من الدرس الثاني .. نلقاكم في الدرس الثالث بإذن الله تعالى


مصدر الدرس
http://www.ibtkart.net/vb/t327.html