الاثنين، 6 فبراير 2012

تصميم و تركيب محرك بحث لمدونتك - التكويد و التركيب -

7:58 م  Unknown   أضف تعليق


السلام عليكم 


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

أول هذا هو محرك البحث الدي تم تصميمه في الدرس السابق 






رابط الصورة :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUkt1RtfecvD1TFBBgtApgHBDMM235Z2Jr86fWI_wyloGE4VOQI7VaavTh70Gk7h-BAnpCLGjhuumYbgljzkZheBknIy92I-r_mSuZAnnQquaB9jUTBmcZdOC01QI43pdlnpZU28vcQXBr/s1600/img.png

نبدئ على بركت لله 
أولا قم بفتح محرر نصوص عادي أو أي برنامج مطور يمكنك العمل عليه أنا أعمل على  Rapid PHP 2011 قم بكتابة وسم فتح و إغلاق HTML و DOCTYPE على الشكل التالي  ملاحظة : نحن سنعمل على HTML5




في منطقة Body نقوم بإنشاء صندوق Div و نعطيه إيدي بإسم searchbox
داخل Div نقوم بإنشاء فورم و نعطيه إيدي بإسم searchform
داخل الفورم نقوم بإنشاء مدخلين:
1- مدخل من نوع Text و له إيدي  بإسم s
2- مدخل من نوع submit و له إيدي  بإسم   sbutton و قيمة فارغة value=" "
لنحصل على هذا الكود في الإخير :
 
 و في المنطقة Head سوف نضع هذا الكود مع الشرح
- ملاحظات

 -- في خلفية searchbox نقوم بوضع رابط صورة محرك بحث الذي تم تصميمه بدل img.png
 -- إرتفاع و عرض الخلفية هو نفسه إرتفاع و عرض الصورة 
 -- no-repeat تعني دون تكرار الخلفية 

نمر  الأن لطريقة تركيب  
طريقة التركيب سهلة نقوم بنسخ كود Css السابقة و كود html 
على الشكل التالي 




ثم ندهب إلى إضافة عناصر HTML/JS بالنسب لكل من البلوجر و ووردبريس و نقوم وضع الكود و مبروك عليك محرك بحث 


و هذا مثال له في مدونة أدوات الويب
 

Posted in: , ,

0 التعليقات:

إرسال تعليق