Chakira
10-30-2013, بتوقيت غرينيتش 08:48 PM
http://www.dzbatna.com/images/icons/icon26.gif طھطµظ…ظٹظ… ط³طھط§ظٹظ„ ط¨طھظ‚ظ†ظٹط© css ط§ظ„ط¬ط²ط، ط§ظ„ط«ط§ظ„ط« 3[ ظ„ط§ظٹظپظˆطھظƒظ… ] (http://www.dzbatna.com/t1678220/)
http://upload.dzbatna.net/upfiles/GOI01744.gif
.. لاتشغل بالك ...
واجعل الفرح شكرأ , والحزن صبرأ ,والصمت فكرأ , والنطق ذكرأ
.. لاتشغل فكرك ..
فربما ساءتك اوائل الامور .. وسرك أخره ..كالسحاب اوله رعد وبرق وأخره غيث هنيء بأذن الله
..واستغفر , فان الاستغفار يفتح الاقفال , ويشرح طريقة البال ,
ولاتنسى .. حسبنا الله ونعم الوكيل ..فأنها تطفيء الحريق , وينجوا منها الغريق ,
وتعرف بها الطريق , وتدخل بها على الملوك والسلاطين بكل ثقة وأمان ..وتوكل على الله الحي القيوم
,فمن يتوكل على الله فهو حسبة , وكفانا بالله حسيبا .
http://upload.dzbatna.net/upfiles/qvy78088.gif
السلام عليكم ورحمة الله وبركاتة
الجزء الثالث من تصميم ستايل style بتقنية css الحديثة , كما قلت
ان تصميم ستايل style بتقنية css هي طريقة لاخراج موقعك من " المواقع القديمة الطراز " ..الى موقع حديث الطراز .
[1]
- للعودة الى الجزء الأول .. فضلا -->> اضغط هنااا (http://www.dzbatna.com/t1672527/)
[2]
- للعودة الى الجزء الثاني .. تفضل اضغط هووون (http://www.dzbatna.com/t1673566/)
[ او]
- كما ويوجد كتاب في المرفق للشرح طريقة بصيغة pdf
لمن لاتظهر عندهم الصور بالمستقبل
-
كما ونصحوني بأن ارفع الصور على مركز ترايد نت لضمان بقأءه , والصور في هذا الجزء مرفوعة على مركز ترايد نت , لبقاءها اكبر وقت ممكن ... سبحان الله الباقي وحدة لا اله لا هو.
- انصح الجميع بالعودة الى الجزء الاول والثاني , لكي يستوعب الجزء الثالث بكل دقة .
درس مفصلنا اليوم هو تكملة للستايل style وتطاير الأطار ..مع بعض التعديلات الأخرى ان شاء الله
الحين قم بفتح برنامج Microsoft Expression Web 2 او الدريم ويفر
-- ونتوجهه الى code سنجد كود code جاهز في البرنامج
ريد الزيادة علية ونكتب هذا الوسم لاحظ الصور
http://upload.dzbatna.net/upfiles/MbB32427.gif
طبعا كتبنا بين الوسم <title>yousefthawabh</title>
والوسم </head> هذا الوسم <style type="text/css"> </style>
ولاحظ ان البرنامج يساعدنا بشكل تلقائي في كتابة الكلمات ,
نكمل كتابة الكود code .
http://upload.dzbatna.net/upfiles/Rk833612.gif
ثم نختار text/css
http://upload.dzbatna.net/upfiles/Ks833663.gif
ونختمها بالقوس او الاشارة التالية <
http://upload.dzbatna.net/upfiles/J4m33743.gif
الوسم </style> سيضاف بشكل تلقائي بعد كتابة الاشارة >
الحين الكود code اصبح جاهز في البرنامج
قلنا سلفا ان الكود code في البرنامج مقسم الى قسمين [ الاول للاكواد ويوضع لاحقا في التصاريف css [ والجزء الثاني للاكلاسات ] ويكتب داخل الجسم body
لاحظ اين سنكتب كود code التصاريف .
http://upload.dzbatna.net/upfiles/1x433816.gif
الحين نقوم بكتابة الاكواد [1] حق الكلاسات اولا [2] حق التصاريف css
واتمنى مراجعة الجزء الاول لان شرح طريقة الخطوات الاولى فيه
- احنا عندنا في مجلد الستايل style 6 سته صور للأطار --- وفي هذا الجزء اعطينا المتغيرات التالية
المتغير a يعني الصور 1-2-3 الصور الثلاث العلوية للاطار
المتغير b يعني الصور 1-2-3 الصور الثلاث السفلية للاطار
المتغير d وهو حدود + خلفية الاطار
لاحظ الكود code جاهز بعد كتابة الأكواد كاملة المثال التالي ..
http://upload.dzbatna.net/upfiles/bmt34240.gif
- ألحين اكيد فهمت الكود code كامل ... لاني شرح طريقةت الكود code في الجزء الاول
الوسم في الكلاسات الى هو
اقتباس
<div class="d1">
اقتباس
<div class="d2">
<div class="d3">
</div>
</div>
</div>
لاحظ الdiv تكون تحت الوسم وليس بجانبة كما في الوسوم الاخرى .. هذة للحدود والخلفية للمتغير d
هكذا - يصبح الكود code جاهز حق الاطار .. العملية سهلة ولاتحتاج لحجهد كبير
- الحين سنقوم بعمل اختبار للأطار لنعرف ان التطاير للفورم هوم والنافبار وغيرها بانة داخل حدود الستايل style
- ملاحظة في الجزء الاول للكود code اي في التصاريف لانكتب الأ المتغير d1 فقط كما في الكود code السابق
- الطريقة نقوم بكتابة <p>sampl11111111111</p> هذا الكود code البسيط الى بالون الاحمر اكتب اي شيء وليكن عينة samplll وتتم الكتابة بين وسم الحدود والخلفية بالشكل التالي :
http://upload.dzbatna.net/upfiles/PQU34556.gif
http://upload.dzbatna.net/upfiles/YTx34819.gif
http://upload.dzbatna.net/upfiles/sqd34843.gif
لاحظ الان نتيجة الكود code وكيف هو خارج حدود الأطار
http://upload.dzbatna.net/upfiles/dgx34964.gif
كيف نقوم بمعالجة الأمر ... سهل جدا بسيطة نروح للمتغير d1 الى هو كود code التصاريف للحدود والخلفية الكود code1 d
http://upload.dzbatna.net/upfiles/IvG34873.gif
http://upload.dzbatna.net/upfiles/xOu34928.gif
الحين نروح الى المعاينة ونشوف
http://upload.dzbatna.net/upfiles/rhv35210.gif
للمعلومة .. فقط ..
http://upload.dzbatna.net/upfiles/RE235273.gif
http://upload.dzbatna.net/upfiles/6Zz35308.gif
الأن نعمل جديد للبرنامج ونروح الموقع او المنتدى forum ونجيب " قالب template النافبار " navbar
من الستايل style الى سويناه .. ونحطة في البرنامج ومن البرنامج نروح الى design ونظلل الكود code كما في المثال لكي عرف التطاير للقالب template .
http://upload.dzbatna.net/upfiles/D6R35337.gif
الحين بعد تظليل الكود code وهو في design نرجع الى code
http://upload.dzbatna.net/upfiles/wU835483.gif
http://upload.dzbatna.net/upfiles/Sn235534.gif
لاحظت المثال السابق ان الكود code حق النافبار هذا سنقوم بقصة وادراجة داخل كلاسات كود code الأطار الي عملناه سابقا
- بعد قص كود code النافبار نقوم بأدراجة داخل
http://upload.dzbatna.net/upfiles/nFh35767.gif
ثم نقوم بنسخ كود code الاطار مع النافبار ولكن فقط من بداية الكلاسات body الى اخر body
يعني لنوضح بصورة اكثر
http://upload.dzbatna.net/upfiles/rFx35927.gif
ونقوم بارجاعة الى كود code النافبار
http://upload.dzbatna.net/upfiles/HpK36136.gif
الأن انتهينا من قالب template النافبار
نروح نضيفة في المنتدى forum
+
ننسخ كود code التصاريف css
http://upload.dzbatna.net/upfiles/k1236309.gif
ونهايتة هنا
http://upload.dzbatna.net/upfiles/amv36344.gif
في تصاريف الستايل style css ..
- الأن نعمل معاينة للمنتدى بعد اضافة كود code التصاريف وتطاير النافبار والنتيجة....
http://upload.dzbatna.net/upfiles/3Bn36407.gif
نقوم بتعديل لون الخلفية كما اخترتها في الكود code + تصفير خواص اس سي سي الاضافية
http://upload.dzbatna.net/upfiles/EPq36472.gif
والحين باقي الحدود للاطار لكي يكون متناسق مع النافبار
وكما قلت هذة الاضافة اختيارية وليست اجبارية
http://upload.dzbatna.net/upfiles/7Q936552.gif
الحين نروح نعاين المنتدى forum ونشوف وش سار بالنافبار
http://upload.dzbatna.net/upfiles/kkn36619.gif
100% هذا هو الاطار وتطاير النافبار
وكذالك الحال مع بقية القوالب
لناخذ صورة مع الهيدر header
http://upload.dzbatna.net/upfiles/3fJ36709.gif
ممتاز الى الأن
بى الحين الفروم هوم ...وباقي القوالب الاخرى
نروح نحصل القالب template حق الفورم هوم من المنتدى forum
http://upload.dzbatna.net/upfiles/aXK36777.gif
http://upload.dzbatna.net/upfiles/k4X36823.gif
كيف نعرف التطاير في الفروم هوم
نضع اشاره الماوس بين الرقمين 6 هناا 5
ونضغط على الزر الي فوق كما في الصورة
سيقوم البرنامج بتظليل الكود code
http://upload.dzbatna.net/upfiles/Pil36853.gif
http://upload.dzbatna.net/upfiles/sab36947.gif
نقص كود code الفورم هو المشار الية في المثال التالي ونضعة في كلاسات الاطار ثم نعيدة الى كود code الفورم هوم مرة اخرى والحين الاحصائيات نفس السلافة
نضغط عى الصورة لمعرفة تطاير الاحصائيات
http://upload.dzbatna.net/upfiles/1Dk37057.gif
http://upload.dzbatna.net/upfiles/bGE37110.gif
وهذ البداية والنهاية لة
http://upload.dzbatna.net/upfiles/IPi37154.gif
http://upload.dzbatna.net/upfiles/r3h37182.gif
نضعه في كلاسات كود code الاطار ثم نعيدة الى مكانة في كود code قالب template الاحصائيات في الفروم هوم
وثم بعد ذالك نضعة في المنتدى forum بعد التطاير ...
والنتيجة ....
http://upload.dzbatna.net/upfiles/s6437278.gif
وايضا الاحصائيات
http://upload.dzbatna.net/upfiles/ajb37335.gif
- الى الأن ممتاز جدا فري نايس
الحين نقوم بأدراج 4 مجلدات للاستايل style بعد التعديل عليها بالون المناسب للستايل style
وهي كالمثال التالي : قمت بتلوين الصور بما يناسب الستايل style
http://upload.dzbatna.net/upfiles/sLT37427.gif
http://upload.dzbatna.net/upfiles/y1c37699.gif
نروح الى css الرئيسية للستايل style ونغير مسار بعض الصور الى اسم الستايل style
بدل كلمة images نضع اسم الستايل style
http://upload.dzbatna.net/upfiles/ols37482.gif
وباقي الاكواد ايضا نقوم بتغييرها وهي تقريبا 4 .
ايضا نتوجهه الى
http://upload.dzbatna.net/upfiles/owx37603.gif
ونقوم بتغيير بعض الاسماء الى اسم الستايل style كما في المثال التالي
http://upload.dzbatna.net/upfiles/VV337652.gif
----------- والنتيجة للاستايل style --------
http://upload.dzbatna.net/upfiles/NDX37743.gif
---------------- بقي الخطوط المتوافقة ---------------
من
http://upload.dzbatna.net/upfiles/y1c37699.gif
سنقوم بتغيير الخطوط لتتوافق مع التصفحات .
اقتباس
من : خلفية المنتدى forum/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
--- وتلوين باقي الاكود codeا في css الرئيسية حسب لون ستايل styleك
......................................هكذا انتهينا من الستايل style ............
نصائح مهمة لجعل الاستايل style خالي من الأخطاء وفق المعايير القياسية .
- الهاك productات : وخاصة اغير متوافقة مع نسخة موقعك
- التنسيقات التجميلية للمنتدى
- اكواد اضافية مثل الاعلانات وغيرها
- تلوين الاقسام او المجموعات
- اضافة نبرات اعلانية غير منسقة
.. الخ
وهذا كلة له حلوول واكواد خاصة بة
يعني اي شخص يبحث عن الافضل لموقعة , ماهو ظروري يحط اي كود code او هاك product لموقعة
ويملاؤه بالاكواد التي ليس لها داعي ..
- وفي الختام اسأل الله تعالى الثبات على دينة وعلى سنة رسولة الكريم لي ولكم
وان يرحمنا جميعا ويحم والدينا ويشفي مرضانا ومرضى المسلمين
- بأذن الله في الدروس المقبلة سيكون الشرح طريقة بالفيديو تبعا لرغبة بعض الاخوة الافاضل
مع احترامي للجميع ومتمنيا التوفيق لهم
بارك الله فيكم وشكرا لحسن متابعتكم
اخوكم يوسف
http://upload.dzbatna.net/upfiles/qvy78088.gif
---THE END --
[/CENTER]
التعديل الأخير كان بواسطة يوسف ابوذوابة; 23 - 09 - 2014 الساعة 13:52
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif book3style-css.zip (http://www.traidnt.net/vb/attachments/519719d1285238881-book3style-css.zip) (613.4 كيلوبايت, عدد مرات المشاهدة 2204 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
http://upload.dzbatna.net/upfiles/GOI01744.gif
.. لاتشغل بالك ...
واجعل الفرح شكرأ , والحزن صبرأ ,والصمت فكرأ , والنطق ذكرأ
.. لاتشغل فكرك ..
فربما ساءتك اوائل الامور .. وسرك أخره ..كالسحاب اوله رعد وبرق وأخره غيث هنيء بأذن الله
..واستغفر , فان الاستغفار يفتح الاقفال , ويشرح طريقة البال ,
ولاتنسى .. حسبنا الله ونعم الوكيل ..فأنها تطفيء الحريق , وينجوا منها الغريق ,
وتعرف بها الطريق , وتدخل بها على الملوك والسلاطين بكل ثقة وأمان ..وتوكل على الله الحي القيوم
,فمن يتوكل على الله فهو حسبة , وكفانا بالله حسيبا .
http://upload.dzbatna.net/upfiles/qvy78088.gif
السلام عليكم ورحمة الله وبركاتة
الجزء الثالث من تصميم ستايل style بتقنية css الحديثة , كما قلت
ان تصميم ستايل style بتقنية css هي طريقة لاخراج موقعك من " المواقع القديمة الطراز " ..الى موقع حديث الطراز .
[1]
- للعودة الى الجزء الأول .. فضلا -->> اضغط هنااا (http://www.dzbatna.com/t1672527/)
[2]
- للعودة الى الجزء الثاني .. تفضل اضغط هووون (http://www.dzbatna.com/t1673566/)
[ او]
- كما ويوجد كتاب في المرفق للشرح طريقة بصيغة pdf
لمن لاتظهر عندهم الصور بالمستقبل
-
كما ونصحوني بأن ارفع الصور على مركز ترايد نت لضمان بقأءه , والصور في هذا الجزء مرفوعة على مركز ترايد نت , لبقاءها اكبر وقت ممكن ... سبحان الله الباقي وحدة لا اله لا هو.
- انصح الجميع بالعودة الى الجزء الاول والثاني , لكي يستوعب الجزء الثالث بكل دقة .
درس مفصلنا اليوم هو تكملة للستايل style وتطاير الأطار ..مع بعض التعديلات الأخرى ان شاء الله
الحين قم بفتح برنامج Microsoft Expression Web 2 او الدريم ويفر
-- ونتوجهه الى code سنجد كود code جاهز في البرنامج
ريد الزيادة علية ونكتب هذا الوسم لاحظ الصور
http://upload.dzbatna.net/upfiles/MbB32427.gif
طبعا كتبنا بين الوسم <title>yousefthawabh</title>
والوسم </head> هذا الوسم <style type="text/css"> </style>
ولاحظ ان البرنامج يساعدنا بشكل تلقائي في كتابة الكلمات ,
نكمل كتابة الكود code .
http://upload.dzbatna.net/upfiles/Rk833612.gif
ثم نختار text/css
http://upload.dzbatna.net/upfiles/Ks833663.gif
ونختمها بالقوس او الاشارة التالية <
http://upload.dzbatna.net/upfiles/J4m33743.gif
الوسم </style> سيضاف بشكل تلقائي بعد كتابة الاشارة >
الحين الكود code اصبح جاهز في البرنامج
قلنا سلفا ان الكود code في البرنامج مقسم الى قسمين [ الاول للاكواد ويوضع لاحقا في التصاريف css [ والجزء الثاني للاكلاسات ] ويكتب داخل الجسم body
لاحظ اين سنكتب كود code التصاريف .
http://upload.dzbatna.net/upfiles/1x433816.gif
الحين نقوم بكتابة الاكواد [1] حق الكلاسات اولا [2] حق التصاريف css
واتمنى مراجعة الجزء الاول لان شرح طريقة الخطوات الاولى فيه
- احنا عندنا في مجلد الستايل style 6 سته صور للأطار --- وفي هذا الجزء اعطينا المتغيرات التالية
المتغير a يعني الصور 1-2-3 الصور الثلاث العلوية للاطار
المتغير b يعني الصور 1-2-3 الصور الثلاث السفلية للاطار
المتغير d وهو حدود + خلفية الاطار
لاحظ الكود code جاهز بعد كتابة الأكواد كاملة المثال التالي ..
http://upload.dzbatna.net/upfiles/bmt34240.gif
- ألحين اكيد فهمت الكود code كامل ... لاني شرح طريقةت الكود code في الجزء الاول
الوسم في الكلاسات الى هو
اقتباس
<div class="d1">
اقتباس
<div class="d2">
<div class="d3">
</div>
</div>
</div>
لاحظ الdiv تكون تحت الوسم وليس بجانبة كما في الوسوم الاخرى .. هذة للحدود والخلفية للمتغير d
هكذا - يصبح الكود code جاهز حق الاطار .. العملية سهلة ولاتحتاج لحجهد كبير
- الحين سنقوم بعمل اختبار للأطار لنعرف ان التطاير للفورم هوم والنافبار وغيرها بانة داخل حدود الستايل style
- ملاحظة في الجزء الاول للكود code اي في التصاريف لانكتب الأ المتغير d1 فقط كما في الكود code السابق
- الطريقة نقوم بكتابة <p>sampl11111111111</p> هذا الكود code البسيط الى بالون الاحمر اكتب اي شيء وليكن عينة samplll وتتم الكتابة بين وسم الحدود والخلفية بالشكل التالي :
http://upload.dzbatna.net/upfiles/PQU34556.gif
http://upload.dzbatna.net/upfiles/YTx34819.gif
http://upload.dzbatna.net/upfiles/sqd34843.gif
لاحظ الان نتيجة الكود code وكيف هو خارج حدود الأطار
http://upload.dzbatna.net/upfiles/dgx34964.gif
كيف نقوم بمعالجة الأمر ... سهل جدا بسيطة نروح للمتغير d1 الى هو كود code التصاريف للحدود والخلفية الكود code1 d
http://upload.dzbatna.net/upfiles/IvG34873.gif
http://upload.dzbatna.net/upfiles/xOu34928.gif
الحين نروح الى المعاينة ونشوف
http://upload.dzbatna.net/upfiles/rhv35210.gif
للمعلومة .. فقط ..
http://upload.dzbatna.net/upfiles/RE235273.gif
http://upload.dzbatna.net/upfiles/6Zz35308.gif
الأن نعمل جديد للبرنامج ونروح الموقع او المنتدى forum ونجيب " قالب template النافبار " navbar
من الستايل style الى سويناه .. ونحطة في البرنامج ومن البرنامج نروح الى design ونظلل الكود code كما في المثال لكي عرف التطاير للقالب template .
http://upload.dzbatna.net/upfiles/D6R35337.gif
الحين بعد تظليل الكود code وهو في design نرجع الى code
http://upload.dzbatna.net/upfiles/wU835483.gif
http://upload.dzbatna.net/upfiles/Sn235534.gif
لاحظت المثال السابق ان الكود code حق النافبار هذا سنقوم بقصة وادراجة داخل كلاسات كود code الأطار الي عملناه سابقا
- بعد قص كود code النافبار نقوم بأدراجة داخل
http://upload.dzbatna.net/upfiles/nFh35767.gif
ثم نقوم بنسخ كود code الاطار مع النافبار ولكن فقط من بداية الكلاسات body الى اخر body
يعني لنوضح بصورة اكثر
http://upload.dzbatna.net/upfiles/rFx35927.gif
ونقوم بارجاعة الى كود code النافبار
http://upload.dzbatna.net/upfiles/HpK36136.gif
الأن انتهينا من قالب template النافبار
نروح نضيفة في المنتدى forum
+
ننسخ كود code التصاريف css
http://upload.dzbatna.net/upfiles/k1236309.gif
ونهايتة هنا
http://upload.dzbatna.net/upfiles/amv36344.gif
في تصاريف الستايل style css ..
- الأن نعمل معاينة للمنتدى بعد اضافة كود code التصاريف وتطاير النافبار والنتيجة....
http://upload.dzbatna.net/upfiles/3Bn36407.gif
نقوم بتعديل لون الخلفية كما اخترتها في الكود code + تصفير خواص اس سي سي الاضافية
http://upload.dzbatna.net/upfiles/EPq36472.gif
والحين باقي الحدود للاطار لكي يكون متناسق مع النافبار
وكما قلت هذة الاضافة اختيارية وليست اجبارية
http://upload.dzbatna.net/upfiles/7Q936552.gif
الحين نروح نعاين المنتدى forum ونشوف وش سار بالنافبار
http://upload.dzbatna.net/upfiles/kkn36619.gif
100% هذا هو الاطار وتطاير النافبار
وكذالك الحال مع بقية القوالب
لناخذ صورة مع الهيدر header
http://upload.dzbatna.net/upfiles/3fJ36709.gif
ممتاز الى الأن
بى الحين الفروم هوم ...وباقي القوالب الاخرى
نروح نحصل القالب template حق الفورم هوم من المنتدى forum
http://upload.dzbatna.net/upfiles/aXK36777.gif
http://upload.dzbatna.net/upfiles/k4X36823.gif
كيف نعرف التطاير في الفروم هوم
نضع اشاره الماوس بين الرقمين 6 هناا 5
ونضغط على الزر الي فوق كما في الصورة
سيقوم البرنامج بتظليل الكود code
http://upload.dzbatna.net/upfiles/Pil36853.gif
http://upload.dzbatna.net/upfiles/sab36947.gif
نقص كود code الفورم هو المشار الية في المثال التالي ونضعة في كلاسات الاطار ثم نعيدة الى كود code الفورم هوم مرة اخرى والحين الاحصائيات نفس السلافة
نضغط عى الصورة لمعرفة تطاير الاحصائيات
http://upload.dzbatna.net/upfiles/1Dk37057.gif
http://upload.dzbatna.net/upfiles/bGE37110.gif
وهذ البداية والنهاية لة
http://upload.dzbatna.net/upfiles/IPi37154.gif
http://upload.dzbatna.net/upfiles/r3h37182.gif
نضعه في كلاسات كود code الاطار ثم نعيدة الى مكانة في كود code قالب template الاحصائيات في الفروم هوم
وثم بعد ذالك نضعة في المنتدى forum بعد التطاير ...
والنتيجة ....
http://upload.dzbatna.net/upfiles/s6437278.gif
وايضا الاحصائيات
http://upload.dzbatna.net/upfiles/ajb37335.gif
- الى الأن ممتاز جدا فري نايس
الحين نقوم بأدراج 4 مجلدات للاستايل style بعد التعديل عليها بالون المناسب للستايل style
وهي كالمثال التالي : قمت بتلوين الصور بما يناسب الستايل style
http://upload.dzbatna.net/upfiles/sLT37427.gif
http://upload.dzbatna.net/upfiles/y1c37699.gif
نروح الى css الرئيسية للستايل style ونغير مسار بعض الصور الى اسم الستايل style
بدل كلمة images نضع اسم الستايل style
http://upload.dzbatna.net/upfiles/ols37482.gif
وباقي الاكواد ايضا نقوم بتغييرها وهي تقريبا 4 .
ايضا نتوجهه الى
http://upload.dzbatna.net/upfiles/owx37603.gif
ونقوم بتغيير بعض الاسماء الى اسم الستايل style كما في المثال التالي
http://upload.dzbatna.net/upfiles/VV337652.gif
----------- والنتيجة للاستايل style --------
http://upload.dzbatna.net/upfiles/NDX37743.gif
---------------- بقي الخطوط المتوافقة ---------------
من
http://upload.dzbatna.net/upfiles/y1c37699.gif
سنقوم بتغيير الخطوط لتتوافق مع التصفحات .
اقتباس
من : خلفية المنتدى forum/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
--- وتلوين باقي الاكود codeا في css الرئيسية حسب لون ستايل styleك
......................................هكذا انتهينا من الستايل style ............
نصائح مهمة لجعل الاستايل style خالي من الأخطاء وفق المعايير القياسية .
- الهاك productات : وخاصة اغير متوافقة مع نسخة موقعك
- التنسيقات التجميلية للمنتدى
- اكواد اضافية مثل الاعلانات وغيرها
- تلوين الاقسام او المجموعات
- اضافة نبرات اعلانية غير منسقة
.. الخ
وهذا كلة له حلوول واكواد خاصة بة
يعني اي شخص يبحث عن الافضل لموقعة , ماهو ظروري يحط اي كود code او هاك product لموقعة
ويملاؤه بالاكواد التي ليس لها داعي ..
- وفي الختام اسأل الله تعالى الثبات على دينة وعلى سنة رسولة الكريم لي ولكم
وان يرحمنا جميعا ويحم والدينا ويشفي مرضانا ومرضى المسلمين
- بأذن الله في الدروس المقبلة سيكون الشرح طريقة بالفيديو تبعا لرغبة بعض الاخوة الافاضل
مع احترامي للجميع ومتمنيا التوفيق لهم
بارك الله فيكم وشكرا لحسن متابعتكم
اخوكم يوسف
http://upload.dzbatna.net/upfiles/qvy78088.gif
---THE END --
[/CENTER]
التعديل الأخير كان بواسطة يوسف ابوذوابة; 23 - 09 - 2014 الساعة 13:52
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif book3style-css.zip (http://www.traidnt.net/vb/attachments/519719d1285238881-book3style-css.zip) (613.4 كيلوبايت, عدد مرات المشاهدة 2204 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
