الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

الدرس الثالث : تصميم مربع البحث

بدأه بسام العيساوي في 28 مايو 2012 · 8 رد · 9,524 مشاهدة · في منتدى تصميم صفحات الويب
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

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

مثلا : الدرس السابق غير مكتمل لأن القائمة لاتحتوي على قوائم متفرعه لذلك سنقوم بالعودة لها لاحقا لنكمل مابدأناه

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

أولا شيفرة هتمل (Code HTML )

                    <!-- Search form -->
                    <div class="search_area">
                        <form method="get" name="s" id="searchform">
                            <input type="text" name="Search" class="s" value="search..."/>
                            <input type="submit" value="go" id="searchsubmit" name="btn_search"/>
                        </form>
                    </div><!-- end Search form -->

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

.search_area{
    position: relative;
    background-image: url(images/search.png);
    height: 44px;
    width: 233px;
    }

post-21336-080758500 1338186422_thumb.pn

الصورة السابقة هي صورة التصميم الخاص بالبحث وتستخدم كما هي بدون تقطيع , كما رأينا في الستايل السابق أولا جعل الطبقه (DIV) تطفوا من خلال الأمر (relative) وجعلنا الخلفيه الصورة السابقه والطول والعرض هم نفس طول وعرض الصورة

الآن لدينا الحقل النصي وزر البحث .. في البدايه لنقم بتصحيح أماكن وحجم تواجدهما الوضع الآن كما يلي

post-21336-010973900 1338187000_thumb.pn

.search_area input[type="submit"]{
  height: 32px;
  width: 47px;
  }

.search_area input[type="text"] {
    height: 27px;
    width: 176px;
}

شرح بسيط لأول سطر , تم إستدعاء الحقل (input) من نوع إرسال (submit) المتواجد داخل الطبقه (DIV) التي لها تنسيق (class : search_area )

الصورة الآن

post-21336-078757500 1338187268_thumb.pn

بما أن التصميم جاهز وهو الصورة إذن فأفضل طريقة متوفره هي جعل الحقل النصي شفاف وجعل زر البحث شفاف أيضا كما أننا سنقوم بإزاحه النص الموجود في حقل الإرسال إلى الخارج لكي لا تظهر كلمة (go ) بإستخدام الأمر (text-indent) 

.search_area input[type="text"]{
  background: transparent ;
  border: 0 ;
  padding-left:10px;
  height: 27px;
  width: 167px;
  color: #333;
  }
.search_area input[type="submit"]{
  background: transparent ;
  border: 0 ;
  cursor:pointer;
  text-indent: -1000px;
  height: 32px;
  width: 47px;
  }

لاحظ هناك إزاحه داخليه (padding) للحقل النصي مع تغيير بعرض الحقل بنفس الإزاحه يعني كان عرض الحقل 176px مع إزاحه داخليه 10px أصبح العرض 167px , جرب أن تقوم بإظهار الحقول ووضع الإزاحه دون تغيير عرض الحقل النصي لكي ترى التغييرات التي ستحدث

الشكل النهائي لنموذج البحث

post-21336-043067100 1338187740_thumb.pn

الدرس مرفق

l3.rar

إلى اللقاء في درسنا القادم بإذن الله

العودة إلى قائمة الدروس

المرفقات
search.png28-05-2012 09-33.png28-05-2012 09-40.png28-05-2012 09-48.png

تم تعديل هذه المشاركة بواسطة بسام العيساوي في 28 يونيو 2012 في 14:52

4

CMS Sfhati , Website Generator


نظام إدارة المحتوى صفحتي ... جربه الآن 


 


small-logo.png

#2

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

بارك الله بك أخي ... إن شاء أكون من متابعين الدورة قريباً

ولكن كنظرة سريعة رأيت الصورة التي تنتج في نهاية الدرس فهل هناك مشكلة فيها ... أنظر لها

وفقك الله.

post-230800-036048100 1338188748_thumb.p

المرفقات
post-21336-.png

الله أكبر الله أكبر الله أكبر لآ إله إلا الله الله أكبر الله أكبر ولله الحمد

#3

بارك الله فيك و أكرمك الله , من المتبعين

#4
_أبو حذيفة_ كتب:

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

بارك الله بك أخي ... إن شاء أكون من متابعين الدورة قريباً

ولكن كنظرة سريعة رأيت الصورة التي تنتج في نهاية الدرس فهل هناك مشكلة فيها ... أنظر لها

وفقك الله.

لا مازلنا في بدايه التصميم وتعمدت وضع الصور لكي تظهر للمتابع بعض المشاكل والإضطرابات الجويه :) , لم نصل حتى الآن لتصميم الترويسه والمحتوى والذيل (header, content , footer) وسنقوم بتصميم كل جزء في درس منفصل

CMS Sfhati , Website Generator


نظام إدارة المحتوى صفحتي ... جربه الآن 


 


small-logo.png

#5

السلام عليكم

- لماذا يتم نزول ذر submit أسفل text عندما نجعل الـ width=176px مع أن 176+47 بإلاضافة للـ 10px الإزاحة الداخلية تساوى 233 وهو عرض مكان صورة الخلفية .

لاتحسبن العلم ينفع وحده مالم يتوج ربه بخلاق

لا إله إلا أنت سبحانك إني كنت من الظالمين

#6
ahmedsaoud31 كتب:

السلام عليكم

- لماذا يتم نزول ذر submit أسفل text عندما نجعل الـ width=176px مع أن 176+47 بإلاضافة للـ 10px الإزاحة الداخلية تساوى 233 وهو عرض مكان صورة الخلفية .

سؤال جميل وسنتطرق له فيما بعد ولكن بما أنك سألت فالإجابه في القيم التلقائيه أو ال (Default) للوسوم لذلك لو قمنا بتصفح ملفات الستايل لمواقع كبيره سنجد ملف بإسم reset.css أو سنجد كود مثل هذا 

*{
	margin:0;
	padding:0;
}
code,kbd,samp,pre,tt,var,textarea,input,select,isindex,listing,xmp,plaintext{
	font:inherit;
	white-space:normal;
}

a,img,a img,iframe,form,abbr,acronym,object,applet,table,a abbr,a acronym{
	border-width:0;
}

table, ul, a, li, img, p, form, hr, dl, dt, dd, div, h1, h2, h3, h4, h5, h6, label {margin:0; padding:0}

حتى مع وجود هذه الأكواد الإزاحه التلقائيه بين العنصرين (elements) ثابته ولا يمكن تغييرها عن طريق الخصائص وبهذا يمكن إستخدام (position) لتطبيق ذلك

1

CMS Sfhati , Website Generator


نظام إدارة المحتوى صفحتي ... جربه الآن 


 


small-logo.png

#7

السلام عليكم

شكراً لك عزيزى بسًّام على توضيح المسألة , ولكن لم تتضح لى بعد فهل كود ضبط القيم التلقائية هذا الذى قمت بكتابته لا يحل المشكلة لأنى بالفعل كنت قد جعلت الإزاحة الداخلية والخارجية 0 للعناصر وما زالت المشكلة لم تحل , فى أخر سطر لك تقصد أنه يجب للتغلب على هذه المشكلة إستخدام position , إذا كان الأمر هكذا فما هى القيم التلقائية بالـ px بين العناصر حتى يتم وضعها فى الحسبان .

لاتحسبن العلم ينفع وحده مالم يتوج ربه بخلاق

لا إله إلا أنت سبحانك إني كنت من الظالمين

#8

للأسف لاحظت أن ذلك يعتمد على

1- نوع المتصفح

2- نوع العنصر (tag element)

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
</head>
 <style>
 *{
        margin:0;
        padding:0;
}
div,span{
  border:1px solid;
}


 </style>
<body>
 <button>bassam</button><button>bassam</button>
<br />
<div>bassam</div><div>bassam</div>
<br />
<span>bassam</span><span>bassam</span>
<br />
<input /><input />
</body>

</html>
1

CMS Sfhati , Website Generator


نظام إدارة المحتوى صفحتي ... جربه الآن 


 


small-logo.png

#9

السلام عليكم

شكراً لك أخى الكريم على التوضيح

وفقك الله لما يحبه ويرضاه

لاتحسبن العلم ينفع وحده مالم يتوج ربه بخلاق

لا إله إلا أنت سبحانك إني كنت من الظالمين

مواضيع مشابهة