تصميم ستايل بتقنية css الجزء الثالث







السلام عليكم ورحمة الله وبركاتة الجزء الثالث من تصميم ستايل بتقنية css الحديثة , كما قلت ان تصميم ستايل بتقنية css هي طريقة لاخراج موقعك من " المواقع القديمة الطراز " ..الى موقع حديث الطراز كما ويوجد كتاب في المرفق للشرح بصيغة pdf لمن لاتظهر عندهم الصور بالمستقبل - الشكر الجزيل للأخ والاستاذ " ابوشدق " لا أنكر فضلة ولن انكر فضله علينا جميعا , ولاانسى فضل الاخوة الكرام الذين ردوا على مواضيعي بدعواتهم لي والوالدي ..بارك الله فيكم جميعا كما ونصحوني بأن ارفع الصور على مركز ترايد نت لضمان بقأءه , والصور في هذا الجزء مرفوعة على مركز ترايد نت , لبقاءها اكبر وقت ممكن ... سبحان الله الباقي وحدة لا اله لا هو. - انصح الجميع بالعودة الى الجزء الاول والثاني , لكي يستوعب الجزء الثالث بكل دقة . درسنا اليوم هو تكملة للستايل وتطاير الأطار ..مع بعض التعديلات الأخرى ان شاء الله الحين قم بفتح برنامج Microsoft Expression Web 2 او الدريم ويفر -- ونتوجهه الى code سنجد كود جاهز في البرنامج ريد الزيادة علية ونكتب هذا الوسم لاحظ الصور

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

 

ثم نختار text/css

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

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

الحين نقوم بكتابة الاكواد [1] حق الكلاسات اولا [2] حق التصاريف css واتمنى مراجعة الجزء الاول لان شرح الخطوات الاولى فيه - احنا عندنا في مجلد الستايل 6 سته صور للأطار --- وفي هذا الجزء اعطينا المتغيرات التالية المتغير a يعني الصور 1-2-3 الصور الثلاث العلوية للاطار المتغير b يعني الصور 1-2-3 الصور الثلاث السفلية للاطار المتغير d وهو حدود + خلفية الاطار لاحظ الكود جاهز بعد كتابة الأكواد كاملة المثال التالي ..

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

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

sampl11111111111

هذا الكود البسيط الى بالون الاحمر اكتب اي شيء وليكن عينة samplll وتتم الكتابة بين وسم الحدود والخلفية بالشكل التالي :

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

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

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

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

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

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

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

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

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

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

ونهايتة هنا

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

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

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

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

100% هذا هو الاطار وتطاير النافبار وكذالك الحال مع بقية القوالب لناخذ صورة مع الهيدر

ممتاز الى الأن بى الحين الفروم هوم ...وباقي القوالب الاخرى نروح نحصل القالب حق الفورم هوم من المنتدى

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

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

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

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

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

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

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

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

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

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

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

التكملة علي الموضوع الاصلي

http://www.traidnt.net/vb/showthread.php?t=1678220