الماوردي نت
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

الماوردي نت


 
الرئيسيةأحدث الصورالتسجيلدخول

 

 [درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس

اذهب الى الأسفل 
كاتب الموضوعرسالة
Manager
مؤسس الموقع
مؤسس الموقع
Manager


. : بيانات اصافية
ذكر
المشاركات : 285
نقاط : 634
التقييم : 0
الانتساب : 14/01/2011

فيس بوك
 :

[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Empty
مُساهمةموضوع: [درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس   [درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Emptyالخميس مارس 03, 2011 12:50 pm

بسم الله الرحمن الرحيم

دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس5]<

يوجد كتاب بالمرفقات لمن لاتظهر عندة الصور

- انصح الجميع بالعودة الى الدروس السابقة , لكي يستوعب الجزء الثالث بكل دقة .


درسنا اليوم هو تكملة للستايل وتطاير الأطار ..مع بعض التعديلات الأخرى ان شاء الله


الحين قم بفتح برنامج Microsoft Expression Web 2 او الدريم ويفر


-- ونتوجهه الى code سنجد كود جاهز في البرنامج
ريد الزيادة علية ونكتب هذا الوسم لاحظ الصور


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس MbB32427



طبعا كتبنا بين الوسم yousefthawabh
والوسم هذا الوسم
ولاحظ ان البرنامج يساعدنا بشكل تلقائي في كتابة الكلمات ,
نكمل كتابة الكود .


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Rk833612



ثم نختار text/css


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Ks833663


ونختمها بالقوس او الاشارة التالية



الحين الكود اصبح جاهز في البرنامج


قلنا سلفا ان الكود في البرنامج مقسم الى قسمين [ الاول للاكواد ويوضع
لاحقا في التصاريف css [ والجزء الثاني للاكلاسات ] ويكتب داخل الجسم body


لاحظ اين سنكتب كود التصاريف .


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس 1x433816



الحين نقوم بكتابة الاكواد [1] حق الكلاسات اولا [2] حق التصاريف css


واتمنى مراجعة الجزء الاول لان شرح الخطوات الاولى فيه


- احنا عندنا في مجلد الستايل 6 سته صور للأطار --- وفي هذا الجزء اعطينا المتغيرات التالية


المتغير a يعني الصور 1-2-3 الصور الثلاث العلوية للاطار
المتغير b يعني الصور 1-2-3 الصور الثلاث السفلية للاطار
المتغير d وهو حدود + خلفية الاطار


لاحظ الكود جاهز بعد كتابة الأكواد كاملة المثال التالي ..


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Bmt34240


- ألحين اكيد فهمت الكود كامل ... لاني شرحت الكود في الجزء الاول


الوسم في الكلاسات الى هو


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Quot-top-leftاقتباس[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Quot-top-right[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Quot-top-right-10 [درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Quot-bot-left[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Quot-bot-right


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Quot-top-leftاقتباس[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Quot-top-right[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Quot-top-right-10















[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Quot-bot-left[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Quot-bot-right


لاحظ الdiv تكون تحت الوسم وليس بجانبة كما في الوسوم الاخرى .. هذة للحدود والخلفية للمتغير d



هكذا - يصبح الكود جاهز حق الاطار .. العملية سهلة ولاتحتاج لحجهد كبير


- الحين سنقوم بعمل اختبار للأطار لنعرف ان التطاير للفورم هوم والنافبار وغيرها بانة داخل حدود الستايل


- ملاحظة في الجزء الاول للكود اي في التصاريف لانكتب الأ المتغير d1 فقط كما في الكود السابق


- الطريقة نقوم بكتابة sampl11111111111

هذا الكود البسيط الى بالون الاحمر اكتب اي شيء وليكن عينة samplll وتتم الكتابة بين وسم الحدود والخلفية بالشكل التالي :


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس PQU34556


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس YTx34819



[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Sqd34843


لاحظ الان نتيجة الكود وكيف هو خارج حدود الأطار


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Dgx34964



كيف نقوم بمعالجة الأمر ... سهل جدا بسيطة نروح للمتغير d1 الى هو كود التصاريف للحدود والخلفية الكود1 d





[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس IvG34873


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس XOu34928




الحين نروح الى المعاينة ونشوف


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Rhv35210



للمعلومة .. فقط ..
[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس RE235273


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس 6Zz35308



الأن نعمل جديد للبرنامج ونروح الموقع او المنتدى ونجيب " قالب النافبار " navbar
من الستايل الى سويناه .. ونحطة في البرنامج ومن البرنامج نروح الى design ونظلل الكود كما في المثال لكي عرف التطاير للقالب .


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس D6R35337


الحين بعد تظليل الكود وهو في design نرجع الى code


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس WU835483


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Sn235534


لاحظت المثال السابق ان الكود حق النافبار هذا سنقوم بقصة وادراجة داخل كلاسات كود الأطار الي عملناه سابقا


- بعد قص كود النافبار نقوم بأدراجة داخل
[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس NFh35767


ثم نقوم بنسخ كود الاطار مع النافبار ولكن فقط من بداية الكلاسات body الى اخر body
يعني لنوضح بصورة اكثر
[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس RFx35927


ونقوم بارجاعة الى كود النافبار
[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس HpK36136


الأن انتهينا من قالب النافبار
نروح نضيفة في المنتدى
+
ننسخ كود التصاريف css


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس K1236309


ونهايتة هنا
[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Amv36344


في تصاريف الستايل css ..




- الأن نعمل معاينة للمنتدى بعد اضافة كود التصاريف وتطاير النافبار والنتيجة....


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس 3Bn36407



نقوم بتعديل لون الخلفية كما اخترتها في الكود + تصفير خواص اس سي سي الاضافية


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس EPq36472



والحين باقي الحدود للاطار لكي يكون متناسق مع النافبار
وكما قلت هذة الاضافة اختيارية وليست اجبارية


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس 7Q936552



الحين نروح نعاين المنتدى ونشوف وش سار بالنافبار



[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Kkn36619



100% هذا هو الاطار وتطاير النافبار


وكذالك الحال مع بقية القوالب


لناخذ صورة مع الهيدر
[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس 3fJ36709


ممتاز الى الأن


بى الحين الفروم هوم ...وباقي القوالب الاخرى


نروح نحصل القالب حق الفورم هوم من المنتدى
[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس AXK36777



[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس K4X36823


كيف نعرف التطاير في الفروم هوم
نضع اشاره الماوس بين الرقمين 6 هناا 5
ونضغط على الزر الي فوق كما في الصورة
سيقوم البرنامج بتظليل الكود



[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Pil36853


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Sab36947



نقص كود الفورم هو المشار الية في المثال التالي ونضعة في كلاسات الاطار
ثم نعيدة الى كود الفورم هوم مرة اخرى والحين الاحصائيات نفس السلافة


نضغط عى الصورة لمعرفة تطاير الاحصائيات


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس 1Dk37057


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس BGE37110



وهذ البداية والنهاية لة


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس IPi37154


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس R3h37182



نضعه في كلاسات كود الاطار ثم نعيدة الى مكانة في كود قالب الاحصائيات في الفروم هوم


وثم بعد ذالك نضعة في المنتدى بعد التطاير ...



والنتيجة ....


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس S6437278





وايضا الاحصائيات


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Ajb37335


- الى الأن ممتاز جدا فري نايس
الحين نقوم بأدراج 4 مجلدات للاستايل بعد التعديل عليها بالون المناسب للستايل


وهي كالمثال التالي : قمت بتلوين الصور بما يناسب الستايل


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس SLT37427



[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Y1c37699


نروح الى css الرئيسية للستايل ونغير مسار بعض الصور الى اسم الستايل
بدل كلمة images نضع اسم الستايل



[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Ols37482


وباقي الاكواد ايضا نقوم بتغييرها وهي تقريبا 4 .


ايضا نتوجهه الى
[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Owx37603


ونقوم بتغيير بعض الاسماء الى اسم الستايل كما في المثال التالي


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس VV337652





----------- والنتيجة للاستايل --------



[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس NDX37743




---------------- بقي الخطوط المتوافقة ---------------


من


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Y1c37699



سنقوم بتغيير الخطوط لتتوافق مع التصفحات .



[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Quot-top-leftاقتباس[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Quot-top-right[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Quot-top-right-10من : خلفية المنتدى/Body [درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Quot-bot-left[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Quot-bot-right


[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Quot-top-leftاقتباس[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Quot-top-right[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس Quot-top-right-10



شكل الخط :


حجم الخط : 10pt
نوع الخط : tahoma, arial, helvetica,verdana
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://mawardi.forum.st
 
[درس] دورة تصميم ستايل بتقنية css الحديثة [ لعام 2011 ] درس تمهيدي للدورة [الدرس الخامس
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
الماوردي نت :: سلة المهملات :: دروس التصميم-
انتقل الى: