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

قياسي

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

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

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

إحسان

.

.

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

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

.

.

1- الـ Header :

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

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

أولاً : خلفيَّة الهيدر

نلاحظ أنَّنا لم نحدِّد سوى 3 خواص هنا ، وهي ارتفاع الهيدر height وخلفيته وتكرار الخلفية ( حددناهما من خاصية background ) .

لم نقم بتحديد العرض ولا غيَّرنا خواص الهامش العلوي ولا نسقنا الحدود ، لكن الهيدر ورث هذه الخواص عن أبيه وهو الغلاف الرئيسي للموقع main ، لذا أخذ قيم خصائص الحدود والهامش العلوي و قيمة العرض ، وهذا أحد أوجه الوراثة في الـcss .

ثانيًا : عنوان الموقع

يجب عليك أن تعرف أنَّ أوَّل ما تقع عليه عينا زائر موقعك هو عنوان الموقع وطريقة تنسيقه ، أغلب المصمِّمين يقومون بتضمين اسم الموقع داخل صورة الهيدر كي يستطيعون التلاعب بتنسيقه في برنامج محرر الصور كما يشاؤون – عنوان مدونتي على سبيل المثال – ، ولكن أحيانًا أنتَ تحتاج إلى كتابتها منفصلة عن الصورة حين تقوم بتصميم template عام تنشره بين الناس ، أو حين تقوم بتصميم قالب لأحد برامج إدارة المحتوى ( جملة! أو الووردبريس مثلاً ) .

هذا كود الـcss للعنوان في تصممينا :

1- الخاصية padding التي تحدد  الهوامش الداخليَّة لجميع الجهات خصصت لها 20 بكسل .

2- الخاصية display تحدد طريقة عرض الكائن ، توجد لها الكثير والكثير من القيم ، منها block – inline- none … وغيرها ، لن أفصِّل في شرحها الآن يمكنكم القراءة عنها عبر هذا الرابط :

اضغط هنا

.

.

فائدة القيمة inline للخاصية display في العنوان :

جربوا حذف خاصية display من الكود السابق ، ثمَّ شاهدوا التصميم .

سوف تفاجؤون بظهور مساحةٍ خالية بين الحدِّ الأعلى للمتصفح وبين هيدر الصفحة – لن يتغيَّر شيء إذا كنت تستخدم IE6 – ، إذاً أنا استخدمت display:inline لمعالجة هذه المشكلة ، أيضًا أستطيع استخدام الخاصية margin بقيمة 0 لذات الغرض ، ولا أدري لما فضَّلتُ الطريقة الأولى على الثانية ، ولم أنتبه لذلك إلاَّ بعد إنهاء التصميم بكثير .

display:inline تجعل الحدَّ الأعلى للابن منطبقًا على الحدَّ الأعلى للأب ، في هذه الحالة أنتَ أيضًا لن تستطيع التحكُّم بأبعاد الكائن حيث يأخذ أقل طولٍ وأقلَّ عرض ممكنٍ له .

ولأنَّني لم أكن لأغيَّر أبعاد الـعنوان حيث يأخذ تلقائيًا أبعاد طول النصّ ، لم تسبب هذه الخاصية مشاكل في تصميمي .

ولكن إذا حاولتم استخدام هذه الخاصيَّة بقيمة inline مع محدد الـheader الرئيسي سوف تفاجؤون بالتقلُّص الشديد لحجم الخلفية .

3- بقيَّة الخواصّ استخدمتُها لتنسيق الخطوط ، خاصية color لتحديد اللون ، خاصيَّة font-weight:normal لإزالة تأثير الخطَّ العريض الَّذي تتميز به وسوم العناوين ، خاصية font-size:58pt لتحديد حجم الخط ، وأخيرًا الخاصية font-family:diwani letter لتحديد نوع الخط ، مع ضرورة اختيار نوع شائع موجود ضمنيًا في أنظمة التشغيل والإبتعاد عن الخطوط الغريبة .

ثالثاً : وصف الموقع

أنتَ لا تحتاج إلى مراجعة الدرس الثالث كي تعرف بأنَّنا اخترنا الوسم <p> لتضمين الوصف .. صحيح ؟ 🙂 .

1- لنتحدَّث أولاً عن الخاصيَّة position ، سأكون صريحةً وأقول أنَّها أكثر ما خشيتُ شرحه ! ، حسنًا .. لنتَّفق على أنَّ كلمة position تعني :  تحديد مكان الكائن ، يوجد لديك خيارين مختلفين تمامًا عند استخدام هذه الخاصية ، إمَّا أنَّكـ سوف تستخدمها في تحديد مكان الكائن كما سنتعلَّم اليوم ، أو ستستخدمها في تحديد مكان الخلفية كما سنتعلُّم لاحقًا إن شاء الله .

سوف نستخدم خاصية position هنا لتحديد مكان الكائن ، مثل ما فعلنا مع وصف الموقع في الكود السابق .

عندما نريد أن نتحكَّم بمكان نصٍّ أو صورة أو حتى صندوق بشكلٍ مرن فإننا نستخدم خاصيَّة position الَّتي تُكتب حينها هكذا :

position:static

وهي تأخذ إحدى هذه القيم : static ( الإفتراضيَّة ) – absolute – relative .

static : المكان الطبيعي للكائن .

relative : عندما تختار هذه الخاصيَّة فلن يتغيَّر شيء بادئ الأمر ، لكنَّكـ سوف تكون قادرًا على استخدام هذه الخواص / right – top – left – bottom ، بالسالب أو الموجب لتحريكـ الكائن .

وفي كودنا السابق ، أردنا تحريك وصف العنوان إلى الأعلى بمقدار 150 بكسل فكأننا نطرح من موضع النصِّ الحالي مسافة 150 بكسل كي يصعد النصُّ لأعلى ولذا اخترنا قيمةً سالبة ، كما قمنا أيضًا بتحريك النصَّ من جهة اليمين لجهة اليسار مسافة 150 بكسل ، ولأنَّ القيمة موجبَة فإنَّها سوف تقترب من جهة اليسار .

absolute : في هذه الحالة سوف يُحذف الكائن من الصفحة ، ويُعاد إليها في الجزء العلوي من الصفحة أقصى اليسار ، ثمَّ أنتَ تستطيع بعد ذلك تحديد قيم الخواص / right – left – bottom – top بالسالب أو الموجب .

إذاً الفرق الرئيسي بين relative وabsolute أنَّ الأولى تعطيني إمكانيَّة تحكُّم في مكان النص عبر الجهات الأربع نسبةً إلى مكانها الأصلي ، أمَّا الثانية بالنسبة لوضعٍ مستقل أعلى الصفحة أقصى اليسار .

2- بقيَّة الخواصّ المكتوبة في الكود السابق هي لتنسيق الخطِّ فقط .

وبهذا نكون قد انتهينا من تنسيق الهيدر ، عيَّنا له صورة وعنوان ووصف وقمنا بتنسيقها .

.

.

.

2- الـ أزرار أو buttons :

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

فكرتها تقوم على تصميم زرّ واحد توجد فيه كلا الخلفيتين ، بهذه الطريقة :

كيف أصمِّم هذا الزر ؟

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

الآن قم برسم شكل الزرِّ الَّذي تودُّ ظهور في الوضع الطبيعي في الأعلى ، وانسخه إلى الأسفل وغيِّر تأثيراته للزرِّ الَّذي تودُّ ظهوره ساعة تمرير الماوس عليه كما رأيتَ في الصورة السابقة .

فكرة الزر :

يظهر للزائر الجزء العلوي فقط من التصميم وذلك بتحديد خاصيَّة الطول height بـ 35 بكسل – مثلاً – ، وعند تمرير الماوس عليه يتمُّ استخدام الخاصيَّة top أو bottom لرفع الجزء السفلي من الصورة .

للأمانة هذه الطريقة تعلُّمتها من أستاذ الـCSS الكبير / كتوم .

أولاً .. أحبُّ أن أذكِّر بكود الـHTML الخاص بهذه الأزرار :

لدينا وسم <a> حُدِّدت له الفئة button ، ويتوسطه عنوان الزر بين وسمي <span> .

سوف نقوم بتحديد خصائص خلفية الزر عبر الكلاس button. ، وخصائص الخلفية لحظة تمرير الماوس عليه باستخدام الـ :hover ، وخصائص العنوان عبر الـ المحدد button span. ، وخصائص العنوان لحظة تمرير الماوس عليه button span:hover .

كود css للفئة button :

1- كما تلاحظون ، خصصنا القيمة 44بكسل لطول الزر ، وهذا يعتمد على تصميمك ، ضع في البداية طول تقريبي ثمَّ تحكم بزيادته أو نقصانه حتَّى تصل للمظهر المطلوب .

حدَّدنا أيضًا خاصية العرض بـ150 بكسل .

2- خاصية float :

هل هذه هي المرَّة الأولى الَّتي تصادفون فيها خاصيَّة float ؟! .

حسنًا ، هذه الخاصيَّة مسؤولة عن تحويل العنصر من اليمين إلى اليسار أو العكس مع المحافظة على العنصر الَّذي يليه بمحاذاته في الجهة الأخرى .

بمعنى / لديَّ العنصر أ ثمَّ مباشرةً في نفس المستوى العنصر ب ، خصصتُ لـ أ الخاصية float بقيمة left ، سوف يتجه ب تلقائيًا للجهة اليمنى من أ .

وفي مثالنا هذا ، كلُّ زرٍ سوف يتجه إلى الجهة اليسرى ، ويتجه الزر الذي يليه إلى يمينه .. | يا رب فهمتوني عارفة .. فشلت في شرحها 😦 | .

شاهد مثال عن float من w3schools ..

3- خاصيَّة background-image لتحديد خلفية الزر ، وخاصية background-repeat بقيمة no-repeat لمنع تكرار الخلفية على الزر .

4- خاصيَّة text-decoration بقيمة none لمنع ظهور الخط أسفل النصَّ والَّذي يظهر تلقائيًا في الوصلات التشعبية ، وخاصيَّة text-align بقيمة center لتحديد محاذاة النص في الجهة الوسطى .

الآن ، ما الَّذي سوف يتغيَّر عندما أمرر الماوس على هذا الزر ؟ .. أو بعبارة أخرى / ماذا سوف أضمن الـpseudo class المسماة hover :

1- خاصيتا background-image و background-repeat لم تتغيَّرا هنا .

2- لنفهم معًا خاصيَّة background-position :

قبل قليل كنَّا نتحدَّث عن خاصيَّة Position المسؤولة عن تحديد مكانٍ ما للعناصر ، ببساطة خاصيَّة background-position تؤدِّي ذات الوظيفة بالنسبة للخلفيات وليس العناصر .

قيم هذه الخاصيَّة تختلف تمامًا عن قيم خاصية position الخاصَّة بالكائنات ، فهي تحمل قيمتين – يمكن الإستغناء عن إحداهما – القيمة الأولى تُحدِّد مكان الخلفية على المحور السيني ، والقيمة الثانية تحدد مكان الخلفية على المحور الصادي .

ولها 3 طرق للكتابة :

1- تحديد مكان الخلفية على المحور السيني عن طريق القيم left – right – center ، وعلى المحور الصادي top – bottom – center .

القيمة الإفتراضية هي : left top ، أي أقصى الشمال .. أقصى اليسار ، لكن إذا قمتَ بتحديد إحدى هاتين القيمتين ولم تحدد الأخرى فإنَّها تصبح تلقائيًا : center ، كمثال:

background-position:left

في هذا المثال ، الخلفية سوف تكون أقصى اليسار على المحور السيني .. وفي المنتصف تمامًا من المحور الصادي .

2- تحديد مكان الخلفية عن طريق التعامل بالنسبة المئوية ، مثلاً :

background-position:30% 40%

هذا يعني أنَّ الخلفية ستكون على بعد 30% من يسار العنصر ، و40% من أعلاه .

3- تحديد مكان الخلفية بالبكسل كما فعلنا في الكود السابق :

background-position:0px -43px

هذا يعني أنَّ الخلفية سوف لن تتحرَّك على المحور السيني ، وسوف تتحرَّك على المحور الصادي بمقدار -43 بكسل أي سوف تتجه إلى الأعلى بهذه القيمة .

هذا ما نريده هنا ، أن يتحرَّك الزر إلى أعلى بقيمة 43 بكسل كي يظهر أسفل التصميم .

طبعًا أنا وضعت قيمة تقريبيَّة في البداية لذلك، أظن -37 بكسل ، ثمَّ بدأتُ أغيِّرها حتى وصلت للمظهر الَّذي أريده .

3- حدَّدت للخاصيَّة text-decoration قيمة none لأنني كما أسلفت لا أريد ظهور خط أسفل الرابط التشعبي .

.

.

هذا هو الكود الخاصّ بالنص الذي يظهر على الزر في الحالة الطبيعية قبل مرور المؤشر عليه .

قبل أن أكتبه لاحظتُ بأنَّ الكلمات تظهر في مسافة محاذية لأسفل الزر ، فقررتُ وضع الخاصيَّة position بقيمة relative كي أتمكَّن من تحريك الكلمات إلى مسافةٍ أعلى بقيمة 15 بكسل ، أنا استخدمت الخاصيَّة bottom بقيمةٍ سالبة وكان باستطاعتي أيضًا استخدام top بقيمة موجبة ، لكن لا أعرف لماذا أحبُّ الأعداد السالبة 🙂 .

خاصيَّتي color و font-weight لتنسيق لون النصّ ومنحه عرضًا أكبر .

.

.


وهذا كود نصَّ الأزرار لحظة مرور المؤشر عليها ، قمتُ بتغيير لون الخط من الأزرق إلى الأورانجي فقط .

بقليلٍ من الإبداع – والوقت – تستطيع ابتكار أشكال جميلة ، مدهشة ، وخلاَّقة للأزرار ، css توفر لك الأدوات التي تحتاجها ، وكل ما عليك أن تبتكر الجديد في تصميمك عند صناعة أزاريره .

هذا وإنه قد انتهى الدرس الخامس بعد كم يوم من بدئ كتابته ..

هذا وإنني قد صدَّعتُ جدًا 😦 .

Advertisements

11 responses »

  1. مرحبا اختي احسان

    مجرد مرور ولي عودة للاستفادة ان شاء الله

    بخصوص كلمة هيدر شو رايك في كلمة

    الفاصل الرأسي او البنر الرأسي محاولة للمشاركة واصلي اختي:)

  2. شكرا جزيلا على الدرس
    بخصوص معنى HEADER اعتقد تعني : ” الواجهة الرئيسية” للموقع

  3. السلام عليكم ورحمة الله وبركاته..
    جزاك الله حيرا على كل ما تقدمينه من شروحات أختي الكريمة إحسان..
    درس جميل منك..
    بالنسبة لكلمة header فتبدو مشتقة من head وعليه يمكن أن يكون مقابلا لها بالعربية “رأس الصفحة”، ولو أنني شاهدت في بعض تعريبات برامج إدارة المحتوى (ك drupal مثلا) أنهم يعربونها بمصطلح “ترويسة”، لكنني شخصيا أرى عبارة “رأس الصفحة” أجمل ولو كانت أطول..
    قد تكون لي عودة إلى هنا إن شاء الله..
    موفقة ومني لك أرق تحية..

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

  5. مرحباً احسان 🙂

    تابعت وما زلت متابعاً لدروسك .. وان شاء الله استفيد منها

    بالنسبة للملاحضة في بداية الدرس , مصطلحheader , نستطيع تعريبها بكلمة المقدمة , أو رأس الموقع .. ربما تسميات ليست دقيقة , لكن هذا تعريبي 😐

    شكرا لك على الدرس ! , وان شاء الله الاقي الفرصة في تطبيق دروسك كلها

    موفقة ان شاء الله

  6. شكرا لكِ مرة اخرى
    تم بفضل الله تطبيق الدرس بنجاح
    في انتظار الدرس القادم

  7. شكرًا للجميع المرور والإهتمام .

    لا أحد يعلم مقدار سعادتي عندما أعرف بأنَّ هناكـ من استفاد من هذه الدروس .

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

    إذا كان لديكـ ما تريد قوله ، فإنَّ المدونات وًضعت لذلك ، بالمجَّان إذا أردتَ أيضًا !

  8. احسان ما يبغالها كلام header بالعربي >>>>>هيدر
    امزح بس اظن انسب تعريب رأس الصفحة
    بس لا تحاولي احنا في عصر العربيزي الواحد صار يتكلم الجملة نصها عربي ونصها انجليزي شفت قبل مدة برنامج في التلفزيون عن العربي وكيف اتحول لعربيزي تخيلي يبغوني اقول للريموت … حاكوم
    ما احلاني وا نا اقول “يا محمد ناولني الحاكوم”
    خخخخخخخ

  9. هههههههههههه
    فاطمة الله يرج إبليسك يا حاكوم 😀
    عجبتني ” بنت كلاسك ” ، قاعدة أقول : إيش ده ؟ .. قصدها بنت كلاسيكية !.
    توني أستوعبها هههههههههه
    بعدين مش اسمها : كلاسك ، اسمها شعبتك >> من يوم دخلت الجامعة ما سمعت المفردة هذي !

    يا هلا فيكِ دوم مو يوم ، وفي القلب قبل المدونة يا ..
    يا حاكوم << الله يعينك عاد !

  10. Header = ترويسة.

    أنصحكِ دوماً بالمرور على القاموس التقني لفرقة عيون العرب، حين يستعصي عليك تعريب أي مصطلح تقنيٍّ:
    http://wiki.arabeyes.org/القاموس_التقني

    وبالمناسبة.. لا داعي للضحك كثيراً من “حاكوم”، المشكلة فقط أنك لم تعتادي عليها، والكلمات تُسبك بالتعوُّد.

  11. مرحبا احسان الله يسعد ايامك انا معجب كتير باعمالك الرئعة كتيررر
    وعبتابع كل دروس وبس اتاخرتي علينا كتيررر في تكملت دروس دورةة css
    وانا في انتظار التكملة والله لا يحرمنا من اعمالك تسلمي كتيرررررررر

اترك رد

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s