دروة برمجة المواقع لغة css

[azizsoft]

http://img835.imageshack.us/img835/6807/21948207.png


وبعــــــــــــــــــــــ ــــــــــد

الاخوة مشرفي وأعضاء منتدى طريق الاحتراف

أهلا وسهلا ومرحبا بكم وأسعد الله أوقاتكم بطاعته ومحبته .



دورة تعلم CSS

http://icons.iconarchive.com/icons/graphics-vibe/developer/256/css-icon.png



بعد ان تعلمنا لغة HTML ، لابد ان نتعلم CSS حتى نستطيع ان نوظف ما تعلمناه فى لغة HTML ليظهر فى صورة موقع على الويب
تعتبر CSS هى المسئولة عن الشكل الذى سوف يظهر للهيكل الذى تم بناءه بواسطة HTML ، لا تقلق فـ CSS ممتعة جدا وسوف
تحبها كثيرا ، لا تنسى ان اهم شىء فى HTML و CSS هو التطبيق والتعديل على الملفات ورؤية النتائج ، فالتعلم من خلال التجربة والخطأ هو افضل وسائل التعلم .


[1] مقدمة وبعض الاساسيات عن CSS

سنتعرف فى هذا الفيديو على الاتى

ما هى CSS ؟ وكيف تكتب ؟ وكيف تضاف الى ملف HTML ؟
المحددات Selectors ، والخصائص Properties ، و القيم Values .

http://www.youtube.com/watch?v=eL9vJ4M92MI


[2] التحكم بشكل النصوص Texts .

سنتكلم فى هذا الفيديو عن التحكم باشكال النص من خلال css من حيث نوع الخط وحجمه وشكله وخصائص اخرى .

http://www.youtube.com/watch?v=XHbG83BuDh4


[3] التحكم بالحشو والهوامش ، والحدود .


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

الحشو Padding
الهوامش Margins
الحدود Border


http://www.youtube.com/watch?v=uGRXum_srQU


صور للتوضيح

كيف تكتب css ؟


http://www.trickat.com/wp-content/uploads/2011/08/css1.gif


ما الفرق بين border و margin و padding ؟


http://www.trickat.com/wp-content/uploads/2011/08/box2.gif


[4] متفرقات فىCSS

سنتكلم فى هذا الفيديو عن اشياء متنوعة فى تقنية CSS

Class & Id
المجموعات و التداخل .

http://www.youtube.com/watch?v=O6yLCnkri0s


[5] الكلاسات الكاذبة ، وبعض الاختصارات .

سوف نتكلم فى هذا الفيديو عن الاتى

الكلاسات الكاذبة Pseudo classes .
بعض الاختصارات Shorthand Properties


http://www.youtube.com/watch?v=CWxxX2WqYc0


[6] التحكم بالخلفيات والقوائم من خلال CSS .

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

الخلفيات Backgrounds .
القوائم Lists .


http://www.youtube.com/watch?v=0MB57JcxK_Q


[7] خاصية Display والتحكم بالجداول من خلال CSS

http://www.youtube.com/watch?v=uagiTx1TtGs


[8]خاصيتى Float و Position

الجزء الاول – شرح خاصية Float.


http://www.youtube.com/watch?v=8IE2qqoypck


الجزء الثانى – شرح خاصية Position.


http://www.youtube.com/watch?v=IVNsQMQ6ZqY


[9] العناصرالزائفة Pseudo Elements و توضيح لـ outline


http://www.youtube.com/watch?v=Ia0RTTq28ME


أخيرا سنتكم عن تطبيق لما تم دراسته من اساسيات فى لغة HTMl وتقنية CSS ، فكل ما تم دراسته لا يعنى شىء
ان لم يتم تطبيقه واخراجه فى شكل موقع ، لهذا سنحاول فى هذا اليوم تصميم موقع بسيط جدا مكون من هيدر وفوتر وقائمة
جانبية ومحتوى ، هذا يعتبر الدرس الاخير فى دورة تعلم CSS .


[10] شرح انشاء قائمة رأسية وقائمة أفقية .

http://www.youtube.com/watch?v=gRZ3hcaM6bw


[11] شرح انشاء موقع بسيط يحتوى على قائمة يمنى .


الجزء الاول

http://www.youtube.com/watch?v=4oW3PQOzKXM


الجزء الثانى

http://www.youtube.com/watch?v=IaQW3ZAaKmk

نموذج مخطط للموقع

http://www.trickat.com/wp-content/uploads/2011/08/site.gif


[12] شرح انشاء موقع يحتوى على قائمة يمنى و يسرى و خلفية .


http://www.youtube.com/watch?v=cz105wfqBks




:abc_087:فهرس الدورة كاملة (http://www.abc4web.net/vb/showthread.php?p=217265#post217265) :abc_088:



أتمنى لكم الفائدة من هاته الدورة الرائعة


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


http://img138.imageshack.us/img138/8206/rabhi.gif

[abohmam]

جزاك الله خيرا اخانا عزيز على هذه الدورة الرائعة

ماشاء الله دورة مفيدة أخرى تنضم الى الأرشيف الرائع لشروحات الأخوة

بارك الله في جهودك الطيبة والشكر أيضا للشارح جزاه الله خيرا

[أبو يوسف]

أجزل الشكر لك اخانا الفاضل عزيز سوفت على هذا الجهد المشكور

.

[أبو فارس]

بارك الله فيكم :abc_152: وأكثر من امثالكم

[المصمم]

شـكــ وبارك الله فيك ـــرا لك أخ عزيز سوفت

لك مني أجمل تحية .

[أبو صخر]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .