طھطµظ…ظٹظ… ط³طھط§ظٹظ„ ط¨طھظ‚ظ†ظٹط© css ط§ظ„ط¬ط²ط، ط§ظ„ط«ط§ظ„ط« 3[ ظ„ط§ظٹظپظˆطھظƒظ… ]





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



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

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

[1]
- للعودة الى الجزء الأول .. فضلا -->> اضغط هنااا
[2]
- للعودة الى الجزء الثاني .. تفضل اضغط هووون

[ او]

- كما ويوجد كتاب في المرفق للشرح طريقة بصيغة pdf
لمن لاتظهر عندهم الصور بالمستقبل


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


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

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

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

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




طبعا كتبنا بين الوسم <title>yousefthawabh</title>
والوسم </head> هذا الوسم <style type=&quot;text/css&quot;> </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=&quot;d1&quot;>


اقتباس


<div class=&quot;d2&quot;>

<div class=&quot;d3&quot;>
</div>
</div>
</div>



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


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

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

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

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








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




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










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




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





الأن نعمل جديد للبرنامج ونروح الموقع او المنتدى forum ونجيب &quot; قالب template النافبار &quot; 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]



©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©