الأحد، أغسطس 16، 2009

مقدمة الجزء الاول من دروس دورة css لتنسيق صفحات الويب.

. الأحد، أغسطس 16، 2009


قبل بداية اولى دروس دورة css، احب ان اشير الى اننا سوف نركز على الجوانب العملية اكثر، و سوف يكون شرحنا النظرى ان وجد، لخدمة فهمك للجزئيات العملية، و يكفى ان اقول لك ان هناك ممن يكتبون اكواد css ببراعة وذلك من باب الممارسة، و لكن عندما تطلب منهم شيئا معينا، فانهم لايستطيعون ذلك، رغم انه يمكنكهم كتابته بنفس الكود الذى يستخدمونه، و ذلك لانه ليس لديهم تلك الخلفيات النظرية والتى سوف تتضح كلما تقدمنا فى هذه الدورة باذن الله تعالى.

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

اما بالنسبة لمقدمة تلك الدورة فيمكنك الاطلاع عليها من الرابط ( الفروق بين لغات تصميم صفحات الويب ) و ذلك ضمن دروس دورة xhtml .

ماهو هدف لغة css ؟
يجب ان تعلم ان الهدف الرئيسى للغة css هو تمكين المصمم من عمل تنسيقات مسبقة ثم تطبيقها على احد او بعض عناصر صفحات الويب، و بما ان صفحات الويب عادة ماتكون مكتوبة بلغة html ، فهنا يتم تطبيق تلك التنسيقات ( والتى تعرف بالاستايلات styles ) على تلك العناصر ( والتى تعرف بالمحددات selectors ).

لذا و بناء على الصورة السابقة، و لكى يتم عرض هذه الجزئية بصورة كاملة، فسوف يتم تقسيم الموضوع الى اربعة اجزاء:-

الجزء الاول: كيفية تعريف او كتابة الاستايلات و سوف يتم مناقشته فى الدرس الحالى.

الجزء الثانى : كيفية ادراج تلك التنسيقات داخل اكواد html وسوف يتم مناقشته فى الدرس التالى.

الجزء الثالث: انواع المحددات و كيفية استخدامها ، وسوف يتم مناقشته فى الدرس التالى من الدورة نظرا لانه يحتاج الى مزيد من التفصيل.

الجزء الرابع : وهو موضوع لم اجد احدا ناقشه من قبل وهو سوف يكون بمثابة نظرة عامة على القيم التى تاخذها خصائص css و ليس الخصائص نفسها، و هذا الموضوع سوف يوفر عليك كثيرا فى فهم كيفية التعامل مع هذه القيم، بالاضافة الى انه سوف يسهل عليك فهم الخصائص ايضا.

كيفية تعريف او كتابة الاستايلات.
لغة css هى لغة بسيطة ان اردتها كذلك، و لكنها تزداد تعقيدا كلما تنوعت قدراتك فى استخدام المحددات selectors ، و الوراثة inheritance ، و خصائص الانماط الانسيابية cascading ، و سوف نتاول بعض من هذه الامور خلال رحلتنا لاحتراف هذه اللغة ان شاء الله تعالى.

لكن بصفة عامة يمكن النظر الى القاعدة التالية والتى تمثل الشكل العام لكتابة الاستايلات:

  1. Selector {

  2. Property1 : value1;

  3. Property2 : value 2;

  4. Propertyn : value n;

  5. }

و كمثال عملى بسيط على الصيغة السابقة

  1. H1 {

  2. Font-family: "times new roman";

  3. Color: red;

  4. Font-size: 15px;

  5. }



مالذى يعنيه المثال السابق؟
ببساطة هو يشرح للمستعرض انه كلما استخدمنا الوسم h1 ، داخل اى صفحة من صفحات الموقع فانه يجب ان يعرض فى نافذة المستعرض النصوص الموجودة بين الوسم h1 حيث يكون الخط من النوع times new roman وان يكون لونه احمر بالاضافة الى زيادة حجم الخط ليكون 15 بيكسل.

اذن تتكون القاعدة العامة لكتابة الاستايل مما يلى:-
  • العنصر المحدد selector الذى سينطبق عليه التنسيق وهو عنصر html وهو فى مثالنا h1
  • قوسى { } وهدفهما هو تحديد بداية و نهاية التنسيقات المطبقة على العنصر المحدد selector، و ذلك حتى يستطيع المستعرض عرضها بصورة صحيحة دون الدخول على تنسيقات اخرى تخص محددات تالية.
  • الخصائص properties و قيمها التى سوف يتم تطبيقها على العنصر، و هذه سوف يتم دراستها باستفاضة فى الاجزاء القادمة من الدورة.
  • الفاصلة المنقوطة( ; ) :هامة جدا و توضع فى نهاية كل خاصية لتحديد نهايتها والانتقال لما بعدها، و بصفة عامة فان اخر خاصية تكتب للمحدد قد لاتحتاج الى الفاصلة المنقوطة، و لكن رغم ذلك من الافضل كتابتها.
كان هذا الدرس بسيطا جدا لتعلم كيفية كتابة اكواد css ، فى الدرس التالى باذن الله من الدورة سوف يتم تناول كيفية ادراج هذه الاستايلات داخل صفحات موقعك. تمنياتى بالتوفيق لكم جميعا.


6 تعليق:

أبو عبدالرحمن يقول...

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

temo يقول...

مشكور اخى ابو عبد الرحمن و بالفعل الدرس سهل لانه فى البدايات، شاكر لحضورك الدائم معى...

sherifer921 يقول...

جئت اليك من برامج نت بعد ان رأيت ردك فى الموضوع الذى تم نقله منك
حقيقة مدونتك فى قمه الروعة بالفعل وتقدم معلومات شيقه وجميلة
استمر وفقك الله لما يحبه ويرضاه

temo يقول...

شاكر اخى شريف على تعليقك و كلماتك الراقية، تقبل تحياتى.

NashatBlog يقول...

جميل جدا اول درس و بالتوفيق فى بقية الدروس

انا اتابعك ان شاء الله باستمرار

تحياتى

temo يقول...

مشكور اخى نشأت على تعليقك، و ان شاء الله سوف تكون الدروس القادمة كما تتوقع، و الله المستعان، وافر تحياتى و تمنياتى بالتوفيق.

 
room darkening shades