دورة تصميم Web2 html css javascript

الناقل : elmasry | الكاتب الأصلى : bastr3 | المصدر : www.arabteam2000-forum.com

بسم الله و الصلاة و السلام على رسول الله
اللهم أفتح لنا فتوح العارفين
اللهم إني أعوذ بك أن أشرك بك شيئا أعلمه و أستغفرك لما لا أعلمه

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

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

الدرس الأول
أساسيات في التصميم

عندما نبدأ في تصميم أي موقع يجب أن نعلم أن هناك قواعد وأسس إذا اتبعناها أصبح الأمر بسيطا ويمكن لأي شخص أن يكمل ما بدأته
من أهم الأساسيات هي فصل الشيفرات الخاصه الهتمل والستايل والصور والجافاسكريبت عن بعضها البعض لكي تكون الأمور غير معقدة
نبدأ بصفحة الهتمل HTML
دائما علينا بدء صفحتنا بشيفرة قواعد و معايير الويب
 

<!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">


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

الآن لعمل أي تصميم لن نقوم بكتابة شيفرة طويله من الهتمل
html
وإنما سنقوم بكتابه طبقة
div
وبعدها نقوم بتنسيقها من خلال الستايل لتتناسب مع مانريد

لنبدأ بعمل رابط في قائمة
نعود إلى صفحة الهتمل 
<!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>

<body>
<div class="">
<a href="#">LINK 1</a>
 <a href="#">LINK 2</a>
 <a href="#">LINK 3</a>
 </div>
</body>

</html>


كما نرى إلى الآن لم نقم إلا بكتابة شيفرة الهتمل ولو قما بعرض الصفحة ستظهر كما يلي
ارفق صورة : monthly_10_2009/post-21336-1255268326.jpg

الآن سنقوم بإنشاء ملف الستايل ويكون عادة بإمتداد
style.css
نبدأ الكود كما يلي
في حال أردنا التأثير على وسم نكتب إسم الوسم ليتأثر بذلك جميع الوسوم المشابه لهذا الوسم
فمثلا إذا أردنا جعل جميع الوسوم
<a .... /a>
تصبح الكلمات التي بينها خط غامق بلون أحمر نكتب
 
/*لاحظ مايوضع داخل هذه العلامات يكون كتعليق ولا يؤثر بالشيفره */
a{
  font-weight: bold;
  color: #FF0000;
}


ارفق صورة : monthly_10_2009/post-21336-1255276304.jpg
أما لو أردنا التأثير على مجموعه أخرى تختلف الأوسمه فيها فبعضها
<a .../a>
أو ممكن أن تكون
<p .... /p>

بهذه الحاله نستخدم الكلاس فنكتب 
<a href="#" class="test_a">LINK 2</a>


طبعا نسمي الكلاس بأي إسم يمكننا من معرفة ما هو الهدف من هذا الكلاس
الآن نعود إلى الستايل لنرى كيف سنتحكم بهذا الستايل وكيف أن الوسم سيكون غير متأثر بستايل الوسم وإنما بستايل الكلاس 
/*لاحظ مايوضع داخل هذه العلامات يكون كتعليق ولا يؤثر بالشيفره */
a{
   font-weight: bold;
   color: #FF0000;
 }
 
.test_a{
    font-weight: bold;
    color: #FF0000;
  }


لاحظ أننا كتبنا نقطه قبل إسم الستايل أما في حال الوسم فقط نكتب إسم الوسم
ارفق صورة : monthly_10_2009/post-21336-1255276328.jpg

كما تلاحظ أننا نكتب الستايل إذا كان داخل الصفحة بين وسمي
<style>...</style>

أما إذا أردنا فصل الستايل نكتبه بدون هذه الوسوم ولكن نستدعي ملف الستايل من خلال هذا الوسم كما يلي : 
<link rel="stylesheet" href="css/style.css" type="text/css"/>

يمكنك وضع السطر السابق في أي مكان في الصفحة ولكن يفضل وضعه في الترويسه
<head>...here...</head>
لكي تظهر الصفحة كما تريد للمتصفح لآن الستايل سيتم تحميله أولا ومن ثم تحميل الصفحة

الآن أصبح لدينا مجلد وبداخل هذا المجلد ملف الهتمل ومجلد آخر بإسم ستايل
css
وداخل مجلد الستايل يوجد ملف بإسم
style.css

نأتي لآخر عمليه في التحكم للستايلات وفي المعرف
ID
فإذا أردنا تنفيذ الستايل على طبقه معينه نستخدم الآي دي أو المعرف مثل 
<a href="#" id="test_id_a">LINK 3</a>
<style>
#test_id_a{
  font-weight: bolder;
  color: #0000FF;
}
</style>


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

أتركك إلى حين الدرس الثاني وسأحاول أن أضع درس كل يوم لتكون الدورة منتظمه بإذن الله

الملف الخاص بهذا الدرس
ملف مرفق  L1.rar (590بايتات )
عدد مرات التحميل : 613
للتعليق على هذا الدرس أرجو اتباع هذا الرابط : http://www.urorbit-t...&show_thread=34

الدرس الثاني
عمل حاويه (container)

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

Resized to 87% (was 747 x 273) - Click image to enlargeارفق صورة : monthly_10_2009/post-21336-1255296252.jpg


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

Resized to 87% (was 747 x 273) - Click image to enlargeارفق صورة : monthly_10_2009/post-21336-1255296765.jpg


طبعا لا تعليق على تصاميمي فأنا لست بمصمم :) ...

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

الآن بعد أن حصلنا على الصورة نأتي إلى كود الهتمل 
<!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>
  <link rel="stylesheet" href="css/style.css" type="text/css"/>

</head>

<body>


        <div class="clear"></div>
        <div class="homebox">
        <h2>موقع يقدم </h2>
        <h3>بلا بلني بنه ترمسا كيلات فونيل سيمراني بلا بلني بنه ترمسا كيلات فونيل سيمراني بلا بلني بنه ترمسا كيلات فونيل سيمراني بلا بلني بنه ترمسا كيلات فونيل سيمراني بلا بلني بنه ترمسا كيلات فونيل سيمراني بلا بلني بنه ترمسا كيلات فونيل سيمراني بلا بلني بنه ترمسا كيلات فونيل سيمراني </h3>
        </div>
        <div class="clear"></div>
        <div class="homebox fright">
        <h2>مقال مميز</h2>
        <h3>بلا بلني بنه ترمسا كيلات فونيل سيمراني بلا بلني بنه ترمسا كيلات فونيل سيمراني بلا بلني بنه ترمسا كيلات فونيل سيمراني بلا بلني بنه ترمسا كيلات فونيل سيمراني بلا بلني بنه ترمسا كيلات فونيل سيمراني </h3>
        </div>
        <div class="homebox fleft">
        <h2>إلى الموقع</h2>
        <h3>بلا بلني بنه ترمسا كيلات فونيل سيمراني بلا بلني بنه ترمسا كيلات فونيل سيمراني بلا بلني بنه ترمسا كيلات فونيل سيمراني بلا بلني بنه ترمسا كيلات فونيل سيمراني بلا بلني بنه ترمسا كيلات فونيل سيمراني </h3>
        </div>


</body>
</html>


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

<div class="clear"></div>
         <div class="homebox">
         <h2>عنوان</h2>
         <h3>نص المقال  </h3>
         </div>


تخيل بساطة الشيفره !! في حال كنت مبرمج فلن تجهد نفسك في تتبع شيفرة الهتمل ويمكنك التعديل عليها كيفما تريد

بعد أن انتهينا من الهتمل نأتي إلى التصميم
لاحظ أو طبقه
<div class="clear"></div>
هذه تستخدم للفصل بين الطبقات في حال وضعنا طبقتين فوق بعظهما فربما يزاح التصميم أو طبقه تزيح طبقة فيصبح التصميم مترخبط بهذه الطبقه نحل المشكله
لنبدأ في تصميمها أولا 
.clear{
clear: both;  
}


الشيفرة واضحه تماما ... نظف كليهما
يعني إفصل بيناتهم
لنرى لو حذفنا هذه الطبقة ماذا سيحصل لتصميمنا
Resized to 86% (was 757 x 447) - Click image to enlargeارفق صورة : monthly_10_2009/post-21336-1255297923.jpg


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

<div class="homebox">
          <h2>عنوان</h2>
          <h3>نص المقال  </h3>
          </div>


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

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

هل نسيت شيء ؟؟
لنترجم التصميم إلى شيفرة 
.homebox{
      background-image: url(../images/backbox_home1.png);/*صورة خلفيه للطبقة*/
      background-repeat: repeat-x;/*تكرار الخلفيه بشطل أفقي فقط */
      border: 1px #FF3300 solid;/* إطار لونه برتقالي ومن نوع طلب وبحجم واحد بكسل*/
      margin-bottom: 10px;/*  محاذا خارجيه بمقدار 10 بكسل من الأسفل */
    }


نلقي نظر على التصميم حتى الآن كيف أصبح

ارفق صورة : monthly_10_2009/post-21336-1255298879.jpg

رائع :) لا تقلق مازلنا في البدايه
نلاحظ الآن الترويسه فونها أسود وهي بخط كبير ... لاعجب فقد إستخدمنها وسم
h2
ويعني خط كبير
ولكن مع التصميم نستطيع التحكم به ليصبح أفضل ويمكننا وضع صوره خلفيه له وأي شيء آخر
ولكن الآن لا نريد سوى تعديل حجم الخط والمحاذاة ولون الخط 
h2{
      font-size:12px;/*حجم الخط 12 بكسل*/
     /*نوع الخط تاهوما*/
      direction: rtl;/*اتجاه النص من اليمين إلى اليسار لآن النص عربي */
      margin: 10px;/*المحاذاه الخارجية لجميع الإتجاهات 10 بكسل*/
      color: #fff; /*لون الخط أبيض */
}


الآن الجسم وهو وسم
h3
نفس التصميم السابق ولكن لون الخط مختلف 
h3{
       font-size:12px;/*حجم الخط 12 بكسل*/
       /*نوع الخط تاهوما*/
       direction: rtl;/*اتجاه النص من اليمين إلى اليسار لآن النص عربي */
       margin: 10px;/*المحاذاه الخارجية لجميع الإتجاهات 10 بكسل*/
       color: #575757; /*لون الخط داكن*/
 }


أمممم هل يمكن اختصار التصميم فهنا بعض الأوامر تكررت ... الجواب نعم فقط نقوم بأخذ الأوامر المتشابهه ونضعها في ستايل وننسبه للوسوم
h2 & h3
لتصبح كما يلي 
h2{
      color: #fff;
    }
    h3{
      color:#575757;
    }

    .h2h3_font{
      font-size:12px;
     
      direction: rtl;
      margin: 10px;
    }

/*الوسوم 
h2&h3
يجب تعريفها على الستايل الجديد كما يلي 
       <h2 class="h2h3_font">إلى الموقع</h2>
        <h3 class="h2h3_font">بلا ب
*/


ماذا بقي من الدرس ؟؟؟
آه كيف نقوم بوضع حاويتين بجانب بعظهما البعض ؟
طبعا لن نقوم بتصميم جديد وطول وعرض خاص للحاويتين المتلاصقتين ولا أي شيء ولكن سنقوم بعمل ستايل يمين ويسار الأول للحاويه التي على الجهه اليمنى والثاني للحاويه على الجهه اليسرى 
.fleft{
      float: left;/*مكان الحاويه على اليسار*/
      width:49%;/*عرض الحاويه النصف إلا شوي*/
    }
    .fright{
      float: right;/*مكان الحاويه على اليمين */
      width:49%;/*عرض الحاويه النصف إلا شوي*/
    }


سؤال : ليس العرض خليناه النص إلا شوي ؟؟؟
الجواب لو نخليه النص بالضبط رح تصير كل حاويه بجهتها بس تحت بعض أنظر الصورة

ارفق صورة : monthly_10_2009/post-21336-1255300003.jpg

الشوي هاي هيه حجم الإطار واحد بكسل فهو إلى الخارج

الآن أي حاويه نريد أن نضعها بجانب حاويه أخرى نقوم بجعلها تأخذ الستايل الرئيسي للحاويه بالإضافة إلى الستايل الخاص بالجهه التي نريد وضع الحاويه بها إما على اليسار أو اليمين
أمممم
كيف سنضع ستايلين أو تصميمين للوسم الواحد ؟
نقوم بوضع إسم التصميم والتصميم الآخر بينهما فراغ أو مساحة
كما يلي 
<div class="homebox fright">


أتمنى أن يكون الدرس مفيدا لكم
يمكنك تحميل الملفات الخاصه بهذا الدرس من هنا
ملف مرفق  L2.rar (6.86كيلو )
عدد مرات التحميل : 488

للتعليق على هذا الدرس أرجو اتباع هذا الرابط : http://www.urorbit-t...&show_thread=35

الدرس الثالث
عمل زر (button)

سأحاول في هذه الدوره العمل على اسنخدام الستايل في تقليل حجم الموقع وسرعة فتحه لذلك سأحاول استخدام أقل عدد للصور
في هذا الدرس سنرى كيف نقوم بإنشاء زر وعد تحريك المؤشر عليه يتغير شكله
كود الهتمل : 
<div class="button"> اضغط هنا </div>


لم أضع كامل الشيفرة فقد علمنا كيف تتم كتابة الصفحة بشكل عام ...
حتى الآن لو نفذنا الصفحة سنجد كلمة اضغط هنا عاديه بدون أي مؤثرات
الآن سنقوم بتصميم شكل الزر ليصبح كما يلي :
ارفق صورة : monthly_10_2009/post-21336-1255424658.png
هذا الوضع الافتراضي

ارفق صورة : monthly_10_2009/post-21336-1255424722.png
هذا وضع المفعل أو عندما تكون المؤشر فوقه

الآن نأتي إلى الستايل : 
.button{
     /*صورة الافتراضي كخلفية للزر*/ background-image: url(../images/d3_1.png);
  /*عد تكرار الخلفيه */    background-repeat: no-repeat;
/*عرض الزر يكون بعض الصورة */      width:147px;
/*طول الزر يكون بارتفاع الصورة */      height:52px;
/*محاذاه داخليه لكي نضع النص في المنتصف */      padding-top: 15px;
   /*النص يكون في المنتصف*/   text-align: center;
/*المؤشر يكون على شكل يد*/      cursor: pointer;
 /*لون النص  رمادي */    color:#666666;
    /*هنا كما نلاحظ يمكننا وضع أكثر من خاصيه للخط مثل نوع وحجم الخط عندما نختار خط */  font:14px Tahoma, Arial, sans-serif;
    }

/*لآي ستايل يمكننا وضع نقطتين رأسيتين وبعدها كلمة هوفر كما نرى لكي نحدد الستايل في حال مرور المؤشر فوق هذا الستايل*/    .button:hover{
 /*نغير الصوره */     background-image: url(../images/d3_2.png);
/*ولون الخط إلى الأبيض */      color:#FFFFFF;
    }

نلاحظ في ستايل الهوفر لم نقم بإعادة كتابه الستايل مثل الطول والعرض وغيرها

إنتهى الدرس !!
لا قلت لك أنني سأحاول عمل صورة واحد للتصميم ...
نعود للفوتوشوف ونأخذ الصورتين ونضعهما فوق بعض بالطريقة التاليه :
ارفق صورة : monthly_10_2009/post-21336-1255427032.png

نبقي الكود كما هو في الستايل ونغير فقط اسم الصورة إلى الصورة الجديده في الوضعين
ونقوم بوضع مكان الصورة في الوضع الإفتراضي فوق وفي وضع فوقها مؤشر نضع موقع الصورة تحت كما يلي : 
/*في الوضع الطبيعي */    background-position:top;
  /*في الوضع فوقها مؤشر */    background-position:bottom;


طبعا هناك مشاكل حدثت في المحاذاة وفي المثال المرفق سترى الحل المؤقت :) ولكن في الدروس القادمة سنرى كيف يمكننا التحكم أكثر بكل جزئيه ولكن الآن حبه حبه

سؤال : فكر في كيفيه جعل الأزرار يمكن وضعها بجانب بعضها فلو كررت الزر ستلاحظ أنه أصبح تحت الزر الآخر ... كيف يمكن جعلها بجانب بعضها البعض ؟

الدرس مرفق مع ملفات البي أس دي : ملف مرفق  L3.rar (65.15كيلو )
عدد مرات التحميل : 631

للتعليق على هذا الدرس أرجو اتباع هذا الرابط : http://www.urorbit-t...&show_thread=44

الدرس الرابع
تصميم نموذج بحث

جميعنا يعرف نموذج البحث الذي نراه في المواقع , ولكن غالبا مانعاني الصداع في حال جربنا عمل نموذج جميل كما في موقعي :)

صور للتوضيح
ارفق صورة : monthly_11_2009/post-21336-1258213825.png
ارفق صورة : monthly_11_2009/post-21336-1258213830.png

لعمل مثل هذا النموذج هناك عدة طرق وكل طريقة لها مميزاتها , سأذكر الطرق التي لا تحتاج إلى تعقيد ليكون الدرس أوضح بإذن الله
*ملاحظه : إذا قمت بتجربة أي مثال في هذه الدورة ولم يعمل بشكل صحيح على إنترنت إكسبلولر (المشلول) فهذه مشكلة هذا المتصفح فهو لا يتبع المعايير القياسيه للتصميم. أنا أعتمد على فيرفوكس في التجربه.


نبدأ بسم الله
أول مانقوم بعمله الآن هو إنشاء طبقة لتحتوي نموذج البحث أو أي شيء نريد عمله , يعني الطبقات أصبحت مهمه جدا في عالم تصميم المواقع وذلك لسهولة نقل مابداخلها والتحكم بها وأعني بطبقة أي
DIV

لذلك سنقوم بعمل طبقه ونجعل لها مقبض ثم نضع بداخلها نموذج البحث وهو كود هتمل مجرد يعني إكتبه بإيدك وماتعتمد على أي برنامج تنسيق لآنك بهاي الحاله رح تمرض وإنت بتعدل على النموذج , مجرد يعني بدون فورمات لا فونت ولا حجم ولا لون إتفقنا ؟
كود هتمل رح يكون كالتالي 
<div id="primarySearchForm">
<form>
<input id="primarySearch" name="search">
<button type="submit" name="go" id="searchGoButton"><span>Go</span></button>
</form>
</div>


معاينه النتيجه :
Resized to 98% (was 664 x 448) - Click image to enlargeارفق صورة : monthly_11_2009/post-21336-1258215246.png



إلى الآن لم نقم بأي عمل بطولي :) طيب ... خلينا نبدأ بالستايل بس قبل الستايل بدي تتذكر معي الدرس السابق عن الأزرار ... أممم , إتذكرته ؟ طيب بدنا نعمل زر للبحث زي طريقة الدرس السابق يعني رح يكون زر البحث كما يلي ...
Posted Image

الآن هذه جميع الصور المطلوبه ... نعم هذه الصورة فقط وهذا مايميز الويب 2 ويجعل الموقع أجمل وأسرع في التصفح ولو أن وجود الجافاسكريبت يعمل بطئ ولكن ستحل هذه المشكله كما تم حلها في جووجل كروم , نرجع لموضوعنا ...

نأتي لأول أمر وهو الطبقه ... لتحريك النموذج يمكنك تحريك الطبقة الرئيسيه والتي تحتوي على النموذج وهي بإسم
primarySearchForm
ونستخدم لتحريكها 
#primarySearchForm {
position: absolute;
right: 180px;
top: 30px;
}


كما يمكنك عدم إستخدام الإحداثيات يمين واعلى ليكون النموذج في المكان الذي كتب به داخل الشيفره :blink:O.o مافهمت ؟
طيب شوف الصورة مشان تستوعب
ارفق صورة : monthly_11_2009/post-21336-1258216318.png

الآن نأتي إلى الحقل النصي بدنا نسقة على أساس يطلع شكله جذاب وبنفس الوقت بدون صور إضافيه ولو وجد صورة كخلفيه للحقل يمكن أن تجعله أكثر جاذبيه فلا بأس :)
كما عرفنا الحقل النصي له المقبض بإسم
primarySearch
وهو داخل الطبقه بإسم
primarySearchForm

يعني الستايل الخاص فيه رح يكون كالتالي مع إمكانيه إستخدام فقط مقبض الحقل النصي ولكن يفضل وصف دقيق لتحديد الستايل في حال أردت إسخدام ستايل آخر وكان بنفس إسم هذا الحقل فسيكون الأمر صعب التنفيذ وربما تقع في دوامه لآنك تقوم بتعديل على التصميم ولكن الموقع لا يتأثر أو يخرب أكثر فأكثر ... مش واضحه الفكرة ؟ أمممم
لنفرض أنك تستخدم ستايل بإسم بسام :) لحقل نصي وبعد سنه أردت التعديل على الموقع وقمت بإضافة كلمة وعملت ستايل لها بإسم بسام أيضا فأنت تقترح أسماء متشابه ولا تفكر في تغيير الإسم , ماذا سيحدث ؟ سيضرب أحد التصميمين إما الحقل أو الكلمة وستبدأ في البحث لماذا ضرب تصميم الحقل النصي أو لماذا لا ينفذ تصميم الكلمة !! أين الخطأ ؟؟؟ أما لو قمت بتحديد أكثر للتصميم فسميته بسام حقل نصي وسميت تصميم الكلمة بسام كلمة بهذا سيكون التشابه في التصميم صعب التطابق بين تصميميين , أتمنى تكون الفكرة وضحت.

على ماسبق سيكون تحديد التصميم مقبض الطبقة بعدها الوسم إن وجد بعدها مقبض الحقل , ترجمة ماسبق 
#primarySearchForm input#primarySearch


الآن الستايل : 
#primarySearchForm input#primarySearch {
width: 120px;
height: 17px;
padding: 1px 21px 1px 5px;
font-size: 13px;
color: #333;
background: #fff;
border: 1px solid #aaa;
-moz-border-radius: 10px;
}


هناك ماهو مفهوم بالستايل وهناك ماهو غير مفهوم .. الطول والعرض مفهومه مابدها شرح البادينغ أو الإزاحة الداخليه لتحديد مكان النص داخل الحقل وتبدأ في الأعلى وضعنا الإزاحة واحد بكسل ثم إزاحة من جهة اليمين خليناها بعرض صورة البحث مشان نحط صورة البحث داخل الحقل النصي ولما نكتب بالحقل مايجي الكلام تحت الصورة بعدين إزاحة من تحت بواحد بكسل وإزاحة من اليسار خمسة بكسل لأننا إستخدمنا خاصيه تدوير الحواف فلا نريد من النص أن يكون خارج الحواف وهي بعرض عشرة بكسل من الجهتين يعني خمسة بكسل من جهة اليسار , إنتهى.
الخط ولونه والخلفية للحقل ممكن نستخدم معها صورة كما ذكرت مشان يكون التصميم أجمل , الإطار خلينا بعرض واحد بكسل من نوع صلب ولون رمادي , آخر سطر طبعا المشلول إكسبلولر مابعرف عنه أي شيء :) وهو لعمل حواف دائريه للإطار كما ذكرت بقطر (بظم القاف وليس بفتحها :wink: ) 10 بكسل . على إكسبلولر رح يكون التصميم فيه بشكل مستطيل :wacko:

الآن بعد أن أنهينا تصميم الحقل النصي رح نتعلم بعض التقنيات المهمه بشكل مبسط , كثير منا يقوم بالتصميم وينسى أن هذا موقع إنترنت وأن إستخدام الصور يسيء للموقع من ناحية نشر الموقع على محركات البحث ... كيف ذلك ؟ عندما تقوم بعمل صورة مكتوب بداخلها حمل برنامج فواتير لمعالجة فواتير المياه والكهرباء (مثلا:)) لن يستطيع محرك البحث مثل جووجل بعمل أرشفه لهذه الكلمات لذلك نستخدم داخل وسم الصورة الخاصيه ألت أو تايتل
alt | title
ولكن ماذا لو كان هذا التصميم ستايل ؟؟ يعني لايحتوي على خاصيه ألت أو تايتل ؟ ستظطر إلى التنازل عن نشر الموقع مقابل تصميم جميل ورائع ... هل هذا حل !! طبعا لا , الحل هو وضع الكلمات والجمل التي داخل الصورة في الموقع وبشكل واضح لمحرك البحث وإخفاء هذا عن المستخدم وبهذا تكسب التصميم والنشر , بعد هذه الديباجة الطويله سنرى كيف نخفي كلمة جو
GO
التي على زر الإرسال دون أن نحذفها , يمكنك كتابة ما تشاء ومحركات البحث هي سكريبتات يعني زي الآله بتنفذ إللي بتشوفه فتقوم بأرشفه الكلمات داخل كود الهتمل دون أن تعلم أن هذه الكلمات لا يراها المستخدم ,

إخفاء كلمة جو 
#primarySearchForm button span {
  visibility: hidden;
}


أتوقع فاهم شو إللي صار ... تحديد كلمة جو هو مقبض الطبقة > الوسم > الوسم الخاص بجو وهو داخل وسم الزر (إرجع إلى شيفرة هتمل)

الآن مازال الزر موجود ولكنه يحتاج إلى تصميم , نبدأ في أساسيات تصميمه كما في الدرس السابق صورة كخلفيه للزر مع حذف الإطار وجعل الزر في مكانه لذلك نختار خاصيه البوزيشن أو الموقف هيك ترجمتها الحرفيه أما كشرح هي نوع الطبقة ثابته أو عائمة وغير ذلك وكل نوع له استخداماته وهنا نستخدم العائمة ولو أن ترجمتها مطلق , والؤشر يكون على شكل يد لكي يعرف المستخدم أن هذا زر , ترجمة ماسبق : 
#primarySearchForm button {
background: url(http://www.urorbit-tools.com/images/icon_searchglass.png) 0 0 no-repeat;
width: 20px;
height: 20px;
position: absolute;
right: 3px;
top: 1px;
border: 0;
cursor: pointer;
}


بقي حركة المؤشر على الزر كما في الدرس السابق نريد الصورة تتغير ليظر للمستخدم أن العدسه نورت
#primarySearchForm button:hover {
background-position: 0 -20px;
}

بهذا ينتهي درس اليوم أتمنى أن ينال على رضاكم ودعواتكم لأخوكم بظهر الغيب جزاكم الله الجنه.

ملفات الدرس مرفقه
ملف مرفق  L4.rar (5.41كيلو )
عدد مرات التحميل : 286

للتعليق على هذا الدرس أرجو اتباع هذا الرابط : http://www.urorbit-t...&show_thread=45\

الدرس الخامس
عناوين ومواضيع مع رمز

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

في هذا الدرس سنصل إلى أفضل الطرق لعمل عناوين برموز وبشيفره صغيره وعمليه بنفس الوقت
هذه صورة لما سنصل إليه اليوم بإذن الله
ارفق صورة : monthly_11_2009/post-21336-1258538646.png

نكمل بعد الفاصل :)

عدنا

في الصورة السابقة للإنجليزي , أما العربي فهذه هي الصورة
ارفق صورة : monthly_11_2009/post-21336-1258554814.png


بسم الله نبدأ

كود الهتمل 
<span class="homeLink bug">تعلم سبعين لغة عالمية في خمس دقائق </span>


هل تواجهه صعوبه في فهم مايجري ؟
حسنا ... قمنا بوضع عنوان المقال داخل سبان وهذا السبان له ستايل من نوع هوم لينك بالإضافة إلى ستايل آخر من نوع بغ
كما ذكرنا سابقا يمكنك إستخدام ستايلين أو أكثر في نفس الوسم ويكون بين كل ستايل وآخر مسافه

لماذا قمنا بإستخدام ستايلين ؟
هل يمكن إستخدام ديف أو براجراف
div , P , span , h1 , h2, h3
؟؟؟

قمنا بإستخدام ستايلين لكي نفصل تصميم الخط عن الرمز
الستايل الأول وهو
homeLink
سيكون للخط ولونه وحجمه أما الستايل الثاني
bug

فسيكون للرمز أي الآيكون التي على جنب العنوان

نبدأ بأول ستايل 

.homeLink
{
text-align: right;   /*تحويل النص إلى اليمين في حاله النص عربي */
/*display: block; */ /* يتم استخدام هذه الخاصيه في حال إستخدمنا السبان حتى يصبح كل عنوان على سطر */
padding-right: 20px; /*إبعاد النص عن اليمين بمعدل عرض الصورة أو الرمز حتى لا يكون النص فوق الرمز */
color: #666666; /*لون النص */
font-size: 93%;/*حجم النص */
background-repeat: no-repeat; /*الخلفية وهي الرمز بدون تكرار */
background-position: right;/*الخلفية وهي الرمز مكانها على اليمين للعربي وعلى اليسار للإنجليزي */
}



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

الخلفية (الرمز )
 
.bug{background-image: url(../images/bug_normal.png);}

لا تحتاج إلى شرح

الآن لو نقوم بالتنفيذ سيظهر التصميم كما في الصورة ولكن كما تلاحظ في الصورة هناك رموز أخرى كيف تم ذلك ؟
نقوم بأخذ الرموز وحفظها في مجلد الصور ونعمل اكثر من ستايل للرمز كما يلي 
.new_window{background-image: url(../images/new_window.gif);}
.ok{background-image: url(../images/ok.gif);}
.subject{background-image: url(../images/subject.gif);}

ونستخدم هذه الرموز في الشيفره كما يلي : 
<p class="homeLink bug ">تعلم سبعين لغة عالمية في خمس دقائق </p>
    <h1 class="homeLink bug ">كيف تصبح رجل فضاء في خمس أيام </h1>
    <h2 class="homeLink new_window ">مقال الأخطاء الشائعه </h2>
    <span class="homeLink ok ">فكرة عمل مجنون </span>
    <span class="homeLink subject ">قم بعمل مشروع بناء طائرات في بيتك </span>
    <span class="homeLink bug ">استخدم خاصية البحث في جووجل للبحث عن الذهب</span>


لاحظ كيف بعد هوم لينك تجد إسم الرمز المستخدم في الستايل , الأمر أصبح مثل كتابه قصه :) هذا العنوان مع رمز قطه وهذا العنوان مع رمز منشار وهكذا

ماذا لو أردنا جعل العنوان مثل الرابط يعني إذا تم تحريك المؤشر عليه بنور الرمز ويتغير لون النص ؟

نقوم بعمل ستايل جديد للرمز وآخر للنص ولكن مع حدث هوفر كما يلي 
.bug:hover{background-image: url(../images/bug_hover.png);}

.homeLink:hover{color: #cc0000;}


لاحظ إستخدمنا صورة أخرى للرمز حشرة حتى يظهر تغير في الصورة وتنويرها

أرجو أن يكون الدرس مفهوم ويمكنك تحميل الدرس من هنا
ملف مرفق  L5.rar (2.62كيلو )
عدد مرات التحميل : 245
للتعليق على هذا الدرس أرجو اتباع هذا الرابط : http://www.urorbit-t...&show_thread=46

الدرس السادس
فنيات مهمه

في هذا الدرس سنتعلم فنيات أو تقنيات أو سمها ماشئت ولكنها مهمه في عالم التصيم فهي تضيف لمسة فنيه للعمل ولكي تقوم بعملها بالوضع الطبيعي تحتاج إلى جداول وتصميم وصور وغير ذلك
ماذا أقصد!!
حسنا لنرى الصوره فهي توضح المقصود
ارفق صورة : monthly_11_2009/post-21336-1258654519.png

تخيل أي شكل من الأشكال تريد عمله ... ماهي الطرق الممكنه لعمل مثل هذا الشكل ؟
أترككم إلى الغد وبعدها نكمل بإذن الله

يمكنكم المشاركة في إقتراح دروس لأنني بصراحة بقعد فتره أفكر في درس :)