• 0
bastr3

دورة تصميم Web2

سؤال

بسم الله و الصلاة و السلام على رسول الله

اللهم أفتح لنا فتوح العارفين

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

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

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

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

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

الدرس الأول

أساسيات في التصميم

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

من أهم الأساسيات هي فصل الشيفرات الخاصه الهتمل والستايل والصور والجافاسكريبت عن بعضها البعض لكي تكون الأمور غير معقدة

نبدأ بصفحة الهتمل 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>

كما نرى إلى الآن لم نقم إلا بكتابة شيفرة الهتمل ولو قما بعرض الصفحة ستظهر كما يلي

post-21336-1255268326_thumb.jpg

الآن سنقوم بإنشاء ملف الستايل ويكون عادة بإمتداد

style.css

نبدأ الكود كما يلي

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

فمثلا إذا أردنا جعل جميع الوسوم

<a .... /a>

تصبح الكلمات التي بينها خط غامق بلون أحمر نكتب

/*لاحظ مايوضع داخل هذه العلامات يكون كتعليق ولا يؤثر بالشيفره */
a{
font-weight: bold;
color: #FF0000;
}

post-21336-1255276304_thumb.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;
}

لاحظ أننا كتبنا نقطه قبل إسم الستايل أما في حال الوسم فقط نكتب إسم الوسم

post-21336-1255276328_thumb.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

للتعليق على هذا الدرس أرجو اتباع هذا الرابط : http://www.urorbit-tools.com/?forum=1&show_thread=34

تم تعديل بواسطه bastr3
6

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

68 إجابة على هذا السؤال .

  • 0

الدرس الثاني

عمل حاويه (container)

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

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

...

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

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

لقد قلنا هذه دوره في الويب 2 يعني المواقع الجديده وننسى إشي إسمه جدول بالتصميم وننسى التقطيع وننسى الفرونت بيج هاي كلها صارت شيء قديم والغبار عليه

سأضع صورة للتصميم الذي سنصل إليه اليوم

post-21336-1255296252_thumb.jpg

قبل أن أبدأ أريدك أن تفكر كيف يمكن تصميم هذا الشكل ؟ وبأقل الشيفرات وأفضل التقنيات؟

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

post-21336-1255296765_thumb.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;
}

الشيفرة واضحه تماما ... نظف كليهما

يعني إفصل بيناتهم

لنرى لو حذفنا هذه الطبقة ماذا سيحصل لتصميمنا

post-21336-1255297923_thumb.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 بكسل من الأسفل */
}

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

post-21336-1255298879_thumb.jpg

رائع :) لا تقلق مازلنا في البدايه

نلاحظ الآن الترويسه فونها أسود وهي بخط كبير ... لاعجب فقد إستخدمنها وسم

h2

ويعني خط كبير

ولكن مع التصميم نستطيع التحكم به ليصبح أفضل ويمكننا وضع صوره خلفيه له وأي شيء آخر

ولكن الآن لا نريد سوى تعديل حجم الخط والمحاذاة ولون الخط

h2{
font-size:12px;/*حجم الخط 12 بكسل*/
font-family: Tahoma;/*نوع الخط تاهوما*/
direction: rtl;/*اتجاه النص من اليمين إلى اليسار لآن النص عربي */
margin: 10px;/*المحاذاه الخارجية لجميع الإتجاهات 10 بكسل*/
color: #fff; /*لون الخط أبيض */
}

الآن الجسم وهو وسم

h3

نفس التصميم السابق ولكن لون الخط مختلف

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

أمممم هل يمكن اختصار التصميم فهنا بعض الأوامر تكررت ... الجواب نعم فقط نقوم بأخذ الأوامر المتشابهه ونضعها في ستايل وننسبه للوسوم

h2 & h3

لتصبح كما يلي

h2{
color: #fff;
}
h3{
color:#575757;
}

.h2h3_font{
font-size:12px;
font-family: Tahoma;
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%;/*عرض الحاويه النصف إلا شوي*/
}

سؤال : ليس العرض خليناه النص إلا شوي ؟؟؟

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

post-21336-1255300003_thumb.jpg

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

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

أمممم

كيف سنضع ستايلين أو تصميمين للوسم الواحد ؟

نقوم بوضع إسم التصميم والتصميم الآخر بينهما فراغ أو مساحة

كما يلي

<div class="homebox fright">

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

يمكنك تحميل الملفات الخاصه بهذا الدرس من هنا

L2.rar

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

تم تعديل بواسطه bastr3
2

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

الدرس الثالث

عمل زر (button)

سأحاول في هذه الدوره العمل على اسنخدام الستايل في تقليل حجم الموقع وسرعة فتحه لذلك سأحاول استخدام أقل عدد للصور

في هذا الدرس سنرى كيف نقوم بإنشاء زر وعد تحريك المؤشر عليه يتغير شكله

كود الهتمل :

<div class="button"> اضغط هنا </div>

لم أضع كامل الشيفرة فقد علمنا كيف تتم كتابة الصفحة بشكل عام ...

حتى الآن لو نفذنا الصفحة سنجد كلمة اضغط هنا عاديه بدون أي مؤثرات

الآن سنقوم بتصميم شكل الزر ليصبح كما يلي :

post-21336-1255424658_thumb.png

هذا الوضع الافتراضي

post-21336-1255424722_thumb.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;
}

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

إنتهى الدرس !!

لا قلت لك أنني سأحاول عمل صورة واحد للتصميم ...

نعود للفوتوشوف ونأخذ الصورتين ونضعهما فوق بعض بالطريقة التاليه :

post-21336-1255427032_thumb.png

نبقي الكود كما هو في الستايل ونغير فقط اسم الصورة إلى الصورة الجديده في الوضعين

ونقوم بوضع مكان الصورة في الوضع الإفتراضي فوق وفي وضع فوقها مؤشر نضع موقع الصورة تحت كما يلي :

/*في الوضع الطبيعي */    background-position:top;
/*في الوضع فوقها مؤشر */ background-position:bottom;

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

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

الدرس مرفق مع ملفات البي أس دي : L3.rar

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

تم تعديل بواسطه bastr3
1

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

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

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

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

شكرا لكم على اقتراحاتكم

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

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

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

شكرا لكم

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

السلام عليكم ,

الله يعطيك العافية على دروس , ساعود لقرائتها عند انتهاء فترة الامتحانات الجامعية (فيرست)

تم تعديل بواسطه ahmad123
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

أدعو لك بالتوفيق والنجاح يارب

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

قل آمين

جعلك في الجنة

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

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

مشكووور علي الشرح وانا في انتظار شرح تنسيق ال input text

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

:) أعتذر عن التأخر في الرد فأنا لست مشترك بهذا القسم من المنتدى لذلك لم ألحظ وجود ردود

سأقوم بالمتابعه قريبا بإذن الله وجزاكم الله كل خير

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

السلا م عليكم

جزاك الله خيراً على الشرح الرائع

لدي سؤال كيف أتحكم في طول وعرض الحويات

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

من خلال :

width:49%;/*عرض الحاويه النصف إلا شوي*/

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

height

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

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

سنكمل الدروس هنا إلى أن يتم تجهيز الموقع سأعمل على نقل الدروس وترتيبها في ذلك الموقع إن شاء الله

الدرس الرابع

تصميم نموذج بحث

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

صور للتوضيح

post-21336-1258213825_thumb.png

post-21336-1258213830_thumb.png

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

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

نبدأ بسم الله

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

DIV

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

كود هتمل رح يكون كالتالي

<div id="primarySearchForm">
<form>
<input id="primarySearch" name="search">
<button type="submit" name="go" id="searchGoButton"><span>Go</span></button>
</form>
</div>

معاينه النتيجه :

post-21336-1258215246_thumb.png

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

icon_searchglass.png

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

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

primarySearchForm

ونستخدم لتحريكها

#primarySearchForm {
position: absolute;
right: 180px;
top: 30px;
}

كما يمكنك عدم إستخدام الإحداثيات يمين واعلى ليكون النموذج في المكان الذي كتب به داخل الشيفره :blink:O.o مافهمت ؟

طيب شوف الصورة مشان تستوعب

post-21336-1258216318_thumb.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

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

تم تعديل بواسطه bastr3
1

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

ما شاء الله شرح ممتاز .... شكرا علي الدرس المميز جدا

لدي استفسار بسيط بخصوص مشكلة عد ظهور الأنحناء في متصفح انترنت اكسبلورار (العقيم :wacko: ) هل يمكنك وضع صورة خلفية للinput text تكون بشكل الانحناء حتي نتفادي تلك المشكلة ويصبح الشكل جيد في اغلب المتصفحات ؟؟

تجربتي لما ذكرتة بالأعلي في المرفقات

input_text.rar

تم تعديل بواسطه AROON
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

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

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

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

على كل وجدت هذا الموقع http://www.the-art-of-web.com/css/border-radius/

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

Update: As of October 2008 the rounded corners in both Safari 3 and Firefox 3 are antialiased. Come on Microsoft, support border radius in IE8! (or 9? or 10?! Please!)

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

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

جزاك الله خيراُ أخي العزيز على هذه الشرح الرائع

وموقعك الجميل

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

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

الدرس الخامس

عناوين ومواضيع مع رمز

درسنا اليوم عن عمل عنوان رئيسي في الصفحة أو رابط وبجانبه صورة رمزيه صغيره ...

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

في هذا الدرس سنصل إلى أفضل الطرق لعمل عناوين برموز وبشيفره صغيره وعمليه بنفس الوقت

هذه صورة لما سنصل إليه اليوم بإذن الله

post-21336-1258538646_thumb.png

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

عدنا

في الصورة السابقة للإنجليزي , أما العربي فهذه هي الصورة

post-21336-1258554814_thumb.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

للتعليق على هذا الدرس أرجو اتباع هذا الرابط : http://www.urorbit-tools.com/?forum=1&show_thread=46

تم تعديل بواسطه bastr3
1

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

إذا بتلاحظوا في عنوان الموضوع دورة تصميم Web2, html css javascript

حتى الآن لم نبدأ في الجافاسكريبت !!

في الدرس القادم ربما نبدأ في أساسيات إستخدام الجي كويري لآنني سأعتمد هذه المكتبه في استخدام الجافاسكريبت ...

شكرلكم

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

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

الدرس السادس

فنيات مهمه

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

ماذا أقصد!!

حسنا لنرى الصوره فهي توضح المقصود

post-21336-1258654519_thumb.png

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

أترككم إلى الغد وبعدها نكمل بإذن الله

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

تم تعديل بواسطه bastr3
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

نكمل ...

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

سنقوم بكتابه إنشاء حاويتين واحده رئيسيه والأخرى داخلها كما يلي :

 <div class="main_box">
<div class="arrow1"></div>
</div>

الآن سنقوم بكتابة تصميم الحاويه الرئيسيه

main_box

	  .main_box{
width: 150px;
height: 100px;
background: #b3b9b3;
border: #900606 1px solid;
}

لا جديد فيما سبق وكله مفهوم ...

الآن نأتي إلى تصميم الجزء الخارجي ... arrow1

	  .arrow1{
height: 20px;
width:20px;
position:relative;
top: 50px;
right:-150px;
background: url(images/arrow1.png) no-repeat right;
}

ماذا حدث ؟

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

position:relative;

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

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

وقمنا بتحديد خلفيه للطبقة لايتم تكرارها وعلى يمين الطبقة مكانها

الصورة هي :

post-21336-1258810792_thumb.png

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

سيصبح التصميم كما يلي :

.arrow1{
height: 100%;
width:100%;
position:relative;
top: 0px;
left:20px;
background: url(images/arrow1.png) no-repeat right;
}

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

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

post-21336-1258812410_thumb.png

post-21336-1258812416_thumb.png

الدرس مرفق

L6.rar

للتعليق على هذا الدرس أرجو اتباع هذا الرابط : http://www.urorbit-tools.com/?forum=1&show_thread=47

تم تعديل بواسطه bastr3
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

مشكور اخي علي الشرح و في انتظار بقيت الشروحات

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

السلام عليكم اخي جزاك الله خير انا مبتدىء واعجبني الدرس مرره روعه

ياليت تشرح لي هذه الاوامر اللي بالاقتباس

<link rel="stylesheet" href="css/style.css" type="text/css"/>
1

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

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

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

أخي اللي اقصده مثلاً انت اسخدمت الامر

rel="stylesheet"

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

يعني مثلا انا فهمت منك ان الامر herf="css/style.css"

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

rel="stylesheet"

تكفى اخوي والله ان دعيت لك من قلبي بالتوفيق

ساعدني وش معنى الكام ذا

rel="stylesheet"
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

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

لا تتصور أخي الكريم bastr3 مقدار ما تعلمته في نصف ساعة من قراءة هذا الدرس الرائع!

كتب الله لك به صدقة جارية و جعله في ميزان حسناتك

بالتوفيق و ننتظر المزيد :)

تم تعديل بواسطه محمد رضى
إزالة <br>
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

  • يستعرض القسم حالياً   0 members

    لا يوجد أعضاء مسجلين يشاهدون هذه الصفحة .