سجل في المعهد لتفعيل روابط التحميل

للتسجيل اضغط على الزر التسجيل
ندعم منتديات vBulletin بتقنية Css3
A L 6 W E R
   [ 1 ]
26-01-2011, 12:18 AM
تابعني على facebook
تابعني على twitter
تابعني على google plus
تابعني على youtube
معهد المطوّر
1
تواصل معي مباشرة
الصورة الرمزية لـ AlM6weR
AlM6weR
متواجد
[ مؤسس معهد المطوّر ]

اسمي : فخري الحاتم - أبو محمد , من : الرياض , أهتم بـ البرمجة - تطوير المواقع .
عضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركة
تاريخ الإنضمام07-06-2010 عدد المشاركات7,902 تقييم المستوى17920 الدولةsaudi arabia
الإعجابات التي قدمها للأعضاء 289   تم شكره 749 مرة في 570 مشاركة
افتراضي دورة تصميم ستايل بتقنية css الجزء الثالث





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

السلام عليكم ورحمة الله وبركاتة
الجزء الثالث من تصميم ستايل بتقنية css الحديثة , كما قلت
ان تصميم ستايل بتقنية css هي طريقة لاخراج موقعك من " المواقع القديمة الطراز " ..الى موقع حديث الطراز .




- انصح الجميع بالعودة الى الجزء الاول والثاني , لكي يستوعب الجزء الثالث بكل دقة .


درسنا اليوم هو تكملة للستايل وتطاير الأطار ..مع بعض التعديلات الأخرى ان شاء الله


الحين قم بفتح برنامج Microsoft Expression Web 2 او الدريم ويفر


-- ونتوجهه الى code سنجد كود جاهز في البرنامج
ريد الزيادة علية ونكتب هذا الوسم لاحظ الصور






طبعا كتبنا بين الوسم <title>yousefthawabh</title>
والوسم </head> هذا الوسم <style type="text/css"> </style>
ولاحظ ان البرنامج يساعدنا بشكل تلقائي في كتابة الكلمات ,
نكمل كتابة الكود .






ثم نختار text/css





ونختمها بالقوس او الاشارة التالية <



الوسم </style> سيضاف بشكل تلقائي بعد كتابة الاشارة >



الحين الكود اصبح جاهز في البرنامج


قلنا سلفا ان الكود في البرنامج مقسم الى قسمين [ الاول للاكواد ويوضع لاحقا في التصاريف css [ والجزء الثاني للاكلاسات ] ويكتب داخل الجسم body


لاحظ اين سنكتب كود التصاريف .






الحين نقوم بكتابة الاكواد [1] حق الكلاسات اولا [2] حق التصاريف css


واتمنى مراجعة الجزء الاول لان شرح الخطوات الاولى فيه


- احنا عندنا في مجلد الستايل 6 سته صور للأطار --- وفي هذا الجزء اعطينا المتغيرات التالية


المتغير a يعني الصور 1-2-3 الصور الثلاث العلوية للاطار
المتغير b يعني الصور 1-2-3 الصور الثلاث السفلية للاطار
المتغير d وهو حدود + خلفية الاطار


لاحظ الكود جاهز بعد كتابة الأكواد كاملة المثال التالي ..





- ألحين اكيد فهمت الكود كامل ... لاني شرحت الكود في الجزء الاول


الوسم في الكلاسات الى هو

كود PHP:

[FONT=Simplified Arabic Fixed]<div class="d1"[FONT=Simplified Arabic Fixed]>






كود PHP:

[FONT=Simplified Arabic Fixed]<div class="d2"> <div class="d3"[FONT=Simplified Arabic Fixed]>


[FONT=Simplified Arabic Fixed]</div[FONT=Simplified Arabic Fixed]>


[FONT=Simplified Arabic Fixed]</div[FONT=Simplified Arabic Fixed]>


[FONT=Simplified Arabic Fixed]</div[FONT=Simplified Arabic Fixed]>







لاحظ الdiv تكون تحت الوسم وليس بجانبة كما في الوسوم الاخرى .. هذة للحدود والخلفية للمتغير d



هكذا - يصبح الكود جاهز حق الاطار .. العملية سهلة ولاتحتاج لحجهد كبير



- الحين سنقوم بعمل اختبار للأطار لنعرف ان التطاير للفورم هوم والنافبار وغيرها بانة داخل حدود الستايل



- ملاحظة في الجزء الاول للكود اي في التصاريف لانكتب الأ المتغير d1 فقط كما في الكود السابق



- الطريقة نقوم بكتابة <p>sampl11111111111</p> هذا الكود البسيط الى بالون الاحمر اكتب اي شيء وليكن عينة samplll وتتم الكتابة بين وسم الحدود والخلفية بالشكل التالي :
















لاحظ الان نتيجة الكود وكيف هو خارج حدود الأطار








كيف نقوم بمعالجة الأمر ... سهل جدا بسيطة نروح للمتغير d1 الى هو كود التصاريف للحدود والخلفية الكود1 d
















الحين نروح الى المعاينة ونشوف








للمعلومة .. فقط ..










الأن نعمل جديد للبرنامج ونروح الموقع او المنتدى ونجيب " قالب النافبار " navbar
من الستايل الى سويناه .. ونحطة في البرنامج ومن البرنامج نروح الى design ونظلل الكود كما في المثال لكي عرف التطاير للقالب .








الحين بعد تظليل الكود وهو في design نرجع الى code











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



- بعد قص كود النافبار نقوم بأدراجة داخل





ثم نقوم بنسخ كود الاطار مع النافبار ولكن فقط من بداية الكلاسات body الى اخر body
يعني لنوضح بصورة اكثر





ونقوم بارجاعة الى كود النافبار





الأن انتهينا من قالب النافبار
نروح نضيفة في المنتدى
+
ننسخ كود التصاريف css








ونهايتة هنا





في تصاريف الستايل css ..





- الأن نعمل معاينة للمنتدى بعد اضافة كود التصاريف وتطاير النافبار والنتيجة....








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








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









الحين نروح نعاين المنتدى ونشوف وش سار بالنافبار









100% هذا هو الاطار وتطاير النافبار



وكذالك الحال مع بقية القوالب



لناخذ صورة مع الهيدر





ممتاز الى الأن



بى الحين الفروم هوم ...وباقي القوالب الاخرى



نروح نحصل القالب حق الفورم هوم من المنتدى










كيف نعرف التطاير في الفروم هوم
نضع اشاره الماوس بين الرقمين 6 هناا 5
ونضغط على الزر الي فوق كما في الصورة
سيقوم البرنامج بتظليل الكود













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



نضغط عى الصورة لمعرفة تطاير الاحصائيات












وهذ البداية والنهاية لة












نضعه في كلاسات كود الاطار ثم نعيدة الى مكانة في كود قالب الاحصائيات في الفروم هوم



وثم بعد ذالك نضعة في المنتدى بعد التطاير ...





والنتيجة ....










وايضا الاحصائيات







- الى الأن ممتاز جدا فري نايس
الحين نقوم بأدراج 4 مجلدات للاستايل بعد التعديل عليها بالون المناسب للستايل




وهي كالمثال التالي : قمت بتلوين الصور بما يناسب الستايل












نروح الى css الرئيسية للستايل ونغير مسار بعض الصور الى اسم الستايل
بدل كلمة images نضع اسم الستايل









وباقي الاكواد ايضا نقوم بتغييرها وهي تقريبا 4 .



ايضا نتوجهه الى





ونقوم بتغيير بعض الاسماء الى اسم الستايل كما في المثال التالي










----------- والنتيجة للاستايل --------










---------------- بقي الخطوط المتوافقة ---------------



من








سنقوم بتغيير الخطوط لتتوافق مع التصفحات .







من : خلفية المنتدى/Body





شكل الخط :


حجم الخط : 10pt
نوع الخط : tahoma, arial, helvetica,verdana




-----------------------------------------------------------------------



من : <td>, <th>, <p>, <li



شكل الخط : bold
حجم الخط : 12pt
نوع الخط : arial,verdana,helvetica,sans-serif




-----------------------------------------------------------------------
من : الأقسام الرئيسية/Category Strips




شكل الخط : bold
حجم الخط : 8pt
نوع الخط : tahoma, arial, helvetica,verdana




-----------------------------------------------------------------------
من : رأس الجدول/Table Header




شكل الخط : bold
حجم الخط : 11px
نوع الخط : tahoma, arial, helvetica,verdana




-----------------------------------------------------------------------
من : نهاية الجدول/Table Footer




شكل الخط :
حجم الخط : 8pt
نوع الخط : tahoma, arial, helvetica,verdana




-----------------------------------------------------------------------
من : لون التوزيع الأول/First Alternating Color




شكل الخط : bold
حجم الخط : 12pt
نوع الخط : arial, helvetica,verdana




-----------------------------------------------------------------------
من : محرر WYSIWYG (يجب أن يكون عادةً متماثل مع 'لون التوزيع الأول/First Alternating Color' أو 'خلفية الكتابة/Input Fields')




شكل الخط : Bold
حجم الخط : 12pt
نوع الخط : arial,verdana,helvetica,sans-serif




-----------------------------------------------------------------------
من : خلفية الكتابة/Input Fields




شكل الخط :
حجم الخط : 10pt
نوع الخط : Tahoma,Arial




-----------------------------------------------------------------------
من : الأزرار/Buttons




شكل الخط :
حجم الخط : 12px
نوع الخط : Tahoma,Verdana,Arial,Helvetica,sans-serif




-----------------------------------------------------------------------
من : قوائم <select>




شكل الخط :
حجم الخط : 8pt
نوع الخط : tahoma




-----------------------------------------------------------------------
من : الخط الصغير




شكل الخط :
حجم الخط : 11px
نوع الخط : tahoma, arial, helvetica,verdana




-----------------------------------------------------------------------
من : لون الوقت




شكل الخط :
حجم الخط : 11px
نوع الخط : tahoma, arial, helvetica,verdana




-----------------------------------------------------------------------
من : نص شريط العنوان/Navbar ****




شكل الخط :
حجم الخط : 8pt
نوع الخط : tahoma




-----------------------------------------------------------------------
من : <legend>




شكل الخط :
حجم الخط : 8pt
نوع الخط : tahoma




-----------------------------------------------------------------------
من : التحكم بالقوائم المنبثقة/Popup Menu Controls




شكل الخط :bold
حجم الخط : 11px
نوع الخط : tahoma, arial, helvetica,verdana




-----------------------------------------------------------------------



من : خيار صف قائمة الإنبثاق/Popup Menu Option Row



شكل الخط : bold
حجم الخط : 11px
نوع الخط : tahoma, arial, helvetica,verdanaf




-----------------------------------------------------------------------



من : خيار سطوع القوائم المنبثقة/Popup Menu Highlighted Option



شكل الخط :bold
حجم الخط : 8pt





نوع الخط : tahoma, arial, helvetica,verdana













--- وتلوين باقي الاكودا في css الرئيسية حسب لون ستايلك



......................................هكذا انتهينا من الستايل ............



نصائح مهمة لجعل الاستايل خالي من الأخطاء وفق المعايير القياسية .



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




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





منقول للإستفاده




كلمات البحث - معهد المطور

ارشفة, ستايل, كود, هاك, html, css, java, BBcode, seo, php, JavaScript, Product, Style




توقيعي



عَنْ جُوَيْرِيَةَ بنت الحارث، أم المؤمنين رضي الله عنها؛ أَنَّ النَّبِيَّ صلى الله عليه وسلم خَرَجَ مِنْ عِنْدِهَا بُكْرَةً، حِينَ صَلَّى الصُّبْحَ وَهِيَ فِي مَسْجِدِهَا، ثُمَّ رَجَعَ بَعْدَ أَنْ أَضْحَى، وَهِيَ جَالِسَةٌ، فَقَالَ:
((مَا زِلْتِ عَلَى الْحَالِ الَّتِي فَارَقْتُكِ عَلَيْهَا؟)) قَالَتْ: نَعَمْ، قَالَ النَّبِيُّ صلى الله عليه وسلم: ((لَقَدْ قُلْتُ بَعْدَكِ أَرْبَعَ كَلِمَاتٍ، ثَلَاثَ مَرَّاتٍ، لَوْ وُزِنَتْ بِمَا قُلْتِ مُنْذُ الْيَوْمِ لَوَزَنَتْهُنَّ:
سُبْحَانَ اللهِ وَبِحَمْدِهِ عَدَدَ خَلْقِهِ، وَرِضَا نَفْسِهِ وَزِنَةَ عَرْشِهِ، وَمِدَادَ كَلِمَاتِهِ)).



   [ 2 ]
11-03-2013, 01:05 PM
5280
عضو معهد المطور
ندعم جميع منتديات
الجيل الثالث بتقنية CSS3
ملك الحصريات
غير متواجد
[ مطوّر مشارك ]

عضو لدية أكثر من 1500 مشاركةعضو لدية أكثر من 1500 مشاركةعضو لدية أكثر من 1500 مشاركةعضو لدية أكثر من 1500 مشاركةعضو لدية أكثر من 1500 مشاركة
تاريخ الإنضمام25-02-2013 عدد المشاركات1,544 تقييم المستوى1561 الدولةegypt
الإعجابات التي قدمها للأعضاء 193   تم شكره 3 مرة في 3 مشاركة
افتراضي رد: دورة تصميم ستايل بتقنية css الجزء الثالث


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





مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)
الثالث, الجزء, css, بتقنية, تصميم, دورة, ستايل

أدوات الموضوع إبحث في الموضوع
إبحث في الموضوع:

البحث المتقدم


المواضيع المتشابهه للموضوع: دورة تصميم ستايل بتقنية css الجزء الثالث
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
[ شرح ] دورة تصميم ستايل بتقنية css الجزء الاول AlM6weR ستايلات vBulletin 3.8.x 9 25-04-2017 03:50 PM
[ شرح ] دورة تصميم ستايل بتقنية css الجزء الثاني AlM6weR ستايلات vBulletin 3.8.x 4 11-03-2013 01:08 PM
[ Style ] ستايل ترايدنت 2011 باللون الاسود بتقنية css - تصميم شبكة المطور AlM6weR ستايلات vBulletin 3.8.x 8 21-08-2011 07:45 PM
[ Style ] ستايل برتقالي إحترافي بتقنية Css - للنسخ 3.8 - ستايل ممتدد الشامخه ستايلات vBulletin 3.8.x 2 17-01-2011 01:57 PM
إعلان موعد بدأ دورة تصميم الوسائط.. جنونيات حالمه البرامج العامه والشروحات 12 06-09-2010 08:45 PM


الساعة الآن 01:34 PM

RSS RSS 2.0 XML Sitemap1 Sitemap2 HTML Tags اتصل بنا بيان الخصوصية

Powered by vBulletin@Version 3.8.7 .Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
المشاركات والمواضيع تعبر عن رأي كاتبها وليس بالضرورة رأي المطوّر
وجميع الحقوق محفوظة لاصحابها