شرح فحص عناصر منتداك لجهاز الكمبيوتر وللأجهزة الذكية

اذهب الى الأسفل

ãÚáæãÉ شرح فحص عناصر منتداك لجهاز الكمبيوتر وللأجهزة الذكية

مُساهمة من طرف YasirAyad في الثلاثاء 26 مايو 2015 - 12:02


شرح فحص عناصر منتداك لجهاز الكمبيوتر وللأجهزة الذكية

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


في هذه الشرح البسيط اقدم للأعضاء الجدد وللمبتدأين كيفيه فحص عناصر المنتدى
FF0000 - شرح فحص عناصر منتداك لجهاز الكمبيوتر وللأجهزة الذكية Chrome_logo_2x

الفائده من فحص العنصر ؟



لفحص العنصر فوائد كثيره وعديده تساعد مدير الموقع في تفحص منتداه وتعديله من خلال المتصفح مثلا تريد التعديل على احد ازرار منتداك او تغير خلفيه المنتدى او اضافه تأثيرات بأضافه CSS الى فحص العنصر لتطبق على المنتدى أعتمد شخصيا على هذه الامر في تضبيط خصائص واضافات من خلال العناصر الاضافيه مثلا عندي كود HTML قمت بأضافته من خلال لوحه الادارة ولاكن عندي تأثيرات css انا مش هعرف كيف هتكون حلوه ولا لا وممكن تروح يمين وممكن شمال يعني بمكان غير مناسب فلما اضيف كود html وروح للمنتدى اعاين على الزر اضغط عليه كلك يمين ثم اضيف تأثيراتي وبعدها اقوم بتحديد له الابعاد واخليه في موقع الي انا عاوزه ده وبعد ما اكمل تعديلاتي اقوم بنسخ اكواد css التي عدلت وعملت عليها وثم اضعها في لوحة الاداره في حقل css ده شي مبسط ومثال بسيط لقدره فحص العنصر وما عملها 

كيف اقوم بتشغيلها على منتداي ؟



بأختصار ان الخاصية فحص العنصر في متصفح جوجل كروم ضروي تثبيت المتصفح لأستخدامها من خلال لتحميل المتصفح اضغط هنا خطوات لتشغيل الخاصية 
1- نقوم بتحديد العنصر الذي نريد التعديل عليه في المنتدى ؟
FF0000 - شرح فحص عناصر منتداك لجهاز الكمبيوتر وللأجهزة الذكية 2015-069

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

FF0000 - شرح فحص عناصر منتداك لجهاز الكمبيوتر وللأجهزة الذكية 2015-070

حتى الان ماذا تعلمنا ؟ 

1- نحدد العنصر المراد تعديله
2- ظهر لنا كود CSS وكود تومبلايته او html الخاص به ..

3-في هذه الخطوه سنعلم كيف نقوم بتعديل اللون او أضافه كود css    

- كيف نقوم بأضافه تأثيرات كيف نقوم بعمل حقل فارغ جديد لنضيف تأثيراتنا الخاصه ؟
FF0000 - شرح فحص عناصر منتداك لجهاز الكمبيوتر وللأجهزة الذكية 2015-071

كما تلاحظون قمنا بالضغط على الفراغ تحت شوي فقام بأظهار حقل جديد او سطر جديد اخر لنضيف تأثيراتنا والتي هي بتقنيه CSS 

سوف اقوم الان بأضافه كود تيكست شادو والي هو ضلال على النص .
هذه هو الكود الخاص بالتأثير وهو للمثال فقط يعني تقدر تضيفو اي تأثير اخر 
text-shadow: 2px 2px 8px #FF0000;

FF0000 - شرح فحص عناصر منتداك لجهاز الكمبيوتر وللأجهزة الذكية 2015-072


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

استطيع تغير اللون الضل كما تلاحظون
FF0000 - شرح فحص عناصر منتداك لجهاز الكمبيوتر وللأجهزة الذكية 2015-073


الان كيف نقوم بحفظ تغيراتنا لاننا لو عملنا تحديث للصفحه راح يختفي كل التعديلات التي قمنا بها لهذه يجب علينا ان نقوم بنسخ اكواد التي عدلنا عليها 
FF0000 - شرح فحص عناصر منتداك لجهاز الكمبيوتر وللأجهزة الذكية 2015-074


كما تلاحظون تم تحديدها من خلال الماوس من الاسفل الى الأعلى لا تنسى ان تنسخه بأستخدام الماوس تحدد من الاسفل ثم الى الأعلى وبعدها اما تضغط على Ctrl+c او من خلال الماوس كلك يمين ثم نسخ 

وثم تذهب بعدها الى لوحه الادارة >> مظهر المنتدى >> اللوان >> صفحه CSS 

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

ملاحظه مهمه



لا تقومو بأضافه تأثيرات لا تتناسب مع متصفحات اخرى تأكد من ان التأثير الذي تريد أضافته يعمل على المتصفحات الاخرى ..
كما يمكنك تفصح التأثير من خلال اخذ اسم التأثير والذهاب الى مدرسه الاكواد وهي 
على الرابط الاتي : http://www.w3schools.com/
اما تستعمل البحث وتضع اسم التأثير لتعلم ان كان يعمل هذه التأثير على المتصفحات الاخرىاو تضهب الى الاقسام في الاعلى تختار اكواد CSS وتبحث على تأثيرات اخرى   Arrow

كما يمكنكم اضافه تأثيرات بمختلف الانواع من تكبير النص وضع اطار للنص وغيرها من الامور التي تناسبكم

هنا انتهى درسنا حول كيفيه فحص اي عنصر في منتداك وتعديله 
لأجهزه الكمبيوتر أنظمه وندوز   
تحياتي
new.moon


عدل سابقا من قبل النجم الذهبى في الإثنين 18 سبتمبر 2017 - 2:44 عدل 2 مرات (السبب : تنسيق الشرح)
YasirAyad
YasirAyad
 
 

ذكر
عدد المساهمات : 10114
معدل النشاط : 13483
السُمعة : 296

http://yasirayad.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

ãÚáæãÉ شرح فحص عناصر منتداك للأجهزة الذكية

مُساهمة من طرف YasirAyad في الخميس 28 مايو 2015 - 7:47


شرح فحص عناصر منتداك للأجهزة الذكية

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

سنتعلم كيف نفحص عناصر للنسخه الجوال





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

ثم نضغط في اي مكان متاح اي ليس على اعلانات او ما شابه نضغط كلك يمين ثم نضغط على فحص العنصر كما في الصورة
FF0000 - شرح فحص عناصر منتداك لجهاز الكمبيوتر وللأجهزة الذكية 2015-077



ثم ستظهر لنا قائمه فحص العنصر ونتجه الى رسم الحوال كما موضح في الصوره لتظهر لنا عناصر نسخه الجوال 
FF0000 - شرح فحص عناصر منتداك لجهاز الكمبيوتر وللأجهزة الذكية 2015-078

بعد الضغط على رسم الجوال ستظهر لنا كما في الصورة التاليه وموضح عليها بعض الخصائص 
FF0000 - شرح فحص عناصر منتداك لجهاز الكمبيوتر وللأجهزة الذكية 2015-079


ملاحظه مهمه تابعو كما في الصورة 
FF0000 - شرح فحص عناصر منتداك لجهاز الكمبيوتر وللأجهزة الذكية 2015-080

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


FF0000 - شرح فحص عناصر منتداك لجهاز الكمبيوتر وللأجهزة الذكية 2015-081


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

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

مع التحية
NEW.MOON


عدل سابقا من قبل Mohamed Nsr في الأربعاء 29 يوليو 2015 - 5:34 عدل 2 مرات (السبب : تنسيق الشرح)
YasirAyad
YasirAyad
 
 

ذكر
عدد المساهمات : 10114
معدل النشاط : 13483
السُمعة : 296

http://yasirayad.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة


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