دورة CSS – الدرس الخامس

عانيتُ مزاجيًا في كتابة هذا الدرس .

ربَّما ترونه طويلاً ، الحقيقة أنَّه – متطاولٌ فقط – إذ أنني أحببتُ أن أشرح تفاصيل بعض الخصائص المهمَّةِ والمبهمة .

كونوا بخير .. سعداء دائمًا .

إحسان

.

.

الدرس الخامس : تنسيق الهيدر ، والأزارير .

ملاحظة : هل يمكنكم أن تفكِّروا معي في تعريبٍ مناسب لكلمة header ، أشعر بالخزي وأنا أكتبها بهذه الطريقة .

.

.

1- الـ Header :

تختلف طريقة تنسيق الهيدر من تصميمٍ لآخر ، نشاهد أحيانًا تصاميم معقَّدة نسبيًا وبالذات في المواقع الممتدة على عرض المتصفح ، بينما يكتفي بعض المصمِّمين بوضع سطرٍ رفيعٍ وكتابة اسم الموقع عليه …. وفي كلٍّ خير .

في هذا التصميم الَّذي ندرسه ، اخترتُ تصميم هيدر يعيش حالةً متوسطة ، يحتوي على خلفية الهيدر، عنوان الموقع ، ووصف ه ، هذه الأجزاء الثلاثة سوف نعمل على تنسيقها إن شاء الله بواسطة الـCSS .

قائمة الأمنيات .. الخاصة بالـ CSS :)

مرحبا ..

صباحكم رضا لا يشبه الفرح ولا يغشيه الحزن

صباحكم جنَّة .. وصحائف اليمين تبشرون بها الأحباب بالفردوس /

وصباحكم CSS .. الجمال .. حروفًا وشيفرات !

.

.

يحدِّثنا ميخائيل كالوري من موقع webmonkey عن 15 مصممًا شهيرًا للويب ، قام موقع css-tricks بسؤالهم حول أمنياتهم المستقبليَّة في تطوير الـCSS ، ويطلب ميخائيل من زوَّار موقعه كتابة قائمة أمنيات مشابهة لغرض المتعة .

تبدو الفكرة مسليَّة ومثيرة ومحفَّزة للخلايا الرماديَّة الصغيرة ، كما أنَّها مفيدة للقائـمين على 3w.org الموطن الرسمي للـCSS .

بحثتُ في جووجل عن مواقع أخرى تتحدَّث في ذات الهدف ، ففوجئتُ بمواقع شهيرة تطلب من زوارها المشاركة في قائمة الأمنيات الخاصَّة بالبرنامج أو المنتج للمساهمة في تطويره ، منها الموقع الخاصّ بمتصفِّح أوبرا والَّذي يعرض في الـopera wiki قائمة أمنيات تمكِّن عشاقها من عرض أفكارهم عليها ، وأيضًا مدونة googlesystem طلبت من زوارها في نهاية عام 2006 عرض أمنياتهم المستقبلية من جووجل لعام 2007 ، الموقع الإجتماعي Myspace له صفحة خاصَّة اسمها wish-myspace-was-better ، هذا عدا مئات الهواة في العالم الَّذين يكتبون قائمة أمنياتهم لمنتجاتهم ومواقعهم المفضَّلة .

أعود إلى الـCSS وموقع webmonkey مستعرضةً أمنيات الزوَّار ، أعجبتني بعض الأفكار كثيرًا ، أطرحها هنا :

دورة CSS – الدرس الرابع

السلام عليكم

كيف الحال ؟! ..:)

صباح جميل يا كرام ..

صباح خالٍ من القهوة ورائحة البن المقيتة ، حافلٍ بالتقنية والويب ، ما قلَّ منهما أو كثر

.

.

كنَّا قد أنشأنا هيكل الـصفحة بلغة الـXHTML في الدرس السابق ، وسوف نخصص الأيَّام القادمة إن شاء الله لتعلُّم تنسيق الموقع بلغة CSS عبر 3 دروس تتقاسم أجزاء الصفحة كالتالي :

الدرس الرابع : التنسيق العام للصفحة ، تنسيق الغلاف الخارجي ، تنسيق الروابط التشعبية .

الدرس الخامس : تنسيق الهيدر ، والأزارير .

الدرس السادس : تنسيق القائمة الجانبية ، المحتوى ، والفووتر .

ونحن اليوم إن شاء الله على موعدٍ ممتعٍ مع الدرس الرابع .

.

.

ملاحظة صغيرة :

ربَّما تحتاج إلى قراءة هذا الدرس أكثر من مرة قبل استيعابه .

دورة CSS – الدرس الثالث

هذا الدرس جاء متأخرًا جدًا لظروف خارج إرادتي .. .

وسيكون باللهجة العاميَّة إن شاء الله .. كتجربة أولى لي .

.

.

أحب أكد في البداية إنو الدرس هذا والدروس الي بعده تطبيقيَّة ، يعني لازم يكون عندك معرفة بلغة التصميم HTML أو XHTML ، وخلفية لا بأس بها عن خواص الـCSS ، وانا ذكرت في الدرس الثاني بعض المواقع الي تشرح هذي الخصائص ، أحس ما في فايدة أو معنى من إنِّي أشرح خصائص مذكورة في 100 موقع !! .. غرضي أشرح كيفيَّة الإستفادة من هذي الخصائص في التصميم ، والي حاب يستزيد عن الخصائص يزور اللنكات السابقة .

أنا رفعت تصميم جاهز لي على 4shared ، أبغاكم تنزلوا هذا التصميم عشان تشوفوه وبعد كده تنشؤوا صفحات HTML و CSS جديدة ، بمشي معاكم خطوة خطوة إن شاء الله وبشرح كيف سويت هذا التصميم وإيش هي الخصائص الي استخدمتها ، وليش استخدمتها ، وكيف استخدمتها بحيث يكون التصميم خاضع للمعايير القياسيَّة ويوحَّد العرض في كل المتصفحات .

اضغط هنا لتحميل التصميم .. }

طبعًا لا أحد يطالع فيه زي ما يطالع في تصاميم الناس الكبيرة ، لأنه فنيًا …. .. !! .

أهم شي إنه يأدي الغرض التعليمي منه .. .

.

.

نبدأ على بركة الله .

دورة CSS – الدرس الثاني

السلام عليكم ..

صباح جميل لكم جميعًا

أعترف بأنِّي تأخرتُ كثيرًا كثيرًا في كتابة هذا الدرس ، بسبب ظرفٍ برمجيٍ طارئ ، وبسبب انشغالي بمشروع تخرجي – ادعوا لي كثير – ، فأتمنى أن يعذرني الَّذين قرأوا الدرس الأول ، وتحمسوا للدورة .

تحدَّثنا في الدرس السابق عن هيكل الـCSS وقلنا بأنَّ ملف الـCSS يتكون من عددٍ من المحددات ( Selectors ) تجتوي على عددٍ من الخصائص ( Attributes ) لها قيم ( Values ) معينة ، وخصصنا جزء للحديث عن المحددات Selectors ، واليوم إن شاء الله سوف نتحدَّث عن الخصائص .. الَّتي هيَ أساس بناء الـCSS .

.

.

أولاً : ما هو الفرق بين خصائص الـCSS وخصائص الـHTML ؟ - عندما أذكر الـHTML فإني أعني الـHTML و XHTML -

الكثير – وربَّما أغلب – خصائص الـCSS موجودةٌ أصلاً ضمن خصائص الـHTML ، ويتساءل المبتدؤون – وقد تساءلتُ – عن السبب الَّذي يدعو W3C والمصممين إلى الإهتمام بالـCSS بهذه الطريقة رغم إمكانية تصميم مواقع لا تعتمد عليها ، هناك الكثير من الأسباب الَّتي تدعو المصمم إلى ” مقاطعة ” خصائص الـHTML تمامًا منها :

1- استخدامك للـCSS يرسخ في موقعك مبدئ الفصل التام بين المحتوى والتصميم كما ذكرنا في الدرس الأول .

2- القيم المتاحة لخصائص الـCSS قياسية ، من المفترض أنَّ المتصفحات الحديثة تفهمها جيدًا ، بحيث تتوحد طريقة عرضها للمواقع .

دورة CSS – الدرس الأول

بسم الله الرَّحمن الرحيم

سوف نبدأ بإذن الله مع مقدمة نظرية في الـCSS أوزعها على درسين إن شاء الله ، ولا أريد أن أطيل في الحديث النظري لسبب بسيط ، وهو أنَّ مواقع الإنترنت ملئى جدًا بدروس تعليم الأساسيات النظرية للـCSS ، كما أنّ الكثير من النَّاس لديه خلفية في لغات التصميم  لكنه يريد أن يعرف كيف يبدئ بتطبيق ما يعرفه عمليًا ، سوف تساعده الدروس التطبيقية بالتأكيد على ذلك إن شاء الله ، ما سنتعلمه هنا هو تصميم مواقع الإنترنت عن طريق لغة XHTML و CSS عملياً ، بدون الإستعانة بأي برامج مثل Dreamweaver ، وسوف أضع لكم روابط لدروس تفصيلية إن شاء الله عندما أشرح مفاهيم نظرية بشكلٍ سريع .

قد لا تفهم الكثير مما سأشرحه في هذين الدرسين ، لا تقلق ، الغرض من كتابتهما مجرد تمهيدٍ بسيط للدروس العمليَّة والتي سوف نقوم فيها إن شاء الله بعمل تصميم ويب معين يمكن الإستفادة منه لاحقًا في أي مجال من مجالات الويب ، سواءًا المدونات أو غيرها .

هيكل الـCSS :

عبر الـ css أنت سوف تقوم بتحديد مجموعةٍ من الخصائص لكائنٍ معيَّن يعرف بـ selector ، وهذا الكائن قد يكون وسم HTML ، مثل الوسم <div> على سبيل المثال ، فإذا حددتَ قيمة لون معين ” الأزرق مثلاً ” لخلفية هذا الوسم ، فإنَّ الـCSS تقوم بتلوين أي وسم div باللون الأزرق ! ، توجد هناكـ أنواعٌ أخرى من الـselectors سوف نذكرها لاحقًا إن شاء الله .

يمكن القول بأنَّ الـcss تتكون من عدد مختلفٍ من المحددات ( selectors ) ، تعيِّن لها قيم ( values ) لخصائص ( Attributes ) يقوم المصمم باختيارها من مجموعة كبيرة من الخصائص التي توفرها له css .

وتكتب هكذا :

selector

}

;attribute1:value1

;attribute2:value2

.

.

etc

{

إننا نحدد خصائص الselector بن قوسن معقوقين {} ، نفصل بين كل خاصية وأخرى بفاصلة منقوطة ، ونسبق قيمة الخاصية بـنقطتين رأسيتين بدلاً من علامة المساواة .

طرق كتابة الـCSS :

توجد هنالك 3 طرق لكتابة توصيفات الـCSS :

حول دورة CSS

سوف تبدأ الدورة إن شاء الله في العاشر من شعبان .

وسوف ترتكز على تعليم تصميم style أو نمط معين لصفحات الويب .

يُتوقَّع منكـ بعد إنهاء هذه الدورة أن تكون بإذن الله قادرًا على تعديل ملفات الـCSS في قوالب الوورد بريس ، وأنظمة إدارة محتوى أخرى أيضًا .

إذا تعلَّمتَ لغة PHP أو لغة ASP.Net ، فسوف تكون أيضًا قادرًا بإذن الله على تصميم القوالب الَّتي تحتاج إليها .

.

.

لا أعلم إن كان هناكـ من سيتابع هذه الدورة أم لا

أنا فاشلة جدًّا في التسويق لمدونتي

لكنِّي أتمنى مِمَّن يمرُّ من هنا أن يخبر أصدقاءه الراغبين في تعلُّم CSS تطبيقيًا بأسلوبٍ سهل ووقتٍ قصير عن هذه الدورة

ربَّما لا يقرأ هذه الدروس إلاَّ القليل .. والقليل جدًّا

لكنِّي سوف أحتفظ بها هنا .. علمٌ ينفعني بإذن الله

.

.

تحياتي

أختكم : إحسان

دورة للمبتدئين | تحب تتعلَّم CSS ؟!

بسم الله الرَّحمن الرَّحيم

ملاحظة صغيرة :

أنتَ بحاجة لمعرفةٍ بسيطة بلغة تصميم المواقع HTML قبل البدء بهذه الدروس .

لمحة عن لغة HTML:

لغة الـHTML هي نواة بناء مواقع الويب ، تتكوَّن من وسوم Tags مثل : <font> المسؤول عن وضع تنسيقات للنص ، ومن خصائص Attributes مثل : color الَّتي تحدد لون الخط من خلال إعطاءها قيمة value معينة .

لمحة عن CSS :

آلية بسيطة وسهلة ، وظيفتها إضافة تنسيقات إلى مستندات الويب .

.

.

منذ أيَّام وأنا أفكِّر في كتابة تدويناتٍ نافعة ، بودِّي لو أُقيم دورةً في هندسة البرمجيات SW Engineering ، أو في مبادئ برمجية صغيرة تعين المقدم على دراسة البرمجة في فهمٍ أولي أعمقٍ لأساسيتها – مهما كانت لغات البرمجة – .

لكنِّي ارتئيتُ الإبتداء بدورة تطبيقية للغة تصميم ممتعة جدًّا وسهلة ، هيَ ليست لغة بالمعنى الحقيقي للغة ، ولكنَّها توصيف مطلق ومعتمد من قِبل مجلس وب w3 تساعد على تنسيق – وحتى حماية – صفحات الويب ، وقد زاد الإعتماد عليها في الآونة الأخيرة بشكلٍ كبير ، ويحتاج إلى الإلمام بمبادئها مصممِّي المواقع الَّذين يرون بأنَّ CSS قد قدَّمت لهم طريقة مرنة ومتوسِّعة في تصميم الصفحات ، وأصحاب المواقع الَّذين يستخدمون أنظمة إدارة محتوى مثل wordpress و joomla! ويحتاجون إلى تعديل خصائص قالب الموقع حسب رغباتهم .