مدرسة بناء المواقع >>  الدروس العملية >>  أوراق التنسيق المتعاقبةCSS  لماذا ؟ وكيف؟ 

أرى أنه من الواجب علي التحدث عن هذه التقنية الرائعة :) ، مع أني لست محترفا ً فيها لكني سأحاول أن أشرح لك ما فهمته من هذه التقنية التي كان من أهم أسباب اختراعها  تسهيل المهمة على المستخدم ، والتحكم في تصميم صفحة الويب خاصتك بكل سهولة

 

تخيل أن لديك 20 صفحة ، تريد جميع محتوى هذه الصفحات العشرين بـ
- نفس الخط  .
- نفس الخلفية .
- نفس المقاس .
- نفس النمط والمحاذاة  .
- نفس الألوان ( ألوان النص العادي - الإرتباطات - الإرتباطات المُزارة .. إلخ ) .
في الوضع العادي ستقوم بالعمل على هذه الملفات العشرين يدويا ً .. بعمل كل خطوة مما سبق ! لكن ... هذا ما جاءت CSS  لتبطله :)

 

كل ما عليك فعله هو عمل ورقة نمط CSS ( كيف ؟ )  و تضع فيها ما تقدم من مواصفات( على أي أساس ، وماهي الطريقة  ؟ )  وإدراجها في صفحتك أو مناداتها عبر شفرة صفحتك في سطور ( كيف ؟ ) وتطبق هذه الخطوة الوحيدة في كل صفحة من العشرين .

 كيف أصنع ورقة أنماط CSS ?

 الطريقة أبسط مما تتصور بكثير ، يمكنك ذلك عن طريق أي  محرر النصوص " Notepad , المفكرة " مثلا ً ، أو أحد برامج التحرير الصفحات الصريحة كـ " الفرونت بيج  , الدريم ويفر " ومن ثم تصدير عملك بصيغة CSS

ماذا أكتب في الملف ، وعلى أي أساس ؟

بسيطة جدا ً :) ، إذا كنت ستستخدم برنامج محرر نصوص عادي كـ " المفكرة " ، فإنك ستحتاج إلى حفظ كود أي تنسيق تريد إدراجه ، والوضع يختلف مع برامج التحرير الصريحة كـ " الفرونت بيج " ، فالعمل سيكون بشكل أسهل وأدق بطبيعة الحال .

كيف أدرج ورقة النمط CSS في صفحتي ؟

يتم ذلك وبسهولة عن طريق مناداة بواسطة " كود معين " في مصدر صفحتك لإسم الملف الذي أنشأته .

(( تطبيق عملي ))

سوف نصنع  ، ورقة أنماط بالمواصفات التالية وذلك لغرض استخدامها في " صفحات الدروس بموقعي ! " :
- نوع الخط ( Tahoma )
-
مقاس الخط (18pt )
-
الخلفية عبارة عن لون ـ رمزه (6A8EAC#)
- محاذاة النص ( محاذاة لليمين )
- لون الخط ( أسود ) ، لون الوصلة ( رمادي غامق ) ، لون الوصلة المزارة ( أحمر )

 سأقوم باستخدام برنامج الفرونت بيج لصنع هذه الورقة :) ، فهو الأسهل بالنسبة لي ! ، سأبدأ من قائمة File  ملف ، وأختار منها " جديد New ومن ثم أختار " Page or Web  "  بعد اختيارك هذا الخيار يتخرج لك نافذة .

أيوه ، وبعدين ؟
تعاااال يا حبيبي للصفحة الثانية :)


 كاتب الدرس /

 مناقشة الدرس في المنتدى /


 مـازن©