![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Quot-bot-left](https://2img.net/h/www.traidnt.net/vb/AGT04/misc/quotes/quot-bot-left.gif)
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Quot-bot-right](https://2img.net/h/www.traidnt.net/vb/AGT04/misc/quotes/quot-bot-right.gif)
لاحظ الdiv تكون تحت الوسم وليس بجانبة كما في الوسوم الاخرى .. هذة للحدود والخلفية للمتغير d
هكذا - يصبح الكود جاهز حق الاطار .. العملية سهلة ولاتحتاج لحجهد كبير
- الحين سنقوم بعمل اختبار للأطار لنعرف ان التطاير للفورم هوم والنافبار وغيرها بانة داخل حدود الستايل
- ملاحظة في الجزء الاول للكود اي في التصاريف لانكتب الأ المتغير d1 فقط كما في الكود السابق
- الطريقة نقوم بكتابة
sampl11111111111 هذا الكود البسيط الى بالون الاحمر اكتب اي شيء وليكن عينة samplll وتتم الكتابة بين وسم الحدود والخلفية بالشكل التالي :
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس PQU34556](https://2img.net/h/upload.traidnt.net/upfiles/PQU34556.gif)
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس YTx34819](https://2img.net/h/upload.traidnt.net/upfiles/YTx34819.gif)
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Sqd34843](https://2img.net/h/upload.traidnt.net/upfiles/sqd34843.gif)
لاحظ الان نتيجة الكود وكيف هو خارج حدود الأطار
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Dgx34964](https://2img.net/h/upload.traidnt.net/upfiles/dgx34964.gif)
كيف نقوم بمعالجة الأمر ... سهل جدا بسيطة نروح للمتغير d1 الى هو كود التصاريف للحدود والخلفية الكود1 d
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس IvG34873](https://2img.net/h/upload.traidnt.net/upfiles/IvG34873.gif)
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس XOu34928](https://2img.net/h/upload.traidnt.net/upfiles/xOu34928.gif)
الحين نروح الى المعاينة ونشوف
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Rhv35210](https://2img.net/h/upload.traidnt.net/upfiles/rhv35210.gif)
للمعلومة .. فقط ..
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس RE235273](https://2img.net/h/upload.traidnt.net/upfiles/RE235273.gif)
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس 6Zz35308](https://2img.net/h/upload.traidnt.net/upfiles/6Zz35308.gif)
الأن نعمل جديد للبرنامج ونروح الموقع او المنتدى ونجيب " قالب النافبار " navbar
من الستايل الى سويناه .. ونحطة في البرنامج ومن البرنامج نروح الى design ونظلل الكود كما في المثال لكي عرف التطاير للقالب .
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس D6R35337](https://2img.net/h/upload.traidnt.net/upfiles/D6R35337.gif)
الحين بعد تظليل الكود وهو في design نرجع الى code
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس WU835483](https://2img.net/h/upload.traidnt.net/upfiles/wU835483.gif)
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Sn235534](https://2img.net/h/upload.traidnt.net/upfiles/Sn235534.gif)
لاحظت المثال السابق ان الكود حق النافبار هذا سنقوم بقصة وادراجة داخل كلاسات كود الأطار الي عملناه سابقا
- بعد قص كود النافبار نقوم بأدراجة داخل
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس NFh35767](https://2img.net/h/upload.traidnt.net/upfiles/nFh35767.gif)
ثم نقوم بنسخ كود الاطار مع النافبار ولكن فقط من بداية الكلاسات body الى اخر body
يعني لنوضح بصورة اكثر
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس RFx35927](https://2img.net/h/upload.traidnt.net/upfiles/rFx35927.gif)
ونقوم بارجاعة الى كود النافبار
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس HpK36136](https://2img.net/h/upload.traidnt.net/upfiles/HpK36136.gif)
الأن انتهينا من قالب النافبار
نروح نضيفة في المنتدى
+
ننسخ كود التصاريف css
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس K1236309](https://2img.net/h/upload.traidnt.net/upfiles/k1236309.gif)
ونهايتة هنا
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Amv36344](https://2img.net/h/upload.traidnt.net/upfiles/amv36344.gif)
في تصاريف الستايل css ..
- الأن نعمل معاينة للمنتدى بعد اضافة كود التصاريف وتطاير النافبار والنتيجة....
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس 3Bn36407](https://2img.net/h/upload.traidnt.net/upfiles/3Bn36407.gif)
نقوم بتعديل لون الخلفية كما اخترتها في الكود + تصفير خواص اس سي سي الاضافية
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس EPq36472](https://2img.net/h/upload.traidnt.net/upfiles/EPq36472.gif)
والحين باقي الحدود للاطار لكي يكون متناسق مع النافبار
وكما قلت هذة الاضافة اختيارية وليست اجبارية
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس 7Q936552](https://2img.net/h/upload.traidnt.net/upfiles/7Q936552.gif)
الحين نروح نعاين المنتدى ونشوف وش سار بالنافبار
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Kkn36619](https://2img.net/h/upload.traidnt.net/upfiles/kkn36619.gif)
100% هذا هو الاطار وتطاير النافبار
وكذالك الحال مع بقية القوالب
لناخذ صورة مع الهيدر
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس 3fJ36709](https://2img.net/h/upload.traidnt.net/upfiles/3fJ36709.gif)
ممتاز الى الأن
بى الحين الفروم هوم ...وباقي القوالب الاخرى
نروح نحصل القالب حق الفورم هوم من المنتدى
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس AXK36777](https://2img.net/h/upload.traidnt.net/upfiles/aXK36777.gif)
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس K4X36823](https://2img.net/h/upload.traidnt.net/upfiles/k4X36823.gif)
كيف نعرف التطاير في الفروم هوم
نضع اشاره الماوس بين الرقمين 6 هناا 5
ونضغط على الزر الي فوق كما في الصورة
سيقوم البرنامج بتظليل الكود
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Pil36853](https://2img.net/h/upload.traidnt.net/upfiles/Pil36853.gif)
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Sab36947](https://2img.net/h/upload.traidnt.net/upfiles/sab36947.gif)
نقص كود الفورم هو المشار الية في المثال التالي ونضعة في كلاسات الاطار
ثم نعيدة الى كود الفورم هوم مرة اخرى والحين الاحصائيات نفس السلافة
نضغط عى الصورة لمعرفة تطاير الاحصائيات
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس 1Dk37057](https://2img.net/h/upload.traidnt.net/upfiles/1Dk37057.gif)
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس BGE37110](https://2img.net/h/upload.traidnt.net/upfiles/bGE37110.gif)
وهذ البداية والنهاية لة
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس IPi37154](https://2img.net/h/upload.traidnt.net/upfiles/IPi37154.gif)
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس R3h37182](https://2img.net/h/upload.traidnt.net/upfiles/r3h37182.gif)
نضعه في كلاسات كود الاطار ثم نعيدة الى مكانة في كود قالب الاحصائيات في الفروم هوم
وثم بعد ذالك نضعة في المنتدى بعد التطاير ...
والنتيجة ....
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس S6437278](https://2img.net/h/upload.traidnt.net/upfiles/s6437278.gif)
وايضا الاحصائيات
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Ajb37335](https://2img.net/h/upload.traidnt.net/upfiles/ajb37335.gif)
- الى الأن ممتاز جدا فري نايس
الحين نقوم بأدراج 4 مجلدات للاستايل بعد التعديل عليها بالون المناسب للستايل
وهي كالمثال التالي : قمت بتلوين الصور بما يناسب الستايل
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس SLT37427](https://2img.net/h/upload.traidnt.net/upfiles/sLT37427.gif)
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Y1c37699](https://2img.net/h/upload.traidnt.net/upfiles/y1c37699.gif)
نروح الى css الرئيسية للستايل ونغير مسار بعض الصور الى اسم الستايل
بدل كلمة images نضع اسم الستايل
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Ols37482](https://2img.net/h/upload.traidnt.net/upfiles/ols37482.gif)
وباقي الاكواد ايضا نقوم بتغييرها وهي تقريبا 4 .
ايضا نتوجهه الى
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Owx37603](https://2img.net/h/upload.traidnt.net/upfiles/owx37603.gif)
ونقوم بتغيير بعض الاسماء الى اسم الستايل كما في المثال التالي
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس VV337652](https://2img.net/h/upload.traidnt.net/upfiles/VV337652.gif)
----------- والنتيجة للاستايل --------
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس NDX37743](https://2img.net/h/upload.traidnt.net/upfiles/NDX37743.gif)
---------------- بقي الخطوط المتوافقة ---------------
من
سنقوم بتغيير الخطوط لتتوافق مع التصفحات .
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Quot-top-left](https://2img.net/h/www.traidnt.net/vb/AGT04/misc/quotes/quot-top-left.gif)
اقتباس
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Quot-top-right](https://2img.net/h/www.traidnt.net/vb/AGT04/misc/quotes/quot-top-right.gif)
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Quot-top-right-10](https://2img.net/h/www.traidnt.net/vb/AGT04/misc/quotes/quot-top-right-10.gif)
من : خلفية المنتدى/Body
اقتباس
شكل الخط :
حجم الخط : 10pt
نوع الخط : tahoma, arial, helvetica,verdana
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Empty](https://2img.net/i/empty.gif)
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس MbB32427](https://2img.net/h/upload.traidnt.net/upfiles/MbB32427.gif)
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Rk833612](https://2img.net/h/upload.traidnt.net/upfiles/Rk833612.gif)
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Ks833663](https://2img.net/h/upload.traidnt.net/upfiles/Ks833663.gif)
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس 1x433816](https://2img.net/h/upload.traidnt.net/upfiles/1x433816.gif)
![[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Bmt34240](https://2img.net/h/upload.traidnt.net/upfiles/bmt34240.gif)