تلميحات تطوير الويب 9

تلميحات تطوير الويب ( 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 ) 9

تتكون تلميحات هذه التدوينة من :

21 / أعمل أزرار بصورة متغيره عند مرور الفأرة وعند الضغط على الزر بأبسط وأفضل طريقة

22 / استخدم Google Chatback لمحادثة زوارك والتواصل معهم

تابع التلميحات لمعرفة المزيد :

21 / أعمل أزرار بصورة متغيره عند مرور الفأرة وعند الضغط على الزر بأبسط وأفضل طريقة

راح تلاحظون في موقعي عند مرور الفأرة على الشعار يضيء الشعار ويظهر نص ( الرئيسية ) , تتميز هذه الطريقة التي سنعرضها لكم بسرعة عرض الصورة الأخرى التي تظهر عند مرور الفأرة لأن الصورة الأولى قبل مرور الفأره والصورة الثانيه بعد مرور الفأره عليها هي صورة واحده فقط يتم التحكم بها عن طريق background-position والدرس شبيه بأحد التلميحات السابقة اللي عرضناها بخصوص عرض عدة صور من صورة واحدة وبإستخدام background-position لكن يختلف هنا بإضافة الخاصية :hover لكي يتم تغيير موقع الخلفيه عند مرور الفأره عليها وكذالك إضافة :active لكي يتم تغيير موقع الخلفية عند الضغط عليها وهنا مثال :

الصورة التي صممناها ليتم إستخدامها في  الروابط كالقائمة الرئيسية في الأعلى أو في أي مكان

حيث أن الجزء الأول من الصورة سيكون قبل حدوث أي حدث ثم في الجزء الثاني من الصورة عند مرور الفأرة وفي الجزء الثالث عند الضغط على الرابط

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

 

لقراء خلاصات الـ RSS الأعزاء يرجى الدخول للموضوع للمشاهدة والتجربة من هنا

ستلاحظ تفاعل الأزرار مع الفأرة وهذه طريقة رائعة لتفاعل الزائر مع موقعك , الأن لنبدأ بالطريقة أولاً عند إضافة الأزرار

<div id="header_menus"><a>زر 1</a><a>زر 2</a><a>زر 3</a></div>

نضيف عليها الـ CSS اللازمة :

#header_menus a {
width:105px;
height:23px;
display:block;
background:url(http://www.althari.ws/wp-content/uploads/2009/01/button_submit.gif);
}

نحن أضفنا العرض والإرتفاع ولكي يمكننا تأثير ذالك في الرابط الذي يحمل الوسم a يجب أن نحول ظهوره إلى block لأنه بالظهور الإفتراضي هو مثل النص ومثل النص يعتبر ظهوره بالـ CSS باسم inline فيمكننا التبديل بين خصائص الوسوم حسب حاجتنا , ثم بعد تغيير ظهوره إلى block لكي يتم تأثير خاصية العرض والإرتفاع قمنا بإضافة الخلفيه عليها وبشكل طبيعي ستظهر الخلفية أول جزء حسب الطول والعرض الذي أضفناه لأول جزء

الأن نريد أن نضيف عند مرور الفأره يتم تغيير موقع الخلفيه إلى الجزء الثاني إلى الأسفل بالطريقة التالية :

#header_menus a:hover {
background:url(http://www.althari.ws/wp-content/uploads/2009/01/button_submit.gif)
0px -26px;
}

أضفنا الحدث :hover عند خاصية الزر a لكي نقوم بعمل الخاصيه عند حدوث الحدث المطلوب , وأضفنا صورة الخلفية من جديد ثم حركناها إلى الأسفل قليلاً فالرقم 0px يرمز إلى موقع الصوره من اليسار اما الرقم الثاني فهو موقع الصورة من الأعلى فلو مثلاً أضفنا 26px بدل سالب 26px سيتم إظهار الصورة التي بالجزء الأعلى وهي تمثل صورة الضغط على الحدث وهذا ما لا نريده ننتقل إلى صورة الضغط على الحدث وبكل سهوله

#header_menus a:active {
background:url(http://www.althari.ws/wp-content/uploads/2009/01/button_submit.gif)
0px -52px;
}

أضفنا خاصية جديده وأضفنا لها الحدث active ثم وضعنا الخلفيه وحركناها إلى الأسفل حسب ارتفاع الجزئين للصورتين الأوليتين لكي يظهر لنا الصوره الثالثه

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

وهناك ملاحظه مهمه في متصفح الفايرفوكس عند الضغط على رابط تظهر حدود منقطه عليه ليدلك انك ضغطت هنا وقد تشوه على الصوره التي ضغطت عليها لذالك يمكنك إزالتها بإستخدام الخاصية outline:none; كالتالي:

#header_menus a:active, #header_menus a:focus{
outline:none;
}

وكذالك يمكنك إزالة الحدود المنقطه إذا أردت من أي رابط في موقعك باستخدام هذه الخاصية.

أتمنى أن أكون قد وفقت في الشرح وأفدتكم ننتقل إلى التلميحة الأخرى.

 

22 / استخدم Google Chatback لمحادثة زوارك والتواصل معهم

قد تكون خدمه قديمه ولكنها مفيده وجميله والبعض لا يعرفها , يمكنك مشاهدة طريقة عمل المحادثة النصيه الخاصة بالتواصل مع زوار موقعك في موقعي الشخصي كالصورة التالية:

ولعمل ذالك بكل بساطة يمكنك الحصول على الكود من خلال الرابط التالي للـ Google Chat Back , وهذا طبعاً إذا كان لديك حساب في Google والتواصل مع الزوار يكون عن طريق GTalk او البريد GMail

تمنياتي لكم بكل التوفيق وإلى التلميحات الجاية إن شاء الله 🙂

  • يعطيك العافية أخوي عبدالملك

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

    ما قصرت وبإنتظار المزيد … شكرا

  • تلميحات مميزة أخوي عبد الملك و خصوصا التي تهتمـ بـ css
    و بأنتضار باقي تلميحاتك المميزة ……. أخوي
    شكرا لك وشكرا لموقع عالم التقنية …

    • حياك الله اخوي ياسين وباقي التلميحات جايه في الطريق وان شاء الله انها أفضل وأفضل

  • designerplus1

    يعطيك العافية على الشرح الرائع …

  • أخي عبدالملك مشكور على التلميحات الرائعة والله أنا أجمعها مع دروس تعلم بناء موقعك وأقوم بدراستها مع CSS لأقوم بالتطبيق على مدونتي التي لم أنتهي بعد من تصميمها والفضل يعود لك آخراً ولله أولاً في تعلمي لـ CSS أرجو أن تكثر من التلميحات يعني ممكن 2 باليوم لوووول والله بعرف أنو مشغول وأكيد عند أعمالك غير الموقع بس أنتظرها بفارغ الصبر من أسبوع لآخر مشكور مرة أخرى ويعطيك ألف عافية… “بالمناسبة مازلت بانتظار القوالب الداعمة للنسخة 2.7 التي وعدتنا بها أثتاء صدور النسخة ;).

    • شكراً لك أخوي أنس وبارك الله فيك

      بس ما فهمت وش قصدك بالقوالب الداعمة للنسخة 2.7

      تقبل اطيب تحياتي لك

  • دائماً متميز اخوي
    نترقب جدبدك القادم

  • بارك الله فيك استاذي و تلميحات رائعة

    و عقبال ما تخرج لك في إصدااار إلكتروني

    • أهلاً محمد الله يبارك فيك يارب ووجودك الأروع

      بالنسبه لكتيب فهذه خطوه رائعه لكن وين نلاقي الوقت 🙂 يالله نكتب في عالم التقنية

      لكن فكره جيده تطرقت من قبل كذالك اتمنى يسعني الوقت لعملها , شكراً لك 🙂

  • بالفعل والله ، يا ليت نشوفها في إصدار إلكتروني قريب بعد اكتمالها إن شاء الله ..
    أدام الله عليكم لباس الإبداع 🙂

  • شكراً أخي عبدالملك، على هذهِ التلميحات،
    عجبني تلميح جوجل، يمكن لأنَّه بسيط
    بس سؤالي،
    وقت أخذت الكود ونسخته ما يظهرلي بنفس الشكل اللي عندك
    هذا بالإضافة إنه طول الوقت كاتب أوف لاين وأنا أون لاين!
    وكل ما أضغط عليه يقولي إني مو موجود في الوقت الحالي، شو السبب؟
    ياريت لو تشرح أكثر حول هذا التلميح.

    وشكراً لجهودكَ.

    • بالنسبه ليطلع لك أوف لاين وانت أون لاين لا تنسى تسوي تحديث للصفحه وخاصه CTRL + F5 لكي يتحدث عندك حالتك

      بالنسبه لتصميم الشكل ليتناسب مع موقعك يتم ذالك بعد اخذ الكود بدون إطارات بالضغط على Edit ثم اختيار طريقة العرض Hyperlink and status icon – no frame ثم الضغط على Update سيتغير الكود ليظهر لك بدون إطارات بإمكانك إزالة صور الأسهم الجانبيه وتعمل صندوق يتناسب حسب شكل موقعك ثم جعل علامة التواجد التي باللون الأخظر او الرصاصي على يسار الصندوق مثلاً ويمكنك تنسيقه باستخدام CSS

  • محب للجريس

    ممكن تقول وين اضع الاكواد
    في اي ملف

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

      يجب ان تكون على دراية بأساسيات تطوير الويب لأن هذه تلميحات وليست أساسيات

      تقبل اطيب تحياتي

تعليقات عبر الفيسبوك