استعمل مربع البحث في الاسفل لمزيد من المواضيع
سريع للبحث عن مواضيع في المنتدى
-
10-30-2013, بتوقيت غرينيتش 08:48 PM
#1
تصميم ستايل style بتقنية css الجزء الثالث 3[ لايفوتكم ]
طھطµظ…ظٹظ… ط³طھط§ظٹظ„ ط¨طھظ‚ظ†ظٹط© css ط§ظ„ط¬ط²ط، ط§ظ„ط«ط§ظ„ط« 3[ ظ„ط§ظٹظپظˆطھظƒظ… ]
.. لاتشغل بالك ...
واجعل الفرح شكرأ , والحزن صبرأ ,والصمت فكرأ , والنطق ذكرأ
.. لاتشغل فكرك ..
فربما ساءتك اوائل الامور .. وسرك أخره ..كالسحاب اوله رعد وبرق وأخره غيث هنيء بأذن الله
..واستغفر , فان الاستغفار يفتح الاقفال , ويشرح طريقة البال ,
ولاتنسى .. حسبنا الله ونعم الوكيل ..فأنها تطفيء الحريق , وينجوا منها الغريق ,
وتعرف بها الطريق , وتدخل بها على الملوك والسلاطين بكل ثقة وأمان ..وتوكل على الله الحي القيوم
,فمن يتوكل على الله فهو حسبة , وكفانا بالله حسيبا .
السلام عليكم ورحمة الله وبركاتة
الجزء الثالث من تصميم ستايل style بتقنية css الحديثة , كما قلت
ان تصميم ستايل style بتقنية css هي طريقة لاخراج موقعك من " المواقع القديمة الطراز " ..الى موقع حديث الطراز .
[1]
- للعودة الى الجزء الأول .. فضلا -->> اضغط هنااا
[2]
- للعودة الى الجزء الثاني .. تفضل اضغط هووون
[
او]
- كما ويوجد كتاب في المرفق للشرح طريقة بصيغة pdf
لمن لاتظهر عندهم الصور بالمستقبل
-
كما ونصحوني بأن ارفع الصور على مركز ترايد نت لضمان بقأءه , والصور في هذا الجزء مرفوعة على مركز ترايد نت , لبقاءها اكبر وقت ممكن ... سبحان الله الباقي وحدة لا اله لا هو.
- انصح الجميع بالعودة الى الجزء الاول والثاني , لكي يستوعب الجزء الثالث بكل دقة .
درس مفصلنا اليوم هو تكملة للستايل style وتطاير الأطار ..مع بعض التعديلات الأخرى ان شاء الله
الحين قم بفتح برنامج Microsoft Expression Web 2 او الدريم ويفر
-- ونتوجهه الى code سنجد كود code جاهز في البرنامج
ريد الزيادة علية ونكتب هذا الوسم لاحظ الصور
طبعا كتبنا بين الوسم <title>yousefthawabh</title>
والوسم </head> هذا الوسم <style type="text/css"> </style>
ولاحظ ان البرنامج يساعدنا بشكل تلقائي في كتابة الكلمات ,
نكمل كتابة الكود code .
ثم نختار text/css
ونختمها بالقوس او الاشارة التالية <
الوسم </style> سيضاف بشكل تلقائي بعد كتابة الاشارة >
الحين الكود code اصبح جاهز في البرنامج
قلنا سلفا ان الكود code في البرنامج مقسم الى قسمين [ الاول للاكواد ويوضع لاحقا في التصاريف css [ والجزء الثاني للاكلاسات ] ويكتب داخل الجسم body
لاحظ اين سنكتب كود code التصاريف .
الحين نقوم بكتابة الاكواد [1] حق الكلاسات اولا [2] حق التصاريف css
واتمنى مراجعة الجزء الاول لان شرح طريقة الخطوات الاولى فيه
- احنا عندنا في مجلد الستايل style 6 سته صور للأطار --- وفي هذا الجزء اعطينا المتغيرات التالية
المتغير a يعني الصور 1-2-3 الصور الثلاث العلوية للاطار
المتغير b يعني الصور 1-2-3 الصور الثلاث السفلية للاطار
المتغير d وهو حدود + خلفية الاطار
لاحظ الكود code جاهز بعد كتابة الأكواد كاملة المثال التالي ..
- ألحين اكيد فهمت الكود 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 وتتم الكتابة بين وسم الحدود والخلفية بالشكل التالي :
لاحظ الان نتيجة الكود code وكيف هو خارج حدود الأطار
كيف نقوم بمعالجة الأمر ... سهل جدا بسيطة نروح للمتغير d1 الى هو كود code التصاريف للحدود والخلفية الكود code1 d
الحين نروح الى المعاينة ونشوف
للمعلومة .. فقط ..
الأن نعمل جديد للبرنامج ونروح الموقع او المنتدى forum ونجيب " قالب template النافبار " navbar
من الستايل style الى سويناه .. ونحطة في البرنامج ومن البرنامج نروح الى design ونظلل الكود code كما في المثال لكي عرف التطاير للقالب template .
الحين بعد تظليل الكود code وهو في design نرجع الى code
لاحظت المثال السابق ان الكود code حق النافبار هذا سنقوم بقصة وادراجة داخل كلاسات كود code الأطار الي عملناه سابقا
- بعد قص كود code النافبار نقوم بأدراجة داخل
ثم نقوم بنسخ كود code الاطار مع النافبار ولكن فقط من بداية الكلاسات body الى اخر body
يعني لنوضح بصورة اكثر
ونقوم بارجاعة الى كود code النافبار
الأن انتهينا من قالب template النافبار
نروح نضيفة في المنتدى forum
+
ننسخ كود code التصاريف css
ونهايتة هنا
في تصاريف الستايل style css ..
- الأن نعمل معاينة للمنتدى بعد اضافة كود code التصاريف وتطاير النافبار والنتيجة....
نقوم بتعديل لون الخلفية كما اخترتها في الكود code + تصفير خواص اس سي سي الاضافية
والحين باقي الحدود للاطار لكي يكون متناسق مع النافبار
وكما قلت هذة الاضافة اختيارية وليست اجبارية
الحين نروح نعاين المنتدى forum ونشوف وش سار بالنافبار
100% هذا هو الاطار وتطاير النافبار
وكذالك الحال مع بقية القوالب
لناخذ صورة مع الهيدر header
ممتاز الى الأن
بى الحين الفروم هوم ...وباقي القوالب الاخرى
نروح نحصل القالب template حق الفورم هوم من المنتدى forum
كيف نعرف التطاير في الفروم هوم
نضع اشاره الماوس بين الرقمين 6 هناا 5
ونضغط على الزر الي فوق كما في الصورة
سيقوم البرنامج بتظليل الكود code
نقص كود code الفورم هو المشار الية في المثال التالي ونضعة في كلاسات الاطار ثم نعيدة الى كود code الفورم هوم مرة اخرى والحين الاحصائيات نفس السلافة
نضغط عى الصورة لمعرفة تطاير الاحصائيات
وهذ البداية والنهاية لة
نضعه في كلاسات كود code الاطار ثم نعيدة الى مكانة في كود code قالب template الاحصائيات في الفروم هوم
وثم بعد ذالك نضعة في المنتدى forum بعد التطاير ...
والنتيجة ....
وايضا الاحصائيات
- الى الأن ممتاز جدا فري نايس
الحين نقوم بأدراج 4 مجلدات للاستايل style بعد التعديل عليها بالون المناسب للستايل style
وهي كالمثال التالي : قمت بتلوين الصور بما يناسب الستايل style
نروح الى css الرئيسية للستايل style ونغير مسار بعض الصور الى اسم الستايل style
بدل كلمة images نضع اسم الستايل style
وباقي الاكواد ايضا نقوم بتغييرها وهي تقريبا 4 .
ايضا نتوجهه الى
ونقوم بتغيير بعض الاسماء الى اسم الستايل style كما في المثال التالي
----------- والنتيجة للاستايل style --------
---------------- بقي الخطوط المتوافقة ---------------
من
سنقوم بتغيير الخطوط لتتوافق مع التصفحات .
اقتباس
من : خلفية المنتدى 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 لموقعة
ويملاؤه بالاكواد التي ليس لها داعي ..
- وفي الختام اسأل الله تعالى الثبات على دينة وعلى سنة رسولة الكريم لي ولكم
وان يرحمنا جميعا ويحم والدينا ويشفي مرضانا ومرضى المسلمين
- بأذن الله في الدروس المقبلة سيكون الشرح طريقة بالفيديو تبعا لرغبة بعض الاخوة الافاضل
مع احترامي للجميع ومتمنيا التوفيق لهم
بارك الله فيكم وشكرا لحسن متابعتكم
اخوكم يوسف
---THE END -- [/CENTER]
التعديل الأخير كان بواسطة يوسف ابوذوابة; 23 - 09 - 2014 الساعة 13:52
الملفات المرفقة [TR]
book3style-css.zip (613.4 كيلوبايت, عدد مرات المشاهدة 2204 مرة) [/TR]
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©
المواضيع المتشابهه
-
بواسطة linnou في المنتدى ستايلات في بي الجيل vBulletin 3.x.x
مشاركات: 0
آخر مشاركة: 10-31-2013, بتوقيت غرينيتش 06:35 PM
-
بواسطة walid في المنتدى ستايلات في بي الجيل vBulletin 3.x.x
مشاركات: 0
آخر مشاركة: 10-31-2013, بتوقيت غرينيتش 04:45 PM
-
بواسطة romaissa في المنتدى دورات تدريبية و شروحات لتصميم المواقع
مشاركات: 0
آخر مشاركة: 10-30-2013, بتوقيت غرينيتش 08:52 PM
-
بواسطة linnou في المنتدى دورات تدريبية و شروحات لتصميم المواقع
مشاركات: 0
آخر مشاركة: 10-30-2013, بتوقيت غرينيتش 08:49 PM
-
بواسطة salima في المنتدى دورات تدريبية و شروحات لتصميم المواقع
مشاركات: 0
آخر مشاركة: 10-30-2013, بتوقيت غرينيتش 08:49 PM
ضوابط المشاركة
- لا تستطيع إضافة مواضيع جديدة
- لا تستطيع الرد على المواضيع
- لا تستطيع إرفاق ملفات
- لا تستطيع تعديل مشاركاتك
-
قوانين المنتدى